@momentum-ui/web-components 2.16.2 → 2.16.3

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

@@ -0,0 +1,444 @@
+import "@/components/icon/Icon";
+import "@/components/input/Input";
+import { Input } from "@/components/input/Input";
+import { html } from "lit-element";
+
+const messageArr: Input.Message = {
+  message: "This is where the message would be.",
+  type: "success"
+};
+
+function copyText(event: MouseEvent) {
+  const target = event.composedPath()[0] as Element;
+  const targetRoot = target.getRootNode() as ShadowRoot;
+  const targetHost = targetRoot.host;
+  const input = targetHost.previousSibling as Input.ELEMENT;
+  input!.select();
+}
+
+export const inputTemplate = html`
+  <style>
+    section {
+      margin: 2rem 0;
+    }
+    .column {
+      width: 45%;
+      margin-right: 1rem;
+    }
+    .row {
+      width: 100%;
+      display: flex;
+      justify-items: flex-start;
+    }
+  </style>
+  <h2>md-input</h2>
+  <section id="pill-shape" class="section">
+    <div class="row">
+      <div class="column">
+        <md-input label="Normal" containerSize="small-12" shape="pill" clear autofocus></md-input>
+      </div>
+    </div>
+    <div class="row">
+      <div class="column">
+        <md-input
+          label="Search Pill"
+          htmlId="inputSearchClearPill"
+          containerSize="small-12"
+          placeholder="Enter Text"
+          shape="pill"
+          searchable
+          autofocus
+        ></md-input>
+      </div>
+      <div class="column">
+        <md-input
+          label="Search Clear Pill"
+          htmlId="inputSearchClearPill"
+          containerSize="small-12"
+          placeholder="Enter Text"
+          searchable
+          shape="pill"
+          clear
+        ></md-input>
+      </div>
+    </div>
+    <div class="row">
+      <div class="column">
+        <md-input label="Read Only" value="Read Only" readonly containerSize="small-12" shape="pill"></md-input>
+      </div>
+      <div class="column">
+        <md-input label="Disabled" value="Disabled" disabled containerSize="small-12" shape="pill"></md-input>
+      </div>
+    </div>
+    <div class="row">
+      <div class="column">
+        <md-input
+          label="Multi Line"
+          value="There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by ..."
+          multiline
+          containerSize="small-12"
+          shape="pill"
+        ></md-input>
+      </div>
+      <div class="column">
+        <md-input
+          label="Multi Line ReadOnly"
+          value="There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by ..."
+          multiline
+          containerSize="small-12"
+          shape="pill"
+          readOnly
+        ></md-input>
+      </div>
+    </div>
+    <div class="row">
+      <div class="column">
+        <md-input
+          label="Multi Line with Clear"
+          value="There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by ..."
+          multiline
+          containerSize="small-12"
+          shape="pill"
+          clear
+        ></md-input>
+      </div>
+    </div>
+  </section>
+
+  <h3>Rectangle Shape</h3>
+  <section id="rectangle" class="section">
+    <div class="row">
+      <div class="column">
+        <md-input label="Normal" containerSize="small-12"></md-input>
+      </div>
+    </div>
+    <div class="row">
+      <div class="column">
+        <md-input
+          label="Search Rectangle"
+          htmlId="inputSearchClearRectangle"
+          containerSize="small-12"
+          placeholder="Enter Text"
+          searchable
+          shape="rectangle"
+        ></md-input>
+      </div>
+      <div class="column">
+        <md-input
+          label="Search Clear Rectangle"
+          htmlId="inputSearchClearRectangle"
+          containerSize="small-12"
+          placeholder="Enter Text"
+          searchable
+          shape="rectangle"
+          clear
+        ></md-input>
+      </div>
+    </div>
+    <div class="row">
+      <div class="column">
+        <md-input label="Read Only" value="Read Only" readonly containerSize="small-12"></md-input>
+      </div>
+      <div class="column">
+        <md-input label="Disabled" value="Disabled" disabled containerSize="small-12"></md-input>
+      </div>
+    </div>
+    <div class="row">
+      <div class="column">
+        <md-input
+          label="Multi Line"
+          value="There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by ..."
+          multiline
+          containerSize="small-12"
+        ></md-input>
+      </div>
+    </div>
+  </section>
+
+  <h3>New Momentum</h3>
+  <section id="rectangle" class="section">
+    <div class="row">
+      <div class="column">
+        <md-input label="Normal" newMomentum helpText="Help Text"></md-input>
+      </div>
+    </div>
+    <div class="row">
+      <div class="column">
+        <md-input
+          label="Search"
+          htmlId="inputSearchClearRectangle"
+          containerSize="small-12"
+          placeholder="Enter Text"
+          searchable
+          compact
+          shape="rectangle"
+          newMomentum
+        ></md-input>
+      </div>
+      <div class="column">
+        <md-input
+          label="Search Clear"
+          htmlId="inputSearchClearRectangle"
+          containerSize="small-12"
+          placeholder="Enter Text"
+          searchable
+          shape="rectangle"
+          clear
+          newMomentum
+        ></md-input>
+      </div>
+    </div>
+    <div class="row">
+      <div class="column">
+        <md-input
+          label="Read Only"
+          value="Read Only"
+          readonly
+          containerSize="small-12"
+          helpText="Help Text"
+          newMomentum
+        ></md-input>
+      </div>
+      <div class="column">
+        <md-input
+          label="Disabled"
+          value="Disabled"
+          disabled
+          containerSize="small-12"
+          newMomentum
+          helpText="Help Text"
+        ></md-input>
+      </div>
+    </div>
+    <div class="row">
+      <div class="column">
+        <md-input
+          label="Multi Line"
+          value="There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by ..."
+          multiline
+          containerSize="small-12"
+          newMomentum
+          helpText="Help Text"
+        ></md-input>
+      </div>
+    </div>
+  </section>
+
+  <h3>Error Message</h3>
+  <section id="error" class="section">
+    <div class="row pill">
+      <div class="column">
+        <md-input
+          label="Error"
+          containerSize="small-12"
+          shape="pill"
+          .messageArr=${[{ ...messageArr, ...{ type: "error" } } as Input.Message]}
+          value="Error Text"
+          placeholder="Enter Text"
+        ></md-input>
+      </div>
+    </div>
+    <div class="row rectangle">
+      <div class="column">
+        <md-input
+          label="Error"
+          containerSize="small-12"
+          .messageArr=${[
+            {
+              ...messageArr,
+              ...{
+                type: "error",
+                message:
+                  "This is where the message would be if it were a long message would be this the message that would be.."
+              }
+            } as Input.Message
+          ]}
+          value="Error Text"
+          placeholder="Enter Text"
+        ></md-input>
+      </div>
+    </div>
+  </section>
+  <md-input
+    newMomentum
+    label="Success"
+    htmlId="inputSuccess"
+    containerSize="small-12"
+    .messageArr=${[messageArr]}
+    value="Success Text"
+    placeholder="Enter Text"
+  ></md-input>
+  <md-input
+    newMomentum
+    label="Warning"
+    htmlId="inputWarning"
+    containerSize="small-12"
+    .messageArr=${[{ ...messageArr, ...{ type: "warning" } } as Input.Message]}
+    value="Warning Text"
+    placeholder="Enter Text"
+  ></md-input>
+  <md-input
+    newMomentum
+    label="Error"
+    htmlId="inputError"
+    containerSize="small-12"
+    .messageArr=${[{ ...messageArr, ...{ type: "error" } } as Input.Message]}
+    value="Error Text"
+    placeholder="Enter Text"
+  ></md-input>
+  <md-input
+    label="Priority"
+    htmlId="inputPriority"
+    containerSize="small-12"
+    .messageArr=${[{ ...messageArr, ...{ type: "priority" } } as Input.Message]}
+    value="Priority Text"
+    placeholder="Enter Text"
+    newMomentum
+  ></md-input>
+  <hr />
+  <md-label>Copy to Clipboard example</md-label>
+  <md-input label="Default" containerSize="small-12" id="input"></md-input
+  ><md-icon class="md-input__copy" name="copy_14" @click=${(e: MouseEvent) => copyText(e)}></md-icon>
+  <hr />
+  <md-input label="Pill" containerSize="small-12" shape="pill"></md-input>
+  <md-input label="Multiline" containerSize="small-12" multiline></md-input>
+  <md-input label="Nested Level 1" containerSize="small-12" nestedLevel="1"></md-input>
+  <md-input label="Nested Level 2" containerSize="small-12" nestedLevel="2"></md-input>
+  <md-input label="Nested Level 3" containerSize="small-12" nestedLevel="3"></md-input>
+  <md-input label="Disabled" containerSize="small-12" placeholder="Disabled Text Placeholder" disabled></md-input>
+  <md-input label="Disabled Text" containerSize="small-12" value="Disabled Text Value" disabled></md-input>
+  <md-input label="Readonly" containerSize="small-12" value="Readonly Text" readOnly></md-input>
+  <md-input
+    label="Disabled Readonly"
+    containerSize="small-12"
+    value="Disabled Readonly Text"
+    disabled
+    readOnly
+  ></md-input>
+  <md-input label="Placeholder" containerSize="small-12" Placeholder="Placeholder Text"></md-input>
+  <md-input label="Clear" containerSize="small-12" placeholder="Enter Text" clear></md-input>
+  <md-input
+    label="Clear with Value"
+    containerSize="small-12"
+    placeholder="Enter Text"
+    value="Clear Text"
+    clear
+  ></md-input>
+  <md-input label="Right Icon" containerSize="small-12" placeholder="Enter Text">
+    <md-icon slot="input-section-right" name="accessibility_16"></md-icon>
+  </md-input>
+  <md-input label="Left Icon" containerSize="small-12" placeholder="Enter Text" auxiliaryContentPosition="before">
+    <md-icon slot="input-section" name="accessibility_16"></md-icon>
+  </md-input>
+  <md-input
+    label="Left Icon Disabled"
+    containerSize="small-12"
+    placeholder="Enter Text"
+    auxiliaryContentPosition="before"
+    disabled
+  >
+    <md-icon slot="input-section" name="accessibility_16"></md-icon>
+  </md-input>
+  <md-input
+    label="Left Icon with Clear"
+    containerSize="small-12"
+    placeholder="Enter Text"
+    auxiliaryContentPosition="before"
+    clear
+  >
+    <md-icon slot="input-section" name="accessibility_16"></md-icon>
+  </md-input>
+  <md-input
+    label="Help Text"
+    containerSize="small-12"
+    placeholder="Enter Text"
+    helpText="This is help text for the input."
+  >
+  </md-input>
+  <md-input label="Secondary Label" containerSize="small-5" placeholder="Enter Text" secondaryLabel="Secondary Label">
+  </md-input>
+  <md-input
+    label="Secondary Label Disabled"
+    containerSize="small-5"
+    placeholder="Enter Text"
+    secondaryLabel="Secondary Label Disabled"
+    disabled
+  >
+  </md-input>
+  <md-input
+    label="Secondary Label Help Text"
+    containerSize="small-12"
+    placeholder="Enter Text"
+    secondaryLabel="Secondary Label"
+    helpText="Help Text"
+  >
+  </md-input>
+  <md-input
+    label="Default Search"
+    htmlId="inputDefault"
+    containerSize="small-12"
+    placeholder="Enter Text"
+    searchable
+  ></md-input>
+  <md-input
+    label="Loading Search"
+    htmlId="inputLoading"
+    containerSize="small-12"
+    placeholder="Enter Text"
+    searchable
+    isLoading
+  ></md-input>
+  <md-input
+    label="Search Clear"
+    htmlId="inputSearchClear"
+    containerSize="small-12"
+    placeholder="Enter Text"
+    searchable
+    clear
+  ></md-input>
+  <md-input
+    label="Search Clear Pill"
+    htmlId="inputSearchClearPill"
+    containerSize="small-12"
+    placeholder="Enter Text"
+    searchable
+    shape="pill"
+    clear
+  ></md-input>
+  <md-input
+    label="Search Filled"
+    htmlId="inputSearchFilled"
+    containerSize="small-12"
+    placeholder="Enter Text"
+    searchable
+    isFilled
+  ></md-input>
+  <md-input
+    label="Search Filled Loading"
+    htmlId="inputSearchFilledLoading"
+    containerSize="small-12"
+    placeholder="Enter Text"
+    searchable
+    isFilled
+    isLoading
+  ></md-input>
+  <md-input
+    label="Search Filled Clear"
+    htmlId="inputSearchFilledClear"
+    containerSize="small-12"
+    placeholder="Enter Text"
+    searchable
+    isFilled
+    clear
+  ></md-input>
+  <md-input
+    label="Search Filled Clear Pill"
+    htmlId="inputSearchFilledClearPill"
+    containerSize="small-12"
+    placeholder="Enter Text"
+    shape="pill"
+    searchable
+    isFilled
+    clear
+  ></md-input>
+`;

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

