playkit-sdk 1.1.3-beta.4 → 1.1.4-beta

package/dist/playkit-sdk.umd.js

@@ -1,5 +1,5 @@
 /**
- * playkit-sdk v1.1.3-beta.4
+ * playkit-sdk v1.1.4-beta
  * PlayKit SDK for JavaScript
  * @license SEE LICENSE IN LICENSE
  */
@@ -658,6 +658,7 @@
 	        this.identifierPanel = null;
 	        this.verificationPanel = null;
 	        this.loadingOverlay = null;
+	        this.otpInstance = null;
 	        // @ts-ignore - replaced at build time
 	        this.baseURL = baseURL || "https://playkit.agentlandlab.com";
 	        this.currentLanguage = this.detectLanguage();
@@ -788,12 +789,12 @@
 
           <div class="playkit-auth-input-group">
             <div class="playkit-code-inputs">
-              <input type="text" maxlength="1" class="playkit-code-input" data-index="0">
-              <input type="text" maxlength="1" class="playkit-code-input" data-index="1">
-              <input type="text" maxlength="1" class="playkit-code-input" data-index="2">
-              <input type="text" maxlength="1" class="playkit-code-input" data-index="3">
-              <input type="text" maxlength="1" class="playkit-code-input" data-index="4">
-              <input type="text" maxlength="1" class="playkit-code-input" data-index="5">
+              <input type="number" maxlength="1" class="playkit-code-input" data-index="0">
+              <input type="number" maxlength="1" class="playkit-code-input" data-index="1">
+              <input type="number" maxlength="1" class="playkit-code-input" data-index="2">
+              <input type="number" maxlength="1" class="playkit-code-input" data-index="3">
+              <input type="number" maxlength="1" class="playkit-code-input" data-index="4">
+              <input type="number" maxlength="1" class="playkit-code-input" data-index="5">
             </div>
           </div>
 
