@meetelise/chat 1.29.0 → 1.30.1

package/src/WebComponent/launcher/launcherStyles.ts

@@ -0,0 +1,500 @@
+import { css } from "lit";
+
+export const launcherStyles = css`
+  * {
+    font-family: "Helvetica Neue", Arial;
+    font-size: 14px;
+
+    transition: all 0.2s ease-in-out; /* apply a smooth transition effect to all properties */
+  }
+  :host {
+    --glowBarHeight: 11.2px;
+    --enterAnimationDuration: 0.5s;
+    --desktopZIndex: 100000;
+  }
+
+  @keyframes slideInFromRight {
+    from {
+      transform: translateX(100%);
+    }
+    to {
+      transform: translateX(0);
+    }
+  }
+  .launcher {
+    font-family: "Helvetica Neue", Arial;
+    user-select: none;
+    position: fixed;
+  }
+  .launcher:not(.miniLauncher) {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    background-color: rgba(255, 255, 255, 0.8);
+    color: #202020;
+    backdrop-filter: blur(50px);
+    box-shadow: 0px 8px 8px 4px rgba(0, 0, 0, 0.25);
+  }
+  .launcher:not(.miniLauncher).launcher__mobile {
+    width: 100%;
+    bottom: 0px;
+    left: 0px;
+    padding: 5px;
+  }
+  .launcher:not(.miniLauncher).launcher__desktop {
+    width: 245px;
+    height: 112px;
+    padding-left: 10px;
+  }
+  .launcher.launcher__desktop {
+    right: 0px;
+    overflow: hidden;
+    border-radius: 10px 0px 0px 10px;
+    bottom: 40px;
+    z-index: 100000;
+  }
+  .launcher.launcher__desktop.firstMount {
+    animation: slideInFromRight var(--enterAnimationDuration);
+  }
+  .launcher .glowBar {
+    overflow: hidden;
+    background-position: center;
+    position: absolute;
+    top: 3px;
+    left: 3px;
+    height: 11.2px;
+    width: 100%;
+    object-fit: fill;
+    border-top-left-radius: 10px;
+  }
+
+  .launcher .glowBar + * {
+    margin-top: calc(var(--glowBarHeight) + 8px);
+  }
+  .launcher .content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 6px;
+  }
+  .launcher .content .header {
+    display: flex;
+    align-items: center;
+  }
+  .launcher .content .header .headerText {
+    font-weight: 600;
+    font-size: 20px;
+  }
+  .launcher .content .subtitle {
+    font-size: 12px;
+    font-weight: 600;
+  }
+  .miniLauncher {
+    display: flex;
+    align-items: center;
+    background-color: #202020;
+    position: fixed;
+  }
+  .miniLauncher:hover {
+    background: radial-gradient(
+      36.85% 65.32% at 50% 106.31%,
+      #03ecc4 0%,
+      rgba(131, 129, 142, 1) 100%
+    );
+  }
+  .miniLauncher.firstMount {
+    animation: slideInFromRight 0.5s;
+  }
+  .miniLauncher.launcher__desktop {
+    padding-right: 20px;
+    right: 0px;
+    overflow: hidden;
+    bottom: 40px;
+    z-index: var(--desktopZIndex);
+  }
+  .miniLauncher.launcher__mobile {
+    right: 10px;
+    bottom: 20px;
+  }
+
+  .launcher__primary-action-text {
+    font-family: "Helvetica Neue", Arial;
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 22px;
+    cursor: pointer;
+  }
+
+  .launcher__primary-action:hover {
+    color: #350da6;
+  }
+
+  .launcher__primary-action {
+    transition: color 0.5s cubic-bezier(0.2, 0.19, 0.27, 0.98),
+      fill 0.5s cubic-bezier(0.2, 0.19, 0.27, 0.98);
+    cursor: pointer;
+  }
+
+  .launcher__primary-action:hover path {
+    fill: #350da6;
+  }
+
+  .launcher__primary-action:hover .launcher__ask-underline {
+    background: #350da6;
+  }
+
+  .launcher__primary-action svg {
+    height: 28px;
+    width: 28px;
+    transform: translateX(2px);
+  }
+
+  .launcher__ask-underline {
+    width: 47px;
+    height: 3px;
+    background: #1e1e1e;
+    transition: background 0.5s cubic-bezier(0.2, 0.19, 0.27, 0.98);
+  }
+
+  .launcher__filler-text {
+    font-size: 10px;
+    line-height: 22px;
+    color: #1e1e1e;
+  }
+
+  .launcher__call-to-action-option {
+    font-weight: 700;
+    font-size: 12px;
+    line-height: 22px;
+
+    color: #1e1e1e;
+    border-bottom: 2px solid #1e1e1e;
+    width: fit-content;
+    height: fit-content;
+    cursor: pointer;
+    transition: color 0.2s cubic-bezier(0.2, 0.19, 0.27, 0.98);
+  }
+
+  .launcher__call-to-action-option:hover {
+    color: #350da6;
+    border-bottom: 2px solid #350da6;
+  }
+
+  .launcher__call-to-actions-wrapper {
+    width: 100%;
+    display: flex;
+  }
+
+  .launcher__call-to-actions-wrapper
+    > .launcher__call-to-action-option:not(:last-child) {
+    margin-right: 15px;
+  }
+
+  .launcher__window-wrapper {
+    position: fixed;
+    right: 0;
+    bottom: 172px;
+  }
+
+  .launcher__mini-launcher-wrapper {
+    position: fixed;
+    right: 0px;
+    bottom: 110px;
+    z-index: 100000;
+    display: flex;
+    align-items: center;
+    width: fit-content;
+  }
+  .launcher__mobile-launcher-wrapper {
+    position: fixed;
+    right: 12px;
+    bottom: 0px;
+    z-index: 100000;
+    display: flex;
+    align-items: center;
+  }
+
+  .launcher__mini-option {
+    position: relative;
+    // This is so that the pseudo elements we created will be visible despite being beneath the element it is a pseudo element for
+    border: 4px solid transparent;
+    height: 48px;
+    width: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background: rgba(240, 240, 240, 0.9);
+    background-clip: padding-box;
+    padding: 4px;
+    box-shadow: 0px 8px 8px 4px rgba(0, 0, 0, 0.25);
+    cursor: pointer;
+  }
+
+  .launcher__mini-option-wrapper {
+    margin-right: 12px;
+  }
+
+  .launcher__mini-option:not(:hover)::before {
+    position: absolute;
+    top: -4px;
+    bottom: -4px;
+    left: -4px;
+    right: -4px;
+    background: #ffffff;
+    content: "";
+    z-index: -1;
+    border-radius: 50%;
+  }
+
+  .launcher__secondary-option {
+    width: 30px;
+    height: 30px;
+  }
+
+  .launcher__mini-option-wrapper {
+    background-clip: padding-box;
+  }
+
+  .launcher__mini-option:hover {
+    border: none;
+  }
+
+  .launcher__mini-option:hover::before {
+    position: absolute;
+    top: -4px;
+    bottom: -4px;
+    left: -4px;
+    right: -4px;
+    background: linear-gradient(to right, #350da6, #8c58e5, #e66933);
+    background-size: cover;
+    content: "";
+    z-index: -1;
+    border-radius: 50%;
+  }
+
+  @media screen and (max-width: 768px) {
+    .launcher__mini-elevated {
+      bottom: 75px;
+    }
+  }
+
+  @media screen and (max-width: 767px) {
+    .launcher:not(.miniLauncher).launcher__desktop {
+      width: 100%;
+    }
+
+    .launcher.launcher__desktop {
+      bottom: 0px;
+    }
+
+    .launcher.launcher__desktop {
+      border-radius: 0px;
+    }
+
+    .launcher .glowBar {
+      top: 3px;
+      left: 0;
+      border-top-left-radius: 0px;
+    }
+
+    .launcher .content {
+      flex-direction: row;
+      padding-top: 15px;
+      padding-bottom: 15px;
+    }
+
+    .launcher__primary-action-text {
+      font-size: 18px;
+      flex-grow: 1;
+    }
+
+    .launcher__call-to-actions-wrapper {
+      width: fit-content;
+    }
+
+    .launcher__ask-underline {
+      width: 35px;
+    }
+
+    .launcher__window-wrapper {
+      left: 0;
+      bottom: 0;
+    }
+  }
+
+  .minimize-button {
+    position: absolute;
+    top: -24px;
+    right: 4px;
+
+    background: #ffffff;
+    border-radius: 4px;
+    border: none;
+
+    width: 18px;
+    height: 18px;
+
+    padding: 0;
+    cursor: pointer;
+    z-index: 1;
+    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+  }
+  .minimize-button:hover {
+    filter: brightness(0.9);
+  }
+
+  .chevron-down,
+  .chevron-up {
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .chevron-down {
+    transform: rotate(90deg);
+  }
+  .chevron-up {
+    transform: rotate(-90deg);
+  }
+
+  .type-gradient__list {
+    width: 199px;
+    height: 262px;
+    left: 1218px;
+    top: 604px;
+
+    border: 1px solid #ffffff;
+    border-radius: 20px 0px 20px 20px;
+    background: #262626;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    overflow: hidden;
+    cursor: pointer;
+
+    box-shadow: 0px 8px 8px 4px rgba(0, 0, 0, 0.5);
+  }
+  .type-gradient__top-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background: #ffffff;
+    overflow: hidden;
+  }
+  .video-container {
+    position: relative;
+    margin-left: -48px;
+  }
+  .glowBackground {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0px;
+    left: 0px;
+    object-fit: cover;
+    transform: scale(1.3);
+    filter: brightness(80%);
+  }
+  .type-gradient__scroll-info {
+    padding: 18px;
+    display: flex;
+    flex-direction: column;
+    z-index: 99999;
+
+    margin-top: 0em;
+
+    opacity: 0.95;
+  }
+  .type-gradient__scroll-info:hover {
+    text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.85);
+  }
+  .type-gradient__scroll-info:hover > .type-gradient__description > li {
+    opacity: 0.99;
+  }
+
+  .type-gradient__chat-container {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: 4px;
+  }
+  .type-gradient__chat-header > .title-bold {
+    font-family: "Helvetica Neue", Arial;
+    font-style: normal;
+    font-size: 22px;
+    line-height: 28px;
+    color: #ffffff;
+    opacity: 0.95;
+  }
+  .type-gradient__chat-header {
+    font-family: "Helvetica Neue", Arial;
+    font-style: normal;
+    font-size: 22px;
+    line-height: 28px;
+    color: #ffffff;
+    font-weight: 300;
+  }
+  .type-gradient__description {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+  .type-gradient__description > li {
+    font-family: "Helvetica Neue", Arial;
+    font-style: normal;
+    font-weight: 300;
+    font-size: 18px;
+    line-height: 24px;
+
+    color: #ffffff;
+    opacity: 0.5;
+  }
+
+  .type-gradient__email {
+    background: #000000;
+    border-top: 1px solid #4d4d4d;
+    border-bottom: 1px solid #4d4d4d;
+  }
+
+  .type-gradient__bottom-tab {
+    font-family: "Helvetica Neue", Arial;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 18px;
+    padding: 16px 20px;
+
+    color: #ffffff;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+  .type-gradient__bottom-tab:hover {
+    text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.85);
+    background: linear-gradient(265.11deg, #000000 16.43%, #3c3c3c 87.21%);
+  }
+  .type-gradient__icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .type-gradient__icon svg {
+    color: #ffffff;
+  }
+
+  @media screen and (max-height: 750px) {
+    .launcher__window-wrapper {
+      bottom: 0;
+    }
+  }
+  @media screen and (min-width: 1000px) {
+    .inner-pill-wrapper {
+      height: 50px;
+      width: 164px;
+    }
+  }
+`;

