@progress/kendo-themes-html/dist/esm/splitter/index.mjs

A collection of HTML helpers used for developing Kendo UI themes

var p=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?p(...e):typeof e=="object"?Object.keys(e).map((r,n)=>e[n]||e[r]&&r||null).filter(r=>r!==null).join(" "):e).filter(e=>!!e).join(" ");var z=(t,e)=>p({[`${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.fillMode}-${e.themeColor}`]:e.fillMode&&e.themeColor},{[`${t}-${e.themeColor}`]:e.themeColor&&e.fillMode===void 0},{"k-rounded-sm":e.rounded==="small","k-rounded-md":e.rounded==="medium","k-rounded-lg":e.rounded==="large","k-rounded-full":e.rounded==="full"}),D=(t,e)=>{let{valid:r,invalid:n,hover:i,focus:s,checked:l,active:d,selected:m,disabled:f,indeterminate:Y,loading:Z,empty:ee,readonly:te,highlighted:oe,...I}=e;return p({"k-valid":r,"k-invalid":n,"k-hover":i,"k-focus":s,"k-checked":l,"k-active":d,"k-selected":m,"k-disabled":f,"k-indeterminate":Y&&!l,"k-loading":Z,"k-empty":ee,"k-readonly":te,"k-highlighted":oe},Object.keys(I).reduce((L,N)=>(N.startsWith("k-")?L[N]=I[N]:L[`k-${N}`]=I[N],L),{}))};var a={xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"};var o={inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",dark:"dark",light:"light",inverse:"inverse"},T={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"};import{jsx as re}from"react/jsx-runtime";var g="k-pane",ne=[],le={},$={resizable:!0,flex:!1},c=t=>{let{scrollable:e,flexBasis:r,flex:n=$.flex,collapsible:i,resizable:s=$.resizable,pinned:l,unpinned:d,tabbed:m,...f}=t;return re("div",{...f,style:{flexBasis:r,...t.style},className:p(t.className,g,{[`${g}-static`]:r,[`${g}-flex`]:n,"k-scrollable":e,[`${g}-pinned`]:l,[`${g}-unpinned`]:d,[`${g}-tabbed`]:m}),children:t.children})};c.states=ne;c.options=le;c.className=g;c.defaultOptions=$;import{Fragment as pe,jsx as F}from"react/jsx-runtime";var O="k-font-icon",ae=[],ie={size:[a.xsmall,a.small,a.medium,a.large,a.xlarge,a.xxlarge,a.xxxlarge],themeColor:[o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},se={},k=t=>{let{size:e,themeColor:r,icon:n,rotate:i,flip:s,...l}=t;return n?F("span",{...l,className:p(t.className,O,z(O,{size:e}),{[`k-i-${n}`]:n,[`k-color-${r}`]:r,[`k-rotate-${i}`]:i,"k-flip-h":s==="h"||s==="both","k-flip-v":s==="v"||s==="both"})}):F(pe,{})};k.states=ae;k.options=ie;k.className=O;k.defaultOptions=se;var V=k;import{Fragment as de,jsx as M}from"react/jsx-runtime";var A="k-svg-icon",ce=[],me={size:[a.xsmall,a.small,a.medium,a.large,a.xlarge,a.xxlarge,a.xxxlarge],themeColor:[o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},G={viewBox:"0 0 24 24"},C=t=>{let{size:e,themeColor:r,rotate:n,flip:i,viewBox:s=G.viewBox,icon:l,...d}=t;if(!l)return M(de,{});l==="none"&&{...d,className:p(t.className,A,"k-none")};let m=typeof l=="object"&&l.name&&l.name;return M("span",{...d,className:p(t.className,A,z("k-icon",{size:e}),{[`k-svg-i-${m}`]:m,[`k-color-${r}`]:r,[`k-rotate-${n}`]:n,"k-flip-h":i==="h"||i==="both","k-flip-v":i==="v"||i==="both"}),children:M("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof l=="object"?l.viewBox:s,dangerouslySetInnerHTML:typeof l=="object"?{__html:l.content}:void 0,children:l?void 0:t.children})})};C.states=ce;C.options=me;C.className=A;C.defaultOptions=G;var _=C;import*as R from"@progress/kendo-svg-icons";var U="icon",J="icons";import{Fragment as X,jsx as P}from"react/jsx-runtime";var E="k-icon",fe=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),xe=[],ue={size:[a.xsmall,a.small,a.medium,a.large,a.xlarge,a.xxlarge,a.xxxlarge],themeColor:[o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.light,o.dark]},w={viewBox:"0 0 24 24",type:"svg"},x=t=>{let{size:e,themeColor:r,icon:n,type:i=w.type,rotate:s,flip:l,viewBox:d=w.viewBox,...m}=t;if(!n)return P(X,{});if(i==="svg"){if(n==="none")return P(_,{...m,className:p(t.className,E),icon:n,size:e});let f=R[n]?n:fe(`${n}-icon`);return R[f]?P(_,{...m,className:p(t.className,E),icon:R[f],size:e,themeColor:r,rotate:s,flip:l,viewBox:d}):P(X,{})}return P(V,{...m,className:p(t.className,E),icon:n,size:e,themeColor:r,rotate:s,flip:l})};x.states=xe;x.options=ue;x.defaultOptions=w;x.className=E;x.moduleName=U;x.folderName=J;import{Fragment as q,jsx as S,jsxs as ge}from"react/jsx-runtime";var v="k-splitbar",be=[T.hover,T.focus],he={},B={orientation:"horizontal",draggable:!0},y=t=>{let{hover:e,focus:r,orientation:n=B.orientation,draggable:i=B.draggable,collapsePrev:s,collapseNext:l,...d}=t;return ge("div",{...d,className:p(t.className,v,D(v,{hover:e,focus:r}),{[`${v}-${n}`]:n,[`${v}-draggable-${n}`]:i,[`${v}-static-${n}`]:!i&&!s&&!l}),children:[s&&S(q,{children:S("div",{className:"k-collapse-prev",children:S(x,{icon:`caret-alt-${n==="horizontal"?"left":"up"}`,size:"xsmall"})})}),S("div",{className:"k-resize-handle"}),l&&S(q,{children:S("div",{className:"k-collapse-next",children:S(x,{icon:`caret-alt-${n==="horizontal"?"right":"down"}`,size:"xsmall"})})})]})};y.states=be;y.options=he;y.className=v;y.defaultOptions=B;var K="splitter",j=K;import{jsx as W}from"react/jsx-runtime";import{createElement as ve}from"react";var H="k-splitter",Se={},Q={orientation:"horizontal"},u=t=>{let{orientation:e=Q.orientation,children:r,...n}=t,i=[];return r&&Array.isArray(r)&&r.map((s,l)=>{if(s.type===c){let d=r[l+1],m=s.props,f=d?.props;i.push(ve(c,{...m,key:l}),d&&W(y,{draggable:m.resizable!==!1&&f.resizable!==!1,collapsePrev:m.collapsible,collapseNext:f.collapsible,orientation:e},`splitbar-${l}`))}else i.push(s)}),W("div",{...n,className:p(t.className,H,{[`${H}-${e}`]:e},"k-splitter-flex"),children:i})};u.options=Se;u.className=H;u.defaultOptions=Q;u.moduleName=K;u.folderName=j;import{jsx as b,jsxs as ye}from"react/jsx-runtime";var mt=t=>b(u,{children:[b(c,{flexBasis:"20%",collapsible:!0,children:b("p",{children:"Collapsible pane - 20%"})},"pane-1"),ye(c,{children:[b("p",{children:"Content"}),b("p",{children:"Content"}),b("p",{children:"Content"})]},"pane-2"),b(c,{flexBasis:"30%",collapsible:!0,children:b("p",{children:"Collapsible pane - 30%"})},"pane-3")],...t});import{jsx as h,jsxs as Ne}from"react/jsx-runtime";var ut=t=>h(u,{children:[h(c,{flexBasis:"20%",collapsible:!0,children:h("p",{children:"Collapsible pane - 20%"})},"pane-1"),Ne(c,{children:[h("p",{children:"Content"}),h("p",{children:"Content"}),h("p",{children:"Content"})]},"pane-2"),h(c,{flexBasis:"30%",collapsible:!0,children:h("p",{children:"Collapsible pane - 30%"})},"pane-3")],orientation:"vertical",...t});export{u as Splitter,mt as SplitterNormal,c as SplitterPane,y as SplitterSplitbar,ut as SplitterVertical};