@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
2 lines (1 loc) • 5.99 kB
JavaScript
var s=(...o)=>o.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?s(...e):typeof e=="object"?Object.keys(e).map((a,p)=>e[p]||e[a]&&a||null).filter(a=>a!==null).join(" "):e).filter(e=>!!e).join(" ");var S=(o,e)=>s({[`${o}-xs`]:e.size==="xsmall",[`${o}-sm`]:e.size==="small",[`${o}-md`]:e.size==="medium",[`${o}-lg`]:e.size==="large",[`${o}-xl`]:e.size==="xlarge",[`${o}-xxl`]:e.size==="xxlarge",[`${o}-xxxl`]:e.size==="xxxlarge"},{[`${o}-${e.fillMode}`]:e.fillMode},{[`${o}-${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"}),T=(o,e)=>{let{valid:a,invalid:p,hover:O,focus:E,checked:C,active:y,selected:N,disabled:A,indeterminate:M,loading:I,empty:K,readonly:H,highlighted:X,...z}=e;return s({"k-valid":a,"k-invalid":p,"k-hover":O,"k-focus":E,"k-checked":C,"k-active":y,"k-selected":N,"k-disabled":A,"k-indeterminate":M&&!C,"k-loading":I,"k-empty":K,"k-readonly":H,"k-highlighted":X},Object.keys(z).reduce((_,g)=>(g.startsWith("k-")?_[g]=z[g]:_[`k-${g}`]=z[g],_),{}))};var v={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},m={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"};var c={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={};function d(o){return R[o]=(R[o]||0)+1,`k-${o}-${R[o]}`}var h="checkbox",x=h;import{jsx as $}from"react/jsx-runtime";var L="k-checkbox",D=[c.hover,c.focus,c.valid,c.invalid,c.required,c.disabled,c.checked,c.indeterminate],F={size:[v.undefined,v.small,v.medium,v.large],rounded:[m.undefined,m.none,m.small,m.medium,m.large,m.full]},U={},n=o=>{let{id:e,checked:a,indeterminate:p,hover:O,focus:E,disabled:C,invalid:y,valid:N,required:A,size:M,rounded:I,wrapperRole:K,...H}=o;return $("span",{className:"k-checkbox-wrap",role:K,children:$("input",{...H,id:e,type:"checkbox",defaultChecked:a,required:A,disabled:C||void 0,"aria-invalid":y?"true":void 0,className:s(o.className,L,S(L,{size:M,rounded:I}),T(L,{hover:O,focus:E,disabled:C,invalid:y,valid:N,indeterminate:p,checked:a}))})})};n.states=D;n.options=F;n.className=L;n.defaultOptions=U;n.moduleName=h;n.folderName=x;n.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 l=n;import{jsx as J}from"react/jsx-runtime";var w="k-checkbox-list",q=[],V={},B={layout:"vertical"},r=o=>{let{layout:e=B.layout,...a}=o;return J("ul",{...a,className:s(o.className,w,{[`k-list-${e}`]:e}),children:o.children})};r.states=q;r.options=V;r.className=w;r.defaultOptions=B;r.moduleName=h;r.folderName=x;import{jsx as j}from"react/jsx-runtime";var G="k-checkbox-list-item",Q=[],Y={},Z={},t=o=>{let{...e}=o;return j("li",{...e,className:s(o.className,G),children:o.children})};t.states=Q;t.options=Y;t.className=G;t.defaultOptions=Z;t.moduleName=h;t.folderName=x;import{Fragment as ee,jsx as P,jsxs as oe}from"react/jsx-runtime";var b=({children:o="Label",id:e="cb-label-after",...a})=>oe(ee,{children:[P(l,{id:e,...a}),P("label",{className:"k-checkbox-label",htmlFor:e,children:o})]});import{Fragment as De,jsx as Xe,jsxs as Fe}from"react/jsx-runtime";import{Fragment as Qe,jsx as Je,jsxs as Ye}from"react/jsx-runtime";import{jsx as oo}from"react/jsx-runtime";import{jsx as no}from"react/jsx-runtime";import{jsx as co}from"react/jsx-runtime";import{jsx as i,jsxs as W}from"react/jsx-runtime";var te=r.options,ae=r.states,re={...r.defaultOptions,variant:"vertical"},ne=[{name:"vertical",title:"Vertical"},{name:"horizontal",title:"Horizontal"}],ie=[],k=o=>{let{variant:e,...a}=o;return e==="horizontal"?W(r,{layout:"horizontal",...a,children:[i(t,{children:i(b,{id:d("cb"),defaultChecked:!0,children:"Label"})}),i(t,{children:i(b,{id:d("cb"),children:"Label"})}),i(t,{children:i(b,{id:d("cb"),children:"Label"})})]}):W(r,{...a,children:[i(t,{children:i(b,{id:d("cb"),defaultChecked:!0,children:"Label"})}),i(t,{children:i(b,{id:d("cb"),children:"Label"})}),i(t,{children:i(b,{id:d("cb"),children:"Label"})})]})};k.options=te;k.states=ae;k.variants=ne;k.defaultOptions=re;k.modifiers=ie;k.className=r.className;import{jsx as me}from"react/jsx-runtime";var le=l.options,se=l.states,ce=l.defaultOptions,de=[],be=[],f=o=>me(b,{id:d("checkbox"),...o,defaultChecked:!0,children:"Label"});f.options=le;f.states=se;f.variants=de;f.defaultOptions=ce;f.modifiers=be;f.className=l.className;import{Fragment as he,jsx as u,jsxs as ue}from"react/jsx-runtime";var Bo=o=>u(r,{children:ue(he,{children:[u(t,{children:u(n,{"aria-label":"Option 1"})}),u(t,{children:u(n,{"aria-label":"Option 2"})}),u(t,{children:u(n,{"aria-label":"Option 3"})})]}),...o});export{Bo as CheckboxGroupNormal};