npm - @smileid/web-components - Versions diffs - 2.0.1 → 10.0.0 - Mend

@smileid/web-components 2.0.1 → 10.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (125) hide show

package/dist/TotpConsent-CQU5jQi4.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"TotpConsent-CQU5jQi4.js","sources":["../lib/components/totp-consent/src/TotpConsent.js"],"sourcesContent":["import validate from 'validate.js';\r\n\r\nfunction postData(url, data) {\r\n return fetch(url, {\r\n body: JSON.stringify(data),\r\n cache: 'no-cache',\r\n headers: {\r\n Accept: 'application/json',\r\n 'Content-Type': 'application/json',\r\n },\r\n method: 'POST',\r\n mode: 'cors',\r\n });\r\n}\r\n\r\nfunction markup() {\r\n return `\r\n <style>\r\n *,\r\n *::before,\r\n *::after {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n :host {\r\n --flow-space: 1.5rem;\r\n\r\n --color-dark: #404040;\r\n --color-grey: #555B69;\r\n\r\n --color-success: #1EB244;\r\n --color-failure: #FFEDEB;\r\n --color-failure-tint: #F86B58;\r\n\r\n --color-richblue: #043C93;\r\n --color-theme: ${this.themeColor};\r\n\r\n --color-active: #2D2B2A;\r\n --color-default: #001096;\r\n --color-disabled: #848282;\r\n }\r\n\r\n html {\r\n font-family: 'DM Sans', sans-serif;\r\n }\r\n\r\n [hidden] {\r\n display: none !important;\r\n }\r\n\r\n [disabled] {\r\n cursor: not-allowed !important;\r\n }\r\n\r\n .visually-hidden {\r\n border: 0;\r\n clip: rect(1px 1px 1px 1px);\r\n clip: rect(1px, 1px, 1px, 1px);\r\n height: auto;\r\n margin: 0;\r\n overflow: hidden;\r\n padding: 0;\r\n position: absolute;\r\n white-space: nowrap;\r\n width: 1px;\r\n }\r\n\r\n .color-dark {\r\n color: var(--color-dark);\r\n }\r\n\r\n .color-grey {\r\n color: var(--color-grey);\r\n }\r\n\r\n .flow > * + * {\r\n margin-top: var(--flow-space);\r\n }\r\n\r\n .center {\r\n margin-left: auto;\r\n margin-right: auto;\r\n\r\n text-align: center;\r\n }\r\n\r\n h1 {\r\n font-size: 1.5rem;\r\n font-weight: 700;\r\n }\r\n\r\n button, input, select, textarea {\r\n font: inherit\r\n }\r\n\r\n label,\r\n input,\r\n select,\r\n textarea {\r\n --flow-space: .5rem;\r\n display: block;\r\n width: 100%;\r\n }\r\n\r\n input,\r\n select,\r\n textarea {\r\n border: 1px solid #d1d8d6;\r\n border-radius: .5rem;\r\n padding: .75rem 1rem;\r\n }\r\n\r\n button {\r\n --button-color: var(--color-default);\r\n --flow-space: 3rem;\r\n -webkit-appearance: none;\r\n -moz-appearance: none;\r\n align-items: center;\r\n appearance: none;\r\n background-color: transparent;\r\n border-radius: 2.5rem;\r\n border: none;\r\n color: #ffffff;\r\n cursor: pointer;\r\n display: inline-flex;\r\n font-size: 20px;\r\n font-weight: 500;\r\n inline-size: 100%;\r\n justify-content: center;\r\n letter-spacing: .05ch;\r\n line-height: 1;\r\n padding: 1rem 2.5rem;\r\n text-align: center;\r\n text-decoration: none;\r\n }\r\n\r\n button[data-variant='solid'] {\r\n background-color: var(--button-color);\r\n border: 2px solid var(--button-color);\r\n }\r\n\r\n button[data-variant='outline'] {\r\n color: var(--button-color);\r\n border: 2px solid var(--button-color);\r\n }\r\n\r\n button[data-variant='ghost'] {\r\n color: var(--button-color);\r\n }\r\n\r\n button:hover,\r\n button:focus,\r\n button:active {\r\n --button-color: var(--color-active);\r\n }\r\n\r\n button:disabled {\r\n --button-color: var(--color-disabled);\r\n }\r\n\r\n button[data-type='icon'] {\r\n height: 2rem;\r\n padding: 0;\r\n width: 2rem;\r\n background: transparent;\r\n }\r\n\r\n input {\r\n font: inherit;\r\n }\r\n\r\n fieldset {\r\n margin: 0;\r\n border: none;\r\n }\r\n\r\n .font-weight:bold {\r\n font-weight: bold;\r\n }\r\n\r\n .justify-right {\r\n justify-content: end !important;\r\n }\r\n .nav {\r\n display: flex;\r\n justify-content: space-between;\r\n }\r\n\r\n .back-wrapper {\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n .back-button-text {\r\n font-size: 11px;\r\n line-height: 11px;\r\n color: ${this.themeColor || 'rgb(21, 31, 114)'};\r\n }\r\n\r\n #error,\r\n .validation-message {\r\n color: red;\r\n text-transform: capitalize;\r\n }\r\n\r\n .input-group {\r\n --flow-space: 1.5rem;\r\n text-align: initial;\r\n }\r\n\r\n .input-radio {\r\n --flow-space: 1.5rem;\r\n background-color: #F8F8F8;\r\n border-radius: .5rem;\r\n padding: .625rem 1rem;\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n .otp-mode {\r\n display: flex;\r\n align-items: center;\r\n text-align: initial;\r\n }\r\n\r\n .otp-mode :first-child {\r\n margin: 0;\r\n margin-inline-end: 1rem;\r\n }\r\n\r\n .otp-mode :nth-child(2n) {\r\n --flow-space: .5rem;\r\n }\r\n\r\n .input-radio [type='radio'] {\r\n border-radius: 50%;\r\n inline-size: 2rem;\r\n block-size: 2rem;\r\n margin-inline-end: .5rem;\r\n background-color: white;\r\n border: .125rem solid #f5f5f5;\r\n }\r\n\r\n #totp-token {\r\n block-size: 3rem;\r\n inline-size: 20rem;\r\n max-inline-size: 100%;\r\n background-color: #F5F5F5;\r\n border: none;\r\n border-bottom: 2px solid #2F718D;\r\n font-size: 1.5rem;\r\n text-align: center;\r\n font-weight: 700;\r\n letter-spacing: 2rem;\r\n padding: .5rem 1rem;\r\n margin-inline: auto;\r\n }\r\n\r\n @keyframes spin {\r\n 0% {\r\n transform: translate3d(-50%, -50%, 0) rotate(0deg);\r\n }\r\n 100% {\r\n transform: translate3d(-50%, -50%, 0) rotate(360deg);\r\n }\r\n }\r\n\r\n .spinner {\r\n animation: 1.5s linear infinite spin;\r\n animation-play-state: inherit;\r\n border: solid 5px #cfd0d1;\r\n border-bottom-color: var(--color-active);\r\n border-radius: 50%;\r\n content: \"\";\r\n display: block;\r\n height: 25px;\r\n width: 25px;\r\n will-change: transform;\r\n position: relative;\r\n top: .675rem;\r\n left: 1.25rem;\r\n }\r\n </style>\r\n\r\n <div class='flow center' id='id-entry'>\r\n <div class=\"nav\">\r\n <div class=\"back-wrapper\">\r\n <button type='button' data-type='icon' id=\"back-button\" class=\"back-button\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\">\r\n <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\"/>\r\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\"/>\r\n </svg>\r\n </button>\r\n <div class=\"back-button-text\">Back</div>\r\n </div>\r\n <button data-type='icon' type='button' class='close-iframe'>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\">\r\n <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\"/>\r\n <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\"/>\r\n </svg>\r\n <span class='visually-hidden'>Close SmileIdentity Verification frame</span>\r\n </button>\r\n </div>\r\n <h1>\r\n Enter your ${this.idTypeLabel}\r\n </h1>\r\n\r\n <form name='id-entry-form' class='flow' novalidate style='--flow-space: 5.5rem'>\r\n <div id='id-number' class=\"input-group flow\">\r\n <label class='required' for=\"id_number\">\r\n ${this.idTypeLabel}\r\n </label>\r\n\r\n <input aria-required='true' id=\"id_number\" name=\"id_number\"\r\n maxlength='11' placeholder='' />\r\n\r\n <p>\r\n <small>${this.idHint}</small>\r\n </p>\r\n </div>\r\n\r\n <button data-variant='solid' id='query-otp-modes' type='submit'>\r\n <span class='text'>Continue</span>\r\n <svg aria-hidden='true' width=\"25\" height=\"24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M7 12h11m0 0-4.588-4M18 12l-4.588 4\" stroke=\"#fff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span hidden class='spinner'></span>\r\n </button>\r\n </form>\r\n </div>\r\n\r\n <div hidden class='flow center' id='select-mode'>\r\n <div class=\"nav\">\r\n <div class=\"back-wrapper\">\r\n <button type='button' data-type='icon' id=\"back-to-entry-button\" class=\"back-button\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\">\r\n <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\"/>\r\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\"/>\r\n </svg>\r\n </button>\r\n <div class=\"back-button-text\">Back</div>\r\n </div>\r\n <button data-type='icon' type='button' class='close-iframe'>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\">\r\n <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\"/>\r\n <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\"/>\r\n </svg>\r\n <span class='visually-hidden'>Close SmileIdentity Verification frame</span>\r\n </button>\r\n </div>\r\n <h1>\r\n Select contact method\r\n </h1>\r\n\r\n <form name='select-mode-form' novalidate style='--flow-space: 4.25rem' id='otp-entry' class='flow center'>\r\n <fieldset class='flow center'>\r\n <legend class='flow' style='--flow-space: 1.5rem'>\r\n <p>\r\n NIBSS, the data custodian of BVN, \r\n will send you a One-Time Password (OTP) \r\n </p>\r\n\r\n <p>\r\n <small>\r\n The request will be from Chams Plc, who is NIBSS' technical partner.\r\n </small>\r\n </p>\r\n </legend>\r\n\r\n <div class='flow center'>\r\n ${\r\n this.modes.length\r\n ? this.modes\r\n .map(\r\n (mode) => `<label class='input-radio'>\r\n <input type=\"radio\" id=\"\" name=\"mode\" value=\"${Object.keys(mode)[0]}\">\r\n <div class='otp-mode'>\r\n ${\r\n Object.keys(mode)[0].includes('sms')\r\n ? `\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"29\" height=\"37\" fill=\"none\">\r\n <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\"/>\r\n <g filter=\"url(#sms)\">\r\n <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\"/>\r\n </g>\r\n <defs>\r\n <filter id=\"sms\" width=\"20.023\" height=\"15.595\" x=\"1.675\" y=\"21.005\" color-interpolation-filters=\"sRGB\" filterUnits=\"userSpaceOnUse\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n <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\"/>\r\n <feOffset dy=\"4\"/>\r\n <feGaussianBlur stdDeviation=\"2\"/>\r\n <feComposite in2=\"hardAlpha\" operator=\"out\"/>\r\n <feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0\"/>\r\n <feBlend in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_2_404\"/>\r\n <feBlend in=\"SourceGraphic\" in2=\"effect1_dropShadow_2_404\" result=\"shape\"/>\r\n </filter>\r\n </defs>\r\n </svg>\r\n `\r\n : `\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"24\" fill=\"none\">\r\n <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\"/>\r\n <g filter=\"url(#message)\">\r\n <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\"/>\r\n </g>\r\n <defs>\r\n <filter id=\"message\" width=\"34.042\" height=\"18.154\" x=\".676\" y=\"2.316\" color-interpolation-filters=\"sRGB\" filterUnits=\"userSpaceOnUse\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n <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\"/>\r\n <feOffset dy=\"4\"/>\r\n <feGaussianBlur stdDeviation=\"2\"/>\r\n <feComposite in2=\"hardAlpha\" operator=\"out\"/>\r\n <feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0\"/>\r\n <feBlend in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_2_394\"/>\r\n <feBlend in=\"SourceGraphic\" in2=\"effect1_dropShadow_2_394\" result=\"shape\"/>\r\n </filter>\r\n </defs>\r\n </svg>\r\n `\r\n }\r\n <div class='flow'>\r\n <p>\r\n ${Object.values(mode)[0]}\r\n </p>\r\n <p>\r\n <small>\r\n An OTP will be sent by ${\r\n Object.keys(mode)[0].includes(\r\n 'sms',\r\n )\r\n ? 'sms'\r\n : 'email'\r\n } to verify your identity\r\n </small>\r\n </p>\r\n </div>\r\n </div>\r\n </label>`,\r\n )\r\n .join('\\n')\r\n : 'No modes yet'\r\n }\r\n </div>\r\n </fieldset>\r\n\r\n <button data-variant='ghost' id='contact-methods-outdated' style='--flow-space: .5rem' class='' type='button'>\r\n I am no longer using any of these options\r\n </button>\r\n\r\n <button data-variant='solid' id='select-otp-mode' type='submit'>\r\n <span class='text'>Continue</span>\r\n <svg aria-hidden='true' width=\"25\" height=\"24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M7 12h11m0 0-4.588-4M18 12l-4.588 4\" stroke=\"#fff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span hidden class='spinner'></span>\r\n </button>\r\n </form>\r\n </div>\r\n\r\n <div hidden class='flow center' id='otp-verification'>\r\n <div class=\"nav justify-right\">\r\n <button data-type='icon' type='button' class='close-iframe'>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\">\r\n <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\"/>\r\n <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\"/>\r\n </svg>\r\n <span class='visually-hidden'>Close SmileIdentity Verification frame</span>\r\n </button>\r\n </div>\r\n <h1>\r\n OTP Verification\r\n </h1>\r\n\r\n <div style='--flow-space: 4.25rem' id='otp-entry'>\r\n <form name='otp-submission-form' novalidate style='--flow-space: 1.5rem' class='flow center'>\r\n <label for='totp-token'>\r\n Enter the OTP sent to <span class='font-weight:bold'>${\r\n this.selectedOtpDeliveryMode\r\n }</span>\r\n </label>\r\n <input type='text' id='totp-token' maxlength='6' inputmode='numeric' autocomplete='one-time-code' />\r\n\r\n <p>\r\n Didn't receive the OTP${\r\n !this.selectedOtpDeliveryMode\r\n ? '?'\r\n : ` at <span class='font-weight:bold'>${this.selectedOtpDeliveryMode}</span>?`\r\n }\r\n </p>\r\n\r\n <button style='--flow-space: .5rem' data-variant='ghost' class='try-another-method' type='button'>\r\n Try another contact method\r\n </button>\r\n\r\n <button data-variant='solid' id='submit-otp' type='submit'>\r\n <span class='text'>Submit</span>\r\n <svg aria-hidden='true' width=\"25\" height=\"24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M7 12h11m0 0-4.588-4M18 12l-4.588 4\" stroke=\"#fff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span hidden class='spinner'></span>\r\n </button>\r\n </form>\r\n </div>\r\n </div>\r\n `;\r\n}\r\n\r\nclass TotpConsent extends HTMLElement {\r\n constructor() {\r\n super();\r\n\r\n this.templateString = markup.bind(this);\r\n this.render = () => this.templateString();\r\n\r\n this.attachShadow({ mode: 'open' });\r\n\r\n this.modes = [];\r\n this['otp-delivery-mode'] = '';\r\n\r\n this.queryOtpModes = this.queryOtpModes.bind(this);\r\n this.selectOtpMode = this.selectOtpMode.bind(this);\r\n this.submitOtp = this.submitOtp.bind(this);\r\n this.switchContactMethod = this.switchContactMethod.bind(this);\r\n this.handleTotpConsentGrant = this.handleTotpConsentGrant.bind(this);\r\n this.handleTotpConsentContactMethodsOutdated =\r\n this.handleTotpConsentContactMethodsOutdated.bind(this);\r\n this.pages = [];\r\n }\r\n\r\n static get observedAttributes() {\r\n return ['modes', 'otp-delivery-mode'];\r\n }\r\n\r\n attributeChangedCallback(name) {\r\n switch (name) {\r\n case 'modes':\r\n case 'otp-delivery-mode': {\r\n const updatedTemplate = document.createElement('template');\r\n updatedTemplate.innerHTML = this.render();\r\n const updatedNode = updatedTemplate.content\r\n .cloneNode(true)\r\n .querySelector(`#${this.activeScreen.id}`);\r\n updatedNode.hidden = false;\r\n this.shadowRoot.replaceChild(updatedNode, this.activeScreen);\r\n this.setUpEventListeners();\r\n this.setActiveScreen(updatedNode);\r\n break;\r\n }\r\n default:\r\n break;\r\n }\r\n }\r\n\r\n setUpEventListeners() {\r\n // Screens\r\n this.idEntryScreen = this.shadowRoot.querySelector('#id-entry');\r\n this.selectModeScreen = this.shadowRoot.querySelector('#select-mode');\r\n this.otpVerificationScreen =\r\n this.shadowRoot.querySelector('#otp-verification');\r\n\r\n if (!this.activeScreen) {\r\n this.activeScreen = this.idEntryScreen;\r\n }\r\n\r\n // Buttons\r\n this.queryOtpModesButton =\r\n this.idEntryScreen.querySelector('#query-otp-modes');\r\n this.backButton = this.idEntryScreen.querySelector('#back-button');\r\n this.selectOtpModeButton =\r\n this.selectModeScreen.querySelector('#select-otp-mode');\r\n this.entryBackbutton = this.selectModeScreen.querySelector(\r\n '#back-to-entry-button',\r\n );\r\n this.contactMethodsOutdatedButton = this.selectModeScreen.querySelector(\r\n '#contact-methods-outdated',\r\n );\r\n this.submitOtpButton =\r\n this.otpVerificationScreen.querySelector('#submit-otp');\r\n this.switchContactMethodButton = this.otpVerificationScreen.querySelector(\r\n '.try-another-method',\r\n );\r\n const CloseIframeButtons =\r\n this.shadowRoot.querySelectorAll('.close-iframe');\r\n\r\n // Input Elements\r\n this.idNumberInput = this.idEntryScreen.querySelector('#id_number');\r\n this.modeInputs = this.selectModeScreen.querySelectorAll('[name=\"mode\"]');\r\n this.otpInput = this.otpVerificationScreen.querySelector('#totp-token');\r\n\r\n // Event Handlers\r\n this.queryOtpModesButton.addEventListener('click', (e) =>\r\n this.queryOtpModes(e),\r\n );\r\n this.selectOtpModeButton.addEventListener('click', (e) =>\r\n this.selectOtpMode(e),\r\n );\r\n this.submitOtpButton.addEventListener('click', (e) => this.submitOtp(e));\r\n this.switchContactMethodButton.addEventListener('click', (e) =>\r\n this.switchContactMethod(e),\r\n );\r\n this.contactMethodsOutdatedButton.addEventListener('click', (e) =>\r\n this.handleTotpConsentContactMethodsOutdated(e),\r\n );\r\n\r\n this.entryBackbutton.addEventListener('click', () => {\r\n this.handleBackClick();\r\n });\r\n\r\n this.backButton.addEventListener('click', () => {\r\n this.handleBackClick();\r\n });\r\n\r\n CloseIframeButtons.forEach((button) => {\r\n button.addEventListener(\r\n 'click',\r\n () => {\r\n this.closeWindow();\r\n },\r\n false,\r\n );\r\n });\r\n }\r\n\r\n closeWindow() {\r\n const referenceWindow = window.parent;\r\n [referenceWindow.parent, referenceWindow].forEach((win) => {\r\n win.postMessage('SmileIdentity::Close', '*');\r\n });\r\n }\r\n\r\n handleBackClick() {\r\n const page = this.pages.pop();\r\n if (page) {\r\n this.setActiveScreen(page);\r\n } else {\r\n this.dispatchEvent(\r\n new CustomEvent('end-user-consent.totp.cancelled', {}),\r\n );\r\n }\r\n }\r\n\r\n connectedCallback() {\r\n const template = document.createElement('template');\r\n template.innerHTML = this.render();\r\n\r\n this.shadowRoot.appendChild(template.content.cloneNode(true));\r\n this.setUpEventListeners();\r\n }\r\n\r\n switchContactMethod() {\r\n this.queryOtpModes();\r\n }\r\n\r\n resetForm() {\r\n const invalidElements =\r\n this.activeScreen.querySelectorAll('[aria-invalid]');\r\n invalidElements.forEach((el) => el.removeAttribute('aria-invalid'));\r\n\r\n const validationMessages = this.activeScreen.querySelectorAll(\r\n '.validation-message',\r\n );\r\n validationMessages.forEach((el) => el.remove());\r\n }\r\n\r\n handleIdNumberValidationErrors(errors) {\r\n const fields = Object.keys(errors);\r\n\r\n fields.forEach((field) => {\r\n const input = this.activeScreen.querySelector(`#${field}`);\r\n input.setAttribute('aria-invalid', 'true');\r\n input.setAttribute('aria-describedby', `${field}-hint`);\r\n\r\n const errorDiv = document.createElement('div');\r\n errorDiv.setAttribute('id', `${field}-hint`);\r\n errorDiv.setAttribute('class', 'validation-message');\r\n // eslint-disable-next-line prefer-destructuring\r\n errorDiv.textContent = errors[field][0];\r\n\r\n input.insertAdjacentElement('afterend', errorDiv);\r\n });\r\n }\r\n\r\n handleActiveScreenErrors(error) {\r\n const submitButton = this.activeScreen.querySelector('[type=\"submit\"]');\r\n const errorDiv = document.createElement('div');\r\n errorDiv.setAttribute('class', 'validation-message');\r\n errorDiv.textContent = error;\r\n submitButton.insertAdjacentElement('beforebegin', errorDiv);\r\n }\r\n\r\n validateIdNumber(idNumber) {\r\n const validationConstraints = {\r\n id_number: {\r\n format: new RegExp(this.idRegex),\r\n presence: {\r\n allowEmpty: false,\r\n message: 'is required',\r\n },\r\n },\r\n };\r\n\r\n const errors = validate({ id_number: idNumber }, validationConstraints);\r\n\r\n if (errors) {\r\n this.handleIdNumberValidationErrors(errors);\r\n }\r\n\r\n return errors;\r\n }\r\n\r\n async queryOtpModes(event) {\r\n if (event) {\r\n // ACTION: disable another submission\r\n event.preventDefault();\r\n\r\n // ACTION: Reset any form validation errors'\r\n this.resetForm();\r\n }\r\n\r\n // ACTION: Validate idNumber\r\n const validationErrors = this.validateIdNumber(this.idNumberInput.value);\r\n\r\n // ACTION: Get and set idNumber\r\n localStorage.setItem('idNumber', this.idNumberInput.value || this.idNumber);\r\n\r\n if (!validationErrors) {\r\n const data = {\r\n country: this.country,\r\n id_number: this.idNumber,\r\n id_type: this.idType,\r\n partner_id: this.partnerId,\r\n token: this.token,\r\n };\r\n const url = `${this.baseUrl}/totp_consent`;\r\n\r\n try {\r\n this.toggleLoading();\r\n const response = await postData(url, data);\r\n const json = await response.json();\r\n this.toggleLoading();\r\n\r\n if (!response.ok) {\r\n this.handleActiveScreenErrors(json.error);\r\n } else {\r\n this.sessionId = json.session_id;\r\n this.modes = json.modes;\r\n this.setActiveScreen(this.selectModeScreen);\r\n this.setAttribute('modes', json.modes);\r\n }\r\n } catch (error) {\r\n this.toggleLoading();\r\n this.handleActiveScreenErrors(error.message);\r\n }\r\n }\r\n }\r\n\r\n async selectOtpMode(event) {\r\n // ACTION: disable another submission\r\n event.preventDefault();\r\n\r\n // ACTION: Reset any form validation errors'\r\n this.resetForm();\r\n\r\n // ACTION: Get mode\r\n this.mode = Array.prototype.find.call(\r\n this.modeInputs,\r\n (node) => node.checked,\r\n ).value;\r\n const data = {\r\n country: this.country,\r\n id_number: this.idNumber,\r\n id_type: this.idType,\r\n mode: this.mode,\r\n partner_id: this.partnerId,\r\n session_id: this.sessionId,\r\n token: this.token,\r\n };\r\n const url = `${this.baseUrl}/totp_consent/mode`;\r\n\r\n try {\r\n this.toggleLoading();\r\n const response = await postData(url, data);\r\n const json = await response.json();\r\n this.toggleLoading();\r\n\r\n if (!response.ok) {\r\n this.handleActiveScreenErrors(json.error);\r\n } else {\r\n this.selectedOtpDeliveryMode = this.modes.filter(\r\n (mode) => mode[this.mode],\r\n )[0][this.mode];\r\n this.setActiveScreen(this.otpVerificationScreen);\r\n this.setAttribute('otp-delivery-mode', this.selectedOtpDeliveryMode);\r\n }\r\n } catch (error) {\r\n this.toggleLoading();\r\n this.handleActiveScreenErrors(error.message);\r\n }\r\n }\r\n\r\n async submitOtp(event) {\r\n // ACTION: disable another submission\r\n event.preventDefault();\r\n\r\n // ACTION: Reset any form validation errors'\r\n this.resetForm();\r\n\r\n this.otp = this.otpInput.value;\r\n\r\n const data = {\r\n country: this.country,\r\n id_number: this.idNumber,\r\n id_type: this.idType,\r\n otp: this.otp,\r\n partner_id: this.partnerId,\r\n session_id: this.sessionId,\r\n token: this.token,\r\n };\r\n const url = `${this.baseUrl}/totp_consent/otp`;\r\n\r\n try {\r\n this.toggleLoading();\r\n const response = await postData(url, data);\r\n const json = await response.json();\r\n this.toggleLoading();\r\n\r\n if (!response.ok) {\r\n this.handleActiveScreenErrors(json.error);\r\n } else {\r\n this.handleTotpConsentGrant(event);\r\n }\r\n } catch (error) {\r\n this.toggleLoading();\r\n this.handleActiveScreenErrors(error.message);\r\n }\r\n }\r\n\r\n toggleLoading() {\r\n const button = this.activeScreen.querySelector('button[type=\"submit\"]');\r\n const text = button.querySelector('.text');\r\n const arrow = button.querySelector('svg');\r\n const spinner = button.querySelector('.spinner');\r\n\r\n button.toggleAttribute('disabled');\r\n text.toggleAttribute('hidden');\r\n arrow.toggleAttribute('hidden');\r\n spinner.toggleAttribute('hidden');\r\n }\r\n\r\n setActiveScreen(screen) {\r\n this.activeScreen.hidden = true;\r\n screen.hidden = false;\r\n this.activeScreen = screen;\r\n }\r\n\r\n get baseUrl() {\r\n return this.getAttribute('base-url');\r\n }\r\n\r\n get country() {\r\n return this.getAttribute('country');\r\n }\r\n\r\n get idHint() {\r\n return this.getAttribute('id-hint') || 'Your BVN should be 11 digits long';\r\n }\r\n\r\n get idNumber() {\r\n return localStorage.getItem('idNumber');\r\n }\r\n\r\n get idRegex() {\r\n return this.getAttribute('id-regex');\r\n }\r\n\r\n get idType() {\r\n return this.getAttribute('id-type');\r\n }\r\n\r\n get idTypeLabel() {\r\n return this.getAttribute('id-type-label');\r\n }\r\n\r\n get partnerId() {\r\n return this.getAttribute('partner-id');\r\n }\r\n\r\n get partnerName() {\r\n return this.getAttribute('partner-name');\r\n }\r\n\r\n get token() {\r\n return this.getAttribute('token');\r\n }\r\n\r\n get themeColor() {\r\n return this.getAttribute('theme-color') || '#001096';\r\n }\r\n\r\n get hideBack() {\r\n return this.hasAttribute('hide-back');\r\n }\r\n\r\n get showNavigation() {\r\n return this.hasAttribute('show-navigation');\r\n }\r\n\r\n handleTotpConsentGrant() {\r\n const customEvent = new CustomEvent('end-user-consent.totp.granted', {\r\n detail: {\r\n consented: {\r\n contact_information: true,\r\n document_information: true,\r\n personal_details: true,\r\n },\r\n id_number: this.idNumber,\r\n session_id: this.sessionId,\r\n },\r\n });\r\n\r\n this.dispatchEvent(customEvent);\r\n }\r\n\r\n handleTotpConsentContactMethodsOutdated() {\r\n const tag = 'end-user-consent.totp.denied.contact-methods-outdated';\r\n const customEvent = new CustomEvent(tag, {\r\n detail: {\r\n data: {\r\n id_number: this.idNumber,\r\n session_id: this.sessionId,\r\n },\r\n message: tag,\r\n },\r\n });\r\n\r\n this.dispatchEvent(customEvent);\r\n }\r\n}\r\n\r\nif ('customElements' in window && !window.customElements.get('totp-consent')) {\r\n window.customElements.define('totp-consent', TotpConsent);\r\n}\r\n\r\nexport {\r\n // eslint-disable-next-line import/prefer-default-export\r\n TotpConsent,\r\n};\r\n"],"names":["postData","url","data","markup","mode","TotpConsent","name","updatedTemplate","updatedNode","CloseIframeButtons","button","referenceWindow","win","page","template","el","errors","field","input","errorDiv","error","submitButton","idNumber","validationConstraints","validate","event","validationErrors","response","json","node","text","arrow","spinner","screen","customEvent","tag"],"mappings":";AAEA,SAASA,EAASC,GAAKC,GAAM;AAC3B,SAAO,MAAMD,GAAK;AAAA,IAChB,MAAM,KAAK,UAAUC,CAAI;AAAA,IACzB,OAAO;AAAA,IACP,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,gBAAgB;AAAA,IACjB;AAAA,IACD,QAAQ;AAAA,IACR,MAAM;AAAA,EACV,CAAG;AACH;AAEA,SAASC,IAAS;AAChB,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iCAqBwB,KAAK,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAiKvB,KAAK,cAAc,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0CA8FpB,KAAK,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAc5B,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAMnB,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iCAOT,KAAK,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0CAoBF,KAAK,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAkC/B,KAAK,MAAM,SACP,KAAK,MACF;AAAA,IACC,CAACC,MAAS;AAAA,+EACmC,OAAO,KAAKA,CAAI,EAAE,CAAC,CAAC;AAAA;AAAA,sCAG7D,OAAO,KAAKA,CAAI,EAAE,CAAC,EAAE,SAAS,KAAK,IAC/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wCAoBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qCAoBL;AAAA;AAAA;AAAA,8CAGS,OAAO,OAAOA,CAAI,EAAE,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,yEAKlB,OAAO,KAAKA,CAAI,EAAE,CAAC,EAAE;AAAA,MACnB;AAAA,IACD,IACG,QACA,OACL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMhB,EACA,KAAK;AAAA,CAAI,IACZ,cACL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+EAoCC,KAAK,uBACN;AAAA;AAAA;AAAA;AAAA;AAAA,gDAME,KAAK,0BAEF,sCAAsC,KAAK,uBAAuB,aADlE,GAEL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBzB;AAEA,MAAMC,UAAoB,YAAY;AAAA,EACpC,cAAc;AACZ,aAEA,KAAK,iBAAiBF,EAAO,KAAK,IAAI,GACtC,KAAK,SAAS,MAAM,KAAK,eAAc,GAEvC,KAAK,aAAa,EAAE,MAAM,OAAQ,CAAA,GAElC,KAAK,QAAQ,IACb,KAAK,mBAAmB,IAAI,IAE5B,KAAK,gBAAgB,KAAK,cAAc,KAAK,IAAI,GACjD,KAAK,gBAAgB,KAAK,cAAc,KAAK,IAAI,GACjD,KAAK,YAAY,KAAK,UAAU,KAAK,IAAI,GACzC,KAAK,sBAAsB,KAAK,oBAAoB,KAAK,IAAI,GAC7D,KAAK,yBAAyB,KAAK,uBAAuB,KAAK,IAAI,GACnE,KAAK,0CACH,KAAK,wCAAwC,KAAK,IAAI,GACxD,KAAK,QAAQ;EACd;AAAA,EAED,WAAW,qBAAqB;AAC9B,WAAO,CAAC,SAAS,mBAAmB;AAAA,EACrC;AAAA,EAED,yBAAyBG,GAAM;AAC7B,YAAQA,GAAI;AAAA,MACV,KAAK;AAAA,MACL,KAAK,qBAAqB;AACxB,cAAMC,IAAkB,SAAS,cAAc,UAAU;AACzD,QAAAA,EAAgB,YAAY,KAAK;AACjC,cAAMC,IAAcD,EAAgB,QACjC,UAAU,EAAI,EACd,cAAc,IAAI,KAAK,aAAa,EAAE,EAAE;AAC3C,QAAAC,EAAY,SAAS,IACrB,KAAK,WAAW,aAAaA,GAAa,KAAK,YAAY,GAC3D,KAAK,oBAAmB,GACxB,KAAK,gBAAgBA,CAAW;AAChC;AAAA,MACD;AAAA,IAGF;AAAA,EACF;AAAA,EAED,sBAAsB;AAEpB,SAAK,gBAAgB,KAAK,WAAW,cAAc,WAAW,GAC9D,KAAK,mBAAmB,KAAK,WAAW,cAAc,cAAc,GACpE,KAAK,wBACH,KAAK,WAAW,cAAc,mBAAmB,GAE9C,KAAK,iBACR,KAAK,eAAe,KAAK,gBAI3B,KAAK,sBACH,KAAK,cAAc,cAAc,kBAAkB,GACrD,KAAK,aAAa,KAAK,cAAc,cAAc,cAAc,GACjE,KAAK,sBACH,KAAK,iBAAiB,cAAc,kBAAkB,GACxD,KAAK,kBAAkB,KAAK,iBAAiB;AAAA,MAC3C;AAAA,IACN,GACI,KAAK,+BAA+B,KAAK,iBAAiB;AAAA,MACxD;AAAA,IACN,GACI,KAAK,kBACH,KAAK,sBAAsB,cAAc,aAAa,GACxD,KAAK,4BAA4B,KAAK,sBAAsB;AAAA,MAC1D;AAAA,IACN;AACI,UAAMC,IACJ,KAAK,WAAW,iBAAiB,eAAe;AAGlD,SAAK,gBAAgB,KAAK,cAAc,cAAc,YAAY,GAClE,KAAK,aAAa,KAAK,iBAAiB,iBAAiB,eAAe,GACxE,KAAK,WAAW,KAAK,sBAAsB,cAAc,aAAa,GAGtE,KAAK,oBAAoB;AAAA,MAAiB;AAAA,MAAS,CAAC,MAClD,KAAK,cAAc,CAAC;AAAA,IAC1B,GACI,KAAK,oBAAoB;AAAA,MAAiB;AAAA,MAAS,CAAC,MAClD,KAAK,cAAc,CAAC;AAAA,IAC1B,GACI,KAAK,gBAAgB,iBAAiB,SAAS,CAAC,MAAM,KAAK,UAAU,CAAC,CAAC,GACvE,KAAK,0BAA0B;AAAA,MAAiB;AAAA,MAAS,CAAC,MACxD,KAAK,oBAAoB,CAAC;AAAA,IAChC,GACI,KAAK,6BAA6B;AAAA,MAAiB;AAAA,MAAS,CAAC,MAC3D,KAAK,wCAAwC,CAAC;AAAA,IACpD,GAEI,KAAK,gBAAgB,iBAAiB,SAAS,MAAM;AACnD,WAAK,gBAAe;AAAA,IAC1B,CAAK,GAED,KAAK,WAAW,iBAAiB,SAAS,MAAM;AAC9C,WAAK,gBAAe;AAAA,IAC1B,CAAK,GAEDA,EAAmB,QAAQ,CAACC,MAAW;AACrC,MAAAA,EAAO;AAAA,QACL;AAAA,QACA,MAAM;AACJ,eAAK,YAAW;AAAA,QACjB;AAAA,QACD;AAAA,MACR;AAAA,IACA,CAAK;AAAA,EACF;AAAA,EAED,cAAc;AACZ,UAAMC,IAAkB,OAAO;AAC/B,KAACA,EAAgB,QAAQA,CAAe,EAAE,QAAQ,CAACC,MAAQ;AACzD,MAAAA,EAAI,YAAY,wBAAwB,GAAG;AAAA,IACjD,CAAK;AAAA,EACF;AAAA,EAED,kBAAkB;AAChB,UAAMC,IAAO,KAAK,MAAM,IAAG;AAC3B,IAAIA,IACF,KAAK,gBAAgBA,CAAI,IAEzB,KAAK;AAAA,MACH,IAAI,YAAY,mCAAmC,EAAE;AAAA,IAC7D;AAAA,EAEG;AAAA,EAED,oBAAoB;AAClB,UAAMC,IAAW,SAAS,cAAc,UAAU;AAClD,IAAAA,EAAS,YAAY,KAAK,UAE1B,KAAK,WAAW,YAAYA,EAAS,QAAQ,UAAU,EAAI,CAAC,GAC5D,KAAK,oBAAmB;AAAA,EACzB;AAAA,EAED,sBAAsB;AACpB,SAAK,cAAa;AAAA,EACnB;AAAA,EAED,YAAY;AAGV,IADE,KAAK,aAAa,iBAAiB,gBAAgB,EACrC,QAAQ,CAACC,MAAOA,EAAG,gBAAgB,cAAc,CAAC,GAEvC,KAAK,aAAa;AAAA,MAC3C;AAAA,IACN,EACuB,QAAQ,CAACA,MAAOA,EAAG,OAAQ,CAAA;AAAA,EAC/C;AAAA,EAED,+BAA+BC,GAAQ;AAGrC,IAFe,OAAO,KAAKA,CAAM,EAE1B,QAAQ,CAACC,MAAU;AACxB,YAAMC,IAAQ,KAAK,aAAa,cAAc,IAAID,CAAK,EAAE;AACzD,MAAAC,EAAM,aAAa,gBAAgB,MAAM,GACzCA,EAAM,aAAa,oBAAoB,GAAGD,CAAK,OAAO;AAEtD,YAAME,IAAW,SAAS,cAAc,KAAK;AAC7C,MAAAA,EAAS,aAAa,MAAM,GAAGF,CAAK,OAAO,GAC3CE,EAAS,aAAa,SAAS,oBAAoB,GAEnDA,EAAS,cAAcH,EAAOC,CAAK,EAAE,CAAC,GAEtCC,EAAM,sBAAsB,YAAYC,CAAQ;AAAA,IACtD,CAAK;AAAA,EACF;AAAA,EAED,yBAAyBC,GAAO;AAC9B,UAAMC,IAAe,KAAK,aAAa,cAAc,iBAAiB,GAChEF,IAAW,SAAS,cAAc,KAAK;AAC7C,IAAAA,EAAS,aAAa,SAAS,oBAAoB,GACnDA,EAAS,cAAcC,GACvBC,EAAa,sBAAsB,eAAeF,CAAQ;AAAA,EAC3D;AAAA,EAED,iBAAiBG,GAAU;AACzB,UAAMC,IAAwB;AAAA,MAC5B,WAAW;AAAA,QACT,QAAQ,IAAI,OAAO,KAAK,OAAO;AAAA,QAC/B,UAAU;AAAA,UACR,YAAY;AAAA,UACZ,SAAS;AAAA,QACV;AAAA,MACF;AAAA,IACP,GAEUP,IAASQ,EAAS,EAAE,WAAWF,EAAQ,GAAIC,CAAqB;AAEtE,WAAIP,KACF,KAAK,+BAA+BA,CAAM,GAGrCA;AAAA,EACR;AAAA,EAED,MAAM,cAAcS,GAAO;AACzB,IAAIA,MAEFA,EAAM,eAAc,GAGpB,KAAK,UAAS;AAIhB,UAAMC,IAAmB,KAAK,iBAAiB,KAAK,cAAc,KAAK;AAKvE,QAFA,aAAa,QAAQ,YAAY,KAAK,cAAc,SAAS,KAAK,QAAQ,GAEtE,CAACA,GAAkB;AACrB,YAAMxB,IAAO;AAAA,QACX,SAAS,KAAK;AAAA,QACd,WAAW,KAAK;AAAA,QAChB,SAAS,KAAK;AAAA,QACd,YAAY,KAAK;AAAA,QACjB,OAAO,KAAK;AAAA,MACpB,GACYD,IAAM,GAAG,KAAK,OAAO;AAE3B,UAAI;AACF,aAAK,cAAa;AAClB,cAAM0B,IAAW,MAAM3B,EAASC,GAAKC,CAAI,GACnC0B,IAAO,MAAMD,EAAS;AAC5B,aAAK,cAAa,GAEbA,EAAS,MAGZ,KAAK,YAAYC,EAAK,YACtB,KAAK,QAAQA,EAAK,OAClB,KAAK,gBAAgB,KAAK,gBAAgB,GAC1C,KAAK,aAAa,SAASA,EAAK,KAAK,KALrC,KAAK,yBAAyBA,EAAK,KAAK;AAAA,MAO3C,SAAQR,GAAO;AACd,aAAK,cAAa,GAClB,KAAK,yBAAyBA,EAAM,OAAO;AAAA,MAC5C;AAAA,IACF;AAAA,EACF;AAAA,EAED,MAAM,cAAcK,GAAO;AAEzB,IAAAA,EAAM,eAAc,GAGpB,KAAK,UAAS,GAGd,KAAK,OAAO,MAAM,UAAU,KAAK;AAAA,MAC/B,KAAK;AAAA,MACL,CAACI,MAASA,EAAK;AAAA,IAChB,EAAC;AACF,UAAM3B,IAAO;AAAA,MACX,SAAS,KAAK;AAAA,MACd,WAAW,KAAK;AAAA,MAChB,SAAS,KAAK;AAAA,MACd,MAAM,KAAK;AAAA,MACX,YAAY,KAAK;AAAA,MACjB,YAAY,KAAK;AAAA,MACjB,OAAO,KAAK;AAAA,IAClB,GACUD,IAAM,GAAG,KAAK,OAAO;AAE3B,QAAI;AACF,WAAK,cAAa;AAClB,YAAM0B,IAAW,MAAM3B,EAASC,GAAKC,CAAI,GACnC0B,IAAO,MAAMD,EAAS;AAC5B,WAAK,cAAa,GAEbA,EAAS,MAGZ,KAAK,0BAA0B,KAAK,MAAM;AAAA,QACxC,CAACvB,MAASA,EAAK,KAAK,IAAI;AAAA,MACzB,EAAC,CAAC,EAAE,KAAK,IAAI,GACd,KAAK,gBAAgB,KAAK,qBAAqB,GAC/C,KAAK,aAAa,qBAAqB,KAAK,uBAAuB,KANnE,KAAK,yBAAyBwB,EAAK,KAAK;AAAA,IAQ3C,SAAQR,GAAO;AACd,WAAK,cAAa,GAClB,KAAK,yBAAyBA,EAAM,OAAO;AAAA,IAC5C;AAAA,EACF;AAAA,EAED,MAAM,UAAUK,GAAO;AAErB,IAAAA,EAAM,eAAc,GAGpB,KAAK,UAAS,GAEd,KAAK,MAAM,KAAK,SAAS;AAEzB,UAAMvB,IAAO;AAAA,MACX,SAAS,KAAK;AAAA,MACd,WAAW,KAAK;AAAA,MAChB,SAAS,KAAK;AAAA,MACd,KAAK,KAAK;AAAA,MACV,YAAY,KAAK;AAAA,MACjB,YAAY,KAAK;AAAA,MACjB,OAAO,KAAK;AAAA,IAClB,GACUD,IAAM,GAAG,KAAK,OAAO;AAE3B,QAAI;AACF,WAAK,cAAa;AAClB,YAAM0B,IAAW,MAAM3B,EAASC,GAAKC,CAAI,GACnC0B,IAAO,MAAMD,EAAS;AAC5B,WAAK,cAAa,GAEbA,EAAS,KAGZ,KAAK,uBAAuBF,CAAK,IAFjC,KAAK,yBAAyBG,EAAK,KAAK;AAAA,IAI3C,SAAQR,GAAO;AACd,WAAK,cAAa,GAClB,KAAK,yBAAyBA,EAAM,OAAO;AAAA,IAC5C;AAAA,EACF;AAAA,EAED,gBAAgB;AACd,UAAMV,IAAS,KAAK,aAAa,cAAc,uBAAuB,GAChEoB,IAAOpB,EAAO,cAAc,OAAO,GACnCqB,IAAQrB,EAAO,cAAc,KAAK,GAClCsB,IAAUtB,EAAO,cAAc,UAAU;AAE/C,IAAAA,EAAO,gBAAgB,UAAU,GACjCoB,EAAK,gBAAgB,QAAQ,GAC7BC,EAAM,gBAAgB,QAAQ,GAC9BC,EAAQ,gBAAgB,QAAQ;AAAA,EACjC;AAAA,EAED,gBAAgBC,GAAQ;AACtB,SAAK,aAAa,SAAS,IAC3BA,EAAO,SAAS,IAChB,KAAK,eAAeA;AAAA,EACrB;AAAA,EAED,IAAI,UAAU;AACZ,WAAO,KAAK,aAAa,UAAU;AAAA,EACpC;AAAA,EAED,IAAI,UAAU;AACZ,WAAO,KAAK,aAAa,SAAS;AAAA,EACnC;AAAA,EAED,IAAI,SAAS;AACX,WAAO,KAAK,aAAa,SAAS,KAAK;AAAA,EACxC;AAAA,EAED,IAAI,WAAW;AACb,WAAO,aAAa,QAAQ,UAAU;AAAA,EACvC;AAAA,EAED,IAAI,UAAU;AACZ,WAAO,KAAK,aAAa,UAAU;AAAA,EACpC;AAAA,EAED,IAAI,SAAS;AACX,WAAO,KAAK,aAAa,SAAS;AAAA,EACnC;AAAA,EAED,IAAI,cAAc;AAChB,WAAO,KAAK,aAAa,eAAe;AAAA,EACzC;AAAA,EAED,IAAI,YAAY;AACd,WAAO,KAAK,aAAa,YAAY;AAAA,EACtC;AAAA,EAED,IAAI,cAAc;AAChB,WAAO,KAAK,aAAa,cAAc;AAAA,EACxC;AAAA,EAED,IAAI,QAAQ;AACV,WAAO,KAAK,aAAa,OAAO;AAAA,EACjC;AAAA,EAED,IAAI,aAAa;AACf,WAAO,KAAK,aAAa,aAAa,KAAK;AAAA,EAC5C;AAAA,EAED,IAAI,WAAW;AACb,WAAO,KAAK,aAAa,WAAW;AAAA,EACrC;AAAA,EAED,IAAI,iBAAiB;AACnB,WAAO,KAAK,aAAa,iBAAiB;AAAA,EAC3C;AAAA,EAED,yBAAyB;AACvB,UAAMC,IAAc,IAAI,YAAY,iCAAiC;AAAA,MACnE,QAAQ;AAAA,QACN,WAAW;AAAA,UACT,qBAAqB;AAAA,UACrB,sBAAsB;AAAA,UACtB,kBAAkB;AAAA,QACnB;AAAA,QACD,WAAW,KAAK;AAAA,QAChB,YAAY,KAAK;AAAA,MAClB;AAAA,IACP,CAAK;AAED,SAAK,cAAcA,CAAW;AAAA,EAC/B;AAAA,EAED,0CAA0C;AACxC,UAAMC,IAAM,yDACND,IAAc,IAAI,YAAYC,GAAK;AAAA,MACvC,QAAQ;AAAA,QACN,MAAM;AAAA,UACJ,WAAW,KAAK;AAAA,UAChB,YAAY,KAAK;AAAA,QAClB;AAAA,QACD,SAASA;AAAA,MACV;AAAA,IACP,CAAK;AAED,SAAK,cAAcD,CAAW;AAAA,EAC/B;AACH;AAEI,oBAAoB,UAAU,CAAC,OAAO,eAAe,IAAI,cAAc,KACzE,OAAO,eAAe,OAAO,gBAAgB7B,CAAW;"}

