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

A collection of HTML helpers used for developing Kendo UI themes

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