@momentum-ui/web-components 2.14.13 → 2.14.14

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

@@ -1,130 +0,0 @@
-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="social-sms" 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="success"
-    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

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

@@ -1,119 +0,0 @@
-import "@/components/avatar/Avatar";
-import "@/components/avatar/CompositeAvatar";
-import svg from "@img/profile.svg";
-import { html } from "lit-element";
-
-export const avatarTemplate = 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>
-`;

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

@@ -1,170 +0,0 @@
-import "@/components/badge/Badge";
-import "@/components/icon/Icon";
-import { html } from "lit-element";
-
-export const badgeTemplate = html`
-  <md-badge tabIndexing="0" aria-label="my aria-label"> Default </md-badge>
-  <md-badge color="blue"> Blue </md-badge>
-  <md-badge color="red"> Red </md-badge>
-  <md-badge color="yellow"> Yellow </md-badge>
-  <md-badge color="green"> Green </md-badge>
-  <md-badge color="mint"> Mint </md-badge>
-  <md-badge color="cyan"> Cyan </md-badge>
-  <md-badge color="purple"> Purple </md-badge>
-
-  <h4 class="sandbox-header">Additional Badges</h4>
-  <md-badge color="gray"> Gray </md-badge>
-  <md-badge color="violet"> Violet </md-badge>
-  <md-badge color="mint"> Mint </md-badge>
-  <md-badge color="gold"> Gold </md-badge>
-  <md-badge color="lime"> Lime </md-badge>
-  <md-badge color="pink"> Pink </md-badge>
-  <md-badge color="orange"> Orange </md-badge>
-  <md-badge color="cobalt"> Cobalt </md-badge>
-
-  <h3 class="sandbox-header">Lumos Badges</h3>
-  <h4 class="sandbox-header">Circle Badges</h4>
-
-  <md-badge color="green" circle>
-    <md-icon name="handset-active_16"></md-icon>
-  </md-badge>
-  <md-badge color="blue" circle>
-    <md-icon name="chat-active_16"></md-icon>
-  </md-badge>
-  <md-badge color="violet" circle>
-    <md-icon name="chat-active_16"></md-icon>
-  </md-badge>
-  <md-badge color="mint" circle>
-    <md-icon name="social-sms" size="16" iconSet="momentumDesign"></md-icon>
-  </md-badge>
-
-  <h4 class="sandbox-header">Large Badges</h4>
-
-  <md-badge color="green">
-    <md-icon name="handset-active_16"></md-icon>
-    Voice
-    <span class="counter" style="margin:0 1rem">${"3"}</span>
-  </md-badge>
-
-  <md-badge color="blue">
-    <md-icon name="chat-active_16"></md-icon>
-    Chat
-    <span class="counter" style="margin:0 1rem">${"3"}</span>
-  </md-badge>
-
-  <md-badge color="violet">
-    <md-icon name="icon-email-active_24" size="16"></md-icon>
-    Email
-    <span class="counter" style="margin:0 1rem">${"3"}</span>
-  </md-badge>
-
-  <md-badge color="mint">
-    <md-icon name="share-c-native-adr_12" size="16"></md-icon>
-    Social
-    <span class="counter" style="margin:0 1rem">${"3"}</span>
-  </md-badge>
-
-  <md-badge color="mint" disabled>
-    <md-icon name="share-c-native-adr_12" size="16"></md-icon>
-    Disabled
-    <span class="counter" style="margin:0 1rem">${"3"}</span>
-  </md-badge>
-
-  <h4 class="sandbox-header">Small Badges</h4>
-
-  <md-badge color="mint" small>
-    <md-icon name="handset-active_12"></md-icon>
-    00:01
-  </md-badge>
-
-  <md-badge color="blue" small>
-    <md-icon name="chat-active_12"></md-icon>
-    00:01
-  </md-badge>
-
-  <md-badge color="purple" small>
-    <md-icon name="icon-email-active_24" size="12"></md-icon>
-    00:01
-  </md-badge>
-
-  <md-badge color="darkred" small>
-    <md-icon name="icon-email-active_24" size="12"></md-icon>
-    00:01
-  </md-badge>
-
-  <h4 class="sandbox-header">Split Badges</h4>
-
-  <md-badge color="mint" split>
-    <span slot="split-left">
-      <md-badge color="mint" small circle style="margin:0 .5rem 0 .375rem">
-        <md-icon name="handset-active_16"></md-icon>
-      </md-badge>
-      ${"00:01"}
-    </span>
-    <span slot="split-right">
-      <md-icon name="headset_16" style="margin-right:.375rem;height:1rem"></md-icon>
-      ${"00:01"}
-    </span>
-  </md-badge>
-  <md-badge color="blue" split>
-    <span slot="split-left">
-      <md-badge color="blue" small circle style="margin:0 .5rem 0 .375rem">
-        <md-icon name="chat-active_16"></md-icon>
-      </md-badge>
-      ${"04:31"}
-    </span>
-    <span slot="split-right">
-      <md-icon name="headset_16" style="margin-right:.375rem;height:1rem"></md-icon>
-      ${"00:23"}
-    </span>
-  </md-badge>
-
-  <h4 class="sandbox-header">Communications Status</h4>
-
-  <md-badge split>
-    <span slot="split-left">
-      <md-badge color="green" circle small style="margin-right:.375rem;">
-        <md-icon name="handset-active_12"></md-icon>
-      </md-badge>
-      ${"00:01"}
-    </span>
-    <span slot="split-right">
-      <md-icon name="archive_12" style="margin-right:.375rem;height:1rem"></md-icon>
-      Wrap Up ${"00:01"}
-    </span>
-  </md-badge>
-  <md-badge split>
-    <span slot="split-left">
-      <md-badge color="blue" circle small style="margin-right:.375rem;">
-        <md-icon name="chat-active_12"></md-icon>
-      </md-badge>
-      ${"00:01"}
-    </span>
-    <span slot="split-right">
-      <md-icon name="headset_12" style="margin-right:.375rem;height:1rem"></md-icon>
-      Barbara Hecker ${"00:23"}
-    </span>
-  </md-badge>
-
-  <h4 class="sandbox-header">Compact Badge</h4>
-
-  <md-badge compact>
-    <span>
-      <md-badge color="blue" circle small style="margin-right:.375rem;">
-        <md-icon name="chat-active_12"></md-icon>
-      </md-badge>
-      <span>connected - </span>
-      ${"00:01"}
-    </span>
-  </md-badge>
-
-  <h4 class="sandbox-header">Outlined Badges</h4>
-
-  <md-badge outlined> March 21, 2020 </md-badge>
-  <md-badge outlined small> March 21, 2020 </md-badge>
-
-  <h4 class="snadbox-header">Unread count</h4>
-
-  <md-badge color="unreadcount"> 99 </md-badge>
-  <md-badge color="unreadcount"> 4 </md-badge>
-`;

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

@@ -1,5 +0,0 @@
-import "@/components/breadcrumb/Breadcrumb";
-import { html } from "lit-element";
-import { breadCrumb } from "@/[sandbox]/sandbox.mock";
-
-export const breadcrumbTemplate = html` <md-breadcrumb .navCrumbs="${breadCrumb}"></md-breadcrumb> `;

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

@@ -1,66 +0,0 @@
-/**
- * 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/button-group/ButtonGroup";
-import "@/components/button/Button";
-import "@/components/icon/Icon";
-import { html } from "lit-element";
-
-export const buttonGroupTemplate = html`
-  <div class="column">
-    <h3>Icon only - 2 options</h3>
-    <md-button-group>
-      <button slot="button" aria-label="text-table" type="button" value="text-table">
-        <md-icon name="table-bold" size="16" iconSet="momentumDesign"></md-icon>
-      </button>
-      <button slot="button" aria-label="analysis" type="button" value="analysis">
-        <md-icon name="analysis-bold" size="16" iconSet="momentumDesign"></md-icon>
-      </button>
-    </md-button-group>
-  </div>
-  <div class="column">
-    <h3>Icon only - disabled</h3>
-    <md-button-group disabled>
-      <button slot="button" aria-label="text-table" type="button" value="text-table">
-        <md-icon name="table-bold" size="16" iconSet="momentumDesign"></md-icon>
-      </button>
-      <button slot="button" aria-label="analysis" type="button" value="analysis">
-        <md-icon name="analysis-bold" size="16" iconSet="momentumDesign"></md-icon>
-      </button>
-    </md-button-group>
-  </div>
-  <div class="column">
-    <h3>Icon only - 3 options</h3>
-    <md-button-group>
-      <button slot="button" aria-label="pie-chart" type="button" value="pie-chart">
-        <md-icon name="pie-chart-bold" size="16" iconSet="momentumDesign"></md-icon>
-      </button>
-      <button slot="button" aria-label="text-table" type="button" value="text-table">
-        <md-icon name="table-bold" size="16" iconSet="momentumDesign"></md-icon>
-      </button>
-      <button slot="button" aria-label="analysis" type="button" value="analysis">
-        <md-icon name="analysis-bold" size="16" iconSet="momentumDesign"></md-icon>
-      </button>
-    </md-button-group>
-  </div>
-  <div class="column">
-    <h3>Text Label - 2 options</h3>
-    <md-button-group>
-      <button slot="button" type="button" value="Option A">Option A</button>
-      <button slot="button" type="button" value="Option B">Option B</button>
-    </md-button-group>
-  </div>
-  <div class="column">
-    <h3>Text Label - 3 options</h3>
-    <md-button-group>
-      <button slot="button" type="button" value="Option A">Option A</button>
-      <button slot="button" type="button" value="Option B">Option B</button>
-      <button slot="button" type="button" value="Option C">Option C</button>
-    </md-button-group>
-  </div>
-`;