@progress/kendo-themes-html/dist/cjs/smart-box/smart-box.spec.js

A collection of HTML helpers used for developing Kendo UI themes

var dt=Object.create;var oe=Object.defineProperty;var ct=Object.getOwnPropertyDescriptor;var ut=Object.getOwnPropertyNames;var mt=Object.getPrototypeOf,ft=Object.prototype.hasOwnProperty;var xt=(t,e)=>{for(var o in e)oe(t,o,{get:e[o],enumerable:!0})},Pe=(t,e,o,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of ut(e))!ft.call(t,n)&&n!==o&&oe(t,n,{get:()=>e[n],enumerable:!(i=ct(e,n))||i.enumerable});return t};var bt=(t,e,o)=>(o=t!=null?dt(mt(t)):{},Pe(e||!t||!t.__esModule?oe(o,"default",{value:t,enumerable:!0}):o,t)),Nt=t=>Pe(oe({},"__esModule",{value:!0}),t);var uo={};xt(uo,{SMART_BOX_CLASSNAME:()=>Ee,SmartBox:()=>P,default:()=>co});module.exports=Nt(uo);var s=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?s(...e):typeof e=="object"?Object.keys(e).map((o,i)=>e[i]||e[o]&&o||null).filter(o=>o!==null).join(" "):e).filter(e=>!!e).join(" ");var h=(t,e)=>s({[`${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"}),H=(t,e)=>{let{valid:o,invalid:i,hover:n,focus:p,checked:c,active:d,selected:g,disabled:N,indeterminate:f,loading:S,empty:I,readonly:T,highlighted:$,..._}=e;return s({"k-valid":o,"k-invalid":i,"k-hover":n,"k-focus":p,"k-checked":c,"k-active":d,"k-selected":g,"k-disabled":N,"k-indeterminate":f&&!c,"k-loading":S,"k-empty":I,"k-readonly":T,"k-highlighted":$},Object.keys(_).reduce((M,C)=>(C.startsWith("k-")?M[C]=_[C]:M[`k-${C}`]=_[C],M),{}))};function _e(t,e){if(!e)return{};let o=Array.isArray(e)?e:[e];return Object.fromEntries(o.map(i=>[`k-${i}`,!0]))}var a={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"},A={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 F="input",ne=F;var Re=require("react/jsx-runtime"),ae="k-input",ht=[l.hover,l.focus,l.valid,l.invalid,l.required,l.disabled,l.loading,l.readonly],gt={size:[a.undefined,a.small,a.medium,a.large],rounded:[u.undefined,u.none,u.small,u.medium,u.large,u.full],fillMode:[m.undefined,m.solid,m.flat,m.outline]},It={},y=t=>{let{hover:e,focus:o,disabled:i,invalid:n,valid:p,loading:c,readonly:d,size:g,rounded:N,fillMode:f,...S}=t;return(0,Re.jsx)("span",{...S,className:s(t.className,ae,h(ae,{size:g,rounded:N,fillMode:f}),H(ae,{hover:e,focus:o,disabled:i,invalid:n,valid:p,loading:c,readonly:d}))})};y.states=ht;y.options=gt;y.className=ae;y.defaultOptions=It;y.moduleName=F;y.folderName=ne;var we=require("react/jsx-runtime"),se="k-picker",vt=[l.hover,l.focus,l.valid,l.invalid,l.required,l.disabled,l.loading,l.readonly],St={size:[a.undefined,a.small,a.medium,a.large],rounded:[u.undefined,u.none,u.small,u.medium,u.large,u.full],fillMode:[m.undefined,m.solid,m.flat,m.outline]},Mt={},K=t=>{let{hover:e,focus:o,disabled:i,invalid:n,valid:p,loading:c,readonly:d,size:g,rounded:N,fillMode:f,...S}=t;return(0,we.jsx)("span",{...S,className:s(t.className,se,h(se,{size:g,rounded:N,fillMode:f}),H(se,{hover:e,focus:o,disabled:i,invalid:n,valid:p,loading:c,readonly:d})),children:t.children})};K.states=vt;K.options=St;K.className=se;K.defaultOptions=Mt;K.moduleName=F;K.folderName=ne;var X=require("react/jsx-runtime"),me="k-font-icon",yt=[],kt={size:[a.undefined,a.xsmall,a.small,a.medium,a.large,a.xlarge,a.xxlarge,a.xxxlarge],themeColor:[r.undefined,r.base,r.primary,r.secondary,r.tertiary,r.success,r.warning,r.error,r.info]},At={},G=t=>{let{size:e,themeColor:o,icon:i,rotate:n,flip:p,...c}=t;return i?(0,X.jsx)("span",{...c,className:s(t.className,me,h(me,{size:e}),{[`k-i-${i}`]:i,[`k-color-${o}`]:o,[`k-rotate-${n}`]:n,"k-flip-h":p==="h"||p==="both","k-flip-v":p==="v"||p==="both"}),"aria-hidden":"true"}):(0,X.jsx)(X.Fragment,{})};G.states=yt;G.options=kt;G.className=me;G.defaultOptions=At;var ze=G;var w=require("react/jsx-runtime"),fe="k-svg-icon",Ot=[],Tt={size:[a.undefined,a.xsmall,a.small,a.medium,a.large,a.xlarge,a.xxlarge,a.xxxlarge],themeColor:[r.undefined,r.base,r.primary,r.secondary,r.tertiary,r.success,r.warning,r.error,r.info],variant:[A.outline,A.solid,A.duotone]},xe={viewBox:"0 0 24 24",variant:A.outline},q=t=>{var S,I;let{size:e,themeColor:o,rotate:i,flip:n,viewBox:p=xe.viewBox,variant:c=xe.variant,icon:d,...g}=t;if(!d)return(0,w.jsx)(w.Fragment,{});if(d==="none")return(0,w.jsx)("span",{...g,className:s(t.className,fe,h("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let N=typeof d=="object"&&d.name&&d.name,f=typeof d=="object"?c&&((S=d.variants)==null?void 0:S[c])||((I=d.variants)==null?void 0:I.outline)||d.content:void 0;return(0,w.jsx)("span",{...g,className:s(t.className,fe,h("k-icon",{size:e}),{[`k-svg-i-${N}`]:N,[`k-color-${o}`]:o,[`k-rotate-${i}`]:i,"k-flip-h":n==="h"||n==="both","k-flip-v":n==="v"||n==="both"}),"aria-hidden":"true",children:(0,w.jsx)("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:t.children})})};q.states=Ot;q.options=Tt;q.className=fe;q.defaultOptions=xe;var be=q;var Ne=bt(require("@progress/kendo-svg-icons"));var Be="icon",He="icons";var Ue=require("react");var Ke=require("react"),De=(0,Ke.createContext)({iconsType:"svg"});var L=require("react/jsx-runtime"),ie="k-icon",Ct=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),Lt=[],Et={size:[a.undefined,a.xsmall,a.small,a.medium,a.large,a.xlarge,a.xxlarge,a.xxxlarge],themeColor:[r.undefined,r.base,r.primary,r.secondary,r.tertiary,r.success,r.warning,r.error,r.info],variant:[A.outline,A.solid,A.duotone]},re={viewBox:"0 0 24 24",type:"svg",variant:A.outline},x=t=>{let{iconsType:e}=(0,Ue.useContext)(De),{size:o,themeColor:i,icon:n,type:p=e||re.type,rotate:c,flip:d,viewBox:g=re.viewBox,variant:N=re.variant,...f}=t;if(!n)return(0,L.jsx)(L.Fragment,{});if((e||p)==="svg"){if(n==="none")return(0,L.jsx)(be,{...f,className:s(t.className,ie),icon:n,size:o,variant:N});let I=Ne[n]?n:Ct(`${n}-icon`);return Ne[I]?(0,L.jsx)(be,{...f,className:s(t.className,ie),icon:Ne[I],size:o,themeColor:i,rotate:c,flip:d,viewBox:g,variant:N}):(0,L.jsx)(L.Fragment,{})}return(0,L.jsx)(ze,{...f,className:s(t.className,ie),icon:n,size:o,themeColor:i,rotate:c,flip:d})};x.states=Lt;x.options=Et;x.defaultOptions=re;x.className=ie;x.moduleName=Be;x.folderName=He;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."}]};var D=require("react/jsx-runtime"),Ve="k-clear-value",Pt=[l.disabled,l.loading,l.readonly],_t={},J=t=>{let{disabled:e,loading:o,readonly:i,value:n}=t;return e||i||o||!n?(0,D.jsx)(D.Fragment,{}):(0,D.jsx)("span",{className:s(t.className,Ve),children:(0,D.jsx)(x,{icon:"x"})})};J.states=Pt;J.options=_t;J.className=Ve;var $e=require("react/jsx-runtime"),he="k-input-inner",Rt=[],wt={},le={type:"text",autocomplete:"off",value:"",placeholder:""},z=t=>{let{value:e=le.value,type:o=le.type,placeholder:i=le.placeholder,autocomplete:n=le.autocomplete,disabled:p,readOnly:c,...d}=t;return(0,$e.jsx)("input",{...d,type:o,className:s(t.className,he,h(he,t)),placeholder:i,autoComplete:n,defaultValue:e,disabled:p||void 0,readOnly:c||void 0})};z.states=Rt;z.options=wt;z.className=he;var W=require("react/jsx-runtime"),ge="k-input-inner",zt=[],Bt={},Ie=t=>{let{value:e,placeholder:o,showValue:i,valueIcon:n,valueIconName:p,...c}=t;return(0,W.jsxs)("span",{...c,className:s(t.className,ge,h(ge,t)),children:[n,!n&&p&&(0,W.jsx)(x,{className:"k-input-value-icon",icon:p}),i&&!e&&o,i&&e&&(0,W.jsx)("span",{className:"k-input-value-text",children:e})]})};Ie.states=zt;Ie.options=Bt;Ie.className=ge;var Xe=require("react/jsx-runtime"),ve="k-input-inner",Ht=[],Kt={},Fe={value:"",placeholder:""},Se=t=>{let{value:e=Fe.value,placeholder:o=Fe.placeholder,rows:i,disabled:n,...p}=t;return(0,Xe.jsx)("textarea",{...p,className:s(t.className,ve,h(ve,t)),placeholder:o,rows:i,defaultValue:e,disabled:n||void 0})};Se.states=Ht;Se.options=Kt;Se.className=ve;var Q=require("react/jsx-runtime"),Ge="k-input-loading-icon",Dt=[l.disabled,l.loading],pe=t=>{let{disabled:e,loading:o}=t;return e||!o?(0,Q.jsx)(Q.Fragment,{}):(0,Q.jsx)("span",{className:s(t.className,Ge,"k-icon k-i-loading")})};pe.states=Dt;pe.className=Ge;var Y=require("react/jsx-runtime"),qe="k-input-validation-icon",Ut=[l.valid,l.invalid,l.disabled,l.loading],Vt={},Z=t=>{let{valid:e,invalid:o,disabled:i,loading:n}=t,p=o?"warning-circle":"check-circle";return i||n||!!!(e||o)?(0,Y.jsx)(Y.Fragment,{}):(0,Y.jsx)(x,{className:s(qe),icon:p})};Z.states=Ut;Z.options=Vt;Z.className=qe;var j=require("react/jsx-runtime"),$t="k-input-prefix",Ft={direction:"horizontal"},de=t=>{let{direction:e=Ft.direction,...o}=t;return t.children?(0,j.jsx)("span",{...o,className:s($t,t.className,{[`k-input-prefix-${e}`]:e}),children:t.children}):(0,j.jsx)(j.Fragment,{})};var ee=require("react/jsx-runtime"),Xt="k-input-suffix",Gt={direction:"horizontal"},ce=t=>{let{direction:e=Gt.direction,...o}=t;return t.children?(0,ee.jsx)("span",{...o,className:s(Xt,t.className,{[`k-input-suffix-${e}`]:e}),children:t.children}):(0,ee.jsx)(ee.Fragment,{})};var qt=require("react/jsx-runtime");var Jt=require("react/jsx-runtime");var We=require("react/jsx-runtime"),Je="k-input-separator",Wt={direction:"vertical"},U=t=>{let{direction:e=Wt.direction,...o}=t;return(0,We.jsx)("span",{...o,className:s(Je,t.className,{[`${Je}-${e}`]:e})})};var Me="button",Qe=Me;var k=require("react/jsx-runtime"),te="k-button",Qt=["icon-button"],Yt=[l.hover,l.focus,l.active,l.selected,l.disabled,l.generating],Zt={size:[a.undefined,a.xsmall,a.small,a.medium,a.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]},ye={showArrow:!1,arrowIconName:"chevron-down"},O=t=>{let{as:e="button",size:o,rounded:i,fillMode:n,themeColor:p,showArrow:c=ye.showArrow,arrowIconName:d=ye.arrowIconName,variant:g,hover:N,focus:f,active:S,selected:I,disabled:T,togglable:$,ariaDisabled:_,icon:M,iconSize:C,text:B,iconClassName:ue,className:it,...rt}=t,lt=M!=null,pt=t.children!==void 0;return(0,k.jsxs)(e,{className:s(it,te,_e(te,g),h(te,{size:o,rounded:i,fillMode:n,themeColor:p}),H(te,{hover:N,focus:f,active:S,disabled:T||_,selected:I}),{"k-icon-button":!B&&!pt&&lt}),"aria-pressed":$?I?"true":"false":void 0,...rt,"aria-disabled":_?"true":void 0,disabled:T||void 0,children:[typeof M=="string"&&M&&(0,k.jsx)(x,{className:s(ue,"k-button-icon"),icon:M,size:C}),M&&typeof M!="string"&&(0,k.jsx)(k.Fragment,{children:M}),B?(0,k.jsxs)(k.Fragment,{children:[B&&(0,k.jsx)("span",{className:"k-button-text",children:B}),t.children]}):t.children&&(0,k.jsx)("span",{className:"k-button-text",children:t.children}),c&&(0,k.jsx)("span",{className:"k-menu-button-arrow k-button-arrow",children:(0,k.jsx)(x,{icon:d})})]})};O.states=Yt;O.options=Zt;O.variants=Qt;O.className=te;O.defaultOptions=ye;O.moduleName=Me;O.folderName=Qe;O.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."}]};var Ze=require("react/jsx-runtime"),Ye=t=>(0,Ze.jsx)(O,{children:"Button",...t});var b=require("react/jsx-runtime"),jt=y.states,eo=y.defaultOptions,to=y.options,oo=[{name:"prefix",title:"Prefix"},{name:"suffix",title:"Suffix"},{name:"clear-button",title:"`Clear` Button"},{name:"validation-icon",title:"Validation Icon"},{name:"separators",title:"Separators"}],no=[],V=t=>{let{modifiers:e,valid:o,invalid:i,loading:n,disabled:p,readonly:c,...d}=t,g=e==null?void 0:e.prefix,N=e==null?void 0:e.suffix,f=e==null?void 0:e["clear-button"],S=e==null?void 0:e["validation-icon"],I=e==null?void 0:e.separators;return(0,b.jsxs)(y,{...d,valid:o,invalid:i,loading:n,disabled:p,readonly:c,style:{width:300},children:[g&&(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(de,{children:(0,b.jsx)(x,{icon:"lock"})}),I&&(0,b.jsx)(U,{})]}),(0,b.jsx)(z,{placeholder:"Placeholder",value:"Value"}),S&&(0,b.jsx)(Z,{valid:o,invalid:i,loading:n,disabled:p}),(0,b.jsx)(pe,{loading:n,disabled:p}),f&&(0,b.jsx)(J,{loading:n,disabled:p,readonly:c,value:"Value"}),N&&(0,b.jsxs)(b.Fragment,{children:[I&&(0,b.jsx)(U,{}),(0,b.jsx)(ce,{children:(0,b.jsx)(Ye,{size:d.size,fillMode:"clear",children:"Send"})})]})]})};V.options=to;V.states=jt;V.variants=no;V.defaultOptions=eo;V.modifiers=oo;V.className=y.className;var ke="popup",je=ke;var Oe=require("react/jsx-runtime"),et="k-animation-container",ao=[],so={},Ae={positionMode:"absolute",shown:!0},R=t=>{let{positionMode:e=Ae.positionMode,shown:o=Ae.shown,animationStyle:i,offset:n,...p}=t;return(0,Oe.jsx)("div",{...p,style:{...n,...t.style},className:s(t.className,et,{"k-animation-container-shown":o,"k-animation-container-fixed":e==="fixed"}),children:(0,Oe.jsx)("div",{className:"k-child-animation-container",style:i,children:t.children})})};R.states=ao;R.options=so;R.className=et;R.defaultOptions=Ae;R.moduleName=ke;R.folderName=je;var Te="popup",tt=Te;var Ce=require("react/jsx-runtime"),ot="k-popup",io=[],ro={},nt={positionMode:"absolute"},E=t=>{let{offset:e,positionMode:o=nt.positionMode,animationStyle:i,containerClassName:n,containerRole:p,containerAriaLabel:c,...d}=t;return(0,Ce.jsx)(R,{positionMode:o,offset:e,animationStyle:i,className:n,role:p,"aria-label":c,children:(0,Ce.jsx)("div",{...d,className:s(t.className,ot),children:t.children})})};E.states=io;E.options=ro;E.className=ot;E.defaultOptions=nt;E.moduleName=Te;E.folderName=tt;E.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 Le="smart-box",at=Le;var v=require("react/jsx-runtime"),Ee="k-smart-box",lo=[l.hover,l.focus,l.disabled],po={size:[a.undefined,a.small,a.medium,a.large],rounded:[u.undefined,u.none,u.small,u.medium,u.large,u.full],fillMode:[m.undefined,m.solid,m.flat,m.outline]},st={separators:!0},P=t=>{let{size:e,rounded:o,fillMode:i,separators:n=st.separators,prefix:p,suffix:c,value:d,placeholder:g,hover:N,focus:f,disabled:S,popup:I,opened:T,processing:$,inputAriaLabel:_,inputAriaControls:M,inputAriaActiveDescendant:C,inputAriaAutocomplete:B,...ue}=t;return(0,v.jsxs)(v.Fragment,{children:[(0,v.jsxs)(y,{...ue,size:e,rounded:o,fillMode:i,hover:N,focus:f,disabled:S,loading:$,className:s(t.className,Ee),children:[p&&(0,v.jsxs)(v.Fragment,{children:[(0,v.jsx)(de,{children:p}),n&&(0,v.jsx)(U,{})]}),(0,v.jsx)(z,{placeholder:g,value:d,role:"combobox","aria-haspopup":"listbox","aria-expanded":T?"true":"false","aria-autocomplete":B,"aria-controls":T?M:void 0,"aria-activedescendant":T?C:void 0,"aria-label":_}),c&&(0,v.jsxs)(v.Fragment,{children:[n&&(0,v.jsx)(U,{}),(0,v.jsx)(ce,{children:c})]})]}),T&&I&&(0,v.jsx)(E,{className:"k-smart-box-popup",children:I})]})};P.states=lo;P.options=po;P.className=Ee;P.defaultOptions=st;P.moduleName=Le;P.folderName=at;P.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 co=P;