UNPKG

@progress/kendo-themes-html

Version:

A collection of HTML helpers used for developing Kendo UI themes

2 lines (1 loc) 11.6 kB
var a=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?a(...e):typeof e=="object"?Object.keys(e).map((r,i)=>e[i]||e[r]&&r||null).filter(r=>r!==null).join(" "):e).filter(e=>!!e).join(" ");var N=(t,e)=>a({[`${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"}),G=(t,e)=>{let{valid:r,invalid:i,hover:s,focus:d,checked:u,active:l,selected:M,disabled:v,indeterminate:x,loading:U,empty:S,readonly:D,highlighted:q,...T}=e;return a({"k-valid":r,"k-invalid":i,"k-hover":s,"k-focus":d,"k-checked":u,"k-active":l,"k-selected":M,"k-disabled":v,"k-indeterminate":x&&!u,"k-loading":U,"k-empty":S,"k-readonly":D,"k-highlighted":q},Object.keys(T).reduce((p,O)=>(O.startsWith("k-")?p[O]=T[O]:p[`k-${O}`]=T[O],p),{}))};function oe(t,e){if(!e)return{};let r=Array.isArray(e)?e:[e];return Object.fromEntries(r.map(i=>[`k-${i}`,!0]))}var n={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},C={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"},m={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},h={undefined:void 0,outline:"outline",solid:"solid",duotone:"duotone"},o={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",inverse:"inverse"},y={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"};import{Fragment as Ce,jsx as ne}from"react/jsx-runtime";var J="k-font-icon",Me=[],Se={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info]},Oe={},w=t=>{let{size:e,themeColor:r,icon:i,rotate:s,flip:d,...u}=t;return i?ne("span",{...u,className:a(t.className,J,N(J,{size:e}),{[`k-i-${i}`]:i,[`k-color-${r}`]:r,[`k-rotate-${s}`]:s,"k-flip-h":d==="h"||d==="both","k-flip-v":d==="v"||d==="both"}),"aria-hidden":"true"}):ne(Ce,{})};w.states=Me;w.options=Se;w.className=J;w.defaultOptions=Oe;var re=w;import{Fragment as Be,jsx as $}from"react/jsx-runtime";var W="k-svg-icon",Te=[],Ae={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info],variant:[h.outline,h.solid,h.duotone]},X={viewBox:"0 0 24 24",variant:h.outline},L=t=>{let{size:e,themeColor:r,rotate:i,flip:s,viewBox:d=X.viewBox,variant:u=X.variant,icon:l,...M}=t;if(!l)return $(Be,{});if(l==="none")return $("span",{...M,className:a(t.className,W,N("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let v=typeof l=="object"&&l.name&&l.name,x=typeof l=="object"?u&&l.variants?.[u]||l.variants?.outline||l.content:void 0;return $("span",{...M,className:a(t.className,W,N("k-icon",{size:e}),{[`k-svg-i-${v}`]:v,[`k-color-${r}`]:r,[`k-rotate-${i}`]:i,"k-flip-h":s==="h"||s==="both","k-flip-v":s==="v"||s==="both"}),"aria-hidden":"true",children:$("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof l=="object"?l.viewBox:d,dangerouslySetInnerHTML:x!==void 0?{__html:x}:void 0,children:l?void 0:t.children})})};L.states=Te;L.options=Ae;L.className=W;L.defaultOptions=X;var Q=L;import*as Y from"@progress/kendo-svg-icons";var ae="icon",se="icons";import{useContext as Ee}from"react";import{createContext as ze}from"react";var ie=ze({iconsType:"svg"});import{Fragment as le,jsx as I}from"react/jsx-runtime";var F="k-icon",_e=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),we=[],Le={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info],variant:[h.outline,h.solid,h.duotone]},V={viewBox:"0 0 24 24",type:"svg",variant:h.outline},f=t=>{let{iconsType:e}=Ee(ie),{size:r,themeColor:i,icon:s,type:d=e||V.type,rotate:u,flip:l,viewBox:M=V.viewBox,variant:v=V.variant,...x}=t;if(!s)return I(le,{});if((e||d)==="svg"){if(s==="none")return I(Q,{...x,className:a(t.className,F),icon:s,size:r,variant:v});let S=Y[s]?s:_e(`${s}-icon`);return Y[S]?I(Q,{...x,className:a(t.className,F),icon:Y[S],size:r,themeColor:i,rotate:u,flip:l,viewBox:M,variant:v}):I(le,{})}return I(re,{...x,className:a(t.className,F),icon:s,size:r,themeColor:i,rotate:u,flip:l})};f.states=we;f.options=Le;f.defaultOptions=V;f.className=F;f.moduleName=ae;f.folderName=se;f.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 j="button",ce=j;import{Fragment as de,jsx as A,jsxs as ue}from"react/jsx-runtime";var R="k-button",Ie=["icon-button"],Re=[y.hover,y.focus,y.active,y.selected,y.disabled,y.generating],Pe={size:[n.undefined,n.xsmall,n.small,n.medium,n.large],rounded:[C.undefined,C.none,C.small,C.medium,C.large,C.full],fillMode:[m.undefined,m.solid,m.flat,m.outline,m.clear,m.link],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.inverse]},ee={showArrow:!1,arrowIconName:"chevron-down"},c=t=>{let{as:e="button",size:r,rounded:i,fillMode:s,themeColor:d,showArrow:u=ee.showArrow,arrowIconName:l=ee.arrowIconName,variant:M,hover:v,focus:x,active:U,selected:S,disabled:D,togglable:q,ariaDisabled:T,icon:p,iconSize:O,text:H,iconClassName:ge,className:ve,...Ne}=t,ye=p!=null,ke=t.children!==void 0;return ue(e,{className:a(ve,R,oe(R,M),N(R,{size:r,rounded:i,fillMode:s,themeColor:d}),G(R,{hover:v,focus:x,active:U,disabled:D||T,selected:S}),{"k-icon-button":!H&&!ke&&ye}),"aria-pressed":q?S?"true":"false":void 0,...Ne,"aria-disabled":T?"true":void 0,disabled:D||void 0,children:[typeof p=="string"&&p&&A(f,{className:a(ge,"k-button-icon"),icon:p,size:O}),p&&typeof p!="string"&&A(de,{children:p}),H?ue(de,{children:[H&&A("span",{className:"k-button-text",children:H}),t.children]}):t.children&&A("span",{className:"k-button-text",children:t.children}),u&&A("span",{className:"k-menu-button-arrow k-button-arrow",children:A(f,{icon:l})})]})};c.states=Re;c.options=Pe;c.variants=Ie;c.className=R;c.defaultOptions=ee;c.moduleName=j;c.folderName=ce;c.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 Z,jsxs as He}from"react/jsx-runtime";var me="k-navigator",Ke=[],Ue={},De={},B=t=>{let{...e}=t;return He("div",{...e,className:a(t.className,me),children:[Z(c,{className:"k-navigator-n",icon:"chevron-up",fillMode:"flat",rounded:"full",size:null,"aria-label":"Pan north"}),Z(c,{className:"k-navigator-e",icon:"chevron-right",fillMode:"flat",rounded:"full",size:null,"aria-label":"Pan east"}),Z(c,{className:"k-navigator-s",icon:"chevron-down",fillMode:"flat",rounded:"full",size:null,"aria-label":"Pan south"}),Z(c,{className:"k-navigator-w",icon:"chevron-left",fillMode:"flat",rounded:"full",size:null,"aria-label":"Pan west"})]})};B.states=Ke;B.options=Ue;B.className=me;B.defaultOptions=De;var te="button",pe=te;import{jsx as Ve}from"react/jsx-runtime";var P="k-button-group",Ge=[y.disabled],$e={fillMode:[m.undefined,m.solid,m.flat,m.outline,m.clear,m.link]},Fe={},k=t=>{let{fillMode:e,disabled:r,stretched:i,...s}=t;return Ve("div",{role:"group",...s,className:a(t.className,P,N(P,{fillMode:e}),G(P,{disabled:r}),{[`${P}-stretched`]:i}),...r&&{"aria-disabled":"true"},children:t.children})};k.states=Ge;k.options=$e;k.className=P;k.defaultOptions=Fe;k.moduleName=te;k.folderName=pe;k.ariaSpec={selector:".k-button-group",rules:[{selector:".k-button-group:not(.k-split-button)",attribute:"role=group",usage:"Sets the proper role for the group of buttons."},{selector:".k-button-group.k-disabled",attribute:"aria-disabled=true",usage:"The attribute is rendered only when the entire button group is disabled."},{selector:".k-button-group:not(.k-split-button):not(.k-scheduler-navigation):not(.k-zoom-control) .k-button",attribute:"aria-pressed (when selected)",usage:"Specifies the current state of the ButtonGroup. Only the selected button within the group will have this attribute set to true."}]};import{jsx as fe,jsxs as We}from"react/jsx-runtime";var be="k-zoom-control",Ze=[],qe={},Je={},z=t=>{let{...e}=t;return We(k,{...e,className:a(t.className,"k-group-horizontal",be),children:[fe(c,{icon:"plus",className:"k-zoom-in","aria-label":"Zoom in"}),fe(c,{icon:"minus",className:"k-zoom-out","aria-label":"Zoom out"})]})};z.states=Ze;z.options=qe;z.className=be;z.defaultOptions=Je;import{Fragment as tt,jsx as b,jsxs as K}from"react/jsx-runtime";var xe="k-map",Ye=[],je={},et=K(tt,{children:["\xA9 ",b("a",{href:"#",children:"Attribution"})]}),E={attribution:et,markerStyle:{zIndex:"1000",left:"500px",top:"300px"},scrollContainerStyle:{transformOrigin:"left top 0px"},horizontalScrollbarStyle:{transformOrigin:"left top 0px",width:"24px"},verticalScrollbarStyle:{transformOrigin:"left top 0px",height:"239px"}},g=t=>{let{attribution:e=E.attribution,markerStyle:r=E.markerStyle,scrollContainerStyle:i=E.scrollContainerStyle,horizontalScrollbarStyle:s=E.horizontalScrollbarStyle,verticalScrollbarStyle:d=E.verticalScrollbarStyle,children:u,...l}=t;return K("div",{...l,className:a(t.className,xe),children:[K("div",{className:"km-scroll-wrapper",style:{overflow:"hidden"},children:[b("div",{className:"km-scroll-header"}),K("div",{className:"km-scroll-container",style:i,children:[b("div",{className:"k-layer",style:{zIndex:"1000"},children:b(f,{className:"k-marker",icon:"map-marker-target",size:"xxlarge",style:r})}),b("div",{className:"k-layer",children:u})]}),b("div",{className:"km-touch-scrollbar km-horizontal-scrollbar",style:s}),b("div",{className:"km-touch-scrollbar km-vertical-scrollbar",style:d})]}),b("div",{className:"k-map-controls k-bottom-end",children:b("div",{className:"k-attribution",children:e})}),K("div",{className:"k-map-controls k-top-start",children:[b(B,{}),b(z,{})]})]})};g.states=Ye;g.options=je;g.className=xe;g.defaultOptions=E;g.moduleName="map";g.folderName="map";import{jsx as it}from"react/jsx-runtime";var ot={},nt=[],rt=[],at={},st=[],_=t=>it(he,{className:"k-bg-primary-subtle",markerStyle:{zIndex:"1000",left:"250px",top:"200px"},style:{position:"relative",width:"500px",height:"350px"},...t});_.options=ot;_.states=nt;_.variants=rt;_.defaultOptions=at;_.modifiers=st;_.className=g.className;import{jsx as lt}from"react/jsx-runtime";var he=t=>lt(g,{...t});export{he as MapNormal};