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

Extract Activator binder and convert it to valid OCE mono pacakge

import { html } from '@polymer/lit-element';
import { FusionTextInput } from '../text-input/index';

class FusionSubmitEmail extends FusionTextInput {
  static get options() {
    return {
      componentName: 'fusion-submit-email',
      componentUIName: 'Submit Email',
      componentScope: 'standard',
      componentType: 'static',
      componentCategory: 'data',
      componentDescription: 'Form for submitting an email address to collected data',
      componentDomain: 'slide',
      isRootNested: true,
      isTextEdit: false,
      nestedTypes: [],
      nestedComponents: [],
      defaultTemplate: '',
      resizable: 'all',
      draggable: 'xy',
      rotatable: true,
      sortable: false,
    };
  }

  static get properties() {
    return {
      ...super.properties,
      'background-color': {
        type: String,
        fieldType: 'ColorPicker',
        value: 'rgba(235, 235, 240, 1)',
      },
      'button-text': {
        type: String,
        fieldType: 'String',
        value: 'Submit',
        prop: true,
      },
    };
  }

  update(changedProps) {
    super.update(changedProps);
    if (changedProps.get('value') !== undefined) {
      this.value.length ? this.setAttribute('has-value', '') : this.removeAttribute('has-value');
    }
  }

  updateValue() {
    this.value = this.inputForm.value;
  }

  checkRequired() {
    const regular = /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/;
    const isCorrect = this.value.length < 256 && this.value.length > 0 && regular.test(String(this.value).toLowerCase());

    isCorrect ? this.removeAttribute('invalid') : this.setAttribute('invalid', '');
  }

  constructor() {
    super();
    this.type = 'email';
    this.errorMessage = 'Please enter correct email';
  }

  connectedCallback() {
    super.connectedCallback();
  }

  disconnectedCallback() {
    super.disconnectedCallback();
  }

  render() {
    super.render();
    return html`
      <style>
        ${FusionTextInput.getStyle()}
        :host [part='fusion-submit-email-container'] {
          flex-direction: column;
          flex: auto;
        }
        :host [part='fusion-submit-email-container'],
        :host [part='fusion-submit-email'] {
          display: flex;
        }
        :host [part='fusion-submit-email'] {
          align-items: center;
        }
        :host [part='input-field'] {
            flex: auto;
        }
        :host(:not([has-value])) [part='submit-button'],
        :host([invalid]) [part='submit-button'] {
          pointer-events: none;
          opacity: 0.5;
        }
        :host [part='submit-button'] {
          display: inline-block;
          padding: 6px 12px;
          margin-left: 5px;
          min-height: 36px;
          font-size: var(--font-size);
          text-align: center;
          white-space: nowrap;
          vertical-align: middle;
          border-radius: 4px;
          border: 1px solid transparent;
          transition: color 150ms ease-in-out,background-color 150ms ease-in-out,box-shadow 150ms ease-in-out;
          background-color: var(--background-color);
          color: #000;
        }
        :host [part='submit-button']:focus {
          outline: 0;
          box-shadow: 0 0 0 3px var(--background-color);
        }
        :host(:not([has-value])[required]) [part='input-field'] {
          background-color: #feeeed;
        }
        :host(:not([has-value])[required]) [part='error-message'] {
          opacity: 1;
        }
      </style>
        <div part="fusion-submit-email-container">
          ${this.getLabelTemplate.call(this)}
          <div part='fusion-submit-email'>
            ${this.getInputTemplate.call(this)}
            <button part='submit-button'>${this['button-text']}</button>
          </div>
          <div part='error-message'>${this.errorMessage}</div>
        </div>
        ${FusionSubmitEmail.getSystemSlotTemplate()}
    `;
  }
}

export { FusionSubmitEmail };