@momentum-ui/web-components 2.16.1 → 2.16.3

package/src/[sandbox]/examples/dropdown.ts

@@ -0,0 +1,263 @@
+import { Dropdown } from "@/components/dropdown/Dropdown";
+import { html } from "lit-element";
+
+export const dropdownStringOptions = ["one", "two", "three", "   non-trimmed-with-spaces "];
+
+export const dropdownStringLongOptions = [
+  "01",
+  "02",
+  "03",
+  "04",
+  "05",
+  "06",
+  "07",
+  "08",
+  "09",
+  "10",
+  "11",
+  "12",
+  "13",
+  "14",
+  "15",
+  "16",
+  "17",
+  "18",
+  "19",
+  "20",
+  "21",
+  "22",
+  "23",
+  "24",
+  "25",
+  "26",
+  "27",
+  "28",
+  "29",
+  "30",
+  "31",
+  "32",
+  "33",
+  "34",
+  "35",
+  "36",
+  "37",
+  "38",
+  "39",
+  "40"
+];
+
+export const dropdownObjectKeyValueOptions = [{ one: "One" }, { two: "Two" }, { three: "Three" }];
+
+export const dropdownObjectOptions = [
+  {
+    user_id: "xxx-111",
+    user_name: "jd",
+    full_name: "John Doe"
+  },
+  {
+    user_id: "xxx-222",
+    user_name: "as",
+    full_name: "Adam Smith"
+  },
+  {
+    user_id: "xxx-333",
+    user_name: "ba",
+    full_name: "Boris Anderson"
+  }
+];
+
+export const dropdownObjectLongOptions = [
+  { id: "0", country: "Afghanistan" },
+  { id: "1", country: "Aland Islands" },
+  { id: "2", country: "Albania" },
+  { id: "3", country: "Algeria" },
+  { id: "4", country: "American Samoa" },
+  { id: "5", country: "Andorra" },
+  { id: "6", country: "Angola" },
+  { id: "7", country: "Anguilla" },
+  { id: "8", country: "Antarctica" },
+  { id: "9", country: "Antigua and Barbuda" },
+  { id: "10", country: "Argentina" },
+  { id: "11", country: "Australia" },
+  { id: "12", country: "Austrian Empire" },
+  { id: "13", country: "Austria" },
+  { id: "14", country: "Azerbaijan" },
+  { id: "15", country: "Bahrain" },
+  { id: "16", country: "Bangladesh" },
+  { id: "17", country: "Barbados" },
+  { id: "18", country: "Bavaria" },
+  { id: "19", country: "Belarus" },
+  { id: "20", country: "Belgium" },
+  { id: "21", country: "Belize" },
+  { id: "22", country: "Cabo Verde" },
+  { id: "23", country: "Cambodia" },
+  { id: "24", country: "Cameroon" },
+  { id: "25", country: "Canada" },
+  { id: "26", country: "Cayman Islands" },
+  { id: "27", country: "The Central African Republic" },
+  { id: "28", country: "Chad" }
+];
+
+const messageArr: Dropdown.Message = {
+  message: "This is where the message would be.",
+  type: "success"
+};
+
+export const dropdownTemplate = html`
+  <h3>Strings Options</h3>
+  <md-dropdown
+    .options="${dropdownStringOptions}"
+    @dropdown-selected="${(e: CustomEvent<Dropdown.EventDetail["dropdown-selected"]>) => {
+      console.log("[Strings Options] Selected: ", e.detail);
+    }}"
+  ></md-dropdown>
+  <h3>Strings Options (Disabled)</h3>
+  <md-dropdown .options="${dropdownStringOptions}" disabled></md-dropdown>
+  <h3>Strings Options (Allow unselected)</h3>
+  <md-dropdown
+    .options="${dropdownStringOptions}"
+    allow-unselected
+    @dropdown-selected="${(e: CustomEvent<Dropdown.EventDetail["dropdown-selected"]>) => {
+      console.log("[Strings Options (Allow unselected)] Selected: ", e.detail);
+    }}"
+  ></md-dropdown>
+  <h3>Strings Long Options (Preselected)</h3>
+  <md-dropdown
+    .options="${dropdownStringLongOptions}"
+    .defaultOption="${dropdownStringLongOptions[29]}"
+    @dropdown-selected="${(e: CustomEvent<Dropdown.EventDetail["dropdown-selected"]>) => {
+      console.log("[Strings Long Options (Preselected)] Selected: ", e.detail);
+    }}"
+  ></md-dropdown>
+  <h3>Single KeyValue Objects Options</h3>
+  <md-dropdown
+    .options="${dropdownObjectKeyValueOptions}"
+    @dropdown-selected="${(e: CustomEvent<Dropdown.EventDetail["dropdown-selected"]>) => {
+      console.log("[Single KeyValue Objects Options] Selected: ", e.detail);
+    }}"
+  ></md-dropdown>
+  <h3>Multi KeyValue Objects Options</h3>
+  <md-dropdown
+    .options="${dropdownObjectOptions}"
+    option-id="user_id"
+    option-value="full_name"
+    @dropdown-selected="${(e: CustomEvent<Dropdown.EventDetail["dropdown-selected"]>) => {
+      console.log("[Multi KeyValue Objects Options] Selected: ", e.detail);
+    }}"
+  ></md-dropdown>
+  <h3>Multi KeyValue Objects Long Options</h3>
+  <md-dropdown
+    .options="${dropdownObjectLongOptions}"
+    option-id="id"
+    option-value="country"
+    @dropdown-selected="${(e: CustomEvent<Dropdown.EventDetail["dropdown-selected"]>) => {
+      console.log("[Multi KeyValue Objects Long Options] Selected: ", e.detail);
+    }}"
+  ></md-dropdown>
+  <div class="pills-dropdown">
+    <h3>Pill shaped dropdown</h3>
+    <md-dropdown
+      .options="${dropdownStringOptions}"
+      @dropdown-selected="${(e: CustomEvent<Dropdown.EventDetail["dropdown-selected"]>) => {
+        console.log("[Strings Options] Selected: ", e.detail);
+      }}"
+    ></md-dropdown>
+  </div>
+  <h3>Dropdown Icon Searchable</h3>
+  <md-dropdown
+    .options="${dropdownStringOptions}"
+    @dropdown-selected="${(e: CustomEvent<Dropdown.EventDetail["dropdown-selected"]>) => {
+      console.log("[Strings Options] Selected: ", e.detail);
+    }}"
+    left-icon="search-bold"
+    helpText="This is help text"
+    searchable
+  ></md-dropdown>
+  <h3>Dropdown Icon Searchable Disabled</h3>
+  <md-dropdown
+    .options="${dropdownStringOptions}"
+    @dropdown-selected="${(e: CustomEvent<Dropdown.EventDetail["dropdown-selected"]>) => {
+      console.log("[Strings Options] Selected: ", e.detail);
+    }}"
+    left-icon="search-bold"
+    helpText="This is help text"
+    searchable
+    disabled
+  ></md-dropdown>
+  <br />
+  <h3>Dropdown Default (New Momentum)</h3>
+  <md-dropdown
+    .options="${dropdownStringOptions}"
+    @dropdown-selected="${(e: CustomEvent<Dropdown.EventDetail["dropdown-selected"]>) => {
+      console.log("[Strings Options] Selected: ", e.detail);
+    }}"
+    newMomentum
+  ></md-dropdown>
+  <h3>Dropdown Disabled (New Momentum)</h3>
+  <md-dropdown .options="${dropdownStringOptions}" disabled newMomentum></md-dropdown>
+  <h3>Dropdown Searchable (New Momentum)</h3>
+  <md-dropdown
+    .options="${dropdownStringOptions}"
+    @dropdown-selected="${(e: CustomEvent<Dropdown.EventDetail["dropdown-selected"]>) => {
+      console.log("[Strings Options] Selected: ", e.detail);
+    }}"
+    helpText="This is help text"
+    searchable
+    newMomentum
+  ></md-dropdown>
+  <h3>Dropdown Icon Searchable (New Momentum)</h3>
+  <md-dropdown
+    .options="${dropdownStringOptions}"
+    @dropdown-selected="${(e: CustomEvent<Dropdown.EventDetail["dropdown-selected"]>) => {
+      console.log("[Strings Options] Selected: ", e.detail);
+    }}"
+    left-icon="search-bold"
+    helpText="This is help text"
+    searchable
+    newMomentum
+  ></md-dropdown>
+  <h3>Dropdown Searchable Disabled (New Momentum)</h3>
+  <md-dropdown
+    .options="${dropdownStringOptions}"
+    helpText="This is help text"
+    disabled
+    searchable
+    newMomentum
+    left-icon="search-bold"
+  ></md-dropdown>
+  <h3>Dropdown Searchable ReadOnly (New Momentum)</h3>
+  <md-dropdown .options="${dropdownStringOptions}" readOnly searchable newMomentum></md-dropdown>
+  <h3>Dropdown Searchable Success Text (New Momentum)</h3>
+  <md-dropdown
+    .options="${dropdownStringOptions}"
+    @dropdown-selected="${(e: CustomEvent<Dropdown.EventDetail["dropdown-selected"]>) => {
+      console.log("[Strings Options] Selected: ", e.detail);
+    }}"
+    htmlId="dropDownSuccess"
+    .messageArr=${[{ ...messageArr } as Dropdown.Message]}
+    searchable
+    newMomentum
+  ></md-dropdown>
+  <h3>Dropdown Searchable Warning Text (New Momentum)</h3>
+  <md-dropdown
+    .options="${dropdownStringOptions}"
+    @dropdown-selected="${(e: CustomEvent<Dropdown.EventDetail["dropdown-selected"]>) => {
+      console.log("[Strings Options] Selected: ", e.detail);
+    }}"
+    htmlId="dropDownWarning"
+    .messageArr=${[{ ...messageArr, ...{ type: "warning" } } as Dropdown.Message]}
+    searchable
+    newMomentum
+  ></md-dropdown>
+  <h3>Dropdown Searchable Error Text (New Momentum)</h3>
+  <md-dropdown
+    .options="${dropdownStringOptions}"
+    @dropdown-selected="${(e: CustomEvent<Dropdown.EventDetail["dropdown-selected"]>) => {
+      console.log("[Strings Options] Selected: ", e.detail);
+    }}"
+    htmlId="dropDownError"
+    .messageArr=${[{ ...messageArr, ...{ type: "error" } } as Dropdown.Message]}
+    searchable
+    newMomentum
+  ></md-dropdown>
+`;

