@progress/kendo-themes-html 14.7.0-dev.6 → 14.7.0-dev.8

package/dist/esm/listbox/demos/listbox.mjs

@@ -1 +1 @@
-var i=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?i(...e):typeof e=="object"?Object.keys(e).map((o,n)=>e[n]||e[o]&&o||null).filter(o=>o!==null).join(" "):e).filter(e=>!!e).join(" ");var B=(t,e)=>i({[`${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"}),g=(t,e)=>{let{valid:o,invalid:n,hover:a,focus:p,checked:c,active:d,selected:f,disabled:x,indeterminate:b,loading:M,empty:h,readonly:C,highlighted:w,...P}=e;return i({"k-valid":o,"k-invalid":n,"k-hover":a,"k-focus":p,"k-checked":c,"k-active":d,"k-selected":f,"k-disabled":x,"k-indeterminate":b&&!c,"k-loading":M,"k-empty":h,"k-readonly":C,"k-highlighted":w},Object.keys(P).reduce((O,T)=>(T.startsWith("k-")?O[T]=P[T]:O[`k-${T}`]=P[T],O),{}))};function Pt(t,e){if(!e)return{};let o=Array.isArray(e)?e:[e];return Object.fromEntries(o.map(n=>[`k-${n}`,!0]))}var s={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},y={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"},G={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},_={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"},l={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 Lt={};function u(t){return Lt[t]=(Lt[t]||0)+1,`k-${t}-${Lt[t]}`}import{Fragment as Le,jsx as Dt}from"react/jsx-runtime";var bt="k-font-icon",ue=[],fe={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[r.undefined,r.base,r.primary,r.secondary,r.tertiary,r.success,r.warning,r.error,r.info]},xe={},j=t=>{let{size:e,themeColor:o,icon:n,rotate:a,flip:p,...c}=t;return n?Dt("span",{...c,className:i(t.className,bt,B(bt,{size:e}),{[`k-i-${n}`]:n,[`k-color-${o}`]:o,[`k-rotate-${a}`]:a,"k-flip-h":p==="h"||p==="both","k-flip-v":p==="v"||p==="both"}),"aria-hidden":"true"}):Dt(Le,{})};j.states=ue;j.options=fe;j.className=bt;j.defaultOptions=xe;var Gt=j;import{Fragment as Ne,jsx as nt}from"react/jsx-runtime";var ht="k-svg-icon",be=[],he={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[r.undefined,r.base,r.primary,r.secondary,r.tertiary,r.success,r.warning,r.error,r.info],variant:[_.outline,_.solid,_.duotone]},Nt={viewBox:"0 0 24 24",variant:_.outline},tt=t=>{let{size:e,themeColor:o,rotate:n,flip:a,viewBox:p=Nt.viewBox,variant:c=Nt.variant,icon:d,...f}=t;if(!d)return nt(Ne,{});if(d==="none")return nt("span",{...f,className:i(t.className,ht,B("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let x=typeof d=="object"&&d.name&&d.name,b=typeof d=="object"?c&&d.variants?.[c]||d.variants?.outline||d.content:void 0;return nt("span",{...f,className:i(t.className,ht,B("k-icon",{size:e}),{[`k-svg-i-${x}`]:x,[`k-color-${o}`]:o,[`k-rotate-${n}`]:n,"k-flip-h":a==="h"||a==="both","k-flip-v":a==="v"||a==="both"}),"aria-hidden":"true",children:nt("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof d=="object"?d.viewBox:p,dangerouslySetInnerHTML:b!==void 0?{__html:b}:void 0,children:d?void 0:t.children})})};tt.states=be;tt.options=he;tt.className=ht;tt.defaultOptions=Nt;var Ct=tt;import*as It from"@progress/kendo-svg-icons";var Ut="icon",Ft="icons";import{useContext as Ie}from"react";import{createContext as Ce}from"react";var $t=Ce({iconsType:"svg"});import{Fragment as Vt,jsx as et}from"react/jsx-runtime";var at="k-icon",ve=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),ke=[],ge={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[r.undefined,r.base,r.primary,r.secondary,r.tertiary,r.success,r.warning,r.error,r.info],variant:[_.outline,_.solid,_.duotone]},rt={viewBox:"0 0 24 24",type:"svg",variant:_.outline},A=t=>{let{iconsType:e}=Ie($t),{size:o,themeColor:n,icon:a,type:p=e||rt.type,rotate:c,flip:d,viewBox:f=rt.viewBox,variant:x=rt.variant,...b}=t;if(!a)return et(Vt,{});if((e||p)==="svg"){if(a==="none")return et(Ct,{...b,className:i(t.className,at),icon:a,size:o,variant:x});let h=It[a]?a:ve(`${a}-icon`);return It[h]?et(Ct,{...b,className:i(t.className,at),icon:It[h],size:o,themeColor:n,rotate:c,flip:d,viewBox:f,variant:x}):et(Vt,{})}return et(Gt,{...b,className:i(t.className,at),icon:a,size:o,themeColor:n,rotate:c,flip:d})};A.states=ke;A.options=ge;A.defaultOptions=rt;A.className=at;A.moduleName=Ut;A.folderName=Ft;var vt="button",Xt=vt;import{Fragment as kt,jsx as D,jsxs as Wt}from"react/jsx-runtime";var ot="k-button",ye=["icon-button"],Me=[l.hover,l.focus,l.active,l.selected,l.disabled,l.generating],Oe={size:[s.undefined,s.xsmall,s.small,s.medium,s.large],rounded:[y.undefined,y.none,y.small,y.medium,y.large,y.full],fillMode:[G.undefined,G.solid,G.flat,G.outline,G.clear,G.link],themeColor:[r.undefined,r.base,r.primary,r.secondary,r.tertiary,r.success,r.warning,r.error,r.info,r.inverse]},gt={showArrow:!1,arrowIconName:"chevron-down"},L=t=>{let{as:e="button",size:o,rounded:n,fillMode:a,themeColor:p,showArrow:c=gt.showArrow,arrowIconName:d=gt.arrowIconName,variant:f,hover:x,focus:b,active:M,selected:h,disabled:C,togglable:w,ariaDisabled:P,icon:O,endIcon:T,iconSize:zt,text:st,iconClassName:wt,className:me,...ce}=t,de=O!=null,pe=t.children!==void 0;return Wt(e,{className:i(me,ot,Pt(ot,f),B(ot,{size:o,rounded:n,fillMode:a,themeColor:p}),g(ot,{hover:x,focus:b,active:M,disabled:C||P,selected:h}),{"k-icon-button":!st&&!pe&&de}),"aria-pressed":w?h?"true":"false":void 0,...ce,"aria-disabled":P?"true":void 0,disabled:C||void 0,children:[typeof O=="string"&&O&&D(A,{className:i(wt,"k-button-icon"),icon:O,size:zt}),O&&typeof O!="string"&&D(kt,{children:O}),st?Wt(kt,{children:[st&&D("span",{className:"k-button-text",children:st}),t.children]}):t.children&&D("span",{className:"k-button-text",children:t.children}),typeof T=="string"&&T&&D(A,{className:i(wt,"k-button-icon"),icon:T,size:zt}),T&&typeof T!="string"&&D(kt,{children:T}),c&&D("span",{className:"k-menu-button-arrow k-button-arrow",children:D(A,{icon:d})})]})};L.states=Me;L.options=Oe;L.variants=ye;L.className=ot;L.defaultOptions=gt;L.moduleName=vt;L.folderName=Xt;import{jsx as Ae}from"react/jsx-runtime";var qt=t=>Ae(L,{icon:"folder",...t,"aria-label":t["aria-label"]||"Folder",children:void 0});import{jsx as Se}from"react/jsx-runtime";var Jt=t=>Se(L,{icon:"folder",children:"Button",...t});import{jsx as Ee}from"react/jsx-runtime";var Qt=t=>Ee(L,{children:"Button",...t});import{jsx as yt}from"react/jsx-runtime";var Te=L.options,Ke=L.states,Be={...L.defaultOptions,variant:"text"},Re=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],_e=[],X=t=>{let{variant:e,...o}=t;switch(e){case"icon-only":return yt(qt,{...o,icon:"star"});case"icon-and-text":return yt(Jt,{...o,icon:"star",children:"Button"});default:return yt(Qt,{...o,children:"Button"})}};X.options=Te;X.states=Ke;X.variants=Re;X.defaultOptions=Be;X.modifiers=_e;X.className=L.className;import At from"react";import{jsx as Yt}from"react/jsx-runtime";var He="k-list-group-sticky-header",Mt=t=>Yt("div",{className:i(He,t.className),children:Yt("div",{className:"k-list-header-text",children:t.children})});import{jsx as we}from"react/jsx-runtime";var ze="k-no-data",Ot=t=>{let{live:e,...o}=t;return we("span",{...o,className:i(ze,t.className),"aria-live":e?"polite":void 0,children:t.children})};var U="list",W=U;import{jsx as Zt,jsxs as jt}from"react/jsx-runtime";var St="k-list",Pe=[],De={size:[s.undefined,s.small,s.medium,s.large]},Ge={},I=t=>{let{size:e,virtualization:o,children:n,header:a,selectAll:p,optionLabel:c,customValue:d,noData:f,screenReaders:x,...b}=t,h=At.Children.toArray(n)[0],C=h?.props?.children?At.Children.count(h.props.children):At.Children.count(n);return jt("div",{...b,className:i(t.className,St,B(St,{size:e}),{"k-virtual-list":o}),children:[c,p,d,a&&Zt(Mt,{children:a}),n||(f!==void 0?f:Zt(Ot,{live:!0,children:"No data found."})),x&&n&&jt(Ot,{className:"k-sr-only",live:!0,children:[C," items found."]})]})};I.states=Pe;I.options=De;I.className=St;I.defaultOptions=Ge;I.moduleName=U;I.folderName=W;import{jsx as Ve}from"react/jsx-runtime";var te="k-list-container",Ue=[],Fe={},$e={},q=t=>{let{...e}=t;return Ve("div",{...e,className:i(t.className,te),children:t.children})};q.states=Ue;q.options=Fe;q.className=te;q.defaultOptions=$e;q.moduleName=U;q.folderName=W;var F="checkbox",J=F;import{jsx as ee}from"react/jsx-runtime";var lt="k-checkbox",Xe=[l.hover,l.focus,l.valid,l.invalid,l.required,l.disabled,l.checked,l.indeterminate],We={size:[s.undefined,s.small,s.medium,s.large],rounded:[y.undefined,y.none,y.small,y.medium,y.large,y.full]},qe={},S=t=>{let{id:e,checked:o,indeterminate:n,hover:a,focus:p,disabled:c,invalid:d,valid:f,required:x,size:b,rounded:M,wrapperRole:h,...C}=t;return ee("span",{className:"k-checkbox-wrap",role:h,children:ee("input",{...C,id:e,type:"checkbox",defaultChecked:o,required:x,disabled:c||void 0,"aria-invalid":d?"true":void 0,className:i(t.className,lt,B(lt,{size:b,rounded:M}),g(lt,{hover:a,focus:p,disabled:c,invalid:d,valid:f,indeterminate:n,checked:o}))})})};S.states=Xe;S.options=We;S.className=lt;S.defaultOptions=qe;S.moduleName=F;S.folderName=J;var R=S;import{jsx as Ye}from"react/jsx-runtime";var oe="k-checkbox-list",Je=[],Qe={},ie={layout:"vertical"},v=t=>{let{layout:e=ie.layout,...o}=t;return Ye("ul",{...o,className:i(t.className,oe,{[`k-list-${e}`]:e}),children:t.children})};v.states=Je;v.options=Qe;v.className=oe;v.defaultOptions=ie;v.moduleName=F;v.folderName=J;import{jsx as eo}from"react/jsx-runtime";var se="k-checkbox-list-item",Ze=[],je={},to={},k=t=>{let{...e}=t;return eo("li",{...e,className:i(t.className,se),children:t.children})};k.states=Ze;k.options=je;k.className=se;k.defaultOptions=to;k.moduleName=F;k.folderName=J;import{Fragment as oo,jsx as ne,jsxs as io}from"react/jsx-runtime";var H=({children:t="Label",id:e="cb-label-after",...o})=>io(oo,{children:[ne(R,{id:e,...o}),ne("label",{className:"k-checkbox-label",htmlFor:e,children:t})]});import{Fragment as _s,jsx as Rs,jsxs as Hs}from"react/jsx-runtime";import{Fragment as Gs,jsx as Ds,jsxs as Us}from"react/jsx-runtime";import{Fragment as Ws,jsx as Xs,jsxs as qs}from"react/jsx-runtime";import{jsx as Zs}from"react/jsx-runtime";import{jsx as on}from"react/jsx-runtime";import{jsx as rn}from"react/jsx-runtime";import{jsx as K,jsxs as ae}from"react/jsx-runtime";var so=v.options,no=v.states,ao={...v.defaultOptions,variant:"vertical"},ro=[{name:"vertical",title:"Vertical"},{name:"horizontal",title:"Horizontal"}],lo=[],Q=t=>{let{variant:e,...o}=t;return e==="horizontal"?ae(v,{layout:"horizontal",...o,children:[K(k,{children:K(H,{id:u("cb"),defaultChecked:!0,children:"Label"})}),K(k,{children:K(H,{id:u("cb"),children:"Label"})}),K(k,{children:K(H,{id:u("cb"),children:"Label"})})]}):ae(v,{...o,children:[K(k,{children:K(H,{id:u("cb"),defaultChecked:!0,children:"Label"})}),K(k,{children:K(H,{id:u("cb"),children:"Label"})}),K(k,{children:K(H,{id:u("cb"),children:"Label"})})]})};Q.options=so;Q.states=no;Q.variants=ro;Q.defaultOptions=ao;Q.modifiers=lo;Q.className=v.className;import{jsx as xo}from"react/jsx-runtime";var mo=R.options,co=R.states,po=R.defaultOptions,uo=[],fo=[],Y=t=>xo(H,{id:u("checkbox"),...t,defaultChecked:!0,children:"Label"});Y.options=mo;Y.states=co;Y.variants=uo;Y.defaultOptions=po;Y.modifiers=fo;Y.className=R.className;import{jsx as Z,jsxs as No}from"react/jsx-runtime";var Et="k-list-item",Lo=[l.hover,l.focus,l.selected,l.disabled],bo={},ho={},m=t=>{let{text:e,iconName:o,iconClassName:n,showCheckbox:a,checked:p,hover:c,focus:d,selected:f,disabled:x,actions:b,description:M,id:h,...C}=t,w=e||t.children,P=e||(typeof w=="string"?w:void 0);return No("li",{...C,id:h,role:"option",tabIndex:d?0:-1,"aria-selected":f?"true":"false","aria-disabled":x?"true":void 0,className:i(t.className,Et,g(Et,{hover:c,focus:d,disabled:x,selected:f})),children:[a&&Z(S,{checked:p,disabled:x,"aria-label":P,tabIndex:-1}),o&&Z("span",{className:"k-list-item-icon-wrapper",children:Z(A,{icon:o,className:i("k-list-item-icon",n)})}),Z("span",{className:"k-list-item-text",children:w}),b&&Z("div",{className:"k-list-item-actions",children:b}),M&&Z("span",{className:"k-list-item-description",children:M})]})};m.states=Lo;m.options=bo;m.className=Et;m.defaultOptions=ho;m.moduleName=U;m.folderName=W;import{jsx as Io}from"react/jsx-runtime";var Co="k-list-ul",mt=t=>{let{children:e,role:o,id:n,...a}=t;return Io("ul",{...a,id:n,role:o,className:i(Co,t.className),children:e})};import{jsx as Tt,jsxs as ko}from"react/jsx-runtime";var vo="k-list-content",z=t=>{let{virtualization:e,grouping:o,"aria-label":n,"aria-labelledby":a,listboxId:p,...c}=t;return ko("div",{...c,className:i(vo,t.className),role:o?"listbox":void 0,id:o?p:void 0,"aria-label":o?n:void 0,"aria-labelledby":o?a:void 0,children:[o?t.children:Tt(mt,{role:"listbox",id:p,"aria-label":n,"aria-labelledby":a,children:t.children}),e&&Tt("div",{className:"k-height-container",children:Tt("div",{})})]})};import{jsx as Kt,jsxs as Oo}from"react/jsx-runtime";var ct="k-list-sticky-header",go=[l.hover,l.focus,l.selected],yo={},Mo={},dt=t=>{let{label:e="Select all",showCheckbox:o=!0,checked:n,indeterminate:a,hover:p,focus:c,selected:d,...f}=t;return Kt("div",{...f,className:i(ct,t.className),children:Oo("div",{className:i(`${ct}-item`,g(`${ct}-item`,{hover:p,focus:c,selected:d})),"aria-label":e,...!o&&{tabIndex:0,"aria-selected":d?"true":"false"},children:[o&&Kt(S,{checked:n,indeterminate:a,"aria-label":e}),Kt("span",{className:"k-list-item-text",children:e})]})})};dt.states=go;dt.options=yo;dt.className=ct;dt.defaultOptions=Mo;import{Fragment as ea,jsx as ta,jsxs as oa}from"react/jsx-runtime";import{jsx as ra,jsxs as la}from"react/jsx-runtime";import{jsx as To}from"react/jsx-runtime";var Bt="k-list-optionlabel",Ao=[l.hover,l.focus,l.selected,l.disabled],So={},Eo={},pt=t=>{let{text:e,hover:o,focus:n,selected:a,disabled:p,...c}=t;return To("div",{...c,className:i(Bt,g(Bt,{hover:o,focus:n,selected:a,disabled:p})),children:e})};pt.states=Ao;pt.options=So;pt.className=Bt;pt.defaultOptions=Eo;import{jsx as _o}from"react/jsx-runtime";var Rt="k-list-custom-value",Ko=[l.hover,l.focus,l.selected,l.disabled],Bo={},Ro={},ut=t=>{let{text:e,hover:o,focus:n,selected:a,disabled:p,...c}=t;return _o("div",{...c,className:i(Rt,g(Rt,{hover:o,focus:n,selected:a,disabled:p})),children:e})};ut.states=Ko;ut.options=Bo;ut.className=Rt;ut.defaultOptions=Ro;import{Fragment as Ca,jsx as Na,jsxs as Ia}from"react/jsx-runtime";import{Fragment as Oa,jsx as Ma,jsxs as Aa}from"react/jsx-runtime";import{Fragment as _a,jsx as Ba,jsxs as Ra}from"react/jsx-runtime";import{Fragment as Ua,jsx as Da,jsxs as Ga}from"react/jsx-runtime";import{jsx as Xa}from"react/jsx-runtime";import{Fragment as Za,jsx as Ya,jsxs as ja}from"react/jsx-runtime";import{Fragment as nr,jsx as sr,jsxs as ar}from"react/jsx-runtime";var _t="listbox",re=_t;import{jsx as it,jsxs as Po}from"react/jsx-runtime";var Ht="k-listbox",zo=[l.disabled],wo={size:[s.undefined,s.small,s.medium,s.large]},le={actionsPosition:"left"},E=t=>{let{size:e,disabled:o,children:n,actionsPosition:a=le.actionsPosition,actions:p,dir:c,"aria-label":d,multiselectable:f,id:x,...b}=t,M=x?`${x}-list`:void 0,h={left:"Move left",right:"Move right",to:"Move all right",from:"Move all left",up:"Move up",down:"Move down",x:"Remove"};return Po("div",{...b,dir:c,className:i(t.className,Ht,g(Ht,{disabled:o}),{[`k-listbox-actions-${a}`]:a}),children:[p&&it("div",{className:"k-listbox-actions",role:"toolbar","aria-label":"ListBox actions","aria-controls":M,children:p.map(C=>it(L,{icon:{left:c!=="rtl"?"chevron-left":"chevron-right",right:c!=="rtl"?"chevron-right":"chevron-left",to:c!=="rtl"?"chevron-double-right":"chevron-double-left",from:c!=="rtl"?"chevron-double-left":"chevron-double-right",up:"chevron-up",down:"chevron-down",x:"x"}[C],size:e,"aria-label":h[C]||C},C))}),it("div",{className:i("k-list-scroller","k-selectable"),children:it(I,{size:e,children:it(z,{"aria-label":d,"aria-multiselectable":f,listboxId:M,children:n})})})]})};E.states=zo;E.options=wo;E.className=Ht;E.defaultOptions=le;E.moduleName=_t;E.folderName=re;import{jsx as $}from"react/jsx-runtime";var ft=t=>{let e=u("listbox"),o=u("lb-item"),n=u("lb-item"),a=u("lb-item"),p=u("lb-item"),c=u("lb-item"),d=u("lb-item");return $(E,{id:e,"aria-label":"Available items",actions:["up","down","left","right","to","from","x"],children:[$(m,{id:o,focus:!0,children:"List item 1"},"ListItem1"),$(m,{id:n,selected:!0,children:"List item 2"},"ListItem2"),$(m,{id:a,children:"List item 3"},"ListItem3"),$(m,{id:p,children:"List item 4"},"ListItem4"),$(m,{id:c,children:"List item 5"},"ListItem5"),$(m,{id:d,children:"List item 6"},"ListItem6")],...t})};import{jsx as N,jsxs as xt}from"react/jsx-runtime";var Do=E.options,Go=E.states,Uo={...E.defaultOptions,variant:"single"},Fo=[{name:"single",title:"Single"},{name:"multiple",title:"Multiple"}],$o=[],V=t=>{let{variant:e,...o}={...t};return e==="multiple"?xt("div",{className:"k-d-flex",children:[xt(ft,{...o,style:{height:"300px",width:"200px"},className:"k-pr-2",actionsPosition:"right",actions:["up","down","left","right","to","from","x"],children:[N(m,{selected:!0,children:"List item"}),N(m,{children:"List item"}),N(m,{children:"List item"}),N(m,{children:"List item"}),N(m,{children:"List item"}),N(m,{children:"List item"}),N(m,{children:"List item"})]}),xt(ft,{...t,style:{height:"300px",width:"200px"},actionsPosition:"right",actions:["up","down","x"],children:[N(m,{children:"List item"}),N(m,{selected:!0,children:"List item"})]})]}):xt(ft,{...o,style:{height:"300px",width:"200px"},actionsPosition:"right",actions:["up","down","left","right","to","from","x"],children:[N(m,{selected:!0,children:"List item"}),N(m,{children:"List item"}),N(m,{children:"List item"}),N(m,{children:"List item"}),N(m,{children:"List item"}),N(m,{children:"List item"}),N(m,{children:"List item"})]})};V.options=Do;V.states=Go;V.variants=Fo;V.defaultOptions=Uo;V.modifiers=$o;V.className=E.className;var Wr=V;export{V as ListboxDemo,Wr as default};
+var i=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?i(...e):typeof e=="object"?Object.keys(e).map((o,n)=>e[n]||e[o]&&o||null).filter(o=>o!==null).join(" "):e).filter(e=>!!e).join(" ");var B=(t,e)=>i({[`${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"}),y=(t,e)=>{let{valid:o,invalid:n,hover:a,focus:p,checked:d,active:c,selected:u,disabled:b,indeterminate:L,loading:M,empty:N,readonly:S,highlighted:z,..._}=e;return i({"k-valid":o,"k-invalid":n,"k-hover":a,"k-focus":p,"k-checked":d,"k-active":c,"k-selected":u,"k-disabled":b,"k-indeterminate":L&&!d,"k-loading":M,"k-empty":N,"k-readonly":S,"k-highlighted":z},Object.keys(_).reduce((C,h)=>(h.startsWith("k-")?C[h]=_[h]:C[`k-${h}`]=_[h],C),{}))};function wt(t,e){if(!e)return{};let o=Array.isArray(e)?e:[e];return Object.fromEntries(o.map(n=>[`k-${n}`,!0]))}var s={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},O={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"},G={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},H={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"},l={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 bt={};function f(t){return bt[t]=(bt[t]||0)+1,`k-${t}-${bt[t]}`}import{Fragment as be,jsx as Dt}from"react/jsx-runtime";var Lt="k-font-icon",ue=[],fe={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[r.undefined,r.base,r.primary,r.secondary,r.tertiary,r.success,r.warning,r.error,r.info]},xe={},tt=t=>{let{size:e,themeColor:o,icon:n,rotate:a,flip:p,...d}=t;return n?Dt("span",{...d,className:i(t.className,Lt,B(Lt,{size:e}),{[`k-i-${n}`]:n,[`k-color-${o}`]:o,[`k-rotate-${a}`]:a,"k-flip-h":p==="h"||p==="both","k-flip-v":p==="v"||p==="both"}),"aria-hidden":"true"}):Dt(be,{})};tt.states=ue;tt.options=fe;tt.className=Lt;tt.defaultOptions=xe;var Gt=tt;import{Fragment as Ne,jsx as at}from"react/jsx-runtime";var ht="k-svg-icon",Le=[],he={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[r.undefined,r.base,r.primary,r.secondary,r.tertiary,r.success,r.warning,r.error,r.info],variant:[H.outline,H.solid,H.duotone]},Nt={viewBox:"0 0 24 24",variant:H.outline},et=t=>{let{size:e,themeColor:o,rotate:n,flip:a,viewBox:p=Nt.viewBox,variant:d=Nt.variant,icon:c,...u}=t;if(!c)return at(Ne,{});if(c==="none")return at("span",{...u,className:i(t.className,ht,B("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let b=typeof c=="object"&&c.name&&c.name,L=typeof c=="object"?d&&c.variants?.[d]||c.variants?.outline||c.content:void 0;return at("span",{...u,className:i(t.className,ht,B("k-icon",{size:e}),{[`k-svg-i-${b}`]:b,[`k-color-${o}`]:o,[`k-rotate-${n}`]:n,"k-flip-h":a==="h"||a==="both","k-flip-v":a==="v"||a==="both"}),"aria-hidden":"true",children:at("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof c=="object"?c.viewBox:p,dangerouslySetInnerHTML:L!==void 0?{__html:L}:void 0,children:c?void 0:t.children})})};et.states=Le;et.options=he;et.className=ht;et.defaultOptions=Nt;var Ct=et;import*as kt from"@progress/kendo-svg-icons";var Ut="icon",Ft="icons";import{useContext as ke}from"react";import{createContext as Ce}from"react";var $t=Ce({iconsType:"svg"});import{Fragment as Vt,jsx as ot}from"react/jsx-runtime";var rt="k-icon",ve=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),Ie=[],ge={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[r.undefined,r.base,r.primary,r.secondary,r.tertiary,r.success,r.warning,r.error,r.info],variant:[H.outline,H.solid,H.duotone]},lt={viewBox:"0 0 24 24",type:"svg",variant:H.outline},A=t=>{let{iconsType:e}=ke($t),{size:o,themeColor:n,icon:a,type:p=e||lt.type,rotate:d,flip:c,viewBox:u=lt.viewBox,variant:b=lt.variant,...L}=t;if(!a)return ot(Vt,{});if((e||p)==="svg"){if(a==="none")return ot(Ct,{...L,className:i(t.className,rt),icon:a,size:o,variant:b});let N=kt[a]?a:ve(`${a}-icon`);return kt[N]?ot(Ct,{...L,className:i(t.className,rt),icon:kt[N],size:o,themeColor:n,rotate:d,flip:c,viewBox:u,variant:b}):ot(Vt,{})}return ot(Gt,{...L,className:i(t.className,rt),icon:a,size:o,themeColor:n,rotate:d,flip:c})};A.states=Ie;A.options=ge;A.defaultOptions=lt;A.className=rt;A.moduleName=Ut;A.folderName=Ft;var vt="button",Xt=vt;import{Fragment as It,jsx as D,jsxs as Wt}from"react/jsx-runtime";var it="k-button",ye=["icon-button"],Oe=[l.hover,l.focus,l.active,l.selected,l.disabled,l.generating],Me={size:[s.undefined,s.xsmall,s.small,s.medium,s.large],rounded:[O.undefined,O.none,O.small,O.medium,O.large,O.full],fillMode:[G.undefined,G.solid,G.flat,G.outline,G.clear,G.link],themeColor:[r.undefined,r.base,r.primary,r.secondary,r.tertiary,r.success,r.warning,r.error,r.info,r.inverse]},gt={showArrow:!1,arrowIconName:"chevron-down"},x=t=>{let{as:e="button",size:o,rounded:n,fillMode:a,themeColor:p,showArrow:d=gt.showArrow,arrowIconName:c=gt.arrowIconName,variant:u,hover:b,focus:L,active:M,selected:N,disabled:S,togglable:z,ariaDisabled:_,icon:C,endIcon:h,iconSize:zt,text:nt,iconClassName:Pt,className:me,...ce}=t,de=C!=null,pe=t.children!==void 0;return Wt(e,{className:i(me,it,wt(it,u),B(it,{size:o,rounded:n,fillMode:a,themeColor:p}),y(it,{hover:b,focus:L,active:M,disabled:S||_,selected:N}),{"k-icon-button":!nt&&!pe&&de}),"aria-pressed":z?N?"true":"false":void 0,...ce,"aria-disabled":_?"true":void 0,disabled:S||void 0,children:[typeof C=="string"&&C&&D(A,{className:i(Pt,"k-button-icon"),icon:C,size:zt}),C&&typeof C!="string"&&D(It,{children:C}),nt?Wt(It,{children:[nt&&D("span",{className:"k-button-text",children:nt}),t.children]}):t.children&&D("span",{className:"k-button-text",children:t.children}),typeof h=="string"&&h&&D(A,{className:i(Pt,"k-button-icon"),icon:h,size:zt}),h&&typeof h!="string"&&D(It,{children:h}),d&&D("span",{className:"k-menu-button-arrow k-button-arrow",children:D(A,{icon:c})})]})};x.states=Oe;x.options=Me;x.variants=ye;x.className=it;x.defaultOptions=gt;x.moduleName=vt;x.folderName=Xt;import{jsx as Se}from"react/jsx-runtime";var qt=t=>Se(x,{icon:"folder",...t,"aria-label":t["aria-label"]||"Folder",children:void 0});import{jsx as Ae}from"react/jsx-runtime";var Jt=t=>Ae(x,{icon:"folder",children:"Button",...t});import{jsx as Ee}from"react/jsx-runtime";var Qt=t=>Ee(x,{children:"Button",...t});import{jsx as yt}from"react/jsx-runtime";var Te=x.options,Ke=x.states,Be={...x.defaultOptions,variant:"text"},Re=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],_e=[],X=t=>{let{variant:e,...o}=t;switch(e){case"icon-only":return yt(qt,{...o,icon:"star"});case"icon-and-text":return yt(Jt,{...o,icon:"star",children:"Button"});default:return yt(Qt,{...o,children:"Button"})}};X.options=Te;X.states=Ke;X.variants=Re;X.defaultOptions=Be;X.modifiers=_e;X.className=x.className;import St from"react";import{jsx as Yt}from"react/jsx-runtime";var He="k-list-group-sticky-header",Ot=t=>Yt("div",{className:i(He,t.className),children:Yt("div",{className:"k-list-header-text",children:t.children})});import{jsx as Pe}from"react/jsx-runtime";var ze="k-no-data",Mt=t=>{let{live:e,...o}=t;return Pe("span",{...o,className:i(ze,t.className),"aria-live":e?"polite":void 0,children:t.children})};var U="list",W=U;import{jsx as Zt,jsxs as jt}from"react/jsx-runtime";var At="k-list",we=[],De={size:[s.undefined,s.small,s.medium,s.large]},Ge={},v=t=>{let{size:e,virtualization:o,children:n,header:a,selectAll:p,optionLabel:d,customValue:c,noData:u,screenReaders:b,...L}=t,N=St.Children.toArray(n)[0],S=N?.props?.children?St.Children.count(N.props.children):St.Children.count(n);return jt("div",{...L,className:i(t.className,At,B(At,{size:e}),{"k-virtual-list":o}),children:[d,p,c,a&&Zt(Ot,{children:a}),n||(u!==void 0?u:Zt(Mt,{live:!0,children:"No data found."})),b&&n&&jt(Mt,{className:"k-sr-only",live:!0,children:[S," items found."]})]})};v.states=we;v.options=De;v.className=At;v.defaultOptions=Ge;v.moduleName=U;v.folderName=W;import{jsx as Ve}from"react/jsx-runtime";var te="k-list-container",Ue=[],Fe={},$e={},q=t=>{let{...e}=t;return Ve("div",{...e,className:i(t.className,te),children:t.children})};q.states=Ue;q.options=Fe;q.className=te;q.defaultOptions=$e;q.moduleName=U;q.folderName=W;var F="checkbox",J=F;import{jsx as ee}from"react/jsx-runtime";var mt="k-checkbox",Xe=[l.hover,l.focus,l.valid,l.invalid,l.required,l.disabled,l.checked,l.indeterminate],We={size:[s.undefined,s.small,s.medium,s.large],rounded:[O.undefined,O.none,O.small,O.medium,O.large,O.full]},qe={},E=t=>{let{id:e,checked:o,indeterminate:n,hover:a,focus:p,disabled:d,invalid:c,valid:u,required:b,size:L,rounded:M,wrapperRole:N,...S}=t;return ee("span",{className:"k-checkbox-wrap",role:N,children:ee("input",{...S,id:e,type:"checkbox",defaultChecked:o,required:b,disabled:d||void 0,"aria-invalid":c?"true":void 0,className:i(t.className,mt,B(mt,{size:L,rounded:M}),y(mt,{hover:a,focus:p,disabled:d,invalid:c,valid:u,indeterminate:n,checked:o}))})})};E.states=Xe;E.options=We;E.className=mt;E.defaultOptions=qe;E.moduleName=F;E.folderName=J;var R=E;import{jsx as Ye}from"react/jsx-runtime";var oe="k-checkbox-list",Je=[],Qe={},ie={layout:"vertical"},I=t=>{let{layout:e=ie.layout,...o}=t;return Ye("ul",{...o,className:i(t.className,oe,{[`k-list-${e}`]:e}),children:t.children})};I.states=Je;I.options=Qe;I.className=oe;I.defaultOptions=ie;I.moduleName=F;I.folderName=J;import{jsx as eo}from"react/jsx-runtime";var se="k-checkbox-list-item",Ze=[],je={},to={},g=t=>{let{...e}=t;return eo("li",{...e,className:i(t.className,se),children:t.children})};g.states=Ze;g.options=je;g.className=se;g.defaultOptions=to;g.moduleName=F;g.folderName=J;import{Fragment as oo,jsx as ne,jsxs as io}from"react/jsx-runtime";var P=({children:t="Label",id:e="cb-label-after",...o})=>io(oo,{children:[ne(R,{id:e,...o}),ne("label",{className:"k-checkbox-label",htmlFor:e,children:t})]});import{Fragment as _s,jsx as Rs,jsxs as Hs}from"react/jsx-runtime";import{Fragment as Gs,jsx as Ds,jsxs as Us}from"react/jsx-runtime";import{Fragment as Ws,jsx as Xs,jsxs as qs}from"react/jsx-runtime";import{jsx as Zs}from"react/jsx-runtime";import{jsx as on}from"react/jsx-runtime";import{jsx as rn}from"react/jsx-runtime";import{jsx as K,jsxs as ae}from"react/jsx-runtime";var so=I.options,no=I.states,ao={...I.defaultOptions,variant:"vertical"},ro=[{name:"vertical",title:"Vertical"},{name:"horizontal",title:"Horizontal"}],lo=[],Q=t=>{let{variant:e,...o}=t;return e==="horizontal"?ae(I,{layout:"horizontal",...o,children:[K(g,{children:K(P,{id:f("cb"),defaultChecked:!0,children:"Label"})}),K(g,{children:K(P,{id:f("cb"),children:"Label"})}),K(g,{children:K(P,{id:f("cb"),children:"Label"})})]}):ae(I,{...o,children:[K(g,{children:K(P,{id:f("cb"),defaultChecked:!0,children:"Label"})}),K(g,{children:K(P,{id:f("cb"),children:"Label"})}),K(g,{children:K(P,{id:f("cb"),children:"Label"})})]})};Q.options=so;Q.states=no;Q.variants=ro;Q.defaultOptions=ao;Q.modifiers=lo;Q.className=I.className;import{jsx as xo}from"react/jsx-runtime";var mo=R.options,co=R.states,po=R.defaultOptions,uo=[],fo=[],Y=t=>xo(P,{id:f("checkbox"),...t,defaultChecked:!0,children:"Label"});Y.options=mo;Y.states=co;Y.variants=uo;Y.defaultOptions=po;Y.modifiers=fo;Y.className=R.className;import{jsx as Z,jsxs as No}from"react/jsx-runtime";var Et="k-list-item",bo=[l.hover,l.focus,l.selected,l.disabled],Lo={},ho={},m=t=>{let{text:e,iconName:o,iconClassName:n,showCheckbox:a,checked:p,hover:d,focus:c,selected:u,disabled:b,actions:L,description:M,id:N,...S}=t,z=e||t.children,_=e||(typeof z=="string"?z:void 0);return No("li",{...S,id:N,role:"option",tabIndex:c?0:-1,"aria-selected":u?"true":"false","aria-disabled":b?"true":void 0,className:i(t.className,Et,y(Et,{hover:d,focus:c,disabled:b,selected:u})),children:[a&&Z(E,{checked:p,disabled:b,"aria-label":_,tabIndex:-1}),o&&Z("span",{className:"k-list-item-icon-wrapper",children:Z(A,{icon:o,className:i("k-list-item-icon",n)})}),Z("span",{className:"k-list-item-text",children:z}),L&&Z("div",{className:"k-list-item-actions",children:L}),M&&Z("span",{className:"k-list-item-description",children:M})]})};m.states=bo;m.options=Lo;m.className=Et;m.defaultOptions=ho;m.moduleName=U;m.folderName=W;import{jsx as ko}from"react/jsx-runtime";var Co="k-list-ul",ct=t=>{let{children:e,role:o,id:n,...a}=t;return ko("ul",{...a,id:n,role:o,className:i(Co,t.className),children:e})};import{jsx as Tt,jsxs as Io}from"react/jsx-runtime";var vo="k-list-content",w=t=>{let{virtualization:e,grouping:o,"aria-label":n,"aria-labelledby":a,listboxId:p,...d}=t;return Io("div",{...d,className:i(vo,t.className),role:o?"listbox":void 0,id:o?p:void 0,"aria-label":o?n:void 0,"aria-labelledby":o?a:void 0,children:[o?t.children:Tt(ct,{role:"listbox",id:p,"aria-label":n,"aria-labelledby":a,children:t.children}),e&&Tt("div",{className:"k-height-container",children:Tt("div",{})})]})};import{jsx as Kt,jsxs as Mo}from"react/jsx-runtime";var dt="k-list-sticky-header",go=[l.hover,l.focus,l.selected],yo={},Oo={},pt=t=>{let{label:e="Select all",showCheckbox:o=!0,checked:n,indeterminate:a,hover:p,focus:d,selected:c,...u}=t;return Kt("div",{...u,className:i(dt,t.className),children:Mo("div",{className:i(`${dt}-item`,y(`${dt}-item`,{hover:p,focus:d,selected:c})),"aria-label":e,...!o&&{tabIndex:0,"aria-selected":c?"true":"false"},children:[o&&Kt(E,{checked:n,indeterminate:a,"aria-label":e}),Kt("span",{className:"k-list-item-text",children:e})]})})};pt.states=go;pt.options=yo;pt.className=dt;pt.defaultOptions=Oo;import{Fragment as ea,jsx as ta,jsxs as oa}from"react/jsx-runtime";import{jsx as ra,jsxs as la}from"react/jsx-runtime";import{jsx as To}from"react/jsx-runtime";var Bt="k-list-optionlabel",So=[l.hover,l.focus,l.selected,l.disabled],Ao={},Eo={},ut=t=>{let{text:e,hover:o,focus:n,selected:a,disabled:p,...d}=t;return To("div",{...d,className:i(Bt,y(Bt,{hover:o,focus:n,selected:a,disabled:p})),children:e})};ut.states=So;ut.options=Ao;ut.className=Bt;ut.defaultOptions=Eo;import{jsx as _o}from"react/jsx-runtime";var Rt="k-list-custom-value",Ko=[l.hover,l.focus,l.selected,l.disabled],Bo={},Ro={},ft=t=>{let{text:e,hover:o,focus:n,selected:a,disabled:p,...d}=t;return _o("div",{...d,className:i(Rt,y(Rt,{hover:o,focus:n,selected:a,disabled:p})),children:e})};ft.states=Ko;ft.options=Bo;ft.className=Rt;ft.defaultOptions=Ro;import{Fragment as Ca,jsx as Na,jsxs as ka}from"react/jsx-runtime";import{Fragment as Ma,jsx as Oa,jsxs as Sa}from"react/jsx-runtime";import{Fragment as _a,jsx as Ba,jsxs as Ra}from"react/jsx-runtime";import{Fragment as Ua,jsx as Da,jsxs as Ga}from"react/jsx-runtime";import{jsx as Xa}from"react/jsx-runtime";import{Fragment as Za,jsx as Ya,jsxs as ja}from"react/jsx-runtime";import{Fragment as nr,jsx as sr,jsxs as ar}from"react/jsx-runtime";var _t="listbox",re=_t;import{jsx as j,jsxs as wo}from"react/jsx-runtime";var Ht="k-listbox",zo=[l.disabled],Po={size:[s.undefined,s.small,s.medium,s.large]},le={actionsPosition:"left"},T=t=>{let{size:e,disabled:o,children:n,actionsPosition:a=le.actionsPosition,actions:p,actionsScrollable:d,actionsScrollingPosition:c,dir:u,"aria-label":b,multiselectable:L,id:M,...N}=t,S=M?`${M}-list`:void 0,z={left:"Move left",right:"Move right",to:"Move all right",from:"Move all left",up:"Move up",down:"Move down",x:"Remove"},_={left:u!=="rtl"?"chevron-left":"chevron-right",right:u!=="rtl"?"chevron-right":"chevron-left",to:u!=="rtl"?"chevron-double-right":"chevron-double-left",from:u!=="rtl"?"chevron-double-left":"chevron-double-right",up:"chevron-up",down:"chevron-down",x:"x"},C=p?.map(h=>j(x,{icon:_[h],size:e,"aria-label":z[h]||h},h));return wo("div",{...N,dir:u,className:i(t.className,Ht,y(Ht,{disabled:o}),{[`k-listbox-actions-${a}`]:a}),children:[p&&j("div",{className:i("k-listbox-actions",{"k-listbox-actions-scrollable":d,"k-listbox-actions-scrollable-start":d&&c==="start","k-listbox-actions-scrollable-end":d&&c==="end"}),role:"toolbar","aria-label":"ListBox actions","aria-controls":S,children:d?j("div",{className:"k-listbox-actions-items",children:C}):C}),j("div",{className:i("k-list-scroller","k-selectable"),children:j(v,{size:e,children:j(w,{"aria-label":b,"aria-multiselectable":L,listboxId:S,children:n})})})]})};T.states=zo;T.options=Po;T.className=Ht;T.defaultOptions=le;T.moduleName=_t;T.folderName=re;import{jsx as Hr}from"react/jsx-runtime";import{jsx as $}from"react/jsx-runtime";var st=t=>{let e=f("listbox"),o=f("lb-item"),n=f("lb-item"),a=f("lb-item"),p=f("lb-item"),d=f("lb-item"),c=f("lb-item");return $(T,{id:e,"aria-label":"Available items",actions:["up","down","left","right","to","from","x"],children:[$(m,{id:o,focus:!0,children:"List item 1"},"ListItem1"),$(m,{id:n,selected:!0,children:"List item 2"},"ListItem2"),$(m,{id:a,children:"List item 3"},"ListItem3"),$(m,{id:p,children:"List item 4"},"ListItem4"),$(m,{id:d,children:"List item 5"},"ListItem5"),$(m,{id:c,children:"List item 6"},"ListItem6")],...t})};import{jsx as k,jsxs as xt}from"react/jsx-runtime";var Do=T.options,Go=T.states,Uo={...T.defaultOptions,variant:"single"},Fo=[{name:"single",title:"Single"},{name:"multiple",title:"Multiple"}],$o=[],V=t=>{let{variant:e,...o}={...t};return e==="multiple"?xt("div",{className:"k-d-flex",children:[xt(st,{...o,style:{height:"300px",width:"200px"},className:"k-pr-2",actionsPosition:"right",actions:["up","down","left","right","to","from","x"],children:[k(m,{selected:!0,children:"List item"}),k(m,{children:"List item"}),k(m,{children:"List item"}),k(m,{children:"List item"}),k(m,{children:"List item"}),k(m,{children:"List item"}),k(m,{children:"List item"})]}),xt(st,{...t,style:{height:"300px",width:"200px"},actionsPosition:"right",actions:["up","down","x"],children:[k(m,{children:"List item"}),k(m,{selected:!0,children:"List item"})]})]}):xt(st,{...o,style:{height:"300px",width:"200px"},actionsPosition:"right",actions:["up","down","left","right","to","from","x"],children:[k(m,{selected:!0,children:"List item"}),k(m,{children:"List item"}),k(m,{children:"List item"}),k(m,{children:"List item"}),k(m,{children:"List item"}),k(m,{children:"List item"}),k(m,{children:"List item"})]})};V.options=Do;V.states=Go;V.variants=Fo;V.defaultOptions=Uo;V.modifiers=$o;V.className=T.className;var Zr=V;export{V as ListboxDemo,Zr as default};

package/dist/esm/listbox/listbox.spec.mjs

@@ -1 +1 @@
-var i=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?i(...e):typeof e=="object"?Object.keys(e).map((o,a)=>e[a]||e[o]&&o||null).filter(o=>o!==null).join(" "):e).filter(e=>!!e).join(" ");var T=(t,e)=>i({[`${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"}),k=(t,e)=>{let{valid:o,invalid:a,hover:r,focus:d,checked:c,active:m,selected:p,disabled:u,indeterminate:b,loading:I,empty:x,readonly:L,highlighted:H,...z}=e;return i({"k-valid":o,"k-invalid":a,"k-hover":r,"k-focus":d,"k-checked":c,"k-active":m,"k-selected":p,"k-disabled":u,"k-indeterminate":b&&!c,"k-loading":I,"k-empty":x,"k-readonly":L,"k-highlighted":H},Object.keys(z).reduce((y,A)=>(A.startsWith("k-")?y[A]=z[A]:y[`k-${A}`]=z[A],y),{}))};function _t(t,e){if(!e)return{};let o=Array.isArray(e)?e:[e];return Object.fromEntries(o.map(a=>[`k-${a}`,!0]))}var s={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},g={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"},w={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},R={undefined:void 0,outline:"outline",solid:"solid",duotone:"duotone"},n={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",inverse:"inverse"},l={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 dt={};function h(t){return dt[t]=(dt[t]||0)+1,`k-${t}-${dt[t]}`}import{Fragment as de,jsx as Bt}from"react/jsx-runtime";var pt="k-font-icon",le=[],ce={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[n.undefined,n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info]},me={},Q=t=>{let{size:e,themeColor:o,icon:a,rotate:r,flip:d,...c}=t;return a?Bt("span",{...c,className:i(t.className,pt,T(pt,{size:e}),{[`k-i-${a}`]:a,[`k-color-${o}`]:o,[`k-rotate-${r}`]:r,"k-flip-h":d==="h"||d==="both","k-flip-v":d==="v"||d==="both"}),"aria-hidden":"true"}):Bt(de,{})};Q.states=le;Q.options=ce;Q.className=pt;Q.defaultOptions=me;var Ht=Q;import{Fragment as fe,jsx as ot}from"react/jsx-runtime";var ut="k-svg-icon",pe=[],ue={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[n.undefined,n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info],variant:[R.outline,R.solid,R.duotone]},ft={viewBox:"0 0 24 24",variant:R.outline},Y=t=>{let{size:e,themeColor:o,rotate:a,flip:r,viewBox:d=ft.viewBox,variant:c=ft.variant,icon:m,...p}=t;if(!m)return ot(fe,{});if(m==="none")return ot("span",{...p,className:i(t.className,ut,T("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let u=typeof m=="object"&&m.name&&m.name,b=typeof m=="object"?c&&m.variants?.[c]||m.variants?.outline||m.content:void 0;return ot("span",{...p,className:i(t.className,ut,T("k-icon",{size:e}),{[`k-svg-i-${u}`]:u,[`k-color-${o}`]:o,[`k-rotate-${a}`]:a,"k-flip-h":r==="h"||r==="both","k-flip-v":r==="v"||r==="both"}),"aria-hidden":"true",children:ot("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof m=="object"?m.viewBox:d,dangerouslySetInnerHTML:b!==void 0?{__html:b}:void 0,children:m?void 0:t.children})})};Y.states=pe;Y.options=ue;Y.className=ut;Y.defaultOptions=ft;var bt=Y;import*as xt from"@progress/kendo-svg-icons";var zt="icon",Pt="icons";import{useContext as xe}from"react";import{createContext as be}from"react";var wt=be({iconsType:"svg"});import{Fragment as Dt,jsx as Z}from"react/jsx-runtime";var it="k-icon",Le=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),he=[],Ce={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[n.undefined,n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info],variant:[R.outline,R.solid,R.duotone]},st={viewBox:"0 0 24 24",type:"svg",variant:R.outline},M=t=>{let{iconsType:e}=xe(wt),{size:o,themeColor:a,icon:r,type:d=e||st.type,rotate:c,flip:m,viewBox:p=st.viewBox,variant:u=st.variant,...b}=t;if(!r)return Z(Dt,{});if((e||d)==="svg"){if(r==="none")return Z(bt,{...b,className:i(t.className,it),icon:r,size:o,variant:u});let x=xt[r]?r:Le(`${r}-icon`);return xt[x]?Z(bt,{...b,className:i(t.className,it),icon:xt[x],size:o,themeColor:a,rotate:c,flip:m,viewBox:p,variant:u}):Z(Dt,{})}return Z(Ht,{...b,className:i(t.className,it),icon:r,size:o,themeColor:a,rotate:c,flip:m})};M.states=he;M.options=Ce;M.defaultOptions=st;M.className=it;M.moduleName=zt;M.folderName=Pt;var Lt="button",Gt=Lt;import{Fragment as ht,jsx as P,jsxs as Ut}from"react/jsx-runtime";var j="k-button",Ne=["icon-button"],ve=[l.hover,l.focus,l.active,l.selected,l.disabled,l.generating],ke={size:[s.undefined,s.xsmall,s.small,s.medium,s.large],rounded:[g.undefined,g.none,g.small,g.medium,g.large,g.full],fillMode:[w.undefined,w.solid,w.flat,w.outline,w.clear,w.link],themeColor:[n.undefined,n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info,n.inverse]},Ct={showArrow:!1,arrowIconName:"chevron-down"},f=t=>{let{as:e="button",size:o,rounded:a,fillMode:r,themeColor:d,showArrow:c=Ct.showArrow,arrowIconName:m=Ct.arrowIconName,variant:p,hover:u,focus:b,active:I,selected:x,disabled:L,togglable:H,ariaDisabled:z,icon:y,endIcon:A,iconSize:Kt,text:et,iconClassName:Rt,className:se,...ne}=t,ae=y!=null,re=t.children!==void 0;return Ut(e,{className:i(se,j,_t(j,p),T(j,{size:o,rounded:a,fillMode:r,themeColor:d}),k(j,{hover:u,focus:b,active:I,disabled:L||z,selected:x}),{"k-icon-button":!et&&!re&&ae}),"aria-pressed":H?x?"true":"false":void 0,...ne,"aria-disabled":z?"true":void 0,disabled:L||void 0,children:[typeof y=="string"&&y&&P(M,{className:i(Rt,"k-button-icon"),icon:y,size:Kt}),y&&typeof y!="string"&&P(ht,{children:y}),et?Ut(ht,{children:[et&&P("span",{className:"k-button-text",children:et}),t.children]}):t.children&&P("span",{className:"k-button-text",children:t.children}),typeof A=="string"&&A&&P(M,{className:i(Rt,"k-button-icon"),icon:A,size:Kt}),A&&typeof A!="string"&&P(ht,{children:A}),c&&P("span",{className:"k-menu-button-arrow k-button-arrow",children:P(M,{icon:m})})]})};f.states=ve;f.options=ke;f.variants=Ne;f.className=j;f.defaultOptions=Ct;f.moduleName=Lt;f.folderName=Gt;import{jsx as ge}from"react/jsx-runtime";var Ft=t=>ge(f,{icon:"folder",...t,"aria-label":t["aria-label"]||"Folder",children:void 0});import{jsx as Ie}from"react/jsx-runtime";var $t=t=>Ie(f,{icon:"folder",children:"Button",...t});import{jsx as ye}from"react/jsx-runtime";var Vt=t=>ye(f,{children:"Button",...t});import{jsx as Nt}from"react/jsx-runtime";var Me=f.options,Oe=f.states,Ae={...f.defaultOptions,variant:"text"},Ee=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],Se=[],F=t=>{let{variant:e,...o}=t;switch(e){case"icon-only":return Nt(Ft,{...o,icon:"star"});case"icon-and-text":return Nt($t,{...o,icon:"star",children:"Button"});default:return Nt(Vt,{...o,children:"Button"})}};F.options=Me;F.states=Oe;F.variants=Ee;F.defaultOptions=Ae;F.modifiers=Se;F.className=f.className;import gt from"react";import{jsx as Xt}from"react/jsx-runtime";var Te="k-list-group-sticky-header",vt=t=>Xt("div",{className:i(Te,t.className),children:Xt("div",{className:"k-list-header-text",children:t.children})});import{jsx as Re}from"react/jsx-runtime";var Ke="k-no-data",kt=t=>{let{live:e,...o}=t;return Re("span",{...o,className:i(Ke,t.className),"aria-live":e?"polite":void 0,children:t.children})};var D="list",$=D;import{jsx as Wt,jsxs as qt}from"react/jsx-runtime";var It="k-list",_e=[],Be={size:[s.undefined,s.small,s.medium,s.large]},He={},C=t=>{let{size:e,virtualization:o,children:a,header:r,selectAll:d,optionLabel:c,customValue:m,noData:p,screenReaders:u,...b}=t,x=gt.Children.toArray(a)[0],L=x?.props?.children?gt.Children.count(x.props.children):gt.Children.count(a);return qt("div",{...b,className:i(t.className,It,T(It,{size:e}),{"k-virtual-list":o}),children:[c,d,m,r&&Wt(vt,{children:r}),a||(p!==void 0?p:Wt(kt,{live:!0,children:"No data found."})),u&&a&&qt(kt,{className:"k-sr-only",live:!0,children:[L," items found."]})]})};C.states=_e;C.options=Be;C.className=It;C.defaultOptions=He;C.moduleName=D;C.folderName=$;import{jsx as De}from"react/jsx-runtime";var Jt="k-list-container",ze=[],Pe={},we={},V=t=>{let{...e}=t;return De("div",{...e,className:i(t.className,Jt),children:t.children})};V.states=ze;V.options=Pe;V.className=Jt;V.defaultOptions=we;V.moduleName=D;V.folderName=$;var G="checkbox",X=G;import{jsx as Qt}from"react/jsx-runtime";var nt="k-checkbox",Ge=[l.hover,l.focus,l.valid,l.invalid,l.required,l.disabled,l.checked,l.indeterminate],Ue={size:[s.undefined,s.small,s.medium,s.large],rounded:[g.undefined,g.none,g.small,g.medium,g.large,g.full]},Fe={},O=t=>{let{id:e,checked:o,indeterminate:a,hover:r,focus:d,disabled:c,invalid:m,valid:p,required:u,size:b,rounded:I,wrapperRole:x,...L}=t;return Qt("span",{className:"k-checkbox-wrap",role:x,children:Qt("input",{...L,id:e,type:"checkbox",defaultChecked:o,required:u,disabled:c||void 0,"aria-invalid":m?"true":void 0,className:i(t.className,nt,T(nt,{size:b,rounded:I}),k(nt,{hover:r,focus:d,disabled:c,invalid:m,valid:p,indeterminate:a,checked:o}))})})};O.states=Ge;O.options=Ue;O.className=nt;O.defaultOptions=Fe;O.moduleName=G;O.folderName=X;var K=O;import{jsx as Xe}from"react/jsx-runtime";var Yt="k-checkbox-list",$e=[],Ve={},Zt={layout:"vertical"},N=t=>{let{layout:e=Zt.layout,...o}=t;return Xe("ul",{...o,className:i(t.className,Yt,{[`k-list-${e}`]:e}),children:t.children})};N.states=$e;N.options=Ve;N.className=Yt;N.defaultOptions=Zt;N.moduleName=G;N.folderName=X;import{jsx as Qe}from"react/jsx-runtime";var jt="k-checkbox-list-item",We=[],qe={},Je={},v=t=>{let{...e}=t;return Qe("li",{...e,className:i(t.className,jt),children:t.children})};v.states=We;v.options=qe;v.className=jt;v.defaultOptions=Je;v.moduleName=G;v.folderName=X;import{Fragment as Ye,jsx as te,jsxs as Ze}from"react/jsx-runtime";var _=({children:t="Label",id:e="cb-label-after",...o})=>Ze(Ye,{children:[te(K,{id:e,...o}),te("label",{className:"k-checkbox-label",htmlFor:e,children:t})]});import{Fragment as ys,jsx as Is,jsxs as Ms}from"react/jsx-runtime";import{Fragment as Ts,jsx as Ss,jsxs as Ks}from"react/jsx-runtime";import{Fragment as zs,jsx as Hs,jsxs as Ps}from"react/jsx-runtime";import{jsx as Us}from"react/jsx-runtime";import{jsx as Xs}from"react/jsx-runtime";import{jsx as Qs}from"react/jsx-runtime";import{jsx as E,jsxs as ee}from"react/jsx-runtime";var je=N.options,to=N.states,eo={...N.defaultOptions,variant:"vertical"},oo=[{name:"vertical",title:"Vertical"},{name:"horizontal",title:"Horizontal"}],io=[],W=t=>{let{variant:e,...o}=t;return e==="horizontal"?ee(N,{layout:"horizontal",...o,children:[E(v,{children:E(_,{id:h("cb"),defaultChecked:!0,children:"Label"})}),E(v,{children:E(_,{id:h("cb"),children:"Label"})}),E(v,{children:E(_,{id:h("cb"),children:"Label"})})]}):ee(N,{...o,children:[E(v,{children:E(_,{id:h("cb"),defaultChecked:!0,children:"Label"})}),E(v,{children:E(_,{id:h("cb"),children:"Label"})}),E(v,{children:E(_,{id:h("cb"),children:"Label"})})]})};W.options=je;W.states=to;W.variants=oo;W.defaultOptions=eo;W.modifiers=io;W.className=N.className;import{jsx as co}from"react/jsx-runtime";var so=K.options,no=K.states,ao=K.defaultOptions,ro=[],lo=[],q=t=>co(_,{id:h("checkbox"),...t,defaultChecked:!0,children:"Label"});q.options=so;q.states=no;q.variants=ro;q.defaultOptions=ao;q.modifiers=lo;q.className=K.className;import{jsx as J,jsxs as fo}from"react/jsx-runtime";var yt="k-list-item",mo=[l.hover,l.focus,l.selected,l.disabled],po={},uo={},S=t=>{let{text:e,iconName:o,iconClassName:a,showCheckbox:r,checked:d,hover:c,focus:m,selected:p,disabled:u,actions:b,description:I,id:x,...L}=t,H=e||t.children,z=e||(typeof H=="string"?H:void 0);return fo("li",{...L,id:x,role:"option",tabIndex:m?0:-1,"aria-selected":p?"true":"false","aria-disabled":u?"true":void 0,className:i(t.className,yt,k(yt,{hover:c,focus:m,disabled:u,selected:p})),children:[r&&J(O,{checked:d,disabled:u,"aria-label":z,tabIndex:-1}),o&&J("span",{className:"k-list-item-icon-wrapper",children:J(M,{icon:o,className:i("k-list-item-icon",a)})}),J("span",{className:"k-list-item-text",children:H}),b&&J("div",{className:"k-list-item-actions",children:b}),I&&J("span",{className:"k-list-item-description",children:I})]})};S.states=mo;S.options=po;S.className=yt;S.defaultOptions=uo;S.moduleName=D;S.folderName=$;import{jsx as xo}from"react/jsx-runtime";var bo="k-list-ul",at=t=>{let{children:e,role:o,id:a,...r}=t;return xo("ul",{...r,id:a,role:o,className:i(bo,t.className),children:e})};import{jsx as Mt,jsxs as ho}from"react/jsx-runtime";var Lo="k-list-content",B=t=>{let{virtualization:e,grouping:o,"aria-label":a,"aria-labelledby":r,listboxId:d,...c}=t;return ho("div",{...c,className:i(Lo,t.className),role:o?"listbox":void 0,id:o?d:void 0,"aria-label":o?a:void 0,"aria-labelledby":o?r:void 0,children:[o?t.children:Mt(at,{role:"listbox",id:d,"aria-label":a,"aria-labelledby":r,children:t.children}),e&&Mt("div",{className:"k-height-container",children:Mt("div",{})})]})};import{jsx as Ot,jsxs as ko}from"react/jsx-runtime";var rt="k-list-sticky-header",Co=[l.hover,l.focus,l.selected],No={},vo={},lt=t=>{let{label:e="Select all",showCheckbox:o=!0,checked:a,indeterminate:r,hover:d,focus:c,selected:m,...p}=t;return Ot("div",{...p,className:i(rt,t.className),children:ko("div",{className:i(`${rt}-item`,k(`${rt}-item`,{hover:d,focus:c,selected:m})),"aria-label":e,...!o&&{tabIndex:0,"aria-selected":m?"true":"false"},children:[o&&Ot(O,{checked:a,indeterminate:r,"aria-label":e}),Ot("span",{className:"k-list-item-text",children:e})]})})};lt.states=Co;lt.options=No;lt.className=rt;lt.defaultOptions=vo;import{Fragment as Vn,jsx as $n,jsxs as Xn}from"react/jsx-runtime";import{jsx as Yn,jsxs as Zn}from"react/jsx-runtime";import{jsx as Mo}from"react/jsx-runtime";var At="k-list-optionlabel",go=[l.hover,l.focus,l.selected,l.disabled],Io={},yo={},ct=t=>{let{text:e,hover:o,focus:a,selected:r,disabled:d,...c}=t;return Mo("div",{...c,className:i(At,k(At,{hover:o,focus:a,selected:r,disabled:d})),children:e})};ct.states=go;ct.options=Io;ct.className=At;ct.defaultOptions=yo;import{jsx as So}from"react/jsx-runtime";var Et="k-list-custom-value",Oo=[l.hover,l.focus,l.selected,l.disabled],Ao={},Eo={},mt=t=>{let{text:e,hover:o,focus:a,selected:r,disabled:d,...c}=t;return So("div",{...c,className:i(Et,k(Et,{hover:o,focus:a,selected:r,disabled:d})),children:e})};mt.states=Oo;mt.options=Ao;mt.className=Et;mt.defaultOptions=Eo;import{Fragment as ma,jsx as ca,jsxs as da}from"react/jsx-runtime";import{Fragment as La,jsx as xa,jsxs as ha}from"react/jsx-runtime";import{Fragment as ya,jsx as ga,jsxs as Ia}from"react/jsx-runtime";import{Fragment as Ka,jsx as Sa,jsxs as Ta}from"react/jsx-runtime";import{jsx as Ha}from"react/jsx-runtime";import{Fragment as Ua,jsx as Ga,jsxs as Fa}from"react/jsx-runtime";import{Fragment as Ja,jsx as qa,jsxs as Qa}from"react/jsx-runtime";var St="listbox",oe=St;import{jsx as tt,jsxs as _o}from"react/jsx-runtime";var Tt="k-listbox",Ko=[l.disabled],Ro={size:[s.undefined,s.small,s.medium,s.large]},ie={actionsPosition:"left"},U=t=>{let{size:e,disabled:o,children:a,actionsPosition:r=ie.actionsPosition,actions:d,dir:c,"aria-label":m,multiselectable:p,id:u,...b}=t,I=u?`${u}-list`:void 0,x={left:"Move left",right:"Move right",to:"Move all right",from:"Move all left",up:"Move up",down:"Move down",x:"Remove"};return _o("div",{...b,dir:c,className:i(t.className,Tt,k(Tt,{disabled:o}),{[`k-listbox-actions-${r}`]:r}),children:[d&&tt("div",{className:"k-listbox-actions",role:"toolbar","aria-label":"ListBox actions","aria-controls":I,children:d.map(L=>tt(f,{icon:{left:c!=="rtl"?"chevron-left":"chevron-right",right:c!=="rtl"?"chevron-right":"chevron-left",to:c!=="rtl"?"chevron-double-right":"chevron-double-left",from:c!=="rtl"?"chevron-double-left":"chevron-double-right",up:"chevron-up",down:"chevron-down",x:"x"}[L],size:e,"aria-label":x[L]||L},L))}),tt("div",{className:i("k-list-scroller","k-selectable"),children:tt(C,{size:e,children:tt(B,{"aria-label":m,"aria-multiselectable":p,listboxId:I,children:a})})})]})};U.states=Ko;U.options=Ro;U.className=Tt;U.defaultOptions=ie;U.moduleName=St;U.folderName=oe;var kr=U;export{Tt as LISTBOX_CLASSNAME,U as ListBox,kr as default};
+var i=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?i(...e):typeof e=="object"?Object.keys(e).map((o,a)=>e[a]||e[o]&&o||null).filter(o=>o!==null).join(" "):e).filter(e=>!!e).join(" ");var T=(t,e)=>i({[`${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"}),g=(t,e)=>{let{valid:o,invalid:a,hover:r,focus:d,checked:m,active:c,selected:p,disabled:f,indeterminate:b,loading:y,empty:L,readonly:M,highlighted:B,...R}=e;return i({"k-valid":o,"k-invalid":a,"k-hover":r,"k-focus":d,"k-checked":m,"k-active":c,"k-selected":p,"k-disabled":f,"k-indeterminate":b&&!m,"k-loading":y,"k-empty":L,"k-readonly":M,"k-highlighted":B},Object.keys(R).reduce((h,x)=>(x.startsWith("k-")?h[x]=R[x]:h[`k-${x}`]=R[x],h),{}))};function _t(t,e){if(!e)return{};let o=Array.isArray(e)?e:[e];return Object.fromEntries(o.map(a=>[`k-${a}`,!0]))}var s={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},I={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"},w={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},_={undefined:void 0,outline:"outline",solid:"solid",duotone:"duotone"},n={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",inverse:"inverse"},l={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 dt={};function C(t){return dt[t]=(dt[t]||0)+1,`k-${t}-${dt[t]}`}import{Fragment as de,jsx as Bt}from"react/jsx-runtime";var pt="k-font-icon",le=[],ce={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[n.undefined,n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info]},me={},Y=t=>{let{size:e,themeColor:o,icon:a,rotate:r,flip:d,...m}=t;return a?Bt("span",{...m,className:i(t.className,pt,T(pt,{size:e}),{[`k-i-${a}`]:a,[`k-color-${o}`]:o,[`k-rotate-${r}`]:r,"k-flip-h":d==="h"||d==="both","k-flip-v":d==="v"||d==="both"}),"aria-hidden":"true"}):Bt(de,{})};Y.states=le;Y.options=ce;Y.className=pt;Y.defaultOptions=me;var Ht=Y;import{Fragment as fe,jsx as ot}from"react/jsx-runtime";var ut="k-svg-icon",pe=[],ue={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[n.undefined,n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info],variant:[_.outline,_.solid,_.duotone]},ft={viewBox:"0 0 24 24",variant:_.outline},Z=t=>{let{size:e,themeColor:o,rotate:a,flip:r,viewBox:d=ft.viewBox,variant:m=ft.variant,icon:c,...p}=t;if(!c)return ot(fe,{});if(c==="none")return ot("span",{...p,className:i(t.className,ut,T("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let f=typeof c=="object"&&c.name&&c.name,b=typeof c=="object"?m&&c.variants?.[m]||c.variants?.outline||c.content:void 0;return ot("span",{...p,className:i(t.className,ut,T("k-icon",{size:e}),{[`k-svg-i-${f}`]:f,[`k-color-${o}`]:o,[`k-rotate-${a}`]:a,"k-flip-h":r==="h"||r==="both","k-flip-v":r==="v"||r==="both"}),"aria-hidden":"true",children:ot("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof c=="object"?c.viewBox:d,dangerouslySetInnerHTML:b!==void 0?{__html:b}:void 0,children:c?void 0:t.children})})};Z.states=pe;Z.options=ue;Z.className=ut;Z.defaultOptions=ft;var bt=Z;import*as xt from"@progress/kendo-svg-icons";var zt="icon",Pt="icons";import{useContext as xe}from"react";import{createContext as be}from"react";var wt=be({iconsType:"svg"});import{Fragment as Dt,jsx as j}from"react/jsx-runtime";var it="k-icon",Le=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),he=[],Ce={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[n.undefined,n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info],variant:[_.outline,_.solid,_.duotone]},st={viewBox:"0 0 24 24",type:"svg",variant:_.outline},O=t=>{let{iconsType:e}=xe(wt),{size:o,themeColor:a,icon:r,type:d=e||st.type,rotate:m,flip:c,viewBox:p=st.viewBox,variant:f=st.variant,...b}=t;if(!r)return j(Dt,{});if((e||d)==="svg"){if(r==="none")return j(bt,{...b,className:i(t.className,it),icon:r,size:o,variant:f});let L=xt[r]?r:Le(`${r}-icon`);return xt[L]?j(bt,{...b,className:i(t.className,it),icon:xt[L],size:o,themeColor:a,rotate:m,flip:c,viewBox:p,variant:f}):j(Dt,{})}return j(Ht,{...b,className:i(t.className,it),icon:r,size:o,themeColor:a,rotate:m,flip:c})};O.states=he;O.options=Ce;O.defaultOptions=st;O.className=it;O.moduleName=zt;O.folderName=Pt;var Lt="button",Gt=Lt;import{Fragment as ht,jsx as P,jsxs as Ut}from"react/jsx-runtime";var tt="k-button",Ne=["icon-button"],ke=[l.hover,l.focus,l.active,l.selected,l.disabled,l.generating],ve={size:[s.undefined,s.xsmall,s.small,s.medium,s.large],rounded:[I.undefined,I.none,I.small,I.medium,I.large,I.full],fillMode:[w.undefined,w.solid,w.flat,w.outline,w.clear,w.link],themeColor:[n.undefined,n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info,n.inverse]},Ct={showArrow:!1,arrowIconName:"chevron-down"},u=t=>{let{as:e="button",size:o,rounded:a,fillMode:r,themeColor:d,showArrow:m=Ct.showArrow,arrowIconName:c=Ct.arrowIconName,variant:p,hover:f,focus:b,active:y,selected:L,disabled:M,togglable:B,ariaDisabled:R,icon:h,endIcon:x,iconSize:Kt,text:et,iconClassName:Rt,className:se,...ne}=t,ae=h!=null,re=t.children!==void 0;return Ut(e,{className:i(se,tt,_t(tt,p),T(tt,{size:o,rounded:a,fillMode:r,themeColor:d}),g(tt,{hover:f,focus:b,active:y,disabled:M||R,selected:L}),{"k-icon-button":!et&&!re&&ae}),"aria-pressed":B?L?"true":"false":void 0,...ne,"aria-disabled":R?"true":void 0,disabled:M||void 0,children:[typeof h=="string"&&h&&P(O,{className:i(Rt,"k-button-icon"),icon:h,size:Kt}),h&&typeof h!="string"&&P(ht,{children:h}),et?Ut(ht,{children:[et&&P("span",{className:"k-button-text",children:et}),t.children]}):t.children&&P("span",{className:"k-button-text",children:t.children}),typeof x=="string"&&x&&P(O,{className:i(Rt,"k-button-icon"),icon:x,size:Kt}),x&&typeof x!="string"&&P(ht,{children:x}),m&&P("span",{className:"k-menu-button-arrow k-button-arrow",children:P(O,{icon:c})})]})};u.states=ke;u.options=ve;u.variants=Ne;u.className=tt;u.defaultOptions=Ct;u.moduleName=Lt;u.folderName=Gt;import{jsx as ge}from"react/jsx-runtime";var Ft=t=>ge(u,{icon:"folder",...t,"aria-label":t["aria-label"]||"Folder",children:void 0});import{jsx as Ie}from"react/jsx-runtime";var $t=t=>Ie(u,{icon:"folder",children:"Button",...t});import{jsx as ye}from"react/jsx-runtime";var Vt=t=>ye(u,{children:"Button",...t});import{jsx as Nt}from"react/jsx-runtime";var Me=u.options,Oe=u.states,Se={...u.defaultOptions,variant:"text"},Ae=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],Ee=[],F=t=>{let{variant:e,...o}=t;switch(e){case"icon-only":return Nt(Ft,{...o,icon:"star"});case"icon-and-text":return Nt($t,{...o,icon:"star",children:"Button"});default:return Nt(Vt,{...o,children:"Button"})}};F.options=Me;F.states=Oe;F.variants=Ae;F.defaultOptions=Se;F.modifiers=Ee;F.className=u.className;import gt from"react";import{jsx as Xt}from"react/jsx-runtime";var Te="k-list-group-sticky-header",kt=t=>Xt("div",{className:i(Te,t.className),children:Xt("div",{className:"k-list-header-text",children:t.children})});import{jsx as Re}from"react/jsx-runtime";var Ke="k-no-data",vt=t=>{let{live:e,...o}=t;return Re("span",{...o,className:i(Ke,t.className),"aria-live":e?"polite":void 0,children:t.children})};var D="list",$=D;import{jsx as Wt,jsxs as qt}from"react/jsx-runtime";var It="k-list",_e=[],Be={size:[s.undefined,s.small,s.medium,s.large]},He={},N=t=>{let{size:e,virtualization:o,children:a,header:r,selectAll:d,optionLabel:m,customValue:c,noData:p,screenReaders:f,...b}=t,L=gt.Children.toArray(a)[0],M=L?.props?.children?gt.Children.count(L.props.children):gt.Children.count(a);return qt("div",{...b,className:i(t.className,It,T(It,{size:e}),{"k-virtual-list":o}),children:[m,d,c,r&&Wt(kt,{children:r}),a||(p!==void 0?p:Wt(vt,{live:!0,children:"No data found."})),f&&a&&qt(vt,{className:"k-sr-only",live:!0,children:[M," items found."]})]})};N.states=_e;N.options=Be;N.className=It;N.defaultOptions=He;N.moduleName=D;N.folderName=$;import{jsx as De}from"react/jsx-runtime";var Jt="k-list-container",ze=[],Pe={},we={},V=t=>{let{...e}=t;return De("div",{...e,className:i(t.className,Jt),children:t.children})};V.states=ze;V.options=Pe;V.className=Jt;V.defaultOptions=we;V.moduleName=D;V.folderName=$;var G="checkbox",X=G;import{jsx as Qt}from"react/jsx-runtime";var nt="k-checkbox",Ge=[l.hover,l.focus,l.valid,l.invalid,l.required,l.disabled,l.checked,l.indeterminate],Ue={size:[s.undefined,s.small,s.medium,s.large],rounded:[I.undefined,I.none,I.small,I.medium,I.large,I.full]},Fe={},S=t=>{let{id:e,checked:o,indeterminate:a,hover:r,focus:d,disabled:m,invalid:c,valid:p,required:f,size:b,rounded:y,wrapperRole:L,...M}=t;return Qt("span",{className:"k-checkbox-wrap",role:L,children:Qt("input",{...M,id:e,type:"checkbox",defaultChecked:o,required:f,disabled:m||void 0,"aria-invalid":c?"true":void 0,className:i(t.className,nt,T(nt,{size:b,rounded:y}),g(nt,{hover:r,focus:d,disabled:m,invalid:c,valid:p,indeterminate:a,checked:o}))})})};S.states=Ge;S.options=Ue;S.className=nt;S.defaultOptions=Fe;S.moduleName=G;S.folderName=X;var K=S;import{jsx as Xe}from"react/jsx-runtime";var Yt="k-checkbox-list",$e=[],Ve={},Zt={layout:"vertical"},k=t=>{let{layout:e=Zt.layout,...o}=t;return Xe("ul",{...o,className:i(t.className,Yt,{[`k-list-${e}`]:e}),children:t.children})};k.states=$e;k.options=Ve;k.className=Yt;k.defaultOptions=Zt;k.moduleName=G;k.folderName=X;import{jsx as Qe}from"react/jsx-runtime";var jt="k-checkbox-list-item",We=[],qe={},Je={},v=t=>{let{...e}=t;return Qe("li",{...e,className:i(t.className,jt),children:t.children})};v.states=We;v.options=qe;v.className=jt;v.defaultOptions=Je;v.moduleName=G;v.folderName=X;import{Fragment as Ye,jsx as te,jsxs as Ze}from"react/jsx-runtime";var H=({children:t="Label",id:e="cb-label-after",...o})=>Ze(Ye,{children:[te(K,{id:e,...o}),te("label",{className:"k-checkbox-label",htmlFor:e,children:t})]});import{Fragment as ys,jsx as Is,jsxs as Ms}from"react/jsx-runtime";import{Fragment as Ts,jsx as Es,jsxs as Ks}from"react/jsx-runtime";import{Fragment as zs,jsx as Hs,jsxs as Ps}from"react/jsx-runtime";import{jsx as Us}from"react/jsx-runtime";import{jsx as Xs}from"react/jsx-runtime";import{jsx as Qs}from"react/jsx-runtime";import{jsx as A,jsxs as ee}from"react/jsx-runtime";var je=k.options,to=k.states,eo={...k.defaultOptions,variant:"vertical"},oo=[{name:"vertical",title:"Vertical"},{name:"horizontal",title:"Horizontal"}],io=[],W=t=>{let{variant:e,...o}=t;return e==="horizontal"?ee(k,{layout:"horizontal",...o,children:[A(v,{children:A(H,{id:C("cb"),defaultChecked:!0,children:"Label"})}),A(v,{children:A(H,{id:C("cb"),children:"Label"})}),A(v,{children:A(H,{id:C("cb"),children:"Label"})})]}):ee(k,{...o,children:[A(v,{children:A(H,{id:C("cb"),defaultChecked:!0,children:"Label"})}),A(v,{children:A(H,{id:C("cb"),children:"Label"})}),A(v,{children:A(H,{id:C("cb"),children:"Label"})})]})};W.options=je;W.states=to;W.variants=oo;W.defaultOptions=eo;W.modifiers=io;W.className=k.className;import{jsx as co}from"react/jsx-runtime";var so=K.options,no=K.states,ao=K.defaultOptions,ro=[],lo=[],q=t=>co(H,{id:C("checkbox"),...t,defaultChecked:!0,children:"Label"});q.options=so;q.states=no;q.variants=ro;q.defaultOptions=ao;q.modifiers=lo;q.className=K.className;import{jsx as J,jsxs as fo}from"react/jsx-runtime";var yt="k-list-item",mo=[l.hover,l.focus,l.selected,l.disabled],po={},uo={},E=t=>{let{text:e,iconName:o,iconClassName:a,showCheckbox:r,checked:d,hover:m,focus:c,selected:p,disabled:f,actions:b,description:y,id:L,...M}=t,B=e||t.children,R=e||(typeof B=="string"?B:void 0);return fo("li",{...M,id:L,role:"option",tabIndex:c?0:-1,"aria-selected":p?"true":"false","aria-disabled":f?"true":void 0,className:i(t.className,yt,g(yt,{hover:m,focus:c,disabled:f,selected:p})),children:[r&&J(S,{checked:d,disabled:f,"aria-label":R,tabIndex:-1}),o&&J("span",{className:"k-list-item-icon-wrapper",children:J(O,{icon:o,className:i("k-list-item-icon",a)})}),J("span",{className:"k-list-item-text",children:B}),b&&J("div",{className:"k-list-item-actions",children:b}),y&&J("span",{className:"k-list-item-description",children:y})]})};E.states=mo;E.options=po;E.className=yt;E.defaultOptions=uo;E.moduleName=D;E.folderName=$;import{jsx as xo}from"react/jsx-runtime";var bo="k-list-ul",at=t=>{let{children:e,role:o,id:a,...r}=t;return xo("ul",{...r,id:a,role:o,className:i(bo,t.className),children:e})};import{jsx as Mt,jsxs as ho}from"react/jsx-runtime";var Lo="k-list-content",z=t=>{let{virtualization:e,grouping:o,"aria-label":a,"aria-labelledby":r,listboxId:d,...m}=t;return ho("div",{...m,className:i(Lo,t.className),role:o?"listbox":void 0,id:o?d:void 0,"aria-label":o?a:void 0,"aria-labelledby":o?r:void 0,children:[o?t.children:Mt(at,{role:"listbox",id:d,"aria-label":a,"aria-labelledby":r,children:t.children}),e&&Mt("div",{className:"k-height-container",children:Mt("div",{})})]})};import{jsx as Ot,jsxs as vo}from"react/jsx-runtime";var rt="k-list-sticky-header",Co=[l.hover,l.focus,l.selected],No={},ko={},lt=t=>{let{label:e="Select all",showCheckbox:o=!0,checked:a,indeterminate:r,hover:d,focus:m,selected:c,...p}=t;return Ot("div",{...p,className:i(rt,t.className),children:vo("div",{className:i(`${rt}-item`,g(`${rt}-item`,{hover:d,focus:m,selected:c})),"aria-label":e,...!o&&{tabIndex:0,"aria-selected":c?"true":"false"},children:[o&&Ot(S,{checked:a,indeterminate:r,"aria-label":e}),Ot("span",{className:"k-list-item-text",children:e})]})})};lt.states=Co;lt.options=No;lt.className=rt;lt.defaultOptions=ko;import{Fragment as Vn,jsx as $n,jsxs as Xn}from"react/jsx-runtime";import{jsx as Yn,jsxs as Zn}from"react/jsx-runtime";import{jsx as Mo}from"react/jsx-runtime";var St="k-list-optionlabel",go=[l.hover,l.focus,l.selected,l.disabled],Io={},yo={},ct=t=>{let{text:e,hover:o,focus:a,selected:r,disabled:d,...m}=t;return Mo("div",{...m,className:i(St,g(St,{hover:o,focus:a,selected:r,disabled:d})),children:e})};ct.states=go;ct.options=Io;ct.className=St;ct.defaultOptions=yo;import{jsx as Eo}from"react/jsx-runtime";var At="k-list-custom-value",Oo=[l.hover,l.focus,l.selected,l.disabled],So={},Ao={},mt=t=>{let{text:e,hover:o,focus:a,selected:r,disabled:d,...m}=t;return Eo("div",{...m,className:i(At,g(At,{hover:o,focus:a,selected:r,disabled:d})),children:e})};mt.states=Oo;mt.options=So;mt.className=At;mt.defaultOptions=Ao;import{Fragment as ma,jsx as ca,jsxs as da}from"react/jsx-runtime";import{Fragment as La,jsx as xa,jsxs as ha}from"react/jsx-runtime";import{Fragment as ya,jsx as ga,jsxs as Ia}from"react/jsx-runtime";import{Fragment as Ka,jsx as Ea,jsxs as Ta}from"react/jsx-runtime";import{jsx as Ha}from"react/jsx-runtime";import{Fragment as Ua,jsx as Ga,jsxs as Fa}from"react/jsx-runtime";import{Fragment as Ja,jsx as qa,jsxs as Qa}from"react/jsx-runtime";var Et="listbox",oe=Et;import{jsx as Q,jsxs as _o}from"react/jsx-runtime";var Tt="k-listbox",Ko=[l.disabled],Ro={size:[s.undefined,s.small,s.medium,s.large]},ie={actionsPosition:"left"},U=t=>{let{size:e,disabled:o,children:a,actionsPosition:r=ie.actionsPosition,actions:d,actionsScrollable:m,actionsScrollingPosition:c,dir:p,"aria-label":f,multiselectable:b,id:y,...L}=t,M=y?`${y}-list`:void 0,B={left:"Move left",right:"Move right",to:"Move all right",from:"Move all left",up:"Move up",down:"Move down",x:"Remove"},R={left:p!=="rtl"?"chevron-left":"chevron-right",right:p!=="rtl"?"chevron-right":"chevron-left",to:p!=="rtl"?"chevron-double-right":"chevron-double-left",from:p!=="rtl"?"chevron-double-left":"chevron-double-right",up:"chevron-up",down:"chevron-down",x:"x"},h=d?.map(x=>Q(u,{icon:R[x],size:e,"aria-label":B[x]||x},x));return _o("div",{...L,dir:p,className:i(t.className,Tt,g(Tt,{disabled:o}),{[`k-listbox-actions-${r}`]:r}),children:[d&&Q("div",{className:i("k-listbox-actions",{"k-listbox-actions-scrollable":m,"k-listbox-actions-scrollable-start":m&&c==="start","k-listbox-actions-scrollable-end":m&&c==="end"}),role:"toolbar","aria-label":"ListBox actions","aria-controls":M,children:m?Q("div",{className:"k-listbox-actions-items",children:h}):h}),Q("div",{className:i("k-list-scroller","k-selectable"),children:Q(N,{size:e,children:Q(z,{"aria-label":f,"aria-multiselectable":b,listboxId:M,children:a})})})]})};U.states=Ko;U.options=Ro;U.className=Tt;U.defaultOptions=ie;U.moduleName=Et;U.folderName=oe;var vr=U;export{Tt as LISTBOX_CLASSNAME,U as ListBox,vr as default};

package/dist/esm/listbox/templates/listbox-normal.mjs

@@ -1 +1 @@
-var i=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?i(...e):typeof e=="object"?Object.keys(e).map((o,n)=>e[n]||e[o]&&o||null).filter(o=>o!==null).join(" "):e).filter(e=>!!e).join(" ");var B=(t,e)=>i({[`${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"}),g=(t,e)=>{let{valid:o,invalid:n,hover:a,focus:p,checked:c,active:d,selected:f,disabled:x,indeterminate:b,loading:M,empty:h,readonly:C,highlighted:w,...P}=e;return i({"k-valid":o,"k-invalid":n,"k-hover":a,"k-focus":p,"k-checked":c,"k-active":d,"k-selected":f,"k-disabled":x,"k-indeterminate":b&&!c,"k-loading":M,"k-empty":h,"k-readonly":C,"k-highlighted":w},Object.keys(P).reduce((O,T)=>(T.startsWith("k-")?O[T]=P[T]:O[`k-${T}`]=P[T],O),{}))};function Pt(t,e){if(!e)return{};let o=Array.isArray(e)?e:[e];return Object.fromEntries(o.map(n=>[`k-${n}`,!0]))}var s={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},y={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"},G={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},_={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"},l={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 Lt={};function u(t){return Lt[t]=(Lt[t]||0)+1,`k-${t}-${Lt[t]}`}import{Fragment as Le,jsx as Dt}from"react/jsx-runtime";var bt="k-font-icon",ue=[],fe={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[r.undefined,r.base,r.primary,r.secondary,r.tertiary,r.success,r.warning,r.error,r.info]},xe={},j=t=>{let{size:e,themeColor:o,icon:n,rotate:a,flip:p,...c}=t;return n?Dt("span",{...c,className:i(t.className,bt,B(bt,{size:e}),{[`k-i-${n}`]:n,[`k-color-${o}`]:o,[`k-rotate-${a}`]:a,"k-flip-h":p==="h"||p==="both","k-flip-v":p==="v"||p==="both"}),"aria-hidden":"true"}):Dt(Le,{})};j.states=ue;j.options=fe;j.className=bt;j.defaultOptions=xe;var Gt=j;import{Fragment as Ne,jsx as nt}from"react/jsx-runtime";var ht="k-svg-icon",be=[],he={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[r.undefined,r.base,r.primary,r.secondary,r.tertiary,r.success,r.warning,r.error,r.info],variant:[_.outline,_.solid,_.duotone]},Nt={viewBox:"0 0 24 24",variant:_.outline},tt=t=>{let{size:e,themeColor:o,rotate:n,flip:a,viewBox:p=Nt.viewBox,variant:c=Nt.variant,icon:d,...f}=t;if(!d)return nt(Ne,{});if(d==="none")return nt("span",{...f,className:i(t.className,ht,B("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let x=typeof d=="object"&&d.name&&d.name,b=typeof d=="object"?c&&d.variants?.[c]||d.variants?.outline||d.content:void 0;return nt("span",{...f,className:i(t.className,ht,B("k-icon",{size:e}),{[`k-svg-i-${x}`]:x,[`k-color-${o}`]:o,[`k-rotate-${n}`]:n,"k-flip-h":a==="h"||a==="both","k-flip-v":a==="v"||a==="both"}),"aria-hidden":"true",children:nt("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof d=="object"?d.viewBox:p,dangerouslySetInnerHTML:b!==void 0?{__html:b}:void 0,children:d?void 0:t.children})})};tt.states=be;tt.options=he;tt.className=ht;tt.defaultOptions=Nt;var Ct=tt;import*as It from"@progress/kendo-svg-icons";var Ut="icon",Ft="icons";import{useContext as Ie}from"react";import{createContext as Ce}from"react";var $t=Ce({iconsType:"svg"});import{Fragment as Vt,jsx as et}from"react/jsx-runtime";var at="k-icon",ve=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),ke=[],ge={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[r.undefined,r.base,r.primary,r.secondary,r.tertiary,r.success,r.warning,r.error,r.info],variant:[_.outline,_.solid,_.duotone]},rt={viewBox:"0 0 24 24",type:"svg",variant:_.outline},A=t=>{let{iconsType:e}=Ie($t),{size:o,themeColor:n,icon:a,type:p=e||rt.type,rotate:c,flip:d,viewBox:f=rt.viewBox,variant:x=rt.variant,...b}=t;if(!a)return et(Vt,{});if((e||p)==="svg"){if(a==="none")return et(Ct,{...b,className:i(t.className,at),icon:a,size:o,variant:x});let h=It[a]?a:ve(`${a}-icon`);return It[h]?et(Ct,{...b,className:i(t.className,at),icon:It[h],size:o,themeColor:n,rotate:c,flip:d,viewBox:f,variant:x}):et(Vt,{})}return et(Gt,{...b,className:i(t.className,at),icon:a,size:o,themeColor:n,rotate:c,flip:d})};A.states=ke;A.options=ge;A.defaultOptions=rt;A.className=at;A.moduleName=Ut;A.folderName=Ft;var vt="button",Xt=vt;import{Fragment as kt,jsx as D,jsxs as Wt}from"react/jsx-runtime";var ot="k-button",ye=["icon-button"],Me=[l.hover,l.focus,l.active,l.selected,l.disabled,l.generating],Oe={size:[s.undefined,s.xsmall,s.small,s.medium,s.large],rounded:[y.undefined,y.none,y.small,y.medium,y.large,y.full],fillMode:[G.undefined,G.solid,G.flat,G.outline,G.clear,G.link],themeColor:[r.undefined,r.base,r.primary,r.secondary,r.tertiary,r.success,r.warning,r.error,r.info,r.inverse]},gt={showArrow:!1,arrowIconName:"chevron-down"},L=t=>{let{as:e="button",size:o,rounded:n,fillMode:a,themeColor:p,showArrow:c=gt.showArrow,arrowIconName:d=gt.arrowIconName,variant:f,hover:x,focus:b,active:M,selected:h,disabled:C,togglable:w,ariaDisabled:P,icon:O,endIcon:T,iconSize:zt,text:st,iconClassName:wt,className:me,...ce}=t,de=O!=null,pe=t.children!==void 0;return Wt(e,{className:i(me,ot,Pt(ot,f),B(ot,{size:o,rounded:n,fillMode:a,themeColor:p}),g(ot,{hover:x,focus:b,active:M,disabled:C||P,selected:h}),{"k-icon-button":!st&&!pe&&de}),"aria-pressed":w?h?"true":"false":void 0,...ce,"aria-disabled":P?"true":void 0,disabled:C||void 0,children:[typeof O=="string"&&O&&D(A,{className:i(wt,"k-button-icon"),icon:O,size:zt}),O&&typeof O!="string"&&D(kt,{children:O}),st?Wt(kt,{children:[st&&D("span",{className:"k-button-text",children:st}),t.children]}):t.children&&D("span",{className:"k-button-text",children:t.children}),typeof T=="string"&&T&&D(A,{className:i(wt,"k-button-icon"),icon:T,size:zt}),T&&typeof T!="string"&&D(kt,{children:T}),c&&D("span",{className:"k-menu-button-arrow k-button-arrow",children:D(A,{icon:d})})]})};L.states=Me;L.options=Oe;L.variants=ye;L.className=ot;L.defaultOptions=gt;L.moduleName=vt;L.folderName=Xt;import{jsx as Ae}from"react/jsx-runtime";var qt=t=>Ae(L,{icon:"folder",...t,"aria-label":t["aria-label"]||"Folder",children:void 0});import{jsx as Se}from"react/jsx-runtime";var Jt=t=>Se(L,{icon:"folder",children:"Button",...t});import{jsx as Ee}from"react/jsx-runtime";var Qt=t=>Ee(L,{children:"Button",...t});import{jsx as yt}from"react/jsx-runtime";var Te=L.options,Ke=L.states,Be={...L.defaultOptions,variant:"text"},Re=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],_e=[],V=t=>{let{variant:e,...o}=t;switch(e){case"icon-only":return yt(qt,{...o,icon:"star"});case"icon-and-text":return yt(Jt,{...o,icon:"star",children:"Button"});default:return yt(Qt,{...o,children:"Button"})}};V.options=Te;V.states=Ke;V.variants=Re;V.defaultOptions=Be;V.modifiers=_e;V.className=L.className;import At from"react";import{jsx as Yt}from"react/jsx-runtime";var He="k-list-group-sticky-header",Mt=t=>Yt("div",{className:i(He,t.className),children:Yt("div",{className:"k-list-header-text",children:t.children})});import{jsx as we}from"react/jsx-runtime";var ze="k-no-data",Ot=t=>{let{live:e,...o}=t;return we("span",{...o,className:i(ze,t.className),"aria-live":e?"polite":void 0,children:t.children})};var U="list",X=U;import{jsx as Zt,jsxs as jt}from"react/jsx-runtime";var St="k-list",Pe=[],De={size:[s.undefined,s.small,s.medium,s.large]},Ge={},I=t=>{let{size:e,virtualization:o,children:n,header:a,selectAll:p,optionLabel:c,customValue:d,noData:f,screenReaders:x,...b}=t,h=At.Children.toArray(n)[0],C=h?.props?.children?At.Children.count(h.props.children):At.Children.count(n);return jt("div",{...b,className:i(t.className,St,B(St,{size:e}),{"k-virtual-list":o}),children:[c,p,d,a&&Zt(Mt,{children:a}),n||(f!==void 0?f:Zt(Ot,{live:!0,children:"No data found."})),x&&n&&jt(Ot,{className:"k-sr-only",live:!0,children:[C," items found."]})]})};I.states=Pe;I.options=De;I.className=St;I.defaultOptions=Ge;I.moduleName=U;I.folderName=X;import{jsx as Ve}from"react/jsx-runtime";var te="k-list-container",Ue=[],Fe={},$e={},W=t=>{let{...e}=t;return Ve("div",{...e,className:i(t.className,te),children:t.children})};W.states=Ue;W.options=Fe;W.className=te;W.defaultOptions=$e;W.moduleName=U;W.folderName=X;var F="checkbox",q=F;import{jsx as ee}from"react/jsx-runtime";var lt="k-checkbox",Xe=[l.hover,l.focus,l.valid,l.invalid,l.required,l.disabled,l.checked,l.indeterminate],We={size:[s.undefined,s.small,s.medium,s.large],rounded:[y.undefined,y.none,y.small,y.medium,y.large,y.full]},qe={},S=t=>{let{id:e,checked:o,indeterminate:n,hover:a,focus:p,disabled:c,invalid:d,valid:f,required:x,size:b,rounded:M,wrapperRole:h,...C}=t;return ee("span",{className:"k-checkbox-wrap",role:h,children:ee("input",{...C,id:e,type:"checkbox",defaultChecked:o,required:x,disabled:c||void 0,"aria-invalid":d?"true":void 0,className:i(t.className,lt,B(lt,{size:b,rounded:M}),g(lt,{hover:a,focus:p,disabled:c,invalid:d,valid:f,indeterminate:n,checked:o}))})})};S.states=Xe;S.options=We;S.className=lt;S.defaultOptions=qe;S.moduleName=F;S.folderName=q;var R=S;import{jsx as Ye}from"react/jsx-runtime";var oe="k-checkbox-list",Je=[],Qe={},ie={layout:"vertical"},v=t=>{let{layout:e=ie.layout,...o}=t;return Ye("ul",{...o,className:i(t.className,oe,{[`k-list-${e}`]:e}),children:t.children})};v.states=Je;v.options=Qe;v.className=oe;v.defaultOptions=ie;v.moduleName=F;v.folderName=q;import{jsx as eo}from"react/jsx-runtime";var se="k-checkbox-list-item",Ze=[],je={},to={},k=t=>{let{...e}=t;return eo("li",{...e,className:i(t.className,se),children:t.children})};k.states=Ze;k.options=je;k.className=se;k.defaultOptions=to;k.moduleName=F;k.folderName=q;import{Fragment as oo,jsx as ne,jsxs as io}from"react/jsx-runtime";var H=({children:t="Label",id:e="cb-label-after",...o})=>io(oo,{children:[ne(R,{id:e,...o}),ne("label",{className:"k-checkbox-label",htmlFor:e,children:t})]});import{Fragment as _s,jsx as Rs,jsxs as Hs}from"react/jsx-runtime";import{Fragment as Gs,jsx as Ds,jsxs as Us}from"react/jsx-runtime";import{Fragment as Ws,jsx as Xs,jsxs as qs}from"react/jsx-runtime";import{jsx as Zs}from"react/jsx-runtime";import{jsx as on}from"react/jsx-runtime";import{jsx as rn}from"react/jsx-runtime";import{jsx as K,jsxs as ae}from"react/jsx-runtime";var so=v.options,no=v.states,ao={...v.defaultOptions,variant:"vertical"},ro=[{name:"vertical",title:"Vertical"},{name:"horizontal",title:"Horizontal"}],lo=[],J=t=>{let{variant:e,...o}=t;return e==="horizontal"?ae(v,{layout:"horizontal",...o,children:[K(k,{children:K(H,{id:u("cb"),defaultChecked:!0,children:"Label"})}),K(k,{children:K(H,{id:u("cb"),children:"Label"})}),K(k,{children:K(H,{id:u("cb"),children:"Label"})})]}):ae(v,{...o,children:[K(k,{children:K(H,{id:u("cb"),defaultChecked:!0,children:"Label"})}),K(k,{children:K(H,{id:u("cb"),children:"Label"})}),K(k,{children:K(H,{id:u("cb"),children:"Label"})})]})};J.options=so;J.states=no;J.variants=ro;J.defaultOptions=ao;J.modifiers=lo;J.className=v.className;import{jsx as xo}from"react/jsx-runtime";var mo=R.options,co=R.states,po=R.defaultOptions,uo=[],fo=[],Q=t=>xo(H,{id:u("checkbox"),...t,defaultChecked:!0,children:"Label"});Q.options=mo;Q.states=co;Q.variants=uo;Q.defaultOptions=po;Q.modifiers=fo;Q.className=R.className;import{jsx as Y,jsxs as No}from"react/jsx-runtime";var Et="k-list-item",Lo=[l.hover,l.focus,l.selected,l.disabled],bo={},ho={},m=t=>{let{text:e,iconName:o,iconClassName:n,showCheckbox:a,checked:p,hover:c,focus:d,selected:f,disabled:x,actions:b,description:M,id:h,...C}=t,w=e||t.children,P=e||(typeof w=="string"?w:void 0);return No("li",{...C,id:h,role:"option",tabIndex:d?0:-1,"aria-selected":f?"true":"false","aria-disabled":x?"true":void 0,className:i(t.className,Et,g(Et,{hover:c,focus:d,disabled:x,selected:f})),children:[a&&Y(S,{checked:p,disabled:x,"aria-label":P,tabIndex:-1}),o&&Y("span",{className:"k-list-item-icon-wrapper",children:Y(A,{icon:o,className:i("k-list-item-icon",n)})}),Y("span",{className:"k-list-item-text",children:w}),b&&Y("div",{className:"k-list-item-actions",children:b}),M&&Y("span",{className:"k-list-item-description",children:M})]})};m.states=Lo;m.options=bo;m.className=Et;m.defaultOptions=ho;m.moduleName=U;m.folderName=X;import{jsx as Io}from"react/jsx-runtime";var Co="k-list-ul",mt=t=>{let{children:e,role:o,id:n,...a}=t;return Io("ul",{...a,id:n,role:o,className:i(Co,t.className),children:e})};import{jsx as Tt,jsxs as ko}from"react/jsx-runtime";var vo="k-list-content",z=t=>{let{virtualization:e,grouping:o,"aria-label":n,"aria-labelledby":a,listboxId:p,...c}=t;return ko("div",{...c,className:i(vo,t.className),role:o?"listbox":void 0,id:o?p:void 0,"aria-label":o?n:void 0,"aria-labelledby":o?a:void 0,children:[o?t.children:Tt(mt,{role:"listbox",id:p,"aria-label":n,"aria-labelledby":a,children:t.children}),e&&Tt("div",{className:"k-height-container",children:Tt("div",{})})]})};import{jsx as Kt,jsxs as Oo}from"react/jsx-runtime";var ct="k-list-sticky-header",go=[l.hover,l.focus,l.selected],yo={},Mo={},dt=t=>{let{label:e="Select all",showCheckbox:o=!0,checked:n,indeterminate:a,hover:p,focus:c,selected:d,...f}=t;return Kt("div",{...f,className:i(ct,t.className),children:Oo("div",{className:i(`${ct}-item`,g(`${ct}-item`,{hover:p,focus:c,selected:d})),"aria-label":e,...!o&&{tabIndex:0,"aria-selected":d?"true":"false"},children:[o&&Kt(S,{checked:n,indeterminate:a,"aria-label":e}),Kt("span",{className:"k-list-item-text",children:e})]})})};dt.states=go;dt.options=yo;dt.className=ct;dt.defaultOptions=Mo;import{Fragment as ea,jsx as ta,jsxs as oa}from"react/jsx-runtime";import{jsx as ra,jsxs as la}from"react/jsx-runtime";import{jsx as To}from"react/jsx-runtime";var Bt="k-list-optionlabel",Ao=[l.hover,l.focus,l.selected,l.disabled],So={},Eo={},pt=t=>{let{text:e,hover:o,focus:n,selected:a,disabled:p,...c}=t;return To("div",{...c,className:i(Bt,g(Bt,{hover:o,focus:n,selected:a,disabled:p})),children:e})};pt.states=Ao;pt.options=So;pt.className=Bt;pt.defaultOptions=Eo;import{jsx as _o}from"react/jsx-runtime";var Rt="k-list-custom-value",Ko=[l.hover,l.focus,l.selected,l.disabled],Bo={},Ro={},ut=t=>{let{text:e,hover:o,focus:n,selected:a,disabled:p,...c}=t;return _o("div",{...c,className:i(Rt,g(Rt,{hover:o,focus:n,selected:a,disabled:p})),children:e})};ut.states=Ko;ut.options=Bo;ut.className=Rt;ut.defaultOptions=Ro;import{Fragment as Ca,jsx as Na,jsxs as Ia}from"react/jsx-runtime";import{Fragment as Oa,jsx as Ma,jsxs as Aa}from"react/jsx-runtime";import{Fragment as _a,jsx as Ba,jsxs as Ra}from"react/jsx-runtime";import{Fragment as Ua,jsx as Da,jsxs as Ga}from"react/jsx-runtime";import{jsx as Xa}from"react/jsx-runtime";import{Fragment as Za,jsx as Ya,jsxs as ja}from"react/jsx-runtime";import{Fragment as nr,jsx as sr,jsxs as ar}from"react/jsx-runtime";var _t="listbox",re=_t;import{jsx as it,jsxs as Po}from"react/jsx-runtime";var Ht="k-listbox",zo=[l.disabled],wo={size:[s.undefined,s.small,s.medium,s.large]},le={actionsPosition:"left"},E=t=>{let{size:e,disabled:o,children:n,actionsPosition:a=le.actionsPosition,actions:p,dir:c,"aria-label":d,multiselectable:f,id:x,...b}=t,M=x?`${x}-list`:void 0,h={left:"Move left",right:"Move right",to:"Move all right",from:"Move all left",up:"Move up",down:"Move down",x:"Remove"};return Po("div",{...b,dir:c,className:i(t.className,Ht,g(Ht,{disabled:o}),{[`k-listbox-actions-${a}`]:a}),children:[p&&it("div",{className:"k-listbox-actions",role:"toolbar","aria-label":"ListBox actions","aria-controls":M,children:p.map(C=>it(L,{icon:{left:c!=="rtl"?"chevron-left":"chevron-right",right:c!=="rtl"?"chevron-right":"chevron-left",to:c!=="rtl"?"chevron-double-right":"chevron-double-left",from:c!=="rtl"?"chevron-double-left":"chevron-double-right",up:"chevron-up",down:"chevron-down",x:"x"}[C],size:e,"aria-label":h[C]||C},C))}),it("div",{className:i("k-list-scroller","k-selectable"),children:it(I,{size:e,children:it(z,{"aria-label":d,"aria-multiselectable":f,listboxId:M,children:n})})})]})};E.states=zo;E.options=wo;E.className=Ht;E.defaultOptions=le;E.moduleName=_t;E.folderName=re;import{jsx as N,jsxs as ft}from"react/jsx-runtime";var Do=E.options,Go=E.states,Uo={...E.defaultOptions,variant:"single"},Fo=[{name:"single",title:"Single"},{name:"multiple",title:"Multiple"}],$o=[],Z=t=>{let{variant:e,...o}={...t};return e==="multiple"?ft("div",{className:"k-d-flex",children:[ft(xt,{...o,style:{height:"300px",width:"200px"},className:"k-pr-2",actionsPosition:"right",actions:["up","down","left","right","to","from","x"],children:[N(m,{selected:!0,children:"List item"}),N(m,{children:"List item"}),N(m,{children:"List item"}),N(m,{children:"List item"}),N(m,{children:"List item"}),N(m,{children:"List item"}),N(m,{children:"List item"})]}),ft(xt,{...t,style:{height:"300px",width:"200px"},actionsPosition:"right",actions:["up","down","x"],children:[N(m,{children:"List item"}),N(m,{selected:!0,children:"List item"})]})]}):ft(xt,{...o,style:{height:"300px",width:"200px"},actionsPosition:"right",actions:["up","down","left","right","to","from","x"],children:[N(m,{selected:!0,children:"List item"}),N(m,{children:"List item"}),N(m,{children:"List item"}),N(m,{children:"List item"}),N(m,{children:"List item"}),N(m,{children:"List item"}),N(m,{children:"List item"})]})};Z.options=Do;Z.states=Go;Z.variants=Fo;Z.defaultOptions=Uo;Z.modifiers=$o;Z.className=E.className;import{jsx as $}from"react/jsx-runtime";var xt=t=>{let e=u("listbox"),o=u("lb-item"),n=u("lb-item"),a=u("lb-item"),p=u("lb-item"),c=u("lb-item"),d=u("lb-item");return $(E,{id:e,"aria-label":"Available items",actions:["up","down","left","right","to","from","x"],children:[$(m,{id:o,focus:!0,children:"List item 1"},"ListItem1"),$(m,{id:n,selected:!0,children:"List item 2"},"ListItem2"),$(m,{id:a,children:"List item 3"},"ListItem3"),$(m,{id:p,children:"List item 4"},"ListItem4"),$(m,{id:c,children:"List item 5"},"ListItem5"),$(m,{id:d,children:"List item 6"},"ListItem6")],...t})};export{xt as ListBoxNormal};
+var i=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?i(...e):typeof e=="object"?Object.keys(e).map((o,n)=>e[n]||e[o]&&o||null).filter(o=>o!==null).join(" "):e).filter(e=>!!e).join(" ");var B=(t,e)=>i({[`${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"}),y=(t,e)=>{let{valid:o,invalid:n,hover:a,focus:p,checked:d,active:c,selected:u,disabled:b,indeterminate:L,loading:M,empty:N,readonly:S,highlighted:z,..._}=e;return i({"k-valid":o,"k-invalid":n,"k-hover":a,"k-focus":p,"k-checked":d,"k-active":c,"k-selected":u,"k-disabled":b,"k-indeterminate":L&&!d,"k-loading":M,"k-empty":N,"k-readonly":S,"k-highlighted":z},Object.keys(_).reduce((C,h)=>(h.startsWith("k-")?C[h]=_[h]:C[`k-${h}`]=_[h],C),{}))};function wt(t,e){if(!e)return{};let o=Array.isArray(e)?e:[e];return Object.fromEntries(o.map(n=>[`k-${n}`,!0]))}var s={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},O={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"},G={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},H={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"},l={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 bt={};function f(t){return bt[t]=(bt[t]||0)+1,`k-${t}-${bt[t]}`}import{Fragment as be,jsx as Dt}from"react/jsx-runtime";var Lt="k-font-icon",ue=[],fe={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[r.undefined,r.base,r.primary,r.secondary,r.tertiary,r.success,r.warning,r.error,r.info]},xe={},tt=t=>{let{size:e,themeColor:o,icon:n,rotate:a,flip:p,...d}=t;return n?Dt("span",{...d,className:i(t.className,Lt,B(Lt,{size:e}),{[`k-i-${n}`]:n,[`k-color-${o}`]:o,[`k-rotate-${a}`]:a,"k-flip-h":p==="h"||p==="both","k-flip-v":p==="v"||p==="both"}),"aria-hidden":"true"}):Dt(be,{})};tt.states=ue;tt.options=fe;tt.className=Lt;tt.defaultOptions=xe;var Gt=tt;import{Fragment as Ne,jsx as at}from"react/jsx-runtime";var ht="k-svg-icon",Le=[],he={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[r.undefined,r.base,r.primary,r.secondary,r.tertiary,r.success,r.warning,r.error,r.info],variant:[H.outline,H.solid,H.duotone]},Nt={viewBox:"0 0 24 24",variant:H.outline},et=t=>{let{size:e,themeColor:o,rotate:n,flip:a,viewBox:p=Nt.viewBox,variant:d=Nt.variant,icon:c,...u}=t;if(!c)return at(Ne,{});if(c==="none")return at("span",{...u,className:i(t.className,ht,B("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let b=typeof c=="object"&&c.name&&c.name,L=typeof c=="object"?d&&c.variants?.[d]||c.variants?.outline||c.content:void 0;return at("span",{...u,className:i(t.className,ht,B("k-icon",{size:e}),{[`k-svg-i-${b}`]:b,[`k-color-${o}`]:o,[`k-rotate-${n}`]:n,"k-flip-h":a==="h"||a==="both","k-flip-v":a==="v"||a==="both"}),"aria-hidden":"true",children:at("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof c=="object"?c.viewBox:p,dangerouslySetInnerHTML:L!==void 0?{__html:L}:void 0,children:c?void 0:t.children})})};et.states=Le;et.options=he;et.className=ht;et.defaultOptions=Nt;var Ct=et;import*as kt from"@progress/kendo-svg-icons";var Ut="icon",Ft="icons";import{useContext as ke}from"react";import{createContext as Ce}from"react";var $t=Ce({iconsType:"svg"});import{Fragment as Vt,jsx as ot}from"react/jsx-runtime";var rt="k-icon",ve=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),Ie=[],ge={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[r.undefined,r.base,r.primary,r.secondary,r.tertiary,r.success,r.warning,r.error,r.info],variant:[H.outline,H.solid,H.duotone]},lt={viewBox:"0 0 24 24",type:"svg",variant:H.outline},A=t=>{let{iconsType:e}=ke($t),{size:o,themeColor:n,icon:a,type:p=e||lt.type,rotate:d,flip:c,viewBox:u=lt.viewBox,variant:b=lt.variant,...L}=t;if(!a)return ot(Vt,{});if((e||p)==="svg"){if(a==="none")return ot(Ct,{...L,className:i(t.className,rt),icon:a,size:o,variant:b});let N=kt[a]?a:ve(`${a}-icon`);return kt[N]?ot(Ct,{...L,className:i(t.className,rt),icon:kt[N],size:o,themeColor:n,rotate:d,flip:c,viewBox:u,variant:b}):ot(Vt,{})}return ot(Gt,{...L,className:i(t.className,rt),icon:a,size:o,themeColor:n,rotate:d,flip:c})};A.states=Ie;A.options=ge;A.defaultOptions=lt;A.className=rt;A.moduleName=Ut;A.folderName=Ft;var vt="button",Xt=vt;import{Fragment as It,jsx as D,jsxs as Wt}from"react/jsx-runtime";var it="k-button",ye=["icon-button"],Oe=[l.hover,l.focus,l.active,l.selected,l.disabled,l.generating],Me={size:[s.undefined,s.xsmall,s.small,s.medium,s.large],rounded:[O.undefined,O.none,O.small,O.medium,O.large,O.full],fillMode:[G.undefined,G.solid,G.flat,G.outline,G.clear,G.link],themeColor:[r.undefined,r.base,r.primary,r.secondary,r.tertiary,r.success,r.warning,r.error,r.info,r.inverse]},gt={showArrow:!1,arrowIconName:"chevron-down"},x=t=>{let{as:e="button",size:o,rounded:n,fillMode:a,themeColor:p,showArrow:d=gt.showArrow,arrowIconName:c=gt.arrowIconName,variant:u,hover:b,focus:L,active:M,selected:N,disabled:S,togglable:z,ariaDisabled:_,icon:C,endIcon:h,iconSize:zt,text:nt,iconClassName:Pt,className:me,...ce}=t,de=C!=null,pe=t.children!==void 0;return Wt(e,{className:i(me,it,wt(it,u),B(it,{size:o,rounded:n,fillMode:a,themeColor:p}),y(it,{hover:b,focus:L,active:M,disabled:S||_,selected:N}),{"k-icon-button":!nt&&!pe&&de}),"aria-pressed":z?N?"true":"false":void 0,...ce,"aria-disabled":_?"true":void 0,disabled:S||void 0,children:[typeof C=="string"&&C&&D(A,{className:i(Pt,"k-button-icon"),icon:C,size:zt}),C&&typeof C!="string"&&D(It,{children:C}),nt?Wt(It,{children:[nt&&D("span",{className:"k-button-text",children:nt}),t.children]}):t.children&&D("span",{className:"k-button-text",children:t.children}),typeof h=="string"&&h&&D(A,{className:i(Pt,"k-button-icon"),icon:h,size:zt}),h&&typeof h!="string"&&D(It,{children:h}),d&&D("span",{className:"k-menu-button-arrow k-button-arrow",children:D(A,{icon:c})})]})};x.states=Oe;x.options=Me;x.variants=ye;x.className=it;x.defaultOptions=gt;x.moduleName=vt;x.folderName=Xt;import{jsx as Se}from"react/jsx-runtime";var qt=t=>Se(x,{icon:"folder",...t,"aria-label":t["aria-label"]||"Folder",children:void 0});import{jsx as Ae}from"react/jsx-runtime";var Jt=t=>Ae(x,{icon:"folder",children:"Button",...t});import{jsx as Ee}from"react/jsx-runtime";var Qt=t=>Ee(x,{children:"Button",...t});import{jsx as yt}from"react/jsx-runtime";var Te=x.options,Ke=x.states,Be={...x.defaultOptions,variant:"text"},Re=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],_e=[],V=t=>{let{variant:e,...o}=t;switch(e){case"icon-only":return yt(qt,{...o,icon:"star"});case"icon-and-text":return yt(Jt,{...o,icon:"star",children:"Button"});default:return yt(Qt,{...o,children:"Button"})}};V.options=Te;V.states=Ke;V.variants=Re;V.defaultOptions=Be;V.modifiers=_e;V.className=x.className;import St from"react";import{jsx as Yt}from"react/jsx-runtime";var He="k-list-group-sticky-header",Ot=t=>Yt("div",{className:i(He,t.className),children:Yt("div",{className:"k-list-header-text",children:t.children})});import{jsx as Pe}from"react/jsx-runtime";var ze="k-no-data",Mt=t=>{let{live:e,...o}=t;return Pe("span",{...o,className:i(ze,t.className),"aria-live":e?"polite":void 0,children:t.children})};var U="list",X=U;import{jsx as Zt,jsxs as jt}from"react/jsx-runtime";var At="k-list",we=[],De={size:[s.undefined,s.small,s.medium,s.large]},Ge={},v=t=>{let{size:e,virtualization:o,children:n,header:a,selectAll:p,optionLabel:d,customValue:c,noData:u,screenReaders:b,...L}=t,N=St.Children.toArray(n)[0],S=N?.props?.children?St.Children.count(N.props.children):St.Children.count(n);return jt("div",{...L,className:i(t.className,At,B(At,{size:e}),{"k-virtual-list":o}),children:[d,p,c,a&&Zt(Ot,{children:a}),n||(u!==void 0?u:Zt(Mt,{live:!0,children:"No data found."})),b&&n&&jt(Mt,{className:"k-sr-only",live:!0,children:[S," items found."]})]})};v.states=we;v.options=De;v.className=At;v.defaultOptions=Ge;v.moduleName=U;v.folderName=X;import{jsx as Ve}from"react/jsx-runtime";var te="k-list-container",Ue=[],Fe={},$e={},W=t=>{let{...e}=t;return Ve("div",{...e,className:i(t.className,te),children:t.children})};W.states=Ue;W.options=Fe;W.className=te;W.defaultOptions=$e;W.moduleName=U;W.folderName=X;var F="checkbox",q=F;import{jsx as ee}from"react/jsx-runtime";var mt="k-checkbox",Xe=[l.hover,l.focus,l.valid,l.invalid,l.required,l.disabled,l.checked,l.indeterminate],We={size:[s.undefined,s.small,s.medium,s.large],rounded:[O.undefined,O.none,O.small,O.medium,O.large,O.full]},qe={},E=t=>{let{id:e,checked:o,indeterminate:n,hover:a,focus:p,disabled:d,invalid:c,valid:u,required:b,size:L,rounded:M,wrapperRole:N,...S}=t;return ee("span",{className:"k-checkbox-wrap",role:N,children:ee("input",{...S,id:e,type:"checkbox",defaultChecked:o,required:b,disabled:d||void 0,"aria-invalid":c?"true":void 0,className:i(t.className,mt,B(mt,{size:L,rounded:M}),y(mt,{hover:a,focus:p,disabled:d,invalid:c,valid:u,indeterminate:n,checked:o}))})})};E.states=Xe;E.options=We;E.className=mt;E.defaultOptions=qe;E.moduleName=F;E.folderName=q;var R=E;import{jsx as Ye}from"react/jsx-runtime";var oe="k-checkbox-list",Je=[],Qe={},ie={layout:"vertical"},I=t=>{let{layout:e=ie.layout,...o}=t;return Ye("ul",{...o,className:i(t.className,oe,{[`k-list-${e}`]:e}),children:t.children})};I.states=Je;I.options=Qe;I.className=oe;I.defaultOptions=ie;I.moduleName=F;I.folderName=q;import{jsx as eo}from"react/jsx-runtime";var se="k-checkbox-list-item",Ze=[],je={},to={},g=t=>{let{...e}=t;return eo("li",{...e,className:i(t.className,se),children:t.children})};g.states=Ze;g.options=je;g.className=se;g.defaultOptions=to;g.moduleName=F;g.folderName=q;import{Fragment as oo,jsx as ne,jsxs as io}from"react/jsx-runtime";var P=({children:t="Label",id:e="cb-label-after",...o})=>io(oo,{children:[ne(R,{id:e,...o}),ne("label",{className:"k-checkbox-label",htmlFor:e,children:t})]});import{Fragment as _s,jsx as Rs,jsxs as Hs}from"react/jsx-runtime";import{Fragment as Gs,jsx as Ds,jsxs as Us}from"react/jsx-runtime";import{Fragment as Ws,jsx as Xs,jsxs as qs}from"react/jsx-runtime";import{jsx as Zs}from"react/jsx-runtime";import{jsx as on}from"react/jsx-runtime";import{jsx as rn}from"react/jsx-runtime";import{jsx as K,jsxs as ae}from"react/jsx-runtime";var so=I.options,no=I.states,ao={...I.defaultOptions,variant:"vertical"},ro=[{name:"vertical",title:"Vertical"},{name:"horizontal",title:"Horizontal"}],lo=[],J=t=>{let{variant:e,...o}=t;return e==="horizontal"?ae(I,{layout:"horizontal",...o,children:[K(g,{children:K(P,{id:f("cb"),defaultChecked:!0,children:"Label"})}),K(g,{children:K(P,{id:f("cb"),children:"Label"})}),K(g,{children:K(P,{id:f("cb"),children:"Label"})})]}):ae(I,{...o,children:[K(g,{children:K(P,{id:f("cb"),defaultChecked:!0,children:"Label"})}),K(g,{children:K(P,{id:f("cb"),children:"Label"})}),K(g,{children:K(P,{id:f("cb"),children:"Label"})})]})};J.options=so;J.states=no;J.variants=ro;J.defaultOptions=ao;J.modifiers=lo;J.className=I.className;import{jsx as xo}from"react/jsx-runtime";var mo=R.options,co=R.states,po=R.defaultOptions,uo=[],fo=[],Q=t=>xo(P,{id:f("checkbox"),...t,defaultChecked:!0,children:"Label"});Q.options=mo;Q.states=co;Q.variants=uo;Q.defaultOptions=po;Q.modifiers=fo;Q.className=R.className;import{jsx as Y,jsxs as No}from"react/jsx-runtime";var Et="k-list-item",bo=[l.hover,l.focus,l.selected,l.disabled],Lo={},ho={},m=t=>{let{text:e,iconName:o,iconClassName:n,showCheckbox:a,checked:p,hover:d,focus:c,selected:u,disabled:b,actions:L,description:M,id:N,...S}=t,z=e||t.children,_=e||(typeof z=="string"?z:void 0);return No("li",{...S,id:N,role:"option",tabIndex:c?0:-1,"aria-selected":u?"true":"false","aria-disabled":b?"true":void 0,className:i(t.className,Et,y(Et,{hover:d,focus:c,disabled:b,selected:u})),children:[a&&Y(E,{checked:p,disabled:b,"aria-label":_,tabIndex:-1}),o&&Y("span",{className:"k-list-item-icon-wrapper",children:Y(A,{icon:o,className:i("k-list-item-icon",n)})}),Y("span",{className:"k-list-item-text",children:z}),L&&Y("div",{className:"k-list-item-actions",children:L}),M&&Y("span",{className:"k-list-item-description",children:M})]})};m.states=bo;m.options=Lo;m.className=Et;m.defaultOptions=ho;m.moduleName=U;m.folderName=X;import{jsx as ko}from"react/jsx-runtime";var Co="k-list-ul",ct=t=>{let{children:e,role:o,id:n,...a}=t;return ko("ul",{...a,id:n,role:o,className:i(Co,t.className),children:e})};import{jsx as Tt,jsxs as Io}from"react/jsx-runtime";var vo="k-list-content",w=t=>{let{virtualization:e,grouping:o,"aria-label":n,"aria-labelledby":a,listboxId:p,...d}=t;return Io("div",{...d,className:i(vo,t.className),role:o?"listbox":void 0,id:o?p:void 0,"aria-label":o?n:void 0,"aria-labelledby":o?a:void 0,children:[o?t.children:Tt(ct,{role:"listbox",id:p,"aria-label":n,"aria-labelledby":a,children:t.children}),e&&Tt("div",{className:"k-height-container",children:Tt("div",{})})]})};import{jsx as Kt,jsxs as Mo}from"react/jsx-runtime";var dt="k-list-sticky-header",go=[l.hover,l.focus,l.selected],yo={},Oo={},pt=t=>{let{label:e="Select all",showCheckbox:o=!0,checked:n,indeterminate:a,hover:p,focus:d,selected:c,...u}=t;return Kt("div",{...u,className:i(dt,t.className),children:Mo("div",{className:i(`${dt}-item`,y(`${dt}-item`,{hover:p,focus:d,selected:c})),"aria-label":e,...!o&&{tabIndex:0,"aria-selected":c?"true":"false"},children:[o&&Kt(E,{checked:n,indeterminate:a,"aria-label":e}),Kt("span",{className:"k-list-item-text",children:e})]})})};pt.states=go;pt.options=yo;pt.className=dt;pt.defaultOptions=Oo;import{Fragment as ea,jsx as ta,jsxs as oa}from"react/jsx-runtime";import{jsx as ra,jsxs as la}from"react/jsx-runtime";import{jsx as To}from"react/jsx-runtime";var Bt="k-list-optionlabel",So=[l.hover,l.focus,l.selected,l.disabled],Ao={},Eo={},ut=t=>{let{text:e,hover:o,focus:n,selected:a,disabled:p,...d}=t;return To("div",{...d,className:i(Bt,y(Bt,{hover:o,focus:n,selected:a,disabled:p})),children:e})};ut.states=So;ut.options=Ao;ut.className=Bt;ut.defaultOptions=Eo;import{jsx as _o}from"react/jsx-runtime";var Rt="k-list-custom-value",Ko=[l.hover,l.focus,l.selected,l.disabled],Bo={},Ro={},ft=t=>{let{text:e,hover:o,focus:n,selected:a,disabled:p,...d}=t;return _o("div",{...d,className:i(Rt,y(Rt,{hover:o,focus:n,selected:a,disabled:p})),children:e})};ft.states=Ko;ft.options=Bo;ft.className=Rt;ft.defaultOptions=Ro;import{Fragment as Ca,jsx as Na,jsxs as ka}from"react/jsx-runtime";import{Fragment as Ma,jsx as Oa,jsxs as Sa}from"react/jsx-runtime";import{Fragment as _a,jsx as Ba,jsxs as Ra}from"react/jsx-runtime";import{Fragment as Ua,jsx as Da,jsxs as Ga}from"react/jsx-runtime";import{jsx as Xa}from"react/jsx-runtime";import{Fragment as Za,jsx as Ya,jsxs as ja}from"react/jsx-runtime";import{Fragment as nr,jsx as sr,jsxs as ar}from"react/jsx-runtime";var _t="listbox",re=_t;import{jsx as Z,jsxs as wo}from"react/jsx-runtime";var Ht="k-listbox",zo=[l.disabled],Po={size:[s.undefined,s.small,s.medium,s.large]},le={actionsPosition:"left"},T=t=>{let{size:e,disabled:o,children:n,actionsPosition:a=le.actionsPosition,actions:p,actionsScrollable:d,actionsScrollingPosition:c,dir:u,"aria-label":b,multiselectable:L,id:M,...N}=t,S=M?`${M}-list`:void 0,z={left:"Move left",right:"Move right",to:"Move all right",from:"Move all left",up:"Move up",down:"Move down",x:"Remove"},_={left:u!=="rtl"?"chevron-left":"chevron-right",right:u!=="rtl"?"chevron-right":"chevron-left",to:u!=="rtl"?"chevron-double-right":"chevron-double-left",from:u!=="rtl"?"chevron-double-left":"chevron-double-right",up:"chevron-up",down:"chevron-down",x:"x"},C=p?.map(h=>Z(x,{icon:_[h],size:e,"aria-label":z[h]||h},h));return wo("div",{...N,dir:u,className:i(t.className,Ht,y(Ht,{disabled:o}),{[`k-listbox-actions-${a}`]:a}),children:[p&&Z("div",{className:i("k-listbox-actions",{"k-listbox-actions-scrollable":d,"k-listbox-actions-scrollable-start":d&&c==="start","k-listbox-actions-scrollable-end":d&&c==="end"}),role:"toolbar","aria-label":"ListBox actions","aria-controls":S,children:d?Z("div",{className:"k-listbox-actions-items",children:C}):C}),Z("div",{className:i("k-list-scroller","k-selectable"),children:Z(v,{size:e,children:Z(w,{"aria-label":b,"aria-multiselectable":L,listboxId:S,children:n})})})]})};T.states=zo;T.options=Po;T.className=Ht;T.defaultOptions=le;T.moduleName=_t;T.folderName=re;import{jsx as Hr}from"react/jsx-runtime";import{jsx as k,jsxs as xt}from"react/jsx-runtime";var Do=T.options,Go=T.states,Uo={...T.defaultOptions,variant:"single"},Fo=[{name:"single",title:"Single"},{name:"multiple",title:"Multiple"}],$o=[],j=t=>{let{variant:e,...o}={...t};return e==="multiple"?xt("div",{className:"k-d-flex",children:[xt(st,{...o,style:{height:"300px",width:"200px"},className:"k-pr-2",actionsPosition:"right",actions:["up","down","left","right","to","from","x"],children:[k(m,{selected:!0,children:"List item"}),k(m,{children:"List item"}),k(m,{children:"List item"}),k(m,{children:"List item"}),k(m,{children:"List item"}),k(m,{children:"List item"}),k(m,{children:"List item"})]}),xt(st,{...t,style:{height:"300px",width:"200px"},actionsPosition:"right",actions:["up","down","x"],children:[k(m,{children:"List item"}),k(m,{selected:!0,children:"List item"})]})]}):xt(st,{...o,style:{height:"300px",width:"200px"},actionsPosition:"right",actions:["up","down","left","right","to","from","x"],children:[k(m,{selected:!0,children:"List item"}),k(m,{children:"List item"}),k(m,{children:"List item"}),k(m,{children:"List item"}),k(m,{children:"List item"}),k(m,{children:"List item"}),k(m,{children:"List item"})]})};j.options=Do;j.states=Go;j.variants=Fo;j.defaultOptions=Uo;j.modifiers=$o;j.className=T.className;import{jsx as $}from"react/jsx-runtime";var st=t=>{let e=f("listbox"),o=f("lb-item"),n=f("lb-item"),a=f("lb-item"),p=f("lb-item"),d=f("lb-item"),c=f("lb-item");return $(T,{id:e,"aria-label":"Available items",actions:["up","down","left","right","to","from","x"],children:[$(m,{id:o,focus:!0,children:"List item 1"},"ListItem1"),$(m,{id:n,selected:!0,children:"List item 2"},"ListItem2"),$(m,{id:a,children:"List item 3"},"ListItem3"),$(m,{id:p,children:"List item 4"},"ListItem4"),$(m,{id:d,children:"List item 5"},"ListItem5"),$(m,{id:c,children:"List item 6"},"ListItem6")],...t})};export{st as ListBoxNormal};

package/dist/esm/listbox/templates/listbox-scrollable.mjs

@@ -0,0 +1 @@
+var i=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?i(...e):typeof e=="object"?Object.keys(e).map((o,n)=>e[n]||e[o]&&o||null).filter(o=>o!==null).join(" "):e).filter(e=>!!e).join(" ");var B=(t,e)=>i({[`${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"}),y=(t,e)=>{let{valid:o,invalid:n,hover:a,focus:p,checked:d,active:c,selected:u,disabled:b,indeterminate:L,loading:M,empty:N,readonly:S,highlighted:z,..._}=e;return i({"k-valid":o,"k-invalid":n,"k-hover":a,"k-focus":p,"k-checked":d,"k-active":c,"k-selected":u,"k-disabled":b,"k-indeterminate":L&&!d,"k-loading":M,"k-empty":N,"k-readonly":S,"k-highlighted":z},Object.keys(_).reduce((C,h)=>(h.startsWith("k-")?C[h]=_[h]:C[`k-${h}`]=_[h],C),{}))};function wt(t,e){if(!e)return{};let o=Array.isArray(e)?e:[e];return Object.fromEntries(o.map(n=>[`k-${n}`,!0]))}var s={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},O={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"},G={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},H={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"},l={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 bt={};function f(t){return bt[t]=(bt[t]||0)+1,`k-${t}-${bt[t]}`}import{Fragment as be,jsx as Dt}from"react/jsx-runtime";var Lt="k-font-icon",ue=[],fe={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[r.undefined,r.base,r.primary,r.secondary,r.tertiary,r.success,r.warning,r.error,r.info]},xe={},et=t=>{let{size:e,themeColor:o,icon:n,rotate:a,flip:p,...d}=t;return n?Dt("span",{...d,className:i(t.className,Lt,B(Lt,{size:e}),{[`k-i-${n}`]:n,[`k-color-${o}`]:o,[`k-rotate-${a}`]:a,"k-flip-h":p==="h"||p==="both","k-flip-v":p==="v"||p==="both"}),"aria-hidden":"true"}):Dt(be,{})};et.states=ue;et.options=fe;et.className=Lt;et.defaultOptions=xe;var Gt=et;import{Fragment as Ne,jsx as at}from"react/jsx-runtime";var ht="k-svg-icon",Le=[],he={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[r.undefined,r.base,r.primary,r.secondary,r.tertiary,r.success,r.warning,r.error,r.info],variant:[H.outline,H.solid,H.duotone]},Nt={viewBox:"0 0 24 24",variant:H.outline},ot=t=>{let{size:e,themeColor:o,rotate:n,flip:a,viewBox:p=Nt.viewBox,variant:d=Nt.variant,icon:c,...u}=t;if(!c)return at(Ne,{});if(c==="none")return at("span",{...u,className:i(t.className,ht,B("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let b=typeof c=="object"&&c.name&&c.name,L=typeof c=="object"?d&&c.variants?.[d]||c.variants?.outline||c.content:void 0;return at("span",{...u,className:i(t.className,ht,B("k-icon",{size:e}),{[`k-svg-i-${b}`]:b,[`k-color-${o}`]:o,[`k-rotate-${n}`]:n,"k-flip-h":a==="h"||a==="both","k-flip-v":a==="v"||a==="both"}),"aria-hidden":"true",children:at("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof c=="object"?c.viewBox:p,dangerouslySetInnerHTML:L!==void 0?{__html:L}:void 0,children:c?void 0:t.children})})};ot.states=Le;ot.options=he;ot.className=ht;ot.defaultOptions=Nt;var Ct=ot;import*as kt from"@progress/kendo-svg-icons";var Ut="icon",Ft="icons";import{useContext as ke}from"react";import{createContext as Ce}from"react";var $t=Ce({iconsType:"svg"});import{Fragment as Vt,jsx as it}from"react/jsx-runtime";var rt="k-icon",ve=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),Ie=[],ge={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[r.undefined,r.base,r.primary,r.secondary,r.tertiary,r.success,r.warning,r.error,r.info],variant:[H.outline,H.solid,H.duotone]},lt={viewBox:"0 0 24 24",type:"svg",variant:H.outline},A=t=>{let{iconsType:e}=ke($t),{size:o,themeColor:n,icon:a,type:p=e||lt.type,rotate:d,flip:c,viewBox:u=lt.viewBox,variant:b=lt.variant,...L}=t;if(!a)return it(Vt,{});if((e||p)==="svg"){if(a==="none")return it(Ct,{...L,className:i(t.className,rt),icon:a,size:o,variant:b});let N=kt[a]?a:ve(`${a}-icon`);return kt[N]?it(Ct,{...L,className:i(t.className,rt),icon:kt[N],size:o,themeColor:n,rotate:d,flip:c,viewBox:u,variant:b}):it(Vt,{})}return it(Gt,{...L,className:i(t.className,rt),icon:a,size:o,themeColor:n,rotate:d,flip:c})};A.states=Ie;A.options=ge;A.defaultOptions=lt;A.className=rt;A.moduleName=Ut;A.folderName=Ft;var vt="button",Xt=vt;import{Fragment as It,jsx as D,jsxs as Wt}from"react/jsx-runtime";var st="k-button",ye=["icon-button"],Oe=[l.hover,l.focus,l.active,l.selected,l.disabled,l.generating],Me={size:[s.undefined,s.xsmall,s.small,s.medium,s.large],rounded:[O.undefined,O.none,O.small,O.medium,O.large,O.full],fillMode:[G.undefined,G.solid,G.flat,G.outline,G.clear,G.link],themeColor:[r.undefined,r.base,r.primary,r.secondary,r.tertiary,r.success,r.warning,r.error,r.info,r.inverse]},gt={showArrow:!1,arrowIconName:"chevron-down"},x=t=>{let{as:e="button",size:o,rounded:n,fillMode:a,themeColor:p,showArrow:d=gt.showArrow,arrowIconName:c=gt.arrowIconName,variant:u,hover:b,focus:L,active:M,selected:N,disabled:S,togglable:z,ariaDisabled:_,icon:C,endIcon:h,iconSize:zt,text:nt,iconClassName:Pt,className:me,...ce}=t,de=C!=null,pe=t.children!==void 0;return Wt(e,{className:i(me,st,wt(st,u),B(st,{size:o,rounded:n,fillMode:a,themeColor:p}),y(st,{hover:b,focus:L,active:M,disabled:S||_,selected:N}),{"k-icon-button":!nt&&!pe&&de}),"aria-pressed":z?N?"true":"false":void 0,...ce,"aria-disabled":_?"true":void 0,disabled:S||void 0,children:[typeof C=="string"&&C&&D(A,{className:i(Pt,"k-button-icon"),icon:C,size:zt}),C&&typeof C!="string"&&D(It,{children:C}),nt?Wt(It,{children:[nt&&D("span",{className:"k-button-text",children:nt}),t.children]}):t.children&&D("span",{className:"k-button-text",children:t.children}),typeof h=="string"&&h&&D(A,{className:i(Pt,"k-button-icon"),icon:h,size:zt}),h&&typeof h!="string"&&D(It,{children:h}),d&&D("span",{className:"k-menu-button-arrow k-button-arrow",children:D(A,{icon:c})})]})};x.states=Oe;x.options=Me;x.variants=ye;x.className=st;x.defaultOptions=gt;x.moduleName=vt;x.folderName=Xt;import{jsx as Se}from"react/jsx-runtime";var qt=t=>Se(x,{icon:"folder",...t,"aria-label":t["aria-label"]||"Folder",children:void 0});import{jsx as Ae}from"react/jsx-runtime";var Jt=t=>Ae(x,{icon:"folder",children:"Button",...t});import{jsx as Ee}from"react/jsx-runtime";var Qt=t=>Ee(x,{children:"Button",...t});import{jsx as yt}from"react/jsx-runtime";var Te=x.options,Ke=x.states,Be={...x.defaultOptions,variant:"text"},Re=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],_e=[],V=t=>{let{variant:e,...o}=t;switch(e){case"icon-only":return yt(qt,{...o,icon:"star"});case"icon-and-text":return yt(Jt,{...o,icon:"star",children:"Button"});default:return yt(Qt,{...o,children:"Button"})}};V.options=Te;V.states=Ke;V.variants=Re;V.defaultOptions=Be;V.modifiers=_e;V.className=x.className;import St from"react";import{jsx as Yt}from"react/jsx-runtime";var He="k-list-group-sticky-header",Ot=t=>Yt("div",{className:i(He,t.className),children:Yt("div",{className:"k-list-header-text",children:t.children})});import{jsx as Pe}from"react/jsx-runtime";var ze="k-no-data",Mt=t=>{let{live:e,...o}=t;return Pe("span",{...o,className:i(ze,t.className),"aria-live":e?"polite":void 0,children:t.children})};var U="list",X=U;import{jsx as Zt,jsxs as jt}from"react/jsx-runtime";var At="k-list",we=[],De={size:[s.undefined,s.small,s.medium,s.large]},Ge={},v=t=>{let{size:e,virtualization:o,children:n,header:a,selectAll:p,optionLabel:d,customValue:c,noData:u,screenReaders:b,...L}=t,N=St.Children.toArray(n)[0],S=N?.props?.children?St.Children.count(N.props.children):St.Children.count(n);return jt("div",{...L,className:i(t.className,At,B(At,{size:e}),{"k-virtual-list":o}),children:[d,p,c,a&&Zt(Ot,{children:a}),n||(u!==void 0?u:Zt(Mt,{live:!0,children:"No data found."})),b&&n&&jt(Mt,{className:"k-sr-only",live:!0,children:[S," items found."]})]})};v.states=we;v.options=De;v.className=At;v.defaultOptions=Ge;v.moduleName=U;v.folderName=X;import{jsx as Ve}from"react/jsx-runtime";var te="k-list-container",Ue=[],Fe={},$e={},W=t=>{let{...e}=t;return Ve("div",{...e,className:i(t.className,te),children:t.children})};W.states=Ue;W.options=Fe;W.className=te;W.defaultOptions=$e;W.moduleName=U;W.folderName=X;var F="checkbox",q=F;import{jsx as ee}from"react/jsx-runtime";var mt="k-checkbox",Xe=[l.hover,l.focus,l.valid,l.invalid,l.required,l.disabled,l.checked,l.indeterminate],We={size:[s.undefined,s.small,s.medium,s.large],rounded:[O.undefined,O.none,O.small,O.medium,O.large,O.full]},qe={},E=t=>{let{id:e,checked:o,indeterminate:n,hover:a,focus:p,disabled:d,invalid:c,valid:u,required:b,size:L,rounded:M,wrapperRole:N,...S}=t;return ee("span",{className:"k-checkbox-wrap",role:N,children:ee("input",{...S,id:e,type:"checkbox",defaultChecked:o,required:b,disabled:d||void 0,"aria-invalid":c?"true":void 0,className:i(t.className,mt,B(mt,{size:L,rounded:M}),y(mt,{hover:a,focus:p,disabled:d,invalid:c,valid:u,indeterminate:n,checked:o}))})})};E.states=Xe;E.options=We;E.className=mt;E.defaultOptions=qe;E.moduleName=F;E.folderName=q;var R=E;import{jsx as Ye}from"react/jsx-runtime";var oe="k-checkbox-list",Je=[],Qe={},ie={layout:"vertical"},I=t=>{let{layout:e=ie.layout,...o}=t;return Ye("ul",{...o,className:i(t.className,oe,{[`k-list-${e}`]:e}),children:t.children})};I.states=Je;I.options=Qe;I.className=oe;I.defaultOptions=ie;I.moduleName=F;I.folderName=q;import{jsx as eo}from"react/jsx-runtime";var se="k-checkbox-list-item",Ze=[],je={},to={},g=t=>{let{...e}=t;return eo("li",{...e,className:i(t.className,se),children:t.children})};g.states=Ze;g.options=je;g.className=se;g.defaultOptions=to;g.moduleName=F;g.folderName=q;import{Fragment as oo,jsx as ne,jsxs as io}from"react/jsx-runtime";var P=({children:t="Label",id:e="cb-label-after",...o})=>io(oo,{children:[ne(R,{id:e,...o}),ne("label",{className:"k-checkbox-label",htmlFor:e,children:t})]});import{Fragment as Hs,jsx as _s,jsxs as zs}from"react/jsx-runtime";import{Fragment as Us,jsx as Gs,jsxs as Fs}from"react/jsx-runtime";import{Fragment as qs,jsx as Ws,jsxs as Js}from"react/jsx-runtime";import{jsx as js}from"react/jsx-runtime";import{jsx as sn}from"react/jsx-runtime";import{jsx as ln}from"react/jsx-runtime";import{jsx as K,jsxs as ae}from"react/jsx-runtime";var so=I.options,no=I.states,ao={...I.defaultOptions,variant:"vertical"},ro=[{name:"vertical",title:"Vertical"},{name:"horizontal",title:"Horizontal"}],lo=[],J=t=>{let{variant:e,...o}=t;return e==="horizontal"?ae(I,{layout:"horizontal",...o,children:[K(g,{children:K(P,{id:f("cb"),defaultChecked:!0,children:"Label"})}),K(g,{children:K(P,{id:f("cb"),children:"Label"})}),K(g,{children:K(P,{id:f("cb"),children:"Label"})})]}):ae(I,{...o,children:[K(g,{children:K(P,{id:f("cb"),defaultChecked:!0,children:"Label"})}),K(g,{children:K(P,{id:f("cb"),children:"Label"})}),K(g,{children:K(P,{id:f("cb"),children:"Label"})})]})};J.options=so;J.states=no;J.variants=ro;J.defaultOptions=ao;J.modifiers=lo;J.className=I.className;import{jsx as xo}from"react/jsx-runtime";var mo=R.options,co=R.states,po=R.defaultOptions,uo=[],fo=[],Q=t=>xo(P,{id:f("checkbox"),...t,defaultChecked:!0,children:"Label"});Q.options=mo;Q.states=co;Q.variants=uo;Q.defaultOptions=po;Q.modifiers=fo;Q.className=R.className;import{jsx as Y,jsxs as No}from"react/jsx-runtime";var Et="k-list-item",bo=[l.hover,l.focus,l.selected,l.disabled],Lo={},ho={},m=t=>{let{text:e,iconName:o,iconClassName:n,showCheckbox:a,checked:p,hover:d,focus:c,selected:u,disabled:b,actions:L,description:M,id:N,...S}=t,z=e||t.children,_=e||(typeof z=="string"?z:void 0);return No("li",{...S,id:N,role:"option",tabIndex:c?0:-1,"aria-selected":u?"true":"false","aria-disabled":b?"true":void 0,className:i(t.className,Et,y(Et,{hover:d,focus:c,disabled:b,selected:u})),children:[a&&Y(E,{checked:p,disabled:b,"aria-label":_,tabIndex:-1}),o&&Y("span",{className:"k-list-item-icon-wrapper",children:Y(A,{icon:o,className:i("k-list-item-icon",n)})}),Y("span",{className:"k-list-item-text",children:z}),L&&Y("div",{className:"k-list-item-actions",children:L}),M&&Y("span",{className:"k-list-item-description",children:M})]})};m.states=bo;m.options=Lo;m.className=Et;m.defaultOptions=ho;m.moduleName=U;m.folderName=X;import{jsx as ko}from"react/jsx-runtime";var Co="k-list-ul",ct=t=>{let{children:e,role:o,id:n,...a}=t;return ko("ul",{...a,id:n,role:o,className:i(Co,t.className),children:e})};import{jsx as Tt,jsxs as Io}from"react/jsx-runtime";var vo="k-list-content",w=t=>{let{virtualization:e,grouping:o,"aria-label":n,"aria-labelledby":a,listboxId:p,...d}=t;return Io("div",{...d,className:i(vo,t.className),role:o?"listbox":void 0,id:o?p:void 0,"aria-label":o?n:void 0,"aria-labelledby":o?a:void 0,children:[o?t.children:Tt(ct,{role:"listbox",id:p,"aria-label":n,"aria-labelledby":a,children:t.children}),e&&Tt("div",{className:"k-height-container",children:Tt("div",{})})]})};import{jsx as Kt,jsxs as Mo}from"react/jsx-runtime";var dt="k-list-sticky-header",go=[l.hover,l.focus,l.selected],yo={},Oo={},pt=t=>{let{label:e="Select all",showCheckbox:o=!0,checked:n,indeterminate:a,hover:p,focus:d,selected:c,...u}=t;return Kt("div",{...u,className:i(dt,t.className),children:Mo("div",{className:i(`${dt}-item`,y(`${dt}-item`,{hover:p,focus:d,selected:c})),"aria-label":e,...!o&&{tabIndex:0,"aria-selected":c?"true":"false"},children:[o&&Kt(E,{checked:n,indeterminate:a,"aria-label":e}),Kt("span",{className:"k-list-item-text",children:e})]})})};pt.states=go;pt.options=yo;pt.className=dt;pt.defaultOptions=Oo;import{Fragment as oa,jsx as ea,jsxs as ia}from"react/jsx-runtime";import{jsx as la,jsxs as ma}from"react/jsx-runtime";import{jsx as To}from"react/jsx-runtime";var Bt="k-list-optionlabel",So=[l.hover,l.focus,l.selected,l.disabled],Ao={},Eo={},ut=t=>{let{text:e,hover:o,focus:n,selected:a,disabled:p,...d}=t;return To("div",{...d,className:i(Bt,y(Bt,{hover:o,focus:n,selected:a,disabled:p})),children:e})};ut.states=So;ut.options=Ao;ut.className=Bt;ut.defaultOptions=Eo;import{jsx as _o}from"react/jsx-runtime";var Rt="k-list-custom-value",Ko=[l.hover,l.focus,l.selected,l.disabled],Bo={},Ro={},ft=t=>{let{text:e,hover:o,focus:n,selected:a,disabled:p,...d}=t;return _o("div",{...d,className:i(Rt,y(Rt,{hover:o,focus:n,selected:a,disabled:p})),children:e})};ft.states=Ko;ft.options=Bo;ft.className=Rt;ft.defaultOptions=Ro;import{Fragment as ka,jsx as Ca,jsxs as va}from"react/jsx-runtime";import{Fragment as Sa,jsx as Ma,jsxs as Aa}from"react/jsx-runtime";import{Fragment as Ha,jsx as Ra,jsxs as _a}from"react/jsx-runtime";import{Fragment as Fa,jsx as Ga,jsxs as Ua}from"react/jsx-runtime";import{jsx as Wa}from"react/jsx-runtime";import{Fragment as ja,jsx as Za,jsxs as tr}from"react/jsx-runtime";import{Fragment as ar,jsx as nr,jsxs as rr}from"react/jsx-runtime";var _t="listbox",re=_t;import{jsx as Z,jsxs as wo}from"react/jsx-runtime";var Ht="k-listbox",zo=[l.disabled],Po={size:[s.undefined,s.small,s.medium,s.large]},le={actionsPosition:"left"},T=t=>{let{size:e,disabled:o,children:n,actionsPosition:a=le.actionsPosition,actions:p,actionsScrollable:d,actionsScrollingPosition:c,dir:u,"aria-label":b,multiselectable:L,id:M,...N}=t,S=M?`${M}-list`:void 0,z={left:"Move left",right:"Move right",to:"Move all right",from:"Move all left",up:"Move up",down:"Move down",x:"Remove"},_={left:u!=="rtl"?"chevron-left":"chevron-right",right:u!=="rtl"?"chevron-right":"chevron-left",to:u!=="rtl"?"chevron-double-right":"chevron-double-left",from:u!=="rtl"?"chevron-double-left":"chevron-double-right",up:"chevron-up",down:"chevron-down",x:"x"},C=p?.map(h=>Z(x,{icon:_[h],size:e,"aria-label":z[h]||h},h));return wo("div",{...N,dir:u,className:i(t.className,Ht,y(Ht,{disabled:o}),{[`k-listbox-actions-${a}`]:a}),children:[p&&Z("div",{className:i("k-listbox-actions",{"k-listbox-actions-scrollable":d,"k-listbox-actions-scrollable-start":d&&c==="start","k-listbox-actions-scrollable-end":d&&c==="end"}),role:"toolbar","aria-label":"ListBox actions","aria-controls":S,children:d?Z("div",{className:"k-listbox-actions-items",children:C}):C}),Z("div",{className:i("k-list-scroller","k-selectable"),children:Z(v,{size:e,children:Z(w,{"aria-label":b,"aria-multiselectable":L,listboxId:S,children:n})})})]})};T.states=zo;T.options=Po;T.className=Ht;T.defaultOptions=le;T.moduleName=_t;T.folderName=re;import{jsx as k,jsxs as xt}from"react/jsx-runtime";var Do=T.options,Go=T.states,Uo={...T.defaultOptions,variant:"single"},Fo=[{name:"single",title:"Single"},{name:"multiple",title:"Multiple"}],$o=[],tt=t=>{let{variant:e,...o}={...t};return e==="multiple"?xt("div",{className:"k-d-flex",children:[xt(j,{...o,style:{height:"300px",width:"200px"},className:"k-pr-2",actionsPosition:"right",actions:["up","down","left","right","to","from","x"],children:[k(m,{selected:!0,children:"List item"}),k(m,{children:"List item"}),k(m,{children:"List item"}),k(m,{children:"List item"}),k(m,{children:"List item"}),k(m,{children:"List item"}),k(m,{children:"List item"})]}),xt(j,{...t,style:{height:"300px",width:"200px"},actionsPosition:"right",actions:["up","down","x"],children:[k(m,{children:"List item"}),k(m,{selected:!0,children:"List item"})]})]}):xt(j,{...o,style:{height:"300px",width:"200px"},actionsPosition:"right",actions:["up","down","left","right","to","from","x"],children:[k(m,{selected:!0,children:"List item"}),k(m,{children:"List item"}),k(m,{children:"List item"}),k(m,{children:"List item"}),k(m,{children:"List item"}),k(m,{children:"List item"}),k(m,{children:"List item"})]})};tt.options=Do;tt.states=Go;tt.variants=Fo;tt.defaultOptions=Uo;tt.modifiers=$o;tt.className=T.className;import{jsx as $}from"react/jsx-runtime";var j=t=>{let e=f("listbox"),o=f("lb-item"),n=f("lb-item"),a=f("lb-item"),p=f("lb-item"),d=f("lb-item"),c=f("lb-item");return $(T,{id:e,"aria-label":"Available items",actions:["up","down","left","right","to","from","x"],children:[$(m,{id:o,focus:!0,children:"List item 1"},"ListItem1"),$(m,{id:n,selected:!0,children:"List item 2"},"ListItem2"),$(m,{id:a,children:"List item 3"},"ListItem3"),$(m,{id:p,children:"List item 4"},"ListItem4"),$(m,{id:d,children:"List item 5"},"ListItem5"),$(m,{id:c,children:"List item 6"},"ListItem6")],...t})};import{jsx as Vo}from"react/jsx-runtime";var Zr=({actionsScrollingPosition:t="start",...e})=>Vo(j,{actionsScrollable:!0,actionsScrollingPosition:t,...e});export{Zr as ListBoxScrollable};

package/dist/types/listbox/index.d.ts

@@ -1,3 +1,4 @@
 export * from './listbox.spec';
 export * from "./templates/listbox-normal";
+export * from "./templates/listbox-scrollable";
 export * from './demos/listbox';

package/dist/types/listbox/listbox.spec.d.ts

@@ -11,6 +11,8 @@ export type KendoListBoxProps = KendoListBoxOptions & {
     children?: React.JSX.Element[];
     actionsPosition?: 'left' | 'right' | 'top' | 'bottom';
     actions?: string[];
+    actionsScrollable?: boolean;
+    actionsScrollingPosition?: 'start' | 'end' | 'both';
     dir?: 'ltr' | 'rtl';
     'aria-label'?: string;
     multiselectable?: boolean;

package/dist/types/listbox/templates/listbox-scrollable.d.ts

@@ -0,0 +1,4 @@
+export declare const ListBoxScrollable: ({ actionsScrollingPosition, ...props }: {
+    [x: string]: any;
+    actionsScrollingPosition?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-themes-html",
   "description": "A collection of HTML helpers used for developing Kendo UI themes",
-  "version": "14.7.0-dev.6",
+  "version": "14.7.0-dev.8",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [

package/src/listbox/index.ts

@@ -1,3 +1,4 @@
 export * from './listbox.spec';
 export * from "./templates/listbox-normal";
+export * from "./templates/listbox-scrollable";
 export * from './demos/listbox';

package/src/listbox/listbox.spec.tsx

@@ -11,17 +11,19 @@ const states = [
 ];
 
 const options = {
-    size: [ Size.undefined, Size.small, Size.medium, Size.large ]
+    size: [Size.undefined, Size.small, Size.medium, Size.large]
 };
 
 export type KendoListBoxOptions = {
-  size?: (typeof options.size)[number] | null;
+    size?: (typeof options.size)[number] | null;
 };
 
 export type KendoListBoxProps = KendoListBoxOptions & {
     children?: React.JSX.Element[];
     actionsPosition?: 'left' | 'right' | 'top' | 'bottom';
     actions?: string[];
+    actionsScrollable?: boolean;
+    actionsScrollingPosition?: 'start' | 'end' | 'both';
     dir?: 'ltr' | 'rtl';
     'aria-label'?: string;
     multiselectable?: boolean;
@@ -59,6 +61,8 @@ export const ListBox: KendoComponent<KendoListBoxProps & KendoListBoxState & Rea
         children,
         actionsPosition = defaultOptions.actionsPosition,
         actions,
+        actionsScrollable,
+        actionsScrollingPosition,
         dir,
         'aria-label': ariaLabel,
         multiselectable,
@@ -78,6 +82,20 @@ export const ListBox: KendoComponent<KendoListBoxProps & KendoListBoxState & Rea
         "x": "Remove"
     };
 
+    const actionsIconMap = {
+        "left": dir !== "rtl" ? "chevron-left" : "chevron-right",
+        "right": dir !== 'rtl' ? "chevron-right" : "chevron-left",
+        "to": dir !== 'rtl' ? "chevron-double-right" : "chevron-double-left",
+        "from": dir !== 'rtl' ? "chevron-double-left" : "chevron-double-right",
+        "up": "chevron-up",
+        "down": "chevron-down",
+        "x": "x"
+    };
+
+    const actionButtons = actions?.map(action =>
+        <Button key={action} icon={actionsIconMap[action]} size={size} aria-label={actionsLabelMap[action] || action} />
+    );
+
     return (
         <div
             {...other}
@@ -93,26 +111,23 @@ export const ListBox: KendoComponent<KendoListBoxProps & KendoListBoxState & Rea
                 }
             )}
         >
-            { actions && (
-                <div className="k-listbox-actions"
+            {actions && (
+                <div className={classNames(
+                    'k-listbox-actions',
+                    {
+                        'k-listbox-actions-scrollable': actionsScrollable,
+                        'k-listbox-actions-scrollable-start': actionsScrollable && actionsScrollingPosition === 'start',
+                        'k-listbox-actions-scrollable-end': actionsScrollable && actionsScrollingPosition === 'end',
+                    }
+                )}
                     role="toolbar"
                     aria-label="ListBox actions"
                     aria-controls={listId}
                 >
-                    {actions.map(action => {
-
-                        const actionsIconMap = {
-                            "left": dir !== "rtl" ? "chevron-left" : "chevron-right",
-                            "right": dir !== 'rtl' ? "chevron-right" : "chevron-left",
-                            "to": dir !== 'rtl' ? "chevron-double-right" : "chevron-double-left",
-                            "from": dir !== 'rtl' ? "chevron-double-left" : "chevron-double-right",
-                            "up": "chevron-up",
-                            "down": "chevron-down",
-                            "x": "x"
-                        };
-
-                        return <Button key={action} icon={actionsIconMap[action]} size={size} aria-label={actionsLabelMap[action] || action} />;
-                    })}
+                    {actionsScrollable
+                        ? <div className="k-listbox-actions-items">{actionButtons}</div>
+                        : actionButtons
+                    }
                 </div>
             )}
             <div className={classNames(

package/src/listbox/templates/listbox-scrollable.tsx

@@ -0,0 +1,5 @@
+import { ListBoxNormal } from './listbox-normal';
+
+export const ListBoxScrollable = ({ actionsScrollingPosition = 'start', ...props }) => (
+    <ListBoxNormal actionsScrollable actionsScrollingPosition={actionsScrollingPosition} {...props} />
+);

package/src/listbox/tests/listbox-actions-scrollable.tsx

@@ -0,0 +1,39 @@
+import { Fragment } from 'react';
+import { ListBoxScrollable } from '../../listbox';
+
+const styles = `
+    #test-area .k-listbox {
+        width: 250px;
+        height: 250px;
+    }
+`;
+
+const scrollingPositions = [ 'start', 'end', 'both' ];
+
+const scenarios = [
+    { title: 'Actions left', actionsPosition: 'left' },
+    { title: 'Actions top', actionsPosition: 'top' },
+    { title: 'Actions left RTL', actionsPosition: 'left', dir: 'rtl' },
+    { title: 'Actions top RTL', actionsPosition: 'top', dir: 'rtl' },
+];
+
+export default () => (
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-3">
+            {scenarios.map(({ title, ...props }) => (
+                <Fragment key={title}>
+                    {scrollingPositions.map(position => (
+                        <div key={`${title}-${position}`}>
+                            <span>{title} (scroll {position})</span>
+                            <ListBoxScrollable
+                                {...props}
+                                actionsScrollingPosition={position}
+                            />
+                        </div>
+                    ))}
+                </Fragment>
+            ))}
+        </div>
+    </>
+);