@meetelise/chat 1.50.6 → 1.51.1

package/src/WebComponent/actions/international-phone-input.ts

@@ -0,0 +1,308 @@
+import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { InputStyles } from "./InputStyles";
+import {
+  formatToPhoneInput,
+  getCountryFromPhoneInput,
+  getE164PhoneNumber,
+  getNationalPhoneNumber,
+  getPhoneCountry,
+  phoneCountryOptions,
+} from "./formatPhoneNumber";
+
+export type InternationalPhoneChangeDetail = {
+  country: string;
+  e164: string | null;
+  formattedValue: string;
+  isValid: boolean;
+};
+
+@customElement("international-phone-input")
+export class InternationalPhoneInput extends LitElement {
+  static styles = [
+    InputStyles,
+    css`
+      :host {
+        display: block;
+        width: 100%;
+      }
+
+      .phone-input-container {
+        align-items: center;
+        background: #d9d9d9;
+        border: 1px solid #efefef;
+        border-radius: 100px;
+        box-sizing: border-box;
+        display: flex;
+        min-height: 44px;
+        overflow: hidden;
+        width: 100%;
+      }
+
+      .phone-input-container:focus-within {
+        border-color: #202020;
+      }
+
+      .phone-input-container--invalid {
+        border-color: #ff0000;
+      }
+
+      .country-select-wrapper {
+        align-items: center;
+        box-sizing: border-box;
+        cursor: pointer;
+        display: flex;
+        flex: 0 0 96px;
+        height: 42px;
+        justify-content: center;
+        position: relative;
+      }
+
+      .country-select-wrapper::after {
+        border-bottom: 1.5px solid #4b4b4b;
+        border-right: 1.5px solid #4b4b4b;
+        content: "";
+        height: 5px;
+        margin-left: 8px;
+        margin-top: -3px;
+        transform: rotate(45deg);
+        width: 5px;
+      }
+
+      .country-select-label {
+        color: #202020;
+        font-family: "Helvetica Neue", Arial;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 22px;
+        white-space: nowrap;
+      }
+
+      select {
+        cursor: pointer;
+        inset: 0;
+        opacity: 0;
+        position: absolute;
+        width: 100%;
+      }
+
+      .phone-input-divider {
+        background: rgba(32, 32, 32, 0.18);
+        flex: 0 0 1px;
+        height: 22px;
+      }
+
+      .phone-input-container input.webchat-input {
+        background: transparent;
+        border: 0;
+        border-radius: 0;
+        box-sizing: border-box;
+        flex: 1;
+        min-width: 0;
+        padding: 10px 16px 10px 12px;
+        width: 100%;
+      }
+
+      .phone-input-container input.webchat-input:active,
+      .phone-input-container input.webchat-input:focus-within {
+        border: 0;
+      }
+
+      @media screen and (max-width: 767px) {
+        input {
+          font-size: 16px;
+        }
+
+        .country-select-wrapper {
+          flex-basis: 92px;
+        }
+      }
+    `,
+  ];
+
+  @property({ attribute: false })
+  country: string | null = null;
+
+  @property({ type: String })
+  value = "";
+
+  @property({ type: Boolean })
+  invalid = false;
+
+  @state()
+  private selectedCountry = "US";
+
+  protected willUpdate(changedProperties: PropertyValues<this>): void {
+    if (changedProperties.has("country")) {
+      this.selectedCountry = getPhoneCountry(this.country);
+    }
+  }
+
+  get e164(): string | null {
+    return getE164PhoneNumber(this.value, this.selectedCountry);
+  }
+
+  get isValid(): boolean {
+    return this.e164 !== null;
+  }
+
+  private dispatchPhoneChange(): void {
+    this.dispatchEvent(
+      new CustomEvent<InternationalPhoneChangeDetail>("phone-change", {
+        bubbles: true,
+        composed: true,
+        detail: {
+          country: this.selectedCountry,
+          e164: this.e164,
+          formattedValue: this.value,
+          isValid: this.isValid,
+        },
+      })
+    );
+  }
+
+  private setFormattedInputValue(
+    input: HTMLInputElement,
+    rawValue: string,
+    country: string
+  ): void {
+    const selectionStart = input.selectionStart;
+    const digitsAfterCursor =
+      selectionStart === null
+        ? 0
+        : rawValue.slice(selectionStart).replace(/\D/g, "").length;
+    this.value = formatToPhoneInput(rawValue, country);
+    input.value = this.value;
+
+    let cursorPosition = selectionStart === 0 ? 0 : this.value.length;
+    let remainingDigits = digitsAfterCursor;
+    while (remainingDigits > 0 && cursorPosition > 0) {
+      cursorPosition -= 1;
+      if (/\d/.test(this.value[cursorPosition])) remainingDigits -= 1;
+    }
+    input.setSelectionRange(cursorPosition, cursorPosition);
+  }
+
+  private handleInput(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    const inferredCountry = getCountryFromPhoneInput(
+      input.value,
+      this.selectedCountry
+    );
+    this.selectedCountry = inferredCountry;
+    this.setFormattedInputValue(input, input.value, inferredCountry);
+    this.dispatchPhoneChange();
+  }
+
+  private handleCountryChange(event: Event): void {
+    const previousCountry = this.selectedCountry;
+    this.selectedCountry = (event.target as HTMLSelectElement).value;
+    const nationalNumber = getNationalPhoneNumber(this.value, previousCountry);
+    this.value = formatToPhoneInput(nationalNumber, this.selectedCountry);
+    this.dispatchPhoneChange();
+  }
+
+  private handleKeydown(event: KeyboardEvent): void {
+    const input = event.target as HTMLInputElement;
+    if (
+      event.key !== "Backspace" ||
+      input.selectionStart === null ||
+      input.selectionEnd !== input.selectionStart ||
+      input.selectionStart === 0 ||
+      (input.selectionStart === 1 && input.value.startsWith("+")) ||
+      /\d/.test(input.value[input.selectionStart - 1])
+    ) {
+      return;
+    }
+
+    const digitsBeforeCursor = input.value
+      .slice(0, input.selectionStart)
+      .replace(/\D/g, "");
+    const digitsAfterCursor = input.value
+      .slice(input.selectionStart)
+      .replace(/\D/g, "");
+    const internationalPrefix = input.value.trimStart().startsWith("+")
+      ? "+"
+      : "";
+    const digitsBeforeUpdatedCursor = digitsBeforeCursor.slice(0, -1);
+    const updatedValue = `${internationalPrefix}${digitsBeforeUpdatedCursor}${digitsAfterCursor}`;
+    const updatedCursorPosition =
+      internationalPrefix.length + digitsBeforeUpdatedCursor.length;
+    const inferredCountry = getCountryFromPhoneInput(
+      updatedValue,
+      this.selectedCountry
+    );
+    event.preventDefault();
+    input.setSelectionRange(updatedCursorPosition, updatedCursorPosition);
+    this.selectedCountry = inferredCountry;
+    this.setFormattedInputValue(input, updatedValue, inferredCountry);
+    this.dispatchPhoneChange();
+  }
+
+  private handleBlur(): void {
+    this.dispatchEvent(
+      new Event("phone-blur", { bubbles: true, composed: true })
+    );
+  }
+
+  private get selectedCountryLabel(): string {
+    return (
+      phoneCountryOptions.find(
+        (option) => option.value === this.selectedCountry
+      )?.compactLabel ?? this.selectedCountry
+    );
+  }
+
+  render(): TemplateResult {
+    return html`
+      <div
+        class=${classMap({
+          "phone-input-container": true,
+          "phone-input-container--invalid": this.invalid,
+        })}
+      >
+        <div class="country-select-wrapper">
+          <span class="country-select-label" aria-hidden="true"
+            >${this.selectedCountryLabel}</span
+          >
+          <select
+            aria-label="Country calling code"
+            .value=${this.selectedCountry}
+            @change=${this.handleCountryChange}
+          >
+            ${phoneCountryOptions.map(
+              (option) =>
+                html`<option
+                  value=${option.value}
+                  ?selected=${option.value === this.selectedCountry}
+                >
+                  ${option.label}
+                </option>`
+            )}
+          </select>
+        </div>
+        <span class="phone-input-divider" aria-hidden="true"></span>
+        <input
+          class="webchat-input"
+          type="tel"
+          inputmode="tel"
+          placeholder="Phone"
+          name="phone"
+          autocomplete="tel-national"
+          maxlength="30"
+          .value=${this.value}
+          @keydown=${this.handleKeydown}
+          @input=${this.handleInput}
+          @blur=${this.handleBlur}
+        />
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "international-phone-input": InternationalPhoneInput;
+  }
+}

package/src/WebComponent/me-select.ts

@@ -29,20 +29,47 @@ export class MESelect extends LitElement {
   @state()
   private activeOptionIndex: number | null = null;
 
+  @state()
+  private searchTerm = "";
+
   @query("#select", true)
   meSelect!: HTMLDivElement;
 
+  @query("#selectText", true)
+  selectInput!: HTMLInputElement;
+
   focus = (): void => {
-    this.meSelect.focus();
+    this.selectInput.focus();
+  };
+
+  private closeSelect = (): void => {
+    this.isOpen = false;
+    this.searchTerm = "";
+    this.activeOption = null;
+    this.activeOptionIndex = null;
+  };
+
+  private openSelect = (): void => {
+    this.isOpen = true;
   };
 
   toggleSelect = (): void => {
     if (this.isOpen) {
-      this.activeOption = null;
+      this.closeSelect();
+    } else {
+      this.openSelect();
+      this.selectInput.focus();
     }
-    this.isOpen = !this.isOpen;
   };
 
+  private get visibleOptions(): MeSelectOption[] {
+    const searchTerm = this.searchTerm.trim().toLowerCase();
+    if (!searchTerm) return this.options;
+    return this.options.filter((option) =>
+      option.label.toLowerCase().includes(searchTerm)
+    );
+  }
+
   setSelectedOption = (option: MeSelectOption, closeSelect = true): void => {
     if (this.value !== option.value) {
       this.value = option.value;
@@ -51,8 +78,7 @@ export class MESelect extends LitElement {
     }
 
     if (closeSelect) {
-      this.isOpen = !this.isOpen;
-      this.activeOption = null;
+      this.closeSelect();
     }
 
     if (!this.value) {
@@ -86,6 +112,12 @@ export class MESelect extends LitElement {
     }
   }
 
+  private handleSearchInput = (e: Event): void => {
+    this.searchTerm = (e.target as HTMLInputElement).value;
+    this.activeOption = null;
+    this.activeOptionIndex = null;
+  };
+
   constructor() {
     super();
     // TODO: the current thing works, but want to investigate more. why doesn't it work with `this`?
@@ -94,8 +126,8 @@ export class MESelect extends LitElement {
     // – for example, to Window, Document, or some element in the main DOM – you should add the
     // listener in connectedCallback and remove it in disconnectedCallback." (https://lit.dev/docs/components/events/)
     document.addEventListener("click", (event: MouseEvent) => {
-      if (!event.composedPath().includes(this.meSelect)) {
-        this.isOpen = false;
+      if (!event.composedPath().includes(this)) {
+        this.closeSelect();
       }
     });
   }
@@ -120,6 +152,7 @@ export class MESelect extends LitElement {
         height: 14px;
         display: flex;
         align-items: center;
+        color: inherit;
       }
 
       ul {
@@ -215,6 +248,13 @@ export class MESelect extends LitElement {
   render(): TemplateResult {
     const activeIndex = this.activeOptionIndex;
     const accessibleName = this.placeholder ?? "Select";
+    const visibleOptions = this.visibleOptions;
+    const selectedLabel = this.options.find(
+      (o) => o.value === this.value
+    )?.label;
+    const inputValue = this.isOpen
+      ? this.searchTerm
+      : selectedLabel || this.value || "";
     return html`
       <div id="outer-select-container">
         <div
@@ -224,34 +264,24 @@ export class MESelect extends LitElement {
             ["webchat-font__desktop"]: !isMobile(),
             ["webchat-font__mobile"]: isMobile(),
           })}