package/src/[sandbox]/examples/editable-field.ts

@@ -0,0 +1,115 @@
+/* eslint-disable prettier/prettier */
+import "@/components/button/Button";
+import "@/components/editable-textfield/EditableTextfield";
+import { Input } from "@/components/input/Input";
+import { ValidationRegex } from "@/utils/validations";
+import { customElement, html, LitElement, property } from "lit-element";
+import { nothing } from "lit-html";
+
+const successMessageArr: Input.Message = {
+  message: "This is where the message would be.",
+  type: "success"
+};
+const errorMessageArr: Input.Message = {
+  message: "This is where the message would be.",
+  type: "error"
+};
+const warningMessageArr: Input.Message = {
+  message: "This is where the message would be.",
+  type: "warning"
+};
+
+@customElement("editable-field-template-sandbox")
+export class EditableFieldTemplateSandbox extends LitElement {
+  @property({ type: Boolean }) isModalOpen = false;
+  @property({ type: Boolean }) isDialogOpen = false;
+  @property({ type: Boolean, reflect: true }) error = false;
+  @property({ type: String }) textChanged = "";
+
+
+  connectedCallback() {
+    super.connectedCallback()
+    this.addEventListener("invalid", this.setErrorMessage)
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback()
+    this.removeEventListener("invalid", this.setErrorMessage)
+  }
+
+  setErrorMessage = () => {
+    console.log("Validation Error Occurred")
+    this.error = true
+  }
+
+  resetErrorMessage = () => {
+    this.error = false
+  }
+
+  renderErrorMessage() {
+    return (this.error ? html`
+      <div style="padding: 1rem; background:red">THERE IS A VALIDATION ERROR ON THIS PAGE!!</div>
+    ` : nothing)
+  }
+
+  render() {
+    return html`
+      <p>Get new text that was changed in editable field - ${this.textChanged}</p>
+      <h3>With composed text</h3>
+      <md-editable-field max-lines="2">
+        Test text in slot
+      </md-editable-field>
+      <h3>Disabled</h3>
+      <md-editable-field content="disabled for editing but readable" disabled></md-editable-field>
+      <h3>With no composed text and default placeholder</h3>
+      <md-editable-field></md-editable-field>
+      <h3>With content passed in attribute</h3>
+      <md-editable-field content="attribute text"></md-editable-field>
+      <hr />
+      <md-editable-field alert .message=${{ ...successMessageArr }}>
+        Success Status
+      </md-editable-field>
+      <hr />
+      <md-editable-field alert .message=${{ ...errorMessageArr }}>
+        Error Status
+      </md-editable-field>
+      <hr />
+      <md-editable-field alert .message=${{ ...warningMessageArr }}>
+        Warning Status
+      </md-editable-field>
+
+      <h3>Errors and Warnings but no message</h3>
+      <md-editable-field content="warning message" hideMessage alert .message=${{ ...warningMessageArr }}>
+        Warning Status
+      </md-editable-field>
+      <md-editable-field content="error message" hideMessage alert .message=${{ ...errorMessageArr }}>
+        Error Status
+      </md-editable-field>
+      <h3>Validation Types</h3>
+      <h4>integer</h4>
+      <md-editable-field type="integer">
+        123
+      </md-editable-field>
+      <h4>decimal</h4>
+      <md-editable-field type="decimal">
+        123.321
+      </md-editable-field>
+      <h4>date pattern set</h4>
+      <md-editable-field pattern=^(0?[1-9]|1[0-2])[/](0?[1-9]|[12]\\d|3[01])[/](19|20)\\d{2}$> 12/12/2020 </md-editable-field>
+        <h4>time pattern w/ hideMessage set</h4>
+        <md-editable-field hideMessage pattern=${ValidationRegex.timeString}>
+          12:30PM
+        </md-editable-field>
+        ${this.renderErrorMessage()}
+        <br>
+        <md-button @click=${this.resetErrorMessage}>Reset Error</md-button>
+        <br>
+        <h4> Test Field </h4>
+        <md-editable-field ariaLabel="Test Field ">
+      </md-editable-field>
+    `;
+  }
+}
+
+export const editableField = html`
+  <editable-field-template-sandbox></editable-field-template-sandbox>
+`;

