@momentum-ui/web-components 2.5.4 → 2.5.7

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

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

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

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

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

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

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

@@ -0,0 +1,111 @@
+/* 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

@@ -0,0 +1,49 @@
+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>
+`;