@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
2 lines (1 loc) • 4.65 kB
JavaScript
var r=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?r(...e):typeof e=="object"?Object.keys(e).map((o,s)=>e[s]||e[o]&&o||null).filter(o=>o!==null).join(" "):e).filter(e=>!!e).join(" ");var O=(t,e)=>r({[`${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"}),P=(t,e)=>{let{valid:o,invalid:s,hover:m,focus:i,checked:c,active:d,selected:f,disabled:p,indeterminate:M,loading:b,empty:C,readonly:v,highlighted:E,...h}=e;return r({"k-valid":o,"k-invalid":s,"k-hover":m,"k-focus":i,"k-checked":c,"k-active":d,"k-selected":f,"k-disabled":p,"k-indeterminate":M&&!c,"k-loading":b,"k-empty":C,"k-readonly":v,"k-highlighted":E},Object.keys(h).reduce((A,g)=>(g.startsWith("k-")?A[g]=h[g]:A[`k-${g}`]=h[g],A),{}))};var x={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"};import{jsx as K}from"react/jsx-runtime";var k=t=>K("tr",{role:"row",children:t.children});import{jsx as H}from"react/jsx-runtime";var L="k-colorpalette-tile",$=[u.hover,u.focus,u.selected],_={},l=t=>{let{color:e,tileSize:o,hover:s,focus:m,selected:i,...c}=t,d={backgroundColor:e,width:o?o+"px":"",height:o?o+"px":""};return H("td",{...c,role:"gridcell","aria-label":e,"aria-selected":i?"true":void 0,className:r(t.className,L,P(L,{hover:s,focus:m,selected:i})),style:d})};l.states=$;l.options=_;l.className=L;var S="color-palette",z="colorpalette";import{jsx as y}from"react/jsx-runtime";var T="k-colorpalette",D=[u.disabled],q={size:[x.undefined,x.small,x.medium,x.large]},N={columns:10},a=t=>{let{size:e,palette:o,columns:s=N.columns,tileSize:m,disabled:i,...c}=t,d=[];if(o){let f=s||o.columns,p=o.colors?o.colors:o;Array.isArray(p)&&Array.from({length:Math.ceil(p.length/f)},(M,b)=>{let C=[];p.slice(b*f,(b+1)*f).map((E,h)=>{C.push(y(l,{color:E,tileSize:m},h))});let v=y(k,{children:C},b);d.push(v)})}return y("div",{...c,role:"grid","aria-label":"Color palette",tabIndex:0,"aria-disabled":i?"true":void 0,className:r(t.className,T,P(T,{disabled:i}),O(T,{size:e})),children:y("table",{className:"k-colorpalette-table",role:"none",children:y("tbody",{children:d.length>0?d:t.children})})})};a.states=D;a.options=q;a.className=T;a.defaultOptions=N;a.moduleName=S;a.folderName=z;a.ariaSpec={selector:".k-colorpalette",rules:[{selector:".k-colorpalette",attribute:"role=grid",usage:"The focusable wrapper announces its role as a grid."},{selector:".k-colorpalette",attribute:"aria-label or aria-labelledby",usage:"The component needs an accessible name including the currently selected value."},{selector:".k-colorpalette",attribute:"aria-activedescendant",usage:"Points to the focused cell in the table."},{selector:".k-colorpalette",attribute:"tabindex=0",usage:"The element must be focusable."},{selector:".k-colorpalette.k-disabled",attribute:"aria-disabled=true",usage:"Rendered only when the ColorPalette is disabled."},{selector:".k-colorpalette-table",attribute:"role=none or role=presentation",usage:"Negates the default role of the table element."},{selector:".k-colorpalette-table>tbody>tr",attribute:"role=row",usage:"Required as the semantic role of the parent table has been removed."},{selector:".k-colorpalette-tile",attribute:"role=gridcell",usage:"Required as the semantic role of the parent table has been removed."},{selector:".k-colorpalette-tile",attribute:"aria-label or title",usage:"The text representation of the color value for the current cell."},{selector:".k-colorpalette-tile.k-selected",attribute:"aria-selected=true",usage:"Present on the currently selected cell."}]};var w=a;import{jsx as n,jsxs as R}from"react/jsx-runtime";var me=t=>R(w,{...t,children:[R(k,{children:[n(l,{color:"#ff0000"}),n(l,{color:"#ff5252"}),n(l,{color:"#ff6666",selected:!0}),n(l,{color:"#ff8080"})]}),R(k,{children:[n(l,{color:"#00ff00"}),n(l,{color:"#52ff52"}),n(l,{color:"#66ff66"}),n(l,{color:"#80ff80"})]})]});export{me as ColorPaletteSelected};