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

Extract Activator binder and convert it to valid OCE mono pacakge

import { html } from '@polymer/lit-element';
import { FusionBase } from '../../base';
import { applyMixins, SlideComponent } from '../../mixins';

class FusionLine extends applyMixins(FusionBase, [SlideComponent]) {
  static get options() {
    return {
      ...super.options,
      componentName: 'fusion-line',
      componentType: 'static',
      componentCategory: 'UI',
      componentUIName: 'Line',
      componentScope: 'standard',
      componentDescription: 'Component for showing lines',
      componentDomain: 'slide',
      isTextEdit: false,
      isRootNested: true,
      nestedTypes: [],
      nestedComponents: [],
      defaultTemplate: '',
      resizable: 'e,w',
      draggable: 'xy',
      rotatable: true,
      sortable: false,
      lockAspectRatio: false,
    };
  }

  static get properties() {
    const { top, left, ...other } = super.properties;
    return {
      top,
      left,
      width: {
        type: String,
        fieldType: 'Number',
        value: '400px',
        min: 1,
      },
      'line-height': {
        type: String,
        fieldType: 'Number',
        value: '1px',
        min: 1,
      },
      'line-type': {
        type: String,
        fieldType: 'Select',
        value: 'solid',
        selectOptions: [
          'solid',
          'dotted',
          'dashed',
        ],
      },
      'background-color': {
        type: String,
        fieldType: 'ColorPicker',
        value: 'rgba(177, 192, 201, 1)',
      },
      ...other,
    };
  }

  static getStyle() {
    const styleRoot = super.getStyle();
    return `
      ${styleRoot}
      :host {
        display: block;
        --margin: 10px;
        height: calc(var(--line-height) + var(--margin) * 2);
      }
      .line {
        margin: var(--margin) 0;
        width: var(--width);
        border-top: var(--line-height) var(--line-type) var(--background-color);
      }
      `;
  }

  render() {
    super.render();
    return html`
      <style>
        ${FusionLine.getStyle()}
      </style>
      <div class="line"></div>
      <slot name='mo-system'></slot>
    `;
  }
}

export { FusionLine };