@letscooee/web-sdk 0.0.2 → 0.0.6

package/dist/models/trigger/elements/shape-element.js

@@ -0,0 +1,24 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { BaseElement } from './base-element';
+var ShapeElement = /** @class */ (function (_super) {
+    __extends(ShapeElement, _super);
+    function ShapeElement(data) {
+        return _super.call(this, data) || this;
+    }
+    return ShapeElement;
+}(BaseElement));
+export { ShapeElement };

package/dist/models/trigger/elements/text-element.js

@@ -0,0 +1,81 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { Color } from '../blocks';
+import { BaseElement } from './base-element';
+var TextElement = /** @class */ (function (_super) {
+    __extends(TextElement, _super);
+    function TextElement(data) {
+        var _this = _super.call(this, data) || this;
+        _this.alg = TextAlign.START;
+        _this.prs = data.prs;
+        _this.alg = data.alg;
+        if (data.f)
+            _this.f = data.f;
+        if (data.c)
+            _this.c = new Color(data.c);
+        return _this;
+    }
+    Object.defineProperty(TextElement.prototype, "parts", {
+        get: function () {
+            return this.prs;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TextElement.prototype, "color", {
+        get: function () {
+            return this.c;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TextElement.prototype, "font", {
+        get: function () {
+            return this.f;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return TextElement;
+}(BaseElement));
+export { TextElement };
+var TextPart = /** @class */ (function () {
+    function TextPart(data) {
+        this.txt = data.text;
+        this.b = data.b;
+        this.i = data.i;
+        this.u = data.u;
+        this.st = data.st;
+        this.sc = data.sc;
+    }
+    return TextPart;
+}());
+export { TextPart };
+/* eslint-disable no-unused-vars */
+export var TextAlign;
+(function (TextAlign) {
+    TextAlign[TextAlign["START"] = 0] = "START";
+    TextAlign[TextAlign["CENTER"] = 1] = "CENTER";
+    TextAlign[TextAlign["END"] = 2] = "END";
+    TextAlign[TextAlign["JUSTIFY"] = 3] = "JUSTIFY";
+})(TextAlign || (TextAlign = {}));
+export var TextScript;
+(function (TextScript) {
+    TextScript[TextScript["NORMAL"] = 0] = "NORMAL";
+    TextScript[TextScript["SUPER"] = 1] = "SUPER";
+    TextScript[TextScript["SUB"] = 2] = "SUB";
+})(TextScript || (TextScript = {}));
+/* eslint-enable no-unused-vars */

package/dist/models/trigger/inapp/container.js

@@ -0,0 +1,24 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { BaseElement } from '../elements';
+var Container = /** @class */ (function (_super) {
+    __extends(Container, _super);
+    function Container(data) {
+        return _super.call(this, data) || this;
+    }
+    return Container;
+}(BaseElement));
+export { Container };

package/dist/models/trigger/inapp/in-app-trigger.js

@@ -0,0 +1,32 @@
+import { Container } from './container';
+import { ImageElement, ShapeElement, TextElement } from '../elements';
+import { ElementType } from '../elements/base-element';
+/**
+ * Stores data present in ian (In App) block in {@link TriggerData}
+ *
+ * @author Abhishek Taparia
+ * @version 0.0.5
+ */
+var InAppTrigger = /** @class */ (function () {
+    function InAppTrigger(data) {
+        var _this = this;
+        this.elems = [];
+        this.cont = new Container(data.cont);
+        data.elems.forEach(function (rawElement) {
+            if (rawElement.t === ElementType.IMAGE) {
+                _this.elems.push(new ImageElement(rawElement));
+            }
+            else if (rawElement.t === ElementType.TEXT) {
+                _this.elems.push(new TextElement(rawElement));
+            }
+            else if (rawElement.t === ElementType.BUTTON) {
+                _this.elems.push(new TextElement(rawElement));
+            }
+            else if (rawElement.t === ElementType.SHAPE) {
+                _this.elems.push(new ShapeElement(rawElement));
+            }
+        });
+    }
+    return InAppTrigger;
+}());
+export { InAppTrigger };

package/dist/models/trigger/inapp/layer.js

@@ -0,0 +1 @@
+export {};

package/dist/models/trigger/trigger-data.js

@@ -1,3 +1,4 @@
+import { InAppTrigger } from './inapp/in-app-trigger';
 /**
  * This store the payload sent by server to render trigger.
  */
@@ -5,12 +6,17 @@ var TriggerData = /** @class */ (function () {
     /**
      * Public constructor
      *
-     * @param {any} data payload
+     * @param {Props} data payload
      */
     function TriggerData(data) {
         this.duration = 0;
         this.id = data.id;
         this.duration = data.duration;
+        this.version = data.version;
+        this.engagementID = data.engagementID;
+        this.internal = data.internal;
+        this.pn = data.pn;
+        this.ian = new InAppTrigger(data.ian);
     }
     return TriggerData;
 }());

package/dist/renderer/base-text-renderer.js

@@ -0,0 +1,77 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { BlockProcessor } from './block-processor';
+import { TextAlign } from '../models/trigger/elements/text-element';
+/**
+ * Base class for rendering any text extending block from in-app.
+ *
+ * @author Abhishek Taparia
+ * @version 0.0.5
+ */
+var BaseTextRenderer = /** @class */ (function (_super) {
+    __extends(BaseTextRenderer, _super);
+    function BaseTextRenderer(parentElement, inappElement) {
+        return _super.call(this, parentElement, inappElement) || this;
+    }
+    /**
+     * Process all the common block in in-app.
+     */
+    BaseTextRenderer.prototype.processCommonBlocks = function () {
+        _super.prototype.processCommonBlocks.call(this);
+        this.processFontBlock();
+        this.processColourBlock(this.inappElement.color);
+        this.processAlignment();
+    };
+    /**
+     * Process font block of the element
+     */
+    BaseTextRenderer.prototype.processFontBlock = function () {
+        var font = this.inappElement.font;
+        if (!font) {
+            return;
+        }
+        this.renderer.setStyle(this.inappHTMLEl, 'font-size', this.getSizePx(font.s));
+        this.renderer.setStyle(this.inappHTMLEl, 'font-family', font.ff);
+        this.renderer.setStyle(this.inappHTMLEl, 'line-height', font.lh);
+    };
+    BaseTextRenderer.prototype.processPart = function (partHTMLEl, part) {
+        var _a;
+        var decoration = [];
+        if (part.u)
+            decoration.push('underline');
+        if (part.st)
+            decoration.push('line-through');
+        if (!decoration.length)
+            decoration.push('normal');
+        this.renderer.setStyle(partHTMLEl, 'font-weight', part.b ? 'bold' : 'normal');
+        this.renderer.setStyle(partHTMLEl, 'font-style', part.i ? 'italic' : 'normal');
+        this.renderer.setStyle(partHTMLEl, 'text-decoration', decoration.join(' '));
+        this.renderer.setStyle(partHTMLEl, 'color', (_a = part.c) !== null && _a !== void 0 ? _a : 'inherit');
+    };
+    /**
+     * Process text alignment block of the element
+     * @private
+     */
+    BaseTextRenderer.prototype.processAlignment = function () {
+        var _a;
+        var value = (_a = TextAlign[this.inappElement.alg]) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+        if (!value)
+            value = 'start';
+        this.renderer.setStyle(this.inappHTMLEl, 'text-align', value);
+    };
+    return BaseTextRenderer;
+}(BlockProcessor));
+export { BaseTextRenderer };

package/dist/renderer/block-processor.js

@@ -0,0 +1,234 @@
+import { Renderer } from './renderer';
+import UAParser from 'ua-parser-js';
+import { ClickActionExecutor } from '../models/trigger/action/click-action-executor';
+import { getScalingFactor } from './index';
+import { Container } from '../models/trigger/inapp/container';
+/**
+ * Process all the block of in-app
+ *
+ * @author Abhishek Taparia
+ * @version 0.0.5
+ */
+var BlockProcessor = /** @class */ (function () {
+    function BlockProcessor(parentHTMLEl, inappElement) {
+        this.screenWidth = 0;
+        this.screenHeight = 0;
+        this.scalingFactor = getScalingFactor();
+        this.parentHTMLEl = parentHTMLEl;
+        this.inappElement = inappElement;
+        this.renderer = new Renderer();
+        this.screenWidth = this.renderer.getWidth();
+        this.screenHeight = this.renderer.getHeight();
+    }
+    BlockProcessor.prototype.getHTMLElement = function () {
+        return this.inappHTMLEl;
+    };
+    BlockProcessor.prototype.insertElement = function () {
+        this.renderer.appendChild(this.parentHTMLEl, this.inappHTMLEl);
+    };
+    /**
+     * Process all the common blocks that can be placed in layer and container
+     */
+    BlockProcessor.prototype.processCommonBlocks = function () {
+        this.processWidthAndHeight();
+        this.processPositionBlock();
+        this.processBorderBlock();
+        this.processBackgroundBlock();
+        this.processSpaceBlock();
+        this.processTransformBlock();
+        this.registerAction();
+        this.renderer.setStyle(this.inappHTMLEl, 'overflow', 'visible');
+        this.renderer.setStyle(this.inappHTMLEl, 'outline', 'none');
+    };
+    /**
+     * Process width and height
+     */
+    BlockProcessor.prototype.processWidthAndHeight = function () {
+        this.renderer.setStyle(this.inappHTMLEl, 'box-sizing', 'border-box');
+        if (this.inappElement.w) {
+            this.renderer.setStyle(this.inappHTMLEl, 'width', this.getSizePx(this.inappElement.w));
+        }
+        if (this.inappElement.h) {
+            this.renderer.setStyle(this.inappHTMLEl, 'height', this.getSizePx(this.inappElement.h));
+        }
+    };
+    /**
+     * Get calculated size according to the device by multiplying it with scaling factor.
+     * @param {number} value size passed in payload
+     * @return number calculated size
+     */
+    BlockProcessor.prototype.getSizePx = function (value) {
+        return (value * this.scalingFactor) + 'px';
+    };
+    /**
+     * Process position block of the element
+     */
+    BlockProcessor.prototype.processPositionBlock = function () {
+        if (!this.inappElement.x) {
+            return;
+        }
+        this.renderer.setStyle(this.inappHTMLEl, 'position', 'absolute');
+        if (this.inappElement.x)
+            this.renderer.setStyle(this.inappHTMLEl, 'top', this.getSizePx(this.inappElement.y));
+        if (this.inappElement.y)
+            this.renderer.setStyle(this.inappHTMLEl, 'left', this.getSizePx(this.inappElement.x));
+    };
+    /**
+     * Process border block of the element
+     */
+    BlockProcessor.prototype.processBorderBlock = function () {
+        var _a;
+        var border = this.inappElement.br;
+        if (!border) {
+            return;
+        }
+        // Just to make sure radius is not a negative number
+        if (border.radius && border.radius > 0) {
+            this.renderer.setStyle(this.inappHTMLEl, 'border-radius', this.getSizePx(border.radius));
+        }
+        // Just to make sure width is not a negative number
+        if (border.width && border.width > 0) {
+            this.renderer.setStyle(this.inappHTMLEl, 'border-width', this.getSizePx(border.width));
+            this.renderer.setStyle(this.inappHTMLEl, 'border-style', (_a = border.style) === null || _a === void 0 ? void 0 : _a.toLowerCase());
+            if (border.color) {
+                this.processColourBlock(border.color, 'border-color');
+            }
+            else {
+                this.renderer.setStyle(this.inappHTMLEl, 'border-color', 'black');
+            }
+        }
+    };
+    /**
+     * Process space block of the element which include margin and padding.
+     */
+    BlockProcessor.prototype.processSpaceBlock = function () {
+        var space = this.inappElement.spc;
+        if (!space) {
+            return;
+        }
+        if (space.p)
+            this.renderer.setStyle(this.inappHTMLEl, 'padding', this.getSizePx(space.p));
+        if (space.pt)
+            this.renderer.setStyle(this.inappHTMLEl, 'padding-top', this.getSizePx(space.pt));
+        if (space.pb)
+            this.renderer.setStyle(this.inappHTMLEl, 'padding-bottom', this.getSizePx(space.pb));
+        if (space.pl)
+            this.renderer.setStyle(this.inappHTMLEl, 'padding-left', this.getSizePx(space.pl));
+        if (space.pr)
+            this.renderer.setStyle(this.inappHTMLEl, 'padding-right', this.getSizePx(space.pr));
+        this.renderer.setStyle(this.inappHTMLEl, 'margin', '0 !important');
+    };
+    /**
+     * Process transform block of the element
+     */
+    BlockProcessor.prototype.processTransformBlock = function () {
+        var transform = this.inappElement.trf;
+        if (!transform) {
+            return;
+        }
+        if (transform.rotate) {
+            this.renderer.setStyle(this.inappHTMLEl, 'transform', "rotate(" + transform.rotate + "deg)");
+        }
+    };
+    /**
+     * Register click-to-action(CTA) block of the element
+     */
+    BlockProcessor.prototype.registerAction = function () {
+        var action = this.inappElement.clc;
+        if (!action) {
+            return;
+        }
+        this.inappHTMLEl.addEventListener('click', function () {
+            new ClickActionExecutor(action).execute();
+        });
+    };
+    /**
+     * Process background block of the element
+     */
+    BlockProcessor.prototype.processBackgroundBlock = function () {
+        var _a;
+        var bg = this.inappElement.bg;
+        if (!bg) {
+            return;
+        }
+        var htmlElement = this.inappHTMLEl;
+        // For container, the background must be applied to its parent i.e. root container
+        if (this.inappElement instanceof Container) {
+            htmlElement = htmlElement.parentElement;
+        }
+        var prefix = '';
+        if ((_a = new UAParser().getBrowser().name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes('safari')) {
+            prefix = '-webkit-';
+        }
+        if (bg.glossy) {
+            this.renderer.setStyle(htmlElement, prefix + 'backdrop-filter', "blur(" + bg.glossy.radius + "px)");
+            if (bg.glossy.color) {
+                this.processColourBlock(bg.glossy.color, 'background', htmlElement);
+            }
+        }
+        else if (bg.solid) {
+            if (bg.solid.grad) {
+                this.processGradient(bg.solid.grad, 'background');
+            }
+            else if (bg.solid.hex) {
+                this.renderer.setStyle(htmlElement, 'background', bg.solid.rgba);
+            }
+        }
+        else if (bg.img) {
+            if (!bg.img.src) {
+                return;
+            }
+            var value = "url(\"" + bg.img.src + "\") no-repeat center";
+            this.renderer.setStyle(htmlElement, 'background', value);
+            this.renderer.setStyle(htmlElement, 'background-size', 'cover');
+            if (bg.img.a) {
+                this.renderer.setStyle(htmlElement, prefix + 'backdrop-filter', "opacity(" + bg.img.a + ")");
+            }
+        }
+    };
+    /**
+     * Process linear gradient and add to the element
+     * @param {Gradient} grad gradient value
+     * @param {string} attribute attribute on which gradient needs to be applied
+     * @private
+     */
+    BlockProcessor.prototype.processGradient = function (grad, attribute) {
+        if (grad.type === 'LINEAR') {
+            var linearFunctionString = "linear-gradient(" + grad.ang + "deg, " + grad.c1 + ", " + grad.c2;
+            if (grad.c3) {
+                linearFunctionString += ", " + grad.c3;
+            }
+            if (grad.c4) {
+                linearFunctionString += ", " + grad.c4;
+            }
+            if (grad.c5) {
+                linearFunctionString += ", " + grad.c5;
+            }
+            linearFunctionString += ")";
+            var gradient = linearFunctionString;
+            this.renderer.setStyle(this.inappHTMLEl, attribute, gradient);
+        }
+    };
+    /**
+     * Process colour block of the element
+     * @param {Color} colour colour data of the element
+     * @param {string} attribute attribute on which colour data need to be applied
+     * @param {HTMLElement} element Any other element to apply the color apart from {@link inappHTMLEl}
+     * @private
+     */
+    BlockProcessor.prototype.processColourBlock = function (colour, attribute, element) {
+        if (attribute === void 0) { attribute = 'color'; }
+        if (element === void 0) { element = this.inappHTMLEl; }
+        if (!colour) {
+            return;
+        }
+        if (colour.grad) {
+            this.processGradient(colour.grad, attribute);
+        }
+        else if (colour.hex) {
+            this.renderer.setStyle(element, attribute, colour.rgba);
+        }
+    };
+    return BlockProcessor;
+}());
+export { BlockProcessor };

package/dist/renderer/block-renderer.js

@@ -0,0 +1,44 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { BlockProcessor } from './block-processor';
+/**
+ * Base class for rendering any block from in-app.
+ *
+ * @author Abhishek Taparia
+ * @version 0.0.5
+ */
+var BlockRenderer = /** @class */ (function (_super) {
+    __extends(BlockRenderer, _super);
+    /**
+     * Public constructor
+     */
+    function BlockRenderer() {
+        return _super.call(this) || this;
+    }
+    /**
+     * Process all the common block in in-app.
+     * @param {HTMLElement} element element to be processed
+     * @param {BaseElement} baseElement style and attributes data of the element
+     */
+    BlockRenderer.prototype.commonRenderingFunction = function (element, baseElement) {
+        this.processCommonBlocks(element, baseElement);
+        if (baseElement.type) {
+            element.classList.add(baseElement.type);
+        }
+    };
+    return BlockRenderer;
+}(BlockProcessor));
+export { BlockRenderer };

package/dist/renderer/container-renderer.js

@@ -0,0 +1,45 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { ShapeRenderer } from './shape-renderer';
+/**
+ * Renders container element.
+ *
+ * @author Shashank Agrawal
+ * @version 0.0.5
+ */
+var ContainerRenderer = /** @class */ (function (_super) {
+    __extends(ContainerRenderer, _super);
+    function ContainerRenderer(parentElement, inappElement) {
+        var _this = _super.call(this, parentElement, inappElement) || this;
+        // Need to figure out the best way of doing this
+        _this.inappElement.w = 1080;
+        _this.inappElement.h = 1920;
+        return _this;
+    }
+    /**
+     * Render group element from layers list in {@link InAppTrigger} block.
+     * @return The instance of this renderer.
+     */
+    ContainerRenderer.prototype.render = function () {
+        _super.prototype.render.call(this);
+        this.renderer.setStyle(this.inappHTMLEl, 'position', 'relative');
+        /* this.renderer.setStyle(this.inappHTMLEl, 'width', '100%');
+        this.renderer.setStyle(this.inappHTMLEl, 'height', '100%'); */
+        return this;
+    };
+    return ContainerRenderer;
+}(ShapeRenderer));
+export { ContainerRenderer };

package/dist/renderer/group-renderer.js

@@ -0,0 +1,44 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { BlockRenderer } from './block-renderer';
+/**
+ * Renders group element present in in-app layer block.
+ *
+ * @author Abhishek Taparia
+ * @version 0.0.5
+ */
+var GroupRenderer = /** @class */ (function (_super) {
+    __extends(GroupRenderer, _super);
+    function GroupRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    /**
+     * Render group element from layers list in {@link InAppTrigger} block.
+     * @param {HTMLElement} parent
+     * @param {GroupElement} elementData style and attributes data of the group element
+     * @return {HTMLElement} rendered group element
+     */
+    GroupRenderer.prototype.render = function (parent, elementData) {
+        var newElement = this.renderer.createElement('div');
+        // By default the parents will be relative
+        this.renderer.setStyle(newElement, 'position', 'relative');
+        this.commonRenderingFunction(newElement, elementData);
+        this.renderer.appendChild(parent, newElement);
+        return newElement;
+    };
+    return GroupRenderer;
+}(BlockRenderer));
+export { GroupRenderer };