UNPKG

@progress/kendo-themes-html

Version:

A collection of HTML helpers used for developing Kendo UI themes

2 lines (1 loc) 9.51 kB
var d=(...e)=>e.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?d(...t):typeof t=="object"?Object.keys(t).map((a,s)=>t[s]||t[a]&&a||null).filter(a=>a!==null).join(" "):t).filter(t=>!!t).join(" ");var N=(e,t)=>d({[`${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"}),Q=(e,t)=>{let{valid:a,invalid:s,hover:i,focus:c,checked:u,active:l,selected:b,disabled:h,indeterminate:p,loading:E,empty:v,readonly:L,highlighted:H,...T}=t;return d({"k-valid":a,"k-invalid":s,"k-hover":i,"k-focus":c,"k-checked":u,"k-active":l,"k-selected":b,"k-disabled":h,"k-indeterminate":p&&!u,"k-loading":E,"k-empty":v,"k-readonly":L,"k-highlighted":H},Object.keys(T).reduce((m,y)=>(y.startsWith("k-")?m[y]=T[y]:m[`k-${y}`]=T[y],m),{}))};function Y(e,t){if(!t)return{};let a=Array.isArray(t)?t:[t];return Object.fromEntries(a.map(s=>[`k-${s}`,!0]))}var n={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"},C={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},f={undefined:void 0,outline:"outline",solid:"solid",duotone:"duotone"},o={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",inverse:"inverse"},B={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 P={};function Z(e){return P[e]=(P[e]||0)+1,`k-${e}-${P[e]}`}import{Fragment as ye,jsx as ee}from"react/jsx-runtime";var D="k-font-icon",be=[],ge={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info]},ve={},S=e=>{let{size:t,themeColor:a,icon:s,rotate:i,flip:c,...u}=e;return s?ee("span",{...u,className:d(e.className,D,N(D,{size:t}),{[`k-i-${s}`]:s,[`k-color-${a}`]:a,[`k-rotate-${i}`]:i,"k-flip-h":c==="h"||c==="both","k-flip-v":c==="v"||c==="both"}),"aria-hidden":"true"}):ee(ye,{})};S.states=be;S.options=ge;S.className=D;S.defaultOptions=ve;var te=S;import{Fragment as Ce,jsx as R}from"react/jsx-runtime";var F="k-svg-icon",Ne=[],ke={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info],variant:[f.outline,f.solid,f.duotone]},U={viewBox:"0 0 24 24",variant:f.outline},M=e=>{let{size:t,themeColor:a,rotate:s,flip:i,viewBox:c=U.viewBox,variant:u=U.variant,icon:l,...b}=e;if(!l)return R(Ce,{});if(l==="none")return R("span",{...b,className:d(e.className,F,N("k-icon",{size:t}),"k-none"),"aria-hidden":"true"});let h=typeof l=="object"&&l.name&&l.name,p=typeof l=="object"?u&&l.variants?.[u]||l.variants?.outline||l.content:void 0;return R("span",{...b,className:d(e.className,F,N("k-icon",{size:t}),{[`k-svg-i-${h}`]:h,[`k-color-${a}`]:a,[`k-rotate-${s}`]:s,"k-flip-h":i==="h"||i==="both","k-flip-v":i==="v"||i==="both"}),"aria-hidden":"true",children:R("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof l=="object"?l.viewBox:c,dangerouslySetInnerHTML:p!==void 0?{__html:p}:void 0,children:l?void 0:e.children})})};M.states=Ne;M.options=ke;M.className=F;M.defaultOptions=U;var V=M;import*as G from"@progress/kendo-svg-icons";var oe="icon",ne="icons";import{useContext as Te}from"react";import{createContext as Be}from"react";var ae=Be({iconsType:"svg"});import{Fragment as re,jsx as w}from"react/jsx-runtime";var K="k-icon",Ie=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),Oe=[],Se={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info],variant:[f.outline,f.solid,f.duotone]},$={viewBox:"0 0 24 24",type:"svg",variant:f.outline},x=e=>{let{iconsType:t}=Te(ae),{size:a,themeColor:s,icon:i,type:c=t||$.type,rotate:u,flip:l,viewBox:b=$.viewBox,variant:h=$.variant,...p}=e;if(!i)return w(re,{});if((t||c)==="svg"){if(i==="none")return w(V,{...p,className:d(e.className,K),icon:i,size:a,variant:h});let v=G[i]?i:Ie(`${i}-icon`);return G[v]?w(V,{...p,className:d(e.className,K),icon:G[v],size:a,themeColor:s,rotate:u,flip:l,viewBox:b,variant:h}):w(re,{})}return w(te,{...p,className:d(e.className,K),icon:i,size:a,themeColor:s,rotate:u,flip:l})};x.states=Oe;x.options=Se;x.defaultOptions=$;x.className=K;x.moduleName=oe;x.folderName=ne;x.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 q="button",ie=q;import{Fragment as se,jsx as I,jsxs as le}from"react/jsx-runtime";var A="k-button",Me=["icon-button"],we=[B.hover,B.focus,B.active,B.selected,B.disabled,B.generating],Ae={size:[n.undefined,n.xsmall,n.small,n.medium,n.large],rounded:[k.undefined,k.none,k.small,k.medium,k.large,k.full],fillMode:[C.undefined,C.solid,C.flat,C.outline,C.clear,C.link],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.inverse]},J={showArrow:!1,arrowIconName:"chevron-down"},r=e=>{let{as:t="button",size:a,rounded:s,fillMode:i,themeColor:c,showArrow:u=J.showArrow,arrowIconName:l=J.arrowIconName,variant:b,hover:h,focus:p,active:E,selected:v,disabled:L,togglable:H,ariaDisabled:T,icon:m,iconSize:y,text:_,iconClassName:me,className:pe,...fe}=e,xe=m!=null,he=e.children!==void 0;return le(t,{className:d(pe,A,Y(A,b),N(A,{size:a,rounded:s,fillMode:i,themeColor:c}),Q(A,{hover:h,focus:p,active:E,disabled:L||T,selected:v}),{"k-icon-button":!_&&!he&&xe}),"aria-pressed":H?v?"true":"false":void 0,...fe,"aria-disabled":T?"true":void 0,disabled:L||void 0,children:[typeof m=="string"&&m&&I(x,{className:d(me,"k-button-icon"),icon:m,size:y}),m&&typeof m!="string"&&I(se,{children:m}),_?le(se,{children:[_&&I("span",{className:"k-button-text",children:_}),e.children]}):e.children&&I("span",{className:"k-button-text",children:e.children}),u&&I("span",{className:"k-menu-button-arrow k-button-arrow",children:I(x,{icon:l})})]})};r.states=we;r.options=Ae;r.variants=Me;r.className=A;r.defaultOptions=J;r.moduleName=q;r.folderName=ie;r.ariaSpec={selector:".k-button",rules:[{selector:".k-button",attribute:"role=button or nodeName=button",usage:"The button role is implicit from the native <button> element."},{selector:".k-button",attribute:"aria-label (when icon-only)",usage:"Required for icon-only buttons that have no visible text."},{selector:".k-button",attribute:"aria-pressed (when togglable)",usage:"Indicates the pressed state of a toggle button."},{selector:".k-button",attribute:"disabled (when disabled)",usage:"Rendered when the button is disabled."}]};import{jsx as ze}from"react/jsx-runtime";var de=e=>ze(r,{icon:"folder",...e,"aria-label":e["aria-label"]||"Folder",children:void 0});import{jsx as Ee}from"react/jsx-runtime";var ce=e=>Ee(r,{icon:"folder",children:"Button",...e});import{jsx as Le}from"react/jsx-runtime";var ue=e=>Le(r,{children:"Button",...e});import{jsx as X}from"react/jsx-runtime";var _e=r.options,Re=r.states,Ke={...r.defaultOptions,variant:"text"},$e=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],He=[],O=e=>{let{variant:t,...a}=e;switch(t){case"icon-only":return X(de,{...a,icon:"star"});case"icon-and-text":return X(ce,{...a,icon:"star",children:"Button"});default:return X(ue,{...a,children:"Button"})}};O.options=_e;O.states=Re;O.variants=$e;O.defaultOptions=Ke;O.modifiers=He;O.className=r.className;import{Fragment as Ue,jsx as g,jsxs as W}from"react/jsx-runtime";var j="k-taskboard-column",Pe=[],De={},Fe={header:void 0},z=e=>{let{header:t,edit:a,...s}=e,i=Z("taskboard-column-header");return W("div",{...s,className:d(e.className,j,{[`${j}-edit`]:a}),children:[g("div",{className:"k-taskboard-column-header",children:t||W(Ue,{children:[g("div",{className:"k-taskboard-column-header-text k-text-ellipsis",id:i,children:"Column Header"}),g("span",{className:"k-spacer"}),W("div",{className:"k-taskboard-column-header-actions",children:[g(r,{fillMode:"flat",icon:"pencil","aria-label":"Edit column",title:"Edit column"}),g(r,{fillMode:"flat",icon:"plus","aria-label":"Add card",title:"Add card"}),g(r,{fillMode:"flat",icon:"x","aria-label":"Delete column",title:"Delete column"})]})]})}),g("div",{className:"k-taskboard-column-cards-container",role:"list",tabIndex:0,"aria-labelledby":i,children:g("div",{className:"k-taskboard-column-cards",role:"presentation",children:e.children})})]})};z.states=Pe;z.options=De;z.className=j;z.defaultOptions=Fe;var Qt=z;export{j as TASKBOARDCOLUMN_CLASSNAME,z as TaskBoardColumn,Qt as default};