mod-build 4.0.21 → 4.0.22-beta.2

package/src/shared-components/input/_input.scss

@@ -0,0 +1,242 @@
+$form-input-bg-color: $color-white !default;
+$form-input-border: 1px solid $color-charcoal1 !default;
+$form-input-border-radius: 4px !default;
+$form-input-box-shadow: inset 2px 1px 2px 0 rgba($color-black, .08), inset -2px 0px 2px 0 rgba($color-black, .08) !default;
+$form-input-color: $color-charcoal5 !default;
+$form-input-font-size: 16px !default;
+$form-input-font-weight: 400 !default;
+$form-input-height: 48px !default;
+$form-input-line-height: 1.1875 !default;
+$form-input-margin: 0 0 15px !default;
+$form-input-padding: 15px !default;
+$form-input-placeholder-color: $color-charcoal2 !default;
+$form-input-placeholder-color-desktop: $form-input-placeholder-color !default;
+$form-input-transition-time: .15s !default;
+$form-input-zip-width: 200px !default;
+
+$form-input-focus-bg-color: $form-input-bg-color !default;
+$form-input-focus-border: 1px solid $color-charcoal2 !default;
+
+$form-group-includes-label-background-color: transparent !default;
+$form-group-label-in-input-color: $color-charcoal5 !default;
+$form-group-label-in-input-focus-color: $color-blue5 !default;
+$form-group-label-in-input-focus-font-size: 12px !default;
+$form-group-label-in-input-focus-font-weight: 600 !default;
+$form-group-label-in-input-focus-top-position: 5px !default;
+$form-group-label-in-input-error-color: $color-red5 !default;
+$form-group-label-in-input-focus-z-index: 0 !default;
+
+$form-group-label-wrapper-display: block !default;
+$form-group-label-centered-padding: 0 !default;
+
+$form-input-error-color: $color-red5 !default;
+$form-input-error-border: 1px solid $form-input-error-color !default;
+$form-input-error-box-shadow: inset 0 1px 1px rgba($color-black, .08) !default;
+$form-input-error-focus-border-color: #E34B2B !default;
+$form-input-error-focus-box-shadow: inset 0 1px 1px rgba($color-black, .08), 0 0 6px #F5BEB2 !default;
+$form-input-icon-error-bg-color: $color-red2 !default;
+$form-input-icon-error-color: $color-red5 !default;
+$form-input-group-error-border-width: 0 !default;
+$form-input-group-input-error-border: $form-input-error-border !default;
+
+$form-input-icon-bg-color: transparent !default;
+$form-input-icon-box-shadow: inset 2px 1px 2px 0 rgba($color-black, .08) !default;
+$form-input-icon-color: $color-charcoal1 !default;
+$form-input-icon-focus-color: $form-input-icon-color !default;
+$form-input-icon-width: 44px !default;
+$form-input-group-input-box-shadow: inset -2px 1px 2px 0 rgba($color-black, .08) !default;
+$form-input-group-width: 100% !default;
+
+.form-input-group {
+	&--icon {
+		border: $form-input-border;
+		border-radius: $form-input-border-radius;
+		display: inline-flex;
+		margin: $form-input-margin;
+		width: $form-input-group-width;
+
+		&:focus-within {
+			border: $form-input-focus-border;
+			box-shadow: none;
+
+			.form-input-group__icon {
+				box-shadow: none;
+			}
+		}
+
+		&:has(.form-input-group--includes-label) {
+			&:has(.form-input:not(:placeholder-shown)),
+			&:has(.form-input:-webkit-autofill),
+			&:has(.form-input:-webkit-autofill:hover),
+			&:has(.form-input:-webkit-autofill:focus),
+			&:has(.form-input:focus) {
+				.form-input-group__icon {
+					color: $form-input-icon-focus-color;
+				}
+			}
+		}
+	}
+
+	&--includes-label {
+		display: $form-group-label-wrapper-display;
+		position: relative;
+
+		.form-input {
+			background-color: $form-group-includes-label-background-color;
+
+			&::placeholder {
+				opacity: 0;
+			}
+
+			+ label {
+				cursor: text;
+				color: $form-group-label-in-input-color;
+			}
+
+			&:not(:placeholder-shown),
+			&:-webkit-autofill,
+			&:-webkit-autofill:hover,
+			&:-webkit-autofill:focus,
+			&:focus {
+				background-color: $form-input-focus-bg-color;
+				border: $form-input-focus-border;
+
+				+ label {
+					color: $form-group-label-in-input-focus-color;
+					font-size: $form-group-label-in-input-focus-font-size;
+					font-weight: $form-group-label-in-input-focus-font-weight;
+					top: $form-group-label-in-input-focus-top-position;
+					z-index: $form-group-label-in-input-focus-z-index;
+				}
+			}
+
+			&.label-centered {
+				& + label {
+					left: 0;
+					right: 0;
+					padding: $form-group-label-centered-padding;
+				}
+			}
+		}
+	}
+}
+
+.form-input-group__icon {
+	align-items: center;
+	background-color: $form-input-icon-bg-color;
+	border-radius: $form-input-border-radius 0 0 $form-input-border-radius;
+	box-shadow: $form-input-icon-box-shadow;
+	color: $form-input-icon-color;
+	display: inline-flex;
+	flex: 0 0 $form-input-icon-width;
+	height: $form-input-height;
+	justify-content: center;
+	transition: all $form-input-transition-time ease-in-out;
+}
+
+.form-input-group--icon .form-input {
+	border: 0;
+	border-radius: 0 $form-input-border-radius $form-input-border-radius 0;
+	box-shadow: $form-input-group-input-box-shadow;
+	margin: 0;
+	transition: all $form-input-transition-time ease-in-out;
+	width: $form-input-group-width;
+
+	&:focus {
+		border: 0;
+	}
+}
+
+.form-input {
+	background-color: $form-input-bg-color;
+	border: $form-input-border;
+	border-radius: $form-input-border-radius;
+	box-shadow: $form-input-box-shadow;
+	color: $form-input-color;
+	font-size: $form-input-font-size;
+	font-weight: $form-input-font-weight;
+	height: $form-input-height;
+	line-height: $form-input-line-height;
+	margin: $form-input-margin;
+	padding: $form-input-padding;
+	position: relative;
+	transition: background-color $form-input-transition-time ease-in-out, border-color $form-input-transition-time ease-in-out, box-shadow $form-input-transition-time ease-in-out;
+	width: 100%;
+
+	&::-webkit-input-placeholder {
+		color: $form-input-placeholder-color;
+	}
+
+	&::-ms-input-placeholder {
+		color: $form-input-placeholder-color;
+	}
+
+	&::placeholder {
+		color: $form-input-placeholder-color;
+	}
+
+	&:focus {
+		background-color: $form-input-focus-bg-color;
+		border: $form-input-focus-border;
+		box-shadow: none;
+	}
+
+	&.zip {
+		width: $form-input-zip-width;
+	}
+}
+
+.has-error .form-input {
+	border: $form-input-error-border;
+	box-shadow: $form-input-error-box-shadow;
+	color: $form-input-error-color;
+
+	&:focus {
+		border-color: $form-input-error-focus-border-color;
+		box-shadow: $form-input-error-focus-box-shadow;
+	}
+}
+
+.has-error .form-input-group--icon {
+	border-color: $form-input-error-color;
+	border-width: $form-input-group-error-border-width;
+	box-shadow: none;
+}
+
+.has-error .form-input-group--icon .form-input {
+	border: $form-input-group-input-error-border;
+}
+
+.has-error .form-input-group--includes-label {
+	.form-input {
+		&:not(:placeholder-shown),
+		&:focus {
+			+ label {
+				color: $form-group-label-in-input-error-color;
+			}
+		}
+	}
+}
+
+.has-error .form-input-group__icon {
+	background-color: $form-input-icon-error-bg-color;
+	box-shadow: none;
+	color: $form-input-icon-error-color;
+}
+
+@include breakpoint-sm {
+	.form-input {
+		&::-webkit-input-placeholder {
+			color: $form-input-placeholder-color-desktop;
+		}
+
+		&::-ms-input-placeholder {
+			color: $form-input-placeholder-color-desktop;
+		}
+
+		&::placeholder {
+			color: $form-input-placeholder-color-desktop;
+		}
+	}
+
+}

