@momentum-ui/web-components 2.16.3 → 2.16.5

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

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

@@ -1,115 +0,0 @@
-/* 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

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

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

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