{"display":"form","type":"form","components":[{"id":"ej5ckq","key":"simplecontent","html":"","type":"simplecontent","input":false,"label":"Text/Images","addons":[],"hidden":false,"prefix":"","suffix":"","unique":false,"widget":null,"dbIndex":false,"overlay":{"top":"","left":"","style":"","width":"","height":""},"tooltip":"","disabled":false,"multiple":false,"redrawOn":"","tabindex":"","validate":{"custom":"","unique":false,"multiple":false,"required":false,"customPrivate":false,"strictDateValidation":false},"autofocus":false,"encrypted":false,"hideLabel":false,"modalEdit":false,"protected":false,"refreshOn":"","tableView":false,"attributes":{},"errorLabel":"","persistent":true,"properties":{},"validateOn":"change","clearOnHide":true,"conditional":{"eq":"","json":"","show":null,"when":null},"customClass":"","description":"","placeholder":"","defaultValue":null,"dataGridLabel":false,"labelPosition":"top","showCharCount":false,"showWordCount":false,"calculateValue":"","calculateServer":false,"customConditional":"","allowMultipleMasks":false,"customDefaultValue":"","allowCalculateOverride":false},{"id":"emgmtfv","key":"simplepanel","tree":false,"type":"simplepanel","input":false,"label":"Panel","theme":"default","title":"Panel","addons":[],"hidden":false,"prefix":"","suffix":"","unique":false,"widget":null,"dbIndex":false,"overlay":{"top":"","left":"","style":"","width":"","height":""},"tooltip":"","disabled":false,"lazyLoad":false,"multiple":false,"redrawOn":"","tabindex":"","validate":{"custom":"","unique":false,"multiple":false,"required":false,"customPrivate":false,"strictDateValidation":false},"autofocus":false,"collapsed":false,"encrypted":false,"hideLabel":false,"modalEdit":false,"protected":false,"refreshOn":"","tableView":false,"attributes":{},"breadcrumb":"default","components":[{"id":"e7u5deb","key":"simplecontent6","html":"<p>Tab Component With Progress Bar</p>","type":"simplecontent","input":false,"label":"Text/Images","addons":[],"hidden":false,"prefix":"","suffix":"","unique":false,"widget":null,"dbIndex":false,"overlay":{"top":"","left":"","style":"","width":"","height":""},"tooltip":"","disabled":false,"multiple":false,"redrawOn":"","tabindex":"","validate":{"custom":"","unique":false,"multiple":false,"required":false,"customPrivate":false,"strictDateValidation":false},"autofocus":false,"encrypted":false,"hideLabel":false,"modalEdit":false,"protected":false,"refreshOn":"","tableView":false,"attributes":{},"errorLabel":"","persistent":true,"properties":{},"validateOn":"change","clearOnHide":true,"conditional":{"eq":"","json":"","show":null,"when":null},"customClass":"","description":"","placeholder":"","defaultValue":null,"dataGridLabel":false,"labelPosition":"top","showCharCount":false,"showWordCount":false,"calculateValue":"","calculateServer":false,"customConditional":"","allowMultipleMasks":false,"customDefaultValue":"","allowCalculateOverride":false},{"id":"ee9i00f","key":"html1","tag":"div","tags":[],"type":"htmlelement","attrs":[{"attr":"","value":""}],"input":false,"label":"HTML","logic":[{"name":"stepper","actions":[],"trigger":{"type":"javascript","javascript":"let cssId = 'myCss'; \r\nconst head  = document.getElementsByTagName('head')[0];\r\nif (!document.getElementById(cssId))\r\n{\r\n    const link  = document.createElement('link');\r\n    link.id   = cssId;\r\n    link.rel  = 'stylesheet';\r\n    link.type = 'text/css';\r\n    link.href = 'https://timisenco2015.github.io/formulator.github.com/css/chefsCustom.css';\r\n    link.media = 'all';\r\n    head.appendChild(link);\r\n    \r\n    const script = document.createElement('script');\r\n    script.type = 'text/javascript';\r\n    script.src = 'https://cdn.form.io/formiojs/formio.full.min.js';    \r\n    head.appendChild(script);\r\n}"}}],"addons":[],"hidden":false,"prefix":"","suffix":"","unique":false,"widget":null,"content":"<ol class=\"c-stepper\">\r\n    <li class=\"c-stepper__item active\">\r\n        <h3 class=\"c-stepper__title\">Step 1</h3>\r\n        <p class=\"c-stepper__desc\">Facility Information</p>\r\n    </li>\r\n    <li class=\"c-stepper__item disabled\">\r\n        <h3 class=\"c-stepper__title\">Step 2</h3>\r\n        <p class=\"c-stepper__desc\">Bed Occupancy</p>\r\n    </li>\r\n     <li class=\"c-stepper__item disabled\">\r\n        <h3 class=\"c-stepper__title\">Step 3</h3>\r\n        <p class=\"c-stepper__desc\">Staffing Level</p>\r\n    </li>\r\n     <li class=\"c-stepper__item disabled\">\r\n        <h3 class=\"c-stepper__title\">Step 4</h3>\r\n        <p class=\"c-stepper__desc\">Operating Level</p>\r\n    </li>\r\n    <!-- Other steps -->\r\n</ol>","dbIndex":false,"overlay":{"top":"","left":"","page":"","style":"","width":"","height":""},"tooltip":"","disabled":false,"multiple":false,"redrawOn":"","tabindex":"","validate":{"custom":"","unique":false,"multiple":false,"required":false,"customPrivate":false,"strictDateValidation":false},"autofocus":false,"className":"stepperss","encrypted":false,"hideLabel":false,"modalEdit":false,"protected":false,"refreshOn":"","tableView":false,"attributes":{},"errorLabel":"","labelWidth":"","persistent":false,"properties":{},"validateOn":"change","clearOnHide":true,"conditional":{"eq":"","json":"","show":null,"when":null},"customClass":"","description":"","labelMargin":"","placeholder":"","defaultValue":null,"dataGridLabel":false,"labelPosition":"top","showCharCount":false,"showWordCount":false,"calculateValue":"","calculateServer":false,"refreshOnChange":false,"customConditional":"","allowMultipleMasks":false,"customDefaultValue":"","allowCalculateOverride":false},{"id":"exl9adc","key":"data","tags":[],"tree":false,"type":"tabs","input":false,"label":"data","logic":[{"name":"Progress stepper event","actions":[{"name":"Progress stepper change event","type":"customAction","customAction":"const { root} = instance;\r\nroot.setPristine(false);\r\n\r\nconst comp = root ? root.getComponent('data') : null;\r\nconst index = comp.currentTab;\r\n\r\nconst progressStepper = document.querySelectorAll(\".stepperss ol li\");\r\nleftOfIndex(index);\r\n\r\nrightOfIndex(index, progressStepper.length)\r\nprogressStepper[index].classList.remove('errors');\r\nprogressStepper[index].classList.remove('disabled');\r\nprogressStepper[index].classList.add('active');\r\nprogressStepper[index].classList.remove('completed');\r\n\r\n\r\nfunction leftOfIndex(index){\r\n  for(let i=0; i<index; i++) {\r\n    if(i===0) {\r\n      if(!validateFacilityInformationTabComponents()) {\r\n        progressStepper[i].classList.remove('completed');\r\n        progressStepper[i].classList.remove('disabled');\r\n        progressStepper[i].classList.remove('active');\r\n        progressStepper[i].classList.add('errors');\r\n      } else {\r\n        progressStepper[i].classList.remove('errors');\r\n        progressStepper[i].classList.remove('disabled');\r\n        progressStepper[i].classList.remove('active');\r\n        progressStepper[i].classList.add('completed');\r\n      } \r\n    } else {\r\n      progressStepper[i].classList.remove('errors');\r\n      progressStepper[i].classList.remove('disabled');\r\n      progressStepper[i].classList.remove('active');\r\n      progressStepper[i].classList.add('completed');\r\n    }\r\n  }\r\n}\r\nfunction rightOfIndex(index, endIndex){\r\n  for (let i=(endIndex-1); i>index; i--){\r\n    progressStepper[i].classList.remove('completed');\r\n    progressStepper[i].classList.remove('errors');\r\n    progressStepper[i].classList.remove('active');\r\n    progressStepper[i].classList.add('disabled');\r\n  }\r\n}\r\n\r\nfunction validateFacilityInformationTabComponents() {\r\n  const firstNameComp = root.getComponent('firstName');\r\n  const lastNameComp = root.getComponent('lastName');\r\n  let isAllFieldValue = true;\r\n  isAllFieldValue = firstNameComp.checkValidity();\r\n  isAllFieldValue = lastNameComp.checkValidity();\r\n  return isAllFieldValue;\r\n}"}],"trigger":{"type":"event","event":"change"}}],"addons":[],"hidden":false,"prefix":"","suffix":"","unique":false,"widget":null,"dbIndex":false,"overlay":{"top":"","left":"","page":"","style":"","width":"","height":""},"tooltip":"","disabled":false,"lazyLoad":false,"multiple":false,"redrawOn":"","tabindex":"","validate":{"custom":"","unique":false,"multiple":false,"required":false,"customPrivate":false,"strictDateValidation":false},"autofocus":false,"encrypted":false,"hideLabel":false,"modalEdit":false,"protected":false,"refreshOn":"","tableView":false,"attributes":{},"components":[{"key":"facilityInformation","label":"Facility Information","components":[{"id":"ezmreml","key":"simplecontent2","html":"<p>First Tab</p>","type":"simplecontent","input":false,"label":"Text/Images","addons":[],"hidden":false,"prefix":"","suffix":"","unique":false,"widget":null,"dbIndex":false,"overlay":{"top":"","left":"","style":"","width":"","height":""},"tooltip":"","disabled":false,"multiple":false,"redrawOn":"","tabindex":"","validate":{"custom":"","unique":false,"multiple":false,"required":false,"customPrivate":false,"strictDateValidation":false},"autofocus":false,"encrypted":false,"hideLabel":false,"modalEdit":false,"protected":false,"refreshOn":"","tableView":false,"attributes":{},"errorLabel":"","persistent":true,"properties":{},"validateOn":"change","clearOnHide":true,"conditional":{"eq":"","show":null,"when":null},"customClass":"","description":"","placeholder":"","defaultValue":null,"dataGridLabel":false,"labelPosition":"top","showCharCount":false,"showWordCount":false,"calculateValue":"","calculateServer":false,"allowMultipleMasks":false,"customDefaultValue":"","allowCalculateOverride":false}]},{"key":"bedOccupancy","label":"Bed Occupancy","components":[{"id":"eb9c8s","key":"simplecontent3","html":"<p>Second Tab</p>","type":"simplecontent","input":false,"label":"Text/Images","addons":[],"hidden":false,"prefix":"","suffix":"","unique":false,"widget":null,"dbIndex":false,"overlay":{"top":"","left":"","style":"","width":"","height":""},"tooltip":"","disabled":false,"multiple":false,"redrawOn":"","tabindex":"","validate":{"custom":"","unique":false,"multiple":false,"required":false,"customPrivate":false,"strictDateValidation":false},"autofocus":false,"encrypted":false,"hideLabel":false,"modalEdit":false,"protected":false,"refreshOn":"","tableView":false,"attributes":{},"errorLabel":"","persistent":true,"properties":{},"validateOn":"change","clearOnHide":true,"conditional":{"eq":"","show":null,"when":null},"customClass":"","description":"","placeholder":"","defaultValue":null,"dataGridLabel":false,"labelPosition":"top","showCharCount":false,"showWordCount":false,"calculateValue":"","calculateServer":false,"allowMultipleMasks":false,"customDefaultValue":"","allowCalculateOverride":false}]},{"key":"staffingLevel","label":"Staffing Level","components":[{"id":"emdrw69","key":"simplecontent4","html":"<p>Third Tab</p>","type":"simplecontent","input":false,"label":"Text/Images","addons":[],"hidden":false,"prefix":"","suffix":"","unique":false,"widget":null,"dbIndex":false,"overlay":{"top":"","left":"","style":"","width":"","height":""},"tooltip":"","disabled":false,"multiple":false,"redrawOn":"","tabindex":"","validate":{"custom":"","unique":false,"multiple":false,"required":false,"customPrivate":false,"strictDateValidation":false},"autofocus":false,"encrypted":false,"hideLabel":false,"modalEdit":false,"protected":false,"refreshOn":"","tableView":false,"attributes":{},"errorLabel":"","persistent":true,"properties":{},"validateOn":"change","clearOnHide":true,"conditional":{"eq":"","show":null,"when":null},"customClass":"","description":"","placeholder":"","defaultValue":null,"dataGridLabel":false,"labelPosition":"top","showCharCount":false,"showWordCount":false,"calculateValue":"","calculateServer":false,"allowMultipleMasks":false,"customDefaultValue":"","allowCalculateOverride":false}]},{"key":"operatingRevenue","label":"Operating Revenue","components":[{"id":"e7r3m9r","key":"simplecontent5","html":"<p>Fourth Tab</p>","type":"simplecontent","input":false,"label":"Text/Images","addons":[],"hidden":false,"prefix":"","suffix":"","unique":false,"widget":null,"dbIndex":false,"overlay":{"top":"","left":"","style":"","width":"","height":""},"tooltip":"","disabled":false,"multiple":false,"redrawOn":"","tabindex":"","validate":{"custom":"","unique":false,"multiple":false,"required":false,"customPrivate":false,"strictDateValidation":false},"autofocus":false,"encrypted":false,"hideLabel":false,"modalEdit":false,"protected":false,"refreshOn":"","tableView":false,"attributes":{},"errorLabel":"","persistent":true,"properties":{},"validateOn":"change","clearOnHide":true,"conditional":{"eq":"","show":null,"when":null},"customClass":"","description":"","placeholder":"","defaultValue":null,"dataGridLabel":false,"labelPosition":"top","showCharCount":false,"showWordCount":false,"calculateValue":"","calculateServer":false,"allowMultipleMasks":false,"customDefaultValue":"","allowCalculateOverride":false}]}],"errorLabel":"","labelWidth":"","persistent":false,"properties":{},"validateOn":"change","clearOnHide":true,"conditional":{"eq":"","json":"","show":null,"when":null},"customClass":"progressStepper","description":"","labelMargin":"","placeholder":"","defaultValue":null,"dataGridLabel":false,"labelPosition":"top","showCharCount":false,"showWordCount":false,"calculateValue":"","verticalLayout":false,"calculateServer":false,"customConditional":"","allowMultipleMasks":false,"customDefaultValue":"","allowCalculateOverride":false},{"id":"en6xcjm","key":"columns","tags":[],"tree":false,"type":"columns","input":false,"label":"Columns","logic":[],"addons":[],"hidden":false,"prefix":"","suffix":"","unique":false,"widget":null,"columns":[{"pull":5,"push":"","size":"md","width":2,"offset":0,"components":[{"id":"e7vg4g","key":"previous","size":"md","tags":[],"type":"button","block":false,"input":true,"label":"Previous","logic":[],"theme":"primary","action":"custom","addons":[],"custom":"const tab = form.getComponent('data');\nconst progressStepper = document.querySelectorAll(\".stepperss ol li\");\nconst index = tab.currentTab;\nprogressStepper[index].classList.remove('errors');\nprogressStepper[index].classList.remove('completed');\nprogressStepper[index].classList.remove('active');\nprogressStepper[index].classList.add('disabled');\nprogressStepper[(index-1)].classList.add('active');\nprogressStepper[(index-1)].classList.remove('errors');\nprogressStepper[(index-1)].classList.remove('completed');\ntab.setTab((index-1));","hidden":false,"prefix":"","suffix":"","unique":false,"widget":{"type":"input"},"dbIndex":false,"overlay":{"top":"","left":"","page":"","style":"","width":"","height":""},"tooltip":"","disabled":false,"leftIcon":"","multiple":false,"redrawOn":"","shortcut":"","tabindex":"","validate":{"custom":"","unique":false,"multiple":false,"required":false,"customPrivate":false,"strictDateValidation":false},"autofocus":false,"encrypted":false,"hideLabel":false,"modalEdit":false,"protected":false,"refreshOn":"","rightIcon":"","tableView":false,"attributes":{},"errorLabel":"","labelWidth":"","persistent":false,"properties":{},"validateOn":"change","clearOnHide":true,"conditional":{"eq":"","json":"","show":null,"when":null},"customClass":"","description":"","labelMargin":"","placeholder":"","defaultValue":null,"dataGridLabel":true,"labelPosition":"top","showCharCount":false,"showWordCount":false,"calculateValue":"","calculateServer":false,"showValidations":false,"disableOnInvalid":false,"customConditional":"","allowMultipleMasks":false,"customDefaultValue":"","allowCalculateOverride":false}],"currentWidth":2},{"pull":5,"push":"","size":"md","width":2,"offset":0,"components":[{"id":"e8xdj4hg","key":"next","size":"md","tags":[],"type":"button","block":false,"input":true,"label":"Next","logic":[],"theme":"primary","action":"custom","addons":[],"custom":"const tab = form.getComponent('data');\nconst index = tab.currentTab;\nconst progressStepper = document.querySelectorAll(\".stepperss ol li\");\nprogressStepper[index].classList.remove('active');\nprogressStepper[index].classList.remove('disabled');\nprogressStepper[index].classList.remove('errors');\nprogressStepper[index].classList.add('completed');\nprogressStepper[(index+1)].classList.add('active');\nprogressStepper[(index+1)].classList.remove('disabled');\nprogressStepper[(index+1)].classList.remove('errors');\nprogressStepper[(index+1)].classList.remove('completed');\ntab.setTab((index+1)); ","hidden":false,"prefix":"","suffix":"","unique":false,"widget":{"type":"input"},"dbIndex":false,"overlay":{"top":"","left":"","page":"","style":"","width":"","height":""},"tooltip":"","disabled":false,"leftIcon":"","multiple":false,"redrawOn":"","shortcut":"","tabindex":"","validate":{"custom":"","unique":false,"multiple":false,"required":false,"customPrivate":false,"strictDateValidation":false},"autofocus":false,"encrypted":false,"hideLabel":false,"modalEdit":false,"protected":false,"refreshOn":"","rightIcon":"","tableView":false,"attributes":{},"errorLabel":"","labelWidth":"","persistent":false,"properties":{},"validateOn":"change","clearOnHide":true,"conditional":{"eq":"","json":"","show":null,"when":null},"customClass":"","description":"","labelMargin":"","placeholder":"","defaultValue":null,"dataGridLabel":true,"labelPosition":"top","showCharCount":false,"showWordCount":false,"calculateValue":"","calculateServer":false,"showValidations":false,"disableOnInvalid":false,"customConditional":"","allowMultipleMasks":false,"customDefaultValue":"","allowCalculateOverride":false}],"currentWidth":2}],"dbIndex":false,"overlay":{"top":"","left":"","page":"","style":"","width":"","height":""},"tooltip":"","disabled":false,"lazyLoad":false,"multiple":false,"redrawOn":"","tabindex":"","validate":{"custom":"","unique":false,"multiple":false,"required":false,"customPrivate":false,"strictDateValidation":false},"autofocus":false,"encrypted":false,"hideLabel":false,"modalEdit":false,"protected":false,"refreshOn":"","tableView":false,"attributes":{},"autoAdjust":true,"errorLabel":"","labelWidth":"","persistent":false,"properties":{},"validateOn":"change","clearOnHide":false,"conditional":{"eq":"","json":"","show":null,"when":null},"customClass":"","description":"","labelMargin":"","placeholder":"","defaultValue":null,"dataGridLabel":false,"labelPosition":"top","showCharCount":false,"showWordCount":false,"calculateValue":"","calculateServer":false,"customConditional":"","allowMultipleMasks":false,"customDefaultValue":"","allowCalculateOverride":false}],"errorLabel":"","labelWidth":"","persistent":false,"properties":{},"validateOn":"change","clearOnHide":false,"collapsible":false,"conditional":{"eq":"","json":"","show":null,"when":null},"customClass":"","description":"","labelMargin":"","placeholder":"","defaultValue":null,"dataGridLabel":false,"labelPosition":"top","showCharCount":false,"showWordCount":false,"calculateValue":"","calculateServer":false,"customConditional":"","allowMultipleMasks":false,"customDefaultValue":"","allowCalculateOverride":false}]}