How to use @material/mwc-base - 10 common examples

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import {ComponentElement, html, MDCWebComponentMixin} from '@material/mwc-base/component-element.js';
import {MDCMenu, Corner} from '@material/menu';
import {style} from './mwc-menu-css.js';

// this element depend on the `mwc-list-item` and `mwc-list-item-separator`
// elements to be registered ahead of time
import '@material/mwc-list/mwc-list-item.js';
import '@material/mwc-list/mwc-list-item-separator.js';

export class MDCWCMenu extends MDCWebComponentMixin(MDCMenu) {
  get items() {
    return this.host.items;
  }

  get listItems() {
    return this.items.map((e) => e.listItem);
  }

  get anchor() {
    const parent = this.host.parentNode;
    if (parent.matches('mdc-menu-anchor')) {
      return parent;
    }
  }

  createAdapter() {

You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import {ComponentElement, MDCWebComponentMixin, html} from '@material/mwc-base/component-element.js';
import {classString as c$} from '@polymer/lit-element/lit-element.js';
import {style} from './mwc-chip-set-css.js';
import {MDCChipSet} from '@material/chips';

export class MDCWCChipSet extends MDCWebComponentMixin(MDCChipSet) {
  get chips() {
    return Array.from(this.host.chips).map((e) => e._component);
  }

  // override
  set chips(value) {}
}

export class ChipSet extends ComponentElement {
  static get ComponentClass() {
    return MDCWCChipSet;
  }

  static get componentSelector() {
    return '.mdc-chip-set';
  }

protected createAdapter(): MDCSnackbarAdapter {
    return {
      ...addHasRemoveClass(this.mdcRoot),
      // We handle announce ourselves with the accessible directive.
      announce: () => {},
      notifyClosed: (reason: string) => {
        this.dispatchEvent(new CustomEvent(
            CLOSED_EVENT,
            {bubbles: true, cancelable: true, detail: {reason: reason}}));
      },
      notifyClosing: (reason: string) => {
        this.isOpen = false;
        this.dispatchEvent(new CustomEvent(
            CLOSING_EVENT,
            {bubbles: true, cancelable: true, detail: {reason: reason}}));
      },
      notifyOpened: () => {
        this.dispatchEvent(
            new CustomEvent(OPENED_EVENT, {bubbles: true, cancelable: true}));

protected createAdapter(): MDCDrawerAdapter {
    return {
      ...addHasRemoveClass(this.mdcRoot),
      elementHasClass: (element: HTMLElement, className: string) =>
          element.classList.contains(className),
      saveFocus: () => {
        // Note, casting to avoid cumbersome runtime check.
        this._previousFocus =
            (this.getRootNode() as ShadowRoot).activeElement as HTMLElement;
      },
      restoreFocus: () => {
        const previousFocus = this._previousFocus && this._previousFocus.focus;
        if (previousFocus) {
          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          this._previousFocus!.focus();
        }
      },
      notifyClose: () => {
        this.open = false;

protected createAdapter(): MDCLinearProgressAdapter {
    return {
      ...addHasRemoveClass(this.mdcRoot),
      forceLayout: () => this.mdcRoot.offsetWidth,
      getPrimaryBar: () => this.primaryBar,
      getBuffer: () => this.bufferElement,
      setStyle: (el: HTMLElement, property: string, value: string) => {
        // TODO(aomarks) Consider moving this type to the
        // MDCLinearProgressAdapter parameter type, but note that the "-webkit"
        // prefixed CSS properties are not declared in CSSStyleDeclaration.
        //
        // Exclude read-only properties.
        el.style[property as Exclude] =
            value;
      },
    };
  }

import {MDCTabInteractionEvent} from '@material/tab/types';

export class TabBarBase extends BaseElement {
  protected mdcFoundation!: MDCTabBarFoundation;

  protected readonly mdcFoundationClass = MDCTabBarFoundation;

  @query('.mdc-tab-bar') protected mdcRoot!: HTMLElement;

  @query('mwc-tab-scroller') protected scrollerElement!: TabScroller;

  // tabsSlot should have type HTMLSlotElement, but when TypeScript's
  // emitDecoratorMetadata is enabled, the HTMLSlotElement constructor will
  // be emitted into the runtime, which will cause an "HTMLSlotElement is
  // undefined" error in browsers that don't define it (e.g. Edge and IE11).
  @query('slot') protected tabsSlot!: HTMLElement;

  @observer(async function(this: TabBarBase, value: number) {
    await this.updateComplete;
    // only provoke the foundation if we are out of sync with it, i.e.
    // ignore an foundation generated set.
    if (value !== this._previousActiveIndex) {
      this.mdcFoundation.activateTab(value);
    }
  })
  @property({type: Number})
  activeIndex = 0;

  private _previousActiveIndex = -1;

  private _handleTabInteraction(e: MDCTabInteractionEvent) {
    this.mdcFoundation.handleTabInteraction(e);

import '@material/mwc-tab';
import '@material/mwc-tab-scroller';

import {BaseElement, html, observer, property, query} from '@material/mwc-base/base-element.js';
import {Tab} from '@material/mwc-tab';
import {TabScroller} from '@material/mwc-tab-scroller';
import {MDCTabBarAdapter} from '@material/tab-bar/adapter';
import MDCTabBarFoundation from '@material/tab-bar/foundation';
import {MDCTabInteractionEvent} from '@material/tab/types';

export class TabBarBase extends BaseElement {
  protected mdcFoundation!: MDCTabBarFoundation;

  protected readonly mdcFoundationClass = MDCTabBarFoundation;

  @query('.mdc-tab-bar') protected mdcRoot!: HTMLElement;

  @query('mwc-tab-scroller') protected scrollerElement!: TabScroller;

  // tabsSlot should have type HTMLSlotElement, but when TypeScript's
  // emitDecoratorMetadata is enabled, the HTMLSlotElement constructor will
  // be emitted into the runtime, which will cause an "HTMLSlotElement is
  // undefined" error in browsers that don't define it (e.g. Edge and IE11).
  @query('slot') protected tabsSlot!: HTMLElement;

  @observer(async function(this: TabBarBase, value: number) {
    await this.updateComplete;
    // only provoke the foundation if we are out of sync with it, i.e.
    // ignore an foundation generated set.
    if (value !== this._previousActiveIndex) {
      this.mdcFoundation.activateTab(value);
    }

import {BaseElement, html, observer, property, query} from '@material/mwc-base/base-element.js';
import {Tab} from '@material/mwc-tab';
import {TabScroller} from '@material/mwc-tab-scroller';
import {MDCTabBarAdapter} from '@material/tab-bar/adapter';
import MDCTabBarFoundation from '@material/tab-bar/foundation';
import {MDCTabInteractionEvent} from '@material/tab/types';

export class TabBarBase extends BaseElement {
  protected mdcFoundation!: MDCTabBarFoundation;

  protected readonly mdcFoundationClass = MDCTabBarFoundation;

  @query('.mdc-tab-bar') protected mdcRoot!: HTMLElement;

  @query('mwc-tab-scroller') protected scrollerElement!: TabScroller;

  // tabsSlot should have type HTMLSlotElement, but when TypeScript's
  // emitDecoratorMetadata is enabled, the HTMLSlotElement constructor will
  // be emitted into the runtime, which will cause an "HTMLSlotElement is
  // undefined" error in browsers that don't define it (e.g. Edge and IE11).
  @query('slot') protected tabsSlot!: HTMLElement;

  @observer(async function(this: TabBarBase, value: number) {
    await this.updateComplete;
    // only provoke the foundation if we are out of sync with it, i.e.
    // ignore an foundation generated set.
    if (value !== this._previousActiveIndex) {
      this.mdcFoundation.activateTab(value);
    }
  })
  @property({type: Number})

limitations under the License.
*/
import {LitElement, html} from '@polymer/lit-element/lit-element.js';
import {classMap} from 'lit-html/directives/classMap.js';
import {MDCWebComponentMixin} from '@material/mwc-base/mdc-web-component.js';
import {MDCWCMenu} from '@material/mwc-menu/mwc-menu.js';
import {MDCSelect} from '@material/select';
import {style} from './mwc-select-css.js';
import {style as menuStyle} from '@material/mwc-menu/mwc-menu-css.js';

// this element depend on the `mwc-list-item` and `mwc-list-item-separator`
// elements to be registered ahead of time
import '@material/mwc-list';
import '@material/mwc-list/mwc-list-item-separator.js';

class MDCWSelect extends MDCWebComponentMixin(MDCSelect) {
  get items() {
    return this.host.items;
  }

  get listItems() {
    return this.items.map((e) => e.listItem);
  }


  get options() {
    return this.listItems;
  }

  initialize(menuFactory, labelFactory) {
    super.initialize((el) => new MDCWCMenu(el), labelFactory);
  }

WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import {LitElement, html} from '@polymer/lit-element/lit-element.js';
import {MDCWebComponentMixin} from '@material/mwc-base/mdc-web-component.js';
import {MDCTabBarScroller} from '@material/tabs';
import {style} from './mwc-tab-bar-scroller-css.js';
import {afterNextRender} from '@material/mwc-base/utils.js';
import '@material/mwc-icon/mwc-icon-font.js';

// this element depends on `mwc-tab-bar` to be registered ahead of time
import './mwc-tab-bar.js';


class MDCWCTabBarScroller extends MDCWebComponentMixin(MDCTabBarScroller) {
  get tabBar() {
    return this.root_._host.querySelector('mwc-tab-bar')._mdcComponent;
  }

  // TODO(sorvell): hack to expose this
  get tabBarRoot() {
    return this.tabBar.root_;
  }

  initialize() {
    super.initialize((e) => this.tabBar);
    // TODO(sorvell): hack to get proper class on tabbar element.
    this.tabBarRoot.classList.add('mdc-tab-bar-scroller__scroll-frame__tabs');
  }

  createAdapter() {