@momentum-ui/web-components 2.5.7 → 2.6.0

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

@@ -1,194 +0,0 @@
-import "@/components/combobox/ComboBox";
-import "@/components/icon/Icon";
-import { comboBoxObjectOptions, comboBoxOptions } from "@/[sandbox]/sandbox.mock";
-import { html } from "lit-element";
-import { repeat } from "lit-html/directives/repeat";
-
-const dropdownValue: string[] = [];
-const testCustomValue = [
-  { name: "blah", value: "123", __typename: "typename" },
-  { name: "test", value: "456", __typename: "typename" }
-];
-
-const changeHandler = (e: CustomEvent) => {
-  console.log("change-selected: ", e);
-};
-
-export const comboBoxTemplate = html`
-  <h3>Default</h3>
-  <md-combobox
-    style="width: 220px; display: inline-block;"
-    .options=${comboBoxOptions}
-    placeholder="PlaceholderPlaceholderPlaceholderPlaceholderPlaceholder"
-  ></md-combobox>
-  <h3>Default with trim space</h3>
-  <md-combobox
-    .options=${comboBoxOptions}
-    placeholder="Placeholder"
-    .value=${[comboBoxOptions[5]]}
-    search-trim-space
-  ></md-combobox>
-  <h3>Default with Custom Values</h3>
-  <md-combobox
-    .options=${comboBoxOptions}
-    placeholder="Placeholder"
-    .value=${[comboBoxOptions[5]]}
-    allow-custom-value
-  ></md-combobox>
-  <h3>Invalid</h3>
-  <md-combobox
-    .options=${comboBoxOptions}
-    placeholder="Placeholder"
-    .value=${[comboBoxOptions[5]]}
-    invalid
-    invalid-text-i18n="This is error message"
-  ></md-combobox>
-  <h3>Multi Data with Custom Values</h3>
-  <md-combobox
-    .options=${comboBoxOptions}
-    placeholder="Placeholder"
-    .value=${[comboBoxOptions[1]]}
-    allow-custom-value
-    is-multi
-  ></md-combobox>
-  <h3>Disabled State</h3>
-  <md-combobox disabled .options=${comboBoxOptions} placeholder="Placeholder" searchable> </md-combobox>
-  <h3>Object Data</h3>
-  <md-combobox placeholder="Placeholder" .options=${comboBoxObjectOptions} option-id="id" option-value="country">
-  </md-combobox>
-  <h3>Object Data Predefined Value</h3>
-  <md-combobox
-    placeholder="Placeholder"
-    .options=${comboBoxObjectOptions}
-    option-id="id"
-    option-value="country"
-    .value=${[comboBoxObjectOptions[5]]}
-  >
-  </md-combobox>
-  <h3>Object Data Multi</h3>
-  <md-combobox
-    .options=${comboBoxObjectOptions}
-    option-id="id"
-    option-value="country"
-    is-multi
-    placeholder="Placeholder"
-  >
-  </md-combobox>
-  <h3>Object Data Multi Predefined</h3>
-  <md-combobox
-    .options=${comboBoxObjectOptions}
-    .value=${[comboBoxObjectOptions[7], comboBoxObjectOptions[8]]}
-    option-id="id"
-    option-value="country"
-    is-multi
-    placeholder="Placeholder"
-  >
-  </md-combobox>
-  <h3>Slot Content</h3>
-  <md-combobox with-custom-content>
-    <div slot="one" aria-label="Facebook" display-value="Facebook">
-      <span>Facebook</span>
-      <md-icon name="icon-facebook_16"></md-icon>
-    </div>
-    <div slot="two" aria-label="Twitter" display-value="Twitter">
-      <span class="company-value">Twitter</span>
-      <md-icon name="icon-twitter_16"></md-icon>
-    </div>
-    <div slot="three" aria-label="Wikipedia" display-value="Wikipedia">
-      <span class="company-value">Wikipedia</span>
-      <md-icon name="icon-wikipedia_16"></md-icon>
-    </div>
-    <div slot="four" aria-label="Google" display-value="Google">
-      <span class="company-value">Google</span>
-      <md-icon name="icon-google_16"></md-icon>
-    </div>
-  </md-combobox>
-  <h3>Slot Content Multi</h3>
-  <md-combobox with-custom-content is-multi .value=${[{ id: "Wikipedia", value: "Wikipedia" }]}>
-    <div slot="one" aria-label="Facebook" display-value="Facebook">
-      <span>Facebook</span>
-      <md-icon name="icon-facebook_16"></md-icon>
-    </div>
-    <div slot="two" aria-label="Twitter" display-value="Twitter">
-      <span class="company-value">Twitter</span>
-      <md-icon name="icon-twitter_16"></md-icon>
-    </div>
-    <div slot="three" aria-label="Wikipedia" display-value="Wikipedia">
-      <span class="company-value">Wikipedia</span>
-      <md-icon name="icon-wikipedia_16"></md-icon>
-    </div>
-    <div slot="four" aria-label="Google" display-value="Google">
-      <span class="company-value">Google</span>
-      <md-icon name="icon-google_16"></md-icon>
-    </div>
-  </md-combobox>
-  <h3>Slot Complex Object Content Multi</h3>
-  <md-combobox with-custom-content>
-    ${repeat(
-      testCustomValue,
-      item => item.name,
-      (item: { name: string; value: string }, index) => html`
-        <div slot=${index} display-value=${item.name} aria-label="+${item.value}${item.name}">
-          <span>${item.name}</span>
-          <span>${item.value}</span>
-        </div>
-      `
-    )}
-  </md-combobox>
-  <h3>Slot Complex Custom Object Content</h3>
-  <md-combobox .custom-options=${JSON.stringify(dropdownValue)} with-custom-content>
-    {dropdownValue.map((item, index) => dropdownOptionTemplate(item, index))}
-  </md-combobox>
-  <h3>Without Clear Icon</h3>
-  <md-combobox .options=${comboBoxOptions} placeholder="Placeholder" no-clear-icon></md-combobox>
-
-  <h3>With multi count and select all</h3>
-  <md-combobox
-    .options=${comboBoxOptions}
-    shape=${"pill"}
-    is-multi
-    show-selected-count
-    no-clear-icon
-    allow-select-all
-    placeholder="Select Queue"
-    @change-selected=${changeHandler}
-    select-all-i18n=${"All"}
-  ></md-combobox>
-
-  <h3>With multi count and select all for Object Data</h3>
-  <md-combobox
-    .options=${comboBoxObjectOptions}
-    shape=${"pill"}
-    option-id="id"
-    is-multi
-    option-value="country"
-    show-selected-count
-    allow-select-all
-    placeholder="Select Queue"
-    @change-selected=${changeHandler}
-  >
-  </md-combobox>
-
-  <h3>Custom error</h3>
-  <md-combobox
-    .options=${comboBoxObjectOptions}
-    option-id="id"
-    option-value="country"
-    placeholder="Select Queue"
-    @change-selected=${changeHandler}
-    show-custom-error
-    shape=${"pill"}
-  >
-    <div
-      slot="custom-error"
-      aria-label="Wikipedia"
-      display-value="Wikipedia"
-      @click=${() => {
-        console.log("clicked!");
-      }}
-    >
-      <span class="company-value">Wikipedia</span>
-      <md-icon name="icon-wikipedia_16"></md-icon>
-    </div>
-  </md-combobox>
-`;

