@progress/kendo-themes-html/dist/esm/searchbar/searchbar.spec.mjs

A collection of HTML helpers used for developing Kendo UI themes

var a=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?a(...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 f=(t,e)=>a({[`${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:r,focus:d,checked:p,active:c,selected:h,disabled:b,indeterminate:N,loading:v,empty:y,readonly:$,highlighted:Y,...A}=e;return a({"k-valid":o,"k-invalid":l,"k-hover":r,"k-focus":d,"k-checked":p,"k-active":c,"k-selected":h,"k-disabled":b,"k-indeterminate":N&&!p,"k-loading":v,"k-empty":y,"k-readonly":$,"k-highlighted":Y},Object.keys(A).reduce((g,T)=>(T.startsWith("k-")?g[T]=A[T]:g[`k-${T}`]=A[T],g),{}))};function fe(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"},u={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"},x={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},S={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 z="input",D=z;import{jsx as Qe}from"react/jsx-runtime";var F="k-input",qe=[i.hover,i.focus,i.valid,i.invalid,i.required,i.disabled,i.loading,i.readonly],We={size:[n.undefined,n.small,n.medium,n.large],rounded:[u.undefined,u.none,u.small,u.medium,u.large,u.full],fillMode:[x.undefined,x.solid,x.flat,x.outline]},Je={},I=t=>{let{hover:e,focus:o,disabled:l,invalid:r,valid:d,loading:p,readonly:c,size:h,rounded:b,fillMode:N,...v}=t;return Qe("span",{...v,className:a(t.className,F,f(F,{size:h,rounded:b,fillMode:N}),L(F,{hover:e,focus:o,disabled:l,invalid:r,valid:d,loading:p,readonly:c}))})};I.states=qe;I.options=We;I.className=F;I.defaultOptions=Je;I.moduleName=z;I.folderName=D;import{jsx as je}from"react/jsx-runtime";var G="k-picker",Xe=[i.hover,i.focus,i.valid,i.invalid,i.required,i.disabled,i.loading,i.readonly],Ye={size:[n.undefined,n.small,n.medium,n.large],rounded:[u.undefined,u.none,u.small,u.medium,u.large,u.full],fillMode:[x.undefined,x.solid,x.flat,x.outline]},Ze={},E=t=>{let{hover:e,focus:o,disabled:l,invalid:r,valid:d,loading:p,readonly:c,size:h,rounded:b,fillMode:N,...v}=t;return je("span",{...v,className:a(t.className,G,f(G,{size:h,rounded:b,fillMode:N}),L(G,{hover:e,focus:o,disabled:l,invalid:r,valid:d,loading:p,readonly:c})),children:t.children})};E.states=Xe;E.options=Ye;E.className=G;E.defaultOptions=Ze;E.moduleName=z;E.folderName=D;import{Fragment as nt,jsx as xe}from"react/jsx-runtime";var Z="k-font-icon",et=[],tt={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]},ot={},H=t=>{let{size:e,themeColor:o,icon:l,rotate:r,flip:d,...p}=t;return l?xe("span",{...p,className:a(t.className,Z,f(Z,{size:e}),{[`k-i-${l}`]:l,[`k-color-${o}`]:o,[`k-rotate-${r}`]:r,"k-flip-h":d==="h"||d==="both","k-flip-v":d==="v"||d==="both"}),"aria-hidden":"true"}):xe(nt,{})};H.states=et;H.options=tt;H.className=Z;H.defaultOptions=ot;var Ne=H;import{Fragment as rt,jsx as q}from"react/jsx-runtime";var j="k-svg-icon",at=[],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],variant:[S.outline,S.solid,S.duotone]},ee={viewBox:"0 0 24 24",variant:S.outline},P=t=>{let{size:e,themeColor:o,rotate:l,flip:r,viewBox:d=ee.viewBox,variant:p=ee.variant,icon:c,...h}=t;if(!c)return q(rt,{});if(c==="none")return q("span",{...h,className:a(t.className,j,f("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let b=typeof c=="object"&&c.name&&c.name,N=typeof c=="object"?p&&c.variants?.[p]||c.variants?.outline||c.content:void 0;return q("span",{...h,className:a(t.className,j,f("k-icon",{size:e}),{[`k-svg-i-${b}`]:b,[`k-color-${o}`]:o,[`k-rotate-${l}`]:l,"k-flip-h":r==="h"||r==="both","k-flip-v":r==="v"||r==="both"}),"aria-hidden":"true",children:q("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof c=="object"?c.viewBox:d,dangerouslySetInnerHTML:N!==void 0?{__html:N}:void 0,children:c?void 0:t.children})})};P.states=at;P.options=st;P.className=j;P.defaultOptions=ee;var te=P;import*as oe from"@progress/kendo-svg-icons";var be="icon",he="icons";import{useContext as lt}from"react";import{createContext as it}from"react";var ge=it({iconsType:"svg"});import{Fragment as Ie,jsx as _}from"react/jsx-runtime";var W="k-icon",dt=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),ct=[],pt={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:[S.outline,S.solid,S.duotone]},J={viewBox:"0 0 24 24",type:"svg",variant:S.outline},m=t=>{let{iconsType:e}=lt(ge),{size:o,themeColor:l,icon:r,type:d=e||J.type,rotate:p,flip:c,viewBox:h=J.viewBox,variant:b=J.variant,...N}=t;if(!r)return _(Ie,{});if((e||d)==="svg"){if(r==="none")return _(te,{...N,className:a(t.className,W),icon:r,size:o,variant:b});let y=oe[r]?r:dt(`${r}-icon`);return oe[y]?_(te,{...N,className:a(t.className,W),icon:oe[y],size:o,themeColor:l,rotate:p,flip:c,viewBox:h,variant:b}):_(Ie,{})}return _(Ne,{...N,className:a(t.className,W),icon:r,size:o,themeColor:l,rotate:p,flip:c})};m.states=ct;m.options=pt;m.defaultOptions=J;m.className=W;m.moduleName=be;m.folderName=he;m.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 ft,jsx as ne}from"react/jsx-runtime";var ve="k-clear-value",ut=[i.disabled,i.loading,i.readonly],mt={},B=t=>{let{disabled:e,loading:o,readonly:l,value:r}=t;return e||l||o||!r?ne(ft,{}):ne("span",{className:a(t.className,ve),children:ne(m,{icon:"x"})})};B.states=ut;B.options=mt;B.className=ve;import{jsx as bt}from"react/jsx-runtime";var ae="k-input-inner",xt=[],Nt={},Q={type:"text",autocomplete:"off",value:"",placeholder:""},C=t=>{let{value:e=Q.value,type:o=Q.type,placeholder:l=Q.placeholder,autocomplete:r=Q.autocomplete,disabled:d,readOnly:p,...c}=t;return bt("input",{...c,type:o,className:a(t.className,ae,f(ae,t)),placeholder:l,autoComplete:r,defaultValue:e,disabled:d||void 0,readOnly:p||void 0})};C.states=xt;C.options=Nt;C.className=ae;import{jsx as ye,jsxs as It}from"react/jsx-runtime";var se="k-input-inner",ht=[],gt={},re=t=>{let{value:e,placeholder:o,showValue:l,valueIcon:r,valueIconName:d,...p}=t;return It("span",{...p,className:a(t.className,se,f(se,t)),children:[r,!r&&d&&ye(m,{className:"k-input-value-icon",icon:d}),l&&!e&&o,l&&e&&ye("span",{className:"k-input-value-text",children:e})]})};re.states=ht;re.options=gt;re.className=se;import{jsx as St}from"react/jsx-runtime";var ie="k-input-inner",vt=[],yt={},Se={value:"",placeholder:""},le=t=>{let{value:e=Se.value,placeholder:o=Se.placeholder,rows:l,disabled:r,...d}=t;return St("textarea",{...d,className:a(t.className,ie,f(ie,t)),placeholder:o,rows:l,defaultValue:e,disabled:r||void 0})};le.states=vt;le.options=yt;le.className=ie;import{Fragment as kt,jsx as Me}from"react/jsx-runtime";var ke="k-input-loading-icon",Mt=[i.disabled,i.loading],X=t=>{let{disabled:e,loading:o}=t;return e||!o?Me(kt,{}):Me("span",{className:a(t.className,ke,"k-icon k-i-loading")})};X.states=Mt;X.className=ke;import{Fragment as Ot,jsx as Te}from"react/jsx-runtime";var Ce="k-input-validation-icon",Tt=[i.valid,i.invalid,i.disabled,i.loading],Ct={},K=t=>{let{valid:e,invalid:o,disabled:l,loading:r}=t,d=o?"warning-circle":"check-circle";return l||r||!!!(e||o)?Te(Ot,{}):Te(m,{className:a(Ce),icon:d})};K.states=Tt;K.options=Ct;K.className=Ce;import{Fragment as Et,jsx as Oe}from"react/jsx-runtime";var At="k-input-prefix",Lt={direction:"horizontal"},Ae=t=>{let{direction:e=Lt.direction,...o}=t;return t.children?Oe("span",{...o,className:a(At,t.className,{[`k-input-prefix-${e}`]:e}),children:t.children}):Oe(Et,{})};import{Fragment as zt,jsx as Le}from"react/jsx-runtime";var Rt="k-input-suffix",wt={direction:"horizontal"},Ee=t=>{let{direction:e=wt.direction,...o}=t;return t.children?Le("span",{...o,className:a(Rt,t.className,{[`k-input-suffix-${e}`]:e}),children:t.children}):Le(zt,{})};import{jsx as un}from"react/jsx-runtime";import{jsx as Nn}from"react/jsx-runtime";import{jsx as Pt}from"react/jsx-runtime";var Re="k-input-separator",Ht={direction:"vertical"},de=t=>{let{direction:e=Ht.direction,...o}=t;return Pt("span",{...o,className:a(Re,t.className,{[`${Re}-${e}`]:e})})};var ce="button",we=ce;import{Fragment as ze,jsx as R,jsxs as He}from"react/jsx-runtime";var V="k-button",_t=["icon-button"],Bt=[i.hover,i.focus,i.active,i.selected,i.disabled,i.generating],Kt={size:[n.undefined,n.xsmall,n.small,n.medium,n.large],rounded:[u.undefined,u.none,u.small,u.medium,u.large,u.full],fillMode:[x.undefined,x.solid,x.flat,x.outline,x.clear,x.link],themeColor:[s.undefined,s.base,s.primary,s.secondary,s.tertiary,s.success,s.warning,s.error,s.info,s.inverse]},pe={showArrow:!1,arrowIconName:"chevron-down"},M=t=>{let{as:e="button",size:o,rounded:l,fillMode:r,themeColor:d,showArrow:p=pe.showArrow,arrowIconName:c=pe.arrowIconName,variant:h,hover:b,focus:N,active:v,selected:y,disabled:$,togglable:Y,ariaDisabled:A,icon:g,iconSize:T,text:U,iconClassName:$e,className:Ue,...De}=t,Fe=g!=null,Ge=t.children!==void 0;return He(e,{className:a(Ue,V,fe(V,h),f(V,{size:o,rounded:l,fillMode:r,themeColor:d}),L(V,{hover:b,focus:N,active:v,disabled:$||A,selected:y}),{"k-icon-button":!U&&!Ge&&Fe}),"aria-pressed":Y?y?"true":"false":void 0,...De,"aria-disabled":A?"true":void 0,disabled:$||void 0,children:[typeof g=="string"&&g&&R(m,{className:a($e,"k-button-icon"),icon:g,size:T}),g&&typeof g!="string"&&R(ze,{children:g}),U?He(ze,{children:[U&&R("span",{className:"k-button-text",children:U}),t.children]}):t.children&&R("span",{className:"k-button-text",children:t.children}),p&&R("span",{className:"k-menu-button-arrow k-button-arrow",children:R(m,{icon:c})})]})};M.states=Bt;M.options=Kt;M.variants=_t;M.className=V;M.defaultOptions=pe;M.moduleName=ce;M.folderName=we;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 Vt}from"react/jsx-runtime";var Pe=t=>Vt(M,{children:"Button",...t});import{Fragment as _e,jsx as k,jsxs as ue}from"react/jsx-runtime";var $t=I.states,Ut=I.defaultOptions,Dt=I.options,Ft=[{name:"prefix",title:"Prefix"},{name:"suffix",title:"Suffix"},{name:"clear-button",title:"`Clear` Button"},{name:"validation-icon",title:"Validation Icon"},{name:"separators",title:"Separators"}],Gt=[],w=t=>{let{modifiers:e,valid:o,invalid:l,loading:r,disabled:d,readonly:p,...c}=t,h=e?.prefix,b=e?.suffix,N=e?.["clear-button"],v=e?.["validation-icon"],y=e?.separators;return ue(I,{...c,valid:o,invalid:l,loading:r,disabled:d,readonly:p,style:{width:300},children:[h&&ue(_e,{children:[k(Ae,{children:k(m,{icon:"lock"})}),y&&k(de,{})]}),k(C,{placeholder:"Placeholder",value:"Value"}),v&&k(K,{valid:o,invalid:l,loading:r,disabled:d}),k(X,{loading:r,disabled:d}),N&&k(B,{loading:r,disabled:d,readonly:p,value:"Value"}),b&&ue(_e,{children:[y&&k(de,{}),k(Ee,{children:k(Pe,{size:c.size,fillMode:"clear",children:"Send"})})]})]})};w.options=Dt;w.states=$t;w.variants=Gt;w.defaultOptions=Ut;w.modifiers=Ft;w.className=I.className;var me="searchbar",Be=me;import{jsx as Ke}from"react/jsx-runtime";var Ve="k-searchbar",qt=[],Wt={},Jt={},O=t=>{let{placeholder:e,...o}=t;return Ke("span",{...o,className:a(t.className,Ve),children:Ke(C,{placeholder:e})})};O.states=qt;O.options=Wt;O.className=Ve;O.defaultOptions=Jt;O.moduleName=me;O.folderName=Be;var da=O;export{Ve as SEARCHBAR_CLASSNAME,O as SearchBar,da as default};