@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
2 lines (1 loc) • 13 kB
JavaScript
var r=(...e)=>e.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?r(...t):typeof t=="object"?Object.keys(t).map((s,a)=>t[a]||t[s]&&s||null).filter(s=>s!==null).join(" "):t).filter(t=>!!t).join(" ");var T=(e,t)=>r({[`${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"}),z=(e,t)=>{let{valid:s,invalid:a,hover:l,focus:i,checked:d,active:m,selected:u,disabled:p,indeterminate:f,loading:M,empty:k,readonly:R,highlighted:G,...B}=t;return r({"k-valid":s,"k-invalid":a,"k-hover":l,"k-focus":i,"k-checked":d,"k-active":m,"k-selected":u,"k-disabled":p,"k-indeterminate":f&&!d,"k-loading":M,"k-empty":k,"k-readonly":R,"k-highlighted":G},Object.keys(B).reduce((N,A)=>(A.startsWith("k-")?N[A]=B[A]:N[`k-${A}`]=B[A],N),{}))};function me(e,t){if(!t)return{};let s=Array.isArray(t)?t:[t];return Object.fromEntries(s.map(a=>[`k-${a}`,!0]))}var n={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},C={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"},O={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},x={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"},v={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 Ue,jsx as E,jsxs as q}from"react/jsx-runtime";var De=[v.focus],J=e=>{let{type:t,focus:s,separator:a,...l}=e,i,d=["00","01","02","03","04","05","06","07","08","09"];switch(t){case"dd":i="Day";break;case"HH":i="Hour";break;case"mm":i="Minute";break;case"ss":i="Second";break;case"SSS":i="Millisecond",d=["000","001","002","003","004","005","006","007","008","009"];break;case"tt":i="AM/PM",d=["AM","PM"];break;default:i="Column Name";break}let m=d.map((u,p)=>E("li",{className:"k-item",role:"option","aria-selected":"false",children:E("span",{children:u})},p));return q(Ue,{children:[a&&E("div",{className:"k-time-separator",children:":"}),q("div",{...l,className:r(e.className,"k-time-list-wrapper",z("k-time-list-wrapper",{focus:s})),children:[E("span",{className:"k-title",children:i}),E("div",{className:"k-time-list",role:"listbox","aria-label":i,children:q("div",{className:"k-content k-scrollable k-time-container",children:[E("ul",{className:"k-reset",style:{transform:"translateY(97px)"},role:"none",children:m}),E("div",{className:"k-scrollable-placeholder"})]})})]})]})};J.states=De;import{jsx as Ht,jsxs as Rt}from"react/jsx-runtime";var X="action-buttons",ce=X;import{jsx as Ve}from"react/jsx-runtime";var D="k-actions",$e=[],Fe={},W={alignment:"start",orientation:"horizontal"},h=e=>{let{alignment:t=W.alignment,orientation:s=W.orientation,...a}=e;return Ve("div",{...a,className:r(D,{[`${D}-${t}`]:t,[`${D}-${s}`]:s},e.className),children:e.children})};h.states=$e;h.options=Fe;h.className=D;h.defaultOptions=W;h.moduleName=X;h.folderName=ce;import{Fragment as Xe,jsx as de}from"react/jsx-runtime";var Y="k-font-icon",Ge=[],qe={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info]},Je={},L=e=>{let{size:t,themeColor:s,icon:a,rotate:l,flip:i,...d}=e;return a?de("span",{...d,className:r(e.className,Y,T(Y,{size:t}),{[`k-i-${a}`]:a,[`k-color-${s}`]:s,[`k-rotate-${l}`]:l,"k-flip-h":i==="h"||i==="both","k-flip-v":i==="v"||i==="both"}),"aria-hidden":"true"}):de(Xe,{})};L.states=Ge;L.options=qe;L.className=Y;L.defaultOptions=Je;var ue=L;import{Fragment as Qe,jsx as U}from"react/jsx-runtime";var Q="k-svg-icon",We=[],Ye={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info],variant:[x.outline,x.solid,x.duotone]},Z={viewBox:"0 0 24 24",variant:x.outline},w=e=>{let{size:t,themeColor:s,rotate:a,flip:l,viewBox:i=Z.viewBox,variant:d=Z.variant,icon:m,...u}=e;if(!m)return U(Qe,{});if(m==="none")return U("span",{...u,className:r(e.className,Q,T("k-icon",{size:t}),"k-none"),"aria-hidden":"true"});let p=typeof m=="object"&&m.name&&m.name,f=typeof m=="object"?d&&m.variants?.[d]||m.variants?.outline||m.content:void 0;return U("span",{...u,className:r(e.className,Q,T("k-icon",{size:t}),{[`k-svg-i-${p}`]:p,[`k-color-${s}`]:s,[`k-rotate-${a}`]:a,"k-flip-h":l==="h"||l==="both","k-flip-v":l==="v"||l==="both"}),"aria-hidden":"true",children:U("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof m=="object"?m.viewBox:i,dangerouslySetInnerHTML:f!==void 0?{__html:f}:void 0,children:m?void 0:e.children})})};w.states=We;w.options=Ye;w.className=Q;w.defaultOptions=Z;var j=w;import*as ee from"@progress/kendo-svg-icons";var pe="icon",fe="icons";import{useContext as je}from"react";import{createContext as Ze}from"react";var Ne=Ze({iconsType:"svg"});import{Fragment as xe,jsx as P}from"react/jsx-runtime";var $="k-icon",et=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),tt=[],ot={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info],variant:[x.outline,x.solid,x.duotone]},F={viewBox:"0 0 24 24",type:"svg",variant:x.outline},b=e=>{let{iconsType:t}=je(Ne),{size:s,themeColor:a,icon:l,type:i=t||F.type,rotate:d,flip:m,viewBox:u=F.viewBox,variant:p=F.variant,...f}=e;if(!l)return P(xe,{});if((t||i)==="svg"){if(l==="none")return P(j,{...f,className:r(e.className,$),icon:l,size:s,variant:p});let k=ee[l]?l:et(`${l}-icon`);return ee[k]?P(j,{...f,className:r(e.className,$),icon:ee[k],size:s,themeColor:a,rotate:d,flip:m,viewBox:u,variant:p}):P(xe,{})}return P(ue,{...f,className:r(e.className,$),icon:l,size:s,themeColor:a,rotate:d,flip:m})};b.states=tt;b.options=ot;b.defaultOptions=F;b.className=$;b.moduleName=pe;b.folderName=fe;b.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 te="button",he=te;import{Fragment as be,jsx as _,jsxs as ge}from"react/jsx-runtime";var H="k-button",nt=["icon-button"],st=[v.hover,v.focus,v.active,v.selected,v.disabled,v.generating],it={size:[n.undefined,n.xsmall,n.small,n.medium,n.large],rounded:[C.undefined,C.none,C.small,C.medium,C.large,C.full],fillMode:[O.undefined,O.solid,O.flat,O.outline,O.clear,O.link],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.inverse]},oe={showArrow:!1,arrowIconName:"chevron-down"},c=e=>{let{as:t="button",size:s,rounded:a,fillMode:l,themeColor:i,showArrow:d=oe.showArrow,arrowIconName:m=oe.arrowIconName,variant:u,hover:p,focus:f,active:M,selected:k,disabled:R,togglable:G,ariaDisabled:B,icon:N,iconSize:A,text:K,iconClassName:Pe,className:He,...Re}=e,Ke=N!=null,ze=e.children!==void 0;return ge(t,{className:r(He,H,me(H,u),T(H,{size:s,rounded:a,fillMode:l,themeColor:i}),z(H,{hover:p,focus:f,active:M,disabled:R||B,selected:k}),{"k-icon-button":!K&&!ze&&Ke}),"aria-pressed":G?k?"true":"false":void 0,...Re,"aria-disabled":B?"true":void 0,disabled:R||void 0,children:[typeof N=="string"&&N&&_(b,{className:r(Pe,"k-button-icon"),icon:N,size:A}),N&&typeof N!="string"&&_(be,{children:N}),K?ge(be,{children:[K&&_("span",{className:"k-button-text",children:K}),e.children]}):e.children&&_("span",{className:"k-button-text",children:e.children}),d&&_("span",{className:"k-menu-button-arrow k-button-arrow",children:_(b,{icon:m})})]})};c.states=st;c.options=it;c.variants=nt;c.className=H;c.defaultOptions=oe;c.moduleName=te;c.folderName=he;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 rt}from"react/jsx-runtime";var Te=e=>rt(c,{icon:"folder",...e,"aria-label":e["aria-label"]||"Folder",children:void 0});import{jsx as at}from"react/jsx-runtime";var ve=e=>at(c,{icon:"folder",children:"Button",...e});import{jsx as lt}from"react/jsx-runtime";var Se=e=>lt(c,{children:"Button",...e});import{jsx as ne}from"react/jsx-runtime";var mt=c.options,ct=c.states,dt={...c.defaultOptions,variant:"text"},ut=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],pt=[],I=e=>{let{variant:t,...s}=e;switch(t){case"icon-only":return ne(Te,{...s,icon:"star"});case"icon-and-text":return ne(ve,{...s,icon:"star",children:"Button"});default:return ne(Se,{...s,children:"Button"})}};I.options=mt;I.states=ct;I.variants=ut;I.defaultOptions=dt;I.modifiers=pt;I.className=c.className;import{jsx as qo,jsxs as Jo}from"react/jsx-runtime";var se="popup",ye=se;import{jsx as Me}from"react/jsx-runtime";var ke="k-animation-container",ft=[],Nt={},ie={positionMode:"absolute",shown:!0},S=e=>{let{positionMode:t=ie.positionMode,shown:s=ie.shown,animationStyle:a,offset:l,...i}=e;return Me("div",{...i,style:{...l,...e.style},className:r(e.className,ke,{"k-animation-container-shown":s,"k-animation-container-fixed":t==="fixed"}),children:Me("div",{className:"k-child-animation-container",style:a,children:e.children})})};S.states=ft;S.options=Nt;S.className=ke;S.defaultOptions=ie;S.moduleName=se;S.folderName=ye;var re="popup",Ae=re;import{jsx as Ce}from"react/jsx-runtime";var Oe="k-popup",xt=[],ht={},Ee={positionMode:"absolute"},g=e=>{let{offset:t,positionMode:s=Ee.positionMode,animationStyle:a,containerClassName:l,containerRole:i,containerAriaLabel:d,...m}=e;return Ce(S,{positionMode:s,offset:t,animationStyle:a,className:l,role:i,"aria-label":d,children:Ce("div",{...m,className:r(e.className,Oe),children:e.children})})};g.states=xt;g.options=ht;g.className=Oe;g.defaultOptions=Ee;g.moduleName=re;g.folderName=Ae;g.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 gn,jsx as hn,jsxs as bn}from"react/jsx-runtime";import{Fragment as En,jsx as Cn,jsxs as On}from"react/jsx-runtime";import{Fragment as zn,jsx as Rn,jsxs as Kn}from"react/jsx-runtime";var _e="time-selector",Ie="timeselector";import{Fragment as Le,jsx as V,jsxs as we}from"react/jsx-runtime";var le="k-timeselector",bt=[],gt={size:[n.undefined,n.small,n.medium,n.large]},Tt={},y=e=>{let{size:t,header:s,fastSelection:a,columns:l,focusedColumn:i,...d}=e,m=l.map(function(u,p){let f=!1,M=!0;return u===i&&(f=!0),(p===0||u==="tt")&&(M=!1),V(J,{type:u,focus:f,separator:M},p)});return we("div",{...d,className:r(e.className,le,T(le,{size:t})),role:"group","aria-label":"Time selector",children:[V(Le,{children:s}),V(Le,{children:a}),we("div",{className:"k-time-list-container",children:[V("span",{className:"k-time-highlight"}),m]})]})};y.states=bt;y.options=gt;y.className=le;y.defaultOptions=Tt;y.moduleName=_e;y.folderName=Ie;y.ariaSpec={selector:".k-timeselector",rules:[{selector:".k-timeselector",attribute:"role=group",usage:"Groups the time selection columns."},{selector:".k-timeselector",attribute:"aria-label",usage:"Describes the time selector purpose."},{selector:".k-time-list",attribute:"role=listbox",usage:"Each time column list acts as a listbox."},{selector:".k-time-list",attribute:"aria-label",usage:"Describes which time unit the column selects."},{selector:".k-time-list-wrapper .k-reset",attribute:"role=none",usage:"Removes semantic meaning from the ul element."},{selector:".k-time-list-wrapper .k-item",attribute:"role=option",usage:"Each item in the time list is an option."}]};var ae=y;export{y as TimeSelector,ae as default};