@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
2 lines (1 loc) • 15 kB
JavaScript
var Ge=Object.create;var J=Object.defineProperty;var qe=Object.getOwnPropertyDescriptor;var Je=Object.getOwnPropertyNames;var Xe=Object.getPrototypeOf,We=Object.prototype.hasOwnProperty;var Qe=(e,t)=>{for(var n in t)J(e,n,{get:t[n],enumerable:!0})},xe=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of Je(t))!We.call(e,i)&&i!==n&&J(e,i,{get:()=>t[i],enumerable:!(r=qe(t,i))||r.enumerable});return e};var Ye=(e,t,n)=>(n=e!=null?Ge(Xe(e)):{},xe(t||!e||!e.__esModule?J(n,"default",{value:e,enumerable:!0}):n,e)),Ze=e=>xe(J({},"__esModule",{value:!0}),e);var wt={};Qe(wt,{MenuButtonDemo:()=>K,default:()=>Lt});module.exports=Ze(wt);var a=(...e)=>e.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?a(...t):typeof t=="object"?Object.keys(t).map((n,r)=>t[r]||t[n]&&n||null).filter(n=>n!==null).join(" "):t).filter(t=>!!t).join(" ");var I=(e,t)=>a({[`${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"}),H=(e,t)=>{let{valid:n,invalid:r,hover:i,focus:c,checked:l,active:d,selected:y,disabled:b,indeterminate:p,loading:A,empty:x,readonly:B,highlighted:z,...O}=t;return a({"k-valid":n,"k-invalid":r,"k-hover":i,"k-focus":c,"k-checked":l,"k-active":d,"k-selected":y,"k-disabled":b,"k-indeterminate":p&&!l,"k-loading":A,"k-empty":x,"k-readonly":B,"k-highlighted":z},Object.keys(O).reduce((N,T)=>(T.startsWith("k-")?N[T]=O[T]:N[`k-${T}`]=O[T],N),{}))};function be(e,t){if(!t)return{};let n=Array.isArray(t)?t:[t];return Object.fromEntries(n.map(r=>[`k-${r}`,!0]))}var s={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},h={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"},E={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"},m={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 F=require("react/jsx-runtime"),Z="k-font-icon",je=[],et={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info]},tt={},$=e=>{let{size:t,themeColor:n,icon:r,rotate:i,flip:c,...l}=e;return r?(0,F.jsx)("span",{...l,className:a(e.className,Z,I(Z,{size:t}),{[`k-i-${r}`]:r,[`k-color-${n}`]:n,[`k-rotate-${i}`]:i,"k-flip-h":c==="h"||c==="both","k-flip-v":c==="v"||c==="both"}),"aria-hidden":"true"}):(0,F.jsx)(F.Fragment,{})};$.states=je;$.options=et;$.className=Z;$.defaultOptions=tt;var Ne=$;var U=require("react/jsx-runtime"),j="k-svg-icon",ot=[],nt={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info],variant:[E.outline,E.solid,E.duotone]},ee={viewBox:"0 0 24 24",variant:E.outline},V=e=>{var A,x;let{size:t,themeColor:n,rotate:r,flip:i,viewBox:c=ee.viewBox,variant:l=ee.variant,icon:d,...y}=e;if(!d)return(0,U.jsx)(U.Fragment,{});if(d==="none")return(0,U.jsx)("span",{...y,className:a(e.className,j,I("k-icon",{size:t}),"k-none"),"aria-hidden":"true"});let b=typeof d=="object"&&d.name&&d.name,p=typeof d=="object"?l&&((A=d.variants)==null?void 0:A[l])||((x=d.variants)==null?void 0:x.outline)||d.content:void 0;return(0,U.jsx)("span",{...y,className:a(e.className,j,I("k-icon",{size:t}),{[`k-svg-i-${b}`]:b,[`k-color-${n}`]:n,[`k-rotate-${r}`]:r,"k-flip-h":i==="h"||i==="both","k-flip-v":i==="v"||i==="both"}),"aria-hidden":"true",children:(0,U.jsx)("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof d=="object"?d.viewBox:c,dangerouslySetInnerHTML:p!==void 0?{__html:p}:void 0,children:d?void 0:e.children})})};V.states=ot;V.options=nt;V.className=j;V.defaultOptions=ee;var te=V;var oe=Ye(require("@progress/kendo-svg-icons"));var he="icon",Me="icons";var ye=require("react");var ge=require("react"),ve=(0,ge.createContext)({iconsType:"svg"});var L=require("react/jsx-runtime"),X="k-icon",st=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),it=[],rt={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info],variant:[E.outline,E.solid,E.duotone]},W={viewBox:"0 0 24 24",type:"svg",variant:E.outline},g=e=>{let{iconsType:t}=(0,ye.useContext)(ve),{size:n,themeColor:r,icon:i,type:c=t||W.type,rotate:l,flip:d,viewBox:y=W.viewBox,variant:b=W.variant,...p}=e;if(!i)return(0,L.jsx)(L.Fragment,{});if((t||c)==="svg"){if(i==="none")return(0,L.jsx)(te,{...p,className:a(e.className,X),icon:i,size:n,variant:b});let x=oe[i]?i:st(`${i}-icon`);return oe[x]?(0,L.jsx)(te,{...p,className:a(e.className,X),icon:oe[x],size:n,themeColor:r,rotate:l,flip:d,viewBox:y,variant:b}):(0,L.jsx)(L.Fragment,{})}return(0,L.jsx)(Ne,{...p,className:a(e.className,X),icon:i,size:n,themeColor:r,rotate:l,flip:d})};g.states=it;g.options=rt;g.defaultOptions=W;g.className=X;g.moduleName=he;g.folderName=Me;g.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 ne="button",Ae=ne;var v=require("react/jsx-runtime"),G="k-button",at=["icon-button"],lt=[m.hover,m.focus,m.active,m.selected,m.disabled,m.generating],dt={size:[s.undefined,s.xsmall,s.small,s.medium,s.large],rounded:[h.undefined,h.none,h.small,h.medium,h.large,h.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]},se={showArrow:!1,arrowIconName:"chevron-down"},u=e=>{let{as:t="button",size:n,rounded:r,fillMode:i,themeColor:c,showArrow:l=se.showArrow,arrowIconName:d=se.arrowIconName,variant:y,hover:b,focus:p,active:A,selected:x,disabled:B,togglable:z,ariaDisabled:O,icon:N,iconSize:T,text:_,iconClassName:De,className:He,...Fe}=e,$e=N!=null,Ve=e.children!==void 0;return(0,v.jsxs)(t,{className:a(He,G,be(G,y),I(G,{size:n,rounded:r,fillMode:i,themeColor:c}),H(G,{hover:b,focus:p,active:A,disabled:B||O,selected:x}),{"k-icon-button":!_&&!Ve&&$e}),"aria-pressed":z?x?"true":"false":void 0,...Fe,"aria-disabled":O?"true":void 0,disabled:B||void 0,children:[typeof N=="string"&&N&&(0,v.jsx)(g,{className:a(De,"k-button-icon"),icon:N,size:T}),N&&typeof N!="string"&&(0,v.jsx)(v.Fragment,{children:N}),_?(0,v.jsxs)(v.Fragment,{children:[_&&(0,v.jsx)("span",{className:"k-button-text",children:_}),e.children]}):e.children&&(0,v.jsx)("span",{className:"k-button-text",children:e.children}),l&&(0,v.jsx)("span",{className:"k-menu-button-arrow k-button-arrow",children:(0,v.jsx)(g,{icon:d})})]})};u.states=lt;u.options=dt;u.variants=at;u.className=G;u.defaultOptions=se;u.moduleName=ne;u.folderName=Ae;u.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 Oe=require("react/jsx-runtime"),ke=e=>(0,Oe.jsx)(u,{icon:"folder",...e,"aria-label":e["aria-label"]||"Folder",children:void 0});var Ce=require("react/jsx-runtime"),Ee=e=>(0,Ce.jsx)(u,{icon:"folder",children:"Button",...e});var Ie=require("react/jsx-runtime"),Te=e=>(0,Ie.jsx)(u,{children:"Button",...e});var Q=require("react/jsx-runtime"),ut=u.options,ct=u.states,mt={...u.defaultOptions,variant:"text"},pt=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],ft=[],D=e=>{let{variant:t,...n}=e;switch(t){case"icon-only":return(0,Q.jsx)(ke,{...n,icon:"star"});case"icon-and-text":return(0,Q.jsx)(Ee,{...n,icon:"star",children:"Button"});default:return(0,Q.jsx)(Te,{...n,children:"Button"})}};D.options=ut;D.states=ct;D.variants=pt;D.defaultOptions=mt;D.modifiers=ft;D.className=u.className;var ie="menu-button",Le=ie;var Se=require("react/jsx-runtime"),we="k-menu-button",xt=[m.hover,m.focus,m.active,m.selected,m.disabled],bt={size:[s.undefined,s.xsmall,s.small,s.medium,s.large],rounded:[h.undefined,h.none,h.small,h.medium,h.large,h.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]},re={showArrow:!0,arrowIconName:"chevron-down"},k=e=>{let{size:t,rounded:n,fillMode:r,themeColor:i,hover:c,focus:l,active:d,selected:y,disabled:b,icon:p,text:A,showArrow:x=re.showArrow,arrowIconName:B=re.arrowIconName,expanded:z,...O}=e;return(0,Se.jsx)(u,{...O,className:a(e.className,we),text:A,size:t,rounded:n,fillMode:r,themeColor:i,hover:c,focus:l,active:d,selected:y,disabled:b,ariaDisabled:b||void 0,icon:p,showArrow:x,arrowIconName:B,"aria-expanded":z?"true":"false",...!A&&p&&!e["aria-label"]&&{"aria-label":"Menu"}})};k.states=xt;k.options=bt;k.className=we;k.defaultOptions=re;k.moduleName=ie;k.folderName=Le;k.ariaSpec={selector:".k-menu-button",rules:[{selector:".k-menu-button",attribute:"role=button or nodeName=button",usage:"Omitted if the button DOM element is used."},{selector:".k-menu-button",attribute:"aria-label (when icon-only)",usage:"Required when no text is visible in the button."},{selector:".k-menu-button",attribute:"aria-expanded=true/false",usage:"Announces the state of the popup visibility."},{selector:".k-menu-button",attribute:"aria-controls=.k-menu-group id (when open)",usage:"Points to the popup element. Builds a relationship between the button and the popup."},{selector:".k-menu-button.k-disabled",attribute:"aria-disabled=true",usage:"Rendered only when the button is disabled."},{selector:".k-menu-group",attribute:"role=list",usage:"Announces the list role of the popup."},{selector:".k-menu-item",attribute:"role=listitem",usage:"Announces the listitem role of the popup items."}]};var q="menu",Y=q;var Be=require("react/jsx-runtime"),ae="k-menu-group",Nt=[],ht={size:[s.undefined,s.small,s.medium,s.large]},Mt={},R=e=>{let{children:t,size:n,...r}=e;return(0,Be.jsx)("ul",{role:"menu",...r,className:a(e.className,ae,I(ae,{size:n})),children:t})};R.states=Nt;R.options=ht;R.className=ae;R.defaultOptions=Mt;R.moduleName=q;R.folderName=Y;var w=require("react/jsx-runtime"),le="k-menu-item",gt=[m.hover,m.focus,m.active,m.selected,m.disabled],vt={},de={dir:"ltr",iconPosition:"before"},C=e=>{let{hover:t,focus:n,active:r,selected:i,disabled:c,icon:l,text:d,first:y,last:b,showArrow:p,arrowIconName:A,iconPosition:x=de.iconPosition,dir:B=de.dir,children:z,popup:O,expanded:N,...T}=e,_=A;return _||(_=B==="rtl"?"chevron-left":"chevron-right"),(0,w.jsxs)("li",{role:"menuitem",...T,className:a(e.className,le,"k-item",H(le,{focus:n,disabled:c}),{"k-first":y,"k-last":b}),...p&&{"aria-haspopup":"menu"},...p&&{"aria-expanded":N?"true":"false"},...c&&{"aria-disabled":"true"},...n&&{tabIndex:0},children:[(0,w.jsxs)("span",{className:a("k-link k-menu-link",H("k-menu-link",{hover:t,active:r,selected:i,disabled:c})),children:[l&&x==="before"&&(0,w.jsx)(g,{className:"k-menu-link-icon",icon:l}),(0,w.jsx)("span",{className:"k-menu-link-text",children:d}),l&&x==="after"&&(0,w.jsx)(g,{className:"k-menu-link-icon",icon:l}),p&&(0,w.jsx)("span",{className:"k-menu-expand-arrow","aria-hidden":"true",children:(0,w.jsx)(g,{icon:_})})]}),z,O]})};C.states=gt;C.options=vt;C.className=le;C.defaultOptions=de;C.moduleName=q;C.folderName=Y;var ue="popup",_e=ue;var me=require("react/jsx-runtime"),Re="k-animation-container",yt=[],At={},ce={positionMode:"absolute",shown:!0},P=e=>{let{positionMode:t=ce.positionMode,shown:n=ce.shown,animationStyle:r,offset:i,...c}=e;return(0,me.jsx)("div",{...c,style:{...i,...e.style},className:a(e.className,Re,{"k-animation-container-shown":n,"k-animation-container-fixed":t==="fixed"}),children:(0,me.jsx)("div",{className:"k-child-animation-container",style:r,children:e.children})})};P.states=yt;P.options=At;P.className=Re;P.defaultOptions=ce;P.moduleName=ue;P.folderName=_e;var pe="popup",Pe=pe;var fe=require("react/jsx-runtime"),Ke="k-popup",kt=[],Ot={},ze={positionMode:"absolute"},S=e=>{let{offset:t,positionMode:n=ze.positionMode,animationStyle:r,containerClassName:i,containerRole:c,containerAriaLabel:l,...d}=e;return(0,fe.jsx)(P,{positionMode:n,offset:t,animationStyle:r,className:i,role:c,"aria-label":l,children:(0,fe.jsx)("div",{...d,className:a(e.className,Ke),children:e.children})})};S.states=kt;S.options=Ot;S.className=Ke;S.defaultOptions=ze;S.moduleName=pe;S.folderName=Pe;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.'}]};var f=require("react/jsx-runtime"),Et=u.states,Ue={...u.defaultOptions,variant:"text"},Ct=u.options,Tt=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],It=[{name:"opened",title:"Opened"}],K=e=>{let{variant:t,modifiers:n,...r}={...Ue,...e},i={},c=(0,f.jsx)(S,{className:"k-menu-popup",children:(0,f.jsxs)(R,{size:r.size,children:[(0,f.jsx)(C,{first:!0,text:"Menu Item"}),(0,f.jsx)(C,{text:"Menu Item"}),(0,f.jsx)(C,{last:!0,text:"Menu Item"})]})}),l;switch(t){case"icon-only":l=(0,f.jsx)("div",{children:(0,f.jsx)(k,{...r,...i,icon:"star"})});break;case"icon-and-text":l=(0,f.jsx)("div",{children:(0,f.jsx)(k,{...r,...i,icon:"star",children:"Dropdown Button"})});break;default:l=(0,f.jsx)("div",{children:(0,f.jsx)(k,{...r,...i,children:"Dropdown Button"})});break}return(0,f.jsxs)(f.Fragment,{children:[l,(n==null?void 0:n.opened)&&c]})};K.options=Ct;K.states=Et;K.variants=Tt;K.defaultOptions=Ue;K.modifiers=It;K.className=k.className;var Lt=K;