@progress/kendo-themes-html/dist/esm/chat/templates/chat-normal.mjs

A collection of HTML helpers used for developing Kendo UI themes

var a=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?a(...e):typeof e=="object"?Object.keys(e).map((n,l)=>e[l]||e[n]&&n||null).filter(n=>n!==null).join(" "):e).filter(e=>!!e).join(" ");var f=(t,e)=>a({[`${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.fillMode}-${e.themeColor}`]:e.fillMode&&e.themeColor},{[`${t}-${e.themeColor}`]:e.themeColor&&e.fillMode===void 0},{"k-rounded-sm":e.rounded==="small","k-rounded-md":e.rounded==="medium","k-rounded-lg":e.rounded==="large","k-rounded-full":e.rounded==="full"}),v=(t,e)=>a({"k-valid":e.valid,"k-invalid":e.invalid,"k-hover":e.hover,"k-focus":e.focus,"k-checked":e.checked,"k-active":e.active,"k-selected":e.selected,"k-disabled":e.disabled,"k-indeterminate":e.indeterminate&&!e.checked,"k-loading":e.loading,"k-empty":e.empty,"k-readonly":e.readonly,"k-highlighted":e.highlighted});var r={xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},p={small:"small",medium:"medium",large:"large",full:"full"},u={solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},o={inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",dark:"dark",light:"light",inverse:"inverse"},s={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"};import{Fragment as st,jsx as Te}from"react/jsx-runtime";var ce="k-icon k-font-icon",et=[],tt={size:[r.xsmall,r.small,r.medium,r.large,r.xlarge,r.xxlarge,r.xxxlarge],themeColor:[o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},ot={},K=t=>{let{size:e,themeColor:n,icon:l,rotate:i,flip:c,...d}=t;return l?Te("span",{...d,className:a(t.className,ce,f(ce,{size:e}),{[`k-i-${l}`]:l,[`k-color-${n}`]:n,[`k-rotate-${i}`]:i,"k-flip-h":c==="h"||c==="both","k-flip-v":c==="v"||c==="both"})}):Te(st,{})};K.states=et;K.options=tt;K.className=ce;K.defaultOptions=ot;var we=K;import{Fragment as rt,jsx as X}from"react/jsx-runtime";var de="k-icon k-svg-icon",at=[],nt={size:[r.xsmall,r.small,r.medium,r.large,r.xlarge,r.xxlarge,r.xxxlarge],themeColor:[o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},Ae={viewBox:"0 0 24 24"},P=t=>{let{size:e,themeColor:n,rotate:l,flip:i,viewBox:c=Ae.viewBox,icon:d,...x}=t;if(!d)return X(rt,{});d==="none"&&{...x,className:a(t.className,de,"k-none")};let g=typeof d=="object"&&d.name&&d.name;return X("span",{...x,className:a(t.className,de,f("k-icon",{size:e}),{[`k-svg-i-${g}`]:g,[`k-color-${n}`]:n,[`k-rotate-${l}`]:l,"k-flip-h":i==="h"||i==="both","k-flip-v":i==="v"||i==="both"}),children:X("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof d=="object"?d.viewBox:c,dangerouslySetInnerHTML:typeof d=="object"?{__html:d.content}:void 0,children:d?void 0:t.children})})};P.states=at;P.options=nt;P.className=de;P.defaultOptions=Ae;var pe=P;import*as ze from"@progress/kendo-svg-icons";import{Fragment as Le,jsx as R}from"react/jsx-runtime";var lt=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),it=[],ct={size:[r.xsmall,r.small,r.medium,r.large,r.xlarge,r.xxlarge,r.xxxlarge],themeColor:[o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},ue={viewBox:"0 0 24 24",type:"svg"},b=t=>{let{size:e,themeColor:n,icon:l,type:i=ue.type,rotate:c,flip:d,viewBox:x=ue.viewBox,...g}=t;if(!l)return R(Le,{});if(i==="svg"){if(l==="none")return R(pe,{...g,icon:l,size:e});let M=lt(`${l}-icon`);return ze[M]?R(pe,{...g,icon:ze[M],size:e,themeColor:n,rotate:c,flip:d,viewBox:x}):R(Le,{})}return R(we,{...g,icon:l,size:e,themeColor:n,rotate:c,flip:d})};b.states=it;b.options=ct;b.defaultOptions=ue;import{Fragment as ut,jsx as V,jsxs as Oe}from"react/jsx-runtime";var J="k-button",dt=[s.hover,s.focus,s.active,s.selected,s.disabled],pt={size:[r.small,r.medium,r.large],rounded:[p.small,p.medium,p.large,p.full],fillMode:[u.solid,u.flat,u.outline,u.clear,u.link],themeColor:[o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark,o.inverse]},A={size:r.medium,rounded:p.medium,fillMode:u.solid,themeColor:o.base,showArrow:!1,arrowIconName:"caret-alt-down"},m=t=>{let{size:e=A.size,rounded:n=A.rounded,fillMode:l=A.fillMode,themeColor:i=A.themeColor,showArrow:c=A.showArrow,arrowIconName:d=A.arrowIconName,hover:x,focus:g,active:M,selected:C,disabled:w,icon:E,text:O,iconClassName:U,...D}=t,ie=E!==void 0,_=t.children!==void 0;return Oe("button",{...D,className:a(t.className,J,f(J,{size:e,rounded:n,fillMode:l,themeColor:i}),v(J,{hover:x,focus:g,active:M,disabled:w,selected:C}),{"k-icon-button":!O&&!_&&ie}),children:[E&&V(b,{className:a(U,"k-button-icon"),icon:E}),O?Oe(ut,{children:[O&&V("span",{className:"k-button-text",children:O}),t.children]}):t.children&&V("span",{className:"k-button-text",children:t.children}),c&&V("span",{className:"k-menu-button-arrow k-button-arrow",children:V(b,{icon:d})})]})};m.states=dt;m.options=pt;m.className=J;m.defaultOptions=A;import{jsx as Fo}from"react/jsx-runtime";import{jsx as Qo}from"react/jsx-runtime";import{jsx as Yo}from"react/jsx-runtime";import{jsx as ht}from"react/jsx-runtime";var W="k-input",mt=[s.hover,s.focus,s.valid,s.invalid,s.required,s.disabled,s.loading,s.readonly],ft={size:[r.small,r.medium,r.large],rounded:[p.small,p.medium,p.large,p.full],fillMode:[u.solid,u.flat,u.outline]},Y={size:r.medium,rounded:r.medium,fillMode:u.solid},I=t=>{let{hover:e,focus:n,disabled:l,invalid:i,valid:c,loading:d,readonly:x,size:g=Y.size,rounded:M=Y.rounded,fillMode:C=Y.fillMode,...w}=t;return ht("span",{...w,className:a(t.className,W,f(W,{size:g,rounded:M,fillMode:C}),v(W,{hover:e,focus:n,disabled:l,invalid:i,valid:c,loading:d,readonly:x}))})};I.states=mt;I.options=ft;I.className=W;I.defaultOptions=Y;import{jsx as bt}from"react/jsx-runtime";var Z="k-picker",xt=[s.hover,s.focus,s.valid,s.invalid,s.required,s.disabled,s.loading,s.readonly],gt={size:[r.small,r.medium,r.large],rounded:[p.small,p.medium,p.large,p.full],fillMode:[u.solid,u.flat,u.outline]},j={size:r.medium,rounded:p.medium,fillMode:u.solid},ee=t=>{let{hover:e,focus:n,disabled:l,invalid:i,valid:c,loading:d,readonly:x,size:g=j.size,rounded:M=j.rounded,fillMode:C=j.fillMode,...w}=t;return bt("span",{...w,className:a(t.className,Z,f(Z,{size:g,rounded:M,fillMode:C}),v(Z,{hover:e,focus:n,disabled:l,invalid:i,valid:c,loading:d,readonly:x})),children:t.children})};ee.states=xt;ee.options=gt;ee.className=Z;ee.defaultOptions=j;import{Fragment as Nt,jsx as me}from"react/jsx-runtime";var _e="k-clear-value",vt=[s.disabled,s.loading,s.readonly],yt={},G=t=>{let{disabled:e,loading:n,readonly:l,value:i}=t;return e||l||n||!i?me(Nt,{}):me("span",{className:a(t.className,_e),children:me(b,{icon:"x"})})};G.states=vt;G.options=yt;G.className=_e;import{jsx as It}from"react/jsx-runtime";var fe="k-input-inner",Mt=[],kt={},te={type:"text",autocomplete:"off",value:"",placeholder:""},$=t=>{let{value:e=te.value,type:n=te.type,placeholder:l=te.placeholder,autocomplete:i=te.autocomplete,...c}=t;return It("input",{...c,type:n,className:a(t.className,fe,f(fe,t)),placeholder:l,autoComplete:i,defaultValue:e})};$.states=Mt;$.options=kt;$.className=fe;import{jsx as Be,jsxs as Tt}from"react/jsx-runtime";var he="k-input-inner",Ct=[],St={},xe=t=>{let{value:e,placeholder:n,showValue:l,valueIcon:i,valueIconName:c,...d}=t;return Tt("span",{...d,className:a(t.className,he,f(he,t)),children:[i,!i&&c&&Be(b,{className:"k-input-value-icon",icon:c}),l&&!e&&n,l&&e&&Be("span",{className:"k-input-value-text",children:e})]})};xe.states=Ct;xe.options=St;xe.className=he;import{jsx as zt}from"react/jsx-runtime";var ge="k-input-inner",wt=[],At={},He={value:"",placeholder:""},be=t=>{let{value:e=He.value,placeholder:n=He.placeholder,rows:l,...i}=t;return zt("textarea",{...i,className:a(t.className,ge,f(ge,t)),placeholder:n,rows:l,defaultValue:e})};be.states=wt;be.options=At;be.className=ge;import{Fragment as Ot,jsx as Ee}from"react/jsx-runtime";var Ke="k-input-loading-icon",Lt=[s.disabled,s.loading],oe=t=>{let{disabled:e,loading:n}=t;return e||!n?Ee(Ot,{}):Ee("span",{className:a(t.className,Ke,"k-icon k-i-loading")})};oe.states=Lt;oe.className=Ke;import{Fragment as Ht,jsx as Pe}from"react/jsx-runtime";var Re="k-input-validation-icon",_t=[s.valid,s.invalid,s.disabled,s.loading],Bt={},F=t=>{let{valid:e,invalid:n,disabled:l,loading:i}=t,c=n?"warning-circle":"check-circle";return l||i||!!!(e||n)?Pe(Ht,{}):Pe(b,{className:a(Re),icon:c})};F.states=_t;F.options=Bt;F.className=Re;import{Fragment as Pt,jsx as Ve}from"react/jsx-runtime";var Et="k-input-prefix",Kt={direction:"horizontal"},Ge=t=>{let{direction:e=Kt.direction,...n}=t;return t.children?Ve("span",{...n,className:a(Et,t.className,{[`k-input-prefix-${e}`]:e}),children:t.children}):Ve(Pt,{})};import{Fragment as Gt,jsx as $e}from"react/jsx-runtime";var Rt="k-input-suffix",Vt={direction:"horizontal"},Fe=t=>{let{direction:e=Vt.direction,...n}=t;return t.children?$e("span",{...n,className:a(Rt,t.className,{[`k-input-suffix-${e}`]:e}),children:t.children}):$e(Gt,{})};import{jsx as Rs}from"react/jsx-runtime";import{jsx as Fs}from"react/jsx-runtime";import{jsx as Ft}from"react/jsx-runtime";var qe="k-input-separator",$t={direction:"vertical"},ve=t=>{let{direction:e=$t.direction,...n}=t;return Ft("span",{...n,className:a(qe,t.className,{[`${qe}-${e}`]:e})})};import{Fragment as Ue,jsx as S,jsxs as ye}from"react/jsx-runtime";var De="k-textbox",qt=[s.hover,s.focus,s.valid,s.invalid,s.required,s.disabled,s.loading,s.readonly],Ut={size:[r.small,r.medium,r.large],rounded:[p.small,p.medium,p.large,p.full],fillMode:[u.solid,u.flat,u.outline]},z={showClearButton:!0,showValidationIcon:!0,size:I.defaultOptions.size,rounded:I.defaultOptions.rounded,fillMode:I.defaultOptions.fillMode,separators:!0},B=t=>{let{size:e=z.size,rounded:n=z.rounded,fillMode:l=z.fillMode,separators:i=z.separators,showClearButton:c=z.showClearButton,showValidationIcon:d=z.showValidationIcon,prefix:x,suffix:g,type:M,value:C,placeholder:w,hover:E,focus:O,valid:U,invalid:D,required:ie,loading:_,disabled:Q,readonly:Se,...je}=t;return ye(I,{...je,size:e,rounded:n,fillMode:l,hover:E,focus:O,valid:U,invalid:D,required:ie,loading:_,disabled:Q,readonly:Se,className:a(t.className,De),children:[x&&ye(Ue,{children:[S(Ge,{children:x}),i&&S(ve,{})]}),S($,{placeholder:w,value:C,type:M}),d&&S(F,{valid:U,invalid:D,loading:_,disabled:Q}),S(oe,{loading:_,disabled:Q}),c&&S(G,{loading:_,disabled:Q,readonly:Se,value:C}),g&&ye(Ue,{children:[i&&S(ve,{}),S(Fe,{children:g})]})]})};B.states=qt;B.options=Ut;B.className=De;B.defaultOptions=z;import{jsx as fa}from"react/jsx-runtime";import{Fragment as ya,jsx as va}from"react/jsx-runtime";import{Fragment as Ta,jsx as Sa}from"react/jsx-runtime";import{Fragment as Xt,jsx as h,jsxs as se}from"react/jsx-runtime";var Xe="k-chat",Dt=[],Qt={},Je={showToolbar:!0,showMessageBox:!0,showMoreButton:!0},T=t=>{let{dir:e,showToolbar:n,showMessageBox:l=Je.showMessageBox,showMoreButton:i,...c}=t;return se("div",{...c,className:a(Xe,t.className),dir:e,children:[h("div",{className:"k-message-list k-avatars",children:h("div",{className:"k-message-list-content",children:t.children})}),l&&h(B,{className:"k-message-box",placeholder:"Type a message...",suffix:se(Xt,{children:[i&&h(m,{fillMode:"flat",icon:"more-horizontal"}),h(m,{fillMode:"flat",icon:"paper-plane",className:"k-chat-send"})]})}),n&&se("div",{className:"k-chat-toolbar k-toolbar",children:[h(m,{className:a("k-scroll-button","k-scroll-button-left",e==="rtl"?"":"k-hidden"),icon:"chevron-left"}),se("div",{className:"k-toolbar-group k-button-list",children:[h(m,{icon:"arrow-rotate-cw"}),h(m,{icon:"gear"}),h(m,{icon:"wrench"}),h(m,{icon:"plus"}),h(m,{icon:"search"}),h(m,{icon:"star"}),h(m,{icon:"bell"}),h(m,{icon:"question-circle"}),h(m,{icon:"trash"})]}),h(m,{className:a("k-scroll-button","k-scroll-button-right",e==="rtl"&&"k-hidden"),icon:"chevron-right"})]})]})};T.states=Dt;T.options=Qt;T.className=Xe;T.defaultOptions=Je;import{jsx as Ne,jsxs as Yt}from"react/jsx-runtime";var Me="k-message",Jt=[s.selected],Wt={},ae={time:"Thu Feb 08 2018",text:"How can I help you?",status:"Seen"},y=t=>{let{time:e=ae.time,text:n=ae.text,status:l=ae.status,selected:i,...c}=t;return Yt("div",{...c,className:a(Me,t.className,v(Me,{selected:i})),children:[Ne("time",{className:"k-message-time",children:e}),Ne("div",{className:"k-chat-bubble",children:n}),Ne("span",{className:"k-message-status",children:l})]})};y.states=Jt;y.options=Wt;y.className=Me;y.defaultOptions=ae;import{jsx as We}from"react/jsx-runtime";var q="k-avatar";var Zt=[s.hover,s.focus,s.active,s.selected,s.disabled],jt={size:[r.small,r.medium,r.large],rounded:[p.small,p.medium,p.large,p.full],fillMode:[u.solid,u.flat,u.outline],themeColor:[o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark,o.inverse]},L={type:"text",size:r.medium,rounded:p.full,fillMode:u.solid,themeColor:o.primary,border:!1},H=t=>{let{size:e=L.size,rounded:n=L.rounded,fillMode:l=L.fillMode,themeColor:i=L.themeColor,type:c=L.type,border:d=L.border,...x}=t;return We("div",{...x,className:a(t.className,q,f(q,{size:e,rounded:n,fillMode:l,themeColor:i}),{[`${q}-bordered`]:d}),children:We("span",{className:`${q}-${c}`,children:t.children})})};H.states=Zt;H.options=jt;H.className=q;H.defaultOptions=L;import{jsx as Qa}from"react/jsx-runtime";import{jsx as Ya}from"react/jsx-runtime";import{jsx as tn}from"react/jsx-runtime";import{jsx as ke,jsxs as oo}from"react/jsx-runtime";var Ie="k-message-group",eo=[s.selected],to={},ne={author:"Bruv",avatar:"/packages/html/assets/avatar.jpg",alt:!1},N=t=>{let{alt:e=ne.alt,author:n=ne.author,avatar:l=ne.avatar,selected:i,...c}=t;return oo("div",{...c,className:a(Ie,t.className,v(Ie,{selected:i}),{"k-alt":e,"k-no-avatar":!l}),children:[n&&ke("p",{className:"k-author",children:n}),l&&ke(H,{type:"image",children:ke("img",{src:l})}),t.children]})};N.states=eo;N.options=to;N.className=Ie;N.defaultOptions=ne;import{jsx as ro}from"react/jsx-runtime";var Ze="k-quick-replies",so=[],ao={},no={},re=t=>{let{...e}=t;return ro("div",{...e,className:a(Ze,t.className),children:t.children})};re.states=so;re.options=ao;re.className=Ze;re.defaultOptions=no;import{jsx as po}from"react/jsx-runtime";var Ce="k-quick-reply",lo=[s.focus,s.hover],io={},co={},le=t=>{let{focus:e,hover:n,text:l}=t;return po("span",{className:a(Ce,v(Ce,{focus:e,hover:n})),children:l})};le.states=lo;le.options=io;le.className=Ce;le.defaultOptions=co;import{Fragment as Mn,jsx as Nn,jsxs as kn}from"react/jsx-runtime";import{Fragment as wn,jsx as Tn,jsxs as An}from"react/jsx-runtime";import{Fragment as uo,jsx as k,jsxs as mo}from"react/jsx-runtime";var Gn=t=>k(T,{children:mo(uo,{children:[k("div",{className:"k-timestamp",children:"Day, Month 7, 2023"}),k(N,{children:k(y,{className:"k-only"})}),k(N,{alt:!0,children:k(y,{className:"k-only"})}),k(N,{children:k(y,{className:"k-only",text:"Very long message text that tests message overflowing behavior. Very long message text that tests message overflowing behavior."})}),k(N,{alt:!0,children:k(y,{className:"k-only",text:"Unusually_long_word_that_tests_word_break_behavior__unusually_long_word_that_tests_word_break_behavior"})})]}),...t});export{Gn as ChatNormal};