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

A collection of HTML helpers used for developing Kendo UI themes

var i=(...e)=>e.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?i(...t):typeof t=="object"?Object.keys(t).map((o,n)=>t[n]||t[o]&&o||null).filter(o=>o!==null).join(" "):t).filter(t=>!!t).join(" ");var K=(e,t)=>i({[`${e}-xs`]:t.size==="xsmall",[`${e}-sm`]:t.size==="small",[`${e}-md`]:t.size==="medium",[`${e}-lg`]:t.size==="large",[`${e}-xl`]:t.size==="xlarge",[`${e}-xxl`]:t.size==="xxlarge",[`${e}-xxxl`]:t.size==="xxxlarge"},{[`${e}-${t.fillMode}`]:t.fillMode},{[`${e}-${t.themeColor}`]:t.themeColor},{"k-rounded-sm":t.rounded==="small","k-rounded-md":t.rounded==="medium","k-rounded-lg":t.rounded==="large","k-rounded-full":t.rounded==="full","k-rounded-none":t.rounded==="none"}),y=(e,t)=>{let{valid:o,invalid:n,hover:a,focus:d,checked:m,active:p,selected:f,disabled:x,indeterminate:h,loading:T,empty:L,readonly:k,highlighted:V,...H}=t;return i({"k-valid":o,"k-invalid":n,"k-hover":a,"k-focus":d,"k-checked":m,"k-active":p,"k-selected":f,"k-disabled":x,"k-indeterminate":h&&!m,"k-loading":T,"k-empty":L,"k-readonly":k,"k-highlighted":V},Object.keys(H).reduce((I,z)=>(z.startsWith("k-")?I[z]=H[z]:I[`k-${z}`]=H[z],I),{}))};function ze(e,t){if(!t)return{};let o=Array.isArray(t)?t:[t];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"},M={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"},P={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},R={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 xe={};function u(e){return xe[e]=(xe[e]||0)+1,`k-${e}-${xe[e]}`}import{Fragment as ht,jsx as Pe}from"react/jsx-runtime";var he="k-font-icon",bt=[],ft={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]},xt={},ee=e=>{let{size:t,themeColor:o,icon:n,rotate:a,flip:d,...m}=e;return n?Pe("span",{...m,className:i(e.className,he,K(he,{size:t}),{[`k-i-${n}`]:n,[`k-color-${o}`]:o,[`k-rotate-${a}`]:a,"k-flip-h":d==="h"||d==="both","k-flip-v":d==="v"||d==="both"}),"aria-hidden":"true"}):Pe(ht,{})};ee.states=bt;ee.options=ft;ee.className=he;ee.defaultOptions=xt;var De=ee;import{Fragment as gt,jsx as ae}from"react/jsx-runtime";var Le="k-svg-icon",Lt=[],kt={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:[R.outline,R.solid,R.duotone]},ke={viewBox:"0 0 24 24",variant:R.outline},te=e=>{let{size:t,themeColor:o,rotate:n,flip:a,viewBox:d=ke.viewBox,variant:m=ke.variant,icon:p,...f}=e;if(!p)return ae(gt,{});if(p==="none")return ae("span",{...f,className:i(e.className,Le,K("k-icon",{size:t}),"k-none"),"aria-hidden":"true"});let x=typeof p=="object"&&p.name&&p.name,h=typeof p=="object"?m&&p.variants?.[m]||p.variants?.outline||p.content:void 0;return ae("span",{...f,className:i(e.className,Le,K("k-icon",{size:t}),{[`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:ae("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof p=="object"?p.viewBox:d,dangerouslySetInnerHTML:h!==void 0?{__html:h}:void 0,children:p?void 0:e.children})})};te.states=Lt;te.options=kt;te.className=Le;te.defaultOptions=ke;var ge=te;import*as Ne from"@progress/kendo-svg-icons";var Ge="icon",Ue="icons";import{useContext as vt}from"react";import{createContext as Nt}from"react";var Fe=Nt({iconsType:"svg"});import{Fragment as $e,jsx as oe}from"react/jsx-runtime";var re="k-icon",Ct=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),It=[],yt={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:[R.outline,R.solid,R.duotone]},le={viewBox:"0 0 24 24",type:"svg",variant:R.outline},O=e=>{let{iconsType:t}=vt(Fe),{size:o,themeColor:n,icon:a,type:d=t||le.type,rotate:m,flip:p,viewBox:f=le.viewBox,variant:x=le.variant,...h}=e;if(!a)return oe($e,{});if((t||d)==="svg"){if(a==="none")return oe(ge,{...h,className:i(e.className,re),icon:a,size:o,variant:x});let L=Ne[a]?a:Ct(`${a}-icon`);return Ne[L]?oe(ge,{...h,className:i(e.className,re),icon:Ne[L],size:o,themeColor:n,rotate:m,flip:p,viewBox:f,variant:x}):oe($e,{})}return oe(De,{...h,className:i(e.className,re),icon:a,size:o,themeColor:n,rotate:m,flip:p})};O.states=It;O.options=yt;O.defaultOptions=le;O.className=re;O.moduleName=Ge;O.folderName=Ue;O.ariaSpec={selector:".k-icon, .k-svg-icon",rules:[{selector:".k-icon, .k-svg-icon",attribute:"aria-hidden=true",usage:"Hides the icon element and all its children from assistive technologies."}]};var ve="button",Ve=ve;import{Fragment as Xe,jsx as X,jsxs as We}from"react/jsx-runtime";var ie="k-button",Mt=["icon-button"],Ot=[l.hover,l.focus,l.active,l.selected,l.disabled,l.generating],St={size:[s.undefined,s.xsmall,s.small,s.medium,s.large],rounded:[M.undefined,M.none,M.small,M.medium,M.large,M.full],fillMode:[P.undefined,P.solid,P.flat,P.outline,P.clear,P.link],themeColor:[r.undefined,r.base,r.primary,r.secondary,r.tertiary,r.success,r.warning,r.error,r.info,r.inverse]},Ce={showArrow:!1,arrowIconName:"chevron-down"},b=e=>{let{as:t="button",size:o,rounded:n,fillMode:a,themeColor:d,showArrow:m=Ce.showArrow,arrowIconName:p=Ce.arrowIconName,variant:f,hover:x,focus:h,active:T,selected:L,disabled:k,togglable:V,ariaDisabled:H,icon:I,iconSize:z,text:j,iconClassName:ct,className:mt,...dt}=e,pt=I!=null,ut=e.children!==void 0;return We(t,{className:i(mt,ie,ze(ie,f),K(ie,{size:o,rounded:n,fillMode:a,themeColor:d}),y(ie,{hover:x,focus:h,active:T,disabled:k||H,selected:L}),{"k-icon-button":!j&&!ut&&pt}),"aria-pressed":V?L?"true":"false":void 0,...dt,"aria-disabled":H?"true":void 0,disabled:k||void 0,children:[typeof I=="string"&&I&&X(O,{className:i(ct,"k-button-icon"),icon:I,size:z}),I&&typeof I!="string"&&X(Xe,{children:I}),j?We(Xe,{children:[j&&X("span",{className:"k-button-text",children:j}),e.children]}):e.children&&X("span",{className:"k-button-text",children:e.children}),m&&X("span",{className:"k-menu-button-arrow k-button-arrow",children:X(O,{icon:p})})]})};b.states=Ot;b.options=St;b.variants=Mt;b.className=ie;b.defaultOptions=Ce;b.moduleName=ve;b.folderName=Ve;b.ariaSpec={selector:".k-button",rules:[{selector:".k-button",attribute:"role=button or nodeName=button",usage:"The button role is implicit from the native <button> element."},{selector:".k-button",attribute:"aria-label (when icon-only)",usage:"Required for icon-only buttons that have no visible text."},{selector:".k-button",attribute:"aria-pressed (when togglable)",usage:"Indicates the pressed state of a toggle button."},{selector:".k-button",attribute:"disabled (when disabled)",usage:"Rendered when the button is disabled."}]};import{jsx as At}from"react/jsx-runtime";var qe=e=>At(b,{icon:"folder",...e,"aria-label":e["aria-label"]||"Folder",children:void 0});import{jsx as Tt}from"react/jsx-runtime";var Je=e=>Tt(b,{icon:"folder",children:"Button",...e});import{jsx as Et}from"react/jsx-runtime";var Qe=e=>Et(b,{children:"Button",...e});import{jsx as Ie}from"react/jsx-runtime";var Kt=b.options,Bt=b.states,Rt={...b.defaultOptions,variant:"text"},_t=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],wt=[],W=e=>{let{variant:t,...o}=e;switch(t){case"icon-only":return Ie(qe,{...o,icon:"star"});case"icon-and-text":return Ie(Je,{...o,icon:"star",children:"Button"});default:return Ie(Qe,{...o,children:"Button"})}};W.options=Kt;W.states=Bt;W.variants=_t;W.defaultOptions=Rt;W.modifiers=wt;W.className=b.className;import Oe from"react";import{jsx as Ye}from"react/jsx-runtime";var Ht="k-list-group-sticky-header",ye=e=>Ye("div",{className:i(Ht,e.className),children:Ye("div",{className:"k-list-header-text",children:e.children})});import{jsx as Pt}from"react/jsx-runtime";var zt="k-no-data",Me=e=>{let{live:t,...o}=e;return Pt("span",{...o,className:i(zt,e.className),"aria-live":t?"polite":void 0,children:e.children})};var D="list",q=D;import{jsx as Ze,jsxs as je}from"react/jsx-runtime";var Se="k-list",Dt=[],Gt={size:[s.undefined,s.small,s.medium,s.large]},Ut={},N=e=>{let{size:t,virtualization:o,children:n,header:a,selectAll:d,optionLabel:m,customValue:p,noData:f,screenReaders:x,...h}=e,L=Oe.Children.toArray(n)[0],k=L?.props?.children?Oe.Children.count(L.props.children):Oe.Children.count(n);return je("div",{...h,className:i(e.className,Se,K(Se,{size:t}),{"k-virtual-list":o}),children:[m,d,p,a&&Ze(ye,{children:a}),n||(f!==void 0?f:Ze(Me,{live:!0,children:"No data found."})),x&&n&&je(Me,{className:"k-sr-only",live:!0,children:[k," items found."]})]})};N.states=Dt;N.options=Gt;N.className=Se;N.defaultOptions=Ut;N.moduleName=D;N.folderName=q;N.ariaSpec={selector:".k-list",rules:[{selector:".k-list .k-no-data",attribute:"aria-live=polite",usage:'Announces "No data found" to screen readers.'}]};import{jsx as Xt}from"react/jsx-runtime";var et="k-list-container",Ft=[],$t={},Vt={},J=e=>{let{...t}=e;return Xt("div",{...t,className:i(e.className,et),children:e.children})};J.states=Ft;J.options=$t;J.className=et;J.defaultOptions=Vt;J.moduleName=D;J.folderName=q;var G="checkbox",Q=G;import{jsx as tt}from"react/jsx-runtime";var ce="k-checkbox",Wt=[l.hover,l.focus,l.valid,l.invalid,l.required,l.disabled,l.checked,l.indeterminate],qt={size:[s.undefined,s.small,s.medium,s.large],rounded:[M.undefined,M.none,M.small,M.medium,M.large,M.full]},Jt={},S=e=>{let{id:t,checked:o,indeterminate:n,hover:a,focus:d,disabled:m,invalid:p,valid:f,required:x,size:h,rounded:T,wrapperRole:L,...k}=e;return tt("span",{className:"k-checkbox-wrap",role:L,children:tt("input",{...k,id:t,type:"checkbox",defaultChecked:o,required:x,disabled:m||void 0,"aria-invalid":p?"true":void 0,className:i(e.className,ce,K(ce,{size:h,rounded:T}),y(ce,{hover:a,focus:d,disabled:m,invalid:p,valid:f,indeterminate:n,checked:o}))})})};S.states=Wt;S.options=qt;S.className=ce;S.defaultOptions=Jt;S.moduleName=G;S.folderName=Q;S.ariaSpec={selector:".k-checkbox",rules:[{selector:".k-checkbox",attribute:"role=checkbox or type=checkbox",usage:"Announces the checkbox role of the element."},{selector:".k-checkbox",attribute:"label for or aria-label or aria-labelledby (when has accessible name)",usage:"The input requires an accessible name to which it will be assigned."},{selector:".k-checkbox",attribute:"aria-checked=true/false/mixed or checked",usage:"For native checkboxes the checked state is handled by the browser. aria-checked is used for custom implementations."},{selector:".k-checkbox",attribute:"aria-describedby (when has hint or error)",usage:"Points to the hint or error message for the checkbox."},{selector:".k-checkbox",attribute:"disabled or aria-disabled=true (when disabled)",usage:"For native checkboxes use the HTML disabled attribute. aria-disabled for custom implementations."},{selector:".k-invalid, .ng-invalid",attribute:"aria-invalid=true (when invalid)",usage:"Rendered only when the CheckBox is in a form and announces the invalid state."}]};var B=S;import{jsx as Zt}from"react/jsx-runtime";var ot="k-checkbox-list",Qt=[],Yt={},it={layout:"vertical"},v=e=>{let{layout:t=it.layout,...o}=e;return Zt("ul",{...o,className:i(e.className,ot,{[`k-list-${t}`]:t}),children:e.children})};v.states=Qt;v.options=Yt;v.className=ot;v.defaultOptions=it;v.moduleName=G;v.folderName=Q;import{jsx as oo}from"react/jsx-runtime";var st="k-checkbox-list-item",jt=[],eo={},to={},C=e=>{let{...t}=e;return oo("li",{...t,className:i(e.className,st),children:e.children})};C.states=jt;C.options=eo;C.className=st;C.defaultOptions=to;C.moduleName=G;C.folderName=Q;import{Fragment as io,jsx as nt,jsxs as so}from"react/jsx-runtime";var _=({children:e="Label",id:t="cb-label-after",...o})=>so(io,{children:[nt(B,{id:t,...o}),nt("label",{className:"k-checkbox-label",htmlFor:t,children:e})]});import{Fragment as Hs,jsx as ws,jsxs as zs}from"react/jsx-runtime";import{Fragment as Fs,jsx as Us,jsxs as $s}from"react/jsx-runtime";import{Fragment as Js,jsx as qs,jsxs as Qs}from"react/jsx-runtime";import{jsx as en}from"react/jsx-runtime";import{jsx as nn}from"react/jsx-runtime";import{jsx as cn}from"react/jsx-runtime";import{jsx as E,jsxs as at}from"react/jsx-runtime";var no=v.options,ao=v.states,ro={...v.defaultOptions,variant:"vertical"},lo=[{name:"vertical",title:"Vertical"},{name:"horizontal",title:"Horizontal"}],co=[],Y=e=>{let{variant:t,...o}=e;return t==="horizontal"?at(v,{layout:"horizontal",...o,children:[E(C,{children:E(_,{id:u("cb"),defaultChecked:!0,children:"Label"})}),E(C,{children:E(_,{id:u("cb"),children:"Label"})}),E(C,{children:E(_,{id:u("cb"),children:"Label"})})]}):at(v,{...o,children:[E(C,{children:E(_,{id:u("cb"),defaultChecked:!0,children:"Label"})}),E(C,{children:E(_,{id:u("cb"),children:"Label"})}),E(C,{children:E(_,{id:u("cb"),children:"Label"})})]})};Y.options=no;Y.states=ao;Y.variants=lo;Y.defaultOptions=ro;Y.modifiers=co;Y.className=v.className;import{jsx as xo}from"react/jsx-runtime";var mo=B.options,po=B.states,uo=B.defaultOptions,bo=[],fo=[],Z=e=>xo(_,{id:u("checkbox"),...e,defaultChecked:!0,children:"Label"});Z.options=mo;Z.states=po;Z.variants=bo;Z.defaultOptions=uo;Z.modifiers=fo;Z.className=B.className;import{jsx as U,jsxs as go}from"react/jsx-runtime";var Ae="k-list-item",ho=[l.hover,l.focus,l.selected,l.disabled],Lo={},ko={},c=e=>{let{text:t,groupLabel:o,group:n,iconName:a,iconClassName:d,showCheckbox:m,checked:p,hover:f,focus:x,selected:h,disabled:T,actions:L,description:k,id:V,...H}=e,I=t||e.children;return go("li",{...H,id:V,role:n?"presentation":"option",tabIndex:n?void 0:x?0:-1,"aria-selected":!n&&h?"true":n?void 0:"false","aria-disabled":!n&&T?"true":void 0,className:i(e.className,n?"k-list-group-item":Ae,y(Ae,{hover:f,focus:x,disabled:T,selected:h})),children:[m&&U(S,{checked:p}),a&&U("span",{className:"k-list-item-icon-wrapper",children:U(O,{icon:a,className:i("k-list-item-icon",d)})}),U("span",{className:"k-list-item-text",children:I}),L&&U("div",{className:"k-list-item-actions",children:L}),k&&U("span",{className:"k-list-item-description",children:k}),o&&o!==""&&U("div",{className:"k-list-item-group-label",children:o})]})};c.states=ho;c.options=Lo;c.className=Ae;c.defaultOptions=ko;c.moduleName=D;c.folderName=q;c.ariaSpec={selector:".k-list-item",rules:[{selector:".k-list-item",attribute:"role=option",usage:"Each list item is an option in the listbox."},{selector:".k-list-item",attribute:"id",usage:"ID for aria-activedescendant reference."},{selector:".k-list-item",attribute:"aria-selected (when selectable)",usage:"Indicates the selected state of the option."},{selector:".k-list-group-item",attribute:"role=presentation",usage:"Group headers are presentational, not selectable options."},{selector:".k-list-item-icon",attribute:"aria-hidden=true",usage:"Decorative icons are hidden from assistive technology."}]};import{jsx as vo}from"react/jsx-runtime";var No="k-list-ul",se=e=>{let{children:t,role:o,id:n,...a}=e;return vo("ul",{...a,id:n,role:o,className:i(No,e.className),children:t})};se.ariaSpec={selector:".k-list-ul",rules:[{selector:'.k-list-ul[role="listbox"]',attribute:"role=listbox",usage:"For ungrouped lists, the UL has the listbox role."},{selector:'.k-list-ul[role="listbox"]',attribute:"aria-label or aria-labelledby (when has accessible name)",usage:"Accessible name for the listbox."},{selector:'.k-list-ul[role="group"]',attribute:"role=group",usage:"For grouped sublists under a group header."},{selector:'.k-list-ul[role="group"]',attribute:"aria-labelledby (when grouped)",usage:"References the group header ID."}]};import{jsx as Te,jsxs as Io}from"react/jsx-runtime";var Co="k-list-content",w=e=>{let{virtualization:t,grouping:o,"aria-label":n,"aria-labelledby":a,listboxId:d,...m}=e;return Io("div",{...m,className:i(Co,e.className),role:o?"listbox":void 0,id:o?d:void 0,"aria-label":o?n:void 0,"aria-labelledby":o?a:void 0,children:[o?e.children:Te(se,{role:"listbox",id:d,"aria-label":n,"aria-labelledby":a,children:e.children}),t&&Te("div",{className:"k-height-container",children:Te("div",{})})]})};w.ariaSpec={selector:".k-list-content",rules:[{selector:'.k-list-content[role="listbox"]',attribute:"role=listbox",usage:"For grouped lists, the list content container has the listbox role."},{selector:'.k-list-content[role="listbox"]',attribute:"aria-label or aria-labelledby (when has accessible name)",usage:"Accessible name for the listbox."}]};import{jsx as Ee,jsxs as So}from"react/jsx-runtime";var me="k-list-sticky-header",yo=[l.hover,l.focus,l.selected],Mo={},Oo={},de=e=>{let{label:t="Select all",showCheckbox:o=!0,checked:n,indeterminate:a,hover:d,focus:m,selected:p,...f}=e;return Ee("div",{...f,className:i(me,e.className),children:So("div",{className:i(`${me}-item`,y(`${me}-item`,{hover:d,focus:m,selected:p})),children:[o&&Ee(S,{checked:n,indeterminate:a,"aria-label":t}),Ee("span",{className:"k-list-item-text",children:t})]})})};de.states=yo;de.options=Mo;de.className=me;de.defaultOptions=Oo;import{Fragment as ia,jsx as oa,jsxs as sa}from"react/jsx-runtime";import{jsx as Ke,jsxs as To}from"react/jsx-runtime";var Ao="k-list-group-item",Be=e=>{let{groupIconName:t,...o}=e;return To("li",{...o,role:"presentation",className:i(Ao,e.className),children:[t&&Ke("span",{className:"k-list-item-icon-wrapper",children:Ke(O,{icon:t,className:"k-list-item-icon"})}),Ke("span",{className:"k-list-item-text",children:e.children})]})};Be.ariaSpec={selector:".k-list-group-item",rules:[{selector:".k-list-group-item",attribute:"role=presentation",usage:"Group headers are presentational, not selectable options."},{selector:".k-list-group-item",attribute:"id (when referenced)",usage:"ID for aria-labelledby on the parent group UL."}]};import{jsx as Ro}from"react/jsx-runtime";var Re="k-list-optionlabel",Eo=[l.hover,l.focus,l.selected,l.disabled],Ko={},Bo={},pe=e=>{let{text:t,hover:o,focus:n,selected:a,disabled:d,...m}=e;return Ro("div",{...m,className:i(Re,y(Re,{hover:o,focus:n,selected:a,disabled:d})),children:t})};pe.states=Eo;pe.options=Ko;pe.className=Re;pe.defaultOptions=Bo;import{jsx as zo}from"react/jsx-runtime";var _e="k-list-custom-value",_o=[l.hover,l.focus,l.selected,l.disabled],wo={},Ho={},ue=e=>{let{text:t,hover:o,focus:n,selected:a,disabled:d,...m}=e;return zo("div",{...m,className:i(_e,y(_e,{hover:o,focus:n,selected:a,disabled:d})),children:t})};ue.states=_o;ue.options=wo;ue.className=_e;ue.defaultOptions=Ho;import{Fragment as ga,jsx as ka,jsxs as Na}from"react/jsx-runtime";import{Fragment as Oa,jsx as Ma,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";var we="listbox",rt=we;import{jsx as ne,jsxs as Go}from"react/jsx-runtime";var He="k-listbox",Po=[l.disabled],Do={size:[s.undefined,s.small,s.medium,s.large]},lt={actionsPosition:"left"},A=e=>{let{size:t,disabled:o,children:n,actionsPosition:a=lt.actionsPosition,actions:d,dir:m,"aria-label":p,multiselectable:f,id:x,...h}=e,T=x?`${x}-list`:void 0,L={left:"Move left",right:"Move right",to:"Move all right",from:"Move all left",up:"Move up",down:"Move down",x:"Remove"};return Go("div",{...h,dir:m,className:i(e.className,He,y(He,{disabled:o}),{[`k-listbox-actions-${a}`]:a}),children:[d&&ne("div",{className:"k-listbox-actions",role:"toolbar","aria-label":"ListBox actions","aria-controls":T,children:d.map(k=>ne(b,{icon:{left:m!=="rtl"?"chevron-left":"chevron-right",right:m!=="rtl"?"chevron-right":"chevron-left",to:m!=="rtl"?"chevron-double-right":"chevron-double-left",from:m!=="rtl"?"chevron-double-left":"chevron-double-right",up:"chevron-up",down:"chevron-down",x:"x"}[k],size:t,"aria-label":L[k]||k},k))}),ne("div",{className:i("k-list-scroller","k-selectable"),children:ne(N,{size:t,children:ne(w,{"aria-label":p,"aria-multiselectable":f,listboxId:T,children:n})})})]})};A.states=Po;A.options=Do;A.className=He;A.defaultOptions=lt;A.moduleName=we;A.folderName=rt;A.ariaSpec={selector:".k-listbox",rules:[{selector:".k-listbox .k-list-ul",attribute:"role=listbox",usage:"Specifies the role of the ListBox list element."},{selector:".k-listbox .k-list-ul",attribute:"aria-label or aria-labelledby",usage:"Adds a label to the list element of the ListBox."},{selector:".k-listbox .k-list-item",attribute:"role=option",usage:"Specifies the role of the ListBox item element."},{selector:".k-listbox .k-list-item",attribute:"aria-selected=true/false",usage:"Set to true if the item is selected."},{selector:".k-listbox .k-list-item",attribute:"tabindex",usage:"The focused listbox item should have tabindex 0, all others -1."},{selector:".k-listbox-actions",attribute:"role=toolbar",usage:"The toolbar is a collection of command buttons."},{selector:".k-listbox-actions",attribute:"aria-label",usage:"Clarifies the purpose of the toolbar."},{selector:".k-listbox-actions",attribute:"aria-controls (when present)",usage:"Points to the id of the listbox element being controlled."},{selector:".k-listbox-actions .k-button",attribute:"aria-label or title",usage:"All buttons in the toolbar must have labels."}]};import{jsx as F}from"react/jsx-runtime";var be=e=>{let t=u("listbox"),o=u("lb-item"),n=u("lb-item"),a=u("lb-item"),d=u("lb-item"),m=u("lb-item"),p=u("lb-item");return F(A,{id:t,"aria-label":"Available items",actions:["up","down","left","right","to","from","x"],children:[F(c,{id:o,focus:!0,children:"List item 1"},"ListItem1"),F(c,{id:n,selected:!0,children:"List item 2"},"ListItem2"),F(c,{id:a,children:"List item 3"},"ListItem3"),F(c,{id:d,children:"List item 4"},"ListItem4"),F(c,{id:m,children:"List item 5"},"ListItem5"),F(c,{id:p,children:"List item 6"},"ListItem6")],...e})};import{jsx as g,jsxs as fe}from"react/jsx-runtime";var Uo=A.options,Fo=A.states,$o={...A.defaultOptions,variant:"single"},Vo=[{name:"single",title:"Single"},{name:"multiple",title:"Multiple"}],Xo=[],$=e=>{let{variant:t,...o}={...e};return t==="multiple"?fe("div",{className:"k-d-flex",children:[fe(be,{...o,style:{height:"300px",width:"200px"},className:"k-pr-2",actionsPosition:"right",actions:["up","down","left","right","to","from","x"],children:[g(c,{selected:!0,children:"List item"}),g(c,{children:"List item"}),g(c,{children:"List item"}),g(c,{children:"List item"}),g(c,{children:"List item"}),g(c,{children:"List item"}),g(c,{children:"List item"})]}),fe(be,{...e,style:{height:"300px",width:"200px"},actionsPosition:"right",actions:["up","down","x"],children:[g(c,{children:"List item"}),g(c,{selected:!0,children:"List item"})]})]}):fe(be,{...o,style:{height:"300px",width:"200px"},actionsPosition:"right",actions:["up","down","left","right","to","from","x"],children:[g(c,{selected:!0,children:"List item"}),g(c,{children:"List item"}),g(c,{children:"List item"}),g(c,{children:"List item"}),g(c,{children:"List item"}),g(c,{children:"List item"}),g(c,{children:"List item"})]})};$.options=Uo;$.states=Fo;$.variants=Vo;$.defaultOptions=$o;$.modifiers=Xo;$.className=A.className;var Pr=$;export{$ as ListboxDemo,Pr as default};