activator-oce-exporter/test/activator/shared/src/fusion/email/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, EmailComponent } from '../../mixins';

class MJMLText extends applyMixins(FusionBase, [EmailComponent]) {
  static get properties() {
    return {
      color: {
        type: String,
        fieldType: 'ColorPicker',
        value: 'rgba(0, 0, 0, 1)',
      },
      'font-size': {
        type: String,
        fieldType: 'Number',
        value: '13px',
      },
      'letter-spacing': {
        type: String,
        fieldType: 'Number',
        value: '1px',
      },
      'line-height': {
        type: String,
        fieldType: 'Number',
        value: '22px',
      },
      'text-decoration': {
        type: String,
        fieldType: 'Select',
        value: 'none',
        selectOptions: [
          'underline',
          'overline',
          'line-through',
          'none',
        ],
      },
      'text-transform': {
        type: String,
        fieldType: 'Select',
        value: 'none',
        selectOptions: [
          'uppercase',
          'lowercase',
          'capitalize',
          'none',
        ],
      },
      align: {
        type: String,
        fieldType: 'Select',
        value: 'left',
        selectOptions: [
          'left',
          'center',
          'right',
          'justify',
        ],
      },
      'container-background-color': {
        type: String,
        fieldType: 'ColorPicker',
        value: 'rgba(255, 255, 255, 0)',
      },
      'padding-top': {
        type: String,
        fieldType: 'Number',
        value: '10px',
      },
      'padding-right': {
        type: String,
        fieldType: 'Number',
        value: '10px',
      },
      'padding-bottom': {
        type: String,
        fieldType: 'Number',
        value: '10px',
      },
      'padding-left': {
        type: String,
        fieldType: 'Number',
        value: '10px',
      },
    };
  }

  static get options() {
    return {
      componentName: 'mj-text',
      componentUIName: 'Text for email',
      componentScope: 'standard',
      componentType: 'static',
      componentCategory: 'UI',
      componentDescription: 'Email text element',
      componentDomain: 'email',
      isRootNested: false,
      isTextEdit: true,
      nestedTypes: [],
      nestedComponents: [],
      defaultTemplate: '<p>Enter your text here</p>',
      resizable: false,
      draggable: false,
      rotatable: false,
      sortable: true,
    };
  }

  static getStyle() {
    const styleRoot = super.getStyle();
    return `
      ${styleRoot}
      :host {
        display: block;
        width: 100%;
        min-height: 1em;
        border-radius: var(--border-radius);
        color: var(--color);
        letter-spacing: var(--letter-spacing);
        line-height: var(--line-height);
        text-decoration: var(--text-decoration);
        text-transform: var(--text-transform);
        text-align: var(--align);
        font-size: var(--font-size);
        background-color: var(--container-background-color);
        padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
      }
      ::slotted(*) {
        text-transform: var(--text-transform);
        text-decoration: var(--text-decoration);
        line-height: var(--line-height);
      }`;
  }

  render() {
    super.render();
    return html`
      <style>
      ${MJMLText.getStyle()}
      </style>
      <div>
        <slot></slot>
        ${MJMLText.getSystemSlotTemplate()}
      </div>
    `;
  }
}

export { MJMLText };