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

Extract Activator binder and convert it to valid OCE mono pacakge

import { html } from '@polymer/lit-element';
import { FusionBase } from '../../base';
import { emitInitEvents } from '../../utils';
import { applyMixins, SlideComponent } from '../../mixins';

class FusionBackdrop extends applyMixins(FusionBase, [SlideComponent]) {
  static get properties() {
    return {
      'background-color': {
        type: String,
        fieldType: 'ColorPicker',
        value: 'rgba(230, 230, 230, 0.5)',
      },
    };
  }

  static get options() {
    return {
      componentName: 'fusion-backdrop',
      componentUIName: 'Backdrop',
      componentScope: 'standard',
      componentType: 'static',
      componentCategory: 'overlay',
      componentDescription: 'Basic backdrop module',
      componentDomain: 'slide',
      isRootNested: false,
      isTextEdit: false,
      nestedTypes: [],
      nestedComponents: [],
      defaultTemplate: '',
      resizable: false,
      draggable: false,
      rotatable: false,
      sortable: false,
    };
  }

  constructor() {
    super();
    emitInitEvents(this, { name: `${this.constructor.options.componentName}:added`, props: { detail: { isCreated: true } } });
  }

  connectedCallback() {
    super.connectedCallback();
    this.addEventListener('click', this.emitCustomEvent.bind(this, 'backdrop-click'));
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    this.removeEventListener('click', this.emitCustomEvent.bind(this, 'backdrop-click'));
    this.emitCustomEvent(`${this.constructor.options.componentName}:removed`, { detail: { isCreated: false } });
  }

  static getStyle() {
    const styleRoot = super.getStyle(0, 0);
    return `
      ${styleRoot}
      :host {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--background-color);
        pointer-events: auto;
        z-index: 0;
      }`;
  }

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

export { FusionBackdrop };