@progress/kendo-themes-html/dist/esm/progressbar/demos/progressbar.mjs

A collection of HTML helpers used for developing Kendo UI themes

var d=(...i)=>i.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?d(...e):typeof e=="object"?Object.keys(e).map((r,t)=>e[t]||e[r]&&r||null).filter(r=>r!==null).join(" "):e).filter(e=>!!e).join(" ");var $=(i,e)=>{let{valid:r,invalid:t,hover:n,focus:s,checked:o,active:v,selected:g,disabled:f,indeterminate:x,loading:h,empty:k,readonly:O,highlighted:w,...y}=e;return d({"k-valid":r,"k-invalid":t,"k-hover":n,"k-focus":s,"k-checked":o,"k-active":v,"k-selected":g,"k-disabled":f,"k-indeterminate":x&&!o,"k-loading":h,"k-empty":k,"k-readonly":O,"k-highlighted":w},Object.keys(y).reduce((P,b)=>(b.startsWith("k-")?P[b]=y[b]:P[`k-${b}`]=y[b],P),{}))};var R={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 B="progressbar",A=B;import{jsx as N,jsxs as S}from"react/jsx-runtime";var m="k-progressbar",z=[R.disabled,R.indeterminate],L={orientation:["horizontal","vertical"]},u={indeterminate:!1,label:!0,labelPosition:"start",orientation:"horizontal",reverse:!1,value:"0"},a=i=>{let{disabled:e,height:r,indeterminate:t=u.indeterminate,label:n=u.label,labelPosition:s=u.labelPosition,orientation:o=u.orientation,reverse:v=u.reverse,value:g=u.value,width:f,style:x,ariaLabel:h,...k}=i;return S("div",{...k,className:d(i.className,m,$(m,{disabled:e}),{[`${m}-${o}`]:o,[`${m}-indeterminate`]:t,[`${m}-reverse`]:v}),style:{...x,"--kendo-progressbar-value":g,[o==="horizontal"?"height":"width"]:o==="horizontal"?r:f},role:"progressbar","aria-label":h||"progress","aria-valuenow":t?void 0:Number(g),"aria-valuemin":0,"aria-valuemax":100,children:[N("span",{className:d("k-progress-status-wrap",{[`k-progress-${s}`]:s&&!t}),children:n&&S("span",{className:"k-progress-status",children:[g,"%"]})}),!t&&N("div",{className:"k-progressbar-value k-selected",children:N("span",{className:d("k-progress-status-wrap",{[`k-progress-${s}`]:s}),children:n&&S("span",{className:"k-progress-status",children:[i.value,"%"]})})})]})};a.states=z;a.options=L;a.className=m;a.defaultOptions=u;a.moduleName=B;a.folderName=A;a.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 M=a;import{jsx as K}from"react/jsx-runtime";var p=i=>K(M,{...i});import{jsx as l}from"react/jsx-runtime";var _=a.options,D=a.states,E={...a.defaultOptions,variant:"start"},T=[{name:"start",title:"Label start"},{name:"center",title:"Label center"},{name:"end",title:"Label end"},{name:"empty",title:"No label"}],C=[],c=i=>{let{variant:e,modifiers:r,...t}={...E,...i},n={},s={style:{width:"324px"}};switch(Object.keys(r||{}).forEach(o=>{switch(o){case"reverse":n.reverse=!!r?.[o];break;case"vertical":n.orientation=r?.[o]?"vertical":void 0,s.style=r?.[o]?void 0:{width:"324px"};break}}),e){case"end":return l("div",{...s,children:l(p,{...t,...n,labelPosition:"end",value:"50"})});case"center":return l("div",{...s,children:l(p,{...t,...n,labelPosition:"center",value:"50"})});case"empty":return l("div",{...s,children:l(p,{...t,...n,label:!1,value:"50"})});default:return l("div",{...s,children:l(p,{...t,...n,labelPosition:"start",value:"50"})})}};c.options=_;c.states=D;c.variants=T;c.defaultOptions=E;c.modifiers=C;c.className=a.className;var ie=c;export{c as ProgressbarDemo,ie as default};