mod-build 4.0.0 → 4.0.1-beta.2

package/src/shared-components/select/_select.scss

@@ -1,61 +0,0 @@
-$select-bg-color: transparent !default;
-$select-border: 1px solid $color-charcoal1 !default;
-$select-border-raius: 4px !default;
-$select-box-shadow: inset 2px 1px 2px 0 rgba($color-black, .08), inset -2px 0px 2px 0 rgba($color-black, .08) !default;
-$select-font-size: 16px !default;
-$select-line-height: 1.1875 !default;
-$select-margin: 0 0 15px !default;
-$select-padding: 14px 15px 13px !default;
-$select-text-color: $color-charcoal5 !default;
-$select-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s !default;
-
-$select-focus-border: 1px solid $color-charcoal2 !default;
-$select-focus-box-shadow: none !default;
-
-$select-option-bg-color: $color-white !default;
-$select-option-color: $color-charcoal5 !default;
-
-$select-arrow-position-right: 15px !default;
-$select-arrow-position-top: calc(50% - 7px) !default;
-$select-arrow-color: $select-text-color !default;
-
-.select-wrapper {
-	color: $select-text-color;
-	margin: $select-margin;
-	position: relative;
-}
-
-.select {
-	appearance: none;
-	background: $select-bg-color;
-	border: $select-border;
-	border-radius: $select-border-raius;
-	box-shadow: $select-box-shadow;
-	cursor: pointer;
-	font-size: $select-font-size;
-	line-height: $select-line-height;
-	margin: 0;
-	padding: $select-padding;
-	position: relative;
-	transition: $select-transition;
-	width: 100%;
-
-	&:focus {
-		border: $select-focus-border;
-		box-shadow: $select-focus-box-shadow;
-	}
-
-	option {
-		background: $select-option-bg-color;
-		color: $select-option-color;
-	}
-
-	.select-caret {
-		color: $select-arrow-color;
-		margin-top: 0;
-		pointer-events: none;
-		position: absolute;
-		right: $select-arrow-position-right;
-		top: $select-arrow-position-top;
-	}
-}

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

