@progress/kendo-themes-html/dist/esm/popover/demos/popover.mjs

A collection of HTML helpers used for developing Kendo UI themes

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