@momentum-ui/web-components 2.5.7 → 2.5.8

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

@@ -1,214 +0,0 @@
-import "@/components/button/Button";
-import "@/components/icon/Icon.ts";
-import "@/components/spinner/Spinner.ts";
-import "@/components/tooltip/Tooltip";
-import { html } from "lit-element";
-
-export const buttonTemplate = html`
-  <div class="row" style="display: flex; margin: .5rem 0">
-    <h3 class="sandbox-header" style="margin: .5rem 1rem">Disabled</h3>
-    <md-button disabled><span slot="text">disabled</span></md-button>
-    <md-button variant="primary" disabled><span slot="text">disabled</span></md-button>
-    <md-button variant="primary" tab-index="-1" color="violet"><span slot="text">no disabled</span></md-button>
-    <md-button loading circle><span slot="text">loading</span></md-button>
-    <md-button loading><span slot="text">loading</span></md-button>
-    <md-button variant="green" circle loading
-      ><md-icon slot="icon" name="pause_16"></md-icon><span slot="text">loading</span></md-button
-    >
-  </div>
-
-  <div class="row" style="display: flex; margin: .5rem 0">
-    <h3 class="sandbox-header" style="margin: .5rem 1rem">With Click Function</h3>
-    <md-button><span slot="text">click function</span></md-button>
-    <md-button disabled><span slot="text">disabled click</span></md-button>
-  </div>
-
-  <div class="row" style="display: flex; margin: .5rem 0">
-    <h3 class="sandbox-header" style="margin: .5rem 1rem">Colors</h3>
-    <md-button color="color-none"><span slot="text">None</span></md-button>
-    <md-button><span slot="text">Default</span></md-button>
-    <md-button color="blue"><span slot="text">Blue</span></md-button>
-    <md-button color="mint"><span slot="text">Mint</span></md-button>
-    <md-button color="white"><span slot="text">White</span></md-button>
-    <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="primary" color="violet"><span slot="text">Variant + Color</span></md-button>
-  </div>
-
-  <div class="row" style="display: flex; margin: .5rem 0">
-    <h3 class="sandbox-header" style="margin: .5rem 1rem">Call Control Buttons (40)</h3>
-    <md-button variant="secondary" size="40"
-      ><md-icon slot="icon" name="pause_16"></md-icon><span slot="text">Hold</span></md-button
-    >
-    <md-button variant="red" size="40"
-      ><md-icon slot="icon" name="clear_16"></md-icon><span slot="text">End</span></md-button
-    >
-
-    <md-button variant="secondary" size="40" tag="a"><span slot="text">Link</span></md-button>
-    <md-button variant="secondary" size="40" tag="a"
-      ><md-icon slot="icon" name="phone-reply_16"></md-icon><span slot="text">Link</span></md-button
-    >
-    <md-button variant="green" circle loading size="40"
-      ><md-icon slot="icon" name="pause_16"></md-icon><span slot="text">loading</span></md-button
-    >
-    <md-button variant="green" loading size="40"
-      ><md-icon slot="icon" name="pause_16"></md-icon><span slot="text">loading</span></md-button
-    >
-
-    <md-button size="40" color="white" outline
-      ><md-icon slot="icon" name="pause_16"></md-icon><span slot="text">Outlined</span></md-button
-    >
-  </div>
-
-  <div class="row" style="display: flex; margin: .5rem 0">
-    <h3 class="sandbox-header" style="margin: .5rem 1rem">Email Buttons (32)</h3>
-    <md-button><md-icon slot="icon" name="phone-reply_16"></md-icon><span slot="text">Reply</span></md-button>
-    <md-button variant="secondary"
-      ><md-icon slot="icon" name="attachment_16"></md-icon><span slot="text">Attach Files</span></md-button
-    >
-    <md-button variant="green" loading size="32"
-      ><md-icon slot="icon" name="pause_16"></md-icon><span slot="text">loading</span></md-button
-    >
-  </div>
-
-  <div class="row" style="display: flex; margin: .5rem 0">
-    <h3 class="sandbox-header" style="margin: .5rem 1rem">Button Sizes</h3>
-    <md-button size="size-none"><span slot="text">32</span></md-button>
-    <md-button size="28"><span slot="text">28</span></md-button>
-    <md-button size="32"><span slot="text">32</span></md-button>
-    <md-button size="36"><span slot="text">36</span></md-button>
-    <md-button size="40"><span slot="text">40</span></md-button>
-    <md-button size="52"><span slot="text">52</span></md-button>
-  </div>
-
-  <div class="row" style="display: flex; margin: .5rem 0">
-    <h3 class="sandbox-header" style="margin: .5rem 1rem">Circle Button Sizes (icon)</h3>
-    <md-button circle size="size-none"><md-icon slot="icon" name="clear_16"></md-icon></md-button>
-    <md-button circle size="28"><md-icon slot="icon" name="clear_16"></md-icon></md-button>
-    <md-button circle size="32"><md-icon slot="icon" name="clear_16"></md-icon></md-button>
-    <md-button circle size="36"><md-icon slot="icon" name="clear_16"></md-icon></md-button>
-    <md-button circle size="40"><md-icon slot="icon" name="clear_16"></md-icon></md-button>
-    <md-button circle size="52"><md-icon slot="icon" name="clear_16"></md-icon></md-button>
-  </div>
-
-  <div class="row" style="display: flex; margin: .5rem 0">
-    <h3 class="sandbox-header" style="margin: .5rem 1rem">Circle Button Sizes (text)</h3>
-    <md-button circle size="size-none"><span slot="text">no size</span></md-button>
-    <md-button circle size="20"><span slot="text">20</span></md-button>
-    <md-button circle size="28"><span slot="text">28</span></md-button>
-    <md-button circle size="32"><span slot="text">32</span></md-button>
-    <md-button circle size="36"><span slot="text">36</span></md-button>
-    <md-button circle size="40"><span slot="text">40</span></md-button>
-    <md-button circle size="44"><span slot="text">44</span></md-button>
-    <md-button circle size="52"><span slot="text">52</span></md-button>
-    <md-button circle size="56"><span slot="text">56</span></md-button>
-    <md-button circle size="68"><span slot="text">68</span></md-button>
-    <md-button circle size="72"><span slot="text">72</span></md-button>
-    <md-button circle size="84"><span slot="text">84</span></md-button>
-  </div>
-
-  <div class="row" style="display: flex; margin: .5rem 0">
-    <h3 class="sandbox-header" style="margin: .5rem 1rem">Variants</h3>
-    <md-button variant="primary"><span slot="text">pimary</span></md-button>
-    <md-button variant="secondary"><span slot="text">secondary</span></md-button>
-    <md-button variant="red"><span slot="text">red</span></md-button>
-    <md-button variant="green"><span slot="text">green</span></md-button>
-    <md-button variant="white"><span slot="text">White</span></md-button>
-  </div>
-
-  <h3 class="sandbox-header" style="margin: .5rem 1rem">Outline Color Schema</h3>
-  <div class="row" style="display: flex; margin: .5rem 0">
-    <md-button color="blue" outline><span slot="text">Blue Outline</span></md-button>
-    <md-button color="dark-gray" outline><span slot="text">Dark Gray Outline</span></md-button>
-    <md-button color="red" outline><span slot="text">Red Outline</span></md-button>
-    <md-button color="green" outline><span slot="text">Green Outline</span></md-button>
-    <md-button color="white" outline><span slot="text">White Outline</span></md-button>
-    <md-button color="orange" outline><span slot="text">Orange Outline</span></md-button>
-    <md-button color="mint" outline><span slot="text">Mint Outline</span></md-button>
-  </div>
-   <div class="row" style="display: flex; margin: .5rem 0">
-    <md-button color="yellow" outline><span slot="text">Yellow Outline</span></md-button>
-    <md-button color="duck-egg" outline><span slot="text">Duck Egg Outline</span></md-button>
-    <md-button color="purple" outline><span slot="text">Purple Outline</span></md-button>
-    <md-button color="violet" outline><span slot="text">Violet Outline</span></md-button>
-    <md-button color="pink" outline><span slot="text">Pink Outline</span></md-button>
-    <md-button color="cyan" outline><span slot="text">Cyan Outline</span></md-button>
-
-  </div>
-  <br/>
-
-  <div class="row" style="display: flex; margin: .5rem 0">
-    <h3 class="sandbox-header" style="margin: .5rem 1rem">Different Tags</h3>
-    <md-button tag="a" variant="green">anchor</md-button>
-    <md-button tag="button" variant="green">button</md-button>
-    <md-button tag="input" variant="green" label="input" value="input">input</md-button>
-  </div>
-
-  <div class="row" style="display: flex; margin: .5rem 0">
-    <h3 class="sandbox-header" style="margin: .5rem 1rem">Different Types</h3>
-    <md-button type="button">button</md-button>
-    <md-button type="reset">reset</md-button>
-    <md-button type="submit">submit</md-button>
-  </div>
-
-  <div class="row" style="display: flex; margin: .5rem 0">
-    <h3 class="sandbox-header" style="margin: .5rem 1rem">Links</h3>
-    <md-button tag="a" ariaLabel="Link"
-      ><md-icon slot="icon" name="pause_16"></md-icon><span slot="text">Link</span></md-button
-    >
-    <md-button tag="a" ariaLabel="Link"><span slot="text">Link</span></md-button>
-    <md-button tag="a" ariaLabel="Link">Link</md-button>
-    <md-button tag="a" variant="primary" ariaLabel="Link">Link</md-button>
-    <md-button tag="a" variant="secondary" ariaLabel="Link">Link</md-button>
-    <md-button tag="a" variant="red" ariaLabel="Link">Link</md-button>
-    <md-button tag="a" variant="green" ariaLabel="Link">Link</md-button>
-  </div>
-
-  <div class="row" style="display: flex; margin: .5rem 0">
-    <h3 class="sandbox-header" style="margin: .5rem 1rem">Text & Icon (circle) Tooltip</h3>
-    <md-tooltip message="loading" placement="top">
-      <md-button loading circle><span slot="text">Reply</span></md-button>
-    </md-tooltip>
-    <md-tooltip message="Pause" placement="bottom">
-      <md-button variant="green" circle
-        ><md-icon slot="icon" name="pause_16"></md-icon><span slot="text">Pause</span></md-button
-      ></md-tooltip
-    >
-    <md-tooltip message="Test text" placement="left">
-      <md-button variant="primary" title="text title"
-        ><md-icon slot="icon" name="pause_16"></md-icon><span slot="text">Pause</span></md-button
-      >
-    </md-tooltip>
-    <md-tooltip message="Test text" disabled>
-      <md-button variant="green" title="text title"><span slot="text">(with disabled tooltip)</span></md-button>
-    </md-tooltip>
-  </div>
-
-  <div class="row" style="display: flex; margin: .5rem 0">
-    <h3 class="sandbox-header" style="margin: .5rem 1rem">Just Icon</h3>
-    <md-button variant="red" circle><md-icon slot="icon" name="pause_16"></md-icon></md-button>
-    <md-button variant="red" circle loading></md-button>
-    <md-button variant="red" disabled circle>
-      <md-icon slot="icon" name="handset_16"></md-icon>
-    </md-button>
-    <md-button variant="red"><md-icon slot="icon" name="pause_16"></md-icon></md-button>
-    <md-button variant="red" loading></md-button>
-  </div>
-
-  <div class="row" style="display: flex; margin: .5rem 0">
-    <h3 class="sandbox-header" style="margin: .5rem 1rem">Both Icon + Text</h3>
-    <md-button variant="red"><md-icon slot="icon" name="pause_16"></md-icon><span slot="text">Hold</span></md-button>
-    <md-button loading><span slot="text">Reply</span></md-button>
-  </div>
-
-  <div class="row" style="display: flex; margin: .5rem 0;">
-    <h3 class="sandbox-header" style="margin: .5rem 1rem">Text Ellipsis</h3>
-    <md-button variant="primary" label="button" maxWidth="100px"
-      ><span slot="text">Text Slot Button Armageddon</span></md-button
-    >
-    <md-button variant="primary" loading maxWidth="100px"><span slot="text">Loading Button Armageddon</span></md-button>
-    <md-button variant="primary" width="300px"
-      ><md-icon slot="icon" name="pause_16"></md-icon><span slot="text">Icon Button Armageddon</span></md-button
-    >
-  </div>
-`;

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

