@progress/kendo-themes-html/dist/esm/tilelayout/tilelayout-item.spec.mjs

A collection of HTML helpers used for developing Kendo UI themes

import Lo from"react";var r=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?r(...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 O=(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"}),N=(t,e)=>{let{valid:o,invalid:s,hover:i,focus:m,checked:c,active:d,selected:T,disabled:M,indeterminate:v,loading:j,empty:E,readonly:tt,highlighted:lt,...K}=e;return r({"k-valid":o,"k-invalid":s,"k-hover":i,"k-focus":m,"k-checked":c,"k-active":d,"k-selected":T,"k-disabled":M,"k-indeterminate":v&&!c,"k-loading":j,"k-empty":E,"k-readonly":tt,"k-highlighted":lt},Object.keys(K).reduce((x,S)=>(S.startsWith("k-")?x[S]=K[S]:x[`k-${S}`]=K[S],x),{}))};function Et(t,e){if(!e)return{};let o=Array.isArray(e)?e:[e];return Object.fromEntries(o.map(s=>[`k-${s}`,!0]))}var l={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},B={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"},R={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},A={undefined:void 0,outline:"outline",solid:"solid",duotone:"duotone"},a={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",inverse:"inverse"},p={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"},St={calloutMap:{top:"n",bottom:"s",left:"w",right:"e"},orientationMap:{vertical:"vstack",horizontal:"hstack"}};var dt={};function ct(t){return dt[t]=(dt[t]||0)+1,`k-${t}-${dt[t]}`}import{jsx as ce}from"react/jsx-runtime";var de="k-card-callout",Ot=t=>{let{callout:e,...o}=t;return ce("span",{...o,className:r(t.className,de,{[`k-callout-${St.calloutMap[e]||e}`]:e})})};var h="card",b=h;import{Fragment as fe,jsx as Bt,jsxs as Ce}from"react/jsx-runtime";var mt="k-card",me=[p.hover,p.focus,p.selected,p.disabled],pe={},ue={},u=t=>{let{orientation:e,callout:o,hover:s,focus:i,selected:m,disabled:c,...d}=t;return Ce("div",{...d,className:r(t.className,mt,N(mt,{hover:s,focus:i,disabled:c,selected:m}),{[`k-card-${e}`]:e,"k-card-with-callout":o}),children:[o&&o!=="true"&&Bt(Ot,{callout:o}),Bt(fe,{children:t.children})]})};u.states=me;u.options=pe;u.className=mt;u.defaultOptions=ue;u.moduleName=h;u.folderName=b;u.ariaSpec={selector:".k-card",rules:[{selector:".k-card-list .k-card",attribute:"role=listitem",usage:"When the card is located in a list, it should have the listitem role."},{selector:".k-card-list .k-card",attribute:"tabindex=0",usage:"The card component is focusable when navigatable."},{selector:".k-card-list .k-card",attribute:"aria-describedby=.k-card-title id",usage:"Associate the card to the title element."},{selector:".k-card-list .k-card",attribute:"aria-keyshortcuts=Enter",usage:"Announces the bound Enter key that enables navigation inside the card."}]};import{Fragment as be,jsx as Rt}from"react/jsx-runtime";var pt="k-card-list",he=[],xe={},Ne={},g=t=>{let{...e}=t;return Rt("div",{...e,className:r(t.className,pt,N(pt,{})),role:"list",children:Rt(be,{children:t.children})})};g.states=he;g.options=xe;g.className=pt;g.defaultOptions=Ne;g.moduleName=h;g.folderName=b;g.ariaSpec={selector:".k-card-list",rules:[{selector:".k-card-list",attribute:"role=list",usage:"The card list container announces its list role."},{selector:".k-card-list .k-card",attribute:"role=listitem",usage:"Each card in the list has the listitem role."},{selector:".k-card-list .k-card",attribute:"tabindex=0",usage:"The card is focusable when navigatable."},{selector:".k-card-list .k-card",attribute:"aria-describedby=.k-card-title id",usage:"Associate the card to its title element."},{selector:".k-card-list .k-card",attribute:"aria-keyshortcuts=Enter",usage:"Announces the Enter key for navigation inside the card."}]};import{jsx as ke}from"react/jsx-runtime";var _t="k-card-group",ve=[],Ae={},ye={},H=t=>{let{...e}=t;return ke("div",{...e,className:r(t.className,_t),children:t.children})};H.states=ve;H.options=Ae;H.className=_t;H.defaultOptions=ye;H.moduleName=h;H.folderName=b;import{jsx as Le}from"react/jsx-runtime";var ut="k-card-wrap",Me=[p.focus,p.selected],Te={},ge={},I=t=>{let{focus:e,selected:o,...s}=t;return Le("div",{...s,className:r(t.className,ut,N(ut,{focus:e,selected:o})),children:t.children})};I.states=Me;I.options=Te;I.className=ut;I.defaultOptions=ge;I.moduleName=h;I.folderName=b;import{jsx as Se}from"react/jsx-runtime";var ft="k-card-title",Ee=[p.hover,p.focus],_=t=>{let{hover:e,focus:o,...s}=t;return Se("div",{...s,className:r(t.className,ft,N(ft,{hover:e,focus:o})),children:t.children})};_.states=Ee;_.className=ft;import{jsx as Be}from"react/jsx-runtime";var Oe="k-card-subtitle",ot=t=>{let{...e}=t;return Be("div",{...e,className:r(t.className,Oe),children:t.children})};import{Fragment as Kt,jsx as rt}from"react/jsx-runtime";var Dt="k-card-media",Ct=t=>{let{src:e,...o}=t;return rt(Kt,{children:e?rt("img",{...o,className:r(t.className,Dt),src:e}):rt("span",{...o,className:r(t.className,Dt),children:rt(Kt,{children:t.children})})})};import{Fragment as Ke,jsx as Ht}from"react/jsx-runtime";var ht="k-font-icon",Re=[],_e={size:[l.undefined,l.xsmall,l.small,l.medium,l.large,l.xlarge,l.xxlarge,l.xxxlarge],themeColor:[a.undefined,a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info]},De={},W=t=>{let{size:e,themeColor:o,icon:s,rotate:i,flip:m,...c}=t;return s?Ht("span",{...c,className:r(t.className,ht,O(ht,{size:e}),{[`k-i-${s}`]:s,[`k-color-${o}`]:o,[`k-rotate-${i}`]:i,"k-flip-h":m==="h"||m==="both","k-flip-v":m==="v"||m==="both"}),"aria-hidden":"true"}):Ht(Ke,{})};W.states=Re;W.options=_e;W.className=ht;W.defaultOptions=De;var It=W;import{Fragment as we,jsx as at}from"react/jsx-runtime";var xt="k-svg-icon",He=[],Ie={size:[l.undefined,l.xsmall,l.small,l.medium,l.large,l.xlarge,l.xxlarge,l.xxxlarge],themeColor:[a.undefined,a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info],variant:[A.outline,A.solid,A.duotone]},Nt={viewBox:"0 0 24 24",variant:A.outline},G=t=>{let{size:e,themeColor:o,rotate:s,flip:i,viewBox:m=Nt.viewBox,variant:c=Nt.variant,icon:d,...T}=t;if(!d)return at(we,{});if(d==="none")return at("span",{...T,className:r(t.className,xt,O("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let M=typeof d=="object"&&d.name&&d.name,v=typeof d=="object"?c&&d.variants?.[c]||d.variants?.outline||d.content:void 0;return at("span",{...T,className:r(t.className,xt,O("k-icon",{size:e}),{[`k-svg-i-${M}`]:M,[`k-color-${o}`]:o,[`k-rotate-${s}`]:s,"k-flip-h":i==="h"||i==="both","k-flip-v":i==="v"||i==="both"}),"aria-hidden":"true",children:at("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof d=="object"?d.viewBox:m,dangerouslySetInnerHTML:v!==void 0?{__html:v}:void 0,children:d?void 0:t.children})})};G.states=He;G.options=Ie;G.className=xt;G.defaultOptions=Nt;var bt=G;import*as vt from"@progress/kendo-svg-icons";var wt="icon",zt="icons";import{useContext as Pe}from"react";import{createContext as ze}from"react";var Pt=ze({iconsType:"svg"});import{Fragment as Ut,jsx as V}from"react/jsx-runtime";var nt="k-icon",Ue=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),Fe=[],$e={size:[l.undefined,l.xsmall,l.small,l.medium,l.large,l.xlarge,l.xxlarge,l.xxxlarge],themeColor:[a.undefined,a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info],variant:[A.outline,A.solid,A.duotone]},st={viewBox:"0 0 24 24",type:"svg",variant:A.outline},y=t=>{let{iconsType:e}=Pe(Pt),{size:o,themeColor:s,icon:i,type:m=e||st.type,rotate:c,flip:d,viewBox:T=st.viewBox,variant:M=st.variant,...v}=t;if(!i)return V(Ut,{});if((e||m)==="svg"){if(i==="none")return V(bt,{...v,className:r(t.className,nt),icon:i,size:o,variant:M});let E=vt[i]?i:Ue(`${i}-icon`);return vt[E]?V(bt,{...v,className:r(t.className,nt),icon:vt[E],size:o,themeColor:s,rotate:c,flip:d,viewBox:T,variant:M}):V(Ut,{})}return V(It,{...v,className:r(t.className,nt),icon:i,size:o,themeColor:s,rotate:c,flip:d})};y.states=Fe;y.options=$e;y.defaultOptions=st;y.className=nt;y.moduleName=wt;y.folderName=zt;y.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 At="button",Ft=At;import{Fragment as $t,jsx as w,jsxs as Wt}from"react/jsx-runtime";var q="k-button",We=["icon-button"],Ge=[p.hover,p.focus,p.active,p.selected,p.disabled,p.generating],Ve={size:[l.undefined,l.xsmall,l.small,l.medium,l.large],rounded:[B.undefined,B.none,B.small,B.medium,B.large,B.full],fillMode:[R.undefined,R.solid,R.flat,R.outline,R.clear,R.link],themeColor:[a.undefined,a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info,a.inverse]},yt={showArrow:!1,arrowIconName:"chevron-down"},n=t=>{let{as:e="button",size:o,rounded:s,fillMode:i,themeColor:m,showArrow:c=yt.showArrow,arrowIconName:d=yt.arrowIconName,variant:T,hover:M,focus:v,active:j,selected:E,disabled:tt,togglable:lt,ariaDisabled:K,icon:x,iconSize:S,text:et,iconClassName:ae,className:ne,...se}=t,ie=x!=null,le=t.children!==void 0;return Wt(e,{className:r(ne,q,Et(q,T),O(q,{size:o,rounded:s,fillMode:i,themeColor:m}),N(q,{hover:M,focus:v,active:j,disabled:tt||K,selected:E}),{"k-icon-button":!et&&!le&&ie}),"aria-pressed":lt?E?"true":"false":void 0,...se,"aria-disabled":K?"true":void 0,disabled:tt||void 0,children:[typeof x=="string"&&x&&w(y,{className:r(ae,"k-button-icon"),icon:x,size:S}),x&&typeof x!="string"&&w($t,{children:x}),et?Wt($t,{children:[et&&w("span",{className:"k-button-text",children:et}),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(y,{icon:d})})]})};n.states=Ge;n.options=Ve;n.variants=We;n.className=q;n.defaultOptions=yt;n.moduleName=At;n.folderName=Ft;n.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 qe}from"react/jsx-runtime";var Gt=t=>qe(n,{icon:"folder",...t,"aria-label":t["aria-label"]||"Folder",children:void 0});import{jsx as Ye}from"react/jsx-runtime";var Vt=t=>Ye(n,{icon:"folder",children:"Button",...t});import{jsx as Je}from"react/jsx-runtime";var qt=t=>Je(n,{children:"Button",...t});import{jsx as kt}from"react/jsx-runtime";var Xe=n.options,Qe=n.states,Ze={...n.defaultOptions,variant:"text"},je=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],to=[],z=t=>{let{variant:e,...o}=t;switch(e){case"icon-only":return kt(Gt,{...o,icon:"star"});case"icon-and-text":return kt(Vt,{...o,icon:"star",children:"Button"});default:return kt(qt,{...o,children:"Button"})}};z.options=Xe;z.states=Qe;z.variants=je;z.defaultOptions=Ze;z.modifiers=to;z.className=n.className;import{Fragment as oo,jsx as Y,jsxs as ro}from"react/jsx-runtime";var eo="k-card-header",L=t=>{let{title:e,subtitle:o,details:s,...i}=t;return ro("div",{...i,className:r(t.className,eo),children:[e&&Y(_,{children:e}),o&&Y(ot,{children:o}),Y(oo,{children:t.children}),s&&Y("span",{className:"k-card-header-actions",children:Y(n,{className:"k-card-details",icon:"more-vertical",fillMode:"flat","aria-label":"Card details"})})]})};import{jsx as no}from"react/jsx-runtime";var ao="k-card-footer",Mt=t=>{let{...e}=t;return no("div",{...e,className:r(t.className,ao),children:t.children})};import{Fragment as io,jsx as J,jsxs as lo}from"react/jsx-runtime";var so="k-card-body",k=t=>{let{title:e,subtitle:o,details:s,...i}=t;return lo("div",{...i,className:r(t.className,so),children:[e&&J(_,{children:e}),o&&J(ot,{children:o}),J(io,{children:t.children}),s&&J("span",{className:"k-card-header-actions",children:J(n,{className:"k-card-details",icon:"more-vertical",fillMode:"flat","aria-label":"Card details"})})]})};import{jsx as uo}from"react/jsx-runtime";var Yt="k-card-deck",co=[],mo={},po={},P=t=>{let{...e}=t;return uo("div",{...e,className:r(t.className,Yt),children:t.children})};P.states=co;P.options=mo;P.className=Yt;P.defaultOptions=po;P.moduleName=h;P.folderName=b;import{jsx as xo}from"react/jsx-runtime";var Jt="k-card-deck-scrollwrap",fo=[],Co={},ho={},U=t=>{let{...e}=t;return xo("div",{...e,className:r(t.className,Jt),children:t.children})};U.states=fo;U.options=Co;U.className=Jt;U.defaultOptions=ho;U.moduleName=h;U.folderName=b;var Tt="action-buttons",Xt=Tt;import{jsx as vo}from"react/jsx-runtime";var it="k-actions",No=[],bo={},gt={alignment:"start",orientation:"horizontal"},C=t=>{let{alignment:e=gt.alignment,orientation:o=gt.orientation,...s}=t;return vo("div",{...s,className:r(it,{[`${it}-${e}`]:e,[`${it}-${o}`]:o},t.className),children:t.children})};C.states=No;C.options=bo;C.className=it;C.defaultOptions=gt;C.moduleName=Tt;C.folderName=Xt;import{Fragment as Ao,jsx as F,jsxs as Qt}from"react/jsx-runtime";var Zt=t=>F(u,{orientation:"vertical",children:Qt(Ao,{children:[F(L,{children:"Card Header"}),F(k,{children:F("p",{children:"Some quick example text to build on the card title and make up the bulk of the card's content."})}),Qt(C,{className:"k-card-actions",children:[F(n,{fillMode:"flat",themeColor:"primary",children:"Action 1"}),F(n,{fillMode:"flat",themeColor:"primary",children:"Action 2"})]})]}),...t});import{Fragment as yo,jsx as X,jsxs as jt}from"react/jsx-runtime";var te=t=>X(u,{orientation:"horizontal",children:jt(yo,{children:[X(k,{title:"Card Title",children:X("p",{children:"Some quick example text to build on the card title and make up the bulk of the card's content."})}),jt(C,{orientation:"vertical",className:"k-card-actions",children:[X(n,{fillMode:"flat",themeColor:"primary",children:"Action 1"}),X(n,{fillMode:"flat",themeColor:"primary",children:"Action 2"})]})]}),...t});import{jsx as an,jsxs as nn}from"react/jsx-runtime";import{jsx as f,jsxs as Q}from"react/jsx-runtime";var ko=u.options,Mo=u.states,ee={...u.defaultOptions,variant:"vertical"},To=[{name:"vertical",title:"Vertical"},{name:"horizontal",title:"Horizontal"}],go=[{name:"media",title:"Card with Media"},{name:"header",title:"Card with Header"},{name:"footer",title:"Card with Footer"}],$=t=>{let{variant:e,modifiers:o,...s}={...ee,...t},i=!1,m=!1,c=!1;return Object.keys(o||{}).forEach(d=>{switch(d){case"media":{i=!!o?.[d];break}case"header":{m=!!o?.[d];break}case"footer":{c=!!o?.[d];break}}}),e==="horizontal"?Q(te,{style:{maxWidth:"420px"},...s,children:[i&&f(Ct,{src:"https://demos.telerik.com/kendo-ui/content/web/cards/rome.jpg"}),Q("div",{children:[m&&f(L,{title:"Header Title",subtitle:"Header Subtitle"}),f(k,{title:"Title",subtitle:"Subtitle",children:f("p",{children:"Some quick example text to build on the card title and make up the bulk of the card's content."})}),c&&f(Mt,{children:"Card Footer"})]}),(m||c)&&f("span",{className:"k-separator k-separator-vertical"}),Q(C,{orientation:"vertical",alignment:"stretched",className:"k-card-actions",children:[f(n,{fillMode:"flat",themeColor:"primary",children:"Button"}),f(n,{fillMode:"flat",themeColor:"primary",children:"Button"})]})]}):Q(Zt,{style:{maxHeight:"450px",width:"300px"},...s,children:[m&&f(L,{title:"Header Title",subtitle:"Header Subtitle"}),i&&f(Ct,{src:"https://demos.telerik.com/kendo-ui/content/web/cards/rome.jpg"}),f(k,{title:"Title",subtitle:"Subtitle",children:f("p",{children:"Some quick example text to build on the card title and make up the bulk of the card's content."})}),c&&f(Mt,{children:"Card Footer"}),Q(C,{className:"k-card-actions",children:[f(n,{fillMode:"flat",themeColor:"primary",children:"Button"}),f(n,{fillMode:"flat",themeColor:"primary",children:"Button"})]})]})};$.options=ko;$.states=Mo;$.variants=To;$.defaultOptions=ee;$.modifiers=go;$.className=u.className;var oe="tile-layout",re="tilelayout";import{jsx as Z,jsxs as Bo}from"react/jsx-runtime";var Lt="k-tilelayout-item",Eo=[p.focus],So={},Oo={},D=t=>{let{header:e,body:o,focus:s,resize:i,style:m}=t,c=ct("tilelayout-title");return Bo(u,{className:r(t.className,Lt,N(Lt,{focus:s}),{"k-resize":i===!0,"k-resize-x":i==="horizontal","k-resize-y":i==="vertical"}),style:m,role:"listitem","aria-labelledby":c,tabIndex:0,"aria-keyshortcuts":"Enter",children:[e&&Lo.isValidElement(e)?Z(L,{className:"k-tilelayout-item-header k-cursor-move",children:Z("div",{className:"k-card-title",id:c,children:e})}):Z(L,{className:"k-tilelayout-item-header k-cursor-move",children:Z("div",{className:"k-card-title",id:c,children:e})}),o&&Z(k,{className:"k-tilelayout-item-body",children:o})]})};D.states=Eo;D.options=So;D.className=Lt;D.defaultOptions=Oo;D.moduleName=oe;D.folderName=re;var $n=D;export{Lt as TILELAYOUTITEM_CLASSNAME,D as TileLayoutItem,$n as default};