activator-oce-exporter/test/activator/shared/src/fusion/mixins/bordered-element.js

Extract Activator binder and convert it to valid OCE mono pacakge

import { isTransparentRgba, getValueObject } from '../utils';

export function BorderedElement(superClass) {
  return class extends superClass {
    static get properties() {
      return {
        ...super.properties,
        'border-width': {
          type: String,
          fieldType: 'Number',
          value: '0px',
          min: '0',
        },
        'border-style': {
          type: String,
          fieldType: 'Select',
          value: 'none',
          selectOptions: [
            'none',
            'solid',
            'dotted',
            'dashed',
            'double',
            'groove',
            'ridge',
            'inset',
            'outset',
          ],
        },
        'border-color': {
          type: String,
          fieldType: 'ColorPicker',
          value: 'rgba(255, 255, 255, 0)',
        },
        'border-radius': {
          type: String,
          fieldType: 'Number',
          value: '0px',
          min: '0',
        },
      };
    }

    static isBorderEmpty(width, style, color, amend) {
      return width === 0 || style === 'none' || isTransparentRgba(color, amend);
    }

    getBorderColor(value) {
      return this.constructor.isBorderEmpty(...this.getBorderProps()) ? value : this['border-color'];
    }

    static isBorderChanged(changedProps) {
      return changedProps.has('border-width') || changedProps.has('border-style') || changedProps.has('border-color');
    }

    getBorderProps(amend) {
      return [getValueObject(this['border-width']).num, this['border-style'], this['border-color'], amend];
    }

    /**
     *
     * @description calculation size of the element depending on border params (width, style, and alpha-color).
     * @param {string} value - element size value (width or height).
     * @returns {string} value - recalculated element size, toggle class `border-empty` to element depending on border params.
     */

    getSizeByBorder(value) {
      const bordersCount = 4;
      const isBorderEmpty = this.constructor.isBorderEmpty(...this.getBorderProps());
      const { num, unit } = getValueObject(this['border-width']);
      this.updateClassName(isBorderEmpty);
      return isBorderEmpty ? `${value}${unit}` : `${Math.max(num * bordersCount, value)}${unit}`;
    }

    updateClassName(isBorderEmpty) {
      this.classList[isBorderEmpty ? 'add' : 'remove']('border-empty');
    }
  };
}