-          tabindex="0"
-          role="combobox"
-          aria-haspopup="listbox"
-          aria-expanded=${this.isOpen ? "true" : "false"}
-          aria-controls=${this.listboxId}
-          aria-label=${accessibleName}
-          aria-activedescendant=${this.isOpen && activeIndex != null
-            ? this.optionId(activeIndex)
-            : ""}
-          @click=${() => (this.isOpen = !this.isOpen)}
+          @mousedown=${(e: MouseEvent) => {
+            if (e.target !== this.selectInput) e.preventDefault();
+          }}
+          @click=${this.toggleSelect}
           @keydown="${(e: KeyboardEvent) => {
             switch (e.key) {
               case "Enter":
-              case " ":
                 e.preventDefault();
                 if (this.isOpen && this.activeOption) {
                   this.setSelectedOption(this.activeOption);
-                } else {
-                  this.toggleSelect();
+                } else if (!this.isOpen) {
+                  this.openSelect();
                 }
                 break;
               case "Escape":
-                e.preventDefault();
-                this.isOpen = false;
-                break;
-              case "Tab":
                 if (this.isOpen) {
                   e.preventDefault();
+                  this.closeSelect();
                 }
                 break;
               case "ArrowUp":
@@ -261,41 +291,55 @@ export class MESelect extends LitElement {
                     0,
                     this.activeOptionIndex - 1
                   );
-                  this.activeOption = this.options[this.activeOptionIndex];
+                  this.activeOption = visibleOptions[this.activeOptionIndex];
                   this.adjustScrollToActiveOption();
                 }
                 break;