package/src/[sandbox]/examples/date-range-picker.ts

@@ -1,30 +0,0 @@
-import "@/components/datepicker/DatePicker";
-import "@/components/datepicker/datepicker-calendar/DatePickerCalendar";
-import "@/components/datepicker/datepicker-day/DatePickerDay";
-import "@/components/datepicker/datepicker-month/DatePickerMonth";
-import "@/components/datepicker/datepicker-week/DatePickerWeek";
-import "@/index";
-import { now } from "@/utils/dateUtils";
-import { html } from "lit-element";
-
-const minDate = now()
-  .minus({ day: 5 })
-  .toISODate();
-
-const maxDate = now()
-  .plus({ day: 5 })
-  .toISODate();
-
-export const dateRangePickerTemplate = html`
-  <h2 class="sandbox-header">md-datepicker</h2>
-  <h3>datepicker with different locale</h3>
-  <md-date-range-picker locale="ru"></md-date-range-picker>
-  <h3>datepicker with min / max filters</h3>
-  <md-date-range-picker minDate=${minDate} maxDate=${maxDate}></md-date-range-picker>
-  <h3>datepicker with Monday start week start</h3>
-  <md-date-range-picker weekStart="Monday"></md-date-range-picker>
-  <h3>datepicker with initial value</h3>
-  <md-date-range-picker weekStart="Monday" value="2021-01-31"></md-date-range-picker>
-  <h3>disabled datepicker</h3>
-  <md-date-range-picker weekStart="Monday" value="2021-01-31" disabled></md-date-range-picker>
-`;

