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

A collection of HTML helpers used for developing Kendo UI themes

var l=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?l(...e):typeof e=="object"?Object.keys(e).map((n,i)=>e[i]||e[n]&&n||null).filter(n=>n!==null).join(" "):e).filter(e=>!!e).join(" ");var E=(t,e)=>l({[`${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"}),G=(t,e)=>{let{valid:n,invalid:i,hover:r,focus:p,checked:c,active:s,selected:C,disabled:b,indeterminate:h,loading:O,empty:v,readonly:T,highlighted:W,...w}=e;return l({"k-valid":n,"k-invalid":i,"k-hover":r,"k-focus":p,"k-checked":c,"k-active":s,"k-selected":C,"k-disabled":b,"k-indeterminate":h&&!c,"k-loading":O,"k-empty":v,"k-readonly":T,"k-highlighted":W},Object.keys(w).reduce((R,_)=>(_.startsWith("k-")?R[_]=w[_]:R[`k-${_}`]=w[_],R),{}))};var o={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},M={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"};var g={undefined:void 0,outline:"outline",solid:"solid",duotone:"duotone"},a={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",inverse:"inverse"},u={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 X={};function N(t){return X[t]=(X[t]||0)+1,`k-${t}-${X[t]}`}var A="checkbox",z=A;import{jsx as te}from"react/jsx-runtime";var D="k-checkbox",he=[u.hover,u.focus,u.valid,u.invalid,u.required,u.disabled,u.checked,u.indeterminate],be={size:[o.undefined,o.small,o.medium,o.large],rounded:[M.undefined,M.none,M.small,M.medium,M.large,M.full]},xe={},x=t=>{let{id:e,checked:n,indeterminate:i,hover:r,focus:p,disabled:c,invalid:s,valid:C,required:b,size:h,rounded:O,wrapperRole:v,...T}=t;return te("span",{className:"k-checkbox-wrap",role:v,children:te("input",{...T,id:e,type:"checkbox",defaultChecked:n,required:b,disabled:c||void 0,"aria-invalid":s?"true":void 0,className:l(t.className,D,E(D,{size:h,rounded:O}),G(D,{hover:r,focus:p,disabled:c,invalid:s,valid:C,indeterminate:i,checked:n}))})})};x.states=he;x.options=be;x.className=D;x.defaultOptions=xe;x.moduleName=A;x.folderName=z;x.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 k=x;import{jsx as Ce}from"react/jsx-runtime";var oe="k-checkbox-list",fe=[],ke={},ne={layout:"vertical"},d=t=>{let{layout:e=ne.layout,...n}=t;return Ce("ul",{...n,className:l(t.className,oe,{[`k-list-${e}`]:e}),children:t.children})};d.states=fe;d.options=ke;d.className=oe;d.defaultOptions=ne;d.moduleName=A;d.folderName=z;import{jsx as ye}from"react/jsx-runtime";var ae="k-checkbox-list-item",ge=[],ve={},Ne={},m=t=>{let{...e}=t;return ye("li",{...e,className:l(t.className,ae),children:t.children})};m.states=ge;m.options=ve;m.className=ae;m.defaultOptions=Ne;m.moduleName=A;m.folderName=z;import{Fragment as Le,jsx as ie,jsxs as Ie}from"react/jsx-runtime";var y=({children:t="Label",id:e="cb-label-after",...n})=>Ie(Le,{children:[ie(k,{id:e,...n}),ie("label",{className:"k-checkbox-label",htmlFor:e,children:t})]});import{Fragment as At,jsx as Mt,jsxs as St}from"react/jsx-runtime";import{Fragment as Kt,jsx as Ht,jsxs as wt}from"react/jsx-runtime";import{Fragment as Gt,jsx as Pt,jsxs as Dt}from"react/jsx-runtime";import{jsx as Wt}from"react/jsx-runtime";import{jsx as Qt}from"react/jsx-runtime";import{jsx as eo}from"react/jsx-runtime";import{jsx as f,jsxs as re}from"react/jsx-runtime";var Oe=d.options,Ee=d.states,Me={...d.defaultOptions,variant:"vertical"},Ae=[{name:"vertical",title:"Vertical"},{name:"horizontal",title:"Horizontal"}],Se=[],H=t=>{let{variant:e,...n}=t;return e==="horizontal"?re(d,{layout:"horizontal",...n,children:[f(m,{children:f(y,{id:N("cb"),defaultChecked:!0,children:"Label"})}),f(m,{children:f(y,{id:N("cb"),children:"Label"})}),f(m,{children:f(y,{id:N("cb"),children:"Label"})})]}):re(d,{...n,children:[f(m,{children:f(y,{id:N("cb"),defaultChecked:!0,children:"Label"})}),f(m,{children:f(y,{id:N("cb"),children:"Label"})}),f(m,{children:f(y,{id:N("cb"),children:"Label"})})]})};H.options=Oe;H.states=Ee;H.variants=Ae;H.defaultOptions=Me;H.modifiers=Se;H.className=d.className;import{jsx as we}from"react/jsx-runtime";var Te=k.options,_e=k.states,ze=k.defaultOptions,He=[],Ke=[],K=t=>we(y,{id:N("checkbox"),...t,defaultChecked:!0,children:"Label"});K.options=Te;K.states=_e;K.variants=He;K.defaultOptions=ze;K.modifiers=Ke;K.className=k.className;import{Fragment as Pe,jsx as se}from"react/jsx-runtime";var q="k-font-icon",Re=[],Be={size:[o.undefined,o.xsmall,o.small,o.medium,o.large,o.xlarge,o.xxlarge,o.xxxlarge],themeColor:[a.undefined,a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info]},$e={},B=t=>{let{size:e,themeColor:n,icon:i,rotate:r,flip:p,...c}=t;return i?se("span",{...c,className:l(t.className,q,E(q,{size:e}),{[`k-i-${i}`]:i,[`k-color-${n}`]:n,[`k-rotate-${r}`]:r,"k-flip-h":p==="h"||p==="both","k-flip-v":p==="v"||p==="both"}),"aria-hidden":"true"}):se(Pe,{})};B.states=Re;B.options=Be;B.className=q;B.defaultOptions=$e;var le=B;import{Fragment as Fe,jsx as F}from"react/jsx-runtime";var J="k-svg-icon",Ge=[],De={size:[o.undefined,o.xsmall,o.small,o.medium,o.large,o.xlarge,o.xxlarge,o.xxxlarge],themeColor:[a.undefined,a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info],variant:[g.outline,g.solid,g.duotone]},Q={viewBox:"0 0 24 24",variant:g.outline},$=t=>{let{size:e,themeColor:n,rotate:i,flip:r,viewBox:p=Q.viewBox,variant:c=Q.variant,icon:s,...C}=t;if(!s)return F(Fe,{});if(s==="none")return F("span",{...C,className:l(t.className,J,E("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let b=typeof s=="object"&&s.name&&s.name,h=typeof s=="object"?c&&s.variants?.[c]||s.variants?.outline||s.content:void 0;return F("span",{...C,className:l(t.className,J,E("k-icon",{size:e}),{[`k-svg-i-${b}`]:b,[`k-color-${n}`]:n,[`k-rotate-${i}`]:i,"k-flip-h":r==="h"||r==="both","k-flip-v":r==="v"||r==="both"}),"aria-hidden":"true",children:F("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof s=="object"?s.viewBox:p,dangerouslySetInnerHTML:h!==void 0?{__html:h}:void 0,children:s?void 0:t.children})})};$.states=Ge;$.options=De;$.className=J;$.defaultOptions=Q;var Y=$;import*as Z from"@progress/kendo-svg-icons";var ce="icon",de="icons";import{useContext as Ve}from"react";import{createContext as Ue}from"react";var me=Ue({iconsType:"svg"});import{Fragment as pe,jsx as P}from"react/jsx-runtime";var U="k-icon",We=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),Xe=[],qe={size:[o.undefined,o.xsmall,o.small,o.medium,o.large,o.xlarge,o.xxlarge,o.xxxlarge],themeColor:[a.undefined,a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info],variant:[g.outline,g.solid,g.duotone]},V={viewBox:"0 0 24 24",type:"svg",variant:g.outline},L=t=>{let{iconsType:e}=Ve(me),{size:n,themeColor:i,icon:r,type:p=e||V.type,rotate:c,flip:s,viewBox:C=V.viewBox,variant:b=V.variant,...h}=t;if(!r)return P(pe,{});if((e||p)==="svg"){if(r==="none")return P(Y,{...h,className:l(t.className,U),icon:r,size:n,variant:b});let v=Z[r]?r:We(`${r}-icon`);return Z[v]?P(Y,{...h,className:l(t.className,U),icon:Z[v],size:n,themeColor:i,rotate:c,flip:s,viewBox:C,variant:b}):P(pe,{})}return P(le,{...h,className:l(t.className,U),icon:r,size:n,themeColor:i,rotate:c,flip:s})};L.states=Xe;L.options=qe;L.defaultOptions=V;L.className=U;L.moduleName=ce;L.folderName=de;L.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 j="list",ue=j;import{jsx as S,jsxs as Ze}from"react/jsx-runtime";var ee="k-list-item",Je=[u.hover,u.focus,u.selected,u.disabled],Qe={},Ye={},I=t=>{let{text:e,groupLabel:n,group:i,iconName:r,iconClassName:p,showCheckbox:c,checked:s,hover:C,focus:b,selected:h,disabled:O,actions:v,description:T,id:W,...w}=t,R=e||t.children;return Ze("li",{...w,id:W,role:i?"presentation":"option",tabIndex:i?void 0:b?0:-1,"aria-selected":!i&&h?"true":i?void 0:"false","aria-disabled":!i&&O?"true":void 0,className:l(t.className,i?"k-list-group-item":ee,G(ee,{hover:C,focus:b,disabled:O,selected:h})),children:[c&&S(x,{checked:s}),r&&S("span",{className:"k-list-item-icon-wrapper",children:S(L,{icon:r,className:l("k-list-item-icon",p)})}),S("span",{className:"k-list-item-text",children:R}),v&&S("div",{className:"k-list-item-actions",children:v}),T&&S("span",{className:"k-list-item-description",children:T}),n&&n!==""&&S("div",{className:"k-list-item-group-label",children:n})]})};I.states=Je;I.options=Qe;I.className=ee;I.defaultOptions=Ye;I.moduleName=j;I.folderName=ue;I.ariaSpec={selector:".k-list-item",rules:[{selector:".k-list-item",attribute:"role=option",usage:"Each list item is an option in the listbox."},{selector:".k-list-item",attribute:"id",usage:"ID for aria-activedescendant reference."},{selector:".k-list-item",attribute:"aria-selected (when selectable)",usage:"Indicates the selected state of the option."},{selector:".k-list-group-item",attribute:"role=presentation",usage:"Group headers are presentational, not selectable options."},{selector:".k-list-item-icon",attribute:"aria-hidden=true",usage:"Decorative icons are hidden from assistive technology."}]};var tn=I;export{ee as LISTITEM_CLASSNAME,I as ListItem,tn as default};