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

class MJMLImage extends applyMixins(FusionBase, [ModeTrackable, LinkExtension, EmailComponent]) {
  static get properties() {
    return {
      width: {
        type: String,
        fieldType: 'Number',
        value: '100px',
      },
      src: {
        type: String,
        fieldType: 'Modal',
        value: '',
        prop: true,
        assetType: 'Image',
      },
      'container-background-color': {
        type: String,
        fieldType: 'ColorPicker',
        value: 'rgba(255, 255, 255, 0)',
      },
      'padding-top': {
        type: String,
        fieldType: 'Number',
        value: '0px',
      },
      'padding-right': {
        type: String,
        fieldType: 'Number',
        value: '0px',
      },
      'padding-bottom': {
        type: String,
        fieldType: 'Number',
        value: '0px',
      },
      'padding-left': {
        type: String,
        fieldType: 'Number',
        value: '0px',
      },
      align: {
        type: String,
        fieldType: 'Select',
        value: 'center',
        selectOptions: [
          'center',
          'left',
          'right',
        ],
      },
      'border-color': {
        type: String,
        fieldType: 'ColorPicker',
        value: 'rgba(255, 255, 255, 0)',
      },
      'border-width': {
        type: String,
        fieldType: 'Number',
        value: '0px',
      },
      'border-radius': {
        type: String,
        fieldType: 'Number',
        value: '0px',
      },
      ...super.properties,
      alt: {
        type: String,
        fieldType: 'String',
        value: 'Image',
      },
    };
  }

  static get options() {
    return {
      componentName: 'mj-image',
      componentUIName: 'image container',
      componentScope: 'standard',
      componentType: 'static',
      componentCategory: 'UI',
      componentDescription: 'Image container for editor',
      componentDomain: 'email',
      isRootNested: false,
      isTextEdit: false,
      nestedTypes: [],
      nestedComponents: [],
      defaultTemplate: '',
      resizable: false,
      draggable: false,
      rotatable: false,
      sortable: true,
    };
  }

  getBorder() {
    return `${this['border-width']} solid ${this['border-color']}`;
  }

  setBorder() {
    this.border = this.getBorder();
    this.setAttribute('border', this.border);
  }

  getHorAlign() {
    const alignConfig = {
      center: 'center',
      left: 'flex-start',
      right: 'flex-end',
    };
    return alignConfig[this.align];
  }

  static getStyle() {
    const styleRoot = super.getStyle();
    return `
      ${styleRoot}
      :host {
        width: 100%;
        display: block;
        padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
        background-color: var(--container-background-color);
      }
       :host .image-container img{
        width: var(--width);
        height: auto;
        border: var(--border-width) solid var(--border-color);
        border-radius: var(--border-radius);
      }`;
  }

  render() {
    super.render();
    this.setBorder();
    return html`
      <style>
      ${MJMLImage.getStyle()},
      :host .image-container {
        display: flex;
        align-items: center;
        justify-content: ${this.getHorAlign()};
        box-sizing: border-box;
      }
      </style>
      <div class="image-container">
         <img src=${this.src || ''} alt=${this.alt} @click='${() => this.openLink()}'>
      </div>
      ${MJMLImage.getSystemSlotTemplate()}
    `;
  }
}

export { MJMLImage };