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