UNPKG

@progress/kendo-themes-html

Version:

A collection of HTML helpers used for developing Kendo UI themes

2 lines (1 loc) 4.86 kB
var i=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?i(...e):typeof e=="object"?Object.keys(e).map((o,u)=>e[u]||e[o]&&o||null).filter(o=>o!==null).join(" "):e).filter(e=>!!e).join(" ");var N=(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"}),O=(t,e)=>{let{valid:o,invalid:u,hover:g,focus:p,checked:c,active:x,selected:k,disabled:R,indeterminate:y,loading:T,empty:_,readonly:w,highlighted:S,...A}=e;return i({"k-valid":o,"k-invalid":u,"k-hover":g,"k-focus":p,"k-checked":c,"k-active":x,"k-selected":k,"k-disabled":R,"k-indeterminate":y&&!c,"k-loading":T,"k-empty":_,"k-readonly":w,"k-highlighted":S},Object.keys(A).reduce((v,m)=>(m.startsWith("k-")?v[m]=A[m]:v[`k-${m}`]=A[m],v),{}))};var h={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"};var r={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 s="radio",l=s;import{jsx as B}from"react/jsx-runtime";var E="k-radio-list",$=[],z={},L={layout:"vertical"},a=t=>{let{layout:e=L.layout,...o}=t;return B("ul",{...o,className:i(t.className,E,{[`k-list-${e}`]:e}),role:"radiogroup",children:t.children})};a.states=$;a.options=z;a.className=E;a.defaultOptions=L;a.moduleName=s;a.folderName=l;a.ariaSpec={selector:".k-radio-list",rules:[{selector:".k-radio-list",attribute:"role=radiogroup",usage:"Announces the radiogroup role of the element."},{selector:".k-radio-list-item",attribute:"role=none",usage:"Due to issues with nested items, forces a no-role state."},{selector:".k-radio",attribute:"readonly or aria-readonly (when readonly)",usage:"The attribute is rendered only when the radio button is read-only."},{selector:".k-radio",attribute:"aria-invalid=true (when invalid)",usage:"The attribute is rendered only when the radio button is in a form and announces the invalid state of the component."},{selector:".k-radio-list-item.k-disabled .k-radio",attribute:"disabled or aria-disabled (when disabled)",usage:"The attribute is rendered only when the radio button is disabled."}]};import{jsx as P}from"react/jsx-runtime";var I="k-radio-list-item",K=[],H={},C={},n=t=>{let{...e}=t;return P("li",{...e,className:i(t.className,I),role:"none",children:t.children})};n.states=K;n.options=H;n.className=I;n.defaultOptions=C;n.moduleName=s;n.folderName=l;import{jsx as D}from"react/jsx-runtime";var b="k-radio",U=[r.hover,r.focus,r.valid,r.invalid,r.required,r.disabled,r.checked],G={size:[h.undefined,h.small,h.medium,h.large]},q={},d=t=>{let{id:e,checked:o,hover:u,focus:g,disabled:p,invalid:c,valid:x,required:k,size:R,...y}=t;return D("span",{className:"k-radio-wrap",children:D("input",{...y,id:e,type:"radio",checked:o,required:k,disabled:p||void 0,"aria-invalid":c?"true":void 0,className:i(t.className,b,N(b,{size:R}),O(b,{hover:u,focus:g,disabled:p,invalid:c,valid:x,checked:o}))})})};d.states=U;d.options=G;d.className=b;d.defaultOptions=q;d.moduleName=s;d.folderName=l;d.ariaSpec={selector:".k-radio",rules:[{selector:".k-radio",attribute:"type=radio",usage:"Announces the radio type of the input."},{selector:".k-radio",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-radio",attribute:"checked (when checked)",usage:"Boolean attribute that announces the checked state of the radio button."},{selector:".k-radio",attribute:"aria-describedby (when has hint or error)",usage:"Points to the hint or error message for the radio."},{selector:".k-radio",attribute:"disabled=disabled or aria-disabled=true (when disabled)",usage:"Rendered only when the radio input is disabled."},{selector:".k-invalid, .ng-invalid",attribute:"aria-invalid=true (when invalid)",usage:"Rendered only when the radio button is in a form and announces the invalid state."}]};var M=d;import{Fragment as F,jsx as f,jsxs as j}from"react/jsx-runtime";var ke=t=>f(a,{children:j(F,{children:[f(n,{className:"k-disabled",children:f(M,{disabled:!0,"aria-label":"Disabled option 1"})}),f(n,{className:"k-disabled",children:f(M,{disabled:!0,"aria-label":"Disabled option 2"})})]}),...t});export{ke as RadioGroupDisabled};