How to use the @polymer/polymer/lib/utils/mixin.js.dedupingMixin function in @polymer/polymer

* ##  Resizable
 * 
 * handles size and resizing
 * 
 * @memberof MultiChart.mixin
 * @polymer
 * @mixinFunction
 */

// const ResizeObserver = window.ResizeObserver || Polyfill;
const ResizeObserver = window.ResizeObserver ;
const ro = new ResizeObserver((entries, observer) => {
  entries.forEach((entry, index) => entry.target.onResize(entry, index));
});

const Resizable = dedupingMixin(superClass => {

  /*
   * @polymer
   * @mixinClass
   */
  class Mixin extends superClass {


    static get properties() {
      
      return {

        ...super.properties,
        /* 
         * `width`  of SVG host
         */

import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
import { select } from 'd3-selection';
/**
 * ##  TrackHover
 * 
 * track which element is being hovered
 * 
 * @memberof MultiChart.mixin
 * @polymer
 * @mixinFunction
 */
const TrackHover = dedupingMixin(superClass => {

  return class extends superClass {

    static get properties() {
      return {

        ...super.properties,

        /* 
         * `trackHover` set true if selector listen to mouseenter/mouseleave events and set hoveredItem accordingly. 
         * When true, this element also and fires `multi-mouseenter` and multi-mouseleave. 
         */
        trackHover: {
          type: Boolean,
          value: false
        },

// for polymer mixin compatibility
        static get properties() {
            return {
                /** Shared UI router global instance */
                uiRouter: {
                    type: Object,
                    value: function () {
                        return uirouter;
                    }
                }
            }
        }
    }
};

const UiRouterMixin = dedupingMixin(UiRouterMixinInternal);
export {uirouter};
export default UiRouterMixin;

/**
 * ## MultiRegister
 * 
 * The responsibility of this mixin is to observe nodes added to `#obseveNodes`. 
 * It adds elements fireing a`multi-register to `_registeredItems` and elements 
 * fireing `multi-serie-register` to `series`.
 * 
 *
 * @memberof MultiChart.mixin
 * @polymer
 * @mixinFunction
 */
import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';

const MultiRegister = dedupingMixin(superClass => {

  /*
   * @polymer
   * @mixinClass
   */
  class Register extends superClass {

    static get properties() {

      return {

        ...super.properties,

        /* 
         * `registerContainerName` the name of the container set to registered items. This is needed because
         * some items can be registered agains mutiple domain. For instance, multi-g : as an resizable svg item 

import { dedupingMixin } from "@polymer/polymer/lib/utils/mixin.js";
import toggleEntity from "../common/entity/toggle-entity.js";
import NavigateMixin from "../../../mixins/navigate-mixin";
import EventsMixin from "../../../mixins/events-mixin.js";
import computeStateName from "../../../common/entity/compute_state_name";

/*
 * @polymerMixin
 * @appliesMixin EventsMixin
 * @appliesMixin NavigateMixin
 */
export default dedupingMixin(
  (superClass) =>
    class extends NavigateMixin(EventsMixin(superClass)) {
      handleClick(hass, config, hold) {
        let action = config.tap_action || "more-info";
        if (hold) {
          action = config.hold_action;
        }
        if (action === "none") return;

        switch (action) {
          case "more-info":
            this.fire("hass-more-info", { entityId: config.entity });
            break;
          case "navigate":
            this.navigate(config.navigation_path);
            break;

import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
import { cssTheme } from '@preignition/preignition-mixin';
import { select } from 'd3-selection';
/**
 * ## MultiHighlight
 * 
 *   adds a highlight class on shapes with same keys as `highlightedKeys`
 * 
 * @memberof MultiChart.mixin
 * @polymer
 * @mixinFunction
 */
const MultiHighlight = dedupingMixin(superClass => {

  /*
   * @polymer
   * @mixinClass
   */
  class Mixin extends superClass {

    static get properties() {
      return {

        ...super.properties,

        highlightedKeys: {
          type: Array,
          attribute: 'highlighted-keys'
        },

import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
/**
 * Mixin for creating a picker for datetime
 *
 * @mixinFunction
 * @polymer
 */
export const DatetimePickerMixin = dedupingMixin( superClass => {
  return class extends superClass {

    static get nativeInputTemplate() {
      return html`
        <template is="">
          <input max="[[_computeNativeThreshold(_maxValue)]]" min="[[_computeNativeThreshold(_minValue)]]" step="[[_computeNativeStep(_partsStep, clamp)]]" value="{{_nativeInput::input}}" type="${this.expectedNativeInputType}" class="native">
          ${this.timezoneInputTemplate || html``}
        </template>
      `;
    }

    static get styleTemplate() {
      return html`
        ${super.styleTemplate || html``}
        <style>
          .native {</style>

import { TimeInputPattern } from '@fooloomanzoo/datetime-input/time-input.js';
import { DatetimeMixin } from '@fooloomanzoo/property-mixins/datetime-mixin.js';
import { CalendarElementPattern } from './calendar-element.js';
import { DatePickerPattern } from './date-picker.js';
import { TimeElementPattern } from './time-element.js';
import { TimePickerPattern } from './time-picker.js';
import { DatetimePickerMixin } from './datetime-picker-mixin.js';
import { style as dropdownStyle } from '@fooloomanzoo/input-picker-pattern/dropdown-style.js';

/**
 * Mixin for datetime-picker
 *
 * @mixinFunction
 * @polymer
 */
export const DatetimePickerPattern = dedupingMixin( superClass => {

  return class extends superClass {

    static get expectedNativeInputType() {
      return htmlLiteral`datetime-local`;
    }

    static get pickerTemplate() {
      return html`
        <div class="dropdown" id="picker">
          ${this.calendarTemplate}
          ${this.timeTemplate}
          <div id="buttons">
            ${this.buttonTemplate}
          </div>
        </div>

import { dedupingMixin } from "@polymer/polymer/lib/utils/mixin.js";
import EventsMixin from "./events-mixin";

/*
 * @polymerMixin
 * @appliesMixin EventsMixin
 */
export default dedupingMixin(
  (superClass) =>
    class extends EventsMixin(superClass) {
      navigate(path, replace = false) {
        if (replace) {
          history.replaceState(null, null, path);
        } else {
          history.pushState(null, null, path);
        }
        this.fire("location-changed");
      }
    }
);

import { InputPickerPattern } from '@fooloomanzoo/input-picker-pattern/input-picker-pattern.js';
import { SwitchMixin } from '@fooloomanzoo/input-picker-pattern/switch-mixin.js';
import { DatetimeFormMixin, DatetimeInputMixin } from '@fooloomanzoo/datetime-input/datetime-input-mixin.js';
import { DateInputPattern } from '@fooloomanzoo/datetime-input/date-input.js';
import { DatetimeMixin } from '@fooloomanzoo/property-mixins/datetime-mixin.js';
import { CalendarElementPattern } from './calendar-element.js';
import { DatetimePickerMixin } from './datetime-picker-mixin.js';
import { style as dropdownStyle } from '@fooloomanzoo/input-picker-pattern/dropdown-style.js';

/**
 * Mixin for date-picker
 *
 * @mixinFunction
 * @polymer
 */
export const DatePickerPattern = dedupingMixin( superClass => {
  return class extends superClass {

    static get expectedNativeInputType() {
      return htmlLiteral`date`;
    }

    static get pickerTemplate() {
      return html`
        <div class="dropdown" id="picker">
          ${this.calendarTemplate}
          <div id="buttons">
            ${this.buttonTemplate}
          <div>
        </div>
      `;
    }</div></div>