@reliability-design/web 1.0.6 → 1.1.1

package/dist/components/rel-quote-page/rel-quote-page.ts

@@ -1,816 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-
-export interface QuoteFormData {
-  pickupLocation: string;
-  dropoffLocation: string;
-  serviceLevel: "standard" | "guaranteed";
-  originType: "commercial" | "residential";
-  destinationType: "commercial" | "residential";
-  loadingRequirements: string;
-  deliveryRequirements: string;
-  loadingLimitedAccessType: string;
-  deliveryLimitedAccessType: string;
-  pickupDate: string;
-  isHazmat: boolean;
-  commodity: string;
-  commodityDescription: string;
-  handlingUnits: number;
-  handlingType: string;
-  length: number;
-  width: number;
-  height: number;
-  totalWeight: number;
-  class: string;
-  insuredValue: number;
-  nmfcNumber: string;
-}
-
-@customElement("rel-quote-page")
-export class RelQuotePage extends LitElement {
-  @state() private formData: QuoteFormData = {
-    pickupLocation: "",
-    dropoffLocation: "",
-    serviceLevel: "standard",
-    originType: "commercial",
-    destinationType: "commercial",
-    loadingRequirements: "",
-    deliveryRequirements: "",
-    loadingLimitedAccessType: "",
-    deliveryLimitedAccessType: "",
-    pickupDate: "",
-    isHazmat: false,
-    commodity: "",
-    commodityDescription: "",
-    handlingUnits: 0,
-    handlingType: "",
-    length: 0,
-    width: 0,
-    height: 0,
-    totalWeight: 0,
-    class: "",
-    insuredValue: 0,
-    nmfcNumber: "",
-  };
-
-  static styles = css`
-    :host {
-      display: block;
-      font-family: var(--rel-fontFamilies-primary);
-      background: var(--rel-colors-white);
-      padding: var(--rel-spacing-space-xl);
-      border-radius: var(--rel-borders-radius-border-radius-300);
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    }
-
-    .quote-page {
-      max-width: 900px;
-      margin: 0 auto;
-    }
-
-    .section {
-      margin-bottom: var(--rel-spacing-space-2xl);
-    }
-
-    .section-title {
-      font-size: var(--rel-fontSizes-xl);
-      font-weight: var(--rel-fontWeights-bold);
-      margin: 0 0 var(--rel-spacing-space-lg) 0;
-      color: var(--rel-colors-black);
-    }
-
-    .section-row {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: var(--rel-spacing-space-lg);
-      margin-bottom: var(--rel-spacing-space-lg);
-    }
-
-    .section-row.single {
-      grid-template-columns: 1fr;
-    }
-
-    .field-group {
-      display: flex;
-      flex-direction: column;
-      gap: var(--rel-spacing-space-2xs);
-    }
-
-    .field-label {
-      font-size: var(--rel-fontSizes-sm);
-      font-weight: var(--rel-fontWeights-medium);
-      color: var(--rel-colors-gray-heading);
-      display: flex;
-      align-items: center;
-      gap: var(--rel-spacing-space-3xs);
-    }
-
-    .required {
-      color: var(--rel-colors-red-primary);
-    }
-
-    .info-icon {
-      width: 16px;
-      height: 16px;
-      border: 1px solid var(--rel-colors-gray-border);
-      border-radius: 50%;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 11px;
-      cursor: help;
-      color: var(--rel-colors-gray-primary);
-    }
-
-    .subsection-title {
-      font-size: var(--rel-fontSizes-md);
-      font-weight: var(--rel-fontWeights-semibold);
-      margin: var(--rel-spacing-space-md) 0 var(--rel-spacing-space-sm) 0;
-      color: var(--rel-colors-gray-heading);
-      display: flex;
-      align-items: center;
-      gap: var(--rel-spacing-space-xs);
-    }
-
-    .subsection-title::before {
-      content: "";
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      background: var(--rel-colors-green-primary);
-    }
-
-    .service-level-tabs {
-      display: flex;
-      gap: 0;
-      border: 1px solid var(--rel-colors-gray-border);
-      border-radius: var(--rel-borders-radius-border-radius-300);
-      overflow: hidden;
-      width: fit-content;
-      margin-bottom: var(--rel-spacing-space-md);
-    }
-
-    .tab-button {
-      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-lg);
-      background: var(--rel-colors-white);
-      border: none;
-      cursor: pointer;
-      font-family: var(--rel-fontFamilies-primary);
-      font-size: var(--rel-fontSizes-sm);
-      font-weight: var(--rel-fontWeights-medium);
-      color: var(--rel-colors-gray-primary);
-      transition: all 0.2s;
-      border-right: 1px solid var(--rel-colors-gray-border);
-    }
-
-    .tab-button:last-child {
-      border-right: none;
-    }
-
-    .tab-button.active {
-      background: var(--rel-colors-black);
-      color: var(--rel-colors-white);
-    }
-
-    .radio-group {
-      display: flex;
-      gap: var(--rel-spacing-space-lg);
-    }
-
-    .radio-option {
-      display: flex;
-      align-items: center;
-      gap: var(--rel-spacing-space-xs);
-      cursor: pointer;
-    }
-
-    .radio-input {
-      width: 20px;
-      height: 20px;
-      border: 2px solid var(--rel-colors-gray-border);
-      border-radius: 50%;
-      position: relative;
-      flex-shrink: 0;
-    }
-
-    .radio-input.checked {
-      border-color: var(--rel-colors-black);
-    }
-
-    .radio-input.checked::after {
-      content: "";
-      position: absolute;
-      inset: 4px;
-      background: var(--rel-colors-black);
-      border-radius: 50%;
-    }
-
-    .radio-label {
-      font-size: var(--rel-fontSizes-sm);
-      font-weight: var(--rel-fontWeights-medium);
-      color: var(--rel-colors-gray-heading);
-    }
-
-    .input-field {
-      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-sm);
-      border: 1px solid var(--rel-colors-gray-border);
-      border-radius: var(--rel-borders-radius-border-radius-300);
-      font-family: var(--rel-fontFamilies-primary);
-      font-size: var(--rel-fontSizes-sm);
-      outline: none;
-      transition: border-color 0.2s;
-    }
-
-    .input-field:focus-visible {
-      border-color: var(--rel-colors-black);
-    }
-
-    .input-with-icon {
-      position: relative;
-    }
-
-    .input-icon {
-      position: absolute;
-      right: var(--rel-spacing-space-sm);
-      top: 50%;
-      transform: translateY(-50%);
-      color: var(--rel-colors-gray-primary);
-      pointer-events: none;
-    }
-
-    .input-with-icon .input-field {
-      padding-right: var(--rel-spacing-space-2xl);
-    }
-
-    select {
-      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-sm);
-      border: 1px solid var(--rel-colors-gray-border);
-      border-radius: var(--rel-borders-radius-border-radius-300);
-      font-family: var(--rel-fontFamilies-primary);
-      font-size: var(--rel-fontSizes-sm);
-      outline: none;
-      background: var(--rel-colors-white);
-      cursor: pointer;
-      transition: border-color 0.2s;
-      appearance: none;
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
-      background-repeat: no-repeat;
-      background-position: right 12px center;
-      padding-right: var(--rel-spacing-space-2xl);
-    }
-
-    select:focus-visible {
-      border-color: var(--rel-colors-black);
-    }
-
-    .helper-text {
-      font-size: var(--rel-fontSizes-xs);
-      color: var(--rel-colors-gray-placeholder);
-      margin-top: var(--rel-spacing-space-2xs);
-    }
-
-    .dimension-inputs {
-      display: grid;
-      grid-template-columns: repeat(4, 1fr);
-      gap: var(--rel-spacing-space-sm);
-    }
-
-    .dimension-field {
-      display: flex;
-      flex-direction: column;
-      gap: var(--rel-spacing-space-3xs);
-    }
-
-    .dimension-label {
-      font-size: var(--rel-fontSizes-xs);
-      font-weight: var(--rel-fontWeights-medium);
-      color: var(--rel-colors-gray-heading);
-    }
-
-    .dimension-input-wrapper {
-      display: flex;
-      align-items: center;
-      gap: var(--rel-spacing-space-xs);
-    }
-
-    .dimension-input {
-      flex: 1;
-      padding: var(--rel-spacing-space-xs);
-      border: 1px solid var(--rel-colors-gray-border);
-      border-radius: var(--rel-borders-radius-border-radius-300);
-      font-family: var(--rel-fontFamilies-primary);
-      font-size: var(--rel-fontSizes-sm);
-      outline: none;
-    }
-
-    .dimension-unit {
-      font-size: var(--rel-fontSizes-xs);
-      color: var(--rel-colors-gray-primary);
-    }
-
-    .max-note {
-      font-size: var(--rel-fontSizes-xs);
-      color: var(--rel-colors-gray-placeholder);
-      margin-top: 2px;
-    }
-
-    @media (max-width: 768px) {
-      .section-row {
-        grid-template-columns: 1fr;
-      }
-
-      .dimension-inputs {
-        grid-template-columns: repeat(2, 1fr);
-      }
-    }
-  `;
-
-  private updateField(field: keyof QuoteFormData, value: any) {
-    this.formData = { ...this.formData, [field]: value };
-    this.dispatchEvent(
-      new CustomEvent("form-change", {
-        detail: this.formData,
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
-
-  render() {
-    return html`
-      <div class="quote-page">
-        <!-- Shipping Details Section -->
-        <div class="section">
-          <h2 class="section-title">Shipping Details</h2>
-
-          <div class="subsection-title">Origin</div>
-          <div class="section-row">
-            <div class="field-group">
-              <label class="field-label">
-                Pickup Location <span class="required">*</span>
-              </label>
-              <div class="input-with-icon">
-                <input
-                  type="text"
-                  class="input-field"
-                  placeholder="Enter pickup location"
-                  .value="${this.formData.pickupLocation}"
-                  @input="${(e: Event) =>
-                    this.updateField(
-                      "pickupLocation",
-                      (e.target as HTMLInputElement).value
-                    )}"
-                />
-                <span class="input-icon">🔍</span>
-              </div>
-            </div>
-
-            <div class="field-group">
-              <label class="field-label">
-                Drop off Location <span class="required">*</span>
-              </label>
-              <div class="input-with-icon">
-                <input
-                  type="text"
-                  class="input-field"
-                  placeholder="Enter drop off location"
-                  .value="${this.formData.dropoffLocation}"
-                  @input="${(e: Event) =>
-                    this.updateField(
-                      "dropoffLocation",
-                      (e.target as HTMLInputElement).value
-                    )}"
-                />
-                <span class="input-icon">🔍</span>
-              </div>
-            </div>
-          </div>
-
-          <div class="field-group" style="margin-bottom: var(--rel-spacing-space-md);">
-            <label class="field-label">Service Level</label>
-            <div class="service-level-tabs">
-              <button
-                class="tab-button ${this.formData.serviceLevel === "standard"
-                  ? "active"
-                  : ""}"
-                @click="${() => this.updateField("serviceLevel", "standard")}"
-              >
-                Standard
-              </button>
-              <button
-                class="tab-button ${this.formData.serviceLevel === "guaranteed"
-                  ? "active"
-                  : ""}"
-                @click="${() => this.updateField("serviceLevel", "guaranteed")}"
-              >
-                Guaranteed
-              </button>
-            </div>
-          </div>
-
-          <div class="section-row">
-            <div class="field-group">
-              <label class="field-label">Origin Type</label>
-              <div class="radio-group">
-                <div
-                  class="radio-option"
-                  @click="${() => this.updateField("originType", "commercial")}"
-                >
-                  <div
-                    class="radio-input ${this.formData.originType === "commercial"
-                      ? "checked"
-                      : ""}"
-                  ></div>
-                  <span class="radio-label">Commercial</span>
-                </div>
-                <div
-                  class="radio-option"
-                  @click="${() => this.updateField("originType", "residential")}"
-                >
-                  <div
-                    class="radio-input ${this.formData.originType === "residential"
-                      ? "checked"
-                      : ""}"
-                  ></div>
-                  <span class="radio-label">Residential</span>
-                </div>
-              </div>
-            </div>
-
-            <div class="field-group">
-              <label class="field-label">Destination Type</label>
-              <div class="radio-group">
-                <div
-                  class="radio-option"
-                  @click="${() =>
-                    this.updateField("destinationType", "commercial")}"
-                >
-                  <div
-                    class="radio-input ${this.formData.destinationType ===
-                    "commercial"
-                      ? "checked"
-                      : ""}"
-                  ></div>
-                  <span class="radio-label">Commercial</span>
-                </div>
-                <div
-                  class="radio-option"
-                  @click="${() =>
-                    this.updateField("destinationType", "residential")}"
-                >
-                  <div
-                    class="radio-input ${this.formData.destinationType ===
-                    "residential"
-                      ? "checked"
-                      : ""}"
-                  ></div>
-                  <span class="radio-label">Residential</span>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div class="section-row">
-            <div class="field-group">
-              <label class="field-label">Loading Requirements</label>
-              <select
-                .value="${this.formData.loadingRequirements}"
-                @change="${(e: Event) =>
-                  this.updateField(
-                    "loadingRequirements",
-                    (e.target as HTMLSelectElement).value
-                  )}"
-              >
-                <option value="">Select</option>
-                <option value="dock">Dock</option>
-                <option value="liftgate">Liftgate</option>
-                <option value="inside">Inside Pickup</option>
-              </select>
-              <p class="helper-text">
-                If inside pickup/delivery is selected, the driver will bring a
-                pallet jack to move the goods from the dock to the truck (or
-                vice-versa). If inside pickup or delivery is at a residence or a
-                non-dock location, please also select the "Lift gate" as well.
-              </p>
-            </div>
-
-            <div class="field-group">
-              <label class="field-label">Delivery Requirements</label>
-              <select
-                .value="${this.formData.deliveryRequirements}"
-                @change="${(e: Event) =>
-                  this.updateField(
-                    "deliveryRequirements",
-                    (e.target as HTMLSelectElement).value
-                  )}"
-              >
-                <option value="">Select</option>
-                <option value="dock">Dock</option>
-                <option value="liftgate">Liftgate</option>
-                <option value="inside">Inside Delivery</option>
-              </select>
-            </div>
-          </div>
-
-          <div class="section-row">
-            <div class="field-group">
-              <label class="field-label">Loading Limited Access Type</label>
-              <select
-                .value="${this.formData.loadingLimitedAccessType}"
-                @change="${(e: Event) =>
-                  this.updateField(
-                    "loadingLimitedAccessType",
-                    (e.target as HTMLSelectElement).value
-                  )}"
-              >
-                <option value="">Select</option>
-                <option value="none">None</option>
-                <option value="residential">Residential</option>
-                <option value="construction">Construction Site</option>
-              </select>
-            </div>
-
-            <div class="field-group">
-              <label class="field-label">Delivery Limited Access Type</label>
-              <select
-                .value="${this.formData.deliveryLimitedAccessType}"
-                @change="${(e: Event) =>
-                  this.updateField(
-                    "deliveryLimitedAccessType",
-                    (e.target as HTMLSelectElement).value
-                  )}"
-              >
-                <option value="">Select</option>
-                <option value="none">None</option>
-                <option value="residential">Residential</option>
-                <option value="construction">Construction Site</option>
-              </select>
-            </div>
-          </div>
-
-          <div class="section-row single">
-            <div class="field-group">
-              <label class="field-label">
-                Pickup Date <span class="required">*</span>
-              </label>
-              <input
-                type="date"
-                class="input-field"
-                .value="${this.formData.pickupDate}"
-                @input="${(e: Event) =>
-                  this.updateField(
-                    "pickupDate",
-                    (e.target as HTMLInputElement).value
-                  )}"
-              />
-            </div>
-          </div>
-        </div>
-
-        <!-- Commodity Details Section -->
-        <div class="section">
-          <h2 class="section-title">Commodity Details</h2>
-
-          <div class="field-group" style="margin-bottom: var(--rel-spacing-space-md);">
-            <label class="field-label">Is this a hazmat commodity?</label>
-            <div class="radio-group">
-              <div
-                class="radio-option"
-                @click="${() => this.updateField("isHazmat", true)}"
-              >
-                <div
-                  class="radio-input ${this.formData.isHazmat ? "checked" : ""}"
-                ></div>
-                <span class="radio-label">Yes</span>
-              </div>
-              <div
-                class="radio-option"
-                @click="${() => this.updateField("isHazmat", false)}"
-              >
-                <div
-                  class="radio-input ${!this.formData.isHazmat ? "checked" : ""}"
-                ></div>
-                <span class="radio-label">No</span>
-              </div>
-            </div>
-          </div>
-
-          <div class="section-row">
-            <div class="field-group">
-              <label class="field-label">
-                Commodity <span class="required">*</span>
-              </label>
-              <input
-                type="text"
-                class="input-field"
-                .value="${this.formData.commodity}"
-                @input="${(e: Event) =>
-                  this.updateField(
-                    "commodity",
-                    (e.target as HTMLInputElement).value
-                  )}"
-              />
-            </div>
-
-            <div class="field-group">
-              <label class="field-label">
-                Commodity Description <span class="required">*</span>
-              </label>
-              <input
-                type="text"
-                class="input-field"
-                .value="${this.formData.commodityDescription}"
-                @input="${(e: Event) =>
-                  this.updateField(
-                    "commodityDescription",
-                    (e.target as HTMLInputElement).value
-                  )}"
-              />
-            </div>
-          </div>
-
-          <div class="section-row">
-            <div class="field-group">
-              <label class="field-label">
-                Handling Units <span class="required">*</span>
-                <span class="info-icon">ⓘ</span>
-              </label>
-              <input
-                type="number"
-                class="input-field"
-                .value="${this.formData.handlingUnits}"
-                @input="${(e: Event) =>
-                  this.updateField(
-                    "handlingUnits",
-                    parseInt((e.target as HTMLInputElement).value) || 0
-                  )}"
-              />
-            </div>
-
-            <div class="field-group">
-              <label class="field-label">
-                Handling Type <span class="required">*</span>
-              </label>
-              <select
-                .value="${this.formData.handlingType}"
-                @change="${(e: Event) =>
-                  this.updateField(
-                    "handlingType",
-                    (e.target as HTMLSelectElement).value
-                  )}"
-              >
-                <option value="">Select</option>
-                <option value="pallet">Pallet</option>
-                <option value="crate">Crate</option>
-                <option value="box">Box</option>
-              </select>
-            </div>
-          </div>
-
-          <div class="field-group" style="margin-bottom: var(--rel-spacing-space-md);">
-            <div class="dimension-inputs">
-              <div class="dimension-field">
-                <label class="dimension-label">
-                  Length <span class="required">*</span>
-                </label>
-                <div class="dimension-input-wrapper">
-                  <input
-                    type="number"
-                    class="dimension-input"
-                    .value="${this.formData.length}"
-                    @input="${(e: Event) =>
-                      this.updateField(
-                        "length",
-                        parseFloat((e.target as HTMLInputElement).value) || 0
-                      )}"
-                  />
-                  <span class="dimension-unit">inches</span>
-                </div>
-              </div>
-
-              <div class="dimension-field">
-                <label class="dimension-label">
-                  Width <span class="required">*</span>
-                </label>
-                <div class="dimension-input-wrapper">
-                  <input
-                    type="number"
-                    class="dimension-input"
-                    .value="${this.formData.width}"
-                    @input="${(e: Event) =>
-                      this.updateField(
-                        "width",
-                        parseFloat((e.target as HTMLInputElement).value) || 0
-                      )}"
-                  />
-                  <span class="dimension-unit">inches</span>
-                </div>
-                <div class="max-note">96" max</div>
-              </div>
-
-              <div class="dimension-field">
-                <label class="dimension-label">
-                  Height <span class="required">*</span>
-                </label>
-                <div class="dimension-input-wrapper">
-                  <input
-                    type="number"
-                    class="dimension-input"
-                    .value="${this.formData.height}"
-                    @input="${(e: Event) =>
-                      this.updateField(
-                        "height",
-                        parseFloat((e.target as HTMLInputElement).value) || 0
-                      )}"
-                  />
-                  <span class="dimension-unit">inches</span>
-                </div>
-                <div class="max-note">96" max</div>
-              </div>
-
-              <div class="dimension-field">
-                <label class="dimension-label">
-                  Total Weight <span class="required">*</span>
-                </label>
-                <div class="dimension-input-wrapper">
-                  <input
-                    type="number"
-                    class="dimension-input"
-                    .value="${this.formData.totalWeight}"
-                    @input="${(e: Event) =>
-                      this.updateField(
-                        "totalWeight",
-                        parseFloat((e.target as HTMLInputElement).value) || 0
-                      )}"
-                  />
-                  <span class="dimension-unit">lbs</span>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div class="section-row">
-            <div class="field-group">
-              <label class="field-label">
-                Class <span class="required">*</span>
-              </label>
-              <select
-                .value="${this.formData.class}"
-                @change="${(e: Event) =>
-                  this.updateField("class", (e.target as HTMLSelectElement).value)}"
-              >
-                <option value="">Select</option>
-                <option value="50">Class 50</option>
-                <option value="55">Class 55</option>
-                <option value="60">Class 60</option>
-                <option value="65">Class 65</option>
-                <option value="70">Class 70</option>
-                <option value="77.5">Class 77.5</option>
-                <option value="85">Class 85</option>
-                <option value="92.5">Class 92.5</option>
-                <option value="100">Class 100</option>
-              </select>
-            </div>
-
-            <div class="field-group">
-              <label class="field-label">
-                Insured Value
-                <span class="info-icon">ⓘ</span>
-              </label>
-              <input
-                type="number"
-                class="input-field"
-                .value="${this.formData.insuredValue}"
-                @input="${(e: Event) =>
-                  this.updateField(
-                    "insuredValue",
-                    parseFloat((e.target as HTMLInputElement).value) || 0
-                  )}"
-              />
-            </div>
-          </div>
-
-          <div class="section-row single">
-            <div class="field-group">
-              <label class="field-label">NMFC Number</label>
-              <input
-                type="text"
-                class="input-field"
-                .value="${this.formData.nmfcNumber}"
-                @input="${(e: Event) =>
-                  this.updateField(
-                    "nmfcNumber",
-                    (e.target as HTMLInputElement).value
-                  )}"
-              />
-              <p class="helper-text">
-                Failure to provide NMFC may result in additional variance
-                charges
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-}