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