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

class MJMLButton extends applyMixins(FusionBase, [ModeTrackable, LinkExtension, EmailComponent]) {
  static get properties() {
    const borderStyle = ['solid', 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset', 'outset'];
    const xAlignOptions = ['left', 'center', 'right'];
    const yAlignOptions = ['top', 'middle', 'bottom'];
    return {
      width: {
        type: String,
        fieldType: 'Number',
        value: '100px',
      },
      height: {
        type: String,
        fieldType: 'Number',
        value: '35px',
      },
      'padding-top': {
        type: String,
        fieldType: 'Number',
        value: '10px',
      },
      'padding-right': {
        type: String,
        fieldType: 'Number',
        value: '25px',
      },
      'padding-bottom': {
        type: String,
        fieldType: 'Number',
        value: '10px',
      },
      'padding-left': {
        type: String,
        fieldType: 'Number',
        value: '25px',
      },
      'inner-padding-top': {
        type: String,
        fieldType: 'Number',
        value: '10px',
      },
      'inner-padding-right': {
        type: String,
        fieldType: 'Number',
        value: '25px',
      },
      'inner-padding-bottom': {
        type: String,
        fieldType: 'Number',
        value: '10px',
      },
      'inner-padding-left': {
        type: String,
        fieldType: 'Number',
        value: '25px',
      },
      'border-width': {
        type: String,
        fieldType: 'Number',
        value: '0px',
        attributes: ['border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'],
      },
      'border-style': {
        type: String,
        fieldType: 'Select',
        value: 'solid',
        attributes: ['border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style'],
        selectOptions: borderStyle,
      },
      'border-color': {
        type: String,
        fieldType: 'ColorPicker',
        value: 'rgba(255, 255, 255, 0)',
        attributes: ['border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color'],
      },
      'border-left-width': {
        type: String,
        fieldType: 'Number',
        value: '0px',
      },
      'border-left-style': {
        type: String,
        fieldType: 'Select',
        value: 'solid',
        selectOptions: borderStyle,
      },
      'border-left-color': {
        type: String,
        fieldType: 'ColorPicker',
        value: 'rgba(255, 255, 255, 0)',
      },
      'border-top-width': {
        type: String,
        fieldType: 'Number',
        value: '0px',
      },
      'border-top-style': {
        type: String,
        fieldType: 'Select',
        value: 'solid',
        selectOptions: borderStyle,
      },
      'border-top-color': {
        type: String,
        fieldType: 'ColorPicker',
        value: 'rgba(255, 255, 255, 0)',
      },
      'border-right-width': {
        type: String,
        fieldType: 'Number',
        value: '0px',
      },
      'border-right-style': {
        type: String,
        fieldType: 'Select',
        value: 'solid',
        selectOptions: borderStyle,
      },
      'border-right-color': {
        type: String,
        fieldType: 'ColorPicker',
        value: 'rgba(255, 255, 255, 0)',
      },
      'border-bottom-width': {
        type: String,
        fieldType: 'Number',
        value: '0px',
      },
      'border-bottom-style': {
        type: String,
        fieldType: 'Select',
        value: 'solid',
        selectOptions: borderStyle,
      },
      'border-bottom-color': {
        type: String,
        fieldType: 'ColorPicker',
        value: 'rgba(255, 255, 255, 0)',
      },
      'border-radius': {
        type: String,
        fieldType: 'Number',
        value: '3px',
      },
      'background-color': {
        type: String,
        fieldType: 'ColorPicker',
        value: 'rgba(65, 65, 65, 1)',
      },
      color: {
        type: String,
        fieldType: 'ColorPicker',
        value: 'rgba(255, 255, 255, 1)',
      },
      align: {
        type: String,
        fieldType: 'Select',
        value: 'center',
        selectOptions: xAlignOptions,
      },
      'vertical-align': {
        type: String,
        fieldType: 'Select',
        value: 'middle',
        selectOptions: yAlignOptions,
      },
      'text-align': {
        type: String,
        fieldType: 'Select',
        value: 'center',
        selectOptions: xAlignOptions,
      },
      'font-size': {
        type: String,
        fieldType: 'Number',
        value: '13px',
      },
      'font-style': {
        type: String,
        fieldType: 'Select',
        value: 'normal',
        selectOptions: [
          'normal',
          'italic',
          'oblique',
        ],
      },
      'font-weight': {
        type: String,
        fieldType: 'Select',
        value: 'normal',
        selectOptions: [
          'normal',
          'bolder',
          'lighter',
        ],
      },
      'line-height': {
        type: String,
        fieldType: 'Number',
        value: '120%',
      },
      ...super.properties,
      'text-transform': {
        type: String,
        fieldType: 'Select',
        value: 'none',
        selectOptions: [
          'none',
          'capitalize',
          'lowercase',
          'uppercase',
        ],
      },
      'text-decoration': {
        type: String,
        fieldType: 'Select',
        value: 'none',
        selectOptions: [
          'none',
          'overline',
          'underline',
        ],
      },
    };
  }


  static get options() {
    return {
      componentName: 'mj-button',
      componentUIName: 'Button',
      componentScope: 'standard',
      componentType: 'static',
      componentCategory: 'interaction',
      componentDescription: 'Basic button for adding interactions',
      componentDomain: 'email',
      isTextEdit: true,
      isRootNested: false,
      nestedTypes: [],
      nestedComponents: [],
      defaultTemplate: '<p>MJ Button</p>',
      resizable: false,
      draggable: false,
      rotatable: false,
      sortable: true,
      alignConfig: {
        top: 'flex-start',
        left: 'flex-start',
        center: 'center',
        middle: 'center',
        right: 'flex-end',
        bottom: 'flex-end',
      },
    };
  }

  getInnerPadding() {
    return `${this['inner-padding-top']} ${this['inner-padding-right']} ${this['inner-padding-bottom']} ${this['inner-padding-left']}`;
  }

  setInnerPadding() {
    const padding = this.getInnerPadding();
    this.setAttribute('inner-padding', padding);
  }

  render() {
    super.render();
    const { alignConfig } = MJMLButton.options;
    this.setInnerPadding();
    return html`
      <style>
      ${MJMLButton.getStyle()}
      :host {
        width: 100%;
        height: auto;
        display: block;
        padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
      }
      :host .mj-button {
        display: flex;
        justify-content: ${alignConfig[this.align]};
        box-sizing: border-box;
      }
      :host .mj-button div {
        display: flex;
        justify-content: ${alignConfig[this['text-align']]};
        align-items: ${alignConfig[this['vertical-align']]};
        width: var(--width);
        height: var(--height);
        min-height: 30px;
        padding: var(--inner-padding-top) var(--inner-padding-right) var(--inner-padding-bottom) var(--inner-padding-left);
        font-size: var(--font-size);
        font-style: var(--font-style);
        font-weight: var(--font-weight);
        line-height: var(--line-height);
        text-decoration: var(--text-decoration);
        text-transform: var(--text-transform);
        border-radius: var(--border-radius);
        border-top: var(--border-top-width) var(--border-top-style) var(--border-top-color);
        border-left: var(--border-left-width) var(--border-left-style) var(--border-left-color);
        border-right: var(--border-right-width) var(--border-right-style) var(--border-right-color);
        border-bottom: var(--border-bottom-width) var(--border-bottom-style) var(--border-bottom-color);
        color: var(--color);
        background-color: var(--background-color);
        box-sizing: border-box;
        cursor: pointer;
      }
      </style>
      <div class='mj-button'>
        <div @click='${() => this.openLink()}'><slot></slot></div>
        ${MJMLButton.getSystemSlotTemplate()}
      </div>
    `;
  }
}

export { MJMLButton };