@progress/kendo-themes-html/dist/esm/otp/otp-input.mjs

A collection of HTML helpers used for developing Kendo UI themes

var l=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?l(...e):typeof e=="object"?Object.keys(e).map((a,i)=>e[i]||e[a]&&a||null).filter(a=>a!==null).join(" "):e).filter(e=>!!e).join(" ");var f=(t,e)=>l({[`${t}-xs`]:e.size==="xsmall",[`${t}-sm`]:e.size==="small",[`${t}-md`]:e.size==="medium",[`${t}-lg`]:e.size==="large",[`${t}-xl`]:e.size==="xlarge",[`${t}-xxl`]:e.size==="xxlarge",[`${t}-xxxl`]:e.size==="xxxlarge"},{[`${t}-${e.fillMode}`]:e.fillMode},{[`${t}-${e.fillMode}-${e.themeColor}`]:e.fillMode&&e.themeColor},{[`${t}-${e.themeColor}`]:e.themeColor&&e.fillMode===void 0},{"k-rounded-sm":e.rounded==="small","k-rounded-md":e.rounded==="medium","k-rounded-lg":e.rounded==="large","k-rounded-full":e.rounded==="full"}),w=(t,e)=>l({"k-valid":e.valid,"k-invalid":e.invalid,"k-hover":e.hover,"k-focus":e.focus,"k-checked":e.checked,"k-active":e.active,"k-selected":e.selected,"k-disabled":e.disabled,"k-indeterminate":e.indeterminate&&!e.checked,"k-loading":e.loading,"k-empty":e.empty,"k-readonly":e.readonly,"k-highlighted":e.highlighted});var n={xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},c={small:"small",medium:"medium",large:"large",full:"full"},u={solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},s={inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",dark:"dark",light:"light",inverse:"inverse"},o={open:"open",hover:"hover",focus:"focus",active:"active",selected:"selected",disabled:"disabled",valid:"valid",invalid:"invalid",loading:"loading",required:"required",empty:"empty",indeterminate:"indeterminate",checked:"checked",readonly:"readonly",highlighted:"highlighted"};import{jsx as Ee}from"react/jsx-runtime";var F="k-input",Be=[o.hover,o.focus,o.valid,o.invalid,o.required,o.disabled,o.loading,o.readonly],He={size:[n.small,n.medium,n.large],rounded:[c.small,c.medium,c.large,c.full],fillMode:[u.solid,u.flat,u.outline]},_={size:n.medium,rounded:n.medium,fillMode:u.solid},y=t=>{let{hover:e,focus:a,disabled:i,invalid:r,valid:p,loading:d,readonly:x,size:m=_.size,rounded:b=_.rounded,fillMode:I=_.fillMode,...g}=t;return Ee("span",{...g,className:l(t.className,F,f(F,{size:m,rounded:b,fillMode:I}),w(F,{hover:e,focus:a,disabled:i,invalid:r,valid:p,loading:d,readonly:x}))})};y.states=Be;y.options=He;y.className=F;y.defaultOptions=_;import{jsx as Ve}from"react/jsx-runtime";var q="k-picker",Ke=[o.hover,o.focus,o.valid,o.invalid,o.required,o.disabled,o.loading,o.readonly],Re={size:[n.small,n.medium,n.large],rounded:[c.small,c.medium,c.large,c.full],fillMode:[u.solid,u.flat,u.outline]},G={size:n.medium,rounded:c.medium,fillMode:u.solid},U=t=>{let{hover:e,focus:a,disabled:i,invalid:r,valid:p,loading:d,readonly:x,size:m=G.size,rounded:b=G.rounded,fillMode:I=G.fillMode,...g}=t;return Ve("span",{...g,className:l(t.className,q,f(q,{size:m,rounded:b,fillMode:I}),w(q,{hover:e,focus:a,disabled:i,invalid:r,valid:p,loading:d,readonly:x})),children:t.children})};U.states=Ke;U.options=Re;U.className=q;U.defaultOptions=G;import{Fragment as qe,jsx as pe}from"react/jsx-runtime";var Z="k-icon k-font-icon",$e=[],Fe={size:[n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[s.base,s.primary,s.secondary,s.tertiary,s.success,s.warning,s.error,s.info,s.light,s.dark]},_e={},L=t=>{let{size:e,themeColor:a,icon:i,rotate:r,flip:p,...d}=t;return i?pe("span",{...d,className:l(t.className,Z,f(Z,{size:e}),{[`k-i-${i}`]:i,[`k-color-${a}`]:a,[`k-rotate-${r}`]:r,"k-flip-h":p==="h"||p==="both","k-flip-v":p==="v"||p==="both"})}):pe(qe,{})};L.states=$e;L.options=Fe;L.className=Z;L.defaultOptions=_e;var ue=L;import{Fragment as Xe,jsx as X}from"react/jsx-runtime";var j="k-icon k-svg-icon",Ge=[],Ue={size:[n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[s.base,s.primary,s.secondary,s.tertiary,s.success,s.warning,s.error,s.info,s.light,s.dark]},me={viewBox:"0 0 24 24"},P=t=>{let{size:e,themeColor:a,rotate:i,flip:r,viewBox:p=me.viewBox,icon:d,...x}=t;if(!d)return X(Xe,{});d==="none"&&{...x,className:l(t.className,j,"k-none")};let m=typeof d=="object"&&d.name&&d.name;return X("span",{...x,className:l(t.className,j,f("k-icon",{size:e}),{[`k-svg-i-${m}`]:m,[`k-color-${a}`]:a,[`k-rotate-${i}`]:i,"k-flip-h":r==="h"||r==="both","k-flip-v":r==="v"||r==="both"}),children:X("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof d=="object"?d.viewBox:p,dangerouslySetInnerHTML:typeof d=="object"?{__html:d.content}:void 0,children:d?void 0:t.children})})};P.states=Ge;P.options=Ue;P.className=j;P.defaultOptions=me;var ee=P;import*as fe from"@progress/kendo-svg-icons";import{Fragment as xe,jsx as A}from"react/jsx-runtime";var De=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),Je=[],We={size:[n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[s.base,s.primary,s.secondary,s.tertiary,s.success,s.warning,s.error,s.info,s.light,s.dark]},te={viewBox:"0 0 24 24",type:"svg"},h=t=>{let{size:e,themeColor:a,icon:i,type:r=te.type,rotate:p,flip:d,viewBox:x=te.viewBox,...m}=t;if(!i)return A(xe,{});if(r==="svg"){if(i==="none")return A(ee,{...m,icon:i,size:e});let b=De(`${i}-icon`);return fe[b]?A(ee,{...m,icon:fe[b],size:e,themeColor:a,rotate:p,flip:d,viewBox:x}):A(xe,{})}return A(ue,{...m,icon:i,size:e,themeColor:a,rotate:p,flip:d})};h.states=Je;h.options=We;h.defaultOptions=te;import{Fragment as Ze,jsx as oe}from"react/jsx-runtime";var he="k-clear-value",Qe=[o.disabled,o.loading,o.readonly],Ye={},B=t=>{let{disabled:e,loading:a,readonly:i,value:r}=t;return e||i||a||!r?oe(Ze,{}):oe("span",{className:l(t.className,he),children:oe(h,{icon:"x"})})};B.states=Qe;B.options=Ye;B.className=he;import{jsx as tt}from"react/jsx-runtime";var ne="k-input-inner",je=[],et={},D={type:"text",autocomplete:"off",value:"",placeholder:""},H=t=>{let{value:e=D.value,type:a=D.type,placeholder:i=D.placeholder,autocomplete:r=D.autocomplete,...p}=t;return tt("input",{...p,type:a,className:l(t.className,ne,f(ne,t)),placeholder:i,autoComplete:r,defaultValue:e})};H.states=je;H.options=et;H.className=ne;import{jsx as be,jsxs as st}from"react/jsx-runtime";var se="k-input-inner",ot=[],nt={},ae=t=>{let{value:e,placeholder:a,showValue:i,valueIcon:r,valueIconName:p,...d}=t;return st("span",{...d,className:l(t.className,se,f(se,t)),children:[r,!r&&p&&be(h,{className:"k-input-value-icon",icon:p}),i&&!e&&a,i&&e&&be("span",{className:"k-input-value-text",children:e})]})};ae.states=ot;ae.options=nt;ae.className=se;import{jsx as it}from"react/jsx-runtime";var le="k-input-inner",at=[],lt={},Ie={value:"",placeholder:""},ie=t=>{let{value:e=Ie.value,placeholder:a=Ie.placeholder,rows:i,...r}=t;return it("textarea",{...r,className:l(t.className,le,f(le,t)),placeholder:a,rows:i,defaultValue:e})};ie.states=at;ie.options=lt;ie.className=le;import{Fragment as dt,jsx as ge}from"react/jsx-runtime";var ye="k-input-loading-icon",rt=[o.disabled,o.loading],J=t=>{let{disabled:e,loading:a}=t;return e||!a?ge(dt,{}):ge("span",{className:l(t.className,ye,"k-icon k-i-loading")})};J.states=rt;J.className=ye;import{Fragment as ut,jsx as ve}from"react/jsx-runtime";var Ne="k-input-validation-icon",ct=[o.valid,o.invalid,o.disabled,o.loading],pt={},E=t=>{let{valid:e,invalid:a,disabled:i,loading:r}=t,p=a?"warning-circle":"check-circle";return i||r||!!!(e||a)?ve(ut,{}):ve(h,{className:l(Ne),icon:p})};E.states=ct;E.options=pt;E.className=Ne;import{Fragment as xt,jsx as Se}from"react/jsx-runtime";var mt="k-input-prefix",ft={direction:"horizontal"},Me=t=>{let{direction:e=ft.direction,...a}=t;return t.children?Se("span",{...a,className:l(mt,t.className,{[`k-input-prefix-${e}`]:e}),children:t.children}):Se(xt,{})};import{Fragment as It,jsx as ke}from"react/jsx-runtime";var ht="k-input-suffix",bt={direction:"horizontal"},Te=t=>{let{direction:e=bt.direction,...a}=t;return t.children?ke("span",{...a,className:l(ht,t.className,{[`k-input-suffix-${e}`]:e}),children:t.children}):ke(It,{})};import{jsx as Bo}from"react/jsx-runtime";import{jsx as Ro}from"react/jsx-runtime";import{jsx as yt}from"react/jsx-runtime";var ze="k-input-separator",gt={direction:"vertical"},re=t=>{let{direction:e=gt.direction,...a}=t;return yt("span",{...a,className:l(ze,t.className,{[`${ze}-${e}`]:e})})};import{Fragment as Oe,jsx as S,jsxs as de}from"react/jsx-runtime";var Ce="k-textbox",vt=[o.hover,o.focus,o.valid,o.invalid,o.required,o.disabled,o.loading,o.readonly],Nt={size:[n.small,n.medium,n.large],rounded:[c.small,c.medium,c.large,c.full],fillMode:[u.solid,u.flat,u.outline]},k={showClearButton:!0,showValidationIcon:!0,size:y.defaultOptions.size,rounded:y.defaultOptions.rounded,fillMode:y.defaultOptions.fillMode,separators:!0},v=t=>{let{size:e=k.size,rounded:a=k.rounded,fillMode:i=k.fillMode,separators:r=k.separators,showClearButton:p=k.showClearButton,showValidationIcon:d=k.showValidationIcon,prefix:x,suffix:m,type:b,value:I,placeholder:g,hover:M,focus:N,valid:O,invalid:V,required:Y,loading:C,disabled:$,readonly:ce,...Ae}=t;return de(y,{...Ae,size:e,rounded:a,fillMode:i,hover:M,focus:N,valid:O,invalid:V,required:Y,loading:C,disabled:$,readonly:ce,className:l(t.className,Ce),children:[x&&de(Oe,{children:[S(Me,{children:x}),r&&S(re,{})]}),S(H,{placeholder:g,value:I,type:b}),d&&S(E,{valid:O,invalid:V,loading:C,disabled:$}),S(J,{loading:C,disabled:$}),p&&S(B,{loading:C,disabled:$,readonly:ce,value:I}),m&&de(Oe,{children:[r&&S(re,{}),S(Te,{children:m})]})]})};v.states=vt;v.options=Nt;v.className=Ce;v.defaultOptions=k;import{jsx as cn}from"react/jsx-runtime";import{Fragment as hn,jsx as xn}from"react/jsx-runtime";import{Fragment as kt,jsx as K,jsxs as Le}from"react/jsx-runtime";var W="k-button",St=[o.hover,o.focus,o.active,o.selected,o.disabled],Mt={size:[n.small,n.medium,n.large],rounded:[c.small,c.medium,c.large,c.full],fillMode:[u.solid,u.flat,u.outline,u.clear,u.link],themeColor:[s.base,s.primary,s.secondary,s.tertiary,s.success,s.warning,s.error,s.info,s.light,s.dark,s.inverse]},T={size:n.medium,rounded:c.medium,fillMode:u.solid,themeColor:s.base,showArrow:!1,arrowIconName:"caret-alt-down"},z=t=>{let{size:e=T.size,rounded:a=T.rounded,fillMode:i=T.fillMode,themeColor:r=T.themeColor,showArrow:p=T.showArrow,arrowIconName:d=T.arrowIconName,hover:x,focus:m,active:b,selected:I,disabled:g,icon:M,text:N,iconClassName:O,...V}=t,Y=M!==void 0,C=t.children!==void 0;return Le("button",{...V,className:l(t.className,W,f(W,{size:e,rounded:a,fillMode:i,themeColor:r}),w(W,{hover:x,focus:m,active:b,disabled:g,selected:I}),{"k-icon-button":!N&&!C&&Y}),children:[M&&K(h,{className:l(O,"k-button-icon"),icon:M}),N?Le(kt,{children:[N&&K("span",{className:"k-button-text",children:N}),t.children]}):t.children&&K("span",{className:"k-button-text",children:t.children}),p&&K("span",{className:"k-menu-button-arrow k-button-arrow",children:K(h,{icon:d})})]})};z.states=St;z.options=Mt;z.className=W;z.defaultOptions=T;import{jsx as Mn}from"react/jsx-runtime";import{jsx as On}from"react/jsx-runtime";import{jsx as Pn}from"react/jsx-runtime";import{Fragment as Gn,jsx as qn}from"react/jsx-runtime";import{jsx as Ot}from"react/jsx-runtime";var Pe="k-otp-input",Tt=[o.hover,o.focus,o.valid,o.invalid,o.required,o.disabled,o.readonly],zt={size:[n.small,n.medium,n.large],rounded:[c.small,c.medium,c.large,c.full],fillMode:[u.solid,u.flat,u.outline]},Q={size:v.defaultOptions.size,rounded:v.defaultOptions.rounded,fillMode:v.defaultOptions.fillMode},R=t=>{let{size:e=Q.size,rounded:a=Q.rounded,fillMode:i=Q.fillMode,type:r,value:p,placeholder:d,hover:x,focus:m,valid:b,invalid:I,required:g,disabled:M,readonly:N,...O}=t;return Ot(v,{...O,size:e,rounded:a,fillMode:i,type:r,value:p,placeholder:d,hover:x,focus:m,valid:b,invalid:I,required:g,disabled:M,readonly:N,showClearButton:!1,showValidationIcon:!1,className:l(t.className,Pe)})};R.states=Tt;R.options=zt;R.className=Pe;R.defaultOptions=Q;var jn=R;export{Pe as ONETIMEPASSWORDINPUT_CLASSNAME,R as OneTimePasswordInput,jn as default};