UNPKG

@progress/kendo-themes-html

Version:

A collection of HTML helpers used for developing Kendo UI themes

2 lines (1 loc) 13 kB
var l=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?l(...e):typeof e=="object"?Object.keys(e).map((n,i)=>e[i]||e[n]&&n||null).filter(n=>n!==null).join(" "):e).filter(e=>!!e).join(" ");var g=(t,e)=>l({[`${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"}),A=(t,e)=>l({"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 s={xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},b={small:"small",medium:"medium",large:"large",full:"full"},x={solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},o={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"};import{Fragment as Ke,jsx as pe}from"react/jsx-runtime";var j="k-icon k-font-icon",Te=[],Oe={size:[s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},Ee={},U=t=>{let{size:e,themeColor:n,icon:i,rotate:m,flip:a,...r}=t;return i?pe("span",{...r,className:l(t.className,j,g(j,{size:e}),{[`k-i-${i}`]:i,[`k-color-${n}`]:n,[`k-rotate-${m}`]:m,"k-flip-h":a==="h"||a==="both","k-flip-v":a==="v"||a==="both"})}):pe(Ke,{})};U.states=Te;U.options=Oe;U.className=j;U.defaultOptions=Ee;var fe=U;import{Fragment as He,jsx as W}from"react/jsx-runtime";var ee="k-icon k-svg-icon",Re=[],$e={size:[s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},xe={viewBox:"0 0 24 24"},F=t=>{let{size:e,themeColor:n,rotate:i,flip:m,viewBox:a=xe.viewBox,icon:r,...u}=t;if(!r)return W(He,{});r==="none"&&{...u,className:l(t.className,ee,"k-none")};let p=typeof r=="object"&&r.name&&r.name;return W("span",{...u,className:l(t.className,ee,g("k-icon",{size:e}),{[`k-svg-i-${p}`]:p,[`k-color-${n}`]:n,[`k-rotate-${i}`]:i,"k-flip-h":m==="h"||m==="both","k-flip-v":m==="v"||m==="both"}),children:W("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof r=="object"?r.viewBox:a,dangerouslySetInnerHTML:typeof r=="object"?{__html:r.content}:void 0,children:r?void 0:t.children})})};F.states=Re;F.options=$e;F.className=ee;F.defaultOptions=xe;var te=F;import*as he from"@progress/kendo-svg-icons";import{Fragment as Me,jsx as J}from"react/jsx-runtime";var _e=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),Ue=[],Fe={size:[s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},oe={viewBox:"0 0 24 24",type:"svg"},h=t=>{let{size:e,themeColor:n,icon:i,type:m=oe.type,rotate:a,flip:r,viewBox:u=oe.viewBox,...p}=t;if(!i)return J(Me,{});if(m==="svg"){if(i==="none")return J(te,{...p,icon:i,size:e});let M=_e(`${i}-icon`);return he[M]?J(te,{...p,icon:he[M],size:e,themeColor:n,rotate:a,flip:r,viewBox:u}):J(Me,{})}return J(fe,{...p,icon:i,size:e,themeColor:n,rotate:a,flip:r})};h.states=Ue;h.options=Fe;h.defaultOptions=oe;import{Fragment as Xe,jsx as V,jsxs as be}from"react/jsx-runtime";var D="k-button",Je=[c.hover,c.focus,c.active,c.selected,c.disabled],Ve={size:[s.small,s.medium,s.large],rounded:[b.small,b.medium,b.large,b.full],fillMode:[x.solid,x.flat,x.outline,x.clear,x.link],themeColor:[o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark,o.inverse]},z={size:s.medium,rounded:b.medium,fillMode:x.solid,themeColor:o.base,showArrow:!1,arrowIconName:"caret-alt-down"},d=t=>{let{size:e=z.size,rounded:n=z.rounded,fillMode:i=z.fillMode,themeColor:m=z.themeColor,showArrow:a=z.showArrow,arrowIconName:r=z.arrowIconName,hover:u,focus:p,active:M,selected:f,disabled:S,icon:N,text:k,iconClassName:y,...C}=t,O=N!==void 0,L=t.children!==void 0;return be("button",{...C,className:l(t.className,D,g(D,{size:e,rounded:n,fillMode:i,themeColor:m}),A(D,{hover:u,focus:p,active:M,disabled:S,selected:f}),{"k-icon-button":!k&&!L&&O}),children:[N&&V(h,{className:l(y,"k-button-icon"),icon:N}),k?be(Xe,{children:[k&&V("span",{className:"k-button-text",children:k}),t.children]}):t.children&&V("span",{className:"k-button-text",children:t.children}),a&&V("span",{className:"k-menu-button-arrow k-button-arrow",children:V(h,{icon:r})})]})};d.states=Je;d.options=Ve;d.className=D;d.defaultOptions=z;import{jsx as Gt}from"react/jsx-runtime";import{jsx as Qt}from"react/jsx-runtime";import{jsx as eo}from"react/jsx-runtime";import{jsx as Ie}from"react/jsx-runtime";var Ne="k-animation-container",Ge=[],We={},ke={positionMode:"absolute"},K=t=>{let{positionMode:e=ke.positionMode,animationStyle:n,offset:i,...m}=t;return Ie("div",{...m,style:{...i,...t.style},className:l(t.className,Ne,"k-animation-container-shown",{"k-animation-container-fixed":e==="fixed"}),children:Ie("div",{className:"k-child-animation-container",style:n,children:t.children})})};K.states=Ge;K.options=We;K.className=Ne;K.defaultOptions=ke;import{jsx as Se}from"react/jsx-runtime";var ge="k-popup",De=[],qe={},ye={positionMode:"absolute"},B=t=>{let{offset:e,positionMode:n=ye.positionMode,animationStyle:i,...m}=t;return Se(K,{positionMode:n,offset:e,animationStyle:i,children:Se("div",{...m,className:l(t.className,ge),children:t.children})})};B.states=De;B.options=qe;B.className=ge;B.defaultOptions=ye;import{Fragment as Ze,jsx as ne,jsxs as ve}from"react/jsx-runtime";var se="k-split-button",Qe=[c.hover,c.focus,c.active,c.selected,c.disabled],Ye={size:[s.small,s.medium,s.large],rounded:[b.small,b.medium,b.large,b.full],fillMode:[x.solid,x.flat,x.outline,x.clear,x.link],themeColor:[o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark,o.inverse]},R={size:s.medium,rounded:b.medium,fillMode:x.solid,themeColor:o.base,arrowIconName:"caret-alt-down"},$=t=>{let{size:e=R.size,rounded:n=R.rounded,fillMode:i=R.fillMode,themeColor:m=R.themeColor,hover:a,focus:r,active:u,selected:p,disabled:M,icon:f,text:S,arrowIconName:N=R.arrowIconName,popup:k,opened:y,...C}=t;return ve(Ze,{children:[ve("div",{...C,className:l(t.className,se,"k-button-group",g(se,{rounded:n})),children:[ne(d,{text:S,icon:f,size:e,rounded:n,fillMode:i,themeColor:m,hover:a,focus:r,active:u,selected:p,disabled:M,children:t.children}),ne(d,{className:"k-split-button-arrow",icon:N,size:e,rounded:n,fillMode:i,disabled:M})]}),y&&k&&ne(B,{className:"k-menu-popup",children:k})]})};$.states=Qe;$.options=Ye;$.className=se;$.defaultOptions=R;import{Fragment as tt,jsx as H,jsxs as we}from"react/jsx-runtime";var re="k-menu-item",je=[c.hover,c.focus,c.active,c.selected,c.disabled],et={},Le={iconPosition:"before"},v=t=>{let{hover:e,focus:n,active:i,selected:m,disabled:a,icon:r,text:u,first:p,last:M,showArrow:f,arrowIconName:S,iconPosition:N=Le.iconPosition,dir:k,children:y,...C}=t,O=H(tt,{});y&&y.forEach(E=>{if(E.type==="MenuItemContent"){O.props.children.push(E);return}});let L=S;return L||(L=k==="rtl"?"caret-alt-left":"caret-alt-right"),we("li",{...C,className:l(t.className,re,"k-item",A(re,{focus:n,disabled:a,hover:e,active:i,selected:m}),{"k-first":p,"k-last":M}),children:[we("span",{className:l("k-link k-menu-link"),children:[r&&N==="before"&&H(h,{className:"k-menu-link-icon",icon:r}),H("span",{className:"k-menu-link-text",children:u}),r&&N==="after"&&H(h,{className:"k-menu-link-icon",icon:r}),f&&H("span",{className:"k-menu-expand-arrow",children:H(h,{icon:L})})]}),O]})};v.states=je;v.options=et;v.className=re;v.defaultOptions=Le;import{Fragment as st,jsx as _,jsxs as Ce}from"react/jsx-runtime";var ie="k-menu-item",ot=[c.hover,c.focus,c.active,c.selected,c.disabled],nt={},le={dir:"ltr",iconPosition:"before"},I=t=>{let{hover:e,focus:n,active:i,selected:m,disabled:a,icon:r,text:u,first:p,last:M,showArrow:f,arrowIconName:S,iconPosition:N=le.iconPosition,dir:k=le.dir,children:y,popup:C,...O}=t,L=_(st,{});y&&y.forEach(Z=>{if(Z.type==="MenuListItemContent"){L.props.children.push(Z);return}});let E=S;return E||(E=k==="rtl"?"caret-alt-left":"caret-alt-right"),Ce("li",{...O,className:l(t.className,ie,"k-item",A(ie,{focus:n,disabled:a}),{"k-first":p,"k-last":M}),children:[Ce("span",{className:l("k-link k-menu-link",A("k-menu-link",{hover:e,active:i,selected:m,disabled:a})),children:[r&&N==="before"&&_(h,{className:"k-menu-link-icon",icon:r}),_("span",{className:"k-menu-link-text",children:u}),r&&N==="after"&&_(h,{className:"k-menu-link-icon",icon:r}),f&&_("span",{className:"k-menu-expand-arrow",children:_(h,{icon:E})})]}),L,C]})};I.states=ot;I.options=nt;I.className=ie;I.defaultOptions=le;import{jsx as at}from"react/jsx-runtime";var Ae="k-menu-scroll-wrapper",rt=[],it={},lt={},X=t=>{let{className:e,children:n,orientation:i,...m}=t;return at("div",{...m,className:l(e,Ae,{"k-menu-scroll-wrapper-vertical":i==="vertical"}),children:n})};X.states=rt;X.options=it;X.className=Ae;X.defaultOptions=lt;var ze=X;import{Fragment as ae,jsx as P,jsxs as q}from"react/jsx-runtime";var me="k-menu",mt=[],ct={},Q={orientation:"horizontal",header:!0,scrollButtonsPosition:"around"},w=t=>{let{children:e,orientation:n=Q.orientation,header:i=Q.header,scrollable:m,scrollButtonsPosition:a=Q.scrollButtonsPosition,wrapperStyles:r,dir:u,popup:p,...M}=t,f={horizontal:{prev:u!=="rtl"?"left":"right",next:u!=="rtl"?"right":"left"},vertical:{prev:"up",next:"down"}},S=P("ul",{dir:u,...M,className:l(t.className,"k-reset",me,{[`${me}-${n}`]:n,"k-header":i}),children:e});return q(ae,{children:[m?q(ze,{orientation:n,style:r,dir:t.dir,children:[a==="start"&&q(ae,{children:[P(d,{fillMode:"flat",rounded:null,size:"medium",icon:`caret-alt-${f[n].prev}`,className:"k-menu-scroll-button k-menu-scroll-button-prev"}),P(d,{fillMode:"flat",rounded:null,size:"medium",icon:`caret-alt-${f[n].next}`,className:"k-menu-scroll-button k-menu-scroll-button-next"})]}),a==="around"&&P(d,{fillMode:"flat",rounded:null,size:"medium",icon:`caret-alt-${f[n].prev}`,className:"k-menu-scroll-button k-menu-scroll-button-prev"}),S,a==="end"&&q(ae,{children:[P(d,{fillMode:"flat",rounded:null,size:"medium",icon:`caret-alt-${f[n].prev}`,className:"k-menu-scroll-button k-menu-scroll-button-prev"}),P(d,{fillMode:"flat",rounded:null,size:"medium",icon:`caret-alt-${f[n].next}`,className:"k-menu-scroll-button k-menu-scroll-button-next"})]}),a==="around"&&P(d,{fillMode:"flat",rounded:null,size:"medium",icon:`caret-alt-${f[n].next}`,className:"k-menu-scroll-button k-menu-scroll-button-next"})]}):S,p]})};w.states=mt;w.options=ct;w.className=me;w.defaultOptions=Q;import{jsx as ut}from"react/jsx-runtime";var ce="k-separator",Be={orientation:"horizontal"},G=t=>{let{orientation:e=Be.orientation,...n}=t;return ut("li",{...n,className:l(t.className,"k-item",ce,{[`${ce}-${e}`]:e})})};G.className=ce;G.defaultOptions=Be;import{Fragment as Xo,jsx as Go}from"react/jsx-runtime";import{jsx as Pe}from"react/jsx-runtime";import{createElement as ft}from"react";var ue="k-menu-group",dt=[],pt={size:[s.small,s.medium,s.large]},de={size:s.medium,dir:"ltr"},T=t=>{let{children:e,size:n=de.size,dir:i=de.dir,...m}=t,a=[];return e&&Array.isArray(e)&&e.map((r,u)=>{r.type===I?a.push(ft(I,{...r.props,dir:i,key:u})):r.type===G?a.push(Pe(G,{})):a.push(r)}),Pe("ul",{...m,className:l(t.className,ue,g(ue,{size:n})),children:a})};T.states=dt;T.options=pt;T.className=ue;T.defaultOptions=de;import{Fragment as on,jsx as tn,jsxs as nn}from"react/jsx-runtime";import{Fragment as un,jsx as mn,jsxs as cn}from"react/jsx-runtime";import{Fragment as hn,jsx as xn,jsxs as Mn}from"react/jsx-runtime";import{Fragment as Sn,jsx as kn,jsxs as gn}from"react/jsx-runtime";import{Fragment as Cn,jsx as Ln,jsxs as An}from"react/jsx-runtime";import{jsx as Y,jsxs as xt}from"react/jsx-runtime";var Gn=t=>Y($,{children:"button",opened:!0,popup:xt(T,{children:[Y(I,{first:!0,text:"Menu Item"}),Y(I,{text:"Menu Item"}),Y(I,{last:!0,text:"Menu Item"})]}),...t});export{Gn as SplitButtonPopup};