(window.webpackJsonp=window.webpackJsonp||[]).push([[18],{1065:function(t,e,o){var n=o(1066);"string"==typeof n&&(n=[[t.i,n,""]]);var r={insert:"head",singleton:!1};o(58)(n,r);n.locals&&(t.exports=n.locals)},1066:function(t,e,o){(t.exports=o(53)(!1)).push([t.i,".text-label{display:inline-block}.text-label>.custom-label-value{display:flex;align-items:center;font-weight:500}\n",""])},1067:function(t,e){t.exports='<hr>\n<p>title: Text Label\ncomponentid: component-textlabel\nvariantid: default\nguid: &quot;textlabel-guid-default-component-react&quot;</p>\n<hr>\n<h2 id="element-name">Element name</h2>\n<pre><code class="language-javascript">Name: Text Label Component\nComponent: &quot;TextLabel&quot;\nSelector: &quot;&lt;TextLabel/&gt;&quot;\nImport: &quot;@sebgroup/react-components/dist/TextLabel&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. The component name is <code>TextLabel</code> and the selector is <code>&lt;TextLabel/&gt;</code>.</p>\n<h2 id="basic-use">Basic use</h2>\n<pre><code class="language-html">&lt;TextLabel name=&quot;textname&quot; value=&quot;Some text value&quot; label=&quot;Some text label&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>className?</td>\n<td><code>string</code></td>\n<td>Custom class can be passed here</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>label?</td>\n<td><code>string</code></td>\n<td>Element label</td>\n</tr>\n<tr>\n<td>name?</td>\n<td><code>string</code></td>\n<td>element name</td>\n</tr>\n<tr>\n<td>value</td>\n<td><code>string</code></td>\n<td>The current value</td>\n</tr>\n</tbody></table>\n'},199:function(t,e,o){"use strict";o.r(e);var n=o(0),r=(o(1065),n.memo((function(t){return n.createElement("div",{className:"text-label"+(t.className?" "+t.className:""),id:t.id},t.label&&n.createElement("label",{className:"custom-label"},t.label),n.createElement("div",{className:"custom-label-value"},t.value))}))),a=o(627),i=o(444).default,l=o(1067);e.default=function(){return n.createElement("div",{className:"route-template container"},n.createElement("div",{className:"info-holder"},n.createElement("div",{className:"info"},n.createElement("div",{className:"md-file"},n.createElement(i,{innerHTML:!0},l))),n.createElement("div",{className:"info"},n.createElement("h2",null,"Output"),n.createElement("p",null,"Here is the basic bootstrap one:"),n.createElement("div",{className:"result"},n.createElement(r,{value:"400,000 kr",label:"Current savings"})),n.createElement("p",null,"An example with passing ReactNode as the value (tooltip):"),n.createElement("div",{className:"result"},n.createElement(r,{value:n.createElement(n.Fragment,null,"400,000 kr",n.createElement(a.a,{className:"ml-1",position:"top-right"})),label:"Current savings"})))))}},627:function(t,e,o){"use strict";o.d(e,"a",(function(){return i}));var n=o(59),r=o(0),a=(o(628),r.createElement("svg",{name:"info-circle",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512"},r.createElement("path",{d:"M256 40c118.621 0 216 96.075 216 216 0 119.291-96.61 216-216 216-119.244 0-216-96.562-216-216 0-119.203 96.602-216 216-216m0-32C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm-36 344h12V232h-12c-6.627 0-12-5.373-12-12v-8c0-6.627 5.373-12 12-12h48c6.627 0 12 5.373 12 12v140h12c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12h-72c-6.627 0-12-5.373-12-12v-8c0-6.627 5.373-12 12-12zm36-240c-17.673 0-32 14.327-32 32s14.327 32 32 32 32-14.327 32-32-14.327-32-32-32z"}))),i=function(t){function e(e){var o=t.call(this,e)||this;return o.state={toggle:!1},o.forceDismiss=o.forceDismiss.bind(o),o.toggleTooltip=o.toggleTooltip.bind(o),o}return Object(n.b)(e,t),e.prototype.forceDismiss=function(t){if(t)switch(t.target.className){case"icon":case"message":case"message-container":case"triangle":return;default:this.setState({toggle:!1})}else this.setState({toggle:!1})},e.prototype.forceShow=function(){!this.state.toggle&&this.setState({toggle:!0})},e.prototype.isPositioned=function(t){return 0===(this.props.position?this.props.position:"bottom").search(t)},e.prototype.toggleTooltip=function(t,e){void 0!==t?this.setState({toggle:t}):this.setState({toggle:!this.state.toggle}),this.props.onClick&&this.props.onClick(e)},e.prototype.render=function(){var t=this;return r.createElement("div",{className:"tooltip-container"+(this.props.className?" "+this.props.className:""),id:this.props.id},r.createElement("div",{className:"icon tooltip-icon",onClick:function(e){return!t.props.triggerOnHover&&t.toggleTooltip(void 0,e)},onMouseEnter:function(){return t.props.triggerOnHover&&t.toggleTooltip(!0)},onMouseLeave:function(){return t.props.triggerOnHover&&t.toggleTooltip(!1)}},this.props.customSvg?this.props.customSvg:a),r.createElement("div",{className:"content "+(this.props.position||"bottom")+" "+(this.props.theme||"default")+(this.state.toggle?" open":"")},this.isPositioned("bottom")&&r.createElement("div",{className:"triangle"}),!this.props.messageGroup&&r.createElement("div",{className:"message-container",style:{width:(this.props.width||120)+"px"}},this.props.title&&r.createElement("div",{className:"title"},this.props.title),r.createElement("div",{className:"message"},this.props.message||"Tooltip is empty. Please pass a message.")),this.props.messageGroup&&r.createElement("div",{className:"message-container",style:{width:(this.props.width||120)+"px"}},this.props.messageGroup.map((function(t,e){return r.createElement("div",{key:e,className:"message-list-item"},t.title&&r.createElement("div",{className:"title"},t.title),t.message&&r.createElement("div",{className:"message"},t.message))}))),(this.isPositioned("top")||this.isPositioned("right")||this.isPositioned("left"))&&r.createElement("div",{className:"triangle"})))},e}(r.Component)},628:function(t,e,o){var n=o(629);"string"==typeof n&&(n=[[t.i,n,""]]);var r={insert:"head",singleton:!1};o(58)(n,r);n.locals&&(t.exports=n.locals)},629:function(t,e,o){(t.exports=o(53)(!1)).push([t.i,'.tooltip-container{display:inline-flex;align-items:center;justify-content:center;position:relative;border-radius:4px}.tooltip-container .icon{cursor:pointer;height:25px;width:25px;margin:auto}.tooltip-container .icon svg{width:100%;height:100%;pointer-events:none;vertical-align:top}.tooltip-container .content{position:absolute;z-index:-1;opacity:0}.tooltip-container .content.open{opacity:1;z-index:2}.tooltip-container .content .message-container{position:relative;background-color:#fff;min-width:120px;box-shadow:0 1px 3px rgba(0,0,0,0.12),0 2px 2px rgba(0,0,0,0.24);padding:5px 10px 10px;text-align:center}.tooltip-container .content .message-container .title{font-weight:bold;margin-bottom:5px}.tooltip-container .content .message-container .message-list-item:not(:first-child){margin-top:10px}.tooltip-container .content .message-container .message{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.tooltip-container .content .triangle{position:relative;background-color:#fff;box-shadow:0px 3px 3px 0 rgba(0,0,0,0.4);top:-2px}.tooltip-container .content .triangle::after{content:"";position:absolute;width:0;height:0;box-sizing:border-box;border:9px solid;border-color:transparent;transform-origin:0 0;transform:rotate(-45deg);box-shadow:-2px 3px 3px -1px rgba(0,0,0,0.4);background-color:transparent;border-collapse:collapse}.tooltip-container .content.top{right:50%;top:0px;transform:translate(50%, -100%)}.tooltip-container .content.top .triangle{display:block;margin-bottom:11px;transform:translateX(-13px);text-align:center}@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){.tooltip-container .content.top .triangle{left:50%}}.tooltip-container .content.top-right{left:-13px;top:-10px;transform:translateY(-100%);text-align:left}.tooltip-container .content.top-right .triangle{left:13px;transform:unset}.tooltip-container .content.top-left{right:-13px;top:-10px;transform:translateY(-100%)}.tooltip-container .content.top-left .triangle{transform:translateX(-35px);margin-left:100%;right:3px}.tooltip-container .content.bottom{margin-top:12px;right:50%;transform:translateX(50%);margin-bottom:5px;top:100%}.tooltip-container .content.bottom .triangle{transform:translateX(-2px);display:block;text-align:center}@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){.tooltip-container .content.bottom .triangle{left:50%}}.tooltip-container .content.bottom .triangle:after{box-shadow:-3px 0px 2px -2px rgba(0,0,0,0.24);top:9px;transform:rotate(135deg);transform-origin:top}.tooltip-container .content.bottom-right{margin-top:12px;left:-12px;transform:unset;margin-bottom:5px;text-align:left;top:100%}.tooltip-container .content.bottom-right .triangle{left:22px;transform:unset}.tooltip-container .content.bottom-right .triangle:after{box-shadow:-3px 0px 2px -2px rgba(0,0,0,0.24);top:9px;transform:rotate(135deg);transform-origin:top}.tooltip-container .content.bottom-left{margin-top:12px;right:-10px;margin-bottom:5px;transform:unset;top:100%}.tooltip-container .content.bottom-left .triangle{transform:translateX(-22px);margin-left:100%;right:3px}.tooltip-container .content.bottom-left .triangle:after{box-shadow:-3px 0px 2px -2px rgba(0,0,0,0.24);top:9px;transform:rotate(135deg);transform-origin:top}.tooltip-container .content.right{transform:translateY(-50%);top:50%;left:36px}.tooltip-container .content.right .triangle{position:absolute;top:50%;transform:translateY(-13px)}.tooltip-container .content.right .triangle:after{transform:rotate(45deg);left:2px;box-shadow:-1px 5px 4px -3px rgba(0,0,0,0.24)}.tooltip-container .content.right-bottom{transform:unset;top:-11px;left:36px}.tooltip-container .content.right-bottom .triangle{position:absolute;top:11px;transform:unset}.tooltip-container .content.right-bottom .triangle:after{transform:rotate(45deg);left:2px;box-shadow:-1px 5px 4px -3px rgba(0,0,0,0.24)}.tooltip-container .content.right-top{transform:translateY(-100%);top:32px;left:36px}.tooltip-container .content.right-top .triangle{position:absolute;transform:translateY(-32px);top:100%}.tooltip-container .content.right-top .triangle:after{transform:rotate(45deg);left:2px;box-shadow:-1px 5px 4px -3px rgba(0,0,0,0.24)}.tooltip-container .content.left{right:36px;transform:translateY(-50%);top:45%}.tooltip-container .content.left .triangle{position:absolute;top:50%;right:0;transform:translateY(15px)}.tooltip-container .content.left .triangle:after{transform:rotate(225deg);left:-2px;box-shadow:-4px 1px 2px -2px rgba(0,0,0,0.24)}.tooltip-container .content.left-bottom{margin-right:1px;right:34px;top:-11px}.tooltip-container .content.left-bottom .triangle{position:absolute;top:37px;right:0}.tooltip-container .content.left-bottom .triangle:after{transform:rotate(225deg);left:-2px;box-shadow:-4px 1px 2px -2px rgba(0,0,0,0.24)}.tooltip-container .content.left-top{transform:translateY(-100%);top:32px;right:35px}.tooltip-container .content.left-top .triangle{position:absolute;transform:translateY(-6px);top:100%;right:0}.tooltip-container .content.left-top .triangle:after{transform:rotate(225deg);left:-2px;box-shadow:-4px 1px 2px -2px rgba(0,0,0,0.24)}.tooltip-container .content.default .message-container{background-color:#000;color:#fff}.tooltip-container .content.default .triangle{background-color:#000}.tooltip-container .content.default .triangle:after{border-color:transparent transparent #000 #000}.tooltip-container .content.light .message-container{background-color:#e9e9e9;color:#000}.tooltip-container .content.light .triangle{background-color:#e9e9e9}.tooltip-container .content.light .triangle:after{border-color:transparent transparent #e9e9e9 #e9e9e9}.tooltip-container .content.danger .message-container{background-color:#F03529;color:#fff}.tooltip-container .content.danger .triangle{background-color:#F03529}.tooltip-container .content.danger .triangle:after{border-color:transparent transparent #F03529 #F03529}.tooltip-container .content.warning .message-container{background-color:#FFC500;color:#fff}.tooltip-container .content.warning .triangle{background-color:#FFC500}.tooltip-container .content.warning .triangle:after{border-color:transparent transparent #FFC500 #FFC500}.tooltip-container .content.success .message-container{background-color:#60cd18;color:#fff}.tooltip-container .content.success .triangle{background-color:#60cd18}.tooltip-container .content.success .triangle:after{border-color:transparent transparent #60cd18 #60cd18}.tooltip-container .content.primary .message-container{background-color:#41B0EE;color:#fff}.tooltip-container .content.primary .triangle{background-color:#41B0EE}.tooltip-container .content.primary .triangle:after{border-color:transparent transparent #41B0EE #41B0EE}.tooltip-container .content.purple .message-container{background-color:#673AB6;color:#fff}.tooltip-container .content.purple .triangle{background-color:#673AB6}.tooltip-container .content.purple .triangle:after{border-color:transparent transparent #673AB6 #673AB6}\n',""])}}]);