solid-fa/dist/solid-fa.cjs.js

Tiny FontAwesome component for SolidJS

'use strict';

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

var web = require('solid-js/web');
var solidJs = require('solid-js');

function _extends() {
  _extends = Object.assign || function (target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];

      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }

    return target;
  };

  return _extends.apply(this, arguments);
}

var parseNumber = parseFloat;
function joinCss(obj, separator) {
  if (separator === void 0) {
    separator = ';';
  }

  var texts;

  if (Array.isArray(obj)) {
    texts = obj.filter(function (text) {
      return text;
    });
  } else {
    texts = [];

    for (var prop in obj) {
      if (obj[prop]) {
        texts.push(prop + ":" + obj[prop]);
      }
    }
  }

  return texts.join(separator);
}
function getStyles(size, pull, fw) {
  var float;
  var width;
  var height = '1em';
  var lineHeight;
  var fontSize;
  var textAlign;
  var verticalAlign = '-.125em';
  var overflow = 'visible';

  if (fw) {
    textAlign = 'center';
    width = '1.25em';
  }

  if (pull) {
    float = pull;
  }

  if (size) {
    if (size === 'lg') {
      fontSize = '1.33333em';
      lineHeight = '.75em';
      verticalAlign = '-.225em';
    } else if (size === 'xs') {
      fontSize = '.75em';
    } else if (size === 'sm') {
      fontSize = '.875em';
    } else {
      fontSize = size.replace('x', 'em');
    }
  }

  return {
    float: float,
    width: width,
    height: height,
    'line-height': lineHeight,
    'font-size': fontSize,
    'text-align': textAlign,
    'vertical-align': verticalAlign,
    'transform-origin': 'center',
    overflow: overflow
  };
}
function getTransform(scale, translateX, translateY, rotate, flip, translateTimes, translateUnit, rotateUnit) {
  if (translateTimes === void 0) {
    translateTimes = 1;
  }

  if (translateUnit === void 0) {
    translateUnit = '';
  }

  if (rotateUnit === void 0) {
    rotateUnit = '';
  }

  var flipX = 1;
  var flipY = 1;

  if (flip) {
    if (flip === 'horizontal') {
      flipX = -1;
    } else if (flip === 'vertical') {
      flipY = -1;
    } else {
      flipX = flipY = -1;
    }
  }

  return joinCss(["translate(" + parseNumber(translateX) * translateTimes + translateUnit + "," + parseNumber(translateY) * translateTimes + translateUnit + ")", "scale(" + flipX * parseNumber(scale) + "," + flipY * parseNumber(scale) + ")", rotate && "rotate(" + rotate + rotateUnit + ")"], ' ');
}

