@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=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?l(...e):typeof e=="object"?Object.keys(e).map((o,i)=>e[i]||e[o]&&o||null).filter(o=>o!==null).join(" "):e).filter(e=>!!e).join(" ");var N=(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"}),A=(t,e)=>{let{valid:o,invalid:i,hover:n,focus:m,checked:d,active:c,selected:g,disabled:b,indeterminate:f,loading:_,empty:O,readonly:$,highlighted:H,...z}=e;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":b,"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(t){return re[t]=(re[t]||0)+1,`k-${t}-${re[t]}`}import{jsx as He}from"react/jsx-runtime";var _e="k-treeview-group",v=t=>{let{children:e,dir:o,level:i=1,role:n="group",...m}=t;return He("ul",{...m,className:l(t.className,_e),role:n,children:ie.Children.map(e,(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=t=>{let{size:e,children:o,dir:i,...n}=t;return ue("div",{...n,dir:i,className:l(t.className,ae,N(ae,{size:e})),children:ue(v,{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={},k=t=>{let{id:e,checked:o,indeterminate:i,hover:n,focus:m,disabled:d,invalid:c,valid:g,required:b,size:f,rounded:_,wrapperRole:O,...$}=t;return fe("span",{className:"k-checkbox-wrap",role:O,children:fe("input",{...$,id:e,type:"checkbox",defaultChecked:o,required:b,disabled:d||void 0,"aria-invalid":c?"true":void 0,className:l(t.className,Q,N(Q,{size:f,rounded:_}),A(Q,{hover:n,focus:m,disabled:d,invalid:c,valid:g,indeterminate:i,checked:o}))})})};k.states=Be;k.options=De;k.className=Q;k.defaultOptions=Fe;k.moduleName=S;k.folderName=P;k.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=k;import{jsx as We}from"react/jsx-runtime";var be="k-checkbox-list",$e=[],Ve={},ve={layout:"vertical"},x=t=>{let{layout:e=ve.layout,...o}=t;return We("ul",{...o,className:l(t.className,be,{[`k-list-${e}`]:e}),children:t.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=t=>{let{...e}=t;return Je("li",{...e,className:l(t.className,ke),children:t.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:t="Label",id:e="cb-label-after",...o})=>Ye(Qe,{children:[Ce(T,{id:e,...o}),Ce("label",{className:"k-checkbox-label",htmlFor:e,children:t})]});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 C,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=t=>{let{variant:e,...o}=t;return e==="horizontal"?we(x,{layout:"horizontal",...o,children:[C(u,{children:C(L,{id:E("cb"),defaultChecked:!0,children:"Label"})}),C(u,{children:C(L,{id:E("cb"),children:"Label"})}),C(u,{children:C(L,{id:E("cb"),children:"Label"})})]}):we(x,{...o,children:[C(u,{children:C(L,{id:E("cb"),defaultChecked:!0,children:"Label"})}),C(u,{children:C(L,{id:E("cb"),children:"Label"})}),C(u,{children:C(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=t=>lt(L,{id:E("checkbox"),...t,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=t=>{let{size:e,themeColor:o,icon:i,rotate:n,flip:m,...d}=t;return i?Te("span",{...d,className:l(t.className,se,N(se,{size:e}),{[`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=t=>{let{size:e,themeColor:o,rotate:i,flip:n,viewBox:m=ce.viewBox,variant:d=ce.variant,icon:c,...g}=t;if(!c)return Y(ut,{});if(c==="none")return Y("span",{...g,className:l(t.className,le,N("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let b=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(t.className,le,N("k-icon",{size:e}),{[`k-svg-i-${b}`]:b,[`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:t.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=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.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=t=>{let{iconsType:e}=bt(Ne),{size:o,themeColor:i,icon:n,type:m=e||j.type,rotate:d,flip:c,viewBox:g=j.viewBox,variant:b=j.variant,...f}=t;if(!n)return X(Ee,{});if((e||m)==="svg"){if(n==="none")return X(de,{...f,className:l(t.className,Z),icon:n,size:o,variant:b});let O=me[n]?n:vt(`${n}-icon`);return me[O]?X(de,{...f,className:l(t.className,Z),icon:me[O],size:o,themeColor:i,rotate:d,flip:c,viewBox:g,variant:b}):X(Ee,{})}return X(ye,{...f,className:l(t.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=t=>{let{text:e,showIcon:o,icon:i,hover:n,focus:m,selected:d,...c}=t;return yt("span",{...c,className:l(t.className,pe,A(pe,{hover:n,focus:m,selected:d})),children:[o&&Le(y,{icon:i}),Le("span",{className:"k-treeview-leaf-text",children:e})]})};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=t=>{let{leafClassName:e,children:o,hasChildren:i,expanded:n,loading:m,text:d,showIcon:c,icon:g,showCheckbox:b,checked:f,hover:_,focus:O,selected:$,disabled:H,dir:z,level:G=1,ariaSelected:M,...Se}=t,te=i||o||m;return Me("li",{...Se,className:l(t.className,Ae),style:{"--kendo-treeview-level":G},role:"treeitem","aria-expanded":te?n?"true":"false":void 0,"aria-checked":b?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"})}),b&&q(k,{checked:f,disabled:H,"aria-label":d,tabIndex:-1}),q(Oe,{className:e,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=t=>{let{modifiers:e,...o}=t,i={};return Object.keys(e||{}).forEach(n=>{n==="checkboxes"&&(i.showCheckbox=e?.[n])}),xe(p,{...o,children:[K(a,{text:"Furniture",expanded:!0,...i,children:xe(v,{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 w,jsxs as Re}from"react/jsx-runtime";var Bi=({children:t,...e})=>w(p,{...e,children:t||[w(a,{text:"Root 1"},"treeview-item-1"),w(a,{text:"Root 2",expanded:!0,children:Re(v,{children:[w(a,{text:"Child 2.1"}),w(a,{text:"Child 2.2",children:w(v,{children:w(a,{text:"Child 2.2.1"})})}),w(a,{text:"Child 2.3"})]})},"treeview-item-2"),w(a,{text:"Root 3",children:Re(v,{children:[w(a,{text:"Child 3.1"}),w(a,{text:"Child 3.2"}),w(a,{text:"Child 3.3"})]})},"treeview-item-3")]});export{Bi as TreeviewHierarchy};