mod-build 4.0.0 → 4.0.1-beta.2

package/src/shared-components/textarea/_textarea.scss

@@ -1,96 +0,0 @@
-$form-textarea-bg-color: $color-white !default;
-$form-textarea-border: 1px solid $color-charcoal1 !default;
-$form-textarea-border-radius: 4px !default;
-$form-textarea-box-shadow: inset 2px 1px 2px 0 rgba($color-black, .08), inset -2px 0px 2px 0 rgba($color-black, .08) !default;
-$form-textarea-color: $color-charcoal5 !default;
-$form-textarea-font-size: 16px !default;
-$form-textarea-font-weight: 400 !default;
-$form-textarea-height: 120px !default;
-$form-textarea-line-height: 1.1875 !default;
-$form-textarea-margin: 0 0 15px !default;
-$form-textarea-padding: 15px !default;
-$form-textarea-placeholder-color: $color-charcoal2 !default;
-$form-textarea-placeholder-color-desktop: $form-textarea-placeholder-color !default;
-$form-textarea-resize: none !default;
-$form-textarea-transition-time: .15s !default;
-$form-textarea-zip-width: 200px !default;
-
-$form-textarea-focus-bg-color: $form-textarea-bg-color !default;
-$form-textarea-focus-border: 1px solid $color-charcoal2 !default;
-
-$form-textarea-error-color: $color-red5 !default;
-$form-textarea-error-border: 1px solid $form-textarea-error-color !default;
-$form-textarea-error-box-shadow: inset 0 1px 1px rgba($color-black, .08) !default;
-$form-textarea-error-focus-border-color: #E34B2B !default;
-$form-textarea-error-focus-box-shadow: inset 0 1px 1px rgba($color-black, .08), 0 0 6px #F5BEB2 !default;
-$form-textarea-icon-error-bg-color: $color-red2 !default;
-$form-textarea-icon-error-color: $color-red5 !default;
-$form-textarea-group-error-border-width: 0 !default;
-$form-textarea-group-input-error-border: $form-textarea-error-border !default;
-
-.form-textarea {
-	background-color: $form-textarea-bg-color;
-	border: $form-textarea-border;
-	border-radius: $form-textarea-border-radius;
-	box-shadow: $form-textarea-box-shadow;
-	color: $form-textarea-color;
-	font-size: $form-textarea-font-size;
-	font-weight: $form-textarea-font-weight;
-	height: $form-textarea-height;
-	line-height: $form-textarea-line-height;
-	margin: $form-textarea-margin;
-	padding: $form-textarea-padding;
-	position: relative;
-	resize: $form-textarea-resize;
-	transition: background-color $form-textarea-transition-time ease-in-out, border-color $form-textarea-transition-time ease-in-out, box-shadow $form-textarea-transition-time ease-in-out;
-	width: 100%;
-
-	&::-webkit-input-placeholder {
-		color: $form-textarea-placeholder-color;
-	}
-
-	&::-ms-input-placeholder {
-		color: $form-textarea-placeholder-color;
-	}
-
-	&::placeholder {
-		color: $form-textarea-placeholder-color;
-	}
-
-	&:focus {
-		background-color: $form-textarea-focus-bg-color;
-		border: $form-textarea-focus-border;
-		box-shadow: none;
-	}
-
-	&.zip {
-		width: $form-textarea-zip-width;
-	}
-}
-
-.has-error .form-textarea {
-	border: $form-textarea-error-border;
-	box-shadow: $form-textarea-error-box-shadow;
-	color: $form-textarea-error-color;
-
-	&:focus {
-		border-color: $form-textarea-error-focus-border-color;
-		box-shadow: $form-textarea-error-focus-box-shadow;
-	}
-}
-
-@include breakpoint-sm {
-	.form-textarea {
-		&::-webkit-input-placeholder {
-			color: $form-textarea-placeholder-color-desktop;
-		}
-
-		&::-ms-input-placeholder {
-			color: $form-textarea-placeholder-color-desktop;
-		}
-
-		&::placeholder {
-			color: $form-textarea-placeholder-color-desktop;
-		}
-	}
-}

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

