@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
2 lines (1 loc) • 15.9 kB
JavaScript
var l=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?l(...e):typeof e=="object"?Object.keys(e).map((r,a)=>e[a]||e[r]&&r||null).filter(r=>r!==null).join(" "):e).filter(e=>!!e).join(" ");var K=(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.themeColor}`]:e.themeColor},{"k-rounded-sm":e.rounded==="small","k-rounded-md":e.rounded==="medium","k-rounded-lg":e.rounded==="large","k-rounded-full":e.rounded==="full","k-rounded-none":e.rounded==="none"}),_=(t,e)=>{let{valid:r,invalid:a,hover:o,focus:s,checked:p,active:c,selected:f,disabled:v,indeterminate:m,loading:B,empty:y,readonly:w,highlighted:T,...z}=e;return l({"k-valid":r,"k-invalid":a,"k-hover":o,"k-focus":s,"k-checked":p,"k-active":c,"k-selected":f,"k-disabled":v,"k-indeterminate":m&&!p,"k-loading":B,"k-empty":y,"k-readonly":w,"k-highlighted":T},Object.keys(z).reduce((E,L)=>(L.startsWith("k-")?E[L]=z[L]:E[`k-${L}`]=z[L],E),{}))};var i={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"};var S={undefined:void 0,outline:"outline",solid:"solid",duotone:"duotone"},n={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",inverse:"inverse"},h={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 j="stepper",ce=j;import{jsx as we}from"react/jsx-runtime";var de="k-stepper",Me=[],Ae={},Be={},u=t=>{let{style:e,...r}=t;return we("nav",{...r,style:e,className:l(t.className,de),"aria-label":"Stepper",children:t.children})};u.options=Ae;u.states=Me;u.className=de;u.defaultOptions=Be;u.moduleName=j;u.folderName=ce;u.ariaSpec={selector:".k-stepper",rules:[{selector:".k-stepper",attribute:"role=navigation or nodeName=nav",usage:"The landmark role navigation must be assigned to the component."},{selector:".k-step.k-disabled>.k-step-link",attribute:"aria-disabled=true",usage:"A disabled (inactive) link."},{selector:".k-step-current>.k-step-link",attribute:"aria-current=step",usage:"The currently selected link."},{selector:".k-step.k-focus .k-step-link",attribute:"tabindex=0",usage:"Focused step link is in the tab order."},{selector:".k-step:not(.k-focus) .k-step-link",attribute:"tabindex=-1",usage:"Non-focused step links are removed from tab order."}]};import{jsx as _e}from"react/jsx-runtime";var ee="k-step-list",Te=[],ze={},me={orientation:"horizontal"},b=t=>{let{style:e,orientation:r=me.orientation,wizardContext:a,...o}=t;return _e("ol",{...o,style:e,className:l(t.className,ee,{[`${ee}-${r}`]:r}),...a&&{role:"tablist"},children:t.children})};b.options=ze;b.states=Te;b.className=ee;b.defaultOptions=me;import{Fragment as He,jsx as ue}from"react/jsx-runtime";var te="k-font-icon",$e=[],Ie={size:[i.undefined,i.xsmall,i.small,i.medium,i.large,i.xlarge,i.xxlarge,i.xxxlarge],themeColor:[n.undefined,n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info]},Ke={},H=t=>{let{size:e,themeColor:r,icon:a,rotate:o,flip:s,...p}=t;return a?ue("span",{...p,className:l(t.className,te,K(te,{size:e}),{[`k-i-${a}`]:a,[`k-color-${r}`]:r,[`k-rotate-${o}`]:o,"k-flip-h":s==="h"||s==="both","k-flip-v":s==="v"||s==="both"}),"aria-hidden":"true"}):ue(He,{})};H.states=$e;H.options=Ie;H.className=te;H.defaultOptions=Ke;var fe=H;import{Fragment as Ge,jsx as q}from"react/jsx-runtime";var oe="k-svg-icon",De=[],Fe={size:[i.undefined,i.xsmall,i.small,i.medium,i.large,i.xlarge,i.xxlarge,i.xxxlarge],themeColor:[n.undefined,n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info],variant:[S.outline,S.solid,S.duotone]},re={viewBox:"0 0 24 24",variant:S.outline},D=t=>{let{size:e,themeColor:r,rotate:a,flip:o,viewBox:s=re.viewBox,variant:p=re.variant,icon:c,...f}=t;if(!c)return q(Ge,{});if(c==="none")return q("span",{...f,className:l(t.className,oe,K("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let v=typeof c=="object"&&c.name&&c.name,m=typeof c=="object"?p&&c.variants?.[p]||c.variants?.outline||c.content:void 0;return q("span",{...f,className:l(t.className,oe,K("k-icon",{size:e}),{[`k-svg-i-${v}`]:v,[`k-color-${r}`]:r,[`k-rotate-${a}`]:a,"k-flip-h":o==="h"||o==="both","k-flip-v":o==="v"||o==="both"}),"aria-hidden":"true",children:q("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof c=="object"?c.viewBox:s,dangerouslySetInnerHTML:m!==void 0?{__html:m}:void 0,children:c?void 0:t.children})})};D.states=De;D.options=Fe;D.className=oe;D.defaultOptions=re;var ae=D;import*as se from"@progress/kendo-svg-icons";var ge="icon",be="icons";import{useContext as We}from"react";import{createContext as Ve}from"react";var xe=Ve({iconsType:"svg"});import{Fragment as ve,jsx as F}from"react/jsx-runtime";var J="k-icon",Ue=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),qe=[],Je={size:[i.undefined,i.xsmall,i.small,i.medium,i.large,i.xlarge,i.xxlarge,i.xxxlarge],themeColor:[n.undefined,n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info],variant:[S.outline,S.solid,S.duotone]},X={viewBox:"0 0 24 24",type:"svg",variant:S.outline},N=t=>{let{iconsType:e}=We(xe),{size:r,themeColor:a,icon:o,type:s=e||X.type,rotate:p,flip:c,viewBox:f=X.viewBox,variant:v=X.variant,...m}=t;if(!o)return F(ve,{});if((e||s)==="svg"){if(o==="none")return F(ae,{...m,className:l(t.className,J),icon:o,size:r,variant:v});let y=se[o]?o:Ue(`${o}-icon`);return se[y]?F(ae,{...m,className:l(t.className,J),icon:se[y],size:r,themeColor:a,rotate:p,flip:c,viewBox:f,variant:v}):F(ve,{})}return F(fe,{...m,className:l(t.className,J),icon:o,size:r,themeColor:a,rotate:p,flip:c})};N.states=qe;N.options=Je;N.defaultOptions=X;N.className=J;N.moduleName=ge;N.folderName=be;N.ariaSpec={selector:".k-icon, .k-svg-icon",rules:[{selector:".k-icon, .k-svg-icon",attribute:"aria-hidden=true",usage:"Hides the icon element and all its children from assistive technologies."}]};import{jsx as C,jsxs as ne}from"react/jsx-runtime";var P="k-step",Xe=[h.disabled,h.hover,h.focus,h.invalid,h.valid],Qe={},Ye={},d=t=>{let{style:e,disabled:r,hover:a,focus:o,invalid:s,valid:p,optional:c,first:f,done:v,current:m,last:B,label:y,text:w,icon:T,stepContent:z,wizardContext:E,ariaControls:L,...Ee}=t,Le=s?"warning-circle":"check-circle",Re=!!(p||s),Oe=y||(w?`Step ${w}`:T?"Step":void 0);return ne("li",{...Ee,style:e,className:l(t.className,P,{[`${P}-done`]:v,[`${P}-first`]:f,[`${P}-current`]:m,[`${P}-last`]:B,[`${P}-optional`]:c,[`${P}-success`]:p,[`${P}-error`]:s},_(P,{hover:a,focus:o,disabled:r})),...E&&{role:"none"},children:[ne("a",{href:"#",className:"k-step-link",...E&&{role:"tab"},...L&&{"aria-controls":L},...m&&{"aria-current":E?"true":"step"},...m&&E&&{"aria-selected":"true"},...r&&{"aria-disabled":"true"},tabIndex:o||m?0:-1,"aria-label":Oe,children:[w&&!T&&C("span",{className:"k-step-indicator",children:C("span",{className:"k-step-indicator-text",children:w})}),T&&C("span",{className:"k-step-indicator",children:C(N,{className:"k-step-indicator-icon",icon:T})}),c&&!y&&C("span",{className:"k-step-label",children:C("span",{className:"k-step-label-optional",children:"(Optional)"})}),y&&ne("span",{className:"k-step-label",children:[C("span",{className:"k-step-text",children:y}),Re&&C(N,{icon:Le}),c&&C("span",{className:"k-step-label-optional",children:"(Optional)"})]})]}),z&&C("div",{className:"k-step-content",style:{height:"140px"},children:z})]})};d.options=Qe;d.states=Xe;d.className=P;d.defaultOptions=Ye;var G="progressbar",Q=G;import{jsx as le,jsxs as ie}from"react/jsx-runtime";var k="k-progressbar",Ze=[h.disabled,h.indeterminate],je={orientation:["horizontal","vertical"]},M={indeterminate:!1,label:!0,labelPosition:"start",orientation:"horizontal",reverse:!1,value:"0"},x=t=>{let{disabled:e,height:r,indeterminate:a=M.indeterminate,label:o=M.label,labelPosition:s=M.labelPosition,orientation:p=M.orientation,reverse:c=M.reverse,value:f=M.value,width:v,style:m,ariaLabel:B,...y}=t;return ie("div",{...y,className:l(t.className,k,_(k,{disabled:e}),{[`${k}-${p}`]:p,[`${k}-indeterminate`]:a,[`${k}-reverse`]:c}),style:{...m,"--kendo-progressbar-value":f,[p==="horizontal"?"height":"width"]:p==="horizontal"?r:v},role:"progressbar","aria-label":B||"progress","aria-valuenow":a?void 0:Number(f),"aria-valuemin":0,"aria-valuemax":100,children:[le("span",{className:l("k-progress-status-wrap",{[`k-progress-${s}`]:s&&!a}),children:o&&ie("span",{className:"k-progress-status",children:[f,"%"]})}),!a&&le("div",{className:"k-progressbar-value k-selected",children:le("span",{className:l("k-progress-status-wrap",{[`k-progress-${s}`]:s}),children:o&&ie("span",{className:"k-progress-status",children:[t.value,"%"]})})})]})};x.states=Ze;x.options=je;x.className=k;x.defaultOptions=M;x.moduleName=G;x.folderName=Q;x.ariaSpec={selector:".k-progressbar",implicitRole:"progressbar",rules:[{selector:".k-progressbar",attribute:"role=progressbar",usage:"Sets the proper role for ProgressBar."},{selector:".k-progressbar",attribute:"aria-label or aria-labelledby",usage:"The ProgressBar needs an accessible name to be assigned to it."},{selector:".k-progressbar:not(.k-progressbar-indeterminate)",attribute:"aria-valuenow",usage:"Required if the value is not indeterminate. Decimal value between aria-valuemin and aria-valuemax."},{selector:".k-progressbar",attribute:"aria-valuemin",usage:"Minimum value. Defaults to 0."},{selector:".k-progressbar",attribute:"aria-valuemax",usage:"Maximum value. Defaults to 100."}]};var he=x;import{jsx as pe}from"react/jsx-runtime";var ke="k-chunk-progressbar",et=(t,e)=>e<=t-1,tt=[h.disabled,h.indeterminate],ot={},Y={chunkCount:5,orientation:"horizontal",progress:0},A=t=>{let{disabled:e,chunkCount:r=Y.chunkCount,indeterminate:a,orientation:o=Y.orientation,progress:s=Y.progress,reverse:p,ariaLabel:c,...f}=t;return pe("div",{...f,className:l(t.className,k,ke,_(k,{disabled:e}),{[`${k}-${o}`]:o,[`${k}-indeterminate`]:a,[`${k}-reverse`]:p}),role:"progressbar","aria-label":c||"progress","aria-valuenow":a?void 0:s,"aria-valuemin":0,"aria-valuemax":r,children:pe("ul",{className:"k-progressbar-chunks k-reset",children:[...Array(r)].map((v,m)=>pe("li",{className:l("k-progressbar-chunk",{"k-first":m===0,"k-last":m===[...Array(r)].length-1,"k-selected":et(s,m)})},m))})})};A.states=tt;A.options=ot;A.className=ke;A.defaultOptions=Y;A.moduleName=G;A.folderName=Q;A.ariaSpec={selector:".k-chunk-progressbar",implicitRole:"progressbar",rules:[{selector:".k-chunk-progressbar",attribute:"role=progressbar",usage:"Sets the proper role for ChunkProgressBar."},{selector:".k-chunk-progressbar",attribute:"aria-label or aria-labelledby",usage:"The ChunkProgressBar needs an accessible name to be assigned to it."},{selector:".k-chunk-progressbar:not(.k-progressbar-indeterminate)",attribute:"aria-valuenow",usage:"Required if the value is not indeterminate. Value between aria-valuemin and aria-valuemax."},{selector:".k-chunk-progressbar",attribute:"aria-valuemin",usage:"Minimum value. Defaults to 0."},{selector:".k-chunk-progressbar",attribute:"aria-valuemax",usage:"Maximum value. Defaults to chunk count."}]};import{jsx as rt}from"react/jsx-runtime";var g=t=>rt(he,{...t});import{jsx as yo}from"react/jsx-runtime";import{jsx as R}from"react/jsx-runtime";var at=x.options,st=x.states,ye={...x.defaultOptions,variant:"start"},nt=[{name:"start",title:"Label start"},{name:"center",title:"Label center"},{name:"end",title:"Label end"},{name:"empty",title:"No label"}],it=[],$=t=>{let{variant:e,modifiers:r,...a}={...ye,...t},o={},s={style:{width:"324px"}};switch(Object.keys(r||{}).forEach(p=>{switch(p){case"reverse":o.reverse=!!r?.[p];break;case"vertical":o.orientation=r?.[p]?"vertical":void 0,s.style=r?.[p]?void 0:{width:"324px"};break}}),e){case"end":return R("div",{...s,children:R(g,{...a,...o,labelPosition:"end",value:"50"})});case"center":return R("div",{...s,children:R(g,{...a,...o,labelPosition:"center",value:"50"})});case"empty":return R("div",{...s,children:R(g,{...a,...o,label:!1,value:"50"})});default:return R("div",{...s,children:R(g,{...a,...o,labelPosition:"start",value:"50"})})}};$.options=at;$.states=st;$.variants=nt;$.defaultOptions=ye;$.modifiers=it;$.className=x.className;import{Fragment as lt,jsx as V,jsxs as Se}from"react/jsx-runtime";var _o=({gridTemplateColumns:t="repeat(6, 1fr)",...e})=>V(u,{style:{display:"grid",gridTemplateColumns:t},children:Se(lt,{children:[Se(b,{style:{gridColumnStart:"1",gridColumnEnd:"-1"},children:[V(d,{first:!0,done:!0,icon:"check",style:{maxWidth:"33.333%"}}),V(d,{current:!0,focus:!0,text:"2",style:{maxWidth:"33.333%"}}),V(d,{last:!0,optional:!0,text:"3",style:{maxWidth:"33.333%"}})]}),V(g,{label:!1,value:"50"})]}),...e});import{Fragment as pt,jsx as W,jsxs as Ne}from"react/jsx-runtime";var Do=({gridTemplateRows:t="repeat(3, 1fr)",...e})=>W(u,{style:{display:"grid",gridTemplateRows:t},children:Ne(pt,{children:[Ne(b,{orientation:"vertical",style:{gridRowStart:"1",gridRowEnd:"-1"},children:[W(d,{first:!0,done:!0,icon:"check",style:{maxHeight:"33.333%"}}),W(d,{current:!0,focus:!0,text:"2",style:{maxHeight:"33.333%"}}),W(d,{last:!0,optional:!0,text:"3",style:{maxHeight:"33.333%"}})]}),W(g,{orientation:"vertical",reverse:!0,label:!1,value:"50"})]}),...e});import{Fragment as ct,jsx as U,jsxs as Ce}from"react/jsx-runtime";var Uo=({gridTemplateColumns:t="repeat(6, 1fr)",...e})=>U(u,{style:{display:"grid",gridTemplateColumns:t},children:Ce(ct,{children:[Ce(b,{style:{gridColumnStart:"1",gridColumnEnd:"-1"},children:[U(d,{first:!0,done:!0,icon:"check",style:{maxWidth:"33.333%"}}),U(d,{current:!0,focus:!0,text:"2",style:{maxWidth:"33.333%"}}),U(d,{last:!0,disabled:!0,text:"3",style:{maxWidth:"33.333%"}})]}),U(g,{label:!1,value:"50"})]}),...e});import{jsx as O,jsxs as Z}from"react/jsx-runtime";var dt=u.options,mt=u.states,Pe={...u.defaultOptions,variant:"horizontal"},ut=[{name:"horizontal",title:"Horizontal"},{name:"vertical",title:"Vertical"}],ft=[{name:"label",title:"Label"},{name:"optional",title:"Optional"}],I=t=>{let{variant:e,modifiers:r,...a}={...Pe,...t},o={};return Object.keys(r||{}).forEach(s=>{switch(s){case"label":{o.label=r?.[s]?"Label":void 0;break}case"optional":{o.optional=!!r?.[s];break}}}),e==="vertical"?Z(u,{style:{display:"grid",gridTemplateRows:"repeat(3, 1fr)"},...a,children:[Z(b,{orientation:"vertical",style:{gridRowStart:"1",gridRowEnd:"-1"},children:[O(d,{first:!0,done:!0,icon:"check",label:o.label,style:{maxHeight:"33.333%"}}),O(d,{current:!0,focus:!0,text:"2",label:o.label,style:{maxHeight:"33.333%"}}),O(d,{last:!0,optional:o.optional,text:"3",label:o.label,style:{maxHeight:"33.333%"}})]}),O(g,{className:"k-top-5 k-row-start-1 k-row-end-3",orientation:"vertical",reverse:!0,label:!1,value:"50"})]}):Z(u,{style:{display:"grid",gridTemplateColumns:"repeat(6, 1fr)"},...a,children:[Z(b,{style:{gridColumnStart:"1",gridColumnEnd:"-1"},children:[O(d,{first:!0,done:!0,icon:"check",label:o.label,style:{maxWidth:"33.333%"}}),O(d,{current:!0,focus:!0,text:"2",label:o.label,style:{maxWidth:"33.333%"}}),O(d,{last:!0,optional:o.optional,text:"3",label:o.label,style:{maxWidth:"33.333%"}})]}),O(g,{className:"k-col-start-2 k-col-end-6",style:{width:"400px"},label:!1,value:"50"})]})};I.options=dt;I.states=mt;I.variants=ut;I.defaultOptions=Pe;I.modifiers=ft;I.className=u.className;export{d as Step,b as StepList,u as Stepper,I as StepperDemo,Uo as StepperDisabled,_o as StepperNormal,Do as StepperVertical};