@progress/kendo-themes-html/dist/cjs/listbox/templates/listbox-normal.js

A collection of HTML helpers used for developing Kendo UI themes

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