@progress/kendo-themes-html/dist/esm/tooltip/demos/tooltip.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((n,r)=>e[r]||e[n]&&n||null).filter(n=>n!==null).join(" "):e).filter(e=>!!e).join(" ");var N=(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"}),ot=(t,e)=>{let{valid:n,invalid:r,hover:s,focus:d,checked:m,active:a,selected:x,disabled:g,indeterminate:b,loading:z,empty:y,readonly:R,highlighted:H,...I}=e;return l({"k-valid":n,"k-invalid":r,"k-hover":s,"k-focus":d,"k-checked":m,"k-active":a,"k-selected":x,"k-disabled":g,"k-indeterminate":b&&!m,"k-loading":z,"k-empty":y,"k-readonly":R,"k-highlighted":H},Object.keys(I).reduce((f,T)=>(T.startsWith("k-")?f[T]=I[T]:f[`k-${T}`]=I[T],f),{}))};function nt(t,e){if(!e)return{};let n=Array.isArray(e)?e:[e];return Object.fromEntries(n.map(r=>[`k-${r}`,!0]))}var i={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},C={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"},O={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},h={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"},k={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"},it={calloutMap:{top:"n",bottom:"s",left:"w",right:"e"},orientationMap:{vertical:"vstack",horizontal:"hstack"}};var F={};function st(t){return F[t]=(F[t]||0)+1,`k-${t}-${F[t]}`}import{Fragment as zt,jsx as rt}from"react/jsx-runtime";var U="k-font-icon",Bt=[],_t={size:[i.undefined,i.xsmall,i.small,i.medium,i.large,i.xlarge,i.xxlarge,i.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info]},Lt={},E=t=>{let{size:e,themeColor:n,icon:r,rotate:s,flip:d,...m}=t;return r?rt("span",{...m,className:l(t.className,U,N(U,{size:e}),{[`k-i-${r}`]:r,[`k-color-${n}`]:n,[`k-rotate-${s}`]:s,"k-flip-h":d==="h"||d==="both","k-flip-v":d==="v"||d==="both"}),"aria-hidden":"true"}):rt(zt,{})};E.states=Bt;E.options=_t;E.className=U;E.defaultOptions=Lt;var at=E;import{Fragment as Dt,jsx as D}from"react/jsx-runtime";var V="k-svg-icon",Rt=[],Kt={size:[i.undefined,i.xsmall,i.small,i.medium,i.large,i.xlarge,i.xxlarge,i.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info],variant:[h.outline,h.solid,h.duotone]},G={viewBox:"0 0 24 24",variant:h.outline},w=t=>{let{size:e,themeColor:n,rotate:r,flip:s,viewBox:d=G.viewBox,variant:m=G.variant,icon:a,...x}=t;if(!a)return D(Dt,{});if(a==="none")return D("span",{...x,className:l(t.className,V,N("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let g=typeof a=="object"&&a.name&&a.name,b=typeof a=="object"?m&&a.variants?.[m]||a.variants?.outline||a.content:void 0;return D("span",{...x,className:l(t.className,V,N("k-icon",{size:e}),{[`k-svg-i-${g}`]:g,[`k-color-${n}`]:n,[`k-rotate-${r}`]:r,"k-flip-h":s==="h"||s==="both","k-flip-v":s==="v"||s==="both"}),"aria-hidden":"true",children:D("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof a=="object"?a.viewBox:d,dangerouslySetInnerHTML:b!==void 0?{__html:b}:void 0,children:a?void 0:t.children})})};w.states=Rt;w.options=Kt;w.className=V;w.defaultOptions=G;var q=w;import*as J from"@progress/kendo-svg-icons";var lt="icon",ct="icons";import{useContext as $t}from"react";import{createContext as Pt}from"react";var dt=Pt({iconsType:"svg"});import{Fragment as mt,jsx as B}from"react/jsx-runtime";var P="k-icon",Ht=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),Ft=[],Ut={size:[i.undefined,i.xsmall,i.small,i.medium,i.large,i.xlarge,i.xxlarge,i.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info],variant:[h.outline,h.solid,h.duotone]},$={viewBox:"0 0 24 24",type:"svg",variant:h.outline},p=t=>{let{iconsType:e}=$t(dt),{size:n,themeColor:r,icon:s,type:d=e||$.type,rotate:m,flip:a,viewBox:x=$.viewBox,variant:g=$.variant,...b}=t;if(!s)return B(mt,{});if((e||d)==="svg"){if(s==="none")return B(q,{...b,className:l(t.className,P),icon:s,size:n,variant:g});let y=J[s]?s:Ht(`${s}-icon`);return J[y]?B(q,{...b,className:l(t.className,P),icon:J[y],size:n,themeColor:r,rotate:m,flip:a,viewBox:x,variant:g}):B(mt,{})}return B(at,{...b,className:l(t.className,P),icon:s,size:n,themeColor:r,rotate:m,flip:a})};p.states=Ft;p.options=Ut;p.defaultOptions=$;p.className=P;p.moduleName=lt;p.folderName=ct;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 X="tooltip",pt=X;import{jsx as _,jsxs as ut}from"react/jsx-runtime";var W="k-tooltip",Vt=[],Gt={themeColor:[o.undefined,o.base,o.inverse,o.info,o.success,o.warning,o.error]},ft={closable:!1},u=t=>{let{closable:e=ft.closable,callout:n,themeColor:r,title:s,content:d,icon:m,id:a=st("tooltip"),...x}=t;return ut("div",{...x,className:l(t.className,W,N(W,{themeColor:r}),{"k-tooltip-closable":e}),role:"tooltip",id:a,children:[m&&_(p,{className:"k-tooltip-icon",icon:m}),ut("div",{className:"k-tooltip-content",children:[s&&_("div",{className:"k-tooltip-title",children:s}),d]}),e&&_("div",{className:"k-tooltip-button",role:"button","aria-label":"Close",tabIndex:0,children:_(p,{icon:"x"})}),n&&_("div",{className:l("k-callout",{[`k-callout-${it.calloutMap[n]||n}`]:n})})]})};u.states=Vt;u.options=Gt;u.className=W;u.defaultOptions=ft;u.moduleName=X;u.folderName=pt;u.ariaSpec={selector:".k-tooltip",implicitRole:"tooltip",rules:[{selector:".k-tooltip",attribute:"role=tooltip",usage:"Specifies the tooltip role of the tooltip container."},{selector:".k-tooltip",attribute:"id",usage:"The element needs an id to be associated with the aria-describedby attribute of the trigger element."},{selector:".k-tooltip .k-tooltip-button",attribute:"role=button",usage:"The close button needs an explicit button role."},{selector:".k-tooltip .k-tooltip-button",attribute:"aria-label",usage:"The close button needs an accessible name."}]};var xt=u;import{jsx as qt}from"react/jsx-runtime";var bt=t=>qt(xt,{content:"Tooltip Content",...t});var Q="popup",ht=Q;import{jsx as gt}from"react/jsx-runtime";var Nt="k-animation-container",Jt=[],Xt={},Y={positionMode:"absolute",shown:!0},v=t=>{let{positionMode:e=Y.positionMode,shown:n=Y.shown,animationStyle:r,offset:s,...d}=t;return gt("div",{...d,style:{...s,...t.style},className:l(t.className,Nt,{"k-animation-container-shown":n,"k-animation-container-fixed":e==="fixed"}),children:gt("div",{className:"k-child-animation-container",style:r,children:t.children})})};v.states=Jt;v.options=Xt;v.className=Nt;v.defaultOptions=Y;v.moduleName=Q;v.folderName=ht;var Z="button",vt=Z;import{Fragment as yt,jsx as M,jsxs as Tt}from"react/jsx-runtime";var L="k-button",Wt=["icon-button"],Qt=[k.hover,k.focus,k.active,k.selected,k.disabled,k.generating],Yt={size:[i.undefined,i.xsmall,i.small,i.medium,i.large],rounded:[C.undefined,C.none,C.small,C.medium,C.large,C.full],fillMode:[O.undefined,O.solid,O.flat,O.outline,O.clear,O.link],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.inverse]},j={showArrow:!1,arrowIconName:"chevron-down"},c=t=>{let{as:e="button",size:n,rounded:r,fillMode:s,themeColor:d,showArrow:m=j.showArrow,arrowIconName:a=j.arrowIconName,variant:x,hover:g,focus:b,active:z,selected:y,disabled:R,togglable:H,ariaDisabled:I,icon:f,iconSize:T,text:K,iconClassName:It,className:Mt,...St}=t,Et=f!=null,wt=t.children!==void 0;return Tt(e,{className:l(Mt,L,nt(L,x),N(L,{size:n,rounded:r,fillMode:s,themeColor:d}),ot(L,{hover:g,focus:b,active:z,disabled:R||I,selected:y}),{"k-icon-button":!K&&!wt&&Et}),"aria-pressed":H?y?"true":"false":void 0,...St,"aria-disabled":I?"true":void 0,disabled:R||void 0,children:[typeof f=="string"&&f&&M(p,{className:l(It,"k-button-icon"),icon:f,size:T}),f&&typeof f!="string"&&M(yt,{children:f}),K?Tt(yt,{children:[K&&M("span",{className:"k-button-text",children:K}),t.children]}):t.children&&M("span",{className:"k-button-text",children:t.children}),m&&M("span",{className:"k-menu-button-arrow k-button-arrow",children:M(p,{icon:a})})]})};c.states=Qt;c.options=Yt;c.variants=Wt;c.className=L;c.defaultOptions=j;c.moduleName=Z;c.folderName=vt;c.ariaSpec={selector:".k-button",rules:[{selector:".k-button",attribute:"role=button or nodeName=button",usage:"The button role is implicit from the native <button> element."},{selector:".k-button",attribute:"aria-label (when icon-only)",usage:"Required for icon-only buttons that have no visible text."},{selector:".k-button",attribute:"aria-pressed (when togglable)",usage:"Indicates the pressed state of a toggle button."},{selector:".k-button",attribute:"disabled (when disabled)",usage:"Rendered when the button is disabled."}]};import{jsx as Zt}from"react/jsx-runtime";var Ct=t=>Zt(c,{icon:"folder",...t,"aria-label":t["aria-label"]||"Folder",children:void 0});import{jsx as jt}from"react/jsx-runtime";var Ot=t=>jt(c,{icon:"folder",children:"Button",...t});import{jsx as te}from"react/jsx-runtime";var kt=t=>te(c,{children:"Button",...t});import{jsx as tt}from"react/jsx-runtime";var ee=c.options,oe=c.states,ne={...c.defaultOptions,variant:"text"},ie=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],se=[],S=t=>{let{variant:e,...n}=t;switch(e){case"icon-only":return tt(Ct,{...n,icon:"star"});case"icon-and-text":return tt(Ot,{...n,icon:"star",children:"Button"});default:return tt(kt,{...n,children:"Button"})}};S.options=ee;S.states=oe;S.variants=ie;S.defaultOptions=ne;S.modifiers=se;S.className=c.className;import{jsx as et,jsxs as ce}from"react/jsx-runtime";var re={...u.options,closable:{type:"boolean"},callout:["none","top","bottom","left","right"]},ae=u.states,At={...u.defaultOptions,callout:"top"},le=[],A=t=>{let{callout:e="top",...n}={...At,...t},r={none:{top:"-33px",left:"-17px",calloutDirection:null},right:{top:"2px",left:"61px",calloutDirection:"left"},left:{top:"2px",left:"-94px",calloutDirection:"right"},bottom:{top:"38px",left:"-17px",calloutDirection:"top"},top:{top:"-33px",left:"-17px",calloutDirection:"bottom"}},{top:s,left:d,calloutDirection:m}=r[e]||{};return ce("div",{style:{position:"absolute"},children:[et(v,{style:{top:s,left:d},children:et(bt,{style:{width:"86px",textAlign:"center"},callout:m,content:"Content",...n})}),et(c,{text:"Show"})]})};A.options=re;A.states=ae;A.variants=le;A.defaultOptions=At;A.modifiers=[];A.className=u.className;var Ko=A;export{A as TooltipDemo,Ko as default};