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