@web-atoms/core/dist/web/styles/StyleBuilder.js

Web Atoms Core

System.register([], function (_export, _context) {
  "use strict";

  var StyleBuilder;
  function cssNumberToString(n, unit = "px") {
    if (typeof n === "number") {
      if (n === 0) {
        return n + "";
      }
      return n + unit;
    }
    return n;
  }
  _export({
    cssNumberToString: cssNumberToString,
    default: void 0
  });
  return {
    setters: [],
    execute: function () {
      _export("default", StyleBuilder = class StyleBuilder {
        static get newStyle() {
          return new StyleBuilder();
        }
        constructor(style) {
          this.style = style;
          this.style = this.style || {};
        }
        toStyle() {
          return this.style;
        }
        size(width, height) {
          width = cssNumberToString(width);
          height = cssNumberToString(height);
          return this.merge({
            width,
            height
          });
        }
        roundBorder(radius) {
          radius = cssNumberToString(radius);
          return this.merge({
            borderRadius: radius,
            padding: radius
          });
        }
        border(borderWidth, borderColor, borderStyle = "solid") {
          borderWidth = cssNumberToString(borderWidth);
          return this.merge({
            borderWidth,
            borderStyle,
            borderColor
          });
        }
        center(width, height) {
          width = cssNumberToString(width);
          height = cssNumberToString(height);
          return this.merge({
            position: "absolute",
            left: 0,
            right: 0,
            top: 0,
            bottom: 0,
            width,
            height,
            margin: "auto"
          });
        }
        absolute(left, top, right, bottom) {
          left = cssNumberToString(left);
          top = cssNumberToString(top);
          if (right !== undefined) {
            right = cssNumberToString(right);
            bottom = cssNumberToString(bottom);
            return this.merge({
              position: "absolute",
              left,
              top,
              right,
              bottom
            });
          }
          return this.merge({
            position: "absolute",
            left,
            top
          });
        }
        merge(style) {
          return new StyleBuilder(Object.assign(Object.assign({}, this.style), style));
        }
      });
    }
  };
});
//# sourceMappingURL=StyleBuilder.js.map