@progress/kendo-themes-html/dist/esm/panelbar/templates/panelbar-expand-group.mjs

A collection of HTML helpers used for developing Kendo UI themes

var s=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?s(...e):typeof e=="object"?Object.keys(e).map((a,i)=>e[i]||e[a]&&a||null).filter(a=>a!==null).join(" "):e).filter(e=>!!e).join(" ");var L=(t,e)=>s({[`${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"}),Z=(t,e)=>{let{valid:a,invalid:i,hover:n,focus:x,checked:p,active:c,selected:v,disabled:b,indeterminate:g,loading:y,empty:C,readonly:D,highlighted:w,...k}=e;return s({"k-valid":a,"k-invalid":i,"k-hover":n,"k-focus":x,"k-checked":p,"k-active":c,"k-selected":v,"k-disabled":b,"k-indeterminate":g&&!p,"k-loading":y,"k-empty":C,"k-readonly":D,"k-highlighted":w},Object.keys(k).reduce((K,E)=>(E.startsWith("k-")?K[E]=k[E]:K[`k-${E}`]=k[E],K),{}))};var l={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"};var P={undefined:void 0,outline:"outline",solid:"solid",duotone:"duotone"},r={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",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 F={};function u(t){return F[t]=(F[t]||0)+1,`k-${t}-${F[t]}`}var V="panelbar",j=V;import{jsx as ge}from"react/jsx-runtime";var ee="k-panelbar",xe=[],he={},be={},f=t=>{let{activeDescendant:e,...a}=t;return ge("ul",{...a,className:s(t.className,ee),role:"tree","aria-activedescendant":e,children:t.children})};f.states=xe;f.options=he;f.className=ee;f.defaultOptions=be;f.moduleName=V;f.folderName=j;f.ariaSpec={selector:".k-panelbar",rules:[{selector:".k-panelbar",attribute:"role=tree",usage:"The root element of the PanelBar has role tree."},{selector:".k-panelbar",attribute:"aria-activedescendant (when present)",usage:"Points to the currently focused item in the PanelBar."},{selector:".k-panelbar-group",attribute:"role=group",usage:"The ul element that wraps child nodes."},{selector:".k-panelbar-item:not(.k-expanded) > .k-panelbar-group",attribute:"aria-hidden=true",usage:"Hides the group element from assistive technologies when its parent is not expanded."},{selector:".k-panelbar-item",attribute:"role=treeitem",usage:"The li element rendered for a PanelBar item."},{selector:".k-panelbar-item",attribute:"aria-expanded=true/false",usage:"Announces the expanded state of the item (if expandable)."},{selector:".k-panelbar-item",attribute:"aria-selected=true/false",usage:"Announces the selected state of the item."}]};import X from"react";import{Fragment as Be,jsx as te}from"react/jsx-runtime";var U="k-font-icon",ve=[],Ie={size:[l.undefined,l.xsmall,l.small,l.medium,l.large,l.xlarge,l.xxlarge,l.xxxlarge],themeColor:[r.undefined,r.base,r.primary,r.secondary,r.tertiary,r.success,r.warning,r.error,r.info]},Pe={},O=t=>{let{size:e,themeColor:a,icon:i,rotate:n,flip:x,...p}=t;return i?te("span",{...p,className:s(t.className,U,L(U,{size:e}),{[`k-i-${i}`]:i,[`k-color-${a}`]:a,[`k-rotate-${n}`]:n,"k-flip-h":x==="h"||x==="both","k-flip-v":x==="v"||x==="both"}),"aria-hidden":"true"}):te(Be,{})};O.states=ve;O.options=Ie;O.className=U;O.defaultOptions=Pe;var ne=O;import{Fragment as ke,jsx as _}from"react/jsx-runtime";var q="k-svg-icon",Ce=[],Ne={size:[l.undefined,l.xsmall,l.small,l.medium,l.large,l.xlarge,l.xxlarge,l.xxxlarge],themeColor:[r.undefined,r.base,r.primary,r.secondary,r.tertiary,r.success,r.warning,r.error,r.info],variant:[P.outline,P.solid,P.duotone]},W={viewBox:"0 0 24 24",variant:P.outline},S=t=>{let{size:e,themeColor:a,rotate:i,flip:n,viewBox:x=W.viewBox,variant:p=W.variant,icon:c,...v}=t;if(!c)return _(ke,{});if(c==="none")return _("span",{...v,className:s(t.className,q,L("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let b=typeof c=="object"&&c.name&&c.name,g=typeof c=="object"?p&&c.variants?.[p]||c.variants?.outline||c.content:void 0;return _("span",{...v,className:s(t.className,q,L("k-icon",{size:e}),{[`k-svg-i-${b}`]:b,[`k-color-${a}`]:a,[`k-rotate-${i}`]:i,"k-flip-h":n==="h"||n==="both","k-flip-v":n==="v"||n==="both"}),"aria-hidden":"true",children:_("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof c=="object"?c.viewBox:x,dangerouslySetInnerHTML:g!==void 0?{__html:g}:void 0,children:c?void 0:t.children})})};S.states=Ce;S.options=Ne;S.className=q;S.defaultOptions=W;var J=S;import*as Q from"@progress/kendo-svg-icons";var oe="icon",ae="icons";import{useContext as Ae}from"react";import{createContext as ye}from"react";var re=ye({iconsType:"svg"});import{Fragment as ie,jsx as T}from"react/jsx-runtime";var z="k-icon",Ee=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),Le=[],Me={size:[l.undefined,l.xsmall,l.small,l.medium,l.large,l.xlarge,l.xxlarge,l.xxxlarge],themeColor:[r.undefined,r.base,r.primary,r.secondary,r.tertiary,r.success,r.warning,r.error,r.info],variant:[P.outline,P.solid,P.duotone]},R={viewBox:"0 0 24 24",type:"svg",variant:P.outline},B=t=>{let{iconsType:e}=Ae(re),{size:a,themeColor:i,icon:n,type:x=e||R.type,rotate:p,flip:c,viewBox:v=R.viewBox,variant:b=R.variant,...g}=t;if(!n)return T(ie,{});if((e||x)==="svg"){if(n==="none")return T(J,{...g,className:s(t.className,z),icon:n,size:a,variant:b});let C=Q[n]?n:Ee(`${n}-icon`);return Q[C]?T(J,{...g,className:s(t.className,z),icon:Q[C],size:a,themeColor:i,rotate:p,flip:c,viewBox:v,variant:b}):T(ie,{})}return T(ne,{...g,className:s(t.className,z),icon:n,size:a,themeColor:i,rotate:p,flip:c})};B.states=Le;B.options=Me;B.defaultOptions=R;B.className=z;B.moduleName=oe;B.folderName=ae;B.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 le}from"react/jsx-runtime";var se="k-panelbar-item",Oe=[M.hover,M.focus,M.selected,M.disabled],Se={},H={level:0,expanded:!1,text:"Item"},o=t=>{let{text:e=H.text,level:a=H.level,expanded:i=H.expanded,header:n,hover:x,focus:p,selected:c,disabled:v,icon:b,iconClass:g,ariaSelected:y,children:C,...D}=t,w=!!C;return le("li",{...D,className:s(t.className,se,{"k-panelbar-header":n,[`k-level-${a}`]:a||a===0,"k-expanded":i}),role:"treeitem","aria-expanded":w?i?"true":"false":void 0,"aria-selected":y?"true":"false","aria-disabled":v?"true":void 0,children:[le("span",{className:s("k-link",Z("k-link",{hover:x,focus:p,disabled:v,selected:c})),children:[b&&$(B,{className:"k-panelbar-item-icon",icon:b}),g&&!b&&$("span",{className:`k-panelbar-item-icon ${g}`}),$("span",{className:"k-panelbar-item-text",children:e}),w&&$(B,{className:s("k-panelbar-toggle",i?"k-panelbar-collapse":"k-panelbar-expand"),icon:`chevron-${i?"up":"down"}`})]}),i&&C,!i&&C&&X.Children.map(C,k=>X.isValidElement(k)?X.cloneElement(k,{"aria-hidden":"true",style:{display:"none"}}):k)]})};o.states=Oe;o.options=Se;o.className=se;o.defaultOptions=H;import{jsx as ze}from"react/jsx-runtime";var de="k-panelbar-group",Te=[],we={},_e={},I=t=>{let{ariaHidden:e,...a}=t;return ze("ul",{...a,className:s(t.className,de),role:"group",...e!==void 0&&{"aria-hidden":e?"true":void 0},children:t.children})};I.states=Te;I.options=we;I.className=de;I.defaultOptions=_e;import{jsx as Ge}from"react/jsx-runtime";var ce="k-panelbar-content",Re=[],$e={},He={},m=t=>{let{...e}=t;return Ge("div",{...e,className:s(t.className,ce),children:t.children})};m.states=Re;m.options=$e;m.className=ce;m.defaultOptions=He;import{Fragment as De,jsx as N,jsxs as Ke}from"react/jsx-runtime";var me=t=>{let e=u("pb-item"),a=u("pb-item"),i=u("pb-item"),n=u("pb-item");return N(f,{children:Ke(De,{children:[N(o,{header:!0,text:"Item 1",id:e,children:N(m,{children:"content"})}),N(o,{header:!0,text:"Item 2",id:a,children:N(m,{children:"content"})}),N(o,{header:!0,text:"Item 3",id:i,children:N(m,{children:"content"})}),N(o,{header:!0,text:"Item 4",id:n})]}),...t})};import{Fragment as Qt,jsx as Jt,jsxs as Xt}from"react/jsx-runtime";import{Fragment as pe,jsx as d,jsxs as G}from"react/jsx-runtime";var Fe=f.options,Ve=f.states,ue={...f.defaultOptions,variant:"normal"},Ue=[{name:"normal",title:"Normal"},{name:"expand",title:"Expanded"}],qe=[{name:"icon",title:"Item icons"},{name:"disabled",title:"Disabled item"}],A=t=>{let{variant:e,modifiers:a,...i}={...ue,...t},n={},x={folder:"folder",gear:"gear",file:"file",image:"image"};return Object.keys(a||{}).forEach(p=>{switch(p){case"icon":{n.icon=a?.[p]?x:void 0;break}case"disabled":n.disabled=!!a?.[p]}}),e==="expand"?d(pe,{children:G(fe,{style:{width:"300px"},...i,children:[d(o,{icon:n.icon?.gear,header:!0,text:"Item 1",children:d(m,{children:"content"})}),d(o,{icon:n.icon?.folder,selected:!0,header:!0,expanded:!0,text:"Item 2",children:G(I,{children:[d(o,{level:1,text:"Child 1"}),d(o,{level:1,expanded:!0,text:"Child 2",children:G(I,{children:[d(o,{level:2,text:"Child 2.1"}),d(o,{icon:n.icon?.image,level:2,text:"Child 2.2"})]})}),d(o,{disabled:n.disabled,level:1,text:"Child 3",children:d(m,{children:"content"})}),d(o,{level:1,text:"Child 4"})]})}),d(o,{icon:n.icon?.folder,disabled:n.disabled,header:!0,text:"Item 3",children:d(m,{children:"content"})}),d(o,{icon:n.icon?.file,header:!0,text:"Item 4"})]})}):d(pe,{children:G(me,{style:{width:"300px"},...i,children:[d(o,{icon:n.icon?.gear,header:!0,text:"Item 1",children:d(m,{children:"content"})}),d(o,{icon:n.icon?.folder,header:!0,text:"Item 2",children:d(m,{children:"content"})}),d(o,{icon:n.icon?.folder,disabled:n.disabled,header:!0,text:"Item 3",children:d(m,{children:"content"})}),d(o,{icon:n.icon?.file,header:!0,text:"Item 4"})]})})};A.options=Fe;A.states=Ve;A.variants=Ue;A.defaultOptions=ue;A.modifiers=qe;A.className=f.className;import{Fragment as We,jsx as h,jsxs as Y}from"react/jsx-runtime";var fe=t=>{let e=u("pb-item"),a=u("pb-item"),i=u("pb-item"),n=u("pb-item"),x=u("pb-child"),p=u("pb-child"),c=u("pb-child"),v=u("pb-child"),b=u("pb-child"),g=u("pb-child"),y=u("pb-child");return h(f,{activeDescendant:a,children:Y(We,{children:[h(o,{header:!0,text:"Item 1",id:e,children:h(m,{children:"content"})}),h(o,{header:!0,expanded:!0,text:"Item 2",id:a,ariaSelected:!0,focus:!0,children:Y(I,{children:[h(o,{level:1,text:"Child 1",id:x}),h(o,{level:1,expanded:!0,text:"Child 2",id:p,children:Y(I,{children:[h(o,{level:2,text:"Child 2.1",id:c}),h(o,{level:2,text:"Child 2.2",id:v})]})}),h(o,{level:1,text:"Child 3",id:b,children:h(I,{children:h(o,{level:2,text:"Child 3.1",id:g})})}),h(o,{level:1,text:"Child 4",id:y})]})}),h(o,{header:!0,text:"Item 3",id:i,children:h(m,{children:"content"})}),h(o,{header:!0,text:"Item 4",id:n})]}),...t})};export{fe as PanelBarExpandGroup};