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

A collection of HTML helpers used for developing Kendo UI themes

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