@progress/kendo-themes-html/dist/cjs/badge/demos/badge.js

A collection of HTML helpers used for developing Kendo UI themes

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