@@ -1,76 +0,0 @@
-import "@/components/card/Card";
-import "@/components/badge/Badge";
-import { cardMenuItems } from "@/[sandbox]/sandbox.mock";
-import { customElement, html, LitElement, property } from "lit-element";
-
-@customElement("card-template-sandbox")
-export class CardTemplateSandbox extends LitElement {
-  @property({ type: String }) value = "";
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener("card-click", this.handleClickCard as EventListener);
-    this.addEventListener("card-keydown", this.handleKeydownCard as EventListener);
-    this.addEventListener("card-menu-click", this.handleClickMenu as EventListener);
-  }
-
-  private handleClickCard(e: MouseEvent) {
-    const { id } = e.detail as any;
-
-    this.value = "Card " + id + ": is clickable";
-  }
-
-  private handleKeydownCard(e: KeyboardEvent) {
-    const { id } = e.detail as any;
-
-    this.value = "Card " + id + ": is key event";
-  }
-
-  private handleClickMenu(e: MouseEvent) {
-    const { id, type } = e.detail as any;
-
-    this.value = "Card " + id + ": in " + type + " mode";
-  }
-
-  private handleKeydownMenu(e: KeyboardEvent) {
-    const { id, type } = e.detail as any;
-
-    this.value = "Card " + id + ": in " + type + " mode by keyboard event";
-  }
-
-  render() {
-    return html`
-      <h4>${this.value}</h4>
-      <md-card
-        .menuOptions=${cardMenuItems}
-        id="123456789"
-        title="Team A Report - Q1"
-        subtitle="Updated 2 hours ago"
-        @card-menu-keydown="${(e: KeyboardEvent) => this.handleKeydownMenu(e)}"
-        info="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
-      >
-        <div slot="content">
-          <img
-            style="width: 100%;"
-            src="https://media.istockphoto.com/vectors/dashboard-ui-modern-presentation-with-data-graphs-and-hud-diagrams-vector-id1159848977"
-            alt=""
-          />
-        </div>
-
-        <md-badge slot="footer" color="violet" small>Active</md-badge>
-        <md-badge slot="footer" color="mint" small>Stock Report</md-badge>
-        <md-badge slot="footer" color="gold" small>Team Report</md-badge>
-        <md-badge slot="footer" color="lime" small>Team A</md-badge>
-        <md-badge slot="footer" color="blue" small>TA</md-badge>
-        <md-badge slot="footer" color="orange" small>Team B</md-badge>
-        <md-badge slot="footer" color="blue" small>Some long long label</md-badge>
-        <md-badge slot="footer" color="pink" small>Confidential</md-badge>
-      </md-card>
-    `;
-  }
-}
-
-export const cardTemplate = html`
-  <h3>Default Card</h3>
-  <card-template-sandbox></card-template-sandbox>
-`;

