UNPKG

@progress/kendo-themes-html

Version:

A collection of HTML helpers used for developing Kendo UI themes

2 lines (1 loc) 12.6 kB
var ve=Object.create;var H=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var Pe=Object.getOwnPropertyNames;var Be=Object.getPrototypeOf,Ce=Object.prototype.hasOwnProperty;var Ne=(e,t)=>{for(var n in t)H(e,n,{get:t[n],enumerable:!0})},ee=(e,t,n,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of Pe(t))!Ce.call(e,o)&&o!==n&&H(e,o,{get:()=>t[o],enumerable:!(i=Ie(t,o))||i.enumerable});return e};var te=(e,t,n)=>(n=e!=null?ve(Be(e)):{},ee(t||!e||!e.__esModule?H(n,"default",{value:e,enumerable:!0}):n,e)),ke=e=>ee(H({},"__esModule",{value:!0}),e);var Qe={};Ne(Qe,{PanelBarExpandGroup:()=>j});module.exports=ke(Qe);var c=(...e)=>e.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?c(...t):typeof t=="object"?Object.keys(t).map((n,i)=>t[i]||t[n]&&n||null).filter(n=>n!==null).join(" "):t).filter(t=>!!t).join(" ");var w=(e,t)=>c({[`${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"}),ne=(e,t)=>{let{valid:n,invalid:i,hover:o,focus:h,checked:f,active:d,selected:I,disabled:b,indeterminate:g,loading:B,empty:v,readonly:O,highlighted:L,...C}=t;return c({"k-valid":n,"k-invalid":i,"k-hover":o,"k-focus":h,"k-checked":f,"k-active":d,"k-selected":I,"k-disabled":b,"k-indeterminate":g&&!f,"k-loading":B,"k-empty":v,"k-readonly":O,"k-highlighted":L},Object.keys(C).reduce((V,T)=>(T.startsWith("k-")?V[T]=C[T]:V[`k-${T}`]=C[T],V),{}))};var s={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"};var k={undefined:void 0,outline:"outline",solid:"solid",duotone:"duotone"},l={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",inverse:"inverse"},_={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 U={};function u(e){return U[e]=(U[e]||0)+1,`k-${e}-${U[e]}`}var q="panelbar",oe=q;var re=require("react/jsx-runtime"),ae="k-panelbar",ye=[],Ae={},Ee={},x=e=>{let{activeDescendant:t,...n}=e;return(0,re.jsx)("ul",{...n,className:c(e.className,ae),role:"tree","aria-activedescendant":t,children:e.children})};x.states=ye;x.options=Ae;x.className=ae;x.defaultOptions=Ee;x.moduleName=q;x.folderName=oe;x.ariaSpec={selector:".k-panelbar",rules:[{selector:".k-panelbar",attribute:"role=tree",usage:"The root element of the PanelBar has role tree."},{selector:".k-panelbar",attribute:"aria-activedescendant (when present)",usage:"Points to the currently focused item in the PanelBar."},{selector:".k-panelbar-group",attribute:"role=group",usage:"The ul element that wraps child nodes."},{selector:".k-panelbar-item:not(.k-expanded) > .k-panelbar-group",attribute:"aria-hidden=true",usage:"Hides the group element from assistive technologies when its parent is not expanded."},{selector:".k-panelbar-item",attribute:"role=treeitem",usage:"The li element rendered for a PanelBar item."},{selector:".k-panelbar-item",attribute:"aria-expanded=true/false",usage:"Announces the expanded state of the item (if expandable)."},{selector:".k-panelbar-item",attribute:"aria-selected=true/false",usage:"Announces the selected state of the item."}]};var K=te(require("react"));var z=require("react/jsx-runtime"),W="k-font-icon",Le=[],Me={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[l.undefined,l.base,l.primary,l.secondary,l.tertiary,l.success,l.warning,l.error,l.info]},Oe={},R=e=>{let{size:t,themeColor:n,icon:i,rotate:o,flip:h,...f}=e;return i?(0,z.jsx)("span",{...f,className:c(e.className,W,w(W,{size:t}),{[`k-i-${i}`]:i,[`k-color-${n}`]:n,[`k-rotate-${o}`]:o,"k-flip-h":h==="h"||h==="both","k-flip-v":h==="v"||h==="both"}),"aria-hidden":"true"}):(0,z.jsx)(z.Fragment,{})};R.states=Le;R.options=Me;R.className=W;R.defaultOptions=Oe;var ie=R;var M=require("react/jsx-runtime"),J="k-svg-icon",Se=[],Te={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[l.undefined,l.base,l.primary,l.secondary,l.tertiary,l.success,l.warning,l.error,l.info],variant:[k.outline,k.solid,k.duotone]},Q={viewBox:"0 0 24 24",variant:k.outline},$=e=>{var B,v;let{size:t,themeColor:n,rotate:i,flip:o,viewBox:h=Q.viewBox,variant:f=Q.variant,icon:d,...I}=e;if(!d)return(0,M.jsx)(M.Fragment,{});if(d==="none")return(0,M.jsx)("span",{...I,className:c(e.className,J,w("k-icon",{size:t}),"k-none"),"aria-hidden":"true"});let b=typeof d=="object"&&d.name&&d.name,g=typeof d=="object"?f&&((B=d.variants)==null?void 0:B[f])||((v=d.variants)==null?void 0:v.outline)||d.content:void 0;return(0,M.jsx)("span",{...I,className:c(e.className,J,w("k-icon",{size:t}),{[`k-svg-i-${b}`]:b,[`k-color-${n}`]:n,[`k-rotate-${i}`]:i,"k-flip-h":o==="h"||o==="both","k-flip-v":o==="v"||o==="both"}),"aria-hidden":"true",children:(0,M.jsx)("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof d=="object"?d.viewBox:h,dangerouslySetInnerHTML:g!==void 0?{__html:g}:void 0,children:d?void 0:e.children})})};$.states=Se;$.options=Te;$.className=J;$.defaultOptions=Q;var X=$;var Y=te(require("@progress/kendo-svg-icons"));var le="icon",se="icons";var me=require("react");var de=require("react"),ce=(0,de.createContext)({iconsType:"svg"});var A=require("react/jsx-runtime"),G="k-icon",we=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),_e=[],ze={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[l.undefined,l.base,l.primary,l.secondary,l.tertiary,l.success,l.warning,l.error,l.info],variant:[k.outline,k.solid,k.duotone]},D={viewBox:"0 0 24 24",type:"svg",variant:k.outline},y=e=>{let{iconsType:t}=(0,me.useContext)(ce),{size:n,themeColor:i,icon:o,type:h=t||D.type,rotate:f,flip:d,viewBox:I=D.viewBox,variant:b=D.variant,...g}=e;if(!o)return(0,A.jsx)(A.Fragment,{});if((t||h)==="svg"){if(o==="none")return(0,A.jsx)(X,{...g,className:c(e.className,G),icon:o,size:n,variant:b});let v=Y[o]?o:we(`${o}-icon`);return Y[v]?(0,A.jsx)(X,{...g,className:c(e.className,G),icon:Y[v],size:n,themeColor:i,rotate:f,flip:d,viewBox:I,variant:b}):(0,A.jsx)(A.Fragment,{})}return(0,A.jsx)(ie,{...g,className:c(e.className,G),icon:o,size:n,themeColor:i,rotate:f,flip:d})};y.states=_e;y.options=ze;y.defaultOptions=D;y.className=G;y.moduleName=le;y.folderName=se;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 E=require("react/jsx-runtime"),pe="k-panelbar-item",Re=[_.hover,_.focus,_.selected,_.disabled],$e={},F={level:0,expanded:!1,text:"Item"},a=e=>{let{text:t=F.text,level:n=F.level,expanded:i=F.expanded,header:o,hover:h,focus:f,selected:d,disabled:I,icon:b,iconClass:g,ariaSelected:B,children:v,...O}=e,L=!!v;return(0,E.jsxs)("li",{...O,className:c(e.className,pe,{"k-panelbar-header":o,[`k-level-${n}`]:n||n===0,"k-expanded":i}),role:"treeitem","aria-expanded":L?i?"true":"false":void 0,"aria-selected":B?"true":"false","aria-disabled":I?"true":void 0,children:[(0,E.jsxs)("span",{className:c("k-link",ne("k-link",{hover:h,focus:f,disabled:I,selected:d})),children:[b&&(0,E.jsx)(y,{className:"k-panelbar-item-icon",icon:b}),g&&!b&&(0,E.jsx)("span",{className:`k-panelbar-item-icon ${g}`}),(0,E.jsx)("span",{className:"k-panelbar-item-text",children:t}),L&&(0,E.jsx)(y,{className:c("k-panelbar-toggle",i?"k-panelbar-collapse":"k-panelbar-expand"),icon:`chevron-${i?"up":"down"}`})]}),i&&v,!i&&v&&K.default.Children.map(v,C=>K.default.isValidElement(C)?K.default.cloneElement(C,{"aria-hidden":"true",style:{display:"none"}}):C)]})};a.states=Re;a.options=$e;a.className=pe;a.defaultOptions=F;var fe=require("react/jsx-runtime"),ue="k-panelbar-group",He=[],Ge={},De={},N=e=>{let{ariaHidden:t,...n}=e;return(0,fe.jsx)("ul",{...n,className:c(e.className,ue),role:"group",...t!==void 0&&{"aria-hidden":t?"true":void 0},children:e.children})};N.states=He;N.options=Ge;N.className=ue;N.defaultOptions=De;var he=require("react/jsx-runtime"),xe="k-panelbar-content",Ke=[],Fe={},Ve={},p=e=>{let{...t}=e;return(0,he.jsx)("div",{...t,className:c(e.className,xe),children:e.children})};p.states=Ke;p.options=Fe;p.className=xe;p.defaultOptions=Ve;var P=require("react/jsx-runtime"),be=e=>{let t=u("pb-item"),n=u("pb-item"),i=u("pb-item"),o=u("pb-item");return(0,P.jsx)(x,{children:(0,P.jsxs)(P.Fragment,{children:[(0,P.jsx)(a,{header:!0,text:"Item 1",id:t,children:(0,P.jsx)(p,{children:"content"})}),(0,P.jsx)(a,{header:!0,text:"Item 2",id:n,children:(0,P.jsx)(p,{children:"content"})}),(0,P.jsx)(a,{header:!0,text:"Item 3",id:i,children:(0,P.jsx)(p,{children:"content"})}),(0,P.jsx)(a,{header:!0,text:"Item 4",id:o})]}),...e})};var Z=require("react/jsx-runtime");var r=require("react/jsx-runtime"),Ue=x.options,qe=x.states,ge={...x.defaultOptions,variant:"normal"},We=[{name:"normal",title:"Normal"},{name:"expand",title:"Expanded"}],Je=[{name:"icon",title:"Item icons"},{name:"disabled",title:"Disabled item"}],S=e=>{var f,d,I,b,g,B,v,O,L;let{variant:t,modifiers:n,...i}={...ge,...e},o={},h={folder:"folder",gear:"gear",file:"file",image:"image"};return Object.keys(n||{}).forEach(C=>{switch(C){case"icon":{o.icon=n!=null&&n[C]?h:void 0;break}case"disabled":o.disabled=!!(n!=null&&n[C])}}),t==="expand"?(0,r.jsx)(r.Fragment,{children:(0,r.jsxs)(j,{style:{width:"300px"},...i,children:[(0,r.jsx)(a,{icon:(f=o.icon)==null?void 0:f.gear,header:!0,text:"Item 1",children:(0,r.jsx)(p,{children:"content"})}),(0,r.jsx)(a,{icon:(d=o.icon)==null?void 0:d.folder,selected:!0,header:!0,expanded:!0,text:"Item 2",children:(0,r.jsxs)(N,{children:[(0,r.jsx)(a,{level:1,text:"Child 1"}),(0,r.jsx)(a,{level:1,expanded:!0,text:"Child 2",children:(0,r.jsxs)(N,{children:[(0,r.jsx)(a,{level:2,text:"Child 2.1"}),(0,r.jsx)(a,{icon:(I=o.icon)==null?void 0:I.image,level:2,text:"Child 2.2"})]})}),(0,r.jsx)(a,{disabled:o.disabled,level:1,text:"Child 3",children:(0,r.jsx)(p,{children:"content"})}),(0,r.jsx)(a,{level:1,text:"Child 4"})]})}),(0,r.jsx)(a,{icon:(b=o.icon)==null?void 0:b.folder,disabled:o.disabled,header:!0,text:"Item 3",children:(0,r.jsx)(p,{children:"content"})}),(0,r.jsx)(a,{icon:(g=o.icon)==null?void 0:g.file,header:!0,text:"Item 4"})]})}):(0,r.jsx)(r.Fragment,{children:(0,r.jsxs)(be,{style:{width:"300px"},...i,children:[(0,r.jsx)(a,{icon:(B=o.icon)==null?void 0:B.gear,header:!0,text:"Item 1",children:(0,r.jsx)(p,{children:"content"})}),(0,r.jsx)(a,{icon:(v=o.icon)==null?void 0:v.folder,header:!0,text:"Item 2",children:(0,r.jsx)(p,{children:"content"})}),(0,r.jsx)(a,{icon:(O=o.icon)==null?void 0:O.folder,disabled:o.disabled,header:!0,text:"Item 3",children:(0,r.jsx)(p,{children:"content"})}),(0,r.jsx)(a,{icon:(L=o.icon)==null?void 0:L.file,header:!0,text:"Item 4"})]})})};S.options=Ue;S.states=qe;S.variants=We;S.defaultOptions=ge;S.modifiers=Je;S.className=x.className;var m=require("react/jsx-runtime"),j=e=>{let t=u("pb-item"),n=u("pb-item"),i=u("pb-item"),o=u("pb-item"),h=u("pb-child"),f=u("pb-child"),d=u("pb-child"),I=u("pb-child"),b=u("pb-child"),g=u("pb-child"),B=u("pb-child");return(0,m.jsx)(x,{activeDescendant:n,children:(0,m.jsxs)(m.Fragment,{children:[(0,m.jsx)(a,{header:!0,text:"Item 1",id:t,children:(0,m.jsx)(p,{children:"content"})}),(0,m.jsx)(a,{header:!0,expanded:!0,text:"Item 2",id:n,ariaSelected:!0,focus:!0,children:(0,m.jsxs)(N,{children:[(0,m.jsx)(a,{level:1,text:"Child 1",id:h}),(0,m.jsx)(a,{level:1,expanded:!0,text:"Child 2",id:f,children:(0,m.jsxs)(N,{children:[(0,m.jsx)(a,{level:2,text:"Child 2.1",id:d}),(0,m.jsx)(a,{level:2,text:"Child 2.2",id:I})]})}),(0,m.jsx)(a,{level:1,text:"Child 3",id:b,children:(0,m.jsx)(N,{children:(0,m.jsx)(a,{level:2,text:"Child 3.1",id:g})})}),(0,m.jsx)(a,{level:1,text:"Child 4",id:B})]})}),(0,m.jsx)(a,{header:!0,text:"Item 3",id:i,children:(0,m.jsx)(p,{children:"content"})}),(0,m.jsx)(a,{header:!0,text:"Item 4",id:o})]}),...e})};