@@ -810,8 +811,9 @@
         </div>
       </div>
     `;
-	        // Add styles
+	        // Add styles and load VanillaOTP
 	        this.addStyles();
+	        this.loadVanillaOTP();
 	        // Append to body
 	        document.body.appendChild(this.modal);
 	        // Get references
@@ -821,6 +823,18 @@
 	        // Setup event listeners
 	        this.setupEventListeners();
 	    }
+	    /**
+	     * Load VanillaOTP library
+	     */
+	    loadVanillaOTP() {
+	        // Check if VanillaOTP is already loaded
+	        if (window.VanillaOTP)
+	            return;
+	        // Inject VanillaOTP script
+	        const script = document.createElement('script');
+	        script.textContent = `"use strict";var VanillaOTP=function(t,e=null){if(this.emptyChar=" ","string"==typeof t)this.container=document.querySelector(t);else{if(!(t instanceof Element))return;this.container=t}e&&("string"==typeof e?this.updateTo=document.querySelector(e)||null:e instanceof Element?this.updateTo=e:this.updateTo=null),this.inputs=Array.from(this.container.querySelectorAll("input[type=text], input[type=number], input[type=password]"));let n=this,u=n.inputs.length;for(let i=0;i<u;i++){let l=n.inputs[i];l.addEventListener("input",function(){if(isNaN(l.value))return l.value=l.dataset.otpInputRestore||"",n._updateValue();if(0==l.value.length)return n._saveInputValue(i);if(1==l.value.length){n._saveInputValue(i),n._updateValue(),i+1<u&&n.inputs[i+1].focus();return}if(i==u-1)return n._setInputValue(i,l.value);let t=l.value.split("");for(let e=0;e<t.length&&!(e+i>=u);e++)n._setInputValue(e+i,t[e]);let a=Math.min(u-1,i+t.length);n.inputs[a].focus()}),l.addEventListener("keydown",function(t){if(8==t.keyCode&&""==l.value&&0!=i){n._setInputValue(i-1,""),n.inputs[i-1].focus();return}if(46==t.keyCode&&i!=u-1){let e=l.selectionStart||0;for(let a=i+e;a<u-1;a++)n._setInputValue(a,n.inputs[a+1].value);n._setInputValue(u-1,""),l.selectionStart&&(l.selectionStart=e),t.preventDefault();return}if(37==t.keyCode&&(null==l.selectionStart||0==l.selectionStart)){i>0&&(t.preventDefault(),n.inputs[i-1].focus(),n.inputs[i-1].select());return}if(39==t.keyCode&&(null==l.selectionStart||l.selectionEnd==l.value.length)){i+1<u&&(t.preventDefault(),n.inputs[i+1].focus(),n.inputs[i+1].select());return}})}};VanillaOTP.prototype.setEmptyChar=function(t){this.emptyChar=t},VanillaOTP.prototype.getValue=function(){let t="",e=this;return this.inputs.forEach(function(n){t+=""==n.value?e.emptyChar:n.value}),t},VanillaOTP.prototype.setValue=function(t){if(isNaN(t)){console.error("Please enter an integer value.");return}let e=(t=""+t).split("");for(let n=0;n<this.inputs.length;n++)this._setInputValue(n,e[n]||"")},VanillaOTP.prototype._setInputValue=function(t,e){return isNaN(e)?console.error("Please enter an integer value."):this.inputs[t]?void(this.inputs[t].value=String(e).substring(0,1),this._saveInputValue(t),this._updateValue()):console.error("Index not found.")},VanillaOTP.prototype._saveInputValue=function(t,e){if(!this.inputs[t])return console.error("Index not found.");this.inputs[t].dataset.otpInputRestore=e||this.inputs[t].value},VanillaOTP.prototype._updateValue=function(){this.updateTo&&(this.updateTo.value=this.getValue())};`;
+	        document.head.appendChild(script);
+	    }
 	    /**
 	     * Add CSS styles to the page
 	     */
@@ -1000,6 +1014,13 @@
         padding: 0 !important;
         transition: border-color 0.15s ease, box-shadow 0.15s ease;
         background: #FFFFFF;
+        -moz-appearance: textfield;
+      }
+
+      .playkit-code-input::-webkit-outer-spin-button,
+      .playkit-code-input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
       }
 
       .playkit-code-input:hover {
@@ -1109,7 +1130,7 @@
 	     * Setup event listeners
 	     */
 	    setupEventListeners() {
-	        var _a, _b, _c;
+	        var _a, _b, _c, _d;
 	        // Auth type toggle
 	        const emailRadio = (_a = this.modal) === null || _a === void 0 ? void 0 : _a.querySelector('input[value="email"]');
 	        const phoneRadio = (_b = this.modal) === null || _b === void 0 ? void 0 : _b.querySelector('input[value="phone"]');
@@ -1144,44 +1165,23 @@
 	                this.onSendCodeClicked();
 	            }
 	        });
-	        // Code inputs
-	        const codeInputs = (_c = this.modal) === null || _c === void 0 ? void 0 : _c.querySelectorAll('.playkit-code-input');
-	        codeInputs === null || codeInputs === void 0 ? void 0 : codeInputs.forEach((input, index) => {
-	            input.addEventListener('input', (e) => {
-	                const target = e.target;
-	                // Only allow digits and limit to 1 character
-	                const value = target.value.replace(/\D/g, '');
-	                target.value = value.slice(0, 1);
-	                // Move to next input if a digit was entered
-	                if (target.value.length === 1 && index < codeInputs.length - 1) {
-	                    codeInputs[index + 1].focus();
-	                }
-	                // Auto-submit when all 6 digits entered
-	                if (index === 5 && target.value.length === 1) {
-	                    this.onVerifyClicked();
-	                }
-	            });
-	            input.addEventListener('keydown', (e) => {
-	                if (e.key === 'Backspace' && !input.value && index > 0) {
-	                    codeInputs[index - 1].focus();
-	                }
-	            });
-	            // Paste support
-	            input.addEventListener('paste', (e) => {
-	                var _a;
-	                e.preventDefault();
-	                const pastedData = ((_a = e.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text')) || '';
-	                const digits = pastedData.replace(/\D/g, '').slice(0, 6);
-	                digits.split('').forEach((digit, i) => {
-	                    if (codeInputs[i]) {
-	                        codeInputs[i].value = digit;
+	        // Initialize VanillaOTP for code inputs
+	        const codeInputsContainer = (_c = this.modal) === null || _c === void 0 ? void 0 : _c.querySelector('.playkit-code-inputs');
+	        if (codeInputsContainer && window.VanillaOTP) {
+	            this.otpInstance = new window.VanillaOTP(codeInputsContainer);
+	            // Auto-submit when all 6 digits entered
+	            const codeInputs = (_d = this.modal) === null || _d === void 0 ? void 0 : _d.querySelectorAll('.playkit-code-input');
+	            codeInputs === null || codeInputs === void 0 ? void 0 : codeInputs.forEach((input, index) => {
+	                input.addEventListener('input', () => {
+	                    // Check if all inputs are filled
+	                    const allFilled = Array.from(codeInputs).every(inp => inp.value.length === 1);
+	                    if (allFilled) {
+	                        // Small delay to ensure the last input is processed
+	                        setTimeout(() => this.onVerifyClicked(), 100);
 	                    }
 	                });
-	                if (digits.length === 6) {
-	                    this.onVerifyClicked();
-	                }
 	            });
-	        });
+	        }
 	        // Verify button
 	        const verifyBtn = document.getElementById('playkit-verify-btn');
 	        verifyBtn === null || verifyBtn === void 0 ? void 0 : verifyBtn.addEventListener('click', () => this.onVerifyClicked());
@@ -1234,9 +1234,16 @@
 	    async onVerifyClicked() {
 	        var _a;
 	        this.clearError('verify');
-	        const codeInputs = (_a = this.modal) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.playkit-code-input');
-	        const code = Array.from(codeInputs).map((input) => input.value).join('');
-	        if (code.length !== 6) {
+	        // Get code from VanillaOTP instance or fallback to manual collection
+	        let code = '';
+	        if (this.otpInstance) {
+	            code = this.otpInstance.getValue().replace(/\s/g, ''); // Remove spaces
+	        }
+	        else {
+	            const codeInputs = (_a = this.modal) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.playkit-code-input');
+	            code = Array.from(codeInputs).map((input) => input.value).join('');
+	        }
+	        if (code.length !== 6 || !/^\d{6}$/.test(code)) {
 	            this.showError(this.t('enterAllDigits'), 'verify');
 	            return;
 	        }
@@ -1325,8 +1332,13 @@
 	        if (this.verificationPanel)
 	            this.verificationPanel.style.display = 'none';
 	        // Clear code inputs
-	        const codeInputs = (_a = this.modal) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.playkit-code-input');
-	        codeInputs === null || codeInputs === void 0 ? void 0 : codeInputs.forEach((input) => (input.value = ''));
+	        if (this.otpInstance) {
+	            this.otpInstance.setValue(''); // Clear all inputs using VanillaOTP
+	        }
+	        else {
+	            const codeInputs = (_a = this.modal) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.playkit-code-input');
+	            codeInputs === null || codeInputs === void 0 ? void 0 : codeInputs.forEach((input) => (input.value = ''));
+	        }
 	    }
 	    showVerificationPanel() {
 	        var _a;