function styleInject(css, ref) {
  if (ref === void 0) ref = {};
  var insertAt = ref.insertAt;

  if (!css || typeof document === 'undefined') {
    return;
  }

  var head = document.head || document.getElementsByTagName('head')[0];
  var style = document.createElement('style');
  style.type = 'text/css';

  if (insertAt === 'top') {
    if (head.firstChild) {
      head.insertBefore(style, head.firstChild);
    } else {
      head.appendChild(style);
    }
  } else {
    head.appendChild(style);
  }

  if (style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
}

var css_248z$1 = "._1yhTRa{animation:_1yhTRa 2s linear 0s infinite}._2dBo7A{animation:_1yhTRa 1s steps(8) infinite}@keyframes _1yhTRa{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}";
var style$1 = {"spin":"_1yhTRa","pulse":"_2dBo7A"};
styleInject(css_248z$1);

const _tmpl$$2 = web.template(`<svg><path></path></svg>`, 4, true),
      _tmpl$2 = web.template(`<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><g><g></g></g></svg>`, 6);
function Fa(props) {
  props = solidJs.mergeProps({
    scale: 1,
    translateX: 0,
    translateY: 0,
    primaryOpacity: 1,
    secondaryOpacity: 0.4
  }, props);
  var i = solidJs.createMemo(function () {
    var _props$icon;

    return ((_props$icon = props.icon) == null ? void 0 : _props$icon.icon) || [0, 0, '', [], ''];
  });
  var s = solidJs.createMemo(function () {
    return getStyles(props.size, props.pull, props.fw);
  });
  var transform = solidJs.createMemo(function () {
    return getTransform(props.scale, props.translateX, props.translateY, props.rotate, props.flip, 512);
  });
  return function () {
    var _el$ = _tmpl$2.cloneNode(true),
        _el$2 = _el$.firstChild,
        _el$3 = _el$2.firstChild;

    web.insert(_el$3, web.createComponent(solidJs.Show, {
      get when() {
        return typeof i()[4] === 'string';
      },

      get fallback() {
        return [function () {
          var _el$5 = _tmpl$$2.cloneNode(true);

          web.effect(function (_p$) {
            var _v$11 = i()[4][0],
                _v$12 = props.secondaryColor || props.color || 'currentColor',
                _v$13 = props.swapOpacity != false ? props.primaryOpacity : props.secondaryOpacity,
                _v$14 = "translate(" + i()[0] / -2 + " " + i()[1] / -2 + ")";

            _v$11 !== _p$._v$11 && web.setAttribute(_el$5, "d", _p$._v$11 = _v$11);
            _v$12 !== _p$._v$12 && web.setAttribute(_el$5, "fill", _p$._v$12 = _v$12);
            _v$13 !== _p$._v$13 && web.setAttribute(_el$5, "fill-opacity", _p$._v$13 = _v$13);
            _v$14 !== _p$._v$14 && web.setAttribute(_el$5, "transform", _p$._v$14 = _v$14);
            return _p$;
          }, {
            _v$11: undefined,
            _v$12: undefined,
            _v$13: undefined,
            _v$14: undefined
          });

          return _el$5;
        }(), function () {
          var _el$6 = _tmpl$$2.cloneNode(true);

          web.effect(function (_p$) {
            var _v$15 = i()[4][1],
                _v$16 = props.primaryColor || props.color || 'currentColor',
                _v$17 = props.swapOpacity != false ? props.secondaryOpacity : props.primaryOpacity,
                _v$18 = "translate(" + i()[0] / -2 + " " + i()[1] / -2 + ")";

            _v$15 !== _p$._v$15 && web.setAttribute(_el$6, "d", _p$._v$15 = _v$15);
            _v$16 !== _p$._v$16 && web.setAttribute(_el$6, "fill", _p$._v$16 = _v$16);
            _v$17 !== _p$._v$17 && web.setAttribute(_el$6, "fill-opacity", _p$._v$17 = _v$17);
            _v$18 !== _p$._v$18 && web.setAttribute(_el$6, "transform", _p$._v$18 = _v$18);
            return _p$;
          }, {
            _v$15: undefined,
            _v$16: undefined,
            _v$17: undefined,
            _v$18: undefined
          });

          return _el$6;
        }()];
      },

      get children() {
        var _el$4 = _tmpl$$2.cloneNode(true);

        web.effect(function (_p$) {
          var _v$ = i()[4],
              _v$2 = props.color || props.primaryColor || 'currentColor',
              _v$3 = "translate(" + i()[0] / -2 + " " + i()[1] / -2 + ")";

          _v$ !== _p$._v$ && web.setAttribute(_el$4, "d", _p$._v$ = _v$);
          _v$2 !== _p$._v$2 && web.setAttribute(_el$4, "fill", _p$._v$2 = _v$2);
          _v$3 !== _p$._v$3 && web.setAttribute(_el$4, "transform", _p$._v$3 = _v$3);
          return _p$;
        }, {
          _v$: undefined,
          _v$2: undefined,
          _v$3: undefined
        });

        return _el$4;
      }

    }));

    web.effect(function (_p$) {
      var _extends2;

      var _v$4 = _extends((_extends2 = {
        'solid-fa': true
      }, _extends2[style$1.spin] = props.spin, _extends2[style$1.pulse] = props.pulse, _extends2), props.classList),
          _v$5 = props.class,
          _v$6 = s(),
          _v$7 = "0 0 " + i()[0] + " " + i()[1],
          _v$8 = "translate(" + i()[0] / 2 + " " + i()[1] / 2 + ")",
          _v$9 = i()[0] / 4 + " 0",
          _v$10 = transform();

      _p$._v$4 = web.classList(_el$, _v$4, _p$._v$4);
      _v$5 !== _p$._v$5 && web.setAttribute(_el$, "class", _p$._v$5 = _v$5);
      _p$._v$6 = web.style(_el$, _v$6, _p$._v$6);
      _v$7 !== _p$._v$7 && web.setAttribute(_el$, "viewBox", _p$._v$7 = _v$7);
      _v$8 !== _p$._v$8 && web.setAttribute(_el$2, "transform", _p$._v$8 = _v$8);
      _v$9 !== _p$._v$9 && web.setAttribute(_el$2, "transform-origin", _p$._v$9 = _v$9);
      _v$10 !== _p$._v$10 && web.setAttribute(_el$3, "transform", _p$._v$10 = _v$10);
      return _p$;
    }, {
      _v$4: undefined,
      _v$5: undefined,
      _v$6: undefined,
      _v$7: undefined,
      _v$8: undefined,
      _v$9: undefined,
      _v$10: undefined
    });

    return _el$;
  }();
}

var css_248z = "._2RIh6I{display:inline-block;position:relative}._2RIh6I .solid-fa{position:absolute;bottom:0;left:0;right:0;top:0;margin:auto;text-align:center}._2RIh6I .solid-fa-layers-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}._2RIh6I .solid-fa-layers-text span{display:inline-block}";
var style = {"layers":"_2RIh6I"};
styleInject(css_248z);

const _tmpl$$1 = web.template(`<span></span>`, 2);
function FaLayers(props) {
  var s = solidJs.createMemo(function () {
    return getStyles(props.size, props.pull, true);
  });
  return function () {
    var _el$ = _tmpl$$1.cloneNode(true);

    web.insert(_el$, function () {
      return props.children;
    });

    web.effect(function (_p$) {
      var _v$3;

      var _v$ = (_v$3 = {}, _v$3[style.layers] = true, _v$3),
          _v$2 = s();

      _p$._v$ = web.classList(_el$, _v$, _p$._v$);
      _p$._v$2 = web.style(_el$, _v$2, _p$._v$2);
      return _p$;
    }, {
      _v$: undefined,
      _v$2: undefined
    });

    return _el$;
  }();
}

const _tmpl$ = web.template(`<span class="solid-fa-layers-text"><span></span></span>`, 4);
function FaLayersText(props) {
  props = solidJs.mergeProps({
    scale: 1,
    translateX: 0,
    translateY: 0
  }, props);
  var s = solidJs.createMemo(function () {
    return _extends({}, getStyles(props.size), {
      color: props.color,
      display: 'inline-block',
      height: 'auto',
      transform: getTransform(props.scale, props.translateX, props.translateY, props.rotate, props.flip, undefined, 'em', 'deg')
    });
  });
  return function () {
    var _el$ = _tmpl$.cloneNode(true),
        _el$2 = _el$.firstChild;

    web.insert(_el$2, function () {
      return props.children;
    });

    web.effect(function (_$p) {
      return web.style(_el$2, s(), _$p);
    });

    return _el$;
  }();
}

exports.Fa = Fa;
exports.FaLayers = FaLayers;
exports.FaLayersText = FaLayersText;
exports.default = Fa;