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

A collection of HTML helpers used for developing Kendo UI themes

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