@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
2 lines (1 loc) • 17.9 kB
JavaScript
var s=(...e)=>e.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?s(...t):typeof t=="object"?Object.keys(t).map((o,i)=>t[i]||t[o]&&o||null).filter(o=>o!==null).join(" "):t).filter(t=>!!t).join(" ");var O=(e,t)=>s({[`${e}-xs`]:t.size==="xsmall",[`${e}-sm`]:t.size==="small",[`${e}-md`]:t.size==="medium",[`${e}-lg`]:t.size==="large",[`${e}-xl`]:t.size==="xlarge",[`${e}-xxl`]:t.size==="xxlarge",[`${e}-xxxl`]:t.size==="xxxlarge"},{[`${e}-${t.fillMode}`]:t.fillMode},{[`${e}-${t.themeColor}`]:t.themeColor},{"k-rounded-sm":t.rounded==="small","k-rounded-md":t.rounded==="medium","k-rounded-lg":t.rounded==="large","k-rounded-full":t.rounded==="full","k-rounded-none":t.rounded==="none"}),R=(e,t)=>{let{valid:o,invalid:i,hover:a,focus:l,checked:m,active:u,selected:v,disabled:h,indeterminate:p,loading:I,empty:M,readonly:w,highlighted:P,...L}=t;return s({"k-valid":o,"k-invalid":i,"k-hover":a,"k-focus":l,"k-checked":m,"k-active":u,"k-selected":v,"k-disabled":h,"k-indeterminate":p&&!m,"k-loading":I,"k-empty":M,"k-readonly":w,"k-highlighted":P},Object.keys(L).reduce((b,g)=>(g.startsWith("k-")?b[g]=L[g]:b[`k-${g}`]=L[g],b),{}))};function ge(e,t){if(!t)return{};let o=Array.isArray(t)?t:[t];return Object.fromEntries(o.map(i=>[`k-${i}`,!0]))}var r={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},K={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"},B={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},y={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"},d={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 nt,jsx as ke}from"react/jsx-runtime";var ne="k-font-icon",et=[],tt={size:[r.undefined,r.xsmall,r.small,r.medium,r.large,r.xlarge,r.xxlarge,r.xxxlarge],themeColor:[n.undefined,n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info]},ot={},G=e=>{let{size:t,themeColor:o,icon:i,rotate:a,flip:l,...m}=e;return i?ke("span",{...m,className:s(e.className,ne,O(ne,{size:t}),{[`k-i-${i}`]:i,[`k-color-${o}`]:o,[`k-rotate-${a}`]:a,"k-flip-h":l==="h"||l==="both","k-flip-v":l==="v"||l==="both"}),"aria-hidden":"true"}):ke(nt,{})};G.states=et;G.options=tt;G.className=ne;G.defaultOptions=ot;var Ae=G;import{Fragment as st,jsx as Z}from"react/jsx-runtime";var re="k-svg-icon",rt=[],at={size:[r.undefined,r.xsmall,r.small,r.medium,r.large,r.xlarge,r.xxlarge,r.xxxlarge],themeColor:[n.undefined,n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info],variant:[y.outline,y.solid,y.duotone]},ae={viewBox:"0 0 24 24",variant:y.outline},J=e=>{let{size:t,themeColor:o,rotate:i,flip:a,viewBox:l=ae.viewBox,variant:m=ae.variant,icon:u,...v}=e;if(!u)return Z(st,{});if(u==="none")return Z("span",{...v,className:s(e.className,re,O("k-icon",{size:t}),"k-none"),"aria-hidden":"true"});let h=typeof u=="object"&&u.name&&u.name,p=typeof u=="object"?m&&u.variants?.[m]||u.variants?.outline||u.content:void 0;return Z("span",{...v,className:s(e.className,re,O("k-icon",{size:t}),{[`k-svg-i-${h}`]:h,[`k-color-${o}`]:o,[`k-rotate-${i}`]:i,"k-flip-h":a==="h"||a==="both","k-flip-v":a==="v"||a==="both"}),"aria-hidden":"true",children:Z("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof u=="object"?u.viewBox:l,dangerouslySetInnerHTML:p!==void 0?{__html:p}:void 0,children:u?void 0:e.children})})};J.states=rt;J.options=at;J.className=re;J.defaultOptions=ae;var se=J;import*as ie from"@progress/kendo-svg-icons";var Ee="icon",Le="icons";import{useContext as lt}from"react";import{createContext as it}from"react";var ye=it({iconsType:"svg"});import{Fragment as Se,jsx as X}from"react/jsx-runtime";var j="k-icon",mt=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),ut=[],ct={size:[r.undefined,r.xsmall,r.small,r.medium,r.large,r.xlarge,r.xxlarge,r.xxxlarge],themeColor:[n.undefined,n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info],variant:[y.outline,y.solid,y.duotone]},ee={viewBox:"0 0 24 24",type:"svg",variant:y.outline},f=e=>{let{iconsType:t}=lt(ye),{size:o,themeColor:i,icon:a,type:l=t||ee.type,rotate:m,flip:u,viewBox:v=ee.viewBox,variant:h=ee.variant,...p}=e;if(!a)return X(Se,{});if((t||l)==="svg"){if(a==="none")return X(se,{...p,className:s(e.className,j),icon:a,size:o,variant:h});let M=ie[a]?a:mt(`${a}-icon`);return ie[M]?X(se,{...p,className:s(e.className,j),icon:ie[M],size:o,themeColor:i,rotate:m,flip:u,viewBox:v,variant:h}):X(Se,{})}return X(Ae,{...p,className:s(e.className,j),icon:a,size:o,themeColor:i,rotate:m,flip:u})};f.states=ut;f.options=ct;f.defaultOptions=ee;f.className=j;f.moduleName=Ee;f.folderName=Le;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 le="button",Oe=le;import{Fragment as Ce,jsx as $,jsxs as we}from"react/jsx-runtime";var q="k-button",pt=["icon-button"],dt=[d.hover,d.focus,d.active,d.selected,d.disabled,d.generating],ft={size:[r.undefined,r.xsmall,r.small,r.medium,r.large],rounded:[K.undefined,K.none,K.small,K.medium,K.large,K.full],fillMode:[B.undefined,B.solid,B.flat,B.outline,B.clear,B.link],themeColor:[n.undefined,n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info,n.inverse]},me={showArrow:!1,arrowIconName:"chevron-down"},c=e=>{let{as:t="button",size:o,rounded:i,fillMode:a,themeColor:l,showArrow:m=me.showArrow,arrowIconName:u=me.arrowIconName,variant:v,hover:h,focus:p,active:I,selected:M,disabled:w,togglable:P,ariaDisabled:L,icon:b,iconSize:g,text:T,iconClassName:qe,className:Qe,...Ye}=e,Ze=b!=null,je=e.children!==void 0;return we(t,{className:s(Qe,q,ge(q,v),O(q,{size:o,rounded:i,fillMode:a,themeColor:l}),R(q,{hover:h,focus:p,active:I,disabled:w||L,selected:M}),{"k-icon-button":!T&&!je&&Ze}),"aria-pressed":P?M?"true":"false":void 0,...Ye,"aria-disabled":L?"true":void 0,disabled:w||void 0,children:[typeof b=="string"&&b&&$(f,{className:s(qe,"k-button-icon"),icon:b,size:g}),b&&typeof b!="string"&&$(Ce,{children:b}),T?we(Ce,{children:[T&&$("span",{className:"k-button-text",children:T}),e.children]}):e.children&&$("span",{className:"k-button-text",children:e.children}),m&&$("span",{className:"k-menu-button-arrow k-button-arrow",children:$(f,{icon:u})})]})};c.states=dt;c.options=ft;c.variants=pt;c.className=q;c.defaultOptions=me;c.moduleName=le;c.folderName=Oe;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 xt}from"react/jsx-runtime";var Te=e=>xt(c,{icon:"folder",...e,"aria-label":e["aria-label"]||"Folder",children:void 0});import{jsx as Mt}from"react/jsx-runtime";var _e=e=>Mt(c,{icon:"folder",children:"Button",...e});import{jsx as bt}from"react/jsx-runtime";var Pe=e=>bt(c,{children:"Button",...e});import{jsx as ue}from"react/jsx-runtime";var Nt=c.options,ht=c.states,It={...c.defaultOptions,variant:"text"},vt=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],gt=[],F=e=>{let{variant:t,...o}=e;switch(t){case"icon-only":return ue(Te,{...o,icon:"star"});case"icon-and-text":return ue(_e,{...o,icon:"star",children:"Button"});default:return ue(Pe,{...o,children:"Button"})}};F.options=Nt;F.states=ht;F.variants=vt;F.defaultOptions=It;F.modifiers=gt;F.className=c.className;var k="menu",A=k;import{jsx as Lt}from"react/jsx-runtime";var Re="k-menu-scroll-wrapper",kt=[],At={},Et={},z=e=>{let{className:t,children:o,orientation:i,...a}=e;return Lt("div",{...a,className:s(t,Re,{"k-menu-scroll-wrapper-vertical":i==="vertical"}),children:o})};z.states=kt;z.options=At;z.className=Re;z.defaultOptions=Et;z.moduleName=k;z.folderName=A;var Ke=z;import{Fragment as ce,jsx as U,jsxs as te}from"react/jsx-runtime";var pe="k-menu",yt=[],St={},oe={orientation:"horizontal",header:!0,scrollButtonsPosition:"around"},x=e=>{let{children:t,orientation:o=oe.orientation,header:i=oe.header,scrollable:a,scrollButtonsPosition:l=oe.scrollButtonsPosition,wrapperStyles:m,dir:u,popup:v,contextMenu:h,...p}=e,I={horizontal:{prev:u!=="rtl"?"left":"right",next:u!=="rtl"?"right":"left"},vertical:{prev:"up",next:"down"}},M=U("ul",{dir:u,...p,className:s(e.className,"k-reset",pe,{[`${pe}-${o}`]:o,"k-header":i}),role:h?"menu":"menubar",...o==="vertical"&&{"aria-orientation":"vertical"},children:t});return te(ce,{children:[a?te(Ke,{orientation:o,style:m,dir:e.dir,children:[l==="start"&&te(ce,{children:[U(c,{fillMode:"flat",icon:`chevron-${I[o].prev}`,className:"k-menu-scroll-button k-menu-scroll-button-prev",tabIndex:-1,"aria-label":"Scroll previous"}),U(c,{fillMode:"flat",icon:`chevron-${I[o].next}`,className:"k-menu-scroll-button k-menu-scroll-button-next",tabIndex:-1,"aria-label":"Scroll next"})]}),l==="around"&&U(c,{fillMode:"flat",icon:`chevron-${I[o].prev}`,className:"k-menu-scroll-button k-menu-scroll-button-prev",tabIndex:-1,"aria-label":"Scroll previous"}),M,l==="end"&&te(ce,{children:[U(c,{fillMode:"flat",icon:`chevron-${I[o].prev}`,className:"k-menu-scroll-button k-menu-scroll-button-prev",tabIndex:-1,"aria-label":"Scroll previous"}),U(c,{fillMode:"flat",icon:`chevron-${I[o].next}`,className:"k-menu-scroll-button k-menu-scroll-button-next",tabIndex:-1,"aria-label":"Scroll next"})]}),l==="around"&&U(c,{fillMode:"flat",icon:`chevron-${I[o].next}`,className:"k-menu-scroll-button k-menu-scroll-button-next",tabIndex:-1,"aria-label":"Scroll next"})]}):M,v]})};x.states=yt;x.options=St;x.className=pe;x.defaultOptions=oe;x.moduleName=k;x.folderName=A;x.ariaSpec={selector:".k-menu",rules:[{selector:".k-menu:not(.k-context-menu)",attribute:"role=menubar",usage:"Announces the Menu menubar role."},{selector:".k-menu.k-menu-vertical",attribute:"aria-orientation=vertical",usage:"Announces the Menu orientation when vertical."},{selector:".k-menu-item",attribute:"role=menuitem",usage:"Announces the Menu item role."},{selector:".k-menu-item",attribute:"aria-haspopup=menu (when present)",usage:"Indicates a popup menu is associated with the item."},{selector:".k-menu-item",attribute:"aria-expanded=true/false (when present)",usage:"Indicates whether the submenu is expanded."},{selector:".k-menu-item.k-disabled",attribute:"aria-disabled=true",usage:"Informs assistive technologies that a Menu item is disabled."},{selector:".k-menu-expand-arrow",attribute:"aria-hidden=true",usage:"Expand arrow elements are hidden from assistive technologies."},{selector:".k-menu-popup .k-menu-group",attribute:"role=menu",usage:"The role of the nested menu displayed in a popup."},{selector:".k-menu-scroll-button",attribute:"tabindex=-1",usage:"Scroll buttons are removed from the tab sequence."},{selector:".k-menu-scroll-button",attribute:"aria-label",usage:"Scroll buttons have an accessible label."},{selector:".k-menu-item.k-focus",attribute:"tabindex=0",usage:"The focused item has tabindex 0."},{selector:".k-menu-item",attribute:"aria-controls=ul.k-menu-group id (when present)",usage:"Points to the ID of the submenu. Only present when the item controls a submenu element."},{selector:".k-menu-popup .k-menu-group",attribute:"id",usage:"Each nested menu has a deterministic id linked to the parent aria-controls."}]};import{jsx as Tt}from"react/jsx-runtime";var de="k-menu-group",Ot=[],Ct={size:[r.undefined,r.small,r.medium,r.large]},wt={},C=e=>{let{children:t,size:o,...i}=e;return Tt("ul",{role:"menu",...i,className:s(e.className,de,O(de,{size:o})),children:t})};C.states=Ot;C.options=Ct;C.className=de;C.defaultOptions=wt;C.moduleName=k;C.folderName=A;import{jsx as Q,jsxs as Be}from"react/jsx-runtime";var fe="k-menu-item",_t=[d.hover,d.focus,d.active,d.selected,d.disabled],Pt={},xe={dir:"ltr",iconPosition:"before"},E=e=>{let{hover:t,focus:o,active:i,selected:a,disabled:l,icon:m,text:u,first:v,last:h,showArrow:p,arrowIconName:I,iconPosition:M=xe.iconPosition,dir:w=xe.dir,children:P,popup:L,expanded:b,...g}=e,T=I;return T||(T=w==="rtl"?"chevron-left":"chevron-right"),Be("li",{role:"menuitem",...g,className:s(e.className,fe,"k-item",R(fe,{focus:o,disabled:l}),{"k-first":v,"k-last":h}),...p&&{"aria-haspopup":"menu"},...p&&{"aria-expanded":b?"true":"false"},...l&&{"aria-disabled":"true"},...o&&{tabIndex:0},children:[Be("span",{className:s("k-link k-menu-link",R("k-menu-link",{hover:t,active:i,selected:a,disabled:l})),children:[m&&M==="before"&&Q(f,{className:"k-menu-link-icon",icon:m}),Q("span",{className:"k-menu-link-text",children:u}),m&&M==="after"&&Q(f,{className:"k-menu-link-icon",icon:m}),p&&Q("span",{className:"k-menu-expand-arrow","aria-hidden":"true",children:Q(f,{icon:T})})]}),P,L]})};E.states=_t;E.options=Pt;E.className=fe;E.defaultOptions=xe;E.moduleName=k;E.folderName=A;import{jsx as Rt}from"react/jsx-runtime";var Me="k-separator",ze={orientation:"horizontal"},V=e=>{let{orientation:t=ze.orientation,...o}=e;return Rt("li",{...o,className:s(e.className,"k-item",Me,{[`${Me}-${t}`]:t}),role:"separator"})};V.className=Me;V.defaultOptions=ze;V.moduleName=k;V.folderName=A;import{jsx as Y,jsxs as Ue}from"react/jsx-runtime";var be="k-menu-item",Kt=[d.hover,d.focus,d.active,d.selected,d.disabled],Bt={},He={iconPosition:"before"},N=e=>{let{hover:t,focus:o,active:i,selected:a,disabled:l,icon:m,text:u,first:v,last:h,showArrow:p,arrowIconName:I,iconPosition:M=He.iconPosition,dir:w,children:P,expanded:L,...b}=e,g=I;return g||(g=w==="rtl"?"chevron-left":"chevron-right"),Ue("li",{...b,className:s(e.className,be,"k-item",R(be,{focus:o,disabled:l,hover:t,active:i,selected:a}),{"k-first":v,"k-last":h}),role:"menuitem",...p&&{"aria-haspopup":"menu"},...p&&{"aria-expanded":L?"true":"false"},...l&&{"aria-disabled":"true"},...o&&{tabIndex:0},children:[Ue("span",{className:s("k-link k-menu-link"),children:[m&&M==="before"&&Y(f,{className:"k-menu-link-icon",icon:m}),Y("span",{className:"k-menu-link-text",children:u}),m&&M==="after"&&Y(f,{className:"k-menu-link-icon",icon:m}),p&&Y("span",{className:"k-menu-expand-arrow","aria-hidden":"true",children:Y(f,{icon:g})})]}),P]})};N.states=Kt;N.options=Bt;N.className=be;N.defaultOptions=He;N.moduleName=k;N.folderName=A;import{Fragment as _n,jsx as Pn}from"react/jsx-runtime";var Ne="popup",De=Ne;import{jsx as $e}from"react/jsx-runtime";var Fe="k-animation-container",zt=[],Ut={},he={positionMode:"absolute",shown:!0},_=e=>{let{positionMode:t=he.positionMode,shown:o=he.shown,animationStyle:i,offset:a,...l}=e;return $e("div",{...l,style:{...a,...e.style},className:s(e.className,Fe,{"k-animation-container-shown":o,"k-animation-container-fixed":t==="fixed"}),children:$e("div",{className:"k-child-animation-container",style:i,children:e.children})})};_.states=zt;_.options=Ut;_.className=Fe;_.defaultOptions=he;_.moduleName=Ne;_.folderName=De;var Ie="popup",Ve=Ie;import{jsx as We}from"react/jsx-runtime";var Ge="k-popup",Ht=[],Dt={},Je={positionMode:"absolute"},S=e=>{let{offset:t,positionMode:o=Je.positionMode,animationStyle:i,containerClassName:a,containerRole:l,containerAriaLabel:m,...u}=e;return We(_,{positionMode:o,offset:t,animationStyle:i,className:a,role:l,"aria-label":m,children:We("div",{...u,className:s(e.className,Ge),children:e.children})})};S.states=Ht;S.options=Dt;S.className=Ge;S.defaultOptions=Je;S.moduleName=Ie;S.folderName=Ve;S.ariaSpec={selector:".k-popup",rules:[{selector:".k-animation-container",attribute:"role (when appended to body)",usage:'Container gets role="region" when appended to document body. Popup is a building block \u2014 ARIA semantics come from consuming components.'}]};import{Fragment as or,jsx as er,jsxs as tr}from"react/jsx-runtime";import{Fragment as ir,jsx as sr,jsxs as lr}from"react/jsx-runtime";import{Fragment as dr,jsx as pr,jsxs as fr}from"react/jsx-runtime";import{Fragment as hr,jsx as Nr,jsxs as Ir}from"react/jsx-runtime";import{Fragment as $t,jsx as W,jsxs as Ft}from"react/jsx-runtime";var ve=e=>W(x,{children:Ft($t,{children:[W(N,{first:!0,text:"Item 1"}),W(N,{showArrow:!0,arrowIconName:"chevron-down",text:"Item 2"}),W(N,{showArrow:!0,arrowIconName:"chevron-down",text:"Item 3"}),W(N,{text:"Item 4"}),W(N,{last:!0,text:"Item 5"})]}),...e});import{jsx as H,jsxs as Xt}from"react/jsx-runtime";var Vt={...x.options,scrollable:{type:"boolean"}},Wt=x.states,Xe={...x.defaultOptions,variant:"horizontal"},Gt=[{name:"horizontal",title:"Horizontal"},{name:"vertical",title:"Vertical"}],Jt=[{name:"opened",title:"Opened"}],D=e=>{let{variant:t,modifiers:o,...i}={...Xe,...e},a={},l=t==="vertical"?{left:"200px",top:"30px"}:{left:"90px",top:"auto"};return Object.keys(o||{}).forEach(m=>{m==="opened"&&(a.opened=!!o?.[m],a.popup=o?.[m]?H(S,{className:"k-menu-popup",offset:l,children:Xt(C,{children:[H(E,{text:"Item 1"}),H(E,{text:"Item 2"}),H(V,{}),H(E,{text:"Item 3"})]})}):null)}),t==="vertical"?H(ve,{...i,...a,orientation:"vertical",style:{width:"200px"}}):H(ve,{...i,...a})};D.options=Vt;D.states=Wt;D.variants=Gt;D.defaultOptions=Xe;D.modifiers=Jt;D.className=x.className;var Gr=D;export{D as MenuDemo,Gr as default};