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

A collection of HTML helpers used for developing Kendo UI themes

var r=(...e)=>e.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?r(...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 L=(e,t)=>r({[`${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"}),C=(e,t)=>{let{valid:n,invalid:a,hover:i,focus:m,checked:l,active:u,selected:f,disabled:O,indeterminate:oe,loading:re,empty:ne,readonly:w,highlighted:g,...P}=t;return r({"k-valid":n,"k-invalid":a,"k-hover":i,"k-focus":m,"k-checked":l,"k-active":u,"k-selected":f,"k-disabled":O,"k-indeterminate":oe&&!l,"k-loading":re,"k-empty":ne,"k-readonly":w,"k-highlighted":g},Object.keys(P).reduce((z,y)=>(y.startsWith("k-")?z[y]=P[y]:z[`k-${y}`]=P[y],z),{}))};function he(e,t){if(!t)return{};let n=Array.isArray(t)?t:[t];return Object.fromEntries(n.map(a=>[`k-${a}`,!0]))}var s={xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},v={small:"small",medium:"medium",large:"large",full:"full"},E={solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},o={inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",dark:"dark",light:"light",inverse:"inverse"},d={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"},Ae={calloutMap:{top:"n",bottom:"s",left:"w",right:"e"},orientationMap:{vertical:"vstack",horizontal:"hstack"}};var S="tile-layout",k="tilelayout";import{jsx as Ue}from"react/jsx-runtime";var Le="k-tilelayout",we=[],Pe={},ze={},T=e=>{let{gap:t,columns:n,columnWidth:a,rowHeight:i,style:m,children:l}=e,u={gridTemplateColumns:`repeat(${n}, minmax(0px, ${a}))`,gridAutoRows:`minmax(0px, ${i})`,gap:t,...m};return Ue("div",{className:r(e.className,Le),style:u,children:l})};T.states=we;T.options=Pe;T.className=Le;T.defaultOptions=ze;T.moduleName=S;T.folderName=k;import $t from"react";import{jsx as Fe}from"react/jsx-runtime";var $e="k-card-callout",Te=e=>{let{callout:t,...n}=e;return Fe("span",{...n,className:r(e.className,$e,{[`k-callout-${Ae.calloutMap[t]||t}`]:t})})};var p="card",N=p;import{Fragment as Ve,jsx as Me,jsxs as qe}from"react/jsx-runtime";var J="k-card",We=[d.hover,d.focus,d.selected,d.disabled],Ge={themeColor:[o.primary,o.success,o.warning,o.error,o.info]},Ye={},h=e=>{let{orientation:t,themeColor:n,callout:a,hover:i,focus:m,selected:l,disabled:u,...f}=e;return qe("div",{...f,className:r(e.className,J,L(J,{themeColor:n}),C(J,{hover:i,focus:m,disabled:u,selected:l}),{[`k-card-${t}`]:t,"k-card-with-callout":a}),children:[a&&a!=="true"&&Me(Te,{callout:a}),Me(Ve,{children:e.children})]})};h.states=We;h.options=Ge;h.className=J;h.defaultOptions=Ye;h.moduleName=p;h.folderName=N;import{Fragment as Ze,jsx as ye}from"react/jsx-runtime";var ae="k-card-list",Je=[],Xe={},Qe={},_=e=>{let{...t}=e;return ye("div",{...t,className:r(e.className,ae,C(ae,{})),children:ye(Ze,{children:e.children})})};_.states=Je;_.options=Xe;_.className=ae;_.defaultOptions=Qe;_.moduleName=p;_.folderName=N;import{jsx as ot}from"react/jsx-runtime";var Ee="k-card-group",je=[],et={},tt={},R=e=>{let{...t}=e;return ot("div",{...t,className:r(e.className,Ee),children:e.children})};R.states=je;R.options=et;R.className=Ee;R.defaultOptions=tt;R.moduleName=p;R.folderName=N;import{jsx as st}from"react/jsx-runtime";var se="k-card-wrap",rt=[d.focus,d.selected],nt={},at={},K=e=>{let{focus:t,selected:n,...a}=e;return st("div",{...a,className:r(e.className,se,C(se,{focus:t,selected:n})),children:e.children})};K.states=rt;K.options=nt;K.className=se;K.defaultOptions=at;K.moduleName=p;K.folderName=N;import{jsx as lt}from"react/jsx-runtime";var ie="k-card-title",it=[d.hover,d.focus],D=e=>{let{hover:t,focus:n,...a}=e;return lt("div",{...a,className:r(e.className,ie,C(ie,{hover:t,focus:n})),children:e.children})};D.states=it;D.className=ie;import{jsx as mt}from"react/jsx-runtime";var dt="k-card-subtitle",X=e=>{let{...t}=e;return mt("div",{...t,className:r(e.className,dt),children:e.children})};import{Fragment as Fo,jsx as $o}from"react/jsx-runtime";import{Fragment as ft,jsx as be}from"react/jsx-runtime";var le="k-font-icon",ct=[],pt={size:[s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},ut={},U=e=>{let{size:t,themeColor:n,icon:a,rotate:i,flip:m,...l}=e;return a?be("span",{...l,className:r(e.className,le,L(le,{size:t}),{[`k-i-${a}`]:a,[`k-color-${n}`]:n,[`k-rotate-${i}`]:i,"k-flip-h":m==="h"||m==="both","k-flip-v":m==="v"||m==="both"})}):be(ft,{})};U.states=ct;U.options=pt;U.className=le;U.defaultOptions=ut;var Oe=U;import{Fragment as xt,jsx as Q}from"react/jsx-runtime";var de="k-svg-icon",Ct=[],Nt={size:[s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},ge={viewBox:"0 0 24 24"},$=e=>{let{size:t,themeColor:n,rotate:a,flip:i,viewBox:m=ge.viewBox,icon:l,...u}=e;if(!l)return Q(xt,{});l==="none"&&{...u,className:r(e.className,de,"k-none")};let f=typeof l=="object"&&l.name&&l.name;return Q("span",{...u,className:r(e.className,de,L("k-icon",{size:t}),{[`k-svg-i-${f}`]:f,[`k-color-${n}`]:n,[`k-rotate-${a}`]:a,"k-flip-h":i==="h"||i==="both","k-flip-v":i==="v"||i==="both"}),children:Q("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof l=="object"?l.viewBox:m,dangerouslySetInnerHTML:typeof l=="object"?{__html:l.content}:void 0,children:l?void 0:e.children})})};$.states=Ct;$.options=Nt;$.className=de;$.defaultOptions=ge;var me=$;import*as ce from"@progress/kendo-svg-icons";var ve="icon",Se="icons";import{Fragment as ke,jsx as F}from"react/jsx-runtime";var Z="k-icon",ht=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),At=[],Lt={size:[s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},pe={viewBox:"0 0 24 24",type:"svg"},A=e=>{let{size:t,themeColor:n,icon:a,type:i=pe.type,rotate:m,flip:l,viewBox:u=pe.viewBox,...f}=e;if(!a)return F(ke,{});if(i==="svg"){if(a==="none")return F(me,{...f,className:r(e.className,Z),icon:a,size:t});let O=ce[a]?a:ht(`${a}-icon`);return ce[O]?F(me,{...f,className:r(e.className,Z),icon:ce[O],size:t,themeColor:n,rotate:m,flip:l,viewBox:u}):F(ke,{})}return F(Oe,{...f,className:r(e.className,Z),icon:a,size:t,themeColor:n,rotate:m,flip:l})};A.states=At;A.options=Lt;A.defaultOptions=pe;A.className=Z;A.moduleName=ve;A.folderName=Se;var ue="button",_e=ue;import{Fragment as Et,jsx as W,jsxs as Re}from"react/jsx-runtime";var G="k-button",Tt=["icon-button"],Mt=[d.hover,d.focus,d.active,d.selected,d.disabled,d.generating],yt={size:[s.small,s.medium,s.large],rounded:[v.small,v.medium,v.large,v.full],fillMode:[E.solid,E.flat,E.outline,E.clear,E.link],themeColor:[o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark,o.inverse]},b={size:s.medium,rounded:v.medium,fillMode:E.solid,themeColor:o.base,showArrow:!1,arrowIconName:"caret-alt-down"},c=e=>{let{size:t=b.size,rounded:n=b.rounded,fillMode:a=b.fillMode,themeColor:i=b.themeColor,showArrow:m=b.showArrow,arrowIconName:l=b.arrowIconName,variant:u,hover:f,focus:O,active:oe,selected:re,disabled:ne,icon:w,text:g,iconClassName:P,...z}=e,y=w!==void 0,Ie=e.children!==void 0;return Re("button",{...z,className:r(e.className,G,he(G,u),L(G,{size:t,rounded:n,fillMode:a,themeColor:i}),C(G,{hover:f,focus:O,active:oe,disabled:ne,selected:re}),{"k-icon-button":!g&&!Ie&&y}),children:[w&&W(A,{className:r(P,"k-button-icon"),icon:w}),g?Re(Et,{children:[g&&W("span",{className:"k-button-text",children:g}),e.children]}):e.children&&W("span",{className:"k-button-text",children:e.children}),m&&W("span",{className:"k-menu-button-arrow k-button-arrow",children:W(A,{icon:l})})]})};c.states=Mt;c.options=yt;c.variants=Tt;c.className=G;c.defaultOptions=b;c.moduleName=ue;c.folderName=_e;import{jsx as Nr}from"react/jsx-runtime";import{jsx as Lr}from"react/jsx-runtime";import{jsx as Er}from"react/jsx-runtime";import{Fragment as Ot,jsx as Y,jsxs as gt}from"react/jsx-runtime";var bt="k-card-header",j=e=>{let{title:t,subtitle:n,details:a,...i}=e;return gt("div",{...i,className:r(e.className,bt),children:[t&&Y(D,{children:t}),n&&Y(X,{children:n}),Y(Ot,{children:e.children}),a&&Y("span",{className:"k-card-header-actions",children:Y(c,{className:"k-card-details",icon:"more-vertical",rounded:"medium",size:"medium",fillMode:"flat",themeColor:"base"})})]})};import{jsx as Pr}from"react/jsx-runtime";import{Fragment as St,jsx as V,jsxs as kt}from"react/jsx-runtime";var vt="k-card-body",ee=e=>{let{title:t,subtitle:n,details:a,...i}=e;return kt("div",{...i,className:r(e.className,vt),children:[t&&V(D,{children:t}),n&&V(X,{children:n}),V(St,{children:e.children}),a&&V("span",{className:"k-card-header-actions",children:V(c,{className:"k-card-details",icon:"more-vertical",rounded:"medium",size:"medium",fillMode:"flat",themeColor:"base"})})]})};import{jsx as Dt}from"react/jsx-runtime";var Ke="k-card-deck",_t=[],Rt={},Kt={},H=e=>{let{...t}=e;return Dt("div",{...t,className:r(e.className,Ke),children:e.children})};H.states=_t;H.options=Rt;H.className=Ke;H.defaultOptions=Kt;H.moduleName=p;H.folderName=N;import{jsx as wt}from"react/jsx-runtime";var De="k-card-deck-scrollwrap",Ht=[],Bt={},It={},B=e=>{let{...t}=e;return wt("div",{...t,className:r(e.className,De),children:e.children})};B.states=Ht;B.options=Bt;B.className=De;B.defaultOptions=It;B.moduleName=p;B.folderName=N;var fe="action-buttons",He=fe;import{jsx as Ut}from"react/jsx-runtime";var te="k-actions",Pt=[],zt={},Ce={alignment:"start",orientation:"horizontal"},M=e=>{let{alignment:t=Ce.alignment,orientation:n=Ce.orientation,...a}=e;return Ut("div",{...a,className:r(te,{[`${te}-${t}`]:t,[`${te}-${n}`]:n},e.className),children:e.children})};M.states=Pt;M.options=zt;M.className=te;M.defaultOptions=Ce;M.moduleName=fe;M.folderName=He;import{Fragment as Cn,jsx as un,jsxs as fn}from"react/jsx-runtime";import{Fragment as yn,jsx as Tn,jsxs as Mn}from"react/jsx-runtime";import{jsx as Ne,jsxs as Yt}from"react/jsx-runtime";var xe="k-tilelayout-item",Ft=[d.focus],Wt={},Gt={},x=e=>{let{header:t,body:n,focus:a,resize:i,style:m}=e;return Yt(h,{className:r(e.className,xe,C(xe,{focus:a}),{"k-resize":i===!0,"k-resize-x":i==="horizontal","k-resize-y":i==="vertical"}),style:m,children:[t&&$t.isValidElement(t)?Ne(j,{className:"k-tilelayout-item-header k-cursor-move",children:t}):Ne(j,{className:"k-tilelayout-item-header k-cursor-move",title:t}),n&&Ne(ee,{className:"k-tilelayout-item-body",children:n})]})};x.states=Ft;x.options=Wt;x.className=xe;x.defaultOptions=Gt;x.moduleName=S;x.folderName=k;import{jsx as Xt}from"react/jsx-runtime";var Be="k-layout-item-hint",Vt=[],qt={},Jt={},I=e=>{let{style:t}=e;return Xt("div",{className:Be,style:t})};I.states=Vt;I.options=qt;I.className=Be;I.defaultOptions=Jt;I.moduleName=S;I.folderName=k;import{Fragment as Qt,jsx as q,jsxs as Zt}from"react/jsx-runtime";var oa=e=>q(T,{children:Zt(Qt,{children:[q(x,{header:"Title goes here",body:"Content goes here"}),q(x,{header:"Title goes here",body:"Content goes here"}),q(x,{header:"Title goes here",body:"Content goes here"}),q(x,{header:"Title goes here",body:"Content goes here"})]}),...e});export{oa as TileLayoutNormal};