package/src/shared-components/input/input.html

@@ -0,0 +1,30 @@
+{{#xif "this.field.icon || this.field.hasToolTip || this.field.iconImageUrl"}}
+<div class="form-input-group{{#xif 'this.field.icon || this.field.iconImageUrl'}} form-input-group--icon{{/xif}}">
+	{{#if this.field.icon}}
+	<span class="form-input-group__icon">
+		<i class="{{this.field.icon}}"></i>
+	</span>
+	{{/if}}
+	{{#if this.field.iconImageUrl}}
+	<span class="form-input-group__icon">
+		<img src="{{this.field.iconImageUrl}}">
+	</span>
+	{{/if}}
+{{/xif}}
+	{{#if this.field.labelInInput}}<div class="form-input-group form-input-group--includes-label">{{/if}}
+		<input
+			type="{{this.field.type}}"
+			id="{{#if this.field.id}}{{this.field.id}}{{else}}{{this.field.name}}{{/if}}"
+			class="form-input {{this.field.class}}"
+			name="{{this.field.name}}"
+			{{#if this.field.placeholder}}placeholder="{{this.field.placeholder}}"{{/if}}
+			{{#if this.field.maxLength}}maxlength="{{this.field.maxLength}}"{{/if}}
+			{{#if this.field.required}}data-required="{{this.field.required}}"{{/if}}
+			{{#if this.field.value}}value="{{this.field.value}}"{{/if}}
+			{{#if this.field.min}}data-{{this.field.required}}-min="{{this.field.min}}"{{/if}}
+			{{#if this.field.saveField}}data-save{{/if}}
+			{{#if this.field.readonly}}readonly{{/if}}
+			{{#if this.extraAttributes}}{{#each this.extraAttributes}}{{{this.attributeName}}}="{{{this.attributeValue}}}"{{/each}}{{/if}}
+		/>
+	{{#if this.field.labelInInput}}<label for="{{#if this.field.id}}{{this.field.id}}{{else}}{{this.field.name}}{{/if}}" class="form-group__label-input">{{{this.field.labelInInput}}}</label></div>{{/if}}
+{{#xif "this.field.icon || this.field.hasToolTip || this.field.iconImageUrl"}}</div>{{/xif}}

package/src/shared-components/preloader/_preloader.scss

@@ -0,0 +1,61 @@
+@keyframes fadeOut {
+	from {
+		opacity: 1;
+		z-index: 9;
+	}
+
+	to {
+		opacity: 0;
+		z-index: -1;
+	}
+}
+
+@keyframes animateArrowUp {
+	0% {
+		opacity: 0;
+		padding-top: 150px;
+	}
+
+	40% {
+		opacity: 1;
+		padding-top: 0;
+	}
+
+	100% {
+		opacity: 1;
+		padding-top: 0;
+	}
+}
+
+.preloader {
+	animation: fadeOut 250ms 1250ms ease forwards;
+	background-color: $color-white;
+	display: block;
+	height: 100%;
+	opacity: 1;
+	position: fixed;
+	width: 100%;
+	z-index: 9;
+
+	&__text {
+		color: $color-charcoal5;
+		font-size: 22px;
+		font-weight: 700;
+		padding-bottom: 30px;
+		padding-top: 200px;
+		text-align: center;
+	}
+
+	&__logo {
+		margin: 0 auto;
+		max-width: 310px;
+		padding-bottom: 30px;
+	}
+
+	&__arrow {
+		animation: animateArrowUp 1000ms 450ms ease-out forwards;
+		opacity: 0;
+		margin: 0 auto;
+		max-width: 72px;
+	}
+}

package/src/shared-components/preloader/preloader.html

@@ -0,0 +1,49 @@
+<div class="preloader">
+    <div class="preloader__text">{{this.preloader.text}}</div>
+    <div class="preloader__logo{{#if this.preloader.logo.class}} {{this.preloader.logo.class}}{{/if}}">
+        {{#if this.preloader.logo}}
+            {{#xif "this.preloader.logo.tag === 'img'"}}
+                <img src="{{#if this.preloader.logo.localSrc}}{{this.preloader.logo.localSrc}}{{else}}https://{{x 'process.env.NODE_ENV'}}/quote/resources/assets/{{this.preloader.logo.src}}{{/if}}" alt="{{this.preloader.logo.altText}}">
+            {{/xif}}
+            {{#xif "this.preloader.logo.tag === 'picture'"}}
+                <picture>
+                    <source media="{{#if this.preloader.logo.media}}{{this.preloader.logo.media}}{{/if}}" srcset="{{#if this.preloader.logo.localSrcset}}{{this.preloader.logo.localSrcset}}{{else}}https://{{x 'process.env.NODE_ENV'}}/quote/resources/assets/{{this.preloader.logo.srcset}}{{/if}}" {{{this.preloader.logo.pictureSourceAttributes}}}>
+                    <img src="{{#if this.preloader.logo.localSrc}}{{this.preloader.logo.localSrc}}{{else}}https://{{x 'process.env.NODE_ENV'}}/quote/resources/assets/{{this.preloader.logo.src}}{{/if}}" alt="{{this.preloader.logo.altText}}">
+                </picture>
+            {{/xif}}
+            {{#xif "this.preloader.logo.tag === 'svg'"}}
+                <svg>
+                    <use href="{{#if this.preloader.logo.localSrc}}{{this.preloader.logo.localSrc}}{{else}}https://{{x 'process.env.NODE_ENV'}}/quote/resources/assets/{{this.preloader.logo.src}}{{/if}}"></use>
+                </svg>
+            {{/xif}}
+        {{else}}
+            {{#xif "this.header.logo.tag === 'img'"}}
+                <img src="{{#if this.header.logo.localSrc}}{{this.header.logo.localSrc}}{{else}}https://{{x 'process.env.NODE_ENV'}}/quote/resources/assets/{{this.header.logo.src}}{{/if}}" alt="{{this.header.logo.altText}}">
+            {{/xif}}
+            {{#xif "this.header.logo.tag === 'picture'"}}
+                <picture>
+                    <source media="{{#if this.header.logo.media}}{{this.header.logo.media}}{{/if}}" srcset="{{#if this.header.logo.localSrcset}}{{this.header.logo.localSrcset}}{{else}}https://{{x 'process.env.NODE_ENV'}}/quote/resources/assets/{{this.header.logo.srcset}}{{/if}}" {{{this.header.logo.pictureSourceAttributes}}}>
+                    <img src="{{#if this.header.logo.localSrc}}{{this.header.logo.localSrc}}{{else}}https://{{x 'process.env.NODE_ENV'}}/quote/resources/assets/{{this.header.logo.src}}{{/if}}" alt="{{this.header.logo.altText}}">
+                </picture>
+            {{/xif}}
+            {{#xif "this.header.logo.tag === 'svg'"}}
+                <svg>
+                    <use href="{{#if this.header.logo.localSrc}}{{this.header.logo.localSrc}}{{else}}https://{{x 'process.env.NODE_ENV'}}/quote/resources/assets/{{this.header.logo.src}}{{/if}}"></use>
+                </svg>
+            {{/xif}}
+        {{/if}}
+    </div>
+    {{#if this.preloader.showArrows}}
+        <div class="preloader__arrow"><img src="https://{{x 'process.env.NODE_ENV'}}/quote/resources/assets/images/illustrations/misc/pre-landing-page-arrow.svg" alt=""></div>
+    {{/if}}
+</div>
+<script>
+    if (!window.localStorage.getItem('pr')) {
+        window.localStorage.setItem('pr', true);
+        setTimeout(function() {
+            window.document.querySelector('.preloader').remove();
+        }, 1500);
+    } else {
+        window.document.querySelector('.preloader').remove();
+    }
+</script>

package/src/shared-components/progress-bar/_progress-bar.scss

@@ -0,0 +1,142 @@
+$progress-bar-background-color: $color-green1 !default;
+$progress-bar-background-color-desktop: $progress-bar-background-color !default;
+$progress-bar-border-radius: 4px !default;
+$progress-bar-border-radius-desktop: 4px !default;
+$progress-bar-height: 5px !default;
+$progress-bar-height-desktop: $progress-bar-height !default;
+$progress-bar-margin: 0 0 15px !default;
+$progress-bar-position: relative !default;
+$progress-bar-width: 100% !default;
+
+$progress-bar-fill-border-radius: $progress-bar-border-radius !default;
+$progress-bar-fill-color: $color-green4 !default;
+$progress-bar-fill-color-desktop: $progress-bar-fill-color !default;
+$progress-bar-fill-percentage-color: $color-white !default;
+$progress-bar-fill-percentage-font-size: 16px !default;
+$progress-bar-fill-percentage-font-weight: 400 !default;
+$progress-bar-fill-percentage-height: 28px !default;
+$progress-bar-all-devices-padding: 30px 35px 0 !default;
+$progress-bar-all-devices-padding-desktop: 0 !default;
+
+$progress-bar-title-color: #8A8A8A !default;
+$progress-bar-title-letter-spacing: 1px !default;
+$progress-bar-title-font-size: 11px !default;
+$progress-bar-title-margin: 0 0 4px !default;
+$progress-bar-title-text-transform: uppercase !default;
+
+.progress-bar {
+	margin: $progress-bar-margin;
+	position: $progress-bar-position;
+	width: $progress-bar-width;
+	z-index: 2;
+
+	&__title {
+		color: $progress-bar-title-color;
+		display: block;
+		font-size: $progress-bar-title-font-size;
+		letter-spacing: $progress-bar-title-letter-spacing;
+		margin: $progress-bar-title-margin;
+		position: relative;
+		text-transform: $progress-bar-title-text-transform;
+		white-space: nowrap;
+	}
+
+	&__percentage {
+		position: absolute;
+		right: 0;
+	}
+
+	&__background,
+	&__fill {
+		background-color: $progress-bar-background-color;
+		border-radius: $progress-bar-border-radius;
+		height: $progress-bar-height;
+		position: relative;
+		width: 100%;
+		z-index: 1;
+	}
+
+	&__fill {
+		background-color: $progress-bar-fill-color;
+		border-radius: $progress-bar-fill-border-radius;
+		position: absolute;
+		top: 0;
+		width: 0;
+		z-index: 2;
+
+		.progress-bar__percentage {
+			color: $progress-bar-fill-percentage-color;
+			font-size: $progress-bar-fill-percentage-font-size;
+			font-weight: $progress-bar-fill-percentage-font-weight;
+			position: relative;
+			right: auto;
+			text-align: center;
+			width: 100%;
+		}
+	}
+
+	&--includes-fill-percentage-on-all-devices {
+		padding: $progress-bar-all-devices-padding;
+
+		.progress-bar {
+			&__background,
+			&__fill {
+				border-radius: $progress-bar-border-radius-desktop;
+				height: auto;
+				line-height: $progress-bar-fill-percentage-height;;
+				min-height: $progress-bar-fill-percentage-height;;
+			}
+
+			&__fill {
+				position: relative;
+			}
+
+			&__percentage {
+				display: block;
+
+			}
+		}
+	}
+}
+
+@include breakpoint-sm {
+	.progress-bar {
+		&__background,
+		&__fill {
+			border-radius: $progress-bar-border-radius-desktop;
+		}
+
+		&__background {
+			background-color: $progress-bar-background-color-desktop;
+		}
+
+		&__fill {
+			background-color: $progress-bar-fill-color-desktop;
+		}
+
+		&--includes-fill-percentage-on-all-devices {
+			padding: $progress-bar-all-devices-padding-desktop;
+		}
+
+		&:not(.progress-bar--includes-fill-percentage-on-all-devices) {
+			&.progress-bar--includes-fill-percentage {
+				.progress-bar {
+					&__background,
+					&__fill {
+						height: auto;
+						line-height: $progress-bar-fill-percentage-height;;
+						min-height: $progress-bar-fill-percentage-height;;
+					}
+
+					&__fill {
+						position: relative;
+					}
+
+					&__percentage {
+						display: block;
+					}
+				}
+			}
+		}
+	}
+}

package/src/shared-components/progress-bar/progress-bar.html

@@ -0,0 +1,20 @@
+<div class="progress-bar{{#if this.bar.classModifier}} {{this.bar.classModifier}}{{/if}}{{#xif "this.bar.includePercentage === 'fill'"}} progress-bar--includes-fill-percentage{{#if this.bar.showPercentageOnAllDevices}} progress-bar--includes-fill-percentage-on-all-devices{{/if}}{{/xif}}">
+	{{#if this.bar.title}}
+		<div class="progress-bar__title">
+			{{{this.bar.title}}}
+			{{#xif "this.bar.includePercentage === 'title'"}}
+				<span class="progress-bar__percentage"></span>
+			{{/xif}}
+		</div>
+	{{/if}}
+	{{#if this.bar.includeStepCount}}
+		<div class="progress-bar__title">Step <span class="progress-bar__current"></span> of <span class="progress-bar__total"></span></div>
+	{{/if}}
+	<div class="progress-bar__background">
+		<div class="progress-bar__fill">
+			{{#xif "this.bar.includePercentage === 'fill'"}}
+				<span class="progress-bar__percentage"></span>
+			{{/xif}}
+		</div>
+	</div>
+</div>

package/src/shared-components/progress-bar/progress-bar.js

@@ -0,0 +1,25 @@
+"use strict";
+
+/* global modForm */
+function updateProgressBar(index) {
+  var showStepCountOnStep1 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var stepCount = modForm.opts.steps.length,
+    fillElement = document.querySelector('.progress-bar__fill'),
+    percentageElement = document.querySelector('.progress-bar__percentage'),
+    totalStepsElement = document.querySelector('.progress-bar__total'),
+    currentStepElement = document.querySelector('.progress-bar__current'),
+    width = Math.min(100, 100 * index / stepCount - 1);
+  fillElement.style.width = width + '%';
+  if (percentageElement) {
+    percentageElement.textContent = Math.round(width) + '%';
+  }
+  if (currentStepElement) {
+    if (showStepCountOnStep1 === true) {
+      totalStepsElement.textContent = stepCount;
+      currentStepElement.textContent = index;
+    } else {
+      totalStepsElement.textContent = stepCount - 1;
+      currentStepElement.textContent = index - 1;
+    }
+  }
+}

package/src/shared-components/progress-bar/progress-bar.min.js

@@ -0,0 +1,2 @@
+"use strict";function updateProgressBar(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1],r=modForm.opts.steps.length,o=document.querySelector(".progress-bar__fill"),n=document.querySelector(".progress-bar__percentage"),s=document.querySelector(".progress-bar__total"),u=document.querySelector(".progress-bar__current"),c=Math.min(100,100*t/r-1);o.style.width=c+"%",n&&(n.textContent=Math.round(c)+"%"),u&&(!0===e?(s.textContent=r,u.textContent=t):(s.textContent=r-1,u.textContent=t-1))}
+//# sourceMappingURL=progress-bar.min.js.map

package/src/shared-components/progress-bar/progress-bar.min.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["shared-components/progress-bar/progress-bar.js"],"names":["updateProgressBar","index","showStepCountOnStep1","arguments","length","undefined","stepCount","modForm","opts","steps","fillElement","document","querySelector","percentageElement","totalStepsElement","currentStepElement","width","Math","min","style","textContent","round"],"mappings":"YACA,SAASA,mBAAmBC,GAAqC,GAA9BC,GAAoBC,UAAAC,OAAA,OAAAC,KAAAF,UAAA,IAAAA,UAAA,GAChDG,EAAaC,QAAQC,KAAKC,MAAML,OACrCM,EAAcC,SAASC,cAAc,uBACrCC,EAAoBF,SAASC,cAAc,6BAC3CE,EAAoBH,SAASC,cAAc,wBAC3CG,EAAqBJ,SAASC,cAAc,0BAC5CI,EAAQC,KAAKC,IAAI,IAAK,IAAOjB,EAASK,EAAY,EAEnDI,GAAYS,MAAMH,MAAQA,EAAQ,IAC9BH,IACHA,EAAkBO,YAAcH,KAAKI,MAAML,GAAS,KAEjDD,KAC0B,IAAzBb,GACHY,EAAkBM,YAAcd,EAChCS,EAAmBK,YAAcnB,IAEjCa,EAAkBM,YAAcd,EAAY,EAC5CS,EAAmBK,YAAcnB,EAAQ","file":"progress-bar.min.js","sourcesContent":["/* global modForm */\nfunction updateProgressBar (index, showStepCountOnStep1 = false) {\n\tconst stepCount =  modForm.opts.steps.length,\n\t\tfillElement = document.querySelector('.progress-bar__fill'),\n\t\tpercentageElement = document.querySelector('.progress-bar__percentage'),\n\t\ttotalStepsElement = document.querySelector('.progress-bar__total'),\n\t\tcurrentStepElement = document.querySelector('.progress-bar__current'),\n\t\twidth = Math.min(100, 100 * (index) / stepCount - 1);\n\n\tfillElement.style.width = width + '%';\n\tif (percentageElement) {\n\t\tpercentageElement.textContent = Math.round(width) + '%';\n\t}\n\tif (currentStepElement) {\n\t\tif (showStepCountOnStep1 === true) {\n\t\t\ttotalStepsElement.textContent = stepCount;\n\t\t\tcurrentStepElement.textContent = index;\n\t\t} else {\n\t\t\ttotalStepsElement.textContent = stepCount - 1;\n\t\t\tcurrentStepElement.textContent = index - 1;\n\t\t}\n\t}\n}\n"]}