"use strict";(()=>{var F=Object.defineProperty,K=Object.defineProperties;var Z=Object.getOwnPropertyDescriptors;var q=Object.getOwnPropertySymbols;var W=Object.prototype.hasOwnProperty,G=Object.prototype.propertyIsEnumerable;var w=(m,t,a)=>t in m?F(m,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):m[t]=a,C=(m,t)=>{for(var a in t||(t={}))W.call(t,a)&&w(m,a,t[a]);if(q)for(var a of q(t))G.call(t,a)&&w(m,a,t[a]);return m},_=(m,t)=>K(m,Z(t));(self.webpackChunk_sap_ux_ui_components=self.webpackChunk_sap_ux_ui_components||[]).push([[177],{"./src/index.tsx":(function(m,t,a){var T=this&&this.__createBinding||(Object.create?(function(e,o,s,f){f===void 0&&(f=s);var h=Object.getOwnPropertyDescriptor(o,s);(!h||("get"in h?!o.__esModule:h.writable||h.configurable))&&(h={enumerable:!0,get:function(){return o[s]}}),Object.defineProperty(e,f,h)}):(function(e,o,s,f){f===void 0&&(f=s),e[f]=o[s]})),S=this&&this.__exportStar||function(e,o){for(var s in e)s!=="default"&&!Object.prototype.hasOwnProperty.call(o,s)&&T(o,e,s)};Object.defineProperty(t,"__esModule",{value:!0}),t.setIconOptions=void 0,S(a("./src/components/index.tsx"),t),S(a("./src/utilities/index.ts"),t),S(a("./src/theme/index.ts"),t);var U=a("../../node_modules/.pnpm/@fluentui+react@8.120.5_@types+react-dom@16.9.24_@types+react@16.14.55_react-dom@16.14.0_react@16.14.0/node_modules/@fluentui/react/lib-commonjs/index.js");Object.defineProperty(t,"setIconOptions",{enumerable:!0,get:function(){return U.setIconOptions}})}),"./stories/UISections.story.tsx":(function(m,t,a){var T=this&&this.__createBinding||(Object.create?(function(l,n,d,i){i===void 0&&(i=d);var r=Object.getOwnPropertyDescriptor(n,d);(!r||("get"in r?!n.__esModule:r.writable||r.configurable))&&(r={enumerable:!0,get:function(){return n[d]}}),Object.defineProperty(l,i,r)}):(function(l,n,d,i){i===void 0&&(i=d),l[i]=n[d]})),S=this&&this.__setModuleDefault||(Object.create?(function(l,n){Object.defineProperty(l,"default",{enumerable:!0,value:n})}):function(l,n){l.default=n}),U=this&&this.__importStar||(function(){var l=function(n){return l=Object.getOwnPropertyNames||function(d){var i=[];for(var r in d)Object.prototype.hasOwnProperty.call(d,r)&&(i[i.length]=r);return i},l(n)};return function(n){if(n&&n.__esModule)return n;var d={};if(n!=null)for(var i=l(n),r=0;r<i.length;r++)i[r]!=="default"&&T(d,n,i[r]);return S(d,n),d}})();Object.defineProperty(t,"__esModule",{value:!0}),t.VerticalSectionsThreeRows=t.HorizontalSectionsThreeColumns=t.VerticalSections=t.HorizontalSections=void 0;const e=U(a("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),o=a("./src/components/UISection/index.tsx"),s=a("./src/components/UIToggle/index.tsx"),f=a("./src/components/UIDropdown/index.tsx"),h=a("./src/components/UIButton/index.tsx"),A=a("./src/index.tsx");t.default={title:"Utilities/Splitter"};const V=`
    .componentOptions {
        display: flex;
    }
    .componentOptions > div {
        min-width: 100px;
        margin-right: 10px;
    }
    #storybook-root {
        height: 100%;
    }
    .componentOptions .ms-TextField .ms-Label {
        margin-top: 0;
    }
`,g=`Lorem ipsum dolor sit amet, modo iriure prompta eos in, eos ex meis ponderum, veniam cetero imperdiet ex mel. Munere recteque nam ut, ipsum aeterno est ex. Duo porro nulla ea, ut iudicabit scriptorem sed. Eos senserit imperdiet consequuntur in.
Zril corpora ad per, id pri alia duis erant, elitr signiferumque eu duo. Offendit sententiae no vel, eos ad augue tibique definitionem, per ad aliquid graecis molestiae. No vero singulis sensibus nec, viris congue omnium an cum, eum cu veri maiorum suscipiantur. Ne comprehensam concludaturque nec. Eripuit deterruisset ei cum, cum elit debet sapientem ei.
At mollis integre inciderint usu. Eu eam inani affert populo, modus idque salutandi no ius. Ad qui nostro voluptua gloriatur. Novum gloriatur persequeris eu vel, vim te nominavi abhorreant expetendis. His assum possit officiis ut, et est affert nominati aliquando, nam ne omnes doming graecis. Pri ex tota idque appareat, fugit oporteat urbanitas eu pro.
Unum maluisset signiferumque has et, at persius intellegebat qui. Zril dolorum dignissim no ius, duo nostrud conceptam voluptatibus ut. Eam no noster fabellas, in meis tamquam expetendis pri. Id mel veri torquatos. Ridens facilisi constituto mei an, eos cu iriure facilis intellegam, cu magna graeci denique sea.
Unum consectetuer et pro, at ignota evertitur mei. Wisi meis officiis sed ne, ea errem veritus dissentiunt quo. Eum et meis persequeris eloquentiam, mei et platonem complectitur. Vidisse legendos tincidunt id quo, id inermis facilis deleniti ius.`,E=l=>l.map(n=>({key:n,text:n}));function y(l){var D;const[n,d]=(0,e.useState)(l.threeSections?200:400),[i,r]=(0,e.useState)({vertical:l.vertical,splitterType:o.UISplitterType.Resize,splitter:!0,splitterTabIndex:0,minSectionSize:l.threeSections?[100,100,100]:[300,300],animation:!0,splitterLayoutType:o.UISplitterLayoutType.Standard,sizesAsPercents:!1,sizes:l.threeSections?[n,void 0,200]:[n,void 0]}),[v,P]=(0,e.useState)(!0),[b,x]=(0,e.useState)(!0),I=(p,u)=>{r(_(C({},i),{[p]:u}))},R=(p,u)=>{I(p.currentTarget.id,u)},j=(p,u)=>{let c=i.animation;c===!0&&!u?(c=[!0,!0],c[p]=!1):!c&&u?(c=[!1,!1],c[p]=!0):c=u,I("animation",c)},O=(p,u,c,L)=>{I(p,c==null?void 0:c.key)},z=[e.default.createElement(o.UISections.Section,{key:"first",height:"100%",cleanPadding:!0,hidden:!v,"data-test":"test"},e.default.createElement("div",null,g,g,g))];return l.threeSections&&z.push(e.default.createElement(o.UISections.Section,{key:"second",height:"100%",cleanPadding:!0},e.default.createElement("div",null,g,g,g))),z.push(e.default.createElement(o.UISections.Section,{key:"last",height:"100%",cleanPadding:!0,hidden:!b},e.default.createElement("div",null,g,g,g))),e.default.createElement(e.default.Fragment,null,e.default.createElement("style",null,V),e.default.createElement("div",{style:{height:"100%",display:"flex",flexDirection:"column"}},e.default.createElement("div",{className:"componentOptions"},e.default.createElement(s.UIToggle,{id:"splitter",label:"splitter",checked:i.splitter,inlineLabel:!0,inlineLabelLeft:!0,size:s.UIToggleSize.Small,onChange:R}),e.default.createElement(f.UIDropdown,{id:"splitterType",label:"splitterType",selectedKey:i.splitterType,options:E([o.UISplitterType.Resize,o.UISplitterType.Toggle]),onChange:O.bind(this,"splitterType")}),e.default.createElement(f.UIDropdown,{id:"splitterTabIndex",label:"splitterTabIndex",selectedKey:(D=i.splitterTabIndex)==null?void 0:D.toString(),options:E(["-1","0"]),onChange:O.bind(this,"splitterTabIndex")}),e.default.createElement(f.UIDropdown,{id:"splitterLayoutType",label:"splitterLayoutType",selectedKey:i.splitterLayoutType,options:E([o.UISplitterLayoutType.Compact,o.UISplitterLayoutType.Standard]),onChange:O.bind(this,"splitterLayoutType")}),e.default.createElement(A.UITextInput,{label:"First section size",value:n,onChange:(p,u)=>{const c=parseFloat(u!=null?u:"");if(!isNaN(c)){d(c);const L=[...i.sizes];L[0]=c,I("sizes",L)}}}),e.default.createElement("div",null,e.default.createElement(s.UIToggle,{id:"animation1",label:"Animate left section",checked:Array.isArray(i.animation)?i.animation[0]:i.animation,inlineLabel:!0,inlineLabelLeft:!0,size:s.UIToggleSize.Small,onChange:(p,u)=>j(0,u)}),e.default.createElement(s.UIToggle,{id:"animation1",label:"Animate right section",checked:Array.isArray(i.animation)?i.animation[1]:i.animation,inlineLabel:!0,inlineLabelLeft:!0,size:s.UIToggleSize.Small,onChange:(p,u)=>j(1,u)})),e.default.createElement("div",null,e.default.createElement(s.UIToggle,{id:"sectionVisible",label:"toggle left section",checked:v,inlineLabel:!0,inlineLabelLeft:!0,size:s.UIToggleSize.Small,onChange:()=>{P(!v)}}),e.default.createElement(s.UIToggle,{id:"sectionVisible",label:"toggle right section",checked:b,inlineLabel:!0,inlineLabelLeft:!0,size:s.UIToggleSize.Small,onChange:()=>{x(!b)}})),e.default.createElement("div",null,e.default.createElement(h.UIDefaultButton,{text:"Toggle sections",onClick:()=>{P(!v),x(!b)}}))),e.default.createElement("div",{style:{height:"100%"}},e.default.createElement(o.UISections,_(C({},i),{height:"100%",onClose:()=>{x(!b)}}),z))))}const M=()=>e.default.createElement(y,{vertical:!1});t.HorizontalSections=M;const B=()=>e.default.createElement(y,{vertical:!0});t.VerticalSections=B;const H=()=>e.default.createElement(y,{vertical:!1,threeSections:!0});t.HorizontalSectionsThreeColumns=H;const N=()=>e.default.createElement(y,{vertical:!0,threeSections:!0});t.VerticalSectionsThreeRows=N})}]);})();
