@momentum-ui/web-components 2.16.6 → 2.16.8

package/src/[sandbox]/examples/AdvanceList/components/ParentComponentGeneric.ts

@@ -0,0 +1,101 @@
+import { html, internalProperty, LitElement, property } from "lit-element";
+// import "@/components/list/InfiniteScrollList";
+import "@/components/advance-list/AdvanceList";
+import { customElementWithCheck } from "@/mixins/CustomElementCheck";
+
+export namespace ParentComponentGeneric {
+  @customElementWithCheck("parent-component-generic")
+  export class ELEMENT extends LitElement {
+    @property({ type: Array }) items: any = [];
+    @internalProperty() page = 1;
+    @property({ type: Boolean }) isLoading = false;
+    @property({ type: String }) value = "";
+    @property({ type: Boolean }) isError = false;
+    @internalProperty() totalRecords = 60000; // Total count is set to 6000
+
+    constructor() {
+      super();
+      this.items = [];
+      this.page = 1;
+      this.isLoading = false;
+      this.isError = false;
+      this.loadMoreItems();
+    }
+
+    generateUUID() {
+      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
+        const r = (Math.random() * 16) | 0;
+        const v = c === "x" ? r : (r & 0x3) | 0x8;
+        return v.toString(16);
+      });
+    }
+
+    async loadMoreItems() {
+      try {
+        this.isLoading = true;
+        const newItems = await this.fetchItems(this.page);
+        this.items = [...this.items, ...newItems];
+        this.page += 1;
+        this.isLoading = false;
+        this.value = this.items[1].id;
+      } catch (err) {
+        this.isLoading = false;
+        this.isError = true;
+      } finally {
+        this.isLoading = false;
+      }
+    }
+
+    async fetchItems(page: number) {
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+
+      // Adjusted the length to 200 for initial render
+      const newItems = Array.from({ length: 2000 }, (_, i) => ({
+        name: `Item ${(page - 1) * 2000 + i + 1}`,
+        id: this.generateUUID(),
+        index: i,
+        ariaLabel: `Item ${(page - 1) * 2000 + i + 1}`,
+        template: (data: any, index: number) =>
+          html` <div
+            style="position:relative;min-height:1.25rem;box-sizing: border-box;display:flex;flex-flow:row unwrap;justify-content:flex-start;align-items:center;line-height:20px; gap:0.5rem;"
+            ?disabled="${index % 2 === 0}"
+            aria-hidden="true"
+            indexing="${index}"
+          >
+            <md-icon name="info-badge-filled" iconSet="momentumDesign"> </md-icon>
+            ${data.name}
+          </div>`
+      }));
+      return newItems;
+    }
+
+    private handleListItemChange(_event: CustomEvent) {
+      //API call send to end point to update the item
+    }
+
+    render() {
+      return html`
+        <h2>Generic Item List</h2>
+        <md-advance-list
+          .items=${this.items}
+          .isLoading=${this.isLoading}
+          .isError=${this.isError}
+          ariaRoleList="listbox"
+          ariaRoleListItem="option"
+          ariaLabelList="state selector"
+          .totalRecords=${this.totalRecords}
+          @list-item-change=${this.handleListItemChange}
+          @load-more=${this.loadMoreItems}
+        >
+          <md-spinner size="24" slot="spin-loader"></md-spinner>
+        </md-advance-list>
+      `;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "parent-component-generic": ParentComponentGeneric.ELEMENT;
+  }
+}

package/src/[sandbox]/examples/AdvanceList/components/ParentComponentPreSelect.ts

