How to use the @material/mwc-base/mdc-web-component.js.MDCWebComponentMixin function in @material/mwc-base

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() {

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 {LitElement, html} from '@polymer/lit-element/lit-element.js';
import {MDCWebComponentMixin} from '@material/mwc-base/mdc-web-component.js';
import {MDCTabBar} from '@material/tabs';
import {style} from './mwc-tab-bar-css.js';
import {afterNextRender} from '@material/mwc-base/utils.js';

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


class MDCWCTabBar extends MDCWebComponentMixin(MDCTabBar) {
  // TODO(sorvell): adapt to changing list of tabs
  // (does not appear to be support in foundation for this)
  get tabs() {
    return Array.from(this.root_._host.querySelectorAll('mwc-tab'))
      .filter((e) => e._mdcComponent).map((e) => e._mdcComponent);
  }
}

export class TabBar extends LitElement {
  static get properties() {
    return {
      activeTabIndex: {type: Number},
    };
  }

  constructor() {

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 {LitElement, html} from '@polymer/lit-element/lit-element.js';
import {MDCWebComponentMixin} from '@material/mwc-base/mdc-web-component.js';
import {MDCTab} from '@material/tabs';
import {style} from './mwc-tab-css.js';
import '@material/mwc-icon/mwc-icon-font.js';

class MDCWCTab extends MDCWebComponentMixin(MDCTab) {}

export class Tab extends LitElement {
  static get properties() {
    return {
      href: {type: String},
      icon: {type: String},
      label: {type: String},
    };
  }

  constructor() {
    super();
    this.href = '';
    this.icon = '';
    this.label = '';
  }

supportsPassive_ = isSupported;
  }

  return supportsPassive_ ? {passive: true} : false;
}

function getMatchesProperty(HTMLElementPrototype) {
  return [
    'webkitMatchesSelector', 'msMatchesSelector', 'matches',
  ].filter((p) => p in HTMLElementPrototype).pop();
}

const MATCHES = getMatchesProperty(HTMLElement.prototype);

export class MDCWCRipple extends MDCWebComponentMixin(MDCRipple) {}

export class MDCWCRippleContainer extends MDCWCRipple {
  createAdapter() {
    const container = this.host.parentNode || this.host;
    return {
      isSurfaceActive: () => container[MATCHES](':active'),
      isSurfaceDisabled: () => container.disabled,
      containsEventTarget: (target) => container.contains(target),
      registerInteractionHandler: (evtType, handler) => container.addEventListener(evtType, handler, applyPassive()),
      deregisterInteractionHandler: (evtType, handler) =>
        container.removeEventListener(evtType, handler, applyPassive()),
      computeBoundingRect: () => container.getBoundingClientRect(),
    };
  }
}

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, html} from '@material/mwc-base/component-element.js';
import {classMap} from 'lit-html/directives/classMap.js';
import {MDCWebComponentMixin} from '@material/mwc-base/mdc-web-component.js';
import {MDCTextField} from '@material/textfield';
import {style} from './mwc-textfield-css.js';
import '@material/mwc-icon/mwc-icon-font.js';

class MDCWCTextField extends MDCWebComponentMixin(MDCTextField) {}

export class Textfield extends ComponentElement {

  static get ComponentClass() {
    return MDCWCTextField;
  }

  static get componentSelector() {
    return '.mdc-text-field';
  }

  static get properties() {
    return {
      value: {type: String},
      label: {type: String},
      icon: {type: String},