@meetelise/chat 1.11.0 → 1.12.0

package/src/WebComponent/Scheduler/me-select.ts

@@ -0,0 +1,244 @@
+import { LitElement, html, TemplateResult, css } from "lit";
+import { property, state, query } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+
+// TODO: would be nice to mimic the usage of native <select> where the options are children
+
+export class MESelect extends LitElement {
+  @property({ attribute: false })
+  options: string[] = [];
+
+  @property({ type: String })
+  placeholder?: string = "Select";
+
+  @property({ type: String })
+  defaultOption?: string;
+
+  @state()
+  private selected?: string;
+
+  @state()
+  private activeOption: string | null = null;
+
+  @state()
+  private isOpen?: boolean = false;
+
+  @query("#select")
+  meSelect!: HTMLDivElement;
+
+  toggleSelect = (): void => {
+    if (this.isOpen) {
+      this.activeOption = null;
+    }
+    this.isOpen = !this.isOpen;
+  };
+
+  setSelectedOption = (option: string, closeSelect = true): void => {
+    this.selected = option;
+    if (closeSelect) {
+      this.isOpen = !this.isOpen;
+      this.activeOption = null;
+    }
+  };
+
+  handleKeydown = (
+    keyOrKeys: string | string[],
+    callback: () => void
+  ): ((event: KeyboardEvent) => void) => {
+    return (e: KeyboardEvent) => {
+      if (typeof keyOrKeys === "string" && e.key === keyOrKeys) {
+        callback();
+      } else if (typeof keyOrKeys === "object" && keyOrKeys.includes(e.key)) {
+        callback();
+      }
+    };
+  };
+
+  constructor() {
+    super();
+    // TODO: the current thing works, but want to investigate more. why doesn't it work with `this`?
+    // https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/
+    // TODO: "If your component adds an event listener to anything except itself or its templated DOM
+    // – 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;
+      }
+    });
+  }
+
+  static styles = css`
+    @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;900&display=swap");
+
+    :host {
+      --light-grey: #e3e3e3;
+      --active-option-color: #f5f7f9;
+      --light-border: 1px solid $light-border-color;
+    }
+
+    * {
+      box-sizing: border-box;
+      user-select: none;
+      font-family: Poppins;
+      font-size: 14px;
+    }
+
+    #select {
+      height: 50px;
+      min-width: 144px;
+      width: fit-content;
+      display: flex;
+      justify-content: space-between;
+      gap: 17px;
+      padding: 14.5px;
+      padding-right: 19.5px;
+      align-items: center;
+      background: white;
+      border: 1px solid #e3e3e3;
+      box-sizing: border-box;
+      box-shadow: 0px 1px 0px rgba(142, 142, 142, 0.2);
+      border-radius: 10px;
+    }
+
+    ul {
+      padding-left: 0;
+      margin-bottom: 0;
+      max-height: 200px;
+      overflow-y: scroll;
+      position: absolute;
+      min-height: 40px;
+      max-width: 400px;
+      background-color: white;
+      z-index: 20;
+      margin-top: 4px;
+      border: var(--light-border);
+      box-sizing: border-box;
+      box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.15);
+      border-radius: 10px;
+      overflow: hidden;
+    }
+
+    .option {
+      list-style: none;
+      padding: 10px;
+    }
+
+    .option:first-child {
+      border-top-left-radius: 10px;
+      border-top-right-radius: 10px;
+    }
+
+    .option:last-child {
+      border-bottom-left-radius: 10px;
+      border-bottom-right-radius: 10px;
+    }
+
+    /* TODO: why two diff ones? copied from EWA but don't understand */
+    .option:active {
+      background-color: var(--light-grey);
+    }
+
+    .option.active {
+      background-color: var(--active-option-color);
+    }
+  `;
+  render(): TemplateResult {
+    return html`
+      <div>
+        <div
+          id="select"
+          tabindex="0"
+          @click=${() => (this.isOpen = !this.isOpen)}
+          @keydown="${(e: KeyboardEvent) => {
+            switch (e.key) {
+              case "Enter":
+              case " ":
+                e.preventDefault();
+                if (this.isOpen && this.activeOption) {
+                  this.setSelectedOption(this.activeOption);
+                } else {
+                  this.toggleSelect();
+                }
+                break;
+              case "Escape":
+                e.preventDefault();
+                this.isOpen = false;
+                break;
+              case "Tab":
+                if (this.isOpen) {
+                  e.preventDefault();
+                }
+                break;
+              case "ArrowUp":
+                e.preventDefault();
+                if (this.isOpen && this.activeOption) {
+                  if (this.options.indexOf(this.activeOption) > 0) {
+                    this.activeOption =
+                      this.options[this.options.indexOf(this.activeOption) - 1];
+                  } else {
+                    this.activeOption = null;
+                  }
+                }
+                break;
+              case "ArrowDown":
+                e.preventDefault();
+                if (this.isOpen) {
+                  if (!this.activeOption) {
+                    this.activeOption = this.options[0];
+                  } else if (
+                    this.activeOption &&
+                    this.options.indexOf(this.activeOption) <
+                      this.options.length - 1
+                  ) {
+                    this.activeOption =
+                      this.options[this.options.indexOf(this.activeOption) + 1];
+                  }
+                }
+                break;
+            }
+          }}"
+        >
+          <span id="selectText">${this.selected ?? this.placeholder}</span>
+          <svg
+            width="10"
+            height="6"
+            viewBox="0 0 10 6"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M0.189941 1.25439L1.35369 0.0906372L4.84494 3.58189L8.33619 0.0906372L9.49994 1.25439L4.84494 5.90939L0.189941 1.25439Z"
+              fill="#83818E"
+            />
+          </svg>
+        </div>
+        ${this.isOpen
+          ? html`<ul>
+              ${this.options.map(
+                (option) =>
+                  html`<li
+                    @click="${() => this.setSelectedOption(option)}"
+                    @keydown="${this.handleKeydown(["Enter", " "], () =>
+                      this.setSelectedOption(option)
+                    )}"
+                    @mousemove="${() => {
+                      this.activeOption = option;
+                    }}"
+                    @mouseleave="${() => {
+                      this.activeOption = null;
+                    }}"
+                    class="option ${classMap({
+                      active: this.activeOption === option,
+                    })}"
+                  >
+                    ${option}
+                  </li>`
+              )}
+            </ul>`
+          : ""}
+      </div>
+    `;
+  }
+}
+customElements.define("me-select", MESelect);

