text: (window.webpackJsonp=window.webpackJsonp||[]).push([[28],{195:function(e,t,o){"use strict";o.r(t);var r=o(0),n=o(59),a=o(111),c=(o(835),r.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512"},r.createElement("path",{d:"M443.5 162.6l-7.1-7.1c-4.7-4.7-12.3-4.7-17 0L224 351 28.5 155.5c-4.7-4.7-12.3-4.7-17 0l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17l211 211.1c4.7 4.7 12.3 4.7 17 0l211-211.1c4.8-4.7 4.8-12.3.1-17z"}))),i=function(e){var t=r.useState(null),o=t[0],i=t[1],s=r.useState("custom-accordion"),m=s[0],l=s[1],p=r.useState("custom-accordion"),u=p[0],g=p[1],f=r.useState([]),h=f[0],w=f[1];r.useEffect((function(){var t,o;t=[],e.list.map((function(){return t.push(Object(a.a)("accordion-"))})),w(t),o="custom-accordion",o+=e.className?" "+e.className:"",o+=e.alternative?" alternative-accordion":"",l(o),function(){var t="accordion-item";t+=" "+(e.iconPosition?e.iconPosition:"left"),t+=" "+(e.iconRotation?e.iconRotation:"deg-180"),t+=e.customIconExpanded?" transform":"",g(t)}()}),[e.id,e.className,e.alternative,e.iconPosition,e.iconRotation,e.customIconExpanded,e.list]);var v=function(e){return i(o===e?null:e)};return r.createElement("div",{className:m,id:e.id},e.list&&e.list.map((function(t,a){return r.createElement("div",{className:u+(o===a?" active":""),key:a,tabIndex:0,id:h[a],onKeyDown:function(e){return function(e,t){" "!==t.key.toLowerCase()&&"space"!==t.key.toLowerCase()&&"enter"!==t.key.toLowerCase()||v(e)}(a,e)},"aria-expanded":o===a,"aria-controls":"lbl-"+h[a],role:"button"},r.createElement("div",{className:"header-wrapper"+(t.subHeaderText?" with-sub-header":""),onClick:function(){return i(o===a?null:a)}},e.customIcon||c,e.customIconExpanded?e.customIconExpanded:null,r.createElement("h4",{className:"accordion-header"},t.header),t.subHeaderText&&r.createElement("h6",{className:"accordion-sub-header"},t.subHeaderText)),r.createElement("div",{className:"content-wrapper","aria-labelledby":h[a],id:"lbl-"+h[a],role:"region"},t&&r.createElement(d,Object(n.a)({},t))))})))},d=function(e){if(r.isValidElement(e.content)){var t=e.content;return r.createElement("div",{className:"text-wrapper"},t)}if(e.content instanceof Array){var o=e.content;return r.createElement("div",{className:"text-wrapper"},o.map((function(e,t){return r.createElement("div",{className:"text-item",key:t},e.title&&r.createElement("div",{className:"accordion-title"},e.title),e.desc&&r.createElement("div",{className:"accordion-desc"},e.desc))})))}var n=e.content;return r.createElement("div",{className:"text-wrapper"},r.createElement("div",{className:"text-item"},n.title&&r.createElement("div",{className:"accordion-title"},n.title),n.desc&&r.createElement("div",{className:"accordion-desc"},n.desc)))},s=o(444).default,m=o(837),l=r.createElement("svg",{version:"1.1",xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink",preserveAspectRatio:"xMidYMid meet",viewBox:"0 0 640 640",width:"640",height:"640"},r.createElement("defs",null,r.createElement("path",{d:"M585.08 342.54C593.39 342.54 600.1 335.82 600.1 327.51C600.1 326.01 600.1 313.99 600.1 312.49C600.1 304.18 593.39 297.46 585.08 297.46C568.91 297.46 488.06 297.46 342.54 297.46C342.49 151.99 342.46 71.18 342.45 55.01C342.45 46.7 335.73 39.99 327.42 39.99C325.92 39.99 313.9 39.99 312.4 39.99C304.09 39.99 297.37 46.7 297.37 55.01C297.38 71.18 297.41 151.99 297.46 297.46C151.99 297.51 71.18 297.54 55.01 297.55C46.7 297.55 39.99 304.27 39.99 312.58C39.99 314.08 39.99 326.1 39.99 327.6C39.99 335.91 46.7 342.63 55.01 342.63C71.18 342.62 151.99 342.59 297.46 342.54C297.46 488.06 297.46 568.91 297.46 585.08C297.46 593.39 304.18 600.1 312.49 600.1C313.99 600.1 326.01 600.1 327.51 600.1C335.82 600.1 342.54 593.39 342.54 585.08C342.54 568.91 342.54 488.06 342.54 342.54C488.06 342.54 568.91 342.54 585.08 342.54Z",id:"e9WTWunf5M"})),r.createElement("g",null,r.createElement("g",null,r.createElement("g",null,r.createElement("use",{xlinkHref:"#e9WTWunf5M"}),r.createElement("g",null,r.createElement("use",{xlinkHref:"#e9WTWunf5M",strokeWidth:"1"})))))),p=r.createElement("svg",{name:"angle-double-right",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 320 512"},r.createElement("path",{d:"M166.9 264.5l-117.8 116c-4.7 4.7-12.3 4.7-17 0l-7.1-7.1c-4.7-4.7-4.7-12.3 0-17L127.3 256 25.1 155.6c-4.7-4.7-4.7-12.3 0-17l7.1-7.1c4.7-4.7 12.3-4.7 17 0l117.8 116c4.6 4.7 4.6 12.3-.1 17zm128-17l-117.8-116c-4.7-4.7-12.3-4.7-17 0l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17L255.3 256 153.1 356.4c-4.7 4.7-4.7 12.3 0 17l7.1 7.1c4.7 4.7 12.3 4.7 17 0l117.8-116c4.6-4.7 4.6-12.3-.1-17z"})),u=[{header:"Accordion List Item 1",subHeaderText:"Accordion Sub Header",content:{title:"Tempor incididun",desc:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tristique senectus et netus. Lectus mauris ultrices eros in cursus turpis massa tincidunt."}},{header:"Accordion List Item 2",content:[{title:"Excepteur sint",desc:"Vitae suscipit tellus mauris a diam maecenas sed. Feugiat in fermentum posuere urna nec tincidunt praesent semper.Tellus id interdum velit laoreet id donec. Morbi enim nunc faucibus a pellentesque sit. Vitae congue mauris rhoncus aenean."},{title:"Duis aute",desc:"Eleifend donec pretium vulputate sapien nec sagittis. Malesuada fames ac turpis egestas.Molestie ac feugiat sed lectus vestibulum mattis. Suscipit adipiscing bibendum est ultricies integer quis auctor elit sed."}]},{header:"Accordion List Item 3",content:r.createElement(r.Fragment,null,r.createElement("p",{className:"m-0"},"Ut nemo corporis inventore neque qui. Est quos facere et id praesentium ut in iusto qui. Labore vel est ab."),r.createElement("a",{href:"https://seb.se",target:"_blank"},"Link to seb.se"))}];t.default=function(){return r.createElement("div",{className:"route-template container"},r.createElement("div",{className:"info-holder"},r.createElement("div",{className:"info"},r.createElement("div",{className:"md-file"},r.createElement(s,{innerHTML:!0},m))),r.createElement("div",{className:"info"},r.createElement("h2",null,"Output"),r.createElement("p",null,"Here is a sample output"),r.createElement("div",{className:"result wide"},r.createElement(i,{list:u})),r.createElement("p",null,"Custom icon when expanded"),r.createElement("div",{className:"result wide"},r.createElement(i,{list:u,iconRotation:"deg-90",customIconExpanded:l})),r.createElement("p",null,"Custom icon on the right"),r.createElement("div",{className:"result wide"},r.createElement(i,{list:u,customIcon:p,iconPosition:"right",iconRotation:"deg-90"})),r.createElement("p",null,"Alternative theme"),r.createElement("div",{className:"result wide"},r.createElement(i,{list:u,alternative:!0})))))}},835:function(e,t,o){var r=o(836);"string"==typeof r&&(r=[[e.i,r,""]]);var n={insert:"head",singleton:!1};o(58)(r,n);r.locals&&(e.exports=r.locals)},836:function(e,t,o){(e.exports=o(53)(!1)).push([e.i,".custom-accordion{position:relative;background-color:#fff}.custom-accordion .accordion-item{position:relative;border-bottom:1px solid #e6e6e6}.custom-accordion .accordion-item:hover{background-color:#f5f5f5}.custom-accordion .accordion-item:first-child{border-top:1px solid #e6e6e6}.custom-accordion .accordion-item .header-wrapper{position:relative;display:block;cursor:pointer;min-height:48px}.custom-accordion .accordion-item .header-wrapper.with-sub-header{min-height:64px}.custom-accordion .accordion-item .header-wrapper>svg{position:absolute;width:20px;height:20px;fill:#0092e1;will-change:transform;-webkit-transition:transform 300ms,opacity 300ms;-moz-transition:transform 300ms,opacity 300ms;-o-transition:transform 300ms,opacity 300ms;transition:transform 300ms,opacity 300ms;top:14px}.custom-accordion .accordion-item .header-wrapper>svg:last-of-type:not(:first-of-type){opacity:0;transform:rotate(180deg)}.custom-accordion .accordion-item .header-wrapper .accordion-header{display:block;font-weight:500;padding-top:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;line-height:28px;margin:0}.custom-accordion .accordion-item .header-wrapper .accordion-sub-header{display:block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin:0;margin-bottom:10px}.custom-accordion .accordion-item .content-wrapper{padding:0;-webkit-transition:all 300ms ease;-moz-transition:all 300ms ease;-o-transition:all 300ms ease;transition:all 300ms ease;position:relative;overflow:hidden}.custom-accordion .accordion-item .content-wrapper .text-wrapper{position:relative;padding:0px 48px;max-height:0;will-change:margin;opacity:0}.custom-accordion .accordion-item .content-wrapper .text-wrapper .text-item:not(:last-child){padding-bottom:8px}.custom-accordion .accordion-item .content-wrapper .text-wrapper .text-item .accordion-title{font-size:16px;font-weight:500}.custom-accordion .accordion-item .content-wrapper .text-wrapper .text-item .accordion-desc{padding-top:5px;font-size:14px}.custom-accordion .accordion-item.right .header-wrapper{padding:5px 48px 5px 10px}.custom-accordion .accordion-item.right .header-wrapper>svg{right:15px}.custom-accordion .accordion-item.left .header-wrapper{padding:5px 10px 5px 48px}.custom-accordion .accordion-item.left .header-wrapper>svg{left:15px}.custom-accordion .accordion-item.deg-90 .header-wrapper>svg:last-of-type:not(:first-of-type){-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-o-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.custom-accordion .accordion-item.deg-90-counter .header-wrapper>svg:last-of-type:not(:first-of-type){-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.custom-accordion .accordion-item.deg-180 .header-wrapper>svg:last-of-type:not(:first-of-type){-webkit-transform:rotate(-18deg0);-moz-transform:rotate(-18deg0);-o-transform:rotate(-18deg0);-ms-transform:rotate(-18deg0);transform:rotate(-18deg0)}.custom-accordion .accordion-item.deg-180-counter .header-wrapper>svg:last-of-type:not(:first-of-type){-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.custom-accordion .accordion-item.active>.content-wrapper{padding-bottom:18px}.custom-accordion .accordion-item.active.deg-90 .header-wrapper>svg:first-of-type{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.custom-accordion .accordion-item.active.deg-90-counter .header-wrapper>svg:first-of-type{-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-o-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.custom-accordion .accordion-item.active.deg-180 .header-wrapper>svg:first-of-type{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.custom-accordion .accordion-item.active.deg-180-counter .header-wrapper>svg:first-of-type{-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-o-transform:rotate(-180deg);-ms-transform:rotate(-180deg);transform:rotate(-180deg)}.custom-accordion .accordion-item.active .header-wrapper>svg:last-of-type:not(:first-of-type){transform:rotate(0);opacity:1}.custom-accordion .accordion-item.active.transform .header-wrapper>svg:first-of-type:not(:last-of-type){opacity:0}.custom-accordion .accordion-item.active .content-wrapper .text-wrapper{opacity:1;max-height:10000px}.custom-accordion.alternative-accordion>.accordion-item{border-bottom:0}.custom-accordion.alternative-accordion>.accordion-item:hover{background-color:transparent}.custom-accordion.alternative-accordion>.accordion-item:hover .accordion-header{text-decoration:underline}.custom-accordion.alternative-accordion>.accordion-item:first-child{border-top:0}.custom-accordion.alternative-accordion>.accordion-item>.header-wrapper{min-height:auto}.custom-accordion.alternative-accordion>.accordion-item>.header-wrapper>.accordion-header{font-size:16px;color:#0092e1;padding:0}.custom-accordion.alternative-accordion>.accordion-item>.header-wrapper>svg{top:5px;width:14px}.custom-accordion.alternative-accordion>.accordion-item.right>.header-wrapper{padding:0 48px 0 10px}.custom-accordion.alternative-accordion>.accordion-item.right>.header-wrapper>svg{right:15px}.custom-accordion.alternative-accordion>.accordion-item.right>.content-wrapper>.text-wrapper{padding:0 30px 0 10px}.custom-accordion.alternative-accordion>.accordion-item.left>.header-wrapper{padding:0 10px 0 30px}.custom-accordion.alternative-accordion>.accordion-item.left>.header-wrapper>svg{left:5px}.custom-accordion.alternative-accordion>.accordion-item.left>.content-wrapper>.text-wrapper{padding:0 30px}\n",""])},837:function(e,t){e.exports='<hr>\n<p>title: Accordion\ncomponentid: component-accordion\nvariantid: default\nguid: &quot;accordion-guid-default-component-react&quot;</p>\n<hr>\n<h2 id="element-name">Element name</h2>\n<pre><code class="language-javascript">Name: Accordion Component\nComponent: &quot;Accordion&quot;\nSelector: &quot;&lt;Accordion/&gt;&quot;\nImport: &quot;@sebgroup/react-components/dist/Accordion&quot;\nType: Form Component</code></pre>\n<h2 id="element-information">Element information</h2>\n<p>This React component is based on SEB Bootstrap style. Supports customization and configurations. Use this component mainly for text content. The module name of this component is <code>Accordion</code> and the selector is <code>&lt;Accordion/&gt;</code>.</p>\n<h2 id="basic-use">Basic use</h2>\n<pre><code class="language-html">&lt;Accordion list=&quot;accordionListObj&quot; /&gt;</code></pre>\n<h2 id="properties">Properties</h2>\n<p>These are the current available properties:</p>\n<table>\n<thead>\n<tr>\n<th>Property</th>\n<th>Type</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody><tr>\n<td>alternative?</td>\n<td><code>boolean</code></td>\n<td>Toggle alternative style of accordion</td>\n</tr>\n<tr>\n<td>className?</td>\n<td><code>string</code></td>\n<td>Element class</td>\n</tr>\n<tr>\n<td>customIcon?</td>\n<td><code>JSX.Element</code></td>\n<td>Custom icon for the accordion trigger</td>\n</tr>\n<tr>\n<td>customIconExpanded?</td>\n<td><code>JSX.Element</code></td>\n<td>Custom icon to be used when expanded. This will add a transition between the two icons</td>\n</tr>\n<tr>\n<td>iconPosition?</td>\n<td><code>string</code></td>\n<td>Accordion icon placement<sup>1</sup></td>\n</tr>\n<tr>\n<td>iconTransition?</td>\n<td><code>string</code></td>\n<td>Icon transition rotation degree<sup>2</sup></td>\n</tr>\n<tr>\n<td>id?</td>\n<td><code>string</code></td>\n<td>Element id</td>\n</tr>\n<tr>\n<td>list</td>\n<td><code>Array&lt;AccrodionListItem&gt;</code><sup>3</sup></td>\n<td>List of accordion items</td>\n</tr>\n</tbody></table>\n<h2 id="footnote">Footnote</h2>\n<ol>\n<li>Icon positions supported are: <code>right</code> and <code>left</code></li>\n<li>Icon transitions supported are: <code>&quot;deg-180&quot;</code>, <code>&quot;deg-180-counter&quot;</code>, <code>&quot;deg-90&quot;</code>, <code>&quot;deg-90-counter&quot;</code></li>\n<li>Property <code>list</code> has an exported interface named <code>AccordionListItem</code>:</li>\n</ol>\n<pre><code class="language-typescript">interface AccordionListItem {\n    header: string;\n    subHeaderText?: string;\n    content?: AccordionContent | Array&lt;AccordionContent&gt; | React.ReactNode;\n}</code></pre>\n<p><code>AccordionListItem</code>&#39;s memeber <code>content</code> has an exported interface name <code>AccordionContent</code> and accepts a single <code>AccordionContent</code> object or an array of <code>AccordionContent</code> objects</p>\n<pre><code class="language-typescript">interface AccordionContent {\n    title?: string;\n    desc?: string;\n}</code></pre>\n'}}]);