UNPKG

@progress/kendo-themes-html

Version:

A collection of HTML helpers used for developing Kendo UI themes

2 lines (1 loc) 12.9 kB
var o=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?o(...e):typeof e=="object"?Object.keys(e).map((n,r)=>e[r]||e[n]&&n||null).filter(n=>n!==null).join(" "):e).filter(e=>!!e).join(" ");var T=(t,e)=>o({[`${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"}),C=(t,e)=>o({"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"},A={small:"small",medium:"medium",large:"large",full:"full"},k={solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},a={inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",dark:"dark",light:"light",inverse:"inverse"},c={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"},de={calloutMap:{top:"n",bottom:"s",left:"w",right:"e"},orientationMap:{vertical:"vstack",horizontal:"hstack"}};import{jsx as ze}from"react/jsx-runtime";var Ke="k-card-callout",G=t=>{let{callout:e,...n}=t;return ze("span",{...n,className:o(t.className,Ke,{[`k-callout-${de.calloutMap[e]||e}`]:e})})};import{Fragment as $e,jsx as pe,jsxs as Fe}from"react/jsx-runtime";var X="k-card",De=[c.hover,c.focus,c.selected,c.disabled],Pe={themeColor:[a.primary,a.success,a.warning,a.error,a.info]},_e={},x=t=>{let{orientation:e,themeColor:n,callout:r,hover:l,focus:m,selected:s,disabled:u,...p}=t;return Fe("div",{...p,className:o(t.className,X,T(X,{themeColor:n}),C(X,{hover:l,focus:m,disabled:u,selected:s}),{[`k-card-${e}`]:e,"k-card-with-callout":r}),children:[r&&r!=="true"&&pe(G,{callout:r}),pe($e,{children:t.children})]})};x.states=De;x.options=Pe;x.className=X;x.defaultOptions=_e;import{jsx as We}from"react/jsx-runtime";var j="k-card-title",Ve=[c.hover,c.focus],y=t=>{let{hover:e,focus:n,...r}=t;return We("div",{...r,className:o(t.className,j,C(j,{hover:e,focus:n})),children:t.children})};y.states=Ve;y.className=j;import{jsx as Ge}from"react/jsx-runtime";var Je="k-card-subtitle",h=t=>{let{...e}=t;return Ge("div",{...e,className:o(t.className,Je),children:t.children})};import{Fragment as uo,jsx as po}from"react/jsx-runtime";import{Fragment as Ye,jsx as ue}from"react/jsx-runtime";var ee="k-icon k-font-icon",Xe=[],Ue={size:[i.xsmall,i.small,i.medium,i.large,i.xlarge,i.xxlarge,i.xxxlarge],themeColor:[a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info,a.light,a.dark]},qe={},O=t=>{let{size:e,themeColor:n,icon:r,rotate:l,flip:m,...s}=t;return r?ue("span",{...s,className:o(t.className,ee,T(ee,{size:e}),{[`k-i-${r}`]:r,[`k-color-${n}`]:n,[`k-rotate-${l}`]:l,"k-flip-h":m==="h"||m==="both","k-flip-v":m==="v"||m==="both"})}):ue(Ye,{})};O.states=Xe;O.options=Ue;O.className=ee;O.defaultOptions=qe;var fe=O;import{Fragment as je,jsx as U}from"react/jsx-runtime";var te="k-icon k-svg-icon",Ze=[],Qe={size:[i.xsmall,i.small,i.medium,i.large,i.xlarge,i.xxlarge,i.xxxlarge],themeColor:[a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info,a.light,a.dark]},Te={viewBox:"0 0 24 24"},R=t=>{let{size:e,themeColor:n,rotate:r,flip:l,viewBox:m=Te.viewBox,icon:s,...u}=t;if(!s)return U(je,{});s==="none"&&{...u,className:o(t.className,te,"k-none")};let p=typeof s=="object"&&s.name&&s.name;return U("span",{...u,className:o(t.className,te,T("k-icon",{size:e}),{[`k-svg-i-${p}`]:p,[`k-color-${n}`]:n,[`k-rotate-${r}`]:r,"k-flip-h":l==="h"||l==="both","k-flip-v":l==="v"||l==="both"}),children:U("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof s=="object"?s.viewBox:m,dangerouslySetInnerHTML:typeof s=="object"?{__html:s.content}:void 0,children:s?void 0:t.children})})};R.states=Ze;R.options=Qe;R.className=te;R.defaultOptions=Te;var oe=R;import*as Ce from"@progress/kendo-svg-icons";import{Fragment as xe,jsx as w}from"react/jsx-runtime";var et=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),tt=[],ot={size:[i.xsmall,i.small,i.medium,i.large,i.xlarge,i.xxlarge,i.xxxlarge],themeColor:[a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info,a.light,a.dark]},ae={viewBox:"0 0 24 24",type:"svg"},N=t=>{let{size:e,themeColor:n,icon:r,type:l=ae.type,rotate:m,flip:s,viewBox:u=ae.viewBox,...p}=t;if(!r)return w(xe,{});if(l==="svg"){if(r==="none")return w(oe,{...p,icon:r,size:e});let W=et(`${r}-icon`);return Ce[W]?w(oe,{...p,icon:Ce[W],size:e,themeColor:n,rotate:m,flip:s,viewBox:u}):w(xe,{})}return w(fe,{...p,icon:r,size:e,themeColor:n,rotate:m,flip:s})};N.states=tt;N.options=ot;N.defaultOptions=ae;import{Fragment as rt,jsx as K,jsxs as he}from"react/jsx-runtime";var q="k-button",at=[c.hover,c.focus,c.active,c.selected,c.disabled],nt={size:[i.small,i.medium,i.large],rounded:[A.small,A.medium,A.large,A.full],fillMode:[k.solid,k.flat,k.outline,k.clear,k.link],themeColor:[a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info,a.light,a.dark,a.inverse]},E={size:i.medium,rounded:A.medium,fillMode:k.solid,themeColor:a.base,showArrow:!1,arrowIconName:"caret-alt-down"},d=t=>{let{size:e=E.size,rounded:n=E.rounded,fillMode:r=E.fillMode,themeColor:l=E.themeColor,showArrow:m=E.showArrow,arrowIconName:s=E.arrowIconName,hover:u,focus:p,active:W,selected:Ie,disabled:He,icon:Q,text:J,iconClassName:Be,...Oe}=t,Re=Q!==void 0,we=t.children!==void 0;return he("button",{...Oe,className:o(t.className,q,T(q,{size:e,rounded:n,fillMode:r,themeColor:l}),C(q,{hover:u,focus:p,active:W,disabled:He,selected:Ie}),{"k-icon-button":!J&&!we&&Re}),children:[Q&&K(N,{className:o(Be,"k-button-icon"),icon:Q}),J?he(rt,{children:[J&&K("span",{className:"k-button-text",children:J}),t.children]}):t.children&&K("span",{className:"k-button-text",children:t.children}),m&&K("span",{className:"k-menu-button-arrow k-button-arrow",children:K(N,{icon:s})})]})};d.states=at;d.options=nt;d.className=q;d.defaultOptions=E;import{jsx as Ko}from"react/jsx-runtime";import{jsx as _o}from"react/jsx-runtime";import{jsx as Wo}from"react/jsx-runtime";import{Fragment as lt,jsx as z,jsxs as st}from"react/jsx-runtime";var it="k-card-header",D=t=>{let{title:e,subtitle:n,details:r,...l}=t;return st("div",{...l,className:o(t.className,it),children:[e&&z(y,{children:e}),n&&z(h,{children:n}),z(lt,{children:t.children}),r&&z("span",{className:"k-card-header-actions",children:z(d,{className:"k-card-details",icon:"more-vertical",rounded:"medium",size:"medium",fillMode:"flat",themeColor:"base"})})]})};import{jsx as ra}from"react/jsx-runtime";import{Fragment as mt,jsx as P,jsxs as dt}from"react/jsx-runtime";var ct="k-card-body",L=t=>{let{title:e,subtitle:n,details:r,...l}=t;return dt("div",{...l,className:o(t.className,ct),children:[e&&P(y,{children:e}),n&&P(h,{children:n}),P(mt,{children:t.children}),r&&P("span",{className:"k-card-header-actions",children:P(d,{className:"k-card-details",icon:"more-vertical",rounded:"medium",size:"medium",fillMode:"flat",themeColor:"base"})})]})};import{jsx as Ta}from"react/jsx-runtime";import{jsx as ft}from"react/jsx-runtime";var Y="k-actions",pt=[],ut={},ne={alignment:"start",orientation:"horizontal"},S=t=>{let{alignment:e=ne.alignment,orientation:n=ne.orientation,...r}=t;return ft("div",{...r,className:o(Y,{[`${Y}-${e}`]:e,[`${Y}-${n}`]:n},t.className),children:t.children})};S.states=pt;S.options=ut;S.className=Y;S.defaultOptions=ne;import{Fragment as La,jsx as Aa,jsxs as ya}from"react/jsx-runtime";import{Fragment as Ka,jsx as Ra,jsxs as wa}from"react/jsx-runtime";import{Fragment as xt,jsx as Ne}from"react/jsx-runtime";var _="k-timeline",Tt=[],Ct={},ve={orientation:"vertical"},v=t=>{let{orientation:e=ve.orientation,collapsibleEvents:n,alternatingMode:r,...l}=t;return Ne("div",{...l,className:o(t.className,_,{[`${_}-${e}`]:e,[`${_}-alternating`]:r,[`${_}-collapsible`]:n}),children:Ne(xt,{children:t.children})})};v.states=Tt;v.options=Ct;v.className=_;v.defaultOptions=ve;import{jsx as I,jsxs as re}from"react/jsx-runtime";var be="k-timeline-event",ht=[],Nt={},Z={title:"Event title",subtitle:"Event subtitle",content:"Event content"},$=t=>{let{content:e=Z.content,title:n=Z.title,subtitle:r=Z.subtitle,...l}=t;return re("li",{...l,className:o(t.className,be),children:[e&&I("div",{className:o("k-timeline-card"),children:I(H,{orientation:"vertical",callout:"top",children:re("div",{className:"k-card-inner",children:[re(D,{children:[I(M,{children:n}),I(h,{children:r})]}),I(L,{children:I("div",{className:"k-card-description",children:e})})]})})}),t.children]})};$.states=ht;$.options=Nt;$.className=be;$.defaultOptions=Z;import{jsx as ln}from"react/jsx-runtime";import{jsx as kt,jsxs as Et}from"react/jsx-runtime";var ke="k-timeline-flag-wrap",vt=[c.focus,c.selected],bt={},Ee={year:"2020"},g=t=>{let{year:e=Ee.year,...n}=t;return Et("li",{...n,className:o(t.className,ke),children:[kt("span",{className:"k-timeline-flag",children:e}),t.children]})};g.states=vt;g.options=bt;g.className=ke;g.defaultOptions=Ee;import{jsx as gt}from"react/jsx-runtime";var Mt="k-timeline-circle",ie=t=>{let{...e}=t;return gt("span",{...e,className:o(t.className,Mt)})};import{jsx as xn}from"react/jsx-runtime";import{jsx as Lt,jsxs as St}from"react/jsx-runtime";var At=[],yt={},H=t=>{let{callout:e,children:n,...r}=t;return St(x,{className:o(t.className),orientation:"vertical",callout:"true",...r,children:[e&&Lt(F,{callout:e}),n]})};H.states=At;H.defaultOptions=yt;import{jsx as le,jsxs as Bt}from"react/jsx-runtime";var Me="k-card-title",It=[],Ht={},M=t=>{let{collapsible:e,children:n,...r}=t;return Bt("div",{className:o(t.className,Me),...r,children:[le("span",{className:"k-event-title",children:n}),e&&le("span",{className:"k-event-collapse k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-icon-button",children:le(N,{icon:"chevron-right",className:"k-button-icon"})})]})};M.states=It;M.className=Me;M.defaultOptions=Ht;import{jsx as wt}from"react/jsx-runtime";var ge="k-timeline-card-callout",Ot=[],Rt={},F=t=>{let{...e}=t;return wt(G,{className:o(t.className,ge),...e})};F.states=Ot;F.className=ge;F.defaultOptions=Rt;import{jsx as Ae}from"react/jsx-runtime";var ye="k-timeline-date-wrap",Kt=[],zt={},Le={date:"May 25, 2008"},V=t=>{let{date:e=Le.date,...n}=t;return Ae("div",{...n,className:o(t.className,ye),children:Ae("span",{className:"k-timeline-date",children:e})})};V.states=Kt;V.options=zt;V.className=ye;V.defaultOptions=Le;import{jsx as $n,jsxs as Fn}from"react/jsx-runtime";import{jsx as Xn}from"react/jsx-runtime";import{jsxs as Pt}from"react/jsx-runtime";var se="k-timeline-track-item",Dt=[c.focus],ce=t=>{let{content:e,focus:n,...r}=t;return Pt("li",{...r,className:o(t.className,se,C(se,{focus:n})),children:[e,t.children]})};ce.states=Dt;ce.className=se;import{jsx as er,jsxs as tr}from"react/jsx-runtime";import{jsx as rr,jsxs as ir}from"react/jsx-runtime";import{jsx as mr,jsxs as dr}from"react/jsx-runtime";import{Fragment as vr,jsx as hr,jsxs as Nr}from"react/jsx-runtime";import{jsx as f,jsxs as me}from"react/jsx-runtime";var Se="k-timeline-event",_t=[],$t={},B={collapsed:!1,reverse:!1,title:"Event title",subtitle:"Event subtitle",content:"Event content"},b=t=>{let{date:e,content:n=B.content,collapsed:r=B.collapsed,reverse:l=B.reverse,title:m=B.title,subtitle:s=B.subtitle,showCollapseButton:u,...p}=t;return me("li",{...p,className:o(t.className,Se,{"k-reverse":l}),children:[e&&f("div",{className:"k-timeline-date-wrap",children:f("span",{className:"k-timeline-date",children:e})}),f(ie,{}),n&&f("div",{className:o("k-timeline-card",{"k-collapsed":r}),children:f(H,{...l?{callout:"right"}:{callout:"left"},children:me("div",{className:"k-card-inner",children:[me(D,{children:[f(M,{collapsible:u,children:m}),f(h,{children:s})]}),f(L,{children:f("div",{className:"k-card-description",children:n})})]})})}),t.children]})};b.states=_t;b.options=$t;b.className=Se;b.defaultOptions=B;var Wr=b;export{Se as TIMELINEVERTICALEVENT_CLASSNAME,b as VerticalTimelineEvent,Wr as default};