@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
2 lines (1 loc) • 4.34 kB
JavaScript
var i=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?i(...e):typeof e=="object"?Object.keys(e).map((a,s)=>e[s]||e[a]&&a||null).filter(a=>a!==null).join(" "):e).filter(e=>!!e).join(" ");var f=(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"}),R=(t,e)=>{let{valid:a,invalid:s,hover:g,focus:k,checked:h,active:w,selected:x,disabled:d,indeterminate:m,loading:p,empty:A,readonly:L,highlighted:z,...y}=e;return i({"k-valid":a,"k-invalid":s,"k-hover":g,"k-focus":k,"k-checked":h,"k-active":w,"k-selected":x,"k-disabled":d,"k-indeterminate":m&&!h,"k-loading":p,"k-empty":A,"k-readonly":L,"k-highlighted":z},Object.keys(y).reduce((S,c)=>(c.startsWith("k-")?S[c]=y[c]:S[`k-${c}`]=y[c],S),{}))};var u={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},n={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 v="switch",M=v;import{jsx as b,jsxs as N}from"react/jsx-runtime";var o="k-switch",T=[l.hover,l.focus,l.disabled,l.readonly,l.checked],O={size:[u.undefined,u.small,u.medium,u.large],trackRounded:[n.undefined,n.none,n.small,n.medium,n.large,n.full],thumbRounded:[n.undefined,n.none,n.small,n.medium,n.large,n.full]},E={},r=t=>{let{checked:e,onLabel:a,offLabel:s,size:g,trackRounded:k,thumbRounded:h,hover:w,focus:x,disabled:d,readonly:m,...p}=t;return N("span",{...p,className:i(t.className,o,f(o,{size:g}),R(o,{hover:w,focus:x,disabled:d,readonly:m}),{[`${o}-on`]:e,[`${o}-off`]:!e}),role:"switch","aria-checked":e?"true":"false",tabIndex:d?void 0:0,"aria-disabled":d?"true":void 0,"aria-readonly":m?"true":void 0,children:[N("span",{className:i("k-switch-track",f(o,{rounded:k})),children:[a&&b("span",{className:"k-switch-label-on",children:a}),s&&b("span",{className:"k-switch-label-off",children:s})]}),b("span",{className:"k-switch-thumb-wrap",children:b("span",{className:i("k-switch-thumb",f(o,{rounded:h}))})})]})};r.states=T;r.options=O;r.className=o;r.defaultOptions=E;r.moduleName=v;r.folderName=M;r.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."}]};var $=r;import{jsx as K}from"react/jsx-runtime";var X=t=>K($,{onLabel:"On",offLabel:"Off",...t,"aria-label":t["aria-label"]||"Toggle switch"});export{X as SwitchNormal};