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

A collection of HTML helpers used for developing Kendo UI themes

var o=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?o(...e):typeof e=="object"?Object.keys(e).map((s,d)=>e[d]||e[s]&&s||null).filter(s=>s!==null).join(" "):e).filter(e=>!!e).join(" ");var b=(t,e)=>o({[`${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"}),O=(t,e)=>{let{valid:s,invalid:d,hover:p,focus:w,checked:m,active:g,selected:x,disabled:c,indeterminate:f,loading:y,empty:$,readonly:A,highlighted:z,...S}=e;return o({"k-valid":s,"k-invalid":d,"k-hover":p,"k-focus":w,"k-checked":m,"k-active":g,"k-selected":x,"k-disabled":c,"k-indeterminate":f&&!m,"k-loading":y,"k-empty":$,"k-readonly":A,"k-highlighted":z},Object.keys(S).reduce((v,u)=>(u.startsWith("k-")?v[u]=S[u]:v[`k-${u}`]=S[u],v),{}))};var h={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},a={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"};var 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 R="switch",N=R;import{jsx as k,jsxs as L}from"react/jsx-runtime";var i="k-switch",K=[l.hover,l.focus,l.disabled,l.readonly,l.checked],T={size:[h.undefined,h.small,h.medium,h.large],trackRounded:[a.undefined,a.none,a.small,a.medium,a.large,a.full],thumbRounded:[a.undefined,a.none,a.small,a.medium,a.large,a.full]},E={},n=t=>{let{checked:e,onLabel:s,offLabel:d,size:p,trackRounded:w,thumbRounded:m,hover:g,focus:x,disabled:c,readonly:f,...y}=t;return L("span",{...y,className:o(t.className,i,b(i,{size:p}),O(i,{hover:g,focus:x,disabled:c,readonly:f}),{[`${i}-on`]:e,[`${i}-off`]:!e}),role:"switch","aria-checked":e?"true":"false",tabIndex:c?void 0:0,"aria-disabled":c?"true":void 0,"aria-readonly":f?"true":void 0,children:[L("span",{className:o("k-switch-track",b(i,{rounded:w})),children:[s&&k("span",{className:"k-switch-label-on",children:s}),d&&k("span",{className:"k-switch-label-off",children:d})]}),k("span",{className:"k-switch-thumb-wrap",children:k("span",{className:o("k-switch-thumb",b(i,{rounded:m}))})})]})};n.states=K;n.options=T;n.className=i;n.defaultOptions=E;n.moduleName=R;n.folderName=N;n.ariaSpec={selector:".k-switch",rules:[{selector:".k-switch",attribute:"role=switch",usage:"Announces the switch role of the element."},{selector:".k-switch",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-switch",attribute:"aria-required=true (when required)",usage:'Rendered only when the Switch is in a form. Required because <span role="switch"> does not support the native required attribute.'},{selector:".k-switch",attribute:"aria-checked",usage:"Announces the checked state of the Switch."},{selector:".k-switch",attribute:"aria-describedby (when has hint or error)",usage:"Points to the hint or error message for the switch."},{selector:".k-switch",attribute:"aria-invalid=true (when invalid)",usage:"Rendered only when the Switch is in a form and announces the invalid state."},{selector:".k-switch:not(.k-disabled)",attribute:"tabindex=0",usage:"The element must be focusable. Disabled switches are removed from tab order."},{selector:".k-switch.k-disabled",attribute:"aria-disabled=true",usage:"Rendered only when the Switch is disabled."},{selector:".k-switch.k-readonly",attribute:"aria-readonly=true (when readonly)",usage:"Rendered only when the Switch is readonly. Readonly switches remain focusable but their value cannot be changed."}]};import{jsx as M}from"react/jsx-runtime";var _=n.options,C=n.states,H={...n.defaultOptions,variant:"on"},I=[{name:"on",title:"On"},{name:"off",title:"Off"}],q=[],r=t=>{let{variant:e,...s}=t;return e==="off"?M(n,{checked:!1,onLabel:"On",offLabel:"Off",...s}):M(n,{checked:!0,onLabel:"On",offLabel:"Off",...s})};r.options=_;r.states=C;r.variants=I;r.defaultOptions=H;r.modifiers=q;r.className=n.className;var ae=r;export{r as SwitchDemo,ae as default};