package/src/[sandbox]/examples/date-time-picker.ts

@@ -1,30 +0,0 @@
-import "@/components/date-time-picker/DateTimePicker";
-import { now } from "@/utils/dateUtils";
-import { html } from "lit-element";
-
-const minDate = now()
-  .minus({ day: 5 })
-  .toISODate();
-
-const maxDate = now()
-  .plus({ day: 5 })
-  .toISODate();
-
-export const dateTimePickerTemplate = html`
-  <h2 class="sandbox-header">md-date-time-picker</h2>
-  <h3>date-time-picker</h3>
-  <md-date-time-picker></md-date-time-picker>
-  <h3>date-time-picker with ru locale</h3>
-  <md-date-time-picker locale="ru"></md-date-time-picker>
-  <h3>date-time-picker with minDate & maxDate</h3>
-  <md-date-time-picker minDate=${minDate} maxDate=${maxDate}></md-date-time-picker>
-  <h3>date-time-picker with dateValue & timeValue</h3>
-  <md-date-time-picker date-value="2021-01-31" time-value="08:20:00-08:00"></md-date-time-picker>
-  <h3>date-time-picker with value</h3>
-  <md-date-time-picker
-    value="2021-02-14T12:00:00-08:00"
-    @date-time-change=${() => console.log("fart")}
-  ></md-date-time-picker>
-  <h3>disabled date-time-picker</h3>
-  <md-date-time-picker value="2021-02-14T12:00:00-08:00" disabled></md-date-time-picker>
-`;

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

@@ -1,33 +0,0 @@
-import "@/components/datepicker/DatePicker";
-import "@/components/datepicker/datepicker-calendar/DatePickerCalendar";
-import "@/components/datepicker/datepicker-day/DatePickerDay";
-import "@/components/datepicker/datepicker-month/DatePickerMonth";
-import "@/components/datepicker/datepicker-week/DatePickerWeek";
-import { now } from "@/utils/dateUtils";
-import { html } from "lit-element";
-
-const minDate = now()
-  .minus({ day: 5 })
-  .toISODate();
-
-const maxDate = now()
-  .plus({ day: 5 })
-  .toISODate();
-
-export const datePickerTemplate = html`
-  <h2 class="sandbox-header">md-datepicker</h2>
-  <h3>datepicker with custom trigger</h3>
-  <md-datepicker custom-trigger>
-    <md-button slot="date-trigger" variant="primary">Date Trigger</md-button>
-  </md-datepicker>
-  <h3>datepicker with different locale</h3>
-  <md-datepicker locale="ru"></md-datepicker>
-  <h3>datepicker with min / max filters</h3>
-  <md-datepicker minDate=${minDate} maxDate=${maxDate}></md-datepicker>
-  <h3>datepicker with Monday start week start</h3>
-  <md-datepicker weekStart="Monday"></md-datepicker>
-  <h3>datepicker with initial value</h3>
-  <md-datepicker weekStart="Monday" value="2021-01-31"></md-datepicker>
-  <h3>disabled datepicker</h3>
-  <md-datepicker weekStart="Monday" value="2021-01-31" disabled></md-datepicker>
-`;

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

