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

Extract Activator binder and convert it to valid OCE mono pacakge

import { html } from '@polymer/lit-element';
import '@vaadin/vaadin-notification/vaadin-notification.js';
import { FusionBase } from '../../base';
import { getValueObject } from '../../utils';
import { applyMixins, SlideComponent, Stateful } from '../../mixins';

class FusionNotification extends applyMixins(FusionBase, [SlideComponent, Stateful]) {
  // Public property API that triggers re-render (synced with attributes)
  static get properties() {
    return {
      'state-id': {
        type: String,
        fieldType: 'String',
      },
      opened: {
        type: Boolean,
        fieldType: 'Boolean',
        value: false,
      },
      position: {
        type: String,
        fieldType: 'String',
        value: 'bottom-start',
      },
      duration: {
        type: String,
        fieldType: 'Number',
        value: '4000',
      },
      level: {
        type: String,
        fieldType: 'Number',
        value: '0',
        unit: '',
      },
    };
  }

  static get options() {
    return {
      componentName: 'fusion-notification',
      componentUIName: 'Notification',
      componentScope: 'standard',
      componentType: 'system',
      componentDescription: 'Temporary notification sliding in from edge of content',
      componentDomain: 'slide',
      isTextEdit: false,
      isRootNested: false,
      nestedTypes: [],
      nestedComponents: [],
      baseLevel: 1000,
      defaultTemplate: '',
      resizable: 'all',
      draggable: 'xy',
      rotatable: true,
      sortable: false,
    };
  }

  firstUpdated(changedProps) {
    super.firstUpdated(changedProps);
    const templ = document.createElement('template');
    templ.innerHTML = `${this.innerHTML}`;
    this.notification = this.shadowRoot.querySelector('vaadin-notification');
    this.notification.appendChild(templ);
    this.notification.addEventListener('opened-changed', this.changeNotification.bind(this));
    this.notification.setAttribute('duration', this.duration);
    this.notification.setAttribute('position', this.position);
  }

  changeNotification(e) {
    const wasClosed = !e.detail.value;
    if (wasClosed) {
      this.inactivate();
    }
  }

  enter() {
    this.notification.open();
    this.addLevel();
  }

  exit() {
    const transitionDuration = getValueObject(this.duration).num;
    this.notification.close();
    this.removeLevel(transitionDuration);
  }

  static getStyle() {
    const styleRoot = super.getStyle();
    return `
      ${styleRoot}

      :host([hidden]),
      :host(:not([opened]):not([closing])) {
        display: none !important;
      }
      [part="notification"] {
        z-index: var(--level);
      }`;
  }

  render() {
    super.render();
    return html`
      <style>
        ${FusionNotification.getStyle()}
      </style>
      <vaadin-notification part="notification"></vaadin-notification>
      <slot></slot>
      ${FusionNotification.getSystemSlotTemplate()}
    `;
  }
}

export { FusionNotification };