@momentum-ui/web-components 2.14.13 → 2.14.14

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

@@ -1,451 +0,0 @@
-import { comboBoxOptions } from "@/[sandbox]/sandbox.mock";
-import "@/components/button/Button";
-import "@/components/checkbox/Checkbox";
-import "@/components/combobox/ComboBox";
-import "@/components/form/Form";
-import "@/components/input/Input";
-import { Input } from "@/components/input/Input";
-import "@/components/list/List";
-import "@/components/list/ListItem";
-import "@/components/modal/Modal";
-import "@/components/phone-input/PhoneInput";
-import "@/components/radio/Radio";
-import "@/components/radio/RadioGroup";
-import "@/components/tabs/Tab";
-import "@/components/tabs/TabPanel";
-import "@/components/tabs/Tabs";
-import "@/components/tooltip/Tooltip";
-import { debounce } from "@/utils/helpers";
-import { customElement, html, LitElement, property, query } from "lit-element";
-import { dropdownObjectLongOptions } from "./dropdown";
-
-@customElement("modal-template-sandbox")
-export class ModalTemplateSandbox extends LitElement {
-  @property({ type: Boolean }) isModalOpen = false;
-  @property({ type: Boolean }) isComplexModalOpen = false;
-  @property({ type: Boolean }) isDialogOpen = false;
-  @property({ type: Boolean }) isComplexTabsModal = false;
-  @property({ type: Boolean }) isStationLoginModal = false;
-  @property({ type: Boolean }) otherInput = false;
-  @property({ type: Boolean }) isExtensionTooltipOpened = false;
-
-  @query(".dial-number") dialInput!: Input.ELEMENT;
-  @query(".international-checkbox-wrapper") checkboxWrapper!: Element;
-  @query(".queueDropdown") menuOverlay!: Element;
-
-  connectedCallback() {
-    super.connectedCallback();
-  }
-
-  private openModal() {
-    this.isModalOpen = true;
-  }
-
-  private openComplexModal() {
-    this.isComplexModalOpen = true;
-  }
-
-  private closeComplexModal() {
-    this.isComplexModalOpen = false;
-  }
-
-  private closeModal() {
-    this.isModalOpen = false;
-  }
-
-  private openDialog() {
-    this.isDialogOpen = true;
-  }
-
-  private closeDialog() {
-    this.isDialogOpen = false;
-  }
-
-  private openComplexTabsModal() {
-    this.isComplexTabsModal = true;
-  }
-
-  private closeComplexTabsModal() {
-    this.isComplexTabsModal = false;
-  }
-
-  private openStationLogin() {
-    this.isStationLoginModal = true;
-  }
-
-  private closeStationLogin() {
-    this.isStationLoginModal = false;
-  }
-  private handleFormatChange() {
-    this.otherInput = !this.otherInput;
-    document.dispatchEvent(new CustomEvent("on-widget-update"));
-  }
-
-  private handleInputChange = debounce(() => {
-    if (this.dialInput) {
-      const shadowInput = this.dialInput.shadowRoot!.querySelector("input");
-      shadowInput!.dispatchEvent(
-        new CustomEvent("focus-visible", {
-          composed: true,
-          bubbles: true
-        })
-      );
-    }
-  }, 150);
-
-  render() {
-    return html`
-      <md-button @click=${this.openStationLogin}>Open Station Login Modal</md-button>
-      <md-button @click=${this.openModal}>Open Modal</md-button>
-      <md-button @click=${this.openDialog}>Open Dialog</md-button>
-      <md-button @click=${this.openComplexModal}>Open Complex Modal</md-button>
-      <md-button @click=${this.openComplexTabsModal}>Open Complex Tabs Modal</md-button>
-
-      <md-modal ?show=${this.isStationLoginModal} closeBtnName="Submit This" @close-modal="${this.closeStationLogin}">
-        <md-form class="form-class" id="international-form">
-          <div class="international-checkbox-wrapper">
-            <md-checkbox slot="checkbox" .checked="${true}" @checkbox-change="${() => {
-              this.handleFormatChange();
-            }}"
-              >International dialing format</md-checkbox
-            >
-          <md-tooltip
-            ?opened=${this.isExtensionTooltipOpened}
-            message="tooltip opened"
-            placement="top"
-          >
-            <md-button
-              circle
-              variant="white"
-              class="info-icon"
-              size="20"
-              @focus=${() => (this.isExtensionTooltipOpened = true)}
-              @blur=${() => (this.isExtensionTooltipOpened = false)}
-            >
-              <md-icon name="info_16"></md-icon>
-            </md-button>
-          </md-tooltip>
-          </div>
-          ${
-            this.otherInput
-              ? html`
-                  <md-input
-                    type="tel"
-                    id="international"
-                    name="international-value"
-                    pill
-                    value="88997755664"
-                    countryCallingCode="+91"
-                    numberPlaceholder="station Login"
-                    .autofocus="${true}"
-                    @phoneinput-keydown="${(e: CustomEvent) => {
-                      e.stopImmediatePropagation();
-                    }}"
-                    @phoneinput-change="${(e: CustomEvent) => {
-                      e.stopImmediatePropagation();
-                    }}"
-                    @phoneinput-blur="${(e: CustomEvent) => {
-                      e.stopImmediatePropagation();
-                    }}"
-                  ></md-input>
-                `
-              : html`
-                  <md-phone-input
-                    type="tel"
-                    id="national"
-                    name="national-value"
-                    pill
-                    value="222"
-                    countryCallingCode="+91"
-                    numberPlaceholder="station Login"
-                    .autofocus="${true}"
-                    @phoneinput-keydown="${(e: CustomEvent) => {
-                      e.stopImmediatePropagation();
-                    }}"
-                    @phoneinput-change="${(e: CustomEvent) => {
-                      e.stopImmediatePropagation();
-                    }}"
-                    @phoneinput-blur="${(e: CustomEvent) => {
-                      e.stopImmediatePropagation();
-                    }}"
-                  ></md-phone-input>
-                `
-          }
-        </md-form>
-      </md-modal>
-
-      <md-modal
-        htmlId="modal-1"
-        ?show=${this.isModalOpen}
-        headerLabel="Test Header Text"
-        headerMessage="Test Message Text In Header"
-        size="small"
-        hideFooter
-        hideHeader
-        backdropClickExit
-        showCloseButton
-        noExitOnEsc
-        @close-modal="${this.closeModal}"
-      >
-        <div slot="header">
-          <span>Test Slot Header</span>
-        </div>
-
-        <p>
-          Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin
-          literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
-          College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage,
-          and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem
-          Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and
-          Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the
-          Renaissance.
-        </p>
-        <md-combobox
-          disabled
-          .options=${comboBoxOptions}
-          placeholder="Placeholder"
-          .value=${[comboBoxOptions[5]]}
-        ></md-combobox>
-        <p>
-          The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The
-          standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32
-          and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form,
-          accompanied by English versions from the 1914 translation by H. Rackham.
-        </p>
-        <md-combobox .options=${comboBoxOptions} placeholder="Placeholder" .value=${[comboBoxOptions[5]]}></md-combobox>
-        <p>
-          The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The
-          standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32
-          and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form,
-          accompanied by English versions from the 1914 translation by H. Rackham.
-        </p>
-        <p>
-          Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin
-          literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
-          College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage,
-          and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem
-          Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and
-          Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the
-          Renaissance.
-        </p>
-        <md-dropdown
-          .options="${dropdownObjectLongOptions}"
-          option-id="id"
-          option-value="country"
-        ></md-dropdown>
-
-        <md-button slot="footer" type="reset">Reset</md-button>
-        <md-button slot="footer" @click="${this.closeModal}" type="submit">Submit</md-button>
-      </md-modal>
-
-      <md-modal
-        htmlId="modal-2"
-        ?show=${this.isDialogOpen}
-        headerLabel="Test Dialog Header"
-        size="dialog"
-        closeBtnName="Ok"
-        showCloseButton
-        @close-modal="${this.closeDialog}"
-      >
-        <input type="text" placeholder="Type Text" />
-        <p>
-          Curabitur nec leo sit amet sapien eleifend accumsan at eu magna. Suspendisse potenti. Aenean lobortis aliquet
-          dui, id suscipit quam consectetur quis.
-        </p>
-      </md-modal>
-
-      <md-modal ?show=${this.isComplexModalOpen} closeBtnName="Submit This" @close-modal="${this.closeComplexModal}">
-        <md-tabs>
-          <md-tab slot="tab">
-            <span>Contact History</span>
-            <md-icon name="recents-bold" size="16" iconSet="momentumDesign"></md-icon>
-          </md-tab>
-          <md-tab-panel slot="panel">
-            <span>Content for "Contact History"</span>
-            <md-radiogroup checked="0">
-              <md-radio slot="radio" value="Option 1">Option 1</md-radio>
-              <md-radio slot="radio" value="Option 2">Option 2</md-radio>
-              <md-radio slot="radio" value="Option 3">Option 3</md-radio>
-              <md-radio slot="radio" value="Option 4">Option 4</md-radio>
-            </md-radiogroup>
-            <button type="button">Contact History</button>
-          </md-tab-panel>
-          <md-tab slot="tab">
-            <span>Cisco WxM</span>
-            <md-icon name="apps_16"></md-icon>
-          </md-tab>
-          <md-tab-panel slot="panel">
-            <span>Content for "WxM"</span>
-            <button type="button">Cisco WxM</button>
-          </md-tab-panel>
-        </md-tabs>
-      </md-modal>
-
-      <md-modal
-        ?show=${this.isComplexTabsModal}
-        size="small"
-        hideFooter
-        hideHeader
-        @close-modal="${this.closeComplexTabsModal}"
-      >
-        <div slot="header">
-          <h3 class="sl-form-label">Station Login</h3>
-        </div>
-        <md-form @form-submitted=${() => console.info("Form Submitted!!!")} is-valid>
-          <md-tabs justified>
-            <md-tab slot="tab" label="Dial Number">
-              <span>Dial Number</span>
-            </md-tab>
-            <md-tab-panel slot="panel">
-              <div class="phone-fromat">
-                <md-radiogroup group-label="phone-fromat" alignment="horizontal" checked="0">
-                  <md-radio slot="radio" value="US" aria-label="US Format">US Format</md-radio>
-                  <md-radio slot="radio" value="Other" ariaLabel="Other">Other</md-radio>
-                </md-radiogroup>
-              </div>
-
-              <md-input
-                type="tel"
-                id="dn"
-                class="dial-number"
-                placeholder="Dial Number"
-                shape="pill"
-                autofocus
-                clear
-                @input-change=${this.handleInputChange}
-              ></md-input>
-            </md-tab-panel>
-            <md-tab slot="tab" label="Extension">
-              <span>Extension</span>
-            </md-tab>
-            <md-tab-panel slot="panel">
-              <div class="extension-format">
-                <md-input aria-label="Team X" type="tel" id="ext" placeholder="Team X" shape="pill"></md-input>
-              </div>
-              <md-combobox placeholder="Choose Team" .options=${comboBoxOptions}></md-combobox>
-            </md-tab-panel>
-          </md-tabs>
-        </md-form>
-        <div class="sl-footer" slot="footer">
-          <md-button class="footer-btn" aria-label="Cancel" @click="${this.closeComplexTabsModal}">
-            Cancel
-          </md-button>
-          <md-button
-            class="footer-btn"
-            variant="primary"
-            aria-label="Submit"
-            type="submit"
-            @click="${this.closeComplexTabsModal}"
-          >
-            Submit
-          </md-button>
-        </div>
-      </md-modal>
-      <md-menu-overlay class="queueDropdown" size="large">
-        <md-input
-          placeholder="Search field with tabs"
-          shape="pill"
-          slot="menu-trigger"
-          variant="primary"
-          clear
-          autoFocus></md-input>
-        <div style="padding:1.25rem; width: 100%;">
-        <md-tabs justified selected="0" ref={tabElm}>
-        <md-tab slot="tab" aria-label={transferModal.entryPointSectionLabel} label="entry-point">
-          <span>Entry Point</span>
-        </md-tab>
-        <md-tab-panel slot="panel">
-        <md-list role="listbox">
-            <md-list-item
-              slot="list-item"
-              type="auto"
-              aria-label="item-1">
-              <div
-                aria-label="item-1-div"
-                display-value="12345678"
-                style="display: flex; alignItems: center;">
-                <div style={{ paddingLeft: '12px' }}>
-                  <div className="address-dn"></div>
-                  <p>
-                    Item-1
-                  </p>
-                  <p>
-                    Item-1-sub
-                  </p>
-                </div>
-              </div>
-            </md-list-item>
-            <md-list-item
-              slot="list-item"
-              type="auto"
-              aria-label="item-2">
-              <div
-                aria-label="item-2-div"
-                display-value="12345678"
-                style="display: flex, alignItems: center">
-                <div style={{ paddingLeft: '12px' }}>
-                  <div className="address-dn"></div>
-                  <p>
-                    Item-2
-                  </p>
-                  <p>
-                    Item-2-sub
-                  </p>
-                </div>
-              </div>
-            </md-list-item>
-      </md-list>
-        </md-tab-panel>
-        <md-tab slot="tab" aria-label={transferModal.addressBookSectionLabel} label="address-book">
-          <span>Address Book</span>
-        </md-tab>
-        <md-tab-panel slot="panel" class="address-panel">
-        <md-list role="listbox">
-            <md-list-item
-              slot="list-item"
-              type="auto"
-              aria-label="item-1">
-              <div
-                aria-label="item-1-div"
-                display-value="12345678"
-                style="display: flex, alignItems: center">
-                <div style={{ paddingLeft: '12px' }}>
-                  <div className="address-dn"></div>
-                  <p>
-                    Item-1
-                  </p>
-                  <p>
-                    Item-1-sub
-                  </p>
-                </div>
-              </div>
-            </md-list-item>
-            <md-list-item
-              slot="list-item"
-              type="auto"
-              aria-label="item-2">
-              <div
-                aria-label="item-2-div"
-                display-value="12345678"
-                style="display: flex, alignItems: center">
-                <div style={{ paddingLeft: '12px' }}>
-                  <div className="address-dn"></div>
-                  <p>
-                    Item-2
-                  </p>
-                  <p>
-                    Item-2-sub
-                  </p>
-                </div>
-              </div>
-            </md-list-item>
-      </md-list>
-        </md-tab-panel>
-      </md-tabs>
-        </div>
-      </md-menu-overlay>
-    `;
-  }
-}
-
-export const modalTemplate = html` <modal-template-sandbox></modal-template-sandbox> `;

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

