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

A collection of HTML helpers used for developing Kendo UI themes

var r=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?r(...e):typeof e=="object"?Object.keys(e).map((n,s)=>e[s]||e[n]&&n||null).filter(n=>n!==null).join(" "):e).filter(e=>!!e).join(" ");var C=(t,e)=>r({[`${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"}),ct=(t,e)=>{let{valid:n,invalid:s,hover:d,focus:c,checked:m,active:l,selected:g,disabled:u,indeterminate:x,loading:R,empty:O,readonly:z,highlighted:G,...w}=e;return r({"k-valid":n,"k-invalid":s,"k-hover":d,"k-focus":c,"k-checked":m,"k-active":l,"k-selected":g,"k-disabled":u,"k-indeterminate":x&&!m,"k-loading":R,"k-empty":O,"k-readonly":z,"k-highlighted":G},Object.keys(w).reduce((f,A)=>(A.startsWith("k-")?f[A]=w[A]:f[`k-${A}`]=w[A],f),{}))};function mt(t,e){if(!e)return{};let n=Array.isArray(e)?e:[e];return Object.fromEntries(n.map(s=>[`k-${s}`,!0]))}var i={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"},M={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"},T={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"};var Y={};function q(t){return Y[t]=(Y[t]||0)+1,`k-${t}-${Y[t]}`}var J="action-buttons",ut=J;import{jsx as $t}from"react/jsx-runtime";var P="k-actions",Ht=[],Pt={},X={alignment:"start",orientation:"horizontal"},b=t=>{let{alignment:e=X.alignment,orientation:n=X.orientation,...s}=t;return $t("div",{...s,className:r(P,{[`${P}-${e}`]:e,[`${P}-${n}`]:n},t.className),children:t.children})};b.states=Ht;b.options=Pt;b.className=P;b.defaultOptions=X;b.moduleName=J;b.folderName=ut;import{Fragment as Vt,jsx as pt}from"react/jsx-runtime";var Q="k-font-icon",Ut=[],Ft={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]},Wt={},I=t=>{let{size:e,themeColor:n,icon:s,rotate:d,flip:c,...m}=t;return s?pt("span",{...m,className:r(t.className,Q,C(Q,{size:e}),{[`k-i-${s}`]:s,[`k-color-${n}`]:n,[`k-rotate-${d}`]:d,"k-flip-h":c==="h"||c==="both","k-flip-v":c==="v"||c==="both"}),"aria-hidden":"true"}):pt(Vt,{})};I.states=Ut;I.options=Ft;I.className=Q;I.defaultOptions=Wt;var ft=I;import{Fragment as qt,jsx as $}from"react/jsx-runtime";var Z="k-svg-icon",Gt=[],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]},j={viewBox:"0 0 24 24",variant:N.outline},D=t=>{let{size:e,themeColor:n,rotate:s,flip:d,viewBox:c=j.viewBox,variant:m=j.variant,icon:l,...g}=t;if(!l)return $(qt,{});if(l==="none")return $("span",{...g,className:r(t.className,Z,C("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let u=typeof l=="object"&&l.name&&l.name,x=typeof l=="object"?m&&l.variants?.[m]||l.variants?.outline||l.content:void 0;return $("span",{...g,className:r(t.className,Z,C("k-icon",{size:e}),{[`k-svg-i-${u}`]:u,[`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",children:$("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof l=="object"?l.viewBox:c,dangerouslySetInnerHTML:x!==void 0?{__html:x}:void 0,children:l?void 0:t.children})})};D.states=Gt;D.options=Yt;D.className=Z;D.defaultOptions=j;var tt=D;import*as et from"@progress/kendo-svg-icons";var gt="icon",xt="icons";import{useContext as Xt}from"react";import{createContext as Jt}from"react";var Nt=Jt({iconsType:"svg"});import{Fragment as ht,jsx as S}from"react/jsx-runtime";var U="k-icon",Qt=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),Zt=[],jt={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]},F={viewBox:"0 0 24 24",type:"svg",variant:N.outline},h=t=>{let{iconsType:e}=Xt(Nt),{size:n,themeColor:s,icon:d,type:c=e||F.type,rotate:m,flip:l,viewBox:g=F.viewBox,variant:u=F.variant,...x}=t;if(!d)return S(ht,{});if((e||c)==="svg"){if(d==="none")return S(tt,{...x,className:r(t.className,U),icon:d,size:n,variant:u});let O=et[d]?d:Qt(`${d}-icon`);return et[O]?S(tt,{...x,className:r(t.className,U),icon:et[O],size:n,themeColor:s,rotate:m,flip:l,viewBox:g,variant:u}):S(ht,{})}return S(ft,{...x,className:r(t.className,U),icon:d,size:n,themeColor:s,rotate:m,flip:l})};h.states=Zt;h.options=jt;h.defaultOptions=F;h.className=U;h.moduleName=gt;h.folderName=xt;h.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 ot="button",bt=ot;import{Fragment as vt,jsx as L,jsxs as yt}from"react/jsx-runtime";var K="k-button",te=["icon-button"],ee=[T.hover,T.focus,T.active,T.selected,T.disabled,T.generating],oe={size:[i.undefined,i.xsmall,i.small,i.medium,i.large],rounded:[k.undefined,k.none,k.small,k.medium,k.large,k.full],fillMode:[M.undefined,M.solid,M.flat,M.outline,M.clear,M.link],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.inverse]},nt={showArrow:!1,arrowIconName:"chevron-down"},a=t=>{let{as:e="button",size:n,rounded:s,fillMode:d,themeColor:c,showArrow:m=nt.showArrow,arrowIconName:l=nt.arrowIconName,variant:g,hover:u,focus:x,active:R,selected:O,disabled:z,togglable:G,ariaDisabled:w,icon:f,iconSize:A,text:H,iconClassName:Dt,className:St,...Kt}=t,Rt=f!=null,zt=t.children!==void 0;return yt(e,{className:r(St,K,mt(K,g),C(K,{size:n,rounded:s,fillMode:d,themeColor:c}),ct(K,{hover:u,focus:x,active:R,disabled:z||w,selected:O}),{"k-icon-button":!H&&!zt&&Rt}),"aria-pressed":G?O?"true":"false":void 0,...Kt,"aria-disabled":w?"true":void 0,disabled:z||void 0,children:[typeof f=="string"&&f&&L(h,{className:r(Dt,"k-button-icon"),icon:f,size:A}),f&&typeof f!="string"&&L(vt,{children:f}),H?yt(vt,{children:[H&&L("span",{className:"k-button-text",children:H}),t.children]}):t.children&&L("span",{className:"k-button-text",children:t.children}),m&&L("span",{className:"k-menu-button-arrow k-button-arrow",children:L(h,{icon:l})})]})};a.states=ee;a.options=oe;a.variants=te;a.className=K;a.defaultOptions=nt;a.moduleName=ot;a.folderName=bt;a.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 ne}from"react/jsx-runtime";var Ot=t=>ne(a,{icon:"folder",...t,"aria-label":t["aria-label"]||"Folder",children:void 0});import{jsx as ie}from"react/jsx-runtime";var At=t=>ie(a,{icon:"folder",children:"Button",...t});import{jsx as ae}from"react/jsx-runtime";var Ct=t=>ae(a,{children:"Button",...t});import{jsx as it}from"react/jsx-runtime";var re=a.options,se=a.states,le={...a.defaultOptions,variant:"text"},de=[{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 it(Ot,{...n,icon:"star"});case"icon-and-text":return it(At,{...n,icon:"star",children:"Button"});default:return it(Ct,{...n,children:"Button"})}};_.options=re;_.states=se;_.variants=de;_.defaultOptions=le;_.modifiers=ce;_.className=a.className;var at="window",kt=at;import{jsx as fe}from"react/jsx-runtime";var Mt="k-window-content",me=[],ue={},pe={},v=t=>{let{children:e,...n}=t;return fe("div",{...n,className:r(Mt,t.className),children:e})};v.states=me;v.options=ue;v.className=Mt;v.defaultOptions=pe;v.moduleName=at;v.folderName=kt;var rt="dialog",Tt=rt;var st="overlay",Bt=st;import{jsx as he}from"react/jsx-runtime";var Et="k-overlay",ge=[],xe={},Ne={},y=t=>{let{...e}=t;return he("div",{...e,className:r(t.className,Et),children:t.children})};y.states=ge;y.options=xe;y.className=Et;y.defaultOptions=Ne;y.moduleName=st;y.folderName=Bt;import{Fragment as ye,jsx as B,jsxs as lt}from"react/jsx-runtime";var wt="k-dialog",be=[],ve={},dt={actionButtonsAlign:"stretched",modal:!0},p=t=>{let{title:e,actions:n,actionButtons:s,actionButtonsAlign:d=dt.actionButtonsAlign,modal:c=dt.modal,...m}=t,l=e!==void 0?q("dialog-titlebar"):void 0,g=q("dialog-content");return lt("div",{className:"k-dialog-wrapper",children:[c&&B(y,{}),lt("div",{...m,className:r(t.className,wt,"k-window"),role:"dialog","aria-labelledby":l,"aria-describedby":g,...c&&{"aria-modal":"true"},children:[(e!==void 0||n)&&lt("div",{className:"k-window-titlebar k-dialog-titlebar",id:l,children:[e!==void 0&&B("span",{className:"k-window-title k-dialog-title",children:e}),n&&B(ye,{children:B("div",{className:"k-window-titlebar-actions k-dialog-titlebar-actions",children:n.map(u=>B(a,{icon:u,fillMode:"flat",size:"xsmall",className:"k-window-titlebar-action k-dialog-titlebar-action","aria-label":u},u))})})]}),B(v,{className:"k-dialog-content",id:g,children:t.children}),s&&B(b,{alignment:d,className:"k-window-actions k-dialog-actions",children:s})]})]})};p.states=be;p.options=ve;p.className=wt;p.defaultOptions=dt;p.moduleName=rt;p.folderName=Tt;p.ariaSpec={selector:".k-dialog",rules:[{selector:".k-dialog",attribute:"role=dialog or role=alertdialog",usage:"Announces the dialog or alertdialog role of the component."},{selector:".k-dialog",attribute:"aria-labelledby",usage:"Associate the title of the dialog."},{selector:".k-dialog",attribute:"aria-describedby",usage:"Associate the dialog content to the wrap element."},{selector:".k-overlay + .k-dialog",attribute:"aria-modal=true",usage:"Announces that the dialog is modal. Attribute is added only when the dialog is modal."}]};var Lt=p;import{Fragment as _t,jsx as W,jsxs as Oe}from"react/jsx-runtime";var It=t=>W(Lt,{title:"Title",children:W(_t,{children:"Dialog content"}),actionButtons:Oe(_t,{children:[W(a,{children:"Action"}),W(a,{themeColor:"primary",children:"Primary"})]}),actions:["x"],...t});import{Fragment as Be,jsx as V,jsxs as Ee}from"react/jsx-runtime";var Ae=p.options,Ce=[],ke=p.states,Me=p.defaultOptions,Te=[],E=t=>V(It,{style:{width:"350px",height:"215px"},...t,title:"Please confirm",actions:["x"],actionButtonsAlign:"stretched",actionButtons:Ee(Be,{children:[V(a,{children:"No"}),V(a,{themeColor:"primary",children:"Yes"})]}),children:V("p",{style:{margin:"36px",textAlign:"center"},children:"Are you sure you want to continue?"})});E.options=Ae;E.states=ke;E.variants=Ce;E.defaultOptions=Me;E.modifiers=Te;E.className=p.className;var bn=E;export{E as DialogDemo,bn as default};