@progress/kendo-themes-html/dist/esm/wizard/templates/wizard-normal.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,n)=>e[n]||e[s]&&s||null).filter(s=>s!==null).join(" "):e).filter(e=>!!e).join(" ");var L=(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"}),f=(t,e)=>r({"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 a={xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},O={small:"small",medium:"medium",large:"large",full:"full"},N={solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},o={inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",dark:"dark",light:"light",inverse:"inverse"},c={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 Be}from"react/jsx-runtime";var K="k-wizard",Pe=[c.disabled],we={},Y={orientation:"horizontal",contentPosition:"right"},z=t=>{let{disabled:e,orientation:s=Y.orientation,contentPosition:n=Y.contentPosition,...d}=t;return Be("div",{...d,className:r(t.className,K,f(K,{disabled:e}),{[`${K}-${s}`]:s,[`${K}-${n}`]:n&&s!=="horizontal"}),children:t.children})};z.states=Pe;z.options=we;z.className=K;z.defaultOptions=Y;import{Fragment as Oe,jsx as pe}from"react/jsx-runtime";var j="k-icon k-font-icon",Me=[],Ae={size:[a.xsmall,a.small,a.medium,a.large,a.xlarge,a.xxlarge,a.xxxlarge],themeColor:[o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},Le={},R=t=>{let{size:e,themeColor:s,icon:n,rotate:d,flip:l,...i}=t;return n?pe("span",{...i,className:r(t.className,j,L(j,{size:e}),{[`k-i-${n}`]:n,[`k-color-${s}`]:s,[`k-rotate-${d}`]:d,"k-flip-h":l==="h"||l==="both","k-flip-v":l==="v"||l==="both"})}):pe(Oe,{})};R.states=Me;R.options=Ae;R.className=j;R.defaultOptions=Le;var me=R;import{Fragment as Ie,jsx as D}from"react/jsx-runtime";var ee="k-icon k-svg-icon",$e=[],Te={size:[a.xsmall,a.small,a.medium,a.large,a.xlarge,a.xxlarge,a.xxxlarge],themeColor:[o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},ue={viewBox:"0 0 24 24"},H=t=>{let{size:e,themeColor:s,rotate:n,flip:d,viewBox:l=ue.viewBox,icon:i,...p}=t;if(!i)return D(Ie,{});i==="none"&&{...p,className:r(t.className,ee,"k-none")};let m=typeof i=="object"&&i.name&&i.name;return D("span",{...p,className:r(t.className,ee,L("k-icon",{size:e}),{[`k-svg-i-${m}`]:m,[`k-color-${s}`]:s,[`k-rotate-${n}`]:n,"k-flip-h":d==="h"||d==="both","k-flip-v":d==="v"||d==="both"}),children:D("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof i=="object"?i.viewBox:l,dangerouslySetInnerHTML:typeof i=="object"?{__html:i.content}:void 0,children:i?void 0:t.children})})};H.states=$e;H.options=Te;H.className=ee;H.defaultOptions=ue;var te=H;import*as fe from"@progress/kendo-svg-icons";import{Fragment as he,jsx as W}from"react/jsx-runtime";var Ee=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),Ke=[],Re={size:[a.xsmall,a.small,a.medium,a.large,a.xlarge,a.xxlarge,a.xxxlarge],themeColor:[o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},oe={viewBox:"0 0 24 24",type:"svg"},b=t=>{let{size:e,themeColor:s,icon:n,type:d=oe.type,rotate:l,flip:i,viewBox:p=oe.viewBox,...m}=t;if(!n)return W(he,{});if(d==="svg"){if(n==="none")return W(te,{...m,icon:n,size:e});let u=Ee(`${n}-icon`);return fe[u]?W(te,{...m,icon:fe[u],size:e,themeColor:s,rotate:l,flip:i,viewBox:p}):W(he,{})}return W(me,{...m,icon:n,size:e,themeColor:s,rotate:l,flip:i})};b.states=Ke;b.options=Re;b.defaultOptions=oe;import{Fragment as _e,jsx as _,jsxs as xe}from"react/jsx-runtime";var Z="k-button",He=[c.hover,c.focus,c.active,c.selected,c.disabled],We={size:[a.small,a.medium,a.large],rounded:[O.small,O.medium,O.large,O.full],fillMode:[N.solid,N.flat,N.outline,N.clear,N.link],themeColor:[o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark,o.inverse]},C={size:a.medium,rounded:O.medium,fillMode:N.solid,themeColor:o.base,showArrow:!1,arrowIconName:"caret-alt-down"},x=t=>{let{size:e=C.size,rounded:s=C.rounded,fillMode:n=C.fillMode,themeColor:d=C.themeColor,showArrow:l=C.showArrow,arrowIconName:i=C.arrowIconName,hover:p,focus:m,active:u,selected:T,disabled:I,icon:v,text:y,iconClassName:E,...G}=t,X=v!==void 0,Q=t.children!==void 0;return xe("button",{...G,className:r(t.className,Z,L(Z,{size:e,rounded:s,fillMode:n,themeColor:d}),f(Z,{hover:p,focus:m,active:u,disabled:I,selected:T}),{"k-icon-button":!y&&!Q&&X}),children:[v&&_(b,{className:r(E,"k-button-icon"),icon:v}),y?xe(_e,{children:[y&&_("span",{className:"k-button-text",children:y}),t.children]}):t.children&&_("span",{className:"k-button-text",children:t.children}),l&&_("span",{className:"k-menu-button-arrow k-button-arrow",children:_(b,{icon:i})})]})};x.states=He;x.options=We;x.className=Z;x.defaultOptions=C;import{jsx as Ut}from"react/jsx-runtime";import{jsx as Qt}from"react/jsx-runtime";import{jsx as to}from"react/jsx-runtime";import{Fragment as De,jsx as $,jsxs as ne}from"react/jsx-runtime";var se="k-wizard-step",Ve=[c.focus],Fe={},Ge=ne(De,{children:[$("span",{className:"k-wizard-buttons-left",children:$("span",{className:"k-wizard-pager",children:"Step 2 of 3"})}),ne("span",{className:"k-wizard-buttons-right",children:[$(x,{children:"Previous"}),$(x,{themeColor:"primary",children:"Next"})]})]}),ge={buttons:Ge},P=t=>{let{focus:e,buttons:s=ge.buttons,...n}=t;return ne("div",{...n,className:r(t.className,se,f(se,{focus:e})),children:[$("div",{className:"k-wizard-content",children:t.children}),s&&$("div",{className:"k-wizard-buttons",children:s})]})};P.states=Ve;P.options=Fe;P.className=se;P.defaultOptions=ge;import{jsx as Je}from"react/jsx-runtime";var Se="k-wizard-steps",Ze=[],Ue={},qe={},w=t=>Je("div",{...t,className:r(t.className,Se),children:t.children});w.states=Ze;w.options=Ue;w.className=Se;w.defaultOptions=qe;import{jsx as je}from"react/jsx-runtime";var be="k-stepper",Xe=[],Qe={},Ye={},B=t=>{let{style:e,...s}=t;return je("nav",{...s,style:e,className:r(t.className,be),children:t.children})};B.options=Qe;B.states=Xe;B.className=be;B.defaultOptions=Ye;import{jsx as ot}from"react/jsx-runtime";var re="k-step-list",et=[],tt={},ke={orientation:"horizontal"},M=t=>{let{style:e,orientation:s=ke.orientation,...n}=t;return ot("ol",{...n,style:e,className:r(t.className,re,{[`${re}-${s}`]:s}),children:t.children})};M.options=tt;M.states=et;M.className=re;M.defaultOptions=ke;import{jsx as g,jsxs as ae}from"react/jsx-runtime";var S="k-step",st=[c.disabled,c.hover,c.focus,c.invalid,c.valid],nt={},rt={},k=t=>{let{style:e,disabled:s,hover:n,focus:d,invalid:l,valid:i,optional:p,first:m,done:u,current:T,last:I,label:v,text:y,icon:E,stepContent:G,...X}=t,Q=l?"warning-circle":"check-circle",Ce=!!(i||l);return ae("li",{...X,style:e,className:r(t.className,S,{[`${S}-done`]:u,[`${S}-first`]:m,[`${S}-current`]:T,[`${S}-last`]:I,[`${S}-optional`]:p,[`${S}-success`]:i,[`${S}-error`]:l},f(S,{hover:n,focus:d,disabled:s})),children:[ae("a",{href:"#",className:"k-step-link",children:[y&&!E&&g("span",{className:"k-step-indicator",children:g("span",{className:"k-step-indicator-text",children:y})}),E&&g("span",{className:"k-step-indicator",children:g(b,{className:"k-step-indicator-icon",icon:E})}),p&&!v&&g("span",{className:"k-step-label",children:g("span",{className:"k-step-label-optional",children:"(Optional)"})}),v&&ae("span",{className:"k-step-label",children:[g("span",{className:"k-step-text",children:v}),Ce&&g(b,{icon:Q}),p&&g("span",{className:"k-step-label-optional",children:"(Optional)"})]})]}),G&&g("div",{className:"k-step-content",style:{height:"140px"},children:G})]})};k.options=nt;k.states=st;k.className=S;k.defaultOptions=rt;import{jsx as le,jsxs as ie}from"react/jsx-runtime";var h="k-progressbar",at=[c.disabled,c.indeterminate],it={},A={indeterminate:!1,label:!0,labelPosition:"start",orientation:"horizontal",reverse:!1,value:"0"},V=t=>{let{disabled:e,height:s,indeterminate:n=A.indeterminate,label:d=A.label,labelPosition:l=A.labelPosition,orientation:i=A.orientation,reverse:p=A.reverse,value:m=A.value,width:u,style:T,...I}=t;return ie("div",{...I,className:r(t.className,h,f(h,{disabled:e}),{[`${h}-${i}`]:i,[`${h}-indeterminate`]:n,[`${h}-reverse`]:p}),style:{...T,"--kendo-progressbar-value":m,[i==="horizontal"?"height":"width"]:i==="horizontal"?s:u},children:[le("span",{className:r("k-progress-status-wrap",{[`k-progress-${l}`]:l&&!n}),children:d&&ie("span",{className:"k-progress-status",children:[m,"%"]})}),!n&&le("div",{className:"k-progressbar-value k-selected",children:le("span",{className:r("k-progress-status-wrap",{[`k-progress-${l}`]:l}),children:d&&ie("span",{className:"k-progress-status",children:[t.value,"%"]})})})]})};V.states=at;V.options=it;V.className=h;V.defaultOptions=A;var ve=V;import{jsx as ce}from"react/jsx-runtime";var ye="k-chunk-progressbar",lt=(t,e)=>e<=t-1,ct=[c.disabled,c.indeterminate],dt={},U={chunkCount:5,orientation:"horizontal",progress:0},q=t=>{let{disabled:e,chunkCount:s=U.chunkCount,indeterminate:n,orientation:d=U.orientation,progress:l=U.progress,reverse:i,...p}=t;return ce("div",{...p,className:r(t.className,h,ye,f(h,{disabled:e}),{[`${h}-${d}`]:d,[`${h}-indeterminate`]:n,[`${h}-reverse`]:i}),children:ce("ul",{className:"k-progressbar-chunks k-reset",children:[...Array(s)].map((m,u)=>ce("li",{className:r("k-progressbar-chunk",{"k-first":u===0,"k-last":u===[...Array(s)].length-1,"k-selected":lt(l,u)})},u))})})};q.states=ct;q.options=dt;q.className=ye;q.defaultOptions=U;import{jsx as pt}from"react/jsx-runtime";var de=t=>pt(ve,{...t});import{jsx as Ho}from"react/jsx-runtime";import{Fragment as mt,jsx as F,jsxs as Ne}from"react/jsx-runtime";var ze=({gridTemplateColumns:t="repeat(6, 1fr)",...e})=>F(B,{style:{display:"grid",gridTemplateColumns:t},children:Ne(mt,{children:[Ne(M,{style:{gridColumnStart:"1",gridColumnEnd:"-1"},children:[F(k,{first:!0,done:!0,icon:"check",style:{maxWidth:"33.333%"}}),F(k,{current:!0,focus:!0,text:"2",style:{maxWidth:"33.333%"}}),F(k,{last:!0,optional:!0,text:"3",style:{maxWidth:"33.333%"}})]}),F(de,{label:!1,value:"50"})]}),...e});import{Fragment as ts,jsx as jo,jsxs as es}from"react/jsx-runtime";import{Fragment as fs,jsx as us,jsxs as hs}from"react/jsx-runtime";import{Fragment as ut,jsx as J,jsxs as ft}from"react/jsx-runtime";var Cs=({...t})=>J(z,{id:"wizard",children:ft(ut,{children:[J(ze,{}),J(w,{children:J(P,{children:"Short content"})})]}),...t});export{Cs as WizardNormal};