@@ -1,13 +0,0 @@
-<textarea
-	id="{{#if this.field.id}}{{this.field.id}}{{else}}{{this.field.name}}{{/if}}"
-	class="form-textarea {{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.field.extraAttributes}}{{#each this.field.extraAttributes}}{{{this.attributeName}}}="{{{this.attributeValue}}}"{{/each}}{{/if}}
-></textarea>

package/src/shared-components/theme-toggle/_theme-toggle.scss

@@ -1,68 +0,0 @@
-.toggle-wrapper {
-	align-items: center;
-	color: $color-charcoal1;
-	display: flex;
-	font-size: 12px;
-	font-weight: bold;
-	float: right;
-	justify-content: space-evenly;
-	max-width: 160px;
-	text-transform: uppercase;
-	width: 100%;
-
-
-	input[type="checkbox"] {
-		&.theme-toggle {
-			opacity: 0;
-			position: absolute;
-
-			& + label {
-				background-color: $color-charcoal1;
-				border: 1px solid $color-white;
-				border-radius: 100px;
-				cursor: pointer;
-				display: inline-block;
-				height: 26px;
-				position: relative;
-				transition: all .4s ease;
-				user-select: none;
-				width: 56px;
-
-				&::before {
-					content: "";
-					border-radius: 30px;
-					display: block;
-					height: 100%;
-					left: 0;
-					position: absolute;
-					top: 0;
-					transition: .2s cubic-bezier(.24, 0, .5, 1);
-					width: 100%;
-				}
-
-				&::after {
-					background: $color-orange5;
-					border-radius: 100px;
-					content: "";
-					display: block;
-					left: 3px;
-					height: 18px;
-					position: absolute;
-					top: 3px;
-					transition: .35s cubic-bezier(.54, 1.60, .5, 1);
-					width: 18px;
-				}
-			}
-
-			&:checked {
-				& + label::before {
-					background-color: $color-charcoal7;
-				}
-				& + label::after {
-					background: $color-blue5;
-					left: 33px
-				}
-			}
-		}
-	}
-}

package/src/shared-components/theme-toggle/theme-toggle.html

@@ -1,34 +0,0 @@
-<div class="toggle-wrapper hidden-xs hidden-sm hidden-md">
-  <span>Light</span>
-  <input type="checkbox" id="theme-toggle" name="theme-toggle" class="theme-toggle" />
-  <label for="theme-toggle"></label>
-  <span>Dark</span>
-</div>
-<script>
-  (function () {
-    const themeToggle = document.getElementById('theme-toggle');
-    const body = document.body;
-    if (themeToggle) {
-      const toggleDarkClass = function (event) {
-        event ? body.classList.add('dark') : body.classList.remove('dark');
-      };
-
-      themeToggle.addEventListener('click', function(){
-        toggleDarkClass(this.checked)
-      });
-
-      if ('matchMedia' in window) {
-        const colorScheme = window.matchMedia('(prefers-color-scheme: dark)');
-        const isDarkColorScheme = colorScheme.matches;
-
-        toggleDarkClass(isDarkColorScheme)
-        themeToggle.checked = isDarkColorScheme
-
-        colorScheme.addEventListener('change',function(e){
-          toggleDarkClass(e.matches)
-          themeToggle.checked = e.matches
-        })
-      }
-    }
-  })();
-</script>

package/src/shared-components/tile/_tile.scss

