@progress/kendo-themes-html/dist/esm/drawer/demos/drawer.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-content",Te=[],_e={},Ke={},f=e=>{let{...t}=e;return He("div",{...t,className:r(e.className,se),children:e.children})};f.states=Te;f.options=_e;f.className=se;f.defaultOptions=Ke;f.moduleName=x;f.folderName=v;import{Fragment as $e,jsx as le}from"react/jsx-runtime";var Y="k-font-icon",Pe=[],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]},Fe={},_=e=>{let{size:t,themeColor:l,icon:d,rotate:i,flip:c,...u}=e;return d?le("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"}):le($e,{})};_.states=Pe;_.options=ze;_.className=Y;_.defaultOptions=Fe;var de=_;import{Fragment as Ve,jsx as W}from"react/jsx-runtime";var J="k-svg-icon",We=[],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(Ve,{});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=We;K.options=qe;K.className=J;K.defaultOptions=X;var Q=K;import*as Z from"@progress/kendo-svg-icons";var me="icon",ce="icons";import{useContext as Ue}from"react";import{createContext as Be}from"react";var pe=Be({iconsType:"svg"});import{Fragment as ue,jsx as H}from"react/jsx-runtime";var q="k-icon",Ge=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),Ye=[],Je={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}=Ue(pe),{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(ue,{});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:Ge(`${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(ue,{})}return H(de,{...b,className:r(e.className,q),icon:i,size:l,themeColor:d,rotate:u,flip:m})};N.states=Ye;N.options=Je;N.defaultOptions=V;N.className=q;N.moduleName=me;N.folderName=ce;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 Ze,jsx as P,jsxs as fe}from"react/jsx-runtime";var j="k-drawer-item",Xe=[S.hover,S.focus,S.selected,S.disabled],Qe={},xe={level:0},o=e=>{let{icon:t,text:l,level:d=xe.level,hover:i,focus:c,selected:u,disabled:m,expanded:g,hasChildren:D}=e;return fe("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&&fe(Ze,{children:[P("span",{className:"k-spacer"}),P("span",{className:"k-drawer-toggle",children:P(N,{icon:`chevron-${g?"up":"down"}`})})]}),e.children]})};o.states=Xe;o.options=Qe;o.className=j;o.defaultOptions=xe;o.moduleName=x;o.folderName=v;import{jsx as ot}from"react/jsx-runtime";var ve="k-drawer-separator",je=[],et={},tt={},h=e=>{let{...t}=e;return ot("div",{...t,className:r("k-drawer-item",ve),role:"separator"})};h.states=je;h.options=et;h.className=ve;h.defaultOptions=tt;import{jsx as it}from"react/jsx-runtime";var he="k-drawer-push",rt=[],nt={},at={},R=e=>{let{...t}=e;return it("div",{...t,className:r(e.className,he),children:e.children})};R.states=rt;R.options=nt;R.className=he;R.defaultOptions=at;R.moduleName=x;R.folderName=v;import{jsx as mt}from"react/jsx-runtime";var we="k-drawer-overlay",st=[],lt={},dt={},L=e=>{let{...t}=e;return mt("div",{...t,className:r(e.className,we),children:e.children})};L.states=st;L.options=lt;L.className=we;L.defaultOptions=dt;L.moduleName=x;L.folderName=v;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 ut,jsx as A,jsxs as ft}from"react/jsx-runtime";var ee=e=>A(p,{expanded:!0,items:ft(ut,{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 O,jsx as a,jsxs as z}from"react/jsx-runtime";var xt=p.options,vt=p.states,De={...p.defaultOptions,variant:"normal"},ht=`
.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;
}
`,wt=[{name:"normal",title:"Normal"},{name:"mini",title:"Mini"},{name:"overlay",title:"Overlay"}],Nt=[],M=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:ht}),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})})})}};M.options=xt;M.states=vt;M.variants=wt;M.defaultOptions=De;M.modifiers=Nt;M.className=p.className;var Dr=M;export{M as DrawerDemo,Dr as default};