@@ -0,0 +1,98 @@
+import { html, internalProperty, LitElement, property } from "lit-element";
+// import "@/components/list/InfiniteScrollList";
+import "@/components/advance-list/AdvanceList";
+import { customElementWithCheck } from "@/mixins/CustomElementCheck";
+
+export namespace ParentComponentPreSelect {
+  @customElementWithCheck("parent-component-pre-select")
+  export class ELEMENT extends LitElement {
+    @property({ type: Array }) items: any = [];
+    @internalProperty() page = 1;
+    @property({ type: Boolean }) isLoading = false;
+    @property({ type: String }) value = "";
+    @property({ type: Boolean }) isError = false;
+    @internalProperty() totalRecords = 0;
+
+    constructor() {
+      super();
+      this.items = [];
+      this.page = 1;
+      this.isLoading = false;
+      this.isError = false;
+      this.loadMoreItems();
+    }
+    generateUUID() {
+      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
+        const r = (Math.random() * 16) | 0;
+        const v = c === "x" ? r : (r & 0x3) | 0x8;
+        return v.toString(16);
+      });
+    }
+    async loadMoreItems() {
+      try {
+        this.isLoading = true;
+        const newItems = await this.fetchItems(this.page);
+        this.items = [...this.items, ...newItems];
+        this.totalRecords = 60000;
+        this.page += 1;
+        this.isLoading = false;
+        this.value = this.items[1].id;
+      } catch (err) {
+        this.isLoading = false;
+        this.isError = true;
+      } finally {
+        this.isLoading = false;
+      }
+    }
+
+    async fetchItems(page: number) {
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+
+      const newItems = Array.from({ length: 2000 }, (_, i) => ({
+        name: `Item ${(page - 1) * 2000 + i + 1}`,
+        id: this.generateUUID(),
+        index: i,
+        ariaLabel: `Item ${(page - 1) * 2000 + i + 1}`,
+        template: (data: any, index: number) =>
+          html`<div
+            style="position:relative;min-height:1.25rem;box-sizing: border-box;display:flex;flex-flow:row unwrap;justify-content:flex-start;align-items:center;line-height:30px;"
+            ?disabled="${index % 2 === 0}"
+            aria-hidden="true"
+            indexing="${index}"
+          >
+            ${data.name}
+          </div>`
+      }));
+      return newItems;
+    }
+
+    private handleListItemChange(_event: CustomEvent) {
+      // stub for implementation of event handler
+    }
+
+    render() {
+      return html`
+        <h2>Pre Select Item List</h2>
+        <md-advance-list
+          .items=${this.items}
+          .isLoading=${this.isLoading}
+          .isError=${this.isError}
+          .value=${this.value}
+          ariaRoleList="listbox"
+          ariaLabelList="state selector"
+          .totalRecords=${this.totalRecords}
+          @list-item-change=${this.handleListItemChange}
+          @load-more=${this.loadMoreItems}
+        >
+          <md-spinner size="24" slot="spin-loader"></md-spinner>
+        </md-advance-list>
+      `;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "parent-component-pre-select": ParentComponentPreSelect.ELEMENT;
+  }
+}

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

@@ -0,0 +1,67 @@
+import "@/components/accordion/Accordion";
+import "@/components/accordion/AccordionItem";
+import "@/components/input/Input";
+import { html } from "lit-element";
+
+export const accordionTemplate = html`
+  <style>
+    .test-class {
+      background-color: aliceblue;
+      flex-direction: column;
+      text-align: left;
+      padding: 0.5rem;
+      border-radius: 0.5rem;
+    }
+    md-accordion-item.part-demo::part(accordion-header) {
+      background-color: #c7c7c7;
+    }
+  </style>
+  <h3>Default</h3>
+  <md-accordion class="part-demo">
+    <md-accordion-item slot="accordion-item" label="Header №1" expanded class="part-demo">
+      <div slot="header-content" class="test-class">
+        <h4>Slotted Header Content</h4>
+        <p>lorem ipsum ploppum bootum flossy noop</p>
+      </div>
+      <div>Panel №1</div>
+    </md-accordion-item>
+    <md-accordion-item slot="accordion-item" label="Header №2">
+      <div>Panel №2</div>
+      <md-input type="text"></md-input>
+      <md-input type="text" disabled></md-input>
+      <md-input type="text"></md-input>
+    </md-accordion-item>
+    <md-accordion-item slot="accordion-item" label="Header №3" expanded>
+      <div>Panel №3</div>
+      <md-input type="text"></md-input>
+    </md-accordion-item>
+    <md-accordion-item slot="accordion-item" label="Header №4" disabled>
+      <div>Panel №4</div>
+    </md-accordion-item>
+    <md-accordion-item slot="accordion-item" label="Header №5">
+      <div>Panel №5</div>
+    </md-accordion-item>
+  </md-accordion>
+  <h3>Multiline</h3>
+  <md-accordion multiple>
+    <md-accordion-item slot="accordion-item" label="Header №1" expanded>
+      <div>Panel №1</div>
+    </md-accordion-item>
+    <md-accordion-item slot="accordion-item" label="Header №2" expanded>
+      <div>Panel №2</div>
+      <md-input type="text"></md-input>
+      <md-input type="text" disabled></md-input>
+      <md-input type="text"></md-input>
+    </md-accordion-item>
+    <md-accordion-item slot="accordion-item" label="Header №3">
+      <div>Panel №3</div>
+      <md-input type="text"></md-input>
+    </md-accordion-item>
+    <md-accordion-item slot="accordion-item" label="Header №4" disabled expanded>
+      <div>Panel №4</div>
+    </md-accordion-item>
+    <md-accordion-item slot="accordion-item" label="Header №5">
+      <div>Panel №5</div>
+    </md-accordion-item>
+  </md-accordion>
+`;

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