@@ -1,72 +0,0 @@
-import "@/components/draggable/Draggable";
-import "@/components/draggable/DraggableItem";
-import "@/components/checkbox/Checkbox";
-import "@/components/icon/Icon";
-import "@/components/toggle-switch/ToggleSwitch";
-import { css, customElement, html, internalProperty, LitElement } from "lit-element";
-import { DraggableOptions } from "@/[sandbox]/sandbox.mock";
-import { repeat } from "lit-html/directives/repeat";
-
-const draggableItemStyle = css`
-  md-draggable-item {
-    position: relative;
-    display: block;
-    text-align: center;
-  }
-
-  .custom-ghost {
-    background-color: #c8ebfb;
-  }
-
-  .custom-drag {
-    border: 5px dashed #ddc74e;
-    cursor: grabbing;
-  }
-`;
-
-@customElement("default-draggable-sandbox")
-export class DefaultDraggable extends LitElement {
-  @internalProperty() private extended = false;
-
-  static get styles() {
-    return [
-      css`
-        ${draggableItemStyle}
-      `
-    ];
-  }
-
-  handleToggleClick(event: MouseEvent) {
-    event.stopPropagation();
-    this.extended = !this.extended;
-  }
-
-  render() {
-    return html`
-      <md-toggle-switch @click=${this.handleToggleClick}>Extend Draggable</md-toggle-switch>
-      <md-draggable sort drag-class="custom-drag" ghost-class="custom-ghost">
-        ${repeat(
-          DraggableOptions,
-          option => option.id,
-          option => html`
-            <md-draggable-item slot="draggable-item" ?extended=${this.extended}>
-              <div>${option.name.first} ${option.name.last}</div>
-              <div slot="extended">
-                <md-checkbox ?checked=${option.isActive}>Active Status</md-checkbox>
-              </div>
-              <div slot="extended">${option.company}</div>
-              <div slot="extended">
-                <md-icon name="plus-circle_24" size="16"></md-icon>
-                ${option.email}
-              </div>
-            </md-draggable-item>
-          `
-        )}
-      </md-draggable>
-    `;
-  }
-}
-
-export const draggableTemplate = html`
-  <default-draggable-sandbox></default-draggable-sandbox>
-`;

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

