mod-build 3.6.71 → 4.0.0-alpha.1

package/src/accessible-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/accessible-components/preloader/preloader.html

@@ -0,0 +1,23 @@
+<div class="preloader{{#if this.preloader.attributes.class}} {{this.preloader.attributes.class}}{{/if}}" {{{addAttributes this.preloader 'class'}}}>
+    <div class="preloader__text">{{this.preloader.text}}</div>
+    <div class="preloader__logo{{#if this.preloader.logo.attributes.class}} {{this.preloader.logo.attributes.class}}{{/if}}" {{{addAttributes this.preloader.logo 'class'}}}>
+        {{#if this.preloader.logo}}
+			{{ fileInclude 'src/accessible-components/picture/picture.html'
+				picture = this.preloader.logo.picture
+			}}
+        {{/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/accessible-components/progress-bar/_progress-bar.scss

@@ -0,0 +1,119 @@
+$progress-bar-background-color: $color-charcoal1 !default;
+$progress-bar-border-radius: 0 !default;
+$progress-bar-border-radius-desktop: 4px !default;
+$progress-bar-display: none !default;
+$progress-bar-height: 5px !default;
+$progress-bar-margin: 0 !default;
+$progress-bar-margin-desktop: 0 0 15px !default;
+$progress-bar-position-top: unset !default;
+$progress-bar-position-left: unset !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-charcoal6 !default;
+$progress-bar-fill-percentage-color: $color-white !default;
+$progress-bar-fill-percentage-height: 28px !default;
+$progress-bar-fill-percentage-font-size: 1rem !default;
+$progress-bar-fill-transition: width .65s !default;
+
+$progress-bar-title-color: $color-charcoal4 !default;
+$progress-bar-title-letter-spacing: .03rem !default;
+$progress-bar-title-font-size: .75rem !default;
+$progress-bar-title-margin: 0 0 4px !default;
+$progress-bar-title-text-transform: none !default;
+
+$progress-bar-inprogress-display: block !default;
+
+.progress-bar {
+	display: $progress-bar-display;
+	left: $progress-bar-position-left;
+	margin: $progress-bar-margin;
+	position: $progress-bar-position;
+	top: $progress-bar-position-top;
+	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;
+		transition: $progress-bar-fill-transition;
+		width: 0;
+		z-index: 2;
+	}
+
+	&__percentage {
+		display: none;
+	}
+}
+
+.form-in-progress {
+	.progress-bar {
+		display: $progress-bar-inprogress-display;
+	}
+}
+
+@include breakpoint-md {
+	.progress-bar {
+		margin: $progress-bar-margin-desktop;
+
+		&__background,
+		&__fill {
+			border-radius: $progress-bar-border-radius-desktop;
+		}
+
+		&--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 {
+					color: $progress-bar-fill-percentage-color;
+					display: block;
+					font-size: $progress-bar-fill-percentage-font-size;
+					position: relative;
+					right: auto;
+					text-align: center;
+					width: 100%;
+				}
+			}
+
+		}
+	}
+}

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

@@ -0,0 +1,21 @@
+<div class="progress-bar{{#xif 'this.bar && this.bar.attributes && this.bar.attributes.class'}} {{this.bar.attributes.class}}{{/xif}}{{#xif "this.bar && this.bar.includePercentage && this.bar.includePercentage === 'fill'"}} progress-bar--includes-fill-percentage{{/xif}}" {{#if this.bar}}{{{addAttributes this.bar 'class'}}}{{/if}}>
+	{{#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 && this.bar.includePercentage && this.bar.includePercentage === 'fill'"}}
+				<span class="visually-hidden">Form Progress</span>
+				<span class="progress-bar__percentage"></span>
+			{{/xif}}
+		</div>
+	</div>
+</div>

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

@@ -0,0 +1,37 @@
+"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.querySelectorAll('.progress-bar__fill'),
+    percentageElement = document.querySelectorAll('.progress-bar__percentage'),
+    totalStepsElement = document.querySelectorAll('.progress-bar__total'),
+    currentStepElement = document.querySelectorAll('.progress-bar__current'),
+    width = Math.min(100, 100 * index / stepCount - 1);
+  fillElement.forEach(function (fill) {
+    fill.style.width = width + '%';
+  });
+  if (percentageElement) {
+    percentageElement.forEach(function (percent) {
+      percent.textContent = Math.round(width) + '%';
+    });
+  }
+  if (currentStepElement) {
+    if (showStepCountOnStep1 === true) {
+      totalStepsElement.forEach(function (total) {
+        total.textContent = stepCount;
+      });
+      currentStepElement.forEach(function (current) {
+        current.textContent = index;
+      });
+    } else {
+      totalStepsElement.forEach(function (total) {
+        total.textContent = stepCount - 1;
+      });
+      currentStepElement.forEach(function (current) {
+        current.textContent = index - 1;
+      });
+    }
+  }
+}

package/src/accessible-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],o=modForm.opts.steps.length,r=document.querySelectorAll(".progress-bar__fill"),n=document.querySelectorAll(".progress-bar__percentage"),c=document.querySelectorAll(".progress-bar__total"),u=document.querySelectorAll(".progress-bar__current"),l=Math.min(100,100*t/o-1);r.forEach(function(t){t.style.width=l+"%"}),n&&n.forEach(function(t){t.textContent=Math.round(l)+"%"}),u&&(!0===e?(c.forEach(function(t){t.textContent=o}),u.forEach(function(e){e.textContent=t})):(c.forEach(function(t){t.textContent=o-1}),u.forEach(function(e){e.textContent=t-1})))}
+//# sourceMappingURL=progress-bar.min.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["accessible-components/progress-bar/progress-bar.js"],"names":["updateProgressBar","index","showStepCountOnStep1","arguments","length","undefined","stepCount","modForm","opts","steps","fillElement","document","querySelectorAll","percentageElement","totalStepsElement","currentStepElement","width","Math","min","forEach","fill","style","percent","textContent","round","total","current"],"mappings":"YACA,SAASA,mBAAmBC,GAAqC,GAA9BC,GAAoBC,UAAAC,OAAA,OAAAC,KAAAF,UAAA,IAAAA,UAAA,GAChDG,EAAaC,QAAQC,KAAKC,MAAML,OACrCM,EAAcC,SAASC,iBAAiB,uBACxCC,EAAoBF,SAASC,iBAAiB,6BAC9CE,EAAoBH,SAASC,iBAAiB,wBAC9CG,EAAqBJ,SAASC,iBAAiB,0BAC/CI,EAAQC,KAAKC,IAAI,IAAK,IAAOjB,EAASK,EAAY,EAEnDI,GAAYS,QAAQ,SAACC,GACpBA,EAAKC,MAAML,MAAQA,EAAQ,MAExBH,GACHA,EAAkBM,QAAQ,SAACG,GAC1BA,EAAQC,YAAcN,KAAKO,MAAMR,GAAS,MAGxCD,KAC0B,IAAzBb,GACHY,EAAkBK,QAAQ,SAACM,GAC1BA,EAAMF,YAAcjB,IAErBS,EAAmBI,QAAQ,SAACO,GAC3BA,EAAQH,YAActB,MAGvBa,EAAkBK,QAAQ,SAACM,GAC1BA,EAAMF,YAAcjB,EAAY,IAEjCS,EAAmBI,QAAQ,SAACO,GAC3BA,EAAQH,YAActB,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.querySelectorAll('.progress-bar__fill'),\n\t\tpercentageElement = document.querySelectorAll('.progress-bar__percentage'),\n\t\ttotalStepsElement = document.querySelectorAll('.progress-bar__total'),\n\t\tcurrentStepElement = document.querySelectorAll('.progress-bar__current'),\n\t\twidth = Math.min(100, 100 * (index) / stepCount - 1);\n\n\tfillElement.forEach((fill) => {\n\t\tfill.style.width = width + '%';\n\t});\n\tif (percentageElement) {\n\t\tpercentageElement.forEach((percent) => {\n\t\t\tpercent.textContent = Math.round(width) + '%';\n\t\t});\n\t}\n\tif (currentStepElement) {\n\t\tif (showStepCountOnStep1 === true) {\n\t\t\ttotalStepsElement.forEach((total) => {\n\t\t\t\ttotal.textContent = stepCount;\n\t\t\t});\n\t\t\tcurrentStepElement.forEach((current) => {\n\t\t\t\tcurrent.textContent = index;\n\t\t\t});\n\t\t} else {\n\t\t\ttotalStepsElement.forEach((total) => {\n\t\t\t\ttotal.textContent = stepCount - 1;\n\t\t\t});\n\t\t\tcurrentStepElement.forEach((current) => {\n\t\t\t\tcurrent.textContent = index - 1;\n\t\t\t});\n\t\t}\n\t}\n}\n"]}