@@ -1,8 +0,0 @@
-<div class="select-wrapper{{#if this.field.class}} this.field.class{{/if}}">
-	<select class="select" name="{{this.field.name}}" id="{{#if this.field.id}}{{this.field.id}}{{else}}{{this.field.name}}{{/if}}" data-required="nonempty">
-		{{#each this.field.options}}
-			<option value="{{this.value}}">{{this.text}}</option>
-		{{/each}}
-	</select>
-	<span class="select-caret icon icon-caret-down"></span>
-</div>

package/src/shared-components/steps/_steps.scss

@@ -1,334 +0,0 @@
-$step-supertitle-bg-color: $color-blue5 !default;
-$step-supertitle-color: $color-white !default;
-$step-supertitle-font-size: 22px !default;
-$step-supertitle-font-size-mobile: 18px !default;
-$step-supertitle-font-weight: 300 !default;
-$step-supertitle-line-height: 1.36 !default;
-$step-supertitle-padding: 20px !default;
-$step-supertitle-padding-mobile: 15px !default;
-
-$step-title-container-bg-color: transparent !default;
-$step-title-container-margin: 0 !default;
-$step-title-container-padding: 0 20px !default;
-$step-title-container-text-align: center !default;
-
-$step-title-color: $color-blue5 !default;
-$step-title-font-size: 22px !default;
-$step-title-font-size-mobile: $step-title-font-size !default;
-$step-title-font-weight: bold !default;
-$step-title-line-height: 1.55 !default;
-$step-title-margin: 0 !default;
-
-$step-subtitle-color: $color-charcoal5 !default;
-$step-subtitle-font-size: 16px !default;
-$step-subtitle-font-size-mobile: $step-subtitle-font-size !default;
-$step-subtitle-font-weight: normal !default;
-$step-subtitle-line-height: $step-title-line-height !default;
-$step-subtitle-margin: 5px 0 25px !default;
-
-$step-subtitle-list-color: $color-white !default;
-$step-subtitle-list-font-size: 14px !default;
-$step-subtitle-list-font-weight: normal !default;
-$step-subtitle-list-icon: '\e920' !default;
-$step-subtitle-list-icon-margin: 0 10px 0 0 !default;
-$step-subtitle-list-line-height: 1.29 !default;
-$step-subtitle-list-margin: 0 !default;
-
-$step-overview-border: 1px solid $color-charcoal1 !default;
-$step-overview-color: $color-charcoal5 !default;
-$step-overview-font-size: 13px !default;
-$step-overview-letter-spacing: .1px !default;
-$step-overview-line-height: 1.38 !default;
-$step-overview-margin: 0 auto 20px !default;
-$step-overview-padding: 8px 0 !default;
-$step-overview-text-align: center !default;
-
-$step-overview-number-background: $step-overview-color !default;
-$step-overview-number-color: $color-white !default;
-$step-overview-number-font-size: 14px !default;
-$step-overview-number-font-weight: 700 !default;
-$step-overview-number-height: 22px !default;
-$step-overview-number-line-height: $step-overview-number-height !default;
-$step-overview-number-margin-right: 5px !default;
-$step-overview-number-width: $step-overview-number-height !default;
-
-$form-group-margin: 0 !default;
-$form-group-label-color: $color-charcoal5 !default;
-$form-group-label-font-size: 17px !default;
-$form-group-label-font-weight: normal !default;
-$form-group-label-margin: 10px 0 15px !default;
-
-$form-group-label-in-input-cursor: text !default;
-$form-group-label-in-input-top-position: 18px !default;
-$form-group-label-in-input-left-position: 15px !default;
-$form-group-label-in-input-z-index: -1 !default;
-
-$label-tool-tip-cursor: help !default;
-$label-tool-tip-bg-color: $color-charcoal5 !default;
-$label-tool-tip-border-radius: 6px !default;
-$label-tool-tip-color: $color-white !default;
-$label-tool-tip-font-size: 14px !default;
-$label-tool-tip-line-height: 1.2 !default;
-$label-tool-tip-margin-left: 15px !default;
-$label-tool-tip-padding: 15px !default;
-$label-tool-tip-width: 280px !default;
-$label-tool-tip-z-index: 10 !default;
-$label-tool-tip-arrow-margin: -5px 0 0 -5px !default;
-$label-tool-tip-arrow-size: 10px !default;
-
-$form-group-error-message-color: $color-red5 !default;
-$form-group-error-message-font-size: 14px !default;
-$form-group-error-message-margin: -10px 0 10px 2px !default;
-
-$form-group-city-state-color: $color-charcoal4 !default;
-$form-group-city-state-font-size: 13px !default;
-$form-group-city-state-font-weight: bold !default;
-$form-group-city-state-margin: -10px 0 0 !default;
-$form-group-city-state-padding: 0 2px 0 0 !default;
-$form-group-city-state-text-align: right !default;
-
-$form-group-note-color: #8a8a8a !default;
-$form-group-note-font-size: 11px !default;
-$form-group-note-font-style: italic !default;
-$form-group-note-margin: -7px 0 0 !default;
-
-.step {
-	flex: 0 0 100%;
-
-	&__supertitle {
-		background-color: $step-supertitle-bg-color;
-		color: $step-supertitle-color;
-		font-size: $step-supertitle-font-size-mobile;
-		font-weight: $step-supertitle-font-weight;
-		line-height: $step-supertitle-line-height;
-		padding: $step-supertitle-padding-mobile;
-	}
-
-	&__title-container {
-		background-color: $step-title-container-bg-color;
-		margin: $step-title-container-margin;
-		padding: $step-title-container-padding;
-		text-align: $step-title-container-text-align;
-	}
-
-	&__title {
-		color: $step-title-color;
-		font-size: $step-title-font-size-mobile;
-		font-weight: $step-title-font-weight;
-		line-height: $step-title-line-height;
-		margin: $step-title-margin;
-	}
-
-	&__subtitle {
-		color: $step-subtitle-color;
-		font-size: $step-subtitle-font-size-mobile;
-		font-weight: $step-subtitle-font-weight;
-		line-height: $step-subtitle-line-height;
-		margin: $step-subtitle-margin;
-	}
-
-	&__subtitle-list {
-		list-style: none;
-		margin: $step-subtitle-list-margin;
-		padding-left: 0;
-
-		li {
-			color: $step-subtitle-list-color;
-			font-size: $step-subtitle-list-font-size;
-			font-weight: $step-subtitle-list-font-weight;
-			line-height: $step-subtitle-list-line-height;
-
-			&:before {
-				content: $step-subtitle-list-icon;
-				display: inline-block;
-				font-family: modicons-fill;
-				font-style: normal;
-				font-variant: normal;
-				font-weight: 400;
-				line-height: 1;
-				margin: $step-subtitle-list-icon-margin;
-				text-transform: none;
-			}
-		}
-	}
-
-	&__overview {
-		border-bottom: $step-overview-border;
-		border-top: $step-overview-border;
-		color: $step-overview-color;
-		font-size: $step-overview-font-size;
-		letter-spacing: $step-overview-letter-spacing;
-		line-height: $step-overview-line-height;
-		margin: $step-overview-margin;
-		padding: $step-overview-padding;
-		text-align: $step-overview-text-align;
-
-		span {
-			padding: 0;
-		}
-	}
-
-	&__overview-number {
-		background: $step-overview-number-background;
-		border-radius: 100%;
-		color: $step-overview-number-color;
-		display: inline-block;
-		font-size: $step-overview-number-font-size;
-		font-weight: $step-overview-number-font-weight;
-		height: $step-overview-number-height;
-		line-height: $step-overview-number-line-height;
-		margin-right: $step-overview-number-margin-right;
-		text-align: center;
-		width: $step-overview-number-width;
-	}
-}
-
-.form-group {
-	margin: $form-group-margin;
-
-	&__label {
-		color: $form-group-label-color;
-		font-size: $form-group-label-font-size;
-		font-weight: $form-group-label-font-weight;
-		margin: $form-group-label-margin;
-	}
-
-	&__label-input {
-		color: $form-group-label-color;
-		cursor: $form-group-label-in-input-cursor;
-		font-size: $form-group-label-font-size;
-		font-weight: $form-group-label-font-weight;
-		left: $form-group-label-in-input-left-position;
-		position: absolute;
-		top: $form-group-label-in-input-top-position;
-		transition: color 200ms ease, font-size 200ms ease;
-		user-select: none;
-		z-index: $form-group-label-in-input-z-index;
-	}
-
-	&__error-message {
-		color: $form-group-error-message-color;
-		font-size: $form-group-error-message-font-size;
-		display: none;
-		margin: $form-group-error-message-margin;
-	}
-
-	&__city-state {
-		color: $form-group-city-state-color;
-		font-size: $form-group-city-state-font-size;
-		font-weight: $form-group-city-state-font-weight;
-		margin: $form-group-city-state-margin;
-		padding: $form-group-city-state-padding;
-		text-align: $form-group-city-state-text-align;
-	}
-
-	&__note {
-		color: $form-group-note-color;
-		display: inline-block;
-		font-size: $form-group-note-font-size;
-		font-style: $form-group-note-font-style;
-		margin: $form-group-note-margin;
-	}
-
-	&__label-tooltip {
-		cursor: $label-tool-tip-cursor;
-		position: relative;
-
-		&-text {
-			background: $label-tool-tip-bg-color;
-			border-radius: $label-tool-tip-border-radius;
-			color: $label-tool-tip-color;
-			display: none;
-			font-size: $label-tool-tip-font-size;
-			left: 100%;
-			line-height: $label-tool-tip-line-height;
-			margin-left: $label-tool-tip-margin-left;
-			padding: $label-tool-tip-padding;
-			position: absolute;
-			text-align: center;
-			top: 50%;
-			transform: translateY(-50%);
-			width: $label-tool-tip-width;
-			z-index: $label-tool-tip-z-index;
-
-			&::before {
-				background: $label-tool-tip-bg-color;
-				content: '';
-				display: block;
-				height: $label-tool-tip-arrow-size;
-				left: 0;
-				margin: $label-tool-tip-arrow-margin;
-				position: absolute;
-				top: 50%;
-				transform: rotate(-45deg);
-				width: $label-tool-tip-arrow-size;
-			}
-		}
-
-		&:hover {
-			.form-group__label-tooltip-text {
-				display: block;
-			}
-		}
-	}
-}
-
-.has-error {
-	.form-group__error-message {
-		display: block;
-	}
-
-	.form-group__label-input {
-		color: $form-group-error-message-color;
-	}
-
-	&:focus-within {
-		.form-group__label-input {
-			color: $form-group-error-message-color;
-		}
-	}
-}
-
-.swiper--dynamic-step-height {
-	.step {
-		.step-inner {
-			max-height: 0;
-			opacity: 0;
-			transition: opacity 250ms 250ms ease-in;
-		}
-
-		&--active .step-inner {
-			max-height: 999px;
-			opacity: 1;
-		}
-	}
-}
-
-.disableAutofill {
-	.step-inner {
-		visibility: hidden;
-	}
-
-	.step--active {
-		.step-inner {
-			visibility: visible;
-		}
-	}
-}
-
-@include breakpoint-sm {
-	.step {
-		&__supertitle {
-			font-size: $step-supertitle-font-size;
-			padding: $step-supertitle-padding;
-		}
-
-		&__title {
-			font-size: $step-title-font-size;
-		}
-
-		&__subtitle {
-			font-size: $step-subtitle-font-size;
-		}
-	}
-}

package/src/shared-components/steps/defaultFormFieldConfig.json

@@ -1,64 +0,0 @@
-{
-  "zip": {
-    "fieldType": "input",
-    "type": "tel",
-    "placeholder": "Enter Zip Code",
-    "required": "zip",
-    "maxLength": "5",
-    "errorMessage": "Please enter a valid zip code."
-  },
-  "firstName": {
-    "fieldType": "input",
-    "name": "firstName",
-    "min": "2",
-    "maxLength": "30",
-    "type": "text",
-    "placeholder": "First Name",
-    "required": "name",
-    "errorMessage": "Please enter a valid first name."
-  },
-  "lastName": {
-    "fieldType": "input",
-    "name": "lastName",
-    "min": "2",
-    "maxLength": "30",
-    "type": "text",
-    "placeholder": "Last Name",
-    "required": "name",
-    "errorMessage": "Please enter a valid last name."
-  },
-  "zip1": {
-    "fieldType": "input",
-    "name": "zip1",
-    "type": "tel",
-    "placeholder": "Enter Zip Code",
-    "required": "zip",
-    "maxLength": "5",
-    "errorMessage": "Please enter a valid zip code."
-  },
-  "homePhone": {
-    "fieldType": "input",
-    "name": "homePhone",
-    "type": "tel",
-    "placeholder": "Phone Number",
-    "required": "phone",
-    "maxLength": "14",
-    "errorMessage": "Please enter a valid phone number."
-  },
-  "email": {
-    "fieldType": "input",
-    "name": "email",
-    "type": "email",
-    "placeholder": "Email",
-    "required": "email",
-    "errorMessage": "Please enter a valid email address."
-  },
-  "address": {
-    "fieldType": "input",
-    "name": "address",
-    "type": "text",
-    "placeholder": "123 Your St.",
-    "required": "address",
-    "errorMessage": "Please enter a valid address."
-  }
-}

package/src/shared-components/steps/step-fields.html

@@ -1,36 +0,0 @@
-{{#xif "this.stepFields.fieldType === 'radio'"}}
-	{{ fileInclude 'src/shared-components/radio-button/radio-button.html'
-		field = this.stepFields
-	}}
-{{/xif}}
-
-{{#xif "this.stepFields.fieldType === 'input'"}}
-	{{ fileInclude 'src/shared-components/input/input.html'
-		field = this.stepFields
-	}}
-{{/xif}}
-{{#xif "this.stepFields.fieldType === 'textarea'"}}
-	{{#if this.stepFields.labelInInput}}<div class="form-input-group form-input-group--includes-label">{{/if}}
-	{{ fileInclude 'src/shared-components/textarea/textarea.html'
-		field = this.stepFields
-	}}
-	{{#if this.stepFields.labelInInput}}<label class="form-group__label-input">{{{this.stepFields.labelInInput}}}</label></div>{{/if}}
-{{/xif}}
-{{#xif "this.stepFields.fieldType === 'select'"}}
-	{{ fileInclude 'src/shared-components/select/select.html'
-		field = this.stepFields
-	}}
-{{/xif}}
-{{#xif "this.stepFields.fieldType === 'checkbox'"}}
-	{{ fileInclude 'src/shared-components/checkbox/checkbox.html'
-		field = this.stepFields
-	}}
-{{/xif}}
-{{#xif "this.stepFields.fieldType === 'zip-control'"}}
-	{{ fileInclude 'src/shared-components/zip-control/zip-control.html'
-		field = this.stepFields
-	}}
-{{/xif}}
-{{#xif "this.stepFields.fieldType == 'utility-providers'"}}
-	<div class="utility-provider-wrapper"></div>
-{{/xif}}

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

@@ -1,131 +0,0 @@
-{{#each this.items}}
-<li id="{{#if this.priority}}step{{inc this.priority}}{{else}}step{{inc @index}}{{/if}}" class="swiper-slide swiper-no-swiping step {{#if this.stepClassName}}{{this.stepClassName}}{{/if}} {{#if @first}}step--active swiper-slide-active{{/if}}{{#if this.trade }} {{this.trade}}{{/if}}" data-bind="step" {{#if @first}}data-slide="active"{{/if}} {{#if this.stepName}} data-step-name="{{this.stepName}}"{{/if}}{{#if this.trade }} data-trade="{{this.trade}}"{{/if}}>
-	<div class="step-inner{{#if this.stepInnerClass}} {{this.stepInnerClass}}{{/if}}">
-		{{#if this.customStepTopTemplate}}
-			{{ fileInclude this.customStepTopTemplate
-				stepTopOpt = this
-			}}
-		{{/if}}
-
-		{{#if this.stepHeader}}
-		<div class="step__title-container{{#if this.stepHeader.classModifierFlag}} step__title-container{{this.stepHeader.classModifierFlag}}{{/if}}">
-			{{#if this.stepHeader.supertitle}}
-				<div class="step__supertitle" {{{this.stepHeader.supertitleAttributes}}} data-theme-template="formtitle">
-					{{#if this.stepHeader.mobileSupertitle}}
-						<span class="hidden-xs">{{{this.stepHeader.supertitle}}}</span>
-						<span class="visible-xs">{{{this.stepHeader.mobileSupertitle}}}</span>
-					{{else}}
-						{{{this.stepHeader.supertitle}}}
-					{{/if}}
-				</div>
-			{{/if}}
-			{{#if this.stepHeader.title}}
-				<div class="step__title">
-					{{#if this.stepHeader.mobileTitle}}
-						<span class="hidden-xs">{{{this.stepHeader.title}}}</span>
-						<span class="visible-xs">{{{this.stepHeader.mobileTitle}}}</span>
-					{{else}}
-						{{{this.stepHeader.title}}}
-					{{/if}}
-				</div>
-			{{/if}}
-
-			{{#if this.stepHeader.subtitle}}
-				<div class="step__subtitle">
-					{{#if this.stepHeader.subtitle.text}}{{{this.stepHeader.subtitle.text}}}{{/if}}
-					{{#if this.stepHeader.subtitle.list}}
-						<ul class="step__subtitle-list">
-							{{#each this.stepHeader.subtitle.list}}
-								<li>
-									<span>{{{this}}}</span>
-								</li>
-							{{/each}}
-						</ul>
-					{{/if}}
-				</div>
-			{{/if}}
-			{{#if this.stepHeader.overview}}
-				{{#unless this.moveOverviewUnderHeader}}
-					<div class="step__overview row">
-					{{#each this.stepHeader.overview}}
-						<span class="{{#unless this.class}}col-xs-4{{/unless}}">
-							<span class="step__overview-number">{{this.number}}</span> {{{this.text}}}
-						</span>
-					{{/each}}
-					</div>
-				{{/unless}}
-			{{/if}}
-		</div>
-		{{/if}}
-
-		{{#if this.moveOverviewUnderHeader}}
-			{{#if this.stepHeader.overview}}
-				<div class="step__overview row">
-				{{#each this.stepHeader.overview}}
-					<span class="{{#unless this.class}}col-xs-4{{/unless}}">
-						<span class="step__overview-number">{{this.number}}</span> {{{this.text}}}
-					</span>
-				{{/each}}
-				</div>
-			{{/if}}
-		{{/if}}
-
-		<div class="step__fields{{#if this.fieldsWrapperClass}} {{this.fieldsWrapperClass}}{{/if}}">
-		{{#each this.fields}}
-			<div class="form-group{{#if this.wrapper.class}} {{this.wrapper.class}}{{/if}}{{#unless this.skipErrorClass}} parent-error{{/unless}}" {{#if this.wrapper.id}}id="{{this.wrapper.id}}"{{/if}} {{#if this.wrapper.style}}style="{{this.wrapper.style}}"{{/if}}>
-				{{#if this.label}}
-					<label class="form-group__label">
-						{{{this.label}}}
-						{{#if this.labelToolTip}}
-							<span class="form-group__label-tooltip" data-bind="tooltip-icon">
-								<i class="{{#if this.labelToolTipIcon}}{{this.labelToolTipIcon}}{{else}}icon-stroke-warning{{/if}}" {{#if this.labelTooltipName}}data-tooltip-name="{{this.labelTooltipName}}"{{/if}}></i>
-								<span class="form-group__label-tooltip-text">
-									{{{this.labelToolTip}}}
-								</span>
-							</span>
-						{{/if}}
-						{{#if this.labelNote}}<span class="form-group__note">{{{this.labelNote}}}</span>{{/if}}
-					</label>
-				{{/if}}
-
-				{{ fileInclude 'src/shared-components/steps/step-fields.html'
-					stepFields = this
-				}}
-
-				{{#if this.errorMessage}}<div class="form-group__error-message">{{{this.errorMessage}}}</div>{{/if}}
-				{{#if this.showCityState}}<div class="form-group__city-state">City, State</div>{{/if}}
-				{{#if this.note}}<span class="form-group__note">{{{this.note}}}</span>{{/if}}
-			</div>
-		{{/each}}
-		</div>
-
-		{{#if this.extraQuestionBlock}}
-		<div {{#if this.extraQuestionBlock.id}}id="{{this.extraQuestionBlock.id}}"{{/if}} class="step__extra{{#if this.extraQuestionBlock.class}} {{this.extraQuestionBlock.class}}{{/if}}">
-			{{#if this.extraQuestionBlock.title}}
-				<div class="step__title">
-					{{{this.extraQuestionBlock.title}}}
-				</div>
-			{{/if}}
-			{{#if this.extraQuestionBlock.subtitle}}
-				<div class="step__subtitle">
-					{{#if this.extraQuestionBlock.subtitle.text}}
-						{{{this.extraQuestionBlock.subtitle.text}}}
-					{{/if}}
-				</div>
-			{{/if}}
-			{{#each this.extraQuestionBlock.fields}}
-				{{ fileInclude 'src/shared-components/steps/step-fields.html'
-					stepFields = this
-				}}
-			{{/each}}
-		</div>
-		{{/if}}
-
-		{{#if this.customStepBottomTemplate}}
-			{{ fileInclude this.customStepBottomTemplate
-				stepBottomOpt = this
-			}}
-		{{/if}}
-	</div>
-</li>
-{{/each}}