@progress/kendo-themes-html/dist/esm/list/templates/list-grouping-angular.mjs

A collection of HTML helpers used for developing Kendo UI themes

var i=(...e)=>e.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?i(...t):typeof t=="object"?Object.keys(t).map((o,r)=>t[r]||t[o]&&o||null).filter(o=>o!==null).join(" "):t).filter(t=>!!t).join(" ");var k=(e,t)=>i({[`${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.fillMode}-${t.themeColor}`]:t.fillMode&&t.themeColor},{[`${e}-${t.themeColor}`]:t.themeColor&&t.fillMode===void 0},{"k-rounded-sm":t.rounded==="small","k-rounded-md":t.rounded==="medium","k-rounded-lg":t.rounded==="large","k-rounded-full":t.rounded==="full"}),v=(e,t)=>i({"k-valid":t.valid,"k-invalid":t.invalid,"k-hover":t.hover,"k-focus":t.focus,"k-checked":t.checked,"k-active":t.active,"k-selected":t.selected,"k-disabled":t.disabled,"k-indeterminate":t.indeterminate&&!t.checked,"k-loading":t.loading,"k-empty":t.empty,"k-readonly":t.readonly,"k-highlighted":t.highlighted});var s={xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},S={small:"small",medium:"medium",large:"large",full:"full"};var n={inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",dark:"dark",light:"light",inverse:"inverse"},m={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"};import{jsx as Ct}from"react/jsx-runtime";var yt="k-no-data",E=e=>Ct("span",{className:i(yt,e.className),children:e.children});import{jsx as z,jsxs as it}from"react/jsx-runtime";var X="k-list",Nt=[],It={size:[s.small,s.medium,s.large]},nt={size:s.medium},y=e=>{let{size:t=nt.size,virtualization:o,children:r,optionLabel:p,customValue:c,screenReaders:a,...f}=e,u,d,g,h,L=[];return r?r.map((b,vt)=>{b.type===x?(b.props.root===!0?(u=b.props.label,b.props.children.map((_,G)=>{L.push(z(l,{..._.props},`optChild-${G}-${new Date().getTime()}`))})):b.props.children.forEach((_,G)=>{let st="";G===0&&(st=b.props.label),L.push(z(l,{className:G===0?"k-first":"",..._.props,groupLabel:st},`groupLabel-${G}-${new Date().getTime()}`))}),d=z(x,{label:u,virtualization:o,children:L})):b.type===l&&(L.push(z(l,{...b.props},`${b.type}-${vt}`)),g=z(A,{virtualization:o,children:L}),a&&(h=it(E,{className:"k-sr-only",children:[L.length," items found."]})))}):h=z(E,{children:"No data found."}),it("div",{...f,className:i(e.className,X,k(X,{size:t}),{"k-virtual-list":o}),children:[p,c,d,g,h]})};y.states=Nt;y.options=It;y.className=X;y.defaultOptions=nt;import{jsx as I,jsxs as At}from"react/jsx-runtime";var J="k-list",St=[],zt={size:[s.small,s.medium,s.large]},rt={size:s.medium},C=e=>{let{size:t=rt.size,virtualization:o,children:r,...p}=e,c,a,f,u=[];return r?r.map((d,g)=>{d.type===x?(d.props.root===!0?(c=d.props.label,d.props.children.map((h,L)=>{u.push(I(l,{...h.props},`optChild-${L}-${new Date().getTime()}`))})):(u.push(I(at,{...d.props,children:d.props.label},`listChild-${g}`)),d.props.children.map((h,L)=>{u.push(I(l,{...h.props},`fwOptChild-${L}-${new Date().getTime()}`))})),a=I(x,{label:c,virtualization:o,children:u})):d.type===l&&(u.push(I(l,{...d.props},`${d.type}-${g}`)),f=I(A,{virtualization:o,children:u}))}):f=I(E,{children:"No data found."}),At("div",{...p,className:i(e.className,J,k(J,{size:t}),{"k-virtual-list":o}),children:[a,f]})};C.states=St;C.options=zt;C.className=J;C.defaultOptions=rt;import{jsx as lt}from"react/jsx-runtime";var w="k-checkbox",Mt=[m.hover,m.focus,m.valid,m.invalid,m.required,m.disabled,m.checked,m.indeterminate],Ot={size:[s.small,s.medium,s.large],rounded:[S.small,S.medium,S.large,S.full]},F={size:s.medium,rounded:S.medium},N=e=>{let{id:t,checked:o,indeterminate:r,hover:p,focus:c,disabled:a,invalid:f,valid:u,required:d,size:g=F.size,rounded:h=F.rounded,...L}=e;return lt("span",{className:"k-checkbox-wrap",children:lt("input",{...L,id:t,type:"checkbox",defaultChecked:o,required:d,className:i(e.className,w,k(w,{size:g,rounded:h}),v(w,{hover:p,focus:c,disabled:a,invalid:f,valid:u,indeterminate:r,checked:o}))})})};N.states=Mt;N.options=Ot;N.className=w;N.defaultOptions=F;import{jsx as Et}from"react/jsx-runtime";var mt="k-checkbox-list",Tt=[],Gt={},ct={layout:"vertical"},M=e=>{let{layout:t=ct.layout,...o}=e;return Et("ul",{...o,className:i(e.className,mt,{[`k-list-${t}`]:t}),children:e.children})};M.states=Tt;M.options=Gt;M.className=mt;M.defaultOptions=ct;import{jsx as Rt}from"react/jsx-runtime";var pt="k-checkbox-list-item",Kt=[],Ht={},$t={},O=e=>{let{...t}=e;return Rt("li",{...t,className:i(e.className,pt),children:e.children})};O.states=Kt;O.options=Ht;O.className=pt;O.defaultOptions=$t;import{Fragment as Ue,jsx as Fe,jsxs as We}from"react/jsx-runtime";import{Fragment as je,jsx as Ze,jsxs as to}from"react/jsx-runtime";import{Fragment as no,jsx as io,jsxs as ro}from"react/jsx-runtime";import{Fragment as po,jsx as co,jsxs as uo}from"react/jsx-runtime";import{jsx as ho}from"react/jsx-runtime";import{jsx as vo}from"react/jsx-runtime";import{Fragment as Dt,jsx as ut}from"react/jsx-runtime";var W="k-icon k-font-icon",wt=[],Pt={size:[s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info,n.light,n.dark]},Bt={},K=e=>{let{size:t,themeColor:o,icon:r,rotate:p,flip:c,...a}=e;return r?ut("span",{...a,className:i(e.className,W,k(W,{size:t}),{[`k-i-${r}`]:r,[`k-color-${o}`]:o,[`k-rotate-${p}`]:p,"k-flip-h":c==="h"||c==="both","k-flip-v":c==="v"||c==="both"})}):ut(Dt,{})};K.states=wt;K.options=Pt;K.className=W;K.defaultOptions=Bt;var dt=K;import{Fragment as Xt,jsx as P}from"react/jsx-runtime";var q="k-icon k-svg-icon",Vt=[],_t={size:[s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info,n.light,n.dark]},ft={viewBox:"0 0 24 24"},H=e=>{let{size:t,themeColor:o,rotate:r,flip:p,viewBox:c=ft.viewBox,icon:a,...f}=e;if(!a)return P(Xt,{});a==="none"&&{...f,className:i(e.className,q,"k-none")};let u=typeof a=="object"&&a.name&&a.name;return P("span",{...f,className:i(e.className,q,k("k-icon",{size:t}),{[`k-svg-i-${u}`]:u,[`k-color-${o}`]:o,[`k-rotate-${r}`]:r,"k-flip-h":p==="h"||p==="both","k-flip-v":p==="v"||p==="both"}),children:P("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof a=="object"?a.viewBox:c,dangerouslySetInnerHTML:typeof a=="object"?{__html:a.content}:void 0,children:a?void 0:e.children})})};H.states=Vt;H.options=_t;H.className=q;H.defaultOptions=ft;var Q=H;import*as Lt from"@progress/kendo-svg-icons";import{Fragment as xt,jsx as $}from"react/jsx-runtime";var Jt=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),Ft=[],Ut={size:[s.xsmall,s.small,s.medium,s.large,s.xlarge,s.xxlarge,s.xxxlarge],themeColor:[n.base,n.primary,n.secondary,n.tertiary,n.success,n.warning,n.error,n.info,n.light,n.dark]},Y={viewBox:"0 0 24 24",type:"svg"},R=e=>{let{size:t,themeColor:o,icon:r,type:p=Y.type,rotate:c,flip:a,viewBox:f=Y.viewBox,...u}=e;if(!r)return $(xt,{});if(p==="svg"){if(r==="none")return $(Q,{...u,icon:r,size:t});let d=Jt(`${r}-icon`);return Lt[d]?$(Q,{...u,icon:Lt[d],size:t,themeColor:o,rotate:c,flip:a,viewBox:f}):$(xt,{})}return $(dt,{...u,icon:r,size:t,themeColor:o,rotate:c,flip:a})};R.states=Ft;R.options=Ut;R.defaultOptions=Y;import{jsx as B,jsxs as Yt}from"react/jsx-runtime";var Z="k-list-item",Wt=[m.hover,m.focus,m.selected,m.disabled],qt={},Qt={},l=e=>{let{text:t,groupLabel:o,group:r,showIcon:p,iconName:c,showCheckbox:a,checked:f,hover:u,focus:d,selected:g,disabled:h,...L}=e,b=t||e.children;return Yt("li",{...L,className:i(e.className,r?"k-list-group-item":Z,v(Z,{hover:u,focus:d,disabled:h,selected:g})),children:[a&&B(N,{checked:f}),p&&B(R,{icon:c}),B("span",{className:"k-list-item-text",children:b}),o&&o!==""&&B("div",{className:"k-list-item-group-label",children:o})]})};l.states=Wt;l.options=qt;l.className=Z;l.defaultOptions=Qt;import{jsx as j,jsxs as jt}from"react/jsx-runtime";var Zt="k-list-content",A=e=>{let{virtualization:t,...o}=e;return jt("div",{...o,className:i(Zt,e.className),children:[j("ul",{className:i("k-list-ul"),children:e.children}),t&&j("div",{className:"k-height-container",children:j("div",{})})]})};import{jsx as ht}from"react/jsx-runtime";var te="k-list-group-sticky-header",bt=e=>ht("div",{className:i(te,e.className),children:ht("div",{className:"k-list-header-text",children:e.children})});import{Fragment as ee,jsx as kt,jsxs as oe}from"react/jsx-runtime";var x=e=>{let{virtualization:t,label:o}=e;return oe(ee,{children:[o&&kt(bt,{children:o}),e.children&&kt(A,{virtualization:t,children:e.children})]})};import{jsx as gt}from"react/jsx-runtime";var se="k-list-group-item",at=e=>gt("li",{className:i(se,e.className),children:gt("span",{className:"k-list-item-text",children:e.children})});import{jsx as ae}from"react/jsx-runtime";var tt="k-list-optionlabel",ie=[m.hover,m.focus,m.selected,m.disabled],ne={},re={},D=e=>{let{text:t,hover:o,focus:r,selected:p,disabled:c,...a}=e;return ae("div",{...a,className:i(tt,v(tt,{hover:o,focus:r,selected:p,disabled:c})),children:t})};D.states=ie;D.options=ne;D.className=tt;D.defaultOptions=re;import{jsx as pe}from"react/jsx-runtime";var et="k-list-custom-value",le=[m.hover,m.focus,m.selected,m.disabled],me={},ce={},V=e=>{let{text:t,hover:o,focus:r,selected:p,disabled:c,...a}=e;return pe("div",{...a,className:i(et,v(et,{hover:o,focus:r,selected:p,disabled:c})),children:t})};V.states=le;V.options=me;V.className=et;V.defaultOptions=ce;import{jsx as ks}from"react/jsx-runtime";import{jsx as Cs}from"react/jsx-runtime";import{jsx as zs,jsxs as As}from"react/jsx-runtime";import{jsx as Gs,jsxs as Es}from"react/jsx-runtime";import{jsx as Rs}from"react/jsx-runtime";import{jsx as Ds,jsxs as Vs}from"react/jsx-runtime";import{jsx as T,jsxs as ot}from"react/jsx-runtime";var li=e=>ot(C,{...e,children:[ot(x,{label:"Group 1",root:!0,children:[T(l,{children:"List item 1.1"}),T(l,{children:"List item 1.2"}),T(l,{children:"List item 1.3"})]}),ot(x,{label:"Group 2",children:[T(l,{children:"List item 2.1"}),T(l,{children:"List item 2.2"}),T(l,{children:"List item 2.3"})]})]});export{li as AngularListWithGrouping};