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