activator-oce-exporter/test/activator/shared/src/fusion/slide/text/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, BorderedElement, Font,
} from '../../mixins';

const defaultTemplate = '<p>Text</p>';

class FusionText extends applyMixins(FusionBase, [Font, SlideComponent, BorderedElement]) {
  static get options() {
    return {
      componentName: 'fusion-text',
      componentType: 'static',
      componentCategory: 'UI',
      componentUIName: 'Text',
      componentScope: 'standard',
      componentDescription: 'Component for showing text data',
      componentDomain: 'slide',
      isTextEdit: true,
      isRootNested: true,
      nestedTypes: [],
      nestedComponents: [],
      defaultTemplate,
      resizable: 'e,w',
      draggable: 'xy',
      rotatable: true,
      sortable: false,
    };
  }

  static get properties() {
    const { top, left, ...borderedProps } = super.properties;
    return {
      top,
      left,
      width: {
        type: String,
        fieldType: 'Number',
        value: '100px',
      },
      'line-height': {
        type: String,
        fieldType: 'Number',
        value: '1.2',
        step: 0.1,
      },
      'letter-spacing': {
        type: String,
        fieldType: 'Number',
        value: '0px',
        step: 0.1,
      },
      color: {
        type: String,
        fieldType: 'ColorPicker',
        value: 'rgba(0, 0, 0, 1)',
      },
      'background-color': {
        type: String,
        fieldType: 'ColorPicker',
        value: 'rgba(0, 0, 0, 0)',
      },
      'padding-top': {
        type: String,
        fieldType: 'Number',
        value: '0px',
      },
      'padding-bottom': {
        type: String,
        fieldType: 'Number',
        value: '0px',
      },
      'padding-left': {
        type: String,
        fieldType: 'Number',
        value: '0px',
      },
      'padding-right': {
        type: String,
        fieldType: 'Number',
        value: '0px',
      },
      ...borderedProps,
    };
  }

  static getStyle() {
    const styleRoot = super.getStyle();
    return `
      ${styleRoot}
      :host {
        display: block;
      }
      :host .content {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        background: var(--background-color);
        border: var(--border-width) var(--border-style) var(--border-color);
        border-radius: var(--border-radius);
        padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
      }
      ::slotted(div.ql-editor),
      ::slotted(ul),
      ::slotted(div[slot="content"]),
      ::slotted(p) {
        line-height: var(--line-height);
        letter-spacing: var(--letter-spacing);
        word-break: break-word;
        color: var(--color);
      }`;
  }

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

export { FusionText };