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

A collection of HTML helpers used for developing Kendo UI themes

var r=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?r(...e):typeof e=="object"?Object.keys(e).map((s,n)=>e[n]||e[s]&&s||null).filter(s=>s!==null).join(" "):e).filter(e=>!!e).join(" ");var k=(t,e)=>r({[`${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.fillMode}-${e.themeColor}`]:e.fillMode&&e.themeColor},{[`${t}-${e.themeColor}`]:e.themeColor&&e.fillMode===void 0},{"k-rounded-sm":e.rounded==="small","k-rounded-md":e.rounded==="medium","k-rounded-lg":e.rounded==="large","k-rounded-full":e.rounded==="full"}),q=(t,e)=>{let{valid:s,invalid:n,hover:l,focus:m,checked:i,active:f,selected:h,disabled:g,indeterminate:ne,loading:ae,empty:ie,readonly:se,highlighted:le,...T}=e;return r({"k-valid":s,"k-invalid":n,"k-hover":l,"k-focus":m,"k-checked":i,"k-active":f,"k-selected":h,"k-disabled":g,"k-indeterminate":ne&&!i,"k-loading":ae,"k-empty":ie,"k-readonly":se,"k-highlighted":le},Object.keys(T).reduce((K,A)=>(A.startsWith("k-")?K[A]=T[A]:K[`k-${A}`]=T[A],K),{}))};var a={xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"};var o={inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",dark:"dark",light:"light",inverse:"inverse"},M={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 c="drawer",p=c;import{jsx as pe}from"react/jsx-runtime";var B="k-drawer-container",me=[],de={},ce={},N=t=>{let{...e}=t;return pe("div",{...e,className:r(B,t.className),children:t.children})};N.states=me;N.options=de;N.className=B;N.defaultOptions=ce;N.moduleName=c;N.folderName=p;import{jsx as S,jsxs as fe}from"react/jsx-runtime";var U="k-drawer",ue=[],xe={},C={mini:!1,mode:"push",position:"start",expanded:!1},u=t=>{let{expanded:e=C.expanded,mini:s=C.mini,position:n=C.position,mode:l=C.mode,items:m,width:i,...f}=t;return fe(N,{className:r({"k-drawer-mini":s&&!e,[`k-drawer-${l}`]:l,"k-drawer-expanded":e}),children:[l==="overlay"&&S("div",{className:"k-overlay"}),S("div",{...f,className:r(t.className,U,{[`k-drawer-${n}`]:n}),children:S("div",{className:"k-drawer-wrapper",style:{width:i},children:S("ul",{className:"k-drawer-items",children:m})})}),t.children]})};u.states=ue;u.options=xe;u.className=U;u.defaultOptions=C;u.moduleName=c;u.folderName=p;import{jsx as De}from"react/jsx-runtime";var G="k-drawer-push",he=[],ve={},Ne={},w=t=>{let{...e}=t;return De("div",{...e,className:r(t.className,G),children:t.children})};w.states=he;w.options=ve;w.className=G;w.defaultOptions=Ne;w.moduleName=c;w.folderName=p;import{jsx as be}from"react/jsx-runtime";var V="k-drawer-overlay",ge=[],we={},Ee={},E=t=>{let{...e}=t;return be("div",{...e,className:r(t.className,V),children:t.children})};E.states=ge;E.options=we;E.className=V;E.defaultOptions=Ee;E.moduleName=c;E.folderName=p;import{jsx as ye}from"react/jsx-runtime";var J="k-drawer-content",Ae=[],Me={},Ce={},x=t=>{let{...e}=t;return ye("div",{...e,className:r(t.className,J),children:t.children})};x.states=Ae;x.options=Me;x.className=J;x.defaultOptions=Ce;x.moduleName=c;x.folderName=p;import{Fragment as ke,jsx as X}from"react/jsx-runtime";var H="k-font-icon",Re=[],Oe={size:[a.xsmall,a.small,a.medium,a.large,a.xlarge,a.xxlarge,a.xxxlarge],themeColor:[o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},Le={},y=t=>{let{size:e,themeColor:s,icon:n,rotate:l,flip:m,...i}=t;return n?X("span",{...i,className:r(t.className,H,k(H,{size:e}),{[`k-i-${n}`]:n,[`k-color-${s}`]:s,[`k-rotate-${l}`]:l,"k-flip-h":m==="h"||m==="both","k-flip-v":m==="v"||m==="both"})}):X(ke,{})};y.states=Re;y.options=Oe;y.className=H;y.defaultOptions=Le;var Y=y;import{Fragment as Ie,jsx as _}from"react/jsx-runtime";var P="k-svg-icon",Se=[],_e={size:[a.xsmall,a.small,a.medium,a.large,a.xlarge,a.xxlarge,a.xxxlarge],themeColor:[o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},Q={viewBox:"0 0 24 24"},R=t=>{let{size:e,themeColor:s,rotate:n,flip:l,viewBox:m=Q.viewBox,icon:i,...f}=t;if(!i)return _(Ie,{});i==="none"&&{...f,className:r(t.className,P,"k-none")};let h=typeof i=="object"&&i.name&&i.name;return _("span",{...f,className:r(t.className,P,k("k-icon",{size:e}),{[`k-svg-i-${h}`]:h,[`k-color-${s}`]:s,[`k-rotate-${n}`]:n,"k-flip-h":l==="h"||l==="both","k-flip-v":l==="v"||l==="both"}),children:_("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof i=="object"?i.viewBox:m,dangerouslySetInnerHTML:typeof i=="object"?{__html:i.content}:void 0,children:i?void 0:t.children})})};R.states=Se;R.options=_e;R.className=P;R.defaultOptions=Q;var z=R;import*as $ from"@progress/kendo-svg-icons";var Z="icon",j="icons";import{Fragment as ee,jsx as O}from"react/jsx-runtime";var I="k-icon",Te=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),Ke=[],He={size:[a.xsmall,a.small,a.medium,a.large,a.xlarge,a.xxlarge,a.xxxlarge],themeColor:[o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},W={viewBox:"0 0 24 24",type:"svg"},v=t=>{let{size:e,themeColor:s,icon:n,type:l=W.type,rotate:m,flip:i,viewBox:f=W.viewBox,...h}=t;if(!n)return O(ee,{});if(l==="svg"){if(n==="none")return O(z,{...h,className:r(t.className,I),icon:n,size:e});let g=$[n]?n:Te(`${n}-icon`);return $[g]?O(z,{...h,className:r(t.className,I),icon:$[g],size:e,themeColor:s,rotate:m,flip:i,viewBox:f}):O(ee,{})}return O(Y,{...h,className:r(t.className,I),icon:n,size:e,themeColor:s,rotate:m,flip:i})};v.states=Ke;v.options=He;v.defaultOptions=W;v.className=I;v.moduleName=Z;v.folderName=j;import{Fragment as $e,jsx as L,jsxs as te}from"react/jsx-runtime";var F="k-drawer-item",Pe=[M.hover,M.focus,M.selected,M.disabled],ze={},oe={level:0},d=t=>{let{icon:e,text:s,level:n=oe.level,hover:l,focus:m,selected:i,disabled:f,expanded:h,hasChildren:g}=t;return te("li",{className:r(t.className,F,q(F,{hover:l,focus:m,selected:i,disabled:f}),{[`k-level-${n}`]:n||n===0}),children:[e&&L(v,{icon:e}),s&&L("span",{className:"k-item-text",children:s}),g&&te($e,{children:[L("span",{className:"k-spacer"}),L("span",{className:"k-drawer-toggle",children:L(v,{icon:`chevron-${h?"up":"down"}`})})]}),t.children]})};d.states=Pe;d.options=ze;d.className=F;d.defaultOptions=oe;d.moduleName=c;d.folderName=p;import{jsx as Be}from"react/jsx-runtime";var re="k-drawer-separator",We=[],Fe={},qe={},b=t=>{let{...e}=t;return Be("div",{...e,className:r("k-drawer-item",re)})};b.states=We;b.options=Fe;b.className=re;b.defaultOptions=qe;import{Fragment as Qt,jsx as Yt,jsxs as Zt}from"react/jsx-runtime";import{Fragment as ro,jsx as oo,jsxs as no}from"react/jsx-runtime";import{Fragment as mo,jsx as lo,jsxs as co}from"react/jsx-runtime";import{Fragment as Ue,jsx as D,jsxs as Ge}from"react/jsx-runtime";var Co=t=>D(u,{expanded:!0,mode:"overlay",items:Ge(Ue,{children:[D(d,{text:"Inbox"}),D(d,{icon:"bell",text:"Notification"}),D(d,{icon:"star",text:"Favourites"}),D(d,{icon:"calendar",text:"Calendar"})]}),...t,children:t.children||D(x,{children:D("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{Co as DrawerWithOverlay};