UNPKG

@progress/kendo-themes-html

Version:

A collection of HTML helpers used for developing Kendo UI themes

2 lines (1 loc) 49.3 kB
var r=(...e)=>e.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?r(...t):typeof t=="object"?Object.keys(t).map((o,n)=>t[n]||t[o]&&o||null).filter(o=>o!==null).join(" "):t).filter(t=>!!t).join(" ");var k=(e,t)=>r({[`${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"}),O=(e,t)=>{let{valid:o,invalid:n,hover:a,focus:l,checked:d,active:c,selected:u,disabled:x,indeterminate:v,loading:C,empty:T,readonly:y,highlighted:g,...S}=t;return r({"k-valid":o,"k-invalid":n,"k-hover":a,"k-focus":l,"k-checked":d,"k-active":c,"k-selected":u,"k-disabled":x,"k-indeterminate":v&&!d,"k-loading":C,"k-empty":T,"k-readonly":y,"k-highlighted":g},Object.keys(S).reduce((I,L)=>(L.startsWith("k-")?I[L]=S[L]:I[`k-${L}`]=S[L],I),{}))};function vo(e,t){if(!t)return{};let o=Array.isArray(t)?t:[t];return Object.fromEntries(o.map(n=>[`k-${n}`,!0]))}var s={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},p={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"},h={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},j={undefined:void 0,outline:"outline",solid:"solid",duotone:"duotone"},m={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 Et={};function q(e){return Et[e]=(Et[e]||0)+1,`k-${e}-${Et[e]}`}var Ve="input",rt=Ve;import{jsx as Bn}from"react/jsx-runtime";var st="k-input",Hn=[i.hover,i.focus,i.valid,i.invalid,i.required,i.disabled,i.loading,i.readonly],zn={size:[s.undefined,s.small,s.medium,s.large],rounded:[p.undefined,p.none,p.small,p.medium,p.large,p.full],fillMode:[h.undefined,h.solid,h.flat,h.outline]},Dn={},M=e=>{let{hover:t,focus:o,disabled:n,invalid:a,valid:l,loading:d,readonly:c,size:u,rounded:x,fillMode:v,...C}=e;return Bn("span",{...C,className:r(e.className,st,k(st,{size:u,rounded:x,fillMode:v}),O(st,{hover:t,focus:o,disabled:n,invalid:a,valid:l,loading:d,readonly:c}))})};M.states=Hn;M.options=zn;M.className=st;M.defaultOptions=Dn;M.moduleName=Ve;M.folderName=rt;import{jsx as Gn}from"react/jsx-runtime";var lt="k-picker",Fn=[i.hover,i.focus,i.valid,i.invalid,i.required,i.disabled,i.loading,i.readonly],Un={size:[s.undefined,s.small,s.medium,s.large],rounded:[p.undefined,p.none,p.small,p.medium,p.large,p.full],fillMode:[h.undefined,h.solid,h.flat,h.outline]},Vn={},Ce=e=>{let{hover:t,focus:o,disabled:n,invalid:a,valid:l,loading:d,readonly:c,size:u,rounded:x,fillMode:v,...C}=e;return Gn("span",{...C,className:r(e.className,lt,k(lt,{size:u,rounded:x,fillMode:v}),O(lt,{hover:t,focus:o,disabled:n,invalid:a,valid:l,loading:d,readonly:c})),children:e.children})};Ce.states=Fn;Ce.options=Un;Ce.className=lt;Ce.defaultOptions=Vn;Ce.moduleName=Ve;Ce.folderName=rt;import{Fragment as qn,jsx as No}from"react/jsx-runtime";var St="k-font-icon",Xn=[],$n={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[m.undefined,m.base,m.primary,m.secondary,m.tertiary,m.success,m.warning,m.error,m.info]},Wn={},Ge=e=>{let{size:t,themeColor:o,icon:n,rotate:a,flip:l,...d}=e;return n?No("span",{...d,className:r(e.className,St,k(St,{size:t}),{[`k-i-${n}`]:n,[`k-color-${o}`]:o,[`k-rotate-${a}`]:a,"k-flip-h":l==="h"||l==="both","k-flip-v":l==="v"||l==="both"}),"aria-hidden":"true"}):No(qn,{})};Ge.states=Xn;Ge.options=$n;Ge.className=St;Ge.defaultOptions=Wn;var Co=Ge;import{Fragment as Qn,jsx as ct}from"react/jsx-runtime";var yt="k-svg-icon",Jn=[],Yn={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[m.undefined,m.base,m.primary,m.secondary,m.tertiary,m.success,m.warning,m.error,m.info],variant:[j.outline,j.solid,j.duotone]},gt={viewBox:"0 0 24 24",variant:j.outline},Xe=e=>{let{size:t,themeColor:o,rotate:n,flip:a,viewBox:l=gt.viewBox,variant:d=gt.variant,icon:c,...u}=e;if(!c)return ct(Qn,{});if(c==="none")return ct("span",{...u,className:r(e.className,yt,k("k-icon",{size:t}),"k-none"),"aria-hidden":"true"});let x=typeof c=="object"&&c.name&&c.name,v=typeof c=="object"?d&&c.variants?.[d]||c.variants?.outline||c.content:void 0;return ct("span",{...u,className:r(e.className,yt,k("k-icon",{size:t}),{[`k-svg-i-${x}`]:x,[`k-color-${o}`]:o,[`k-rotate-${n}`]:n,"k-flip-h":a==="h"||a==="both","k-flip-v":a==="v"||a==="both"}),"aria-hidden":"true",children:ct("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof c=="object"?c.viewBox:l,dangerouslySetInnerHTML:v!==void 0?{__html:v}:void 0,children:c?void 0:e.children})})};Xe.states=Jn;Xe.options=Yn;Xe.className=yt;Xe.defaultOptions=gt;var Mt=Xe;import*as wt from"@progress/kendo-svg-icons";var ko="icon",Ao="icons";import{useContext as jn}from"react";import{createContext as Zn}from"react";var To=Zn({iconsType:"svg"});import{Fragment as Io,jsx as $e}from"react/jsx-runtime";var dt="k-icon",ea=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),ta=[],oa={size:[s.undefined,s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[m.undefined,m.base,m.primary,m.secondary,m.tertiary,m.success,m.warning,m.error,m.info],variant:[j.outline,j.solid,j.duotone]},pt={viewBox:"0 0 24 24",type:"svg",variant:j.outline},b=e=>{let{iconsType:t}=jn(To),{size:o,themeColor:n,icon:a,type:l=t||pt.type,rotate:d,flip:c,viewBox:u=pt.viewBox,variant:x=pt.variant,...v}=e;if(!a)return $e(Io,{});if((t||l)==="svg"){if(a==="none")return $e(Mt,{...v,className:r(e.className,dt),icon:a,size:o,variant:x});let T=wt[a]?a:ea(`${a}-icon`);return wt[T]?$e(Mt,{...v,className:r(e.className,dt),icon:wt[T],size:o,themeColor:n,rotate:d,flip:c,viewBox:u,variant:x}):$e(Io,{})}return $e(Co,{...v,className:r(e.className,dt),icon:a,size:o,themeColor:n,rotate:d,flip:c})};b.states=ta;b.options=oa;b.defaultOptions=pt;b.className=dt;b.moduleName=ko;b.folderName=Ao;b.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 ia,jsx as Lt}from"react/jsx-runtime";var Eo="k-clear-value",na=[i.disabled,i.loading,i.readonly],aa={},J=e=>{let{disabled:t,loading:o,readonly:n,value:a}=e;return t||n||o||!a?Lt(ia,{}):Lt("span",{className:r(e.className,Eo),children:Lt(b,{icon:"x"})})};J.states=na;J.options=aa;J.className=Eo;import{jsx as la}from"react/jsx-runtime";var Ot="k-input-inner",ra=[],sa={},mt={type:"text",autocomplete:"off",value:"",placeholder:""},ae=e=>{let{value:t=mt.value,type:o=mt.type,placeholder:n=mt.placeholder,autocomplete:a=mt.autocomplete,disabled:l,readOnly:d,...c}=e;return la("input",{...c,type:o,className:r(e.className,Ot,k(Ot,e)),placeholder:n,autoComplete:a,defaultValue:t,disabled:l||void 0,readOnly:d||void 0})};ae.states=ra;ae.options=sa;ae.className=Ot;import{jsx as So,jsxs as pa}from"react/jsx-runtime";var Rt="k-input-inner",ca=[],da={},Kt=e=>{let{value:t,placeholder:o,showValue:n,valueIcon:a,valueIconName:l,...d}=e;return pa("span",{...d,className:r(e.className,Rt,k(Rt,e)),children:[a,!a&&l&&So(b,{className:"k-input-value-icon",icon:l}),n&&!t&&o,n&&t&&So("span",{className:"k-input-value-text",children:t})]})};Kt.states=ca;Kt.options=da;Kt.className=Rt;import{jsx as fa}from"react/jsx-runtime";var _t="k-input-inner",ma=[],ua={},yo={value:"",placeholder:""},Pt=e=>{let{value:t=yo.value,placeholder:o=yo.placeholder,rows:n,disabled:a,...l}=e;return fa("textarea",{...l,className:r(e.className,_t,k(_t,e)),placeholder:o,rows:n,defaultValue:t,disabled:a||void 0})};Pt.states=ma;Pt.options=ua;Pt.className=_t;import{Fragment as xa,jsx as go}from"react/jsx-runtime";var Mo="k-input-loading-icon",ha=[i.disabled,i.loading],ee=e=>{let{disabled:t,loading:o}=e;return t||!o?go(xa,{}):go("span",{className:r(e.className,Mo,"k-icon k-i-loading")})};ee.states=ha;ee.className=Mo;import{Fragment as Na,jsx as wo}from"react/jsx-runtime";var Lo="k-input-validation-icon",ba=[i.valid,i.invalid,i.disabled,i.loading],va={},Y=e=>{let{valid:t,invalid:o,disabled:n,loading:a}=e,l=o?"warning-circle":"check-circle";return n||a||!!!(t||o)?wo(Na,{}):wo(b,{className:r(Lo),icon:l})};Y.states=ba;Y.options=va;Y.className=Lo;import{Fragment as Aa,jsx as Oo}from"react/jsx-runtime";var Ca="k-input-prefix",ka={direction:"horizontal"},ke=e=>{let{direction:t=ka.direction,...o}=e;return e.children?Oo("span",{...o,className:r(Ca,e.className,{[`k-input-prefix-${t}`]:t}),children:e.children}):Oo(Aa,{})};import{Fragment as Ea,jsx as Ro}from"react/jsx-runtime";var Ta="k-input-suffix",Ia={direction:"horizontal"},Ae=e=>{let{direction:t=Ia.direction,...o}=e;return e.children?Ro("span",{...o,className:r(Ta,e.className,{[`k-input-suffix-${t}`]:t}),children:e.children}):Ro(Ea,{})};import{jsx as Nl}from"react/jsx-runtime";import{jsx as Tl}from"react/jsx-runtime";import{jsx as ya}from"react/jsx-runtime";var Ko="k-input-separator",Sa={direction:"vertical"},Te=e=>{let{direction:t=Sa.direction,...o}=e;return ya("span",{...o,className:r(Ko,e.className,{[`${Ko}-${t}`]:t})})};var Ht="button",_o=Ht;import{Fragment as Po,jsx as Ie,jsxs as Ho}from"react/jsx-runtime";var We="k-button",ga=["icon-button"],Ma=[i.hover,i.focus,i.active,i.selected,i.disabled,i.generating],wa={size:[s.undefined,s.xsmall,s.small,s.medium,s.large],rounded:[p.undefined,p.none,p.small,p.medium,p.large,p.full],fillMode:[h.undefined,h.solid,h.flat,h.outline,h.clear,h.link],themeColor:[m.undefined,m.base,m.primary,m.secondary,m.tertiary,m.success,m.warning,m.error,m.info,m.inverse]},zt={showArrow:!1,arrowIconName:"chevron-down"},N=e=>{let{as:t="button",size:o,rounded:n,fillMode:a,themeColor:l,showArrow:d=zt.showArrow,arrowIconName:c=zt.arrowIconName,variant:u,hover:x,focus:v,active:C,selected:T,disabled:y,togglable:g,ariaDisabled:S,icon:I,iconSize:L,text:_,iconClassName:W,className:ne,...fe}=e,Fe=I!=null,Ue=e.children!==void 0;return Ho(t,{className:r(ne,We,vo(We,u),k(We,{size:o,rounded:n,fillMode:a,themeColor:l}),O(We,{hover:x,focus:v,active:C,disabled:y||S,selected:T}),{"k-icon-button":!_&&!Ue&&Fe}),"aria-pressed":g?T?"true":"false":void 0,...fe,"aria-disabled":S?"true":void 0,disabled:y||void 0,children:[typeof I=="string"&&I&&Ie(b,{className:r(W,"k-button-icon"),icon:I,size:L}),I&&typeof I!="string"&&Ie(Po,{children:I}),_?Ho(Po,{children:[_&&Ie("span",{className:"k-button-text",children:_}),e.children]}):e.children&&Ie("span",{className:"k-button-text",children:e.children}),d&&Ie("span",{className:"k-menu-button-arrow k-button-arrow",children:Ie(b,{icon:c})})]})};N.states=Ma;N.options=wa;N.variants=ga;N.className=We;N.defaultOptions=zt;N.moduleName=Ht;N.folderName=_o;N.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 La}from"react/jsx-runtime";var he=e=>La(N,{children:"Button",...e});import{Fragment as zo,jsx as te,jsxs as Dt}from"react/jsx-runtime";var Oa=M.states,Ra=M.defaultOptions,Ka=M.options,_a=[{name:"prefix",title:"Prefix"},{name:"suffix",title:"Suffix"},{name:"clear-button",title:"`Clear` Button"},{name:"validation-icon",title:"Validation Icon"},{name:"separators",title:"Separators"}],Pa=[],Ee=e=>{let{modifiers:t,valid:o,invalid:n,loading:a,disabled:l,readonly:d,...c}=e,u=t?.prefix,x=t?.suffix,v=t?.["clear-button"],C=t?.["validation-icon"],T=t?.separators;return Dt(M,{...c,valid:o,invalid:n,loading:a,disabled:l,readonly:d,style:{width:300},children:[u&&Dt(zo,{children:[te(ke,{children:te(b,{icon:"lock"})}),T&&te(Te,{})]}),te(ae,{placeholder:"Placeholder",value:"Value"}),C&&te(Y,{valid:o,invalid:n,loading:a,disabled:l}),te(ee,{loading:a,disabled:l}),v&&te(J,{loading:a,disabled:l,readonly:d,value:"Value"}),x&&Dt(zo,{children:[T&&te(Te,{}),te(Ae,{children:te(he,{size:c.size,fillMode:"clear",children:"Send"})})]})]})};Ee.options=Ka;Ee.states=Oa;Ee.variants=Pa;Ee.defaultOptions=Ra;Ee.modifiers=_a;Ee.className=M.className;import{jsx as Ha}from"react/jsx-runtime";var Do=e=>Ha(N,{icon:"folder",...e,"aria-label":e["aria-label"]||"Folder",children:void 0});import{jsx as za}from"react/jsx-runtime";var Bo=e=>za(N,{icon:"folder",children:"Button",...e});import{jsx as Bt}from"react/jsx-runtime";var Da=N.options,Ba=N.states,Fa={...N.defaultOptions,variant:"text"},Ua=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],Va=[],Se=e=>{let{variant:t,...o}=e;switch(t){case"icon-only":return Bt(Do,{...o,icon:"star"});case"icon-and-text":return Bt(Bo,{...o,icon:"star",children:"Button"});default:return Bt(he,{...o,children:"Button"})}};Se.options=Da;Se.states=Ba;Se.variants=Ua;Se.defaultOptions=Fa;Se.modifiers=Va;Se.className=N.className;import{jsx as ut}from"react/jsx-runtime";var Ga="k-chip-action";var ie=e=>{let{type:t,...o}=e,n;switch(t){case"remove":n=ut(b,{icon:"x-circle",size:"small"});break;case"more":n=ut(b,{icon:"more-vertical",size:"small"});break;default:return ut(b,{icon:t,size:"small"})}return ut("span",{...o,className:r(e.className,Ga,`k-chip-${t}-action`),children:n})};var Ft="avatar",Fo=Ft;import{jsx as Uo}from"react/jsx-runtime";var qe="k-avatar";var Xa=[i.hover,i.focus,i.active,i.selected,i.disabled],$a={size:[s.undefined,s.small,s.medium,s.large],rounded:[p.undefined,p.none,p.small,p.medium,p.large,p.full],fillMode:[h.undefined,h.solid,h.outline],themeColor:[m.undefined,m.base,m.primary,m.secondary,m.tertiary]},Ut={type:"text",border:!1},z=e=>{let{size:t,rounded:o,fillMode:n,themeColor:a,type:l=Ut.type,border:d=Ut.border,...c}=e;return Uo("div",{...c,className:r(e.className,qe,k(qe,{size:t,rounded:o,fillMode:n,themeColor:a}),{[`${qe}-bordered`]:d}),children:Uo("span",{className:`${qe}-${l}`,children:e.children})})};z.states=Xa;z.options=$a;z.className=qe;z.defaultOptions=Ut;z.moduleName=Ft;z.folderName=Fo;z.ariaSpec={selector:".k-avatar",rules:[{selector:".k-avatar img",attribute:"alt",usage:"Images inside Avatar must have alt text for screen readers."}]};var xe=z;import{jsx as Wa}from"react/jsx-runtime";var Vo=e=>Wa(xe,{type:"icon",...e});import{jsx as qa}from"react/jsx-runtime";var Go=e=>qa(xe,{type:"text",...e});import{jsx as Ja}from"react/jsx-runtime";var Xo=e=>Ja(xe,{type:"image",...e});import{jsx as Qc}from"react/jsx-runtime";import{jsx as Je}from"react/jsx-runtime";var Ya=z.options,Qa=z.states,Za={...z.defaultOptions,variant:"image"},ja=[{name:"image",title:"Image"},{name:"icon",title:"Icon Avatar"},{name:"text",title:"Text Avatar"}],ei=[],ye=e=>{let{variant:t,...o}=e;switch(t){case"icon":return Je(Vo,{...o,children:Je(b,{icon:"star"})});case"text":return Je(Go,{...o,children:"JO"});default:return Je(Xo,{...o,children:Je("img",{src:"https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg"})})}};ye.options=Ya;ye.states=Qa;ye.variants=ja;ye.defaultOptions=Za;ye.modifiers=ei;ye.className=z.className;var Ye="chip",ft=Ye,ht="https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg";import{jsx as ge,jsxs as ni}from"react/jsx-runtime";var xt="k-chip",ti=[i.hover,i.focus,i.active,i.selected,i.disabled],oi={size:[s.undefined,s.small,s.medium,s.large],rounded:[p.undefined,p.none,p.small,p.medium,p.large,p.full],fillMode:[h.undefined,h.solid,h.outline],themeColor:[m.undefined,m.base,m.success,m.warning,m.error,m.info]},$o={avatarImage:"/packages/html/assets/avatar.jpg"},P=e=>{let{size:t,rounded:o,fillMode:n,themeColor:a,text:l,icon:d,actions:c,showAvatar:u,avatarImage:x=$o.avatarImage,hover:v,focus:C,active:T,selected:y,disabled:g,...S}=e;return ni("div",{...S,className:r(e.className,xt,k(xt,{size:t,rounded:o,fillMode:n,themeColor:a}),O(xt,{hover:v,focus:C,active:T,disabled:g,selected:y})),role:e.role||"button","aria-pressed":e.role==="option"?void 0:y?"true":"false",...e.role==="option"&&y!==void 0&&{"aria-selected":y?"true":"false"},"aria-disabled":g?"true":void 0,children:[d&&ge(b,{className:"k-chip-icon",icon:d,size:"small"}),u&&ge(z,{className:"k-chip-avatar",type:"image",children:ge("img",{src:x,alt:""})}),ge("span",{className:"k-chip-content",children:e.children?e.children:l&&ge("span",{className:"k-chip-label",children:l})}),c&&ge("span",{className:"k-chip-actions",children:c})]})};P.states=ti;P.options=oi;P.className=xt;P.defaultOptions=$o;P.moduleName=Ye;P.folderName=ft;P.ariaSpec={selector:".k-chip",rules:[{selector:"*:not(.k-chip-list) > .k-chip",attribute:"role=button",usage:"Announces that the chip acts as a button when standalone."},{selector:"*:not(.k-chip-list) > .k-chip.k-selected",attribute:"aria-pressed=true",usage:"Announces that the Chip has been selected."},{selector:"*:not(.k-chip-list) > .k-chip:not(.k-selected)",attribute:"aria-pressed=false",usage:"Announces that the Chip has not been selected."},{selector:".k-chip",attribute:"aria-disabled=true (when disabled)",usage:"Announces that the Chip is disabled."}]};var G=P;import{jsx as si}from"react/jsx-runtime";var Vt="k-chip-list",ai=[],ii={size:[s.undefined,s.small,s.medium,s.large]},ri={},w=e=>{let{size:t,multiselectable:o,ariaLabel:n,...a}=e;return si("div",{...a,className:r(e.className,Vt,k(Vt,{size:t})),role:e.role||"listbox","aria-label":e.role==="none"?void 0:n||"chip list","aria-orientation":e.role==="none"?void 0:"horizontal","aria-multiselectable":o?"true":void 0,children:e.children})};w.states=ai;w.options=ii;w.className=Vt;w.defaultOptions=ri;w.moduleName=Ye;w.folderName=ft;w.ariaSpec={selector:".k-chip-list",rules:[{selector:".k-chip-list",attribute:"role=listbox",usage:"Announces the list role of the chip list."},{selector:".k-chip-list",attribute:"aria-label or aria-labelledby",usage:"Adds label to the ChipList element. ListBox element requires an accessible name."},{selector:".k-chip-list",attribute:"aria-orientation=horizontal",usage:"Specifies the horizontal orientation of the chiplist."},{selector:".k-chip-list",attribute:"aria-multiselectable=true (when multiple selection)",usage:"Announces the multiple selection ability of the chiplist."},{selector:".k-chip-list .k-chip",attribute:"role=option",usage:"Announces the chip is an option inner component of the chip list."},{selector:".k-chip-list .k-chip.k-selected",attribute:"aria-selected=true",usage:"Announces the chip is selected."},{selector:".k-chip-list .k-chip:not(.k-selected)",attribute:"aria-selected=false",usage:"Announces the chip is not selected."},{selector:".k-chip-list .k-chip:has(.k-i-x-circle), .k-chip-list .k-chip:has(.k-svg-i-x-circle)",attribute:"aria-keyshortcuts=Enter Delete",usage:"Announces the Delete action along with the default Enter key."}]};import{jsx as yd}from"react/jsx-runtime";import{jsx as Ld}from"react/jsx-runtime";import{jsx as li}from"react/jsx-runtime";var bt=e=>li(G,{text:"text",...e});import{jsx as Dd}from"react/jsx-runtime";import{jsx as Vd}from"react/jsx-runtime";import{Fragment as Jd,jsx as qd,jsxs as Yd}from"react/jsx-runtime";import{jsx as tp,jsxs as op}from"react/jsx-runtime";import{jsx as sp,jsxs as lp}from"react/jsx-runtime";import{jsx as fp,jsxs as hp}from"react/jsx-runtime";import{jsx as Me,jsxs as fi}from"react/jsx-runtime";var ci={...G.options,...w.options},di=[],pi=w.states,mi={...G.defaultOptions,...w.defaultOptions},ui=[{name:"icon",title:"Icon",type:"boolean"},{name:"actions",title:"Actions",type:"boolean"},{name:"avatar",title:"Avatar",type:"boolean"}],we=e=>{let{modifiers:t,className:o,...n}=e,a=t?.icon,l=t?.actions,d=t?.avatar,c=d?ht:void 0;return fi(w,{size:n.size,className:o,children:[Me(bt,{...n,role:"option","aria-selected":"false","aria-pressed":void 0,icon:a?"star":void 0,actions:l?Me(ie,{type:"remove"}):void 0,showAvatar:d,avatarImage:c,children:"Chip"}),Me(bt,{...n,role:"option","aria-selected":"false","aria-pressed":void 0,icon:a?"star":void 0,actions:l?Me(ie,{type:"remove"}):void 0,showAvatar:d,avatarImage:c,children:"Chip"}),Me(bt,{...n,role:"option","aria-selected":"false","aria-pressed":void 0,icon:a?"star":void 0,actions:l?Me(ie,{type:"remove"}):void 0,showAvatar:d,avatarImage:c,children:"Chip"})]})};we.options=ci;we.states=pi;we.variants=di;we.defaultOptions=mi;we.modifiers=ui;we.className=w.className;import{jsx as Gt}from"react/jsx-runtime";var hi=P.states,xi=P.defaultOptions,bi=P.options,vi=[],Ni=[{name:"icon",title:"Icon"},{name:"avatar",title:"Avatar"},{name:"remove-icon",title:"`Remove` Icon"},{name:"more-options",title:"`More options` Icon"}],Le=e=>{let{modifiers:t,...o}=e,n={};return Object.keys(t||{}).forEach(a=>{switch(a){case"icon":n.icon=t?.[a]?"arrow-down":void 0;break;case"avatar":n.showAvatar=!!t?.[a],n.avatarImage=t?.[a]?ht:void 0;break;case"more-options":n.actions||(n.actions=[]),n.actions[0]=t?.[a]?Gt(ie,{type:"more"}):void 0;break;case"remove-icon":n.actions||(n.actions=[]),n.actions[1]=t?.[a]?Gt(ie,{type:"remove"}):void 0;break;default:break}}),Gt(P,{...o,...n,children:"Chip component"})};Le.options=bi;Le.states=hi;Le.variants=vi;Le.defaultOptions=xi;Le.modifiers=Ni;Le.className=P.className;var Xt="popup",Wo=Xt;import{jsx as qo}from"react/jsx-runtime";var Jo="k-animation-container",Ci=[],ki={},$t={positionMode:"absolute",shown:!0},oe=e=>{let{positionMode:t=$t.positionMode,shown:o=$t.shown,animationStyle:n,offset:a,...l}=e;return qo("div",{...l,style:{...a,...e.style},className:r(e.className,Jo,{"k-animation-container-shown":o,"k-animation-container-fixed":t==="fixed"}),children:qo("div",{className:"k-child-animation-container",style:n,children:e.children})})};oe.states=Ci;oe.options=ki;oe.className=Jo;oe.defaultOptions=$t;oe.moduleName=Xt;oe.folderName=Wo;var Wt="popup",Yo=Wt;import{jsx as Qo}from"react/jsx-runtime";var Zo="k-popup",Ai=[],Ti={},jo={positionMode:"absolute"},re=e=>{let{offset:t,positionMode:o=jo.positionMode,animationStyle:n,containerClassName:a,containerRole:l,containerAriaLabel:d,...c}=e;return Qo(oe,{positionMode:o,offset:t,animationStyle:n,className:a,role:l,"aria-label":d,children:Qo("div",{...c,className:r(e.className,Zo),children:e.children})})};re.states=Ai;re.options=Ti;re.className=Zo;re.defaultOptions=jo;re.moduleName=Wt;re.folderName=Yo;re.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 qt="action-buttons",en=qt;import{jsx as Si}from"react/jsx-runtime";var vt="k-actions",Ii=[],Ei={},Jt={alignment:"start",orientation:"horizontal"},le=e=>{let{alignment:t=Jt.alignment,orientation:o=Jt.orientation,...n}=e;return Si("div",{...n,className:r(vt,{[`${vt}-${t}`]:t,[`${vt}-${o}`]:o},e.className),children:e.children})};le.states=Ii;le.options=Ei;le.className=vt;le.defaultOptions=Jt;le.moduleName=qt;le.folderName=en;import{jsx as gi}from"react/jsx-runtime";var yi="k-actionsheet-footer",tn={alignment:"stretched",orientation:"horizontal"},Oe=e=>{let{alignment:t=tn.alignment,orientation:o=tn.orientation,template:n,as:a=n?"div":le,...l}=e;return gi(a,{...l,...!n&&{alignment:t,orientation:o},className:r(e.className,yi),children:e.children})};var Yt="searchbox",on=Yt;import{jsx as Qe,jsxs as Li}from"react/jsx-runtime";var nn="k-searchbox",Mi=[i.hover,i.focus,i.valid,i.invalid,i.required,i.disabled,i.loading],wi={size:[s.undefined,s.small,s.medium,s.large],rounded:[p.undefined,p.none,p.small,p.medium,p.large,p.full],fillMode:[h.undefined,h.solid,h.flat,h.outline]},Qt={showIcon:!0,icon:"search"},ce=e=>{let{value:t,placeholder:o,size:n,rounded:a,fillMode:l,hover:d,focus:c,valid:u,invalid:x,required:v,loading:C,disabled:T,showIcon:y=Qt.showIcon,icon:g=Qt.icon,"aria-label":S,...I}=e;return Li(M,{...I,size:n,rounded:a,fillMode:l,hover:d,focus:c,valid:u,invalid:x,required:v,loading:C,disabled:T,className:r(e.className,nn),children:[y&&Qe(b,{className:"k-input-icon",icon:g}),Qe(ae,{placeholder:o,value:t,"aria-label":S}),Qe(ee,{...e}),Qe(Y,{...e}),Qe(J,{...e})]})};ce.states=Mi;ce.options=wi;ce.className=nn;ce.defaultOptions=Qt;ce.moduleName=Yt;ce.folderName=on;import{jsx as Mm}from"react/jsx-runtime";var Zt="textbox",an=Zt;import{Fragment as rn,jsx as de,jsxs as jt}from"react/jsx-runtime";var sn="k-textbox",Oi=[i.hover,i.focus,i.valid,i.invalid,i.required,i.disabled,i.loading,i.readonly],Ri={size:[s.undefined,s.small,s.medium,s.large],rounded:[p.undefined,p.none,p.small,p.medium,p.large,p.full],fillMode:[h.undefined,h.solid,h.flat,h.outline]},Nt={showClearButton:!0,showValidationIcon:!0,separators:!0},D=e=>{let{size:t,rounded:o,fillMode:n,separators:a=Nt.separators,showClearButton:l=Nt.showClearButton,showValidationIcon:d=Nt.showValidationIcon,prefix:c,suffix:u,type:x,value:v,placeholder:C,hover:T,focus:y,valid:g,invalid:S,required:I,loading:L,disabled:_,readonly:W,id:ne,"aria-label":fe,"aria-describedby":Fe,...Ue}=e;return jt(M,{...Ue,size:t,rounded:o,fillMode:n,hover:T,focus:y,valid:g,invalid:S,required:I,loading:L,disabled:_,readonly:W,className:r(e.className,sn),children:[c&&jt(rn,{children:[de(ke,{children:c}),a&&de(Te,{})]}),de(ae,{id:ne,placeholder:C,value:v,type:x,disabled:_,"aria-label":fe,"aria-describedby":Fe,"aria-invalid":S?"true":void 0}),d&&de(Y,{valid:g,invalid:S,loading:L,disabled:_}),de(ee,{loading:L,disabled:_}),l&&de(J,{loading:L,disabled:_,readonly:W,value:v}),u&&jt(rn,{children:[a&&de(Te,{}),de(Ae,{children:u})]})]})};D.states=Oi;D.options=Ri;D.className=sn;D.defaultOptions=Nt;D.moduleName=Zt;D.folderName=an;D.ariaSpec={selector:".k-textbox",rules:[{selector:".k-textbox > .k-input-inner",attribute:"role=textbox or nodeName=input",usage:"Describes the role of the component."},{selector:".k-textbox > .k-input-inner",attribute:"label for or aria-label or aria-labelledby (when has accessible name)",usage:"The input requires an accessible name (provided by consuming app)."},{selector:".k-textbox > .k-input-inner",attribute:"aria-invalid=true (when invalid)",usage:"Rendered when the TextBox is in an invalid state."},{selector:".k-textbox > .k-input-inner",attribute:"aria-describedby (when has hint or error)",usage:"Points to the hint or error message for the input."},{selector:".k-textbox.k-disabled > .k-input-inner",attribute:"disabled=disabled or aria-disabled=true",usage:"Rendered when the TextBox is disabled."}]};var Ze=D;import{jsx as Ki}from"react/jsx-runtime";var ln=e=>Ki(Ze,{...e});import{Fragment as Wm,jsx as $m}from"react/jsx-runtime";import{Fragment as jm,jsx as Zm}from"react/jsx-runtime";import{jsx as nu}from"react/jsx-runtime";import{jsx as eo}from"react/jsx-runtime";var _i=D.states,Pi=D.defaultOptions,Hi=D.options,zi=[{name:"prefix",title:"Prefix"},{name:"suffix",title:"Suffix"},{name:"clear-button",title:"`Clear` Button"}],Di=[],Re=e=>{let{modifiers:t,...o}=e,n={};return Object.keys(t||{}).forEach(a=>{switch(a){case"prefix":n.prefix=t?.[a]?eo(b,{icon:"lock"}):void 0;break;case"suffix":n.suffix=t?.[a]?eo(he,{size:o.size,fillMode:"clear",children:"Send"}):void 0;break;case"clear-button":n.showClearButton=t?.[a];break;default:break}}),eo(ln,{value:"Value",style:{width:300},...o,...n})};Re.options=Hi;Re.states=_i;Re.variants=Di;Re.defaultOptions=Pi;Re.modifiers=zi;Re.className=D.className;import{jsx as pe,jsxs as to}from"react/jsx-runtime";var cn="k-actionsheet-titlebar",Bi={},Q=e=>{let{title:t,subtitle:o,actionsStart:n,actionsEnd:a,filter:l,input:d,inputValue:c,inputPlaceholder:u,adaptive:x,titleId:v,children:C,...T}=e;return to("div",{...T,className:r(e.className,cn),children:[to("div",{className:"k-actionsheet-titlebar-group",children:[n&&pe("div",{className:"k-actionsheet-actions",children:n}),!C&&to("div",{className:"k-actionsheet-title",id:v,children:[t&&pe("div",{className:"k-text-center",children:t}),o&&pe("div",{className:"k-actionsheet-subtitle k-text-center",children:o})]}),C&&pe("div",{className:"k-actionsheet-title",id:v,children:C}),a&&pe("div",{className:"k-actionsheet-actions",children:a})]}),(d||l)&&pe("div",{className:"k-actionsheet-titlebar-group k-actionsheet-filter",children:d?pe(D,{value:c,placeholder:u,size:x?"large":"medium","aria-label":t||u||"Input"}):pe(ce,{placeholder:"Filter",size:x?"large":"medium","aria-label":"Filter options"})})]})};Q.className=cn;Q.defaultOptions=Bi;import{jsx as oo,jsxs as Gi}from"react/jsx-runtime";var no="k-actionsheet-view",Fi=[],Ui={},Vi={},Ke=e=>{let{adaptive:t,animated:o,children:n,header:a,footer:l,titleId:d,...c}=e,u=a?.type===Q&&oo(Q,{adaptive:t,titleId:d,...a?.props}),x=l?.type===Oe&&oo(Oe,{...l?.props});return Gi("div",{...c,className:r(e.className,no,{[`${no}-animated`]:o}),children:[u,oo("div",{className:"k-actionsheet-content",children:n}),x]})};Ke.states=Fi;Ke.options=Ui;Ke.className=no;Ke.defaultOptions=Vi;var je="action-sheet",Ct=je;var ao="overlay",dn=ao;import{jsx as qi}from"react/jsx-runtime";var pn="k-overlay",Xi=[],$i={},Wi={},me=e=>{let{...t}=e;return qi("div",{...t,className:r(e.className,pn),children:e.children})};me.states=Xi;me.options=$i;me.className=pn;me.defaultOptions=Wi;me.moduleName=ao;me.folderName=dn;import{jsx as kt,jsxs as Qi}from"react/jsx-runtime";var mn="k-actionsheet",Ji=[],Yi={},et={side:"bottom",fullscreen:!1,adaptive:!1,overlay:!0},R=e=>{let{side:t=et.side,fullscreen:o=et.fullscreen,adaptive:n=et.adaptive,overlay:a=et.overlay,template:l,children:d,header:c,footer:u,id:x,...v}=e,C=x&&!l&&c?`${x}-title`:void 0;return Qi("div",{className:"k-actionsheet-container",children:[a&&kt(me,{}),kt(oe,{animationStyle:{[`${o===!0?"top":t}`]:0,[`${o===!0?"width":null}`]:"100%",[`${o===!0?"height":null}`]:"100%",[`${t==="top"||t==="bottom"?"width":null}`]:"100%",[`${t==="left"||t==="right"?"height":null}`]:"100%"},children:kt("div",{...v,id:x,role:"dialog","aria-modal":a?"true":void 0,"aria-labelledby":C,className:r(e.className,mn,{[`k-actionsheet-${t}`]:o===!1,"k-actionsheet-fullscreen":o===!0,"k-adaptive-actionsheet":n}),children:l||kt(Ke,{header:c,footer:u,adaptive:n,titleId:C,...e,children:d})})})]})};R.states=Ji;R.options=Yi;R.className=mn;R.defaultOptions=et;R.moduleName=je;R.folderName=Ct;R.ariaSpec={selector:".k-actionsheet",rules:[{selector:".k-actionsheet",attribute:"role=dialog",usage:"Announces the dialog role of the component."},{selector:".k-actionsheet",attribute:"aria-labelledby (when has title)",usage:"Associates the title of the action sheet."},{selector:".k-actionsheet",attribute:"aria-hidden=true/false (when hidden)",usage:"Announces the hidden state of the ActionSheet container."},{selector:".k-actionsheet",attribute:"aria-modal=true (when modal)",usage:"Announces that the action sheet is modal."},{selector:".k-actionsheet .k-actionsheet-title",attribute:"id",usage:"Used to associate the title with the action sheet wrapper element."}]};import{jsx as tr}from"react/jsx-runtime";var un="k-actionsheet-container",Zi=[],ji={},er={},_e=e=>{let{children:t,...o}=e;return tr("div",{...o,className:un,children:t})};_e.states=Zi;_e.options=ji;_e.className=un;_e.defaultOptions=er;_e.moduleName=je;_e.folderName=Ct;import{jsx as or}from"react/jsx-runtime";var io=e=>{let{...t}=e;return or("div",{...t,className:r(e.className,"k-list-ul"),children:e.children})};import{Fragment as ar,jsx as tt,jsxs as ro}from"react/jsx-runtime";var so="k-actionsheet-item",nr=[i.hover,i.focus,i.selected,i.disabled],ue=e=>{let{iconName:t,text:o,description:n,hover:a,focus:l,selected:d,disabled:c,...u}=e;return ro("span",{...u,className:r(e.className,so,O(so,{hover:a,focus:l,selected:d,disabled:c})),children:[!e.children&&tt(ar,{children:ro("span",{className:"k-actionsheet-action",children:[t&&tt("span",{className:"k-icon-wrap",children:tt(b,{className:"k-actionsheet-item-icon",icon:t})}),ro("span",{className:"k-actionsheet-item-text",children:[o&&tt("span",{className:"k-actionsheet-item-title",children:o}),n&&tt("span",{className:"k-actionsheet-item-description",children:n})]})]})}),e.children]})};ue.states=nr;ue.className=so;import{jsx as of,jsxs as nf}from"react/jsx-runtime";import{jsx as lf}from"react/jsx-runtime";import{jsx as mf}from"react/jsx-runtime";import{jsx as xf}from"react/jsx-runtime";import{jsx as K,jsxs as lo}from"react/jsx-runtime";var ir=R.options,rr=R.states,hn={...R.defaultOptions,variant:"normal"},sr=[{name:"normal",title:"Normal"},{name:"adaptive",title:"Adaptive"},{name:"fullScreen",title:"Full Screen"}],lr=[{name:"actions",title:"Titlebar Actions",type:"boolean"},{name:"subtitle",title:"Subtitle",type:"boolean"},{name:"footer",title:"Footer",type:"boolean"}],Pe=e=>{let{variant:t,modifiers:o,...n}={...hn,...e},a={},l=lo(io,{children:[K(ue,{text:"Edit Item",description:"Click to edit",iconName:"edit-tools"}),K(ue,{text:"Add to Favorites",iconName:"heart"}),K(ue,{text:"Upload New",iconName:"upload",disabled:!0}),K("hr",{className:"k-hr"}),K(ue,{text:"Cancel",iconName:"cancel"})]}),d="Choose from the items below",c="Select Item";return t==="fullScreen"&&(a.fullScreen=!0),Object.keys(o||{}).forEach(u=>{switch(u){case"actions":a.actionsStart=!!o?.[u],a.actionsEnd=!!o?.[u];break;case"subtitle":a.subtitle=o?.[u]?d:void 0;break;case"footer":a.footer=!!o?.[u];break;default:break}}),t==="adaptive"?K(R,{...n,adaptive:!0,fullscreen:a.fullScreen,header:K(Q,{actionsStart:a.actionsStart?K(N,{icon:"chevron-left",size:"large",fillMode:"flat"}):void 0,actionsEnd:a.actionsEnd?K(N,{icon:"x",size:"large",fillMode:"flat"}):void 0,title:c,subtitle:a.subtitle}),footer:a.footer?lo(Oe,{alignment:"stretched",children:[K(N,{text:"Cancel",size:"large",themeColor:"base"}),K(N,{text:"Apply",size:"large",themeColor:"primary"})]}):void 0,children:l}):K(R,{...n,fullscreen:a.fullScreen,header:K(Q,{actionsStart:a.actionsStart?K(N,{icon:"chevron-left",fillMode:"flat"}):void 0,actionsEnd:a.actionsEnd?K(N,{icon:"x",fillMode:"flat"}):void 0,title:"Select Item",subtitle:a.subtitle}),footer:a.footer?lo(Oe,{alignment:"stretched",children:[K(N,{text:"Apply",themeColor:"primary"}),K(N,{text:"Cancel",themeColor:"base"})]}):void 0,children:l})};Pe.options=ir;Pe.states=rr;Pe.variants=sr;Pe.defaultOptions=hn;Pe.modifiers=lr;Pe.className=R.className;import po from"react";import co from"react";import{jsx as dr}from"react/jsx-runtime";var cr="k-treeview-group",H=e=>{let{children:t,dir:o,level:n=1,role:a="group",...l}=e;return dr("ul",{...l,className:r(e.className,cr),role:a,children:co.Children.map(t,(d,c)=>co.isValidElement(d)?co.cloneElement(d,{dir:o,level:n,key:c}):d)})};var ot="treeview",At=ot;import{jsx as xn}from"react/jsx-runtime";var mo="k-treeview",pr=[],mr={size:[s.undefined,s.small,s.medium,s.large]},ur={},E=e=>{let{size:t,children:o,dir:n,...a}=e;return xn("div",{...a,dir:n,className:r(e.className,mo,k(mo,{size:t})),children:xn(H,{className:"k-treeview-lines",role:"tree",dir:n,children:po.Children.map(o,(l,d)=>po.isValidElement(l)?po.cloneElement(l,{dir:n,key:d}):l)})})};E.states=pr;E.options=mr;E.className=mo;E.defaultOptions=ur;E.moduleName=ot;E.folderName=At;E.ariaSpec={selector:".k-treeview",rules:[{selector:".k-treeview-lines",attribute:"role=tree",usage:"The root list element of the treeview."},{selector:".k-treeview-group:not(.k-treeview-lines)",attribute:"role=group",usage:"The ul element that wraps child nodes."},{selector:".k-treeview-item",attribute:"role=treeitem",usage:"The li element rendered for a tree node."},{selector:".k-treeview-item",attribute:"aria-expanded=true/false (when present)",usage:"Announces the expanded state of the node."},{selector:".k-treeview-item",attribute:"aria-checked=true/false (when present)",usage:"Announces the checked state of the node when checkboxes are enabled."},{selector:".k-treeview-item",attribute:"aria-selected=true (when present)",usage:"Announces the selected state of the node when selection is enabled."},{selector:".k-treeview-item .k-checkbox",attribute:"aria-label",usage:"The checkbox input must have an accessible name matching the treeview item text."},{selector:".k-treeview-item .k-checkbox",attribute:"tabindex=-1",usage:"The checkbox input must not be in the tab order. Keyboard interaction is handled by the treeitem."}]};import fo from"react";var be="checkbox",He=be;import{jsx as bn}from"react/jsx-runtime";var Tt="k-checkbox",fr=[i.hover,i.focus,i.valid,i.invalid,i.required,i.disabled,i.checked,i.indeterminate],hr={size:[s.undefined,s.small,s.medium,s.large],rounded:[p.undefined,p.none,p.small,p.medium,p.large,p.full]},xr={},U=e=>{let{id:t,checked:o,indeterminate:n,hover:a,focus:l,disabled:d,invalid:c,valid:u,required:x,size:v,rounded:C,wrapperRole:T,...y}=e;return bn("span",{className:"k-checkbox-wrap",role:T,children:bn("input",{...y,id:t,type:"checkbox",defaultChecked:o,required:x,disabled:d||void 0,"aria-invalid":c?"true":void 0,className:r(e.className,Tt,k(Tt,{size:v,rounded:C}),O(Tt,{hover:a,focus:l,disabled:d,invalid:c,valid:u,indeterminate:n,checked:o}))})})};U.states=fr;U.options=hr;U.className=Tt;U.defaultOptions=xr;U.moduleName=be;U.folderName=He;U.ariaSpec={selector:".k-checkbox",rules:[{selector:".k-checkbox",attribute:"role=checkbox or type=checkbox",usage:"Announces the checkbox role of the element."},{selector:".k-checkbox",attribute:"label for or aria-label or aria-labelledby (when has accessible name)",usage:"The input requires an accessible name to which it will be assigned."},{selector:".k-checkbox",attribute:"aria-checked=true/false/mixed or checked",usage:"For native checkboxes the checked state is handled by the browser. aria-checked is used for custom implementations."},{selector:".k-checkbox",attribute:"aria-describedby (when has hint or error)",usage:"Points to the hint or error message for the checkbox."},{selector:".k-checkbox",attribute:"disabled or aria-disabled=true (when disabled)",usage:"For native checkboxes use the HTML disabled attribute. aria-disabled for custom implementations."},{selector:".k-invalid, .ng-invalid",attribute:"aria-invalid=true (when invalid)",usage:"Rendered only when the CheckBox is in a form and announces the invalid state."}]};var Z=U;import{jsx as Nr}from"react/jsx-runtime";var vn="k-checkbox-list",br=[],vr={},Nn={layout:"vertical"},B=e=>{let{layout:t=Nn.layout,...o}=e;return Nr("ul",{...o,className:r(e.className,vn,{[`k-list-${t}`]:t}),children:e.children})};B.states=br;B.options=vr;B.className=vn;B.defaultOptions=Nn;B.moduleName=be;B.folderName=He;import{jsx as Tr}from"react/jsx-runtime";var Cn="k-checkbox-list-item",Cr=[],kr={},Ar={},F=e=>{let{...t}=e;return Tr("li",{...t,className:r(e.className,Cn),children:e.children})};F.states=Cr;F.options=kr;F.className=Cn;F.defaultOptions=Ar;F.moduleName=be;F.folderName=He;import{Fragment as Ir,jsx as kn,jsxs as Er}from"react/jsx-runtime";var se=({children:e="Label",id:t="cb-label-after",...o})=>Er(Ir,{children:[kn(Z,{id:t,...o}),kn("label",{className:"k-checkbox-label",htmlFor:t,children:e})]});import{Fragment as xh,jsx as hh,jsxs as bh}from"react/jsx-runtime";import{Fragment as Ah,jsx as kh,jsxs as Th}from"react/jsx-runtime";import{Fragment as gh,jsx as yh,jsxs as Mh}from"react/jsx-runtime";import{jsx as Rh}from"react/jsx-runtime";import{jsx as Hh}from"react/jsx-runtime";import{jsx as Fh}from"react/jsx-runtime";import{jsx as X,jsxs as An}from"react/jsx-runtime";var Sr=B.options,yr=B.states,gr={...B.defaultOptions,variant:"vertical"},Mr=[{name:"vertical",title:"Vertical"},{name:"horizontal",title:"Horizontal"}],wr=[],ze=e=>{let{variant:t,...o}=e;return t==="horizontal"?An(B,{layout:"horizontal",...o,children:[X(F,{children:X(se,{id:q("cb"),defaultChecked:!0,children:"Label"})}),X(F,{children:X(se,{id:q("cb"),children:"Label"})}),X(F,{children:X(se,{id:q("cb"),children:"Label"})})]}):An(B,{...o,children:[X(F,{children:X(se,{id:q("cb"),defaultChecked:!0,children:"Label"})}),X(F,{children:X(se,{id:q("cb"),children:"Label"})}),X(F,{children:X(se,{id:q("cb"),children:"Label"})})]})};ze.options=Sr;ze.states=yr;ze.variants=Mr;ze.defaultOptions=gr;ze.modifiers=wr;ze.className=B.className;import{jsx as Pr}from"react/jsx-runtime";var Lr=Z.options,Or=Z.states,Rr=Z.defaultOptions,Kr=[],_r=[],De=e=>Pr(se,{id:q("checkbox"),...e,defaultChecked:!0,children:"Label"});De.options=Lr;De.states=Or;De.variants=Kr;De.defaultOptions=Rr;De.modifiers=_r;De.className=Z.className;import{jsx as Tn,jsxs as Dr}from"react/jsx-runtime";var uo="k-treeview-leaf",Hr=[i.hover,i.focus,i.selected],zr={},It=e=>{let{text:t,showIcon:o,icon:n,hover:a,focus:l,selected:d,...c}=e;return Dr("span",{...c,className:r(e.className,uo,O(uo,{hover:a,focus:l,selected:d})),children:[o&&Tn(b,{icon:n}),Tn("span",{className:"k-treeview-leaf-text",children:t})]})};It.states=Hr;It.options=zr;It.className=uo;var In=It;import{jsx as nt,jsxs as En}from"react/jsx-runtime";var Sn="k-treeview-item",Br=[i.hover,i.focus,i.selected,i.disabled],Fr={},Ur={},f=e=>{let{leafClassName:t,children:o,hasChildren:n,expanded:a,loading:l,text:d,showIcon:c,icon:u,showCheckbox:x,checked:v,hover:C,focus:T,selected:y,disabled:g,dir:S,level:I=1,ariaSelected:L,..._}=e,W=n||o||l;return En("li",{..._,className:r(e.className,Sn),style:{"--kendo-treeview-level":I},role:"treeitem","aria-expanded":W?a?"true":"false":void 0,"aria-checked":x?v?"true":"false":void 0,"aria-selected":L?"true":void 0,"aria-disabled":g?"true":void 0,children:[En("span",{className:r("k-treeview-item-content",O("k-treeview-item-content",{hover:C,focus:T,selected:y,disabled:g})),children:[W&&nt("span",{className:r("k-treeview-toggle",O("k-treeview-toggle",{disabled:g})),children:l?nt("span",{className:"k-icon k-i-loading"}):nt(b,{icon:a?"chevron-down":S==="rtl"?"chevron-left":"chevron-right"})}),x&&nt(U,{checked:v,disabled:g,"aria-label":d,tabIndex:-1}),nt(In,{className:t,text:d,showIcon:c,icon:u})]}),a&&W&&fo.Children.map(o,(ne,fe)=>fo.isValidElement(ne)?fo.cloneElement(ne,{dir:S,level:I+1,key:fe}):ne)]})};f.states=Br;f.options=Fr;f.className=Sn;f.defaultOptions=Ur;f.moduleName=ot;f.folderName=At;import{jsx as Mx}from"react/jsx-runtime";import{jsx as Rx,jsxs as Kx}from"react/jsx-runtime";import{jsx as zx,jsxs as Dx}from"react/jsx-runtime";import{jsx as Vx,jsxs as Gx}from"react/jsx-runtime";import{jsx as qx,jsxs as Jx}from"react/jsx-runtime";import{jsx as jx,jsxs as eb}from"react/jsx-runtime";import{jsx as ve,jsxs as ho}from"react/jsx-runtime";var Vr=E.options,Gr=E.states,Xr=E.defaultOptions,$r=[{name:"checkboxes",title:"Show `Checkbox`",default:!1}],Wr=[],Be=e=>{let{modifiers:t,...o}=e,n={};return Object.keys(t||{}).forEach(a=>{a==="checkboxes"&&(n.showCheckbox=t?.[a])}),ho(E,{...o,children:[ve(f,{text:"Furniture",expanded:!0,...n,children:ho(H,{children:[ve(f,{text:"Tables & Chairs",...n}),ve(f,{text:"Sofas",...n}),ve(f,{text:"Occasional Furniture",...n})]})}),ho(f,{text:"Decor",expanded:!1,...n,children:[ve(f,{text:"Bed Linen",...n}),ve(f,{text:"Curtains & Blinds",...n}),ve(f,{text:"Carpets",...n})]})]})};Be.options=Vr;Be.states=Gr;Be.variants=Wr;Be.defaultOptions=Xr;Be.modifiers=$r;Be.className=E.className;var yn="dropdown-tree",gn="dropdowntree";import{Fragment as Mn,jsx as A,jsxs as at}from"react/jsx-runtime";var wn="k-multiselecttree",qr=[i.hover,i.focus,i.valid,i.invalid,i.required,i.disabled,i.loading,i.readonly],Jr={size:[s.undefined,s.small,s.medium,s.large],rounded:[p.undefined,p.none,p.small,p.medium,p.large,p.full],fillMode:[h.undefined,h.solid,h.flat,h.outline]},Yr={},V=e=>{let{size:t,rounded:o,fillMode:n,prefix:a,suffix:l,placeholder:d,tags:c,popup:u,showArrowButton:x,hover:v,focus:C,valid:T,invalid:y,required:g,loading:S,disabled:I,readonly:L,opened:_,dir:W,adaptive:ne,adaptiveSettings:fe,adaptiveTitle:Fe,adaptiveSubtitle:Ue,adaptiveFilter:Rn,id:xo,treeviewId:Kn,"aria-label":_n,...Pn}=e,bo=xo?`${xo}-taglist`:void 0;return at(Mn,{children:[at(M,{...Pn,dir:W,size:t,rounded:o,fillMode:n,hover:v,focus:C,valid:T,invalid:y,required:g,loading:S,disabled:I,readonly:L,className:r(e.className,wn),children:[A(ke,{children:a}),A(w,{size:t,className:"k-input-values",id:bo,children:A(Mn,{children:c})}),A("span",{className:"k-input-inner",role:"combobox","aria-haspopup":"tree","aria-expanded":_?"true":"false","aria-controls":_?Kn:void 0,"aria-autocomplete":"list","aria-describedby":c?bo:void 0,"aria-disabled":I?"true":void 0,"aria-label":_n,tabIndex:0,children:!c&&A("span",{className:"k-input-value-text",children:d})}),A(Y,{valid:T,invalid:y,loading:S,disabled:I}),A(ee,{loading:S,disabled:I}),A(J,{loading:S,disabled:I,readonly:L,value:c?"value":""}),A(Ae,{children:l}),x&&A(N,{className:"k-input-button",icon:"chevron-down",size:t,fillMode:n,"aria-label":"Toggle dropdown",tabIndex:-1})]}),_&&u&&A(re,{className:"k-multiselecttree-popup",dir:W,containerRole:"region",containerAriaLabel:"MultiSelectTree options",children:u}),ne&&A(R,{adaptive:!0,...fe,header:A(Q,{actionsEnd:A(N,{icon:"check",themeColor:"primary",size:"large",fillMode:"flat","aria-label":"Apply selection"}),filter:Rn,inputPlaceholder:d,title:Fe,subtitle:Ue}),children:at(E,{size:"large",children:[A(f,{text:"Root 1"}),A(f,{text:"Root 2",expanded:!0,children:at(H,{children:[A(f,{text:"Child 2.1"}),A(f,{text:"Child 2.2",children:A(H,{children:A(f,{text:"Child 2.2.1"})})}),A(f,{text:"Child 2.3"}),A(f,{leafClassName:"k-treeview-load-more-button",text:"Load more ..."})]})}),A(f,{text:"Root 3",children:at(H,{children:[A(f,{text:"Child 3.1"}),A(f,{text:"Child 3.2"}),A(f,{text:"Child 3.3"})]})})]})})]})};V.states=qr;V.options=Jr;V.className=wn;V.defaultOptions=Yr;V.moduleName=yn;V.folderName=gn;V.ariaSpec={rules:[{selector:".k-multiselecttree .k-input-inner",attribute:"role=combobox",usage:"Announces the multiselect tree input."},{selector:".k-multiselecttree .k-input-inner",attribute:"aria-haspopup=tree",usage:"Indicates the presence of a tree popup."},{selector:".k-multiselecttree .k-input-inner",attribute:"aria-expanded",usage:"Announces the popup visibility."},{selector:".k-multiselecttree .k-input-inner",attribute:"aria-label",usage:"Accessible name for the multiselect tree."},{selector:".k-multiselecttree .k-input-inner",attribute:"aria-autocomplete=list",usage:"Indicates list filtering capability when filtering is enabled."},{selector:".k-multiselecttree .k-input-inner",attribute:"aria-describedby",usage:"Points to the taglist element that contains the selected items."},{selector:".k-multiselecttree .k-input-inner",attribute:"tabindex=0",usage:"The element must be focusable."},{selector:".k-multiselecttree.k-disabled .k-input-inner",attribute:"aria-disabled=true",usage:"Rendered when the multiselect tree is disabled."},{selector:".k-multiselecttree .k-chip-list",attribute:"role=listbox",usage:"The taglist has listbox role for selected items."},{selector:".k-multiselecttree .k-chip-list",attribute:"aria-label or aria-labelledby",usage:"The taglist needs an accessible name."},{selector:".k-multiselecttree .k-chip-list",attribute:"aria-orientation=horizontal",usage:"Specifies horizontal orientation of the taglist."},{selector:".k-multiselecttree .k-chip-list .k-chip",attribute:"role=option",usage:"Each tag chip is an option within the taglist listbox."},{selector:".k-multiselecttree .k-chip-list .k-chip",attribute:"aria-selected=true",usage:"Tags represent selected items and must have aria-selected=true."}]};var Ln=V;import{jsx as Qr}from"react/jsx-runtime";var On=e=>Qr(Ln,{id:q("mst"),"aria-label":"Select items",...e});import{Fragment as ns,jsx as $,jsxs as it}from"react/jsx-runtime";var Zr=V.options,jr=[],es=V.states,ts=V.defaultOptions,os=[{name:"opened",title:"Opened"}],Ne=e=>{let{modifiers:t,...o}=e,n=it(ns,{children:[it("div",{className:"k-check-all",children:[$(U,{}),$("span",{className:"k-checkbox-label",children:"Check all"})]}),it(E,{dir:e.dir,children:[$(f,{text:"Furniture",showCheckbox:!0,children:it(H,{children:[$(f,{text:"Child 1",showCheckbox:!0}),$(f,{text:"Child 2",showCheckbox:!0}),$(f,{text:"Child 3",showCheckbox:!0})]})}),$(f,{text:"Decor",showCheckbox:!0,children:it(H,{children:[$(f,{text:"Child 1",showCheckbox:!0}),$(f,{text:"Child 2",showCheckbox:!0}),$(f,{text:"Child 3",showCheckbox:!0})]})})]})]}),a={};return Object.keys(t||{}).forEach(l=>{l==="opened"&&(a.opened=!!t?.[l],a.popup=t?.[l]?n:void 0)}),$(On,{style:{width:"300px"},...o,...a,tags:$(P,{size:o.size,text:"Tables & Chairs"})})};Ne.options=Zr;Ne.states=es;Ne.variants=jr;Ne.defaultOptions=ts;Ne.modifiers=os;Ne.className=V.className;var Ub=Ne;export{Ne as MultiselecttreeDemo,Ub as default};