@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
2 lines (1 loc) • 14.5 kB
JavaScript
import ne from"react";import ie from"react";var l=(...e)=>e.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?l(...t):typeof t=="object"?Object.keys(t).map((o,i)=>t[i]||t[o]&&o||null).filter(o=>o!==null).join(" "):t).filter(t=>!!t).join(" ");var N=(e,t)=>l({[`${e}-xs`]:t.size==="xsmall",[`${e}-sm`]:t.size==="small",[`${e}-md`]:t.size==="medium",[`${e}-lg`]:t.size==="large",[`${e}-xl`]:t.size==="xlarge",[`${e}-xxl`]:t.size==="xxlarge",[`${e}-xxxl`]:t.size==="xxxlarge"},{[`${e}-${t.fillMode}`]:t.fillMode},{[`${e}-${t.themeColor}`]:t.themeColor},{"k-rounded-sm":t.rounded==="small","k-rounded-md":t.rounded==="medium","k-rounded-lg":t.rounded==="large","k-rounded-full":t.rounded==="full","k-rounded-none":t.rounded==="none"}),A=(e,t)=>{let{valid:o,invalid:i,hover:n,focus:m,checked:d,active:c,selected:g,disabled:v,indeterminate:f,loading:_,empty:O,readonly:$,highlighted:H,...z}=t;return l({"k-valid":o,"k-invalid":i,"k-hover":n,"k-focus":m,"k-checked":d,"k-active":c,"k-selected":g,"k-disabled":v,"k-indeterminate":f&&!d,"k-loading":_,"k-empty":O,"k-readonly":$,"k-highlighted":H},Object.keys(z).reduce((G,M)=>(M.startsWith("k-")?G[M]=z[M]:G[`k-${M}`]=z[M],G),{}))};var r={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},R={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"};var I={undefined:void 0,outline:"outline",solid:"solid",duotone:"duotone"},s={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 re={};function E(e){return re[e]=(re[e]||0)+1,`k-${e}-${re[e]}`}import{jsx as He}from"react/jsx-runtime";var _e="k-treeview-group",k=e=>{let{children:t,dir:o,level:i=1,role:n="group",...m}=e;return He("ul",{...m,className:l(e.className,_e),role:n,children:ie.Children.map(t,(d,c)=>ie.isValidElement(d)?ie.cloneElement(d,{dir:o,level:i,key:c}):d)})};var V="treeview",J=V;import{jsx as ue}from"react/jsx-runtime";var ae="k-treeview",ze=[],Ge={size:[r.undefined,r.small,r.medium,r.large]},Pe={},p=e=>{let{size:t,children:o,dir:i,...n}=e;return ue("div",{...n,dir:i,className:l(e.className,ae,N(ae,{size:t})),children:ue(k,{className:"k-treeview-lines",role:"tree",dir:i,children:ne.Children.map(o,(m,d)=>ne.isValidElement(m)?ne.cloneElement(m,{dir:i,key:d}):m)})})};p.states=ze;p.options=Ge;p.className=ae;p.defaultOptions=Pe;p.moduleName=V;p.folderName=J;p.ariaSpec={selector:".k-treeview",rules:[{selector:".k-treeview-lines",attribute:"role=tree",usage:"The root list element of the treeview."},{selector:".k-treeview-group:not(.k-treeview-lines)",attribute:"role=group",usage:"The ul element that wraps child nodes."},{selector:".k-treeview-item",attribute:"role=treeitem",usage:"The li element rendered for a tree node."},{selector:".k-treeview-item",attribute:"aria-expanded=true/false (when present)",usage:"Announces the expanded state of the node."},{selector:".k-treeview-item",attribute:"aria-checked=true/false (when present)",usage:"Announces the checked state of the node when checkboxes are enabled."},{selector:".k-treeview-item",attribute:"aria-selected=true (when present)",usage:"Announces the selected state of the node when selection is enabled."},{selector:".k-treeview-item .k-checkbox",attribute:"aria-label",usage:"The checkbox input must have an accessible name matching the treeview item text."},{selector:".k-treeview-item .k-checkbox",attribute:"tabindex=-1",usage:"The checkbox input must not be in the tab order. Keyboard interaction is handled by the treeitem."}]};import he from"react";var S="checkbox",P=S;import{jsx as fe}from"react/jsx-runtime";var Q="k-checkbox",Be=[h.hover,h.focus,h.valid,h.invalid,h.required,h.disabled,h.checked,h.indeterminate],De={size:[r.undefined,r.small,r.medium,r.large],rounded:[R.undefined,R.none,R.small,R.medium,R.large,R.full]},Fe={},C=e=>{let{id:t,checked:o,indeterminate:i,hover:n,focus:m,disabled:d,invalid:c,valid:g,required:v,size:f,rounded:_,wrapperRole:O,...$}=e;return fe("span",{className:"k-checkbox-wrap",role:O,children:fe("input",{...$,id:t,type:"checkbox",defaultChecked:o,required:v,disabled:d||void 0,"aria-invalid":c?"true":void 0,className:l(e.className,Q,N(Q,{size:f,rounded:_}),A(Q,{hover:n,focus:m,disabled:d,invalid:c,valid:g,indeterminate:i,checked:o}))})})};C.states=Be;C.options=De;C.className=Q;C.defaultOptions=Fe;C.moduleName=S;C.folderName=P;C.ariaSpec={selector:".k-checkbox",rules:[{selector:".k-checkbox",attribute:"role=checkbox or type=checkbox",usage:"Announces the checkbox role of the element."},{selector:".k-checkbox",attribute:"label for or aria-label or aria-labelledby (when has accessible name)",usage:"The input requires an accessible name to which it will be assigned."},{selector:".k-checkbox",attribute:"aria-checked=true/false/mixed or checked",usage:"For native checkboxes the checked state is handled by the browser. aria-checked is used for custom implementations."},{selector:".k-checkbox",attribute:"aria-describedby (when has hint or error)",usage:"Points to the hint or error message for the checkbox."},{selector:".k-checkbox",attribute:"disabled or aria-disabled=true (when disabled)",usage:"For native checkboxes use the HTML disabled attribute. aria-disabled for custom implementations."},{selector:".k-invalid, .ng-invalid",attribute:"aria-invalid=true (when invalid)",usage:"Rendered only when the CheckBox is in a form and announces the invalid state."}]};var T=C;import{jsx as We}from"react/jsx-runtime";var be="k-checkbox-list",$e=[],Ve={},ve={layout:"vertical"},x=e=>{let{layout:t=ve.layout,...o}=e;return We("ul",{...o,className:l(e.className,be,{[`k-list-${t}`]:t}),children:e.children})};x.states=$e;x.options=Ve;x.className=be;x.defaultOptions=ve;x.moduleName=S;x.folderName=P;import{jsx as Je}from"react/jsx-runtime";var ke="k-checkbox-list-item",Ue=[],Xe={},qe={},u=e=>{let{...t}=e;return Je("li",{...t,className:l(e.className,ke),children:e.children})};u.states=Ue;u.options=Xe;u.className=ke;u.defaultOptions=qe;u.moduleName=S;u.folderName=P;import{Fragment as Qe,jsx as Ce,jsxs as Ye}from"react/jsx-runtime";var L=({children:e="Label",id:t="cb-label-after",...o})=>Ye(Qe,{children:[Ce(T,{id:t,...o}),Ce("label",{className:"k-checkbox-label",htmlFor:t,children:e})]});import{Fragment as ko,jsx as vo,jsxs as Co}from"react/jsx-runtime";import{Fragment as Io,jsx as go,jsxs as No}from"react/jsx-runtime";import{Fragment as Ao,jsx as Mo,jsxs as Ro}from"react/jsx-runtime";import{jsx as Ho}from"react/jsx-runtime";import{jsx as Bo}from"react/jsx-runtime";import{jsx as Vo}from"react/jsx-runtime";import{jsx as w,jsxs as we}from"react/jsx-runtime";var Ze=x.options,je=x.states,et={...x.defaultOptions,variant:"vertical"},tt=[{name:"vertical",title:"Vertical"},{name:"horizontal",title:"Horizontal"}],ot=[],B=e=>{let{variant:t,...o}=e;return t==="horizontal"?we(x,{layout:"horizontal",...o,children:[w(u,{children:w(L,{id:E("cb"),defaultChecked:!0,children:"Label"})}),w(u,{children:w(L,{id:E("cb"),children:"Label"})}),w(u,{children:w(L,{id:E("cb"),children:"Label"})})]}):we(x,{...o,children:[w(u,{children:w(L,{id:E("cb"),defaultChecked:!0,children:"Label"})}),w(u,{children:w(L,{id:E("cb"),children:"Label"})}),w(u,{children:w(L,{id:E("cb"),children:"Label"})})]})};B.options=Ze;B.states=je;B.variants=tt;B.defaultOptions=et;B.modifiers=ot;B.className=x.className;import{jsx as lt}from"react/jsx-runtime";var rt=T.options,it=T.states,nt=T.defaultOptions,at=[],st=[],D=e=>lt(L,{id:E("checkbox"),...e,defaultChecked:!0,children:"Label"});D.options=rt;D.states=it;D.variants=at;D.defaultOptions=nt;D.modifiers=st;D.className=T.className;import{Fragment as pt,jsx as Te}from"react/jsx-runtime";var se="k-font-icon",ct=[],dt={size:[r.undefined,r.xsmall,r.small,r.medium,r.large,r.xlarge,r.xxlarge,r.xxxlarge],themeColor:[s.undefined,s.base,s.primary,s.secondary,s.tertiary,s.success,s.warning,s.error,s.info]},mt={},W=e=>{let{size:t,themeColor:o,icon:i,rotate:n,flip:m,...d}=e;return i?Te("span",{...d,className:l(e.className,se,N(se,{size:t}),{[`k-i-${i}`]:i,[`k-color-${o}`]:o,[`k-rotate-${n}`]:n,"k-flip-h":m==="h"||m==="both","k-flip-v":m==="v"||m==="both"}),"aria-hidden":"true"}):Te(pt,{})};W.states=ct;W.options=dt;W.className=se;W.defaultOptions=mt;var ye=W;import{Fragment as ut,jsx as Y}from"react/jsx-runtime";var le="k-svg-icon",ht=[],xt={size:[r.undefined,r.xsmall,r.small,r.medium,r.large,r.xlarge,r.xxlarge,r.xxxlarge],themeColor:[s.undefined,s.base,s.primary,s.secondary,s.tertiary,s.success,s.warning,s.error,s.info],variant:[I.outline,I.solid,I.duotone]},ce={viewBox:"0 0 24 24",variant:I.outline},U=e=>{let{size:t,themeColor:o,rotate:i,flip:n,viewBox:m=ce.viewBox,variant:d=ce.variant,icon:c,...g}=e;if(!c)return Y(ut,{});if(c==="none")return Y("span",{...g,className:l(e.className,le,N("k-icon",{size:t}),"k-none"),"aria-hidden":"true"});let v=typeof c=="object"&&c.name&&c.name,f=typeof c=="object"?d&&c.variants?.[d]||c.variants?.outline||c.content:void 0;return Y("span",{...g,className:l(e.className,le,N("k-icon",{size:t}),{[`k-svg-i-${v}`]:v,[`k-color-${o}`]:o,[`k-rotate-${i}`]:i,"k-flip-h":n==="h"||n==="both","k-flip-v":n==="v"||n==="both"}),"aria-hidden":"true",children:Y("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof c=="object"?c.viewBox:m,dangerouslySetInnerHTML:f!==void 0?{__html:f}:void 0,children:c?void 0:e.children})})};U.states=ht;U.options=xt;U.className=le;U.defaultOptions=ce;var de=U;import*as me from"@progress/kendo-svg-icons";var ge="icon",Ie="icons";import{useContext as bt}from"react";import{createContext as ft}from"react";var Ne=ft({iconsType:"svg"});import{Fragment as Ee,jsx as X}from"react/jsx-runtime";var Z="k-icon",vt=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),kt=[],Ct={size:[r.undefined,r.xsmall,r.small,r.medium,r.large,r.xlarge,r.xxlarge,r.xxxlarge],themeColor:[s.undefined,s.base,s.primary,s.secondary,s.tertiary,s.success,s.warning,s.error,s.info],variant:[I.outline,I.solid,I.duotone]},j={viewBox:"0 0 24 24",type:"svg",variant:I.outline},y=e=>{let{iconsType:t}=bt(Ne),{size:o,themeColor:i,icon:n,type:m=t||j.type,rotate:d,flip:c,viewBox:g=j.viewBox,variant:v=j.variant,...f}=e;if(!n)return X(Ee,{});if((t||m)==="svg"){if(n==="none")return X(de,{...f,className:l(e.className,Z),icon:n,size:o,variant:v});let O=me[n]?n:vt(`${n}-icon`);return me[O]?X(de,{...f,className:l(e.className,Z),icon:me[O],size:o,themeColor:i,rotate:d,flip:c,viewBox:g,variant:v}):X(Ee,{})}return X(ye,{...f,className:l(e.className,Z),icon:n,size:o,themeColor:i,rotate:d,flip:c})};y.states=kt;y.options=Ct;y.defaultOptions=j;y.className=Z;y.moduleName=ge;y.folderName=Ie;y.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 Le,jsxs as yt}from"react/jsx-runtime";var pe="k-treeview-leaf",wt=[h.hover,h.focus,h.selected],Tt={},ee=e=>{let{text:t,showIcon:o,icon:i,hover:n,focus:m,selected:d,...c}=e;return yt("span",{...c,className:l(e.className,pe,A(pe,{hover:n,focus:m,selected:d})),children:[o&&Le(y,{icon:i}),Le("span",{className:"k-treeview-leaf-text",children:t})]})};ee.states=wt;ee.options=Tt;ee.className=pe;var Oe=ee;import{jsx as q,jsxs as Me}from"react/jsx-runtime";var Ae="k-treeview-item",gt=[h.hover,h.focus,h.selected,h.disabled],It={},Nt={},a=e=>{let{leafClassName:t,children:o,hasChildren:i,expanded:n,loading:m,text:d,showIcon:c,icon:g,showCheckbox:v,checked:f,hover:_,focus:O,selected:$,disabled:H,dir:z,level:G=1,ariaSelected:M,...Se}=e,te=i||o||m;return Me("li",{...Se,className:l(e.className,Ae),style:{"--kendo-treeview-level":G},role:"treeitem","aria-expanded":te?n?"true":"false":void 0,"aria-checked":v?f?"true":"false":void 0,"aria-selected":M?"true":void 0,"aria-disabled":H?"true":void 0,children:[Me("span",{className:l("k-treeview-item-content",A("k-treeview-item-content",{hover:_,focus:O,selected:$,disabled:H})),children:[te&&q("span",{className:l("k-treeview-toggle",A("k-treeview-toggle",{disabled:H})),children:m?q("span",{className:"k-icon k-i-loading"}):q(y,{icon:n?"chevron-down":z==="rtl"?"chevron-left":"chevron-right"})}),v&&q(C,{checked:f,disabled:H,"aria-label":d,tabIndex:-1}),q(Oe,{className:t,text:d,showIcon:c,icon:g})]}),n&&te&&he.Children.map(o,(oe,Ke)=>he.isValidElement(oe)?he.cloneElement(oe,{dir:z,level:G+1,key:Ke}):oe)]})};a.states=gt;a.options=It;a.className=Ae;a.defaultOptions=Nt;a.moduleName=V;a.folderName=J;import{jsx as jr}from"react/jsx-runtime";import{jsx as ri,jsxs as ii}from"react/jsx-runtime";import{jsx as li,jsxs as ci}from"react/jsx-runtime";import{jsx as hi,jsxs as xi}from"react/jsx-runtime";import{jsx as vi,jsxs as ki}from"react/jsx-runtime";import{jsx as K,jsxs as xe}from"react/jsx-runtime";var Et=p.options,Lt=p.states,Ot=p.defaultOptions,Mt=[{name:"checkboxes",title:"Show `Checkbox`",default:!1}],At=[],F=e=>{let{modifiers:t,...o}=e,i={};return Object.keys(t||{}).forEach(n=>{n==="checkboxes"&&(i.showCheckbox=t?.[n])}),xe(p,{...o,children:[K(a,{text:"Furniture",expanded:!0,...i,children:xe(k,{children:[K(a,{text:"Tables & Chairs",...i}),K(a,{text:"Sofas",...i}),K(a,{text:"Occasional Furniture",...i})]})}),xe(a,{text:"Decor",expanded:!1,...i,children:[K(a,{text:"Bed Linen",...i}),K(a,{text:"Curtains & Blinds",...i}),K(a,{text:"Carpets",...i})]})]})};F.options=Et;F.states=Lt;F.variants=At;F.defaultOptions=Ot;F.modifiers=Mt;F.className=p.className;import{jsx as b,jsxs as Re}from"react/jsx-runtime";var Bi=e=>b(p,{children:[b(a,{text:"Root 1"},"treeview-item-1"),b(a,{text:"Root 2",expanded:!0,children:Re(k,{children:[b(a,{text:"Child 2.1"}),b(a,{text:"Child 2.2",children:b(k,{children:b(a,{text:"Child 2.2.1"})})}),b(a,{text:"Child 2.3"}),b(a,{leafClassName:"k-treeview-load-more-button",text:"Load more ..."})]})},"treeview-item-2"),b(a,{text:"Root 3",children:Re(k,{children:[b(a,{text:"Child 3.1"}),b(a,{text:"Child 3.2"}),b(a,{text:"Child 3.3"})]})},"treeview-item-3")],...e});export{Bi as TreeviewLoadMore};