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

A collection of HTML helpers used for developing Kendo UI themes

var d=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?d(...e):typeof e=="object"?Object.keys(e).map((s,o)=>e[o]||e[s]&&s||null).filter(s=>s!==null).join(" "):e).filter(e=>!!e).join(" ");var I=(t,e)=>d({[`${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"}),J=(t,e)=>{let{valid:s,invalid:o,hover:a,focus:l,checked:p,active:n,selected:c,disabled:u,indeterminate:x,loading:W,empty:A,readonly:ie,highlighted:se,...w}=e;return d({"k-valid":s,"k-invalid":o,"k-hover":a,"k-focus":l,"k-checked":p,"k-active":n,"k-selected":c,"k-disabled":u,"k-indeterminate":x&&!p,"k-loading":W,"k-empty":A,"k-readonly":ie,"k-highlighted":se},Object.keys(w).reduce((_,z)=>(z.startsWith("k-")?_[z]=w[z]:_[`k-${z}`]=w[z],_),{}))};var i={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"};var b={undefined:void 0,outline:"outline",solid:"solid",duotone:"duotone"},r={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",inverse:"inverse"},B={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 ce}from"react/jsx-runtime";var S="k-pane",le=[],pe={},K={resizable:!0,flex:!1},m=t=>{let{scrollable:e,flexBasis:s,flex:o=K.flex,collapsible:a,resizable:l=K.resizable,pinned:p,unpinned:n,tabbed:c,...u}=t;return ce("div",{...u,style:{flexBasis:s,...t.style},className:d(t.className,S,{[`${S}-static`]:s,[`${S}-flex`]:o,"k-scrollable":e,[`${S}-pinned`]:p,[`${S}-unpinned`]:n,[`${S}-tabbed`]:c}),role:"group",children:t.children})};m.states=le;m.options=pe;m.className=S;m.defaultOptions=K;import{Fragment as ue,jsx as X}from"react/jsx-runtime";var H="k-font-icon",de=[],me={size:[i.undefined,i.xsmall,i.small,i.medium,i.large,i.xlarge,i.xxlarge,i.xxxlarge],themeColor:[r.undefined,r.base,r.primary,r.secondary,r.tertiary,r.success,r.warning,r.error,r.info]},fe={},T=t=>{let{size:e,themeColor:s,icon:o,rotate:a,flip:l,...p}=t;return o?X("span",{...p,className:d(t.className,H,I(H,{size:e}),{[`k-i-${o}`]:o,[`k-color-${s}`]:s,[`k-rotate-${a}`]:a,"k-flip-h":l==="h"||l==="both","k-flip-v":l==="v"||l==="both"}),"aria-hidden":"true"}):X(ue,{})};T.states=de;T.options=me;T.className=H;T.defaultOptions=fe;var Q=T;import{Fragment as he,jsx as M}from"react/jsx-runtime";var D="k-svg-icon",xe=[],be={size:[i.undefined,i.xsmall,i.small,i.medium,i.large,i.xlarge,i.xxlarge,i.xxxlarge],themeColor:[r.undefined,r.base,r.primary,r.secondary,r.tertiary,r.success,r.warning,r.error,r.info],variant:[b.outline,b.solid,b.duotone]},F={viewBox:"0 0 24 24",variant:b.outline},L=t=>{let{size:e,themeColor:s,rotate:o,flip:a,viewBox:l=F.viewBox,variant:p=F.variant,icon:n,...c}=t;if(!n)return M(he,{});if(n==="none")return M("span",{...c,className:d(t.className,D,I("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let u=typeof n=="object"&&n.name&&n.name,x=typeof n=="object"?p&&n.variants?.[p]||n.variants?.outline||n.content:void 0;return M("span",{...c,className:d(t.className,D,I("k-icon",{size:e}),{[`k-svg-i-${u}`]:u,[`k-color-${s}`]:s,[`k-rotate-${o}`]:o,"k-flip-h":a==="h"||a==="both","k-flip-v":a==="v"||a==="both"}),"aria-hidden":"true",children:M("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof n=="object"?n.viewBox:l,dangerouslySetInnerHTML:x!==void 0?{__html:x}:void 0,children:n?void 0:t.children})})};L.states=xe;L.options=be;L.className=D;L.defaultOptions=F;var V=L;import*as G from"@progress/kendo-svg-icons";var Y="icon",Z="icons";import{useContext as ve}from"react";import{createContext as ge}from"react";var ee=ge({iconsType:"svg"});import{Fragment as te,jsx as E}from"react/jsx-runtime";var O="k-icon",Se=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),ye=[],ke={size:[i.undefined,i.xsmall,i.small,i.medium,i.large,i.xlarge,i.xxlarge,i.xxxlarge],themeColor:[r.undefined,r.base,r.primary,r.secondary,r.tertiary,r.success,r.warning,r.error,r.info],variant:[b.outline,b.solid,b.duotone]},$={viewBox:"0 0 24 24",type:"svg",variant:b.outline},h=t=>{let{iconsType:e}=ve(ee),{size:s,themeColor:o,icon:a,type:l=e||$.type,rotate:p,flip:n,viewBox:c=$.viewBox,variant:u=$.variant,...x}=t;if(!a)return E(te,{});if((e||l)==="svg"){if(a==="none")return E(V,{...x,className:d(t.className,O),icon:a,size:s,variant:u});let A=G[a]?a:Se(`${a}-icon`);return G[A]?E(V,{...x,className:d(t.className,O),icon:G[A],size:s,themeColor:o,rotate:p,flip:n,viewBox:c,variant:u}):E(te,{})}return E(Q,{...x,className:d(t.className,O),icon:a,size:s,themeColor:o,rotate:p,flip:n})};h.states=ye;h.options=ke;h.defaultOptions=$;h.className=O;h.moduleName=Y;h.folderName=Z;h.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 oe,jsx as y,jsxs as Ce}from"react/jsx-runtime";var k="k-splitbar",Pe=[B.hover,B.focus],Ne={},U={orientation:"horizontal",draggable:!0},P=t=>{let{hover:e,focus:s,orientation:o=U.orientation,draggable:a=U.draggable,collapsePrev:l,collapseNext:p,ariaLabel:n,...c}=t;return Ce("div",{...c,className:d(t.className,k,J(k,{hover:e,focus:s}),{[`${k}-${o}`]:o,[`${k}-draggable-${o}`]:a,[`${k}-static-${o}`]:!a&&!l&&!p}),role:"separator","aria-label":n,...o==="horizontal"&&{"aria-orientation":"vertical"},"aria-keyshortcuts":"ArrowLeft ArrowRight ArrowUp ArrowDown",children:[l&&y(oe,{children:y("div",{className:"k-collapse-prev",children:y(h,{icon:`chevron-${o==="horizontal"?"left":"up"}`,size:"xsmall"})})}),y("div",{className:"k-resize-handle","aria-hidden":"true"}),p&&y(oe,{children:y("div",{className:"k-collapse-next",children:y(h,{icon:`chevron-${o==="horizontal"?"right":"down"}`,size:"xsmall"})})})]})};P.states=Pe;P.options=Ne;P.className=k;P.defaultOptions=U;var j="splitter",ne=j;import{jsx as Te,jsxs as Le}from"react/jsx-runtime";import{createElement as Ie}from"react";var q="k-splitter",ze={},re={orientation:"horizontal"},f=t=>{let{orientation:e=re.orientation,children:s,panes:o,...a}=t,l=[];return o&&o.forEach((p,n)=>{let c=o[n+1],u=p.props,x=c?.props;l.push(Ie(m,{...u,key:n})),c&&l.push(Te(P,{draggable:u.resizable!==!1&&x.resizable!==!1,collapsePrev:u.collapsible,collapseNext:x.collapsible,orientation:e,ariaLabel:"Pane separator"},`splitbar-${n}`))}),Le("div",{...a,className:d(t.className,q,{[`${q}-${e}`]:e},"k-splitter-flex"),children:[l,s]})};f.options=ze;f.className=q;f.defaultOptions=re;f.moduleName=j;f.folderName=ne;f.ariaSpec={selector:".k-splitter",rules:[{selector:".k-pane",attribute:"role=group",usage:"Sets the proper role for the Splitter pane."},{selector:".k-splitbar",attribute:"role=separator",usage:"Sets the proper role for the Splitter split-bar element."},{selector:".k-splitbar",attribute:"aria-label",usage:"An accessible name for the separator."},{selector:".k-splitbar-horizontal",attribute:"aria-orientation=vertical",usage:"When a splitbar separates two panes horizontally, its aria-orientation must be explicitly set to vertical."},{selector:".k-splitbar",attribute:"aria-keyshortcuts",usage:"Announces available keyboard shortcuts."}]};import{jsx as g,jsxs as Ee}from"react/jsx-runtime";var Et=t=>g(f,{panes:[g(m,{flexBasis:"20%",collapsible:!0,children:g("p",{children:"Collapsible pane - 20%"})},"pane-1"),Ee(m,{children:[g("p",{children:"Content"}),g("p",{children:"Content"}),g("p",{children:"Content"})]},"pane-2"),g(m,{flexBasis:"30%",collapsible:!0,children:g("p",{children:"Collapsible pane - 30%"})},"pane-3")],...t});import{jsx as v,jsxs as Ae}from"react/jsx-runtime";var $t=t=>v(f,{panes:[v(m,{flexBasis:"20%",collapsible:!0,children:v("p",{children:"Collapsible pane - 20%"})},"pane-1"),Ae(m,{children:[v("p",{children:"Content"}),v("p",{children:"Content"}),v("p",{children:"Content"})]},"pane-2"),v(m,{flexBasis:"30%",collapsible:!0,children:v("p",{children:"Collapsible pane - 30%"})},"pane-3")],orientation:"vertical",...t});import{jsx as N}from"react/jsx-runtime";import{createElement as R}from"react";var Me=f.options,Oe=f.states,ae={...f.defaultOptions,variant:"horizontal",firstPaneProps:!0,secondPaneProps:!0},$e=[{name:"horizontal",title:"Horizontal"},{name:"vertical",title:"Vertical"}],Re=[{name:"firstPaneProps",title:"Collapsible Left"},{name:"secondPaneProps",title:"Collapsible Right"}],C=t=>{let{variant:e,modifiers:s,...o}={...ae,...t},a=c=>({collapsible:c,content:c?"Resizable and collapsible":"Resizable only"}),l=a(!0),p=a(!0),n={display:"flex",justifyContent:"center",alignItems:"center"};return Object.keys(s||{}).forEach(c=>{let u=s?.[c];switch(c){case"secondPaneProps":p=a(!!u);break;case"firstPaneProps":l=a(!!u);break;default:break}}),e==="vertical"?N(f,{style:{height:"238px"},...o,orientation:"vertical",panes:[R(m,{...l,flexBasis:"50%",style:n,key:"pane-1"},N("p",{children:l.content})),R(m,{...p,flexBasis:"50%",style:n,key:"pane-2"},N("p",{children:p.content}))]}):N(f,{style:{height:"238px"},...o,orientation:"horizontal",panes:[R(m,{...l,flexBasis:"50%",style:n,key:"pane-1"},N("p",{children:l.content})),R(m,{...p,flexBasis:"50%",style:n,key:"pane-2"},N("p",{children:p.content}))]})};C.options=Me;C.states=Oe;C.variants=$e;C.defaultOptions=ae;C.modifiers=Re;C.className=f.className;export{f as Splitter,C as SplitterDemo,Et as SplitterNormal,m as SplitterPane,P as SplitterSplitbar,$t as SplitterVertical};