@pluginjs/styled/dist/styled.common.js

A flexible modern styled js plugin.

/*!
 * @pluginjs/styled v0.8.11 (https://pluginjs.com)
 * Copyright 2022 Creation Studio Limited
 * Released under the GPL-3.0 License.
 */
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var utils = require('@pluginjs/utils');
var is = require('@pluginjs/is');
var dom = require('@pluginjs/dom');

var getDefaultView = el => {
  var view = el.ownerDocument.defaultView;

  if (!view || !view.opener) {
    view = window;
  }

  return view;
};

var isCssNumber = name => {
  return !['animationIterationCount', 'columnCount', 'fillOpacity', 'flexGrow', 'flexShrink', 'fontWeight', 'lineHeight', 'opacity', 'order', 'orphans', 'widows', 'zIndex', 'zoom'].includes(name);
};

var isCSSVariable = name => {
  return /^--/.test(name);
};
var setStyle = (key, value, el) => {
  if (is.isString(key) && is.isElement(el)) {
    if (value || value === 0) {
      if (isCSSVariable(key)) {
        el.style.setProperty(key, value);
      } else {
        key = utils.camelize(key, false);

        if (is.isNumeric(value) && isCssNumber(key)) {
          value += 'px';
        }

        el.style[key] = value;
      }
    } else {
      el.style.removeProperty(utils.dasherize(key));
    }
  } else if (is.isObject(key)) {
    if (is.isElement(value) && typeof el === 'undefined') {
      el = value;
      value = undefined;
    }

    var prop;

    for (prop in key) {
      if (Object.prototype.hasOwnProperty.call(key, prop)) {
        setStyle(prop, key[prop], el);
      }
    }
  }

  return el;
};
var getStyle = (key, el) => {
  var value;

  if (is.isArray(key)) {
    value = {};
    key.forEach(k => {
      value[k] = getStyle(k, el);
    });
    return value;
  }

  if (!isCSSVariable(key)) {
    key = utils.dasherize(key);
  }

  value = getDefaultView(el).getComputedStyle(el, '').getPropertyValue(key);
  return is.isNumeric(value) ? parseFloat(value) : value;
};
var css = utils.curryWith((key, value, el) => {
  if (is.isElement(value) && typeof el === 'undefined') {
    el = value;
    value = undefined;
  }

  if (typeof key === 'string' && typeof value === 'undefined') {
    return getStyle(key, el);
  }

  return setStyle(key, value, el);
}, is.isElement); // ----------
// Dimensions
// ----------

var outerHeight = function outerHeight(includeMargins, el) {
  var isFloat = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;

  if (is.isElement(includeMargins) && typeof el === 'undefined') {
    el = includeMargins;
    includeMargins = false;
  }

  if (is.isWindow(el)) {
    return el.outerHeight;
  }

  var offsetHeight = isFloat ? parseFloat(getStyle('height', el), 10) : el.offsetHeight;

  if (includeMargins) {
    var {
      marginTop,
      marginBottom
    } = getStyle(['marginTop', 'marginBottom'], el);
    marginTop = isFloat ? parseFloat(marginTop, 10) : parseInt(marginTop, 10);
    marginBottom = isFloat ? parseFloat(marginBottom, 10) : parseInt(marginBottom, 10);
    return marginTop + marginBottom + offsetHeight;
  }

  return offsetHeight;
};
var outerWidth = function outerWidth(includeMargins, el) {
  var isFloat = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;

  if (is.isElement(includeMargins) && typeof el === 'undefined') {
    el = includeMargins;
    includeMargins = false;
  }

  if (is.isWindow(el)) {
    return el.outerWidth;
  }

  var offsetWidth = isFloat ? parseFloat(getStyle('width', el), 10) : el.offsetWidth;

  if (includeMargins) {
    var {
      marginLeft,
      marginRight
    } = getStyle(['marginLeft', 'marginRight'], el);
    marginLeft = isFloat ? parseFloat(marginLeft, 10) : parseInt(marginLeft, 10);
    marginRight = isFloat ? parseFloat(marginRight, 10) : parseInt(marginRight, 10);
    return marginLeft + marginRight + offsetWidth;
  }

  return offsetWidth;
};
var innerWidth = el => {
  if (is.isWindow(el)) {
    return el.innerWidth;
  }

  return el.clientWidth;
};
var innerHeight = el => {
  if (is.isWindow(el)) {
    return el.innerHeight;
  }

  return el.clientHeight;
};
var getWidth = el => {
  if (is.isWindow(el)) {
    return el.innerWidth;
  }

  if (is.isDocument(el)) {
    var doc = el.documentElement;
    return Math.max(el.body.scrollWidth, doc.scrollWidth, el.body.offsetWidth, doc.offsetWidth, doc.clientWidth);
  }

  var {
    width
  } = el.getBoundingClientRect();
  var {
    paddingLeft,
    paddingRight
  } = getStyle(['paddingLeft', 'paddingRight'], el);
  width = width - parseInt(paddingLeft, 10) - parseInt(paddingRight, 10);

  if (getStyle('boxSizing', el) === 'border-box') {
    var {
      borderLeftWidth,
      borderRightWidth
    } = getStyle(['borderLeftWidth', 'borderRightWidth'], el);
    width = width - parseInt(borderLeftWidth, 10) - parseInt(borderRightWidth, 10);
  }

  return width;
};
var setWidth = (value, el) => {
  if (el.nodeType !== 1) {
    return el;
  }

  if (getStyle('boxSizing', el) === 'border-box') {
    var {
      paddingLeft,
      paddingRight,
      borderLeftWidth,
      borderRightWidth
    } = getStyle(['paddingLeft', 'paddingRight', 'borderLeftWidth', 'borderRightWidth'], el);
    value += paddingLeft + paddingRight + borderLeftWidth + borderRightWidth;
  }

  return setStyle('width', value, el);
};
var width = (value, el) => {
  if (is.isElement(value) && typeof el === 'undefined') {
    el = value;
    value = undefined;
  }

  if (typeof value === 'undefined') {
    return getWidth(el);
  }

  return setWidth(value, el);
};
var getHeight = el => {
  if (is.isWindow(el)) {
    return el.innerHeight;
  }

  if (is.isDocument(el)) {
    var doc = el.documentElement;
    return Math.max(el.body.scrollHeight, doc.scrollHeight, el.body.offsetHeight, doc.offsetHeight, doc.clientHeight);
  }

  var {
    height
  } = el.getBoundingClientRect();
  var {
    paddingTop,
    paddingBottom
  } = getStyle(['paddingTop', 'paddingBottom'], el);
  height = height - parseInt(paddingTop, 10) - parseInt(paddingBottom, 10);

  if (getStyle('boxSizing', el) === 'border-box') {
    var borderStyles = getStyle(['borderTopHeight', 'borderBottomHeight'], el);
    var borderTopHeight = borderStyles.borderTopHeight || 0;
    var borderBottomHeight = borderStyles.borderBottomHeight || 0;
    height = height - parseInt(borderTopHeight, 10) - parseInt(borderBottomHeight, 10);
  }

  return height;
};
var setHeight = (value, el) => {
  if (el.nodeType !== 1) {
    return el;
  }

  if (getStyle('boxSizing', el) === 'border-box') {
    var {
      paddingTop,
      paddingBottom,
      borderTopHeight,
      borderBottomHeight
    } = getStyle(['paddingTop', 'paddingBottom', 'borderTopHeight', 'borderBottomHeight'], el);
    value += paddingTop + paddingBottom + borderTopHeight + borderBottomHeight;
  }

  return setStyle('height', value, el);
};
var height = (value, el) => {
  if (is.isElement(value) && typeof el === 'undefined') {
    el = value;
    value = undefined;
  }

  if (typeof value === 'undefined') {
    return getHeight(el);
  }

  return setHeight(value, el);
}; // ----------
// Offset
// ----------

