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

A collection of HTML helpers used for developing Kendo UI themes

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