@keyvaluesystems/react-stepper/build/index.js

A fully customizable stepper component

/*!
 * 
 *   @keyvaluesystems/react-stepper v1.1.0
 *   git+https://github.com/KeyValueSoftwareSystems/react-stepper.git
 *
 *   Copyright (c) Keyvalue and project contributors.
 *
 *   This source code is licensed under the MIT license found in the
 *   LICENSE file in the root directory of this source tree.
 *
 */
!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n(require("react")):"function"==typeof define&&define.amd?define(["react"],n):"object"==typeof exports?exports["React Stepper"]=n(require("react")):e["React Stepper"]=n(e.react)}(this,(e=>(()=>{"use strict";var n={342:(e,n,t)=>{t.d(n,{Z:()=>a});var o=t(537),r=t.n(o),i=t(645),A=t.n(i)()(r());A.push([e.id,".YQZiU8D8fXz6FUlYYoMx{border-radius:50%;height:24px;width:24px;background:#7b7b84;color:#fff;display:flex;align-items:center;justify-content:center;overflow:visible;font-weight:400;font-size:12px;line-height:16px;margin-top:7px;margin-bottom:7px;position:relative}.aTj7eBxuaoFY1kwq3ZIA{background:#312ec0}.n_oCIMCGLeYoP3UENa_J{opacity:.4}.GqQP1MOuOgqmGBuhjbaj{background:#312ec0}.nvGmBGRVgsa80Z36Vk2Q{object-fit:cover;width:10px;height:8px}.EIQieemdrNy0QU2XBXzi{cursor:pointer}.bBUeX_5x1qVwHuORwr05{position:absolute;width:max-content;height:100%;display:flex;flex-direction:column;justify-content:center}.DtXBgzEiUtykYl2V24aJ{left:44px}.DG4ZC0f4d2f0KA7wqwUk{right:44px;align-items:end}.bBUeX_5x1qVwHuORwr05 .CRepveqvz0SY44X6OzhR{color:#4f4f4f}.bBUeX_5x1qVwHuORwr05 .q0ZOanhM1JneObi6OiGy{font-weight:700}.bBUeX_5x1qVwHuORwr05 .pmHWv8WHzsLviyl6RGUN{font-weight:400;font-size:12px;line-height:21px;color:#929292}.bBUeX_5x1qVwHuORwr05 .QKD7Tj_Z6iPdwtix2AMz{color:#676767}","",{version:3,sources:["webpack://./src/node/styles.module.scss"],names:[],mappings:"AAAA,sBACI,iBAAA,CACA,WAAA,CACA,UAAA,CACA,kBAAA,CACA,UAAA,CACA,YAAA,CACA,kBAAA,CACA,sBAAA,CACA,gBAAA,CACA,eAAA,CACA,cAAA,CACA,gBAAA,CACA,cAAA,CACA,iBAAA,CACA,iBAAA,CAEF,sBACE,kBAAA,CAEF,sBACE,UAAA,CAEF,sBACE,kBAAA,CAEF,sBACE,gBAAA,CACA,UAAA,CACA,UAAA,CAEF,sBACE,cAAA,CAGF,sBACE,iBAAA,CACA,iBAAA,CACA,WAAA,CACA,YAAA,CACA,qBAAA,CACA,sBAAA,CACA,sBACE,SAAA,CAEF,sBACE,UAAA,CACA,eAAA,CAEF,4CACE,aAAA,CAEF,4CACE,eAAA,CAEF,4CACE,eAAA,CACA,cAAA,CACA,gBAAA,CACA,aAAA,CAEF,4CACE,aAAA",sourcesContent:[".eachNode {\n    border-radius: 50%;\n    height: 24px;\n    width: 24px;\n    background: #7b7b84;\n    color: white;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: visible;\n    font-weight: 400;\n    font-size: 12px;\n    line-height: 16px;\n    margin-top: 7px;\n    margin-bottom: 7px;\n    position: relative;\n  }\n  .activeStepNode {\n    background: #312ec0;\n  }\n  .inactiveStepNode {\n    opacity: 0.4;\n  }\n  .completedStepNode {\n    background: #312ec0;\n  }\n  .whiteTickImg {\n    object-fit: cover;\n    width: 10px;\n    height: 8px;\n  }\n  .cursorPointer {\n    cursor: pointer;\n  }\n\n  .labelContainer {\n    position: absolute;\n    width: max-content;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    &__right {\n      left: 44px;\n    }\n    &__left {\n      right: 44px;\n      align-items: end;\n    }\n    .labelTitle {\n      color: #4F4F4F;\n    }\n    .activeLabelTitle {\n      font-weight: 700;\n    }\n    .labelDescription {\n      font-weight: 400;\n      font-size: 12px;\n      line-height: 21px;\n      color: #929292;\n    }\n    .activeLabelDescription {\n      color: #676767;\n    }\n  }"],sourceRoot:""}]),A.locals={eachNode:"YQZiU8D8fXz6FUlYYoMx",activeStepNode:"aTj7eBxuaoFY1kwq3ZIA",inactiveStepNode:"n_oCIMCGLeYoP3UENa_J",completedStepNode:"GqQP1MOuOgqmGBuhjbaj",whiteTickImg:"nvGmBGRVgsa80Z36Vk2Q",cursorPointer:"EIQieemdrNy0QU2XBXzi",labelContainer:"bBUeX_5x1qVwHuORwr05",labelContainer__right:"DtXBgzEiUtykYl2V24aJ",labelContainer__left:"DG4ZC0f4d2f0KA7wqwUk",labelTitle:"CRepveqvz0SY44X6OzhR",activeLabelTitle:"q0ZOanhM1JneObi6OiGy",labelDescription:"pmHWv8WHzsLviyl6RGUN",activeLabelDescription:"QKD7Tj_Z6iPdwtix2AMz"};const a=A},766:(e,n,t)=>{t.d(n,{Z:()=>a});var o=t(537),r=t.n(o),i=t(645),A=t.n(i)()(r());A.push([e.id,".stepper{margin:0;padding:1em;display:flex;font-family:inherit;list-style:none}.horizontalStepperWrapper{display:flex;flex-direction:column}.verticalStepperWrapper{display:flex;flex-direction:row;align-items:center}.labelLeft{justify-content:flex-end}.horizontalStepper{flex-flow:row nowrap;width:100%;height:fit-content;justify-content:center}.horizontalStepper .stepContainer{display:flex;flex-direction:row;height:auto;width:100%;flex-wrap:wrap;align-items:center;justify-content:center}.horizontalStepper .stepConnector{margin:0;display:flex;flex:1;background-color:#e1e1e1;overflow:hidden;width:100px;min-width:0;height:2px}.horizontalStepper .activeConnector{background-color:#312ec0}.horizontalStepper .descriptionContainer{display:flex;justify-content:center}.verticalStepper{flex-flow:column nowrap;width:fit-content;height:100%}.verticalStepper .stepContainer{display:flex;flex-direction:column;height:100%;width:auto;flex-wrap:wrap;align-items:center;justify-content:center}.verticalStepper .stepConnector{margin:0;display:flex;flex:1;background-color:#e1e1e1;overflow:hidden;height:auto;min-height:10px;width:2px}.verticalStepper .middleStepConnector{margin:0;display:flex;background-color:#e1e1e1;overflow:hidden;height:auto;min-height:10px;width:2px}.verticalStepper .activeConnector{background-color:#312ec0}.verticalStepper .descriptionContainer{display:flex}.hiddenConnector{visibility:hidden}.node{display:flex;justify-content:center;align-items:center;order:2;padding:3px}.leftConnector{order:1}.rightConnector{order:4}.labelContainer{display:flex;word-wrap:break-word;justify-content:center;order:3}.label{font-size:.9em;white-space:pre-wrap;word-wrap:break-word;padding:3px;text-align:center;font-weight:bold;display:flex;max-width:400px}.verticalStepperInlineLabel{display:flex;width:100px;justify-content:center}.reversedLabelContainer{order:2}.reversedNode{order:3}.leftDescription{flex-direction:row-reverse}.verticalTextLeftContainer{display:flex;flex-direction:column;align-items:flex-end;width:100%}.horizontalLabelTop{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;flex:2 100%}.horizontalLabelBottom{display:flex;justify-content:center;order:1}.verticalLabelRight{order:1}.description{color:#4e4b4b;padding-bottom:5px}.middleConnectorWrapper{display:flex;justify-content:flex-end}.leftContentMiddleConnectorWrapper{display:flex;justify-content:flex-start}.verticalContentWrapper{padding-left:10px;padding-right:10px}.horizontalStepperDescription{display:flex;justify-content:center}","",{version:3,sources:["webpack://./src/stepper/styles.scss"],names:[],mappings:"AAIA,SACE,QAAA,CACA,WAAA,CACA,YAAA,CACA,mBAAA,CACA,eAAA,CAGF,0BACE,YAAA,CACA,qBAAA,CAGF,wBACE,YAAA,CACA,kBAAA,CACA,kBAAA,CAGF,WACE,wBAAA,CAGF,mBACE,oBAAA,CACA,UAAA,CACA,kBAAA,CACA,sBAAA,CACA,kCACE,YAAA,CACA,kBAAA,CACA,WAAA,CACA,UAAA,CACA,cAAA,CACA,kBAAA,CACA,sBAAA,CAEF,kCACE,QAAA,CACA,YAAA,CACA,MAAA,CACA,wBA7CS,CA8CT,eAAA,CACA,WAAA,CACA,WAAA,CACA,UAAA,CAEF,oCACE,wBAAA,CAEF,yCACE,YAAA,CACA,sBAAA,CAKJ,iBACE,uBAAA,CACA,iBAAA,CACA,WAAA,CACA,gCACE,YAAA,CACA,qBAAA,CACA,WAAA,CACA,UAAA,CACA,cAAA,CACA,kBAAA,CACA,sBAAA,CAEF,gCACE,QAAA,CACA,YAAA,CACA,MAAA,CACA,wBA9ES,CA+ET,eAAA,CACA,WAAA,CACA,eAAA,CACA,SAAA,CAEF,sCACE,QAAA,CACA,YAAA,CACA,wBAvFS,CAwFT,eAAA,CACA,WAAA,CACA,eAAA,CACA,SAAA,CAEF,kCACE,wBAAA,CAEF,uCACE,YAAA,CAMJ,iBACE,iBAAA,CAGF,MACE,YAAA,CACA,sBAAA,CACA,kBAAA,CACA,OAAA,CACA,WAAA,CAEF,eACE,OAAA,CAEF,gBACE,OAAA,CAGF,gBACE,YAAA,CACA,oBAAA,CACA,sBAAA,CACA,OAAA,CAGF,OACE,cAAA,CACA,oBAAA,CACA,oBAAA,CACA,WAAA,CACA,iBAAA,CACA,gBAAA,CACA,YAAA,CACA,eAAA,CAGF,4BACE,YAAA,CACA,WAAA,CACA,sBAAA,CAGF,wBACE,OAAA,CAGF,cACE,OAAA,CAGF,iBACE,0BAAA,CAEF,2BACE,YAAA,CACA,qBAAA,CACA,oBAAA,CACA,UAAA,CAGF,oBACE,YAAA,CACA,qBAAA,CACA,wBAAA,CACA,kBAAA,CACA,WAAA,CAGF,uBACE,YAAA,CACA,sBAAA,CACA,OAAA,CAGF,oBACE,OAAA,CAGF,aACE,aAAA,CACA,kBAAA,CAGF,wBACE,YAAA,CACA,wBAAA,CAGF,mCACE,YAAA,CACA,0BAAA,CAGF,wBACE,iBAAA,CACA,kBAAA,CAGF,8BACE,YAAA,CACA,sBAAA",sourcesContent:["$grey-color: #e1e1e1;\n$active-color: #312ec0;\n$completed-color: #47aed6;\n\n.stepper {\n  margin: 0;\n  padding: 1em;\n  display: flex;\n  font-family: inherit;\n  list-style: none;\n}\n\n.horizontalStepperWrapper {\n  display: flex;\n  flex-direction: column;\n}\n\n.verticalStepperWrapper {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n.labelLeft {\n  justify-content: flex-end;\n}\n\n.horizontalStepper {\n  flex-flow: row nowrap;\n  width: 100%;\n  height: fit-content;\n  justify-content: center;\n  .stepContainer {\n    display: flex;\n    flex-direction: row;\n    height: auto;\n    width: 100%;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n  }\n  .stepConnector {\n    margin: 0;\n    display: flex;\n    flex: 1;\n    background-color: $grey-color;\n    overflow: hidden;\n    width: 100px;\n    min-width: 0;\n    height: 2px;\n  }\n  .activeConnector {\n    background-color: #312ec0;\n  }\n  .descriptionContainer {\n    display: flex;\n    justify-content: center;\n  }\n  \n}\n\n.verticalStepper {\n  flex-flow: column nowrap;\n  width: fit-content;\n  height: 100%;\n  .stepContainer {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    width: auto;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n  }\n  .stepConnector {\n    margin: 0;\n    display: flex;\n    flex: 1;\n    background-color: $grey-color;\n    overflow: hidden;\n    height: auto;\n    min-height: 10px;\n    width: 2px;\n  }\n  .middleStepConnector {\n    margin: 0;\n    display: flex;\n    background-color: $grey-color;\n    overflow: hidden;\n    height: auto;\n    min-height: 10px;\n    width: 2px;\n  }\n  .activeConnector {\n    background-color: #312ec0;\n  }\n  .descriptionContainer {\n    display: flex;\n  }\n  \n}\n\n\n.hiddenConnector {\n  visibility: hidden;\n}\n\n.node {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  order: 2;\n  padding: 3px;\n}\n.leftConnector {\n  order: 1;\n}\n.rightConnector {\n  order: 4;\n}\n\n.labelContainer {\n  display: flex;\n  word-wrap: break-word;\n  justify-content: center;\n  order: 3;\n}\n\n.label {\n  font-size: 0.9em;\n  white-space: pre-wrap;\n  word-wrap: break-word;\n  padding: 3px;\n  text-align: center;\n  font-weight: bold;\n  display: flex;\n  max-width: 400px;\n}\n\n.verticalStepperInlineLabel {\n  display: flex;\n  width: 100px;\n  justify-content: center;\n}\n\n.reversedLabelContainer {\n  order: 2;\n}\n\n.reversedNode {\n  order: 3;\n}\n\n.leftDescription {\n  flex-direction: row-reverse;\n}\n.verticalTextLeftContainer {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  width: 100%;\n}\n\n.horizontalLabelTop {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  align-items: center;\n  flex: 2 100%;\n}\n\n.horizontalLabelBottom {\n  display: flex;\n  justify-content: center;\n  order: 1;\n}\n\n.verticalLabelRight {\n  order: 1;\n}\n\n.description {\n  color: #4e4b4b;\n  padding-bottom: 5px;\n}\n\n.middleConnectorWrapper {\n  display: flex;\n  justify-content: flex-end;;\n}\n\n.leftContentMiddleConnectorWrapper { \n  display: flex;\n  justify-content: flex-start;\n}\n\n.verticalContentWrapper {\n  padding-left: 10px;\n  padding-right: 10px;\n}\n\n.horizontalStepperDescription {\n  display: flex;\n  justify-content: center;;\n}\n"],sourceRoot:""}]);const a=A},645:e=>{e.exports=function(e){var n=[];return n.toString=function(){return this.map((function(n){var t="",o=void 0!==n[5];return n[4]&&(t+="@supports (".concat(n[4],") {")),n[2]&&(t+="@media ".concat(n[2]," {")),o&&(t+="@layer".concat(n[5].length>0?" ".concat(n[5]):""," {")),t+=e(n),o&&(t+="}"),n[2]&&(t+="}"),n[4]&&(t+="}"),t})).join("")},n.i=function(e,t,o,r,i){"string"==typeof e&&(e=[[null,e,void 0]]);var A={};if(o)for(var a=0;a<this.length;a++){var l=this[a][0];null!=l&&(A[l]=!0)}for(var c=0;c<e.length;c++){var s=[].concat(e[c]);o&&A[s[0]]||(void 0!==i&&(void 0===s[5]||(s[1]="@layer".concat(s[5].length>0?" ".concat(s[5]):""," {").concat(s[1],"}")),s[5]=i),t&&(s[2]?(s[1]="@media ".concat(s[2]," {").concat(s[1],"}"),s[2]=t):s[2]=t),r&&(s[4]?(s[1]="@supports (".concat(s[4],") {").concat(s[1],"}"),s[4]=r):s[4]="".concat(r)),n.push(s))}},n}},537:e=>{e.exports=function(e){var n=e[1],t=e[3];if(!t)return n;if("function"==typeof btoa){var o=btoa(unescape(encodeURIComponent(JSON.stringify(t)))),r="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(o),i="/*# ".concat(r," */");return[n].concat([i]).join("\n")}return[n].join("\n")}},379:e=>{var n=[];function t(e){for(var t=-1,o=0;o<n.length;o++)if(n[o].identifier===e){t=o;break}return t}function o(e,o){for(var i={},A=[],a=0;a<e.length;a++){var l=e[a],c=o.base?l[0]+o.base:l[0],s=i[c]||0,p="".concat(c," ").concat(s);i[c]=s+1;var d=t(p),C={css:l[1],media:l[2],sourceMap:l[3],supports:l[4],layer:l[5]};if(-1!==d)n[d].references++,n[d].updater(C);else{var f=r(C,o);o.byIndex=a,n.splice(a,0,{identifier:p,updater:f,references:1})}A.push(p)}return A}function r(e,n){var t=n.domAPI(n);t.update(e);return function(n){if(n){if(n.css===e.css&&n.media===e.media&&n.sourceMap===e.sourceMap&&n.supports===e.supports&&n.layer===e.layer)return;t.update(e=n)}else t.remove()}}e.exports=function(e,r){var i=o(e=e||[],r=r||{});return function(e){e=e||[];for(var A=0;A<i.length;A++){var a=t(i[A]);n[a].references--}for(var l=o(e,r),c=0;c<i.length;c++){var s=t(i[c]);0===n[s].references&&(n[s].updater(),n.splice(s,1))}i=l}}},569:e=>{var n={};e.exports=function(e,t){var o=function(e){if(void 0===n[e]){var t=document.querySelector(e);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(e){t=null}n[e]=t}return n[e]}(e);if(!o)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");o.appendChild(t)}},216:e=>{e.exports=function(e){var n=document.createElement("style");return e.setAttributes(n,e.attributes),e.insert(n,e.options),n}},565:(e,n,t)=>{e.exports=function(e){var n=t.nc;n&&e.setAttribute("nonce",n)}},795:e=>{e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var n=e.insertStyleElement(e);return{update:function(t){!function(e,n,t){var o="";t.supports&&(o+="@supports (".concat(t.supports,") {")),t.media&&(o+="@media ".concat(t.media," {"));var r=void 0!==t.layer;r&&(o+="@layer".concat(t.layer.length>0?" ".concat(t.layer):""," {")),o+=t.css,r&&(o+="}"),t.media&&(o+="}"),t.supports&&(o+="}");var i=t.sourceMap;i&&"undefined"!=typeof btoa&&(o+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),n.styleTagTransform(o,e,n.options)}(n,e,t)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(n)}}}},589:e=>{e.exports=function(e,n){if(n.styleSheet)n.styleSheet.cssText=e;else{for(;n.firstChild;)n.removeChild(n.firstChild);n.appendChild(document.createTextNode(e))}}},156:n=>{n.exports=e}},t={};function o(e){var r=t[e];if(void 0!==r)return r.exports;var i=t[e]={id:e,exports:{}};return n[e](i,i.exports,o),i.exports}o.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return o.d(n,{a:n}),n},o.d=(e,n)=>{for(var t in n)o.o(n,t)&&!o.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:n[t]})},o.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.nc=void 0;var r={};return(()=>{o.r(r),o.d(r,{default:()=>k});var e=o(156),n=o.n(e),t=o(379),i=o.n(t),A=o(795),a=o.n(A),l=o(569),c=o.n(l),s=o(565),p=o.n(s),d=o(216),C=o.n(d),f=o(589),u=o.n(f),m=o(766),h={};h.styleTagTransform=u(),h.setAttributes=p(),h.insert=c().bind(null,"head"),h.domAPI=a(),h.insertStyleElement=C();i()(m.Z,h);m.Z&&m.Z.locals&&m.Z.locals;var v,x,y;!function(e){e.LEFT="left",e.RIGHT="right",e.TOP="top",e.BOTTOM="bottom"}(v||(v={})),function(e){e.HORIZONTAL="horizontal",e.VERTICAL="vertical"}(x||(x={})),function(e){e.LabelDescription="LabelDescription",e.LabelTitle="LabelTitle",e.ActiveLabelTitle="ActiveLabelTitle",e.ActiveLabelDescription="ActiveLabelDescription",e.LineSeparator="LineSeparator",e.InactiveLineSeparator="InactiveLineSeparator",e.Node="Node",e.ActiveNode="ActiveNode",e.InActiveNode="InActiveNode",e.CompletedNode="CompletedNode"}(y||(y={}));const g=function(e,n,t,o){var r=e[n];return r?r(t,o):{}};var b=function(){return b=Object.assign||function(e){for(var n,t=1,o=arguments.length;t<o;t++)for(var r in n=arguments[t])Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r]);return e},b.apply(this,arguments)};const w=function(e){var t=e.labelPosition,o=e.isVertical,r=e.currentStepIndex,i=e.index,A=e.styles,a=e.step,l=e.showDescriptionsForAllSteps,c=e.middleConnectorClassName,s=e.stepContent,p=e.nodeWidth;return n().createElement("div",{className:"descriptionContainer ".concat("left"===t?"labelLeft leftDescription":"")},o&&n().createElement("div",{className:t===v.LEFT?"leftContentMiddleConnectorWrapper":"middleConnectorWrapper",style:{width:p/2+1}},n().createElement("div",{className:c,style:b({},a.completed?g(A,y.LineSeparator,a,i)||{}:g(A,y.InactiveLineSeparator,a,i)||{})})),n().createElement("div",{className:o?"verticalContentWrapper":""},a.stepDescription&&(l||i===r)&&n().createElement("div",{className:"description",id:"step-description-".concat(i),style:b({},r===i?g(A,y.ActiveLabelDescription,a,i)||{}:g(A,y.LabelDescription,a,i)||{})},a.stepDescription),o&&i===r&&s&&s(a,i)))};var E=o(342),S={};S.styleTagTransform=u(),S.setAttributes=p(),S.insert=c().bind(null,"head"),S.domAPI=a(),S.insertStyleElement=C();i()(E.Z,S);const B=E.Z&&E.Z.locals?E.Z.locals:void 0;const L=function(e){var t=e.step,o=e.renderNode,r=e.index,i=e.currentStepIndex,A=e.handleStepClick,a=e.showCursor,l=(e.getStyles,e.nodeStyle),c=t.completed,s=r===i;return n().createElement("div",{className:"".concat(B.eachNode,"\n      ").concat(a&&B.cursorPointer,"\n      ").concat(s&&B.activeStepNode,"\n      ").concat(!c&&!s&&B.inactiveStepNode,"\n      ").concat(c&&!s&&B.completedStepNode,"\n      "),style:l,onClick:function(){return A&&A()},role:"presentation",id:"stepper-node"},o&&o(t,r)||n().createElement(n().Fragment,null,c?n().createElement("img",{src:"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xIDQuMjMwNzdMMy44MjM1MyA3TDkgMSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==",className:B.whiteTickImg,alt:""}):r+1))};const N=function(e,n){return e!==x.VERTICAL?n===v.TOP?"horizontalLabelTop":n===v.LEFT||n===v.RIGHT?"":"horizontalLabelBottom":n===v.RIGHT?"verticalLabelRight":void 0};var T=function(){return T=Object.assign||function(e){for(var n,t=1,o=arguments.length;t<o;t++)for(var r in n=arguments[t])Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r]);return e},T.apply(this,arguments)};const I=function(e){var t,o=e.orientation,r=e.labelPosition,i=e.isVertical,A=e.isInlineLabelsAndSteps,a=e.index,l=e.currentStepIndex,c=e.step,s=e.showDescriptionsForAllSteps,p=e.onStepClick,d=e.renderNode,C=e.styles,f=e.nodeRef,u=e.prevConnectorClassName,m=e.nextConnectorClassName,h=e.steps,b=e.completedNodeStyle,w=e.currentNodeStyle;return n().createElement("div",{id:"stepper-step",className:i?"verticalStepperWrapper ".concat(r===v.LEFT?"labelLeft":""):"horizontalStepperWrapper"},!A&&n().createElement("div",{className:N(o,r),onClick:function(){return p&&p(c,a)}},n().createElement("div",{className:"label",id:"step-label-".concat(a),style:T(T({},g(C,y.LabelTitle,c,a)||{}),a===l&&(g(C,y.ActiveLabelTitle,c,a)||{}))},c.stepLabel),c.stepDescription&&(s||a===l)&&o!==x.VERTICAL&&r===v.TOP&&n().createElement("div",{className:"description",id:"step-horizontal-top-description-".concat(a),style:T({},l===a?g(C,y.ActiveLabelDescription,c,a)||{}:g(C,y.LabelDescription,c,a)||{})},c.stepDescription)),n().createElement("div",{className:"stepContainer",id:"".concat(a,"-node"),ref:f},n().createElement("div",{className:u,style:T({},(null===(t=h[a-1])||void 0===t?void 0:t.completed)?g(C,y.LineSeparator,c,a)||{}:g(C,y.InactiveLineSeparator,c,a)||{})}),n().createElement("div",{className:"node ".concat([v.TOP,v.LEFT].includes(r)?"reversedNode":"")},n().createElement(L,{step:c,index:a,currentStepIndex:l,handleStepClick:function(){return p&&p(c,a)},showCursor:!!p,renderNode:d,getStyles:function(e){return g(C,e,c,a)},nodeStyle:function(){var e=g(C,y.Node,c,a),n=c.completed,t=a===l,o=function(){switch(!0){case n:return{elementStyle:y.CompletedNode,customStyle:b};case t:return{elementStyle:y.ActiveNode,customStyle:w};default:return{elementStyle:y.InActiveNode,customStyle:void 0}}}(),r=o.elementStyle,i=o.customStyle;return T(T(T({},e),g(C,r,c,a)),i||{})}()})),A&&n().createElement("div",{className:"labelContainer ".concat([v.TOP,v.LEFT].includes(r)?"reversedLabelContainer":"")},n().createElement("div",{className:"label ".concat(i&&"verticalStepperInlineLabel"),id:"step-inline-label-".concat(a),style:T(T({},g(C,y.LabelTitle,c,a)||{}),a===l&&(g(C,y.ActiveLabelTitle,c,a)||{})),onClick:function(){return p&&p(c,a)}},c.stepLabel)),n().createElement("div",{className:m,style:T({},c.completed?g(C,y.LineSeparator,c,a)||{}:g(C,y.InactiveLineSeparator,c,a)||{})})))};var F=function(){return F=Object.assign||function(e){for(var n,t=1,o=arguments.length;t<o;t++)for(var r in n=arguments[t])Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r]);return e},F.apply(this,arguments)};const j=function(t){var o,r,i=t.stepperProps,A=t.step,a=t.index,l=i.steps,c=i.currentStepIndex,s=void 0===c?0:c,p=i.styles,d=void 0===p?{}:p,C=i.labelPosition,f=void 0===C?v.RIGHT:C,u=i.orientation,m=void 0===u?x.VERTICAL:u,h=i.showDescriptionsForAllSteps,y=void 0!==h&&h,g=i.stepContent,b=i.onStepClick,E=i.renderNode,S=i.completedNodeStyle,B=i.currentNodeStyle,L=(0,e.useState)(0),N=L[0],T=L[1],j=m===x.VERTICAL,k=j&&![v.LEFT,v.RIGHT].includes(f)||!j&&[v.LEFT,v.RIGHT].includes(f),O=(0,e.useRef)(null);(0,e.useEffect)((function(){var e=O.current;if(e){var n=e.getBoundingClientRect().width;T(n)}}),[l,f,m]);var R="stepConnector leftConnector ".concat((null===(o=l[a-1])||void 0===o?void 0:o.completed)?"activeConnector":""," ").concat(0===a?"hiddenConnector":""),G="stepConnector rightConnector ".concat((null===(r=l[a])||void 0===r?void 0:r.completed)?"activeConnector":""," ").concat(a===l.length-1?"hiddenConnector":""),z="middleStepConnector ".concat(s>a?"activeConnector":""," ").concat(a===l.length-1?"hiddenConnector":""),D={orientation:m,labelPosition:f,isVertical:j,isInlineLabelsAndSteps:k,index:a,currentStepIndex:s,step:A,showDescriptionsForAllSteps:y,onStepClick:b,renderNode:E,styles:d,nodeRef:O,prevConnectorClassName:R,nextConnectorClassName:G,steps:l,completedNodeStyle:S,currentNodeStyle:B};return m!==x.VERTICAL&&f===v.TOP?n().createElement(I,F({},D)):n().createElement("div",{className:m===x.VERTICAL&&f===v.LEFT?"verticalTextLeftContainer":""},n().createElement(I,F({},D)),n().createElement(w,{labelPosition:f,isVertical:j,currentStepIndex:s,index:a,styles:d,step:A,showDescriptionsForAllSteps:y,middleConnectorClassName:z,stepContent:g,nodeWidth:N}))};const k=function(e){var t=e.steps,o=e.currentStepIndex,r=void 0===o?0:o,i=e.orientation,A=void 0===i?x.VERTICAL:i,a=e.stepContent,l=A===x.VERTICAL;return n().createElement(n().Fragment,null,n().createElement("ul",{className:"stepper ".concat(l?"verticalStepper":"horizontalStepper")},t.map((function(t,o){return n().createElement(j,{key:"".concat(t.stepLabel,"-").concat(t.stepDescription),stepperProps:e,step:t,index:o})}))),!l&&a&&a(t[r],r))}})(),r})()));
//# sourceMappingURL=index.js.map