How to use the @polymer/polymer/lib/legacy/class.js.mixinBehaviors function in @polymer/polymer

import './token-ajax';
import './toast-feedback';
import './login-view.js';
import './user-options-menu';
import './shared-styles';
import './common/breadcrumb.js';

// Gesture events like tap and track generated from touch will not be
// preventable, allowing for better scrolling performance.
setPassiveTouchGestures(true);

// Set Polymer's root path to the same value we passed to our service worker
// in `index.html`.
setRootPath(MyAppGlobals.rootPath);

class MyApp extends mixinBehaviors([AppLocalizeBehavior], PolymerElement) {
    static get template() {
        return html`
      <style>
        :host {
           display: block;
        };
        app-drawer-layout:not([narrow]) [drawer-toggle] {
          display: none;
        };
        app-header {
          color: #fff;
          background-color: var(--app-primary-color);
        };
        app-header paper-icon-button {
          --paper-icon-button-ink-color: white;
        };</style>

import '../widgets/nuxeo-tooltip.js';
import './nuxeo-action-button-styles.js';

{
  /**
   * A button element to start an workflow on a document.
   *
   * Example:
   *
   *     
   *
   * @appliesMixin Nuxeo.I18nBehavior
   * @memberof Nuxeo
   * @demo demo/nuxeo-workflow-button/index.html
   */
  class WorkflowButton extends mixinBehaviors([I18nBehavior], Nuxeo.Element) {
    static get template() {
      return html`
        <style>
          nuxeo-select {
            max-width: 380px;
          }
        </style>

        

        
          <template>
            <div class="action">
              
              <span class="label">[[_label]]</span>
              [[_label]]</div></template>

import { IronFormElementBehavior } from '@polymer/iron-form-element-behavior/iron-form-element-behavior.js';
import { IronValidatableBehavior } from '@polymer/iron-validatable-behavior/iron-validatable-behavior.js';

import '@nuxeo/nuxeo-elements/nuxeo-element.js';
import '../widgets/nuxeo-input.js';
import { FormatBehavior } from '../nuxeo-format-behavior.js';

{
  /**
   * Used by `nuxeo-user-management` and `nuxeo-create-user
   * @appliesMixin Polymer.IronFormElementBehavior
   * @appliesMixin Polymer.IronValidatableBehavior
   * @appliesMixin Nuxeo.FormatBehavior
   * @memberof Nuxeo
   */
  class EditPassword extends mixinBehaviors(
    [IronFormElementBehavior, IronValidatableBehavior, FormatBehavior],
    Nuxeo.Element,
  ) {
    static get template() {
      return html`
        <style>
          :host {
            display: block;
            width: 100%;
          }
        </style>

import { I18nBehavior } from '../nuxeo-i18n-behavior.js';

{
  /**
   * An element for picking a W3C YYYY-MM-DDThh:mm:ss.sTZD based date (eg 1997-07-16T19:20:30.45+01:00).
   *
   * Example:
   *
   *     
   *
   * @appliesMixin Polymer.IronFormElementBehavior
   * @appliesMixin Polymer.IronValidatableBehavior
   * @memberof Nuxeo UI
   * @demo demo/nuxeo-date-picker/index.html
   */
  class DatePicker extends mixinBehaviors(
    [I18nBehavior, IronFormElementBehavior, IronValidatableBehavior],
    Nuxeo.Element,
  ) {
    static get is() {
      return 'nuxeo-date-picker';
    }

    static get properties() {
      return {
        label: String,

        /*
         * The default time of the picked-up date. Format is HH:mm:ss e.g. 12:45:23. Default is 00:00:00 (midnight).
         */
        defaultTime: String,

* Copyright 2018 The Pennsylvania State University
 * @license Apache-2.0, see License.md for full text.
 */
import { html, PolymerElement } from "@polymer/polymer/polymer-element.js";
import { afterNextRender } from "@polymer/polymer/lib/utils/render-status.js";
import "@polymer/paper-styles/paper-styles.js";
import "@polymer/iron-flex-layout/iron-flex-layout.js";
import { IronResizableBehavior } from "@polymer/iron-resizable-behavior/iron-resizable-behavior.js";
import { mixinBehaviors } from "@polymer/polymer/lib/legacy/class.js";
/**
 * `circle-progress`
 * `Polymer-based web component displaying a circular progress bar.`
 *
 * @demo demo/index.html
 */
class CircleProgress extends mixinBehaviors(
  [IronResizableBehavior],
  PolymerElement
) {
  static get template() {
    return html`
      <style>
        :host {
          @apply --layout-vertical;
          @apply --layout-center-center;
          position: relative;
          width: var(--circle-progress-width, 64px);
          height: var(--circle-progress-height, 64px);
          margin: 24px;
          border-radius: 50%;
        }
        svg {</style>

/**
`eco-json-schema-file` takes in a JSON schema of type number and string and
contains a `paper-input`, exposing a `value` property that represents the schema.

Validation is handled for strings and number/integers by mapping JSON schema
validation keywords to `paper-input` attributes; form elements will automatically
try and validate themselves as users provide input:

Please see the `eco-json-schema-object` documentation for further information.

@group eco Elements
@element eco-json-schema-file
* @demo demo/index.html
*/

class EcoJsonSchemaFile extends mixinBehaviors(
  [AppLocalizeBehavior],
  PolymerElement
) {
  static get tag() {
    return "eco-json-schema-file";
  }
  static get template() {
    return html`
      <style is="">
        :host ([hidden]) {
          display: none;
        }
        paper-input {
          padding: 2px;
          --paper-input-container-label: {
            white-space: normal;</style>

import '@polymer/paper-material/paper-material.js';
import '@polymer/iron-form/iron-form.js';
import '@polymer/iron-a11y-keys/iron-a11y-keys.js';
import '@polymer/paper-button/paper-button.js';
import '@polymer/paper-styles/paper-styles.js';
import '@polymer/paper-input/paper-input-behavior.js';
import '@vaadin/vaadin-grid/vaadin-grid.js';
import '@vaadin/vaadin-grid/vaadin-grid-selection-column.js';
import '@vaadin/vaadin-grid/vaadin-grid-sort-column.js';
import { PolymerElement, html } from "@polymer/polymer/polymer-element.js";
import {mixinBehaviors} from "@polymer/polymer/lib/legacy/class.js";
import {AppLocalizeBehavior} from "@polymer/app-localize-behavior/app-localize-behavior.js";
import '../shared-styles.js';
import '../token-ajax.js';

class GlossarySelector extends mixinBehaviors([AppLocalizeBehavior], PolymerElement) {
    static get template() {
        return html`
      <style>
        :host {
          display: inline-block;
          padding: 10px 20px;
        }
         form  { display: table;      }
                p     { display: table-row;  }
                label { display: table-cell; }
                input { display: table-cell; }
                a     { display: table-cell; }
      </style>

import "./app-datepicker.js";
import { PaperDialogBehavior } from "@polymer/paper-dialog-behavior/paper-dialog-behavior.js";
import "@polymer/paper-button/paper-button.js";
import { NeonAnimationRunnerBehavior } from "@polymer/neon-animation/neon-animation-runner-behavior.js";
import { mixinBehaviors } from "@polymer/polymer/lib/legacy/class.js";
import { PolymerElement, html } from "@polymer/polymer/polymer-element.js";

class AppDatepickerDialog extends
  mixinBehaviors([NeonAnimationRunnerBehavior, PaperDialogBehavior], PolymerElement) {

  static get template() {
    return html`
    <style>
      :host {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        box-sizing: border-box;
        -webkit-tap-highlight-color: rgba(0,0,0,0);

        display: block;
      }

      * {</style>

* An element to list the permissions of an entity.
   *
   * Example:
   *
   *     
   *
   * Example:
   *
   *     
   *
   * Used by `nuxeo-user-group-management`
   *
   * @appliesMixin Nuxeo.I18nBehavior
   * @memberof Nuxeo
   */
  class UserGroupPermissionsTable extends mixinBehaviors([I18nBehavior], Nuxeo.Element) {
    static get template() {
      return html`
        <style>
          :host {
            display: block;
          }

          paper-button:hover {
            @apply --nx-button-hover;
          }

          paper-button.primary {
            @apply --nx-button-primary;
          }

          paper-button.primary:hover,</style>

import '@polymer/iron-selector/iron-selector.js';
import '@polymer/paper-icon-button/paper-icon-button.js';
import './icons/carousel.js';
import {FlattenedNodesObserver} from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
import * as Gestures from '@polymer/polymer/lib/utils/gestures.js';

/**
 * `skeleton-carousel`
 *
 * @customElement
 * @polymer
 * @demo demo/index.html
 */
class SkeletonCarousel extends mixinBehaviors([
  IronA11yKeysBehavior,
  GestureEventListeners,
], PolymerElement) {
  /**
   * Template element
   * @return {!HTMLTemplateElement}
   */
  static get template() {
    return html`
    
    
    
    <style>
      :host {
        display: block;
        position: relative;</style>