@momentum-ui/web-components 2.5.4 → 2.5.7

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

@@ -0,0 +1,243 @@
+import "@/components/button/Button";
+import "@/components/modal/Modal";
+import "@/components/tabs/Tab";
+import "@/components/combobox/ComboBox";
+import "@/components/input/Input";
+import "@/components/radio/Radio";
+import "@/components/form/Form";
+import "@/components/radio/RadioGroup";
+import "@/components/tabs/TabPanel";
+import { comboBoxOptions } from "@/[sandbox]/sandbox.mock";
+import "@/components/tabs/Tabs";
+import { customElement, html, LitElement, property, query } from "lit-element";
+import { Input } from "@/components/input/Input";
+import { debounce } from "@/utils/helpers";
+
+@customElement("modal-template-sandbox")
+export class ModalTemplateSandbox extends LitElement {
+  @property({ type: Boolean }) isModalOpen = false;
+  @property({ type: Boolean }) isComplexModalOpen = false;
+  @property({ type: Boolean }) isDialogOpen = false;
+  @property({ type: Boolean }) isComplexTabsModal = false;
+
+  @query(".dial-number") dialInput!: Input.ELEMENT;
+
+  private openModal() {
+    this.isModalOpen = true;
+  }
+
+  private openComplexModal() {
+    this.isComplexModalOpen = true;
+  }
+
+  private closeComplexModal() {
+    this.isComplexModalOpen = false;
+  }
+
+  private closeModal() {
+    this.isModalOpen = false;
+  }
+
+  private openDialog() {
+    this.isDialogOpen = true;
+  }
+
+  private closeDialog() {
+    this.isDialogOpen = false;
+  }
+
+  private openComplexTabsModal() {
+    this.isComplexTabsModal = true;
+  }
+
+  private closeComplexTabsModal() {
+    this.isComplexTabsModal = false;
+  }
+
+  private handleInputChange = debounce(() => {
+    if (this.dialInput) {
+      const shadowInput = this.dialInput.shadowRoot!.querySelector("input");
+      shadowInput!.dispatchEvent(
+        new CustomEvent("focus-visible", {
+          composed: true,
+          bubbles: true
+        })
+      );
+    }
+  }, 150);
+
+  render() {
+    return html`
+      <md-button @click=${this.openModal}>Open Modal</md-button>
+      <md-button @click=${this.openDialog}>Open Dialog</md-button>
+      <md-button @click=${this.openComplexModal}>Open Complex Modal</md-button>
+      <md-button @click=${this.openComplexTabsModal}>Open Complex Tabs Modal</md-button>
+      <md-modal
+        htmlId="modal-1"
+        ?show=${this.isModalOpen}
+        headerLabel="Test Header Text"
+        headerMessage="Test Message Text In Header"
+        size="small"
+        hideFooter
+        hideHeader
+        backdropClickExit
+        showCloseButton
+        noExitOnEsc
+        @close-modal="${this.closeModal}"
+      >
+        <div slot="header">
+          <span>Test Slot Header</span>
+        </div>
+
+        <p>
+          Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin
+          literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
+          College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage,
+          and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem
+          Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and
+          Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the
+          Renaissance.
+        </p>
+        <md-combobox
+          disabled
+          .options=${comboBoxOptions}
+          placeholder="Placeholder"
+          .value=${[comboBoxOptions[5]]}
+        ></md-combobox>
+        <p>
+          The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The
+          standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32
+          and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form,
+          accompanied by English versions from the 1914 translation by H. Rackham.
+        </p>
+        <md-combobox .options=${comboBoxOptions} placeholder="Placeholder" .value=${[comboBoxOptions[5]]}></md-combobox>
+        <p>
+          The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The
+          standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32
+          and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form,
+          accompanied by English versions from the 1914 translation by H. Rackham.
+        </p>
+        <p>
+          Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin
+          literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
+          College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage,
+          and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem
+          Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and
+          Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the
+          Renaissance.
+        </p>
+
+        <md-button slot="footer" type="reset">Reset</md-button>
+        <md-button slot="footer" @click="${this.closeModal}" type="submit">Submit</md-button>
+      </md-modal>
+
+      <md-modal
+        htmlId="modal-2"
+        ?show=${this.isDialogOpen}
+        headerLabel="Test Dialog Header"
+        size="dialog"
+        closeBtnName="Ok"
+        showCloseButton
+        @close-modal="${this.closeDialog}"
+      >
+        <input type="text" placeholder="Type Text" />
+        <p>
+          Curabitur nec leo sit amet sapien eleifend accumsan at eu magna. Suspendisse potenti. Aenean lobortis aliquet
+          dui, id suscipit quam consectetur quis.
+        </p>
+      </md-modal>
+
+      <md-modal ?show=${this.isComplexModalOpen} closeBtnName="Submit This" @close-modal="${this.closeComplexModal}">
+        <md-tabs>
+          <md-tab slot="tab">
+            <span>Contact History</span>
+            <md-icon name="recents_16"></md-icon>
+          </md-tab>
+          <md-tab-panel slot="panel">
+            <span>Content for "Contact History"</span>
+            <md-radiogroup checked="0">
+              <md-radio slot="radio" value="Option 1">Option 1</md-radio>
+              <md-radio slot="radio" value="Option 2">Option 2</md-radio>
+              <md-radio slot="radio" value="Option 3">Option 3</md-radio>
+              <md-radio slot="radio" value="Option 4">Option 4</md-radio>
+            </md-radiogroup>
+            <button type="button">Contact History</button>
+          </md-tab-panel>
+          <md-tab slot="tab">
+            <span>Cisco WxM</span>
+            <md-icon name="apps_16"></md-icon>
+          </md-tab>
+          <md-tab-panel slot="panel">
+            <span>Content for "WxM"</span>
+            <button type="button">Cisco WxM</button>
+          </md-tab-panel>
+        </md-tabs>
+      </md-modal>
+
+      <md-modal
+        ?show=${this.isComplexTabsModal}
+        size="small"
+        hideFooter
+        hideHeader
+        @close-modal="${this.closeComplexTabsModal}"
+      >
+        <div slot="header">
+          <h3 class="sl-form-label">Station Login</h3>
+        </div>
+        <md-form @form-submitted=${() => console.info("Form Submitted!!!")} is-valid>
+          <md-tabs justified>
+            <md-tab slot="tab" label="Dial Number">
+              <span>Dial Number</span>
+            </md-tab>
+            <md-tab-panel slot="panel">
+              <div class="phone-fromat">
+                <md-radiogroup group-label="phone-fromat" alignment="horizontal" checked="0">
+                  <md-radio slot="radio" value="US" aria-label="US Format">US Format</md-radio>
+                  <md-radio slot="radio" value="Other" ariaLabel="Other">Other</md-radio>
+                </md-radiogroup>
+              </div>
+
+              <md-input
+                type="tel"
+                id="dn"
+                class="dial-number"
+                placeholder="Dial Number"
+                shape="pill"
+                autofocus
+                clear
+                @input-change=${this.handleInputChange}
+              ></md-input>
+            </md-tab-panel>
+            <md-tab slot="tab" label="Extension">
+              <span>Extension</span>
+            </md-tab>
+            <md-tab-panel slot="panel">
+              <div class="extension-format">
+                <md-input aria-label="Team X" type="tel" id="ext" placeholder="Team X" shape="pill"></md-input>
+              </div>
+              <md-combobox placeholder="Choose Team" .options=${comboBoxOptions}></md-combobox>
+            </md-tab-panel>
+          </md-tabs>
+        </md-form>
+        <div class="sl-footer" slot="footer">
+          <md-button class="footer-btn" aria-label="Cancel" @click="${this.closeComplexTabsModal}">
+            Cancel
+          </md-button>
+          <md-button
+            class="footer-btn"
+            variant="primary"
+            aria-label="Submit"
+            type="submit"
+            @click="${this.closeComplexTabsModal}"
+          >
+            Submit
+          </md-button>
+        </div>
+      </md-modal>
+    `;
+  }
+}
+
+export const modalTemplate = html`
+  <modal-template-sandbox></modal-template-sandbox>
+`;

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

