@progress/kendo-themes-html/dist/esm/menu-button/templates/icon-text-menu-button.mjs

A collection of HTML helpers used for developing Kendo UI themes

var d=(...o)=>o.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?d(...e):typeof e=="object"?Object.keys(e).map((r,l)=>e[l]||e[r]&&r||null).filter(r=>r!==null).join(" "):e).filter(e=>!!e).join(" ");var T=(o,e)=>d({[`${o}-xs`]:e.size==="xsmall",[`${o}-sm`]:e.size==="small",[`${o}-md`]:e.size==="medium",[`${o}-lg`]:e.size==="large",[`${o}-xl`]:e.size==="xlarge",[`${o}-xxl`]:e.size==="xxlarge",[`${o}-xxxl`]:e.size==="xxxlarge"},{[`${o}-${e.fillMode}`]:e.fillMode},{[`${o}-${e.themeColor}`]:e.themeColor},{"k-rounded-sm":e.rounded==="small","k-rounded-md":e.rounded==="medium","k-rounded-lg":e.rounded==="large","k-rounded-full":e.rounded==="full","k-rounded-none":e.rounded==="none"}),Q=(o,e)=>{let{valid:r,invalid:l,hover:i,focus:u,checked:c,active:s,selected:g,disabled:h,indeterminate:f,loading:B,empty:N,readonly:w,highlighted:A,...k}=e;return d({"k-valid":r,"k-invalid":l,"k-hover":i,"k-focus":u,"k-checked":c,"k-active":s,"k-selected":g,"k-disabled":h,"k-indeterminate":f&&!c,"k-loading":B,"k-empty":N,"k-readonly":w,"k-highlighted":A},Object.keys(k).reduce((b,C)=>(C.startsWith("k-")?b[C]=k[C]:b[`k-${C}`]=k[C],b),{}))};function X(o,e){if(!e)return{};let r=Array.isArray(e)?e:[e];return Object.fromEntries(r.map(l=>[`k-${l}`,!0]))}var n={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},m={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"},p={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},v={undefined:void 0,outline:"outline",solid:"solid",duotone:"duotone"},t={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",inverse:"inverse"},x={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 ye,jsx as Y}from"react/jsx-runtime";var $="k-font-icon",be=[],ge={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[t.undefined,t.base,t.primary,t.secondary,t.tertiary,t.success,t.warning,t.error,t.info]},ve={},S=o=>{let{size:e,themeColor:r,icon:l,rotate:i,flip:u,...c}=o;return l?Y("span",{...c,className:d(o.className,$,T($,{size:e}),{[`k-i-${l}`]:l,[`k-color-${r}`]:r,[`k-rotate-${i}`]:i,"k-flip-h":u==="h"||u==="both","k-flip-v":u==="v"||u==="both"}),"aria-hidden":"true"}):Y(ye,{})};S.states=be;S.options=ge;S.className=$;S.defaultOptions=ve;var Z=S;import{Fragment as Me,jsx as K}from"react/jsx-runtime";var H="k-svg-icon",Ne=[],ke={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[t.undefined,t.base,t.primary,t.secondary,t.tertiary,t.success,t.warning,t.error,t.info],variant:[v.outline,v.solid,v.duotone]},P={viewBox:"0 0 24 24",variant:v.outline},z=o=>{let{size:e,themeColor:r,rotate:l,flip:i,viewBox:u=P.viewBox,variant:c=P.variant,icon:s,...g}=o;if(!s)return K(Me,{});if(s==="none")return K("span",{...g,className:d(o.className,H,T("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let h=typeof s=="object"&&s.name&&s.name,f=typeof s=="object"?c&&s.variants?.[c]||s.variants?.outline||s.content:void 0;return K("span",{...g,className:d(o.className,H,T("k-icon",{size:e}),{[`k-svg-i-${h}`]:h,[`k-color-${r}`]:r,[`k-rotate-${l}`]:l,"k-flip-h":i==="h"||i==="both","k-flip-v":i==="v"||i==="both"}),"aria-hidden":"true",children:K("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof s=="object"?s.viewBox:u,dangerouslySetInnerHTML:f!==void 0?{__html:f}:void 0,children:s?void 0:o.children})})};z.states=Ne;z.options=ke;z.className=H;z.defaultOptions=P;var D=z;import*as F from"@progress/kendo-svg-icons";var j="icon",ee="icons";import{useContext as Ce}from"react";import{createContext as Be}from"react";var te=Be({iconsType:"svg"});import{Fragment as oe,jsx as E}from"react/jsx-runtime";var R="k-icon",Te=o=>o.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),we=[],Oe={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[t.undefined,t.base,t.primary,t.secondary,t.tertiary,t.success,t.warning,t.error,t.info],variant:[v.outline,v.solid,v.duotone]},U={viewBox:"0 0 24 24",type:"svg",variant:v.outline},y=o=>{let{iconsType:e}=Ce(te),{size:r,themeColor:l,icon:i,type:u=e||U.type,rotate:c,flip:s,viewBox:g=U.viewBox,variant:h=U.variant,...f}=o;if(!i)return E(oe,{});if((e||u)==="svg"){if(i==="none")return E(D,{...f,className:d(o.className,R),icon:i,size:r,variant:h});let N=F[i]?i:Te(`${i}-icon`);return F[N]?E(D,{...f,className:d(o.className,R),icon:F[N],size:r,themeColor:l,rotate:c,flip:s,viewBox:g,variant:h}):E(oe,{})}return E(Z,{...f,className:d(o.className,R),icon:i,size:r,themeColor:l,rotate:c,flip:s})};y.states=we;y.options=Oe;y.defaultOptions=U;y.className=R;y.moduleName=j;y.folderName=ee;y.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."}]};var V="button",ne=V;import{Fragment as re,jsx as O,jsxs as ie}from"react/jsx-runtime";var _="k-button",Ie=["icon-button"],Ae=[x.hover,x.focus,x.active,x.selected,x.disabled,x.generating],Se={size:[n.undefined,n.xsmall,n.small,n.medium,n.large],rounded:[m.undefined,m.none,m.small,m.medium,m.large,m.full],fillMode:[p.undefined,p.solid,p.flat,p.outline,p.clear,p.link],themeColor:[t.undefined,t.base,t.primary,t.secondary,t.tertiary,t.success,t.warning,t.error,t.info,t.inverse]},G={showArrow:!1,arrowIconName:"chevron-down"},a=o=>{let{as:e="button",size:r,rounded:l,fillMode:i,themeColor:u,showArrow:c=G.showArrow,arrowIconName:s=G.arrowIconName,variant:g,hover:h,focus:f,active:B,selected:N,disabled:w,togglable:A,ariaDisabled:k,icon:b,iconSize:C,text:L,iconClassName:me,className:pe,...fe}=o,xe=b!=null,he=o.children!==void 0;return ie(e,{className:d(pe,_,X(_,g),T(_,{size:r,rounded:l,fillMode:i,themeColor:u}),Q(_,{hover:h,focus:f,active:B,disabled:w||k,selected:N}),{"k-icon-button":!L&&!he&&xe}),"aria-pressed":A?N?"true":"false":void 0,...fe,"aria-disabled":k?"true":void 0,disabled:w||void 0,children:[typeof b=="string"&&b&&O(y,{className:d(me,"k-button-icon"),icon:b,size:C}),b&&typeof b!="string"&&O(re,{children:b}),L?ie(re,{children:[L&&O("span",{className:"k-button-text",children:L}),o.children]}):o.children&&O("span",{className:"k-button-text",children:o.children}),c&&O("span",{className:"k-menu-button-arrow k-button-arrow",children:O(y,{icon:s})})]})};a.states=Ae;a.options=Se;a.variants=Ie;a.className=_;a.defaultOptions=G;a.moduleName=V;a.folderName=ne;a.ariaSpec={selector:".k-button",rules:[{selector:".k-button",attribute:"role=button or nodeName=button",usage:"The button role is implicit from the native <button> element."},{selector:".k-button",attribute:"aria-label (when icon-only)",usage:"Required for icon-only buttons that have no visible text."},{selector:".k-button",attribute:"aria-pressed (when togglable)",usage:"Indicates the pressed state of a toggle button."},{selector:".k-button",attribute:"disabled (when disabled)",usage:"Rendered when the button is disabled."}]};import{jsx as ze}from"react/jsx-runtime";var se=o=>ze(a,{icon:"folder",...o,"aria-label":o["aria-label"]||"Folder",children:void 0});import{jsx as Ee}from"react/jsx-runtime";var ae=o=>Ee(a,{icon:"folder",children:"Button",...o});import{jsx as _e}from"react/jsx-runtime";var le=o=>_e(a,{children:"Button",...o});import{jsx as q}from"react/jsx-runtime";var Le=a.options,Ke=a.states,Re={...a.defaultOptions,variant:"text"},Ue=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],$e=[],I=o=>{let{variant:e,...r}=o;switch(e){case"icon-only":return q(se,{...r,icon:"star"});case"icon-and-text":return q(ae,{...r,icon:"star",children:"Button"});default:return q(le,{...r,children:"Button"})}};I.options=Le;I.states=Ke;I.variants=Ue;I.defaultOptions=Re;I.modifiers=$e;I.className=a.className;var W="menu-button",de=W;import{jsx as De}from"react/jsx-runtime";var ue="k-menu-button",He=[x.hover,x.focus,x.active,x.selected,x.disabled],Pe={size:[n.undefined,n.xsmall,n.small,n.medium,n.large],rounded:[m.undefined,m.none,m.small,m.medium,m.large,m.full],fillMode:[p.undefined,p.solid,p.flat,p.outline,p.clear,p.link],themeColor:[t.undefined,t.base,t.primary,t.secondary,t.tertiary,t.success,t.warning,t.error,t.info,t.inverse]},J={showArrow:!0,arrowIconName:"chevron-down"},M=o=>{let{size:e,rounded:r,fillMode:l,themeColor:i,hover:u,focus:c,active:s,selected:g,disabled:h,icon:f,text:B,showArrow:N=J.showArrow,arrowIconName:w=J.arrowIconName,expanded:A,...k}=o;return De(a,{...k,className:d(o.className,ue),text:B,size:e,rounded:r,fillMode:l,themeColor:i,hover:u,focus:c,active:s,selected:g,disabled:h,ariaDisabled:h||void 0,icon:f,showArrow:N,arrowIconName:w,"aria-expanded":A?"true":"false",...!B&&f&&!o["aria-label"]&&{"aria-label":"Menu"}})};M.states=He;M.options=Pe;M.className=ue;M.defaultOptions=J;M.moduleName=W;M.folderName=de;M.ariaSpec={selector:".k-menu-button",rules:[{selector:".k-menu-button",attribute:"role=button or nodeName=button",usage:"Omitted if the button DOM element is used."},{selector:".k-menu-button",attribute:"aria-label (when icon-only)",usage:"Required when no text is visible in the button."},{selector:".k-menu-button",attribute:"aria-expanded=true/false",usage:"Announces the state of the popup visibility."},{selector:".k-menu-button",attribute:"aria-controls=.k-menu-group id (when open)",usage:"Points to the popup element. Builds a relationship between the button and the popup."},{selector:".k-menu-button.k-disabled",attribute:"aria-disabled=true",usage:"Rendered only when the button is disabled."},{selector:".k-menu-group",attribute:"role=list",usage:"Announces the list role of the popup."},{selector:".k-menu-item",attribute:"role=listitem",usage:"Announces the listitem role of the popup items."}]};var ce=M;import{jsx as Fe}from"react/jsx-runtime";var oo=o=>Fe(ce,{icon:"save",children:"button",...o});export{oo as IconTextMenuButton};