@@ -1,117 +0,0 @@
-$tile-height: 100% !default;
-$tile-width: 100% !default;
-$tile-display: inline-flex !default;
-$tile-flex-direction: column !default;
-$tile-justify-content: center !default;
-
-$tile-border-transition: border-color .15s ease-in-out !default;
-
-$tile-bg-background-position: center 1px !default;
-$tile-bg-border-radius: 5px !default;
-$tile-bg-box-shadow: 0 3px 4px 0 rgba(#000, .2) !default;
-$tile-bg-border-color: transparent !default;
-$tile-bg-border-width: 3px !default;
-$tile-bg-border-border-radius: 8px !default;
-$tile-bg-hover-border-color: $color-blue5 !default;
-$tile-bg-font-size: 18px !default;
-$tile-bg-font-weight: 700 !default;
-$tile-bg-text-color: #FFF !default;
-$tile-bg-text-transform: uppercase !default;
-
-$tile-icon-border-color: $color-charcoal1 !default;
-$tile-icon-hover-border-color: $color-charcoal2 !default;
-$tile-icon-border-radius: 4px !default;
-$tile-icon-border-width: 1px !default;
-$tile-icon-box-shadow: 0 2px 4px 0 rgba(#000, .1) !default;
-$tile-icon-font-size: 12px !default;
-$tile-icon-font-weight: 700 !default;
-$tile-icon-text-color: $color-charcoal4 !default;
-$tile-icon-img-width: 100% !default;
-$tile-icon-img-height: 90px !default;
-
-.tile {
-	display: $tile-display;
-	flex-direction: $tile-flex-direction;
-	height: $tile-height;
-	justify-content: $tile-justify-content;
-	width: $tile-width;
-
-	&--background-image {
-		.tile__background-image {
-			background-position: $tile-bg-background-position;
-			background-size: cover;
-			border-radius: $tile-bg-border-radius;
-			box-shadow: $tile-bg-box-shadow;
-			height: 100%;
-			left: 0;
-			position: absolute;
-			top: 0;
-			width: 100%;
-
-			&::before {
-				border: $tile-bg-border-width solid $tile-bg-border-color;
-				border-radius: $tile-bg-border-border-radius;
-				content: '';
-				height: calc(100% + 10px);
-				left: -5px;
-				position: absolute;
-				top: -5px;
-				transition: $tile-border-transition;
-				width: calc(100% + 10px);
-				z-index: -1;
-			}
-		}
-
-		.tile__text {
-			color: $tile-bg-text-color;
-			font-size: $tile-bg-font-size;
-			font-weight: $tile-bg-font-weight;
-			position: relative;
-			text-transform: $tile-bg-text-transform;
-			z-index: 2;
-		}
-
-		&:hover {
-			.tile__background-image {
-				&::before {
-					border-color: $tile-bg-hover-border-color;
-				}
-			}
-		}
-	}
-
-	&--icon {
-		.tile__icon {
-			height: $tile-icon-img-height;
-			width: $tile-icon-img-width;
-		}
-
-		.tile__text {
-			color: $tile-icon-text-color;
-			display: inline-block;
-			font-size: $tile-icon-font-size;
-			font-weight: $tile-icon-font-weight;
-
-			&::before {
-				border: $tile-icon-border-width solid $tile-icon-border-color;
-				border-radius: $tile-icon-border-radius;
-				box-shadow: $tile-icon-box-shadow;
-				content: '';
-				display: block;
-				height: 100%;
-				left: 0;
-				position: absolute;
-				top: 0;
-				transition: $tile-border-transition;
-				width: 100%;
-			}
-		}
-		&:hover {
-			.tile__text {
-				&::before {
-					border-color: $tile-icon-hover-border-color;
-				}
-			}
-		}
-	}
-}

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

@@ -1,27 +0,0 @@
-<div class="tile {{#if this.field.backgroundImageUrl}}tile--background-image{{/if}}{{#xif "this.field.svgSpriteIconUrl || this.field.imageIconUrl || this.field.localSVGPath || this.field.localSvgSpriteIconUrl || this.field.localImageIconUrl"}}tile--icon{{/xif}}">
-	{{#if this.field.backgroundImageUrl}}
-		<div class="tile__background-image {{#if this.field.backgroundImageClass}}{{this.field.backgroundImageClass}}{{/if}}" {{#xif "this.field.backgroundImageUrl != 'none'"}}style="background-image: url('https://{{x 'process.env.NODE_ENV'}}{{this.field.backgroundImageUrl}}')"{{/xif}}></div>
-	{{/if}}
-	{{#if this.field.imageIconUrl}}
-		<img class="tile__icon" src="https://{{x 'process.env.NODE_ENV'}}{{this.field.imageIconUrl}}" alt="{{this.field.text}}">
-	{{/if}}
-	{{#if this.field.localImageIconUrl}}
-		<img class="tile__icon" src="{{this.field.localImageIconUrl}}" alt="{{this.field.text}}">
-	{{/if}}
-	{{#if this.field.svgSpriteIconUrl}}
-		<svg class="tile__icon" role="img">
-			<use href="{{#xif 'isLocal === "true"'}}/temp/assets{{else}}https://{{x 'process.env.NODE_ENV'}}/quote/resources/assets{{/xif}}{{this.field.svgSpriteIconUrl}}"></use>
-		</svg>
-	{{/if}}
-	{{#if this.field.localSvgSpriteIconUrl}}
-		<svg class="tile__icon" role="img">
-			<use href="{{this.field.localSvgSpriteIconUrl}}"></use>
-		</svg>
-	{{/if}}
-	{{#if this.field.localSVGPath}}
-		<div class="tile__icon">
-			{{ fileInclude this.field.localSVGPath }}
-		</div>
-	{{/if}}
-	<span class="tile__text">{{{this.field.text}}}</span>
-</div>

package/src/shared-components/value-props/_value-props.scss

@@ -1,98 +0,0 @@
-$value-props-display-mobile: none !default;
-$value-props-display: block !default;
-$value-props-backdrop-filter: blur(4px) !default;
-$value-props-background-color: rgba($color-blue5,.85) !default;
-$value-props-color: $color-white !default;
-$value-props-margin: 0 !default;
-$value-props-margin-mobile: $value-props-margin !default;
-$value-props-max-width: 100% !default;
-$value-props-padding: 30px 0 !default;
-$value-props-padding-mobile: $value-props-padding !default;
-
-$value-props-wrapper-display: flex !default;
-$value-props-wrapper-flex-direction: row !default;
-$value-props-wrapper-justify-content: space-evenly !default;
-
-$value-props-icon-height: 40px !default;
-$value-props-icon-width: $value-props-icon-height !default;
-$value-props-icon-height-mobile: $value-props-icon-height !default;
-$value-props-icon-width-mobile: $value-props-icon-width !default;
-
-$value-props-item-border-left: 0 !default;
-$value-props-item-flex: 0 0 25% !default;
-$value-props-item-padding: 0 15px !default;
-$value-props-item-text-align: center !default;
-
-$value-props-description-font-size: 16px !default;
-$value-props-description-font-size-tablet: $value-props-description-font-size !default;
-$value-props-description-font-size-mobile: $value-props-description-font-size !default;
-$value-props-description-font-weight: normal !default;
-$value-props-description-line-height: 1.2 !default;
-$value-props-description-line-height-mobile: $value-props-description-line-height !default;
-$value-props-description-margin: 10px auto 0 !default;
-$value-props-description-width: 80% !default;
-
-.value-props {
-	backdrop-filter: $value-props-backdrop-filter;
-	background-color: $value-props-background-color;
-	color: $value-props-color;
-	display: $value-props-display-mobile;
-	margin: $value-props-margin-mobile;
-	max-width: $value-props-max-width;
-	padding: $value-props-padding-mobile;
-
-	&__wrapper {
-		display: $value-props-wrapper-display;
-		flex-direction: $value-props-wrapper-flex-direction;
-		justify-content: $value-props-wrapper-justify-content;
-	}
-
-	&__item {
-		flex: $value-props-item-flex;
-		padding: $value-props-item-padding;
-		text-align: $value-props-item-text-align;
-
-		~ .value-props__item {
-			border-left: $value-props-item-border-left;
-		}
-	}
-
-	&__icon {
-		height: $value-props-icon-height-mobile;
-		width: $value-props-icon-width-mobile;
-	}
-
-	&__description {
-		font-size: $value-props-description-font-size-mobile;
-		font-weight: $value-props-description-font-weight;
-		line-height: $value-props-description-line-height-mobile;
-		margin: $value-props-description-margin;
-		width: $value-props-description-width;
-	}
-}
-
-@include breakpoint-sm {
-	.value-props {
-		display: $value-props-display;
-		margin: $value-props-margin;
-		padding: $value-props-padding;
-
-		&__icon {
-			height: $value-props-icon-height;
-			width: $value-props-icon-width;
-		}
-
-		&__description {
-			font-size: $value-props-description-font-size-tablet;
-			line-height: $value-props-description-line-height;
-		}
-	}
-}
-
-@include breakpoint-md {
-	.value-props {
-		&__description {
-			font-size: $value-props-description-font-size;
-		}
-	}
-}

package/src/shared-components/value-props/value-props.html

@@ -1,17 +0,0 @@
-<div class="value-props{{#if this.props.class}} {{this.props.class}}{{/if}}">
-	<ul class="value-props__wrapper">
-		{{#each this.props.items}}
-		<li class="value-props__item">
-			{{#if this.icon}}
-			<svg class="value-props__icon" role="img">
-				<use href="{{this.icon}}"></use>
-			</svg>
-			{{/if}}
-			{{#if this.imageIcon}}
-				<img class="value-props__icon" src="{{this.imageIcon}}">
-			{{/if}}
-			{{#if this.description}}<p class="value-props__description" data-theme-template="vp">{{{this.description}}}</p>{{/if}}
-		</li>
-		{{/each}}
-	</ul>
-</div>

package/src/shared-components/zip-control/_zip-control.scss

@@ -1,42 +0,0 @@
-$zip-control-color: $color-blue5 !default;
-$zip-control-hover-color: $zip-control-color !default;
-$zip-control-font-size: 12px !default;
-$zip-control-font-weight: 700 !default;
-$zip-control-line-height: 1.25 !default;
-$zip-control-margin: 0 !default;
-$zip-control-text-align: right !default;
-
-$zip-control-edit-color: $zip-control-color !default;
-$zip-control-edit-hover-color: $zip-control-edit-color !default;
-$zip-control-edit-margin-left: 0 !default;
-$zip-control-edit-text-decoration: none !default;
-
-.zip-control {
-	font-size: $zip-control-font-size;
-	font-weight: $zip-control-font-weight;
-	line-height: $zip-control-line-height;
-	margin: $zip-control-margin;
-	text-align: $zip-control-text-align;
-
-	&__location,
-	&__zipcode {
-		color: $zip-control-color;
-	}
-
-	&__location {
-		&:hover {
-			color: $zip-control-hover-color;
-		}
-	}
-
-	&__edit,
-	&__icon {
-		color: $zip-control-edit-color;
-		margin-left: $zip-control-edit-margin-left;
-		text-decoration: $zip-control-edit-text-decoration;
-
-		&:hover {
-			color: $zip-control-edit-hover-color;
-		}
-	}
-}

package/src/shared-components/zip-control/zip-control.html

@@ -1,21 +0,0 @@
-{{#if this.field.notEditableOnMobile}}
-<div class="zip-control visible-xs" id="zip-control">
-	<span class="zip-control__location user-location">City, State</span>
-	{{#if this.field.includeInitialZipCode}}
-	<span class="zip-control__zipcode user-zipcode"></span>
-	{{/if}}
-</div>
-{{/if}}
-<div class="zip-control{{#if this.field.notEditableOnMobile}} hidden-xs{{/if}}" id="zip-control">
-	<a class="zip-control__button" id="zip-control__button" role="button">
-		<span class="zip-control__location user-location">City, State</span>
-		{{#if this.field.includeInitialZipCode}}
-			<span class="zip-control__zipcode user-zipcode"></span>
-		{{/if}}
-		{{#if this.field.editText}}
-			<span class="zip-control__edit">{{this.field.editText}}</span>
-		{{else}}
-			<i class="zip-control__icon icon-fill-edit"></i>
-		{{/if}}
-	</a>
-</div>

package/src/temp/scripts/maxmind-geoip2.js

@@ -1,104 +0,0 @@
-"use strict";
-
-var geoip2 = function () {
-  function e(e, t, r, n) {
-    this.successCallback = e, this.errorCallback = t, this.type = n;
-  }
-  var t = {};
-  e.prototype.returnSuccess = function (e) {
-    this.successCallback && "function" == typeof this.successCallback && this.successCallback(this.fillInObject(JSON.parse(e)));
-  }, e.prototype.returnError = function (e) {
-    this.errorCallback && "function" == typeof this.errorCallback && (e || (e = {
-      error: "Unknown error"
-    }), this.errorCallback(e));
-  };
-  var r = {
-    country: [["continent", "Object", "names", "Object"], ["country", "Object", "names", "Object"], ["registered_country", "Object", "names", "Object"], ["represented_country", "Object", "names", "Object"], ["traits", "Object"]],
-    city: [["city", "Object", "names", "Object"], ["continent", "Object", "names", "Object"], ["country", "Object", "names", "Object"], ["location", "Object"], ["postal", "Object"], ["registered_country", "Object", "names", "Object"], ["represented_country", "Object", "names", "Object"], ["subdivisions", "Array", 0, "Object", "names", "Object"], ["traits", "Object"]]
-  };
-  return e.prototype.fillInObject = function (e) {
-    for (var t = "country" === this.type ? r.country : r.city, n = 0; n < t.length; n++) for (var o = t[n], s = e, i = 0; i < o.length; i += 2) {
-      var c = o[i];
-      s[c] || (s[c] = "Object" === o[i + 1] ? {} : []), s = s[c];
-    }
-    try {
-      Object.defineProperty(e.continent, "continent_code", {
-        enumerable: !1,
-        get: function get() {
-          return this.code;
-        },
-        set: function set(e) {
-          this.code = e;
-        }
-      });
-    } catch (u) {
-      e.continent.code && (e.continent.continent_code = e.continent.code);
-    }
-    if ("country" !== this.type) try {
-      Object.defineProperty(e, "most_specific_subdivision", {
-        enumerable: !1,
-        get: function get() {
-          return this.subdivisions[this.subdivisions.length - 1];
-        },
-        set: function set(e) {
-          this.subdivisions[this.subdivisions.length - 1] = e;
-        }
-      });
-    } catch (u) {
-      e.most_specific_subdivision = e.subdivisions[e.subdivisions.length - 1];
-    }
-    return e;
-  }, e.prototype.getGeoIPResult = function () {
-    var e,
-      t = this,
-      r = new window.XMLHttpRequest(),
-      n = "https://geoip-js.com/geoip/v2.1/" + this.type + "/me?",
-      o = {
-        referrer: location.protocol + "//" + location.hostname
-      };
-    if (!this.alreadyRan) {
-      this.alreadyRan = 1;
-      for (e in o) o.hasOwnProperty(e) && o[e] && (n += e + "=" + encodeURIComponent(o[e]) + "&");
-      n = n.substring(0, n.length - 1), r.open("GET", n, !0), r.onload = function () {
-        if ("undefined" == typeof r.status || 200 === r.status) t.returnSuccess(r.responseText);else {
-          var e,
-            n = r.hasOwnProperty("contentType") ? r.contentType : r.getResponseHeader("Content-Type");
-          if (/json/.test(n) && r.responseText.length) try {
-            e = JSON.parse(r.responseText);
-          } catch (o) {
-            e = {
-              code: "HTTP_ERROR",
-              error: "The server returned a " + r.status + " status with an invalid JSON body."
-            };
-          } else e = r.responseText.length ? {
-            code: "HTTP_ERROR",
-            error: "The server returned a " + r.status + " status with the following body: " + r.responseText
-          } : {
-            code: "HTTP_ERROR",
-            error: "The server returned a " + r.status + " status but either the server did not return a body or this browser is a version of Internet Explorer that hides error bodies."
-          };
-          t.returnError(e);
-        }
-      }, r.ontimeout = function () {
-        t.returnError({
-          code: "HTTP_TIMEOUT",
-          error: "The request to the GeoIP2 web service timed out."
-        });
-      }, r.onerror = function () {
-        t.returnError({
-          code: "HTTP_ERROR",
-          error: "There was a network error receiving the response from the GeoIP2 web service."
-        });
-      }, r.send(null);
-    }
-  }, t.country = function (t, r, n) {
-    var o = new e(t, r, n, "country");
-    o.getGeoIPResult();
-  }, t.city = function (t, r, n) {
-    var o = new e(t, r, n, "city");
-    o.getGeoIPResult();
-  }, t.insights = function (t, r, n) {
-    var o = new e(t, r, n, "insights");
-    o.getGeoIPResult();
-  }, t;
-}();