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

A collection of HTML helpers used for developing Kendo UI themes

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