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

import { PolymerElement } from "@polymer/polymer/polymer-element";
import { IronResizableBehavior } from "@polymer/iron-resizable-behavior/iron-resizable-behavior";
import "@polymer/paper-icon-button/paper-icon-button";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { Debouncer } from "@polymer/polymer/lib/utils/debounce";
import { timeOut } from "@polymer/polymer/lib/utils/async";
import { mixinBehaviors } from "@polymer/polymer/lib/legacy/class";

import formatTime from "../../common/datetime/format_time";
// eslint-disable-next-line no-unused-vars
/* global Chart moment Color */

let scriptsLoaded = null;

class HaChartBase extends mixinBehaviors(
  [IronResizableBehavior],
  PolymerElement
) {
  static get template() {
    return html`
      <style>
        :host {
          display: block;
        }
        .chartHeader {
          padding: 6px 0 0 0;
          width: 100%;
          display: flex;
          flex-direction: row;
        }
        .chartHeader > div {</style>

import '../widgets/nuxeo-tooltip.js';
import '../widgets/nuxeo-user-avatar.js';
// eslint-disable-next-line import/no-cycle
import './nuxeo-document-comment.js';
import './nuxeo-document-comments-styles.js';
import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { FormatBehavior } from '../nuxeo-format-behavior.js';

/**
 `nuxeo-document-comment-thread`
 @group Nuxeo UI
 @element nuxeo-document-comment-thread
 */
{
  class DocumentCommentThread extends mixinBehaviors([FormatBehavior], Nuxeo.Element) {
    static get template() {
      return html`
        <style></style>

        

        <template is="">
          <span class="more-content no-selection pointer smaller">[[_computeTextLabel(level, 'loadAll', total, i18n)]]</span>
        </template>
        <template is="" id="commentList">
          
        </template>

        <template is=""></template>

|----------------|-------------|----------|
|`--h2-button` | Mixin applied to the button | {}

*/

import {html, PolymerElement} from "@polymer/polymer";
import '@polymer/paper-button/paper-button'
import {mixinBehaviors} from "@polymer/polymer/lib/legacy/class";
import {PaperButtonBehavior} from "@polymer/paper-behaviors/paper-button-behavior";

/**
 * @customElement
 * @polymer
 * @demo demo/h2-button/index.html
 */
class H2Button extends mixinBehaviors(PaperButtonBehavior, PolymerElement) {
  static get template() {
    return html`
    <style>
      :host {
        display: inline-block;
        font-size: 14px;
        width: 80px;
        height: 34px;
        border-radius: 4px;
      }

      :host([hidden]) {
        display: none;
      }

      :host([disabled]) .btn {</style>

*/
import {html, PolymerElement} from "@polymer/polymer";
import {mixinBehaviors} from "@polymer/polymer/lib/legacy/class";

import {BaseBehavior} from "./behaviors/base-behavior";
import './behaviors/h2-elements-shared-styles.js';
import '@polymer/paper-checkbox';
import './h2-button';

/**
 * @customElement
 * @polymer
 * @demo demo/h2-checkbox-group/index.html
 */
class H2CheckboxGroup extends mixinBehaviors(BaseBehavior, PolymerElement) {
  static get template() {
    return html`
    <style>
      :host {
        display: flex;
        flex-wrap: nowrap;
        position: relative;
        line-height: 34px;
      }

      #checkbox-container {
        position: relative;
      }

      .checkbox-item {
        margin-left: 6px;</style>

*
   *     
   *
   * ### Styling
   *
   * The following custom properties and mixins are available for styling:
   *
   * Custom property | Description | Default
   * ----------------|-------------|----------
   * `--nuxeo-path-suggestion-results` | Mixin applied to the results pane | `{}`
   * `--nuxeo-path-suggestion-result` | Mixin applied to the result items | `{}`
   *
   * @memberof Nuxeo
   * @demo demo/nuxeo-path-suggestion/index.html
   */
  class PathSuggestion extends mixinBehaviors([FormatBehavior], Nuxeo.Element) {
    static get template() {
      return html`
        <style>
          :host {
            display: block;
            padding-bottom: 8px;
          }

          paper-typeahead {
            --paper-typeahead-results: {
              background-color: white;
              z-index: 100;
              @apply --nuxeo-path-suggestion-results;
            }

            --paper-typeahead-result: {</style>

import "@polymer/iron-flex-layout/iron-flex-layout-classes";
import { IronResizableBehavior } from "@polymer/iron-resizable-behavior/iron-resizable-behavior";
import "@polymer/paper-input/paper-input";
import { mixinBehaviors } from "@polymer/polymer/lib/legacy/class";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";

import "../components/entity/state-info";
import "../components/ha-slider";

class StateCardInputNumber extends mixinBehaviors(
  [IronResizableBehavior],
  PolymerElement
) {
  static get template() {
    return html`
      <style></style>
      <style>
        ha-slider {
          margin-left: auto;
        }
        .state {
          @apply --paper-font-body1;
          color: var(--primary-text-color);

          text-align: right;
          line-height: 40px;</style>

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 '@vaadin/vaadin-button/vaadin-button.js';
import '@polymer/paper-dialog/paper-dialog.js';
import '@polymer/paper-dialog-behavior/paper-dialog-behavior.js';

import {AppLocalizeBehavior} from "@polymer/app-localize-behavior/app-localize-behavior.js";
import {PolymerElement, html} from '@polymer/polymer/polymer-element.js';
import '../shared-styles.js';
import {mixinBehaviors} from "@polymer/polymer/lib/legacy/class";


class AssetSearchView extends mixinBehaviors([AppLocalizeBehavior], PolymerElement) {
    static get template() {
        return html`
      <style>
        :host {
          display: block;
          padding: 10px 20px;
        }
        vaadin-grid {
          height: calc(100vh - 130px);
        }
      </style>

      
      
      
        <form method="get"></form>

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 '@vaadin/vaadin-button/vaadin-button.js';
import 'multiselect-combo-box/multiselect-combo-box.js';
import '@polymer/paper-dialog/paper-dialog.js';
import '@polymer/paper-dialog-behavior/paper-dialog-behavior.js';

import {AppLocalizeBehavior} from "@polymer/app-localize-behavior/app-localize-behavior.js";
import {PolymerElement, html} from '@polymer/polymer/polymer-element.js';
import '../shared-styles.js';
import {mixinBehaviors} from "@polymer/polymer/lib/legacy/class";


class AssetSearchView extends mixinBehaviors([AppLocalizeBehavior], PolymerElement) {
    static get template() {
        return html`
      <style>
        :host {
          display: block;
          padding: 2px 20px;
        }
        vaadin-grid {
          height: calc(100vh - 130px);
        }
      </style>

import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "@polymer/paper-input/paper-input";
import { IronResizableBehavior } from "@polymer/iron-resizable-behavior/iron-resizable-behavior";
import { mixinBehaviors } from "@polymer/polymer/lib/legacy/class";

import "../components/hui-generic-entity-row";
import "../../../components/ha-slider";
import { computeRTL } from "../../../common/util/compute_rtl";

class HuiInputNumberEntityRow extends mixinBehaviors(
  [IronResizableBehavior],
  PolymerElement
) {
  static get template() {
    return html`
      ${this.styleTemplate}
      
        ${this.inputNumberControlTemplate}
      
    `;
  }

*          Banana
 *          Mango
 *          Orange
 *          Tomato
 *      
 *
 *   **Styling**
 *
 *   Since `paper-dropdown` is wrapper around `paper-dropdown-menu`, you can use any of the
 *   `paper-dropdown-menu`, `paper-input-container` and `paper-menu-button` style mixins and
 *   custom properties to style the internal input and menu button respectively.
 *
 * @element paper-dropdown
 * @demo demo/index.html
 */
class PaperDropDown extends mixinBehaviors([PaperDropdownBehavior], PolymerElement) {
    /**
     * @event open is fired when `paper-dropdown` opens.
     */

    /**
     * @event close is fired when `paper-dropdown` closes.
     */
    static get properties() {
        return {
            /**
             * search placeholder text if searchable is True
             */
            searchPlaceholder: {
                type: String,
                value: "Search..."
            },