activator-oce-exporter/test/activator/shared/src/fusion/slide/content-area/index.js

Extract Activator binder and convert it to valid OCE mono pacakge

import { html } from '@polymer/lit-element';
import { FusionGroup } from '../group';

class ContentArea extends FusionGroup {
  static get properties() {
    const defaultProps = super.properties;
    return {
      ...defaultProps,
      width: {
        type: String,
        fieldType: 'Number',
        value: '400px',
      },
      height: {
        type: String,
        fieldType: 'Number',
        value: '400px',
      },
      'background-color': {
        type: String,
        fieldType: 'ColorPicker',
        value: 'rgba(255, 255, 255, 0)',
      },
      'background-image': {
        type: String,
        fieldType: 'File',
        value: '',
        prop: true,
        assetType: 'Image',
      },
      'background-size': {
        type: String,
        fieldType: 'Select',
        value: 'cover',
        selectOptions: [
          'auto',
          'contain',
          'cover',
        ],
      },
      color: {
        type: String,
        fieldType: 'ColorPicker',
        value: 'rgba(0, 0, 0, 1)',
      },
      overflow: {
        type: String,
        fieldType: 'Select',
        value: 'visible',
        selectOptions: [
          'hidden',
          'visible',
          'scroll',
        ],
      },
    };
  }

  static get options() {
    return {
      ...super.options,
      componentName: 'content-area',
      componentUIName: 'Content Area',
      componentDescription: 'A static area for grouping content together. Used in layouts.',
      resizable: false,
      draggable: false,
      rotatable: false,
    };
  }

  static getStyle() {
    const styleRoot = super.getStyle();
    return `
      ${styleRoot}
      :host {
        display: block;
        overflow: var(--overflow);
      }
      .content-area {
        width: 100%;
        height: 100%;
        background-color: var(--background-color);
        background-size: var(--background-size);
        background-repeat:no-repeat;
        color: var(--color);
        border: var(--border-width) var(--border-style) var(--border-color);
        border-radius: var(--border-radius);
        box-sizing: border-box;
      }
    `;
  }

  render() {
    super.render();
    return html`
      <style>
      ${ContentArea.getStyle()}
      </style>
      <div class='content-area'>
        <slot></slot>
       ${ContentArea.getSystemSlotTemplate()}
      </div>
    `;
  }
}

export { ContentArea };