How to use the @polymer/polymer/polymer-legacy.js.Polymer function in @polymer/polymer

import "./lib/simple-blog-listing.js";
import "./lib/simple-blog-header.js";
import "./lib/simple-blog-footer.js";
import "./lib/simple-blog-post.js";
/**
`simple-blog`
A simple blog and associated elements

* @demo demo/index.html

@microcopy - the mental model for this element
 -
 -

*/
let SimpleBlog = Polymer({
  _template: html`
    <style is="">
      :host {
        display: block;
        font-family: "Roboto", "Noto", sans-serif;
        -webkit-font-smoothing: antialiased;
        font-size: 14px;
        margin: 0;
        padding: 24px;
        background-color: #fafafa;
        font-family: Open Sans, MundoSans, helvetica neue, Arial, Helvetica,
          sans-serif;
        margin: 0;
        padding: 0;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;</style>

import { html, Polymer } from "@polymer/polymer/polymer-legacy.js";
import "@polymer/iron-resizable-behavior/iron-resizable-behavior.js";

Polymer.ResponsiveUtility = Polymer({
  _template: html`
    <style>
      :host {
        display: inline;
      }
    </style>
    
`,

  is: "responsive-utility",

  behaviors: [Polymer.IronResizableBehavior],

  listeners: {
    "iron-resize": "_onIronResize"
  },

import "@polymer/app-route/app-route.js";
import "@polymer/iron-pages/iron-pages.js";
import "@polymer/iron-selector/iron-selector.js";
import "@polymer/paper-icon-button/paper-icon-button.js";
/**
`contenta-polymer`
A polymer app to talk to Contenta to serve up it's content in a visually awesome way

@demo ../../demo/index.html

@microcopy - the mental model for this app
 - contenta - the future of Drupal and web development, a decoupled CMS.
 -

*/
let ContentaPolymer = Polymer({
  _template: html`
    <style>
      :host {
        --app-primary-color: #4285f4;
        --app-secondary-color: black;

        display: block;
      }

      app-drawer-layout:not([narrow]) [drawer-toggle] {
        display: none;
      }

      app-header {
        color: #fff;
        background-color: var(--app-primary-color);</style>

import { html, Polymer } from "@polymer/polymer/polymer-legacy.js";
import "@polymer/iron-resizable-behavior/iron-resizable-behavior.js";

Polymer.ResponsiveUtility = Polymer({
  _template: html`
    <style>
      :host {
        display: inline;
      }
    </style>
    
`,

  is: "responsive-utility",

  behaviors: [Polymer.IronResizableBehavior],

  listeners: {
    "iron-resize": "_onIronResize"
  },

import { pathFromUrl } from "@polymer/polymer/lib/utils/resolve-url.js";
import "@polymer/paper-progress/paper-progress.js";
import "./lib/lrnsys-progress-circle.js";
/**
 * `lrnsys-progress`
 * `track progression as a circle and series of circles`
 *
 * @demo demo/index.html
 * @microcopy
 *  - node / circle - A progress circle on the line
 *  - nodes / items - the list of items in the progress bar
 *  - bubble - reserved for when events fire out of an element or value is tracking events
 *  - percentage - amount complete either in the bar or the nodes themselves
 *  - bar - the underlayed bar that's tracking overall progression
 */
let LrnsysProgress = Polymer({
  _template: html`
    
      <style is="">
        :host {
          display: block;
          margin-top: 24px;
        }
        :host([size="tiny"]) {
          font-size: 12.8px;
        }
        :host([size="small"]) {
          font-size: 19.2px;
        }
        :host([size="medium"]) {
          font-size: 25.6px;
        }</style>

import { html, Polymer } from "@polymer/polymer/polymer-legacy.js";
import "@polymer/paper-button/paper-button.js";
import "@polymer/iron-icons/iron-icons.js";
import "@polymer/iron-icon/iron-icon.js";
import "@lrnwebcomponents/materializecss-styles";
import "@polymer/paper-tooltip/paper-tooltip.js";
/**
`lrnsys-button`
A LRN element

* @demo demo/index.html
*/
let LrnsysButton = Polymer({
  _template: html`
    <style>
      :host {
        display: block;
        @apply --paper-font-common-base;
        @apply --paper-button;
        --lrnsys-button-height: 48px;
      }
      :host(.center) {
        text-align: center;
      }
      a {
        text-decoration: none;
        display: block;
        color: #000000;
      }</style>

import "@lrnwebcomponents/lrnsys-button/lrnsys-button.js";
import "@lrnwebcomponents/elmsln-loading/elmsln-loading.js";
import "./lib/lrnapp-cis-course-card.js";
/**
`lrnapp-cis`
A learning application for visualizing course information and listing.

@demo ../../demo/index.html

@microcopy - the mental model for this app
 - cis - Course Information System
 -
 -

*/
let LrnappCis = Polymer({
  _template: html`
    <style></style>
    <style>
      :host {
        display: block;
        align-content: center;
      }
      #loading {
        width: 100%;
        z-index: 1000;
        opacity: 0.8;
        text-align: center;
        align-content: center;
        justify-content: center;
        height: 100vh;
        position: absolute;</style>

import { html, Polymer } from "@polymer/polymer/polymer-legacy.js";
/**
 * `watsonlogic-parallax`
 * `Parallax scrolling effect web component for Polymer 2.0.`
 *
 * @customElement
 * @polymer
 * @polymerLegacy
 * @demo demo/index.html
 */
let WatsonlogicParallax = Polymer({
  _template: html`
    <style>
      :host {
        display: block;
        --parallax-background-height: 300px;
        --parallax-slogan-top: 150px;
        --parallax-background-image: url("https://static.pexels.com/photos/2324/skyline-buildings-new-york-skyscrapers.jpg");
      }

      .parallax-background {
        background: var(--parallax-background-image);
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        height: var(--parallax-background-height);</style>

### Styling

The following custom properties and mixins are available for styling:

Custom property | Description | Default
----------------|-------------|----------
`--paper-icon-picker-icon-size` | The size of each of the icon boxes | `26px`
`--paper-icon-picker-size` | The size of the icon picker | `24px`

@element paper-icon-picker
* @demo demo/index.html
*/
let PaperIconPicker = Polymer({
  _template: html`
    <style is="">
      :host {
        display: inline-block;
        position: relative;
      }

      :host(:focus) {
        outline: none;
      }

      .icon {
        box-sizing: border-box;
        width: var(--paper-icon-picker-icon-size, 26px);
        height: var(--paper-icon-picker-icon-size, 26px);
        color: #888888;</style>

### Styling

Custom property | Description | Default
----------------|-------------|----------
`--img-pan-zoom-spinner` | Mixin applied to spinner |
`--img-pan-zoom-spinner-color` | Spinner color | `#2196F3`
`--img-pan-zoom-spinner-width` | Spinner width | `5px`

### Credits

<a href="https://openseadragon.github.io">openSeadragon</a>


* @demo demo/index.html
*/
let ImgPanZoom = Polymer({
  _template: html`
    <style>
      :host {
        display: block;
        position: relative;
        height: 500px;
      }
      #viewer {
        position: relative;
        height: 100%;
        width: 100%;
      }

      paper-spinner-lite {
        opacity: 0;
        display: block;</style>