UNPKG

@progress/kendo-themes-html

Version:

A collection of HTML helpers used for developing Kendo UI themes

2 lines (1 loc) 15 kB
var Xe=Object.create;var j=Object.defineProperty;var qe=Object.getOwnPropertyDescriptor;var Je=Object.getOwnPropertyNames;var Qe=Object.getPrototypeOf,Ye=Object.prototype.hasOwnProperty;var Ze=(e,t)=>{for(var o in t)j(e,o,{get:t[o],enumerable:!0})},ge=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of Je(t))!Ye.call(e,i)&&i!==o&&j(e,i,{get:()=>t[i],enumerable:!(r=qe(t,i))||r.enumerable});return e};var ee=(e,t,o)=>(o=e!=null?Xe(Qe(e)):{},ge(t||!e||!e.__esModule?j(o,"default",{value:e,enumerable:!0}):o,e)),je=e=>ge(j({},"__esModule",{value:!0}),e);var Vt={};Ze(Vt,{TreeviewNormal:()=>$t});module.exports=je(Vt);var re=ee(require("react"));var te=ee(require("react"));var s=(...e)=>e.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?s(...t):typeof t=="object"?Object.keys(t).map((o,r)=>t[r]||t[o]&&o||null).filter(o=>o!==null).join(" "):t).filter(t=>!!t).join(" ");var E=(e,t)=>s({[`${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"}),K=(e,t)=>{let{valid:o,invalid:r,hover:i,focus:m,checked:c,active:l,selected:g,disabled:v,indeterminate:b,loading:N,empty:w,readonly:U,highlighted:P,...B}=t;return s({"k-valid":o,"k-invalid":r,"k-hover":i,"k-focus":m,"k-checked":c,"k-active":l,"k-selected":g,"k-disabled":v,"k-indeterminate":b&&!c,"k-loading":N,"k-empty":w,"k-readonly":U,"k-highlighted":P},Object.keys(B).reduce((D,S)=>(S.startsWith("k-")?D[S]=B[S]:D[`k-${S}`]=B[S],D),{}))};var n={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},_={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"};var I={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"},h={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 me={};function L(e){return me[e]=(me[e]||0)+1,`k-${e}-${me[e]}`}var Ie=require("react/jsx-runtime"),et="k-treeview-group",O=e=>{let{children:t,dir:o,level:r=1,role:i="group",...m}=e;return(0,Ie.jsx)("ul",{...m,className:s(e.className,et),role:i,children:te.default.Children.map(t,(c,l)=>te.default.isValidElement(c)?te.default.cloneElement(c,{dir:o,level:r,key:l}):c)})};var X="treeview",oe=X;var he=require("react/jsx-runtime"),pe="k-treeview",tt=[],ot={size:[n.undefined,n.small,n.medium,n.large]},rt={},p=e=>{let{size:t,children:o,dir:r,...i}=e;return(0,he.jsx)("div",{...i,dir:r,className:s(e.className,pe,E(pe,{size:t})),children:(0,he.jsx)(O,{className:"k-treeview-lines",role:"tree",dir:r,children:re.default.Children.map(o,(m,c)=>re.default.isValidElement(m)?re.default.cloneElement(m,{dir:r,key:c}):m)})})};p.states=tt;p.options=ot;p.className=pe;p.defaultOptions=rt;p.moduleName=X;p.folderName=oe;p.ariaSpec={selector:".k-treeview",rules:[{selector:".k-treeview-lines",attribute:"role=tree",usage:"The root list element of the treeview."},{selector:".k-treeview-group:not(.k-treeview-lines)",attribute:"role=group",usage:"The ul element that wraps child nodes."},{selector:".k-treeview-item",attribute:"role=treeitem",usage:"The li element rendered for a tree node."},{selector:".k-treeview-item",attribute:"aria-expanded=true/false (when present)",usage:"Announces the expanded state of the node."},{selector:".k-treeview-item",attribute:"aria-checked=true/false (when present)",usage:"Announces the checked state of the node when checkboxes are enabled."},{selector:".k-treeview-item",attribute:"aria-selected=true (when present)",usage:"Announces the selected state of the node when selection is enabled."},{selector:".k-treeview-item .k-checkbox",attribute:"aria-label",usage:"The checkbox input must have an accessible name matching the treeview item text."},{selector:".k-treeview-item .k-checkbox",attribute:"tabindex=-1",usage:"The checkbox input must not be in the tab order. Keyboard interaction is handled by the treeitem."}]};var le=ee(require("react"));var H="checkbox",F=H;var xe=require("react/jsx-runtime"),ie="k-checkbox",it=[h.hover,h.focus,h.valid,h.invalid,h.required,h.disabled,h.checked,h.indeterminate],nt={size:[n.undefined,n.small,n.medium,n.large],rounded:[_.undefined,_.none,_.small,_.medium,_.large,_.full]},at={},k=e=>{let{id:t,checked:o,indeterminate:r,hover:i,focus:m,disabled:c,invalid:l,valid:g,required:v,size:b,rounded:N,wrapperRole:w,...U}=e;return(0,xe.jsx)("span",{className:"k-checkbox-wrap",role:w,children:(0,xe.jsx)("input",{...U,id:t,type:"checkbox",defaultChecked:o,required:v,disabled:c||void 0,"aria-invalid":l?"true":void 0,className:s(e.className,ie,E(ie,{size:b,rounded:N}),K(ie,{hover:i,focus:m,disabled:c,invalid:l,valid:g,indeterminate:r,checked:o}))})})};k.states=it;k.options=nt;k.className=ie;k.defaultOptions=at;k.moduleName=H;k.folderName=F;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 T=k;var Le=require("react/jsx-runtime"),Ne="k-checkbox-list",st=[],lt={},Ee={layout:"vertical"},u=e=>{let{layout:t=Ee.layout,...o}=e;return(0,Le.jsx)("ul",{...o,className:s(e.className,Ne,{[`k-list-${t}`]:t}),children:e.children})};u.states=st;u.options=lt;u.className=Ne;u.defaultOptions=Ee;u.moduleName=H;u.folderName=F;var Me=require("react/jsx-runtime"),Oe="k-checkbox-list-item",ct=[],dt={},mt={},f=e=>{let{...t}=e;return(0,Me.jsx)("li",{...t,className:s(e.className,Oe),children:e.children})};f.states=ct;f.options=dt;f.className=Oe;f.defaultOptions=mt;f.moduleName=H;f.folderName=F;var z=require("react/jsx-runtime"),M=({children:e="Label",id:t="cb-label-after",...o})=>(0,z.jsxs)(z.Fragment,{children:[(0,z.jsx)(T,{id:t,...o}),(0,z.jsx)("label",{className:"k-checkbox-label",htmlFor:t,children:e})]});var ue=require("react/jsx-runtime");var fe=require("react/jsx-runtime");var be=require("react/jsx-runtime");var pt=require("react/jsx-runtime");var ht=require("react/jsx-runtime");var xt=require("react/jsx-runtime");var x=require("react/jsx-runtime"),ut=u.options,ft=u.states,bt={...u.defaultOptions,variant:"vertical"},vt=[{name:"vertical",title:"Vertical"},{name:"horizontal",title:"Horizontal"}],kt=[],$=e=>{let{variant:t,...o}=e;return t==="horizontal"?(0,x.jsxs)(u,{layout:"horizontal",...o,children:[(0,x.jsx)(f,{children:(0,x.jsx)(M,{id:L("cb"),defaultChecked:!0,children:"Label"})}),(0,x.jsx)(f,{children:(0,x.jsx)(M,{id:L("cb"),children:"Label"})}),(0,x.jsx)(f,{children:(0,x.jsx)(M,{id:L("cb"),children:"Label"})})]}):(0,x.jsxs)(u,{...o,children:[(0,x.jsx)(f,{children:(0,x.jsx)(M,{id:L("cb"),defaultChecked:!0,children:"Label"})}),(0,x.jsx)(f,{children:(0,x.jsx)(M,{id:L("cb"),children:"Label"})}),(0,x.jsx)(f,{children:(0,x.jsx)(M,{id:L("cb"),children:"Label"})})]})};$.options=ut;$.states=ft;$.variants=vt;$.defaultOptions=bt;$.modifiers=kt;$.className=u.className;var Ae=require("react/jsx-runtime"),Ct=T.options,wt=T.states,Tt=T.defaultOptions,yt=[],gt=[],V=e=>(0,Ae.jsx)(M,{id:L("checkbox"),...e,defaultChecked:!0,children:"Label"});V.options=Ct;V.states=wt;V.variants=yt;V.defaultOptions=Tt;V.modifiers=gt;V.className=T.className;var q=require("react/jsx-runtime"),ve="k-font-icon",It=[],Nt={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[a.undefined,a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info]},Et={},J=e=>{let{size:t,themeColor:o,icon:r,rotate:i,flip:m,...c}=e;return r?(0,q.jsx)("span",{...c,className:s(e.className,ve,E(ve,{size:t}),{[`k-i-${r}`]:r,[`k-color-${o}`]:o,[`k-rotate-${i}`]:i,"k-flip-h":m==="h"||m==="both","k-flip-v":m==="v"||m==="both"}),"aria-hidden":"true"}):(0,q.jsx)(q.Fragment,{})};J.states=It;J.options=Nt;J.className=ve;J.defaultOptions=Et;var Re=J;var G=require("react/jsx-runtime"),ke="k-svg-icon",Lt=[],Ot={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[a.undefined,a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info],variant:[I.outline,I.solid,I.duotone]},Ce={viewBox:"0 0 24 24",variant:I.outline},Q=e=>{var N,w;let{size:t,themeColor:o,rotate:r,flip:i,viewBox:m=Ce.viewBox,variant:c=Ce.variant,icon:l,...g}=e;if(!l)return(0,G.jsx)(G.Fragment,{});if(l==="none")return(0,G.jsx)("span",{...g,className:s(e.className,ke,E("k-icon",{size:t}),"k-none"),"aria-hidden":"true"});let v=typeof l=="object"&&l.name&&l.name,b=typeof l=="object"?c&&((N=l.variants)==null?void 0:N[c])||((w=l.variants)==null?void 0:w.outline)||l.content:void 0;return(0,G.jsx)("span",{...g,className:s(e.className,ke,E("k-icon",{size:t}),{[`k-svg-i-${v}`]:v,[`k-color-${o}`]:o,[`k-rotate-${r}`]:r,"k-flip-h":i==="h"||i==="both","k-flip-v":i==="v"||i==="both"}),"aria-hidden":"true",children:(0,G.jsx)("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof l=="object"?l.viewBox:m,dangerouslySetInnerHTML:b!==void 0?{__html:b}:void 0,children:l?void 0:e.children})})};Q.states=Lt;Q.options=Ot;Q.className=ke;Q.defaultOptions=Ce;var we=Q;var Te=ee(require("@progress/kendo-svg-icons"));var Se="icon",Ke="icons";var ze=require("react");var _e=require("react"),He=(0,_e.createContext)({iconsType:"svg"});var A=require("react/jsx-runtime"),ne="k-icon",Mt=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),At=[],Rt={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[a.undefined,a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info],variant:[I.outline,I.solid,I.duotone]},ae={viewBox:"0 0 24 24",type:"svg",variant:I.outline},y=e=>{let{iconsType:t}=(0,ze.useContext)(He),{size:o,themeColor:r,icon:i,type:m=t||ae.type,rotate:c,flip:l,viewBox:g=ae.viewBox,variant:v=ae.variant,...b}=e;if(!i)return(0,A.jsx)(A.Fragment,{});if((t||m)==="svg"){if(i==="none")return(0,A.jsx)(we,{...b,className:s(e.className,ne),icon:i,size:o,variant:v});let w=Te[i]?i:Mt(`${i}-icon`);return Te[w]?(0,A.jsx)(we,{...b,className:s(e.className,ne),icon:Te[w],size:o,themeColor:r,rotate:c,flip:l,viewBox:g,variant:v}):(0,A.jsx)(A.Fragment,{})}return(0,A.jsx)(Re,{...b,className:s(e.className,ne),icon:i,size:o,themeColor:r,rotate:c,flip:l})};y.states=At;y.options=Rt;y.defaultOptions=ae;y.className=ne;y.moduleName=Se;y.folderName=Ke;y.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 Y=require("react/jsx-runtime"),ye="k-treeview-leaf",St=[h.hover,h.focus,h.selected],Kt={},se=e=>{let{text:t,showIcon:o,icon:r,hover:i,focus:m,selected:c,...l}=e;return(0,Y.jsxs)("span",{...l,className:s(e.className,ye,K(ye,{hover:i,focus:m,selected:c})),children:[o&&(0,Y.jsx)(y,{icon:r}),(0,Y.jsx)("span",{className:"k-treeview-leaf-text",children:t})]})};se.states=St;se.options=Kt;se.className=ye;var Ge=se;var R=require("react/jsx-runtime"),Pe="k-treeview-item",_t=[h.hover,h.focus,h.selected,h.disabled],Ht={},zt={},d=e=>{let{leafClassName:t,children:o,hasChildren:r,expanded:i,loading:m,text:c,showIcon:l,icon:g,showCheckbox:v,checked:b,hover:N,focus:w,selected:U,disabled:P,dir:B,level:D=1,ariaSelected:S,...We}=e,ce=r||o||m;return(0,R.jsxs)("li",{...We,className:s(e.className,Pe),style:{"--kendo-treeview-level":D},role:"treeitem","aria-expanded":ce?i?"true":"false":void 0,"aria-checked":v?b?"true":"false":void 0,"aria-selected":S?"true":void 0,"aria-disabled":P?"true":void 0,children:[(0,R.jsxs)("span",{className:s("k-treeview-item-content",K("k-treeview-item-content",{hover:N,focus:w,selected:U,disabled:P})),children:[ce&&(0,R.jsx)("span",{className:s("k-treeview-toggle",K("k-treeview-toggle",{disabled:P})),children:m?(0,R.jsx)("span",{className:"k-icon k-i-loading"}):(0,R.jsx)(y,{icon:i?"chevron-down":B==="rtl"?"chevron-left":"chevron-right"})}),v&&(0,R.jsx)(k,{checked:b,disabled:P,"aria-label":c,tabIndex:-1}),(0,R.jsx)(Ge,{className:t,text:c,showIcon:l,icon:g})]}),i&&ce&&le.default.Children.map(o,(de,Ue)=>le.default.isValidElement(de)?le.default.cloneElement(de,{dir:B,level:D+1,key:Ue}):de)]})};d.states=_t;d.options=Ht;d.className=Pe;d.defaultOptions=zt;d.moduleName=X;d.folderName=oe;var Be=require("react/jsx-runtime");var De=require("react/jsx-runtime");var Fe=require("react/jsx-runtime");var $e=require("react/jsx-runtime");var Ve=require("react/jsx-runtime");var C=require("react/jsx-runtime"),Gt=p.options,Pt=p.states,Bt=p.defaultOptions,Dt=[{name:"checkboxes",title:"Show `Checkbox`",default:!1}],Ft=[],W=e=>{let{modifiers:t,...o}=e,r={};return Object.keys(t||{}).forEach(i=>{i==="checkboxes"&&(r.showCheckbox=t==null?void 0:t[i])}),(0,C.jsxs)(p,{...o,children:[(0,C.jsx)(d,{text:"Furniture",expanded:!0,...r,children:(0,C.jsxs)(O,{children:[(0,C.jsx)(d,{text:"Tables & Chairs",...r}),(0,C.jsx)(d,{text:"Sofas",...r}),(0,C.jsx)(d,{text:"Occasional Furniture",...r})]})}),(0,C.jsxs)(d,{text:"Decor",expanded:!1,...r,children:[(0,C.jsx)(d,{text:"Bed Linen",...r}),(0,C.jsx)(d,{text:"Curtains & Blinds",...r}),(0,C.jsx)(d,{text:"Carpets",...r})]})]})};W.options=Gt;W.states=Pt;W.variants=Ft;W.defaultOptions=Bt;W.modifiers=Dt;W.className=p.className;var Z=require("react/jsx-runtime"),$t=({children:e,...t})=>(0,Z.jsx)(p,{...t,children:e||[(0,Z.jsx)(d,{text:"Treeview item"},"treeview-item-1"),(0,Z.jsx)(d,{text:"Treeview item"},"treeview-item-2"),(0,Z.jsx)(d,{text:"Treeview item"},"treeview-item-3")]});