@@ -1,161 +0,0 @@
-import { Dropdown } from "@/components/dropdown/Dropdown";
-import { html } from "lit-element";
-
-export const dropdownStringOptions = ["one", "two", "three", "   non-trimmed-with-spaces "];
-
-export const dropdownStringLongOptions = [
-  "01",
-  "02",
-  "03",
-  "04",
-  "05",
-  "06",
-  "07",
-  "08",
-  "09",
-  "10",
-  "11",
-  "12",
-  "13",
-  "14",
-  "15",
-  "16",
-  "17",
-  "18",
-  "19",
-  "20",
-  "21",
-  "22",
-  "23",
-  "24",
-  "25",
-  "26",
-  "27",
-  "28",
-  "29",
-  "30",
-  "31",
-  "32",
-  "33",
-  "34",
-  "35",
-  "36",
-  "37",
-  "38",
-  "39",
-  "40"
-];
-
-export const dropdownObjectKeyValueOptions = [{ one: "One" }, { two: "Two" }, { three: "Three" }];
-
-export const dropdownObjectOptions = [
-  {
-    user_id: "xxx-111",
-    user_name: "jd",
-    full_name: "John Doe"
-  },
-  {
-    user_id: "xxx-222",
-    user_name: "as",
-    full_name: "Adam Smith"
-  },
-  {
-    user_id: "xxx-333",
-    user_name: "ba",
-    full_name: "Boris Anderson"
-  }
-];
-
-export const dropdownObjectLongOptions = [
-  { id: "0", country: "Afghanistan" },
-  { id: "1", country: "Aland Islands" },
-  { id: "2", country: "Albania" },
-  { id: "3", country: "Algeria" },
-  { id: "4", country: "American Samoa" },
-  { id: "5", country: "Andorra" },
-  { id: "6", country: "Angola" },
-  { id: "7", country: "Anguilla" },
-  { id: "8", country: "Antarctica" },
-  { id: "9", country: "Antigua and Barbuda" },
-  { id: "10", country: "Argentina" },
-  { id: "11", country: "Australia" },
-  { id: "12", country: "Austrian Empire" },
-  { id: "13", country: "Austria" },
-  { id: "14", country: "Azerbaijan" },
-  { id: "15", country: "Bahrain" },
-  { id: "16", country: "Bangladesh" },
-  { id: "17", country: "Barbados" },
-  { id: "18", country: "Bavaria" },
-  { id: "19", country: "Belarus" },
-  { id: "20", country: "Belgium" },
-  { id: "21", country: "Belize" },
-  { id: "22", country: "Cabo Verde" },
-  { id: "23", country: "Cambodia" },
-  { id: "24", country: "Cameroon" },
-  { id: "25", country: "Canada" },
-  { id: "26", country: "Cayman Islands" },
-  { id: "27", country: "The Central African Republic" },
-  { id: "28", country: "Chad" }
-];
-
-export const dropdownTemplate = html`
-  <h3>Strings Options</h3>
-  <md-dropdown
-    .options="${dropdownStringOptions}"
-    @dropdown-selected="${(e: CustomEvent<Dropdown.EventDetail["dropdown-selected"]>) => {
-      console.log("[Strings Options] Selected: ", e.detail);
-    }}"
-  ></md-dropdown>
-  <h3>Strings Options (Disabled)</h3>
-  <md-dropdown .options="${dropdownStringOptions}" disabled></md-dropdown>
-  <h3>Strings Options (Allow unselected)</h3>
-  <md-dropdown
-    .options="${dropdownStringOptions}"
-    allow-unselected
-    @dropdown-selected="${(e: CustomEvent<Dropdown.EventDetail["dropdown-selected"]>) => {
-      console.log("[Strings Options (Allow unselected)] Selected: ", e.detail);
-    }}"
-  ></md-dropdown>
-  <h3>Strings Long Options (Preselected)</h3>
-  <md-dropdown
-    .options="${dropdownStringLongOptions}"
-    .defaultOption="${dropdownStringLongOptions[29]}"
-    @dropdown-selected="${(e: CustomEvent<Dropdown.EventDetail["dropdown-selected"]>) => {
-      console.log("[Strings Long Options (Preselected)] Selected: ", e.detail);
-    }}"
-  ></md-dropdown>
-  <h3>Single KeyValue Objects Options</h3>
-  <md-dropdown
-    .options="${dropdownObjectKeyValueOptions}"
-    @dropdown-selected="${(e: CustomEvent<Dropdown.EventDetail["dropdown-selected"]>) => {
-      console.log("[Single KeyValue Objects Options] Selected: ", e.detail);
-    }}"
-  ></md-dropdown>
-  <h3>Multi KeyValue Objects Options</h3>
-  <md-dropdown
-    .options="${dropdownObjectOptions}"
-    option-id="user_id"
-    option-value="full_name"
-    @dropdown-selected="${(e: CustomEvent<Dropdown.EventDetail["dropdown-selected"]>) => {
-      console.log("[Multi KeyValue Objects Options] Selected: ", e.detail);
-    }}"
-  ></md-dropdown>
-  <h3>Multi KeyValue Objects Long Options</h3>
-  <md-dropdown
-    .options="${dropdownObjectLongOptions}"
-    option-id="id"
-    option-value="country"
-    @dropdown-selected="${(e: CustomEvent<Dropdown.EventDetail["dropdown-selected"]>) => {
-      console.log("[Multi KeyValue Objects Long Options] Selected: ", e.detail);
-    }}"
-  ></md-dropdown>
-  <div class="pills-dropdown">
-    <h3>Pill shaped dropdown</h3>
-    <md-dropdown
-      .options="${dropdownStringOptions}"
-      @dropdown-selected="${(e: CustomEvent<Dropdown.EventDetail["dropdown-selected"]>) => {
-        console.log("[Strings Options] Selected: ", e.detail);
-      }}"
-    ></md-dropdown>
-  </div>
-`;

package/src/[sandbox]/examples/editable-field.ts

