UNPKG

@progress/kendo-themes-html

Version:

A collection of HTML helpers used for developing Kendo UI themes

2 lines (1 loc) 8.56 kB
var i=(...o)=>o.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?i(...e):typeof e=="object"?Object.keys(e).map((r,n)=>e[n]||e[r]&&r||null).filter(r=>r!==null).join(" "):e).filter(e=>!!e).join(" ");var y=(o,e)=>i({[`${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"}),j=(o,e)=>{let{valid:r,invalid:n,hover:l,focus:m,checked:a,active:u,selected:d,disabled:v,indeterminate:D,loading:U,empty:H,readonly:T,highlighted:b,...C}=e;return i({"k-valid":r,"k-invalid":n,"k-hover":l,"k-focus":m,"k-checked":a,"k-active":u,"k-selected":d,"k-disabled":v,"k-indeterminate":D&&!a,"k-loading":U,"k-empty":H,"k-readonly":T,"k-highlighted":b},Object.keys(C).reduce((_,M)=>(M.startsWith("k-")?_[M]=C[M]:_[`k-${M}`]=C[M],_),{}))};function ee(o,e){if(!e)return{};let r=Array.isArray(e)?e:[e];return Object.fromEntries(r.map(n=>[`k-${n}`,!0]))}var s={xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},E={small:"small",medium:"medium",large:"large",full:"full"},O={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"},g={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"},oe={calloutMap:{top:"n",bottom:"s",left:"w",right:"e"},orientationMap:{vertical:"vstack",horizontal:"hstack"}};var $="popup",te=$;import{jsx as ne}from"react/jsx-runtime";var re="k-animation-container",be=[],ye={},se={positionMode:"absolute"},f=o=>{let{positionMode:e=se.positionMode,animationStyle:r,offset:n,...l}=o;return ne("div",{...l,style:{...n,...o.style},className:i(o.className,re,"k-animation-container-shown",{"k-animation-container-fixed":e==="fixed"}),children:ne("div",{className:"k-child-animation-container",style:r,children:o.children})})};f.states=be;f.options=ye;f.className=re;f.defaultOptions=se;f.moduleName=$;f.folderName=te;var F="popup",ie=F;import{jsx as ae}from"react/jsx-runtime";var le="k-popup",Ee=[],Te={},me={positionMode:"absolute"},N=o=>{let{offset:e,positionMode:r=me.positionMode,animationStyle:n,...l}=o;return ae(f,{positionMode:r,offset:e,animationStyle:n,children:ae("div",{...l,className:i(o.className,le),children:o.children})})};N.states=Ee;N.options=Te;N.className=le;N.defaultOptions=me;N.moduleName=F;N.folderName=ie;var V="popover",ce=V;import{Fragment as Pe,jsx as B,jsxs as de}from"react/jsx-runtime";var pe="k-popover",Ce=[],_e={},ke={},x=o=>{let{callout:e,title:r,body:n,...l}=o;return de(N,{...l,className:i(o.className,pe),children:[e&&B("div",{className:i("k-popover-callout",{[`k-callout-${oe.calloutMap[e]||e}`]:e})}),de("div",{className:"k-popover-inner",children:[r&&B("div",{className:"k-popover-header",children:r}),n&&B("div",{className:"k-popover-body",children:n}),B(Pe,{children:o.children})]})]})};x.states=Ce;x.options=_e;x.className=pe;x.defaultOptions=ke;x.moduleName=V;x.folderName=ce;var G="action-buttons",ue=G;import{jsx as Ie}from"react/jsx-runtime";var R="k-actions",Le=[],Se={},q={alignment:"start",orientation:"horizontal"},h=o=>{let{alignment:e=q.alignment,orientation:r=q.orientation,...n}=o;return Ie("div",{...n,className:i(R,{[`${R}-${e}`]:e,[`${R}-${r}`]:r},o.className),children:o.children})};h.states=Le;h.options=Se;h.className=R;h.defaultOptions=q;h.moduleName=G;h.folderName=ue;import{Fragment as ze,jsx as fe}from"react/jsx-runtime";var J="k-font-icon",Be=[],Re={size:[s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[t.base,t.primary,t.secondary,t.tertiary,t.success,t.warning,t.error,t.info,t.light,t.dark]},we={},k=o=>{let{size:e,themeColor:r,icon:n,rotate:l,flip:m,...a}=o;return n?fe("span",{...a,className:i(o.className,J,y(J,{size:e}),{[`k-i-${n}`]:n,[`k-color-${r}`]:r,[`k-rotate-${l}`]:l,"k-flip-h":m==="h"||m==="both","k-flip-v":m==="v"||m==="both"})}):fe(ze,{})};k.states=Be;k.options=Re;k.className=J;k.defaultOptions=we;var Ne=k;import{Fragment as Ue,jsx as w}from"react/jsx-runtime";var X="k-svg-icon",Ke=[],De={size:[s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[t.base,t.primary,t.secondary,t.tertiary,t.success,t.warning,t.error,t.info,t.light,t.dark]},xe={viewBox:"0 0 24 24"},P=o=>{let{size:e,themeColor:r,rotate:n,flip:l,viewBox:m=xe.viewBox,icon:a,...u}=o;if(!a)return w(Ue,{});a==="none"&&{...u,className:i(o.className,X,"k-none")};let d=typeof a=="object"&&a.name&&a.name;return w("span",{...u,className:i(o.className,X,y("k-icon",{size:e}),{[`k-svg-i-${d}`]:d,[`k-color-${r}`]:r,[`k-rotate-${n}`]:n,"k-flip-h":l==="h"||l==="both","k-flip-v":l==="v"||l==="both"}),children:w("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof a=="object"?a.viewBox:m,dangerouslySetInnerHTML:typeof a=="object"?{__html:a.content}:void 0,children:a?void 0:o.children})})};P.states=Ke;P.options=De;P.className=X;P.defaultOptions=xe;var W=P;import*as Q from"@progress/kendo-svg-icons";var he="icon",Me="icons";import{Fragment as Oe,jsx as L}from"react/jsx-runtime";var z="k-icon",He=o=>o.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),$e=[],Fe={size:[s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[t.base,t.primary,t.secondary,t.tertiary,t.success,t.warning,t.error,t.info,t.light,t.dark]},Y={viewBox:"0 0 24 24",type:"svg"},p=o=>{let{size:e,themeColor:r,icon:n,type:l=Y.type,rotate:m,flip:a,viewBox:u=Y.viewBox,...d}=o;if(!n)return L(Oe,{});if(l==="svg"){if(n==="none")return L(W,{...d,className:i(o.className,z),icon:n,size:e});let v=Q[n]?n:He(`${n}-icon`);return Q[v]?L(W,{...d,className:i(o.className,z),icon:Q[v],size:e,themeColor:r,rotate:m,flip:a,viewBox:u}):L(Oe,{})}return L(Ne,{...d,className:i(o.className,z),icon:n,size:e,themeColor:r,rotate:m,flip:a})};p.states=$e;p.options=Fe;p.defaultOptions=Y;p.className=z;p.moduleName=he;p.folderName=Me;var Z="button",ge=Z;import{Fragment as Je,jsx as S,jsxs as Ae}from"react/jsx-runtime";var I="k-button",Ve=["icon-button"],Ge=[g.hover,g.focus,g.active,g.selected,g.disabled,g.generating],qe={size:[s.small,s.medium,s.large],rounded:[E.small,E.medium,E.large,E.full],fillMode:[O.solid,O.flat,O.outline,O.clear,O.link],themeColor:[t.base,t.primary,t.secondary,t.tertiary,t.success,t.warning,t.error,t.info,t.light,t.dark,t.inverse]},A={size:s.medium,rounded:E.medium,fillMode:O.solid,themeColor:t.base,showArrow:!1,arrowIconName:"caret-alt-down"},c=o=>{let{size:e=A.size,rounded:r=A.rounded,fillMode:n=A.fillMode,themeColor:l=A.themeColor,showArrow:m=A.showArrow,arrowIconName:a=A.arrowIconName,variant:u,hover:d,focus:v,active:D,selected:U,disabled:H,icon:T,text:b,iconClassName:C,..._}=o,M=T!==void 0,ve=o.children!==void 0;return Ae("button",{..._,className:i(o.className,I,ee(I,u),y(I,{size:e,rounded:r,fillMode:n,themeColor:l}),j(I,{hover:d,focus:v,active:D,disabled:H,selected:U}),{"k-icon-button":!b&&!ve&&M}),children:[T&&S(p,{className:i(C,"k-button-icon"),icon:T}),b?Ae(Je,{children:[b&&S("span",{className:"k-button-text",children:b}),o.children]}):o.children&&S("span",{className:"k-button-text",children:o.children}),m&&S("span",{className:"k-menu-button-arrow k-button-arrow",children:S(p,{icon:a})})]})};c.states=Ge;c.options=qe;c.variants=Ve;c.className=I;c.defaultOptions=A;c.moduleName=Z;c.folderName=ge;import{jsx as at}from"react/jsx-runtime";import{jsx as dt}from"react/jsx-runtime";import{jsx as Nt}from"react/jsx-runtime";import{Fragment as Xe,jsx as K,jsxs as We}from"react/jsx-runtime";var Et=o=>K(x,{title:"Title",body:K(Xe,{children:"Body content"}),children:We(h,{className:"k-popover-actions",alignment:"stretched",children:[K(c,{fillMode:"flat",children:"Action"}),K(c,{fillMode:"flat",themeColor:"primary",children:"Primary"})]}),...o});export{Et as PopoverNormal};