package/dist/combobox.js ADDED Viewed

@@ -0,0 +1,300 @@
+function l(o) {
+  const t = [...Array(30)].map(() => Math.random().toString(36)[3]).join("");
+  return `${o}-${t}`;
+}
+function h(o) {
+  const t = o.getBoundingClientRect();
+  return t.top >= 0 && t.left >= 0 && t.bottom <= (window.innerHeight || document.documentElement.clientHeight) && t.right <= (window.innerWidth || document.documentElement.clientWidth);
+}
+function d(o) {
+  return o && o.clientHeight < o.scrollHeight;
+}
+function c(o, t) {
+  const { offsetHeight: e, offsetTop: i } = o, { offsetHeight: s, scrollTop: n } = t, r = i < n, a = i + e > n + s;
+  r ? t.scrollTo(0, i) : a && t.scrollTo(0, i - s + e);
+}
+class b extends HTMLElement {
+  constructor() {
+    super(), this.handleRoaming = this.handleRoaming.bind(this);
+  }
+  connectedCallback() {
+    this.trigger = this.querySelector("smileid-combobox-trigger"), document.addEventListener("click", this.handleRoaming), this.addEventListener("focusout", this.handleRoaming), this.addEventListener("blur", this.handleRoaming);
+  }
+  disconnectedCallback() {
+    document.removeEventListener("click", this.handleRoaming), this.removeEventListener("focusout", this.handleRoaming), this.removeEventListener("blur", this.handleRoaming);
+  }
+  handleRoaming(t) {
+    const e = t.relatedTarget || t.target;
+    this.contains(e) || this.trigger.getAttribute("expanded") === "true" && this.trigger.setAttribute("expanded", "false");
+  }
+}
+class u extends HTMLElement {
+  constructor() {
+    super(), this.handleKeyUp = this.handleKeyUp.bind(this), this.handleKeyDown = this.handleKeyDown.bind(this), this.handleSelection = this.handleSelection.bind(this), this.toggleExpansionState = this.toggleExpansionState.bind(this);
+  }
+  get type() {
+    return this.getAttribute("type") || "text";
+  }
+  get label() {
+    return this.getAttribute("label") || "";
+  }
+  get value() {
+    return this.getAttribute("value") || "";
+  }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  connectedCallback() {
+    if (!this.label)
+      throw new Error("<combobox-trigger>: a label attribute is required");
+    this.innerHTML = `${this.type === "text" ? `
+        <div>
+          <input ${this.value ? `value="${this.value}" ` : ""}${this.disabled ? " disabled " : ""}type="text" placeholder="${this.label}" />
+          <button ${this.disabled ? "disabled " : ""}tabindex='-1' type='button'>
+            <span class="visually-hidden">Toggle</span>
+          </button>
+        </div>
+      ` : `<button ${this.disabled ? "disabled " : ""}type="button">${this.value || this.label}</button>`}`, this.setAttribute("expanded", !1), this.inputTrigger = this.querySelector("input"), this.buttonTrigger = this.querySelector("button"), this.buttonTrigger.setAttribute("aria-expanded", !1), this.buttonTrigger.setAttribute("role", "combobox"), this.buttonTrigger.addEventListener("keydown", this.handleKeyDown), this.buttonTrigger.addEventListener("click", this.toggleExpansionState), this.inputTrigger && (this.inputTrigger.setAttribute("aria-expanded", !1), this.inputTrigger.setAttribute("role", "combobox"), this.inputTrigger.addEventListener("keydown", this.handleKeyDown), this.inputTrigger.addEventListener("keyup", this.handleKeyUp), this.inputTrigger.addEventListener("change", (t) => t.stopPropagation())), this.listbox = this.parentElement.querySelector("smileid-combobox-listbox"), this.options = Array.from(
+      this.parentElement.querySelectorAll("smileid-combobox-option")
+    ), this.options.forEach((t) => {
+      t.addEventListener("combobox.option.select", this.handleSelection);
+    });
+  }
+  disconnectedCallback() {
+    this.buttonTrigger.removeEventListener("keydown", this.handleKeyDown), this.buttonTrigger.removeEventListener("click", this.toggleExpansionState), this.inputTrigger && (this.inputTrigger.removeEventListener("keydown", this.handleKeyDown), this.inputTrigger.removeEventListener("keyup", this.handleKeyUp), this.inputTrigger.removeEventListener(
+      "change",
+      (t) => t.stopPropagation()
+    )), this.options && this.options.forEach((t) => {
+      t.removeEventListener(
+        "combobox.option.select",
+        this.handleSelection
+      );
+    });
+  }
+  handleKeyDown(t) {
+    if (t.ctrlKey || t.shiftKey)
+      return;
+    const { key: e } = t;
+    switch (e) {
+      case "Enter":
+      case "Space":
+      case " ":
+        if (this.getAttribute("expanded") === "true")
+          if (this.inputTrigger && (e === "Space" || e === " "))
+            this.resetListbox();
+          else {
+            t.preventDefault();
+            const i = this.buttonTrigger.getAttribute(
+              "aria-activedescendant"
+            );
+            i && document.getElementById(i).click();
+          }
+        else
+          t.preventDefault(), this.toggleExpansionState();
+        break;
+      case "Esc":
+      case "Escape":
+        t.preventDefault(), this.getAttribute("expanded") === "true" && this.toggleExpansionState();
+        break;
+      case "Down":
+      case "ArrowDown":
+        t.preventDefault(), this.getAttribute("expanded") !== "true" ? (this.toggleExpansionState(), this.focusListbox("First")) : this.focusListbox("Down");
+        break;
+      case "Up":
+      case "ArrowUp":
+        t.preventDefault(), this.getAttribute("expanded") !== "true" ? (this.toggleExpansionState(), this.focusListbox("Last")) : this.focusListbox("Up");
+        break;
+      case "Left":
+      case "ArrowLeft":
+      case "Right":
+      case "ArrowRight":
+      case "Home":
+      case "End":
+        this.resetListbox();
+        break;
+    }
+  }
+  handleKeyUp(t) {
+    const { key: e } = t, i = (s) => s.length === 1 && s.match(/\S| /);
+    (t.key === "Escape" || t.key === "Esc") && (t.preventDefault(), this.getAttribute("expanded") === "true" ? this.toggleExpansionState() : this.inputTrigger && (this.inputTrigger.value = "", this.listbox.dispatchEvent(
+      new CustomEvent("combobox.listbox.filter", { detail: "" })
+    ))), (i(e) || e === "Backspace") && (this.resetListbox(), this.filterListbox(t.target.value));
+  }
+  toggleExpansionState() {
+    const t = this.getAttribute("expanded") === "true";
+    this.setAttribute("expanded", !t), this.buttonTrigger.setAttribute("aria-expanded", !t), this.inputTrigger && this.inputTrigger.setAttribute("aria-expanded", !t);
+  }
+  handleSelection(t) {
+    this.inputTrigger ? this.inputTrigger.value = t.detail.label : this.buttonTrigger.textContent = t.detail.label, this.toggleExpansionState(), this.parentElement.dispatchEvent(
+      new CustomEvent("combobox.change", {
+        detail: {
+          value: t.detail.value
+        }
+      })
+    );
+  }
+  filterListbox(t) {
+    this.getAttribute("expanded") !== "true" && this.toggleExpansionState(), this.listbox.dispatchEvent(
+      new CustomEvent("combobox.listbox.filter", { detail: t })
+    );
+  }
+  focusListbox(t) {
+    this.resetListbox(), this.listbox.dispatchEvent(
+      new CustomEvent("combobox.listbox.focus", {
+        detail: {
+          direction: t
+        }
+      })
+    );
+  }
+  resetListbox() {
+    this.listbox.dispatchEvent(new CustomEvent("combobox.listbox.reset"));
+  }
+}
+class g extends HTMLElement {
+  constructor() {
+    super(), this.handleFilter = this.handleFilter.bind(this), this.handleFocus = this.handleFocus.bind(this), this.handleReset = this.handleReset.bind(this), this.handleOptionSelection = this.handleOptionSelection.bind(this);
+  }
+  get emptyLabel() {
+    return this.getAttribute("empty-label");
+  }
+  get emptyState() {
+    return `
+      <p id='empty-state' style="text-align: center;">
+        ${this.emptyLabel || "No items"}
+      </p>
+    `;
+  }
+  connectedCallback() {
+    this.setAttribute("role", "listbox"), this.setAttribute("id", l("listbox")), this.addEventListener("combobox.listbox.filter", this.handleFilter), this.addEventListener("combobox.listbox.focus", this.handleFocus), this.addEventListener("combobox.listbox.reset", this.handleReset), this.triggers = Array.from(
+      this.parentElement.querySelectorAll(
+        "smileid-combobox-trigger input, smileid-combobox-trigger button"
+      )
+    ), this.triggers.forEach(
+      (t) => t.setAttribute("aria-controls", this.getAttribute("id"))
+    ), this.optionNodes = Array.from(
+      this.querySelectorAll("smileid-combobox-option")
+    ), this.selectedNode = this.optionNodes.find(
+      (t) => !t.hasAttribute("hidden") && t.hasAttribute("aria-selected")
+    ) || this.optionNodes.filter((t) => !t.hasAttribute("hidden"))[0], this.selectedNode.setAttribute("tabindex", "0"), this.optionNodes.forEach((t) => {
+      t.addEventListener(
+        "combobox.option.select",
+        this.handleOptionSelection
+      );
+    }), this.optionNodes.length === 0 && (this.innerHTML = this.emptyState);
+  }
+  disconnectedCallback() {
+    this.removeEventListener("combobox.listbox.filter", this.handleFilter), this.removeEventListener("combobox.listbox.focus", this.handleFocus), this.removeEventListener("combobox.listbox.reset", this.handleReset), this.optionNodes.forEach((t) => {
+      t.removeEventListener(
+        "combobox.option.select",
+        this.handleOptionSelection
+      );
+    });
+  }
+  static get observedAttributes() {
+    return ["search-term"];
+  }
+  attributeChangedCallback(t, e, i) {
+    switch (t) {
+      case "search-term":
+        e && !i ? this.optionNodes.forEach((s) => {
+          s.removeAttribute("hidden");
+        }) : i && this.filterNodes(i);
+        break;
+    }
+  }
+  filterNodes(t) {
+    this.optionNodes.forEach((s) => {
+      const n = s.getAttribute("value").toLowerCase(), r = s.getAttribute("label").toLowerCase();
+      n.includes(t.toLowerCase()) || r.includes(t.toLowerCase()) ? s.removeAttribute("hidden") : s.setAttribute("hidden", !0);
+    });
+    const e = this.optionNodes.find(
+      (s) => !s.hasAttribute("hidden")
+    ), i = this.querySelector("#empty-state");
+    !e && !i ? this.insertAdjacentHTML("afterbegin", this.emptyState) : e && i && this.removeChild(i);
+  }
+  handleFilter(t) {
+    const e = t.detail;
+    this.setAttribute("search-term", e);
+  }
+  handleFocus(t) {
+    this.setSelected(t.detail.direction);
+  }
+  handleReset() {
+    this.optionNodes.forEach((t) => t.setAttribute("tabindex", "-1"));
+  }
+  handleOptionSelection(t) {
+    this.triggers.filter(
+      (i) => i.tagName === "INPUT"
+    )[0] && this.setAttribute("search-term", t.detail.label);
+  }
+  setSelected(t) {
+    const e = this.optionNodes.filter(
+      (r) => !r.hasAttribute("hidden")
+    );
+    this.selectedNode.setAttribute("tabindex", "0");
+    const i = e.findIndex(
+      (r) => r === this.selectedNode
+    ), s = e.length - 1;
+    let n;
+    switch (t) {
+      case "First":
+        n = 0;
+        break;
+      case "Last":
+        n = s;
+        break;
+      case "Up":
+        i === 0 ? n = s : n = i - 1;
+        break;
+      default:
+        i === s ? n = 0 : n = i + 1;
+        break;
+    }
+    i !== n && this.swapSelected(this.selectedNode, e[n]);
+  }
+  swapSelected(t, e) {
+    t.setAttribute("tabindex", "-1"), e.setAttribute("tabindex", "0"), this.selectedNode = e, d(this) && c(this.selectedNode, this), h(e) || e.scrollIntoView({ behavior: "smooth", block: "nearest" }), this.triggers.forEach(
+      (i) => i.setAttribute("aria-activedescendant", e.id)
+    );
+  }
+}
+class p extends HTMLElement {
+  connectedCallback() {
+    this.setAttribute("role", "option"), this.setAttribute("tabindex", "-1"), this.setAttribute("id", l("option")), this.options = Array.from(
+      this.parentElement.querySelectorAll("smileid-combobox-option")
+    ), this.addEventListener("click", this.select);
+  }
+  disconnectedCallback() {
+    this.removeEventListener("click", this.select);
+  }
+  get value() {
+    return this.getAttribute("value");
+  }
+  get label() {
+    return this.getAttribute("label");
+  }
+  select() {
+    const t = this.options.find(
+      (e) => e.getAttribute("aria-selected")
+    );
+    t && t.removeAttribute("aria-selected"), this.setAttribute("aria-selected", !0), this.dispatchEvent(
+      new CustomEvent("combobox.option.select", {
+        detail: {
+          id: this.getAttribute("id"),
+          label: this.label,
+          value: this.value
+        }
+      })
+    );
+  }
+}
+const m = b, x = u, f = g, E = p;
+"customElements" in window && !window.customElements.get("smileid-combobox") && (window.customElements.define("smileid-combobox", m), window.customElements.define("smileid-combobox-trigger", x), window.customElements.define("smileid-combobox-listbox", f), window.customElements.define("smileid-combobox-option", E));
+export {
+  f as List,
+  E as Option,
+  m as Root,
+  x as Trigger
+};
+//# sourceMappingURL=combobox.js.map