@@ -0,0 +1,13 @@
+import "@/components/pagination/Pagination";
+import { html } from "lit-element";
+
+export const paginationTemplate = html`
+  <h3>Default Pagination</h3>
+  <md-pagination total-page="20" current-page="10" visible-page="3"></md-pagination>
+  <h3>Dots Pagination</h3>
+  <md-pagination total-page="20" current-page="10" visible-page="3" dots></md-pagination>
+  <h3>Without Arrows Pagination</h3>
+  <md-pagination total-page="20" current-page="10" no-navigation></md-pagination>
+  <h3>Only Dots Pagination</h3>
+  <md-pagination total-page="20" current-page="10" only-dots></md-pagination>
+`;

package/src/[sandbox]/examples/phone-input.ts

@@ -0,0 +1,72 @@
+import "@/components/phone-input/PhoneInput";
+import { html } from "lit-element";
+
+export const phoneInputTemplate = html`
+  <div>
+    <div class="row">
+      <md-phone-input
+        show-flags
+        errorMessage="This phone number is invalid"
+        .value=${"9997770100"}
+        @phoneinput-keydown="${(e: CustomEvent) => console.log("keydown: ", e.detail.value)}"
+        @phoneinput-blur="${(e: CustomEvent) => console.log("blur: ", e.detail.value, " is valid: ", e.detail.isValid)}"
+        @phoneinput-change="${(e: CustomEvent) =>
+          console.log("change: ", e.detail.value, " is valid: ", e.detail.isValid)}"
+      ></md-phone-input>
+    </div>
+    <div class="row">
+      <md-form>
+        <md-phone-input
+          showErrorMessage
+          errorMessage="This phone number is invalid"
+          .value=${"9997770100"}
+          @phoneinput-keydown="${(e: CustomEvent) => console.log("keydown: ", e.detail.value)}"
+          @phoneinput-blur="${(e: CustomEvent) =>
+            console.log("blur: ", e.detail.value, " is valid: ", e.detail.isValid)}"
+          @phoneinput-change="${(e: CustomEvent) =>
+            console.log("change: ", e.detail.value, " is valid: ", e.detail.isValid)}"
+        ></md-phone-input>
+      </md-form>
+    </div>
+    <div class="row">
+      <md-phone-input
+        disabled
+        errorMessage="This phone number is invalid"
+        @phoneinput-keydown="${(e: CustomEvent) => console.log("keydown: ", e.detail.value)}"
+        @phoneinput-blur="${(e: CustomEvent) => console.log("blur: ", e.detail.value, " is valid: ", e.detail.isValid)}"
+        @phoneinput-change="${(e: CustomEvent) =>
+          console.log("change: ", e.detail.value, " is valid: ", e.detail.isValid)}"
+      ></md-phone-input>
+    </div>
+    <div class="row">
+      <md-phone-input
+        pill
+        errorMessage="This phone number is invalid"
+        codePlaceholder="+7"
+        numberPlaceholder="5555555555"
+        @phoneinput-keydown="${(e: CustomEvent) => console.log("keydown: ", e.detail.value)}"
+        @phoneinput-blur="${(e: CustomEvent) => console.log("blur: ", e.detail.value, " is valid: ", e.detail.isValid)}"
+        @phoneinput-change="${(e: CustomEvent) =>
+          console.log("change: ", e.detail.value, " is valid: ", e.detail.isValid)}"
+      ></md-phone-input>
+    </div>
+    <div>
+      <h4>Example with Initial Value</h4>
+      <div class="row">
+        <md-form>
+          <md-phone-input
+            .countryCallingCode=${"+91, India, IN"}
+            .errorMessage=${"This phone number is invalid"}
+            .value=${"9997770100"}
+            .numberPlaceholder=${"Enter The Phone Number"}
+            @phoneinput-keydown="${(e: CustomEvent) => console.log("keydown: ", e.detail.value)}"
+            @phoneinput-blur="${(e: CustomEvent) =>
+              console.log("blur: ", e.detail.value, " is valid: ", e.detail.isValid)}"
+            @phoneinput-change="${(e: CustomEvent) =>
+              console.log("change: ", e.detail.value, " is valid: ", e.detail.isValid)}"
+          ></md-phone-input>
+        </md-form>
+      </div>
+    </div>
+  </div>
+`;

