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