@@ -0,0 +1,14 @@
+import "@/components/list/ListItem";
+import { html } from "lit-element";
+import "./AdvanceList/components/ParentComponentError";
+import "./AdvanceList/components/ParentComponentGeneric";
+import "./AdvanceList/components/ParentComponentPreSelect";
+
+export const advanceListTemplate = html`
+  <div style="width: 300px">
+    <parent-component-generic></parent-component-generic>
+    <parent-component-pre-select></parent-component-pre-select>
+    <parent-component-error></parent-component-error>
+    <div class="empty-div" style="height: 200px"></div>
+  </div>
+`;

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

@@ -0,0 +1,100 @@
+import "@/components/alert-banner/AlertBanner";
+import "@/components/button/Button";
+import { customElement, html, LitElement, property } from "lit-element";
+
+@customElement("alert-banner-template-sandbox")
+export class AlertBannerTemplateSandbox extends LitElement {
+  @property({ type: Boolean }) default = false;
+  @property({ type: Boolean }) warning = false;
+  @property({ type: Boolean }) error = false;
+  @property({ type: Boolean }) success = false;
+
+  async openAlert(kind: string) {
+    switch (kind) {
+      case "default":
+        this.default = true;
+        break;
+      case "warning":
+        this.warning = true;
+        break;
+      case "error":
+        this.error = true;
+        break;
+      case "success":
+        this.success = true;
+        break;
+      default:
+        break;
+    }
+    await this.requestUpdate();
+  }
+
+  async hideAlert(kind: string) {
+    switch (kind) {
+      case "default":
+        this.default = false;
+        break;
+      case "warning":
+        this.warning = false;
+        break;
+      case "error":
+        this.error = false;
+        break;
+      case "success":
+        this.success = false;
+        break;
+      default:
+        break;
+    }
+    await this.requestUpdate();
+  }
+
+  render() {
+    return html`
+      <h2>Alert Banner</h2>
+      <div style="margin-bottom: 15px;">
+        <md-button variant="secondary" @click=${() => this.openAlert("warning")}>Trigger Warning Alert</md-button>
+      </div>
+      <div style="margin-bottom: 15px;">
+        <md-button variant="secondary" @click=${() => this.openAlert("error")}>Trigger Error Alert</md-button>
+      </div>
+      <div style="margin-bottom: 15px;">
+        <md-button variant="secondary" @click=${() => this.openAlert("default")}>Trigger Default Alert</md-button>
+      </div>
+      <div style="margin-bottom: 15px;">
+        <md-button variant="secondary" @click=${() => this.openAlert("success")}>Trigger Success Alert</md-button>
+      </div>
+      <md-alert-banner ?show=${this.default} type="default" @alertBanner-hide=${() => this.hideAlert("default")}>
+        Test Alert Message
+      </md-alert-banner>
+      <md-alert-banner
+        ?show="${this.warning}"
+        closable
+        type="warning"
+        @alertBanner-hide=${() => this.hideAlert("warning")}
+      >
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum."
+      </md-alert-banner>
+      <md-alert-banner
+        ?show=${this.error}
+        closable
+        type="error"
+        @alertBanner-hide=${() => this.hideAlert("error")}
+        message="text from a message attribute instead"
+      ></md-alert-banner>
+      <md-alert-banner
+        ?show=${this.success}
+        closable
+        type="success"
+        @alertBanner-hide=${() => this.hideAlert("success")}
+        message="success text from a message attribute"
+      ></md-alert-banner>
+    `;
+  }
+}
+
+export const alertBannerTemplate = html` <alert-banner-template-sandbox></alert-banner-template-sandbox> `;

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