package/src/[sandbox]/examples/favorite.ts

@@ -0,0 +1,49 @@
+import "@/components/favorite/Favorite";
+import { customElement, html, LitElement, property } from "lit-element";
+
+@customElement("favorite-template-sandbox")
+export class FavoriteTemplateSandbox extends LitElement {
+  @property({ type: Boolean }) selected = false;
+  @property({ type: String }) value = "";
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("favorite-toggle", this.countFavorite as EventListener);
+    this.addEventListener("favorite-keydown", this.handleKeydownFavorite as EventListener);
+  }
+
+  private countFavorite(e: CustomEvent) {
+    const { active, value } = e.detail;
+
+    this.selected = active;
+    if (active === true) {
+      this.value = value;
+    } else {
+      this.value = "";
+    }
+  }
+
+  private handleKeydownFavorite(e: CustomEvent) {
+    const { active, value } = e.detail;
+
+    this.selected = active;
+    if (active === true) {
+      this.value = "Keyboard event: " + value;
+    } else {
+      this.value = "";
+    }
+  }
+
+  render() {
+    return html`
+      <md-favorite></md-favorite>
+      <p>Select: ${this.selected}</p>
+      <p>Value: ${this.value}</p>
+    `;
+  }
+}
+
+export const favoriteTemplate = html`
+  <h3 class="sandbox-header">Default Favorite</h3>
+  <favorite-template-sandbox></favorite-template-sandbox>
+`;

