@pluginjs/styled/dist/styled.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.
 */
(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@pluginjs/utils'), require('@pluginjs/is'), require('@pluginjs/dom')) :
  typeof define === 'function' && define.amd ? define(['exports', '@pluginjs/utils', '@pluginjs/is', '@pluginjs/dom'], factory) :
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@pluginjs/styled"] = {}, global["@pluginjs/utils"], global["@pluginjs/is"], global["@pluginjs/dom"]));
})(this, (function (exports, utils, is, dom) { 'use strict';

  var getDefaultView = function getDefaultView(el) {
    var view = el.ownerDocument.defaultView;

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

    return view;
  };

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

  var isCSSVariable = function isCSSVariable(name) {
    return /^--/.test(name);
  };
  var setStyle = function 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 = function getStyle(key, el) {
    var value;

    if (is.isArray(key)) {
      value = {};
      key.forEach(function (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(function (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 _getStyle = getStyle(['marginTop', 'marginBottom'], el),
          marginTop = _getStyle.marginTop,
          marginBottom = _getStyle.marginBottom;

      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 _getStyle2 = getStyle(['marginLeft', 'marginRight'], el),
          marginLeft = _getStyle2.marginLeft,
          marginRight = _getStyle2.marginRight;

      marginLeft = isFloat ? parseFloat(marginLeft, 10) : parseInt(marginLeft, 10);
      marginRight = isFloat ? parseFloat(marginRight, 10) : parseInt(marginRight, 10);
      return marginLeft + marginRight + offsetWidth;
    }

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

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

    return el.clientHeight;
  };
  var getWidth = function 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 _el$getBoundingClient = el.getBoundingClientRect(),
        width = _el$getBoundingClient.width;

    var _getStyle3 = getStyle(['paddingLeft', 'paddingRight'], el),
        paddingLeft = _getStyle3.paddingLeft,
        paddingRight = _getStyle3.paddingRight;

    width = width - parseInt(paddingLeft, 10) - parseInt(paddingRight, 10);

    if (getStyle('boxSizing', el) === 'border-box') {
      var _getStyle4 = getStyle(['borderLeftWidth', 'borderRightWidth'], el),
          borderLeftWidth = _getStyle4.borderLeftWidth,
          borderRightWidth = _getStyle4.borderRightWidth;

      width = width - parseInt(borderLeftWidth, 10) - parseInt(borderRightWidth, 10);
    }

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

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

      value += paddingLeft + paddingRight + borderLeftWidth + borderRightWidth;
    }

    return setStyle('width', value, el);
  };
  var width = function 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 = function 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 _el$getBoundingClient2 = el.getBoundingClientRect(),
        height = _el$getBoundingClient2.height;

    var _getStyle6 = getStyle(['paddingTop', 'paddingBottom'], el),
        paddingTop = _getStyle6.paddingTop,
        paddingBottom = _getStyle6.paddingBottom;

    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 = function setHeight(value, el) {
    if (el.nodeType !== 1) {
      return el;
    }

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

      value += paddingTop + paddingBottom + borderTopHeight + borderBottomHeight;
    }

    return setStyle('height', value, el);
  };
  var height = function 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 = function getOffset(el) {
    var box = el.getBoundingClientRect();
    var win = getDefaultView(el);
    return {
      top: box.top + win.pageYOffset,
      left: box.left + win.pageXOffset
    };
  };
  var setOffset = function 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 = function 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 = function 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 = function 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 = function hideElement(el) {
    if (el.style.display !== 'none') {
      el.style.display = 'none';
    }

    return el;
  };
  var showElement = function 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;

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

}));