@progress/kendo-themes-html/dist/esm/smart-box/smart-box.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,i)=>t[i]||t[o]&&o||null).filter(o=>o!==null).join(" "):t).filter(t=>!!t).join(" ");var N=(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"}),R=(e,t)=>{let{valid:o,invalid:i,hover:a,focus:p,checked:c,active:d,selected:h,disabled:b,indeterminate:f,loading:S,empty:v,readonly:A,highlighted:D,...C}=t;return s({"k-valid":o,"k-invalid":i,"k-hover":a,"k-focus":p,"k-checked":c,"k-active":d,"k-selected":h,"k-disabled":b,"k-indeterminate":f&&!c,"k-loading":S,"k-empty":v,"k-readonly":A,"k-highlighted":D},Object.keys(C).reduce((g,O)=>(O.startsWith("k-")?g[O]=C[O]:g[`k-${O}`]=C[O],g),{}))};function ke(e,t){if(!t)return{};let o=Array.isArray(t)?t:[t];return Object.fromEntries(o.map(i=>[`k-${i}`,!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"},M={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"},l={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 U="input",J=U;import{jsx as dt}from"react/jsx-runtime";var W="k-input",rt=[l.hover,l.focus,l.valid,l.invalid,l.required,l.disabled,l.loading,l.readonly],lt={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]},pt={},I=e=>{let{hover:t,focus:o,disabled:i,invalid:a,valid:p,loading:c,readonly:d,size:h,rounded:b,fillMode:f,...S}=e;return dt("span",{...S,className:s(e.className,W,N(W,{size:h,rounded:b,fillMode:f}),R(W,{hover:t,focus:o,disabled:i,invalid:a,valid:p,loading:c,readonly:d}))})};I.states=rt;I.options=lt;I.className=W;I.defaultOptions=pt;I.moduleName=U;I.folderName=J;import{jsx as ft}from"react/jsx-runtime";var Q="k-picker",ct=[l.hover,l.focus,l.valid,l.invalid,l.required,l.disabled,l.loading,l.readonly],ut={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]},mt={},w=e=>{let{hover:t,focus:o,disabled:i,invalid:a,valid:p,loading:c,readonly:d,size:h,rounded:b,fillMode:f,...S}=e;return ft("span",{...S,className:s(e.className,Q,N(Q,{size:h,rounded:b,fillMode:f}),R(Q,{hover:t,focus:o,disabled:i,invalid:a,valid:p,loading:c,readonly:d})),children:e.children})};w.states=ct;w.options=ut;w.className=Q;w.defaultOptions=mt;w.moduleName=U;w.folderName=J;import{Fragment as ht,jsx as Ae}from"react/jsx-runtime";var ie="k-font-icon",xt=[],bt={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:i,rotate:a,flip:p,...c}=e;return i?Ae("span",{...c,className:s(e.className,ie,N(ie,{size:t}),{[`k-i-${i}`]:i,[`k-color-${o}`]:o,[`k-rotate-${a}`]:a,"k-flip-h":p==="h"||p==="both","k-flip-v":p==="v"||p==="both"}),"aria-hidden":"true"}):Ae(ht,{})};V.states=xt;V.options=bt;V.className=ie;V.defaultOptions=Nt;var Oe=V;import{Fragment as vt,jsx as Y}from"react/jsx-runtime";var re="k-svg-icon",gt=[],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:[M.outline,M.solid,M.duotone]},le={viewBox:"0 0 24 24",variant:M.outline},$=e=>{let{size:t,themeColor:o,rotate:i,flip:a,viewBox:p=le.viewBox,variant:c=le.variant,icon:d,...h}=e;if(!d)return Y(vt,{});if(d==="none")return Y("span",{...h,className:s(e.className,re,N("k-icon",{size:t}),"k-none"),"aria-hidden":"true"});let b=typeof d=="object"&&d.name&&d.name,f=typeof d=="object"?c&&d.variants?.[c]||d.variants?.outline||d.content:void 0;return Y("span",{...h,className:s(e.className,re,N("k-icon",{size:t}),{[`k-svg-i-${b}`]:b,[`k-color-${o}`]:o,[`k-rotate-${i}`]:i,"k-flip-h":a==="h"||a==="both","k-flip-v":a==="v"||a==="both"}),"aria-hidden":"true",children:Y("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof d=="object"?d.viewBox:p,dangerouslySetInnerHTML:f!==void 0?{__html:f}:void 0,children:d?void 0:e.children})})};$.states=gt;$.options=It;$.className=re;$.defaultOptions=le;var pe=$;import*as de from"@progress/kendo-svg-icons";var Te="icon",Ce="icons";import{useContext as Mt}from"react";import{createContext as St}from"react";var Le=St({iconsType:"svg"});import{Fragment as Ee,jsx as F}from"react/jsx-runtime";var Z="k-icon",yt=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),kt=[],At={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:[M.outline,M.solid,M.duotone]},j={viewBox:"0 0 24 24",type:"svg",variant:M.outline},x=e=>{let{iconsType:t}=Mt(Le),{size:o,themeColor:i,icon:a,type:p=t||j.type,rotate:c,flip:d,viewBox:h=j.viewBox,variant:b=j.variant,...f}=e;if(!a)return F(Ee,{});if((t||p)==="svg"){if(a==="none")return F(pe,{...f,className:s(e.className,Z),icon:a,size:o,variant:b});let v=de[a]?a:yt(`${a}-icon`);return de[v]?F(pe,{...f,className:s(e.className,Z),icon:de[v],size:o,themeColor:i,rotate:c,flip:d,viewBox:h,variant:b}):F(Ee,{})}return F(Oe,{...f,className:s(e.className,Z),icon:a,size:o,themeColor:i,rotate:c,flip:d})};x.states=kt;x.options=At;x.defaultOptions=j;x.className=Z;x.moduleName=Te;x.folderName=Ce;x.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 Ct,jsx as ce}from"react/jsx-runtime";var Pe="k-clear-value",Ot=[l.disabled,l.loading,l.readonly],Tt={},X=e=>{let{disabled:t,loading:o,readonly:i,value:a}=e;return t||i||o||!a?ce(Ct,{}):ce("span",{className:s(e.className,Pe),children:ce(x,{icon:"x"})})};X.states=Ot;X.options=Tt;X.className=Pe;import{jsx as Pt}from"react/jsx-runtime";var ue="k-input-inner",Lt=[],Et={},ee={type:"text",autocomplete:"off",value:"",placeholder:""},P=e=>{let{value:t=ee.value,type:o=ee.type,placeholder:i=ee.placeholder,autocomplete:a=ee.autocomplete,disabled:p,readOnly:c,...d}=e;return Pt("input",{...d,type:o,className:s(e.className,ue,N(ue,e)),placeholder:i,autoComplete:a,defaultValue:t,disabled:p||void 0,readOnly:c||void 0})};P.states=Lt;P.options=Et;P.className=ue;import{jsx as _e,jsxs as wt}from"react/jsx-runtime";var me="k-input-inner",_t=[],Rt={},fe=e=>{let{value:t,placeholder:o,showValue:i,valueIcon:a,valueIconName:p,...c}=e;return wt("span",{...c,className:s(e.className,me,N(me,e)),children:[a,!a&&p&&_e(x,{className:"k-input-value-icon",icon:p}),i&&!t&&o,i&&t&&_e("span",{className:"k-input-value-text",children:t})]})};fe.states=_t;fe.options=Rt;fe.className=me;import{jsx as Ht}from"react/jsx-runtime";var xe="k-input-inner",zt=[],Bt={},Re={value:"",placeholder:""},be=e=>{let{value:t=Re.value,placeholder:o=Re.placeholder,rows:i,disabled:a,...p}=e;return Ht("textarea",{...p,className:s(e.className,xe,N(xe,e)),placeholder:o,rows:i,defaultValue:t,disabled:a||void 0})};be.states=zt;be.options=Bt;be.className=xe;import{Fragment as Dt,jsx as we}from"react/jsx-runtime";var ze="k-input-loading-icon",Kt=[l.disabled,l.loading],te=e=>{let{disabled:t,loading:o}=e;return t||!o?we(Dt,{}):we("span",{className:s(e.className,ze,"k-icon k-i-loading")})};te.states=Kt;te.className=ze;import{Fragment as $t,jsx as Be}from"react/jsx-runtime";var He="k-input-validation-icon",Ut=[l.valid,l.invalid,l.disabled,l.loading],Vt={},G=e=>{let{valid:t,invalid:o,disabled:i,loading:a}=e,p=o?"warning-circle":"check-circle";return i||a||!!!(t||o)?Be($t,{}):Be(x,{className:s(He),icon:p})};G.states=Ut;G.options=Vt;G.className=He;import{Fragment as Gt,jsx as Ke}from"react/jsx-runtime";var Ft="k-input-prefix",Xt={direction:"horizontal"},oe=e=>{let{direction:t=Xt.direction,...o}=e;return e.children?Ke("span",{...o,className:s(Ft,e.className,{[`k-input-prefix-${t}`]:t}),children:e.children}):Ke(Gt,{})};import{Fragment as Wt,jsx as De}from"react/jsx-runtime";var qt="k-input-suffix",Jt={direction:"horizontal"},ne=e=>{let{direction:t=Jt.direction,...o}=e;return e.children?De("span",{...o,className:s(qt,e.className,{[`k-input-suffix-${t}`]:t}),children:e.children}):De(Wt,{})};import{jsx as Ln}from"react/jsx-runtime";import{jsx as Rn}from"react/jsx-runtime";import{jsx as Yt}from"react/jsx-runtime";var Ue="k-input-separator",Qt={direction:"vertical"},z=e=>{let{direction:t=Qt.direction,...o}=e;return Yt("span",{...o,className:s(Ue,e.className,{[`${Ue}-${t}`]:t})})};var Ne="button",Ve=Ne;import{Fragment as $e,jsx as B,jsxs as Fe}from"react/jsx-runtime";var q="k-button",Zt=["icon-button"],jt=[l.hover,l.focus,l.active,l.selected,l.disabled,l.generating],eo={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]},he={showArrow:!1,arrowIconName:"chevron-down"},y=e=>{let{as:t="button",size:o,rounded:i,fillMode:a,themeColor:p,showArrow:c=he.showArrow,arrowIconName:d=he.arrowIconName,variant:h,hover:b,focus:f,active:S,selected:v,disabled:A,togglable:D,ariaDisabled:C,icon:g,iconSize:O,text:_,iconClassName:se,className:nt,...at}=e,st=g!=null,it=e.children!==void 0;return Fe(t,{className:s(nt,q,ke(q,h),N(q,{size:o,rounded:i,fillMode:a,themeColor:p}),R(q,{hover:b,focus:f,active:S,disabled:A||C,selected:v}),{"k-icon-button":!_&&!it&&st}),"aria-pressed":D?v?"true":"false":void 0,...at,"aria-disabled":C?"true":void 0,disabled:A||void 0,children:[typeof g=="string"&&g&&B(x,{className:s(se,"k-button-icon"),icon:g,size:O}),g&&typeof g!="string"&&B($e,{children:g}),_?Fe($e,{children:[_&&B("span",{className:"k-button-text",children:_}),e.children]}):e.children&&B("span",{className:"k-button-text",children:e.children}),c&&B("span",{className:"k-menu-button-arrow k-button-arrow",children:B(x,{icon:d})})]})};y.states=jt;y.options=eo;y.variants=Zt;y.className=q;y.defaultOptions=he;y.moduleName=Ne;y.folderName=Ve;y.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 to}from"react/jsx-runtime";var Xe=e=>to(y,{children:"Button",...e});import{Fragment as Ge,jsx as k,jsxs as ge}from"react/jsx-runtime";var oo=I.states,no=I.defaultOptions,ao=I.options,so=[{name:"prefix",title:"Prefix"},{name:"suffix",title:"Suffix"},{name:"clear-button",title:"`Clear` Button"},{name:"validation-icon",title:"Validation Icon"},{name:"separators",title:"Separators"}],io=[],H=e=>{let{modifiers:t,valid:o,invalid:i,loading:a,disabled:p,readonly:c,...d}=e,h=t?.prefix,b=t?.suffix,f=t?.["clear-button"],S=t?.["validation-icon"],v=t?.separators;return ge(I,{...d,valid:o,invalid:i,loading:a,disabled:p,readonly:c,style:{width:300},children:[h&&ge(Ge,{children:[k(oe,{children:k(x,{icon:"lock"})}),v&&k(z,{})]}),k(P,{placeholder:"Placeholder",value:"Value"}),S&&k(G,{valid:o,invalid:i,loading:a,disabled:p}),k(te,{loading:a,disabled:p}),f&&k(X,{loading:a,disabled:p,readonly:c,value:"Value"}),b&&ge(Ge,{children:[v&&k(z,{}),k(ne,{children:k(Xe,{size:d.size,fillMode:"clear",children:"Send"})})]})]})};H.options=ao;H.states=oo;H.variants=io;H.defaultOptions=no;H.modifiers=so;H.className=I.className;var Ie="popup",qe=Ie;import{jsx as Je}from"react/jsx-runtime";var We="k-animation-container",ro=[],lo={},ve={positionMode:"absolute",shown:!0},L=e=>{let{positionMode:t=ve.positionMode,shown:o=ve.shown,animationStyle:i,offset:a,...p}=e;return Je("div",{...p,style:{...a,...e.style},className:s(e.className,We,{"k-animation-container-shown":o,"k-animation-container-fixed":t==="fixed"}),children:Je("div",{className:"k-child-animation-container",style:i,children:e.children})})};L.states=ro;L.options=lo;L.className=We;L.defaultOptions=ve;L.moduleName=Ie;L.folderName=qe;var Se="popup",Qe=Se;import{jsx as Ye}from"react/jsx-runtime";var Ze="k-popup",po=[],co={},je={positionMode:"absolute"},T=e=>{let{offset:t,positionMode:o=je.positionMode,animationStyle:i,containerClassName:a,containerRole:p,containerAriaLabel:c,...d}=e;return Ye(L,{positionMode:o,offset:t,animationStyle:i,className:a,role:p,"aria-label":c,children:Ye("div",{...d,className:s(e.className,Ze),children:e.children})})};T.states=po;T.options=co;T.className=Ze;T.defaultOptions=je;T.moduleName=Se;T.folderName=Qe;T.ariaSpec={selector:".k-popup",rules:[{selector:".k-animation-container",attribute:"role (when appended to body)",usage:'Container gets role="region" when appended to document body. Popup is a building block \u2014 ARIA semantics come from consuming components.'}]};var Me="smart-box",et=Me;import{Fragment as ye,jsx as K,jsxs as ae}from"react/jsx-runtime";var tt="k-smart-box",uo=[l.hover,l.focus,l.disabled],mo={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]},ot={separators:!0},E=e=>{let{size:t,rounded:o,fillMode:i,separators:a=ot.separators,prefix:p,suffix:c,value:d,placeholder:h,hover:b,focus:f,disabled:S,popup:v,opened:A,processing:D,inputAriaLabel:C,inputAriaControls:g,inputAriaActiveDescendant:O,inputAriaAutocomplete:_,...se}=e;return ae(ye,{children:[ae(I,{...se,size:t,rounded:o,fillMode:i,hover:b,focus:f,disabled:S,loading:D,className:s(e.className,tt),children:[p&&ae(ye,{children:[K(oe,{children:p}),a&&K(z,{})]}),K(P,{placeholder:h,value:d,role:"combobox","aria-haspopup":"listbox","aria-expanded":A?"true":"false","aria-autocomplete":_,"aria-controls":A?g:void 0,"aria-activedescendant":A?O:void 0,"aria-label":C}),c&&ae(ye,{children:[a&&K(z,{}),K(ne,{children:c})]})]}),A&&v&&K(T,{className:"k-smart-box-popup",children:v})]})};E.states=uo;E.options=mo;E.className=tt;E.defaultOptions=ot;E.moduleName=Me;E.folderName=et;E.ariaSpec={selector:".k-smart-box",rules:[{selector:".k-smart-box .k-input-inner",attribute:"role=combobox",usage:"Announces the combobox role for the SmartBox input."},{selector:".k-smart-box .k-input-inner",attribute:"aria-label or aria-labelledby",usage:'Provides an accessible label for the SmartBox (e.g., "AI-powered search").'},{selector:".k-smart-box .k-input-inner",attribute:"aria-expanded",usage:"Indicates whether the suggestion popup is currently visible."},{selector:".k-smart-box .k-input-inner",attribute:"aria-haspopup=listbox",usage:"Indicates that the SmartBox has a popup listbox with suggestions."},{selector:".k-smart-box .k-input-inner",attribute:"aria-controls (when present)",usage:"References the ID of the popup listbox element when the popup is open."},{selector:".k-smart-box .k-input-inner",attribute:"aria-autocomplete (when present)",usage:"Indicates the autocomplete behavior of the input field."},{selector:".k-smart-box .k-input-inner",attribute:"aria-activedescendant (when present)",usage:"When the popup is open and keyboard navigation is active, references the ID of the currently focused list item."},{selector:".k-smart-box .k-input-prefix .k-icon",attribute:"aria-hidden=true",usage:"Decorative icons in the prefix area are hidden from screen readers."},{selector:".k-smart-box .k-input-suffix .k-button",attribute:"aria-label",usage:'Suffix buttons must have accessible labels describing their function (e.g., "Start voice input", "Send prompt").'},{selector:".k-smart-box .k-smart-box-send",attribute:"aria-label",usage:'The send button must be labelled to indicate its current action (e.g., "Send" or "Stop processing").'},{selector:".k-smart-box .k-smart-box-send.k-disabled",attribute:"disabled or aria-disabled=true",usage:"Indicates the button is disabled when there is no input or processing is not active."},{selector:".k-smart-box .k-smart-box-send.k-processing",attribute:"aria-pressed=true",usage:"Indicates that processing is in progress. The button changes function to stop processing."}]};var $a=E;export{tt as SMART_BOX_CLASSNAME,E as SmartBox,$a as default};