package/src/[sandbox]/examples/floating-modal.ts

@@ -0,0 +1,101 @@
+import "@/components/button/Button";
+import "@/components/floating-modal/FloatingModal";
+import { css, customElement, html, LitElement, property } from "lit-element";
+
+const data =
+  "Group, Action, Shortcut Key \n Active Task List, Switch between tasks, Ctrl + Alt + T \n Active Task List, Expand and collapse task list, Ctrl + Alt + C \n Agent State, Available for all channels including call chat email and social channel, Ctrl + Alt + R \n Active Agent State List, Idle for all channels, Ctrl + Alt + N \n Application, Switch between popovers, Ctrl + Alt + E \n Application, Maximize and minimize popover view maximize and minimize, Ctrl + Alt + Q \n Call Handling, Open the list of chat templates, Ctrl + Alt + A \n Call Handling, Attach a file to the chat, Ctrl + Alt + S \n Edit CAD Variables, Save edited call variable values, Ctrl + Alt + O \n Edit CAD Variables, Revert edited call variable values, Ctrl + Alt + N \n Email Handling, Send email, Ctrl + Alt + S \n Email Handling, Reply, Ctrl + Alt + O";
+
+@customElement("floating-template-sandbox")
+export class FloatingTemplateSandbox extends LitElement {
+  @property({ type: Boolean }) isOpen = false;
+  @property({ type: Boolean }) isMin = false;
+  @property({ type: Object }) location =
+    localStorage.getItem("location") !== null ? JSON.parse(localStorage.getItem("location") || "") : { x: 0, y: 0 };
+  @property({ type: Object }) minLocation =
+    localStorage.getItem("min-location") !== null
+      ? JSON.parse(localStorage.getItem("min-location") || "")
+      : { x: 0, y: 0 };
+  @property({ type: Object }) containerRect =
+    localStorage.getItem("resize") !== null ? JSON.parse(localStorage.getItem("resize") || "") : null;
+  private openFloatingModal() {
+    this.isOpen = true;
+  }
+
+  private resetLocation() {
+    this.minLocation = { x: 0, y: 0 };
+    localStorage.removeItem("min-location");
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  private closeFloatingModal() {
+    this.isOpen = false;
+  }
+
+  private resize(event: CustomEvent) {
+    console.log("resize", event.detail.size);
+    this.containerRect = event.detail.size;
+    localStorage.setItem("resize", JSON.stringify(event.detail.size));
+  }
+
+  private saveLocation(event: CustomEvent) {
+    console.log("location", event);
+    this.location = event.detail.transform;
+    localStorage.setItem("location", JSON.stringify(event.detail.transform));
+  }
+
+  private saveMinLocation(event: CustomEvent) {
+    console.log("min-location", event);
+    this.minLocation = event.detail.transform;
+    localStorage.setItem("min-location", JSON.stringify(event.detail.transform));
+  }
+
+  static get styles() {
+    return css`
+      .float-modal::part(floating) {
+        overflow: hidden;
+        height: 500px;
+        width: 800px;
+      }
+
+      .float-modal::part(minimize-floating) {
+        right: 0;
+        bottom: 0;
+      }
+
+      .flexi {
+        display: flex;
+        width: 100px;
+        margin-top: 4px;
+      }
+      .space {
+        margin-right: 10px;
+      }
+    `;
+  }
+
+  render() {
+    return html`
+      <md-button variant="secondary" @button-click=${() => this.openFloatingModal()}>Open Floating Modal</md-button>
+
+      <md-floating-modal
+        class="float-modal"
+        heading="Shortcuts"
+        ?show=${this.isOpen}
+        .position=${this.location}
+        .minPosition=${this.minLocation}
+        .containerRect=${this.containerRect}
+        minimizable
+        @floating-modal-close=${() => this.closeFloatingModal()}
+        @floating-modal-minimize-location=${this.saveMinLocation}
+        @floating-modal-location=${this.saveLocation}
+        @floating-modal-resize=${this.resize}
+      >
+        <md-table tabledata="${data}" sorting></md-table>
+      </md-floating-modal>
+    `;
+  }
+}
+
+export const floatingModalTemplate = html` <floating-template-sandbox></floating-template-sandbox> `;

package/src/[sandbox]/examples/form.ts

@@ -0,0 +1,101 @@
+import "@/components/button/Button";
+import "@/components/form/Form";
+import "@/components/input/Input";
+import { customElement, html, internalProperty, LitElement, PropertyValues } from "lit-element";
+
+@customElement("form-sandbox")
+export class FormSandbox extends LitElement {
+  @internalProperty() private isFormValid = false;
+  @internalProperty() private isNameFilled = false;
+  @internalProperty() private isCityFilled = false;
+
+  handleFormSubmit(event: Event) {
+    event.preventDefault();
+    console.info("Form is submitted!!!");
+  }
+
+  handleNameInput(event: InputEvent) {
+    const { target } = event;
+
+    this.isNameFilled = false;
+
+    if (target && (target as HTMLInputElement).value.length) {
+      this.isNameFilled = true;
+    }
+  }
+
+  handleCityInput(event: InputEvent) {
+    const { target } = event;
+
+    this.isCityFilled = false;
+
+    if (target && (target as HTMLInputElement).value.length) {
+      this.isCityFilled = true;
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("submit", this.handleFormSubmit);
+  }
+
+  disconnectedCallback() {
+    this.disconnectedCallback();
+    this.removeEventListener("submit", this.handleFormSubmit);
+  }
+
+  protected update(changedProperties: PropertyValues) {
+    super.update(changedProperties);
+    if (this.isNameFilled && this.isCityFilled) {
+      this.isFormValid = true;
+    } else {
+      this.isFormValid = false;
+    }
+  }
+
+  render() {
+    return html`
+      <md-form autofill-name="address" ?is-valid=${this.isFormValid} @form-submitted=${this.handleFormSubmit}>
+        <md-input id="unique-name" required @input=${this.handleNameInput} placeholder="Please enter Name"></md-input>
+        <md-input id="unique-city" required @input=${this.handleCityInput} placeholder="Please enter City"></md-input>
+        <md-button type="submit" color="orange" ?disabled=${!this.isFormValid}>Submit</md-button>
+      </md-form>
+    `;
+  }
+}
+
+export const formTemplate = html`
+  <h3>Default (Auto-Valid)</h3>
+  <md-form is-valid @form-submitted=${() => console.info("Form Submitted!!!")}>
+    <md-input label="Name" name="name"></md-input>
+    <md-input label="Address" name="address"></md-input>
+    <md-input label="Email" name="email"></md-input>
+    <md-input label="Phone" name="phone"></md-input>
+    <md-button type="submit" label="Please Submit Form" size="40" variant="primary">Submit</md-button>
+  </md-form>
+  <h3>Allow redirect after submit (Valid)</h3>
+  <md-form target="_blank" allow-redirect @form-submitted=${() => console.info("Form Submitted!!!")}>
+    <md-input name="address"></md-input>
+  </md-form>
+  <h3>Disallow redirect after submit (Valid)</h3>
+  <md-form target="_blank" is-valid @form-submitted=${() => console.info("Form Submitted!!!")}>
+    <md-input name="address"></md-input>
+  </md-form>
+  <h3>Not Valid</h3>
+  <md-form @form-submitted=${() => console.info("Form Submitted!!!")}>
+    <md-input name="address"></md-input>
+    <button type="submit">Submit</button>
+  </md-form>
+  <h3>No Validation</h3>
+  <md-form no-validate @form-submitted=${() => console.info("Form Submitted!!!")}>
+    <md-input name="address"></md-input>
+    <md-button type="submit" variant="green">Submit</md-button>
+  </md-form>
+  <h3>Autofill Name Attribute</h3>
+  <md-form no-validate autofill-name="address" @form-submitted=${() => console.info("Form Submitted!!!")}>
+    <md-input></md-input>
+    <md-button type="submit" variant="green">Submit</md-button>
+  </md-form>
+  <h3>Form Submit Handle</h3>
+  <form-sandbox></form-sandbox>
+`;