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

A collection of HTML helpers used for developing Kendo UI themes

var a=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?a(...e):typeof e=="object"?Object.keys(e).map((o,s)=>e[s]||e[o]&&o||null).filter(o=>o!==null).join(" "):e).filter(e=>!!e).join(" ");var N=(t,e)=>a({[`${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.fillMode}-${e.themeColor}`]:e.fillMode&&e.themeColor},{[`${t}-${e.themeColor}`]:e.themeColor&&e.fillMode===void 0},{"k-rounded-sm":e.rounded==="small","k-rounded-md":e.rounded==="medium","k-rounded-lg":e.rounded==="large","k-rounded-full":e.rounded==="full"}),I=(t,e)=>a({"k-valid":e.valid,"k-invalid":e.invalid,"k-hover":e.hover,"k-focus":e.focus,"k-checked":e.checked,"k-active":e.active,"k-selected":e.selected,"k-disabled":e.disabled,"k-indeterminate":e.indeterminate&&!e.checked,"k-loading":e.loading,"k-empty":e.empty,"k-readonly":e.readonly,"k-highlighted":e.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=t=>{let{positionMode:e=we.positionMode,animationStyle:o,offset:s,...l}=t;return Le("div",{...l,style:{...s,...t.style},className:a(t.className,He,"k-animation-container-shown",{"k-animation-container-fixed":e==="fixed"}),children:Le("div",{className:"k-child-animation-container",style:o,children:t.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={},de={alignment:"start",orientation:"horizontal"},V=t=>{let{alignment:e=de.alignment,orientation:o=de.orientation,...s}=t;return mt("div",{...s,className:a(j,{[`${j}-${e}`]:e,[`${j}-${o}`]:o},t.className),children:t.children})};V.states=dt;V.options=pt;V.className=j;V.defaultOptions=de;import{jsx as ft}from"react/jsx-runtime";var ut="k-actionsheet-footer",Re={alignment:"stretched",orientation:"horizontal"},pe=t=>{let{alignment:e=Re.alignment,orientation:o=Re.orientation,template:s,as:l=s?"div":V,...c}=t;return ft(l,{...c,...!s&&{alignment:e,orientation:o},className:a(t.className,ut),children:t.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=t=>{let{hover:e,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}=t;return Nt("span",{...b,className:a(t.className,ee,N(ee,{size:m,rounded:h,fillMode:v}),I(ee,{hover:e,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=t=>{let{hover:e,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}=t;return bt("span",{...b,className:a(t.className,oe,N(oe,{size:m,rounded:h,fillMode:v}),I(oe,{hover:e,focus:o,disabled:s,invalid:l,valid:c,loading:d,readonly:f})),children:t.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 me="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=t=>{let{size:e,themeColor:o,icon:s,rotate:l,flip:c,...d}=t;return s?Pe("span",{...d,className:a(t.className,me,N(me,{size:e}),{[`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=me;q.defaultOptions=yt;var Ke=q;import{Fragment as Tt,jsx as se}from"react/jsx-runtime";var ue="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=t=>{let{size:e,themeColor:o,rotate:s,flip:l,viewBox:c=Be.viewBox,icon:d,...f}=t;if(!d)return se(Tt,{});d==="none"&&{...f,className:a(t.className,ue,"k-none")};let m=typeof d=="object"&&d.name&&d.name;return se("span",{...f,className:a(t.className,ue,N("k-icon",{size:e}),{[`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:t.children})})};D.states=kt;D.options=Mt;D.className=ue;D.defaultOptions=Be;var fe=D;import*as Ve from"@progress/kendo-svg-icons";import{Fragment as $e,jsx as G}from"react/jsx-runtime";var Ct=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.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]},he={viewBox:"0 0 24 24",type:"svg"},x=t=>{let{size:e,themeColor:o,icon:s,type:l=he.type,rotate:c,flip:d,viewBox:f=he.viewBox,...m}=t;if(!s)return G($e,{});if(l==="svg"){if(s==="none")return G(fe,{...m,icon:s,size:e});let h=Ct(`${s}-icon`);return Ve[h]?G(fe,{...m,icon:Ve[h],size:e,themeColor:o,rotate:c,flip:d,viewBox:f}):G($e,{})}return G(Ke,{...m,icon:s,size:e,themeColor:o,rotate:c,flip:d})};x.states=Ot;x.options=Et;x.defaultOptions=he;import{Fragment as Ht,jsx as xe}from"react/jsx-runtime";var Fe="k-clear-value",zt=[n.disabled,n.loading,n.readonly],Lt={},M=t=>{let{disabled:e,loading:o,readonly:s,value:l}=t;return e||s||o||!l?xe(Ht,{}):xe("span",{className:a(t.className,Fe),children:xe(x,{icon:"x"})})};M.states=zt;M.options=Lt;M.className=Fe;import{jsx as Pt}from"react/jsx-runtime";var Ne="k-input-inner",wt=[],Rt={},ie={type:"text",autocomplete:"off",value:"",placeholder:""},T=t=>{let{value:e=ie.value,type:o=ie.type,placeholder:s=ie.placeholder,autocomplete:l=ie.autocomplete,...c}=t;return Pt("input",{...c,type:o,className:a(t.className,Ne,N(Ne,t)),placeholder:s,autoComplete:l,defaultValue:e})};T.states=wt;T.options=Rt;T.className=Ne;import{jsx as _e,jsxs as Vt}from"react/jsx-runtime";var ve="k-input-inner",Kt=[],Bt={},Se=t=>{let{value:e,placeholder:o,showValue:s,valueIcon:l,valueIconName:c,...d}=t;return Vt("span",{...d,className:a(t.className,ve,N(ve,t)),children:[l,!l&&c&&_e(x,{className:"k-input-value-icon",icon:c}),s&&!e&&o,s&&e&&_e("span",{className:"k-input-value-text",children:e})]})};Se.states=Kt;Se.options=Bt;Se.className=ve;import{jsx as _t}from"react/jsx-runtime";var be="k-input-inner",$t=[],Ft={},Xe={value:"",placeholder:""},ge=t=>{let{value:e=Xe.value,placeholder:o=Xe.placeholder,rows:s,...l}=t;return _t("textarea",{...l,className:a(t.className,be,N(be,t)),placeholder:o,rows:s,defaultValue:e})};ge.states=$t;ge.options=Ft;ge.className=be;import{Fragment as Jt,jsx as Je}from"react/jsx-runtime";var qe="k-input-loading-icon",Xt=[n.disabled,n.loading],$=t=>{let{disabled:e,loading:o}=t;return e||!o?Je(Jt,{}):Je("span",{className:a(t.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=t=>{let{valid:e,invalid:o,disabled:s,loading:l}=t,c=o?"warning-circle":"check-circle";return s||l||!!!(e||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=t=>{let{direction:e=Wt.direction,...o}=t;return t.children?Ue("span",{...o,className:a(Ut,t.className,{[`k-input-prefix-${e}`]:e}),children:t.children}):Ue(Qt,{})};import{Fragment as jt,jsx as Qe}from"react/jsx-runtime";var Yt="k-input-suffix",Zt={direction:"horizontal"},Ye=t=>{let{direction:e=Zt.direction,...o}=t;return t.children?Qe("span",{...o,className:a(Yt,t.className,{[`k-input-suffix-${e}`]:e}),children:t.children}):Qe(jt,{})};import{jsx as _n}from"react/jsx-runtime";import{jsx as Dn}from"react/jsx-runtime";import{jsx as to}from"react/jsx-runtime";var Ze="k-input-separator",eo={direction:"vertical"},Ie=t=>{let{direction:e=eo.direction,...o}=t;return to("span",{...o,className:a(Ze,t.className,{[`${Ze}-${e}`]:e})})};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]},ye={showIcon:!0,icon:"search",size:S.defaultOptions.size,rounded:S.defaultOptions.rounded,fillMode:S.defaultOptions.fillMode},F=t=>{let{value:e,placeholder:o,size:s,rounded:l,fillMode:c,hover:d,focus:f,valid:m,invalid:h,required:v,loading:b,disabled:k,showIcon:g=ye.showIcon,icon:R=ye.icon,...P}=t;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(t.className,je),children:[g&&U(x,{className:"k-input-icon",icon:R}),U(T,{placeholder:o,value:e}),U($,{...t}),U(C,{...t}),U(M,{...t})]})};F.states=oo;F.options=no;F.className=je;F.defaultOptions=ye;import{jsx as Sa}from"react/jsx-runtime";import{Fragment as et,jsx as y,jsxs as Ae}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},_=t=>{let{size:e=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:ce,loading:K,disabled:Z,readonly:ze,...rt}=t;return Ae(S,{...rt,size:e,rounded:o,fillMode:s,hover:k,focus:g,valid:R,invalid:P,required:ce,loading:K,disabled:Z,readonly:ze,className:a(t.className,tt),children:[f&&Ae(et,{children:[y(We,{children:f}),l&&y(Ie,{})]}),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&&Ae(et,{children:[l&&y(Ie,{}),y(Ye,{children:m})]})]})};_.states=so;_.options=io;_.className=tt;_.defaultOptions=O;import{jsx as Ea}from"react/jsx-runtime";import{Fragment as Pa,jsx as Ra}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=t=>{let{size:e=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}=t,ce=k!==void 0,K=t.children!==void 0;return nt("button",{...P,className:a(t.className,re,N(re,{size:e,rounded:o,fillMode:s,themeColor:l}),I(re,{hover:f,focus:m,active:h,disabled:b,selected:v}),{"k-icon-button":!g&&!K&&ce}),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}),t.children]}):t.children&&W("span",{className:"k-button-text",children:t.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 Ja}from"react/jsx-runtime";import{jsx as Ua}from"react/jsx-runtime";import{jsx as Za}from"react/jsx-runtime";import{Fragment as ds,jsx as cs}from"react/jsx-runtime";import{jsx as A,jsxs as ke}from"react/jsx-runtime";var at="k-actionsheet-titlebar",po={},L=t=>{let{title:e,subtitle:o,actionsStart:s,actionsEnd:l,filter:c,input:d,inputValue:f,inputPlaceholder:m,adaptive:h,children:v,...b}=t;return ke("div",{...b,className:a(t.className,at),children:[ke("div",{className:"k-actionsheet-titlebar-group",children:[s&&A("div",{className:"k-actionsheet-actions",children:s}),!v&&ke("div",{className:"k-actionsheet-title",children:[e&&A("div",{className:"k-text-center",children:e}),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 Me,jsxs as ho}from"react/jsx-runtime";var Te="k-actionsheet-view",mo=[],uo={},fo={},X=t=>{let{adaptive:e,animated:o,children:s,header:l,footer:c,...d}=t,f=l?.type===L&&Me(L,{adaptive:e,...l?.props}),m=c?.type===pe&&Me(pe,{...c?.props});return ho("div",{...d,className:a(t.className,Te,{[`${Te}-animated`]:o}),children:[f,Me("div",{className:"k-actionsheet-content",children:s}),m]})};X.states=mo;X.options=uo;X.className=Te;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=t=>{let{side:e=Q.side,fullscreen:o=Q.fullscreen,adaptive:s=Q.adaptive,overlay:l=Q.overlay,template:c,children:d,header:f,footer:m,...h}=t;return vo("div",{className:"k-actionsheet-container",children:[l&&le("div",{className:"k-overlay"}),le(B,{animationStyle:{[`${o===!0?"top":e}`]:0,[`${o===!0?"width":null}`]:"100%",[`${o===!0?"height":null}`]:"100%",[`${e==="top"||e==="bottom"?"width":null}`]:"100%",[`${e==="left"||e==="right"?"height":null}`]:"100%"},children:le("div",{...h,className:a(t.className,st,{[`k-actionsheet-${e}`]:o===!1,"k-actionsheet-fullscreen":o===!0,"k-adaptive-actionsheet":s}),children:c||le(X,{header:f,footer:m,adaptive:s,...t,children:d})})})]})};J.states=xo;J.options=No;J.className=st;J.defaultOptions=Q;import{jsx as So}from"react/jsx-runtime";var it=t=>{let{...e}=t;return So("div",{...e,className:a(t.className,"k-list-ul"),children:t.children})};import{Fragment as go,jsx as Y,jsxs as Ce}from"react/jsx-runtime";var Oe="k-actionsheet-item",bo=[n.hover,n.focus,n.selected,n.disabled],H=t=>{let{iconName:e,text:o,description:s,hover:l,focus:c,selected:d,disabled:f,...m}=t;return Ce("span",{...m,className:a(t.className,Oe,I(Oe,{hover:l,focus:c,selected:d,disabled:f})),children:[!t.children&&Y(go,{children:Ce("span",{className:"k-actionsheet-action",children:[e&&Y("span",{className:"k-icon-wrap",children:Y(x,{className:"k-actionsheet-item-icon",icon:e})}),Ce("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})]})]})}),t.children]})};H.states=bo;H.className=Oe;import{jsx as Fs}from"react/jsx-runtime";import{jsx as qs}from"react/jsx-runtime";import{jsx as Ws}from"react/jsx-runtime";import{jsx as w,jsxs as Io}from"react/jsx-runtime";var Ee=({title:t="Select item",...e})=>w(J,{header:w(L,{title:t}),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")],...e});export{Ee as ActionSheetNormal};