@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
2 lines (1 loc) • 14.4 kB
JavaScript
import ne from"react";import ie from"react";var a=(...e)=>e.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?a(...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 y=(e,t)=>a({[`${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:d,checked:c,active:l,selected:T,disabled:b,indeterminate:f,loading:_,empty:L,readonly:V,highlighted:H,...G}=t;return a({"k-valid":o,"k-invalid":i,"k-hover":n,"k-focus":d,"k-checked":c,"k-active":l,"k-selected":T,"k-disabled":b,"k-indeterminate":f&&!c,"k-loading":_,"k-empty":L,"k-readonly":V,"k-highlighted":H},Object.keys(G).reduce((z,M)=>(M.startsWith("k-")?z[M]=G[M]:z[`k-${M}`]=G[M],z),{}))};var r={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},O={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"};var N={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 g(e){return re[e]=(re[e]||0)+1,`k-${e}-${re[e]}`}import{jsx as ze}from"react/jsx-runtime";var Ge="k-treeview-group",E=e=>{let{children:t,dir:o,level:i=1,role:n="group",...d}=e;return ze("ul",{...d,className:a(e.className,Ge),role:n,children:ie.Children.map(t,(c,l)=>ie.isValidElement(c)?ie.cloneElement(c,{dir:o,level:i,key:l}):c)})};var $="treeview",J=$;import{jsx as ue}from"react/jsx-runtime";var ae="k-treeview",Pe=[],Fe={size:[r.undefined,r.small,r.medium,r.large]},De={},m=e=>{let{size:t,children:o,dir:i,...n}=e;return ue("div",{...n,dir:i,className:a(e.className,ae,y(ae,{size:t})),children:ue(E,{className:"k-treeview-lines",role:"tree",dir:i,children:ne.Children.map(o,(d,c)=>ne.isValidElement(d)?ne.cloneElement(d,{dir:i,key:c}):d)})})};m.states=Pe;m.options=Fe;m.className=ae;m.defaultOptions=De;m.moduleName=$;m.folderName=J;m.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 R="checkbox",P=R;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],Ve={size:[r.undefined,r.small,r.medium,r.large],rounded:[O.undefined,O.none,O.small,O.medium,O.large,O.full]},$e={},v=e=>{let{id:t,checked:o,indeterminate:i,hover:n,focus:d,disabled:c,invalid:l,valid:T,required:b,size:f,rounded:_,wrapperRole:L,...V}=e;return fe("span",{className:"k-checkbox-wrap",role:L,children:fe("input",{...V,id:t,type:"checkbox",defaultChecked:o,required:b,disabled:c||void 0,"aria-invalid":l?"true":void 0,className:a(e.className,Q,y(Q,{size:f,rounded:_}),A(Q,{hover:n,focus:d,disabled:c,invalid:l,valid:T,indeterminate:i,checked:o}))})})};v.states=Be;v.options=Ve;v.className=Q;v.defaultOptions=$e;v.moduleName=R;v.folderName=P;v.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 C=v;import{jsx as Xe}from"react/jsx-runtime";var be="k-checkbox-list",We=[],Ue={},ve={layout:"vertical"},x=e=>{let{layout:t=ve.layout,...o}=e;return Xe("ul",{...o,className:a(e.className,be,{[`k-list-${t}`]:t}),children:e.children})};x.states=We;x.options=Ue;x.className=be;x.defaultOptions=ve;x.moduleName=R;x.folderName=P;import{jsx as Ye}from"react/jsx-runtime";var ke="k-checkbox-list-item",qe=[],Je={},Qe={},u=e=>{let{...t}=e;return Ye("li",{...t,className:a(e.className,ke),children:e.children})};u.states=qe;u.options=Je;u.className=ke;u.defaultOptions=Qe;u.moduleName=R;u.folderName=P;import{Fragment as Ze,jsx as Ce,jsxs as je}from"react/jsx-runtime";var I=({children:e="Label",id:t="cb-label-after",...o})=>je(Ze,{children:[Ce(C,{id:t,...o}),Ce("label",{className:"k-checkbox-label",htmlFor:t,children:e})]});import{Fragment as go,jsx as yo,jsxs as Eo}from"react/jsx-runtime";import{Fragment as Oo,jsx as Ao,jsxs as Ro}from"react/jsx-runtime";import{Fragment as Go,jsx as Ho,jsxs as zo}from"react/jsx-runtime";import{jsx as Bo}from"react/jsx-runtime";import{jsx as Uo}from"react/jsx-runtime";import{jsx as Qo}from"react/jsx-runtime";import{jsx as k,jsxs as we}from"react/jsx-runtime";var et=x.options,tt=x.states,ot={...x.defaultOptions,variant:"vertical"},rt=[{name:"vertical",title:"Vertical"},{name:"horizontal",title:"Horizontal"}],it=[],F=e=>{let{variant:t,...o}=e;return t==="horizontal"?we(x,{layout:"horizontal",...o,children:[k(u,{children:k(I,{id:g("cb"),defaultChecked:!0,children:"Label"})}),k(u,{children:k(I,{id:g("cb"),children:"Label"})}),k(u,{children:k(I,{id:g("cb"),children:"Label"})})]}):we(x,{...o,children:[k(u,{children:k(I,{id:g("cb"),defaultChecked:!0,children:"Label"})}),k(u,{children:k(I,{id:g("cb"),children:"Label"})}),k(u,{children:k(I,{id:g("cb"),children:"Label"})})]})};F.options=et;F.states=tt;F.variants=rt;F.defaultOptions=ot;F.modifiers=it;F.className=x.className;import{jsx as dt}from"react/jsx-runtime";var nt=C.options,at=C.states,st=C.defaultOptions,lt=[],ct=[],D=e=>dt(I,{id:g("checkbox"),...e,defaultChecked:!0,children:"Label"});D.options=nt;D.states=at;D.variants=lt;D.defaultOptions=st;D.modifiers=ct;D.className=C.className;import{Fragment as xt,jsx as Te}from"react/jsx-runtime";var se="k-font-icon",mt=[],pt={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]},ht={},W=e=>{let{size:t,themeColor:o,icon:i,rotate:n,flip:d,...c}=e;return i?Te("span",{...c,className:a(e.className,se,y(se,{size:t}),{[`k-i-${i}`]:i,[`k-color-${o}`]:o,[`k-rotate-${n}`]:n,"k-flip-h":d==="h"||d==="both","k-flip-v":d==="v"||d==="both"}),"aria-hidden":"true"}):Te(xt,{})};W.states=mt;W.options=pt;W.className=se;W.defaultOptions=ht;var Ne=W;import{Fragment as bt,jsx as Y}from"react/jsx-runtime";var le="k-svg-icon",ut=[],ft={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:[N.outline,N.solid,N.duotone]},ce={viewBox:"0 0 24 24",variant:N.outline},U=e=>{let{size:t,themeColor:o,rotate:i,flip:n,viewBox:d=ce.viewBox,variant:c=ce.variant,icon:l,...T}=e;if(!l)return Y(bt,{});if(l==="none")return Y("span",{...T,className:a(e.className,le,y("k-icon",{size:t}),"k-none"),"aria-hidden":"true"});let b=typeof l=="object"&&l.name&&l.name,f=typeof l=="object"?c&&l.variants?.[c]||l.variants?.outline||l.content:void 0;return Y("span",{...T,className:a(e.className,le,y("k-icon",{size:t}),{[`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 l=="object"?l.viewBox:d,dangerouslySetInnerHTML:f!==void 0?{__html:f}:void 0,children:l?void 0:e.children})})};U.states=ut;U.options=ft;U.className=le;U.defaultOptions=ce;var de=U;import*as me from"@progress/kendo-svg-icons";var ye="icon",ge="icons";import{useContext as kt}from"react";import{createContext as vt}from"react";var Ee=vt({iconsType:"svg"});import{Fragment as Ie,jsx as X}from"react/jsx-runtime";var Z="k-icon",Ct=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),wt=[],Tt={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:[N.outline,N.solid,N.duotone]},j={viewBox:"0 0 24 24",type:"svg",variant:N.outline},w=e=>{let{iconsType:t}=kt(Ee),{size:o,themeColor:i,icon:n,type:d=t||j.type,rotate:c,flip:l,viewBox:T=j.viewBox,variant:b=j.variant,...f}=e;if(!n)return X(Ie,{});if((t||d)==="svg"){if(n==="none")return X(de,{...f,className:a(e.className,Z),icon:n,size:o,variant:b});let L=me[n]?n:Ct(`${n}-icon`);return me[L]?X(de,{...f,className:a(e.className,Z),icon:me[L],size:o,themeColor:i,rotate:c,flip:l,viewBox:T,variant:b}):X(Ie,{})}return X(Ne,{...f,className:a(e.className,Z),icon:n,size:o,themeColor:i,rotate:c,flip:l})};w.states=wt;w.options=Tt;w.defaultOptions=j;w.className=Z;w.moduleName=ye;w.folderName=ge;w.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 gt}from"react/jsx-runtime";var pe="k-treeview-leaf",Nt=[h.hover,h.focus,h.selected],yt={},ee=e=>{let{text:t,showIcon:o,icon:i,hover:n,focus:d,selected:c,...l}=e;return gt("span",{...l,className:a(e.className,pe,A(pe,{hover:n,focus:d,selected:c})),children:[o&&Le(w,{icon:i}),Le("span",{className:"k-treeview-leaf-text",children:t})]})};ee.states=Nt;ee.options=yt;ee.className=pe;var Me=ee;import{jsx as q,jsxs as Ae}from"react/jsx-runtime";var Oe="k-treeview-item",Et=[h.hover,h.focus,h.selected,h.disabled],It={},Lt={},p=e=>{let{leafClassName:t,children:o,hasChildren:i,expanded:n,loading:d,text:c,showIcon:l,icon:T,showCheckbox:b,checked:f,hover:_,focus:L,selected:V,disabled:H,dir:G,level:z=1,ariaSelected:M,..._e}=e,te=i||o||d;return Ae("li",{..._e,className:a(e.className,Oe),style:{"--kendo-treeview-level":z},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:[Ae("span",{className:a("k-treeview-item-content",A("k-treeview-item-content",{hover:_,focus:L,selected:V,disabled:H})),children:[te&&q("span",{className:a("k-treeview-toggle",A("k-treeview-toggle",{disabled:H})),children:d?q("span",{className:"k-icon k-i-loading"}):q(w,{icon:n?"chevron-down":G==="rtl"?"chevron-left":"chevron-right"})}),b&&q(v,{checked:f,disabled:H,"aria-label":c,tabIndex:-1}),q(Me,{className:t,text:c,showIcon:l,icon:T})]}),n&&te&&he.Children.map(o,(oe,He)=>he.isValidElement(oe)?he.cloneElement(oe,{dir:G,level:z+1,key:He}):oe)]})};p.states=Et;p.options=It;p.className=Oe;p.defaultOptions=Lt;p.moduleName=$;p.folderName=J;import{jsx as ni}from"react/jsx-runtime";import{jsx as ci,jsxs as di}from"react/jsx-runtime";import{jsx as xi,jsxs as ui}from"react/jsx-runtime";import{jsx as ki,jsxs as Ci}from"react/jsx-runtime";import{jsx as yi,jsxs as gi}from"react/jsx-runtime";import{jsx as Mi,jsxs as Ai}from"react/jsx-runtime";import{jsx as S,jsxs as xe}from"react/jsx-runtime";var Mt=m.options,At=m.states,Ot=m.defaultOptions,Rt=[{name:"checkboxes",title:"Show `Checkbox`",default:!1}],St=[],B=e=>{let{modifiers:t,...o}=e,i={};return Object.keys(t||{}).forEach(n=>{n==="checkboxes"&&(i.showCheckbox=t?.[n])}),xe(m,{...o,children:[S(p,{text:"Furniture",expanded:!0,...i,children:xe(E,{children:[S(p,{text:"Tables & Chairs",...i}),S(p,{text:"Sofas",...i}),S(p,{text:"Occasional Furniture",...i})]})}),xe(p,{text:"Decor",expanded:!1,...i,children:[S(p,{text:"Bed Linen",...i}),S(p,{text:"Curtains & Blinds",...i}),S(p,{text:"Carpets",...i})]})]})};B.options=Mt;B.states=At;B.variants=St;B.defaultOptions=Ot;B.modifiers=Rt;B.className=m.className;var Re="file-manager",Se="filemanager";import{jsx as Gt}from"react/jsx-runtime";var Ke="k-filemanager-treeview",Kt=[],_t={},Ht={},K=e=>{let{children:t,...o}=e;return Gt(m,{className:a(e.className,Ke),...o,children:t})};K.states=Kt;K.options=_t;K.className=Ke;K.defaultOptions=Ht;K.moduleName=Re;K.folderName=Se;var tn=K;export{Ke as FILEMANAGERTREEVIEW_CLASSNAME,K as FileManagerTreeview,tn as default};