UNPKG

@progress/kendo-themes-html

Version:

A collection of HTML helpers used for developing Kendo UI themes

2 lines (1 loc) 9.94 kB
var a=(...o)=>o.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?a(...e):typeof e=="object"?Object.keys(e).map((n,s)=>e[s]||e[n]&&n||null).filter(n=>n!==null).join(" "):e).filter(e=>!!e).join(" ");var x=(o,e)=>a({[`${o}-xs`]:e.size==="xsmall",[`${o}-sm`]:e.size==="small",[`${o}-md`]:e.size==="medium",[`${o}-lg`]:e.size==="large",[`${o}-xl`]:e.size==="xlarge",[`${o}-xxl`]:e.size==="xxlarge",[`${o}-xxxl`]:e.size==="xxxlarge"},{[`${o}-${e.fillMode}`]:e.fillMode},{[`${o}-${e.fillMode}-${e.themeColor}`]:e.fillMode&&e.themeColor},{[`${o}-${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"}),k=(o,e)=>a({"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 r={xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},f={small:"small",medium:"medium",large:"large",full:"full"},h={solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},t={inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",dark:"dark",light:"light",inverse:"inverse"},i={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"},Q={calloutMap:{top:"n",bottom:"s",left:"w",right:"e"},orientationMap:{vertical:"vstack",horizontal:"hstack"}};import{jsx as pe}from"react/jsx-runtime";var ue="k-card-callout",W=o=>{let{callout:e,...n}=o;return pe("span",{...n,className:a(o.className,ue,{[`k-callout-${Q.calloutMap[e]||e}`]:e})})};import{Fragment as Ce,jsx as Z,jsxs as ve}from"react/jsx-runtime";var K="k-card",fe=[i.hover,i.focus,i.selected,i.disabled],he={themeColor:[t.primary,t.success,t.warning,t.error,t.info]},xe={},v=o=>{let{orientation:e,themeColor:n,callout:s,hover:d,focus:c,selected:l,disabled:u,...p}=o;return ve("div",{...p,className:a(o.className,K,x(K,{themeColor:n}),k(K,{hover:d,focus:c,disabled:u,selected:l}),{[`k-card-${e}`]:e,"k-card-with-callout":s}),children:[s&&s!=="true"&&Z(W,{callout:s}),Z(Ce,{children:o.children})]})};v.states=fe;v.options=he;v.className=K;v.defaultOptions=xe;import{jsx as ge}from"react/jsx-runtime";var G="k-card-title",be=[i.hover,i.focus],g=o=>{let{hover:e,focus:n,...s}=o;return ge("div",{...s,className:a(o.className,G,k(G,{hover:e,focus:n})),children:o.children})};g.states=be;g.className=G;import{jsx as Ne}from"react/jsx-runtime";var ye="k-card-subtitle",T=o=>{let{...e}=o;return Ne("div",{...e,className:a(o.className,ye),children:o.children})};import{Fragment as ht,jsx as ft}from"react/jsx-runtime";import{Fragment as Se,jsx as j}from"react/jsx-runtime";var V="k-icon k-font-icon",ke=[],Ae={size:[r.xsmall,r.small,r.medium,r.large,r.xlarge,r.xxlarge,r.xxxlarge],themeColor:[t.base,t.primary,t.secondary,t.tertiary,t.success,t.warning,t.error,t.info,t.light,t.dark]},Me={},B=o=>{let{size:e,themeColor:n,icon:s,rotate:d,flip:c,...l}=o;return s?j("span",{...l,className:a(o.className,V,x(V,{size:e}),{[`k-i-${s}`]:s,[`k-color-${n}`]:n,[`k-rotate-${d}`]:d,"k-flip-h":c==="h"||c==="both","k-flip-v":c==="v"||c==="both"})}):j(Se,{})};B.states=ke;B.options=Ae;B.className=V;B.defaultOptions=Me;var ee=B;import{Fragment as Le,jsx as R}from"react/jsx-runtime";var U="k-icon k-svg-icon",Te=[],Be={size:[r.xsmall,r.small,r.medium,r.large,r.xlarge,r.xxlarge,r.xxxlarge],themeColor:[t.base,t.primary,t.secondary,t.tertiary,t.success,t.warning,t.error,t.info,t.light,t.dark]},te={viewBox:"0 0 24 24"},L=o=>{let{size:e,themeColor:n,rotate:s,flip:d,viewBox:c=te.viewBox,icon:l,...u}=o;if(!l)return R(Le,{});l==="none"&&{...u,className:a(o.className,U,"k-none")};let p=typeof l=="object"&&l.name&&l.name;return R("span",{...u,className:a(o.className,U,x("k-icon",{size:e}),{[`k-svg-i-${p}`]:p,[`k-color-${n}`]:n,[`k-rotate-${s}`]:s,"k-flip-h":d==="h"||d==="both","k-flip-v":d==="v"||d==="both"}),children:R("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof l=="object"?l.viewBox:c,dangerouslySetInnerHTML:typeof l=="object"?{__html:l.content}:void 0,children:l?void 0:o.children})})};L.states=Te;L.options=Be;L.className=U;L.defaultOptions=te;var q=L;import*as oe from"@progress/kendo-svg-icons";import{Fragment as re,jsx as z}from"react/jsx-runtime";var ze=o=>o.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),Oe=[],Ee={size:[r.xsmall,r.small,r.medium,r.large,r.xlarge,r.xxlarge,r.xxxlarge],themeColor:[t.base,t.primary,t.secondary,t.tertiary,t.success,t.warning,t.error,t.info,t.light,t.dark]},X={viewBox:"0 0 24 24",type:"svg"},A=o=>{let{size:e,themeColor:n,icon:s,type:d=X.type,rotate:c,flip:l,viewBox:u=X.viewBox,...p}=o;if(!s)return z(re,{});if(d==="svg"){if(s==="none")return z(q,{...p,icon:s,size:e});let b=ze(`${s}-icon`);return oe[b]?z(q,{...p,icon:oe[b],size:e,themeColor:n,rotate:c,flip:l,viewBox:u}):z(re,{})}return z(ee,{...p,icon:s,size:e,themeColor:n,rotate:c,flip:l})};A.states=Oe;A.options=Ee;A.defaultOptions=X;import{Fragment as He,jsx as O,jsxs as ae}from"react/jsx-runtime";var $="k-button",Ie=[i.hover,i.focus,i.active,i.selected,i.disabled],we={size:[r.small,r.medium,r.large],rounded:[f.small,f.medium,f.large,f.full],fillMode:[h.solid,h.flat,h.outline,h.clear,h.link],themeColor:[t.base,t.primary,t.secondary,t.tertiary,t.success,t.warning,t.error,t.info,t.light,t.dark,t.inverse]},y={size:r.medium,rounded:f.medium,fillMode:h.solid,themeColor:t.base,showArrow:!1,arrowIconName:"caret-alt-down"},m=o=>{let{size:e=y.size,rounded:n=y.rounded,fillMode:s=y.fillMode,themeColor:d=y.themeColor,showArrow:c=y.showArrow,arrowIconName:l=y.arrowIconName,hover:u,focus:p,active:b,selected:w,disabled:_,icon:F,text:H,iconClassName:ie,...de}=o,ce=F!==void 0,me=o.children!==void 0;return ae("button",{...de,className:a(o.className,$,x($,{size:e,rounded:n,fillMode:s,themeColor:d}),k($,{hover:u,focus:p,active:b,disabled:_,selected:w}),{"k-icon-button":!H&&!me&&ce}),children:[F&&O(A,{className:a(ie,"k-button-icon"),icon:F}),H?ae(He,{children:[H&&O("span",{className:"k-button-text",children:H}),o.children]}):o.children&&O("span",{className:"k-button-text",children:o.children}),c&&O("span",{className:"k-menu-button-arrow k-button-arrow",children:O(A,{icon:l})})]})};m.states=Ie;m.options=we;m.className=$;m.defaultOptions=y;import{jsx as $t}from"react/jsx-runtime";import{jsx as Ft}from"react/jsx-runtime";import{jsx as qt}from"react/jsx-runtime";import{Fragment as no,jsx as ao,jsxs as so}from"react/jsx-runtime";import{jsx as mo}from"react/jsx-runtime";import{Fragment as Re,jsx as E,jsxs as $e}from"react/jsx-runtime";var Ke="k-card-body",D=o=>{let{title:e,subtitle:n,details:s,...d}=o;return $e("div",{...d,className:a(o.className,Ke),children:[e&&E(g,{children:e}),n&&E(T,{children:n}),E(Re,{children:o.children}),s&&E("span",{className:"k-card-header-actions",children:E(m,{className:"k-card-details",icon:"more-vertical",rounded:"medium",size:"medium",fillMode:"flat",themeColor:"base"})})]})};import{jsx as yo}from"react/jsx-runtime";import{jsx as _e}from"react/jsx-runtime";var P="k-actions",De=[],Pe={},J={alignment:"start",orientation:"horizontal"},M=o=>{let{alignment:e=J.alignment,orientation:n=J.orientation,...s}=o;return _e("div",{...s,className:a(P,{[`${P}-${e}`]:e,[`${P}-${n}`]:n},o.className),children:o.children})};M.states=De;M.options=Pe;M.className=P;M.defaultOptions=J;import{Fragment as Ho,jsx as Io,jsxs as wo}from"react/jsx-runtime";import{Fragment as Go,jsx as _o,jsxs as Fo}from"react/jsx-runtime";import{jsx as ne}from"react/jsx-runtime";var I="k-avatar";var Fe=[i.hover,i.focus,i.active,i.selected,i.disabled],Ge={size:[r.small,r.medium,r.large],rounded:[f.small,f.medium,f.large,f.full],fillMode:[h.solid,h.flat,h.outline],themeColor:[t.base,t.primary,t.secondary,t.tertiary,t.success,t.warning,t.error,t.info,t.light,t.dark,t.inverse]},N={type:"text",size:r.medium,rounded:f.full,fillMode:h.solid,themeColor:t.primary,border:!1},S=o=>{let{size:e=N.size,rounded:n=N.rounded,fillMode:s=N.fillMode,themeColor:d=N.themeColor,type:c=N.type,border:l=N.border,...u}=o;return ne("div",{...u,className:a(o.className,I,x(I,{size:e,rounded:n,fillMode:s,themeColor:d}),{[`${I}-bordered`]:l}),children:ne("span",{className:`${I}-${c}`,children:o.children})})};S.states=Fe;S.options=Ge;S.className=I;S.defaultOptions=N;import{jsx as ir}from"react/jsx-runtime";import{jsx as ur}from"react/jsx-runtime";import{jsx as xr}from"react/jsx-runtime";import{jsx as C,jsxs as Y}from"react/jsx-runtime";var Ve="k-orgchart-node",le={buttonIcon:"plus",details:!0},Tr=o=>{let{title:e,subtitle:n,details:s=le.details,color:d,lineBottom:c,lineTop:l,button:u,buttonIcon:p=le.buttonIcon,avatar:b,avatarType:w,..._}=o;return Y("div",{..._,className:a(o.className,Ve,"k-vstack","k-align-items-center"),children:[l&&C("div",{className:"k-orgchart-line k-orgchart-line-v"}),C(v,{className:"k-orgchart-card",children:Y(D,{className:"k-hstack",details:s,style:{borderTopColor:d},children:[C(S,{type:w,themeColor:"secondary",children:w==="image"?C("img",{src:b}):b}),Y("div",{className:"k-card-title-wrap k-vstack",children:[C(g,{className:"k-text-ellipsis",children:e}),C("span",{className:"k-spacer"}),C(T,{className:"k-text-ellipsis",children:n})]}),C("span",{className:"k-spacer"})]})}),c&&C("div",{className:"k-orgchart-line k-orgchart-line-v"}),u&&C(m,{className:"k-orgchart-button",icon:p})]})};export{Ve as ORGCHARTNODE_CLASSNAME,Tr as OrgchartNode};