@progress/kendo-themes-html/dist/esm/drawer/templates/drawer-normal.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 I=(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"}),oe=(e,t)=>{let{valid:l,invalid:d,hover:i,focus:c,checked:u,active:m,selected:g,disabled:D,indeterminate:b,loading:te,empty:F,readonly:ge,highlighted:be,...B}=t;return r({"k-valid":l,"k-invalid":d,"k-hover":i,"k-focus":c,"k-checked":u,"k-active":m,"k-selected":g,"k-disabled":D,"k-indeterminate":b&&!u,"k-loading":te,"k-empty":F,"k-readonly":ge,"k-highlighted":be},Object.keys(B).reduce((U,k)=>(k.startsWith("k-")?U[k]=B[k]:U[`k-${k}`]=B[k],U),{}))};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"},S={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 Ae}from"react/jsx-runtime";var re="k-drawer-container",Ee=[],ye={},Ce={},E=e=>{let{...t}=e;return Ae("div",{...t,className:r(re,e.className),children:e.children})};E.states=Ee;E.options=ye;E.className=re;E.defaultOptions=Ce;E.moduleName=x;E.folderName=v;var G="overlay",ne=G;import{jsx as Le}from"react/jsx-runtime";var ae="k-overlay",Oe=[],Me={},Re={},y=e=>{let{...t}=e;return Le("div",{...t,className:r(e.className,ae),children:e.children})};y.states=Oe;y.options=Me;y.className=ae;y.defaultOptions=Re;y.moduleName=G;y.folderName=ne;import{jsx as $,jsxs as Se}from"react/jsx-runtime";var ie="k-drawer",ke=[],Ie={position:["start","end"],mode:["overlay","push"]},T={mini:!1,mode:"push",position:"start",expanded:!1},p=e=>{let{expanded:t=T.expanded,mini:l=T.mini,position:d=T.position,mode:i=T.mode,items:c,width:u,...m}=e;return Se(E,{className:r({"k-drawer-mini":l&&!t,[`k-drawer-${i}`]:i,"k-drawer-expanded":t}),children:[i==="overlay"&&$(y,{}),$("div",{...m,className:r(e.className,ie,{[`k-drawer-${d}`]:d}),children:$("div",{className:"k-drawer-wrapper",style:{width:u},children:$("ul",{className:"k-drawer-items",role:"menubar","aria-orientation":"vertical",children:c})})}),e.children]})};p.states=ke;p.options=Ie;p.className=ie;p.defaultOptions=T;p.moduleName=x;p.folderName=v;p.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 He}from"react/jsx-runtime";var se="k-drawer-push",Te=[],_e={},Ke={},M=e=>{let{...t}=e;return He("div",{...t,className:r(e.className,se),children:e.children})};M.states=Te;M.options=_e;M.className=se;M.defaultOptions=Ke;M.moduleName=x;M.folderName=v;import{jsx as $e}from"react/jsx-runtime";var le="k-drawer-overlay",Pe=[],ze={},Fe={},R=e=>{let{...t}=e;return $e("div",{...t,className:r(e.className,le),children:e.children})};R.states=Pe;R.options=ze;R.className=le;R.defaultOptions=Fe;R.moduleName=x;R.folderName=v;import{jsx as Be}from"react/jsx-runtime";var de="k-drawer-content",We=[],qe={},Ve={},f=e=>{let{...t}=e;return Be("div",{...t,className:r(e.className,de),children:e.children})};f.states=We;f.options=qe;f.className=de;f.defaultOptions=Ve;f.moduleName=x;f.folderName=v;import{Fragment as Je,jsx as me}from"react/jsx-runtime";var Y="k-font-icon",Ue=[],Ge={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]},Ye={},_=e=>{let{size:t,themeColor:l,icon:d,rotate:i,flip:c,...u}=e;return d?me("span",{...u,className:r(e.className,Y,I(Y,{size:t}),{[`k-i-${d}`]:d,[`k-color-${l}`]:l,[`k-rotate-${i}`]:i,"k-flip-h":c==="h"||c==="both","k-flip-v":c==="v"||c==="both"}),"aria-hidden":"true"}):me(Je,{})};_.states=Ue;_.options=Ge;_.className=Y;_.defaultOptions=Ye;var ce=_;import{Fragment as Ze,jsx as W}from"react/jsx-runtime";var J="k-svg-icon",Xe=[],Qe={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]},X={viewBox:"0 0 24 24",variant:w.outline},K=e=>{let{size:t,themeColor:l,rotate:d,flip:i,viewBox:c=X.viewBox,variant:u=X.variant,icon:m,...g}=e;if(!m)return W(Ze,{});if(m==="none")return W("span",{...g,className:r(e.className,J,I("k-icon",{size:t}),"k-none"),"aria-hidden":"true"});let D=typeof m=="object"&&m.name&&m.name,b=typeof m=="object"?u&&m.variants?.[u]||m.variants?.outline||m.content:void 0;return W("span",{...g,className:r(e.className,J,I("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:W("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof m=="object"?m.viewBox:c,dangerouslySetInnerHTML:b!==void 0?{__html:b}:void 0,children:m?void 0:e.children})})};K.states=Xe;K.options=Qe;K.className=J;K.defaultOptions=X;var Q=K;import*as Z from"@progress/kendo-svg-icons";var pe="icon",ue="icons";import{useContext as et}from"react";import{createContext as je}from"react";var fe=je({iconsType:"svg"});import{Fragment as xe,jsx as H}from"react/jsx-runtime";var q="k-icon",tt=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),ot=[],rt={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]},V={viewBox:"0 0 24 24",type:"svg",variant:w.outline},N=e=>{let{iconsType:t}=et(fe),{size:l,themeColor:d,icon:i,type:c=t||V.type,rotate:u,flip:m,viewBox:g=V.viewBox,variant:D=V.variant,...b}=e;if(!i)return H(xe,{});if((t||c)==="svg"){if(i==="none")return H(Q,{...b,className:r(e.className,q),icon:i,size:l,variant:D});let F=Z[i]?i:tt(`${i}-icon`);return Z[F]?H(Q,{...b,className:r(e.className,q),icon:Z[F],size:l,themeColor:d,rotate:u,flip:m,viewBox:g,variant:D}):H(xe,{})}return H(ce,{...b,className:r(e.className,q),icon:i,size:l,themeColor:d,rotate:u,flip:m})};N.states=ot;N.options=rt;N.defaultOptions=V;N.className=q;N.moduleName=pe;N.folderName=ue;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 it,jsx as P,jsxs as ve}from"react/jsx-runtime";var j="k-drawer-item",nt=[S.hover,S.focus,S.selected,S.disabled],at={},he={level:0},o=e=>{let{icon:t,text:l,level:d=he.level,hover:i,focus:c,selected:u,disabled:m,expanded:g,hasChildren:D}=e;return ve("li",{className:r(e.className,j,oe(j,{hover:i,focus:c,selected:u,disabled:m}),{[`k-level-${d}`]:d||d===0}),role:"menuitem",children:[t&&P(N,{icon:t}),l&&P("span",{className:"k-item-text",children:l}),D&&ve(it,{children:[P("span",{className:"k-spacer"}),P("span",{className:"k-drawer-toggle",children:P(N,{icon:`chevron-${g?"up":"down"}`})})]}),e.children]})};o.states=nt;o.options=at;o.className=j;o.defaultOptions=he;o.moduleName=x;o.folderName=v;import{jsx as mt}from"react/jsx-runtime";var we="k-drawer-separator",st=[],lt={},dt={},h=e=>{let{...t}=e;return mt("div",{...t,className:r("k-drawer-item",we),role:"separator"})};h.states=st;h.options=lt;h.className=we;h.defaultOptions=dt;import{Fragment as ct,jsx as C,jsxs as pt}from"react/jsx-runtime";var Ne=e=>C(p,{mini:!0,items:pt(ct,{children:[C(o,{icon:"inbox",text:"Inbox",level:"","aria-label":"Inbox"}),C(o,{icon:"bell",text:"Notification",level:"","aria-label":"Notification"}),C(h,{}),C(o,{icon:"star",text:"Favourites",level:"","aria-label":"Favourites"}),C(o,{icon:"calendar",text:"Calendar",level:"","aria-label":"Calendar"})]}),...e,children:e.children||C(f,{children:C("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 Wo,jsx as $o,jsxs as qo}from"react/jsx-runtime";import{Fragment as Yo,jsx as Go,jsxs as Jo}from"react/jsx-runtime";import{Fragment as O,jsx as a,jsxs as z}from"react/jsx-runtime";var ut=p.options,ft=p.states,De={...p.defaultOptions,variant:"normal"},xt=`
.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;
}
`,vt=[{name:"normal",title:"Normal"},{name:"mini",title:"Mini"},{name:"overlay",title:"Overlay"}],ht=[],L=e=>{let{variant:t,modifiers:l,...d}={...De,...e},i={};Object.keys(l||{}).forEach(u=>{u==="end-position"&&(i.position=l?.[u]?"end":void 0)});let c=z(O,{children:[a("style",{children:xt}),a("div",{className:"custom-content",children:z("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(O,{children:a(Ne,{...d,...i,mini:!0,items:z(O,{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:c})})});case"overlay":return a(O,{children:a(ee,{...d,...i,mode:"overlay",expanded:!0,items:z(O,{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:c})})});default:return a(O,{children:a(ee,{...d,...i,expanded:!0,items:z(O,{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:c})})})}};L.options=ut;L.states=ft;L.variants=vt;L.defaultOptions=De;L.modifiers=ht;L.className=p.className;import{Fragment as wt,jsx as A,jsxs as Nt}from"react/jsx-runtime";var ee=e=>A(p,{expanded:!0,items:Nt(wt,{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."})})});export{ee as DrawerNormal};