package/src/[sandbox]/examples/chat-message.ts

@@ -1,33 +0,0 @@
-import "@/components/chat-message/ChatMessage";
-import { html } from "lit-element";
-import "@/components/alert/Alert";
-import "@/components/badge/Badge";
-import "@/components/icon/Icon";
-import "@/components/alert-banner/AlertBanner";
-
-export const chatMessageTemplate = html`
-  <md-chat-message title="John Doe" time="11:27AM">
-    <p slot="message">I have issue with my silencer</p>
-  </md-chat-message>
-  <md-chat-message self time="11:27AM">
-    <p slot="message">Sure. I will help with that.</p>
-  </md-chat-message>
-  <md-chat-message
-    title="Barbara"
-    time="11:27AM"
-    src="https://static.skillshare.com/uploads/users/7330753/user-image-large.png"
-  >
-    <p slot="message">
-      <md-alert message="Who's awesome? You are!" show closable>
-        <md-badge slot="alert-icon" color="darkmint" circle>
-          <md-icon name="sms_16" color="white"></md-icon>
-        </md-badge>
-      </md-alert>
-    </p>
-  </md-chat-message>
-  <md-chat-message self time="11:27AM">
-    <p slot="message">
-      <img src="https://static.skillshare.com/uploads/users/7330753/user-image-large.png" alt="" />
-    </p>
-  </md-chat-message>
-`;

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

