How to use the @lrnwebcomponents/utils/utils.js.winEventsElement function in @lrnwebcomponents/utils

import { winEventsElement } from "@lrnwebcomponents/utils/utils.js";
/**
 * `hax-plate-context`
 * `A context menu that provides common grid plate based authoring options.`
 * @microcopy - the mental model for this element
 * - context menu - this is a menu of text based buttons and events for use in a larger solution.
 * - grid plate - the container / full HTML tag which can have operations applied to it.
 */
class HaxPlateContext extends winEventsElement(HTMLElement) {
  constructor(delayRender = false) {
    super();
    this.__winEvents = {
      "hax-store-property-updated": "_haxStorePropertyUpdated"
    };
    // set tag for later use
    this.tag = HaxPlateContext.tag;
    this.template = document.createElement("template");
    this.attachShadow({ mode: "open" });
    if (!delayRender) {
      this.render();
    }
    setTimeout(() => {
      import("@polymer/paper-item/paper-item.js");
      import("@lrnwebcomponents/hax-body/lib/hax-context-item-menu.js");
      import("@lrnwebcomponents/hax-body/lib/hax-context-item.js");

import { LitElement, html, css } from "lit-element/lit-element.js";
import { MtzFileDownloadBehaviors } from "@lrnwebcomponents/dl-behavior/dl-behavior.js";
import { winEventsElement } from "@lrnwebcomponents/utils/utils.js";

/**
 * `hax-export-dialog`
 * @customElement hax-export-dialog
 * `Export dialog with all export options and settings provided.`
 */
class HaxExportDialog extends winEventsElement(
  MtzFileDownloadBehaviors(LitElement)
) {
  static get styles() {
    return [
      css`
        :host {
          display: block;
        }
        #dialog {
          z-index: 1000;
        }
        iron-icon:not(:defined),
        paper-button:not(:defined),
        paper-dialog:not(:defined) {
          display: none;
        }

import { FlattenedNodesObserver } from "@polymer/polymer/lib/utils/flattened-nodes-observer.js";
import { winEventsElement, wipeSlot } from "@lrnwebcomponents/utils/utils.js";
import "@polymer/iron-media-query/iron-media-query.js";
/**
 * @deprecatedApply - required for @apply / invoking @apply css var convention
 */
import "@polymer/polymer/lib/elements/custom-style.js";
/**
 * `hax-preview`
 * @customElement hax-preview
 * `An element that can generate a form`
 * @microcopy - the mental model for this element
 *  - element - the element to work against. an object that expresses enough information to create an element in the DOM. This is useful for remixing a tag via the json-form
 *  - source - a json object from some place loaded in remotely which will then be in json-schema format. This will then be parsed into a form which can be used to manipulate the element.
 */
class HaxPreview extends winEventsElement(LitElement) {
  /**
   * LitElement render styles
   */
  static get styles() {
    return [
      css`
        :host {
          display: block;
          background-color: #ffffff;
          overflow: hidden;
        }
        iron-icon:not(:defined),
        paper-button:not(:defined) {
          display: none;
        }
        paper-card.form-wrapper {

import "@polymer/iron-ajax/iron-ajax.js";
import { winEventsElement } from "@lrnwebcomponents/utils/utils.js";
/**
 * @deprecatedApply - required for @apply / invoking @apply css var convention
 */
import "@polymer/polymer/lib/elements/custom-style.js";
/**
 * `hax-app-search`
 * @customElement hax-app-search
 * `An element that brokers the visual display of a listing of material from an end point. The goal is to normalize data from some location which is media centric. This expects to get at least enough data in order to form a grid of items which are selectable. It's also generically implemented so that anything can be hooked up as a potential source for input (example: youtube API or custom in-house solution). The goal is to return enough info via fired event so that hax-manager can tell hax-body that the user selected a tag, properties, slot combination so that hax-body can turn the selection into a custom element / element injected into the hax-body slot.`
 * @microcopy - the mental model for this element
 * - hax-source - a backend that can supply items for selection by the user
 * - hax-manager - controlling the UI for selection of something
 * - hax-body - the text are ultimately we are trying to insert this item into
 */
class HaxAppSearch extends winEventsElement(SimpleColors) {
  /**
   * LitElement constructable styles enhancement
   */
  static get styles() {
    return [
      ...super.styles,
      css`
        :host {
          display: block;
        }
        paper-button.item-wrapper {
          margin: 0;
          padding: 0;
        }
        paper-card {
          padding: 0;

import { html, css } from "lit-element/lit-element.js";
import { SimpleColors } from "@lrnwebcomponents/simple-colors/simple-colors.js";
import { winEventsElement } from "@lrnwebcomponents/utils/utils.js";
import "@lrnwebcomponents/simple-picker/simple-picker.js";

class HaxUploadField extends winEventsElement(SimpleColors) {
  /**
   * LitElement life cycle - styles addition
   */
  static get styles() {
    return [
      ...super.styles,
      css`
        :host {
          display: block;
          visibility: visible;
          transition: 0.3s all ease;
          box-sizing: border-box;
          pointer-events: all;
          overflow: visible;
          --simple-camera-snap-width: 300px;
          --simple-camera-snap-height: calc(300px * 9 / 16);

*/
import "@polymer/polymer/lib/elements/custom-style.js";
/**
`hax-panel`
A LRN element that provides a panel / pallet of options to choose from.
This is intended to be placed in a larger system for creating content quickly
as the events being bubbled up include HTML nodes to inject into something

* @demo demo/index.html

@microcopy - the mental model for this element
 - panel - the flyout from left or right side that has elements that can be placed
 - element - buttons on the panel which when pressed will trigger an event

*/
class HaxPanel extends winEventsElement(SimpleColors) {
  /**
   * LitElement constructable styles enhancement
   */
  static get styles() {
    return [
      ...super.styles,
      css`
        :host {
          display: block;
          position: absolute;
          z-index: 1000000;
        }
        :host *[hidden] {
          display: none;
        }
        iron-icon:not(:defined),

import { LitElement, html, css } from "lit-element/lit-element.js";
import "@lrnwebcomponents/grafitto-filter/grafitto-filter.js";
import { winEventsElement } from "@lrnwebcomponents/utils/utils.js";

/**
 * `hax-app-browser`
 * @customElement hax-app-browser
 *
 * `Browse a list of apps. This provides a listing of our gizmos that we've integrated with.`
 * @microcopy - the mental model for this element
 * - hax-app - expression of how to communicate and visualize a data source
 * - gizmo - silly name for the general public when talking about hax-app and what it provides in the end
 */
class HaxAppBrowser extends winEventsElement(LitElement) {
  static get styles() {
    return [
      css`
        :host {
          display: block;
        }
        :host *[hidden] {
          display: none;
        }
        hax-app-browser-item {
          margin: 8px;
          -webkit-transition: 0.3s all linear;
          transition: 0.3s all linear;
          display: inline-flex;
        }
        .title {

import { html, css } from "lit-element/lit-element.js";
import { SimpleColors } from "@lrnwebcomponents/simple-colors/simple-colors.js";
import { winEventsElement } from "@lrnwebcomponents/utils/utils.js";
/**
 * @deprecatedApply - required for @apply / invoking @apply css var convention
 */
import "@polymer/polymer/lib/elements/custom-style.js";
/**
 * `hax-export-dialog`
 * @customElement hax-export-dialog
 * `Export dialog with all export options and settings provided.`
 */
class HaxPreferencesDialog extends winEventsElement(SimpleColors) {
  /**
   * LitElement constructable styles enhancement
   */
  static get styles() {
    return [
      ...super.styles,
      css`
        :host {
          display: block;
        }
        iron-icon:not(:defined),
        paper-button:not(:defined),
        app-drawer:not(:defined) {
          display: none;
        }
        #dialog {

/**
 * @deprecatedApply - required for @apply / invoking @apply css var convention
 */
import "@polymer/polymer/lib/elements/custom-style.js";
/**
 * `hax-manager`
 * @customElement hax-manager
 * `A LRN element for brokering the UI for api endpoints both in querying and uploading of new media to eventually bubble up an event for hax-body to have content inserted into it. This is a wiring closet of sorts to ensure we can talk to any backend that's returning a slew of widgets / media to insert.`
 * @microcopy - the mental model for this element
 * - hax-manager - the modal for selecting a app for getting something added to hax-body. This will bubble an event up to an app which will then invoke the haxInsert function on hax-body in order to get the selected item onto the body area for usage.
 * - hax-body - the body tag that's beening clicked / focused and built; our WYSIWYG replacement.
 * - hax-panel - a panel off to the side that has possible options. Clicking in this panel is most likely what invokes hax-manager to display though this is also managed by a higher app (lrnapp-book in initial development)
 * - app - an API end point for querying and returning possible items for insert. For example, if a youtube is a source then it'll be expected to return data that can be mapped in such a way that it can display a grid of videos. Hitting vimeo we'd expect the same thing; enough data to be able to assemble a grid of videos to select / work with.
 * - endpoints - much of hax-manager is about routing data to and from the current application to backends. So uploads need to go some place, this is managing the UI aspect of that transaction while expecting to be fed an endpoint to handle the backend aspect.
 */
class HaxManager extends winEventsElement(SimpleColors) {
  /**
   * LitElement life cycle - styles addition
   */
  static get styles() {
    return [
      ...super.styles,
      css`
        :host {
          display: block;
          color: var(--hax-color-text);
        }
        app-drawer:not(:defined),
        hax-preview:not(:defined),
        hax-app-browser:not(:defined),
        hax-gizmo-browser:not(:defined),
        iron-icon:not(:defined) {

import { LitElement, html, css } from "lit-element/lit-element.js";
import "@lrnwebcomponents/grafitto-filter/grafitto-filter.js";
import { winEventsElement } from "@lrnwebcomponents/utils/utils.js";

/**
 * `hax-gizmo-browser`
 * @customElement hax-gizmo-browser
 * `Browse a list of gizmos. This provides a listing of custom elements for people to search and select based on what have been defined as gizmos for users to select.`
 * @microcopy - the mental model for this element
 * - gizmo - silly name for the general public when talking about custom elements and what it provides in the end.
 */
class HaxGizmoBrowser extends winEventsElement(LitElement) {
  static get styles() {
    return [
      css`
        :host {
          display: block;
        }
        hax-gizmo-browser-item {
          margin: 5px;
          transition: 0.2s all linear;
          display: inline-flex;
        }
        #ironlist {
          min-height: 50vh;
          margin: 0;
          padding: 16px;
        }