@progress/kendo-themes-html/dist/esm/bottom-nav/templates/bottom-nav-selected.mjs

A collection of HTML helpers used for developing Kendo UI themes

var d=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?d(...e):typeof e=="object"?Object.keys(e).map((r,m)=>e[m]||e[r]&&r||null).filter(r=>r!==null).join(" "):e).filter(e=>!!e).join(" ");var g=(t,e)=>d({[`${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.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"}),O=(t,e)=>{let{valid:r,invalid:m,hover:a,focus:p,checked:c,active:s,selected:h,disabled:N,indeterminate:v,loading:W,empty:M,readonly:oe,highlighted:ne,...$}=e;return d({"k-valid":r,"k-invalid":m,"k-hover":a,"k-focus":p,"k-checked":c,"k-active":s,"k-selected":h,"k-disabled":N,"k-indeterminate":v&&!c,"k-loading":W,"k-empty":M,"k-readonly":oe,"k-highlighted":ne},Object.keys($).reduce((K,y)=>(y.startsWith("k-")?K[y]=$[y]:K[`k-${y}`]=$[y],K),{}))};var n={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"};var S={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},u={undefined:void 0,outline:"outline",solid:"solid",duotone:"duotone"},o={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",inverse:"inverse"},b={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 H="bottom-navigation",J=H;import{jsx as ie}from"react/jsx-runtime";var T="k-bottom-nav",ae=[b.disabled],re={fillMode:[S.undefined,S.solid,S.flat],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.inverse]},V={flow:"horizontal",border:!1},l=t=>{let{disabled:e,fillMode:r,themeColor:m,flow:a=V.flow,border:p=V.border,positionMode:c,dir:s}=t;return ie("nav",{className:d(t.className,T,g(T,{fillMode:r,themeColor:m}),{[`k-bottom-nav-item-flow-${a}`]:a,"k-bottom-nav-border":p,[`k-pos-${c}`]:c},O(T,{disabled:e})),dir:s,"aria-label":"Bottom navigation",children:t.children})};l.states=ae;l.options=re;l.className=T;l.defaultOptions=V;l.moduleName=H;l.folderName=J;l.ariaSpec={selector:".k-bottom-nav",rules:[{selector:".k-bottom-nav",attribute:"role=navigation or nodeName=nav",usage:"The landmark role navigation must be assigned to the bottom navigation."},{selector:".k-bottom-nav-item",attribute:"role=link or nodeName=a",usage:"Associate the link purpose of the bottom navigation items."},{selector:".k-bottom-nav-item.k-selected",attribute:"aria-current=true",usage:"Indicates the selected navigation item."}]};import{Fragment as ce,jsx as Q}from"react/jsx-runtime";var R="k-font-icon",se=[],le={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info]},me={},B=t=>{let{size:e,themeColor:r,icon:m,rotate:a,flip:p,...c}=t;return m?Q("span",{...c,className:d(t.className,R,g(R,{size:e}),{[`k-i-${m}`]:m,[`k-color-${r}`]:r,[`k-rotate-${a}`]:a,"k-flip-h":p==="h"||p==="both","k-flip-v":p==="v"||p==="both"}),"aria-hidden":"true"}):Q(ce,{})};B.states=se;B.options=le;B.className=R;B.defaultOptions=me;var X=B;import{Fragment as ue,jsx as L}from"react/jsx-runtime";var P="k-svg-icon",de=[],pe={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info],variant:[u.outline,u.solid,u.duotone]},F={viewBox:"0 0 24 24",variant:u.outline},C=t=>{let{size:e,themeColor:r,rotate:m,flip:a,viewBox:p=F.viewBox,variant:c=F.variant,icon:s,...h}=t;if(!s)return L(ue,{});if(s==="none")return L("span",{...h,className:d(t.className,P,g("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let N=typeof s=="object"&&s.name&&s.name,v=typeof s=="object"?c&&s.variants?.[c]||s.variants?.outline||s.content:void 0;return L("span",{...h,className:d(t.className,P,g("k-icon",{size:e}),{[`k-svg-i-${N}`]:N,[`k-color-${r}`]:r,[`k-rotate-${m}`]:m,"k-flip-h":a==="h"||a==="both","k-flip-v":a==="v"||a==="both"}),"aria-hidden":"true",children:L("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof s=="object"?s.viewBox:p,dangerouslySetInnerHTML:v!==void 0?{__html:v}:void 0,children:s?void 0:t.children})})};C.states=de;C.options=pe;C.className=P;C.defaultOptions=F;var D=C;import*as G from"@progress/kendo-svg-icons";var Y="icon",Z="icons";import{useContext as ve}from"react";import{createContext as fe}from"react";var j=fe({iconsType:"svg"});import{Fragment as ee,jsx as I}from"react/jsx-runtime";var A="k-icon",xe=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),Ne=[],ge={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info],variant:[u.outline,u.solid,u.duotone]},z={viewBox:"0 0 24 24",type:"svg",variant:u.outline},f=t=>{let{iconsType:e}=ve(j),{size:r,themeColor:m,icon:a,type:p=e||z.type,rotate:c,flip:s,viewBox:h=z.viewBox,variant:N=z.variant,...v}=t;if(!a)return I(ee,{});if((e||p)==="svg"){if(a==="none")return I(D,{...v,className:d(t.className,A),icon:a,size:r,variant:N});let M=G[a]?a:xe(`${a}-icon`);return G[M]?I(D,{...v,className:d(t.className,A),icon:G[M],size:r,themeColor:m,rotate:c,flip:s,viewBox:h,variant:N}):I(ee,{})}return I(X,{...v,className:d(t.className,A),icon:a,size:r,themeColor:m,rotate:c,flip:s})};f.states=Ne;f.options=ge;f.defaultOptions=z;f.className=A;f.moduleName=Y;f.folderName=Z;f.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{jsx as _,jsxs as ye}from"react/jsx-runtime";var U="k-bottom-nav-item",he=[b.focus,b.selected,b.disabled],be={},ke={},i=t=>{let{focus:e,selected:r,disabled:m,icon:a,text:p,link:c}=t;return ye("span",{className:d(U,O(U,{focus:e,selected:r,disabled:m})),role:"link",...r&&{"aria-current":"true"},...!p&&!c&&a&&{"aria-label":a},children:[a&&_(f,{className:"k-bottom-nav-item-icon",icon:a,size:"xlarge"}),p&&_("span",{className:"k-bottom-nav-item-text",children:p}),c&&_("div",{className:"k-bottom-nav-link",children:_("span",{children:c})})]})};i.states=he;i.options=be;i.className=U;i.defaultOptions=ke;import{Fragment as Be,jsx as w,jsxs as Ce}from"react/jsx-runtime";var q=t=>w(l,{children:Ce(Be,{children:[w(i,{icon:"envelope",text:"BottomNavItem"}),w(i,{icon:"envelope",text:"BottomNavItem"}),w(i,{icon:"envelope",text:"BottomNavItem"})]}),...t});import{Fragment as Ct,jsx as Bt,jsxs as It}from"react/jsx-runtime";import{Fragment as Lt,jsx as Tt,jsxs as At}from"react/jsx-runtime";import{jsx as x,jsxs as te}from"react/jsx-runtime";var Ie=l.options,Me=l.states,Oe={...l.defaultOptions,variant:"vertical"},Se=[{name:"vertical",title:"Vertical"},{name:"horizontal",title:"Horizontal"}],Te=[],k=t=>{let{variant:e,...r}=t;return e==="horizontal"?te(q,{border:!0,flow:"horizontal",...r,children:[x(i,{icon:"envelope",text:"Label"}),x(i,{icon:"chart-pie",text:"Label",selected:!0}),x(i,{icon:"gear",text:"Label"}),x(i,{icon:"more-horizontal",text:"Label"})]}):te(q,{border:!0,flow:"vertical",...r,children:[x(i,{icon:"envelope",text:"Label"}),x(i,{icon:"chart-pie",text:"Label",selected:!0}),x(i,{icon:"gear",text:"Label"}),x(i,{icon:"more-vertical",text:"Label"})]})};k.options=Ie;k.states=Me;k.variants=Se;k.defaultOptions=Oe;k.modifiers=Te;k.className=l.className;import{Fragment as Le,jsx as E,jsxs as Ae}from"react/jsx-runtime";var Jt=t=>E(l,{children:Ae(Le,{children:[E(i,{icon:"envelope",text:"Inbox"}),E(i,{icon:"calendar",text:"Calendar",selected:!0}),E(i,{icon:"gear",text:"Settings"})]}),...t});export{Jt as BottomNavSelected};