@@ -1,13 +0,0 @@
-import "@/components/pagination/Pagination";
-import { html } from "lit-element";
-
-export const paginationTemplate = html`
-  <h3>Default Pagination</h3>
-  <md-pagination total-page="20" current-page="10" visible-page="3"></md-pagination>
-  <h3>Dots Pagination</h3>
-  <md-pagination total-page="20" current-page="10" visible-page="3" dots></md-pagination>
-  <h3>Without Arrows Pagination</h3>
-  <md-pagination total-page="20" current-page="10" no-navigation></md-pagination>
-  <h3>Only Dots Pagination</h3>
-  <md-pagination total-page="20" current-page="10" only-dots></md-pagination>
-`;

package/src/[sandbox]/examples/phone-input.ts

@@ -1,90 +0,0 @@
-import "@/components/phone-input/PhoneInput";
-import { html } from "lit-element";
-
-export const phoneInputTemplate = html`
-  <div>
-    <div class="row">
-      <md-phone-input
-        show-flags
-        errorMessage="This phone number is invalid"
-        .value=${"9997770100"}
-        @phoneinput-keydown="${(e: CustomEvent) => console.log("keydown: ", e.detail.value)}"
-        @phoneinput-blur="${(e: CustomEvent) => console.log("blur: ", e.detail.value, " is valid: ", e.detail.isValid)}"
-        @phoneinput-change="${(e: CustomEvent) =>
-          console.log("change: ", e.detail.value, " is valid: ", e.detail.isValid)}"
-      ></md-phone-input>
-    </div>
-    <div class="row">
-      <md-form>
-        <md-phone-input
-          showErrorMessage
-          errorMessage="This phone number is invalid"
-          .value=${"9997770100"}
-          @phoneinput-keydown="${(e: CustomEvent) => console.log("keydown: ", e.detail.value)}"
-          @phoneinput-blur="${(e: CustomEvent) =>
-            console.log("blur: ", e.detail.value, " is valid: ", e.detail.isValid)}"
-          @phoneinput-change="${(e: CustomEvent) =>
-            console.log("change: ", e.detail.value, " is valid: ", e.detail.isValid)}"
-        ></md-phone-input>
-      </md-form>
-    </div>
-    <div class="row">
-      <md-phone-input
-        disabled
-        errorMessage="This phone number is invalid"
-        @phoneinput-keydown="${(e: CustomEvent) => console.log("keydown: ", e.detail.value)}"
-        @phoneinput-blur="${(e: CustomEvent) => console.log("blur: ", e.detail.value, " is valid: ", e.detail.isValid)}"
-        @phoneinput-change="${(e: CustomEvent) =>
-          console.log("change: ", e.detail.value, " is valid: ", e.detail.isValid)}"
-      ></md-phone-input>
-    </div>
-    <div class="row">
-      <md-phone-input
-        pill
-        errorMessage="This phone number is invalid"
-        codePlaceholder="+7"
-        numberPlaceholder="5555555555"
-        @phoneinput-keydown="${(e: CustomEvent) => console.log("keydown: ", e.detail.value)}"
-        @phoneinput-blur="${(e: CustomEvent) => console.log("blur: ", e.detail.value, " is valid: ", e.detail.isValid)}"
-        @phoneinput-change="${(e: CustomEvent) =>
-          console.log("change: ", e.detail.value, " is valid: ", e.detail.isValid)}"
-      ></md-phone-input>
-    </div>
-    <div>
-      <h4>Example with Initial Value</h4>
-      <div class="row">
-        <md-form>
-          <md-phone-input
-            .countryCallingCode=${"+91, India, IN"}
-            .errorMessage=${"This phone number is invalid"}
-            .value=${"9997770100"}
-            .countryCodeAriaLabel=${"International Dialing Code"}
-            .dialNumberAriaLabel=${"Dial Number"}
-            .numberPlaceholder=${"Enter The Phone Number"}
-            @phoneinput-keydown="${(e: CustomEvent) => console.log("keydown: ", e.detail.value)}"
-            @phoneinput-blur="${(e: CustomEvent) =>
-              console.log("blur: ", e.detail.value, " is valid: ", e.detail.isValid)}"
-            @phoneinput-change="${(e: CustomEvent) =>
-              console.log("change: ", e.detail.value, " is valid: ", e.detail.isValid)}"
-          ></md-phone-input>
-        </md-form>
-      </div>
-    </div>
-    <div>
-      <h4>Example for Strip the country code is already present at the beginning of the phone number on blur.</h4>
-      <div class="row">
-        <md-form>
-          <md-phone-input
-            .countryCallingCode=${"+91, India, IN"}
-            .errorMessage=${"This phone number is invalid"}
-            .value=${"+919997770101"}
-            .countryCodeAriaLabel=${"International Dialing Code"}
-            .dialNumberAriaLabel=${"Dial Number"}
-            .numberPlaceholder=${"Enter The Phone Number"}
-            @phoneinput-blur="${(e: CustomEvent) => console.log("blur: ", e.detail)}"
-          ></md-phone-input>
-        </md-form>
-      </div>
-    </div>
-  </div>
-`;