@@ -0,0 +1,130 @@
+import "@/components/alert/Alert";
+import "@/components/avatar/Avatar";
+import "@/components/badge/Badge";
+import { html } from "lit-element";
+
+export const alertTemplate = html`
+  <md-alert
+    title="EXPLORE NEW HORIZONS Maecenas fermentum est ut elementum vulputate."
+    message="EXPLORE NEW HORIZONS Maecenas fermentum est ut elementum vulputate. Ut vel consequat urna. Ut aliquet ornare massa, quis dapibus quam condimentum id. GET READYEXPLORE NEW HORIZONS Maecenas fermentum est ut elementum vulputate. Ut vel consequat urna. Ut aliquet ornare massa, quis dapibus quam condimentum id."
+    type="success"
+    closable
+    show
+  ></md-alert>
+  <md-alert title="Warning" message="Who's awesome? You are!" type="warn" closable show></md-alert>
+  <md-alert title="Error" message="Who's awesome? You are!" type="error" closable show></md-alert>
+  <md-alert message="Who's awesome? You are!" show closable>
+    <md-badge slot="alert-icon" color="darkmint" circle>
+      <md-icon name="sms-filled" size="16" iconSet="momentumDesign" color="var(--md-white-text-color)"></md-icon>
+    </md-badge>
+  </md-alert>
+  <md-alert message="Who's awesome? You are!" show>
+    <md-link slot="alert-body" href="/">Test</md-link>
+    <div slot="alert-footer">
+      <md-button variant="primary">
+        <span slot="text">primary</span>
+      </md-button>
+    </div>
+  </md-alert>
+  <md-alert title="Success" message="Who's awesome? You are!" type="success" inline show></md-alert>
+  <br />
+  <h3>New Momentum</h3>
+  <md-alert
+    title="Header"
+    message="Turpis id scelerisque porta purus ut vel nisl a. Pulvinar felis convallis praesent viverra porta."
+    type="info"
+    closable
+    show
+    newMomentum
+    secondaryButton="Label"
+    primaryButton="Label"
+    link
+    showMore
+    href="/"
+    .primaryButtonClickFunction="${() => console.log("Primary button clicked")}"
+    .secondaryButtonClickFunction="${() => console.log("Secondary button clicked")}"
+  ></md-alert>
+  <md-alert
+    title="Error"
+    message="Your session has expired. Please log in again to retrieve your session."
+    type="error"
+    closable
+    show
+    newMomentum
+    secondaryButton="Cancel"
+    primaryButton="Ok"
+  ></md-alert>
+  <md-alert
+    title="Warning"
+    message="Warning: Your password will expire in 3 days. Please update your password to ensure continued access."
+    type="warning"
+    closable
+    show
+    newMomentum
+    primaryButton="Ok"
+  ></md-alert>
+  <md-alert
+    title="Success"
+    message="Success: Your account has been successfully created! Verify your email address by clicking the link sent to your inbox."
+    type="success"
+    closable
+    show
+    newMomentum
+    secondaryButton="Close"
+  ></md-alert>
+  <md-alert
+    title="Username"
+    message="New message received."
+    type="message"
+    secondaryButton="Label"
+    primaryButton="Label"
+    closable
+    show
+    newMomentum
+  ></md-alert>
+  <md-alert closable show newMomentum>
+    <md-avatar
+      slot="alert-icon"
+      title="avatar"
+      size="24"
+      alt="avatar"
+      src="https://placekitten.com/200/300"
+    ></md-avatar>
+    <span slot="alert-body"><b>Username</b> joined the session</span></md-alert
+  >
+  <md-alert type="loading" title="Connecting" closable show newMomentum></md-alert>
+  <div style="position: absolute; right: 48px; top: 48px; width: 340px;">
+    <md-alert
+      title="Ready to pause and recharge?"
+      message="Hey there, you're on a roll. How about a wellness break? This break is pre-approved by your organization for your well-being. You deserve it."
+      primaryButton="Take a Break"
+      secondaryButton="Later"
+      closable
+      show
+      newMomentum
+    >
+      <md-icon slot="alert-icon" size="24" iconSet="momentumBrandVisuals" name="cisco-ai-assistant-color"> </md-icon>
+    </md-alert>
+  </div>
+  <h3>New Momentum with slotted footer</h3>
+  <md-alert
+    title="Ready to pause and recharge?"
+    message="Hey there, you're on a roll. How about a wellness break? This break is pre-approved by your organization for your well-being. You deserve it."
+    closable
+    show
+    newMomentum
+  >
+    <md-icon slot="alert-icon" size="24" iconSet="momentumBrandVisuals" name="cisco-ai-assistant-color"> </md-icon>
+    <div slot="alert-footer">
+      <md-button variant="primary">
+        <span slot="text">primary</span>
+      </md-button>
+      <md-button variant="secondary">
+        <span slot="text">secondary</span>
+      </md-button>
+      <md-button variant="secondary">
+        <span slot="text">secondary</span>
+      </md-button>
+    </div>
+  </md-alert>
+`;