@@ -0,0 +1,13 @@
+import "@/components/label/Label";
+import { html } from "lit-element";
+
+export const labelTemplate = html`
+  <md-label htmlFor="htmlId" label="Default Label"> </md-label>
+  <md-label htmlFor="htmlId" label="Secondary label" secondaryLabel> </md-label>
+  <md-label htmlFor="htmlId">
+    <span>I am slotted content</span>
+  </md-label>
+  <md-label htmlFor="htmlId" label="I have both a label and a slotted content">
+    <span>I am slotted content</span>
+  </md-label>
+`;

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

@@ -0,0 +1,46 @@
+import "@/components/link/Link";
+import { html } from "lit-element";
+
+export const linkTemplate = html`
+  <div class="row">
+    <md-link href="#"> Default Link </md-link>
+  </div>
+  <div class="row">
+    <md-link disabled> Disabled Link </md-link>
+  </div>
+  <div class="row">
+    <md-link tag="div"> Link Tag DIV </md-link>
+  </div>
+  <div class="row">
+    <md-link tag="div" disabled> Link Tag DIV disabled </md-link>
+  </div>
+  <div class="row">
+    <md-link tag="span"> Link Tag Span </md-link>
+  </div>
+  <div class="row">
+    <md-link tag="span" disabled> Link Tag Span disabled </md-link>
+  </div>
+
+  <div class="row">
+    <md-link inline> Link inline </md-link>
+  </div>
+  <div class="row">
+    <md-link inline disabled> Link inline disabled </md-link>
+  </div>
+  <div class="row">
+    <md-link inline href="http://test.com" target="_blank"> Link Opened in new window </md-link>
+  </div>
+
+  <div class="row">
+    <md-link tag="div" tab-index="1"> tab index 1 </md-link>
+  </div>
+  <div class="row">
+    <md-link tag="div" tab-index="-1"> tab-index -1 </md-link>
+  </div>
+  <div class="row">
+    <md-link ariaLabel="Test Link"> Link with Aria Label </md-link>
+  </div>
+  <div class="row">
+    <md-link ariaRole="button"> Role as button </md-link>
+  </div>
+`;

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

