@progress/kendo-themes-html/dist/esm/bubble/templates/bubble-expanded.mjs

A collection of HTML helpers used for developing Kendo UI themes

var l=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?l(...e):typeof e=="object"?Object.keys(e).map((i,s)=>e[s]||e[i]&&i||null).filter(i=>i!==null).join(" "):e).filter(e=>!!e).join(" ");var h=(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"}),F=(t,e)=>{let{valid:i,invalid:s,hover:r,focus:c,checked:d,active:a,selected:p,disabled:x,indeterminate:b,loading:H,empty:N,readonly:J,highlighted:W,...M}=e;return l({"k-valid":i,"k-invalid":s,"k-hover":r,"k-focus":c,"k-checked":d,"k-active":a,"k-selected":p,"k-disabled":x,"k-indeterminate":b&&!d,"k-loading":H,"k-empty":N,"k-readonly":J,"k-highlighted":W},Object.keys(M).reduce((O,g)=>(g.startsWith("k-")?O[g]=M[g]:O[`k-${g}`]=M[g],O),{}))};var n={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"};var u={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"},v={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"};import{Fragment as Z,jsx as K}from"react/jsx-runtime";var L="k-font-icon",X=[],Q={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]},Y={},y=t=>{let{size:e,themeColor:i,icon:s,rotate:r,flip:c,...d}=t;return s?K("span",{...d,className:l(t.className,L,h(L,{size:e}),{[`k-i-${s}`]:s,[`k-color-${i}`]:i,[`k-rotate-${r}`]:r,"k-flip-h":c==="h"||c==="both","k-flip-v":c==="v"||c==="both"}),"aria-hidden":"true"}):K(Z,{})};y.states=X;y.options=Q;y.className=L;y.defaultOptions=Y;var D=y;import{Fragment as oe,jsx as I}from"react/jsx-runtime";var T="k-svg-icon",ee=[],te={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:[u.outline,u.solid,u.duotone]},z={viewBox:"0 0 24 24",variant:u.outline},k=t=>{let{size:e,themeColor:i,rotate:s,flip:r,viewBox:c=z.viewBox,variant:d=z.variant,icon:a,...p}=t;if(!a)return I(oe,{});if(a==="none")return I("span",{...p,className:l(t.className,T,h("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let x=typeof a=="object"&&a.name&&a.name,b=typeof a=="object"?d&&a.variants?.[d]||a.variants?.outline||a.content:void 0;return I("span",{...p,className:l(t.className,T,h("k-icon",{size:e}),{[`k-svg-i-${x}`]:x,[`k-color-${i}`]:i,[`k-rotate-${s}`]:s,"k-flip-h":r==="h"||r==="both","k-flip-v":r==="v"||r==="both"}),"aria-hidden":"true",children:I("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof a=="object"?a.viewBox:c,dangerouslySetInnerHTML:b!==void 0?{__html:b}:void 0,children:a?void 0:t.children})})};k.states=ee;k.options=te;k.className=T;k.defaultOptions=z;var w=k;import*as A from"@progress/kendo-svg-icons";var P="icon",U="icons";import{useContext as ae}from"react";import{createContext as ne}from"react";var V=ne({iconsType:"svg"});import{Fragment as G,jsx as C}from"react/jsx-runtime";var S="k-icon",re=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),ie=[],se={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:[u.outline,u.solid,u.duotone]},B={viewBox:"0 0 24 24",type:"svg",variant:u.outline},m=t=>{let{iconsType:e}=ae(V),{size:i,themeColor:s,icon:r,type:c=e||B.type,rotate:d,flip:a,viewBox:p=B.viewBox,variant:x=B.variant,...b}=t;if(!r)return C(G,{});if((e||c)==="svg"){if(r==="none")return C(w,{...b,className:l(t.className,S),icon:r,size:i,variant:x});let N=A[r]?r:re(`${r}-icon`);return A[N]?C(w,{...b,className:l(t.className,S),icon:A[N],size:i,themeColor:s,rotate:d,flip:a,viewBox:p,variant:x}):C(G,{})}return C(D,{...b,className:l(t.className,S),icon:r,size:i,themeColor:s,rotate:d,flip:a})};m.states=ie;m.options=se;m.defaultOptions=B;m.className=S;m.moduleName=P;m.folderName=U;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 _="bubble",j=_;import{jsx as E,jsxs as de}from"react/jsx-runtime";var $="k-bubble",le=[v.hover,v.active,v.selected,v.focus],R={expandable:!1,expanded:!1},f=t=>{let{content:e,hover:i,active:s,focus:r,selected:c,expandable:d=R.expandable,expanded:a=R.expanded,...p}=t;return de("div",{...p,className:l(t.className,$,F($,{hover:i,active:s,focus:r,selected:c}),{"k-bubble-expandable":d},{"k-expanded":a}),tabIndex:0,children:[E("div",{className:"k-bubble-content",children:e??t.children}),d&&E("span",{className:"k-bubble-expandable-indicator",role:"button","aria-label":a?"Show less":"Show more",tabIndex:0,children:a?E(m,{icon:"chevron-up"}):E(m,{icon:"chevron-down"})})]})};f.states=le;f.className=$;f.defaultOptions=R;f.moduleName=_;f.folderName=j;f.ariaSpec={selector:".k-bubble",rules:[{selector:".k-bubble",attribute:"tabindex=0",usage:"The Chat bubble must be focusable."},{selector:".k-bubble-expandable-indicator",attribute:"role=button",usage:"The expandable indicator must have an appropriate role."},{selector:".k-bubble-expandable-indicator",attribute:"aria-label or title",usage:"The expandable indicator must be properly labelled."},{selector:".k-bubble-expandable-indicator",attribute:"tabindex=0",usage:"The expandable indicator must be part of the page tabsequence."}]};var q=f;import{jsx as ce}from"react/jsx-runtime";var We=t=>ce(q,{expandable:!0,content:"Expandable bubble content. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",...t});export{We as BubbleExpandable};