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