@progress/kendo-themes-html/dist/esm/drawer/templates/drawer-with-hierarchy.mjs

A collection of HTML helpers used for developing Kendo UI themes

var r=(...e)=>e.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?r(...t):typeof t=="object"?Object.keys(t).map((l,d)=>t[d]||t[l]&&l||null).filter(l=>l!==null).join(" "):t).filter(t=>!!t).join(" ");var S=(e,t)=>r({[`${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"}),re=(e,t)=>{let{valid:l,invalid:d,hover:i,focus:p,checked:u,active:m,selected:b,disabled:D,indeterminate:E,loading:oe,empty:$,readonly:be,highlighted:Ee,...U}=t;return r({"k-valid":l,"k-invalid":d,"k-hover":i,"k-focus":p,"k-checked":u,"k-active":m,"k-selected":b,"k-disabled":D,"k-indeterminate":E&&!u,"k-loading":oe,"k-empty":$,"k-readonly":be,"k-highlighted":Ee},Object.keys(U).reduce((G,I)=>(I.startsWith("k-")?G[I]=U[I]:G[`k-${I}`]=U[I],G),{}))};var s={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"};var w={undefined:void 0,outline:"outline",solid:"solid",duotone:"duotone"},n={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",inverse:"inverse"},T={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 x="drawer",v=x;import{jsx as Oe}from"react/jsx-runtime";var ne="k-drawer-container",ye=[],Ce={},Ae={},y=e=>{let{...t}=e;return Oe("div",{...t,className:r(ne,e.className),children:e.children})};y.states=ye;y.options=Ce;y.className=ne;y.defaultOptions=Ae;y.moduleName=x;y.folderName=v;var Y="overlay",ae=Y;import{jsx as ke}from"react/jsx-runtime";var ie="k-overlay",Me=[],Re={},Le={},C=e=>{let{...t}=e;return ke("div",{...t,className:r(e.className,ie),children:e.children})};C.states=Me;C.options=Re;C.className=ie;C.defaultOptions=Le;C.moduleName=Y;C.folderName=ae;import{jsx as W,jsxs as Te}from"react/jsx-runtime";var se="k-drawer",Ie=[],Se={position:["start","end"],mode:["overlay","push"]},_={mini:!1,mode:"push",position:"start",expanded:!1},c=e=>{let{expanded:t=_.expanded,mini:l=_.mini,position:d=_.position,mode:i=_.mode,items:p,width:u,...m}=e;return Te(y,{className:r({"k-drawer-mini":l&&!t,[`k-drawer-${i}`]:i,"k-drawer-expanded":t}),children:[i==="overlay"&&W(C,{}),W("div",{...m,className:r(e.className,se,{[`k-drawer-${d}`]:d}),children:W("div",{className:"k-drawer-wrapper",style:{width:u},children:W("ul",{className:"k-drawer-items",role:"menubar","aria-orientation":"vertical",children:p})})}),e.children]})};c.states=Ie;c.options=Se;c.className=se;c.defaultOptions=_;c.moduleName=x;c.folderName=v;c.ariaSpec={selector:".k-drawer",rules:[{selector:".k-drawer ul",attribute:"role=menubar",usage:"Indicates that the list of drawer items is a menubar."},{selector:".k-drawer ul",attribute:"aria-orientation=vertical",usage:"Indicates that the orientation of the drawer is vertical."},{selector:".k-drawer-item:not(.k-drawer-separator)",attribute:"role=menuitem",usage:"Indicates that the item of a drawer serves as a menuitem."},{selector:".k-drawer-item.k-drawer-separator",attribute:"role=separator",usage:"Indicates that the item of a drawer serves as a separator."}]};import{jsx as Pe}from"react/jsx-runtime";var le="k-drawer-push",_e=[],Ke={},He={},R=e=>{let{...t}=e;return Pe("div",{...t,className:r(e.className,le),children:e.children})};R.states=_e;R.options=Ke;R.className=le;R.defaultOptions=He;R.moduleName=x;R.folderName=v;import{jsx as We}from"react/jsx-runtime";var de="k-drawer-overlay",ze=[],Fe={},$e={},L=e=>{let{...t}=e;return We("div",{...t,className:r(e.className,de),children:e.children})};L.states=ze;L.options=Fe;L.className=de;L.defaultOptions=$e;L.moduleName=x;L.folderName=v;import{jsx as Ue}from"react/jsx-runtime";var me="k-drawer-content",qe=[],Ve={},Be={},f=e=>{let{...t}=e;return Ue("div",{...t,className:r(e.className,me),children:e.children})};f.states=qe;f.options=Ve;f.className=me;f.defaultOptions=Be;f.moduleName=x;f.folderName=v;import{Fragment as Xe,jsx as ce}from"react/jsx-runtime";var J="k-font-icon",Ge=[],Ye={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[n.undefined,n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info]},Je={},K=e=>{let{size:t,themeColor:l,icon:d,rotate:i,flip:p,...u}=e;return d?ce("span",{...u,className:r(e.className,J,S(J,{size:t}),{[`k-i-${d}`]:d,[`k-color-${l}`]:l,[`k-rotate-${i}`]:i,"k-flip-h":p==="h"||p==="both","k-flip-v":p==="v"||p==="both"}),"aria-hidden":"true"}):ce(Xe,{})};K.states=Ge;K.options=Ye;K.className=J;K.defaultOptions=Je;var pe=K;import{Fragment as je,jsx as q}from"react/jsx-runtime";var X="k-svg-icon",Qe=[],Ze={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[n.undefined,n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info],variant:[w.outline,w.solid,w.duotone]},Q={viewBox:"0 0 24 24",variant:w.outline},H=e=>{let{size:t,themeColor:l,rotate:d,flip:i,viewBox:p=Q.viewBox,variant:u=Q.variant,icon:m,...b}=e;if(!m)return q(je,{});if(m==="none")return q("span",{...b,className:r(e.className,X,S("k-icon",{size:t}),"k-none"),"aria-hidden":"true"});let D=typeof m=="object"&&m.name&&m.name,E=typeof m=="object"?u&&m.variants?.[u]||m.variants?.outline||m.content:void 0;return q("span",{...b,className:r(e.className,X,S("k-icon",{size:t}),{[`k-svg-i-${D}`]:D,[`k-color-${l}`]:l,[`k-rotate-${d}`]:d,"k-flip-h":i==="h"||i==="both","k-flip-v":i==="v"||i==="both"}),"aria-hidden":"true",children:q("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof m=="object"?m.viewBox:p,dangerouslySetInnerHTML:E!==void 0?{__html:E}:void 0,children:m?void 0:e.children})})};H.states=Qe;H.options=Ze;H.className=X;H.defaultOptions=Q;var Z=H;import*as j from"@progress/kendo-svg-icons";var ue="icon",fe="icons";import{useContext as tt}from"react";import{createContext as et}from"react";var xe=et({iconsType:"svg"});import{Fragment as ve,jsx as P}from"react/jsx-runtime";var V="k-icon",ot=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),rt=[],nt={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[n.undefined,n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info],variant:[w.outline,w.solid,w.duotone]},B={viewBox:"0 0 24 24",type:"svg",variant:w.outline},N=e=>{let{iconsType:t}=tt(xe),{size:l,themeColor:d,icon:i,type:p=t||B.type,rotate:u,flip:m,viewBox:b=B.viewBox,variant:D=B.variant,...E}=e;if(!i)return P(ve,{});if((t||p)==="svg"){if(i==="none")return P(Z,{...E,className:r(e.className,V),icon:i,size:l,variant:D});let $=j[i]?i:ot(`${i}-icon`);return j[$]?P(Z,{...E,className:r(e.className,V),icon:j[$],size:l,themeColor:d,rotate:u,flip:m,viewBox:b,variant:D}):P(ve,{})}return P(pe,{...E,className:r(e.className,V),icon:i,size:l,themeColor:d,rotate:u,flip:m})};N.states=rt;N.options=nt;N.defaultOptions=B;N.className=V;N.moduleName=ue;N.folderName=fe;N.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{Fragment as st,jsx as z,jsxs as he}from"react/jsx-runtime";var ee="k-drawer-item",at=[T.hover,T.focus,T.selected,T.disabled],it={},we={level:0},o=e=>{let{icon:t,text:l,level:d=we.level,hover:i,focus:p,selected:u,disabled:m,expanded:b,hasChildren:D}=e;return he("li",{className:r(e.className,ee,re(ee,{hover:i,focus:p,selected:u,disabled:m}),{[`k-level-${d}`]:d||d===0}),role:"menuitem",children:[t&&z(N,{icon:t}),l&&z("span",{className:"k-item-text",children:l}),D&&he(st,{children:[z("span",{className:"k-spacer"}),z("span",{className:"k-drawer-toggle",children:z(N,{icon:`chevron-${b?"up":"down"}`})})]}),e.children]})};o.states=at;o.options=it;o.className=ee;o.defaultOptions=we;o.moduleName=x;o.folderName=v;import{jsx as ct}from"react/jsx-runtime";var Ne="k-drawer-separator",lt=[],dt={},mt={},h=e=>{let{...t}=e;return ct("div",{...t,className:r("k-drawer-item",Ne),role:"separator"})};h.states=lt;h.options=dt;h.className=Ne;h.defaultOptions=mt;import{Fragment as pt,jsx as A,jsxs as ut}from"react/jsx-runtime";var te=e=>A(c,{expanded:!0,items:ut(pt,{children:[A(o,{text:"Inbox"}),A(h,{}),A(o,{icon:"bell",text:"Notification"}),A(o,{icon:"star",text:"Favourites"}),A(o,{icon:"calendar",text:"Calendar"})]}),...e,children:e.children||A(f,{children:A("p",{children:"Lorem ipsum dolor sit amet consectetur adipisicing elit.olor sit amet consectetur adipisicing elit. Error accusantium odit, optio nulla maiores quo neque fugit debitis dignissimos incidunt maxime? Eum voluptatem blanditiis voluptatum praesentium dolorem, dolore placeat debitis quod delectus laborum assumenda cupiditate."})})});import{Fragment as ft,jsx as O,jsxs as xt}from"react/jsx-runtime";var De=e=>O(c,{mini:!0,items:xt(ft,{children:[O(o,{icon:"inbox",text:"Inbox",level:"","aria-label":"Inbox"}),O(o,{icon:"bell",text:"Notification",level:"","aria-label":"Notification"}),O(h,{}),O(o,{icon:"star",text:"Favourites",level:"","aria-label":"Favourites"}),O(o,{icon:"calendar",text:"Calendar",level:"","aria-label":"Calendar"})]}),...e,children:e.children||O(f,{children:O("p",{children:"Lorem ipsum dolor sit amet consectetur adipisicing elit.olor sit amet consectetur adipisicing elit. Error accusantium odit, optio nulla maiores quo neque fugit debitis dignissimos incidunt maxime? Eum voluptatem blanditiis voluptatum praesentium dolorem, dolore placeat debitis quod delectus laborum assumenda cupiditate."})})});import{Fragment as Yo,jsx as Go,jsxs as Jo}from"react/jsx-runtime";import{Fragment as M,jsx as a,jsxs as F}from"react/jsx-runtime";var vt=c.options,ht=c.states,ge={...c.defaultOptions,variant:"normal"},wt=`
.custom-content ul {
    padding: 0;
}
.custom-content li {
    font-size: 1.2em;
    border-width: 0 0 1px;
    border-color: rgba(33, 37, 41, 0.125);
    border-style: solid;
    padding: 1em
}
.custom-content li:last-child {
    border: 0;
}
`,Nt=[{name:"normal",title:"Normal"},{name:"mini",title:"Mini"},{name:"overlay",title:"Overlay"}],Dt=[],k=e=>{let{variant:t,modifiers:l,...d}={...ge,...e},i={};Object.keys(l||{}).forEach(u=>{u==="end-position"&&(i.position=l?.[u]?"end":void 0)});let p=F(M,{children:[a("style",{children:wt}),a("div",{className:"custom-content",children:F("ul",{children:[a("li",{children:a("p",{children:"Hi Tom, Since Monday I'll be out of office, I'm rescheduling the meeting for Tuesday."})}),a("li",{children:a("p",{children:"Hi Tom, my aunt comes for a visit this Saturday, so I can't come back to St. Pete..."})})]})})]});switch(t){case"mini":return a(M,{children:a(De,{...d,...i,mini:!0,items:F(M,{children:[a(o,{selected:!0,icon:"inbox",text:"Inbox",level:""}),a(o,{icon:"bell",text:"Notification",level:""}),a(h,{}),a(o,{icon:"star",text:"Favourites",level:""}),a(o,{icon:"calendar",text:"Calendar",level:""})]}),children:a(f,{children:p})})});case"overlay":return a(M,{children:a(te,{...d,...i,mode:"overlay",expanded:!0,items:F(M,{children:[a(o,{selected:!0,text:"Inbox"}),a(o,{icon:"bell",text:"Notification"}),a(h,{}),a(o,{icon:"star",text:"Favourites"}),a(o,{icon:"calendar",text:"Calendar"})]}),children:a(f,{children:p})})});default:return a(M,{children:a(te,{...d,...i,expanded:!0,items:F(M,{children:[a(o,{selected:!0,text:"Inbox"}),a(o,{icon:"bell",text:"Notification"}),a(h,{}),a(o,{icon:"star",text:"Favourites"}),a(o,{icon:"calendar",text:"Calendar"})]}),children:a(f,{children:p})})})}};k.options=vt;k.states=ht;k.variants=Nt;k.defaultOptions=ge;k.modifiers=Dt;k.className=c.className;import{Fragment as gt,jsx as g,jsxs as bt}from"react/jsx-runtime";var Dr=e=>g(c,{expanded:!0,items:bt(gt,{children:[g(o,{icon:"info-circle",text:"Getting Started",hasChildren:!0}),g(o,{icon:"question-circle",text:"About Kendo UI",level:1}),g(o,{icon:"palette",text:"Supported Themes",level:2}),g(o,{icon:"search",text:"Overview",hasChildren:!0,expanded:!0}),g(o,{icon:"star",text:"Most Popular Widgets",hasChildren:!0}),g(o,{icon:"palette",text:"Supported Themes",level:1})]}),...e,children:e.children||g(f,{children:g("p",{children:"Lorem ipsum dolor sit amet consectetur adipisicing elit.olor sit amet consectetur adipisicing elit. Error accusantium odit, optio nulla maiores quo neque fugit debitis dignissimos incidunt maxime? Eum voluptatem blanditiis voluptatum praesentium dolorem, dolore placeat debitis quod delectus laborum assumenda cupiditate."})})});export{Dr as DrawerWithHierarchy};