@@ -1,51 +0,0 @@
-import "@/components/checkbox/Checkbox";
-import "@/components/checkbox/CheckboxGroup";
-import { html } from "lit-element";
-
-export const checkboxTemplate = html`
-  <h3>Default</h3>
-  <md-checkbox>Option Item</md-checkbox>
-  <h3>Disabled</h3>
-  <md-checkbox disabled>Option Item</md-checkbox>
-  <h3>Disabled Checked</h3>
-  <md-checkbox disabled checked>Option Item</md-checkbox>
-  <h3>Indeterminate</h3>
-  <md-checkbox indeterminate>Option Item</md-checkbox>
-  <h3>Pre-Checked</h3>
-  <md-checkbox checked>Option Item</md-checkbox>
-  <h3>Default Group</h3>
-  <md-checkboxgroup group-label="group_process">
-    <md-checkbox slot="checkbox">Option 1</md-checkbox>
-    <md-checkbox slot="checkbox">Option 2</md-checkbox>
-    <md-checkbox slot="checkbox">Option 3</md-checkbox>
-    <md-checkbox slot="checkbox">Option 4</md-checkbox>
-  </md-checkboxgroup>
-  <h3>Horizontal Group</h3>
-  <md-checkboxgroup group-label="group_process" alignment="horizontal">
-    <md-checkbox slot="checkbox">Option 1</md-checkbox>
-    <md-checkbox slot="checkbox">Option 2</md-checkbox>
-    <md-checkbox slot="checkbox">Option 3</md-checkbox>
-    <md-checkbox slot="checkbox">Option 4</md-checkbox>
-  </md-checkboxgroup>
-  <h3>Disabled Group</h3>
-  <md-checkboxgroup group-label="group_process">
-    <md-checkbox slot="checkbox">Option 1</md-checkbox>
-    <md-checkbox slot="checkbox" disabled>Disabled Option</md-checkbox>
-    <md-checkbox slot="checkbox" disabled checked>Disabled & Checked Option</md-checkbox>
-    <md-checkbox slot="checkbox">Option 2</md-checkbox>
-  </md-checkboxgroup>
-  <h3>Indeterminate Group</h3>
-  <md-checkboxgroup group-label="group_process">
-    <md-checkbox slot="checkbox">Option 1</md-checkbox>
-    <md-checkbox slot="checkbox" disabled indeterminate>Disabled Indeterminate Option</md-checkbox>
-    <md-checkbox slot="checkbox" disabled checked>Disabled Checked Option</md-checkbox>
-    <md-checkbox slot="checkbox" indeterminate>Indeterminate Option</md-checkbox>
-  </md-checkboxgroup>
-  <h3>Pre-Checked Group</h3>
-  <md-checkboxgroup group-label="group_process">
-    <md-checkbox slot="checkbox" checked>Checked Option</md-checkbox>
-    <md-checkbox slot="checkbox">Option 1</md-checkbox>
-    <md-checkbox slot="checkbox" checked>Checked Option</md-checkbox>
-    <md-checkbox slot="checkbox">Option 2</md-checkbox>
-  </md-checkboxgroup>
-`;

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

