@progress/kendo-themes-html/dist/esm/action-sheet/templates/action-sheet-right.mjs

A collection of HTML helpers used for developing Kendo UI themes

var n=(...e)=>e.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?n(...t):typeof t=="object"?Object.keys(t).map((o,a)=>t[a]||t[o]&&o||null).filter(o=>o!==null).join(" "):t).filter(t=>!!t).join(" ");var S=(e,t)=>n({[`${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.fillMode}-${t.themeColor}`]:t.fillMode&&t.themeColor},{[`${e}-${t.themeColor}`]:t.themeColor&&t.fillMode===void 0},{"k-rounded-sm":t.rounded==="small","k-rounded-md":t.rounded==="medium","k-rounded-lg":t.rounded==="large","k-rounded-full":t.rounded==="full"}),g=(e,t)=>{let{valid:o,invalid:a,hover:r,focus:c,checked:d,active:u,selected:p,disabled:N,indeterminate:h,loading:b,empty:H,readonly:E,highlighted:v,...I}=t;return n({"k-valid":o,"k-invalid":a,"k-hover":r,"k-focus":c,"k-checked":d,"k-active":u,"k-selected":p,"k-disabled":N,"k-indeterminate":h&&!d,"k-loading":b,"k-empty":H,"k-readonly":E,"k-highlighted":v},Object.keys(I).reduce((K,M)=>(M.startsWith("k-")?K[M]=I[M]:K[`k-${M}`]=I[M],K),{}))};function $e(e,t){if(!t)return{};let o=Array.isArray(t)?t:[t];return Object.fromEntries(o.map(a=>[`k-${a}`,!0]))}var i={xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},m={small:"small",medium:"medium",large:"large",full:"full"},f={solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},l={inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",dark:"dark",light:"light",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"};var he="popup",Xe=he;import{jsx as Je}from"react/jsx-runtime";var qe="k-animation-container",yt=[],Ct={},Ge={positionMode:"absolute"},O=e=>{let{positionMode:t=Ge.positionMode,animationStyle:o,offset:a,...r}=e;return Je("div",{...r,style:{...a,...e.style},className:n(e.className,qe,"k-animation-container-shown",{"k-animation-container-fixed":t==="fixed"}),children:Je("div",{className:"k-child-animation-container",style:o,children:e.children})})};O.states=yt;O.options=Ct;O.className=qe;O.defaultOptions=Ge;O.moduleName=he;O.folderName=Xe;var Se="action-buttons",We=Se;import{jsx as _t}from"react/jsx-runtime";var se="k-actions",Lt=[],kt={},Ae={alignment:"start",orientation:"horizontal"},y=e=>{let{alignment:t=Ae.alignment,orientation:o=Ae.orientation,...a}=e;return _t("div",{...a,className:n(se,{[`${se}-${t}`]:t,[`${se}-${o}`]:o},e.className),children:e.children})};y.states=Lt;y.options=kt;y.className=se;y.defaultOptions=Ae;y.moduleName=Se;y.folderName=We;import{jsx as Ht}from"react/jsx-runtime";var Rt="k-actionsheet-footer",Qe={alignment:"stretched",orientation:"horizontal"},be=e=>{let{alignment:t=Qe.alignment,orientation:o=Qe.orientation,template:a,as:r=a?"div":y,...c}=e;return Ht(r,{...c,...!a&&{alignment:t,orientation:o},className:n(e.className,Rt),children:e.children})};var W="input",ie=W;import{jsx as Pt}from"react/jsx-runtime";var re="k-input",Kt=[s.hover,s.focus,s.valid,s.invalid,s.required,s.disabled,s.loading,s.readonly],zt={size:[i.small,i.medium,i.large],rounded:[m.small,m.medium,m.large,m.full],fillMode:[f.solid,f.flat,f.outline]},le={size:i.medium,rounded:i.medium,fillMode:f.solid},A=e=>{let{hover:t,focus:o,disabled:a,invalid:r,valid:c,loading:d,readonly:u,size:p=le.size,rounded:N=le.rounded,fillMode:h=le.fillMode,...b}=e;return Pt("span",{...b,className:n(e.className,re,S(re,{size:p,rounded:N,fillMode:h}),g(re,{hover:t,focus:o,disabled:a,invalid:r,valid:c,loading:d,readonly:u}))})};A.states=Kt;A.options=zt;A.className=re;A.defaultOptions=le;A.moduleName=W;A.folderName=ie;import{jsx as Dt}from"react/jsx-runtime";var ce="k-picker",wt=[s.hover,s.focus,s.valid,s.invalid,s.required,s.disabled,s.loading,s.readonly],Bt={size:[i.small,i.medium,i.large],rounded:[m.small,m.medium,m.large,m.full],fillMode:[f.solid,f.flat,f.outline]},de={size:i.medium,rounded:m.medium,fillMode:f.solid},X=e=>{let{hover:t,focus:o,disabled:a,invalid:r,valid:c,loading:d,readonly:u,size:p=de.size,rounded:N=de.rounded,fillMode:h=de.fillMode,...b}=e;return Dt("span",{...b,className:n(e.className,ce,S(ce,{size:p,rounded:N,fillMode:h}),g(ce,{hover:t,focus:o,disabled:a,invalid:r,valid:c,loading:d,readonly:u})),children:e.children})};X.states=wt;X.options=Bt;X.className=ce;X.defaultOptions=de;X.moduleName=W;X.folderName=ie;import{Fragment as $t,jsx as Ye}from"react/jsx-runtime";var Me="k-font-icon",Ft=[],Ut={size:[i.xsmall,i.small,i.medium,i.large,i.xlarge,i.xxlarge,i.xxxlarge],themeColor:[l.base,l.primary,l.secondary,l.tertiary,l.success,l.warning,l.error,l.info,l.light,l.dark]},Vt={},Q=e=>{let{size:t,themeColor:o,icon:a,rotate:r,flip:c,...d}=e;return a?Ye("span",{...d,className:n(e.className,Me,S(Me,{size:t}),{[`k-i-${a}`]:a,[`k-color-${o}`]:o,[`k-rotate-${r}`]:r,"k-flip-h":c==="h"||c==="both","k-flip-v":c==="v"||c==="both"})}):Ye($t,{})};Q.states=Ft;Q.options=Ut;Q.className=Me;Q.defaultOptions=Vt;var Ze=Q;import{Fragment as qt,jsx as pe}from"react/jsx-runtime";var ve="k-svg-icon",Xt=[],Jt={size:[i.xsmall,i.small,i.medium,i.large,i.xlarge,i.xxlarge,i.xxxlarge],themeColor:[l.base,l.primary,l.secondary,l.tertiary,l.success,l.warning,l.error,l.info,l.light,l.dark]},je={viewBox:"0 0 24 24"},Y=e=>{let{size:t,themeColor:o,rotate:a,flip:r,viewBox:c=je.viewBox,icon:d,...u}=e;if(!d)return pe(qt,{});d==="none"&&{...u,className:n(e.className,ve,"k-none")};let p=typeof d=="object"&&d.name&&d.name;return pe("span",{...u,className:n(e.className,ve,S("k-icon",{size:t}),{[`k-svg-i-${p}`]:p,[`k-color-${o}`]:o,[`k-rotate-${a}`]:a,"k-flip-h":r==="h"||r==="both","k-flip-v":r==="v"||r==="both"}),children:pe("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof d=="object"?d.viewBox:c,dangerouslySetInnerHTML:typeof d=="object"?{__html:d.content}:void 0,children:d?void 0:e.children})})};Y.states=Xt;Y.options=Jt;Y.className=ve;Y.defaultOptions=je;var Ie=Y;import*as Te from"@progress/kendo-svg-icons";var et="icon",tt="icons";import{Fragment as ot,jsx as Z}from"react/jsx-runtime";var me="k-icon",Gt=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),Wt=[],Qt={size:[i.xsmall,i.small,i.medium,i.large,i.xlarge,i.xxlarge,i.xxxlarge],themeColor:[l.base,l.primary,l.secondary,l.tertiary,l.success,l.warning,l.error,l.info,l.light,l.dark]},Ee={viewBox:"0 0 24 24",type:"svg"},x=e=>{let{size:t,themeColor:o,icon:a,type:r=Ee.type,rotate:c,flip:d,viewBox:u=Ee.viewBox,...p}=e;if(!a)return Z(ot,{});if(r==="svg"){if(a==="none")return Z(Ie,{...p,className:n(e.className,me),icon:a,size:t});let N=Te[a]?a:Gt(`${a}-icon`);return Te[N]?Z(Ie,{...p,className:n(e.className,me),icon:Te[N],size:t,themeColor:o,rotate:c,flip:d,viewBox:u}):Z(ot,{})}return Z(Ze,{...p,className:n(e.className,me),icon:a,size:t,themeColor:o,rotate:c,flip:d})};x.states=Wt;x.options=Qt;x.defaultOptions=Ee;x.className=me;x.moduleName=et;x.folderName=tt;import{Fragment as jt,jsx as ge}from"react/jsx-runtime";var nt="k-clear-value",Yt=[s.disabled,s.loading,s.readonly],Zt={},z=e=>{let{disabled:t,loading:o,readonly:a,value:r}=e;return t||a||o||!r?ge(jt,{}):ge("span",{className:n(e.className,nt),children:ge(x,{icon:"x"})})};z.states=Yt;z.options=Zt;z.className=nt;import{jsx as oo}from"react/jsx-runtime";var Oe="k-input-inner",eo=[],to={},ue={type:"text",autocomplete:"off",value:"",placeholder:""},P=e=>{let{value:t=ue.value,type:o=ue.type,placeholder:a=ue.placeholder,autocomplete:r=ue.autocomplete,...c}=e;return oo("input",{...c,type:o,className:n(e.className,Oe,S(Oe,e)),placeholder:a,autoComplete:r,defaultValue:t})};P.states=eo;P.options=to;P.className=Oe;import{jsx as at,jsxs as so}from"react/jsx-runtime";var ye="k-input-inner",no=[],ao={},Ce=e=>{let{value:t,placeholder:o,showValue:a,valueIcon:r,valueIconName:c,...d}=e;return so("span",{...d,className:n(e.className,ye,S(ye,e)),children:[r,!r&&c&&at(x,{className:"k-input-value-icon",icon:c}),a&&!t&&o,a&&t&&at("span",{className:"k-input-value-text",children:t})]})};Ce.states=no;Ce.options=ao;Ce.className=ye;import{jsx as lo}from"react/jsx-runtime";var Le="k-input-inner",io=[],ro={},st={value:"",placeholder:""},ke=e=>{let{value:t=st.value,placeholder:o=st.placeholder,rows:a,...r}=e;return lo("textarea",{...r,className:n(e.className,Le,S(Le,e)),placeholder:o,rows:a,defaultValue:t})};ke.states=io;ke.options=ro;ke.className=Le;import{Fragment as po,jsx as it}from"react/jsx-runtime";var rt="k-input-loading-icon",co=[s.disabled,s.loading],J=e=>{let{disabled:t,loading:o}=e;return t||!o?it(po,{}):it("span",{className:n(e.className,rt,"k-icon k-i-loading")})};J.states=co;J.className=rt;import{Fragment as fo,jsx as lt}from"react/jsx-runtime";var ct="k-input-validation-icon",mo=[s.valid,s.invalid,s.disabled,s.loading],uo={},w=e=>{let{valid:t,invalid:o,disabled:a,loading:r}=e,c=o?"warning-circle":"check-circle";return a||r||!!!(t||o)?lt(fo,{}):lt(x,{className:n(ct),icon:c})};w.states=mo;w.options=uo;w.className=ct;import{Fragment as ho,jsx as dt}from"react/jsx-runtime";var xo="k-input-prefix",No={direction:"horizontal"},pt=e=>{let{direction:t=No.direction,...o}=e;return e.children?dt("span",{...o,className:n(xo,e.className,{[`k-input-prefix-${t}`]:t}),children:e.children}):dt(ho,{})};import{Fragment as bo,jsx as mt}from"react/jsx-runtime";var So="k-input-suffix",Ao={direction:"horizontal"},ut=e=>{let{direction:t=Ao.direction,...o}=e;return e.children?mt("span",{...o,className:n(So,e.className,{[`k-input-suffix-${t}`]:t}),children:e.children}):mt(bo,{})};import{jsx as Ia}from"react/jsx-runtime";import{jsx as Oa}from"react/jsx-runtime";import{jsx as vo}from"react/jsx-runtime";var ft="k-input-separator",Mo={direction:"vertical"},_e=e=>{let{direction:t=Mo.direction,...o}=e;return vo("span",{...o,className:n(ft,e.className,{[`${ft}-${t}`]:t})})};var Re="searchbox",xt=Re;import{jsx as j,jsxs as Eo}from"react/jsx-runtime";var Nt="k-searchbox",Io=[s.hover,s.focus,s.valid,s.invalid,s.required,s.disabled,s.loading],To={size:[i.small,i.medium,i.large],rounded:[m.small,m.medium,m.large,m.full],fillMode:[f.solid,f.flat,f.outline]},He={showIcon:!0,icon:"search",size:A.defaultOptions.size,rounded:A.defaultOptions.rounded,fillMode:A.defaultOptions.fillMode},C=e=>{let{value:t,placeholder:o,size:a,rounded:r,fillMode:c,hover:d,focus:u,valid:p,invalid:N,required:h,loading:b,disabled:H,showIcon:E=He.showIcon,icon:v=He.icon,...I}=e;return Eo(A,{...I,size:a,rounded:r,fillMode:c,hover:d,focus:u,valid:p,invalid:N,required:h,loading:b,disabled:H,className:n(e.className,Nt),children:[E&&j(x,{className:"k-input-icon",icon:v}),j(P,{placeholder:o,value:t}),j(J,{...e}),j(w,{...e}),j(z,{...e})]})};C.states=Io;C.options=To;C.className=Nt;C.defaultOptions=He;C.moduleName=Re;C.folderName=xt;import{jsx as os}from"react/jsx-runtime";var Ke="textbox",ht=Ke;import{Fragment as St,jsx as L,jsxs as ze}from"react/jsx-runtime";var At="k-textbox",go=[s.hover,s.focus,s.valid,s.invalid,s.required,s.disabled,s.loading,s.readonly],Oo={size:[i.small,i.medium,i.large],rounded:[m.small,m.medium,m.large,m.full],fillMode:[f.solid,f.flat,f.outline]},B={showClearButton:!0,showValidationIcon:!0,size:A.defaultOptions.size,rounded:A.defaultOptions.rounded,fillMode:A.defaultOptions.fillMode,separators:!0},k=e=>{let{size:t=B.size,rounded:o=B.rounded,fillMode:a=B.fillMode,separators:r=B.separators,showClearButton:c=B.showClearButton,showValidationIcon:d=B.showValidationIcon,prefix:u,suffix:p,type:N,value:h,placeholder:b,hover:H,focus:E,valid:v,invalid:I,required:K,loading:M,disabled:$,readonly:Ve,...Ot}=e;return ze(A,{...Ot,size:t,rounded:o,fillMode:a,hover:H,focus:E,valid:v,invalid:I,required:K,loading:M,disabled:$,readonly:Ve,className:n(e.className,At),children:[u&&ze(St,{children:[L(pt,{children:u}),r&&L(_e,{})]}),L(P,{placeholder:b,value:h,type:N}),d&&L(w,{valid:v,invalid:I,loading:M,disabled:$}),L(J,{loading:M,disabled:$}),c&&L(z,{loading:M,disabled:$,readonly:Ve,value:h}),p&&ze(St,{children:[r&&L(_e,{}),L(ut,{children:p})]})]})};k.states=go;k.options=Oo;k.className=At;k.defaultOptions=B;k.moduleName=Ke;k.folderName=ht;import{jsx as xs}from"react/jsx-runtime";import{Fragment as Ms,jsx as bs}from"react/jsx-runtime";var Pe="button",Mt=Pe;import{Fragment as ko,jsx as ee,jsxs as vt}from"react/jsx-runtime";var te="k-button",yo=["icon-button"],Co=[s.hover,s.focus,s.active,s.selected,s.disabled,s.generating],Lo={size:[i.small,i.medium,i.large],rounded:[m.small,m.medium,m.large,m.full],fillMode:[f.solid,f.flat,f.outline,f.clear,f.link],themeColor:[l.base,l.primary,l.secondary,l.tertiary,l.success,l.warning,l.error,l.info,l.light,l.dark,l.inverse]},D={size:i.medium,rounded:m.medium,fillMode:f.solid,themeColor:l.base,showArrow:!1,arrowIconName:"caret-alt-down"},T=e=>{let{size:t=D.size,rounded:o=D.rounded,fillMode:a=D.fillMode,themeColor:r=D.themeColor,showArrow:c=D.showArrow,arrowIconName:d=D.arrowIconName,variant:u,hover:p,focus:N,active:h,selected:b,disabled:H,icon:E,text:v,iconClassName:I,...K}=e,M=E!==void 0,$=e.children!==void 0;return vt("button",{...K,className:n(e.className,te,$e(te,u),S(te,{size:t,rounded:o,fillMode:a,themeColor:r}),g(te,{hover:p,focus:N,active:h,disabled:H,selected:b}),{"k-icon-button":!v&&!$&&M}),children:[E&&ee(x,{className:n(I,"k-button-icon"),icon:E}),v?vt(ko,{children:[v&&ee("span",{className:"k-button-text",children:v}),e.children]}):e.children&&ee("span",{className:"k-button-text",children:e.children}),c&&ee("span",{className:"k-menu-button-arrow k-button-arrow",children:ee(x,{icon:d})})]})};T.states=Co;T.options=Lo;T.variants=yo;T.className=te;T.defaultOptions=D;T.moduleName=Pe;T.folderName=Mt;import{jsx as ks}from"react/jsx-runtime";import{jsx as Ks}from"react/jsx-runtime";import{jsx as Bs}from"react/jsx-runtime";import{Fragment as Ys,jsx as Qs}from"react/jsx-runtime";import{jsx as _,jsxs as we}from"react/jsx-runtime";var It="k-actionsheet-titlebar",_o={},F=e=>{let{title:t,subtitle:o,actionsStart:a,actionsEnd:r,filter:c,input:d,inputValue:u,inputPlaceholder:p,adaptive:N,children:h,...b}=e;return we("div",{...b,className:n(e.className,It),children:[we("div",{className:"k-actionsheet-titlebar-group",children:[a&&_("div",{className:"k-actionsheet-actions",children:a}),!h&&we("div",{className:"k-actionsheet-title",children:[t&&_("div",{className:"k-text-center",children:t}),o&&_("div",{className:"k-actionsheet-subtitle k-text-center",children:o})]}),h&&_("div",{className:"k-actionsheet-title",children:h}),r&&_("div",{className:"k-actionsheet-actions",children:r})]}),(d||c)&&_("div",{className:"k-actionsheet-titlebar-group k-actionsheet-filter",children:d?_(k,{value:u,placeholder:p,size:N?"large":"medium"}):_(C,{placeholder:"Filter",size:N?"large":"medium"})})]})};F.className=It;F.defaultOptions=_o;import{jsx as Be,jsxs as zo}from"react/jsx-runtime";var De="k-actionsheet-view",Ro=[],Ho={},Ko={},q=e=>{let{adaptive:t,animated:o,children:a,header:r,footer:c,...d}=e,u=r?.type===F&&Be(F,{adaptive:t,...r?.props}),p=c?.type===be&&Be(be,{...c?.props});return zo("div",{...d,className:n(e.className,De,{[`${De}-animated`]:o}),children:[u,Be("div",{className:"k-actionsheet-content",children:a}),p]})};q.states=Ro;q.options=Ho;q.className=De;q.defaultOptions=Ko;var oe="action-sheet",fe=oe;import{jsx as xe,jsxs as Bo}from"react/jsx-runtime";var Tt="k-actionsheet",Po=[],wo={},ne={side:"bottom",fullscreen:!1,adaptive:!1,overlay:!0},R=e=>{let{side:t=ne.side,fullscreen:o=ne.fullscreen,adaptive:a=ne.adaptive,overlay:r=ne.overlay,template:c,children:d,header:u,footer:p,...N}=e;return Bo("div",{className:"k-actionsheet-container",children:[r&&xe("div",{className:"k-overlay"}),xe(O,{animationStyle:{[`${o===!0?"top":t}`]:0,[`${o===!0?"width":null}`]:"100%",[`${o===!0?"height":null}`]:"100%",[`${t==="top"||t==="bottom"?"width":null}`]:"100%",[`${t==="left"||t==="right"?"height":null}`]:"100%"},children:xe("div",{...N,className:n(e.className,Tt,{[`k-actionsheet-${t}`]:o===!1,"k-actionsheet-fullscreen":o===!0,"k-adaptive-actionsheet":a}),children:c||xe(q,{header:u,footer:p,adaptive:a,...e,children:d})})})]})};R.states=Po;R.options=wo;R.className=Tt;R.defaultOptions=ne;R.moduleName=oe;R.folderName=fe;import{jsx as Vo}from"react/jsx-runtime";var Et="k-actionsheet-container",Do=[],Fo={},Uo={},G=e=>{let{children:t,...o}=e;return Vo("div",{...o,className:Et,children:t})};G.states=Do;G.options=Fo;G.className=Et;G.defaultOptions=Uo;G.moduleName=oe;G.folderName=fe;import{jsx as $o}from"react/jsx-runtime";var gt=e=>{let{...t}=e;return $o("div",{...t,className:n(e.className,"k-list-ul"),children:e.children})};import{Fragment as Jo,jsx as ae,jsxs as Fe}from"react/jsx-runtime";var Ue="k-actionsheet-item",Xo=[s.hover,s.focus,s.selected,s.disabled],U=e=>{let{iconName:t,text:o,description:a,hover:r,focus:c,selected:d,disabled:u,...p}=e;return Fe("span",{...p,className:n(e.className,Ue,g(Ue,{hover:r,focus:c,selected:d,disabled:u})),children:[!e.children&&ae(Jo,{children:Fe("span",{className:"k-actionsheet-action",children:[t&&ae("span",{className:"k-icon-wrap",children:ae(x,{className:"k-actionsheet-item-icon",icon:t})}),Fe("span",{className:"k-actionsheet-item-text",children:[o&&ae("span",{className:"k-actionsheet-item-title",children:o}),a&&ae("span",{className:"k-actionsheet-item-description",children:a})]})]})}),e.children]})};U.states=Xo;U.className=Ue;import{jsx as Ri}from"react/jsx-runtime";import{jsx as Pi}from"react/jsx-runtime";import{jsx as V,jsxs as qo}from"react/jsx-runtime";var Ne=({title:e="Select item",...t})=>V(R,{header:V(F,{title:e}),children:[qo(gt,{children:[V(U,{text:"Edit Item",description:"Click to edit",iconName:"edit-tools"}),V(U,{text:"Add to Favorites",iconName:"heart"}),V(U,{text:"Upload New",iconName:"upload"}),V("hr",{className:"k-hr"}),V(U,{text:"Action",iconName:"cancel"})]},"action-sheet-items")],...t});import{jsx as Go}from"react/jsx-runtime";var tr=e=>Go(Ne,{side:"right",...e});export{tr as ActionSheetRight};