package/src/WebComponent/launcher/mobile-launcher.ts

@@ -0,0 +1,162 @@
+import { html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { typeMobileStyles } from "./typeMobileStyles";
+import { styleMap } from "lit/directives/style-map.js";
+import { defaultBackgroundColor, defaultPrimaryColor } from "../../themes";
+import { EmailOutlineIcon } from "../icons/EmailOutlineIcon";
+import { PhoneOutlineIcon } from "../icons/PhoneOutlineIcon";
+import { BookTourOutlineIcon } from "../icons/BookTourOutlineIcon";
+import { ChatOutlineIcon } from "../icons/ChatOutlineIcon";
+import { ApplyOutlineIcon } from "../icons/ApplyOutlineIcon";
+import { CalculatorOutlineIcon } from "../icons/CalculatorOutlineIcon";
+
+@customElement("mobile-launcher")
+export class MobileLauncher extends LitElement {
+  static styles = [typeMobileStyles];
+
+  @property({ attribute: true })
+  onClickMinimize: () => void = () => {
+    return;
+  };
+
+  @property({ attribute: true })
+  onClickEmailOption: (e: MouseEvent) => void = () => {
+    return;
+  };
+  @property({ attribute: true })
+  onClickPhoneOption: (e: MouseEvent) => void = () => {
+    return;
+  };
+  @property({ attribute: true })
+  onClickSSTOption: (e: MouseEvent) => void = () => {
+    return;
+  };
+  @property({ attribute: true })
+  onClickApplyNowOption: (e: MouseEvent) => void = () => {
+    return;
+  };
+  @property({ attribute: true })
+  onClickPriceCalculatorOption: (e: MouseEvent) => void = () => {
+    return;
+  };
+  @property({ attribute: true })
+  onChatTapped: (e: MouseEvent) => void = () => {
+    return;
+  };
+
+  @property({ attribute: true })
+  hideChat = false;
+
+  @property({ attribute: true })
+  isMobileDesign = false;
+
+  @property({ attribute: true })
+  primaryColor: string = defaultPrimaryColor;
+
+  @property({ attribute: true })
+  backgroundColor: string = defaultBackgroundColor;
+
+  @property({ attribute: true })
+  hasChatEnabled = false;
+
+  @property({ attribute: true })
+  hasEmailEnabled = false;
+
+  @property({ attribute: true })
+  hasCallUsEnabled = false;
+
+  @property({ attribute: true })
+  hasTextUsEnabled = false;
+
+  @property({ attribute: true })
+  hasSSTEnabled = false;
+
+  @property({ attribute: true })
+  hasApplyNowEnabled = false;
+
+  @property({ attribute: true })
+  hasPricingCalculatorEnabled = false;
+
+  @property({ attribute: true })
+  applicationLink = "";
+
+  @property({ attribute: true })
+  overrideRentgrata = false;
+
+  @property({ attribute: true })
+  foregroundColorOnSecondaryBackgroundColor = "black";
+
+  private renderListElement = (
+    isEnabled: boolean,
+    onClick: (e: MouseEvent) => void,
+    icon: TemplateResult<2> // is an svg icon in lit
+  ) => {
+    if (!isEnabled) {
+      return "";
+    }
+    return html` <li
+      @click=${onClick}
+      class="typeMobile-bttn"
+      style=${styleMap({
+        background: `${this.primaryColor}`,
+      })}
+    >
+      <div
+        class="typeMobile-inner"
+        style=${styleMap({
+          background: `${this.backgroundColor}`,
+        })}
+      >
+        <div class="typeMobile-icon">${icon}</div>
+      </div>
+    </li>`;
+  };
+
+  render(): TemplateResult {
+    return html`<div class="typeMobile-list">
+      <ul>
+        ${this.renderListElement(
+          !!(this.hasApplyNowEnabled && this.applicationLink),
+          this.onClickApplyNowOption,
+          ApplyOutlineIcon(this.foregroundColorOnSecondaryBackgroundColor)
+        )}
+        ${this.renderListElement(
+          this.hasPricingCalculatorEnabled,
+          this.onClickPriceCalculatorOption,
+          CalculatorOutlineIcon("black")
+        )}
+        ${this.renderListElement(
+          this.hasEmailEnabled,
+          this.onClickEmailOption,
+          EmailOutlineIcon(this.foregroundColorOnSecondaryBackgroundColor)
+        )}
+        ${this.renderListElement(
+          this.hasCallUsEnabled || this.hasTextUsEnabled,
+          this.onClickPhoneOption,
+          PhoneOutlineIcon(this.foregroundColorOnSecondaryBackgroundColor)
+        )}
+        ${this.renderListElement(
+          this.hasSSTEnabled,
+          this.onClickSSTOption,
+          BookTourOutlineIcon(this.foregroundColorOnSecondaryBackgroundColor)
+        )}
+        ${this.renderListElement(
+          this.hasChatEnabled && !this.hideChat, // hide chat if under talkjs popup
+          this.onChatTapped,
+          ChatOutlineIcon(this.foregroundColorOnSecondaryBackgroundColor)
+        )}
+        ${!this.isMobileDesign && !this.hideChat
+          ? html`
+              <li>
+                <minimize-expand-button
+                  .onClick=${this.onClickMinimize}
+                  .primaryColor=${this.primaryColor}
+                  .toExpand=${true}
+                ></minimize-expand-button>
+              </li>
+            `
+          : ""}
+      </ul>
+    </div>`;
+  }
+}