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

A collection of HTML helpers used for developing Kendo UI themes

var Rt=Object.create;var H=Object.defineProperty;var Kt=Object.getOwnPropertyDescriptor;var Dt=Object.getOwnPropertyNames;var Pt=Object.getPrototypeOf,$t=Object.prototype.hasOwnProperty;var Ht=(t,e)=>{for(var n in e)H(t,n,{get:e[n],enumerable:!0})},st=(t,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of Dt(e))!$t.call(t,s)&&s!==n&&H(t,s,{get:()=>e[s],enumerable:!(r=Kt(e,s))||r.enumerable});return t};var Ft=(t,e,n)=>(n=t!=null?Rt(Pt(t)):{},st(e||!t||!t.__esModule?H(n,"default",{value:t,enumerable:!0}):n,t)),Ut=t=>st(H({},"__esModule",{value:!0}),t);var fe={};Ht(fe,{TooltipDemo:()=>k,default:()=>ue});module.exports=Ut(fe);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"}),rt=(t,e)=>{let{valid:n,invalid:r,hover:s,focus:d,checked:m,active:a,selected:b,disabled:v,indeterminate:h,loading:A,empty:g,readonly:P,highlighted:G,...B}=e;return l({"k-valid":n,"k-invalid":r,"k-hover":s,"k-focus":d,"k-checked":m,"k-active":a,"k-selected":b,"k-disabled":v,"k-indeterminate":h&&!m,"k-loading":A,"k-empty":g,"k-readonly":P,"k-highlighted":G},Object.keys(B).reduce((x,I)=>(I.startsWith("k-")?x[I]=B[I]:x[`k-${I}`]=B[I],x),{}))};function at(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"},M={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"},S={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},N={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"},E={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"},lt={calloutMap:{top:"n",bottom:"s",left:"w",right:"e"},orientationMap:{vertical:"vstack",horizontal:"hstack"}};var q={};function ct(t){return q[t]=(q[t]||0)+1,`k-${t}-${q[t]}`}var z=require("react/jsx-runtime"),J="k-font-icon",Vt=[],Gt={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]},qt={},R=t=>{let{size:e,themeColor:n,icon:r,rotate:s,flip:d,...m}=t;return r?(0,z.jsx)("span",{...m,className:l(t.className,J,y(J,{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"}):(0,z.jsx)(z.Fragment,{})};R.states=Vt;R.options=Gt;R.className=J;R.defaultOptions=qt;var dt=R;var w=require("react/jsx-runtime"),X="k-svg-icon",Jt=[],Xt={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:[N.outline,N.solid,N.duotone]},W={viewBox:"0 0 24 24",variant:N.outline},K=t=>{var A,g;let{size:e,themeColor:n,rotate:r,flip:s,viewBox:d=W.viewBox,variant:m=W.variant,icon:a,...b}=t;if(!a)return(0,w.jsx)(w.Fragment,{});if(a==="none")return(0,w.jsx)("span",{...b,className:l(t.className,X,y("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let v=typeof a=="object"&&a.name&&a.name,h=typeof a=="object"?m&&((A=a.variants)==null?void 0:A[m])||((g=a.variants)==null?void 0:g.outline)||a.content:void 0;return(0,w.jsx)("span",{...b,className:l(t.className,X,y("k-icon",{size:e}),{[`k-svg-i-${v}`]:v,[`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:(0,w.jsx)("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof a=="object"?a.viewBox:d,dangerouslySetInnerHTML:h!==void 0?{__html:h}:void 0,children:a?void 0:t.children})})};K.states=Jt;K.options=Xt;K.className=X;K.defaultOptions=W;var Q=K;var Y=Ft(require("@progress/kendo-svg-icons"));var mt="icon",pt="icons";var xt=require("react");var ut=require("react"),ft=(0,ut.createContext)({iconsType:"svg"});var T=require("react/jsx-runtime"),F="k-icon",Wt=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),Qt=[],Yt={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:[N.outline,N.solid,N.duotone]},U={viewBox:"0 0 24 24",type:"svg",variant:N.outline},p=t=>{let{iconsType:e}=(0,xt.useContext)(ft),{size:n,themeColor:r,icon:s,type:d=e||U.type,rotate:m,flip:a,viewBox:b=U.viewBox,variant:v=U.variant,...h}=t;if(!s)return(0,T.jsx)(T.Fragment,{});if((e||d)==="svg"){if(s==="none")return(0,T.jsx)(Q,{...h,className:l(t.className,F),icon:s,size:n,variant:v});let g=Y[s]?s:Wt(`${s}-icon`);return Y[g]?(0,T.jsx)(Q,{...h,className:l(t.className,F),icon:Y[g],size:n,themeColor:r,rotate:m,flip:a,viewBox:b,variant:v}):(0,T.jsx)(T.Fragment,{})}return(0,T.jsx)(dt,{...h,className:l(t.className,F),icon:s,size:n,themeColor:r,rotate:m,flip:a})};p.states=Qt;p.options=Yt;p.defaultOptions=U;p.className=F;p.moduleName=mt;p.folderName=pt;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 Z="tooltip",bt=Z;var C=require("react/jsx-runtime"),j="k-tooltip",Zt=[],jt={themeColor:[o.undefined,o.base,o.inverse,o.info,o.success,o.warning,o.error]},ht={closable:!1},u=t=>{let{closable:e=ht.closable,callout:n,themeColor:r,title:s,content:d,icon:m,id:a=ct("tooltip"),...b}=t;return(0,C.jsxs)("div",{...b,className:l(t.className,j,y(j,{themeColor:r}),{"k-tooltip-closable":e}),role:"tooltip",id:a,children:[m&&(0,C.jsx)(p,{className:"k-tooltip-icon",icon:m}),(0,C.jsxs)("div",{className:"k-tooltip-content",children:[s&&(0,C.jsx)("div",{className:"k-tooltip-title",children:s}),d]}),e&&(0,C.jsx)("div",{className:"k-tooltip-button",role:"button","aria-label":"Close",tabIndex:0,children:(0,C.jsx)(p,{icon:"x"})}),n&&(0,C.jsx)("div",{className:l("k-callout",{[`k-callout-${lt.calloutMap[n]||n}`]:n})})]})};u.states=Zt;u.options=jt;u.className=j;u.defaultOptions=ht;u.moduleName=Z;u.folderName=bt;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 gt=u;var vt=require("react/jsx-runtime"),Nt=t=>(0,vt.jsx)(gt,{content:"Tooltip Content",...t});var tt="popup",yt=tt;var ot=require("react/jsx-runtime"),Tt="k-animation-container",te=[],ee={},et={positionMode:"absolute",shown:!0},O=t=>{let{positionMode:e=et.positionMode,shown:n=et.shown,animationStyle:r,offset:s,...d}=t;return(0,ot.jsx)("div",{...d,style:{...s,...t.style},className:l(t.className,Tt,{"k-animation-container-shown":n,"k-animation-container-fixed":e==="fixed"}),children:(0,ot.jsx)("div",{className:"k-child-animation-container",style:r,children:t.children})})};O.states=te;O.options=ee;O.className=Tt;O.defaultOptions=et;O.moduleName=tt;O.folderName=yt;var nt="button",Ct=nt;var f=require("react/jsx-runtime"),D="k-button",oe=["icon-button"],ne=[E.hover,E.focus,E.active,E.selected,E.disabled,E.generating],ie={size:[i.undefined,i.xsmall,i.small,i.medium,i.large],rounded:[M.undefined,M.none,M.small,M.medium,M.large,M.full],fillMode:[S.undefined,S.solid,S.flat,S.outline,S.clear,S.link],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.inverse]},it={showArrow:!1,arrowIconName:"chevron-down"},c=t=>{let{as:e="button",size:n,rounded:r,fillMode:s,themeColor:d,showArrow:m=it.showArrow,arrowIconName:a=it.arrowIconName,variant:b,hover:v,focus:h,active:A,selected:g,disabled:P,togglable:G,ariaDisabled:B,icon:x,iconSize:I,text:$,iconClassName:wt,className:Bt,..._t}=t,Lt=x!=null,zt=t.children!==void 0;return(0,f.jsxs)(e,{className:l(Bt,D,at(D,b),y(D,{size:n,rounded:r,fillMode:s,themeColor:d}),rt(D,{hover:v,focus:h,active:A,disabled:P||B,selected:g}),{"k-icon-button":!$&&!zt&&Lt}),"aria-pressed":G?g?"true":"false":void 0,..._t,"aria-disabled":B?"true":void 0,disabled:P||void 0,children:[typeof x=="string"&&x&&(0,f.jsx)(p,{className:l(wt,"k-button-icon"),icon:x,size:I}),x&&typeof x!="string"&&(0,f.jsx)(f.Fragment,{children:x}),$?(0,f.jsxs)(f.Fragment,{children:[$&&(0,f.jsx)("span",{className:"k-button-text",children:$}),t.children]}):t.children&&(0,f.jsx)("span",{className:"k-button-text",children:t.children}),m&&(0,f.jsx)("span",{className:"k-menu-button-arrow k-button-arrow",children:(0,f.jsx)(p,{icon:a})})]})};c.states=ne;c.options=ie;c.variants=oe;c.className=D;c.defaultOptions=it;c.moduleName=nt;c.folderName=Ct;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."}]};var kt=require("react/jsx-runtime"),Ot=t=>(0,kt.jsx)(c,{icon:"folder",...t,"aria-label":t["aria-label"]||"Folder",children:void 0});var It=require("react/jsx-runtime"),At=t=>(0,It.jsx)(c,{icon:"folder",children:"Button",...t});var St=require("react/jsx-runtime"),Mt=t=>(0,St.jsx)(c,{children:"Button",...t});var V=require("react/jsx-runtime"),se=c.options,re=c.states,ae={...c.defaultOptions,variant:"text"},le=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],ce=[],_=t=>{let{variant:e,...n}=t;switch(e){case"icon-only":return(0,V.jsx)(Ot,{...n,icon:"star"});case"icon-and-text":return(0,V.jsx)(At,{...n,icon:"star",children:"Button"});default:return(0,V.jsx)(Mt,{...n,children:"Button"})}};_.options=se;_.states=re;_.variants=le;_.defaultOptions=ae;_.modifiers=ce;_.className=c.className;var L=require("react/jsx-runtime"),de={...u.options,closable:{type:"boolean"},callout:["none","top","bottom","left","right"]},me=u.states,Et={...u.defaultOptions,callout:"top"},pe=[],k=t=>{let{callout:e="top",...n}={...Et,...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(0,L.jsxs)("div",{style:{position:"absolute"},children:[(0,L.jsx)(O,{style:{top:s,left:d},children:(0,L.jsx)(Nt,{style:{width:"86px",textAlign:"center"},callout:m,content:"Content",...n})}),(0,L.jsx)(c,{text:"Show"})]})};k.options=de;k.states=me;k.variants=pe;k.defaultOptions=Et;k.modifiers=[];k.className=u.className;var ue=k;