UNPKG

@progress/kendo-themes-html

Version:

A collection of HTML helpers used for developing Kendo UI themes

2 lines (1 loc) 13.9 kB
var d=(...e)=>e.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?d(...t):typeof t=="object"?Object.keys(t).map((a,r)=>t[r]||t[a]&&a||null).filter(a=>a!==null).join(" "):t).filter(t=>!!t).join(" ");var k=(e,t)=>d({[`${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"}),re=(e,t)=>{let{valid:a,invalid:r,hover:s,focus:c,checked:u,active:l,selected:f,disabled:m,indeterminate:p,loading:g,empty:v,readonly:D,highlighted:G,...A}=t;return d({"k-valid":a,"k-invalid":r,"k-hover":s,"k-focus":c,"k-checked":u,"k-active":l,"k-selected":f,"k-disabled":m,"k-indeterminate":p&&!u,"k-loading":g,"k-empty":v,"k-readonly":D,"k-highlighted":G},Object.keys(A).reduce((h,N)=>(N.startsWith("k-")?h[N]=A[N]:h[`k-${N}`]=A[N],h),{}))};function ie(e,t){if(!t)return{};let a=Array.isArray(t)?t:[t];return Object.fromEntries(a.map(r=>[`k-${r}`,!0]))}var o={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"},T={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},b={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"},w={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 W={};function K(e){return W[e]=(W[e]||0)+1,`k-${e}-${W[e]}`}import{jsx as Be}from"react/jsx-runtime";var se="k-calendar-view",q={orientation:"horizontal",calendarView:"month"},V=e=>{let{orientation:t=q.orientation,calendarView:a=q.calendarView,gridRole:r,ariaLabelledBy:s,...c}=e;return Be("div",{...c,className:d(e.className,se,`k-calendar-${a}view`,"k-align-items-start","k-justify-content-center",{"k-hstack":t==="horizontal","k-vstack":t==="vertical"}),...r?{role:"grid","aria-labelledby":s,tabIndex:0}:{},children:e.children})};V.className=se;V.defaultOptions=q;import{Fragment as Re,jsx as le}from"react/jsx-runtime";var J="k-font-icon",Ee=[],Se={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]},Le={},I=e=>{let{size:t,themeColor:a,icon:r,rotate:s,flip:c,...u}=e;return r?le("span",{...u,className:d(e.className,J,k(J,{size:t}),{[`k-i-${r}`]:r,[`k-color-${a}`]:a,[`k-rotate-${s}`]:s,"k-flip-h":c==="h"||c==="both","k-flip-v":c==="v"||c==="both"}),"aria-hidden":"true"}):le(Re,{})};I.states=Ee;I.options=Se;I.className=J;I.defaultOptions=Le;var de=I;import{Fragment as De,jsx as P}from"react/jsx-runtime";var Q="k-svg-icon",_e=[],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:[b.outline,b.solid,b.duotone]},X={viewBox:"0 0 24 24",variant:b.outline},O=e=>{let{size:t,themeColor:a,rotate:r,flip:s,viewBox:c=X.viewBox,variant:u=X.variant,icon:l,...f}=e;if(!l)return P(De,{});if(l==="none")return P("span",{...f,className:d(e.className,Q,k("k-icon",{size:t}),"k-none"),"aria-hidden":"true"});let m=typeof l=="object"&&l.name&&l.name,p=typeof l=="object"?u&&l.variants?.[u]||l.variants?.outline||l.content:void 0;return P("span",{...f,className:d(e.className,Q,k("k-icon",{size:t}),{[`k-svg-i-${m}`]:m,[`k-color-${a}`]:a,[`k-rotate-${r}`]:r,"k-flip-h":s==="h"||s==="both","k-flip-v":s==="v"||s==="both"}),"aria-hidden":"true",children:P("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof l=="object"?l.viewBox:c,dangerouslySetInnerHTML:p!==void 0?{__html:p}:void 0,children:l?void 0:e.children})})};O.states=_e;O.options=He;O.className=Q;O.defaultOptions=X;var Y=O;import*as Z from"@progress/kendo-svg-icons";var ce="icon",ue="icons";import{useContext as Ke}from"react";import{createContext as Fe}from"react";var me=Fe({iconsType:"svg"});import{Fragment as pe,jsx as B}from"react/jsx-runtime";var $="k-icon",Ve=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),Pe=[],$e={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:[b.outline,b.solid,b.duotone]},U={viewBox:"0 0 24 24",type:"svg",variant:b.outline},x=e=>{let{iconsType:t}=Ke(me),{size:a,themeColor:r,icon:s,type:c=t||U.type,rotate:u,flip:l,viewBox:f=U.viewBox,variant:m=U.variant,...p}=e;if(!s)return B(pe,{});if((t||c)==="svg"){if(s==="none")return B(Y,{...p,className:d(e.className,$),icon:s,size:a,variant:m});let v=Z[s]?s:Ve(`${s}-icon`);return Z[v]?B(Y,{...p,className:d(e.className,$),icon:Z[v],size:a,themeColor:r,rotate:u,flip:l,viewBox:f,variant:m}):B(pe,{})}return B(de,{...p,className:d(e.className,$),icon:s,size:a,themeColor:r,rotate:u,flip:l})};x.states=Pe;x.options=$e;x.defaultOptions=U;x.className=$;x.moduleName=ce;x.folderName=ue;x.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="button",fe=j;import{Fragment as he,jsx as z,jsxs as be}from"react/jsx-runtime";var E="k-button",Ue=["icon-button"],Ge=[w.hover,w.focus,w.active,w.selected,w.disabled,w.generating],We={size:[o.undefined,o.xsmall,o.small,o.medium,o.large],rounded:[C.undefined,C.none,C.small,C.medium,C.large,C.full],fillMode:[T.undefined,T.solid,T.flat,T.outline,T.clear,T.link],themeColor:[n.undefined,n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info,n.inverse]},ee={showArrow:!1,arrowIconName:"chevron-down"},i=e=>{let{as:t="button",size:a,rounded:r,fillMode:s,themeColor:c,showArrow:u=ee.showArrow,arrowIconName:l=ee.arrowIconName,variant:f,hover:m,focus:p,active:g,selected:v,disabled:D,togglable:G,ariaDisabled:A,icon:h,iconSize:N,text:F,iconClassName:Ae,className:ze,...Me}=e,Ie=h!=null,Oe=e.children!==void 0;return be(t,{className:d(ze,E,ie(E,f),k(E,{size:a,rounded:r,fillMode:s,themeColor:c}),re(E,{hover:m,focus:p,active:g,disabled:D||A,selected:v}),{"k-icon-button":!F&&!Oe&&Ie}),"aria-pressed":G?v?"true":"false":void 0,...Me,"aria-disabled":A?"true":void 0,disabled:D||void 0,children:[typeof h=="string"&&h&&z(x,{className:d(Ae,"k-button-icon"),icon:h,size:N}),h&&typeof h!="string"&&z(he,{children:h}),F?be(he,{children:[F&&z("span",{className:"k-button-text",children:F}),e.children]}):e.children&&z("span",{className:"k-button-text",children:e.children}),u&&z("span",{className:"k-menu-button-arrow k-button-arrow",children:z(x,{icon:l})})]})};i.states=Ge;i.options=We;i.variants=Ue;i.className=E;i.defaultOptions=ee;i.moduleName=j;i.folderName=fe;i.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 qe}from"react/jsx-runtime";var xe=e=>qe(i,{icon:"folder",...e,"aria-label":e["aria-label"]||"Folder",children:void 0});import{jsx as Je}from"react/jsx-runtime";var ge=e=>Je(i,{icon:"folder",children:"Button",...e});import{jsx as Qe}from"react/jsx-runtime";var ve=e=>Qe(i,{children:"Button",...e});import{jsx as te}from"react/jsx-runtime";var Xe=i.options,Ye=i.states,Ze={...i.defaultOptions,variant:"text"},je=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],et=[],M=e=>{let{variant:t,...a}=e;switch(t){case"icon-only":return te(xe,{...a,icon:"star"});case"icon-and-text":return te(ge,{...a,icon:"star",children:"Button"});default:return te(ve,{...a,children:"Button"})}};M.options=Xe;M.states=Ye;M.variants=je;M.defaultOptions=Ze;M.modifiers=et;M.className=i.className;import{jsx as S,jsxs as ke}from"react/jsx-runtime";var ye="k-calendar-header",tt={size:[o.undefined,o.small,o.medium,o.large]},L={calendarTitleText:"October 2021",showToday:!0,showNavigationButtons:!0,orientation:"horizontal"},R=e=>{let{calendarTitleText:t=L.calendarTitleText,showToday:a=L.showToday,showNavigationButtons:r=L.showNavigationButtons,orientation:s=L.orientation,size:c,calendarView:u,dir:l,titleId:f,...m}=e,p=l==="rtl"?"chevron-right":"chevron-left",g=l==="rtl"?"chevron-left":"chevron-right",v=f||K("calendar-title");return ke("div",{...m,className:d(e.className,ye,{"k-vstack":s==="vertical"}),children:[S(i,{disabled:u==="century",className:"k-calendar-title",text:t,size:c,fillMode:"flat",themeColor:"primary",id:v,tabIndex:-1,"aria-label":`Navigate to parent view: ${t}`,...u==="century"?{"aria-disabled":"true"}:{}}),S("span",{className:"k-spacer"}),ke("span",{className:"k-calendar-nav",children:[r&&S(i,{className:"k-calendar-nav-prev",icon:p,size:c,fillMode:"flat",tabIndex:-1,"aria-label":"Navigate to previous view"}),a&&S(i,{size:c,fillMode:"flat",className:"k-calendar-nav-today",tabIndex:-1,children:"Today"}),r&&S(i,{className:"k-calendar-nav-next",icon:g,size:c,fillMode:"flat",tabIndex:-1,"aria-label":"Navigate to next view"})]})]})};R.options=tt;R.className=ye;R.defaultOptions=L;import{jsx as Ne}from"react/jsx-runtime";var Ce="k-calendar-footer",ot={size:[o.undefined,o.small,o.medium,o.large]},Te={calendarFooterText:"Tuesday, October 12, 2021"},_=e=>{let{size:t,calendarFooterText:a=Te.calendarFooterText,...r}=e;return Ne("div",{...r,className:d(e.className,Ce),children:Ne(i,{size:t,fillMode:"flat",themeColor:"primary",className:"k-calendar-nav-today",children:a})})};_.options=ot;_.className=Ce;_.defaultOptions=Te;var oe="calendar",we=oe;import{jsx as ne,jsxs as rt}from"react/jsx-runtime";var ae="k-calendar",nt=[],at={size:[o.undefined,o.small,o.medium,o.large]},H={showCalendarHeader:!0,orientation:"horizontal",calendarView:"month",calendarTitleText:"October 2021"},y=e=>{let{size:t,orientation:a=H.orientation,calendarView:r=H.calendarView,calendarTitleText:s=H.calendarTitleText,showCalendarHeader:c=H.showCalendarHeader,showWeek:u,showCalendarFooter:l,calendarFooterText:f,dir:m,...p}=e,g=K("calendar-title");return rt("div",{...p,dir:m,className:d(e.className,ae,k(ae,{size:t}),{"k-week-number":u}),children:[c&&ne(R,{calendarView:r,showToday:!l,calendarTitleText:s,orientation:a,size:t,dir:m,titleId:g}),ne(V,{calendarView:r,orientation:a,gridRole:!0,ariaLabelledBy:g,children:e.children}),l&&ne(_,{calendarFooterText:f,size:t})]})};y.states=nt;y.options=at;y.className=ae;y.defaultOptions=H;y.moduleName=oe;y.folderName=we;y.ariaSpec={selector:".k-calendar:not(.k-calendar-infinite):not(.k-calendar-range)",rules:[{selector:".k-calendar:not(.k-calendar-infinite):not(.k-calendar-range) .k-calendar-view",attribute:"role=grid",usage:"Specifies the role of the Calendar view container."},{selector:".k-calendar:not(.k-calendar-infinite):not(.k-calendar-range) .k-calendar-view",attribute:"aria-labelledby",usage:"Pointing to the current view label (e.g. March 2022 or 2020-2029)."},{selector:".k-calendar:not(.k-calendar-infinite):not(.k-calendar-range) .k-calendar-view",attribute:"tabindex=0",usage:"Makes the grid focusable."},{selector:".k-calendar:not(.k-calendar-infinite):not(.k-calendar-range) .k-calendar-table",attribute:"role=none",usage:"Inner table has role removed \u2014 content belongs to the grid on the view."},{selector:".k-calendar-thead",attribute:"role=rowgroup",usage:"Groups header rows."},{selector:".k-calendar-tbody",attribute:"role=rowgroup",usage:"Groups body rows."},{selector:".k-calendar-tr",attribute:"role=row",usage:"Each row in the calendar table."},{selector:".k-calendar-thead .k-calendar-th",attribute:"role=columnheader",usage:"Column header for day names."},{selector:".k-calendar-thead .k-calendar-th",attribute:"scope=col",usage:"Specifies the header applies to a column."},{selector:".k-calendar-thead .k-calendar-th",attribute:"aria-label",usage:"Full name of the day of the week."},{selector:".k-calendar-td:not(.k-alt):not(.k-empty)",attribute:"role=gridcell",usage:"Date cells in the calendar body."},{selector:".k-calendar-td.k-selected",attribute:"aria-selected=true",usage:"Indicates the selected date."},{selector:".k-calendar-td.k-disabled",attribute:"aria-disabled=true",usage:"Indicates a disabled date."},{selector:".k-calendar-nav-next,.k-calendar-nav-prev",attribute:"tabindex=-1",usage:"Navigation buttons are not focusable."},{selector:".k-calendar-nav-next,.k-calendar-nav-prev",attribute:"aria-label",usage:"Describes the navigation button purpose."},{selector:".k-calendar-title",attribute:"tabindex=-1",usage:"Title button is not focusable."},{selector:".k-calendar-title",attribute:"aria-label",usage:"Describes the title button purpose."},{selector:".k-calendar-nav-today",attribute:"tabindex=-1",usage:"Today link/button is not focusable."}]};var Oo=y;export{y as Calendar,Oo as default};