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

A collection of HTML helpers used for developing Kendo UI themes

var qe=Object.create;var G=Object.defineProperty;var We=Object.getOwnPropertyDescriptor;var Je=Object.getOwnPropertyNames;var Xe=Object.getPrototypeOf,Qe=Object.prototype.hasOwnProperty;var Ye=(e,t)=>{for(var o in t)G(e,o,{get:t[o],enumerable:!0})},ue=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of Je(t))!Qe.call(e,n)&&n!==o&&G(e,n,{get:()=>t[n],enumerable:!(r=We(t,n))||r.enumerable});return e};var Ze=(e,t,o)=>(o=e!=null?qe(Xe(e)):{},ue(t||!e||!e.__esModule?G(o,"default",{value:e,enumerable:!0}):o,e)),je=e=>ue(G({},"__esModule",{value:!0}),e);var Bt={};Ye(Bt,{PopoverDemo:()=>E,default:()=>Pt});module.exports=je(Bt);var l=(...e)=>e.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?l(...t):typeof t=="object"?Object.keys(t).map((o,r)=>t[r]||t[o]&&o||null).filter(o=>o!==null).join(" "):t).filter(t=>!!t).join(" ");var _=(e,t)=>l({[`${e}-xs`]:t.size==="xsmall",[`${e}-sm`]:t.size==="small",[`${e}-md`]:t.size==="medium",[`${e}-lg`]:t.size==="large",[`${e}-xl`]:t.size==="xlarge",[`${e}-xxl`]:t.size==="xxlarge",[`${e}-xxxl`]:t.size==="xxxlarge"},{[`${e}-${t.fillMode}`]:t.fillMode},{[`${e}-${t.themeColor}`]:t.themeColor},{"k-rounded-sm":t.rounded==="small","k-rounded-md":t.rounded==="medium","k-rounded-lg":t.rounded==="large","k-rounded-full":t.rounded==="full","k-rounded-none":t.rounded==="none"}),fe=(e,t)=>{let{valid:o,invalid:r,hover:n,focus:c,checked:m,active:d,selected:k,disabled:A,indeterminate:b,loading:P,empty:x,readonly:F,highlighted:Q,...R}=t;return l({"k-valid":o,"k-invalid":r,"k-hover":n,"k-focus":c,"k-checked":m,"k-active":d,"k-selected":k,"k-disabled":A,"k-indeterminate":b&&!m,"k-loading":P,"k-empty":x,"k-readonly":F,"k-highlighted":Q},Object.keys(R).reduce((v,B)=>(B.startsWith("k-")?v[B]=R[B]:v[`k-${B}`]=R[B],v),{}))};function he(e,t){if(!t)return{};let o=Array.isArray(t)?t:[t];return Object.fromEntries(o.map(r=>[`k-${r}`,!0]))}var a={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},I={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"},w={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},N={undefined:void 0,outline:"outline",solid:"solid",duotone:"duotone"},i={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",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",generating:"generating",expanded:"expanded"},ve={calloutMap:{top:"n",bottom:"s",left:"w",right:"e"},orientationMap:{vertical:"vstack",horizontal:"hstack"}};var Y={};function be(e){return Y[e]=(Y[e]||0)+1,`k-${e}-${Y[e]}`}var Z="popup",xe=Z;var ee=require("react/jsx-runtime"),Ne="k-animation-container",et=[],tt={},j={positionMode:"absolute",shown:!0},T=e=>{let{positionMode:t=j.positionMode,shown:o=j.shown,animationStyle:r,offset:n,...c}=e;return(0,ee.jsx)("div",{...c,style:{...n,...e.style},className:l(e.className,Ne,{"k-animation-container-shown":o,"k-animation-container-fixed":t==="fixed"}),children:(0,ee.jsx)("div",{className:"k-child-animation-container",style:r,children:e.children})})};T.states=et;T.options=tt;T.className=Ne;T.defaultOptions=j;T.moduleName=Z;T.folderName=xe;var te="popup",ge=te;var oe=require("react/jsx-runtime"),ye="k-popup",ot=[],nt={},Ae={positionMode:"absolute"},O=e=>{let{offset:t,positionMode:o=Ae.positionMode,animationStyle:r,containerClassName:n,containerRole:c,containerAriaLabel:m,...d}=e;return(0,oe.jsx)(T,{positionMode:o,offset:t,animationStyle:r,className:n,role:c,"aria-label":m,children:(0,oe.jsx)("div",{...d,className:l(e.className,ye),children:e.children})})};O.states=ot;O.options=nt;O.className=ye;O.defaultOptions=Ae;O.moduleName=te;O.folderName=ge;O.ariaSpec={selector:".k-popup",rules:[{selector:".k-animation-container",attribute:"role (when appended to body)",usage:'Container gets role="region" when appended to document body. Popup is a building block \u2014 ARIA semantics come from consuming components.'}]};var ne="popover",Oe=ne;var g=require("react/jsx-runtime"),Ce="k-popover",it=[],rt={},at={},u=e=>{let{callout:t,title:o,body:r,id:n=be("popover"),...c}=e;return(0,g.jsxs)(O,{...c,className:l(e.className,Ce),role:"dialog",id:n,"aria-labelledby":o?`${n}-header`:void 0,"aria-describedby":r?`${n}-body`:void 0,children:[t&&(0,g.jsx)("div",{className:l("k-popover-callout",{[`k-callout-${ve.calloutMap[t]||t}`]:t})}),(0,g.jsxs)("div",{className:"k-popover-inner",children:[o&&(0,g.jsx)("div",{className:"k-popover-header",id:`${n}-header`,children:o}),r&&(0,g.jsx)("div",{className:"k-popover-body",id:`${n}-body`,children:r}),(0,g.jsx)(g.Fragment,{children:e.children})]})]})};u.states=it;u.options=rt;u.className=Ce;u.defaultOptions=at;u.moduleName=ne;u.folderName=Oe;u.ariaSpec={selector:".k-popover",implicitRole:"dialog",rules:[{selector:".k-popover",attribute:"role=dialog",usage:"Announces the dialog role when the popover contains focusable elements. Use role=tooltip when it does not."},{selector:".k-popover",attribute:"id",usage:"The element needs an id to be associated with the aria-describedby attribute of the trigger element."},{selector:".k-popover",attribute:"aria-labelledby",usage:"Links the popover container with the popover header element when there is focusable content."},{selector:".k-popover",attribute:"aria-describedby",usage:"Links the popover container with the popover body element when there is focusable content."},{selector:".k-popover-header",attribute:"id",usage:"Links the popover header with the popover container via aria-labelledby."},{selector:".k-popover-body",attribute:"id",usage:"Links the popover body with the popover container via aria-describedby."}]};var ie="action-buttons",Me=ie;var ke=require("react/jsx-runtime"),q="k-actions",st=[],lt={},re={alignment:"start",orientation:"horizontal"},f=e=>{let{alignment:t=re.alignment,orientation:o=re.orientation,...r}=e;return(0,ke.jsx)("div",{...r,className:l(q,{[`${q}-${t}`]:t,[`${q}-${o}`]:o},e.className),children:e.children})};f.states=st;f.options=lt;f.className=q;f.defaultOptions=re;f.moduleName=ie;f.folderName=Me;var K=require("react/jsx-runtime"),ae="k-font-icon",ct=[],dt={size:[a.undefined,a.xsmall,a.small,a.medium,a.large,a.xlarge,a.xxlarge,a.xxxlarge],themeColor:[i.undefined,i.base,i.primary,i.secondary,i.tertiary,i.success,i.warning,i.error,i.info]},pt={},D=e=>{let{size:t,themeColor:o,icon:r,rotate:n,flip:c,...m}=e;return r?(0,K.jsx)("span",{...m,className:l(e.className,ae,_(ae,{size:t}),{[`k-i-${r}`]:r,[`k-color-${o}`]:o,[`k-rotate-${n}`]:n,"k-flip-h":c==="h"||c==="both","k-flip-v":c==="v"||c==="both"}),"aria-hidden":"true"}):(0,K.jsx)(K.Fragment,{})};D.states=ct;D.options=dt;D.className=ae;D.defaultOptions=pt;var Te=D;var L=require("react/jsx-runtime"),se="k-svg-icon",mt=[],ut={size:[a.undefined,a.xsmall,a.small,a.medium,a.large,a.xlarge,a.xxlarge,a.xxxlarge],themeColor:[i.undefined,i.base,i.primary,i.secondary,i.tertiary,i.success,i.warning,i.error,i.info],variant:[N.outline,N.solid,N.duotone]},le={viewBox:"0 0 24 24",variant:N.outline},U=e=>{var P,x;let{size:t,themeColor:o,rotate:r,flip:n,viewBox:c=le.viewBox,variant:m=le.variant,icon:d,...k}=e;if(!d)return(0,L.jsx)(L.Fragment,{});if(d==="none")return(0,L.jsx)("span",{...k,className:l(e.className,se,_("k-icon",{size:t}),"k-none"),"aria-hidden":"true"});let A=typeof d=="object"&&d.name&&d.name,b=typeof d=="object"?m&&((P=d.variants)==null?void 0:P[m])||((x=d.variants)==null?void 0:x.outline)||d.content:void 0;return(0,L.jsx)("span",{...k,className:l(e.className,se,_("k-icon",{size:t}),{[`k-svg-i-${A}`]:A,[`k-color-${o}`]:o,[`k-rotate-${r}`]:r,"k-flip-h":n==="h"||n==="both","k-flip-v":n==="v"||n==="both"}),"aria-hidden":"true",children:(0,L.jsx)("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof d=="object"?d.viewBox:c,dangerouslySetInnerHTML:b!==void 0?{__html:b}:void 0,children:d?void 0:e.children})})};U.states=mt;U.options=ut;U.className=se;U.defaultOptions=le;var ce=U;var de=Ze(require("@progress/kendo-svg-icons"));var Ee="icon",Pe="icons";var Ie=require("react");var Be=require("react"),_e=(0,Be.createContext)({iconsType:"svg"});var C=require("react/jsx-runtime"),W="k-icon",ft=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),ht=[],vt={size:[a.undefined,a.xsmall,a.small,a.medium,a.large,a.xlarge,a.xxlarge,a.xxxlarge],themeColor:[i.undefined,i.base,i.primary,i.secondary,i.tertiary,i.success,i.warning,i.error,i.info],variant:[N.outline,N.solid,N.duotone]},J={viewBox:"0 0 24 24",type:"svg",variant:N.outline},y=e=>{let{iconsType:t}=(0,Ie.useContext)(_e),{size:o,themeColor:r,icon:n,type:c=t||J.type,rotate:m,flip:d,viewBox:k=J.viewBox,variant:A=J.variant,...b}=e;if(!n)return(0,C.jsx)(C.Fragment,{});if((t||c)==="svg"){if(n==="none")return(0,C.jsx)(ce,{...b,className:l(e.className,W),icon:n,size:o,variant:A});let x=de[n]?n:ft(`${n}-icon`);return de[x]?(0,C.jsx)(ce,{...b,className:l(e.className,W),icon:de[x],size:o,themeColor:r,rotate:m,flip:d,viewBox:k,variant:A}):(0,C.jsx)(C.Fragment,{})}return(0,C.jsx)(Te,{...b,className:l(e.className,W),icon:n,size:o,themeColor:r,rotate:m,flip:d})};y.states=ht;y.options=vt;y.defaultOptions=J;y.className=W;y.moduleName=Ee;y.folderName=Pe;y.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 pe="button",we=pe;var h=require("react/jsx-runtime"),$="k-button",bt=["icon-button"],xt=[S.hover,S.focus,S.active,S.selected,S.disabled,S.generating],Nt={size:[a.undefined,a.xsmall,a.small,a.medium,a.large],rounded:[I.undefined,I.none,I.small,I.medium,I.large,I.full],fillMode:[w.undefined,w.solid,w.flat,w.outline,w.clear,w.link],themeColor:[i.undefined,i.base,i.primary,i.secondary,i.tertiary,i.success,i.warning,i.error,i.info,i.inverse]},me={showArrow:!1,arrowIconName:"chevron-down"},s=e=>{let{as:t="button",size:o,rounded:r,fillMode:n,themeColor:c,showArrow:m=me.showArrow,arrowIconName:d=me.arrowIconName,variant:k,hover:A,focus:b,active:P,selected:x,disabled:F,togglable:Q,ariaDisabled:R,icon:v,iconSize:B,text:V,iconClassName:$e,className:He,...Fe}=e,Ve=v!=null,Ge=e.children!==void 0;return(0,h.jsxs)(t,{className:l(He,$,he($,k),_($,{size:o,rounded:r,fillMode:n,themeColor:c}),fe($,{hover:A,focus:b,active:P,disabled:F||R,selected:x}),{"k-icon-button":!V&&!Ge&&Ve}),"aria-pressed":Q?x?"true":"false":void 0,...Fe,"aria-disabled":R?"true":void 0,disabled:F||void 0,children:[typeof v=="string"&&v&&(0,h.jsx)(y,{className:l($e,"k-button-icon"),icon:v,size:B}),v&&typeof v!="string"&&(0,h.jsx)(h.Fragment,{children:v}),V?(0,h.jsxs)(h.Fragment,{children:[V&&(0,h.jsx)("span",{className:"k-button-text",children:V}),e.children]}):e.children&&(0,h.jsx)("span",{className:"k-button-text",children:e.children}),m&&(0,h.jsx)("span",{className:"k-menu-button-arrow k-button-arrow",children:(0,h.jsx)(y,{icon:d})})]})};s.states=xt;s.options=Nt;s.variants=bt;s.className=$;s.defaultOptions=me;s.moduleName=pe;s.folderName=we;s.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 Le=require("react/jsx-runtime"),Se=e=>(0,Le.jsx)(s,{icon:"folder",...e,"aria-label":e["aria-label"]||"Folder",children:void 0});var ze=require("react/jsx-runtime"),Re=e=>(0,ze.jsx)(s,{icon:"folder",children:"Button",...e});var De=require("react/jsx-runtime"),Ke=e=>(0,De.jsx)(s,{children:"Button",...e});var X=require("react/jsx-runtime"),gt=s.options,yt=s.states,At={...s.defaultOptions,variant:"text"},Ot=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],Ct=[],z=e=>{let{variant:t,...o}=e;switch(t){case"icon-only":return(0,X.jsx)(Se,{...o,icon:"star"});case"icon-and-text":return(0,X.jsx)(Re,{...o,icon:"star",children:"Button"});default:return(0,X.jsx)(Ke,{...o,children:"Button"})}};z.options=gt;z.states=yt;z.variants=Ot;z.defaultOptions=At;z.modifiers=Ct;z.className=s.className;var M=require("react/jsx-runtime"),H=e=>(0,M.jsx)(u,{title:"Title",body:(0,M.jsx)(M.Fragment,{children:"Body content"}),children:(0,M.jsxs)(f,{className:"k-popover-actions",alignment:"stretched",children:[(0,M.jsx)(s,{fillMode:"flat",children:"Action"}),(0,M.jsx)(s,{fillMode:"flat",themeColor:"primary",children:"Primary"})]}),...e});var p=require("react/jsx-runtime"),Mt=u.options,kt=u.states,Ue={...u.defaultOptions,variant:"bottom"},Tt=[{name:"bottom",title:"Callout bottom"},{name:"left",title:"Callout left"},{name:"top",title:"Callout top"},{name:"right",title:"Callout right"}],Et=[{name:"title",title:"With title"},{name:"content",title:"With content"}],E=e=>{let{variant:t,modifiers:o,...r}={...Ue,...e},n={title:"Popover title",body:(0,p.jsx)(p.Fragment,{children:"The popover component is a UI element that displays additional content or options when an anchor element is hovered, clicked, or focused."})};switch(Object.keys(o||{}).forEach(c=>{switch(c){case"title":n.title=o!=null&&o[c]?n.title:"";break;case"content":n.body=o!=null&&o[c]?n.body:void 0;break;default:break}}),t){case"left":return(0,p.jsx)(H,{...r,...n,style:{width:"217px",position:"relative",overflow:"visible"},callout:"left",children:(0,p.jsxs)(f,{className:"k-popover-actions",alignment:"stretched",children:[(0,p.jsx)(s,{children:"Action"}),(0,p.jsx)(s,{themeColor:"primary",children:"Primary"})]})});case"right":return(0,p.jsx)(H,{...r,...n,style:{width:"217px",position:"relative",overflow:"visible"},callout:"right",children:(0,p.jsxs)(f,{className:"k-popover-actions",alignment:"stretched",children:[(0,p.jsx)(s,{children:"Action"}),(0,p.jsx)(s,{themeColor:"primary",children:"Primary"})]})});case"top":return(0,p.jsx)(H,{...r,...n,style:{width:"217px",position:"relative",overflow:"visible"},callout:"top",children:(0,p.jsxs)(f,{className:"k-popover-actions",alignment:"stretched",children:[(0,p.jsx)(s,{children:"Action"}),(0,p.jsx)(s,{themeColor:"primary",children:"Primary"})]})});default:return(0,p.jsx)(H,{...r,...n,style:{width:"217px",position:"relative",overflow:"visible"},callout:"bottom",children:(0,p.jsxs)(f,{className:"k-popover-actions",alignment:"stretched",children:[(0,p.jsx)(s,{children:"Action"}),(0,p.jsx)(s,{themeColor:"primary",children:"Primary"})]})})}};E.options=Mt;E.states=kt;E.variants=Tt;E.defaultOptions=Ue;E.modifiers=Et;E.className=u.className;var Pt=E;