@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
2 lines (1 loc) • 22.9 kB
JavaScript
var l=(...e)=>e.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?l(...t):typeof t=="object"?Object.keys(t).map((o,s)=>t[s]||t[o]&&o||null).filter(o=>o!==null).join(" "):t).filter(t=>!!t).join(" ");var x=(e,t)=>l({[`${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"}),V=(e,t)=>{let{valid:o,invalid:s,hover:n,focus:d,checked:c,active:u,selected:N,disabled:g,indeterminate:v,loading:k,empty:S,readonly:H,highlighted:D,...E}=t;return l({"k-valid":o,"k-invalid":s,"k-hover":n,"k-focus":d,"k-checked":c,"k-active":u,"k-selected":N,"k-disabled":g,"k-indeterminate":v&&!c,"k-loading":k,"k-empty":S,"k-readonly":H,"k-highlighted":D},Object.keys(E).reduce((y,O)=>(O.startsWith("k-")?y[O]=E[O]:y[`k-${O}`]=E[O],y),{}))};function Je(e,t){if(!t)return{};let o=Array.isArray(t)?t:[t];return Object.fromEntries(o.map(s=>[`k-${s}`,!0]))}var i={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"},B={undefined:void 0,outline:"outline",solid:"solid",duotone:"duotone"},a={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",inverse:"inverse"},r={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 Me="appbar",Qe=Me;import{jsx as Ot}from"react/jsx-runtime";var ke="k-appbar",Mt=[],kt={themeColor:[a.undefined,a.base,a.primary,a.secondary,a.tertiary,a.inverse]},St={},T=e=>{let{themeColor:t,positionMode:o,position:s,...n}=e;return Ot("div",{...n,className:l(e.className,ke,x(ke,{themeColor:t}),{[`k-appbar-${o}`]:o,[`k-appbar-${s}`]:s}),children:e.children})};T.states=Mt;T.options=kt;T.className=ke;T.defaultOptions=St;T.moduleName=Me;T.folderName=Qe;T.ariaSpec={selector:".k-appbar",rules:[]};import{jsx as Et}from"react/jsx-runtime";var Ct="k-appbar-section",U=e=>{let{...t}=e;return Et("div",{...t,className:l(Ct,e.className),children:e.children})};var Se="avatar",We=Se;import{jsx as Ye}from"react/jsx-runtime";var j="k-avatar";var Lt=[r.hover,r.focus,r.active,r.selected,r.disabled],Bt={size:[i.undefined,i.small,i.medium,i.large],rounded:[p.undefined,p.none,p.small,p.medium,p.large,p.full],fillMode:[m.undefined,m.solid,m.outline],themeColor:[a.undefined,a.base,a.primary,a.secondary,a.tertiary]},Oe={type:"text",border:!1},A=e=>{let{size:t,rounded:o,fillMode:s,themeColor:n,type:d=Oe.type,border:c=Oe.border,...u}=e;return Ye("div",{...u,className:l(e.className,j,x(j,{size:t,rounded:o,fillMode:s,themeColor:n}),{[`${j}-bordered`]:c}),children:Ye("span",{className:`${j}-${d}`,children:e.children})})};A.states=Lt;A.options=Bt;A.className=j;A.defaultOptions=Oe;A.moduleName=Se;A.folderName=We;A.ariaSpec={selector:".k-avatar",rules:[{selector:".k-avatar img",attribute:"alt",usage:"Images inside Avatar must have alt text for screen readers."}]};var R=A;import{jsx as Pt}from"react/jsx-runtime";var Ze=e=>Pt(R,{type:"icon",...e});import{jsx as wt}from"react/jsx-runtime";var je=e=>wt(R,{type:"text",...e});import{jsx as Rt}from"react/jsx-runtime";var pe=e=>Rt(R,{type:"image",...e});import{jsx as Hn}from"react/jsx-runtime";import{Fragment as qt,jsx as et}from"react/jsx-runtime";var Ce="k-font-icon",zt=[],_t={size:[i.undefined,i.xsmall,i.small,i.medium,i.large,i.xlarge,i.xxlarge,i.xxxlarge],themeColor:[a.undefined,a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info]},Kt={},ee=e=>{let{size:t,themeColor:o,icon:s,rotate:n,flip:d,...c}=e;return s?et("span",{...c,className:l(e.className,Ce,x(Ce,{size:t}),{[`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"}):et(qt,{})};ee.states=zt;ee.options=_t;ee.className=Ce;ee.defaultOptions=Kt;var tt=ee;import{Fragment as Vt,jsx as de}from"react/jsx-runtime";var Ee="k-svg-icon",Ht=[],Dt={size:[i.undefined,i.xsmall,i.small,i.medium,i.large,i.xlarge,i.xxlarge,i.xxxlarge],themeColor:[a.undefined,a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info],variant:[B.outline,B.solid,B.duotone]},Le={viewBox:"0 0 24 24",variant:B.outline},te=e=>{let{size:t,themeColor:o,rotate:s,flip:n,viewBox:d=Le.viewBox,variant:c=Le.variant,icon:u,...N}=e;if(!u)return de(Vt,{});if(u==="none")return de("span",{...N,className:l(e.className,Ee,x("k-icon",{size:t}),"k-none"),"aria-hidden":"true"});let g=typeof u=="object"&&u.name&&u.name,v=typeof u=="object"?c&&u.variants?.[c]||u.variants?.outline||u.content:void 0;return de("span",{...N,className:l(e.className,Ee,x("k-icon",{size:t}),{[`k-svg-i-${g}`]:g,[`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:de("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof u=="object"?u.viewBox:d,dangerouslySetInnerHTML:v!==void 0?{__html:v}:void 0,children:u?void 0:e.children})})};te.states=Ht;te.options=Dt;te.className=Ee;te.defaultOptions=Le;var Be=te;import*as Pe from"@progress/kendo-svg-icons";var ot="icon",nt="icons";import{useContext as $t}from"react";import{createContext as Ut}from"react";var at=Ut({iconsType:"svg"});import{Fragment as it,jsx as oe}from"react/jsx-runtime";var ue="k-icon",Ft=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),Xt=[],Gt={size:[i.undefined,i.xsmall,i.small,i.medium,i.large,i.xlarge,i.xxlarge,i.xxxlarge],themeColor:[a.undefined,a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info],variant:[B.outline,B.solid,B.duotone]},ce={viewBox:"0 0 24 24",type:"svg",variant:B.outline},f=e=>{let{iconsType:t}=$t(at),{size:o,themeColor:s,icon:n,type:d=t||ce.type,rotate:c,flip:u,viewBox:N=ce.viewBox,variant:g=ce.variant,...v}=e;if(!n)return oe(it,{});if((t||d)==="svg"){if(n==="none")return oe(Be,{...v,className:l(e.className,ue),icon:n,size:o,variant:g});let S=Pe[n]?n:Ft(`${n}-icon`);return Pe[S]?oe(Be,{...v,className:l(e.className,ue),icon:Pe[S],size:o,themeColor:s,rotate:c,flip:u,viewBox:N,variant:g}):oe(it,{})}return oe(tt,{...v,className:l(e.className,ue),icon:n,size:o,themeColor:s,rotate:c,flip:u})};f.states=Xt;f.options=Gt;f.defaultOptions=ce;f.className=ue;f.moduleName=ot;f.folderName=nt;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{jsx as ne}from"react/jsx-runtime";var Jt=A.options,Qt=A.states,Wt={...A.defaultOptions,variant:"image"},Yt=[{name:"image",title:"Image"},{name:"icon",title:"Icon Avatar"},{name:"text",title:"Text Avatar"}],Zt=[],$=e=>{let{variant:t,...o}=e;switch(t){case"icon":return ne(Ze,{...o,children:ne(f,{icon:"star"})});case"text":return ne(je,{...o,children:"JO"});default:return ne(pe,{...o,children:ne("img",{src:"https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg"})})}};$.options=Jt;$.states=Qt;$.variants=Yt;$.defaultOptions=Wt;$.modifiers=Zt;$.className=A.className;var we="button",rt=we;import{Fragment as st,jsx as F,jsxs as lt}from"react/jsx-runtime";var ae="k-button",jt=["icon-button"],eo=[r.hover,r.focus,r.active,r.selected,r.disabled,r.generating],to={size:[i.undefined,i.xsmall,i.small,i.medium,i.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:[a.undefined,a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info,a.inverse]},Re={showArrow:!1,arrowIconName:"chevron-down"},h=e=>{let{as:t="button",size:o,rounded:s,fillMode:n,themeColor:d,showArrow:c=Re.showArrow,arrowIconName:u=Re.arrowIconName,variant:N,hover:g,focus:v,active:k,selected:S,disabled:H,togglable:D,ariaDisabled:E,icon:y,iconSize:O,text:L,iconClassName:le,className:ye,...Ie}=e,Te=y!=null,Ae=e.children!==void 0;return lt(t,{className:l(ye,ae,Je(ae,N),x(ae,{size:o,rounded:s,fillMode:n,themeColor:d}),V(ae,{hover:g,focus:v,active:k,disabled:H||E,selected:S}),{"k-icon-button":!L&&!Ae&&Te}),"aria-pressed":D?S?"true":"false":void 0,...Ie,"aria-disabled":E?"true":void 0,disabled:H||void 0,children:[typeof y=="string"&&y&&F(f,{className:l(le,"k-button-icon"),icon:y,size:O}),y&&typeof y!="string"&&F(st,{children:y}),L?lt(st,{children:[L&&F("span",{className:"k-button-text",children:L}),e.children]}):e.children&&F("span",{className:"k-button-text",children:e.children}),c&&F("span",{className:"k-menu-button-arrow k-button-arrow",children:F(f,{icon:u})})]})};h.states=eo;h.options=to;h.variants=jt;h.className=ae;h.defaultOptions=Re;h.moduleName=we;h.folderName=rt;h.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 oo}from"react/jsx-runtime";var ie=e=>oo(h,{icon:"folder",...e,"aria-label":e["aria-label"]||"Folder",children:void 0});import{jsx as no}from"react/jsx-runtime";var pt=e=>no(h,{icon:"folder",children:"Button",...e});import{jsx as ao}from"react/jsx-runtime";var C=e=>ao(h,{children:"Button",...e});import{jsx as ze}from"react/jsx-runtime";var io=h.options,ro=h.states,so={...h.defaultOptions,variant:"text"},lo=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],po=[],X=e=>{let{variant:t,...o}=e;switch(t){case"icon-only":return ze(ie,{...o,icon:"star"});case"icon-and-text":return ze(pt,{...o,icon:"star",children:"Button"});default:return ze(C,{...o,children:"Button"})}};X.options=io;X.states=ro;X.variants=lo;X.defaultOptions=so;X.modifiers=po;X.className=h.className;var _e="textbox",dt=_e;var re="input",me=re;import{jsx as fo}from"react/jsx-runtime";var fe="k-input",uo=[r.hover,r.focus,r.valid,r.invalid,r.required,r.disabled,r.loading,r.readonly],co={size:[i.undefined,i.small,i.medium,i.large],rounded:[p.undefined,p.none,p.small,p.medium,p.large,p.full],fillMode:[m.undefined,m.solid,m.flat,m.outline]},mo={},I=e=>{let{hover:t,focus:o,disabled:s,invalid:n,valid:d,loading:c,readonly:u,size:N,rounded:g,fillMode:v,...k}=e;return fo("span",{...k,className:l(e.className,fe,x(fe,{size:N,rounded:g,fillMode:v}),V(fe,{hover:t,focus:o,disabled:s,invalid:n,valid:d,loading:c,readonly:u}))})};I.states=uo;I.options=co;I.className=fe;I.defaultOptions=mo;I.moduleName=re;I.folderName=me;import{jsx as ho}from"react/jsx-runtime";var xe="k-picker",xo=[r.hover,r.focus,r.valid,r.invalid,r.required,r.disabled,r.loading,r.readonly],bo={size:[i.undefined,i.small,i.medium,i.large],rounded:[p.undefined,p.none,p.small,p.medium,p.large,p.full],fillMode:[m.undefined,m.solid,m.flat,m.outline]},vo={},G=e=>{let{hover:t,focus:o,disabled:s,invalid:n,valid:d,loading:c,readonly:u,size:N,rounded:g,fillMode:v,...k}=e;return ho("span",{...k,className:l(e.className,xe,x(xe,{size:N,rounded:g,fillMode:v}),V(xe,{hover:t,focus:o,disabled:s,invalid:n,valid:d,loading:c,readonly:u})),children:e.children})};G.states=xo;G.options=bo;G.className=xe;G.defaultOptions=vo;G.moduleName=re;G.folderName=me;import{Fragment as yo,jsx as Ke}from"react/jsx-runtime";var ut="k-clear-value",No=[r.disabled,r.loading,r.readonly],go={},z=e=>{let{disabled:t,loading:o,readonly:s,value:n}=e;return t||s||o||!n?Ke(yo,{}):Ke("span",{className:l(e.className,ut),children:Ke(f,{icon:"x"})})};z.states=No;z.options=go;z.className=ut;import{jsx as Ao}from"react/jsx-runtime";var qe="k-input-inner",Io=[],To={},be={type:"text",autocomplete:"off",value:"",placeholder:""},_=e=>{let{value:t=be.value,type:o=be.type,placeholder:s=be.placeholder,autocomplete:n=be.autocomplete,disabled:d,readOnly:c,...u}=e;return Ao("input",{...u,type:o,className:l(e.className,qe,x(qe,e)),placeholder:s,autoComplete:n,defaultValue:t,disabled:d||void 0,readOnly:c||void 0})};_.states=Io;_.options=To;_.className=qe;import{jsx as ct,jsxs as So}from"react/jsx-runtime";var He="k-input-inner",Mo=[],ko={},De=e=>{let{value:t,placeholder:o,showValue:s,valueIcon:n,valueIconName:d,...c}=e;return So("span",{...c,className:l(e.className,He,x(He,e)),children:[n,!n&&d&&ct(f,{className:"k-input-value-icon",icon:d}),s&&!t&&o,s&&t&&ct("span",{className:"k-input-value-text",children:t})]})};De.states=Mo;De.options=ko;De.className=He;import{jsx as Eo}from"react/jsx-runtime";var Ve="k-input-inner",Oo=[],Co={},mt={value:"",placeholder:""},Ue=e=>{let{value:t=mt.value,placeholder:o=mt.placeholder,rows:s,disabled:n,...d}=e;return Eo("textarea",{...d,className:l(e.className,Ve,x(Ve,e)),placeholder:o,rows:s,defaultValue:t,disabled:n||void 0})};Ue.states=Oo;Ue.options=Co;Ue.className=Ve;import{Fragment as Bo,jsx as ft}from"react/jsx-runtime";var xt="k-input-loading-icon",Lo=[r.disabled,r.loading],J=e=>{let{disabled:t,loading:o}=e;return t||!o?ft(Bo,{}):ft("span",{className:l(e.className,xt,"k-icon k-i-loading")})};J.states=Lo;J.className=xt;import{Fragment as Ro,jsx as bt}from"react/jsx-runtime";var vt="k-input-validation-icon",Po=[r.valid,r.invalid,r.disabled,r.loading],wo={},K=e=>{let{valid:t,invalid:o,disabled:s,loading:n}=e,d=o?"warning-circle":"check-circle";return s||n||!!!(t||o)?bt(Ro,{}):bt(f,{className:l(vt),icon:d})};K.states=Po;K.options=wo;K.className=vt;import{Fragment as Ko,jsx as ht}from"react/jsx-runtime";var zo="k-input-prefix",_o={direction:"horizontal"},ve=e=>{let{direction:t=_o.direction,...o}=e;return e.children?ht("span",{...o,className:l(zo,e.className,{[`k-input-prefix-${t}`]:t}),children:e.children}):ht(Ko,{})};import{Fragment as Do,jsx as Nt}from"react/jsx-runtime";var qo="k-input-suffix",Ho={direction:"horizontal"},he=e=>{let{direction:t=Ho.direction,...o}=e;return e.children?Nt("span",{...o,className:l(qo,e.className,{[`k-input-suffix-${t}`]:t}),children:e.children}):Nt(Do,{})};import{jsx as _i}from"react/jsx-runtime";import{jsx as Di}from"react/jsx-runtime";import{jsx as Uo}from"react/jsx-runtime";var gt="k-input-separator",Vo={direction:"vertical"},Q=e=>{let{direction:t=Vo.direction,...o}=e;return Uo("span",{...o,className:l(gt,e.className,{[`${gt}-${t}`]:t})})};import{Fragment as yt,jsx as P,jsxs as $e}from"react/jsx-runtime";var $o=I.states,Fo=I.defaultOptions,Xo=I.options,Go=[{name:"prefix",title:"Prefix"},{name:"suffix",title:"Suffix"},{name:"clear-button",title:"`Clear` Button"},{name:"validation-icon",title:"Validation Icon"},{name:"separators",title:"Separators"}],Jo=[],W=e=>{let{modifiers:t,valid:o,invalid:s,loading:n,disabled:d,readonly:c,...u}=e,N=t?.prefix,g=t?.suffix,v=t?.["clear-button"],k=t?.["validation-icon"],S=t?.separators;return $e(I,{...u,valid:o,invalid:s,loading:n,disabled:d,readonly:c,style:{width:300},children:[N&&$e(yt,{children:[P(ve,{children:P(f,{icon:"lock"})}),S&&P(Q,{})]}),P(_,{placeholder:"Placeholder",value:"Value"}),k&&P(K,{valid:o,invalid:s,loading:n,disabled:d}),P(J,{loading:n,disabled:d}),v&&P(z,{loading:n,disabled:d,readonly:c,value:"Value"}),g&&$e(yt,{children:[S&&P(Q,{}),P(he,{children:P(C,{size:u.size,fillMode:"clear",children:"Send"})})]})]})};W.options=Xo;W.states=$o;W.variants=Jo;W.defaultOptions=Fo;W.modifiers=Go;W.className=I.className;import{Fragment as It,jsx as w,jsxs as Fe}from"react/jsx-runtime";var Tt="k-textbox",Qo=[r.hover,r.focus,r.valid,r.invalid,r.required,r.disabled,r.loading,r.readonly],Wo={size:[i.undefined,i.small,i.medium,i.large],rounded:[p.undefined,p.none,p.small,p.medium,p.large,p.full],fillMode:[m.undefined,m.solid,m.flat,m.outline]},Ne={showClearButton:!0,showValidationIcon:!0,separators:!0},M=e=>{let{size:t,rounded:o,fillMode:s,separators:n=Ne.separators,showClearButton:d=Ne.showClearButton,showValidationIcon:c=Ne.showValidationIcon,prefix:u,suffix:N,type:g,value:v,placeholder:k,hover:S,focus:H,valid:D,invalid:E,required:y,loading:O,disabled:L,readonly:le,id:ye,"aria-label":Ie,"aria-describedby":Te,...Ae}=e;return Fe(I,{...Ae,size:t,rounded:o,fillMode:s,hover:S,focus:H,valid:D,invalid:E,required:y,loading:O,disabled:L,readonly:le,className:l(e.className,Tt),children:[u&&Fe(It,{children:[w(ve,{children:u}),n&&w(Q,{})]}),w(_,{id:ye,placeholder:k,value:v,type:g,disabled:L,"aria-label":Ie,"aria-describedby":Te,"aria-invalid":E?"true":void 0}),c&&w(K,{valid:D,invalid:E,loading:O,disabled:L}),w(J,{loading:O,disabled:L}),d&&w(z,{loading:O,disabled:L,readonly:le,value:v}),N&&Fe(It,{children:[n&&w(Q,{}),w(he,{children:N})]})]})};M.states=Qo;M.options=Wo;M.className=Tt;M.defaultOptions=Ne;M.moduleName=_e;M.folderName=dt;M.ariaSpec={selector:".k-textbox",rules:[{selector:".k-textbox > .k-input-inner",attribute:"role=textbox or nodeName=input",usage:"Describes the role of the component."},{selector:".k-textbox > .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-textbox > .k-input-inner",attribute:"aria-invalid=true (when invalid)",usage:"Rendered when the TextBox is in an invalid state."},{selector:".k-textbox > .k-input-inner",attribute:"aria-describedby (when has hint or error)",usage:"Points to the hint or error message for the input."},{selector:".k-textbox.k-disabled > .k-input-inner",attribute:"disabled=disabled or aria-disabled=true",usage:"Rendered when the TextBox is disabled."}]};var se=M;import{jsx as Yo}from"react/jsx-runtime";var ge=e=>Yo(se,{...e});import{Fragment as Pr,jsx as Br}from"react/jsx-runtime";import{Fragment as qr,jsx as Kr}from"react/jsx-runtime";import{jsx as Ur}from"react/jsx-runtime";import{jsx as Xe}from"react/jsx-runtime";var Zo=M.states,jo=M.defaultOptions,en=M.options,tn=[{name:"prefix",title:"Prefix"},{name:"suffix",title:"Suffix"},{name:"clear-button",title:"`Clear` Button"}],on=[],Y=e=>{let{modifiers:t,...o}=e,s={};return Object.keys(t||{}).forEach(n=>{switch(n){case"prefix":s.prefix=t?.[n]?Xe(f,{icon:"lock"}):void 0;break;case"suffix":s.suffix=t?.[n]?Xe(C,{size:o.size,fillMode:"clear",children:"Send"}):void 0;break;case"clear-button":s.showClearButton=t?.[n];break;default:break}}),Xe(ge,{value:"Value",style:{width:300},...o,...s})};Y.options=en;Y.states=Zo;Y.variants=on;Y.defaultOptions=jo;Y.modifiers=tn;Y.className=M.className;import{jsx as b,jsxs as Z}from"react/jsx-runtime";var Ge={...T.options,positionMode:["static","sticky","fixed"]},nn=T.states,At={...T.defaultOptions,themeColor:"primary",variant:"top",positionMode:"sticky"};Ge.themeColor=["primary",...Ge.themeColor.filter(e=>e!=="primary")];var an=[{name:"top",title:"Top"},{name:"bottom",title:"Bottom"}],q=e=>{let{variant:t,...o}={...At,...e},s=Z(T,{position:t,...o,children:[b(U,{children:b(ie,{fillMode:"flat",icon:"menu"})}),b("span",{className:"k-spacer k-spacer-sized",style:{width:"8px"}}),b(U,{children:b("h3",{className:"k-m-0",children:"AppBar"})}),b("span",{className:"k-spacer"}),Z(U,{children:[b(C,{fillMode:"flat",children:"Button"}),b(C,{fillMode:"flat",children:"Button"}),b(C,{fillMode:"flat",children:"Button"})]}),b("span",{className:"k-spacer k-spacer-sized",style:{width:"8px"}}),b(U,{children:b(ge,{value:"Input value"})}),Z(U,{children:[b(ie,{className:"k-mx-sm",fillMode:"flat",icon:"bell"}),b("span",{className:"k-appbar-separator"}),b(pe,{className:"k-mx-sm",children:b("img",{src:"https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg"})})]})]}),n=Z("div",{style:{padding:"25px 10px"},children:[b("p",{children:"Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, harum magnam? Possimus magnam non natus error consectetur voluptatum, unde quasi rerum ad facere, hic in! Qui ducimus ab sed consequuntur excepturi fugiat! Facilis fuga asperiores pariatur sed. Eligendi aliquid vel nemo, ipsum tempora minima consequatur culpa molestias maiores nihil eveniet accusantium porro. Inventore saepe ut ad in a. Quo itaque est expedita quidem consectetur enim quam minima, quisquam harum velit, earum adipisci provident, officia eveniet voluptas vero accusamus ad ducimus laudantium!"}),b("p",{children:"Consequatur incidunt sequi explicabo adipisci saepe, accusamus, numquam fuga quam ex, provident possimus ratione blanditiis ducimus quos nulla repellat error pariatur nemo nobis illo! Saepe deleniti dolore cumque, sequi similique eligendi consectetur corrupti iste reprehenderit adipisci enim laudantium inventore totam quos non impedit quibusdam et consequuntur blanditiis accusamus! Rerum, nostrum. Rerum, tempore earum officia alias suscipit ut minima recusandae dolorem reprehenderit ea?"}),b("p",{children:"Aliquam pariatur ut expedita, repellat architecto aut, consequatur iure recusandae tempora odit consequuntur, nihil nostrum totam accusantium at. Dignissimos repellendus culpa nesciunt. Officia repudiandae, laudantium error iure in minus ratione reprehenderit dolorum alias quo voluptatibus doloremque aliquid exercitationem quidem odit earum natus autem eaque tempore nulla esse sapiente? Dolore aliquid aliquam modi velit quaerat!"}),b("p",{children:"Sunt consequuntur, aliquam eius beatae ex odit quasi iusto, accusamus architecto corrupti reprehenderit dolores itaque aliquid veniam odio eaque vel doloremque? Corporis, tenetur delectus deleniti voluptatum autem necessitatibus esse nisi ad, optio cumque quas dignissimos reprehenderit. Optio dolores quam corporis ea, reiciendis eos sit. Voluptate vel esse necessitatibus eum, sunt fuga, quaerat, eos natus quod repellendus nulla voluptatem ut quo quas ipsa animi incidunt autem saepe perferendis. Sequi ratione in iste, quibusdam, neque facilis accusantium, eum rem error sunt a explicabo commodi impedit quam."})]});return t==="bottom"?Z("div",{style:{height:"250px",overflow:"auto"},children:[n,s]}):Z("div",{style:{height:"250px",overflow:"auto"},children:[s,n]})};q.options=Ge;q.states=nn;q.variants=an;q.defaultOptions=At;q.modifiers=[];q.className=T.className;var us=q;export{q as AppbarDemo,us as default};