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

A collection of HTML helpers used for developing Kendo UI themes

var c=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?c(...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 g=(t,e)=>c({[`${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:l,hover:a,focus:p,checked:m,active:s,selected:b,disabled:N,indeterminate:v,loading:q,empty:M,readonly:te,highlighted:oe,...E}=e;return c({"k-valid":r,"k-invalid":l,"k-hover":a,"k-focus":p,"k-checked":m,"k-active":s,"k-selected":b,"k-disabled":N,"k-indeterminate":v&&!m,"k-loading":q,"k-empty":M,"k-readonly":te,"k-highlighted":oe},Object.keys(E).reduce(($,y)=>(y.startsWith("k-")?$[y]=E[y]:$[`k-${y}`]=E[y],$),{}))};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"},k={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 K="bottom-navigation",W=K;import{jsx as re}from"react/jsx-runtime";var T="k-bottom-nav",ne=[k.disabled],ae={fillMode:[S.undefined,S.solid,S.flat],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.inverse]},H={flow:"horizontal",border:!1},d=t=>{let{disabled:e,fillMode:r,themeColor:l,flow:a=H.flow,border:p=H.border,positionMode:m,dir:s}=t;return re("nav",{className:c(t.className,T,g(T,{fillMode:r,themeColor:l}),{[`k-bottom-nav-item-flow-${a}`]:a,"k-bottom-nav-border":p,[`k-pos-${m}`]:m},O(T,{disabled:e})),dir:s,"aria-label":"Bottom navigation",children:t.children})};d.states=ne;d.options=ae;d.className=T;d.defaultOptions=H;d.moduleName=K;d.folderName=W;d.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 me,jsx as J}from"react/jsx-runtime";var V="k-font-icon",ie=[],se={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]},le={},B=t=>{let{size:e,themeColor:r,icon:l,rotate:a,flip:p,...m}=t;return l?J("span",{...m,className:c(t.className,V,g(V,{size:e}),{[`k-i-${l}`]:l,[`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"}):J(me,{})};B.states=ie;B.options=se;B.className=V;B.defaultOptions=le;var Q=B;import{Fragment as pe,jsx as L}from"react/jsx-runtime";var R="k-svg-icon",ce=[],de={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]},P={viewBox:"0 0 24 24",variant:u.outline},C=t=>{let{size:e,themeColor:r,rotate:l,flip:a,viewBox:p=P.viewBox,variant:m=P.variant,icon:s,...b}=t;if(!s)return L(pe,{});if(s==="none")return L("span",{...b,className:c(t.className,R,g("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let N=typeof s=="object"&&s.name&&s.name,v=typeof s=="object"?m&&s.variants?.[m]||s.variants?.outline||s.content:void 0;return L("span",{...b,className:c(t.className,R,g("k-icon",{size:e}),{[`k-svg-i-${N}`]:N,[`k-color-${r}`]:r,[`k-rotate-${l}`]:l,"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=ce;C.options=de;C.className=R;C.defaultOptions=P;var F=C;import*as D from"@progress/kendo-svg-icons";var X="icon",Y="icons";import{useContext as fe}from"react";import{createContext as ue}from"react";var Z=ue({iconsType:"svg"});import{Fragment as j,jsx as I}from"react/jsx-runtime";var A="k-icon",ve=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),xe=[],Ne={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}=fe(Z),{size:r,themeColor:l,icon:a,type:p=e||z.type,rotate:m,flip:s,viewBox:b=z.viewBox,variant:N=z.variant,...v}=t;if(!a)return I(j,{});if((e||p)==="svg"){if(a==="none")return I(F,{...v,className:c(t.className,A),icon:a,size:r,variant:N});let M=D[a]?a:ve(`${a}-icon`);return D[M]?I(F,{...v,className:c(t.className,A),icon:D[M],size:r,themeColor:l,rotate:m,flip:s,viewBox:b,variant:N}):I(j,{})}return I(Q,{...v,className:c(t.className,A),icon:a,size:r,themeColor:l,rotate:m,flip:s})};f.states=xe;f.options=Ne;f.defaultOptions=z;f.className=A;f.moduleName=X;f.folderName=Y;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 ke}from"react/jsx-runtime";var G="k-bottom-nav-item",ge=[k.focus,k.selected,k.disabled],he={},be={},i=t=>{let{focus:e,selected:r,disabled:l,icon:a,text:p,link:m}=t;return ke("span",{className:c(G,O(G,{focus:e,selected:r,disabled:l})),role:"link",...r&&{"aria-current":"true"},...!p&&!m&&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}),m&&_("div",{className:"k-bottom-nav-link",children:_("span",{children:m})})]})};i.states=ge;i.options=he;i.className=G;i.defaultOptions=be;import{Fragment as gt,jsx as Nt,jsxs as ht}from"react/jsx-runtime";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{Fragment as ye,jsx as w,jsxs as Be}from"react/jsx-runtime";var U=t=>w(d,{children:Be(ye,{children:[w(i,{icon:"envelope",text:"BottomNavItem"}),w(i,{icon:"envelope",text:"BottomNavItem"}),w(i,{icon:"envelope",text:"BottomNavItem"})]}),...t});import{jsx as x,jsxs as ee}from"react/jsx-runtime";var Ce=d.options,Ie=d.states,Me={...d.defaultOptions,variant:"vertical"},Oe=[{name:"vertical",title:"Vertical"},{name:"horizontal",title:"Horizontal"}],Se=[],h=t=>{let{variant:e,...r}=t;return e==="horizontal"?ee(U,{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"})]}):ee(U,{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"})]})};h.options=Ce;h.states=Ie;h.variants=Oe;h.defaultOptions=Me;h.modifiers=Se;h.className=d.className;var Jt=h;export{h as BottomNavDemo,Jt as default};