@progress/kendo-themes-html/dist/esm/chip/templates/chiplist-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((i,a)=>t[a]||t[i]&&i||null).filter(i=>i!==null).join(" "):t).filter(t=>!!t).join(" ");var h=(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"}),te=(e,t)=>{let{valid:i,invalid:a,hover:s,focus:c,checked:d,active:r,selected:A,disabled:g,indeterminate:v,loading:H,empty:N,readonly:M,highlighted:w,...O}=t;return l({"k-valid":i,"k-invalid":a,"k-hover":s,"k-focus":c,"k-checked":d,"k-active":r,"k-selected":A,"k-disabled":g,"k-indeterminate":v&&!d,"k-loading":H,"k-empty":N,"k-readonly":M,"k-highlighted":w},Object.keys(O).reduce((G,L)=>(L.startsWith("k-")?G[L]=O[L]:G[`k-${L}`]=O[L],G),{}))};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"},C={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"},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"};var S="chip",P=S;import{jsx as Ae}from"react/jsx-runtime";var q="k-chip-list",xe=[],ge={size:[n.undefined,n.small,n.medium,n.large]},be={},b=e=>{let{size:t,multiselectable:i,ariaLabel:a,...s}=e;return Ae("div",{...s,className:l(e.className,q,h(q,{size:t})),role:e.role||"listbox","aria-label":e.role==="none"?void 0:a||"chip list","aria-orientation":e.role==="none"?void 0:"horizontal","aria-multiselectable":i?"true":void 0,children:e.children})};b.states=xe;b.options=ge;b.className=q;b.defaultOptions=be;b.moduleName=S;b.folderName=P;b.ariaSpec={selector:".k-chip-list",rules:[{selector:".k-chip-list",attribute:"role=listbox",usage:"Announces the list role of the chip list."},{selector:".k-chip-list",attribute:"aria-label or aria-labelledby",usage:"Adds label to the ChipList element. ListBox element requires an accessible name."},{selector:".k-chip-list",attribute:"aria-orientation=horizontal",usage:"Specifies the horizontal orientation of the chiplist."},{selector:".k-chip-list",attribute:"aria-multiselectable=true (when multiple selection)",usage:"Announces the multiple selection ability of the chiplist."},{selector:".k-chip-list .k-chip",attribute:"role=option",usage:"Announces the chip is an option inner component of the chip list."},{selector:".k-chip-list .k-chip.k-selected",attribute:"aria-selected=true",usage:"Announces the chip is selected."},{selector:".k-chip-list .k-chip:not(.k-selected)",attribute:"aria-selected=false",usage:"Announces the chip is not selected."},{selector:".k-chip-list .k-chip:has(.k-i-x-circle), .k-chip-list .k-chip:has(.k-svg-i-x-circle)",attribute:"aria-keyshortcuts=Enter Delete",usage:"Announces the Delete action along with the default Enter key."}]};import{Fragment as Ne,jsx as oe}from"react/jsx-runtime";var X="k-font-icon",Ce=[],ye={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={},T=e=>{let{size:t,themeColor:i,icon:a,rotate:s,flip:c,...d}=e;return a?oe("span",{...d,className:l(e.className,X,h(X,{size:t}),{[`k-i-${a}`]:a,[`k-color-${i}`]:i,[`k-rotate-${s}`]:s,"k-flip-h":c==="h"||c==="both","k-flip-v":c==="v"||c==="both"}),"aria-hidden":"true"}):oe(Ne,{})};T.states=Ce;T.options=ye;T.className=X;T.defaultOptions=ke;var ne=T;import{Fragment as Ee,jsx as D}from"react/jsx-runtime";var J="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]},W={viewBox:"0 0 24 24",variant:x.outline},z=e=>{let{size:t,themeColor:i,rotate:a,flip:s,viewBox:c=W.viewBox,variant:d=W.variant,icon:r,...A}=e;if(!r)return D(Ee,{});if(r==="none")return D("span",{...A,className:l(e.className,J,h("k-icon",{size:t}),"k-none"),"aria-hidden":"true"});let g=typeof r=="object"&&r.name&&r.name,v=typeof r=="object"?d&&r.variants?.[d]||r.variants?.outline||r.content:void 0;return D("span",{...A,className:l(e.className,J,h("k-icon",{size:t}),{[`k-svg-i-${g}`]:g,[`k-color-${i}`]:i,[`k-rotate-${a}`]:a,"k-flip-h":s==="h"||s==="both","k-flip-v":s==="v"||s==="both"}),"aria-hidden":"true",children:D("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof r=="object"?r.viewBox:c,dangerouslySetInnerHTML:v!==void 0?{__html:v}:void 0,children:r?void 0:e.children})})};z.states=Me;z.options=Ie;z.className=J;z.defaultOptions=W;var Q=z;import*as Y from"@progress/kendo-svg-icons";var ie="icon",ae="icons";import{useContext as Le}from"react";import{createContext as Oe}from"react";var se=Oe({iconsType:"svg"});import{Fragment as re,jsx as _}from"react/jsx-runtime";var $="k-icon",Se=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),Te=[],ze={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]},F={viewBox:"0 0 24 24",type:"svg",variant:x.outline},p=e=>{let{iconsType:t}=Le(se),{size:i,themeColor:a,icon:s,type:c=t||F.type,rotate:d,flip:r,viewBox:A=F.viewBox,variant:g=F.variant,...v}=e;if(!s)return _(re,{});if((t||c)==="svg"){if(s==="none")return _(Q,{...v,className:l(e.className,$),icon:s,size:i,variant:g});let N=Y[s]?s:Se(`${s}-icon`);return Y[N]?_(Q,{...v,className:l(e.className,$),icon:Y[N],size:i,themeColor:a,rotate:d,flip:r,viewBox:A,variant:g}):_(re,{})}return _(ne,{...v,className:l(e.className,$),icon:s,size:i,themeColor:a,rotate:d,flip:r})};p.states=Te;p.options=ze;p.defaultOptions=F;p.className=$;p.moduleName=ie;p.folderName=ae;p.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 Z="avatar",le=Z;import{jsx as ce}from"react/jsx-runtime";var R="k-avatar";var _e=[f.hover,f.focus,f.active,f.selected,f.disabled],Re={size:[n.undefined,n.small,n.medium,n.large],rounded:[u.undefined,u.none,u.small,u.medium,u.large,u.full],fillMode:[C.undefined,C.solid,C.outline],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary]},j={type:"text",border:!1},m=e=>{let{size:t,rounded:i,fillMode:a,themeColor:s,type:c=j.type,border:d=j.border,...r}=e;return ce("div",{...r,className:l(e.className,R,h(R,{size:t,rounded:i,fillMode:a,themeColor:s}),{[`${R}-bordered`]:d}),children:ce("span",{className:`${R}-${c}`,children:e.children})})};m.states=_e;m.options=Re;m.className=R;m.defaultOptions=j;m.moduleName=Z;m.folderName=le;m.ariaSpec={selector:".k-avatar",rules:[{selector:".k-avatar img",attribute:"alt",usage:"Images inside Avatar must have alt text for screen readers."}]};var k=m;import{jsx as Ke}from"react/jsx-runtime";var de=e=>Ke(k,{type:"icon",...e});import{jsx as He}from"react/jsx-runtime";var pe=e=>He(k,{type:"text",...e});import{jsx as we}from"react/jsx-runtime";var me=e=>we(k,{type:"image",...e});import{jsx as qt}from"react/jsx-runtime";import{jsx as K}from"react/jsx-runtime";var Pe=m.options,De=m.states,$e={...m.defaultOptions,variant:"image"},Fe=[{name:"image",title:"Image"},{name:"icon",title:"Icon Avatar"},{name:"text",title:"Text Avatar"}],Ve=[],I=e=>{let{variant:t,...i}=e;switch(t){case"icon":return K(de,{...i,children:K(p,{icon:"star"})});case"text":return K(pe,{...i,children:"JO"});default:return K(me,{...i,children:K("img",{src:"https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg"})})}};I.options=Pe;I.states=De;I.variants=Fe;I.defaultOptions=$e;I.modifiers=Ve;I.className=m.className;import{jsx as E,jsxs as Ge}from"react/jsx-runtime";var V="k-chip",Be=[f.hover,f.focus,f.active,f.selected,f.disabled],Ue={size:[n.undefined,n.small,n.medium,n.large],rounded:[u.undefined,u.none,u.small,u.medium,u.large,u.full],fillMode:[C.undefined,C.solid,C.outline],themeColor:[o.undefined,o.base,o.success,o.warning,o.error,o.info]},ue={avatarImage:"/packages/html/assets/avatar.jpg"},y=e=>{let{size:t,rounded:i,fillMode:a,themeColor:s,text:c,icon:d,actions:r,showAvatar:A,avatarImage:g=ue.avatarImage,hover:v,focus:H,active:N,selected:M,disabled:w,...O}=e;return Ge("div",{...O,className:l(e.className,V,h(V,{size:t,rounded:i,fillMode:a,themeColor:s}),te(V,{hover:v,focus:H,active:N,disabled:w,selected:M})),role:e.role||"button","aria-pressed":e.role==="option"?void 0:M?"true":"false",...e.role==="option"&&M!==void 0&&{"aria-selected":M?"true":"false"},"aria-disabled":w?"true":void 0,children:[d&&E(p,{className:"k-chip-icon",icon:d,size:"small"}),A&&E(m,{className:"k-chip-avatar",type:"image",children:E("img",{src:g,alt:""})}),E("span",{className:"k-chip-content",children:e.children?e.children:c&&E("span",{className:"k-chip-label",children:c})}),r&&E("span",{className:"k-chip-actions",children:r})]})};y.states=Be;y.options=Ue;y.className=V;y.defaultOptions=ue;y.moduleName=S;y.folderName=P;y.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 fe=y;import{jsx as B}from"react/jsx-runtime";var qe="k-chip-action";var he=e=>{let{type:t,...i}=e,a;switch(t){case"remove":a=B(p,{icon:"x-circle",size:"small"});break;case"more":a=B(p,{icon:"more-vertical",size:"small"});break;default:return B(p,{icon:t,size:"small"})}return B("span",{...i,className:l(e.className,qe,`k-chip-${t}-action`),children:a})};import{jsx as ve}from"react/jsx-runtime";var U=e=>ve(fe,{text:"Removable",...e,actions:ve(he,{type:"remove"})});import{jsx as ee,jsxs as Xe}from"react/jsx-runtime";var Io=e=>Xe(b,{...e,children:[ee(U,{role:"option","aria-selected":"false","aria-keyshortcuts":"Enter Delete"}),ee(U,{role:"option","aria-selected":"false","aria-keyshortcuts":"Enter Delete"}),ee(U,{role:"option","aria-selected":"false","aria-keyshortcuts":"Enter Delete"})]});export{Io as ChipListRemovable};