@meetelise/chat 1.34.2 → 1.34.3

package/src/WebComponent/launcher/launcherStyles.ts

@@ -1,500 +0,0 @@
-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

@@ -1,162 +0,0 @@
-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>`;
-  }
-}