@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
2 lines (1 loc) • 17.3 kB
JavaScript
var r=(...e)=>e.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?r(...t):typeof t=="object"?Object.keys(t).map((o,i)=>t[i]||t[o]&&o||null).filter(o=>o!==null).join(" "):t).filter(t=>!!t).join(" ");var g=(e,t)=>r({[`${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"}),_=(e,t)=>{let{valid:o,invalid:i,hover:a,focus:d,checked:c,active:u,selected:h,disabled:b,indeterminate:x,loading:v,empty:I,readonly:E,highlighted:V,...L}=t;return r({"k-valid":o,"k-invalid":i,"k-hover":a,"k-focus":d,"k-checked":c,"k-active":u,"k-selected":h,"k-disabled":b,"k-indeterminate":x&&!c,"k-loading":v,"k-empty":I,"k-readonly":E,"k-highlighted":V},Object.keys(L).reduce((y,O)=>(O.startsWith("k-")?y[O]=L[O]:y[`k-${O}`]=L[O],y),{}))};function ve(e,t){if(!t)return{};let o=Array.isArray(t)?t:[t];return Object.fromEntries(o.map(i=>[`k-${i}`,!0]))}var n={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"},p={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},T={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"},s={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 $="input",Q=$;import{jsx as it}from"react/jsx-runtime";var X="k-input",nt=[s.hover,s.focus,s.valid,s.invalid,s.required,s.disabled,s.loading,s.readonly],at={size:[n.undefined,n.small,n.medium,n.large],rounded:[m.undefined,m.none,m.small,m.medium,m.large,m.full],fillMode:[p.undefined,p.solid,p.flat,p.outline]},st={},M=e=>{let{hover:t,focus:o,disabled:i,invalid:a,valid:d,loading:c,readonly:u,size:h,rounded:b,fillMode:x,...v}=e;return it("span",{...v,className:r(e.className,X,g(X,{size:h,rounded:b,fillMode:x}),_(X,{hover:t,focus:o,disabled:i,invalid:a,valid:d,loading:c,readonly:u}))})};M.states=nt;M.options=at;M.className=X;M.defaultOptions=st;M.moduleName=$;M.folderName=Q;import{jsx as ut}from"react/jsx-runtime";var Y="k-picker",rt=[s.hover,s.focus,s.valid,s.invalid,s.required,s.disabled,s.loading,s.readonly],lt={size:[n.undefined,n.small,n.medium,n.large],rounded:[m.undefined,m.none,m.small,m.medium,m.large,m.full],fillMode:[p.undefined,p.solid,p.flat,p.outline]},dt={},R=e=>{let{hover:t,focus:o,disabled:i,invalid:a,valid:d,loading:c,readonly:u,size:h,rounded:b,fillMode:x,...v}=e;return ut("span",{...v,className:r(e.className,Y,g(Y,{size:h,rounded:b,fillMode:x}),_(Y,{hover:t,focus:o,disabled:i,invalid:a,valid:d,loading:c,readonly:u})),children:e.children})};R.states=rt;R.options=lt;R.className=Y;R.defaultOptions=dt;R.moduleName=$;R.folderName=Q;import{Fragment as ft,jsx as ye}from"react/jsx-runtime";var ae="k-font-icon",pt=[],ct={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[l.undefined,l.base,l.primary,l.secondary,l.tertiary,l.success,l.warning,l.error,l.info]},mt={},F=e=>{let{size:t,themeColor:o,icon:i,rotate:a,flip:d,...c}=e;return i?ye("span",{...c,className:r(e.className,ae,g(ae,{size:t}),{[`k-i-${i}`]:i,[`k-color-${o}`]:o,[`k-rotate-${a}`]:a,"k-flip-h":d==="h"||d==="both","k-flip-v":d==="v"||d==="both"}),"aria-hidden":"true"}):ye(ft,{})};F.states=pt;F.options=ct;F.className=ae;F.defaultOptions=mt;var Me=F;import{Fragment as Nt,jsx as Z}from"react/jsx-runtime";var se="k-svg-icon",bt=[],xt={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[l.undefined,l.base,l.primary,l.secondary,l.tertiary,l.success,l.warning,l.error,l.info],variant:[T.outline,T.solid,T.duotone]},ie={viewBox:"0 0 24 24",variant:T.outline},q=e=>{let{size:t,themeColor:o,rotate:i,flip:a,viewBox:d=ie.viewBox,variant:c=ie.variant,icon:u,...h}=e;if(!u)return Z(Nt,{});if(u==="none")return Z("span",{...h,className:r(e.className,se,g("k-icon",{size:t}),"k-none"),"aria-hidden":"true"});let b=typeof u=="object"&&u.name&&u.name,x=typeof u=="object"?c&&u.variants?.[c]||u.variants?.outline||u.content:void 0;return Z("span",{...h,className:r(e.className,se,g("k-icon",{size:t}),{[`k-svg-i-${b}`]:b,[`k-color-${o}`]:o,[`k-rotate-${i}`]:i,"k-flip-h":a==="h"||a==="both","k-flip-v":a==="v"||a==="both"}),"aria-hidden":"true",children:Z("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof u=="object"?u.viewBox:d,dangerouslySetInnerHTML:x!==void 0?{__html:x}:void 0,children:u?void 0:e.children})})};q.states=bt;q.options=xt;q.className=se;q.defaultOptions=ie;var re=q;import*as le from"@progress/kendo-svg-icons";var Se="icon",Te="icons";import{useContext as It}from"react";import{createContext as ht}from"react";var ke=ht({iconsType:"svg"});import{Fragment as Oe,jsx as G}from"react/jsx-runtime";var j="k-icon",gt=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),vt=[],yt={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[l.undefined,l.base,l.primary,l.secondary,l.tertiary,l.success,l.warning,l.error,l.info],variant:[T.outline,T.solid,T.duotone]},ee={viewBox:"0 0 24 24",type:"svg",variant:T.outline},N=e=>{let{iconsType:t}=It(ke),{size:o,themeColor:i,icon:a,type:d=t||ee.type,rotate:c,flip:u,viewBox:h=ee.viewBox,variant:b=ee.variant,...x}=e;if(!a)return G(Oe,{});if((t||d)==="svg"){if(a==="none")return G(re,{...x,className:r(e.className,j),icon:a,size:o,variant:b});let I=le[a]?a:gt(`${a}-icon`);return le[I]?G(re,{...x,className:r(e.className,j),icon:le[I],size:o,themeColor:i,rotate:c,flip:u,viewBox:h,variant:b}):G(Oe,{})}return G(Me,{...x,className:r(e.className,j),icon:a,size:o,themeColor:i,rotate:c,flip:u})};N.states=vt;N.options=yt;N.defaultOptions=ee;N.className=j;N.moduleName=Se;N.folderName=Te;N.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{Fragment as Tt,jsx as de}from"react/jsx-runtime";var Le="k-clear-value",Mt=[s.disabled,s.loading,s.readonly],St={},A=e=>{let{disabled:t,loading:o,readonly:i,value:a}=e;return t||i||o||!a?de(Tt,{}):de("span",{className:r(e.className,Le),children:de(N,{icon:"x"})})};A.states=Mt;A.options=St;A.className=Le;import{jsx as Lt}from"react/jsx-runtime";var ue="k-input-inner",kt=[],Ot={},te={type:"text",autocomplete:"off",value:"",placeholder:""},B=e=>{let{value:t=te.value,type:o=te.type,placeholder:i=te.placeholder,autocomplete:a=te.autocomplete,disabled:d,readOnly:c,...u}=e;return Lt("input",{...u,type:o,className:r(e.className,ue,g(ue,e)),placeholder:i,autoComplete:a,defaultValue:t,disabled:d||void 0,readOnly:c||void 0})};B.states=kt;B.options=Ot;B.className=ue;import{jsx as Ce,jsxs as At}from"react/jsx-runtime";var pe="k-input-inner",Ct=[],Et={},ce=e=>{let{value:t,placeholder:o,showValue:i,valueIcon:a,valueIconName:d,...c}=e;return At("span",{...c,className:r(e.className,pe,g(pe,e)),children:[a,!a&&d&&Ce(N,{className:"k-input-value-icon",icon:d}),i&&!t&&o,i&&t&&Ce("span",{className:"k-input-value-text",children:t})]})};ce.states=Ct;ce.options=Et;ce.className=pe;import{jsx as wt}from"react/jsx-runtime";var me="k-input-inner",Bt=[],Pt={},Ee={value:"",placeholder:""},fe=e=>{let{value:t=Ee.value,placeholder:o=Ee.placeholder,rows:i,disabled:a,...d}=e;return wt("textarea",{...d,className:r(e.className,me,g(me,e)),placeholder:o,rows:i,defaultValue:t,disabled:a||void 0})};fe.states=Bt;fe.options=Pt;fe.className=me;import{Fragment as _t,jsx as Ae}from"react/jsx-runtime";var Be="k-input-loading-icon",zt=[s.disabled,s.loading],D=e=>{let{disabled:t,loading:o}=e;return t||!o?Ae(_t,{}):Ae("span",{className:r(e.className,Be,"k-icon k-i-loading")})};D.states=zt;D.className=Be;import{Fragment as Ht,jsx as Pe}from"react/jsx-runtime";var we="k-input-validation-icon",Rt=[s.valid,s.invalid,s.disabled,s.loading],Dt={},P=e=>{let{valid:t,invalid:o,disabled:i,loading:a}=e,d=o?"warning-circle":"check-circle";return i||a||!!!(t||o)?Pe(Ht,{}):Pe(N,{className:r(we),icon:d})};P.states=Rt;P.options=Dt;P.className=we;import{Fragment as Vt,jsx as ze}from"react/jsx-runtime";var Kt="k-input-prefix",Ut={direction:"horizontal"},_e=e=>{let{direction:t=Ut.direction,...o}=e;return e.children?ze("span",{...o,className:r(Kt,e.className,{[`k-input-prefix-${t}`]:t}),children:e.children}):ze(Vt,{})};import{Fragment as qt,jsx as Re}from"react/jsx-runtime";var $t="k-input-suffix",Ft={direction:"horizontal"},De=e=>{let{direction:t=Ft.direction,...o}=e;return e.children?Re("span",{...o,className:r($t,e.className,{[`k-input-suffix-${t}`]:t}),children:e.children}):Re(qt,{})};import{jsx as $n}from"react/jsx-runtime";import{jsx as Wn}from"react/jsx-runtime";import{jsx as Wt}from"react/jsx-runtime";var He="k-input-separator",Gt={direction:"vertical"},be=e=>{let{direction:t=Gt.direction,...o}=e;return Wt("span",{...o,className:r(He,e.className,{[`${He}-${t}`]:t})})};var xe="button",Ke=xe;import{Fragment as Ue,jsx as H,jsxs as Ve}from"react/jsx-runtime";var W="k-button",Jt=["icon-button"],Qt=[s.hover,s.focus,s.active,s.selected,s.disabled,s.generating],Xt={size:[n.undefined,n.xsmall,n.small,n.medium,n.large],rounded:[m.undefined,m.none,m.small,m.medium,m.large,m.full],fillMode:[p.undefined,p.solid,p.flat,p.outline,p.clear,p.link],themeColor:[l.undefined,l.base,l.primary,l.secondary,l.tertiary,l.success,l.warning,l.error,l.info,l.inverse]},Ne={showArrow:!1,arrowIconName:"chevron-down"},f=e=>{let{as:t="button",size:o,rounded:i,fillMode:a,themeColor:d,showArrow:c=Ne.showArrow,arrowIconName:u=Ne.arrowIconName,variant:h,hover:b,focus:x,active:v,selected:I,disabled:E,togglable:V,ariaDisabled:L,icon:y,iconSize:O,text:z,iconClassName:ne,className:je,...et}=e,tt=y!=null,ot=e.children!==void 0;return Ve(t,{className:r(je,W,ve(W,h),g(W,{size:o,rounded:i,fillMode:a,themeColor:d}),_(W,{hover:b,focus:x,active:v,disabled:E||L,selected:I}),{"k-icon-button":!z&&!ot&&tt}),"aria-pressed":V?I?"true":"false":void 0,...et,"aria-disabled":L?"true":void 0,disabled:E||void 0,children:[typeof y=="string"&&y&&H(N,{className:r(ne,"k-button-icon"),icon:y,size:O}),y&&typeof y!="string"&&H(Ue,{children:y}),z?Ve(Ue,{children:[z&&H("span",{className:"k-button-text",children:z}),e.children]}):e.children&&H("span",{className:"k-button-text",children:e.children}),c&&H("span",{className:"k-menu-button-arrow k-button-arrow",children:H(N,{icon:u})})]})};f.states=Qt;f.options=Xt;f.variants=Jt;f.className=W;f.defaultOptions=Ne;f.moduleName=xe;f.folderName=Ke;f.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 Yt}from"react/jsx-runtime";var oe=e=>Yt(f,{children:"Button",...e});import{Fragment as $e,jsx as k,jsxs as he}from"react/jsx-runtime";var Zt=M.states,jt=M.defaultOptions,eo=M.options,to=[{name:"prefix",title:"Prefix"},{name:"suffix",title:"Suffix"},{name:"clear-button",title:"`Clear` Button"},{name:"validation-icon",title:"Validation Icon"},{name:"separators",title:"Separators"}],oo=[],K=e=>{let{modifiers:t,valid:o,invalid:i,loading:a,disabled:d,readonly:c,...u}=e,h=t?.prefix,b=t?.suffix,x=t?.["clear-button"],v=t?.["validation-icon"],I=t?.separators;return he(M,{...u,valid:o,invalid:i,loading:a,disabled:d,readonly:c,style:{width:300},children:[h&&he($e,{children:[k(_e,{children:k(N,{icon:"lock"})}),I&&k(be,{})]}),k(B,{placeholder:"Placeholder",value:"Value"}),v&&k(P,{valid:o,invalid:i,loading:a,disabled:d}),k(D,{loading:a,disabled:d}),x&&k(A,{loading:a,disabled:d,readonly:c,value:"Value"}),b&&he($e,{children:[I&&k(be,{}),k(De,{children:k(oe,{size:u.size,fillMode:"clear",children:"Send"})})]})]})};K.options=eo;K.states=Zt;K.variants=oo;K.defaultOptions=jt;K.modifiers=to;K.className=M.className;import{jsx as no}from"react/jsx-runtime";var Fe=e=>no(f,{icon:"folder",...e,"aria-label":e["aria-label"]||"Folder",children:void 0});import{jsx as ao}from"react/jsx-runtime";var qe=e=>ao(f,{icon:"folder",children:"Button",...e});import{jsx as Ie}from"react/jsx-runtime";var so=f.options,io=f.states,ro={...f.defaultOptions,variant:"text"},lo=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],uo=[],U=e=>{let{variant:t,...o}=e;switch(t){case"icon-only":return Ie(Fe,{...o,icon:"star"});case"icon-and-text":return Ie(qe,{...o,icon:"star",children:"Button"});default:return Ie(oe,{...o,children:"Button"})}};U.options=so;U.states=io;U.variants=lo;U.defaultOptions=ro;U.modifiers=uo;U.className=f.className;import{jsx as Ge,jsxs as bo}from"react/jsx-runtime";var We="k-spin-button",mo=[],fo={size:[n.undefined,n.small,n.medium,n.large],fillMode:[p.undefined,p.solid,p.flat,p.outline,p.clear,p.link]},ge={increaseLabel:"Increase value",decreaseLabel:"Decrease value"},C=e=>{let{size:t,fillMode:o,disabled:i,increaseLabel:a=ge.increaseLabel,decreaseLabel:d=ge.decreaseLabel,...c}=e;return bo("span",{...c,className:r(We,e.className),children:[Ge(f,{className:"k-spinner-increase",icon:"chevron-up",size:t,fillMode:o,disabled:i,"aria-label":a}),Ge(f,{className:"k-spinner-decrease",icon:"chevron-down",size:t,fillMode:o,disabled:i,"aria-label":d})]})};C.states=mo;C.options=fo;C.className=We;C.defaultOptions=ge;C.moduleName=null;C.folderName=null;var Je="date-input",Qe="dateinput";import{jsx as J,jsxs as Io}from"react/jsx-runtime";var Xe="k-dateinput",xo=[s.hover,s.focus,s.valid,s.invalid,s.required,s.disabled,s.loading,s.readonly],No={size:[n.undefined,n.small,n.medium,n.large],rounded:[m.undefined,m.none,m.small,m.medium,m.large,m.full],fillMode:[p.undefined,p.solid,p.flat,p.outline]},ho={},S=e=>{let{size:t,rounded:o,fillMode:i,value:a,placeholder:d,hover:c,focus:u,valid:h,invalid:b,required:x,loading:v,disabled:I,readonly:E,showClearButton:V,showSpinButton:L,id:y,"aria-label":O,"aria-describedby":z,...ne}=e;return Io(M,{...ne,size:t,rounded:o,fillMode:i,hover:c,focus:u,valid:h,invalid:b,required:x,loading:v,disabled:I,readonly:E,className:r(e.className,Xe),children:[J(B,{id:y,placeholder:d,value:a,disabled:I,"aria-label":O,"aria-describedby":z,"aria-invalid":b?"true":void 0}),J(P,{valid:h,invalid:b,loading:v,disabled:I}),J(D,{loading:v,disabled:I}),V&&J(A,{loading:v,disabled:I,readonly:E,value:a}),L&&J(C,{className:"k-input-spinner",size:t,fillMode:i,disabled:I})]})};S.states=xo;S.options=No;S.className=Xe;S.defaultOptions=ho;S.moduleName=Je;S.folderName=Qe;S.ariaSpec={selector:".k-dateinput",rules:[{selector:".k-dateinput > .k-input-inner",attribute:"role=textbox or nodeName=input",usage:'The element should be an input or have role="textbox".'},{selector:".k-dateinput > .k-input-inner",attribute:"label for or aria-label or aria-labelledby (when has accessible name)",usage:"The input requires an accessible name (provided by consuming app)."},{selector:".k-dateinput > .k-input-inner",attribute:"tabindex=0",usage:"The element should be focusable."},{selector:".k-dateinput > .k-input-inner",attribute:"aria-invalid=true (when invalid)",usage:"Rendered when the DateInput is in an invalid state."},{selector:".k-dateinput > .k-input-inner",attribute:"aria-describedby (when has hint or error)",usage:"Points to the hint or error message."},{selector:".k-dateinput > .k-input-inner",attribute:"readonly=readonly or aria-readonly=true (when readonly)",usage:"Rendered when the DateInput is readonly."},{selector:".k-dateinput.k-disabled > .k-input-inner",attribute:"disabled=disabled or aria-disabled=true",usage:"Rendered when the DateInput is disabled."}]};var Ye=S;import{jsx as go}from"react/jsx-runtime";var Ze=e=>go(Ye,{...e});import{jsx as ko}from"react/jsx-runtime";var vo=S.options,yo=S.states,Mo=S.defaultOptions,So=[{name:"spin-button",title:"`Spin` Button"}],To=[],w=e=>{let{modifiers:t,...o}=e,i={};return Object.keys(t||{}).forEach(a=>{a==="spin-button"&&(i.showSpinButton=!!t?.[a])}),ko(Ze,{value:"2/04/2021",style:{width:"300px"},...o,...i})};w.options=vo;w.states=yo;w.variants=To;w.defaultOptions=Mo;w.modifiers=So;w.className=S.className;var ys=w;export{w as DateinputDemo,ys as default};