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