@progress/kendo-themes-html/dist/cjs/chip/demos/chip-list.js

A collection of HTML helpers used for developing Kendo UI themes

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