@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
2 lines (1 loc) • 14.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:b,indeterminate:d,loading:B,empty:k,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":b,"k-indeterminate":d&&!p,"k-loading":B,"k-empty":k,"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"},x={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 Y="stepper",le=Y;import{jsx as Oe}from"react/jsx-runtime";var pe="k-stepper",Ee=[],Le={},Re={},m=t=>{let{style:e,...r}=t;return Oe("nav",{...r,style:e,className:l(t.className,pe),"aria-label":"Stepper",children:t.children})};m.options=Le;m.states=Ee;m.className=pe;m.defaultOptions=Re;m.moduleName=Y;m.folderName=le;m.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 Be}from"react/jsx-runtime";var Z="k-step-list",Me=[],Ae={},ce={orientation:"horizontal"},y=t=>{let{style:e,orientation:r=ce.orientation,wizardContext:a,...o}=t;return Be("ol",{...o,style:e,className:l(t.className,Z,{[`${Z}-${r}`]:r}),...a&&{role:"tablist"},children:t.children})};y.options=Ae;y.states=Me;y.className=Z;y.defaultOptions=ce;import{Fragment as _e,jsx as de}from"react/jsx-runtime";var j="k-font-icon",we=[],Te={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]},ze={},H=t=>{let{size:e,themeColor:r,icon:a,rotate:o,flip:s,...p}=t;return a?de("span",{...p,className:l(t.className,j,K(j,{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"}):de(_e,{})};H.states=we;H.options=Te;H.className=j;H.defaultOptions=ze;var me=H;import{Fragment as Ke,jsx as W}from"react/jsx-runtime";var ee="k-svg-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],variant:[S.outline,S.solid,S.duotone]},te={viewBox:"0 0 24 24",variant:S.outline},D=t=>{let{size:e,themeColor:r,rotate:a,flip:o,viewBox:s=te.viewBox,variant:p=te.variant,icon:c,...f}=t;if(!c)return W(Ke,{});if(c==="none")return W("span",{...f,className:l(t.className,ee,K("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let b=typeof c=="object"&&c.name&&c.name,d=typeof c=="object"?p&&c.variants?.[p]||c.variants?.outline||c.content:void 0;return W("span",{...f,className:l(t.className,ee,K("k-icon",{size:e}),{[`k-svg-i-${b}`]:b,[`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:W("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof c=="object"?c.viewBox:s,dangerouslySetInnerHTML:d!==void 0?{__html:d}:void 0,children:c?void 0:t.children})})};D.states=$e;D.options=Ie;D.className=ee;D.defaultOptions=te;var oe=D;import*as re from"@progress/kendo-svg-icons";var ue="icon",fe="icons";import{useContext as De}from"react";import{createContext as He}from"react";var ge=He({iconsType:"svg"});import{Fragment as be,jsx as F}from"react/jsx-runtime";var U="k-icon",Fe=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),Ge=[],Ve={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]},q={viewBox:"0 0 24 24",type:"svg",variant:S.outline},N=t=>{let{iconsType:e}=De(ge),{size:r,themeColor:a,icon:o,type:s=e||q.type,rotate:p,flip:c,viewBox:f=q.viewBox,variant:b=q.variant,...d}=t;if(!o)return F(be,{});if((e||s)==="svg"){if(o==="none")return F(oe,{...d,className:l(t.className,U),icon:o,size:r,variant:b});let k=re[o]?o:Fe(`${o}-icon`);return re[k]?F(oe,{...d,className:l(t.className,U),icon:re[k],size:r,themeColor:a,rotate:p,flip:c,viewBox:f,variant:b}):F(be,{})}return F(me,{...d,className:l(t.className,U),icon:o,size:r,themeColor:a,rotate:p,flip:c})};N.states=Ge;N.options=Ve;N.defaultOptions=q;N.className=U;N.moduleName=ue;N.folderName=fe;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 ae}from"react/jsx-runtime";var P="k-step",We=[x.disabled,x.hover,x.focus,x.invalid,x.valid],Ue={},qe={},u=t=>{let{style:e,disabled:r,hover:a,focus:o,invalid:s,valid:p,optional:c,first:f,done:b,current:d,last:B,label:k,text:w,icon:T,stepContent:z,wizardContext:E,ariaControls:L,...Se}=t,Ne=s?"warning-circle":"check-circle",Ce=!!(p||s),Pe=k||(w?`Step ${w}`:T?"Step":void 0);return ae("li",{...Se,style:e,className:l(t.className,P,{[`${P}-done`]:b,[`${P}-first`]:f,[`${P}-current`]:d,[`${P}-last`]:B,[`${P}-optional`]:c,[`${P}-success`]:p,[`${P}-error`]:s},_(P,{hover:a,focus:o,disabled:r})),...E&&{role:"none"},children:[ae("a",{href:"#",className:"k-step-link",...E&&{role:"tab"},...L&&{"aria-controls":L},...d&&{"aria-current":E?"true":"step"},...d&&E&&{"aria-selected":"true"},...r&&{"aria-disabled":"true"},tabIndex:o||d?0:-1,"aria-label":Pe,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&&!k&&C("span",{className:"k-step-label",children:C("span",{className:"k-step-label-optional",children:"(Optional)"})}),k&&ae("span",{className:"k-step-label",children:[C("span",{className:"k-step-text",children:k}),Ce&&C(N,{icon:Ne}),c&&C("span",{className:"k-step-label-optional",children:"(Optional)"})]})]}),z&&C("div",{className:"k-step-content",style:{height:"140px"},children:z})]})};u.options=Ue;u.states=We;u.className=P;u.defaultOptions=qe;var G="progressbar",J=G;import{jsx as ne,jsxs as se}from"react/jsx-runtime";var v="k-progressbar",Je=[x.disabled,x.indeterminate],Xe={orientation:["horizontal","vertical"]},M={indeterminate:!1,label:!0,labelPosition:"start",orientation:"horizontal",reverse:!1,value:"0"},g=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:b,style:d,ariaLabel:B,...k}=t;return se("div",{...k,className:l(t.className,v,_(v,{disabled:e}),{[`${v}-${p}`]:p,[`${v}-indeterminate`]:a,[`${v}-reverse`]:c}),style:{...d,"--kendo-progressbar-value":f,[p==="horizontal"?"height":"width"]:p==="horizontal"?r:b},role:"progressbar","aria-label":B||"progress","aria-valuenow":a?void 0:Number(f),"aria-valuemin":0,"aria-valuemax":100,children:[ne("span",{className:l("k-progress-status-wrap",{[`k-progress-${s}`]:s&&!a}),children:o&&se("span",{className:"k-progress-status",children:[f,"%"]})}),!a&&ne("div",{className:"k-progressbar-value k-selected",children:ne("span",{className:l("k-progress-status-wrap",{[`k-progress-${s}`]:s}),children:o&&se("span",{className:"k-progress-status",children:[t.value,"%"]})})})]})};g.states=Je;g.options=Xe;g.className=v;g.defaultOptions=M;g.moduleName=G;g.folderName=J;g.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 xe=g;import{jsx as ie}from"react/jsx-runtime";var ve="k-chunk-progressbar",Qe=(t,e)=>e<=t-1,Ye=[x.disabled,x.indeterminate],Ze={},X={chunkCount:5,orientation:"horizontal",progress:0},A=t=>{let{disabled:e,chunkCount:r=X.chunkCount,indeterminate:a,orientation:o=X.orientation,progress:s=X.progress,reverse:p,ariaLabel:c,...f}=t;return ie("div",{...f,className:l(t.className,v,ve,_(v,{disabled:e}),{[`${v}-${o}`]:o,[`${v}-indeterminate`]:a,[`${v}-reverse`]:p}),role:"progressbar","aria-label":c||"progress","aria-valuenow":a?void 0:s,"aria-valuemin":0,"aria-valuemax":r,children:ie("ul",{className:"k-progressbar-chunks k-reset",children:[...Array(r)].map((b,d)=>ie("li",{className:l("k-progressbar-chunk",{"k-first":d===0,"k-last":d===[...Array(r)].length-1,"k-selected":Qe(s,d)})},d))})})};A.states=Ye;A.options=Ze;A.className=ve;A.defaultOptions=X;A.moduleName=G;A.folderName=J;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 je}from"react/jsx-runtime";var h=t=>je(xe,{...t});import{jsx as go}from"react/jsx-runtime";import{jsx as R}from"react/jsx-runtime";var et=g.options,tt=g.states,he={...g.defaultOptions,variant:"start"},ot=[{name:"start",title:"Label start"},{name:"center",title:"Label center"},{name:"end",title:"Label end"},{name:"empty",title:"No label"}],rt=[],$=t=>{let{variant:e,modifiers:r,...a}={...he,...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(h,{...a,...o,labelPosition:"end",value:"50"})});case"center":return R("div",{...s,children:R(h,{...a,...o,labelPosition:"center",value:"50"})});case"empty":return R("div",{...s,children:R(h,{...a,...o,label:!1,value:"50"})});default:return R("div",{...s,children:R(h,{...a,...o,labelPosition:"start",value:"50"})})}};$.options=et;$.states=tt;$.variants=ot;$.defaultOptions=he;$.modifiers=rt;$.className=g.className;import{Fragment as wo,jsx as Ao,jsxs as Bo}from"react/jsx-runtime";import{Fragment as Ho,jsx as Io,jsxs as Ko}from"react/jsx-runtime";import{jsx as O,jsxs as Q}from"react/jsx-runtime";var at=m.options,st=m.states,ke={...m.defaultOptions,variant:"horizontal"},nt=[{name:"horizontal",title:"Horizontal"},{name:"vertical",title:"Vertical"}],it=[{name:"label",title:"Label"},{name:"optional",title:"Optional"}],I=t=>{let{variant:e,modifiers:r,...a}={...ke,...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"?Q(m,{style:{display:"grid",gridTemplateRows:"repeat(3, 1fr)"},...a,children:[Q(y,{orientation:"vertical",style:{gridRowStart:"1",gridRowEnd:"-1"},children:[O(u,{first:!0,done:!0,icon:"check",label:o.label,style:{maxHeight:"33.333%"}}),O(u,{current:!0,focus:!0,text:"2",label:o.label,style:{maxHeight:"33.333%"}}),O(u,{last:!0,optional:o.optional,text:"3",label:o.label,style:{maxHeight:"33.333%"}})]}),O(h,{className:"k-top-5 k-row-start-1 k-row-end-3",orientation:"vertical",reverse:!0,label:!1,value:"50"})]}):Q(m,{style:{display:"grid",gridTemplateColumns:"repeat(6, 1fr)"},...a,children:[Q(y,{style:{gridColumnStart:"1",gridColumnEnd:"-1"},children:[O(u,{first:!0,done:!0,icon:"check",label:o.label,style:{maxWidth:"33.333%"}}),O(u,{current:!0,focus:!0,text:"2",label:o.label,style:{maxWidth:"33.333%"}}),O(u,{last:!0,optional:o.optional,text:"3",label:o.label,style:{maxWidth:"33.333%"}})]}),O(h,{className:"k-col-start-2 k-col-end-6",style:{width:"400px"},label:!1,value:"50"})]})};I.options=at;I.states=st;I.variants=nt;I.defaultOptions=ke;I.modifiers=it;I.className=m.className;import{Fragment as lt,jsx as V,jsxs as ye}from"react/jsx-runtime";var sr=({gridTemplateColumns:t="repeat(6, 1fr)",...e})=>V(m,{style:{display:"grid",gridTemplateColumns:t},children:ye(lt,{children:[ye(y,{style:{gridColumnStart:"1",gridColumnEnd:"-1"},children:[V(u,{first:!0,done:!0,icon:"check",style:{maxWidth:"33.333%"}}),V(u,{current:!0,focus:!0,text:"2",style:{maxWidth:"33.333%"}}),V(u,{last:!0,disabled:!0,text:"3",style:{maxWidth:"33.333%"}})]}),V(h,{label:!1,value:"50"})]}),...e});export{sr as StepperDisabled};