@progress/kendo-themes-html/dist/esm/menu/templates/menu-popup.mjs

A collection of HTML helpers used for developing Kendo UI themes

var i=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?i(...e):typeof e=="object"?Object.keys(e).map((n,s)=>e[s]||e[n]&&n||null).filter(n=>n!==null).join(" "):e).filter(e=>!!e).join(" ");var T=(t,e)=>i({[`${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"}),R=(t,e)=>{let{valid:n,invalid:s,hover:m,focus:l,checked:r,active:p,selected:f,disabled:b,indeterminate:N,loading:k,empty:O,readonly:v,highlighted:E,...C}=e;return i({"k-valid":n,"k-invalid":s,"k-hover":m,"k-focus":l,"k-checked":r,"k-active":p,"k-selected":f,"k-disabled":b,"k-indeterminate":N&&!r,"k-loading":k,"k-empty":O,"k-readonly":v,"k-highlighted":E},Object.keys(C).reduce((g,x)=>(x.startsWith("k-")?g[x]=C[x]:g[`k-${x}`]=C[x],g),{}))};function Ne(t,e){if(!e)return{};let n=Array.isArray(e)?e:[e];return Object.fromEntries(n.map(s=>[`k-${s}`,!0]))}var a={xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},D={small:"small",medium:"medium",large:"large",full:"full"},K={solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},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"},c={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"};import{Fragment as Ve,jsx as xe}from"react/jsx-runtime";var ee="k-font-icon",De=[],$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]},Fe={},V=t=>{let{size:e,themeColor:n,icon:s,rotate:m,flip:l,...r}=t;return s?xe("span",{...r,className:i(t.className,ee,T(ee,{size:e}),{[`k-i-${s}`]:s,[`k-color-${n}`]:n,[`k-rotate-${m}`]:m,"k-flip-h":l==="h"||l==="both","k-flip-v":l==="v"||l==="both"})}):xe(Ve,{})};V.states=De;V.options=$e;V.className=ee;V.defaultOptions=Fe;var he=V;import{Fragment as Xe,jsx as q}from"react/jsx-runtime";var te="k-svg-icon",We=[],Je={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]},Ie={viewBox:"0 0 24 24"},W=t=>{let{size:e,themeColor:n,rotate:s,flip:m,viewBox:l=Ie.viewBox,icon:r,...p}=t;if(!r)return q(Xe,{});r==="none"&&{...p,className:i(t.className,te,"k-none")};let f=typeof r=="object"&&r.name&&r.name;return q("span",{...p,className:i(t.className,te,T("k-icon",{size:e}),{[`k-svg-i-${f}`]:f,[`k-color-${n}`]:n,[`k-rotate-${s}`]:s,"k-flip-h":m==="h"||m==="both","k-flip-v":m==="v"||m==="both"}),children:q("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof r=="object"?r.viewBox:l,dangerouslySetInnerHTML:typeof r=="object"?{__html:r.content}:void 0,children:r?void 0:t.children})})};W.states=We;W.options=Je;W.className=te;W.defaultOptions=Ie;var oe=W;import*as ne from"@progress/kendo-svg-icons";var be="icon",Ee="icons";import{Fragment as Ae,jsx as J}from"react/jsx-runtime";var Q="k-icon",Ge=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),qe=[],Qe={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]},re={viewBox:"0 0 24 24",type:"svg"},u=t=>{let{size:e,themeColor:n,icon:s,type:m=re.type,rotate:l,flip:r,viewBox:p=re.viewBox,...f}=t;if(!s)return J(Ae,{});if(m==="svg"){if(s==="none")return J(oe,{...f,className:i(t.className,Q),icon:s,size:e});let b=ne[s]?s:Ge(`${s}-icon`);return ne[b]?J(oe,{...f,className:i(t.className,Q),icon:ne[b],size:e,themeColor:n,rotate:l,flip:r,viewBox:p}):J(Ae,{})}return J(he,{...f,className:i(t.className,Q),icon:s,size:e,themeColor:n,rotate:l,flip:r})};u.states=qe;u.options=Qe;u.defaultOptions=re;u.className=Q;u.moduleName=be;u.folderName=Ee;var h="menu",A=h;import{Fragment as je,jsx as $,jsxs as Le}from"react/jsx-runtime";var se="k-menu-item",Ye=[c.hover,c.focus,c.active,c.selected,c.disabled],Ze={},ke={iconPosition:"before"},M=t=>{let{hover:e,focus:n,active:s,selected:m,disabled:l,icon:r,text:p,first:f,last:b,showArrow:N,arrowIconName:k,iconPosition:O=ke.iconPosition,dir:v,children:E,...C}=t,g=$(je,{});E&&E.forEach(y=>{if(y.type==="MenuItemContent"){g.props.children.push(y);return}});let x=k;return x||(x=v==="rtl"?"caret-alt-left":"caret-alt-right"),Le("li",{...C,className:i(t.className,se,"k-item",R(se,{focus:n,disabled:l,hover:e,active:s,selected:m}),{"k-first":f,"k-last":b}),children:[Le("span",{className:i("k-link k-menu-link"),children:[r&&O==="before"&&$(u,{className:"k-menu-link-icon",icon:r}),$("span",{className:"k-menu-link-text",children:p}),r&&O==="after"&&$(u,{className:"k-menu-link-icon",icon:r}),N&&$("span",{className:"k-menu-expand-arrow",children:$(u,{icon:x})})]}),g]})};M.states=Ye;M.options=Ze;M.className=se;M.defaultOptions=ke;M.moduleName=h;M.folderName=A;import{Fragment as ot,jsx as F,jsxs as ge}from"react/jsx-runtime";var ie="k-menu-item",et=[c.hover,c.focus,c.active,c.selected,c.disabled],tt={},ae={dir:"ltr",iconPosition:"before"},I=t=>{let{hover:e,focus:n,active:s,selected:m,disabled:l,icon:r,text:p,first:f,last:b,showArrow:N,arrowIconName:k,iconPosition:O=ae.iconPosition,dir:v=ae.dir,children:E,popup:C,...g}=t,x=F(ot,{});E&&E.forEach(j=>{if(j.type==="MenuListItemContent"){x.props.children.push(j);return}});let y=k;return y||(y=v==="rtl"?"caret-alt-left":"caret-alt-right"),ge("li",{...g,className:i(t.className,ie,"k-item",R(ie,{focus:n,disabled:l}),{"k-first":f,"k-last":b}),children:[ge("span",{className:i("k-link k-menu-link",R("k-menu-link",{hover:e,active:s,selected:m,disabled:l})),children:[r&&O==="before"&&F(u,{className:"k-menu-link-icon",icon:r}),F("span",{className:"k-menu-link-text",children:p}),r&&O==="after"&&F(u,{className:"k-menu-link-icon",icon:r}),N&&F("span",{className:"k-menu-expand-arrow",children:F(u,{icon:y})})]}),x,C]})};I.states=et;I.options=tt;I.className=ie;I.defaultOptions=ae;I.moduleName=h;I.folderName=A;var le="button",Se=le;import{Fragment as it,jsx as X,jsxs as Oe}from"react/jsx-runtime";var G="k-button",nt=["icon-button"],rt=[c.hover,c.focus,c.active,c.selected,c.disabled,c.generating],st={size:[a.small,a.medium,a.large],rounded:[D.small,D.medium,D.large,D.full],fillMode:[K.solid,K.flat,K.outline,K.clear,K.link],themeColor:[o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark,o.inverse]},z={size:a.medium,rounded:D.medium,fillMode:K.solid,themeColor:o.base,showArrow:!1,arrowIconName:"caret-alt-down"},d=t=>{let{size:e=z.size,rounded:n=z.rounded,fillMode:s=z.fillMode,themeColor:m=z.themeColor,showArrow:l=z.showArrow,arrowIconName:r=z.arrowIconName,variant:p,hover:f,focus:b,active:N,selected:k,disabled:O,icon:v,text:E,iconClassName:C,...g}=t,x=v!==void 0,y=t.children!==void 0;return Oe("button",{...g,className:i(t.className,G,Ne(G,p),T(G,{size:e,rounded:n,fillMode:s,themeColor:m}),R(G,{hover:f,focus:b,active:N,disabled:O,selected:k}),{"k-icon-button":!E&&!y&&x}),children:[v&&X(u,{className:i(C,"k-button-icon"),icon:v}),E?Oe(it,{children:[E&&X("span",{className:"k-button-text",children:E}),t.children]}):t.children&&X("span",{className:"k-button-text",children:t.children}),l&&X("span",{className:"k-menu-button-arrow k-button-arrow",children:X(u,{icon:r})})]})};d.states=rt;d.options=st;d.variants=nt;d.className=G;d.defaultOptions=z;d.moduleName=le;d.folderName=Se;import{jsx as fo}from"react/jsx-runtime";import{jsx as ho}from"react/jsx-runtime";import{jsx as Ao}from"react/jsx-runtime";import{jsx as ct}from"react/jsx-runtime";var ve="k-menu-scroll-wrapper",at=[],lt={},mt={},B=t=>{let{className:e,children:n,orientation:s,...m}=t;return ct("div",{...m,className:i(e,ve,{"k-menu-scroll-wrapper-vertical":s==="vertical"}),children:n})};B.states=at;B.options=lt;B.className=ve;B.defaultOptions=mt;B.moduleName=h;B.folderName=A;var Ce=B;import{Fragment as me,jsx as U,jsxs as Y}from"react/jsx-runtime";var ce="k-menu",pt=[],ut={},Z={orientation:"horizontal",header:!0,scrollButtonsPosition:"around"},L=t=>{let{children:e,orientation:n=Z.orientation,header:s=Z.header,scrollable:m,scrollButtonsPosition:l=Z.scrollButtonsPosition,wrapperStyles:r,dir:p,popup:f,...b}=t,N={horizontal:{prev:p!=="rtl"?"left":"right",next:p!=="rtl"?"right":"left"},vertical:{prev:"up",next:"down"}},k=U("ul",{dir:p,...b,className:i(t.className,"k-reset",ce,{[`${ce}-${n}`]:n,"k-header":s}),children:e});return Y(me,{children:[m?Y(Ce,{orientation:n,style:r,dir:t.dir,children:[l==="start"&&Y(me,{children:[U(d,{fillMode:"flat",rounded:null,size:"medium",icon:`caret-alt-${N[n].prev}`,className:"k-menu-scroll-button k-menu-scroll-button-prev"}),U(d,{fillMode:"flat",rounded:null,size:"medium",icon:`caret-alt-${N[n].next}`,className:"k-menu-scroll-button k-menu-scroll-button-next"})]}),l==="around"&&U(d,{fillMode:"flat",rounded:null,size:"medium",icon:`caret-alt-${N[n].prev}`,className:"k-menu-scroll-button k-menu-scroll-button-prev"}),k,l==="end"&&Y(me,{children:[U(d,{fillMode:"flat",rounded:null,size:"medium",icon:`caret-alt-${N[n].prev}`,className:"k-menu-scroll-button k-menu-scroll-button-prev"}),U(d,{fillMode:"flat",rounded:null,size:"medium",icon:`caret-alt-${N[n].next}`,className:"k-menu-scroll-button k-menu-scroll-button-next"})]}),l==="around"&&U(d,{fillMode:"flat",rounded:null,size:"medium",icon:`caret-alt-${N[n].next}`,className:"k-menu-scroll-button k-menu-scroll-button-next"})]}):k,f]})};L.states=pt;L.options=ut;L.className=ce;L.defaultOptions=Z;L.moduleName=h;L.folderName=A;import{jsx as dt}from"react/jsx-runtime";var pe="k-separator",ye={orientation:"horizontal"},H=t=>{let{orientation:e=ye.orientation,...n}=t;return dt("li",{...n,className:i(t.className,"k-item",pe,{[`${pe}-${e}`]:e})})};H.className=pe;H.defaultOptions=ye;H.moduleName=h;H.folderName=A;import{Fragment as Wo,jsx as Jo}from"react/jsx-runtime";import{jsx as Te}from"react/jsx-runtime";import{createElement as Nt}from"react";var ue="k-menu-group",ft=[],Mt={size:[a.small,a.medium,a.large]},de={size:a.medium,dir:"ltr"},_=t=>{let{children:e,size:n=de.size,dir:s=de.dir,...m}=t,l=[];return e&&Array.isArray(e)&&e.map((r,p)=>{r.type===I?l.push(Nt(I,{...r.props,dir:s,key:p})):r.type===H?l.push(Te(H,{})):l.push(r)}),Te("ul",{...m,className:i(t.className,ue,T(ue,{size:n})),children:l})};_.states=ft;_.options=Mt;_.className=ue;_.defaultOptions=de;_.moduleName=h;_.folderName=A;import{Fragment as nn,jsx as on,jsxs as rn}from"react/jsx-runtime";import{Fragment as cn,jsx as mn,jsxs as pn}from"react/jsx-runtime";import{Fragment as Nn,jsx as Mn,jsxs as xn}from"react/jsx-runtime";import{Fragment as An,jsx as En,jsxs as Ln}from"react/jsx-runtime";var fe="popup",_e=fe;import{jsx as we}from"react/jsx-runtime";var Pe="k-animation-container",xt=[],ht={},Re={positionMode:"absolute"},w=t=>{let{positionMode:e=Re.positionMode,animationStyle:n,offset:s,...m}=t;return we("div",{...m,style:{...s,...t.style},className:i(t.className,Pe,"k-animation-container-shown",{"k-animation-container-fixed":e==="fixed"}),children:we("div",{className:"k-child-animation-container",style:n,children:t.children})})};w.states=xt;w.options=ht;w.className=Pe;w.defaultOptions=Re;w.moduleName=fe;w.folderName=_e;var Me="popup",Ke=Me;import{jsx as ze}from"react/jsx-runtime";var Be="k-popup",It=[],bt={},Ue={positionMode:"absolute"},P=t=>{let{offset:e,positionMode:n=Ue.positionMode,animationStyle:s,...m}=t;return ze(w,{positionMode:n,offset:e,animationStyle:s,children:ze("div",{...m,className:i(t.className,Be),children:t.children})})};P.states=It;P.options=bt;P.className=Be;P.defaultOptions=Ue;P.moduleName=Me;P.folderName=Ke;import{Fragment as Et,jsx as S,jsxs as He}from"react/jsx-runtime";var tr=t=>S(L,{popup:S(P,{className:"k-menu-popup",offset:{left:"90px",top:"auto"},children:He(_,{children:[S(I,{first:!0,text:"Sub item 1"}),S(I,{text:"Sub item 2",showArrow:!0}),S(I,{last:!0,text:"Sub item 3"})]})}),children:He(Et,{children:[S(M,{first:!0,text:"Item 1"}),S(M,{showArrow:!0,arrowIconName:"caret-alt-down",text:"Item 2"}),S(M,{showArrow:!0,arrowIconName:"caret-alt-down",text:"Item 3"}),S(M,{text:"Item 4"}),S(M,{last:!0,text:"Item 5"})]}),...t});export{tr as MenuPopup};