@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
2 lines (1 loc) • 3.8 kB
JavaScript
var a=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?a(...e):typeof e=="object"?Object.keys(e).map((n,l)=>e[l]||e[n]&&n||null).filter(n=>n!==null).join(" "):e).filter(e=>!!e).join(" ");var E=(t,e)=>a({[`${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:n,invalid:l,hover:m,focus:b,checked:s,active:u,selected:x,disabled:k,indeterminate:f,loading:g,empty:p,readonly:y,highlighted:N,...v}=e;return a({"k-valid":n,"k-invalid":l,"k-hover":m,"k-focus":b,"k-checked":s,"k-active":u,"k-selected":x,"k-disabled":k,"k-indeterminate":f&&!s,"k-loading":g,"k-empty":p,"k-readonly":y,"k-highlighted":N},Object.keys(v).reduce((C,d)=>(d.startsWith("k-")?C[d]=v[d]:C[`k-${d}`]=v[d],C),{}))};var c={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},i={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"};var o={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 M="checkbox",A=M;import{jsx as $}from"react/jsx-runtime";var h="k-checkbox",L=[o.hover,o.focus,o.valid,o.invalid,o.required,o.disabled,o.checked,o.indeterminate],R={size:[c.undefined,c.small,c.medium,c.large],rounded:[i.undefined,i.none,i.small,i.medium,i.large,i.full]},_={},r=t=>{let{id:e,checked:n,indeterminate:l,hover:m,focus:b,disabled:s,invalid:u,valid:x,required:k,size:f,rounded:g,wrapperRole:p,...y}=t;return $("span",{className:"k-checkbox-wrap",role:p,children:$("input",{...y,id:e,type:"checkbox",defaultChecked:n,required:k,disabled:s||void 0,"aria-invalid":u?"true":void 0,className:a(t.className,h,E(h,{size:f,rounded:g}),O(h,{hover:m,focus:b,disabled:s,invalid:u,valid:x,indeterminate:l,checked:n}))})})};r.states=L;r.options=R;r.className=h;r.defaultOptions=_;r.moduleName=M;r.folderName=A;r.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 w=r;import{Fragment as H,jsx as z,jsxs as S}from"react/jsx-runtime";var Y=({children:t="Label",id:e="cb-label-after",...n})=>S(H,{children:[z(w,{id:e,...n}),z("label",{className:"k-checkbox-label",htmlFor:e,children:t})]});export{Y as CheckboxWithLabelAfter};