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