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