UNPKG

@progress/kendo-themes-html

Version:

A collection of HTML helpers used for developing Kendo UI themes

2 lines (1 loc) 8.18 kB
var d=(...o)=>o.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?d(...e):typeof e=="object"?Object.keys(e).map((r,s)=>e[s]||e[r]&&r||null).filter(r=>r!==null).join(" "):e).filter(e=>!!e).join(" ");var x=(o,e)=>d({[`${o}-xs`]:e.size==="xsmall",[`${o}-sm`]:e.size==="small",[`${o}-md`]:e.size==="medium",[`${o}-lg`]:e.size==="large",[`${o}-xl`]:e.size==="xlarge",[`${o}-xxl`]:e.size==="xxlarge",[`${o}-xxxl`]:e.size==="xxxlarge"},{[`${o}-${e.fillMode}`]:e.fillMode},{[`${o}-${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"});var n={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},m={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"},v={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},g={undefined:void 0,outline:"outline",solid:"solid",duotone:"duotone"},t={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",inverse:"inverse"},N={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 w="badge",U=w;import{jsx as se}from"react/jsx-runtime";var I="k-badge",ae=[],ie={size:[n.undefined,n.small,n.medium,n.large],rounded:[m.undefined,m.none,m.small,m.medium,m.large,m.full],fillMode:[v.undefined,v.solid,v.outline],themeColor:[t.undefined,t.base,t.primary,t.secondary,t.tertiary,t.info,t.success,t.warning,t.error]},q={cutoutBorder:!1},l=o=>{let{size:e,fillMode:r,themeColor:s,cutoutBorder:i=q.cutoutBorder,rounded:u,position:f,align:a,...A}=o;return se("span",{...A,className:d(o.className,I,x(I,{size:e,rounded:u,fillMode:r,themeColor:s}),{[`${I}-${f}`]:f,[`k-${a}`]:a,[`${I}-border-cutout`]:i}),children:o.children})};l.states=ae;l.options=ie;l.className=I;l.defaultOptions=q;l.moduleName=w;l.folderName=U;l.ariaSpec={selector:".k-badge",rules:[]};import{Fragment as ce,jsx as X}from"react/jsx-runtime";var K="k-font-icon",le=[],de={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[t.undefined,t.base,t.primary,t.secondary,t.tertiary,t.success,t.warning,t.error,t.info]},me={},O=o=>{let{size:e,themeColor:r,icon:s,rotate:i,flip:u,...f}=o;return s?X("span",{...f,className:d(o.className,K,x(K,{size:e}),{[`k-i-${s}`]:s,[`k-color-${r}`]:r,[`k-rotate-${i}`]:i,"k-flip-h":u==="h"||u==="both","k-flip-v":u==="v"||u==="both"}),"aria-hidden":"true"}):X(ce,{})};O.states=le;O.options=de;O.className=K;O.defaultOptions=me;var J=O;import{Fragment as fe,jsx as _}from"react/jsx-runtime";var R="k-svg-icon",pe=[],ue={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[t.undefined,t.base,t.primary,t.secondary,t.tertiary,t.success,t.warning,t.error,t.info],variant:[g.outline,g.solid,g.duotone]},D={viewBox:"0 0 24 24",variant:g.outline},E=o=>{let{size:e,themeColor:r,rotate:s,flip:i,viewBox:u=D.viewBox,variant:f=D.variant,icon:a,...A}=o;if(!a)return _(fe,{});if(a==="none")return _("span",{...A,className:d(o.className,R,x("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let M=typeof a=="object"&&a.name&&a.name,b=typeof a=="object"?f&&a.variants?.[f]||a.variants?.outline||a.content:void 0;return _("span",{...A,className:d(o.className,R,x("k-icon",{size:e}),{[`k-svg-i-${M}`]:M,[`k-color-${r}`]:r,[`k-rotate-${s}`]:s,"k-flip-h":i==="h"||i==="both","k-flip-v":i==="v"||i==="both"}),"aria-hidden":"true",children:_("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof a=="object"?a.viewBox:u,dangerouslySetInnerHTML:b!==void 0?{__html:b}:void 0,children:a?void 0:o.children})})};E.states=pe;E.options=ue;E.className=R;E.defaultOptions=D;var P=E;import*as H from"@progress/kendo-svg-icons";var W="icon",Q="icons";import{useContext as xe}from"react";import{createContext as ge}from"react";var Y=ge({iconsType:"svg"});import{Fragment as Z,jsx as T}from"react/jsx-runtime";var L="k-icon",ve=o=>o.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),he=[],ye={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[t.undefined,t.base,t.primary,t.secondary,t.tertiary,t.success,t.warning,t.error,t.info],variant:[g.outline,g.solid,g.duotone]},$={viewBox:"0 0 24 24",type:"svg",variant:g.outline},c=o=>{let{iconsType:e}=xe(Y),{size:r,themeColor:s,icon:i,type:u=e||$.type,rotate:f,flip:a,viewBox:A=$.viewBox,variant:M=$.variant,...b}=o;if(!i)return T(Z,{});if((e||u)==="svg"){if(i==="none")return T(P,{...b,className:d(o.className,L),icon:i,size:r,variant:M});let G=H[i]?i:ve(`${i}-icon`);return H[G]?T(P,{...b,className:d(o.className,L),icon:H[G],size:r,themeColor:s,rotate:f,flip:a,viewBox:A,variant:M}):T(Z,{})}return T(J,{...b,className:d(o.className,L),icon:i,size:r,themeColor:s,rotate:f,flip:a})};c.states=he;c.options=ye;c.defaultOptions=$;c.className=L;c.moduleName=W;c.folderName=Q;c.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."}]};import{jsx as bo}from"react/jsx-runtime";var F="avatar",j=F;import{jsx as ee}from"react/jsx-runtime";var S="k-avatar";var Ae=[N.hover,N.focus,N.active,N.selected,N.disabled],be={size:[n.undefined,n.small,n.medium,n.large],rounded:[m.undefined,m.none,m.small,m.medium,m.large,m.full],fillMode:[v.undefined,v.solid,v.outline],themeColor:[t.undefined,t.base,t.primary,t.secondary,t.tertiary]},V={type:"text",border:!1},p=o=>{let{size:e,rounded:r,fillMode:s,themeColor:i,type:u=V.type,border:f=V.border,...a}=o;return ee("div",{...a,className:d(o.className,S,x(S,{size:e,rounded:r,fillMode:s,themeColor:i}),{[`${S}-bordered`]:f}),children:ee("span",{className:`${S}-${u}`,children:o.children})})};p.states=Ae;p.options=be;p.className=S;p.defaultOptions=V;p.moduleName=F;p.folderName=j;p.ariaSpec={selector:".k-avatar",rules:[{selector:".k-avatar img",attribute:"alt",usage:"Images inside Avatar must have alt text for screen readers."}]};var h=p;import{jsx as Ne}from"react/jsx-runtime";var B=o=>Ne(h,{type:"icon",...o});import{jsx as Ce}from"react/jsx-runtime";var oe=o=>Ce(h,{type:"text",...o});import{jsx as ke}from"react/jsx-runtime";var te=o=>ke(h,{type:"image",...o});import{jsx as Do}from"react/jsx-runtime";import{jsx as z}from"react/jsx-runtime";var Me=p.options,Ie=p.states,Oe={...p.defaultOptions,variant:"image"},Ee=[{name:"image",title:"Image"},{name:"icon",title:"Icon Avatar"},{name:"text",title:"Text Avatar"}],Te=[],C=o=>{let{variant:e,...r}=o;switch(e){case"icon":return z(B,{...r,children:z(c,{icon:"star"})});case"text":return z(oe,{...r,children:"JO"});default:return z(te,{...r,children:z("img",{src:"https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg"})})}};C.options=Me;C.states=Ie;C.variants=Ee;C.defaultOptions=Oe;C.modifiers=Te;C.className=p.className;import{jsx as y,jsxs as ne}from"react/jsx-runtime";var Se={...l.options,cutoutBorder:{type:"boolean"}},Be=l.states,re={...l.defaultOptions,themeColor:"error",variant:"icon"},ze=[{name:"icon",title:"Icon Badge"},{name:"text",title:"Text Badge"}],k=o=>{let{variant:e,...r}={...re,...o},s={};return e==="text"?ne("div",{className:"k-badge-container",children:[y(B,{children:y(c,{icon:"user"})}),y(l,{align:"bottom-end",position:"edge",...r,...s,children:"26"})]}):ne("div",{className:"k-badge-container",children:[y(B,{children:y(c,{icon:"user"})}),y(l,{align:"bottom-end",position:"edge",...r,...s,children:y(c,{icon:"minus"})})]})};k.options=Se;k.states=Be;k.variants=ze;k.defaultOptions=re;k.modifiers=[];k.className=l.className;import{jsx as _e}from"react/jsx-runtime";var ft=o=>_e(l,{...o});export{ft as BadgeNormal};