@progress/kendo-themes-html/dist/esm/splitter/templates/splitter-normal.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 P=(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"}),H=(t,e)=>{let{valid:r,invalid:n,hover:i,focus:s,checked:l,active:m,selected:c,disabled:f,indeterminate:Q,loading:Y,empty:Z,readonly:ee,highlighted:te,...E}=e;return p({"k-valid":r,"k-invalid":n,"k-hover":i,"k-focus":s,"k-checked":l,"k-active":m,"k-selected":c,"k-disabled":f,"k-indeterminate":Q&&!l,"k-loading":Y,"k-empty":Z,"k-readonly":ee,"k-highlighted":te},Object.keys(E).reduce((I,y)=>(y.startsWith("k-")?I[y]=E[y]:I[`k-${y}`]=E[y],I),{}))};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"},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"};import{jsx as le}from"react/jsx-runtime";var h="k-pane",oe=[],ne={},T={resizable:!0,flex:!1},d=t=>{let{scrollable:e,flexBasis:r,flex:n=T.flex,collapsible:i,resizable:s=T.resizable,pinned:l,unpinned:m,tabbed:c,...f}=t;return le("div",{...f,style:{flexBasis:r,...t.style},className:p(t.className,h,{[`${h}-static`]:r,[`${h}-flex`]:n,"k-scrollable":e,[`${h}-pinned`]:l,[`${h}-unpinned`]:m,[`${h}-tabbed`]:c}),children:t.children})};d.states=oe;d.options=ne;d.className=h;d.defaultOptions=T;import{Fragment as se,jsx as D}from"react/jsx-runtime";var $="k-font-icon",re=[],ae={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]},ie={},N=t=>{let{size:e,themeColor:r,icon:n,rotate:i,flip:s,...l}=t;return n?D("span",{...l,className:p(t.className,$,P($,{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"})}):D(se,{})};N.states=re;N.options=ae;N.className=$;N.defaultOptions=ie;var F=N;import{Fragment as me,jsx as z}from"react/jsx-runtime";var O="k-svg-icon",pe=[],ce={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]},V={viewBox:"0 0 24 24"},k=t=>{let{size:e,themeColor:r,rotate:n,flip:i,viewBox:s=V.viewBox,icon:l,...m}=t;if(!l)return z(me,{});l==="none"&&{...m,className:p(t.className,O,"k-none")};let c=typeof l=="object"&&l.name&&l.name;return z("span",{...m,className:p(t.className,O,P("k-icon",{size:e}),{[`k-svg-i-${c}`]:c,[`k-color-${r}`]:r,[`k-rotate-${n}`]:n,"k-flip-h":i==="h"||i==="both","k-flip-v":i==="v"||i==="both"}),children:z("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})})};k.states=pe;k.options=ce;k.className=O;k.defaultOptions=V;var A=k;import*as _ from"@progress/kendo-svg-icons";var G="icon",U="icons";import{Fragment as J,jsx as C}from"react/jsx-runtime";var M="k-icon",de=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),fe=[],xe={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]},R={viewBox:"0 0 24 24",type:"svg"},x=t=>{let{size:e,themeColor:r,icon:n,type:i=R.type,rotate:s,flip:l,viewBox:m=R.viewBox,...c}=t;if(!n)return C(J,{});if(i==="svg"){if(n==="none")return C(A,{...c,className:p(t.className,M),icon:n,size:e});let f=_[n]?n:de(`${n}-icon`);return _[f]?C(A,{...c,className:p(t.className,M),icon:_[f],size:e,themeColor:r,rotate:s,flip:l,viewBox:m}):C(J,{})}return C(F,{...c,className:p(t.className,M),icon:n,size:e,themeColor:r,rotate:s,flip:l})};x.states=fe;x.options=xe;x.defaultOptions=R;x.className=M;x.moduleName=G;x.folderName=U;import{Fragment as X,jsx as g,jsxs as he}from"react/jsx-runtime";var S="k-splitbar",ue=[L.hover,L.focus],be={},w={orientation:"horizontal",draggable:!0},v=t=>{let{hover:e,focus:r,orientation:n=w.orientation,draggable:i=w.draggable,collapsePrev:s,collapseNext:l,...m}=t;return he("div",{...m,className:p(t.className,S,H(S,{hover:e,focus:r}),{[`${S}-${n}`]:n,[`${S}-draggable-${n}`]:i,[`${S}-static-${n}`]:!i&&!s&&!l}),children:[s&&g(X,{children:g("div",{className:"k-collapse-prev",children:g(x,{icon:`caret-alt-${n==="horizontal"?"left":"up"}`,size:"xsmall"})})}),g("div",{className:"k-resize-handle"}),l&&g(X,{children:g("div",{className:"k-collapse-next",children:g(x,{icon:`caret-alt-${n==="horizontal"?"right":"down"}`,size:"xsmall"})})})]})};v.states=ue;v.options=be;v.className=S;v.defaultOptions=w;var B="splitter",q=B;import{jsx as j}from"react/jsx-runtime";import{createElement as Se}from"react";var K="k-splitter",ge={},W={orientation:"horizontal"},u=t=>{let{orientation:e=W.orientation,children:r,...n}=t,i=[];return r&&Array.isArray(r)&&r.map((s,l)=>{if(s.type===d){let m=r[l+1],c=s.props,f=m?.props;i.push(Se(d,{...c,key:l}),m&&j(v,{draggable:c.resizable!==!1&&f.resizable!==!1,collapsePrev:c.collapsible,collapseNext:f.collapsible,orientation:e},`splitbar-${l}`))}else i.push(s)}),j("div",{...n,className:p(t.className,K,{[`${K}-${e}`]:e},"k-splitter-flex"),children:i})};u.options=ge;u.className=K;u.defaultOptions=W;u.moduleName=B;u.folderName=q;import{jsx as ct,jsxs as mt}from"react/jsx-runtime";import{jsx as b,jsxs as ve}from"react/jsx-runtime";var vt=t=>b(u,{children:[b(d,{flexBasis:"20%",collapsible:!0,children:b("p",{children:"Collapsible pane - 20%"})},"pane-1"),ve(d,{children:[b("p",{children:"Content"}),b("p",{children:"Content"}),b("p",{children:"Content"})]},"pane-2"),b(d,{flexBasis:"30%",collapsible:!0,children:b("p",{children:"Collapsible pane - 30%"})},"pane-3")],...t});export{vt as SplitterNormal};