@progress/kendo-themes-html/dist/esm/searchbox/templates/searchbox-normal.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 Ye}from"react/jsx-runtime";var X="k-input",We=[a.hover,a.focus,a.valid,a.invalid,a.required,a.disabled,a.loading,a.readonly],Je={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]},Qe={},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 Ye("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=We;I.options=Je;I.className=X;I.defaultOptions=Qe;I.moduleName=K;I.folderName=G;import{jsx as tt}from"react/jsx-runtime";var W="k-picker",Ze=[a.hover,a.focus,a.valid,a.invalid,a.required,a.disabled,a.loading,a.readonly],je={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]},et={},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 tt("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=Ze;R.options=je;R.className=W;R.defaultOptions=et;R.moduleName=K;R.folderName=G;import{Fragment as st,jsx as he}from"react/jsx-runtime";var j="k-font-icon",ot=[],nt={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]},at={},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(st,{})};V.states=ot;V.options=nt;V.className=j;V.defaultOptions=at;var Ne=V;import{Fragment as lt,jsx as J}from"react/jsx-runtime";var ee="k-svg-icon",it=[],rt={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(lt,{});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=it;$.options=rt;$.className=ee;$.defaultOptions=te;var oe=$;import*as ne from"@progress/kendo-svg-icons";var ge="icon",Ie="icons";import{useContext as ct}from"react";import{createContext as dt}from"react";var ve=dt({iconsType:"svg"});import{Fragment as ye,jsx as U}from"react/jsx-runtime";var Q="k-icon",ut=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),pt=[],mt={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}=ct(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:ut(`${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=pt;f.options=mt;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 bt,jsx as ae}from"react/jsx-runtime";var Se="k-clear-value",ft=[a.disabled,a.loading,a.readonly],xt={},O=e=>{let{disabled:t,loading:o,readonly:l,value:i}=e;return t||l||o||!i?ae(bt,{}):ae("span",{className:s(e.className,Se),children:ae(f,{icon:"x"})})};O.states=ft;O.options=xt;O.className=Se;import{jsx as gt}from"react/jsx-runtime";var se="k-input-inner",ht=[],Nt={},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 gt("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=ht;L.options=Nt;L.className=se;import{jsx as Me,jsxs as yt}from"react/jsx-runtime";var ie="k-input-inner",It=[],vt={},re=e=>{let{value:t,placeholder:o,showValue:l,valueIcon:i,valueIconName:d,...p}=e;return yt("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=It;re.options=vt;re.className=ie;import{jsx as kt}from"react/jsx-runtime";var le="k-input-inner",St=[],Mt={},ke={value:"",placeholder:""},de=e=>{let{value:t=ke.value,placeholder:o=ke.placeholder,rows:l,disabled:i,...d}=e;return kt("textarea",{...d,className:s(e.className,le,h(le,e)),placeholder:o,rows:l,defaultValue:t,disabled:i||void 0})};de.states=St;de.options=Mt;de.className=le;import{Fragment as Ct,jsx as Te}from"react/jsx-runtime";var Ce="k-input-loading-icon",Tt=[a.disabled,a.loading],H=e=>{let{disabled:t,loading:o}=e;return t||!o?Te(Ct,{}):Te("span",{className:s(e.className,Ce,"k-icon k-i-loading")})};H.states=Tt;H.className=Ce;import{Fragment as At,jsx as Oe}from"react/jsx-runtime";var Le="k-input-validation-icon",Ot=[a.valid,a.invalid,a.disabled,a.loading],Lt={},A=e=>{let{valid:t,invalid:o,disabled:l,loading:i}=e,d=o?"warning-circle":"check-circle";return l||i||!!!(t||o)?Oe(At,{}):Oe(f,{className:s(Le),icon:d})};A.states=Ot;A.options=Lt;A.className=Le;import{Fragment as wt,jsx as Ae}from"react/jsx-runtime";var Et="k-input-prefix",zt={direction:"horizontal"},Ee=e=>{let{direction:t=zt.direction,...o}=e;return e.children?Ae("span",{...o,className:s(Et,e.className,{[`k-input-prefix-${t}`]:t}),children:e.children}):Ae(wt,{})};import{Fragment as Pt,jsx as ze}from"react/jsx-runtime";var Rt="k-input-suffix",Ht={direction:"horizontal"},we=e=>{let{direction:t=Ht.direction,...o}=e;return e.children?ze("span",{...o,className:s(Rt,e.className,{[`k-input-suffix-${t}`]:t}),children:e.children}):ze(Pt,{})};import{jsx as xn}from"react/jsx-runtime";import{jsx as gn}from"react/jsx-runtime";import{jsx as Bt}from"react/jsx-runtime";var Re="k-input-separator",_t={direction:"vertical"},ce=e=>{let{direction:t=_t.direction,...o}=e;return Bt("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",Kt=["icon-button"],Vt=[a.hover,a.focus,a.active,a.selected,a.disabled,a.generating],$t={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:De,className:Fe,...qe}=e,Ge=g!=null,Xe=e.children!==void 0;return _e(t,{className:s(Fe,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&&!Xe&&Ge}),"aria-pressed":B?y?"true":"false":void 0,...qe,"aria-disabled":T?"true":void 0,disabled:z||void 0,children:[typeof g=="string"&&g&&P(f,{className:s(De,"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=Vt;M.options=$t;M.variants=Kt;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 Ut}from"react/jsx-runtime";var Be=e=>Ut(M,{children:"Button",...e});import{Fragment as Ke,jsx as k,jsxs as me}from"react/jsx-runtime";var Dt=I.states,Ft=I.defaultOptions,qt=I.options,Gt=[{name:"prefix",title:"Prefix"},{name:"suffix",title:"Suffix"},{name:"clear-button",title:"`Clear` Button"},{name:"validation-icon",title:"Validation Icon"},{name:"separators",title:"Separators"}],Xt=[],_=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=qt;_.states=Dt;_.variants=Xt;_.defaultOptions=Ft;_.modifiers=Gt;_.className=I.className;var fe="searchbox",Ve=fe;import{jsx as F,jsxs as Qt}from"react/jsx-runtime";var $e="k-searchbox",Wt=[a.hover,a.focus,a.valid,a.invalid,a.required,a.disabled,a.loading],Jt={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 Qt(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=Wt;E.options=Jt;E.className=$e;E.defaultOptions=xe;E.moduleName=fe;E.folderName=Ve;var Ue=E;import{jsx as Yt}from"react/jsx-runtime";var ba=e=>Yt(Ue,{...e});export{ba as SearchboxNormal};