package/src/[sandbox]/examples/progress-bar.ts

@@ -1,6 +0,0 @@
-import "@/components/progress-bar/ProgressBar";
-import { html } from "lit-element";
-
-export const progressBarTemplate = html`
-  <md-progress-bar label="test list" displayFormat="fraction" value="40" dynamic></md-progress-bar>
-`;

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

@@ -1,52 +0,0 @@
-import "@/components/radio/Radio";
-import "@/components/radio/RadioGroup";
-import { html } from "lit-element";
-
-export const radioGroupTemplate = html`
-  <h3>Default</h3>
-  <md-radiogroup group-label="group_process">
-    <md-radio slot="radio" value="Option 1">Option 1</md-radio>
-    <md-radio slot="radio" value="Option 2">Option 2</md-radio>
-    <md-radio slot="radio" value="Option 3">Option 3</md-radio>
-    <md-radio slot="radio" value="Option 4">Option 4</md-radio>
-  </md-radiogroup>
-  <h3>Horizontal</h3>
-  <md-radiogroup group-label="group_process" alignment="horizontal">
-    <md-radio slot="radio" value="developing">
-      <span>Long Radio description overflowing text with three dots in the end</span>
-    </md-radio>
-    <md-radio slot="radio" value="Option 1">Option 1</md-radio>
-    <md-radio slot="radio" value="Option 2">Option 2</md-radio>
-    <md-radio slot="radio" value="Option 3">Option 3</md-radio>
-    <md-radio slot="radio" value="developing 2" style="max-width:64px;">
-      <span>Long Radio description overflowing text with three dots in the end</span>
-    </md-radio>
-  </md-radiogroup>
-  <h3>Pre-Checked Radio</h3>
-  <md-radiogroup group-label="group_process" checked="1">
-    <md-radio slot="radio" value="Option 1">Option 1</md-radio>
-    <md-radio slot="radio" value="Option 2">Option 2 [Preselected]</md-radio>
-    <md-radio slot="radio" value="Option 3">Option 3</md-radio>
-    <md-radio slot="radio" value="Option 4">Option 4</md-radio>
-  </md-radiogroup>
-  <h3>Disabled</h3>
-  <md-radiogroup group-label="group_process" checked="2">
-    <md-radio slot="radio" value="Option">Option</md-radio>
-    <md-radio slot="radio" value="Disabled" disabled>Disabled</md-radio>
-    <md-radio slot="radio" value="Option 2 ">Option 2 [Preselected]</md-radio>
-    <md-radio slot="radio" value="Disabled 2" disabled>Disabled 2</md-radio>
-  </md-radiogroup>
-  <h3>Radio buttons with icons</h3>
-  <md-radiogroup group-label="group_process">
-    <md-radio slot="radio" value="Option 1">
-      Option 1
-      <md-icon name="info-badge-filled" size="16" iconSet="momentumDesign"></md-icon>
-    </md-radio>
-    <md-radio slot="radio" value="Option 2">
-      Option 2
-      <md-tooltip message="Tooltip message" placement="top">
-        <md-icon name="info-badge-filled" size="16" iconSet="momentumDesign"></md-icon>
-      </md-tooltip>
-    </md-radio>
-  </md-radiogroup>
-`;

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

@@ -1,17 +0,0 @@
-import "@/components/slider/Slider";
-import { html } from "lit-element";
-
-export const sliderTemplate = html`
-  <div class="container">
-    <h3>Slider: now set at 20</h3>
-    <md-slider now="20"></md-slider>
-    <h3>Slider: step set at 10</h3>
-    <md-slider step="10"></md-slider>
-    <h3>Slider: now set at 44 & no-pointer</h3>
-    <md-slider now="44" no-pointer></md-slider>
-    <h3>Slider: disabled</h3>
-    <md-slider disabled></md-slider>
-    <h3>Slider: hide-value</h3>
-    <md-slider hide-value></md-slider>
-  </div>
-`;

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

@@ -1,4 +0,0 @@
-import "@/components/spinner/Spinner";
-import { html } from "lit-element";
-
-export const spinnerTemplate = html` <md-spinner size="33"></md-spinner> `;