package/src/[sandbox]/examples/progress-bar.ts

@@ -0,0 +1,6 @@
+import "@/components/progress-bar/ProgressBar";
+import { html } from "lit-element";
+
+export const progressBarTemplate = html`
+  <md-progress-bar label="test list" displayFormat="fraction" value="40" dynamic></md-progress-bar>
+`;

package/src/[sandbox]/examples/radio-group.ts

@@ -0,0 +1,36 @@
+import "@/components/radio/Radio";
+import "@/components/radio/RadioGroup";
+import { html } from "lit-element";
+
+export const radioGroupTemplate = html`
+  <h3>Default</h3>
+  <md-radiogroup group-label="group_process">
+    <md-radio slot="radio" value="Option 1">Option 1</md-radio>
+    <md-radio slot="radio" value="Option 2">Option 2</md-radio>
+    <md-radio slot="radio" value="Option 3">Option 3</md-radio>
+    <md-radio slot="radio" value="Option 4">Option 4</md-radio>
+  </md-radiogroup>
+  <h3>Horizontal</h3>
+  <md-radiogroup group-label="group_process" alignment="horizontal">
+    <md-radio slot="radio" value="developing"
+      ><span>Long Radio description overflowing text with three dots in the end</span>
+    </md-radio>
+    <md-radio slot="radio" value="Option 1">Option 1</md-radio>
+    <md-radio slot="radio" value="Option 2">Option 2</md-radio>
+    <md-radio slot="radio" value="Option 3">Option 3</md-radio>
+  </md-radiogroup>
+  <h3>Pre-Checked Radio</h3>
+  <md-radiogroup group-label="group_process" checked="1">
+    <md-radio slot="radio" value="Option 1">Option 1</md-radio>
+    <md-radio slot="radio" value="Option 2">Option 2 [Preselected]</md-radio>
+    <md-radio slot="radio" value="Option 3">Option 3</md-radio>
+    <md-radio slot="radio" value="Option 4">Option 4</md-radio>
+  </md-radiogroup>
+  <h3>Disabled</h3>
+  <md-radiogroup group-label="group_process" checked="2">
+    <md-radio slot="radio" value="Option">Option</md-radio>
+    <md-radio slot="radio" value="Disabled" disabled>Disabled</md-radio>
+    <md-radio slot="radio" value="Option 2 ">Option 2 [Preselected]</md-radio>
+    <md-radio slot="radio" value="Disabled 2" disabled>Disabled 2</md-radio>
+  </md-radiogroup>
+`;

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