-
               case "ArrowDown":
                 e.preventDefault();
-                if (this.isOpen) {
+                if (this.isOpen && visibleOptions.length > 0) {
                   if (this.activeOptionIndex == null) {
                     this.activeOptionIndex = 0;
-                  } else if (this.activeOptionIndex < this.options.length - 1) {
+                  } else if (
+                    this.activeOptionIndex <
+                    visibleOptions.length - 1
+                  ) {
                     this.activeOptionIndex++;
                   }
-                  this.activeOption = this.options[this.activeOptionIndex];
+                  this.activeOption = visibleOptions[this.activeOptionIndex];
                   this.adjustScrollToActiveOption();
                 }
                 break;
             }
           }}"
         >
-          ${this.options.find((o) => o.value === this.value)?.label
-            ? html` <span id="selectText"
-                >${this.options.find((o) => o.value === this.value)?.label ??
-                this.placeholder}</span
-              >`
-            : html` <input
-                readonly
-                tabindex="-1"
-                placeholder="${this.placeholder}"
-                .value="${this.options.find((o) => o.value === this.value)
-                  ?.label ||
-                this.value ||
-                ""}"
-                id="selectText"
-              />`}
+          <input
+            id="selectText"
+            role="combobox"
+            aria-haspopup="listbox"
+            aria-expanded=${this.isOpen ? "true" : "false"}
+            aria-controls=${this.listboxId}
+            aria-label=${accessibleName}
+            aria-autocomplete="list"
+            aria-activedescendant=${this.isOpen && activeIndex != null
+              ? this.optionId(activeIndex)
+              : ""}
+            autocomplete="off"
+            ?readonly=${!this.isOpen}
+            .value=${inputValue}
+            placeholder=${this.isOpen
+              ? selectedLabel || this.placeholder
+              : this.placeholder}
+            @click=${(e: Event) => {
+              e.stopPropagation();
+              if (!this.isOpen) this.openSelect();
+            }}
+            @focus=${() => {
+              if (!this.isOpen) this.openSelect();
+            }}
+            @blur=${this.closeSelect}
+            @input=${this.handleSearchInput}
+          />
 
           <svg
             width="10"
