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