@progress/kendo-themes-html/dist/cjs/chip/templates/chiplist-removable.js

A collection of HTML helpers used for developing Kendo UI themes

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