@@ -1,72 +0,0 @@
-import "@/components/chip/Chip";
-import "@/components/list/List";
-import { html } from "lit-element";
-
-export const chipTemplate = html`
-  <h3 class="sandbox-header">Default Chip</h3>
-  <md-chip value="developer@cisco.ninja"> </md-chip>
-  <h3 class="sandbox-header">Additional Color Chip</h3>
-  <md-chip value="Gray" color="gray"> </md-chip>
-  <md-chip value="Violet" color="violet"> </md-chip>
-  <md-chip value="Mint" color="mint"> </md-chip>
-  <md-chip value="Gold" color="gold"> </md-chip>
-  <md-chip value="Lime" color="lime"> </md-chip>
-  <md-chip value="Pink" color="pink"> </md-chip>
-  <md-chip value="Orange" color="orange"> </md-chip>
-  <md-chip value="Cobalt" color="cobalt"> </md-chip>
-  <h3 class="sandbox-header">Read Only Default Chip</h3>
-  <md-chip value="developer@cisco.ninja" readonly> </md-chip>
-  <h3 class="sandbox-header">Selected Chip</h3>
-  <md-chip icon="icon-file-pdf_16" iconColor="violet-60" selected value="contract-revision.pdf">
-    Contract revision</md-chip
-  >
-  <h3 class="sandbox-header">Disabled Chip</h3>
-
-  <md-chip icon="icon-file-pdf_16" disabled selected value="contract-revision.pdf">Contract revision</md-chip>
-
-  <h3 class="sandbox-header">Loading Chip</h3>
-  <md-chip icon="icon-file-pdf_16" iconColor="violet-60" determinateProgress="67" value="IMG_Dapper_Dog.jpeg">
-  </md-chip>
-  <md-chip icon="icon-file-pdf_16" iconColor="violet-60" indeterminateProgress value="IMG_Dapper_Dog.jpeg"> </md-chip>
-  <h3 class="sandbox-header">Text Overflow Chip</h3>
-  <md-chip icon="icon-file-pdf_16" iconColor="violet-60" value="super-long-cisco-tihng-filename_001239084.png">
-  </md-chip>
-  <h3 class="sandbox-header">Minimum Width Chip</h3>
-  <md-chip icon="icon-file-pdf_16" iconColor="violet-60" value="i"> </md-chip>
-  <h3 class="sandbox-header">Named Custom content Slots</h3>
-  <md-chip color="cyan" readonly value="developer@cisco.ninja">
-    <md-icon name="icon-alert_16" slot="custom-left-content"></md-icon>
-    <md-icon name="icon-alarm_16" slot="custom-right-content"></md-icon>
-  </md-chip>
-  <h3>Color Chips (Read Only)</h3>
-  <md-chip readonly value="developer@cisco.ninja">
-    cisco-developer@cisco.ninja
-  </md-chip>
-  <md-chip color="blue" readonly value="developer@cisco.ninja">
-    cisco-developer@cisco.ninja
-  </md-chip>
-  <md-chip color="red" readonly value="developer@cisco.ninja">
-    cisco-developer@cisco.ninja
-  </md-chip>
-  <md-chip color="yellow" readonly value="developer@cisco.ninja">
-    cisco-developer@cisco.ninja
-  </md-chip>
-  <md-chip color="green" readonly value="developer@cisco.ninja">
-    cisco-developer@cisco.ninja
-  </md-chip>
-  <md-chip color="mint" readonly value="developer@cisco.ninja">
-    cisco-developer@cisco.ninja
-  </md-chip>
-  <md-chip color="cyan" readonly value="developer@cisco.ninja">
-    <md-icon name="icon-alert_16" slot="custom-left-content"></md-icon>
-    <md-icon name="icon-alarm_16" slot="custom-right-content"></md-icon>
-  </md-chip>
-  <h3>Chip List</h3>
-  <ul role="list">
-    <md-chip value="developer@cisco.ninja" slot="list-item" id="Chip1"></md-chip>
-    <md-chip value="developer@cisco.ninja" slot="list-item" id="Chip2"></md-chip>
-    <md-chip value="developer@cisco.ninja" slot="list-item" id="Chip3"></md-chip>
-    <md-chip value="developer@cisco.ninja" slot="list-item" id="Chip4"></md-chip>
-    <md-chip value="developer@cisco.ninja" slot="list-item" id="Chip5"></md-chip>
-  </ul>
-`;

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

