@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
2 lines (1 loc) • 17.3 kB
JavaScript
import le from"react";var i=(...e)=>e.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?i(...t):typeof t=="object"?Object.keys(t).map((o,s)=>t[s]||t[o]&&o||null).filter(o=>o!==null).join(" "):t).filter(t=>!!t).join(" ");var A=(e,t)=>i({[`${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"}),y=(e,t)=>{let{valid:o,invalid:s,hover:a,focus:m,checked:d,active:c,selected:b,disabled:L,indeterminate:f,loading:E,empty:g,readonly:T,highlighted:se,...$}=t;return i({"k-valid":o,"k-invalid":s,"k-hover":a,"k-focus":m,"k-checked":d,"k-active":c,"k-selected":b,"k-disabled":L,"k-indeterminate":f&&!d,"k-loading":E,"k-empty":g,"k-readonly":T,"k-highlighted":se},Object.keys($).reduce((V,D)=>(D.startsWith("k-")?V[D]=$[D]:V[`k-${D}`]=$[D],V),{}))};var r={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"};var O={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"},l={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 re={};function p(e){return re[e]=(re[e]||0)+1,`k-${e}-${re[e]}`}import{jsx as ve}from"react/jsx-runtime";var De="k-list-group-sticky-header",ae=e=>ve("div",{className:i(De,e.className),children:ve("div",{className:"k-list-header-text",children:e.children})});import{jsx as Ge}from"react/jsx-runtime";var Pe="k-no-data",ne=e=>{let{live:t,...o}=e;return Ge("span",{...o,className:i(Pe,e.className),"aria-live":t?"polite":void 0,children:e.children})};var R="list",P=R;import{jsx as Ne,jsxs as Ie}from"react/jsx-runtime";var ce="k-list",Ue=[],Be={size:[r.undefined,r.small,r.medium,r.large]},Fe={},k=e=>{let{size:t,virtualization:o,children:s,header:a,selectAll:m,optionLabel:d,customValue:c,noData:b,screenReaders:L,...f}=e,g=le.Children.toArray(s)[0],T=g?.props?.children?le.Children.count(g.props.children):le.Children.count(s);return Ie("div",{...f,className:i(e.className,ce,A(ce,{size:t}),{"k-virtual-list":o}),children:[d,m,c,a&&Ne(ae,{children:a}),s||(b!==void 0?b:Ne(ne,{live:!0,children:"No data found."})),L&&s&&Ie(ne,{className:"k-sr-only",live:!0,children:[T," items found."]})]})};k.states=Ue;k.options=Be;k.className=ce;k.defaultOptions=Fe;k.moduleName=R;k.folderName=P;k.ariaSpec={selector:".k-list",rules:[{selector:".k-list .k-no-data",attribute:"aria-live=polite",usage:'Announces "No data found" to screen readers.'}]};import{jsx as Xe}from"react/jsx-runtime";var ye="k-list-container",$e=[],Ve={},We={},G=e=>{let{...t}=e;return Xe("div",{...t,className:i(e.className,ye),children:e.children})};G.states=$e;G.options=Ve;G.className=ye;G.defaultOptions=We;G.moduleName=R;G.folderName=P;var _="checkbox",U=_;import{jsx as Oe}from"react/jsx-runtime";var Q="k-checkbox",qe=[l.hover,l.focus,l.valid,l.invalid,l.required,l.disabled,l.checked,l.indeterminate],Je={size:[r.undefined,r.small,r.medium,r.large],rounded:[H.undefined,H.none,H.small,H.medium,H.large,H.full]},Qe={},C=e=>{let{id:t,checked:o,indeterminate:s,hover:a,focus:m,disabled:d,invalid:c,valid:b,required:L,size:f,rounded:E,wrapperRole:g,...T}=e;return Oe("span",{className:"k-checkbox-wrap",role:g,children:Oe("input",{...T,id:t,type:"checkbox",defaultChecked:o,required:L,disabled:d||void 0,"aria-invalid":c?"true":void 0,className:i(e.className,Q,A(Q,{size:f,rounded:E}),y(Q,{hover:a,focus:m,disabled:d,invalid:c,valid:b,indeterminate:s,checked:o}))})})};C.states=qe;C.options=Je;C.className=Q;C.defaultOptions=Qe;C.moduleName=_;C.folderName=U;C.ariaSpec={selector:".k-checkbox",rules:[{selector:".k-checkbox",attribute:"role=checkbox or type=checkbox",usage:"Announces the checkbox role of the element."},{selector:".k-checkbox",attribute:"label for or aria-label or aria-labelledby (when has accessible name)",usage:"The input requires an accessible name to which it will be assigned."},{selector:".k-checkbox",attribute:"aria-checked=true/false/mixed or checked",usage:"For native checkboxes the checked state is handled by the browser. aria-checked is used for custom implementations."},{selector:".k-checkbox",attribute:"aria-describedby (when has hint or error)",usage:"Points to the hint or error message for the checkbox."},{selector:".k-checkbox",attribute:"disabled or aria-disabled=true (when disabled)",usage:"For native checkboxes use the HTML disabled attribute. aria-disabled for custom implementations."},{selector:".k-invalid, .ng-invalid",attribute:"aria-invalid=true (when invalid)",usage:"Rendered only when the CheckBox is in a form and announces the invalid state."}]};var N=C;import{jsx as je}from"react/jsx-runtime";var Me="k-checkbox-list",Ye=[],Ze={},Ae={layout:"vertical"},h=e=>{let{layout:t=Ae.layout,...o}=e;return je("ul",{...o,className:i(e.className,Me,{[`k-list-${t}`]:t}),children:e.children})};h.states=Ye;h.options=Ze;h.className=Me;h.defaultOptions=Ae;h.moduleName=_;h.folderName=U;import{jsx as it}from"react/jsx-runtime";var Se="k-checkbox-list-item",et=[],tt={},ot={},x=e=>{let{...t}=e;return it("li",{...t,className:i(e.className,Se),children:e.children})};x.states=et;x.options=tt;x.className=Se;x.defaultOptions=ot;x.moduleName=_;x.folderName=U;import{Fragment as st,jsx as Ee,jsxs as rt}from"react/jsx-runtime";var S=({children:e="Label",id:t="cb-label-after",...o})=>rt(st,{children:[Ee(N,{id:t,...o}),Ee("label",{className:"k-checkbox-label",htmlFor:t,children:e})]});import{Fragment as Qo,jsx as Jo,jsxs as Yo}from"react/jsx-runtime";import{Fragment as oi,jsx as ti,jsxs as ii}from"react/jsx-runtime";import{Fragment as li,jsx as ni,jsxs as ci}from"react/jsx-runtime";import{jsx as ui}from"react/jsx-runtime";import{jsx as xi}from"react/jsx-runtime";import{jsx as gi}from"react/jsx-runtime";import{jsx as v,jsxs as Te}from"react/jsx-runtime";var at=h.options,nt=h.states,lt={...h.defaultOptions,variant:"vertical"},ct=[{name:"vertical",title:"Vertical"},{name:"horizontal",title:"Horizontal"}],mt=[],B=e=>{let{variant:t,...o}=e;return t==="horizontal"?Te(h,{layout:"horizontal",...o,children:[v(x,{children:v(S,{id:p("cb"),defaultChecked:!0,children:"Label"})}),v(x,{children:v(S,{id:p("cb"),children:"Label"})}),v(x,{children:v(S,{id:p("cb"),children:"Label"})})]}):Te(h,{...o,children:[v(x,{children:v(S,{id:p("cb"),defaultChecked:!0,children:"Label"})}),v(x,{children:v(S,{id:p("cb"),children:"Label"})}),v(x,{children:v(S,{id:p("cb"),children:"Label"})})]})};B.options=at;B.states=nt;B.variants=ct;B.defaultOptions=lt;B.modifiers=mt;B.className=h.className;import{jsx as ht}from"react/jsx-runtime";var dt=N.options,pt=N.states,ut=N.defaultOptions,bt=[],ft=[],F=e=>ht(S,{id:p("checkbox"),...e,defaultChecked:!0,children:"Label"});F.options=dt;F.states=pt;F.variants=bt;F.defaultOptions=ut;F.modifiers=ft;F.className=N.className;import{Fragment as Ct,jsx as Ke}from"react/jsx-runtime";var me="k-font-icon",xt=[],Lt={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]},kt={},W=e=>{let{size:t,themeColor:o,icon:s,rotate:a,flip:m,...d}=e;return s?Ke("span",{...d,className:i(e.className,me,A(me,{size:t}),{[`k-i-${s}`]:s,[`k-color-${o}`]:o,[`k-rotate-${a}`]:a,"k-flip-h":m==="h"||m==="both","k-flip-v":m==="v"||m==="both"}),"aria-hidden":"true"}):Ke(Ct,{})};W.states=xt;W.options=Lt;W.className=me;W.defaultOptions=kt;var He=W;import{Fragment as Nt,jsx as Y}from"react/jsx-runtime";var de="k-svg-icon",gt=[],vt={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:[O.outline,O.solid,O.duotone]},pe={viewBox:"0 0 24 24",variant:O.outline},X=e=>{let{size:t,themeColor:o,rotate:s,flip:a,viewBox:m=pe.viewBox,variant:d=pe.variant,icon:c,...b}=e;if(!c)return Y(Nt,{});if(c==="none")return Y("span",{...b,className:i(e.className,de,A("k-icon",{size:t}),"k-none"),"aria-hidden":"true"});let L=typeof c=="object"&&c.name&&c.name,f=typeof c=="object"?d&&c.variants?.[d]||c.variants?.outline||c.content:void 0;return Y("span",{...b,className:i(e.className,de,A("k-icon",{size:t}),{[`k-svg-i-${L}`]:L,[`k-color-${o}`]:o,[`k-rotate-${s}`]:s,"k-flip-h":a==="h"||a==="both","k-flip-v":a==="v"||a==="both"}),"aria-hidden":"true",children:Y("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof c=="object"?c.viewBox:m,dangerouslySetInnerHTML:f!==void 0?{__html:f}:void 0,children:c?void 0:e.children})})};X.states=gt;X.options=vt;X.className=de;X.defaultOptions=pe;var ue=X;import*as be from"@progress/kendo-svg-icons";var Re="icon",_e="icons";import{useContext as yt}from"react";import{createContext as It}from"react";var ze=It({iconsType:"svg"});import{Fragment as we,jsx as q}from"react/jsx-runtime";var Z="k-icon",Ot=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),Mt=[],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:[O.outline,O.solid,O.duotone]},j={viewBox:"0 0 24 24",type:"svg",variant:O.outline},I=e=>{let{iconsType:t}=yt(ze),{size:o,themeColor:s,icon:a,type:m=t||j.type,rotate:d,flip:c,viewBox:b=j.viewBox,variant:L=j.variant,...f}=e;if(!a)return q(we,{});if((t||m)==="svg"){if(a==="none")return q(ue,{...f,className:i(e.className,Z),icon:a,size:o,variant:L});let g=be[a]?a:Ot(`${a}-icon`);return be[g]?q(ue,{...f,className:i(e.className,Z),icon:be[g],size:o,themeColor:s,rotate:d,flip:c,viewBox:b,variant:L}):q(we,{})}return q(He,{...f,className:i(e.className,Z),icon:a,size:o,themeColor:s,rotate:d,flip:c})};I.states=Mt;I.options=At;I.defaultOptions=j;I.className=Z;I.moduleName=Re;I.folderName=_e;I.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."}]};import{jsx as z,jsxs as Kt}from"react/jsx-runtime";var fe="k-list-item",St=[l.hover,l.focus,l.selected,l.disabled],Et={},Tt={},u=e=>{let{text:t,groupLabel:o,group:s,iconName:a,iconClassName:m,showCheckbox:d,checked:c,hover:b,focus:L,selected:f,disabled:E,actions:g,description:T,id:se,...$}=e,V=t||e.children;return Kt("li",{...$,id:se,role:s?"presentation":"option",tabIndex:s?void 0:L?0:-1,"aria-selected":!s&&f?"true":s?void 0:"false","aria-disabled":!s&&E?"true":void 0,className:i(e.className,s?"k-list-group-item":fe,y(fe,{hover:b,focus:L,disabled:E,selected:f})),children:[d&&z(C,{checked:c}),a&&z("span",{className:"k-list-item-icon-wrapper",children:z(I,{icon:a,className:i("k-list-item-icon",m)})}),z("span",{className:"k-list-item-text",children:V}),g&&z("div",{className:"k-list-item-actions",children:g}),T&&z("span",{className:"k-list-item-description",children:T}),o&&o!==""&&z("div",{className:"k-list-item-group-label",children:o})]})};u.states=St;u.options=Et;u.className=fe;u.defaultOptions=Tt;u.moduleName=R;u.folderName=P;u.ariaSpec={selector:".k-list-item",rules:[{selector:".k-list-item",attribute:"role=option",usage:"Each list item is an option in the listbox."},{selector:".k-list-item",attribute:"id",usage:"ID for aria-activedescendant reference."},{selector:".k-list-item",attribute:"aria-selected (when selectable)",usage:"Indicates the selected state of the option."},{selector:".k-list-group-item",attribute:"role=presentation",usage:"Group headers are presentational, not selectable options."},{selector:".k-list-item-icon",attribute:"aria-hidden=true",usage:"Decorative icons are hidden from assistive technology."}]};import{jsx as Rt}from"react/jsx-runtime";var Ht="k-list-ul",w=e=>{let{children:t,role:o,id:s,...a}=e;return Rt("ul",{...a,id:s,role:o,className:i(Ht,e.className),children:t})};w.ariaSpec={selector:".k-list-ul",rules:[{selector:'.k-list-ul[role="listbox"]',attribute:"role=listbox",usage:"For ungrouped lists, the UL has the listbox role."},{selector:'.k-list-ul[role="listbox"]',attribute:"aria-label or aria-labelledby (when has accessible name)",usage:"Accessible name for the listbox."},{selector:'.k-list-ul[role="group"]',attribute:"role=group",usage:"For grouped sublists under a group header."},{selector:'.k-list-ul[role="group"]',attribute:"aria-labelledby (when grouped)",usage:"References the group header ID."}]};import{jsx as he,jsxs as zt}from"react/jsx-runtime";var _t="k-list-content",K=e=>{let{virtualization:t,grouping:o,"aria-label":s,"aria-labelledby":a,listboxId:m,...d}=e;return zt("div",{...d,className:i(_t,e.className),role:o?"listbox":void 0,id:o?m:void 0,"aria-label":o?s:void 0,"aria-labelledby":o?a:void 0,children:[o?e.children:he(w,{role:"listbox",id:m,"aria-label":s,"aria-labelledby":a,children:e.children}),t&&he("div",{className:"k-height-container",children:he("div",{})})]})};K.ariaSpec={selector:".k-list-content",rules:[{selector:'.k-list-content[role="listbox"]',attribute:"role=listbox",usage:"For grouped lists, the list content container has the listbox role."},{selector:'.k-list-content[role="listbox"]',attribute:"aria-label or aria-labelledby (when has accessible name)",usage:"Accessible name for the listbox."}]};import{jsx as xe,jsxs as Gt}from"react/jsx-runtime";var ee="k-list-sticky-header",wt=[l.hover,l.focus,l.selected],Dt={},Pt={},te=e=>{let{label:t="Select all",showCheckbox:o=!0,checked:s,indeterminate:a,hover:m,focus:d,selected:c,...b}=e;return xe("div",{...b,className:i(ee,e.className),children:Gt("div",{className:i(`${ee}-item`,y(`${ee}-item`,{hover:m,focus:d,selected:c})),children:[o&&xe(C,{checked:s,indeterminate:a,"aria-label":t}),xe("span",{className:"k-list-item-text",children:t})]})})};te.states=wt;te.options=Dt;te.className=ee;te.defaultOptions=Pt;import{Fragment as zs,jsx as _s,jsxs as ws}from"react/jsx-runtime";import{jsx as Le,jsxs as Bt}from"react/jsx-runtime";var Ut="k-list-group-item",J=e=>{let{groupIconName:t,...o}=e;return Bt("li",{...o,role:"presentation",className:i(Ut,e.className),children:[t&&Le("span",{className:"k-list-item-icon-wrapper",children:Le(I,{icon:t,className:"k-list-item-icon"})}),Le("span",{className:"k-list-item-text",children:e.children})]})};J.ariaSpec={selector:".k-list-group-item",rules:[{selector:".k-list-group-item",attribute:"role=presentation",usage:"Group headers are presentational, not selectable options."},{selector:".k-list-group-item",attribute:"id (when referenced)",usage:"ID for aria-labelledby on the parent group UL."}]};import{jsx as Wt}from"react/jsx-runtime";var ke="k-list-optionlabel",Ft=[l.hover,l.focus,l.selected,l.disabled],$t={},Vt={},oe=e=>{let{text:t,hover:o,focus:s,selected:a,disabled:m,...d}=e;return Wt("div",{...d,className:i(ke,y(ke,{hover:o,focus:s,selected:a,disabled:m})),children:t})};oe.states=Ft;oe.options=$t;oe.className=ke;oe.defaultOptions=Vt;import{jsx as Qt}from"react/jsx-runtime";var Ce="k-list-custom-value",Xt=[l.hover,l.focus,l.selected,l.disabled],qt={},Jt={},ie=e=>{let{text:t,hover:o,focus:s,selected:a,disabled:m,...d}=e;return Qt("div",{...d,className:i(Ce,y(Ce,{hover:o,focus:s,selected:a,disabled:m})),children:t})};ie.states=Xt;ie.options=qt;ie.className=Ce;ie.defaultOptions=Jt;import{Fragment as js,jsx as Zs,jsxs as er}from"react/jsx-runtime";import{Fragment as ar,jsx as rr,jsxs as nr}from"react/jsx-runtime";import{Fragment as br,jsx as pr,jsxs as ur}from"react/jsx-runtime";import{jsx as Lr}from"react/jsx-runtime";import{Fragment as Ir,jsx as Nr,jsxs as yr}from"react/jsx-runtime";import{Fragment as Zt,jsx as M,jsxs as ge}from"react/jsx-runtime";var Yt=({children:e,...t})=>{let o=p("list-virt-grp-group"),s=p("list-virt-grp-group");return M(k,{header:"Group 1",...t,virtualization:!0,children:M(K,{grouping:!0,virtualization:!0,listboxId:"list-virt-grp-listbox","aria-label":"Options",children:e||ge(Zt,{children:[ge(w,{role:"group","aria-labelledby":o,children:[M(J,{id:o,children:"Group 1"}),M(u,{id:p("list-virt-grp-item"),children:"List item 1.1"}),M(u,{id:p("list-virt-grp-item"),children:"List item 1.2"}),M(u,{id:p("list-virt-grp-item"),children:"List item 1.3"})]}),ge(w,{role:"group","aria-labelledby":s,children:[M(J,{id:s,children:"Group 2"}),M(u,{id:p("list-virt-grp-item"),children:"List item 2.1"}),M(u,{id:p("list-virt-grp-item"),children:"List item 2.2"}),M(u,{id:p("list-virt-grp-item"),children:"List item 2.3"})]})]})})})},Xr=Yt;export{Yt as ListVirtualizationGrouping,Xr as VirtualListWithGrouping};