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