var getOffset = el => {
  var box = el.getBoundingClientRect();
  var win = getDefaultView(el);
  return {
    top: box.top + win.pageYOffset,
    left: box.left + win.pageXOffset
  };
};
var setOffset = (coordinates, el) => {
  var props = {};
  var parentOffset = offset(dom.offsetParent(el));

  if (typeof coordinates.top !== 'undefined') {
    props.top = coordinates.top - parentOffset.top;
  }

  if (typeof coordinates.left !== 'undefined') {
    props.left = coordinates.left - parentOffset.left;
  }

  if (getStyle('position', el) === 'static') {
    props.position = 'relative';
  }

  return setStyle(props, el);
};
var offset = (coordinates, el) => {
  if (is.isElement(coordinates) && typeof el === 'undefined') {
    el = coordinates;
    coordinates = undefined;
  }

  if (coordinates) {
    return setOffset(coordinates, el);
  }

  return getOffset(el);
};
var position = el => {
  var parentOffset = {
    top: 0,
    left: 0
  };
  var coords;

  if (getStyle('position', el) === 'fixed') {
    coords = el.getBoundingClientRect();
  } else {
    coords = offset(el);
    var parent = dom.offsetParent(el);

    if (parent && parent !== el && parent.nodeType === 1) {
      parentOffset = offset(parent);
      parentOffset.top += parseFloat(parent.style.borderTopWidth) || 0;
      parentOffset.left += parseFloat(parent.style.borderLeftWidth) || 0;
    }
  }

  coords.top -= parseFloat(el.style.marginTop) || 0;
  coords.left -= parseFloat(el.style.marginLeft) || 0;
  return {
    top: coords.top - parentOffset.top,
    left: coords.left - parentOffset.left
  };
}; // -------------
// Show and Hide
// -------------

var defaultDisplayMap = {};

var getDefaultDisplay = nodeName => {
  var display;
  var element;

  if (!defaultDisplayMap[nodeName]) {
    element = document.createElement(nodeName);
    document.body.appendChild(element);
    display = getComputedStyle(element, '').getPropertyValue('display');
    element.parentNode.removeChild(element);

    if (display === 'none') {
      display = 'block';
    }

    defaultDisplayMap[nodeName] = display;
  }

  return defaultDisplayMap[nodeName];
};

var hideElement = el => {
  if (el.style.display !== 'none') {
    el.style.display = 'none';
  }

  return el;
};
var showElement = el => {
  if (el.style.display === 'none') {
    el.style.display = '';
  }

  if (getComputedStyle(el, '').getPropertyValue('display') === 'none') {
    // is hidden within tree
    el.style.display = getDefaultDisplay(el.nodeName);
  }

  return el;
};

exports.css = css;
exports.getDefaultView = getDefaultView;
exports.getHeight = getHeight;
exports.getOffset = getOffset;
exports.getStyle = getStyle;
exports.getWidth = getWidth;
exports.height = height;
exports.hideElement = hideElement;
exports.innerHeight = innerHeight;
exports.innerWidth = innerWidth;
exports.isCSSVariable = isCSSVariable;
exports.offset = offset;
exports.outerHeight = outerHeight;
exports.outerWidth = outerWidth;
exports.position = position;
exports.setHeight = setHeight;
exports.setOffset = setOffset;
exports.setStyle = setStyle;
exports.setWidth = setWidth;
exports.showElement = showElement;
exports.width = width;