UNPKG

@progress/kendo-ui

Version:

This package is part of the [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) suite.

3 lines 8.77 kB
/* @license */ (function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`kendo.core.min.js`),require(`kendo.textbox.min.js`)):typeof define==`function`&&define.amd?define([`exports`,`kendo.core.min`,`kendo.textbox.min`],t):(e=typeof globalThis<`u`?globalThis:e||self,t((e.kendo=e.kendo||{},e.kendo._globals=e.kendo._globals||{},e.kendo._globals.Otpinput={}),e.kendo._globals.Core,e.kendo._globals.Textbox))})(this,function(e,t,n){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});let r={id:`otpinput`,name:`OTPInput`,category:`web`,description:`The OTPInput widget provides a rich input for selecting values or ranges of values.`,depends:[`core`,`textbox`]};(function(e,t){var n=window.kendo,r=n.ui.Widget,i=n.ui.TextBox,a=`k-hidden`,o=n.ui,s=n.keys,c=`k-otp`,l=`k-otp-input`,u=`k-otp-separator`,d=`k-input-inner`,f=`.kendoOtpInput`,p=`change`,m=`k-input-group`,h=`k-invalid`,g=/^[0-9]\d*$/,_=`aria-hidden`,v=`aria-label`,y=`role`,b=`right`,x=`left`,S=`focus`,C=r.extend({init:function(t,i){var a=this;r.fn.init.call(a,t,i),i=e.extend(!0,{},i),a.options.value=i.value||a.element.val(),a.options.separator=n.isPresent(i.separator)?i.separator:null,a.options.inputMode=i.inputMode||e(t).attr(`inputmode`)||`text`,a._wrapper(),a._renderGroups(a.options.items),a._attachHandlers(),a.value(a.options.value),a.element.on(p+f,a._change.bind(a))},events:[p],options:{name:`OTPInput`,type:`text`,value:``,placeholder:``,separator:null,readonly:!1,enable:!0,space:!1,size:t,rounded:t,fillMode:t},enable:function(t){let r=this._inputs;n.isEmpty(r)||e(r).each(function(){this.getKendoTextBox().enable(t)})},readonly:function(t){let r=this._inputs;n.isEmpty(r)||e(r).each(function(){this.getKendoTextBox().readonly(t)})},focus:function(){let e=this._inputs;n.isEmpty(e)||e[0].focus().select()},value:function(n){let r=this,i=r._groupLength,a=r.options.type;if(n===t)return r._value;if(n===null&&(r.element.val(n),r._value=n,r._emptyValues()),i>0&&n){if(r._emptyValues(),!r._validate(a,n))return;let t=n.toString().split(``);t.length>i&&(t=t.splice(0,i)),r._inputs.forEach(function(n,r){let i=t.at(r);e(n).val(i)});let o=``;r._inputs.forEach(function(t){o=o+=e(t).val()}),r.element.val(o),r._value=o}},destroy:function(){let t=this,i=t._inputs;n.isEmpty(i)||(i.forEach(function(t){let n=e(t)[0];e(n).getKendoTextBox().destroy()}),i.map(function(t){return e(t)[0].closest(`.${l}`)}).forEach(function(t){e(t).remove()}),t.wrapper.find(`.${m}`).remove(),t.wrapper.find(`.${u}`).remove(),t.element.unwrap().removeClass(a).removeAttr(`type`).removeAttr(`aria-hidden`),r.fn.destroy.call(t))},setOptions:function(e){let t=this;t.destroy(),n.deepExtend(t.options,e),t.init(t.element,t.options)},_change:function(e){let t=this,n=t.element.val();t._value=n,t.trigger(p,{value:n})},_wrapper:function(){let e=this,t=e.element,r,i=n.cssProperties.defaultValues.size[e.options.size],o=i?` k-otp-${i}`:``;r=t.addClass(a).attr(`type`,`hidden`).attr(_,!0).wrap(`<div class='k-otp${o}' ${y}="group" ></div>`).parent(),e.wrapper=r},_renderGroups:function(t){let r=this,i=r.options.separator,a=[];if(r._inputs=[],n.isInteger(t)){r._groupLength=t;for(let n=0;n<t;n++){let t=r._renderInput(n+1);a.push(t),r._inputs.push(e(t).find(`.${d}`))}if(r.options.space)r.wrapper.append(a);else{let t=e(`<div class="${m}"></div>`).append(a);r.wrapper.append(t)}a=[]}else if(Array.isArray(t)){r._groupLength=t.reduce((e,{groupLength:t})=>e+t,0);let o=0;t.forEach(function(s,c){if(s.groupLength){for(let t=0;t<s.groupLength;t++){++o;let t=r._renderInput(o);a.push(t),r._inputs.push(e(t).find(`.${d}`))}if(r.options.space)c!=t.length-1&&a.push(r._renderSeparator()),r.wrapper.append(a);else{let o=e(`<div class="${m}"></div>`).append(a);r.wrapper.append(o),n.isPresent(i)&&c!=t.length-1&&r.wrapper.append(r._renderSeparator())}a=[]}}),o=0}},_renderInput:function(t){let n=this,r=n.options.inputMode,a;a=e(`<input>`).addClass(d).attr(`inputmode`,r).attr(`type`,n.options.type==`password`?`password`:`text`).attr(v,n.options.type==`numeric`?`Enter Otp Numerical Character ${t}`:`Enter Otp Character ${t}`).attr(`placeholder`,n.options.placeholder).attr(`autocomplete`,`off`).attr(`maxlength`,1);let o=e.extend({},{maxLength:1,size:n.options.size,rounded:n.options.rounded,fillMode:n.options.fillMode,enable:n.options.enable,readonly:n.options.readonly}),s=new i(a,o).wrapper;return s.removeClass(d).addClass(l),s},_renderSeparator:function(){let t=this.options.separator,r=e(`<div class="${u}"></div>`);return n.isPresent(t)&&(n.isFunction(t)?r.append(t()):r.append(t)),r},_input:function(n){let r=this,i=n.currentTarget,a=r._inputs.length,o=r._oldValue,s=n.currentTarget.value,c=r.options.type;if(!r._validate(c,s)){r._blinkInvalidState(i),e(i).val(``),o!=t&&(e(i).val(o),delete r._oldValue),e(i).trigger(S);return}let u=e(r.wrapper).find(`.${l}`),f=u.find(`:focus`),m=u.find(`.${d}`).index(f),h=r._inputs.map(function(t){return e(t).val()}).join(``);h!=r._value&&(r.element.val(``),r.element.val(h),r._value=h,r.trigger(p,{value:h})),r._moveFocus(void 0,m,a,b)},_attachHandlers:function(){let e=this,t=e._inputs,r=`.${d}`;n.isEmpty(t)||e.wrapper.on(`focus`+f,r,e._focus.bind(e)).on(`beforeinput`+f,r,e._beforeInput.bind(e)).on(`input`+f,r,e._input.bind(e)).on(`keydown`+f,r,e._keyDown.bind(e)).on(`paste`+f,r,e._paste.bind(e))},_beforeInput:function(n){let r=this,i=n.currentTarget;i&&e(i).val()!=t&&(r._oldValue=e(i).val())},_focus:function(t){let n=t.currentTarget;n&&e(n).select()},_validate:function(e,t){return e==`number`?g.test(t):!0},_paste:function(t){let r=this,i=r._inputs,a=r.options.readonly,o=n.support.isRtl(r.element),s=e(r.wrapper).find(`.${l}`),c=r.options.type,u=(t.clipboardData||t.originalEvent.clipboardData||window.clipboardData).getData(`text`),d;if(t.preventDefault(),!(!u||a==1)){if(!r._validate(c,u)){this._blinkInvalidState.bind(r),this._blinkInvalidState(r.wrapper);return}if(r.value(u),r.trigger(p,{newValue:r._value}),o){if(r._value.length==r._inputs.length)d=r._shiftFocus(s,0,x);else{let t=e(i.map(function(t){return e(t)}).filter(function(e){let t=e.val();return t==``||n.isBlank(t)}))[0];d=e(t).closest(`.${l}`)}e(d).find(`input`).trigger(S)}else{if(r._value.length==r._inputs.length)d=r._shiftFocus(s,s.length-2,b);else{let t=e(i.map(function(t){return e(t)}).filter(function(e){let t=e.val();return t==``||n.isBlank(t)})).first()[0];d=e(t).closest(`.${l}`)}e(d).find(`input`).trigger(S)}}},_keyDown:function(t){let r=this,i=t.keyCode||t.which,a=t.currentTarget,o=r._inputs.length,c=e(r.wrapper).find(`.${l}`),u=c.find(`:focus`),f=u.val()!=``,m=c.find(`.${d}`).index(u),h=n.support.isRtl(r.element),g;if(!(t.target!=a||t.ctrlKey||i>=112&&i<=123||i>=96&&i<=111||t.shiftKey&&i==s.TAB||i==s.TAB)){if(i===s.LEFT&&!h||t.keyCode===s.RIGHT&&h)g=r._shiftFocus(c,m,x),r._moveFocus(g,m,o,x),t.preventDefault();else if(i===s.LEFT&&h||t.keyCode===s.RIGHT&&!h)g=r._shiftFocus(c,m,b),r._moveFocus(g,m,o,b),t.preventDefault();else if(i===s.DELETE){if(t.preventDefault(),!e(u).is(`[readonly]`)){u.val(``);let t=r._inputs.map(function(t){return e(t).val()}).join(``);f&&(r._value=t,r.trigger(p,{value:t})),r.element.val(``),r.element.val(t)}}else if(i==s.BACKSPACE&&(t.preventDefault(),g=r._shiftFocus(c,m,x),!e(u).is(`[readonly]`))){u.val(``);let t=r._inputs.map(function(t){return e(t).val()}).join(``);f&&(r._value=t,r.trigger(p,{value:t})),r.element.val(``),r.element.val(t),(m>0&&!h||m==c.length-1&&h||m>0&&!h||m>0&&h)&&g.find(`input`).trigger(S)}}},_shiftFocus:function(t,n,r){switch(r){case b:return n+1===t.length?t.eq(0):e(t[n+1]);case x:return n===0?t.eq(t.length-1):e(t[n-1]);default:return null}},_moveFocus:function(t,n,r,i){let a=this,o=e(a.wrapper).find(`.${l}`);i==b?n!=r-1&&(t=a._shiftFocus(o,n,b),t.find(`input`).trigger(S)):i==x&&n>0&&(t=a._shiftFocus(o,n,x),t.find(`input`).trigger(S))},_emptyValues:function(){this._inputs.forEach(function(t){e(t).val(``)})},_blinkInvalidState:function(t){let n=this,r=e(t).hasClass(c);n._addInvalidState.bind(n),n._addInvalidState(t,r),clearTimeout(n._invalidStateTimeout),n._invalidStateTimeout=setTimeout(function(){n._removeInvalidState.bind(n),n._removeInvalidState(t,r)},100)},_addInvalidState:function(t,r=!1){let i=this._inputs;r?n.isEmpty(i)||e(i.map(function(t){return e(t).closest(`.${l}`)})).each(function(){e(this).addClass(h)}):e(t).closest(`.${l}`).addClass(h)},_removeInvalidState:function(t=!1){let r=this,i=r._inputs;t?n.isEmpty(i)||e(i.map(function(t){return e(t).closest(`.${l}`)})).each(function(){e(this).removeClass(h)}):e(r).closest(`.${l}`).removeClass(h),r._invalidStateTimeout=null}});n.cssProperties.registerPrefix(`OTPInput`,`k-input-`),o.plugin(C)})(window.kendo.jQuery);var i=kendo;e.__meta__=r,e.default=i}); //# sourceMappingURL=kendo.otpinput.min.js.map