package/src/WebComponent/Scheduler/time-picker.ts

@@ -0,0 +1,101 @@
+import { LitElement, html, TemplateResult, css } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+
+@customElement("time-picker")
+export class TimePicker extends LitElement {
+  @property({ attribute: false })
+  // options: string[] = [];
+  options: string[] = [
+    "9:10am",
+    "10:00am",
+    "11:00am",
+    "1:00pm",
+    "3:00pm",
+    "3:30pm",
+    "4:00pm",
+    "4:30pm",
+    "00:00pm",
+  ];
+
+  @state()
+  private selected?: string;
+
+  static styles = css`
+    * {
+      box-sizing: border-box;
+    }
+
+    #optionContainer {
+      margin-left: 14px;
+      display: flex;
+      flex-wrap: wrap;
+      column-gap: 14px;
+      row-gap: 19px;
+      min-width: 200px;
+    }
+
+    .option {
+      position: relative;
+      display: inline-block;
+      /* padding: 11px 14px; */
+      height: 40px;
+      width: 85px;
+      /* max-width:  */
+      background: #e7e7e7;
+      border: 1px solid #ffffff;
+      border-radius: 10px;
+      color: #202020;
+      font-family: "Poppins";
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      text-align: center;
+      user-select: none;
+    }
+
+    .option > span {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    .option.selected {
+      color: white;
+      background: #202020;
+      border: 3px solid #83818e;
+      border-radius: 10px;
+    }
+  `;
+  render(): TemplateResult {
+    return html`
+      <div
+        id="optionContainer"
+        @click="${(e: MouseEvent) => {
+          const target = e.target as HTMLElement | undefined;
+          if (target?.closest(".option:not(.selected)"))
+            this.selected = target.innerText;
+        }}"
+        @keydown="${(e: KeyboardEvent) => {
+          const target = e.target as HTMLElement | undefined;
+          if ([" ", "Enter"].includes(e.key) && target?.closest(".option")) {
+            e.preventDefault();
+            this.selected =
+              target.innerText !== this.selected ? target.innerText : undefined;
+          }
+        }}"
+      >
+        ${this.options.map(
+          (option) =>
+            html`<div
+              class="option ${classMap({ selected: this.selected === option })}"
+              tabindex="0"
+            >
+              <span>${option}</span>
+            </div>`
+        )}
+      </div>
+    `;
+  }
+}