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