@@ -312,7 +356,7 @@ export class MESelect extends LitElement {
         </div>
         ${this.isOpen
           ? html`<ul id=${this.listboxId} role="listbox">
-              ${this.options.map(
+              ${visibleOptions.map(
                 (option, index) =>
                   html`<li
                     id=${this.optionId(index)}
@@ -320,6 +364,7 @@ export class MESelect extends LitElement {
                     aria-selected=${this.value === option.value
                       ? "true"
                       : "false"}
+                    @mousedown=${(e: MouseEvent) => e.preventDefault()}
                     @click="${() => this.setSelectedOption(option)}"
                     @mousemove="${() => {
                       this.activeOption = option;

package/src/formatPhoneNumber.test.ts

@@ -0,0 +1,91 @@
+import { expect } from "@esm-bundle/chai";
+import {
+  formatPhoneNumber,
+  formatToPhoneInput,
+  getCountryFromPhoneInput,
+  formatToUsPhoneInput,
+  getE164PhoneNumber,
+  getPhoneCountry,
+  isValidInternationalPhoneNumber,
+  phoneCountryOptions,
+} from "./WebComponent/actions/formatPhoneNumber";
+
+describe("international phone numbers", () => {
+  it("preserves and formats a UK E.164 number instead of truncating it", () => {
+    expect(formatToPhoneInput("+44 20 7946 0958")).to.equal("+44 20 7946 0958");
+  });
+
+  it("keeps existing US formatting and E.164 output", () => {
+    expect(formatToPhoneInput("2025550123", "US")).to.equal("(202) 555-0123");
+    expect(getE164PhoneNumber("(202) 555-0123", "US")).to.equal("+12025550123");
+  });
+
+  it("normalizes national and international UK input", () => {
+    expect(getE164PhoneNumber("07400 123456", "GB")).to.equal("+447400123456");
+    expect(getE164PhoneNumber("+44 7400 123456", "US")).to.equal(
+      "+447400123456"
+    );
+  });
+
+  it("handles shared calling codes and significant leading zeroes", () => {
+    expect(getE164PhoneNumber("416 555 0123", "CA")).to.equal("+14165550123");
+    expect(getE164PhoneNumber("02 1234 5678", "IT")).to.equal("+390212345678");
+    expect(getCountryFromPhoneInput("2025550123", "CA")).to.equal("CA");
+  });
+
+  it("normalizes representative national numbers across regions", () => {
+    const samples = [
+      ["US", "2025550123", "+12025550123"],
+      ["CA", "4165550123", "+14165550123"],
+      ["MX", "5512345678", "+525512345678"],
+      ["GB", "07400123456", "+447400123456"],
+      ["IT", "0212345678", "+390212345678"],
+      ["AU", "0412345678", "+61412345678"],
+      ["DE", "030123456", "+4930123456"],
+      ["IN", "9876543210", "+919876543210"],
+      ["JP", "09012345678", "+819012345678"],
+      ["BR", "11912345678", "+5511912345678"],
+      ["ZA", "0821234567", "+27821234567"],
+    ] as const;
+
+    for (const [country, nationalNumber, expectedE164] of samples) {
+      expect(getE164PhoneNumber(nationalNumber, country)).to.equal(
+        expectedE164,
+        country
+      );
+    }
+  });
+
+  it("rejects impossible numbers", () => {
+    expect(isValidInternationalPhoneNumber("123", "GB")).to.equal(false);
+    expect(getE164PhoneNumber("123", "GB")).to.equal(null);
+  });
+
+  it("offers every supported country with common regions pinned", () => {
+    expect(phoneCountryOptions.length).to.be.greaterThan(200);
+    expect(
+      phoneCountryOptions.slice(0, 4).map(({ value }) => value)
+    ).to.deep.equal(["US", "CA", "MX", "GB"]);
+    expect(phoneCountryOptions.find(({ value }) => value === "MX")).to.include({
+      compactLabel: "🇲🇽 +52",
+      label: "🇲🇽 +52 – Mexico",
+    });
+    expect(
+      new Set(phoneCountryOptions.map(({ value }) => value)).size
+    ).to.equal(phoneCountryOptions.length);
+  });
+
+  it("falls back to the US for missing or unsupported building countries", () => {
+    expect(getPhoneCountry(null)).to.equal("US");
+    expect(getPhoneCountry("unknown")).to.equal("US");
+  });
+
+  it("does not change the separate leasing-office display formatter", () => {
+    expect(formatPhoneNumber("+12025550123")).to.equal("+1 (202) 555-0123");
+  });
+
+  it("keeps Text Us limited to its existing ten-digit US format", () => {
+    expect(formatToUsPhoneInput("2025550123")).to.equal("(202) 555-0123");
+    expect(formatToUsPhoneInput("+44 20 7946 0958")).to.equal("(442) 079-4609");
+  });
+});