package/dist/combobox.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"combobox.js","sources":["../lib/components/combobox/src/Combobox.js"],"sourcesContent":["function generateId(prefix) {\r\n const id = [...Array(30)].map(() => Math.random().toString(36)[3]).join('');\r\n return `${prefix}-${id}`;\r\n}\r\n\r\n// check if element is visible in browser view port\r\nfunction isElementInView(element) {\r\n const bounding = element.getBoundingClientRect();\r\n\r\n return (\r\n bounding.top >= 0 &&\r\n bounding.left >= 0 &&\r\n bounding.bottom <=\r\n (window.innerHeight || document.documentElement.clientHeight) &&\r\n bounding.right <=\r\n (window.innerWidth || document.documentElement.clientWidth)\r\n );\r\n}\r\n\r\n// check if an element is currently scrollable\r\nfunction isScrollable(element) {\r\n return element && element.clientHeight < element.scrollHeight;\r\n}\r\n\r\n// ensure a given child element is within the parent's visible scroll area\r\n// if the child is not visible, scroll the parent\r\nfunction maintainScrollVisibility(activeElement, scrollParent) {\r\n const { offsetHeight, offsetTop } = activeElement;\r\n const { offsetHeight: parentOffsetHeight, scrollTop } = scrollParent;\r\n\r\n const isAbove = offsetTop < scrollTop;\r\n const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;\r\n\r\n if (isAbove) {\r\n scrollParent.scrollTo(0, offsetTop);\r\n } else if (isBelow) {\r\n scrollParent.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight);\r\n }\r\n}\r\n\r\nclass ComboboxRoot extends HTMLElement {\r\n constructor() {\r\n super();\r\n\r\n this.handleRoaming = this.handleRoaming.bind(this);\r\n }\r\n\r\n connectedCallback() {\r\n this.trigger = this.querySelector('smileid-combobox-trigger');\r\n\r\n document.addEventListener('click', this.handleRoaming);\r\n this.addEventListener('focusout', this.handleRoaming);\r\n this.addEventListener('blur', this.handleRoaming);\r\n }\r\n\r\n disconnectedCallback() {\r\n document.removeEventListener('click', this.handleRoaming);\r\n this.removeEventListener('focusout', this.handleRoaming);\r\n this.removeEventListener('blur', this.handleRoaming);\r\n }\r\n\r\n handleRoaming(event) {\r\n const target = event.relatedTarget || event.target;\r\n if (this.contains(target)) {\r\n return;\r\n }\r\n\r\n if (this.trigger.getAttribute('expanded') === 'true') {\r\n this.trigger.setAttribute('expanded', 'false');\r\n }\r\n }\r\n}\r\n\r\nclass ComboboxTrigger extends HTMLElement {\r\n constructor() {\r\n super();\r\n\r\n this.handleKeyUp = this.handleKeyUp.bind(this);\r\n this.handleKeyDown = this.handleKeyDown.bind(this);\r\n this.handleSelection = this.handleSelection.bind(this);\r\n\r\n this.toggleExpansionState = this.toggleExpansionState.bind(this);\r\n }\r\n\r\n get type() {\r\n return this.getAttribute('type') || 'text';\r\n }\r\n\r\n get label() {\r\n return this.getAttribute('label') || '';\r\n }\r\n\r\n get value() {\r\n return this.getAttribute('value') || '';\r\n }\r\n\r\n get disabled() {\r\n return this.hasAttribute('disabled');\r\n }\r\n\r\n connectedCallback() {\r\n if (!this.label) {\r\n throw new Error('<combobox-trigger>: a label attribute is required');\r\n }\r\n\r\n this.innerHTML = `${\r\n this.type === 'text'\r\n ? `\r\n <div>\r\n <input ${this.value ? `value=\"${this.value}\" ` : ''}${\r\n this.disabled ? ' disabled ' : ''\r\n }type=\"text\" placeholder=\"${this.label}\" />\r\n <button ${this.disabled ? 'disabled ' : ''}tabindex='-1' type='button'>\r\n <span class=\"visually-hidden\">Toggle</span>\r\n </button>\r\n </div>\r\n `\r\n : `<button ${this.disabled ? 'disabled ' : ''}type=\"button\">${\r\n this.value || this.label\r\n }</button>`\r\n }`;\r\n\r\n this.setAttribute('expanded', false);\r\n\r\n this.inputTrigger = this.querySelector('input');\r\n this.buttonTrigger = this.querySelector('button');\r\n\r\n this.buttonTrigger.setAttribute('aria-expanded', false);\r\n this.buttonTrigger.setAttribute('role', 'combobox');\r\n\r\n this.buttonTrigger.addEventListener('keydown', this.handleKeyDown);\r\n this.buttonTrigger.addEventListener('click', this.toggleExpansionState);\r\n\r\n if (this.inputTrigger) {\r\n this.inputTrigger.setAttribute('aria-expanded', false);\r\n this.inputTrigger.setAttribute('role', 'combobox');\r\n\r\n this.inputTrigger.addEventListener('keydown', this.handleKeyDown);\r\n this.inputTrigger.addEventListener('keyup', this.handleKeyUp);\r\n this.inputTrigger.addEventListener('change', (e) => e.stopPropagation());\r\n }\r\n\r\n this.listbox = this.parentElement.querySelector('smileid-combobox-listbox');\r\n\r\n this.options = Array.from(\r\n this.parentElement.querySelectorAll('smileid-combobox-option'),\r\n );\r\n this.options.forEach((node) => {\r\n node.addEventListener('combobox.option.select', this.handleSelection);\r\n });\r\n }\r\n\r\n disconnectedCallback() {\r\n this.buttonTrigger.removeEventListener('keydown', this.handleKeyDown);\r\n this.buttonTrigger.removeEventListener('click', this.toggleExpansionState);\r\n\r\n if (this.inputTrigger) {\r\n this.inputTrigger.removeEventListener('keydown', this.handleKeyDown);\r\n this.inputTrigger.removeEventListener('keyup', this.handleKeyUp);\r\n this.inputTrigger.removeEventListener('change', (e) =>\r\n e.stopPropagation(),\r\n );\r\n }\r\n\r\n if (this.options) {\r\n this.options.forEach((node) => {\r\n node.removeEventListener(\r\n 'combobox.option.select',\r\n this.handleSelection,\r\n );\r\n });\r\n }\r\n }\r\n\r\n handleKeyDown(event) {\r\n if (event.ctrlKey || event.shiftKey) {\r\n return;\r\n }\r\n\r\n const { key } = event;\r\n\r\n switch (key) {\r\n case 'Enter':\r\n case 'Space':\r\n case ' ':\r\n if (this.getAttribute('expanded') === 'true') {\r\n if (this.inputTrigger && (key === 'Space' || key === ' ')) {\r\n this.resetListbox();\r\n } else {\r\n event.preventDefault();\r\n const selectedOption = this.buttonTrigger.getAttribute(\r\n 'aria-activedescendant',\r\n );\r\n if (selectedOption) {\r\n document.getElementById(selectedOption).click();\r\n }\r\n }\r\n } else {\r\n event.preventDefault();\r\n this.toggleExpansionState();\r\n }\r\n break;\r\n case 'Esc':\r\n case 'Escape':\r\n event.preventDefault();\r\n if (this.getAttribute('expanded') === 'true') {\r\n this.toggleExpansionState();\r\n }\r\n break;\r\n case 'Down':\r\n case 'ArrowDown':\r\n event.preventDefault();\r\n if (this.getAttribute('expanded') !== 'true') {\r\n this.toggleExpansionState();\r\n this.focusListbox('First');\r\n } else {\r\n this.focusListbox('Down');\r\n }\r\n break;\r\n case 'Up':\r\n case 'ArrowUp':\r\n event.preventDefault();\r\n if (this.getAttribute('expanded') !== 'true') {\r\n this.toggleExpansionState();\r\n this.focusListbox('Last');\r\n } else {\r\n this.focusListbox('Up');\r\n }\r\n break;\r\n case 'Left':\r\n case 'ArrowLeft':\r\n case 'Right':\r\n case 'ArrowRight':\r\n case 'Home':\r\n case 'End':\r\n this.resetListbox();\r\n break;\r\n case 'Tab':\r\n break;\r\n default:\r\n break;\r\n }\r\n }\r\n\r\n handleKeyUp(event) {\r\n const { key } = event;\r\n\r\n const isPrintableCharacter = (str) => str.length === 1 && str.match(/\\S| /);\r\n\r\n if (event.key === 'Escape' || event.key === 'Esc') {\r\n event.preventDefault();\r\n if (this.getAttribute('expanded') === 'true') {\r\n this.toggleExpansionState();\r\n } else if (this.inputTrigger) {\r\n this.inputTrigger.value = '';\r\n\r\n this.listbox.dispatchEvent(\r\n new CustomEvent('combobox.listbox.filter', { detail: '' }),\r\n );\r\n }\r\n }\r\n\r\n if (isPrintableCharacter(key) || key === 'Backspace') {\r\n this.resetListbox();\r\n this.filterListbox(event.target.value);\r\n }\r\n }\r\n\r\n toggleExpansionState() {\r\n const listboxIsExpanded = this.getAttribute('expanded') === 'true';\r\n this.setAttribute('expanded', !listboxIsExpanded);\r\n this.buttonTrigger.setAttribute('aria-expanded', !listboxIsExpanded);\r\n if (this.inputTrigger) {\r\n this.inputTrigger.setAttribute('aria-expanded', !listboxIsExpanded);\r\n }\r\n }\r\n\r\n handleSelection(event) {\r\n if (this.inputTrigger) {\r\n this.inputTrigger.value = event.detail.label;\r\n } else {\r\n this.buttonTrigger.textContent = event.detail.label;\r\n }\r\n\r\n this.toggleExpansionState();\r\n this.parentElement.dispatchEvent(\r\n new CustomEvent('combobox.change', {\r\n detail: {\r\n value: event.detail.value,\r\n },\r\n }),\r\n );\r\n }\r\n\r\n filterListbox(value) {\r\n if (this.getAttribute('expanded') !== 'true') {\r\n this.toggleExpansionState();\r\n }\r\n\r\n this.listbox.dispatchEvent(\r\n new CustomEvent('combobox.listbox.filter', { detail: value }),\r\n );\r\n }\r\n\r\n focusListbox(direction) {\r\n this.resetListbox();\r\n this.listbox.dispatchEvent(\r\n new CustomEvent('combobox.listbox.focus', {\r\n detail: {\r\n direction,\r\n },\r\n }),\r\n );\r\n }\r\n\r\n resetListbox() {\r\n this.listbox.dispatchEvent(new CustomEvent('combobox.listbox.reset'));\r\n }\r\n}\r\n\r\nclass ComboboxListbox extends HTMLElement {\r\n constructor() {\r\n super();\r\n\r\n this.handleFilter = this.handleFilter.bind(this);\r\n this.handleFocus = this.handleFocus.bind(this);\r\n this.handleReset = this.handleReset.bind(this);\r\n\r\n this.handleOptionSelection = this.handleOptionSelection.bind(this);\r\n }\r\n\r\n get emptyLabel() {\r\n return this.getAttribute('empty-label');\r\n }\r\n\r\n get emptyState() {\r\n return `\r\n <p id='empty-state' style=\"text-align: center;\">\r\n ${this.emptyLabel || 'No items'}\r\n </p>\r\n `;\r\n }\r\n\r\n connectedCallback() {\r\n this.setAttribute('role', 'listbox');\r\n this.setAttribute('id', generateId('listbox'));\r\n\r\n this.addEventListener('combobox.listbox.filter', this.handleFilter);\r\n this.addEventListener('combobox.listbox.focus', this.handleFocus);\r\n this.addEventListener('combobox.listbox.reset', this.handleReset);\r\n\r\n this.triggers = Array.from(\r\n this.parentElement.querySelectorAll(\r\n 'smileid-combobox-trigger input, smileid-combobox-trigger button',\r\n ),\r\n );\r\n this.triggers.forEach((node) =>\r\n node.setAttribute('aria-controls', this.getAttribute('id')),\r\n );\r\n\r\n this.optionNodes = Array.from(\r\n this.querySelectorAll('smileid-combobox-option'),\r\n );\r\n this.selectedNode =\r\n this.optionNodes.find(\r\n (node) =>\r\n !node.hasAttribute('hidden') && node.hasAttribute('aria-selected'),\r\n ) || this.optionNodes.filter((node) => !node.hasAttribute('hidden'))[0];\r\n this.selectedNode.setAttribute('tabindex', '0');\r\n\r\n this.optionNodes.forEach((node) => {\r\n node.addEventListener(\r\n 'combobox.option.select',\r\n this.handleOptionSelection,\r\n );\r\n });\r\n\r\n if (this.optionNodes.length === 0) {\r\n this.innerHTML = this.emptyState;\r\n }\r\n }\r\n\r\n disconnectedCallback() {\r\n this.removeEventListener('combobox.listbox.filter', this.handleFilter);\r\n this.removeEventListener('combobox.listbox.focus', this.handleFocus);\r\n this.removeEventListener('combobox.listbox.reset', this.handleReset);\r\n this.optionNodes.forEach((node) => {\r\n node.removeEventListener(\r\n 'combobox.option.select',\r\n this.handleOptionSelection,\r\n );\r\n });\r\n }\r\n\r\n static get observedAttributes() {\r\n return ['search-term'];\r\n }\r\n\r\n attributeChangedCallback(name, oldValue, newValue) {\r\n switch (name) {\r\n case 'search-term':\r\n if (oldValue && !newValue) {\r\n this.optionNodes.forEach((node) => {\r\n node.removeAttribute('hidden');\r\n });\r\n } else if (newValue) {\r\n this.filterNodes(newValue);\r\n }\r\n break;\r\n default:\r\n break;\r\n }\r\n }\r\n\r\n filterNodes(searchTerm) {\r\n this.optionNodes.forEach((node) => {\r\n const value = node.getAttribute('value').toLowerCase();\r\n const label = node.getAttribute('label').toLowerCase();\r\n\r\n const containsSearchTerm =\r\n value.includes(searchTerm.toLowerCase()) ||\r\n label.includes(searchTerm.toLowerCase());\r\n\r\n if (containsSearchTerm) {\r\n node.removeAttribute('hidden');\r\n } else {\r\n node.setAttribute('hidden', true);\r\n }\r\n });\r\n\r\n const optionsVisible = this.optionNodes.find(\r\n (node) => !node.hasAttribute('hidden'),\r\n );\r\n const emptyState = this.querySelector('#empty-state');\r\n\r\n if (!optionsVisible && !emptyState) {\r\n this.insertAdjacentHTML('afterbegin', this.emptyState);\r\n } else if (optionsVisible && emptyState) {\r\n this.removeChild(emptyState);\r\n }\r\n }\r\n\r\n handleFilter(event) {\r\n const searchTerm = event.detail;\r\n this.setAttribute('search-term', searchTerm);\r\n }\r\n\r\n handleFocus(event) {\r\n this.setSelected(event.detail.direction);\r\n }\r\n\r\n handleReset() {\r\n this.optionNodes.forEach((node) => node.setAttribute('tabindex', '-1'));\r\n }\r\n\r\n handleOptionSelection(event) {\r\n const inputTrigger = this.triggers.filter(\r\n (node) => node.tagName === 'INPUT',\r\n )[0];\r\n\r\n if (inputTrigger) {\r\n this.setAttribute('search-term', event.detail.label);\r\n }\r\n }\r\n\r\n setSelected(direction) {\r\n const visibleOptions = this.optionNodes.filter(\r\n (node) => !node.hasAttribute('hidden'),\r\n );\r\n this.selectedNode.setAttribute('tabindex', '0');\r\n const currentIndex = visibleOptions.findIndex(\r\n (node) => node === this.selectedNode,\r\n );\r\n const lastIndex = visibleOptions.length - 1;\r\n\r\n let nextIndex;\r\n switch (direction) {\r\n case 'First':\r\n nextIndex = 0;\r\n break;\r\n case 'Last':\r\n nextIndex = lastIndex;\r\n break;\r\n case 'Up':\r\n if (currentIndex === 0) {\r\n nextIndex = lastIndex;\r\n } else {\r\n nextIndex = currentIndex - 1;\r\n }\r\n break;\r\n default:\r\n if (currentIndex === lastIndex) {\r\n nextIndex = 0;\r\n } else {\r\n nextIndex = currentIndex + 1;\r\n }\r\n break;\r\n }\r\n\r\n if (currentIndex !== nextIndex) {\r\n this.swapSelected(this.selectedNode, visibleOptions[nextIndex]);\r\n }\r\n }\r\n\r\n swapSelected(currentNode, newNode) {\r\n currentNode.setAttribute('tabindex', '-1');\r\n newNode.setAttribute('tabindex', '0');\r\n\r\n this.selectedNode = newNode;\r\n\r\n // ACTION: ensure the new option is in view\r\n if (isScrollable(this)) {\r\n maintainScrollVisibility(this.selectedNode, this);\r\n }\r\n\r\n // ACTION: scroll into view if node is not visible\r\n if (!isElementInView(newNode)) {\r\n newNode.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\r\n }\r\n\r\n this.triggers.forEach((node) =>\r\n node.setAttribute('aria-activedescendant', newNode.id),\r\n );\r\n }\r\n}\r\n\r\nclass ComboboxOption extends HTMLElement {\r\n connectedCallback() {\r\n this.setAttribute('role', 'option');\r\n this.setAttribute('tabindex', '-1');\r\n this.setAttribute('id', generateId('option'));\r\n\r\n this.options = Array.from(\r\n this.parentElement.querySelectorAll('smileid-combobox-option'),\r\n );\r\n this.addEventListener('click', this.select);\r\n }\r\n\r\n disconnectedCallback() {\r\n this.removeEventListener('click', this.select);\r\n }\r\n\r\n get value() {\r\n return this.getAttribute('value');\r\n }\r\n\r\n get label() {\r\n return this.getAttribute('label');\r\n }\r\n\r\n select() {\r\n const selectedOption = this.options.find((node) =>\r\n node.getAttribute('aria-selected'),\r\n );\r\n\r\n if (selectedOption) {\r\n selectedOption.removeAttribute('aria-selected');\r\n }\r\n\r\n this.setAttribute('aria-selected', true);\r\n\r\n this.dispatchEvent(\r\n new CustomEvent('combobox.option.select', {\r\n detail: {\r\n id: this.getAttribute('id'),\r\n label: this.label,\r\n value: this.value,\r\n },\r\n }),\r\n );\r\n }\r\n}\r\n\r\nconst Root = ComboboxRoot;\r\nconst Trigger = ComboboxTrigger;\r\nconst List = ComboboxListbox;\r\nconst Option = ComboboxOption;\r\n\r\nif (\r\n 'customElements' in window &&\r\n !window.customElements.get('smileid-combobox')\r\n) {\r\n window.customElements.define('smileid-combobox', Root);\r\n window.customElements.define('smileid-combobox-trigger', Trigger);\r\n window.customElements.define('smileid-combobox-listbox', List);\r\n window.customElements.define('smileid-combobox-option', Option);\r\n}\r\n\r\nexport { Root, Trigger, List, Option };\r\n"],"names":["generateId","prefix","id","isElementInView","element","bounding","isScrollable","maintainScrollVisibility","activeElement","scrollParent","offsetHeight","offsetTop","parentOffsetHeight","scrollTop","isAbove","isBelow","ComboboxRoot","event","target","ComboboxTrigger","e","node","key","selectedOption","isPrintableCharacter","str","listboxIsExpanded","value","direction","ComboboxListbox","name","oldValue","newValue","searchTerm","label","optionsVisible","emptyState","visibleOptions","currentIndex","lastIndex","nextIndex","currentNode","newNode","ComboboxOption","Root","Trigger","List","Option"],"mappings":"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"}