package/src/[sandbox]/examples/audio-player.ts

@@ -0,0 +1,9 @@
+import "@/components/audio-player/AudioPlayer";
+import { html } from "lit-element";
+
+export const audioPlayerTemplate = html`
+  <div class="container" style="padding-top: 300px">
+    <h3>Basic Audio Player</h3>
+    <md-audio-player src="https://www2.cs.uic.edu/~i101/SoundFiles/ImperialMarch60.wav"></md-audio-player>
+  </div>
+`;

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

@@ -0,0 +1,146 @@
+import "@/components/avatar/Avatar";
+import "@/components/avatar/CompositeAvatar";
+import "@/components/toggle-switch/ToggleSwitch";
+import svg from "@img/profile.svg";
+import { LitElement, customElement, html, internalProperty } from "lit-element";
+
+@customElement("avatar-template-sandbox")
+export class AvatarTemplateSandbox extends LitElement {
+  @internalProperty()
+  private isNewMomentumEnabled = false;
+
+  private toggleMomentum = () => {
+    this.isNewMomentumEnabled = !this.isNewMomentumEnabled;
+  };
+
+  render() {
+    return html`
+      <h3>Basic Large Avatar</h3>
+      <md-avatar alt="avatar" title="Alyson Hoagland Pace" size="44"></md-avatar>
+      <md-avatar alt="avatar" title="Alyson Hoagland Pace" size="44" color="purple"></md-avatar>
+      <md-avatar alt="avatar" title="Alyson Hoagland Pace" size="44" color="mint"></md-avatar>
+      <md-avatar alt="avatar" title="Alyson Hoagland Pace" size="44" color="slate"></md-avatar>
+      <md-avatar alt="avatar" title="Alyson Hoagland Pace" size="44" color="gold"></md-avatar>
+      <md-avatar alt="avatar" title="Alyson Hoagland Pace" size="44" color="pink"></md-avatar>
+      <md-avatar alt="avatar" title="Alyson Hoagland Pace" size="44" color="lime"></md-avatar>
+      <h3>Medium Src Avatar</h3>
+      <md-avatar
+        alt="avatar"
+        title="Kevin Hyde"
+        size="52"
+        src="https://static.skillshare.com/uploads/users/7330753/user-image-large.png"
+      ></md-avatar>
+      <h3>Small Avatar with Custom Image</h3>
+      <md-avatar alt="avatar" title="Kevin Hyde" size="18">
+        <img
+          src="https://st2.depositphotos.com/4967775/11323/v/950/depositphotos_113235752-stock-illustration-avatar-girls-icon-vector-woman.jpg"
+        />
+      </md-avatar>
+      <h3>Medium Type with Custom SVG Image</h3>
+      <md-avatar alt="avatar" title="Kevin Hyde" size="40">
+        <img width="100" height="100" src=${svg} />
+      </md-avatar>
+      <h3>Icon Avatar with Color</h3>
+      <md-avatar alt="avatar" title="Warning Icon" size="80" color="mint" icon-name="warning_20"></md-avatar>
+      <md-avatar alt="avatar" title="Warning Icon" size="80" icon-name="bot-bold" newMomentum></md-avatar>
+      <h3>Icon Avatar Status</h3>
+      <md-avatar title="active" size="36" type="active"></md-avatar>
+      <md-avatar title="bot" size="36" type="bot"></md-avatar>
+      <md-avatar title="call" size="36" type="call"></md-avatar>
+      <md-avatar title="dnd" size="36" type="dnd"></md-avatar>
+      <md-avatar title="group" size="36" type="group"></md-avatar>
+      <md-avatar title="inactive" size="36" type="inactive"></md-avatar>
+      <md-avatar title="meeting" size="36" type="meeting"></md-avatar>
+      <md-avatar title="ooo" size="36" type="ooo"></md-avatar>
+      <md-avatar title="presenting" size="36" type="presenting"></md-avatar>
+      <md-avatar title="self" size="36" type="self"></md-avatar>
+      <md-avatar title="typing" size="36" type="typing"></md-avatar>
+      <md-avatar title="engaged" size="36" type="engaged"></md-avatar>
+      <md-avatar title="idle" size="36" type="idle"></md-avatar>
+      <md-avatar title="rona" size="36" type="rona"></md-avatar>
+      <h3>New Icon Avatar Status</h3>
+      <md-avatar title="active" size="48" type="active" newMomentum></md-avatar>
+      <md-avatar title="meeting" size="48" type="meeting" newMomentum></md-avatar>
+      <md-avatar title="schedule" size="48" type="schedule" newMomentum></md-avatar>
+      <md-avatar title="call" size="48" type="call" newMomentum></md-avatar>
+      <md-avatar title="dnd" size="48" type="dnd" newMomentum></md-avatar>
+      <md-avatar title="presenting" size="48" type="presenting" newMomentum></md-avatar>
+      <md-avatar title="quiet-hours" size="48" type="quiet-hours" newMomentum></md-avatar>
+      <md-avatar title="away" size="48" type="away" newMomentum></md-avatar>
+      <md-avatar title="ooo" size="48" type="ooo" newMomentum></md-avatar>
+      <md-avatar title="busy" size="48" type="busy" newMomentum></md-avatar>
+      <md-avatar title="on-mobile" size="48" type="on-mobile" newMomentum></md-avatar>
+      <md-avatar title="on-device" size="48" type="on-device" newMomentum></md-avatar>
+      <md-avatar title="on-hold" size="48" type="on-hold" newMomentum></md-avatar>
+      <md-avatar title="away-calling" size="48" type="away-calling" newMomentum></md-avatar>
+      <md-avatar title="active" size="48" type="active" newMomentum typing></md-avatar>
+      <md-avatar title="engaged" size="48" type="engaged" newMomentum></md-avatar>
+      <md-avatar title="rona" size="48" type="rona" newMomentum></md-avatar>
+      <md-avatar title="idle" size="48" type="idle" newMomentum></md-avatar>
+      <md-avatar title="inactive" size="48" type="inactive" newMomentum></md-avatar>
+      <h3>New Icon Avatar Status Size</h3>
+      <md-avatar title="active" size="24" type="active" newMomentum></md-avatar>
+      <md-avatar title="active" size="32" type="active" newMomentum></md-avatar>
+      <md-avatar title="active" size="40" type="active" newMomentum></md-avatar>
+      <md-avatar title="active" size="48" type="active" newMomentum></md-avatar>
+      <md-avatar title="active" size="64" type="active" newMomentum></md-avatar>
+      <md-avatar title="active" size="72" type="active" newMomentum></md-avatar>
+      <md-avatar title="active" size="88" type="active" newMomentum></md-avatar>
+      <md-avatar title="active" size="124" type="active" newMomentum></md-avatar>
+      <h3>New Icon Avatar Status legacy size</h3>
+      <md-avatar size="28" type="idle" title="2 8" newMomentum></md-avatar>
+      <md-avatar size="36" type="idle" title="3 6" newMomentum></md-avatar>
+      <md-avatar size="44" type="idle" title="4 4" newMomentum></md-avatar>
+      <md-avatar size="52" type="idle" title="5 2" newMomentum></md-avatar>
+      <md-avatar size="56" type="idle" title="5 6" newMomentum></md-avatar>
+      <br />
+      <br />
+      <md-avatar title="meeting" size="24" type="meeting" newMomentum></md-avatar>
+      <md-avatar title="meeting" size="32" type="meeting" newMomentum></md-avatar>
+      <md-avatar title="meeting" size="40" type="meeting" newMomentum></md-avatar>
+      <md-avatar title="meeting" size="48" type="meeting" newMomentum></md-avatar>
+      <md-avatar title="meeting" size="64" type="meeting" newMomentum></md-avatar>
+      <md-avatar title="meeting" size="72" type="meeting" newMomentum></md-avatar>
+      <md-avatar title="meeting" size="88" type="meeting" newMomentum></md-avatar>
+      <md-avatar title="meeting" size="124" type="meeting" newMomentum></md-avatar>
+      <h3>Icon Avatar Group</h3>
+      <md-avatar title="Icon" type="group"></md-avatar>
+      <h3>Avatar Self</h3>
+      <md-avatar title="Self" type="self" size="24"></md-avatar>
+      <md-avatar title="Self" type="self" size="28"></md-avatar>
+      <md-avatar title="Self" type="self" size="36"></md-avatar>
+      <md-avatar title="Self" type="self" size="40"></md-avatar>
+      <md-avatar title="Self" type="self" size="44"></md-avatar>
+      <md-avatar title="Self" type="self" size="56"></md-avatar>
+      <md-avatar title="Self" type="self" size="124"></md-avatar>
+      <h3>Icon Avatar Bot</h3>
+      <md-avatar type="bot" title="Tom Smith"></md-avatar>
+      <md-avatar type="bot" title="Tom Smith" newMomentum></md-avatar>
+      <h3>Icon Avatar Notification</h3>
+      <md-avatar has-notification type="active" size="72" title="Tom Smith"></md-avatar>
+      <h3>Icon Avatar Typing</h3>
+      <md-avatar type="typing" size="84" title="Tom Smith"></md-avatar>
+      <h3>Composite Avatar</h3>
+      <md-composite-avatar size="72">
+        <md-avatar type="typing" has-notification title="Tom Smith"></md-avatar>
+        <md-avatar type="dnd" title="Alyson Hoagland Pace"></md-avatar>
+      </md-composite-avatar>
+      <h3>Click Event Avatar</h3>
+      <md-avatar title="active" size="40" type="active" newMomentum role="button"></md-avatar>
+      <h3>Toggle newMomentum on avatar</h3>
+      <md-avatar
+        title="active"
+        size="36"
+        type="idle"
+        ?newMomentum=${this.isNewMomentumEnabled}
+        role="button"
+      ></md-avatar>
+      <br />
+      <md-toggle-switch htmlId="newMomentumToggleSwitch" @click=${this.toggleMomentum} alignLabel="left">
+        Enable new momentum
+      </md-toggle-switch>
+    `;
+  }
+}
+
+export const avatarTemplate = html` <avatar-template-sandbox></avatar-template-sandbox> `;