text: import styles from './styles/shimmer.module.scss';
  // These constants are taken from generic shimmer design.
  var SHIMMER_WIDTH_DEFAULT = 100;
  var SHIMMER_HEIGHT_DEFAULT = 100;
  var SHIMMER_RECTANGLE_HEIGHT_MAX = 16;
  var SHIMMER_RECTANGLE_COUNT = 4;
  var SHIMMER_ELEMENT_COUNT = 2 * SHIMMER_RECTANGLE_COUNT + 1;
  var RECTANGLE_X = 8;
  var SHIMMER_MAIN_RECTANGLE_SIZE_RATIO = 0.9;
  var RECTANGLE_1_LENGTH = 20;
  var RECTANGLE_2_LENGTH = 40;
  var RECTANGLE_3_LENGTH = 90;
  var RECTANGLE_4_LENGTH = 80;
  /**
   * Class to create shimmers for applications.
   *
   * @internal
   */
  var ShimmerFactory = /** @class */ (function () {
      function ShimmerFactory() {
      }
      /**
       *  Method that creates a shimmer for applications using an svg.
       * @param width - Width of the shimmer
       * @param height - Height of the shimmer
       * @param componentTag - ID for the shimmer
       * @param loadingMessage - Displays message when the shimmer loads
       */
      ShimmerFactory.createShimmer = function (width, height, componentTag, loadingMessage, containerMargin) {
          if (containerMargin === void 0) { containerMargin = undefined; }
          width = width || SHIMMER_WIDTH_DEFAULT;
          height = height || SHIMMER_HEIGHT_DEFAULT;
          var shimmerContainerDiv = document.createElement('div');
          shimmerContainerDiv.className = styles.shimmerContainer;
          var shimmerDiv = document.createElement('div');
          var mainRectangleHeight = height * SHIMMER_MAIN_RECTANGLE_SIZE_RATIO;
          var rectangleHeight = mainRectangleHeight / SHIMMER_ELEMENT_COUNT;
          rectangleHeight = Math.min(SHIMMER_RECTANGLE_HEIGHT_MAX, rectangleHeight);
          var gap = 2 * rectangleHeight;
          var rectangle1Y = rectangleHeight;
          var rectangle2Y = rectangle1Y + gap;
          var rectangle3Y = rectangle2Y + gap;
          var rectangle4Y = rectangle3Y + gap;
          var className = styles.shimmerElementFill;
          /* tslint:disable:max-line-length */
          shimmerDiv.innerHTML =
              "<svg width=" + width + " height=" + height + " viewBox=\"0 0 " + width + " " + height + "\" version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n        <title>" + loadingMessage + "</title>\n        <g id=" + componentTag + "_Shimmer stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n          <rect x=\"0\" y=\"0\" width=" + width + " height=" + height + "></rect>\n          " + ShimmerFactory._shimmerRect(componentTag + '_1', className, RECTANGLE_X, rectangle1Y, RECTANGLE_1_LENGTH, rectangleHeight) + "\n          " + ShimmerFactory._shimmerRect(componentTag + '_2', className, RECTANGLE_X, rectangle2Y, RECTANGLE_2_LENGTH, rectangleHeight) + "\n          " + ShimmerFactory._shimmerRect(componentTag + '_3', className, RECTANGLE_X, rectangle3Y, RECTANGLE_3_LENGTH, rectangleHeight) + "\n          " + ShimmerFactory._shimmerRect(componentTag + '_4', className, RECTANGLE_X, rectangle4Y, RECTANGLE_4_LENGTH, rectangleHeight) + "\n        </g>\n      </svg>";
          if (containerMargin !== undefined) {
              shimmerContainerDiv.style.margin = containerMargin + '';
          }
          /* tslint:enable:max-line-length */
          shimmerContainerDiv.appendChild(shimmerDiv);
          var shimmerAccessibilityContainerDiv = document.createElement('div');
          shimmerAccessibilityContainerDiv.setAttribute('role', 'status');
          shimmerAccessibilityContainerDiv.setAttribute('aria-live', 'polite');
          shimmerContainerDiv.appendChild(shimmerAccessibilityContainerDiv);
          return shimmerContainerDiv;
      };
      ShimmerFactory._shimmerRect = function (id, className, x, y, width, height) {
          return "<rect id=" + id + " class=" + className + " x=" + x + " y=" + y + " width=\"" + width + "%\" height=" + height + ">\n      <animate\n      attributeName=\"opacity\"\n      dur=\"1s\"\n      values=\"0.2;0.5;0.9\"\n      repeatCount=\"indefinite\"\n      begin=\"0\"/>\n    </rect>";
      };
      return ShimmerFactory;
  }());
  export default ShimmerFactory;
  //# sourceMappingURL=ShimmerFactory.js.map