mod-build 4.0.49 → 4.0.50-beta.2

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

@@ -1,242 +0,0 @@
-$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

@@ -1,30 +0,0 @@
-{{#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

@@ -1,61 +0,0 @@
-@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

@@ -1,49 +0,0 @@
-<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

@@ -1,142 +0,0 @@
-$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

@@ -1,20 +0,0 @@
-<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

@@ -1,26 +0,0 @@
-"use strict";
-
-/* global modForm */
-function updateProgressBar(index) {
-  var showStepCountOnStep1 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  // eslint-disable-line no-unused-vars
-  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

@@ -1,2 +0,0 @@
-"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

@@ -1 +0,0 @@
-{"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":"aACA,SAASA,kBAAkBC,GAAqC,IAA9BC,EAAoBC,UAAAC,OAAA,QAAAC,IAAAF,UAAA,IAAAA,UAAA,GAC/CG,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,GAEnDI,EAAYS,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,GAG5C","file":"progress-bar.min.js","sourcesContent":["/* global modForm */\nfunction updateProgressBar(index, showStepCountOnStep1 = false) { // eslint-disable-line no-unused-vars\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"]}