package/dist/document.js ADDED Viewed

@@ -0,0 +1,5 @@
+import { D as r } from "./DocumentCaptureScreens-Dwl7UqVH.js";
+export {
+  r as default
+};
+//# sourceMappingURL=document.js.map

package/dist/document.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"document.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/end-user-consent.js ADDED Viewed

@@ -0,0 +1,5 @@
+import { E as o } from "./EndUserConsent-C5hZdJzH.js";
+export {
+  o as EndUserConsent
+};
+//# sourceMappingURL=end-user-consent.js.map

package/dist/end-user-consent.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"end-user-consent.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/main.js ADDED Viewed

@@ -0,0 +1,22 @@
+import { List as o, Option as t, Root as a, Trigger as s } from "./combobox.js";
+import { D as m } from "./DocumentCaptureScreens-Dwl7UqVH.js";
+import { E as f } from "./EndUserConsent-C5hZdJzH.js";
+import { N as i } from "./Navigation-juBE4qOw.js";
+import { S as u } from "./SelfieCaptureScreens-CQc251hz.js";
+import { S as g } from "./SignaturePad-C7MtmT8m.js";
+import { T as d } from "./TotpConsent-CQU5jQi4.js";
+import { default as l } from "./smart-camera-web.js";
+export {
+  m as DocumentCaptureScreens,
+  f as EndUserConsent,
+  o as List,
+  i as Navigation,
+  t as Option,
+  a as Root,
+  u as SelfieCaptureScreens,
+  g as SignaturePad,
+  l as SmartCameraWeb,
+  d as TotpConsent,
+  s as Trigger
+};
+//# sourceMappingURL=main.js.map

package/dist/main.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"main.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/navigation.js ADDED Viewed

@@ -0,0 +1,5 @@
+import { N as o } from "./Navigation-juBE4qOw.js";
+export {
+  o as default
+};
+//# sourceMappingURL=navigation.js.map

package/dist/navigation.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"navigation.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}