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