UNPKG

@progress/kendo-themes-html

Version:

A collection of HTML helpers used for developing Kendo UI themes

2 lines (1 loc) 9.12 kB
var d=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?d(...e):typeof e=="object"?Object.keys(e).map((r,a)=>e[a]||e[r]&&r||null).filter(r=>r!==null).join(" "):e).filter(e=>!!e).join(" ");var y=(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"}),j=(t,e)=>{let{valid:r,invalid:a,hover:s,focus:c,checked:u,active:l,selected:h,disabled:g,indeterminate:f,loading:A,empty:N,readonly:L,highlighted:P,...C}=e;return d({"k-valid":r,"k-invalid":a,"k-hover":s,"k-focus":c,"k-checked":u,"k-active":l,"k-selected":h,"k-disabled":g,"k-indeterminate":f&&!u,"k-loading":A,"k-empty":N,"k-readonly":L,"k-highlighted":P},Object.keys(C).reduce((p,v)=>(v.startsWith("k-")?p[v]=C[v]:p[`k-${v}`]=C[v],p),{}))};function J(t,e){if(!e)return{};let r=Array.isArray(e)?e:[e];return Object.fromEntries(r.map(a=>[`k-${a}`,!0]))}var n={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},B={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"},m={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},x={undefined:void 0,outline:"outline",solid:"solid",duotone:"duotone"},o={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",inverse:"inverse"},k={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{Fragment as he,jsx as Q}from"react/jsx-runtime";var $="k-font-icon",xe=[],be={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info]},ge={},S=t=>{let{size:e,themeColor:r,icon:a,rotate:s,flip:c,...u}=t;return a?Q("span",{...u,className:d(t.className,$,y($,{size:e}),{[`k-i-${a}`]:a,[`k-color-${r}`]:r,[`k-rotate-${s}`]:s,"k-flip-h":c==="h"||c==="both","k-flip-v":c==="v"||c==="both"}),"aria-hidden":"true"}):Q(he,{})};S.states=xe;S.options=be;S.className=$;S.defaultOptions=ge;var X=S;import{Fragment as ye,jsx as _}from"react/jsx-runtime";var U="k-svg-icon",Ne=[],ve={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info],variant:[x.outline,x.solid,x.duotone]},H={viewBox:"0 0 24 24",variant:x.outline},I=t=>{let{size:e,themeColor:r,rotate:a,flip:s,viewBox:c=H.viewBox,variant:u=H.variant,icon:l,...h}=t;if(!l)return _(ye,{});if(l==="none")return _("span",{...h,className:d(t.className,U,y("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let g=typeof l=="object"&&l.name&&l.name,f=typeof l=="object"?u&&l.variants?.[u]||l.variants?.outline||l.content:void 0;return _("span",{...h,className:d(t.className,U,y("k-icon",{size:e}),{[`k-svg-i-${g}`]:g,[`k-color-${r}`]:r,[`k-rotate-${a}`]:a,"k-flip-h":s==="h"||s==="both","k-flip-v":s==="v"||s==="both"}),"aria-hidden":"true",children:_("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof l=="object"?l.viewBox:c,dangerouslySetInnerHTML:f!==void 0?{__html:f}:void 0,children:l?void 0:t.children})})};I.states=Ne;I.options=ve;I.className=U;I.defaultOptions=H;var D=I;import*as F from"@progress/kendo-svg-icons";var Y="icon",Z="icons";import{useContext as ke}from"react";import{createContext as Be}from"react";var ee=Be({iconsType:"svg"});import{Fragment as te,jsx as z}from"react/jsx-runtime";var K="k-icon",Te=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),Ce=[],Oe={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info],variant:[x.outline,x.solid,x.duotone]},R={viewBox:"0 0 24 24",type:"svg",variant:x.outline},b=t=>{let{iconsType:e}=ke(ee),{size:r,themeColor:a,icon:s,type:c=e||R.type,rotate:u,flip:l,viewBox:h=R.viewBox,variant:g=R.variant,...f}=t;if(!s)return z(te,{});if((e||c)==="svg"){if(s==="none")return z(D,{...f,className:d(t.className,K),icon:s,size:r,variant:g});let N=F[s]?s:Te(`${s}-icon`);return F[N]?z(D,{...f,className:d(t.className,K),icon:F[N],size:r,themeColor:a,rotate:u,flip:l,viewBox:h,variant:g}):z(te,{})}return z(X,{...f,className:d(t.className,K),icon:s,size:r,themeColor:a,rotate:u,flip:l})};b.states=Ce;b.options=Oe;b.defaultOptions=R;b.className=K;b.moduleName=Y;b.folderName=Z;b.ariaSpec={selector:".k-icon, .k-svg-icon",rules:[{selector:".k-icon, .k-svg-icon",attribute:"aria-hidden=true",usage:"Hides the icon element and all its children from assistive technologies."}]};var V="button",oe=V;import{Fragment as ne,jsx as O,jsxs as re}from"react/jsx-runtime";var w="k-button",Me=["icon-button"],Se=[k.hover,k.focus,k.active,k.selected,k.disabled,k.generating],Ie={size:[n.undefined,n.xsmall,n.small,n.medium,n.large],rounded:[B.undefined,B.none,B.small,B.medium,B.large,B.full],fillMode:[m.undefined,m.solid,m.flat,m.outline,m.clear,m.link],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.inverse]},G={showArrow:!1,arrowIconName:"chevron-down"},i=t=>{let{as:e="button",size:r,rounded:a,fillMode:s,themeColor:c,showArrow:u=G.showArrow,arrowIconName:l=G.arrowIconName,variant:h,hover:g,focus:f,active:A,selected:N,disabled:L,togglable:P,ariaDisabled:C,icon:p,iconSize:v,text:E,iconClassName:ce,className:ue,...me}=t,pe=p!=null,fe=t.children!==void 0;return re(e,{className:d(ue,w,J(w,h),y(w,{size:r,rounded:a,fillMode:s,themeColor:c}),j(w,{hover:g,focus:f,active:A,disabled:L||C,selected:N}),{"k-icon-button":!E&&!fe&&pe}),"aria-pressed":P?N?"true":"false":void 0,...me,"aria-disabled":C?"true":void 0,disabled:L||void 0,children:[typeof p=="string"&&p&&O(b,{className:d(ce,"k-button-icon"),icon:p,size:v}),p&&typeof p!="string"&&O(ne,{children:p}),E?re(ne,{children:[E&&O("span",{className:"k-button-text",children:E}),t.children]}):t.children&&O("span",{className:"k-button-text",children:t.children}),u&&O("span",{className:"k-menu-button-arrow k-button-arrow",children:O(b,{icon:l})})]})};i.states=Se;i.options=Ie;i.variants=Me;i.className=w;i.defaultOptions=G;i.moduleName=V;i.folderName=oe;i.ariaSpec={selector:".k-button",rules:[{selector:".k-button",attribute:"role=button or nodeName=button",usage:"The button role is implicit from the native <button> element."},{selector:".k-button",attribute:"aria-label (when icon-only)",usage:"Required for icon-only buttons that have no visible text."},{selector:".k-button",attribute:"aria-pressed (when togglable)",usage:"Indicates the pressed state of a toggle button."},{selector:".k-button",attribute:"disabled (when disabled)",usage:"Rendered when the button is disabled."}]};import{jsx as ze}from"react/jsx-runtime";var ie=t=>ze(i,{icon:"folder",...t,"aria-label":t["aria-label"]||"Folder",children:void 0});import{jsx as we}from"react/jsx-runtime";var se=t=>we(i,{icon:"folder",children:"Button",...t});import{jsx as Ae}from"react/jsx-runtime";var ae=t=>Ae(i,{children:"Button",...t});import{jsx as q}from"react/jsx-runtime";var Le=i.options,Ee=i.states,_e={...i.defaultOptions,variant:"text"},Ke=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],Re=[],M=t=>{let{variant:e,...r}=t;switch(e){case"icon-only":return q(ie,{...r,icon:"star"});case"icon-and-text":return q(se,{...r,icon:"star",children:"Button"});default:return q(ae,{...r,children:"Button"})}};M.options=Le;M.states=Ee;M.variants=Ke;M.defaultOptions=_e;M.modifiers=Re;M.className=i.className;import{jsx as le,jsxs as De}from"react/jsx-runtime";var de="k-spin-button",Ue=[],He={size:[n.undefined,n.small,n.medium,n.large],fillMode:[m.undefined,m.solid,m.flat,m.outline,m.clear,m.link]},W={increaseLabel:"Increase value",decreaseLabel:"Decrease value"},T=t=>{let{size:e,fillMode:r,disabled:a,increaseLabel:s=W.increaseLabel,decreaseLabel:c=W.decreaseLabel,...u}=t;return De("span",{...u,className:d(de,t.className),children:[le(i,{className:"k-spinner-increase",icon:"chevron-up",size:e,fillMode:r,disabled:a,"aria-label":s}),le(i,{className:"k-spinner-decrease",icon:"chevron-down",size:e,fillMode:r,disabled:a,"aria-label":c})]})};T.states=Ue;T.options=He;T.className=de;T.defaultOptions=W;T.moduleName=null;T.folderName=null;var Yt=T;export{de as SPINBUTTON_CLASSNAME,T as SpinButton,Yt as default};