@@ -0,0 +1,17 @@
+import "@/components/slider/Slider";
+import { html } from "lit-element";
+
+export const sliderTemplate = html`
+  <div class="container">
+    <h3>Slider: now set at 20</h3>
+    <md-slider now="20"></md-slider>
+    <h3>Slider: step set at 10</h3>
+    <md-slider step="10"></md-slider>
+    <h3>Slider: now set at 44 & no-pointer</h3>
+    <md-slider now="44" no-pointer></md-slider>
+    <h3>Slider: disabled</h3>
+    <md-slider disabled></md-slider>
+    <h3>Slider: hide-value</h3>
+    <md-slider hide-value></md-slider>
+  </div>
+`;

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

@@ -0,0 +1,6 @@
+import "@/components/spinner/Spinner";
+import { html } from "lit-element";
+
+export const spinnerTemplate = html`
+  <md-spinner size="33"></md-spinner>
+`;

package/src/[sandbox]/examples/table-advanced.ts

@@ -0,0 +1,114 @@
+import "@/components/table-advanced/TableAdvanced";
+import { customElement, html, internalProperty, LitElement } from "lit-element";
+import { ComplexTable, ShortkeyTable } from "@/[sandbox]/sandbox.mock";
+@customElement("default-table-advanced-sandbox")
+export class DefaultTableAdvanced extends LitElement {
+  @internalProperty() litProp = "$";
+
+  render() {
+    return html`
+      ${this.renderComplexTable()}
+      <br /><br />
+      ${this.renderShortkeyTable()}
+      <br /><br />
+    `;
+  }
+
+  renderComplexTable() {
+    // data
+    const rnd = (max: number) => Math.round(Math.random() * (max - 1) + 1) + "";
+    const DATA = ComplexTable.data;
+    if ("list2d" in DATA) {
+      for (let i = 0; i < 6; i++) {
+        DATA.list2d.push([rnd(2), "2", "3", "4", "5", "6", "7"]);
+      }
+    }
+
+    // templates
+    const CONF = ComplexTable.config;
+    CONF.cellTemplates = {
+      _tmp_: {
+        templateName: "tmp1"
+      },
+      _tmp2_: {
+        contentUse: "replace",
+        templateName: "tmp2",
+        contentCb: ({ content, insertIndex }) => {
+          return content.substring(0, insertIndex) + " hide " + content.substring(insertIndex);
+        },
+        templateCb: p => {
+          const span = p.fragment.querySelector<HTMLElement>(".sp")!;
+          span.innerText = `${p.content}[${p.row},${p.col}]`;
+
+          const btn = p.fragment.querySelector<HTMLButtonElement>("button")!;
+          btn.addEventListener("click", () => {
+            this.litProp = "will not work";
+            this.requestUpdate();
+            console.log("EVT");
+          });
+        }
+      }
+    };
+
+    return html`
+      <md-table-advanced .config=${CONF} .data=${DATA}>
+        <template id="tmp1">
+          [OK]
+        </template>
+
+        <template id="tmp2">
+          ${this.litProp}
+          <span class="sp"></span>
+          <button @click=${() => console.log("will not work")}>BTN</button>
+        </template>
+      </md-table-advanced>
+    `;
+  }
+
+  renderShortkeyTable() {
+    const conf = ShortkeyTable.config;
+    conf.cellTemplates = {
+      _info_: { templateName: "tmp1" },
+      _warn_: { templateName: "tmp2" },
+      _error_: { templateName: "tmp3" }
+    };
+
+    return html`
+      <md-table-advanced .config=${conf} .data=${ShortkeyTable.data}>
+        <template id="tmp1">
+          <md-icon class="warn-icon" name="warning_20" color="blue"></md-icon>
+        </template>
+
+        <template id="tmp2">
+          <md-icon class="warn-icon" name="warning_20" color="yellow"></md-icon>
+        </template>
+
+        <template id="tmp3">
+          <md-icon class="warn-icon" name="error_20" color="red"></md-icon>
+        </template>
+      </md-table-advanced>
+    `;
+  }
+}
+
+@customElement("custom-table-advanced-sandbox")
+export class CustomTableAdvanced extends LitElement {
+  render() {
+    return html`
+      <md-table-advanced .config=${ComplexTable.config} .data=${ComplexTable.data}> </md-table-advanced>
+    `;
+  }
+}
+
+export const tableAdvancedTemplate = html`
+  <br />
+  <div style="height: 400px; width: 100%; overflow: auto">
+    <h2>ShortKey Table</h2>
+    <default-table-advanced-sandbox></default-table-advanced-sandbox>
+  </div>
+  <br />
+  <div style="height: 400px; width: 100%; overflow: auto">
+    <h2>Default Advanced Table</h2>
+    <custom-table-advanced-sandbox></custom-table-advanced-sandbox>
+  </div>
+`;

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

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Cisco Systems, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import "@/components/table/Table";
+import { html } from "lit-element";
+import { tableWarns } from "@/[sandbox]/sandbox.mock";
+
+const tableError = [
+  { row: 4, col: 3 },
+  { row: 6, col: 3 }
+];
+
+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";
+
+export const tableTemplate = html`
+  <div style="height: 400px; width: 100%;">
+    <md-table tabledata="${data}" sorting .warning=${tableWarns} .errors=${tableError}></md-table>
+  </div>
+`;