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

A collection of HTML helpers used for developing Kendo UI themes

var l=(...e)=>e.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?l(...t):typeof t=="object"?Object.keys(t).map((a,s)=>t[s]||t[a]&&a||null).filter(a=>a!==null).join(" "):t).filter(t=>!!t).join(" ");var g=(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"}),J=(e,t)=>{let{valid:a,invalid:s,hover:i,focus:d,checked:c,active:r,selected:y,disabled:x,indeterminate:h,loading:w,empty:k,readonly:N,highlighted:R,...O}=t;return l({"k-valid":a,"k-invalid":s,"k-hover":i,"k-focus":d,"k-checked":c,"k-active":r,"k-selected":y,"k-disabled":x,"k-indeterminate":h&&!c,"k-loading":w,"k-empty":k,"k-readonly":N,"k-highlighted":R},Object.keys(O).reduce((D,S)=>(S.startsWith("k-")?D[S]=O[S]:D[`k-${S}`]=O[S],D),{}))};var n={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},p={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"},A={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},v={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"},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{Fragment as ue,jsx as W}from"react/jsx-runtime";var F="k-font-icon",ce=[],me={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]},pe={},T=e=>{let{size:t,themeColor:a,icon:s,rotate:i,flip:d,...c}=e;return s?W("span",{...c,className:l(e.className,F,g(F,{size:t}),{[`k-i-${s}`]:s,[`k-color-${a}`]:a,[`k-rotate-${i}`]:i,"k-flip-h":d==="h"||d==="both","k-flip-v":d==="v"||d==="both"}),"aria-hidden":"true"}):W(ue,{})};T.states=ce;T.options=me;T.className=F;T.defaultOptions=pe;var Q=T;import{Fragment as ve,jsx as K}from"react/jsx-runtime";var V="k-svg-icon",fe=[],he={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:[v.outline,v.solid,v.duotone]},B={viewBox:"0 0 24 24",variant:v.outline},E=e=>{let{size:t,themeColor:a,rotate:s,flip:i,viewBox:d=B.viewBox,variant:c=B.variant,icon:r,...y}=e;if(!r)return K(ve,{});if(r==="none")return K("span",{...y,className:l(e.className,V,g("k-icon",{size:t}),"k-none"),"aria-hidden":"true"});let x=typeof r=="object"&&r.name&&r.name,h=typeof r=="object"?c&&r.variants?.[c]||r.variants?.outline||r.content:void 0;return K("span",{...y,className:l(e.className,V,g("k-icon",{size:t}),{[`k-svg-i-${x}`]:x,[`k-color-${a}`]:a,[`k-rotate-${s}`]:s,"k-flip-h":i==="h"||i==="both","k-flip-v":i==="v"||i==="both"}),"aria-hidden":"true",children:K("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof r=="object"?r.viewBox:d,dangerouslySetInnerHTML:h!==void 0?{__html:h}:void 0,children:r?void 0:e.children})})};E.states=fe;E.options=he;E.className=V;E.defaultOptions=B;var U=E;import*as G from"@progress/kendo-svg-icons";var Y="icon",Z="icons";import{useContext as ge}from"react";import{createContext as xe}from"react";var ee=xe({iconsType:"svg"});import{Fragment as te,jsx as z}from"react/jsx-runtime";var $="k-icon",ye=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),Ae=[],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],variant:[v.outline,v.solid,v.duotone]},H={viewBox:"0 0 24 24",type:"svg",variant:v.outline},f=e=>{let{iconsType:t}=ge(ee),{size:a,themeColor:s,icon:i,type:d=t||H.type,rotate:c,flip:r,viewBox:y=H.viewBox,variant:x=H.variant,...h}=e;if(!i)return z(te,{});if((t||d)==="svg"){if(i==="none")return z(U,{...h,className:l(e.className,$),icon:i,size:a,variant:x});let k=G[i]?i:ye(`${i}-icon`);return G[k]?z(U,{...h,className:l(e.className,$),icon:G[k],size:a,themeColor:s,rotate:c,flip:r,viewBox:y,variant:x}):z(te,{})}return z(Q,{...h,className:l(e.className,$),icon:i,size:a,themeColor:s,rotate:c,flip:r})};f.states=Ae;f.options=be;f.defaultOptions=H;f.className=$;f.moduleName=Y;f.folderName=Z;f.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 X="avatar",oe=X;import{jsx as ne}from"react/jsx-runtime";var _="k-avatar";var Ce=[u.hover,u.focus,u.active,u.selected,u.disabled],ke={size:[n.undefined,n.small,n.medium,n.large],rounded:[p.undefined,p.none,p.small,p.medium,p.large,p.full],fillMode:[A.undefined,A.solid,A.outline],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary]},j={type:"text",border:!1},m=e=>{let{size:t,rounded:a,fillMode:s,themeColor:i,type:d=j.type,border:c=j.border,...r}=e;return ne("div",{...r,className:l(e.className,_,g(_,{size:t,rounded:a,fillMode:s,themeColor:i}),{[`${_}-bordered`]:c}),children:ne("span",{className:`${_}-${d}`,children:e.children})})};m.states=Ce;m.options=ke;m.className=_;m.defaultOptions=j;m.moduleName=X;m.folderName=oe;m.ariaSpec={selector:".k-avatar",rules:[{selector:".k-avatar img",attribute:"alt",usage:"Images inside Avatar must have alt text for screen readers."}]};var C=m;import{jsx as Ne}from"react/jsx-runtime";var ae=e=>Ne(C,{type:"icon",...e});import{jsx as Ie}from"react/jsx-runtime";var re=e=>Ie(C,{type:"text",...e});import{jsx as Me}from"react/jsx-runtime";var ie=e=>Me(C,{type:"image",...e});import{jsx as Tt}from"react/jsx-runtime";import{jsx as L}from"react/jsx-runtime";var Oe=m.options,Se=m.states,Te={...m.defaultOptions,variant:"image"},Ee=[{name:"image",title:"Image"},{name:"icon",title:"Icon Avatar"},{name:"text",title:"Text Avatar"}],ze=[],I=e=>{let{variant:t,...a}=e;switch(t){case"icon":return L(ae,{...a,children:L(f,{icon:"star"})});case"text":return L(re,{...a,children:"JO"});default:return L(ie,{...a,children:L("img",{src:"https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg"})})}};I.options=Oe;I.states=Se;I.variants=Ee;I.defaultOptions=Te;I.modifiers=ze;I.className=m.className;var q="chip",se=q;import{jsx as M,jsxs as we}from"react/jsx-runtime";var P="k-chip",_e=[u.hover,u.focus,u.active,u.selected,u.disabled],Le={size:[n.undefined,n.small,n.medium,n.large],rounded:[p.undefined,p.none,p.small,p.medium,p.large,p.full],fillMode:[A.undefined,A.solid,A.outline],themeColor:[o.undefined,o.base,o.success,o.warning,o.error,o.info]},le={avatarImage:"/packages/html/assets/avatar.jpg"},b=e=>{let{size:t,rounded:a,fillMode:s,themeColor:i,text:d,icon:c,actions:r,showAvatar:y,avatarImage:x=le.avatarImage,hover:h,focus:w,active:k,selected:N,disabled:R,...O}=e;return we("div",{...O,className:l(e.className,P,g(P,{size:t,rounded:a,fillMode:s,themeColor:i}),J(P,{hover:h,focus:w,active:k,disabled:R,selected:N})),role:e.role||"button","aria-pressed":e.role==="option"?void 0:N?"true":"false",...e.role==="option"&&N!==void 0&&{"aria-selected":N?"true":"false"},"aria-disabled":R?"true":void 0,children:[c&&M(f,{className:"k-chip-icon",icon:c,size:"small"}),y&&M(m,{className:"k-chip-avatar",type:"image",children:M("img",{src:x,alt:""})}),M("span",{className:"k-chip-content",children:e.children?e.children:d&&M("span",{className:"k-chip-label",children:d})}),r&&M("span",{className:"k-chip-actions",children:r})]})};b.states=_e;b.options=Le;b.className=P;b.defaultOptions=le;b.moduleName=q;b.folderName=se;b.ariaSpec={selector:".k-chip",rules:[{selector:"*:not(.k-chip-list) > .k-chip",attribute:"role=button",usage:"Announces that the chip acts as a button when standalone."},{selector:"*:not(.k-chip-list) > .k-chip.k-selected",attribute:"aria-pressed=true",usage:"Announces that the Chip has been selected."},{selector:"*:not(.k-chip-list) > .k-chip:not(.k-selected)",attribute:"aria-pressed=false",usage:"Announces that the Chip has not been selected."},{selector:".k-chip",attribute:"aria-disabled=true (when disabled)",usage:"Announces that the Chip is disabled."}]};var de=b;import{jsx as Re}from"react/jsx-runtime";var eo=e=>Re(de,{icon:"map-marker-target","aria-label":"Location",...e});export{eo as ChipIcon};