UNPKG

@progress/kendo-themes-html

Version:

A collection of HTML helpers used for developing Kendo UI themes

2 lines (1 loc) 14.3 kB
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 S=(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"}),w=(t,e)=>{let{valid:r,invalid:a,hover:n,focus:i,checked:d,active:c,selected:f,disabled:b,indeterminate:m,loading:T,empty:y,readonly:F,highlighted:X,...R}=e;return l({"k-valid":r,"k-invalid":a,"k-hover":n,"k-focus":i,"k-checked":d,"k-active":c,"k-selected":f,"k-disabled":b,"k-indeterminate":m&&!d,"k-loading":T,"k-empty":y,"k-readonly":F,"k-highlighted":X},Object.keys(R).reduce((v,C)=>(C.startsWith("k-")?v[C]=R[C]:v[`k-${C}`]=R[C],v),{}))};function le(t,e){if(!e)return{};let r=Array.isArray(e)?e:[e];return Object.fromEntries(r.map(a=>[`k-${a}`,!0]))}var s={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},M={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"},P={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},k={undefined:void 0,outline:"outline",solid:"solid",duotone:"duotone"},o={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",inverse:"inverse"},g={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"};import{Fragment as we,jsx as de}from"react/jsx-runtime";var Y="k-font-icon",Ae=[],Te={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info]},Re={},z=t=>{let{size:e,themeColor:r,icon:a,rotate:n,flip:i,...d}=t;return a?de("span",{...d,className:l(t.className,Y,S(Y,{size:e}),{[`k-i-${a}`]:a,[`k-color-${r}`]:r,[`k-rotate-${n}`]:n,"k-flip-h":i==="h"||i==="both","k-flip-v":i==="v"||i==="both"}),"aria-hidden":"true"}):de(we,{})};z.states=Ae;z.options=Te;z.className=Y;z.defaultOptions=Re;var ce=z;import{Fragment as Le,jsx as G}from"react/jsx-runtime";var Z="k-svg-icon",Ee=[],Ie={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info],variant:[k.outline,k.solid,k.duotone]},j={viewBox:"0 0 24 24",variant:k.outline},_=t=>{let{size:e,themeColor:r,rotate:a,flip:n,viewBox:i=j.viewBox,variant:d=j.variant,icon:c,...f}=t;if(!c)return G(Le,{});if(c==="none")return G("span",{...f,className:l(t.className,Z,S("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let b=typeof c=="object"&&c.name&&c.name,m=typeof c=="object"?d&&c.variants?.[d]||c.variants?.outline||c.content:void 0;return G("span",{...f,className:l(t.className,Z,S("k-icon",{size:e}),{[`k-svg-i-${b}`]:b,[`k-color-${r}`]:r,[`k-rotate-${a}`]:a,"k-flip-h":n==="h"||n==="both","k-flip-v":n==="v"||n==="both"}),"aria-hidden":"true",children:G("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof c=="object"?c.viewBox:i,dangerouslySetInnerHTML:m!==void 0?{__html:m}:void 0,children:c?void 0:t.children})})};_.states=Ee;_.options=Ie;_.className=Z;_.defaultOptions=j;var ee=_;import*as te from"@progress/kendo-svg-icons";var ue="icon",me="icons";import{useContext as _e}from"react";import{createContext as ze}from"react";var pe=ze({iconsType:"svg"});import{Fragment as fe,jsx as K}from"react/jsx-runtime";var V="k-icon",Ke=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),$e=[],De={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info],variant:[k.outline,k.solid,k.duotone]},q={viewBox:"0 0 24 24",type:"svg",variant:k.outline},h=t=>{let{iconsType:e}=_e(pe),{size:r,themeColor:a,icon:n,type:i=e||q.type,rotate:d,flip:c,viewBox:f=q.viewBox,variant:b=q.variant,...m}=t;if(!n)return K(fe,{});if((e||i)==="svg"){if(n==="none")return K(ee,{...m,className:l(t.className,V),icon:n,size:r,variant:b});let y=te[n]?n:Ke(`${n}-icon`);return te[y]?K(ee,{...m,className:l(t.className,V),icon:te[y],size:r,themeColor:a,rotate:d,flip:c,viewBox:f,variant:b}):K(fe,{})}return K(ce,{...m,className:l(t.className,V),icon:n,size:r,themeColor:a,rotate:d,flip:c})};h.states=$e;h.options=De;h.defaultOptions=q;h.className=V;h.moduleName=ue;h.folderName=me;h.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."}]};var oe="button",ge=oe;import{Fragment as be,jsx as E,jsxs as ve}from"react/jsx-runtime";var $="k-button",He=["icon-button"],Fe=[g.hover,g.focus,g.active,g.selected,g.disabled,g.generating],Ue={size:[s.undefined,s.xsmall,s.small,s.medium,s.large],rounded:[M.undefined,M.none,M.small,M.medium,M.large,M.full],fillMode:[P.undefined,P.solid,P.flat,P.outline,P.clear,P.link],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.inverse]},re={showArrow:!1,arrowIconName:"chevron-down"},u=t=>{let{as:e="button",size:r,rounded:a,fillMode:n,themeColor:i,showArrow:d=re.showArrow,arrowIconName:c=re.arrowIconName,variant:f,hover:b,focus:m,active:T,selected:y,disabled:F,togglable:X,ariaDisabled:R,icon:v,iconSize:C,text:U,iconClassName:Ce,className:Se,...Me}=t,Pe=v!=null,Oe=t.children!==void 0;return ve(e,{className:l(Se,$,le($,f),S($,{size:r,rounded:a,fillMode:n,themeColor:i}),w($,{hover:b,focus:m,active:T,disabled:F||R,selected:y}),{"k-icon-button":!U&&!Oe&&Pe}),"aria-pressed":X?y?"true":"false":void 0,...Me,"aria-disabled":R?"true":void 0,disabled:F||void 0,children:[typeof v=="string"&&v&&E(h,{className:l(Ce,"k-button-icon"),icon:v,size:C}),v&&typeof v!="string"&&E(be,{children:v}),U?ve(be,{children:[U&&E("span",{className:"k-button-text",children:U}),t.children]}):t.children&&E("span",{className:"k-button-text",children:t.children}),d&&E("span",{className:"k-menu-button-arrow k-button-arrow",children:E(h,{icon:c})})]})};u.states=Fe;u.options=Ue;u.variants=He;u.className=$;u.defaultOptions=re;u.moduleName=oe;u.folderName=ge;u.ariaSpec={selector:".k-button",rules:[{selector:".k-button",attribute:"role=button or nodeName=button",usage:"The button role is implicit from the native <button> element."},{selector:".k-button",attribute:"aria-label (when icon-only)",usage:"Required for icon-only buttons that have no visible text."},{selector:".k-button",attribute:"aria-pressed (when togglable)",usage:"Indicates the pressed state of a toggle button."},{selector:".k-button",attribute:"disabled (when disabled)",usage:"Rendered when the button is disabled."}]};import{jsx as Ge}from"react/jsx-runtime";var he=t=>Ge(u,{icon:"folder",...t,"aria-label":t["aria-label"]||"Folder",children:void 0});import{jsx as Ve}from"react/jsx-runtime";var xe=t=>Ve(u,{icon:"folder",children:"Button",...t});import{jsx as qe}from"react/jsx-runtime";var ke=t=>qe(u,{children:"Button",...t});import{jsx as ne}from"react/jsx-runtime";var We=u.options,Je=u.states,Qe={...u.defaultOptions,variant:"text"},Xe=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],Ye=[],I=t=>{let{variant:e,...r}=t;switch(e){case"icon-only":return ne(he,{...r,icon:"star"});case"icon-and-text":return ne(xe,{...r,icon:"star",children:"Button"});default:return ne(ke,{...r,children:"Button"})}};I.options=We;I.states=Je;I.variants=Xe;I.defaultOptions=Qe;I.modifiers=Ye;I.className=u.className;var D="progressbar",W=D;import{jsx as se,jsxs as ae}from"react/jsx-runtime";var x="k-progressbar",Ze=[g.disabled,g.indeterminate],je={orientation:["horizontal","vertical"]},O={indeterminate:!1,label:!0,labelPosition:"start",orientation:"horizontal",reverse:!1,value:"0"},p=t=>{let{disabled:e,height:r,indeterminate:a=O.indeterminate,label:n=O.label,labelPosition:i=O.labelPosition,orientation:d=O.orientation,reverse:c=O.reverse,value:f=O.value,width:b,style:m,ariaLabel:T,...y}=t;return ae("div",{...y,className:l(t.className,x,w(x,{disabled:e}),{[`${x}-${d}`]:d,[`${x}-indeterminate`]:a,[`${x}-reverse`]:c}),style:{...m,"--kendo-progressbar-value":f,[d==="horizontal"?"height":"width"]:d==="horizontal"?r:b},role:"progressbar","aria-label":T||"progress","aria-valuenow":a?void 0:Number(f),"aria-valuemin":0,"aria-valuemax":100,children:[se("span",{className:l("k-progress-status-wrap",{[`k-progress-${i}`]:i&&!a}),children:n&&ae("span",{className:"k-progress-status",children:[f,"%"]})}),!a&&se("div",{className:"k-progressbar-value k-selected",children:se("span",{className:l("k-progress-status-wrap",{[`k-progress-${i}`]:i}),children:n&&ae("span",{className:"k-progress-status",children:[t.value,"%"]})})})]})};p.states=Ze;p.options=je;p.className=x;p.defaultOptions=O;p.moduleName=D;p.folderName=W;p.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 Ne=p;import{jsx as ie}from"react/jsx-runtime";var ye="k-chunk-progressbar",et=(t,e)=>e<=t-1,tt=[g.disabled,g.indeterminate],ot={},J={chunkCount:5,orientation:"horizontal",progress:0},A=t=>{let{disabled:e,chunkCount:r=J.chunkCount,indeterminate:a,orientation:n=J.orientation,progress:i=J.progress,reverse:d,ariaLabel:c,...f}=t;return ie("div",{...f,className:l(t.className,x,ye,w(x,{disabled:e}),{[`${x}-${n}`]:n,[`${x}-indeterminate`]:a,[`${x}-reverse`]:d}),role:"progressbar","aria-label":c||"progress","aria-valuenow":a?void 0:i,"aria-valuemin":0,"aria-valuemax":r,children:ie("ul",{className:"k-progressbar-chunks k-reset",children:[...Array(r)].map((b,m)=>ie("li",{className:l("k-progressbar-chunk",{"k-first":m===0,"k-last":m===[...Array(r)].length-1,"k-selected":et(i,m)})},m))})})};A.states=tt;A.options=ot;A.className=ye;A.defaultOptions=J;A.moduleName=D;A.folderName=W;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 H=t=>rt(Ne,{...t});import{jsx as wo}from"react/jsx-runtime";import{jsx as B}from"react/jsx-runtime";var nt=p.options,at=p.states,Be={...p.defaultOptions,variant:"start"},st=[{name:"start",title:"Label start"},{name:"center",title:"Label center"},{name:"end",title:"Label end"},{name:"empty",title:"No label"}],it=[],L=t=>{let{variant:e,modifiers:r,...a}={...Be,...t},n={},i={style:{width:"324px"}};switch(Object.keys(r||{}).forEach(d=>{switch(d){case"reverse":n.reverse=!!r?.[d];break;case"vertical":n.orientation=r?.[d]?"vertical":void 0,i.style=r?.[d]?void 0:{width:"324px"};break}}),e){case"end":return B("div",{...i,children:B(H,{...a,...n,labelPosition:"end",value:"50"})});case"center":return B("div",{...i,children:B(H,{...a,...n,labelPosition:"center",value:"50"})});case"empty":return B("div",{...i,children:B(H,{...a,...n,label:!1,value:"50"})});default:return B("div",{...i,children:B(H,{...a,...n,labelPosition:"start",value:"50"})})}};L.options=nt;L.states=at;L.variants=st;L.defaultOptions=Be;L.modifiers=it;L.className=p.className;import{Fragment as dt,jsx as N,jsxs as Q}from"react/jsx-runtime";var lt="k-file",Qo=t=>{let{status:e,progress:r,validationMsg:a,fileSummary:n,...i}=t;return N("li",{...i,className:l(t.className,lt,{[`k-file-${e}`]:e}),role:"listitem",tabIndex:0,children:Q("div",{className:"k-file-multiple",children:[N(p,{className:l({"k-hidden":e!=="progress"}),value:r,label:!1}),N("span",{className:"k-file-icon-wrapper",children:N(h,{className:"k-file-icon",icon:"copy",size:"xxlarge"})}),Q("div",{className:"k-multiple-files-wrapper",children:[t.children,n&&N("span",{className:l("k-file-summary",{"k-hidden":e!=="progress"}),children:n}),a&&N("span",{className:"k-file-validation-message","aria-live":"polite",children:a})]}),N("div",{className:"k-upload-actions",children:e==="progress"?Q(dt,{children:[Q("span",{className:"k-upload-pct",children:[r,"%"]}),N(u,{icon:"pause-sm",fillMode:"flat",size:"xsmall",className:"k-upload-action","aria-label":"Pause upload",tabIndex:-1}),N(u,{icon:"cancel",fillMode:"flat",size:"xsmall",className:"k-upload-action","aria-label":"Cancel upload",tabIndex:-1})]}):N(u,{icon:"x",fillMode:"flat",size:"xsmall",className:"k-upload-action","aria-label":"Remove file",tabIndex:-1})})]})})};export{lt as UPLOADFILEMULTIPLE_CLASSNAME,Qo as UploadFileMultiple};