@progress/kendo-themes-html/dist/esm/badge/templates/icon-badge.mjs

A collection of HTML helpers used for developing Kendo UI themes

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"},c={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 le}from"react/jsx-runtime";var I="k-badge",ie=[],se={size:[n.undefined,n.small,n.medium,n.large],rounded:[c.undefined,c.none,c.small,c.medium,c.large,c.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 le("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=ie;l.options=se;l.className=I;l.defaultOptions=q;l.moduleName=w;l.folderName=U;l.ariaSpec={selector:".k-badge",rules:[]};import{jsx as Ze}from"react/jsx-runtime";import{Fragment as pe,jsx as X}from"react/jsx-runtime";var K="k-font-icon",de=[],me={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]},ce={},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(pe,{})};O.states=de;O.options=me;O.className=K;O.defaultOptions=ce;var J=O;import{Fragment as ge,jsx as _}from"react/jsx-runtime";var R="k-svg-icon",ue=[],fe={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 _(ge,{});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=ue;E.options=fe;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 ve}from"react";import{createContext as xe}from"react";var Y=xe({iconsType:"svg"});import{Fragment as Z,jsx as T}from"react/jsx-runtime";var L="k-icon",he=o=>o.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),ye=[],Ae={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},m=o=>{let{iconsType:e}=ve(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:he(`${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})};m.states=ye;m.options=Ae;m.defaultOptions=$;m.className=L;m.moduleName=W;m.folderName=Q;m.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 F="avatar",j=F;import{jsx as ee}from"react/jsx-runtime";var S="k-avatar";var be=[N.hover,N.focus,N.active,N.selected,N.disabled],Ne={size:[n.undefined,n.small,n.medium,n.large],rounded:[c.undefined,c.none,c.small,c.medium,c.large,c.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=be;p.options=Ne;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 Ce}from"react/jsx-runtime";var B=o=>Ce(h,{type:"icon",...o});import{jsx as ke}from"react/jsx-runtime";var oe=o=>ke(h,{type:"text",...o});import{jsx as Me}from"react/jsx-runtime";var te=o=>Me(h,{type:"image",...o});import{jsx as Ro}from"react/jsx-runtime";import{jsx as z}from"react/jsx-runtime";var Ie=p.options,Oe=p.states,Ee={...p.defaultOptions,variant:"image"},Te=[{name:"image",title:"Image"},{name:"icon",title:"Icon Avatar"},{name:"text",title:"Text Avatar"}],Se=[],C=o=>{let{variant:e,...r}=o;switch(e){case"icon":return z(B,{...r,children:z(m,{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=Ie;C.states=Oe;C.variants=Te;C.defaultOptions=Ee;C.modifiers=Se;C.className=p.className;import{jsx as y,jsxs as ne}from"react/jsx-runtime";var Be={...l.options,cutoutBorder:{type:"boolean"}},ze=l.states,re={...l.defaultOptions,themeColor:"error",variant:"icon"},_e=[{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(m,{icon:"user"})}),y(l,{align:"bottom-end",position:"edge",...r,...s,children:"26"})]}):ne("div",{className:"k-badge-container",children:[y(B,{children:y(m,{icon:"user"})}),y(l,{align:"bottom-end",position:"edge",...r,...s,children:y(m,{icon:"minus"})})]})};k.options=Be;k.states=ze;k.variants=_e;k.defaultOptions=re;k.modifiers=[];k.className=l.className;import{jsx as ae}from"react/jsx-runtime";var ft=o=>ae(l,{children:ae(m,{className:"k-badge-icon",icon:"x-circle"}),...o});export{ft as IconBadge};