@@ -1,111 +0,0 @@
-/* eslint-disable prettier/prettier */
-import "@/components/editable-textfield/EditableTextfield";
-import "@/components/button/Button";
-import { Input } from "@/components/input/Input";
-import { ValidationRegex } from "@/utils/validations.ts";
-import { customElement, html, LitElement, property } from "lit-element";
-import { nothing } from "lit-html";
-
-const successMessageArr: Input.Message = {
-  message: "This is where the message would be.",
-  type: "success"
-};
-const errorMessageArr: Input.Message = {
-  message: "This is where the message would be.",
-  type: "error"
-};
-const warningMessageArr: Input.Message = {
-  message: "This is where the message would be.",
-  type: "warning"
-};
-
-@customElement("editable-field-template-sandbox")
-export class EditableFieldTemplateSandbox extends LitElement {
-  @property({ type: Boolean }) isModalOpen = false;
-  @property({ type: Boolean }) isDialogOpen = false;
-  @property({ type: Boolean, reflect: true }) error = false;
-  @property({ type: String }) textChanged = "";
-
-
-  connectedCallback() {
-    super.connectedCallback()
-    this.addEventListener("invalid", this.setErrorMessage)
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback()
-    this.removeEventListener("invalid", this.setErrorMessage)
-  }
-
-  setErrorMessage = () => {
-    console.log("Validation Error Occurred")
-    this.error = true
-  }
-
-  resetErrorMessage = () => {
-    this.error = false
-  }
-
-  renderErrorMessage() {
-    return (this.error ? html`
-      <div style="padding: 1rem; background:red">THERE IS A VALIDATION ERROR ON THIS PAGE!!</div>
-    ` : nothing)
-  }
-
-  render() {
-    return html`
-      <p>Get new text that was changed in editable field - ${this.textChanged}</p>
-      <h3>With composed text</h3>
-      <md-editable-field max-lines="2">
-        Test text in slot
-      </md-editable-field>
-      <h3>Disabled</h3>
-      <md-editable-field content="disabled for editing but readable" disabled></md-editable-field>
-      <h3>With no composed text and default placeholder</h3>
-      <md-editable-field></md-editable-field>
-      <h3>With content passed in attribute</h3>
-      <md-editable-field content="attribute text"></md-editable-field>
-      <hr />
-      <md-editable-field alert .message=${{ ...successMessageArr }}>
-        Success Status
-      </md-editable-field>
-      <hr />
-      <md-editable-field alert .message=${{ ...errorMessageArr }}>
-        Error Status
-      </md-editable-field>
-      <hr />
-      <md-editable-field alert .message=${{ ...warningMessageArr }}>
-        Warning Status
-      </md-editable-field>
-
-      <h3>Errors and Warnings but no message</h3>
-      <md-editable-field content="warning message" hideMessage alert .message=${{ ...warningMessageArr }}>
-        Warning Status
-      </md-editable-field>
-      <md-editable-field content="error message" hideMessage alert .message=${{ ...errorMessageArr }}>
-        Error Status
-      </md-editable-field>
-      <h3>Validation Types</h3>
-      <h4>integer</h4>
-      <md-editable-field type="integer">
-        123
-      </md-editable-field>
-      <h4>decimal</h4>
-      <md-editable-field type="decimal">
-        123.321
-      </md-editable-field>
-      <h4>date pattern set</h4>
-      <md-editable-field pattern=^(0?[1-9]|1[0-2])[/](0?[1-9]|[12]\\d|3[01])[/](19|20)\\d{2}$> 12/12/2020 </md-editable-field>
-        <h4>time pattern w/ hideMessage set</h4>
-        <md-editable-field hideMessage pattern=${ValidationRegex.timeString}>
-          12:30PM
-        </md-editable-field>
-        ${this.renderErrorMessage()}
-        <br>
-        <md-button @click=${this.resetErrorMessage}>Reset Error</md-button>
-    `;
-  }
-}
-
-export const editableField = html`
-  <editable-field-template-sandbox></editable-field-template-sandbox>
-`;

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

@@ -1,49 +0,0 @@
-import "@/components/favorite/Favorite";
-import { customElement, html, LitElement, property } from "lit-element";
-
-@customElement("favorite-template-sandbox")
-export class FavoriteTemplateSandbox extends LitElement {
-  @property({ type: Boolean }) selected = false;
-  @property({ type: String }) value = "";
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener("favorite-toggle", this.countFavorite as EventListener);
-    this.addEventListener("favorite-keydown", this.handleKeydownFavorite as EventListener);
-  }
-
-  private countFavorite(e: CustomEvent) {
-    const { active, value } = e.detail;
-
-    this.selected = active;
-    if (active === true) {
-      this.value = value;
-    } else {
-      this.value = "";
-    }
-  }
-
-  private handleKeydownFavorite(e: KeyboardEvent) {
-    const { active, value } = e.detail as any;
-
-    this.selected = active;
-    if (active === true) {
-      this.value = "Keyboard event: " + value;
-    } else {
-      this.value = "";
-    }
-  }
-
-  render() {
-    return html`
-      <md-favorite></md-favorite>
-      <p>Select: ${this.selected}</p>
-      <p>Value: ${this.value}</p>
-    `;
-  }
-}
-
-export const favoriteTemplate = html`
-  <h3 class="sandbox-header">Default Favorite</h3>
-  <favorite-template-sandbox></favorite-template-sandbox>
-`;