@@ -1,90 +0,0 @@
-import "@/components/button/Button";
-import "@/components/icon/Icon";
-import "@/components/coachmark/Coachmark";
-import "@/components/activity-button/ActivityButton";
-import "@/components/badge/Badge";
-import "@/components/taskitem/TaskItem";
-import { customElement, html, LitElement, property } from "lit-element";
-
-@customElement("coach-template-sandbox")
-export class CoachTemplateSandbox extends LitElement {
-  @property({ type: Boolean }) isOpen = false;
-  @property({ type: Boolean }) isOpenSecond = false;
-  @property({ type: Boolean }) isOpenThird = false;
-  @property({ type: Boolean }) isOpenFourth = false;
-
-  private openCoach() {
-    this.isOpen = true;
-  }
-
-  private closeCoach() {
-    this.isOpen = false;
-    this.isOpenSecond = true;
-  }
-
-  private closeCoachSecond() {
-    this.isOpenSecond = false;
-    this.isOpenThird = true;
-  }
-
-  private closeCoachThird() {
-    this.isOpenThird = false;
-    this.isOpenFourth = true;
-  }
-
-  private closeCoachFourth() {
-    this.isOpenFourth = false;
-  }
-
-  render() {
-    return html`
-      <md-coachmark ?show=${this.isOpen} placement="auto" color="violet" @coach-action=${this.closeCoach}>
-        <div slot="coachmark-content">
-          <span>Coachmark test content</span>
-        </div>
-        <md-button @button-click=${this.openCoach}>Coachmark Default</md-button>
-      </md-coachmark>
-
-      <md-coachmark ?show=${this.isOpenSecond} placement="top" color="blue" @coach-action=${this.closeCoachSecond}>
-        <div slot="coachmark-content">
-          <span>Coachmark second test content</span>
-        </div>
-        <md-activity-button .type=${"chat"} label="Chat"></md-activity-button>
-      </md-coachmark>
-
-      <md-coachmark ?show=${this.isOpenThird} placement="left" color="green" hidebutton>
-        <div slot="coachmark-content">
-          <span>Coachmark third test content</span>
-          <md-button slot="coachmark-action" @button-click=${this.closeCoachThird}>Slot button next</md-button>
-        </div>
-        <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-coachmark>
-
-      <md-coachmark ?show=${this.isOpenFourth} placement="bottom" color="purple" hidebutton>
-        <div slot="coachmark-content">
-          <span>Coachmark fourth test content</span>
-          <md-button slot="coachmark-action" @click=${this.closeCoachFourth}>Slot button close</md-button>
-        </div>
-        <md-task-item
-          mediaType="telephony"
-          status="conference"
-          title="Mihael Varificantare for test text overflow"
-          queue="IRV_quelle_1167676776767676asdadadas"
-          lastmessage="I can ask one more question"
-          quantity="0"
-        >
-          <div>01:08:00</div>
-        </md-task-item>
-      </md-coachmark>
-    `;
-  }
-}
-
-export const coachTemplate = html`
-  <div class="row md-margin__bottom"><h3>md-coachmark</h3></div>
-  <coach-template-sandbox></coach-template-sandbox>
-`;

package/src/[sandbox]/examples/code-editor.ts

@@ -1,13 +0,0 @@
-import "@/components/code-editor/CodeEditor";
-import { html } from "lit-element";
-
-export const codeEditorTemplate = html`
-  <h3>Code Editor</h3>
-  <md-code-editor>
-    <span slot="method">post</span>
-    <span slot="code-url">v1/contactCenter/agents/statistics</span>
-    <code class="javascript" slot="code-block">
-      module.exports = { presets: [["@babel/preset-env", { targets: { node: "current" } }]] };
-    </code>
-  </md-code-editor>
-`;

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

@@ -1,14 +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 "@/internal-components/color-table/ColorTable";
-import { html } from "lit-element";
-
-export const colorTableTemplate = html`
-  <color-table></color-table>
-`;