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