UNPKG

@progress/kendo-themes-html

Version:

A collection of HTML helpers used for developing Kendo UI themes

2 lines (1 loc) 11.1 kB
import ae from"react";var i=(...o)=>o.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?i(...e):typeof e=="object"?Object.keys(e).map((n,l)=>e[l]||e[n]&&n||null).filter(n=>n!==null).join(" "):e).filter(e=>!!e).join(" ");var L=(o,e)=>i({[`${o}-xs`]:e.size==="xsmall",[`${o}-sm`]:e.size==="small",[`${o}-md`]:e.size==="medium",[`${o}-lg`]:e.size==="large",[`${o}-xl`]:e.size==="xlarge",[`${o}-xxl`]:e.size==="xxlarge",[`${o}-xxxl`]:e.size==="xxxlarge"},{[`${o}-${e.fillMode}`]:e.fillMode},{[`${o}-${e.themeColor}`]:e.themeColor},{"k-rounded-sm":e.rounded==="small","k-rounded-md":e.rounded==="medium","k-rounded-lg":e.rounded==="large","k-rounded-full":e.rounded==="full","k-rounded-none":e.rounded==="none"}),O=(o,e)=>{let{valid:n,invalid:l,hover:r,focus:m,checked:c,active:s,selected:v,disabled:f,indeterminate:h,loading:A,empty:E,readonly:B,highlighted:S,..._}=e;return i({"k-valid":n,"k-invalid":l,"k-hover":r,"k-focus":m,"k-checked":c,"k-active":s,"k-selected":v,"k-disabled":f,"k-indeterminate":h&&!c,"k-loading":A,"k-empty":E,"k-readonly":B,"k-highlighted":S},Object.keys(_).reduce((K,I)=>(I.startsWith("k-")?K[I]=_[I]:K[`k-${I}`]=_[I],K),{}))};var t={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},M={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"};var g={undefined:void 0,outline:"outline",solid:"solid",duotone:"duotone"},a={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",inverse:"inverse"},d={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 Q={};function N(o){return Q[o]=(Q[o]||0)+1,`k-${o}-${Q[o]}`}var w="checkbox",H=w;import{jsx as re}from"react/jsx-runtime";var D="k-checkbox",Ee=[d.hover,d.focus,d.valid,d.invalid,d.required,d.disabled,d.checked,d.indeterminate],Ie={size:[t.undefined,t.small,t.medium,t.large],rounded:[M.undefined,M.none,M.small,M.medium,M.large,M.full]},Le={},x=o=>{let{id:e,checked:n,indeterminate:l,hover:r,focus:m,disabled:c,invalid:s,valid:v,required:f,size:h,rounded:A,wrapperRole:E,...B}=o;return re("span",{className:"k-checkbox-wrap",role:E,children:re("input",{...B,id:e,type:"checkbox",defaultChecked:n,required:f,disabled:c||void 0,"aria-invalid":s?"true":void 0,className:i(o.className,D,L(D,{size:h,rounded:A}),O(D,{hover:r,focus:m,disabled:c,invalid:s,valid:v,indeterminate:l,checked:n}))})})};x.states=Ee;x.options=Ie;x.className=D;x.defaultOptions=Le;x.moduleName=w;x.folderName=H;x.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 k=x;import{jsx as we}from"react/jsx-runtime";var ie="k-checkbox-list",Oe=[],Me={},se={layout:"vertical"},p=o=>{let{layout:e=se.layout,...n}=o;return we("ul",{...n,className:i(o.className,ie,{[`k-list-${e}`]:e}),children:o.children})};p.states=Oe;p.options=Me;p.className=ie;p.defaultOptions=se;p.moduleName=w;p.folderName=H;import{jsx as _e}from"react/jsx-runtime";var le="k-checkbox-list-item",Te=[],Ae={},Se={},u=o=>{let{...e}=o;return _e("li",{...e,className:i(o.className,le),children:o.children})};u.states=Te;u.options=Ae;u.className=le;u.defaultOptions=Se;u.moduleName=w;u.folderName=H;import{Fragment as Ke,jsx as ce,jsxs as He}from"react/jsx-runtime";var y=({children:o="Label",id:e="cb-label-after",...n})=>He(Ke,{children:[ce(k,{id:e,...n}),ce("label",{className:"k-checkbox-label",htmlFor:e,children:o})]});import{Fragment as Fo,jsx as $o,jsxs as Go}from"react/jsx-runtime";import{Fragment as Xo,jsx as Uo,jsxs as qo}from"react/jsx-runtime";import{Fragment as jo,jsx as Zo,jsxs as et}from"react/jsx-runtime";import{jsx as at}from"react/jsx-runtime";import{jsx as lt}from"react/jsx-runtime";import{jsx as pt}from"react/jsx-runtime";import{jsx as b,jsxs as de}from"react/jsx-runtime";var Re=p.options,ze=p.states,Be={...p.defaultOptions,variant:"vertical"},Pe=[{name:"vertical",title:"Vertical"},{name:"horizontal",title:"Horizontal"}],$e=[],R=o=>{let{variant:e,...n}=o;return e==="horizontal"?de(p,{layout:"horizontal",...n,children:[b(u,{children:b(y,{id:N("cb"),defaultChecked:!0,children:"Label"})}),b(u,{children:b(y,{id:N("cb"),children:"Label"})}),b(u,{children:b(y,{id:N("cb"),children:"Label"})})]}):de(p,{...n,children:[b(u,{children:b(y,{id:N("cb"),defaultChecked:!0,children:"Label"})}),b(u,{children:b(y,{id:N("cb"),children:"Label"})}),b(u,{children:b(y,{id:N("cb"),children:"Label"})})]})};R.options=Re;R.states=ze;R.variants=Pe;R.defaultOptions=Be;R.modifiers=$e;R.className=p.className;import{jsx as Ue}from"react/jsx-runtime";var Fe=k.options,Ge=k.states,De=k.defaultOptions,We=[],Ve=[],z=o=>Ue(y,{id:N("checkbox"),...o,defaultChecked:!0,children:"Label"});z.options=Fe;z.states=Ge;z.variants=We;z.defaultOptions=De;z.modifiers=Ve;z.className=k.className;import{Fragment as Qe,jsx as me}from"react/jsx-runtime";var Y="k-font-icon",Xe=[],qe={size:[t.undefined,t.xsmall,t.small,t.medium,t.large,t.xlarge,t.xxlarge,t.xxxlarge],themeColor:[a.undefined,a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info]},Je={},P=o=>{let{size:e,themeColor:n,icon:l,rotate:r,flip:m,...c}=o;return l?me("span",{...c,className:i(o.className,Y,L(Y,{size:e}),{[`k-i-${l}`]:l,[`k-color-${n}`]:n,[`k-rotate-${r}`]:r,"k-flip-h":m==="h"||m==="both","k-flip-v":m==="v"||m==="both"}),"aria-hidden":"true"}):me(Qe,{})};P.states=Xe;P.options=qe;P.className=Y;P.defaultOptions=Je;var pe=P;import{Fragment as je,jsx as W}from"react/jsx-runtime";var Z="k-svg-icon",Ye=[],Ze={size:[t.undefined,t.xsmall,t.small,t.medium,t.large,t.xlarge,t.xxlarge,t.xxxlarge],themeColor:[a.undefined,a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info],variant:[g.outline,g.solid,g.duotone]},j={viewBox:"0 0 24 24",variant:g.outline},$=o=>{let{size:e,themeColor:n,rotate:l,flip:r,viewBox:m=j.viewBox,variant:c=j.variant,icon:s,...v}=o;if(!s)return W(je,{});if(s==="none")return W("span",{...v,className:i(o.className,Z,L("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let f=typeof s=="object"&&s.name&&s.name,h=typeof s=="object"?c&&s.variants?.[c]||s.variants?.outline||s.content:void 0;return W("span",{...v,className:i(o.className,Z,L("k-icon",{size:e}),{[`k-svg-i-${f}`]:f,[`k-color-${n}`]:n,[`k-rotate-${l}`]:l,"k-flip-h":r==="h"||r==="both","k-flip-v":r==="v"||r==="both"}),"aria-hidden":"true",children:W("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof s=="object"?s.viewBox:m,dangerouslySetInnerHTML:h!==void 0?{__html:h}:void 0,children:s?void 0:o.children})})};$.states=Ye;$.options=Ze;$.className=Z;$.defaultOptions=j;var ee=$;import*as oe from"@progress/kendo-svg-icons";var ue="icon",he="icons";import{useContext as oo}from"react";import{createContext as eo}from"react";var fe=eo({iconsType:"svg"});import{Fragment as xe,jsx as F}from"react/jsx-runtime";var V="k-icon",to=o=>o.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),no=[],ao={size:[t.undefined,t.xsmall,t.small,t.medium,t.large,t.xlarge,t.xxlarge,t.xxxlarge],themeColor:[a.undefined,a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info],variant:[g.outline,g.solid,g.duotone]},U={viewBox:"0 0 24 24",type:"svg",variant:g.outline},C=o=>{let{iconsType:e}=oo(fe),{size:n,themeColor:l,icon:r,type:m=e||U.type,rotate:c,flip:s,viewBox:v=U.viewBox,variant:f=U.variant,...h}=o;if(!r)return F(xe,{});if((e||m)==="svg"){if(r==="none")return F(ee,{...h,className:i(o.className,V),icon:r,size:n,variant:f});let E=oe[r]?r:to(`${r}-icon`);return oe[E]?F(ee,{...h,className:i(o.className,V),icon:oe[E],size:n,themeColor:l,rotate:c,flip:s,viewBox:v,variant:f}):F(xe,{})}return F(pe,{...h,className:i(o.className,V),icon:r,size:n,themeColor:l,rotate:c,flip:s})};C.states=no;C.options=ao;C.defaultOptions=U;C.className=V;C.moduleName=ue;C.folderName=he;C.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 be,jsxs as so}from"react/jsx-runtime";var te="k-treeview-leaf",ro=[d.hover,d.focus,d.selected],io={},X=o=>{let{text:e,showIcon:n,icon:l,hover:r,focus:m,selected:c,...s}=o;return so("span",{...s,className:i(o.className,te,O(te,{hover:r,focus:m,selected:c})),children:[n&&be(C,{icon:l}),be("span",{className:"k-treeview-leaf-text",children:e})]})};X.states=ro;X.options=io;X.className=te;var ke=X;var ne="treeview",Ce=ne;import{jsx as G,jsxs as ve}from"react/jsx-runtime";var ge="k-treeview-item",lo=[d.hover,d.focus,d.selected,d.disabled],co={},mo={},T=o=>{let{leafClassName:e,children:n,hasChildren:l,expanded:r,loading:m,text:c,showIcon:s,icon:v,showCheckbox:f,checked:h,hover:A,focus:E,selected:B,disabled:S,dir:_,level:K=1,ariaSelected:I,...Ne}=o,q=l||n||m;return ve("li",{...Ne,className:i(o.className,ge),style:{"--kendo-treeview-level":K},role:"treeitem","aria-expanded":q?r?"true":"false":void 0,"aria-checked":f?h?"true":"false":void 0,"aria-selected":I?"true":void 0,"aria-disabled":S?"true":void 0,children:[ve("span",{className:i("k-treeview-item-content",O("k-treeview-item-content",{hover:A,focus:E,selected:B,disabled:S})),children:[q&&G("span",{className:i("k-treeview-toggle",O("k-treeview-toggle",{disabled:S})),children:m?G("span",{className:"k-icon k-i-loading"}):G(C,{icon:r?"chevron-down":_==="rtl"?"chevron-left":"chevron-right"})}),f&&G(x,{checked:h,disabled:S,"aria-label":c,tabIndex:-1}),G(ke,{className:e,text:c,showIcon:s,icon:v})]}),r&&q&&ae.Children.map(n,(J,ye)=>ae.isValidElement(J)?ae.cloneElement(J,{dir:_,level:K+1,key:ye}):J)]})};T.states=lo;T.options=co;T.className=ge;T.defaultOptions=mo;T.moduleName=ne;T.folderName=Ce;var Cn=T;export{ge as TREEVIEWITEM_CLASSNAME,T as TreeviewItem,Cn as default};