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

A collection of HTML helpers used for developing Kendo UI themes

var r=(...e)=>e.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?r(...t):typeof t=="object"?Object.keys(t).map((o,a)=>t[a]||t[o]&&o||null).filter(o=>o!==null).join(" "):t).filter(t=>!!t).join(" ");var c=(e,t)=>r({[`${e}-xs`]:t.size==="xsmall",[`${e}-sm`]:t.size==="small",[`${e}-md`]:t.size==="medium",[`${e}-lg`]:t.size==="large",[`${e}-xl`]:t.size==="xlarge",[`${e}-xxl`]:t.size==="xxlarge",[`${e}-xxxl`]:t.size==="xxxlarge"},{[`${e}-${t.fillMode}`]:t.fillMode},{[`${e}-${t.fillMode}-${t.themeColor}`]:t.fillMode&&t.themeColor},{[`${e}-${t.themeColor}`]:t.themeColor&&t.fillMode===void 0},{"k-rounded-sm":t.rounded==="small","k-rounded-md":t.rounded==="medium","k-rounded-lg":t.rounded==="large","k-rounded-full":t.rounded==="full"}),S=(e,t)=>{let{valid:o,invalid:a,hover:l,focus:d,checked:m,active:x,selected:f,disabled:T,indeterminate:O,loading:M,empty:L,readonly:w,highlighted:b,...E}=t;return r({"k-valid":o,"k-invalid":a,"k-hover":l,"k-focus":d,"k-checked":m,"k-active":x,"k-selected":f,"k-disabled":T,"k-indeterminate":O&&!m,"k-loading":M,"k-empty":L,"k-readonly":w,"k-highlighted":b},Object.keys(E).reduce((A,h)=>(h.startsWith("k-")?A[h]=E[h]:A[`k-${h}`]=E[h],A),{}))};function ve(e,t){if(!t)return{};let o=Array.isArray(t)?t:[t];return Object.fromEntries(o.map(a=>[`k-${a}`,!0]))}var s={xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},u={small:"small",medium:"medium",large:"large",full:"full"},p={solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},i={inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",dark:"dark",light:"light",inverse:"inverse"},n={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",generating:"generating",expanded:"expanded"};import{jsx as nt}from"react/jsx-runtime";var J="k-otp",tt=[n.invalid],ot={size:[s.small,s.medium,s.large]},ge={size:s.medium},v=e=>{let{size:t=ge.size,invalid:o,...a}=e;return nt("div",{...a,className:r(e.className,J,c(J,{size:t}),S(J,{invalid:o})),children:e.children})};v.states=tt;v.options=ot;v.className=J;v.defaultOptions=ge;v.moduleName="otp";v.folderName="otp";var ie="textbox",ye=ie;var D="input",Q=D;import{jsx as rt}from"react/jsx-runtime";var Y="k-input",st=[n.hover,n.focus,n.valid,n.invalid,n.required,n.disabled,n.loading,n.readonly],at={size:[s.small,s.medium,s.large],rounded:[u.small,u.medium,u.large,u.full],fillMode:[p.solid,p.flat,p.outline]},Z={size:s.medium,rounded:s.medium,fillMode:p.solid},g=e=>{let{hover:t,focus:o,disabled:a,invalid:l,valid:d,loading:m,readonly:x,size:f=Z.size,rounded:T=Z.rounded,fillMode:O=Z.fillMode,...M}=e;return rt("span",{...M,className:r(e.className,Y,c(Y,{size:f,rounded:T,fillMode:O}),S(Y,{hover:t,focus:o,disabled:a,invalid:l,valid:d,loading:m,readonly:x}))})};g.states=st;g.options=at;g.className=Y;g.defaultOptions=Z;g.moduleName=D;g.folderName=Q;import{jsx as dt}from"react/jsx-runtime";var j="k-picker",it=[n.hover,n.focus,n.valid,n.invalid,n.required,n.disabled,n.loading,n.readonly],lt={size:[s.small,s.medium,s.large],rounded:[u.small,u.medium,u.large,u.full],fillMode:[p.solid,p.flat,p.outline]},ee={size:s.medium,rounded:u.medium,fillMode:p.solid},R=e=>{let{hover:t,focus:o,disabled:a,invalid:l,valid:d,loading:m,readonly:x,size:f=ee.size,rounded:T=ee.rounded,fillMode:O=ee.fillMode,...M}=e;return dt("span",{...M,className:r(e.className,j,c(j,{size:f,rounded:T,fillMode:O}),S(j,{hover:t,focus:o,disabled:a,invalid:l,valid:d,loading:m,readonly:x})),children:e.children})};R.states=it;R.options=lt;R.className=j;R.defaultOptions=ee;R.moduleName=D;R.folderName=Q;import{Fragment as ct,jsx as Se}from"react/jsx-runtime";var le="k-font-icon",pt=[],mt={size:[s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[i.base,i.primary,i.secondary,i.tertiary,i.success,i.warning,i.error,i.info,i.light,i.dark]},ut={},U=e=>{let{size:t,themeColor:o,icon:a,rotate:l,flip:d,...m}=e;return a?Se("span",{...m,className:r(e.className,le,c(le,{size:t}),{[`k-i-${a}`]:a,[`k-color-${o}`]:o,[`k-rotate-${l}`]:l,"k-flip-h":d==="h"||d==="both","k-flip-v":d==="v"||d==="both"})}):Se(ct,{})};U.states=pt;U.options=mt;U.className=le;U.defaultOptions=ut;var Pe=U;import{Fragment as Nt,jsx as te}from"react/jsx-runtime";var de="k-svg-icon",ft=[],xt={size:[s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[i.base,i.primary,i.secondary,i.tertiary,i.success,i.warning,i.error,i.info,i.light,i.dark]},we={viewBox:"0 0 24 24"},V=e=>{let{size:t,themeColor:o,rotate:a,flip:l,viewBox:d=we.viewBox,icon:m,...x}=e;if(!m)return te(Nt,{});m==="none"&&{...x,className:r(e.className,de,"k-none")};let f=typeof m=="object"&&m.name&&m.name;return te("span",{...x,className:r(e.className,de,c("k-icon",{size:t}),{[`k-svg-i-${f}`]:f,[`k-color-${o}`]:o,[`k-rotate-${a}`]:a,"k-flip-h":l==="h"||l==="both","k-flip-v":l==="v"||l==="both"}),children:te("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof m=="object"?m.viewBox:d,dangerouslySetInnerHTML:typeof m=="object"?{__html:m.content}:void 0,children:m?void 0:e.children})})};V.states=ft;V.options=xt;V.className=de;V.defaultOptions=we;var pe=V;import*as me from"@progress/kendo-svg-icons";var Ee="icon",ke="icons";import{Fragment as Le,jsx as $}from"react/jsx-runtime";var oe="k-icon",Tt=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),It=[],Ot={size:[s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[i.base,i.primary,i.secondary,i.tertiary,i.success,i.warning,i.error,i.info,i.light,i.dark]},ue={viewBox:"0 0 24 24",type:"svg"},N=e=>{let{size:t,themeColor:o,icon:a,type:l=ue.type,rotate:d,flip:m,viewBox:x=ue.viewBox,...f}=e;if(!a)return $(Le,{});if(l==="svg"){if(a==="none")return $(pe,{...f,className:r(e.className,oe),icon:a,size:t});let T=me[a]?a:Tt(`${a}-icon`);return me[T]?$(pe,{...f,className:r(e.className,oe),icon:me[T],size:t,themeColor:o,rotate:d,flip:m,viewBox:x}):$(Le,{})}return $(Pe,{...f,className:r(e.className,oe),icon:a,size:t,themeColor:o,rotate:d,flip:m})};N.states=It;N.options=Ot;N.defaultOptions=ue;N.className=oe;N.moduleName=Ee;N.folderName=ke;import{Fragment as bt,jsx as ce}from"react/jsx-runtime";var Ae="k-clear-value",ht=[n.disabled,n.loading,n.readonly],Mt={},F=e=>{let{disabled:t,loading:o,readonly:a,value:l}=e;return t||a||o||!l?ce(bt,{}):ce("span",{className:r(e.className,Ae),children:ce(N,{icon:"x"})})};F.states=ht;F.options=Mt;F.className=Ae;import{jsx as yt}from"react/jsx-runtime";var fe="k-input-inner",vt=[],gt={},ne={type:"text",autocomplete:"off",value:"",placeholder:""},G=e=>{let{value:t=ne.value,type:o=ne.type,placeholder:a=ne.placeholder,autocomplete:l=ne.autocomplete,...d}=e;return yt("input",{...d,type:o,className:r(e.className,fe,c(fe,e)),placeholder:a,autoComplete:l,defaultValue:t})};G.states=vt;G.options=gt;G.className=fe;import{jsx as Ce,jsxs as wt}from"react/jsx-runtime";var xe="k-input-inner",St=[],Pt={},Ne=e=>{let{value:t,placeholder:o,showValue:a,valueIcon:l,valueIconName:d,...m}=e;return wt("span",{...m,className:r(e.className,xe,c(xe,e)),children:[l,!l&&d&&Ce(N,{className:"k-input-value-icon",icon:d}),a&&!t&&o,a&&t&&Ce("span",{className:"k-input-value-text",children:t})]})};Ne.states=St;Ne.options=Pt;Ne.className=xe;import{jsx as Lt}from"react/jsx-runtime";var Te="k-input-inner",Et=[],kt={},ze={value:"",placeholder:""},Ie=e=>{let{value:t=ze.value,placeholder:o=ze.placeholder,rows:a,...l}=e;return Lt("textarea",{...l,className:r(e.className,Te,c(Te,e)),placeholder:o,rows:a,defaultValue:t})};Ie.states=Et;Ie.options=kt;Ie.className=Te;import{Fragment as Ct,jsx as _e}from"react/jsx-runtime";var Ke="k-input-loading-icon",At=[n.disabled,n.loading],se=e=>{let{disabled:t,loading:o}=e;return t||!o?_e(Ct,{}):_e("span",{className:r(e.className,Ke,"k-icon k-i-loading")})};se.states=At;se.className=Ke;import{Fragment as Kt,jsx as Re}from"react/jsx-runtime";var He="k-input-validation-icon",zt=[n.valid,n.invalid,n.disabled,n.loading],_t={},X=e=>{let{valid:t,invalid:o,disabled:a,loading:l}=e,d=o?"warning-circle":"check-circle";return a||l||!!!(t||o)?Re(Kt,{}):Re(N,{className:r(He),icon:d})};X.states=zt;X.options=_t;X.className=He;import{Fragment as Bt,jsx as Be}from"react/jsx-runtime";var Rt="k-input-prefix",Ht={direction:"horizontal"},De=e=>{let{direction:t=Ht.direction,...o}=e;return e.children?Be("span",{...o,className:r(Rt,e.className,{[`k-input-prefix-${t}`]:t}),children:e.children}):Be(Bt,{})};import{Fragment as Vt,jsx as Ue}from"react/jsx-runtime";var Dt="k-input-suffix",Ut={direction:"horizontal"},Ve=e=>{let{direction:t=Ut.direction,...o}=e;return e.children?Ue("span",{...o,className:r(Dt,e.className,{[`k-input-suffix-${t}`]:t}),children:e.children}):Ue(Vt,{})};import{jsx as Sn}from"react/jsx-runtime";import{jsx as kn}from"react/jsx-runtime";import{jsx as Ft}from"react/jsx-runtime";var $e="k-input-separator",$t={direction:"vertical"},Oe=e=>{let{direction:t=$t.direction,...o}=e;return Ft("span",{...o,className:r($e,e.className,{[`${$e}-${t}`]:t})})};import{Fragment as Fe,jsx as k,jsxs as he}from"react/jsx-runtime";var Ge="k-textbox",Gt=[n.hover,n.focus,n.valid,n.invalid,n.required,n.disabled,n.loading,n.readonly],Xt={size:[s.small,s.medium,s.large],rounded:[u.small,u.medium,u.large,u.full],fillMode:[p.solid,p.flat,p.outline]},C={showClearButton:!0,showValidationIcon:!0,size:g.defaultOptions.size,rounded:g.defaultOptions.rounded,fillMode:g.defaultOptions.fillMode,separators:!0},y=e=>{let{size:t=C.size,rounded:o=C.rounded,fillMode:a=C.fillMode,separators:l=C.separators,showClearButton:d=C.showClearButton,showValidationIcon:m=C.showValidationIcon,prefix:x,suffix:f,type:T,value:O,placeholder:M,hover:L,focus:w,valid:b,invalid:E,required:A,loading:h,disabled:K,readonly:be,...Ze}=e;return he(g,{...Ze,size:t,rounded:o,fillMode:a,hover:L,focus:w,valid:b,invalid:E,required:A,loading:h,disabled:K,readonly:be,className:r(e.className,Ge),children:[x&&he(Fe,{children:[k(De,{children:x}),l&&k(Oe,{})]}),k(G,{placeholder:M,value:O,type:T}),m&&k(X,{valid:b,invalid:E,loading:h,disabled:K}),k(se,{loading:h,disabled:K}),d&&k(F,{loading:h,disabled:K,readonly:be,value:O}),f&&he(Fe,{children:[l&&k(Oe,{}),k(Ve,{children:f})]})]})};y.states=Gt;y.options=Xt;y.className=Ge;y.defaultOptions=C;y.moduleName=ie;y.folderName=ye;import{jsx as os}from"react/jsx-runtime";import{Fragment as ls,jsx as is}from"react/jsx-runtime";var Me="button",qe=Me;import{Fragment as Qt,jsx as q,jsxs as We}from"react/jsx-runtime";var W="k-button",qt=["icon-button"],Wt=[n.hover,n.focus,n.active,n.selected,n.disabled,n.generating],Jt={size:[s.small,s.medium,s.large],rounded:[u.small,u.medium,u.large,u.full],fillMode:[p.solid,p.flat,p.outline,p.clear,p.link],themeColor:[i.base,i.primary,i.secondary,i.tertiary,i.success,i.warning,i.error,i.info,i.light,i.dark,i.inverse]},z={size:s.medium,rounded:u.medium,fillMode:p.solid,themeColor:i.base,showArrow:!1,arrowIconName:"caret-alt-down"},P=e=>{let{size:t=z.size,rounded:o=z.rounded,fillMode:a=z.fillMode,themeColor:l=z.themeColor,showArrow:d=z.showArrow,arrowIconName:m=z.arrowIconName,variant:x,hover:f,focus:T,active:O,selected:M,disabled:L,icon:w,text:b,iconClassName:E,...A}=e,h=w!==void 0,K=e.children!==void 0;return We("button",{...A,className:r(e.className,W,ve(W,x),c(W,{size:t,rounded:o,fillMode:a,themeColor:l}),S(W,{hover:f,focus:T,active:O,disabled:L,selected:M}),{"k-icon-button":!b&&!K&&h}),children:[w&&q(N,{className:r(E,"k-button-icon"),icon:w}),b?We(Qt,{children:[b&&q("span",{className:"k-button-text",children:b}),e.children]}):e.children&&q("span",{className:"k-button-text",children:e.children}),d&&q("span",{className:"k-menu-button-arrow k-button-arrow",children:q(N,{icon:m})})]})};P.states=Wt;P.options=Jt;P.variants=qt;P.className=W;P.defaultOptions=z;P.moduleName=Me;P.folderName=qe;import{jsx as Is}from"react/jsx-runtime";import{jsx as bs}from"react/jsx-runtime";import{jsx as Ss}from"react/jsx-runtime";import{Fragment as Hs,jsx as Rs}from"react/jsx-runtime";import{jsx as jt}from"react/jsx-runtime";var Je="k-otp-input",Yt=[n.hover,n.focus,n.valid,n.invalid,n.required,n.disabled,n.readonly],Zt={size:[s.small,s.medium,s.large],rounded:[u.small,u.medium,u.large,u.full],fillMode:[p.solid,p.flat,p.outline]},ae={size:y.defaultOptions.size,rounded:y.defaultOptions.rounded,fillMode:y.defaultOptions.fillMode},I=e=>{let{size:t=ae.size,rounded:o=ae.rounded,fillMode:a=ae.fillMode,type:l,value:d,placeholder:m,hover:x,focus:f,valid:T,invalid:O,required:M,disabled:L,readonly:w,...b}=e;return jt(y,{...b,size:t,rounded:o,fillMode:a,type:l,value:d,placeholder:m,hover:x,focus:f,valid:T,invalid:O,required:M,disabled:L,readonly:w,showClearButton:!1,showValidationIcon:!1,className:r(e.className,Je)})};I.states=Yt;I.options=Zt;I.className=Je;I.defaultOptions=ae;import{jsx as no}from"react/jsx-runtime";var Qe="k-otp-separator",eo=[],to={},oo={},H=e=>{let{children:t,...o}=e;return no("div",{...o,className:r(e.className,Qe),children:t})};H.states=eo;H.options=to;H.className=Qe;H.defaultOptions=oo;import{jsx as ro}from"react/jsx-runtime";var re="k-input-group",so=[n.disabled],ao={fillMode:[p.solid,p.flat,p.outline,p.clear,p.link]},Ye={fillMode:p.solid},B=e=>{let{fillMode:t=Ye.fillMode,disabled:o,...a}=e;return ro("div",{...a,className:r(e.className,re,c(re,{fillMode:t}),S(re,{disabled:o})),children:e.children})};B.states=so;B.options=ao;B.className=re;B.defaultOptions=Ye;import{Fragment as la,jsx as ra,jsxs as ia}from"react/jsx-runtime";import{Fragment as ca,jsx as ua,jsxs as fa}from"react/jsx-runtime";import{Fragment as Ma,jsx as Oa,jsxs as ha}from"react/jsx-runtime";import{Fragment as io,jsx as _,jsxs as lo}from"react/jsx-runtime";var Aa=({hover:e,focus:t,invalid:o,fillMode:a,size:l,...d})=>_(v,{invalid:o,size:l,children:lo(io,{children:[_(I,{size:l,fillMode:a,invalid:o,focus:t,hover:e,...d}),_(I,{size:l,fillMode:a,invalid:o,...d}),_(I,{size:l,fillMode:a,invalid:o,...d}),_(I,{size:l,fillMode:a,invalid:o,...d}),_(I,{size:l,fillMode:a,invalid:o,...d}),_(I,{size:l,fillMode:a,invalid:o,...d})]})});export{Aa as OneTimePasswordNormal};