@@ -0,0 +1,55 @@
+import "@/components/list/List";
+import "@/components/list/ListItem";
+import { html } from "lit-element";
+
+export const listTemplate = html`
+  <h3>Default</h3>
+  <md-list label="Transuranium elements">
+    <md-list-item aria-label="Neptunium" slot="list-item">Neptunium</md-list-item>
+    <md-list-item aria-label="Plutonium" slot="list-item">Plutonium</md-list-item>
+    <md-list-item aria-label="Americium" slot="list-item">Americium</md-list-item>
+    <md-list-item aria-label="Curium" slot="list-item">Curium</md-list-item>
+    <md-list-item aria-label="Berkelium" slot="list-item">Berkelium</md-list-item>
+    <md-list-item aria-label="Californium" slot="list-item">Californium</md-list-item>
+  </md-list>
+
+  <h3>Disabled</h3>
+  <md-list label="Transuranium elements">
+    <md-list-item slot="list-item">Neptunium</md-list-item>
+    <md-list-item slot="list-item" disabled>Plutonium</md-list-item>
+    <md-list-item slot="list-item">Americium</md-list-item>
+    <md-list-item slot="list-item" disabled>Curium</md-list-item>
+    <md-list-item slot="list-item">Berkelium</md-list-item>
+    <md-list-item slot="list-item">Californium</md-list-item>
+  </md-list>
+
+  <h3>PreSelected</h3>
+  <md-list label="Transuranium elements" activated="3">
+    <md-list-item slot="list-item">Neptunium</md-list-item>
+    <md-list-item slot="list-item">Plutonium</md-list-item>
+    <md-list-item slot="list-item">Americium</md-list-item>
+    <md-list-item slot="list-item">Curium</md-list-item>
+    <md-list-item slot="list-item">Berkelium</md-list-item>
+    <md-list-item slot="list-item">Californium</md-list-item>
+  </md-list>
+
+  <h3>Orientation</h3>
+  <md-list label="Transuranium elements" alignment="horizontal">
+    <md-list-item slot="list-item">Neptunium</md-list-item>
+    <md-list-item slot="list-item">Plutonium</md-list-item>
+    <md-list-item slot="list-item">Americium</md-list-item>
+    <md-list-item slot="list-item">Curium</md-list-item>
+    <md-list-item slot="list-item">Berkelium</md-list-item>
+    <md-list-item slot="list-item">Californium</md-list-item>
+  </md-list>
+
+  <h3>Pill</h3>
+  <md-list label="Transuranium elements">
+    <md-list-item aria-label="Neptunium" slot="list-item" shape="pill">Neptunium</md-list-item>
+    <md-list-item aria-label="Plutonium" slot="list-item" shape="pill">Plutonium</md-list-item>
+    <md-list-item aria-label="Americium" slot="list-item" shape="pill">Americium</md-list-item>
+    <md-list-item aria-label="Curium" slot="list-item" shape="pill">Curium</md-list-item>
+    <md-list-item aria-label="Berkelium" slot="list-item" shape="pill">Berkelium</md-list-item>
+    <md-list-item aria-label="Californium" slot="list-item" shape="pill">Californium</md-list-item>
+  </md-list>
+`;

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

