UNPKG

@progress/kendo-themes-html

Version:

A collection of HTML helpers used for developing Kendo UI themes

2 lines (1 loc) 10.3 kB
var ye=Object.create;var K=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var ke=Object.getOwnPropertyNames;var Ce=Object.getPrototypeOf,Te=Object.prototype.hasOwnProperty;var Be=(t,e)=>{for(var n in e)K(t,n,{get:e[n],enumerable:!0})},Q=(t,e,n,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of ke(e))!Te.call(t,i)&&i!==n&&K(t,i,{get:()=>e[i],enumerable:!(a=Ne(e,i))||a.enumerable});return t};var Oe=(t,e,n)=>(n=t!=null?ye(Ce(t)):{},Q(e||!t||!t.__esModule?K(n,"default",{value:t,enumerable:!0}):n,t)),Ie=t=>Q(K({},"__esModule",{value:!0}),t);var Ve={};Be(Ve,{ORGCHARTNODEGROUP_CLASSNAME:()=>pe,OrgchartNodeGroup:()=>fe});module.exports=Ie(Ve);var c=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?c(...e):typeof e=="object"?Object.keys(e).map((n,a)=>e[a]||e[n]&&n||null).filter(n=>n!==null).join(" "):e).filter(e=>!!e).join(" ");var B=(t,e)=>c({[`${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"}),$=(t,e)=>{let{valid:n,invalid:a,hover:i,focus:d,checked:u,active:s,selected:p,disabled:x,indeterminate:g,loading:C,empty:h,readonly:L,highlighted:D,...M}=e;return c({"k-valid":n,"k-invalid":a,"k-hover":i,"k-focus":d,"k-checked":u,"k-active":s,"k-selected":p,"k-disabled":x,"k-indeterminate":g&&!u,"k-loading":C,"k-empty":h,"k-readonly":L,"k-highlighted":D},Object.keys(M).reduce((f,T)=>(T.startsWith("k-")?f[T]=M[T]:f[`k-${T}`]=M[T],f),{}))};function X(t,e){if(!e)return{};let n=Array.isArray(e)?e:[e];return Object.fromEntries(n.map(a=>[`k-${a}`,!0]))}var r={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},O={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"},I={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},b={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"},N={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"},Y={calloutMap:{top:"n",bottom:"s",left:"w",right:"e"},orientationMap:{vertical:"vstack",horizontal:"hstack"}};var z=require("react/jsx-runtime"),G="k-font-icon",Se=[],Me={size:[r.undefined,r.xsmall,r.small,r.medium,r.large,r.xlarge,r.xxlarge,r.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info]},we={},A=t=>{let{size:e,themeColor:n,icon:a,rotate:i,flip:d,...u}=t;return a?(0,z.jsx)("span",{...u,className:c(t.className,G,B(G,{size:e}),{[`k-i-${a}`]:a,[`k-color-${n}`]:n,[`k-rotate-${i}`]:i,"k-flip-h":d==="h"||d==="both","k-flip-v":d==="v"||d==="both"}),"aria-hidden":"true"}):(0,z.jsx)(z.Fragment,{})};A.states=Se;A.options=Me;A.className=G;A.defaultOptions=we;var Z=A;var S=require("react/jsx-runtime"),U="k-svg-icon",ze=[],Ae={size:[r.undefined,r.xsmall,r.small,r.medium,r.large,r.xlarge,r.xxlarge,r.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info],variant:[b.outline,b.solid,b.duotone]},V={viewBox:"0 0 24 24",variant:b.outline},E=t=>{var C,h;let{size:e,themeColor:n,rotate:a,flip:i,viewBox:d=V.viewBox,variant:u=V.variant,icon:s,...p}=t;if(!s)return(0,S.jsx)(S.Fragment,{});if(s==="none")return(0,S.jsx)("span",{...p,className:c(t.className,U,B("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let x=typeof s=="object"&&s.name&&s.name,g=typeof s=="object"?u&&((C=s.variants)==null?void 0:C[u])||((h=s.variants)==null?void 0:h.outline)||s.content:void 0;return(0,S.jsx)("span",{...p,className:c(t.className,U,B("k-icon",{size:e}),{[`k-svg-i-${x}`]:x,[`k-color-${n}`]:n,[`k-rotate-${a}`]:a,"k-flip-h":i==="h"||i==="both","k-flip-v":i==="v"||i==="both"}),"aria-hidden":"true",children:(0,S.jsx)("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof s=="object"?s.viewBox:d,dangerouslySetInnerHTML:g!==void 0?{__html:g}:void 0,children:s?void 0:t.children})})};E.states=ze;E.options=Ae;E.className=U;E.defaultOptions=V;var q=E;var W=Oe(require("@progress/kendo-svg-icons"));var ee="icon",te="icons";var re=require("react");var oe=require("react"),ne=(0,oe.createContext)({iconsType:"svg"});var k=require("react/jsx-runtime"),H="k-icon",Ee=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),_e=[],Le={size:[r.undefined,r.xsmall,r.small,r.medium,r.large,r.xlarge,r.xxlarge,r.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info],variant:[b.outline,b.solid,b.duotone]},P={viewBox:"0 0 24 24",type:"svg",variant:b.outline},v=t=>{let{iconsType:e}=(0,re.useContext)(ne),{size:n,themeColor:a,icon:i,type:d=e||P.type,rotate:u,flip:s,viewBox:p=P.viewBox,variant:x=P.variant,...g}=t;if(!i)return(0,k.jsx)(k.Fragment,{});if((e||d)==="svg"){if(i==="none")return(0,k.jsx)(q,{...g,className:c(t.className,H),icon:i,size:n,variant:x});let h=W[i]?i:Ee(`${i}-icon`);return W[h]?(0,k.jsx)(q,{...g,className:c(t.className,H),icon:W[h],size:n,themeColor:a,rotate:u,flip:s,viewBox:p,variant:x}):(0,k.jsx)(k.Fragment,{})}return(0,k.jsx)(Z,{...g,className:c(t.className,H),icon:i,size:n,themeColor:a,rotate:u,flip:s})};v.states=_e;v.options=Le;v.defaultOptions=P;v.className=H;v.moduleName=ee;v.folderName=te;v.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",ie=j;var m=require("react/jsx-runtime"),_="k-button",Re=["icon-button"],Ke=[N.hover,N.focus,N.active,N.selected,N.disabled,N.generating],$e={size:[r.undefined,r.xsmall,r.small,r.medium,r.large],rounded:[O.undefined,O.none,O.small,O.medium,O.large,O.full],fillMode:[I.undefined,I.solid,I.flat,I.outline,I.clear,I.link],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.inverse]},J={showArrow:!1,arrowIconName:"chevron-down"},l=t=>{let{as:e="button",size:n,rounded:a,fillMode:i,themeColor:d,showArrow:u=J.showArrow,arrowIconName:s=J.arrowIconName,variant:p,hover:x,focus:g,active:C,selected:h,disabled:L,togglable:D,ariaDisabled:M,icon:f,iconSize:T,text:R,iconClassName:xe,className:ge,...he}=t,be=f!=null,ve=t.children!==void 0;return(0,m.jsxs)(e,{className:c(ge,_,X(_,p),B(_,{size:n,rounded:a,fillMode:i,themeColor:d}),$(_,{hover:x,focus:g,active:C,disabled:L||M,selected:h}),{"k-icon-button":!R&&!ve&&be}),"aria-pressed":D?h?"true":"false":void 0,...he,"aria-disabled":M?"true":void 0,disabled:L||void 0,children:[typeof f=="string"&&f&&(0,m.jsx)(v,{className:c(xe,"k-button-icon"),icon:f,size:T}),f&&typeof f!="string"&&(0,m.jsx)(m.Fragment,{children:f}),R?(0,m.jsxs)(m.Fragment,{children:[R&&(0,m.jsx)("span",{className:"k-button-text",children:R}),t.children]}):t.children&&(0,m.jsx)("span",{className:"k-button-text",children:t.children}),u&&(0,m.jsx)("span",{className:"k-menu-button-arrow k-button-arrow",children:(0,m.jsx)(v,{icon:s})})]})};l.states=Ke;l.options=$e;l.variants=Re;l.className=_;l.defaultOptions=J;l.moduleName=j;l.folderName=ie;l.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."}]};var se=require("react/jsx-runtime"),ae=t=>(0,se.jsx)(l,{icon:"folder",...t,"aria-label":t["aria-label"]||"Folder",children:void 0});var ce=require("react/jsx-runtime"),le=t=>(0,ce.jsx)(l,{icon:"folder",children:"Button",...t});var ue=require("react/jsx-runtime"),de=t=>(0,ue.jsx)(l,{children:"Button",...t});var F=require("react/jsx-runtime"),He=l.options,Pe=l.states,Fe={...l.defaultOptions,variant:"text"},De=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],Ge=[],w=t=>{let{variant:e,...n}=t;switch(e){case"icon-only":return(0,F.jsx)(ae,{...n,icon:"star"});case"icon-and-text":return(0,F.jsx)(le,{...n,icon:"star",children:"Button"});default:return(0,F.jsx)(de,{...n,children:"Button"})}};w.options=He;w.states=Pe;w.variants=De;w.defaultOptions=Fe;w.modifiers=Ge;w.className=l.className;var y=require("react/jsx-runtime"),pe="k-orgchart-node-group",Ue=[N.focus],me={orientation:"horizontal",buttonIcon:"plus"},fe=t=>{let{title:e,subtitle:n,lineBottom:a,lineTop:i,button:d,buttonIcon:u=me.buttonIcon,focus:s,orientation:p=me.orientation,...x}=t;return(0,y.jsxs)("div",{...x,className:c(t.className,pe,"k-vstack","k-align-items-center"),role:"group",children:[i&&(0,y.jsx)("div",{className:"k-orgchart-line k-orgchart-line-v"}),(0,y.jsxs)("div",{className:c("k-orgchart-node-group-container","k-vstack",$("k-orgchart-node-group-container",{focus:s})),children:[e&&(0,y.jsx)("div",{className:"k-orgchart-node-group-title",children:e}),n&&(0,y.jsx)("div",{className:"k-orgchart-node-group-subtitle",children:n}),(0,y.jsx)("div",{className:c("k-orgchart-node-container",{[`k-${Y.orientationMap[p]||p}`]:p}),role:"presentation",children:t.children})]}),a&&(0,y.jsx)("div",{className:"k-orgchart-line k-orgchart-line-v"}),d&&(0,y.jsx)(l,{className:"k-orgchart-button",icon:u,role:"presentation","aria-hidden":"true",tabIndex:-1})]})};fe.states=Ue;