@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
2 lines (1 loc) • 16.9 kB
JavaScript
import ne 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 M=(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:u,disabled:L,indeterminate:b,loading:S,empty:g,readonly:E,highlighted:ie,...B}=t;return i({"k-valid":o,"k-invalid":s,"k-hover":a,"k-focus":m,"k-checked":d,"k-active":c,"k-selected":u,"k-disabled":L,"k-indeterminate":b&&!d,"k-loading":S,"k-empty":g,"k-readonly":E,"k-highlighted":ie},Object.keys(B).reduce((F,z)=>(z.startsWith("k-")?F[z]=B[z]:F[`k-${z}`]=B[z],F),{}))};var r={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},K={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 se={};function p(e){return se[e]=(se[e]||0)+1,`k-${e}-${se[e]}`}import{jsx as ge}from"react/jsx-runtime";var we="k-list-group-sticky-header",re=e=>ge("div",{className:i(we,e.className),children:ge("div",{className:"k-list-header-text",children:e.children})});import{jsx as Pe}from"react/jsx-runtime";var De="k-no-data",ae=e=>{let{live:t,...o}=e;return Pe("span",{...o,className:i(De,e.className),"aria-live":t?"polite":void 0,children:e.children})};var H="list",w=H;import{jsx as ve,jsxs as Ne}from"react/jsx-runtime";var le="k-list",Ge=[],Ue={size:[r.undefined,r.small,r.medium,r.large]},Be={},k=e=>{let{size:t,virtualization:o,children:s,header:a,selectAll:m,optionLabel:d,customValue:c,noData:u,screenReaders:L,...b}=e,g=ne.Children.toArray(s)[0],E=g?.props?.children?ne.Children.count(g.props.children):ne.Children.count(s);return Ne("div",{...b,className:i(e.className,le,M(le,{size:t}),{"k-virtual-list":o}),children:[d,m,c,a&&ve(re,{children:a}),s||(u!==void 0?u:ve(ae,{live:!0,children:"No data found."})),L&&s&&Ne(ae,{className:"k-sr-only",live:!0,children:[E," items found."]})]})};k.states=Ge;k.options=Ue;k.className=le;k.defaultOptions=Be;k.moduleName=H;k.folderName=w;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 We}from"react/jsx-runtime";var Ie="k-list-container",Fe=[],$e={},Ve={},D=e=>{let{...t}=e;return We("div",{...t,className:i(e.className,Ie),children:e.children})};D.states=Fe;D.options=$e;D.className=Ie;D.defaultOptions=Ve;D.moduleName=H;D.folderName=w;var R="checkbox",P=R;import{jsx as ye}from"react/jsx-runtime";var J="k-checkbox",Xe=[l.hover,l.focus,l.valid,l.invalid,l.required,l.disabled,l.checked,l.indeterminate],qe={size:[r.undefined,r.small,r.medium,r.large],rounded:[K.undefined,K.none,K.small,K.medium,K.large,K.full]},Je={},C=e=>{let{id:t,checked:o,indeterminate:s,hover:a,focus:m,disabled:d,invalid:c,valid:u,required:L,size:b,rounded:S,wrapperRole:g,...E}=e;return ye("span",{className:"k-checkbox-wrap",role:g,children:ye("input",{...E,id:t,type:"checkbox",defaultChecked:o,required:L,disabled:d||void 0,"aria-invalid":c?"true":void 0,className:i(e.className,J,M(J,{size:b,rounded:S}),y(J,{hover:a,focus:m,disabled:d,invalid:c,valid:u,indeterminate:s,checked:o}))})})};C.states=Xe;C.options=qe;C.className=J;C.defaultOptions=Je;C.moduleName=R;C.folderName=P;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 Ze}from"react/jsx-runtime";var Oe="k-checkbox-list",Qe=[],Ye={},Me={layout:"vertical"},f=e=>{let{layout:t=Me.layout,...o}=e;return Ze("ul",{...o,className:i(e.className,Oe,{[`k-list-${t}`]:t}),children:e.children})};f.states=Qe;f.options=Ye;f.className=Oe;f.defaultOptions=Me;f.moduleName=R;f.folderName=P;import{jsx as ot}from"react/jsx-runtime";var Ae="k-checkbox-list-item",je=[],et={},tt={},h=e=>{let{...t}=e;return ot("li",{...t,className:i(e.className,Ae),children:e.children})};h.states=je;h.options=et;h.className=Ae;h.defaultOptions=tt;h.moduleName=R;h.folderName=P;import{Fragment as it,jsx as Se,jsxs as st}from"react/jsx-runtime";var A=({children:e="Label",id:t="cb-label-after",...o})=>st(it,{children:[Se(N,{id:t,...o}),Se("label",{className:"k-checkbox-label",htmlFor:t,children:e})]});import{Fragment as Jo,jsx as qo,jsxs as Qo}from"react/jsx-runtime";import{Fragment as ti,jsx as ei,jsxs as oi}from"react/jsx-runtime";import{Fragment as ni,jsx as ai,jsxs as li}from"react/jsx-runtime";import{jsx as pi}from"react/jsx-runtime";import{jsx as hi}from"react/jsx-runtime";import{jsx as Ci}from"react/jsx-runtime";import{jsx as v,jsxs as Ee}from"react/jsx-runtime";var rt=f.options,at=f.states,nt={...f.defaultOptions,variant:"vertical"},lt=[{name:"vertical",title:"Vertical"},{name:"horizontal",title:"Horizontal"}],ct=[],G=e=>{let{variant:t,...o}=e;return t==="horizontal"?Ee(f,{layout:"horizontal",...o,children:[v(h,{children:v(A,{id:p("cb"),defaultChecked:!0,children:"Label"})}),v(h,{children:v(A,{id:p("cb"),children:"Label"})}),v(h,{children:v(A,{id:p("cb"),children:"Label"})})]}):Ee(f,{...o,children:[v(h,{children:v(A,{id:p("cb"),defaultChecked:!0,children:"Label"})}),v(h,{children:v(A,{id:p("cb"),children:"Label"})}),v(h,{children:v(A,{id:p("cb"),children:"Label"})})]})};G.options=rt;G.states=at;G.variants=lt;G.defaultOptions=nt;G.modifiers=ct;G.className=f.className;import{jsx as ft}from"react/jsx-runtime";var mt=N.options,dt=N.states,pt=N.defaultOptions,ut=[],bt=[],U=e=>ft(A,{id:p("checkbox"),...e,defaultChecked:!0,children:"Label"});U.options=mt;U.states=dt;U.variants=ut;U.defaultOptions=pt;U.modifiers=bt;U.className=N.className;import{Fragment as kt,jsx as Te}from"react/jsx-runtime";var ce="k-font-icon",ht=[],xt={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]},Lt={},$=e=>{let{size:t,themeColor:o,icon:s,rotate:a,flip:m,...d}=e;return s?Te("span",{...d,className:i(e.className,ce,M(ce,{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"}):Te(kt,{})};$.states=ht;$.options=xt;$.className=ce;$.defaultOptions=Lt;var Ke=$;import{Fragment as vt,jsx as Q}from"react/jsx-runtime";var me="k-svg-icon",Ct=[],gt={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]},de={viewBox:"0 0 24 24",variant:O.outline},V=e=>{let{size:t,themeColor:o,rotate:s,flip:a,viewBox:m=de.viewBox,variant:d=de.variant,icon:c,...u}=e;if(!c)return Q(vt,{});if(c==="none")return Q("span",{...u,className:i(e.className,me,M("k-icon",{size:t}),"k-none"),"aria-hidden":"true"});let L=typeof c=="object"&&c.name&&c.name,b=typeof c=="object"?d&&c.variants?.[d]||c.variants?.outline||c.content:void 0;return Q("span",{...u,className:i(e.className,me,M("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:Q("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof c=="object"?c.viewBox:m,dangerouslySetInnerHTML:b!==void 0?{__html:b}:void 0,children:c?void 0:e.children})})};V.states=Ct;V.options=gt;V.className=me;V.defaultOptions=de;var pe=V;import*as ue from"@progress/kendo-svg-icons";var He="icon",Re="icons";import{useContext as It}from"react";import{createContext as Nt}from"react";var _e=Nt({iconsType:"svg"});import{Fragment as ze,jsx as W}from"react/jsx-runtime";var Y="k-icon",yt=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),Ot=[],Mt={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]},Z={viewBox:"0 0 24 24",type:"svg",variant:O.outline},I=e=>{let{iconsType:t}=It(_e),{size:o,themeColor:s,icon:a,type:m=t||Z.type,rotate:d,flip:c,viewBox:u=Z.viewBox,variant:L=Z.variant,...b}=e;if(!a)return W(ze,{});if((t||m)==="svg"){if(a==="none")return W(pe,{...b,className:i(e.className,Y),icon:a,size:o,variant:L});let g=ue[a]?a:yt(`${a}-icon`);return ue[g]?W(pe,{...b,className:i(e.className,Y),icon:ue[g],size:o,themeColor:s,rotate:d,flip:c,viewBox:u,variant:L}):W(ze,{})}return W(Ke,{...b,className:i(e.className,Y),icon:a,size:o,themeColor:s,rotate:d,flip:c})};I.states=Ot;I.options=Mt;I.defaultOptions=Z;I.className=Y;I.moduleName=He;I.folderName=Re;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 _,jsxs as Tt}from"react/jsx-runtime";var be="k-list-item",At=[l.hover,l.focus,l.selected,l.disabled],St={},Et={},x=e=>{let{text:t,groupLabel:o,group:s,iconName:a,iconClassName:m,showCheckbox:d,checked:c,hover:u,focus:L,selected:b,disabled:S,actions:g,description:E,id:ie,...B}=e,F=t||e.children;return Tt("li",{...B,id:ie,role:s?"presentation":"option",tabIndex:s?void 0:L?0:-1,"aria-selected":!s&&b?"true":s?void 0:"false","aria-disabled":!s&&S?"true":void 0,className:i(e.className,s?"k-list-group-item":be,y(be,{hover:u,focus:L,disabled:S,selected:b})),children:[d&&_(C,{checked:c}),a&&_("span",{className:"k-list-item-icon-wrapper",children:_(I,{icon:a,className:i("k-list-item-icon",m)})}),_("span",{className:"k-list-item-text",children:F}),g&&_("div",{className:"k-list-item-actions",children:g}),E&&_("span",{className:"k-list-item-description",children:E}),o&&o!==""&&_("div",{className:"k-list-item-group-label",children:o})]})};x.states=At;x.options=St;x.className=be;x.defaultOptions=Et;x.moduleName=H;x.folderName=w;x.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 Ht}from"react/jsx-runtime";var Kt="k-list-ul",X=e=>{let{children:t,role:o,id:s,...a}=e;return Ht("ul",{...a,id:s,role:o,className:i(Kt,e.className),children:t})};X.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 fe,jsxs as _t}from"react/jsx-runtime";var Rt="k-list-content",T=e=>{let{virtualization:t,grouping:o,"aria-label":s,"aria-labelledby":a,listboxId:m,...d}=e;return _t("div",{...d,className:i(Rt,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:fe(X,{role:"listbox",id:m,"aria-label":s,"aria-labelledby":a,children:e.children}),t&&fe("div",{className:"k-height-container",children:fe("div",{})})]})};T.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 he,jsxs as Pt}from"react/jsx-runtime";var j="k-list-sticky-header",zt=[l.hover,l.focus,l.selected],wt={},Dt={},ee=e=>{let{label:t="Select all",showCheckbox:o=!0,checked:s,indeterminate:a,hover:m,focus:d,selected:c,...u}=e;return he("div",{...u,className:i(j,e.className),children:Pt("div",{className:i(`${j}-item`,y(`${j}-item`,{hover:m,focus:d,selected:c})),children:[o&&he(C,{checked:s,indeterminate:a,"aria-label":t}),he("span",{className:"k-list-item-text",children:t})]})})};ee.states=zt;ee.options=wt;ee.className=j;ee.defaultOptions=Dt;import{Fragment as _s,jsx as Rs,jsxs as zs}from"react/jsx-runtime";import{jsx as xe,jsxs as Ut}from"react/jsx-runtime";var Gt="k-list-group-item",Le=e=>{let{groupIconName:t,...o}=e;return Ut("li",{...o,role:"presentation",className:i(Gt,e.className),children:[t&&xe("span",{className:"k-list-item-icon-wrapper",children:xe(I,{icon:t,className:"k-list-item-icon"})}),xe("span",{className:"k-list-item-text",children:e.children})]})};Le.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 Vt}from"react/jsx-runtime";var ke="k-list-optionlabel",Bt=[l.hover,l.focus,l.selected,l.disabled],Ft={},$t={},te=e=>{let{text:t,hover:o,focus:s,selected:a,disabled:m,...d}=e;return Vt("div",{...d,className:i(ke,y(ke,{hover:o,focus:s,selected:a,disabled:m})),children:t})};te.states=Bt;te.options=Ft;te.className=ke;te.defaultOptions=$t;import{jsx as Jt}from"react/jsx-runtime";var Ce="k-list-custom-value",Wt=[l.hover,l.focus,l.selected,l.disabled],Xt={},qt={},oe=e=>{let{text:t,hover:o,focus:s,selected:a,disabled:m,...d}=e;return Jt("div",{...d,className:i(Ce,y(Ce,{hover:o,focus:s,selected:a,disabled:m})),children:t})};oe.states=Wt;oe.options=Xt;oe.className=Ce;oe.defaultOptions=qt;import{Fragment as Zs,jsx as Ys,jsxs as js}from"react/jsx-runtime";import{Fragment as ar,jsx as sr,jsxs as rr}from"react/jsx-runtime";import{Fragment as ur,jsx as dr,jsxs as pr}from"react/jsx-runtime";import{jsx as xr}from"react/jsx-runtime";import{Fragment as Nr,jsx as vr,jsxs as Ir}from"react/jsx-runtime";import{Fragment as Qt,jsx as q,jsxs as Yt}from"react/jsx-runtime";var Wr=({children:e,...t})=>q(k,{virtualization:!0,...t,children:q(T,{virtualization:!0,listboxId:"list-virt-listbox","aria-label":"Options",children:e||Yt(Qt,{children:[q(x,{id:p("list-virt-item"),children:"List item"},"list-item-1"),q(x,{id:p("list-virt-item"),children:"List item"},"list-item-2"),q(x,{id:p("list-virt-item"),children:"List item"},"list-item-3")]})})});export{Wr as ListVirtualization};