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