@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
2 lines (1 loc) • 8.45 kB
JavaScript
var l=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?l(...e):typeof e=="object"?Object.keys(e).map((a,s)=>e[s]||e[a]&&a||null).filter(a=>a!==null).join(" "):e).filter(e=>!!e).join(" ");var E=(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.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"}),R=(t,e)=>{let{valid:a,invalid:s,hover:i,focus:p,checked:d,active:r,selected:h,disabled:m,indeterminate:u,loading:N,empty:A,readonly:oe,highlighted:ae,...z}=e;return l({"k-valid":a,"k-invalid":s,"k-hover":i,"k-focus":p,"k-checked":d,"k-active":r,"k-selected":h,"k-disabled":m,"k-indeterminate":u&&!d,"k-loading":N,"k-empty":A,"k-readonly":oe,"k-highlighted":ae},Object.keys(z).reduce(($,k)=>(k.startsWith("k-")?$[k]=z[k]:$[`k-${k}`]=z[k],$),{}))};var o={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"};var x={undefined:void 0,outline:"outline",solid:"solid",duotone:"duotone"},n={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",inverse:"inverse"},S={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"};var B={};function b(t){return B[t]=(B[t]||0)+1,`k-${t}-${B[t]}`}import{Fragment as le,jsx as G}from"react/jsx-runtime";var H="k-font-icon",ie=[],re={size:[o.undefined,o.xsmall,o.small,o.medium,o.large,o.xlarge,o.xxlarge,o.xxxlarge],themeColor:[n.undefined,n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info]},se={},C=t=>{let{size:e,themeColor:a,icon:s,rotate:i,flip:p,...d}=t;return s?G("span",{...d,className:l(t.className,H,E(H,{size:e}),{[`k-i-${s}`]:s,[`k-color-${a}`]:a,[`k-rotate-${i}`]:i,"k-flip-h":p==="h"||p==="both","k-flip-v":p==="v"||p==="both"}),"aria-hidden":"true"}):G(le,{})};C.states=ie;C.options=re;C.className=H;C.defaultOptions=se;var U=C;import{Fragment as pe,jsx as M}from"react/jsx-runtime";var K="k-svg-icon",de=[],ce={size:[o.undefined,o.xsmall,o.small,o.medium,o.large,o.xlarge,o.xxlarge,o.xxxlarge],themeColor:[n.undefined,n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info],variant:[x.outline,x.solid,x.duotone]},F={viewBox:"0 0 24 24",variant:x.outline},I=t=>{let{size:e,themeColor:a,rotate:s,flip:i,viewBox:p=F.viewBox,variant:d=F.variant,icon:r,...h}=t;if(!r)return M(pe,{});if(r==="none")return M("span",{...h,className:l(t.className,K,E("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let m=typeof r=="object"&&r.name&&r.name,u=typeof r=="object"?d&&r.variants?.[d]||r.variants?.outline||r.content:void 0;return M("span",{...h,className:l(t.className,K,E("k-icon",{size:e}),{[`k-svg-i-${m}`]:m,[`k-color-${a}`]:a,[`k-rotate-${s}`]:s,"k-flip-h":i==="h"||i==="both","k-flip-v":i==="v"||i==="both"}),"aria-hidden":"true",children:M("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof r=="object"?r.viewBox:p,dangerouslySetInnerHTML:u!==void 0?{__html:u}:void 0,children:r?void 0:t.children})})};I.states=de;I.options=ce;I.className=K;I.defaultOptions=F;var D=I;import*as V from"@progress/kendo-svg-icons";var X="icon",j="icons";import{useContext as ue}from"react";import{createContext as me}from"react";var q=me({iconsType:"svg"});import{Fragment as W,jsx as P}from"react/jsx-runtime";var T="k-icon",xe=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),fe=[],he={size:[o.undefined,o.xsmall,o.small,o.medium,o.large,o.xlarge,o.xxlarge,o.xxxlarge],themeColor:[n.undefined,n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info],variant:[x.outline,x.solid,x.duotone]},L={viewBox:"0 0 24 24",type:"svg",variant:x.outline},f=t=>{let{iconsType:e}=ue(q),{size:a,themeColor:s,icon:i,type:p=e||L.type,rotate:d,flip:r,viewBox:h=L.viewBox,variant:m=L.variant,...u}=t;if(!i)return P(W,{});if((e||p)==="svg"){if(i==="none")return P(D,{...u,className:l(t.className,T),icon:i,size:a,variant:m});let A=V[i]?i:xe(`${i}-icon`);return V[A]?P(D,{...u,className:l(t.className,T),icon:V[A],size:a,themeColor:s,rotate:d,flip:r,viewBox:h,variant:m}):P(W,{})}return P(U,{...u,className:l(t.className,T),icon:i,size:a,themeColor:s,rotate:d,flip:r})};f.states=fe;f.options=he;f.defaultOptions=L;f.className=T;f.moduleName=X;f.folderName=j;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="expander",Q="expansion-panel";import{jsx as g,jsxs as Y}from"react/jsx-runtime";var _="k-expander",ge=[S.hover,S.focus,S.disabled,S.expanded],ve={},be={},c=t=>{let{title:e,subtitle:a,expanded:s,hover:i,focus:p,disabled:d,dir:r,contentStyle:h,id:m,...u}=t,N=m?`${m}-content`:b("expander-content");return Y("div",{...u,className:l(t.className,_,R(_,{hover:i,focus:p,disabled:d,expanded:s})),dir:r,children:[Y("div",{className:l("k-expander-header",R(_,{hover:i})),role:"button","aria-controls":N,"aria-expanded":s?"true":"false",tabIndex:0,"aria-disabled":d?"true":void 0,children:[g("div",{className:"k-expander-title",children:e}),g("span",{className:"k-spacer"}),g("div",{className:"k-expander-sub-title",children:a}),g("span",{className:"k-expander-indicator",children:s?g(f,{icon:"chevron-up"}):g(f,{icon:"chevron-down"})})]}),g("div",{className:l("k-expander-content-wrapper",{"k-hidden":!s}),id:N,children:g("div",{className:"k-expander-content",style:h,children:t.children})})]})};c.states=ge;c.options=ve;c.className=_;c.defaultOptions=be;c.moduleName=J;c.folderName=Q;c.ariaSpec={selector:".k-expander",rules:[{selector:".k-expander-header",attribute:"role=button",usage:"Sets the proper role for the ExpansionPanel header."},{selector:".k-expander-header",attribute:"aria-controls",usage:"Points to the controlled content wrapper element."},{selector:".k-expander-header",attribute:"aria-expanded=true/false",usage:"Indicates the expanded state of the ExpansionPanel."},{selector:".k-expander-header",attribute:"tabindex=0",usage:"The element should be focusable."},{selector:".k-disabled .k-expander-header",attribute:"aria-disabled=true",usage:"Rendered only when the ExpansionPanel is disabled."},{selector:".k-expander-content-wrapper",attribute:"id",usage:"Content wrapper has an id referenced by aria-controls."}]};var w=c;import{jsx as Z}from"react/jsx-runtime";var O=t=>Z(w,{title:"Panel Title",subtitle:"Optional subtitle",id:b("expander"),children:Z("span",{children:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text."}),...t});import{jsx as ee}from"react/jsx-runtime";var te=t=>ee(w,{expanded:!0,title:"Expanded Panel",subtitle:"With content visible",id:b("expander"),children:ee("span",{children:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text."}),...t});import{jsx as y,jsxs as Se}from"react/jsx-runtime";var ye=c.options,Ne=c.states,ne={...c.defaultOptions,variant:"normal"},ke=[{name:"normal",title:"Normal"},{name:"expanded",title:"Expanded"}],Ee=[],v=t=>{let{variant:e,...a}={...ne,...t};return Se("div",{style:a.style?a.style:{width:"467px",height:"265"},children:[e==="expanded"?y(te,{title:"Title",children:[y("span",{children:"This is just a quick example text to build on the Expansion Panel to make up the bulk of the panel content."})],...a,subtitle:"Subtitle"}):y(O,{title:"Title",subtitle:"Subtitle",...a}),y(O,{title:"Title",subtitle:"Subtitle",...a}),y(O,{title:"Title",subtitle:"Subtitle",...a}),y(O,{title:"Title",subtitle:"Subtitle",...a})]})};v.options=ye;v.states=Ne;v.variants=ke;v.defaultOptions=ne;v.modifiers=Ee;v.className=c.className;var yt=v;export{v as ExpansionPanelDemo,yt as default};