@@ -0,0 +1,8 @@
+import "@/components/loading/Loading";
+import { html } from "lit-element";
+
+export const loadingTemplate = html`
+  <md-loading></md-loading>
+  <md-loading size="middle"></md-loading>
+  <md-loading size="large"></md-loading>
+`;

package/src/[sandbox]/examples/meeting-alert.ts

@@ -0,0 +1,108 @@
+import "@/components//meeting-alert/MeetingAlert";
+import "@/components/button/Button";
+import "@/components/icon/Icon";
+import svgWhatsapp from "@img/whatsapp.svg";
+import { html } from "lit-element";
+import { querySelectorDeep } from "query-selector-shadow-dom";
+
+let isMeetingAlertOpenAttr = false;
+let isMeetingAlertOpenProp = false;
+
+function toggleMeetingAlertAttr() {
+  const meetingAlert = querySelectorDeep("#triggered-meeting-alert");
+  isMeetingAlertOpenAttr = !isMeetingAlertOpenAttr;
+  isMeetingAlertOpenAttr && meetingAlert?.setAttribute("show", "");
+  !isMeetingAlertOpenAttr && meetingAlert?.removeAttribute("show");
+}
+
+function toggleMeetingAlertProp() {
+  const meetingAlertProp = querySelectorDeep("#triggered-meeting-alert-prop");
+  isMeetingAlertOpenProp = !isMeetingAlertOpenProp;
+  meetingAlertProp.show = isMeetingAlertOpenProp;
+}
+
+export const meetingAlertTemplate = html`
+  <h3>md-meeting-alert no image</h3>
+  <div class="row">
+    <md-button value="value" @click=${toggleMeetingAlertAttr}>toggle meeting alert using attribute</md-button>
+    <md-meeting-alert
+      id="triggered-meeting-alert"
+      status="Queue_Demo7"
+      title="Attribute Trigger"
+      .onKeyDown=${() => console.log("passed onKeyDown Func")}
+    >
+    </md-meeting-alert>
+  </div>
+  <br />
+  <div class="row">
+    <md-button @click=${toggleMeetingAlertProp}>toggle meeting alert using property</md-button>
+    <md-meeting-alert
+      id="triggered-meeting-alert-prop"
+      .show=${isMeetingAlertOpenProp}
+      status="Queue_Demo7"
+      title="Property Trigger"
+      .onSnooze=${() => console.log("passed onSnooze Func")}
+      .onKeyDown=${() => console.log("passed onKeyDown Func")}
+    >
+    </md-meeting-alert>
+  </div>
+  <h3>md-meeting-alert image through src</h3>
+  <md-meeting-alert
+    show
+    status="Queue_Demo7"
+    title="John Doe"
+    .onKeyDown=${() => console.log("passed onKeyDown Func")}
+    src="https://st2.depositphotos.com/4967775/11323/v/950/depositphotos_113235752-stock-illustration-avatar-girls-icon-vector-woman.jpg"
+  >
+  </md-meeting-alert>
+  <h3>md-meeting-alert image through slot</h3>
+  <md-meeting-alert
+    show
+    status="Queue_Demo7"
+    title="Jane Doe"
+    userStyles=":host .md-alert { background: red; color: white }"
+  >
+    <span slot="custom-avatar">
+      <img
+        width="40"
+        src="https://st2.depositphotos.com/4967775/11323/v/950/depositphotos_113235752-stock-illustration-avatar-girls-icon-vector-woman.jpg"
+      />
+    </span>
+  </md-meeting-alert>
+  <h3>md-meeting-alert svg through slot</h3>
+  <md-meeting-alert show status="Queue_Demo7" title="Jane Doe">
+    <span slot="custom-avatar">
+      <img width="40'" height="40'" src="${svgWhatsapp}" />
+    </span>
+  </md-meeting-alert>
+  <h3>md-meeting-alert action through slot</h3>
+  <md-meeting-alert show status="Queue_Demo7" title="Jane Doe">
+    <md-button
+      slot="custom-action"
+      ariaLabel="Action"
+      circle
+      @click=${(e: Event) => {
+        console.log("Custom action passed via slot");
+        e.stopPropagation();
+      }}
+      size=${44}
+      role="button"
+    >
+      <md-icon name="icon-alarm_16"></md-icon>
+    </md-button>
+  </md-meeting-alert>
+  <h3>md-meeting-alert with attendees</h3>
+  <md-meeting-alert
+    .attendees=${[
+      { title: "J $", src: null, alt: "J $" },
+      { title: "Jefe Guadelupe", src: null, alt: "Jefe Guadelupe" }
+    ]}
+    show
+    status="Queue_Demo7"
+    title="Jane Doe"
+  >
+    <md-button ariaLabel="Action" circle size=${44} role="button">
+      <md-icon name="icon-alarm_16"></md-icon>
+    </md-button>
+  </md-meeting-alert>
+`;