@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
2 lines (1 loc) • 18.5 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 w=(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"}),K=(e,t)=>{let{valid:o,invalid:i,hover:a,focus:l,checked:m,active:u,selected:v,disabled:h,indeterminate:d,loading:I,empty:b,readonly:T,highlighted:R,...y}=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":d&&!m,"k-loading":I,"k-empty":b,"k-readonly":T,"k-highlighted":R},Object.keys(y).reduce((N,k)=>(k.startsWith("k-")?N[k]=y[k]:N[`k-${k}`]=y[k],N),{}))};function ke(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"},B={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"},z={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},S={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"},f={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 at,jsx as Ae}from"react/jsx-runtime";var re="k-font-icon",ot=[],nt={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]},rt={},J=e=>{let{size:t,themeColor:o,icon:i,rotate:a,flip:l,...m}=e;return i?Ae("span",{...m,className:s(e.className,re,w(re,{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"}):Ae(at,{})};J.states=ot;J.options=nt;J.className=re;J.defaultOptions=rt;var Ee=J;import{Fragment as lt,jsx as j}from"react/jsx-runtime";var ae="k-svg-icon",st=[],it={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:[S.outline,S.solid,S.duotone]},se={viewBox:"0 0 24 24",variant:S.outline},X=e=>{let{size:t,themeColor:o,rotate:i,flip:a,viewBox:l=se.viewBox,variant:m=se.variant,icon:u,...v}=e;if(!u)return j(lt,{});if(u==="none")return j("span",{...v,className:s(e.className,ae,w("k-icon",{size:t}),"k-none"),"aria-hidden":"true"});let h=typeof u=="object"&&u.name&&u.name,d=typeof u=="object"?m&&u.variants?.[m]||u.variants?.outline||u.content:void 0;return j("span",{...v,className:s(e.className,ae,w("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:j("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof u=="object"?u.viewBox:l,dangerouslySetInnerHTML:d!==void 0?{__html:d}:void 0,children:u?void 0:e.children})})};X.states=st;X.options=it;X.className=ae;X.defaultOptions=se;var ie=X;import*as le from"@progress/kendo-svg-icons";var Le="icon",ye="icons";import{useContext as ut}from"react";import{createContext as mt}from"react";var Se=mt({iconsType:"svg"});import{Fragment as Oe,jsx as q}from"react/jsx-runtime";var ee="k-icon",ct=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),pt=[],dt={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:[S.outline,S.solid,S.duotone]},te={viewBox:"0 0 24 24",type:"svg",variant:S.outline},M=e=>{let{iconsType:t}=ut(Se),{size:o,themeColor:i,icon:a,type:l=t||te.type,rotate:m,flip:u,viewBox:v=te.viewBox,variant:h=te.variant,...d}=e;if(!a)return q(Oe,{});if((t||l)==="svg"){if(a==="none")return q(ie,{...d,className:s(e.className,ee),icon:a,size:o,variant:h});let b=le[a]?a:ct(`${a}-icon`);return le[b]?q(ie,{...d,className:s(e.className,ee),icon:le[b],size:o,themeColor:i,rotate:m,flip:u,viewBox:v,variant:h}):q(Oe,{})}return q(Ee,{...d,className:s(e.className,ee),icon:a,size:o,themeColor:i,rotate:m,flip:u})};M.states=pt;M.options=dt;M.defaultOptions=te;M.className=ee;M.moduleName=Le;M.folderName=ye;M.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 A="menu",E=A;import{jsx as Q,jsxs as Ce}from"react/jsx-runtime";var me="k-menu-item",ft=[f.hover,f.focus,f.active,f.selected,f.disabled],xt={},we={iconPosition:"before"},p=e=>{let{hover:t,focus:o,active:i,selected:a,disabled:l,icon:m,text:u,first:v,last:h,showArrow:d,arrowIconName:I,iconPosition:b=we.iconPosition,dir:T,children:R,expanded:y,...N}=e,k=I;return k||(k=T==="rtl"?"chevron-left":"chevron-right"),Ce("li",{...N,className:s(e.className,me,"k-item",K(me,{focus:o,disabled:l,hover:t,active:i,selected:a}),{"k-first":v,"k-last":h}),role:"menuitem",...d&&{"aria-haspopup":"menu"},...d&&{"aria-expanded":y?"true":"false"},...l&&{"aria-disabled":"true"},...o&&{tabIndex:0},children:[Ce("span",{className:s("k-link k-menu-link"),children:[m&&b==="before"&&Q(M,{className:"k-menu-link-icon",icon:m}),Q("span",{className:"k-menu-link-text",children:u}),m&&b==="after"&&Q(M,{className:"k-menu-link-icon",icon:m}),d&&Q("span",{className:"k-menu-expand-arrow","aria-hidden":"true",children:Q(M,{icon:k})})]}),R]})};p.states=ft;p.options=xt;p.className=me;p.defaultOptions=we;p.moduleName=A;p.folderName=E;import{jsx as Y,jsxs as Te}from"react/jsx-runtime";var ue="k-menu-item",Mt=[f.hover,f.focus,f.active,f.selected,f.disabled],bt={},ce={dir:"ltr",iconPosition:"before"},g=e=>{let{hover:t,focus:o,active:i,selected:a,disabled:l,icon:m,text:u,first:v,last:h,showArrow:d,arrowIconName:I,iconPosition:b=ce.iconPosition,dir:T=ce.dir,children:R,popup:y,expanded:N,...k}=e,_=I;return _||(_=T==="rtl"?"chevron-left":"chevron-right"),Te("li",{role:"menuitem",...k,className:s(e.className,ue,"k-item",K(ue,{focus:o,disabled:l}),{"k-first":v,"k-last":h}),...d&&{"aria-haspopup":"menu"},...d&&{"aria-expanded":N?"true":"false"},...l&&{"aria-disabled":"true"},...o&&{tabIndex:0},children:[Te("span",{className:s("k-link k-menu-link",K("k-menu-link",{hover:t,active:i,selected:a,disabled:l})),children:[m&&b==="before"&&Y(M,{className:"k-menu-link-icon",icon:m}),Y("span",{className:"k-menu-link-text",children:u}),m&&b==="after"&&Y(M,{className:"k-menu-link-icon",icon:m}),d&&Y("span",{className:"k-menu-expand-arrow","aria-hidden":"true",children:Y(M,{icon:_})})]}),R,y]})};g.states=Mt;g.options=bt;g.className=ue;g.defaultOptions=ce;g.moduleName=A;g.folderName=E;var pe="button",_e=pe;import{Fragment as Pe,jsx as $,jsxs as Re}from"react/jsx-runtime";var Z="k-button",Nt=["icon-button"],ht=[f.hover,f.focus,f.active,f.selected,f.disabled,f.generating],It={size:[r.undefined,r.xsmall,r.small,r.medium,r.large],rounded:[B.undefined,B.none,B.small,B.medium,B.large,B.full],fillMode:[z.undefined,z.solid,z.flat,z.outline,z.clear,z.link],themeColor:[n.undefined,n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info,n.inverse]},de={showArrow:!1,arrowIconName:"chevron-down"},c=e=>{let{as:t="button",size:o,rounded:i,fillMode:a,themeColor:l,showArrow:m=de.showArrow,arrowIconName:u=de.arrowIconName,variant:v,hover:h,focus:d,active:I,selected:b,disabled:T,togglable:R,ariaDisabled:y,icon:N,iconSize:k,text:_,iconClassName:Ye,className:Ze,...je}=e,et=N!=null,tt=e.children!==void 0;return Re(t,{className:s(Ze,Z,ke(Z,v),w(Z,{size:o,rounded:i,fillMode:a,themeColor:l}),K(Z,{hover:h,focus:d,active:I,disabled:T||y,selected:b}),{"k-icon-button":!_&&!tt&&et}),"aria-pressed":R?b?"true":"false":void 0,...je,"aria-disabled":y?"true":void 0,disabled:T||void 0,children:[typeof N=="string"&&N&&$(M,{className:s(Ye,"k-button-icon"),icon:N,size:k}),N&&typeof N!="string"&&$(Pe,{children:N}),_?Re(Pe,{children:[_&&$("span",{className:"k-button-text",children:_}),e.children]}):e.children&&$("span",{className:"k-button-text",children:e.children}),m&&$("span",{className:"k-menu-button-arrow k-button-arrow",children:$(M,{icon:u})})]})};c.states=ht;c.options=It;c.variants=Nt;c.className=Z;c.defaultOptions=de;c.moduleName=pe;c.folderName=_e;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 vt}from"react/jsx-runtime";var Ke=e=>vt(c,{icon:"folder",...e,"aria-label":e["aria-label"]||"Folder",children:void 0});import{jsx as gt}from"react/jsx-runtime";var Be=e=>gt(c,{icon:"folder",children:"Button",...e});import{jsx as kt}from"react/jsx-runtime";var ze=e=>kt(c,{children:"Button",...e});import{jsx as fe}from"react/jsx-runtime";var At=c.options,Et=c.states,Lt={...c.defaultOptions,variant:"text"},yt=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],St=[],F=e=>{let{variant:t,...o}=e;switch(t){case"icon-only":return fe(Ke,{...o,icon:"star"});case"icon-and-text":return fe(Be,{...o,icon:"star",children:"Button"});default:return fe(ze,{...o,children:"Button"})}};F.options=At;F.states=Et;F.variants=yt;F.defaultOptions=Lt;F.modifiers=St;F.className=c.className;import{jsx as Tt}from"react/jsx-runtime";var Ue="k-menu-scroll-wrapper",Ot=[],Ct={},wt={},U=e=>{let{className:t,children:o,orientation:i,...a}=e;return Tt("div",{...a,className:s(t,Ue,{"k-menu-scroll-wrapper-vertical":i==="vertical"}),children:o})};U.states=Ot;U.options=Ct;U.className=Ue;U.defaultOptions=wt;U.moduleName=A;U.folderName=E;var He=U;import{Fragment as xe,jsx as H,jsxs as oe}from"react/jsx-runtime";var Me="k-menu",_t=[],Pt={},ne={orientation:"horizontal",header:!0,scrollButtonsPosition:"around"},x=e=>{let{children:t,orientation:o=ne.orientation,header:i=ne.header,scrollable:a,scrollButtonsPosition:l=ne.scrollButtonsPosition,wrapperStyles:m,dir:u,popup:v,contextMenu:h,...d}=e,I={horizontal:{prev:u!=="rtl"?"left":"right",next:u!=="rtl"?"right":"left"},vertical:{prev:"up",next:"down"}},b=H("ul",{dir:u,...d,className:s(e.className,"k-reset",Me,{[`${Me}-${o}`]:o,"k-header":i}),role:h?"menu":"menubar",...o==="vertical"&&{"aria-orientation":"vertical"},children:t});return oe(xe,{children:[a?oe(He,{orientation:o,style:m,dir:e.dir,children:[l==="start"&&oe(xe,{children:[H(c,{fillMode:"flat",icon:`chevron-${I[o].prev}`,className:"k-menu-scroll-button k-menu-scroll-button-prev",tabIndex:-1,"aria-label":"Scroll previous"}),H(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"&&H(c,{fillMode:"flat",icon:`chevron-${I[o].prev}`,className:"k-menu-scroll-button k-menu-scroll-button-prev",tabIndex:-1,"aria-label":"Scroll previous"}),b,l==="end"&&oe(xe,{children:[H(c,{fillMode:"flat",icon:`chevron-${I[o].prev}`,className:"k-menu-scroll-button k-menu-scroll-button-prev",tabIndex:-1,"aria-label":"Scroll previous"}),H(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"&&H(c,{fillMode:"flat",icon:`chevron-${I[o].next}`,className:"k-menu-scroll-button k-menu-scroll-button-next",tabIndex:-1,"aria-label":"Scroll next"})]}):b,v]})};x.states=_t;x.options=Pt;x.className=Me;x.defaultOptions=ne;x.moduleName=A;x.folderName=E;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 Rt}from"react/jsx-runtime";var be="k-separator",De={orientation:"horizontal"},V=e=>{let{orientation:t=De.orientation,...o}=e;return Rt("li",{...o,className:s(e.className,"k-item",be,{[`${be}-${t}`]:t}),role:"separator"})};V.className=be;V.defaultOptions=De;V.moduleName=A;V.folderName=E;import{Fragment as Tn,jsx as _n}from"react/jsx-runtime";import{jsx as Ut}from"react/jsx-runtime";var Ne="k-menu-group",Kt=[],Bt={size:[r.undefined,r.small,r.medium,r.large]},zt={},O=e=>{let{children:t,size:o,...i}=e;return Ut("ul",{role:"menu",...i,className:s(e.className,Ne,w(Ne,{size:o})),children:t})};O.states=Kt;O.options=Bt;O.className=Ne;O.defaultOptions=zt;O.moduleName=A;O.folderName=E;import{Fragment as Ht,jsx as W,jsxs as Dt}from"react/jsx-runtime";var he=e=>W(x,{children:Dt(Ht,{children:[W(p,{first:!0,text:"Item 1"}),W(p,{showArrow:!0,arrowIconName:"chevron-down",text:"Item 2"}),W(p,{showArrow:!0,arrowIconName:"chevron-down",text:"Item 3"}),W(p,{text:"Item 4"}),W(p,{last:!0,text:"Item 5"})]}),...e});import{Fragment as Wn,jsx as Vn,jsxs as Gn}from"react/jsx-runtime";import{Fragment as Yn,jsx as Qn,jsxs as Zn}from"react/jsx-runtime";import{Fragment as nr,jsx as or,jsxs as rr}from"react/jsx-runtime";var Ie="popup",$e=Ie;import{jsx as Fe}from"react/jsx-runtime";var Ve="k-animation-container",$t=[],Ft={},ve={positionMode:"absolute",shown:!0},P=e=>{let{positionMode:t=ve.positionMode,shown:o=ve.shown,animationStyle:i,offset:a,...l}=e;return Fe("div",{...l,style:{...a,...e.style},className:s(e.className,Ve,{"k-animation-container-shown":o,"k-animation-container-fixed":t==="fixed"}),children:Fe("div",{className:"k-child-animation-container",style:i,children:e.children})})};P.states=$t;P.options=Ft;P.className=Ve;P.defaultOptions=ve;P.moduleName=Ie;P.folderName=$e;var ge="popup",We=ge;import{jsx as Ge}from"react/jsx-runtime";var Je="k-popup",Vt=[],Wt={},Xe={positionMode:"absolute"},L=e=>{let{offset:t,positionMode:o=Xe.positionMode,animationStyle:i,containerClassName:a,containerRole:l,containerAriaLabel:m,...u}=e;return Ge(P,{positionMode:o,offset:t,animationStyle:i,className:a,role:l,"aria-label":m,children:Ge("div",{...u,className:s(e.className,Je),children:e.children})})};L.states=Vt;L.options=Wt;L.className=Je;L.defaultOptions=Xe;L.moduleName=ge;L.folderName=We;L.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{jsx as D,jsxs as Qt}from"react/jsx-runtime";var Gt={...x.options,scrollable:{type:"boolean"}},Jt=x.states,qe={...x.defaultOptions,variant:"horizontal"},Xt=[{name:"horizontal",title:"Horizontal"},{name:"vertical",title:"Vertical"}],qt=[{name:"opened",title:"Opened"}],G=e=>{let{variant:t,modifiers:o,...i}={...qe,...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]?D(L,{className:"k-menu-popup",offset:l,children:Qt(O,{children:[D(g,{text:"Item 1"}),D(g,{text:"Item 2"}),D(V,{}),D(g,{text:"Item 3"})]})}):null)}),t==="vertical"?D(he,{...i,...a,orientation:"vertical",style:{width:"200px"}}):D(he,{...i,...a})};G.options=Gt;G.states=Jt;G.variants=Xt;G.defaultOptions=qe;G.modifiers=qt;G.className=x.className;import{Fragment as Yt,jsx as C,jsxs as Qe}from"react/jsx-runtime";var Gr=e=>C(x,{popup:C(L,{className:"k-menu-popup",offset:{left:"90px",top:"auto"},children:Qe(O,{id:"submenu-popup-1",children:[C(g,{first:!0,text:"Sub item 1"}),C(g,{text:"Sub item 2",showArrow:!0}),C(g,{last:!0,text:"Sub item 3"})]})}),children:Qe(Yt,{children:[C(p,{first:!0,text:"Item 1",focus:!0}),C(p,{showArrow:!0,arrowIconName:"chevron-down",text:"Item 2",expanded:!0,"aria-controls":"submenu-popup-1"}),C(p,{showArrow:!0,arrowIconName:"chevron-down",text:"Item 3"}),C(p,{text:"Item 4",disabled:!0}),C(p,{last:!0,text:"Item 5"})]}),...e});export{Gr as MenuPopup};