UNPKG

@progress/kendo-themes-html

Version:

A collection of HTML helpers used for developing Kendo UI themes

2 lines (1 loc) 12 kB
var d=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?d(...e):typeof e=="object"?Object.keys(e).map((n,r)=>e[r]||e[n]&&n||null).filter(n=>n!==null).join(" "):e).filter(e=>!!e).join(" ");var T=(t,e)=>d({[`${t}-xs`]:e.size==="xsmall",[`${t}-sm`]:e.size==="small",[`${t}-md`]:e.size==="medium",[`${t}-lg`]:e.size==="large",[`${t}-xl`]:e.size==="xlarge",[`${t}-xxl`]:e.size==="xxlarge",[`${t}-xxxl`]:e.size==="xxxlarge"},{[`${t}-${e.fillMode}`]:e.fillMode},{[`${t}-${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"}),M=(t,e)=>{let{valid:n,invalid:r,hover:l,focus:c,checked:u,active:s,selected:x,disabled:m,indeterminate:b,loading:U,empty:y,readonly:D,highlighted:q,...B}=e;return d({"k-valid":n,"k-invalid":r,"k-hover":l,"k-focus":c,"k-checked":u,"k-active":s,"k-selected":x,"k-disabled":m,"k-indeterminate":b&&!u,"k-loading":U,"k-empty":y,"k-readonly":D,"k-highlighted":q},Object.keys(B).reduce((f,k)=>(k.startsWith("k-")?f[k]=B[k]:f[`k-${k}`]=B[k],f),{}))};function ie(t,e){if(!e)return{};let n=Array.isArray(e)?e:[e];return Object.fromEntries(n.map(r=>[`k-${r}`,!0]))}var a={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},C={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"},O={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},g={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"},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 W="action-buttons",re=W;import{jsx as Ee}from"react/jsx-runtime";var R="k-actions",Se=[],Le={},Z={alignment:"start",orientation:"horizontal"},A=t=>{let{alignment:e=Z.alignment,orientation:n=Z.orientation,...r}=t;return Ee("div",{...r,className:d(R,{[`${R}-${e}`]:e,[`${R}-${n}`]:n},t.className),children:t.children})};A.states=Se;A.options=Le;A.className=R;A.defaultOptions=Z;A.moduleName=W;A.folderName=re;var le=A;import{Fragment as Ue,jsx as de}from"react/jsx-runtime";var J="k-font-icon",_e=[],ze={size:[a.undefined,a.xsmall,a.small,a.medium,a.large,a.xlarge,a.xxlarge,a.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info]},we={},L=t=>{let{size:e,themeColor:n,icon:r,rotate:l,flip:c,...u}=t;return r?de("span",{...u,className:d(t.className,J,T(J,{size:e}),{[`k-i-${r}`]:r,[`k-color-${n}`]:n,[`k-rotate-${l}`]:l,"k-flip-h":c==="h"||c==="both","k-flip-v":c==="v"||c==="both"}),"aria-hidden":"true"}):de(Ue,{})};L.states=_e;L.options=ze;L.className=J;L.defaultOptions=we;var ce=L;import{Fragment as Re,jsx as P}from"react/jsx-runtime";var Q="k-svg-icon",De=[],Ke={size:[a.undefined,a.xsmall,a.small,a.medium,a.large,a.xlarge,a.xxlarge,a.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info],variant:[g.outline,g.solid,g.duotone]},X={viewBox:"0 0 24 24",variant:g.outline},E=t=>{let{size:e,themeColor:n,rotate:r,flip:l,viewBox:c=X.viewBox,variant:u=X.variant,icon:s,...x}=t;if(!s)return P(Re,{});if(s==="none")return P("span",{...x,className:d(t.className,Q,T("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let m=typeof s=="object"&&s.name&&s.name,b=typeof s=="object"?u&&s.variants?.[u]||s.variants?.outline||s.content:void 0;return P("span",{...x,className:d(t.className,Q,T("k-icon",{size:e}),{[`k-svg-i-${m}`]:m,[`k-color-${n}`]:n,[`k-rotate-${r}`]:r,"k-flip-h":l==="h"||l==="both","k-flip-v":l==="v"||l==="both"}),"aria-hidden":"true",children:P("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof s=="object"?s.viewBox:c,dangerouslySetInnerHTML:b!==void 0?{__html:b}:void 0,children:s?void 0:t.children})})};E.states=De;E.options=Ke;E.className=Q;E.defaultOptions=X;var Y=E;import*as j from"@progress/kendo-svg-icons";var ue="icon",pe="icons";import{useContext as $e}from"react";import{createContext as Pe}from"react";var me=Pe({iconsType:"svg"});import{Fragment as fe,jsx as _}from"react/jsx-runtime";var $="k-icon",He=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),Fe=[],Ve={size:[a.undefined,a.xsmall,a.small,a.medium,a.large,a.xlarge,a.xxlarge,a.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info],variant:[g.outline,g.solid,g.duotone]},H={viewBox:"0 0 24 24",type:"svg",variant:g.outline},p=t=>{let{iconsType:e}=$e(me),{size:n,themeColor:r,icon:l,type:c=e||H.type,rotate:u,flip:s,viewBox:x=H.viewBox,variant:m=H.variant,...b}=t;if(!l)return _(fe,{});if((e||c)==="svg"){if(l==="none")return _(Y,{...b,className:d(t.className,$),icon:l,size:n,variant:m});let y=j[l]?l:He(`${l}-icon`);return j[y]?_(Y,{...b,className:d(t.className,$),icon:j[y],size:n,themeColor:r,rotate:u,flip:s,viewBox:x,variant:m}):_(fe,{})}return _(ce,{...b,className:d(t.className,$),icon:l,size:n,themeColor:r,rotate:u,flip:s})};p.states=Fe;p.options=Ve;p.defaultOptions=H;p.className=$;p.moduleName=ue;p.folderName=pe;p.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 ee="button",he=ee;import{Fragment as xe,jsx as I,jsxs as be}from"react/jsx-runtime";var z="k-button",Ge=["icon-button"],qe=[h.hover,h.focus,h.active,h.selected,h.disabled,h.generating],We={size:[a.undefined,a.xsmall,a.small,a.medium,a.large],rounded:[C.undefined,C.none,C.small,C.medium,C.large,C.full],fillMode:[O.undefined,O.solid,O.flat,O.outline,O.clear,O.link],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.inverse]},te={showArrow:!1,arrowIconName:"chevron-down"},i=t=>{let{as:e="button",size:n,rounded:r,fillMode:l,themeColor:c,showArrow:u=te.showArrow,arrowIconName:s=te.arrowIconName,variant:x,hover:m,focus:b,active:U,selected:y,disabled:D,togglable:q,ariaDisabled:B,icon:f,iconSize:k,text:K,iconClassName:Oe,className:Ae,...Be}=t,Me=f!=null,Ie=t.children!==void 0;return be(e,{className:d(Ae,z,ie(z,x),T(z,{size:n,rounded:r,fillMode:l,themeColor:c}),M(z,{hover:m,focus:b,active:U,disabled:D||B,selected:y}),{"k-icon-button":!K&&!Ie&&Me}),"aria-pressed":q?y?"true":"false":void 0,...Be,"aria-disabled":B?"true":void 0,disabled:D||void 0,children:[typeof f=="string"&&f&&I(p,{className:d(Oe,"k-button-icon"),icon:f,size:k}),f&&typeof f!="string"&&I(xe,{children:f}),K?be(xe,{children:[K&&I("span",{className:"k-button-text",children:K}),t.children]}):t.children&&I("span",{className:"k-button-text",children:t.children}),u&&I("span",{className:"k-menu-button-arrow k-button-arrow",children:I(p,{icon:s})})]})};i.states=qe;i.options=We;i.variants=Ge;i.className=z;i.defaultOptions=te;i.moduleName=ee;i.folderName=he;i.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 ge=t=>Ze(i,{icon:"folder",...t,"aria-label":t["aria-label"]||"Folder",children:void 0});import{jsx as Je}from"react/jsx-runtime";var Ne=t=>Je(i,{icon:"folder",children:"Button",...t});import{jsx as Qe}from"react/jsx-runtime";var ve=t=>Qe(i,{children:"Button",...t});import{jsx as oe}from"react/jsx-runtime";var Xe=i.options,Ye=i.states,je={...i.defaultOptions,variant:"text"},et=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],tt=[],S=t=>{let{variant:e,...n}=t;switch(e){case"icon-only":return oe(ge,{...n,icon:"star"});case"icon-and-text":return oe(Ne,{...n,icon:"star",children:"Button"});default:return oe(ve,{...n,children:"Button"})}};S.options=Xe;S.states=Ye;S.variants=et;S.defaultOptions=je;S.modifiers=tt;S.className=i.className;import{Fragment as F,jsx as N,jsxs as w}from"react/jsx-runtime";var ne="k-upload-dropzone",ot=[h.hover],V=t=>{let{hover:e,status:n,disabled:r,hasFiles:l,filesId:c,...u}=t,s;switch(n){case"uploading":s=w(F,{children:[N(p,{icon:"upload"}),"Uploading..."]});break;case"done":s=w(F,{children:[N(p,{icon:"check"}),"Done"]});break;case"failed":s=w(F,{children:[N(p,{icon:"exclamation-circle"}),"Done"]});break;default:s=N(F,{});break}return w("div",{...u,className:d(t.className,ne,"k-dropzone",M(ne,{hover:e})),children:[w("div",{className:"k-upload-button-wrap",children:[N(i,{className:"k-upload-button","aria-disabled":r?"true":"false",...l&&c?{"aria-controls":c}:{},children:"Select files..."}),N("input",{id:"upload-input",className:"k-hidden",tabIndex:-1,"aria-hidden":"true"})]}),N("span",{className:d("k-dropzone-hint",{"k-hidden":n!=="upload"}),children:"Drop files here to upload"}),n!=="upload"&&N("span",{className:"k-upload-status",children:s})]})};V.states=ot;V.className=ne;var ae="upload",ye=ae;import{jsx as G,jsxs as Te}from"react/jsx-runtime";var se="k-upload",nt=[h.hover,h.disabled],at={},Ce={actionsLayout:"end"},ke="upload-files-list",v=t=>{let{async:e,empty:n,actions:r,actionsLayout:l=Ce.actionsLayout,hover:c,status:u,disabled:s,...x}=t,m=!!t.children;return Te("div",{...x,className:d(t.className,se,M(se,{disabled:s}),{"k-upload-async":e,"k-upload-empty":n}),children:[G(V,{status:u,hover:c,disabled:s,hasFiles:m,filesId:ke}),m&&G("ul",{className:"k-upload-files",role:"list",id:ke,children:t.children}),r&&m&&Te(le,{alignment:l,orientation:"horizontal",children:[G(i,{className:"k-clear-selected",children:"Clear"}),G(i,{themeColor:"primary",className:"k-upload-selected",children:"Upload"})]})]})};v.states=nt;v.options=at;v.className=se;v.defaultOptions=Ce;v.moduleName=ae;v.folderName=ye;v.ariaSpec={selector:".k-upload",rules:[{selector:".k-upload .k-upload-button",attribute:"aria-disabled",usage:"Announces the disabled state of the upload button."},{selector:".k-upload .k-upload-button",attribute:"aria-controls (when present)",usage:"Creates the relationship between the button and the list of selected files when the list is present."},{selector:".k-upload input",attribute:"tabindex=-1",usage:"Assures that the input element inside the upload is not focusable."},{selector:".k-upload input",attribute:"aria-hidden=true",usage:"The input needs to be hidden from screen readers."},{selector:".k-upload-files",attribute:"role=list",usage:"Explicitly sets the UL role to list."},{selector:".k-upload-files",attribute:"id",usage:"Unique and deterministic id linked to the button aria-controls attribute."},{selector:".k-upload-files .k-file",attribute:"role=listitem",usage:"Explicitly sets the LI role to listitem."},{selector:".k-upload .k-file .k-file-validation-message",attribute:"aria-live=polite",usage:"Announces the change in the upload status of the file."},{selector:".k-upload .k-upload-actions .k-upload-action",attribute:"aria-label",usage:"Provides accessible names for the file action buttons."},{selector:".k-upload .k-upload-actions .k-upload-action",attribute:"tabindex=-1",usage:"The list file action buttons are not focusable elements."}]};var Bo=v;export{se as UPLOAD_CLASSNAME,v as Upload,Bo as default};