@progress/kendo-themes-html/dist/esm/panelbar/templates/panelbar-expand-content.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 M=(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"}),j=(t,e)=>{let{valid:a,invalid:i,hover:o,focus:x,checked:u,active:p,selected:v,disabled:b,indeterminate:g,loading:A,empty:C,readonly:K,highlighted:_,...y}=e;return s({"k-valid":a,"k-invalid":i,"k-hover":o,"k-focus":x,"k-checked":u,"k-active":p,"k-selected":v,"k-disabled":b,"k-indeterminate":g&&!u,"k-loading":A,"k-empty":C,"k-readonly":K,"k-highlighted":_},Object.keys(y).reduce((F,L)=>(L.startsWith("k-")?F[L]=y[L]:F[`k-${L}`]=y[L],F),{}))};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"},O={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 V={};function d(t){return V[t]=(V[t]||0)+1,`k-${t}-${V[t]}`}var U="panelbar",ee=U;import{jsx as ve}from"react/jsx-runtime";var te="k-panelbar",he=[],be={},ge={},f=t=>{let{activeDescendant:e,...a}=t;return ve("ul",{...a,className:s(t.className,te),role:"tree","aria-activedescendant":e,children:t.children})};f.states=he;f.options=be;f.className=te;f.defaultOptions=ge;f.moduleName=U;f.folderName=ee;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 Y from"react";import{Fragment as Ce,jsx as ne}from"react/jsx-runtime";var q="k-font-icon",Ie=[],Pe={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]},Be={},S=t=>{let{size:e,themeColor:a,icon:i,rotate:o,flip:x,...u}=t;return i?ne("span",{...u,className:s(t.className,q,M(q,{size:e}),{[`k-i-${i}`]:i,[`k-color-${a}`]:a,[`k-rotate-${o}`]:o,"k-flip-h":x==="h"||x==="both","k-flip-v":x==="v"||x==="both"}),"aria-hidden":"true"}):ne(Ce,{})};S.states=Ie;S.options=Pe;S.className=q;S.defaultOptions=Be;var oe=S;import{Fragment as ye,jsx as z}from"react/jsx-runtime";var W="k-svg-icon",Ne=[],ke={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]},J={viewBox:"0 0 24 24",variant:P.outline},T=t=>{let{size:e,themeColor:a,rotate:i,flip:o,viewBox:x=J.viewBox,variant:u=J.variant,icon:p,...v}=t;if(!p)return z(ye,{});if(p==="none")return z("span",{...v,className:s(t.className,W,M("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let b=typeof p=="object"&&p.name&&p.name,g=typeof p=="object"?u&&p.variants?.[u]||p.variants?.outline||p.content:void 0;return z("span",{...v,className:s(t.className,W,M("k-icon",{size:e}),{[`k-svg-i-${b}`]:b,[`k-color-${a}`]:a,[`k-rotate-${i}`]:i,"k-flip-h":o==="h"||o==="both","k-flip-v":o==="v"||o==="both"}),"aria-hidden":"true",children:z("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof p=="object"?p.viewBox:x,dangerouslySetInnerHTML:g!==void 0?{__html:g}:void 0,children:p?void 0:t.children})})};T.states=Ne;T.options=ke;T.className=W;T.defaultOptions=J;var Q=T;import*as X from"@progress/kendo-svg-icons";var ae="icon",re="icons";import{useContext as Ee}from"react";import{createContext as Ae}from"react";var ie=Ae({iconsType:"svg"});import{Fragment as le,jsx as w}from"react/jsx-runtime";var R="k-icon",Le=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),Me=[],Oe={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]},$={viewBox:"0 0 24 24",type:"svg",variant:P.outline},B=t=>{let{iconsType:e}=Ee(ie),{size:a,themeColor:i,icon:o,type:x=e||$.type,rotate:u,flip:p,viewBox:v=$.viewBox,variant:b=$.variant,...g}=t;if(!o)return w(le,{});if((e||x)==="svg"){if(o==="none")return w(Q,{...g,className:s(t.className,R),icon:o,size:a,variant:b});let C=X[o]?o:Le(`${o}-icon`);return X[C]?w(Q,{...g,className:s(t.className,R),icon:X[C],size:a,themeColor:i,rotate:u,flip:p,viewBox:v,variant:b}):w(le,{})}return w(oe,{...g,className:s(t.className,R),icon:o,size:a,themeColor:i,rotate:u,flip:p})};B.states=Me;B.options=Oe;B.defaultOptions=$;B.className=R;B.moduleName=ae;B.folderName=re;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 H,jsxs as se}from"react/jsx-runtime";var de="k-panelbar-item",Se=[O.hover,O.focus,O.selected,O.disabled],Te={},G={level:0,expanded:!1,text:"Item"},n=t=>{let{text:e=G.text,level:a=G.level,expanded:i=G.expanded,header:o,hover:x,focus:u,selected:p,disabled:v,icon:b,iconClass:g,ariaSelected:A,children:C,...K}=t,_=!!C;return se("li",{...K,className:s(t.className,de,{"k-panelbar-header":o,[`k-level-${a}`]:a||a===0,"k-expanded":i}),role:"treeitem","aria-expanded":_?i?"true":"false":void 0,"aria-selected":A?"true":"false","aria-disabled":v?"true":void 0,children:[se("span",{className:s("k-link",j("k-link",{hover:x,focus:u,disabled:v,selected:p})),children:[b&&H(B,{className:"k-panelbar-item-icon",icon:b}),g&&!b&&H("span",{className:`k-panelbar-item-icon ${g}`}),H("span",{className:"k-panelbar-item-text",children:e}),_&&H(B,{className:s("k-panelbar-toggle",i?"k-panelbar-collapse":"k-panelbar-expand"),icon:`chevron-${i?"up":"down"}`})]}),i&&C,!i&&C&&Y.Children.map(C,y=>Y.isValidElement(y)?Y.cloneElement(y,{"aria-hidden":"true",style:{display:"none"}}):y)]})};n.states=Se;n.options=Te;n.className=de;n.defaultOptions=G;import{jsx as Re}from"react/jsx-runtime";var ce="k-panelbar-group",we=[],_e={},ze={},I=t=>{let{ariaHidden:e,...a}=t;return Re("ul",{...a,className:s(t.className,ce),role:"group",...e!==void 0&&{"aria-hidden":e?"true":void 0},children:t.children})};I.states=we;I.options=_e;I.className=ce;I.defaultOptions=ze;import{jsx as De}from"react/jsx-runtime";var me="k-panelbar-content",$e=[],He={},Ge={},c=t=>{let{...e}=t;return De("div",{...e,className:s(t.className,me),children:t.children})};c.states=$e;c.options=He;c.className=me;c.defaultOptions=Ge;import{Fragment as Ke,jsx as k,jsxs as Fe}from"react/jsx-runtime";var pe=t=>{let e=d("pb-item"),a=d("pb-item"),i=d("pb-item"),o=d("pb-item");return k(f,{children:Fe(Ke,{children:[k(n,{header:!0,text:"Item 1",id:e,children:k(c,{children:"content"})}),k(n,{header:!0,text:"Item 2",id:a,children:k(c,{children:"content"})}),k(n,{header:!0,text:"Item 3",id:i,children:k(c,{children:"content"})}),k(n,{header:!0,text:"Item 4",id:o})]}),...t})};import{Fragment as Ve,jsx as h,jsxs as Z}from"react/jsx-runtime";var ue=t=>{let e=d("pb-item"),a=d("pb-item"),i=d("pb-item"),o=d("pb-item"),x=d("pb-child"),u=d("pb-child"),p=d("pb-child"),v=d("pb-child"),b=d("pb-child"),g=d("pb-child"),A=d("pb-child");return h(f,{activeDescendant:a,children:Z(Ve,{children:[h(n,{header:!0,text:"Item 1",id:e,children:h(c,{children:"content"})}),h(n,{header:!0,expanded:!0,text:"Item 2",id:a,ariaSelected:!0,focus:!0,children:Z(I,{children:[h(n,{level:1,text:"Child 1",id:x}),h(n,{level:1,expanded:!0,text:"Child 2",id:u,children:Z(I,{children:[h(n,{level:2,text:"Child 2.1",id:p}),h(n,{level:2,text:"Child 2.2",id:v})]})}),h(n,{level:1,text:"Child 3",id:b,children:h(I,{children:h(n,{level:2,text:"Child 3.1",id:g})})}),h(n,{level:1,text:"Child 4",id:A})]})}),h(n,{header:!0,text:"Item 3",id:i,children:h(c,{children:"content"})}),h(n,{header:!0,text:"Item 4",id:o})]}),...t})};import{Fragment as fe,jsx as m,jsxs as D}from"react/jsx-runtime";var Ue=f.options,qe=f.states,xe={...f.defaultOptions,variant:"normal"},We=[{name:"normal",title:"Normal"},{name:"expand",title:"Expanded"}],Je=[{name:"icon",title:"Item icons"},{name:"disabled",title:"Disabled item"}],E=t=>{let{variant:e,modifiers:a,...i}={...xe,...t},o={},x={folder:"folder",gear:"gear",file:"file",image:"image"};return Object.keys(a||{}).forEach(u=>{switch(u){case"icon":{o.icon=a?.[u]?x:void 0;break}case"disabled":o.disabled=!!a?.[u]}}),e==="expand"?m(fe,{children:D(ue,{style:{width:"300px"},...i,children:[m(n,{icon:o.icon?.gear,header:!0,text:"Item 1",children:m(c,{children:"content"})}),m(n,{icon:o.icon?.folder,selected:!0,header:!0,expanded:!0,text:"Item 2",children:D(I,{children:[m(n,{level:1,text:"Child 1"}),m(n,{level:1,expanded:!0,text:"Child 2",children:D(I,{children:[m(n,{level:2,text:"Child 2.1"}),m(n,{icon:o.icon?.image,level:2,text:"Child 2.2"})]})}),m(n,{disabled:o.disabled,level:1,text:"Child 3",children:m(c,{children:"content"})}),m(n,{level:1,text:"Child 4"})]})}),m(n,{icon:o.icon?.folder,disabled:o.disabled,header:!0,text:"Item 3",children:m(c,{children:"content"})}),m(n,{icon:o.icon?.file,header:!0,text:"Item 4"})]})}):m(fe,{children:D(pe,{style:{width:"300px"},...i,children:[m(n,{icon:o.icon?.gear,header:!0,text:"Item 1",children:m(c,{children:"content"})}),m(n,{icon:o.icon?.folder,header:!0,text:"Item 2",children:m(c,{children:"content"})}),m(n,{icon:o.icon?.folder,disabled:o.disabled,header:!0,text:"Item 3",children:m(c,{children:"content"})}),m(n,{icon:o.icon?.file,header:!0,text:"Item 4"})]})})};E.options=Ue;E.states=qe;E.variants=We;E.defaultOptions=xe;E.modifiers=Je;E.className=f.className;import{Fragment as Qe,jsx as N,jsxs as Xe}from"react/jsx-runtime";var gn=t=>{let e=d("pb-item"),a=d("pb-item"),i=d("pb-item"),o=d("pb-item");return N(f,{activeDescendant:e,children:Xe(Qe,{children:[N(n,{header:!0,expanded:!0,text:"Item 1",id:e,ariaSelected:!0,focus:!0,children:N(c,{children:N("p",{children:"Paragraph content in template."})})}),N(n,{header:!0,text:"Item 2",id:a,children:N(c,{children:"content"})}),N(n,{header:!0,text:"Item 3",id:i,children:N(c,{children:"content"})}),N(n,{header:!0,text:"Item 4",id:o})]}),...t})};export{gn as PanelBarExpandContent};