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