@sitecore-jss/sitecore-jss-angular 13.2.4 → 13.2.5-canary.2

package/dist/bundles/sitecore-jss-sitecore-jss-angular.umd.js

@@ -201,1204 +201,1204 @@
         return (mod && mod.__esModule) ? mod : { default: mod };
     }
 
-    /**
-     * File fields cannot be managed via the EE. We never output "editable."
-     */
-    var FileDirective = /** @class */ (function () {
-        function FileDirective(viewContainer, templateRef) {
-            this.viewContainer = viewContainer;
-            this.templateRef = templateRef;
-        }
-        FileDirective.prototype.ngOnChanges = function (changes) {
-            if (changes['field']) {
-                if (!this.viewRef) {
-                    this.viewContainer.clear();
-                    this.viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
-                }
-                this.updateView();
-            }
-        };
-        FileDirective.prototype.updateView = function () {
-            var field = this.field;
-            if (!field || (!field.value && !field.src)) {
-                return;
-            }
-            var file = field.src ? field : field.value;
-            this.viewRef.rootNodes.forEach(function (node) {
-                node.href = file.src;
-                if (node.innerHTML === '') {
-                    node.innerHTML = file.title || file.displayName;
-                }
-            });
-        };
-        FileDirective.ctorParameters = function () { return [
-            { type: core.ViewContainerRef },
-            { type: core.TemplateRef }
-        ]; };
-        __decorate([
-            core.Input('scFile')
-        ], FileDirective.prototype, "field", void 0);
-        FileDirective = __decorate([
-            core.Directive({ selector: '[scFile]' })
-        ], FileDirective);
-        return FileDirective;
+    /**
+     * File fields cannot be managed via the EE. We never output "editable."
+     */
+    var FileDirective = /** @class */ (function () {
+        function FileDirective(viewContainer, templateRef) {
+            this.viewContainer = viewContainer;
+            this.templateRef = templateRef;
+        }
+        FileDirective.prototype.ngOnChanges = function (changes) {
+            if (changes['field']) {
+                if (!this.viewRef) {
+                    this.viewContainer.clear();
+                    this.viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
+                }
+                this.updateView();
+            }
+        };
+        FileDirective.prototype.updateView = function () {
+            var field = this.field;
+            if (!field || (!field.value && !field.src)) {
+                return;
+            }
+            var file = field.src ? field : field.value;
+            this.viewRef.rootNodes.forEach(function (node) {
+                node.href = file.src;
+                if (node.innerHTML === '') {
+                    node.innerHTML = file.title || file.displayName;
+                }
+            });
+        };
+        FileDirective.ctorParameters = function () { return [
+            { type: core.ViewContainerRef },
+            { type: core.TemplateRef }
+        ]; };
+        __decorate([
+            core.Input('scFile')
+        ], FileDirective.prototype, "field", void 0);
+        FileDirective = __decorate([
+            core.Directive({ selector: '[scFile]' })
+        ], FileDirective);
+        return FileDirective;
     }());
 
-    var ImageDirective = /** @class */ (function () {
-        function ImageDirective(viewContainer, templateRef, renderer, elementRef) {
-            this.viewContainer = viewContainer;
-            this.templateRef = templateRef;
-            this.renderer = renderer;
-            this.elementRef = elementRef;
-            this.inlineRef = null;
-            // tslint:disable-next-line:no-input-rename
-            this.editable = true;
-            // tslint:disable-next-line:no-input-rename
-            this.urlParams = {};
-            // tslint:disable-next-line:no-input-rename
-            this.attrs = {};
-        }
-        ImageDirective.prototype.ngOnChanges = function (changes) {
-            if (changes['field'] || changes['editable'] || changes['urlParams'] || changes['attrs']) {
-                this.viewContainer.clear();
-                if (this.inlineRef) {
-                    this.inlineRef.remove();
-                    this.inlineRef = null;
-                }
-                this.updateView();
-            }
-        };
-        ImageDirective.prototype.updateView = function () {
-            var overrideAttrs = __assign({}, this.getElementAttrs(), this.attrs);
-            var media = this.field;
-            if (!media || (!media.editable && !media.value && !media.src)) {
-                return;
-            }
-            var attrs = {};
-            // we likely have an experience editor value, should be a string
-            if (this.editable && media.editable) {
-                var foundImg = sitecoreJss.mediaApi.findEditorImageTag(media.editable);
-                if (!foundImg) {
-                    return this.renderInlineWrapper(media.editable);
-                }
-                attrs = this.getImageAttrs(foundImg.attrs, overrideAttrs, this.urlParams);
-                if (!attrs) {
-                    return this.renderInlineWrapper(media.editable);
-                }
-                var tempImg_1 = this.renderer.createElement('img');
-                Object.entries(attrs).forEach(function (_a) {
-                    var _b = __read(_a, 2), key = _b[0], attrValue = _b[1];
-                    return tempImg_1.setAttribute(key, attrValue);
-                });
-                var editableMarkup = media.editable.replace(foundImg.imgTag, tempImg_1.outerHTML);
-                return this.renderInlineWrapper(editableMarkup);
-            }
-            // some wise-guy/gal is passing in a 'raw' image object value
-            var img = media.src ? media : media.value;
-            if (!img) {
-                return null;
-            }
-            attrs = this.getImageAttrs(img, overrideAttrs, this.urlParams);
-            if (attrs) {
-                this.renderTemplate(attrs);
-            }
-        };
-        ImageDirective.prototype.getImageAttrs = function (fieldAttrs, parsedAttrs, imageParams) {
-            var combinedAttrs = __assign({}, fieldAttrs, parsedAttrs);
-            // tslint:disable-next-line:prefer-const
-            var src = combinedAttrs.src, srcSet = combinedAttrs.srcSet, otherAttrs = __rest(combinedAttrs, ["src", "srcSet"]);
-            if (!src) {
-                return null;
-            }
-            var newAttrs = __assign({}, otherAttrs);
-            // update image URL for jss handler and image rendering params
-            src = sitecoreJss.mediaApi.updateImageUrl(src, imageParams);
-            if (srcSet) {
-                // replace with HTML-formatted srcset, including updated image URLs
-                newAttrs.srcSet = sitecoreJss.mediaApi.getSrcSet(src, srcSet, imageParams);
-            }
-            else {
-                newAttrs.src = src;
-            }
-            return newAttrs;
-        };
-        ImageDirective.prototype.renderTemplate = function (imageProps) {
-            var _this = this;
-            var viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
-            viewRef.rootNodes.forEach(function (node) {
-                Object.entries(imageProps).forEach(function (_a) {
-                    var _b = __read(_a, 2), key = _b[0], imgPropVal = _b[1];
-                    return _this.renderer.setAttribute(node, key, imgPropVal);
-                });
-            });
-        };
-        ImageDirective.prototype.getElementAttrs = function () {
-            var view = this.templateRef.createEmbeddedView(null);
-            var element = view.rootNodes[0];
-            if (!element) {
-                return {};
-            }
-            var attrs = {};
-            for (var i = 0; i < element.attributes.length; i++) {
-                var attr = element.attributes.item(i);
-                if (attr) {
-                    attrs[attr.name] = attr.value;
-                }
-            }
-            return attrs;
-        };
-        ImageDirective.prototype.renderInlineWrapper = function (editable) {
-            var span = this.renderer.createElement('span');
-            span.className = 'sc-image-wrapper';
-            span.innerHTML = editable;
-            var parentNode = this.renderer.parentNode(this.elementRef.nativeElement);
-            this.renderer.insertBefore(parentNode, span, this.elementRef.nativeElement);
-            parentNode.removeChild(this.elementRef.nativeElement);
-            this.inlineRef = span;
-        };
-        ImageDirective.ctorParameters = function () { return [
-            { type: core.ViewContainerRef },
-            { type: core.TemplateRef },
-            { type: core.Renderer2 },
-            { type: core.ElementRef }
-        ]; };
-        __decorate([
-            core.Input('scImage')
-        ], ImageDirective.prototype, "field", void 0);
-        __decorate([
-            core.Input('scImageEditable')
-        ], ImageDirective.prototype, "editable", void 0);
-        __decorate([
-            core.Input('scImageUrlParams')
-        ], ImageDirective.prototype, "urlParams", void 0);
-        __decorate([
-            core.Input('scImageAttrs')
-        ], ImageDirective.prototype, "attrs", void 0);
-        ImageDirective = __decorate([
-            core.Directive({ selector: '[scImage]' })
-        ], ImageDirective);
-        return ImageDirective;
+    var ImageDirective = /** @class */ (function () {
+        function ImageDirective(viewContainer, templateRef, renderer, elementRef) {
+            this.viewContainer = viewContainer;
+            this.templateRef = templateRef;
+            this.renderer = renderer;
+            this.elementRef = elementRef;
+            this.inlineRef = null;
+            // tslint:disable-next-line:no-input-rename
+            this.editable = true;
+            // tslint:disable-next-line:no-input-rename
+            this.urlParams = {};
+            // tslint:disable-next-line:no-input-rename
+            this.attrs = {};
+        }
+        ImageDirective.prototype.ngOnChanges = function (changes) {
+            if (changes['field'] || changes['editable'] || changes['urlParams'] || changes['attrs']) {
+                this.viewContainer.clear();
+                if (this.inlineRef) {
+                    this.inlineRef.remove();
+                    this.inlineRef = null;
+                }
+                this.updateView();
+            }
+        };
+        ImageDirective.prototype.updateView = function () {
+            var overrideAttrs = __assign({}, this.getElementAttrs(), this.attrs);
+            var media = this.field;
+            if (!media || (!media.editable && !media.value && !media.src)) {
+                return;
+            }
+            var attrs = {};
+            // we likely have an experience editor value, should be a string
+            if (this.editable && media.editable) {
+                var foundImg = sitecoreJss.mediaApi.findEditorImageTag(media.editable);
+                if (!foundImg) {
+                    return this.renderInlineWrapper(media.editable);
+                }
+                attrs = this.getImageAttrs(foundImg.attrs, overrideAttrs, this.urlParams);
+                if (!attrs) {
+                    return this.renderInlineWrapper(media.editable);
+                }
+                var tempImg_1 = this.renderer.createElement('img');
+                Object.entries(attrs).forEach(function (_a) {
+                    var _b = __read(_a, 2), key = _b[0], attrValue = _b[1];
+                    return tempImg_1.setAttribute(key, attrValue);
+                });
+                var editableMarkup = media.editable.replace(foundImg.imgTag, tempImg_1.outerHTML);
+                return this.renderInlineWrapper(editableMarkup);
+            }
+            // some wise-guy/gal is passing in a 'raw' image object value
+            var img = media.src ? media : media.value;
+            if (!img) {
+                return null;
+            }
+            attrs = this.getImageAttrs(img, overrideAttrs, this.urlParams);
+            if (attrs) {
+                this.renderTemplate(attrs);
+            }
+        };
+        ImageDirective.prototype.getImageAttrs = function (fieldAttrs, parsedAttrs, imageParams) {
+            var combinedAttrs = __assign({}, fieldAttrs, parsedAttrs);
+            // tslint:disable-next-line:prefer-const
+            var src = combinedAttrs.src, srcSet = combinedAttrs.srcSet, otherAttrs = __rest(combinedAttrs, ["src", "srcSet"]);
+            if (!src) {
+                return null;
+            }
+            var newAttrs = __assign({}, otherAttrs);
+            // update image URL for jss handler and image rendering params
+            src = sitecoreJss.mediaApi.updateImageUrl(src, imageParams);
+            if (srcSet) {
+                // replace with HTML-formatted srcset, including updated image URLs
+                newAttrs.srcSet = sitecoreJss.mediaApi.getSrcSet(src, srcSet, imageParams);
+            }
+            else {
+                newAttrs.src = src;
+            }
+            return newAttrs;
+        };
+        ImageDirective.prototype.renderTemplate = function (imageProps) {
+            var _this = this;
+            var viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
+            viewRef.rootNodes.forEach(function (node) {
+                Object.entries(imageProps).forEach(function (_a) {
+                    var _b = __read(_a, 2), key = _b[0], imgPropVal = _b[1];
+                    return _this.renderer.setAttribute(node, key, imgPropVal);
+                });
+            });
+        };
+        ImageDirective.prototype.getElementAttrs = function () {
+            var view = this.templateRef.createEmbeddedView(null);
+            var element = view.rootNodes[0];
+            if (!element) {
+                return {};
+            }
+            var attrs = {};
+            for (var i = 0; i < element.attributes.length; i++) {
+                var attr = element.attributes.item(i);
+                if (attr) {
+                    attrs[attr.name] = attr.value;
+                }
+            }
+            return attrs;
+        };
+        ImageDirective.prototype.renderInlineWrapper = function (editable) {
+            var span = this.renderer.createElement('span');
+            span.className = 'sc-image-wrapper';
+            span.innerHTML = editable;
+            var parentNode = this.renderer.parentNode(this.elementRef.nativeElement);
+            this.renderer.insertBefore(parentNode, span, this.elementRef.nativeElement);
+            parentNode.removeChild(this.elementRef.nativeElement);
+            this.inlineRef = span;
+        };
+        ImageDirective.ctorParameters = function () { return [
+            { type: core.ViewContainerRef },
+            { type: core.TemplateRef },
+            { type: core.Renderer2 },
+            { type: core.ElementRef }
+        ]; };
+        __decorate([
+            core.Input('scImage')
+        ], ImageDirective.prototype, "field", void 0);
+        __decorate([
+            core.Input('scImageEditable')
+        ], ImageDirective.prototype, "editable", void 0);
+        __decorate([
+            core.Input('scImageUrlParams')
+        ], ImageDirective.prototype, "urlParams", void 0);
+        __decorate([
+            core.Input('scImageAttrs')
+        ], ImageDirective.prototype, "attrs", void 0);
+        ImageDirective = __decorate([
+            core.Directive({ selector: '[scImage]' })
+        ], ImageDirective);
+        return ImageDirective;
     }());
 
-    var LinkDirective = /** @class */ (function () {
-        function LinkDirective(viewContainer, templateRef, renderer, elementRef) {
-            this.viewContainer = viewContainer;
-            this.templateRef = templateRef;
-            this.renderer = renderer;
-            this.elementRef = elementRef;
-            this.inlineRef = null;
-            // tslint:disable-next-line:no-input-rename
-            this.editable = true;
-            // tslint:disable-next-line:no-input-rename
-            this.attrs = {};
-        }
-        LinkDirective.prototype.ngOnChanges = function (changes) {
-            if (changes['field'] || changes['editable'] || changes['attrs']) {
-                this.viewContainer.clear();
-                if (this.inlineRef) {
-                    this.inlineRef.remove();
-                    this.inlineRef = null;
-                }
-                this.updateView();
-            }
-        };
-        LinkDirective.prototype.updateView = function () {
-            var field = this.field;
-            if (this.editable && field && field.editableFirstPart && field.editableLastPart) {
-                this.renderInlineWrapper(field.editableFirstPart, field.editableLastPart);
-            }
-            else if (field && (field.href || field.value)) {
-                var props = field.href ? field : field.value;
-                var linkText = field.text || field.value.text || field.href || field.value.href;
-                var mergedAttrs = __assign({}, props, this.attrs);
-                this.renderTemplate(mergedAttrs, linkText);
-            }
-        };
-        LinkDirective.prototype.renderTemplate = function (props, linkText) {
-            var _this = this;
-            var viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
-            viewRef.rootNodes.forEach(function (node) {
-                Object.entries(props).forEach(function (_a) {
-                    var _b = __read(_a, 2), key = _b[0], propValue = _b[1];
-                    return _this.renderer.setAttribute(node, key, propValue);
-                });
-                if (node.childNodes && node.childNodes.length === 0 && linkText) {
-                    node.textContent = linkText;
-                }
-            });
-        };
-        LinkDirective.prototype.renderInlineWrapper = function (editableFirstPart, editableLastPart) {
-            var _this = this;
-            var span = this.renderer.createElement('span');
-            span.className = 'sc-link-wrapper';
-            span.innerHTML = editableFirstPart + editableLastPart;
-            // assign attributes from template to inline wrapper
-            var attrs = __assign({}, this.getElementAttrs(), this.attrs);
-            Object.entries(attrs).forEach(function (_a) {
-                var _b = __read(_a, 2), key = _b[0], attrValue = _b[1];
-                return _this.renderer.setAttribute(span, key, attrValue);
-            });
-            this.viewContainer.createEmbeddedView(this.templateRef);
-            var parentNode = this.renderer.parentNode(this.elementRef.nativeElement);
-            this.renderer.insertBefore(parentNode, span, this.elementRef.nativeElement);
-            this.inlineRef = span;
-        };
-        LinkDirective.prototype.getElementAttrs = function () {
-            var view = this.templateRef.createEmbeddedView(null);
-            var element = view.rootNodes[0];
-            if (!element) {
-                return {};
-            }
-            var attrs = {};
-            for (var i = 0; i < element.attributes.length; i++) {
-                var attr = element.attributes.item(i);
-                if (attr) {
-                    attrs[attr.name] = attr.value;
-                }
-            }
-            return attrs;
-        };
-        LinkDirective.ctorParameters = function () { return [
-            { type: core.ViewContainerRef },
-            { type: core.TemplateRef },
-            { type: core.Renderer2 },
-            { type: core.ElementRef }
-        ]; };
-        __decorate([
-            core.Input('scLinkEditable')
-        ], LinkDirective.prototype, "editable", void 0);
-        __decorate([
-            core.Input('scLinkAttrs')
-        ], LinkDirective.prototype, "attrs", void 0);
-        __decorate([
-            core.Input('scLink')
-        ], LinkDirective.prototype, "field", void 0);
-        LinkDirective = __decorate([
-            core.Directive({ selector: '[scLink]' })
-        ], LinkDirective);
-        return LinkDirective;
+    var LinkDirective = /** @class */ (function () {
+        function LinkDirective(viewContainer, templateRef, renderer, elementRef) {
+            this.viewContainer = viewContainer;
+            this.templateRef = templateRef;
+            this.renderer = renderer;
+            this.elementRef = elementRef;
+            this.inlineRef = null;
+            // tslint:disable-next-line:no-input-rename
+            this.editable = true;
+            // tslint:disable-next-line:no-input-rename
+            this.attrs = {};
+        }
+        LinkDirective.prototype.ngOnChanges = function (changes) {
+            if (changes['field'] || changes['editable'] || changes['attrs']) {
+                this.viewContainer.clear();
+                if (this.inlineRef) {
+                    this.inlineRef.remove();
+                    this.inlineRef = null;
+                }
+                this.updateView();
+            }
+        };
+        LinkDirective.prototype.updateView = function () {
+            var field = this.field;
+            if (this.editable && field && field.editableFirstPart && field.editableLastPart) {
+                this.renderInlineWrapper(field.editableFirstPart, field.editableLastPart);
+            }
+            else if (field && (field.href || field.value)) {
+                var props = field.href ? field : field.value;
+                var linkText = field.text || field.value.text || field.href || field.value.href;
+                var mergedAttrs = __assign({}, props, this.attrs);
+                this.renderTemplate(mergedAttrs, linkText);
+            }
+        };
+        LinkDirective.prototype.renderTemplate = function (props, linkText) {
+            var _this = this;
+            var viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
+            viewRef.rootNodes.forEach(function (node) {
+                Object.entries(props).forEach(function (_a) {
+                    var _b = __read(_a, 2), key = _b[0], propValue = _b[1];
+                    return _this.renderer.setAttribute(node, key, propValue);
+                });
+                if (node.childNodes && node.childNodes.length === 0 && linkText) {
+                    node.textContent = linkText;
+                }
+            });
+        };
+        LinkDirective.prototype.renderInlineWrapper = function (editableFirstPart, editableLastPart) {
+            var _this = this;
+            var span = this.renderer.createElement('span');
+            span.className = 'sc-link-wrapper';
+            span.innerHTML = editableFirstPart + editableLastPart;
+            // assign attributes from template to inline wrapper
+            var attrs = __assign({}, this.getElementAttrs(), this.attrs);
+            Object.entries(attrs).forEach(function (_a) {
+                var _b = __read(_a, 2), key = _b[0], attrValue = _b[1];
+                return _this.renderer.setAttribute(span, key, attrValue);
+            });
+            this.viewContainer.createEmbeddedView(this.templateRef);
+            var parentNode = this.renderer.parentNode(this.elementRef.nativeElement);
+            this.renderer.insertBefore(parentNode, span, this.elementRef.nativeElement);
+            this.inlineRef = span;
+        };
+        LinkDirective.prototype.getElementAttrs = function () {
+            var view = this.templateRef.createEmbeddedView(null);
+            var element = view.rootNodes[0];
+            if (!element) {
+                return {};
+            }
+            var attrs = {};
+            for (var i = 0; i < element.attributes.length; i++) {
+                var attr = element.attributes.item(i);
+                if (attr) {
+                    attrs[attr.name] = attr.value;
+                }
+            }
+            return attrs;
+        };
+        LinkDirective.ctorParameters = function () { return [
+            { type: core.ViewContainerRef },
+            { type: core.TemplateRef },
+            { type: core.Renderer2 },
+            { type: core.ElementRef }
+        ]; };
+        __decorate([
+            core.Input('scLinkEditable')
+        ], LinkDirective.prototype, "editable", void 0);
+        __decorate([
+            core.Input('scLinkAttrs')
+        ], LinkDirective.prototype, "attrs", void 0);
+        __decorate([
+            core.Input('scLink')
+        ], LinkDirective.prototype, "field", void 0);
+        LinkDirective = __decorate([
+            core.Directive({ selector: '[scLink]' })
+        ], LinkDirective);
+        return LinkDirective;
     }());
 
-    var RouterLinkDirective = /** @class */ (function (_super) {
-        __extends(RouterLinkDirective, _super);
-        function RouterLinkDirective(viewContainer, templateRef, renderer, elementRef, router) {
-            var _this = _super.call(this, viewContainer, templateRef, renderer, elementRef) || this;
-            _this.router = router;
-            // tslint:disable-next-line:no-input-rename
-            _this.editable = true;
-            // tslint:disable-next-line:no-input-rename
-            _this.attrs = {};
-            return _this;
-        }
-        RouterLinkDirective.prototype.renderTemplate = function (props, linkText) {
-            var _this = this;
-            var viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
-            viewRef.rootNodes.forEach(function (node) {
-                Object.entries(props).forEach(function (_a) {
-                    var _b = __read(_a, 2), key = _b[0], propValue = _b[1];
-                    _this.renderer.setAttribute(node, key, propValue);
-                    if (key === 'href') {
-                        _this.renderer.listen(node, 'click', function (event) {
-                            _this.router.navigate([propValue]);
-                            event.preventDefault();
-                        });
-                    }
-                });
-                if (node.childNodes && node.childNodes.length === 0 && linkText) {
-                    node.textContent = linkText;
-                }
-            });
-        };
-        RouterLinkDirective.ctorParameters = function () { return [
-            { type: core.ViewContainerRef },
-            { type: core.TemplateRef },
-            { type: core.Renderer2 },
-            { type: core.ElementRef },
-            { type: router.Router }
-        ]; };
-        __decorate([
-            core.Input('scRouterLinkEditable')
-        ], RouterLinkDirective.prototype, "editable", void 0);
-        __decorate([
-            core.Input('scRouterLinkAttrs')
-        ], RouterLinkDirective.prototype, "attrs", void 0);
-        __decorate([
-            core.Input('scRouterLink')
-        ], RouterLinkDirective.prototype, "field", void 0);
-        RouterLinkDirective = __decorate([
-            core.Directive({ selector: '[scRouterLink]' })
-        ], RouterLinkDirective);
-        return RouterLinkDirective;
+    var RouterLinkDirective = /** @class */ (function (_super) {
+        __extends(RouterLinkDirective, _super);
+        function RouterLinkDirective(viewContainer, templateRef, renderer, elementRef, router) {
+            var _this = _super.call(this, viewContainer, templateRef, renderer, elementRef) || this;
+            _this.router = router;
+            // tslint:disable-next-line:no-input-rename
+            _this.editable = true;
+            // tslint:disable-next-line:no-input-rename
+            _this.attrs = {};
+            return _this;
+        }
+        RouterLinkDirective.prototype.renderTemplate = function (props, linkText) {
+            var _this = this;
+            var viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
+            viewRef.rootNodes.forEach(function (node) {
+                Object.entries(props).forEach(function (_a) {
+                    var _b = __read(_a, 2), key = _b[0], propValue = _b[1];
+                    _this.renderer.setAttribute(node, key, propValue);
+                    if (key === 'href') {
+                        _this.renderer.listen(node, 'click', function (event) {
+                            _this.router.navigate([propValue]);
+                            event.preventDefault();
+                        });
+                    }
+                });
+                if (node.childNodes && node.childNodes.length === 0 && linkText) {
+                    node.textContent = linkText;
+                }
+            });
+        };
+        RouterLinkDirective.ctorParameters = function () { return [
+            { type: core.ViewContainerRef },
+            { type: core.TemplateRef },
+            { type: core.Renderer2 },
+            { type: core.ElementRef },
+            { type: router.Router }
+        ]; };
+        __decorate([
+            core.Input('scRouterLinkEditable')
+        ], RouterLinkDirective.prototype, "editable", void 0);
+        __decorate([
+            core.Input('scRouterLinkAttrs')
+        ], RouterLinkDirective.prototype, "attrs", void 0);
+        __decorate([
+            core.Input('scRouterLink')
+        ], RouterLinkDirective.prototype, "field", void 0);
+        RouterLinkDirective = __decorate([
+            core.Directive({ selector: '[scRouterLink]' })
+        ], RouterLinkDirective);
+        return RouterLinkDirective;
     }(LinkDirective));
 
-    var GenericLinkDirective = /** @class */ (function (_super) {
-        __extends(GenericLinkDirective, _super);
-        function GenericLinkDirective(viewContainer, templateRef, renderer, elementRef, router) {
-            var _this = _super.call(this, viewContainer, templateRef, renderer, elementRef) || this;
-            _this.router = router;
-            // tslint:disable-next-line:no-input-rename
-            _this.editable = true;
-            // tslint:disable-next-line:no-input-rename
-            _this.attrs = {};
-            return _this;
-        }
-        GenericLinkDirective.prototype.renderTemplate = function (props, linkText) {
-            var _this = this;
-            var viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
-            viewRef.rootNodes.forEach(function (node) {
-                Object.entries(props).forEach(function (_a) {
-                    var _b = __read(_a, 2), key = _b[0], propValue = _b[1];
-                    if (key === 'href' && !_this.isAbsoluteUrl(propValue)) {
-                        var urlTree = _this.router.createUrlTree([propValue], _this.extras);
-                        _this.renderer.setAttribute(node, key, _this.router.serializeUrl(urlTree));
-                        _this.renderer.listen(node, 'click', function (event) {
-                            _this.router.navigate([propValue], _this.extras);
-                            event.preventDefault();
-                        });
-                    }
-                    else {
-                        _this.renderer.setAttribute(node, key, propValue);
-                    }
-                });
-                if (node.childNodes && node.childNodes.length === 0 && linkText) {
-                    node.textContent = linkText;
-                }
-            });
-        };
-        GenericLinkDirective.prototype.isAbsoluteUrl = function (url) {
-            if (url == null) {
-                return false;
-            }
-            if (typeof url !== 'string') {
-                throw new TypeError('Expected a string');
-            }
-            return /^[a-z][a-z0-9+.-]*:/.test(url);
-        };
-        GenericLinkDirective.ctorParameters = function () { return [
-            { type: core.ViewContainerRef },
-            { type: core.TemplateRef },
-            { type: core.Renderer2 },
-            { type: core.ElementRef },
-            { type: router.Router }
-        ]; };
-        __decorate([
-            core.Input('scGenericLinkEditable')
-        ], GenericLinkDirective.prototype, "editable", void 0);
-        __decorate([
-            core.Input('scGenericLinkAttrs')
-        ], GenericLinkDirective.prototype, "attrs", void 0);
-        __decorate([
-            core.Input('scGenericLink')
-        ], GenericLinkDirective.prototype, "field", void 0);
-        __decorate([
-            core.Input('scGenericLinkExtras')
-        ], GenericLinkDirective.prototype, "extras", void 0);
-        GenericLinkDirective = __decorate([
-            core.Directive({ selector: '[scGenericLink]' })
-        ], GenericLinkDirective);
-        return GenericLinkDirective;
+    var GenericLinkDirective = /** @class */ (function (_super) {
+        __extends(GenericLinkDirective, _super);
+        function GenericLinkDirective(viewContainer, templateRef, renderer, elementRef, router) {
+            var _this = _super.call(this, viewContainer, templateRef, renderer, elementRef) || this;
+            _this.router = router;
+            // tslint:disable-next-line:no-input-rename
+            _this.editable = true;
+            // tslint:disable-next-line:no-input-rename
+            _this.attrs = {};
+            return _this;
+        }
+        GenericLinkDirective.prototype.renderTemplate = function (props, linkText) {
+            var _this = this;
+            var viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
+            viewRef.rootNodes.forEach(function (node) {
+                Object.entries(props).forEach(function (_a) {
+                    var _b = __read(_a, 2), key = _b[0], propValue = _b[1];
+                    if (key === 'href' && !_this.isAbsoluteUrl(propValue)) {
+                        var urlTree = _this.router.createUrlTree([propValue], _this.extras);
+                        _this.renderer.setAttribute(node, key, _this.router.serializeUrl(urlTree));
+                        _this.renderer.listen(node, 'click', function (event) {
+                            _this.router.navigate([propValue], _this.extras);
+                            event.preventDefault();
+                        });
+                    }
+                    else {
+                        _this.renderer.setAttribute(node, key, propValue);
+                    }
+                });
+                if (node.childNodes && node.childNodes.length === 0 && linkText) {
+                    node.textContent = linkText;
+                }
+            });
+        };
+        GenericLinkDirective.prototype.isAbsoluteUrl = function (url) {
+            if (url == null) {
+                return false;
+            }
+            if (typeof url !== 'string') {
+                throw new TypeError('Expected a string');
+            }
+            return /^[a-z][a-z0-9+.-]*:/.test(url);
+        };
+        GenericLinkDirective.ctorParameters = function () { return [
+            { type: core.ViewContainerRef },
+            { type: core.TemplateRef },
+            { type: core.Renderer2 },
+            { type: core.ElementRef },
+            { type: router.Router }
+        ]; };
+        __decorate([
+            core.Input('scGenericLinkEditable')
+        ], GenericLinkDirective.prototype, "editable", void 0);
+        __decorate([
+            core.Input('scGenericLinkAttrs')
+        ], GenericLinkDirective.prototype, "attrs", void 0);
+        __decorate([
+            core.Input('scGenericLink')
+        ], GenericLinkDirective.prototype, "field", void 0);
+        __decorate([
+            core.Input('scGenericLinkExtras')
+        ], GenericLinkDirective.prototype, "extras", void 0);
+        GenericLinkDirective = __decorate([
+            core.Directive({ selector: '[scGenericLink]' })
+        ], GenericLinkDirective);
+        return GenericLinkDirective;
     }(LinkDirective));
 
-    /** Registers a statically loaded component */
-    var ComponentNameAndType = /** @class */ (function () {
-        function ComponentNameAndType() {
-        }
-        return ComponentNameAndType;
-    }());
-    function instanceOfComponentNameAndType(object) {
-        return 'type' in object;
-    }
-    function instanceOfComponentNameAndModule(object) {
-        return 'module' in object;
-    }
-    var PLACEHOLDER_COMPONENTS = new core.InjectionToken('Sc.placeholder.components');
-    var PLACEHOLDER_LAZY_COMPONENTS = new core.InjectionToken('Sc.placeholder.lazyComponents');
-    var PLACEHOLDER_MISSING_COMPONENT_COMPONENT = new core.InjectionToken('Sc.placeholder.missingComponentComponent');
+    /** Registers a statically loaded component */
+    var ComponentNameAndType = /** @class */ (function () {
+        function ComponentNameAndType() {
+        }
+        return ComponentNameAndType;
+    }());
+    function instanceOfComponentNameAndType(object) {
+        return 'type' in object;
+    }
+    function instanceOfComponentNameAndModule(object) {
+        return 'module' in object;
+    }
+    var PLACEHOLDER_COMPONENTS = new core.InjectionToken('Sc.placeholder.components');
+    var PLACEHOLDER_LAZY_COMPONENTS = new core.InjectionToken('Sc.placeholder.lazyComponents');
+    var PLACEHOLDER_MISSING_COMPONENT_COMPONENT = new core.InjectionToken('Sc.placeholder.missingComponentComponent');
     var DYNAMIC_COMPONENT = new core.InjectionToken('Sc.placeholder.dynamicComponent');
 
-    var RawComponent = /** @class */ (function () {
-        function RawComponent(renderer, elementRef) {
-            this.renderer = renderer;
-            this.elementRef = elementRef;
-        }
-        RawComponent.prototype.ngOnInit = function () {
-            var el = this.renderer.createElement(this.rendering.name);
-            var contents = this.renderer.createText(this.rendering.contents || '');
-            var attributes = this.rendering.attributes;
-            for (var attr in attributes) {
-                if (attributes.hasOwnProperty(attr)) {
-                    var value = attributes[attr];
-                    this.renderer.setAttribute(el, attr, value || '');
-                }
-            }
-            this.renderer.appendChild(el, contents);
-            var parentNode = this.renderer.parentNode(this.elementRef.nativeElement);
-            this.renderer.insertBefore(parentNode, el, this.elementRef.nativeElement);
-            parentNode.removeChild(this.elementRef.nativeElement);
-        };
-        RawComponent.ctorParameters = function () { return [
-            { type: core.Renderer2 },
-            { type: core.ElementRef }
-        ]; };
-        __decorate([
-            core.Input()
-        ], RawComponent.prototype, "rendering", void 0);
-        RawComponent = __decorate([
-            core.Component({
-                selector: 'sc-raw',
-                template: ""
-            })
-        ], RawComponent);
-        return RawComponent;
+    var RawComponent = /** @class */ (function () {
+        function RawComponent(renderer, elementRef) {
+            this.renderer = renderer;
+            this.elementRef = elementRef;
+        }
+        RawComponent.prototype.ngOnInit = function () {
+            var el = this.renderer.createElement(this.rendering.name);
+            var contents = this.renderer.createText(this.rendering.contents || '');
+            var attributes = this.rendering.attributes;
+            for (var attr in attributes) {
+                if (attributes.hasOwnProperty(attr)) {
+                    var value = attributes[attr];
+                    this.renderer.setAttribute(el, attr, value || '');
+                }
+            }
+            this.renderer.appendChild(el, contents);
+            var parentNode = this.renderer.parentNode(this.elementRef.nativeElement);
+            this.renderer.insertBefore(parentNode, el, this.elementRef.nativeElement);
+            parentNode.removeChild(this.elementRef.nativeElement);
+        };
+        RawComponent.ctorParameters = function () { return [
+            { type: core.Renderer2 },
+            { type: core.ElementRef }
+        ]; };
+        __decorate([
+            core.Input()
+        ], RawComponent.prototype, "rendering", void 0);
+        RawComponent = __decorate([
+            core.Component({
+                selector: 'sc-raw',
+                template: ""
+            })
+        ], RawComponent);
+        return RawComponent;
     }());
 
-    function isRawRendering(rendering) {
-        return !rendering.componentName && rendering.name !== undefined;
+    function isRawRendering(rendering) {
+        return !rendering.componentName && rendering.name !== undefined;
     }
 
-    var JssComponentFactoryService = /** @class */ (function () {
-        function JssComponentFactoryService(injector, components, lazyComponents) {
-            var _this = this;
-            this.injector = injector;
-            this.components = components;
-            this.lazyComponents = lazyComponents;
-            this.componentMap = new Map();
-            this.lazyComponentMap = new Map();
-            this.components.forEach(function (c) { return _this.componentMap.set(c.name, c.type); });
-            if (this.lazyComponents) {
-                this.lazyComponents.forEach(function (c) { return _this.lazyComponentMap.set(c.path, c); });
-            }
-        }
-        JssComponentFactoryService.prototype.getComponent = function (component) {
-            var _this = this;
-            var loadedComponent = this.componentMap.get(component.componentName);
-            if (loadedComponent) {
-                return Promise.resolve({
-                    componentDefinition: component,
-                    componentImplementation: this.componentMap.get(component.componentName),
-                });
-            }
-            var lazyComponent = this.lazyComponentMap.get(component.componentName);
-            if (lazyComponent) {
-                return lazyComponent.loadChildren()
-                    .then(function (ngModuleFactory) {
-                    var componentType = null;
-                    var moduleRef = ngModuleFactory.create(_this.injector);
-                    var dynamicComponentType = moduleRef.injector.get(DYNAMIC_COMPONENT);
-                    if (!dynamicComponentType) {
-                        throw new Error(
-                        // tslint:disable-next-line:max-line-length
-                        "JssComponentFactoryService: Lazy load module for component \"" + lazyComponent.path + "\" missing DYNAMIC_COMPONENT provider. Missing JssModule.forChild()?");
-                    }
-                    if (component.componentName in dynamicComponentType) {
-                        componentType = dynamicComponentType[component.componentName];
-                    }
-                    else {
-                        if (typeof dynamicComponentType === 'function') {
-                            componentType = dynamicComponentType;
-                        }
-                        else {
-                            throw new Error(
-                            // tslint:disable-next-line:max-line-length
-                            "JssComponentFactoryService: Lazy load module for component \"" + lazyComponent.path + "\" missing DYNAMIC_COMPONENT provider. Missing JssModule.forChild()?");
-                        }
-                    }
-                    return {
-                        componentDefinition: component,
-                        componentImplementation: componentType,
-                        componentFactory: moduleRef.componentFactoryResolver.resolveComponentFactory(componentType),
-                    };
-                });
-            }
-            return Promise.resolve({
-                componentDefinition: component,
-            });
-        };
-        JssComponentFactoryService.prototype.getComponents = function (components) {
-            var _this = this;
-            // acquire all components and keep them in order while handling their potential async-ness
-            return Promise.all(components.map(function (component) { return isRawRendering(component)
-                ? _this.getRawComponent(component)
-                : _this.getComponent(component); }));
-        };
-        JssComponentFactoryService.prototype.getRawComponent = function (component) {
-            return Promise.resolve({
-                componentImplementation: RawComponent,
-                componentDefinition: component,
-            });
-        };
-        JssComponentFactoryService.ctorParameters = function () { return [
-            { type: core.Injector },
-            { type: Array, decorators: [{ type: core.Inject, args: [PLACEHOLDER_COMPONENTS,] }] },
-            { type: Array, decorators: [{ type: core.Inject, args: [PLACEHOLDER_LAZY_COMPONENTS,] }] }
-        ]; };
-        JssComponentFactoryService = __decorate([
-            core.Injectable(),
-            __param(1, core.Inject(PLACEHOLDER_COMPONENTS)),
-            __param(2, core.Inject(PLACEHOLDER_LAZY_COMPONENTS))
-        ], JssComponentFactoryService);
-        return JssComponentFactoryService;
+    var JssComponentFactoryService = /** @class */ (function () {
+        function JssComponentFactoryService(injector, components, lazyComponents) {
+            var _this = this;
+            this.injector = injector;
+            this.components = components;
+            this.lazyComponents = lazyComponents;
+            this.componentMap = new Map();
+            this.lazyComponentMap = new Map();
+            this.components.forEach(function (c) { return _this.componentMap.set(c.name, c.type); });
+            if (this.lazyComponents) {
+                this.lazyComponents.forEach(function (c) { return _this.lazyComponentMap.set(c.path, c); });
+            }
+        }
+        JssComponentFactoryService.prototype.getComponent = function (component) {
+            var _this = this;
+            var loadedComponent = this.componentMap.get(component.componentName);
+            if (loadedComponent) {
+                return Promise.resolve({
+                    componentDefinition: component,
+                    componentImplementation: this.componentMap.get(component.componentName),
+                });
+            }
+            var lazyComponent = this.lazyComponentMap.get(component.componentName);
+            if (lazyComponent) {
+                return lazyComponent.loadChildren()
+                    .then(function (ngModuleFactory) {
+                    var componentType = null;
+                    var moduleRef = ngModuleFactory.create(_this.injector);
+                    var dynamicComponentType = moduleRef.injector.get(DYNAMIC_COMPONENT);
+                    if (!dynamicComponentType) {
+                        throw new Error(
+                        // tslint:disable-next-line:max-line-length
+                        "JssComponentFactoryService: Lazy load module for component \"" + lazyComponent.path + "\" missing DYNAMIC_COMPONENT provider. Missing JssModule.forChild()?");
+                    }
+                    if (component.componentName in dynamicComponentType) {
+                        componentType = dynamicComponentType[component.componentName];
+                    }
+                    else {
+                        if (typeof dynamicComponentType === 'function') {
+                            componentType = dynamicComponentType;
+                        }
+                        else {
+                            throw new Error(
+                            // tslint:disable-next-line:max-line-length
+                            "JssComponentFactoryService: Lazy load module for component \"" + lazyComponent.path + "\" missing DYNAMIC_COMPONENT provider. Missing JssModule.forChild()?");
+                        }
+                    }
+                    return {
+                        componentDefinition: component,
+                        componentImplementation: componentType,
+                        componentFactory: moduleRef.componentFactoryResolver.resolveComponentFactory(componentType),
+                    };
+                });
+            }
+            return Promise.resolve({
+                componentDefinition: component,
+            });
+        };
+        JssComponentFactoryService.prototype.getComponents = function (components) {
+            var _this = this;
+            // acquire all components and keep them in order while handling their potential async-ness
+            return Promise.all(components.map(function (component) { return isRawRendering(component)
+                ? _this.getRawComponent(component)
+                : _this.getComponent(component); }));
+        };
+        JssComponentFactoryService.prototype.getRawComponent = function (component) {
+            return Promise.resolve({
+                componentImplementation: RawComponent,
+                componentDefinition: component,
+            });
+        };
+        JssComponentFactoryService.ctorParameters = function () { return [
+            { type: core.Injector },
+            { type: Array, decorators: [{ type: core.Inject, args: [PLACEHOLDER_COMPONENTS,] }] },
+            { type: Array, decorators: [{ type: core.Inject, args: [PLACEHOLDER_LAZY_COMPONENTS,] }] }
+        ]; };
+        JssComponentFactoryService = __decorate([
+            core.Injectable(),
+            __param(1, core.Inject(PLACEHOLDER_COMPONENTS)),
+            __param(2, core.Inject(PLACEHOLDER_LAZY_COMPONENTS))
+        ], JssComponentFactoryService);
+        return JssComponentFactoryService;
     }());
 
-    var PlaceholderLoadingDirective = /** @class */ (function () {
-        function PlaceholderLoadingDirective(templateRef) {
-            this.templateRef = templateRef;
-        }
-        PlaceholderLoadingDirective.ctorParameters = function () { return [
-            { type: core.TemplateRef }
-        ]; };
-        PlaceholderLoadingDirective = __decorate([
-            core.Directive({
-                selector: '[scPlaceholderLoading]',
-            })
-        ], PlaceholderLoadingDirective);
-        return PlaceholderLoadingDirective;
+    var PlaceholderLoadingDirective = /** @class */ (function () {
+        function PlaceholderLoadingDirective(templateRef) {
+            this.templateRef = templateRef;
+        }
+        PlaceholderLoadingDirective.ctorParameters = function () { return [
+            { type: core.TemplateRef }
+        ]; };
+        PlaceholderLoadingDirective = __decorate([
+            core.Directive({
+                selector: '[scPlaceholderLoading]',
+            })
+        ], PlaceholderLoadingDirective);
+        return PlaceholderLoadingDirective;
     }());
 
-    var RenderEachDirective = /** @class */ (function () {
-        function RenderEachDirective(templateRef) {
-            this.templateRef = templateRef;
-        }
-        RenderEachDirective.ctorParameters = function () { return [
-            { type: core.TemplateRef }
-        ]; };
-        RenderEachDirective = __decorate([
-            core.Directive({
-                // tslint:disable-next-line:directive-selector
-                selector: '[renderEach]',
-            })
-        ], RenderEachDirective);
-        return RenderEachDirective;
+    var RenderEachDirective = /** @class */ (function () {
+        function RenderEachDirective(templateRef) {
+            this.templateRef = templateRef;
+        }
+        RenderEachDirective.ctorParameters = function () { return [
+            { type: core.TemplateRef }
+        ]; };
+        RenderEachDirective = __decorate([
+            core.Directive({
+                // tslint:disable-next-line:directive-selector
+                selector: '[renderEach]',
+            })
+        ], RenderEachDirective);
+        return RenderEachDirective;
     }());
 
-    var RenderEmptyDirective = /** @class */ (function () {
-        function RenderEmptyDirective(templateRef) {
-            this.templateRef = templateRef;
-        }
-        RenderEmptyDirective.ctorParameters = function () { return [
-            { type: core.TemplateRef }
-        ]; };
-        RenderEmptyDirective = __decorate([
-            core.Directive({
-                // tslint:disable-next-line:directive-selector
-                selector: '[renderEmpty]',
-            })
-        ], RenderEmptyDirective);
-        return RenderEmptyDirective;
+    var RenderEmptyDirective = /** @class */ (function () {
+        function RenderEmptyDirective(templateRef) {
+            this.templateRef = templateRef;
+        }
+        RenderEmptyDirective.ctorParameters = function () { return [
+            { type: core.TemplateRef }
+        ]; };
+        RenderEmptyDirective = __decorate([
+            core.Directive({
+                // tslint:disable-next-line:directive-selector
+                selector: '[renderEmpty]',
+            })
+        ], RenderEmptyDirective);
+        return RenderEmptyDirective;
     }());
 
-    function getPlaceholder(rendering, name) {
-        if (rendering && rendering.placeholders && Object.keys(rendering.placeholders).length > 0) {
-            return rendering.placeholders[name];
-        }
-        return null;
-    }
-    var PlaceholderComponent = /** @class */ (function () {
-        function PlaceholderComponent(componentFactoryResolver, differs, componentFactory, changeDetectorRef, elementRef, renderer, missingComponentComponent) {
-            this.componentFactoryResolver = componentFactoryResolver;
-            this.differs = differs;
-            this.componentFactory = componentFactory;
-            this.changeDetectorRef = changeDetectorRef;
-            this.elementRef = elementRef;
-            this.renderer = renderer;
-            this.missingComponentComponent = missingComponentComponent;
-            this._componentInstances = [];
-            this.destroyed = false;
-            this.parentStyleAttribute = '';
-            this.isLoading = true;
-            this.loaded = new core.EventEmitter();
-        }
-        Object.defineProperty(PlaceholderComponent.prototype, "inputs", {
-            set: function (value) {
-                this._inputs = value;
-                if (!this._differ && value) {
-                    this._differ = this.differs.find(value).create();
-                }
-            },
-            enumerable: true,
-            configurable: true
-        });
-        PlaceholderComponent.prototype.ngOnInit = function () {
-            // just to ensure the element exists
-            var elem = this.elementRef.nativeElement;
-            if (elem) {
-                var attributes = elem.attributes;
-                for (var i = 0; i < attributes.length; i++) {
-                    var attr = attributes.item(i);
-                    if (attr && attr.name.indexOf('_ngcontent') !== -1) {
-                        this.parentStyleAttribute = attr.name;
-                    }
-                }
-            }
-        };
-        PlaceholderComponent.prototype.ngOnDestroy = function () {
-            this.destroyed = true;
-            this._componentInstances = [];
-        };
-        PlaceholderComponent.prototype.ngOnChanges = function (changes) {
-            if (changes['rendering'] || changes['renderings']) {
-                this._render();
-            }
-        };
-        PlaceholderComponent.prototype.ngDoCheck = function () {
-            var _this = this;
-            if (!this._differ || !this._inputs || this._componentInstances.length === 0) {
-                return;
-            }
-            var changes = this._differ.diff(this._inputs);
-            if (!changes) {
-                return;
-            }
-            var updates = {};
-            changes.forEachRemovedItem(function (change) { return updates[change.key] = null; });
-            changes.forEachAddedItem(function (change) { return updates[change.key] = change.currentValue; });
-            changes.forEachChangedItem(function (change) { return updates[change.key] = change.currentValue; });
-            this._componentInstances.forEach(function (componentInstance) { return _this._setComponentInputs(componentInstance, updates); });
-        };
-        PlaceholderComponent.prototype._setComponentInputs = function (componentInstance, inputs) {
-            Object.entries(inputs).forEach(function (_a) {
-                var _b = __read(_a, 2), input = _b[0], inputValue = _b[1];
-                return componentInstance[input] = inputValue;
-            });
-        };
-        PlaceholderComponent.prototype._subscribeComponentOutputs = function (componentInstance, outputs) {
-            var _this = this;
-            Object.keys(outputs)
-                .filter(function (output) { return componentInstance[output] && componentInstance[output] instanceof rxjs.Observable; })
-                .forEach(function (output) { return componentInstance[output]
-                .pipe(operators.takeWhile(function () { return !_this.destroyed; }))
-                .subscribe(outputs[output]); });
-        };
-        PlaceholderComponent.prototype._render = function () {
-            var _this = this;
-            this._componentInstances = [];
-            this.view.clear();
-            if (!this.rendering && !this.renderings) {
-                return;
-            }
-            if (!this.name && !this.renderings) {
-                // tslint:disable-next-line:max-line-length
-                console.warn("Placeholder name was not specified, and explicit renderings array was not passed. Placeholder requires either name and rendering, or renderings.");
-                this.isLoading = false;
-                return;
-            }
-            var placeholder = this.renderings || getPlaceholder(this.rendering, this.name || '');
-            if (!placeholder) {
-                console.warn("Placeholder '" + this.name + "' was not found in the current rendering data", JSON.stringify(this.rendering, null, 2));
-                this.isLoading = false;
-                return;
-            }
-            // if the placeholder is empty (contains only raw renderings), then we may need to use the empty template if it's defined
-            var placeholderIsEmpty = placeholder.every(function (rendering) { return isRawRendering(rendering); });
-            if (this.renderEmptyTemplate && placeholderIsEmpty) {
-                this.view.createEmbeddedView(this.renderEmptyTemplate.templateRef, {
-                    renderings: placeholder,
-                });
-                this.isLoading = false;
-            }
-            else {
-                this.componentFactory.getComponents(placeholder)
-                    .then(function (components) { return components.forEach(function (rendering, index) {
-                    if (_this.renderEachTemplate && !isRawRendering(rendering.componentDefinition)) {
-                        _this._renderTemplatedComponent(rendering.componentDefinition, index);
-                    }
-                    else {
-                        _this._renderEmbeddedComponent(rendering, index);
-                    }
-                    _this.isLoading = false;
-                }); }).then(function () {
-                    _this.changeDetectorRef.markForCheck();
-                    _this.loaded.emit(_this.name);
-                });
-            }
-        };
-        PlaceholderComponent.prototype._renderTemplatedComponent = function (rendering, index) {
-            // the render-each template takes care of all component mapping etc
-            // generally using <sc-render-component> which is about like _renderEmbeddedComponent()
-            // as a separate component
-            this.view.createEmbeddedView(this.renderEachTemplate.templateRef, {
-                rendering: rendering,
-                index: index,
-            });
-        };
-        PlaceholderComponent.prototype._renderEmbeddedComponent = function (rendering, index) {
-            if (!rendering.componentImplementation) {
-                var componentName = rendering.componentDefinition.componentName;
-                console.error("Placeholder " + this.name + " contains unknown component " + componentName + ".", "Ensure component is mapped, like:\n        JssModule.withComponents([\n          { name: '" + componentName + "', type: " + componentName + "Component }\n        ])");
-                rendering.componentImplementation = this.missingComponentComponent;
-            }
-            var componentFactory = rendering.componentFactory || this.componentFactoryResolver.resolveComponentFactory(rendering.componentImplementation);
-            // apply the parent style attribute _ngcontent
-            // work-around for https://github.com/angular/angular/issues/12215
-            var createdComponentRef = this.view.createComponent(componentFactory, index);
-            if (this.parentStyleAttribute) {
-                this.renderer.setAttribute(createdComponentRef.location.nativeElement, this.parentStyleAttribute, '');
-            }
-            var componentInstance = createdComponentRef.instance;
-            componentInstance.rendering = rendering.componentDefinition;
-            if (this._inputs) {
-                this._setComponentInputs(componentInstance, this._inputs);
-            }
-            if (this.outputs) {
-                this._subscribeComponentOutputs(componentInstance, this.outputs);
-            }
-            this._componentInstances.push(componentInstance);
-        };
-        PlaceholderComponent.ctorParameters = function () { return [
-            { type: core.ComponentFactoryResolver },
-            { type: core.KeyValueDiffers },
-            { type: JssComponentFactoryService },
-            { type: core.ChangeDetectorRef },
-            { type: core.ElementRef },
-            { type: core.Renderer2 },
-            { type: core.Type, decorators: [{ type: core.Inject, args: [PLACEHOLDER_MISSING_COMPONENT_COMPONENT,] }] }
-        ]; };
-        __decorate([
-            core.Input()
-        ], PlaceholderComponent.prototype, "name", void 0);
-        __decorate([
-            core.Input()
-        ], PlaceholderComponent.prototype, "rendering", void 0);
-        __decorate([
-            core.Input()
-        ], PlaceholderComponent.prototype, "renderings", void 0);
-        __decorate([
-            core.Input()
-        ], PlaceholderComponent.prototype, "outputs", void 0);
-        __decorate([
-            core.Output()
-        ], PlaceholderComponent.prototype, "loaded", void 0);
-        __decorate([
-            core.ViewChild('view', { read: core.ViewContainerRef, static: true })
-        ], PlaceholderComponent.prototype, "view", void 0);
-        __decorate([
-            core.ContentChild(RenderEachDirective, { static: true })
-        ], PlaceholderComponent.prototype, "renderEachTemplate", void 0);
-        __decorate([
-            core.ContentChild(RenderEmptyDirective, { static: true })
-        ], PlaceholderComponent.prototype, "renderEmptyTemplate", void 0);
-        __decorate([
-            core.ContentChild(PlaceholderLoadingDirective, { static: true })
-        ], PlaceholderComponent.prototype, "placeholderLoading", void 0);
-        __decorate([
-            core.Input()
-        ], PlaceholderComponent.prototype, "inputs", null);
-        PlaceholderComponent = __decorate([
-            core.Component({
-                selector: 'sc-placeholder,[sc-placeholder]',
-                template: "\n    <ng-template *ngIf=\"isLoading\" [ngTemplateOutlet]=\"placeholderLoading?.templateRef\"></ng-template>\n    <ng-template #view></ng-template>\n  "
-            }),
-            __param(6, core.Inject(PLACEHOLDER_MISSING_COMPONENT_COMPONENT))
-        ], PlaceholderComponent);
-        return PlaceholderComponent;
+    function getPlaceholder(rendering, name) {
+        if (rendering && rendering.placeholders && Object.keys(rendering.placeholders).length > 0) {
+            return rendering.placeholders[name];
+        }
+        return null;
+    }
+    var PlaceholderComponent = /** @class */ (function () {
+        function PlaceholderComponent(componentFactoryResolver, differs, componentFactory, changeDetectorRef, elementRef, renderer, missingComponentComponent) {
+            this.componentFactoryResolver = componentFactoryResolver;
+            this.differs = differs;
+            this.componentFactory = componentFactory;
+            this.changeDetectorRef = changeDetectorRef;
+            this.elementRef = elementRef;
+            this.renderer = renderer;
+            this.missingComponentComponent = missingComponentComponent;
+            this._componentInstances = [];
+            this.destroyed = false;
+            this.parentStyleAttribute = '';
+            this.isLoading = true;
+            this.loaded = new core.EventEmitter();
+        }
+        Object.defineProperty(PlaceholderComponent.prototype, "inputs", {
+            set: function (value) {
+                this._inputs = value;
+                if (!this._differ && value) {
+                    this._differ = this.differs.find(value).create();
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+        PlaceholderComponent.prototype.ngOnInit = function () {
+            // just to ensure the element exists
+            var elem = this.elementRef.nativeElement;
+            if (elem) {
+                var attributes = elem.attributes;
+                for (var i = 0; i < attributes.length; i++) {
+                    var attr = attributes.item(i);
+                    if (attr && attr.name.indexOf('_ngcontent') !== -1) {
+                        this.parentStyleAttribute = attr.name;
+                    }
+                }
+            }
+        };
+        PlaceholderComponent.prototype.ngOnDestroy = function () {
+            this.destroyed = true;
+            this._componentInstances = [];
+        };
+        PlaceholderComponent.prototype.ngOnChanges = function (changes) {
+            if (changes['rendering'] || changes['renderings']) {
+                this._render();
+            }
+        };
+        PlaceholderComponent.prototype.ngDoCheck = function () {
+            var _this = this;
+            if (!this._differ || !this._inputs || this._componentInstances.length === 0) {
+                return;
+            }
+            var changes = this._differ.diff(this._inputs);
+            if (!changes) {
+                return;
+            }
+            var updates = {};
+            changes.forEachRemovedItem(function (change) { return updates[change.key] = null; });
+            changes.forEachAddedItem(function (change) { return updates[change.key] = change.currentValue; });
+            changes.forEachChangedItem(function (change) { return updates[change.key] = change.currentValue; });
+            this._componentInstances.forEach(function (componentInstance) { return _this._setComponentInputs(componentInstance, updates); });
+        };
+        PlaceholderComponent.prototype._setComponentInputs = function (componentInstance, inputs) {
+            Object.entries(inputs).forEach(function (_a) {
+                var _b = __read(_a, 2), input = _b[0], inputValue = _b[1];
+                return componentInstance[input] = inputValue;
+            });
+        };
+        PlaceholderComponent.prototype._subscribeComponentOutputs = function (componentInstance, outputs) {
+            var _this = this;
+            Object.keys(outputs)
+                .filter(function (output) { return componentInstance[output] && componentInstance[output] instanceof rxjs.Observable; })
+                .forEach(function (output) { return componentInstance[output]
+                .pipe(operators.takeWhile(function () { return !_this.destroyed; }))
+                .subscribe(outputs[output]); });
+        };
+        PlaceholderComponent.prototype._render = function () {
+            var _this = this;
+            this._componentInstances = [];
+            this.view.clear();
+            if (!this.rendering && !this.renderings) {
+                return;
+            }
+            if (!this.name && !this.renderings) {
+                // tslint:disable-next-line:max-line-length
+                console.warn("Placeholder name was not specified, and explicit renderings array was not passed. Placeholder requires either name and rendering, or renderings.");
+                this.isLoading = false;
+                return;
+            }
+            var placeholder = this.renderings || getPlaceholder(this.rendering, this.name || '');
+            if (!placeholder) {
+                console.warn("Placeholder '" + this.name + "' was not found in the current rendering data", JSON.stringify(this.rendering, null, 2));
+                this.isLoading = false;
+                return;
+            }
+            // if the placeholder is empty (contains only raw renderings), then we may need to use the empty template if it's defined
+            var placeholderIsEmpty = placeholder.every(function (rendering) { return isRawRendering(rendering); });
+            if (this.renderEmptyTemplate && placeholderIsEmpty) {
+                this.view.createEmbeddedView(this.renderEmptyTemplate.templateRef, {
+                    renderings: placeholder,
+                });
+                this.isLoading = false;
+            }
+            else {
+                this.componentFactory.getComponents(placeholder)
+                    .then(function (components) { return components.forEach(function (rendering, index) {
+                    if (_this.renderEachTemplate && !isRawRendering(rendering.componentDefinition)) {
+                        _this._renderTemplatedComponent(rendering.componentDefinition, index);
+                    }
+                    else {
+                        _this._renderEmbeddedComponent(rendering, index);
+                    }
+                    _this.isLoading = false;
+                }); }).then(function () {
+                    _this.changeDetectorRef.markForCheck();
+                    _this.loaded.emit(_this.name);
+                });
+            }
+        };
+        PlaceholderComponent.prototype._renderTemplatedComponent = function (rendering, index) {
+            // the render-each template takes care of all component mapping etc
+            // generally using <sc-render-component> which is about like _renderEmbeddedComponent()
+            // as a separate component
+            this.view.createEmbeddedView(this.renderEachTemplate.templateRef, {
+                rendering: rendering,
+                index: index,
+            });
+        };
+        PlaceholderComponent.prototype._renderEmbeddedComponent = function (rendering, index) {
+            if (!rendering.componentImplementation) {
+                var componentName = rendering.componentDefinition.componentName;
+                console.error("Placeholder " + this.name + " contains unknown component " + componentName + ".", "Ensure component is mapped, like:\n        JssModule.withComponents([\n          { name: '" + componentName + "', type: " + componentName + "Component }\n        ])");
+                rendering.componentImplementation = this.missingComponentComponent;
+            }
+            var componentFactory = rendering.componentFactory || this.componentFactoryResolver.resolveComponentFactory(rendering.componentImplementation);
+            // apply the parent style attribute _ngcontent
+            // work-around for https://github.com/angular/angular/issues/12215
+            var createdComponentRef = this.view.createComponent(componentFactory, index);
+            if (this.parentStyleAttribute) {
+                this.renderer.setAttribute(createdComponentRef.location.nativeElement, this.parentStyleAttribute, '');
+            }
+            var componentInstance = createdComponentRef.instance;
+            componentInstance.rendering = rendering.componentDefinition;
+            if (this._inputs) {
+                this._setComponentInputs(componentInstance, this._inputs);
+            }
+            if (this.outputs) {
+                this._subscribeComponentOutputs(componentInstance, this.outputs);
+            }
+            this._componentInstances.push(componentInstance);
+        };
+        PlaceholderComponent.ctorParameters = function () { return [
+            { type: core.ComponentFactoryResolver },
+            { type: core.KeyValueDiffers },
+            { type: JssComponentFactoryService },
+            { type: core.ChangeDetectorRef },
+            { type: core.ElementRef },
+            { type: core.Renderer2 },
+            { type: core.Type, decorators: [{ type: core.Inject, args: [PLACEHOLDER_MISSING_COMPONENT_COMPONENT,] }] }
+        ]; };
+        __decorate([
+            core.Input()
+        ], PlaceholderComponent.prototype, "name", void 0);
+        __decorate([
+            core.Input()
+        ], PlaceholderComponent.prototype, "rendering", void 0);
+        __decorate([
+            core.Input()
+        ], PlaceholderComponent.prototype, "renderings", void 0);
+        __decorate([
+            core.Input()
+        ], PlaceholderComponent.prototype, "outputs", void 0);
+        __decorate([
+            core.Output()
+        ], PlaceholderComponent.prototype, "loaded", void 0);
+        __decorate([
+            core.ViewChild('view', { read: core.ViewContainerRef, static: true })
+        ], PlaceholderComponent.prototype, "view", void 0);
+        __decorate([
+            core.ContentChild(RenderEachDirective, { static: true })
+        ], PlaceholderComponent.prototype, "renderEachTemplate", void 0);
+        __decorate([
+            core.ContentChild(RenderEmptyDirective, { static: true })
+        ], PlaceholderComponent.prototype, "renderEmptyTemplate", void 0);
+        __decorate([
+            core.ContentChild(PlaceholderLoadingDirective, { static: true })
+        ], PlaceholderComponent.prototype, "placeholderLoading", void 0);
+        __decorate([
+            core.Input()
+        ], PlaceholderComponent.prototype, "inputs", null);
+        PlaceholderComponent = __decorate([
+            core.Component({
+                selector: 'sc-placeholder,[sc-placeholder]',
+                template: "\n    <ng-template *ngIf=\"isLoading\" [ngTemplateOutlet]=\"placeholderLoading?.templateRef\"></ng-template>\n    <ng-template #view></ng-template>\n  "
+            }),
+            __param(6, core.Inject(PLACEHOLDER_MISSING_COMPONENT_COMPONENT))
+        ], PlaceholderComponent);
+        return PlaceholderComponent;
     }());
 
-    var RichTextDirective = /** @class */ (function () {
-        function RichTextDirective(viewContainer, templateRef) {
-            this.viewContainer = viewContainer;
-            this.templateRef = templateRef;
-            // tslint:disable-next-line:no-input-rename
-            this.editable = true;
-        }
-        RichTextDirective.prototype.ngOnChanges = function (changes) {
-            if (changes['field'] || changes['editable']) {
-                if (!this.viewRef) {
-                    this.viewContainer.clear();
-                    this.viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
-                }
-                this.updateView();
-            }
-        };
-        RichTextDirective.prototype.updateView = function () {
-            var field = this.field;
-            if (!field || (!field.editable && !field.value)) {
-                return;
-            }
-            var html = (field.editable && this.editable ? field.editable : field.value);
-            this.viewRef.rootNodes.forEach(function (node) {
-                node.innerHTML = html;
-            });
-        };
-        RichTextDirective.ctorParameters = function () { return [
-            { type: core.ViewContainerRef },
-            { type: core.TemplateRef }
-        ]; };
-        __decorate([
-            core.Input('scRichTextEditable')
-        ], RichTextDirective.prototype, "editable", void 0);
-        __decorate([
-            core.Input('scRichText')
-        ], RichTextDirective.prototype, "field", void 0);
-        RichTextDirective = __decorate([
-            core.Directive({
-                selector: '[scRichText]',
-            })
-        ], RichTextDirective);
-        return RichTextDirective;
+    var RichTextDirective = /** @class */ (function () {
+        function RichTextDirective(viewContainer, templateRef) {
+            this.viewContainer = viewContainer;
+            this.templateRef = templateRef;
+            // tslint:disable-next-line:no-input-rename
+            this.editable = true;
+        }
+        RichTextDirective.prototype.ngOnChanges = function (changes) {
+            if (changes['field'] || changes['editable']) {
+                if (!this.viewRef) {
+                    this.viewContainer.clear();
+                    this.viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
+                }
+                this.updateView();
+            }
+        };
+        RichTextDirective.prototype.updateView = function () {
+            var field = this.field;
+            if (!field || (!field.editable && !field.value)) {
+                return;
+            }
+            var html = (field.editable && this.editable ? field.editable : field.value);
+            this.viewRef.rootNodes.forEach(function (node) {
+                node.innerHTML = html;
+            });
+        };
+        RichTextDirective.ctorParameters = function () { return [
+            { type: core.ViewContainerRef },
+            { type: core.TemplateRef }
+        ]; };
+        __decorate([
+            core.Input('scRichTextEditable')
+        ], RichTextDirective.prototype, "editable", void 0);
+        __decorate([
+            core.Input('scRichText')
+        ], RichTextDirective.prototype, "field", void 0);
+        RichTextDirective = __decorate([
+            core.Directive({
+                selector: '[scRichText]',
+            })
+        ], RichTextDirective);
+        return RichTextDirective;
     }());
 
-    var TextDirective = /** @class */ (function () {
-        function TextDirective(viewContainer, templateRef) {
-            this.viewContainer = viewContainer;
-            this.templateRef = templateRef;
-            // tslint:disable-next-line:no-input-rename
-            this.editable = true;
-            // tslint:disable-next-line:no-input-rename
-            this.encode = true;
-        }
-        TextDirective.prototype.ngOnChanges = function (changes) {
-            if (changes['field'] || changes['editable'] || changes['encode']) {
-                if (!this.viewRef) {
-                    this.viewContainer.clear();
-                    this.viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
-                }
-                this.updateView();
-            }
-        };
-        TextDirective.prototype.updateView = function () {
-            var field = this.field;
-            var editable = this.editable;
-            if (!field || (!field.editable && !field.value)) {
-                return;
-            }
-            // can't use editable value if we want to output unencoded
-            if (!this.encode) {
-                editable = false;
-            }
-            var html = field.editable && editable ? field.editable : field.value;
-            var setDangerously = field.editable && editable || !this.encode;
-            this.viewRef.rootNodes.forEach(function (node) {
-                if (setDangerously) {
-                    node.innerHTML = html;
-                }
-                else {
-                    node.textContent = html;
-                }
-            });
-        };
-        TextDirective.ctorParameters = function () { return [
-            { type: core.ViewContainerRef },
-            { type: core.TemplateRef }
-        ]; };
-        __decorate([
-            core.Input('scTextEditable')
-        ], TextDirective.prototype, "editable", void 0);
-        __decorate([
-            core.Input('scTextEncode')
-        ], TextDirective.prototype, "encode", void 0);
-        __decorate([
-            core.Input('scText')
-        ], TextDirective.prototype, "field", void 0);
-        TextDirective = __decorate([
-            core.Directive({
-                selector: '[scText]',
-            })
-        ], TextDirective);
-        return TextDirective;
+    var TextDirective = /** @class */ (function () {
+        function TextDirective(viewContainer, templateRef) {
+            this.viewContainer = viewContainer;
+            this.templateRef = templateRef;
+            // tslint:disable-next-line:no-input-rename
+            this.editable = true;
+            // tslint:disable-next-line:no-input-rename
+            this.encode = true;
+        }
+        TextDirective.prototype.ngOnChanges = function (changes) {
+            if (changes['field'] || changes['editable'] || changes['encode']) {
+                if (!this.viewRef) {
+                    this.viewContainer.clear();
+                    this.viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
+                }
+                this.updateView();
+            }
+        };
+        TextDirective.prototype.updateView = function () {
+            var field = this.field;
+            var editable = this.editable;
+            if (!field || (!field.editable && !field.value)) {
+                return;
+            }
+            // can't use editable value if we want to output unencoded
+            if (!this.encode) {
+                editable = false;
+            }
+            var html = field.editable && editable ? field.editable : field.value;
+            var setDangerously = field.editable && editable || !this.encode;
+            this.viewRef.rootNodes.forEach(function (node) {
+                if (setDangerously) {
+                    node.innerHTML = html;
+                }
+                else {
+                    node.textContent = html;
+                }
+            });
+        };
+        TextDirective.ctorParameters = function () { return [
+            { type: core.ViewContainerRef },
+            { type: core.TemplateRef }
+        ]; };
+        __decorate([
+            core.Input('scTextEditable')
+        ], TextDirective.prototype, "editable", void 0);
+        __decorate([
+            core.Input('scTextEncode')
+        ], TextDirective.prototype, "encode", void 0);
+        __decorate([
+            core.Input('scText')
+        ], TextDirective.prototype, "field", void 0);
+        TextDirective = __decorate([
+            core.Directive({
+                selector: '[scText]',
+            })
+        ], TextDirective);
+        return TextDirective;
     }());
 
-    var LayoutServiceError = /** @class */ (function () {
-        function LayoutServiceError() {
-        }
-        return LayoutServiceError;
+    var LayoutServiceError = /** @class */ (function () {
+        function LayoutServiceError() {
+        }
+        return LayoutServiceError;
     }());
 
-    var fetchRouteData = sitecoreJss.dataApi.fetchRouteData, fetchPlaceholderData = sitecoreJss.dataApi.fetchPlaceholderData;
-    var LayoutService = /** @class */ (function () {
-        function LayoutService() {
-        }
-        LayoutService_1 = LayoutService;
-        LayoutService.getLayoutServiceError = function (error) {
-            var layoutServiceError = new LayoutServiceError();
-            var response = error.response;
-            if (response) {
-                layoutServiceError.status = response.status;
-                layoutServiceError.statusText = response.statusText;
-                layoutServiceError.data = response.data;
-            }
-            return rxjs.throwError(layoutServiceError);
-        };
-        LayoutService.prototype.getRouteData = function (route, options) {
-            return rxjs.from(fetchRouteData(route, options))
-                .pipe(operators.catchError(LayoutService_1.getLayoutServiceError));
-        };
-        LayoutService.prototype.getPlaceholderData = function (route, placeholderName, options) {
-            return rxjs.from(fetchPlaceholderData(placeholderName, route, options))
-                .pipe(operators.catchError(LayoutService_1.getLayoutServiceError));
-        };
-        var LayoutService_1;
-        LayoutService = LayoutService_1 = __decorate([
-            core.Injectable()
-        ], LayoutService);
-        return LayoutService;
+    var fetchRouteData = sitecoreJss.dataApi.fetchRouteData, fetchPlaceholderData = sitecoreJss.dataApi.fetchPlaceholderData;
+    var LayoutService = /** @class */ (function () {
+        function LayoutService() {
+        }
+        LayoutService_1 = LayoutService;
+        LayoutService.getLayoutServiceError = function (error) {
+            var layoutServiceError = new LayoutServiceError();
+            var response = error.response;
+            if (response) {
+                layoutServiceError.status = response.status;
+                layoutServiceError.statusText = response.statusText;
+                layoutServiceError.data = response.data;
+            }
+            return rxjs.throwError(layoutServiceError);
+        };
+        LayoutService.prototype.getRouteData = function (route, options) {
+            return rxjs.from(fetchRouteData(route, options))
+                .pipe(operators.catchError(LayoutService_1.getLayoutServiceError));
+        };
+        LayoutService.prototype.getPlaceholderData = function (route, placeholderName, options) {
+            return rxjs.from(fetchPlaceholderData(placeholderName, route, options))
+                .pipe(operators.catchError(LayoutService_1.getLayoutServiceError));
+        };
+        var LayoutService_1;
+        LayoutService = LayoutService_1 = __decorate([
+            core.Injectable()
+        ], LayoutService);
+        return LayoutService;
     }());
 
-    var DateDirective = /** @class */ (function () {
-        function DateDirective(viewContainer, templateRef, datePipe) {
-            this.viewContainer = viewContainer;
-            this.templateRef = templateRef;
-            this.datePipe = datePipe;
-            // tslint:disable-next-line:no-input-rename
-            this.editable = true;
-        }
-        DateDirective.prototype.ngOnChanges = function (changes) {
-            if (changes['field'] || changes['format']) {
-                if (!this.viewRef) {
-                    this.viewContainer.clear();
-                    this.viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
-                }
-                this.updateView();
-            }
-        };
-        DateDirective.prototype.updateView = function () {
-            var _this = this;
-            var field = this.field;
-            if (!field || (!field.editable && !field.value)) {
-                return;
-            }
-            var html = field.editable && this.editable ? field.editable : field.value;
-            var setDangerously = field.editable && this.editable;
-            this.viewRef.rootNodes.forEach(function (node) {
-                if (setDangerously) {
-                    node.innerHTML = html;
-                }
-                else {
-                    node.textContent = _this.datePipe.transform(html, _this.format, _this.timezone, _this.locale);
-                }
-            });
-        };
-        DateDirective.ctorParameters = function () { return [
-            { type: core.ViewContainerRef },
-            { type: core.TemplateRef },
-            { type: common.DatePipe }
-        ]; };
-        __decorate([
-            core.Input('scDateFormat')
-        ], DateDirective.prototype, "format", void 0);
-        __decorate([
-            core.Input('scDateTimezone')
-        ], DateDirective.prototype, "timezone", void 0);
-        __decorate([
-            core.Input('scDateLocale')
-        ], DateDirective.prototype, "locale", void 0);
-        __decorate([
-            core.Input('scDateEditable')
-        ], DateDirective.prototype, "editable", void 0);
-        __decorate([
-            core.Input('scDate')
-        ], DateDirective.prototype, "field", void 0);
-        DateDirective = __decorate([
-            core.Directive({
-                selector: '[scDate]',
-            })
-        ], DateDirective);
-        return DateDirective;
+    var DateDirective = /** @class */ (function () {
+        function DateDirective(viewContainer, templateRef, datePipe) {
+            this.viewContainer = viewContainer;
+            this.templateRef = templateRef;
+            this.datePipe = datePipe;
+            // tslint:disable-next-line:no-input-rename
+            this.editable = true;
+        }
+        DateDirective.prototype.ngOnChanges = function (changes) {
+            if (changes['field'] || changes['format']) {
+                if (!this.viewRef) {
+                    this.viewContainer.clear();
+                    this.viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
+                }
+                this.updateView();
+            }
+        };
+        DateDirective.prototype.updateView = function () {
+            var _this = this;
+            var field = this.field;
+            if (!field || (!field.editable && !field.value)) {
+                return;
+            }
+            var html = field.editable && this.editable ? field.editable : field.value;
+            var setDangerously = field.editable && this.editable;
+            this.viewRef.rootNodes.forEach(function (node) {
+                if (setDangerously) {
+                    node.innerHTML = html;
+                }
+                else {
+                    node.textContent = _this.datePipe.transform(html, _this.format, _this.timezone, _this.locale);
+                }
+            });
+        };
+        DateDirective.ctorParameters = function () { return [
+            { type: core.ViewContainerRef },
+            { type: core.TemplateRef },
+            { type: common.DatePipe }
+        ]; };
+        __decorate([
+            core.Input('scDateFormat')
+        ], DateDirective.prototype, "format", void 0);
+        __decorate([
+            core.Input('scDateTimezone')
+        ], DateDirective.prototype, "timezone", void 0);
+        __decorate([
+            core.Input('scDateLocale')
+        ], DateDirective.prototype, "locale", void 0);
+        __decorate([
+            core.Input('scDateEditable')
+        ], DateDirective.prototype, "editable", void 0);
+        __decorate([
+            core.Input('scDate')
+        ], DateDirective.prototype, "field", void 0);
+        DateDirective = __decorate([
+            core.Directive({
+                selector: '[scDate]',
+            })
+        ], DateDirective);
+        return DateDirective;
     }());
 
-    var MissingComponentComponent = /** @class */ (function () {
-        function MissingComponentComponent() {
-        }
-        __decorate([
-            core.Input()
-        ], MissingComponentComponent.prototype, "rendering", void 0);
-        MissingComponentComponent = __decorate([
-            core.Component({
-                selector: 'sc-missing-component',
-                template: "\n<div style=\"background: darkorange; outline: 5px solid orange; padding: 10px; color: white; max-width: 500px;\">\n  <h2>{{ rendering.componentName }}</h2>\n  <p>JSS component is missing Angular component implementation.</p>\n</div>"
-            })
-        ], MissingComponentComponent);
-        return MissingComponentComponent;
+    var MissingComponentComponent = /** @class */ (function () {
+        function MissingComponentComponent() {
+        }
+        __decorate([
+            core.Input()
+        ], MissingComponentComponent.prototype, "rendering", void 0);
+        MissingComponentComponent = __decorate([
+            core.Component({
+                selector: 'sc-missing-component',
+                template: "\n<div style=\"background: darkorange; outline: 5px solid orange; padding: 10px; color: white; max-width: 500px;\">\n  <h2>{{ rendering.componentName }}</h2>\n  <p>JSS component is missing Angular component implementation.</p>\n</div>"
+            })
+        ], MissingComponentComponent);
+        return MissingComponentComponent;
     }());
 
-    /**
-     * Renders a single JSS component given a rendering definition.
-     * Useful inside templated placeholders.
-     */
-    var RenderComponentComponent = /** @class */ (function () {
-        function RenderComponentComponent(componentFactoryResolver, differs, componentFactory, missingComponentComponent) {
-            this.componentFactoryResolver = componentFactoryResolver;
-            this.differs = differs;
-            this.componentFactory = componentFactory;
-            this.missingComponentComponent = missingComponentComponent;
-            this.destroyed = false;
-        }
-        Object.defineProperty(RenderComponentComponent.prototype, "inputs", {
-            set: function (value) {
-                this._inputs = value;
-                if (!this._differ && value) {
-                    this._differ = this.differs.find(value).create();
-                }
-            },
-            enumerable: true,
-            configurable: true
-        });
-        RenderComponentComponent.prototype.ngOnChanges = function (changes) {
-            if (changes['rendering']) {
-                this._render();
-            }
-        };
-        RenderComponentComponent.prototype._setComponentInputs = function (componentInstance, inputs) {
-            Object.entries(inputs).forEach(function (_a) {
-                var _b = __read(_a, 2), input = _b[0], inputValue = _b[1];
-                return componentInstance[input] = inputValue;
-            });
-        };
-        RenderComponentComponent.prototype._subscribeComponentOutputs = function (componentInstance, outputs) {
-            var _this = this;
-            Object.keys(outputs)
-                .filter(function (output) { return componentInstance[output] && componentInstance[output] instanceof rxjs.Observable; })
-                .forEach(function (output) { return componentInstance[output]
-                .pipe(operators.takeWhile(function () { return !_this.destroyed; }))
-                .subscribe(outputs[output]); });
-        };
-        RenderComponentComponent.prototype._render = function () {
-            var _this = this;
-            this.view.clear();
-            if (!this.rendering) {
-                return;
-            }
-            var resolveComponent = isRawRendering(this.rendering)
-                ? Promise.resolve({ componentImplementation: RawComponent, componentDefinition: this.rendering })
-                : this.componentFactory.getComponent(this.rendering);
-            resolveComponent.then(function (rendering) {
-                if (!rendering.componentImplementation) {
-                    var componentName = rendering.componentDefinition.componentName;
-                    console.error("Attempted to render unknown component " + componentName + ".", "Ensure component is mapped, like:\n          JssModule.withComponents([\n            { name: '" + componentName + "', type: " + componentName + "Component }\n          ])");
-                    rendering.componentImplementation = _this.missingComponentComponent;
-                }
-                var componentFactory = rendering.componentFactory || _this.componentFactoryResolver.resolveComponentFactory(rendering.componentImplementation);
-                var componentInstance = _this.view.createComponent(componentFactory, 0).instance;
-                componentInstance.rendering = rendering.componentDefinition;
-                if (_this._inputs) {
-                    _this._setComponentInputs(componentInstance, _this._inputs);
-                }
-                if (_this.outputs) {
-                    _this._subscribeComponentOutputs(componentInstance, _this.outputs);
-                }
-            });
-        };
-        RenderComponentComponent.ctorParameters = function () { return [
-            { type: core.ComponentFactoryResolver },
-            { type: core.KeyValueDiffers },
-            { type: JssComponentFactoryService },
-            { type: core.Type, decorators: [{ type: core.Inject, args: [PLACEHOLDER_MISSING_COMPONENT_COMPONENT,] }] }
-        ]; };
-        __decorate([
-            core.Input()
-        ], RenderComponentComponent.prototype, "rendering", void 0);
-        __decorate([
-            core.Input()
-        ], RenderComponentComponent.prototype, "outputs", void 0);
-        __decorate([
-            core.ViewChild('view', { read: core.ViewContainerRef, static: true })
-        ], RenderComponentComponent.prototype, "view", void 0);
-        __decorate([
-            core.Input()
-        ], RenderComponentComponent.prototype, "inputs", null);
-        RenderComponentComponent = __decorate([
-            core.Component({
-                selector: 'sc-render-component',
-                template: "\n    <ng-template #view></ng-template>\n  "
-            }),
-            __param(3, core.Inject(PLACEHOLDER_MISSING_COMPONENT_COMPONENT))
-        ], RenderComponentComponent);
-        return RenderComponentComponent;
+    /**
+     * Renders a single JSS component given a rendering definition.
+     * Useful inside templated placeholders.
+     */
+    var RenderComponentComponent = /** @class */ (function () {
+        function RenderComponentComponent(componentFactoryResolver, differs, componentFactory, missingComponentComponent) {
+            this.componentFactoryResolver = componentFactoryResolver;
+            this.differs = differs;
+            this.componentFactory = componentFactory;
+            this.missingComponentComponent = missingComponentComponent;
+            this.destroyed = false;
+        }
+        Object.defineProperty(RenderComponentComponent.prototype, "inputs", {
+            set: function (value) {
+                this._inputs = value;
+                if (!this._differ && value) {
+                    this._differ = this.differs.find(value).create();
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+        RenderComponentComponent.prototype.ngOnChanges = function (changes) {
+            if (changes['rendering']) {
+                this._render();
+            }
+        };
+        RenderComponentComponent.prototype._setComponentInputs = function (componentInstance, inputs) {
+            Object.entries(inputs).forEach(function (_a) {
+                var _b = __read(_a, 2), input = _b[0], inputValue = _b[1];
+                return componentInstance[input] = inputValue;
+            });
+        };
+        RenderComponentComponent.prototype._subscribeComponentOutputs = function (componentInstance, outputs) {
+            var _this = this;
+            Object.keys(outputs)
+                .filter(function (output) { return componentInstance[output] && componentInstance[output] instanceof rxjs.Observable; })
+                .forEach(function (output) { return componentInstance[output]
+                .pipe(operators.takeWhile(function () { return !_this.destroyed; }))
+                .subscribe(outputs[output]); });
+        };
+        RenderComponentComponent.prototype._render = function () {
+            var _this = this;
+            this.view.clear();
+            if (!this.rendering) {
+                return;
+            }
+            var resolveComponent = isRawRendering(this.rendering)
+                ? Promise.resolve({ componentImplementation: RawComponent, componentDefinition: this.rendering })
+                : this.componentFactory.getComponent(this.rendering);
+            resolveComponent.then(function (rendering) {
+                if (!rendering.componentImplementation) {
+                    var componentName = rendering.componentDefinition.componentName;
+                    console.error("Attempted to render unknown component " + componentName + ".", "Ensure component is mapped, like:\n          JssModule.withComponents([\n            { name: '" + componentName + "', type: " + componentName + "Component }\n          ])");
+                    rendering.componentImplementation = _this.missingComponentComponent;
+                }
+                var componentFactory = rendering.componentFactory || _this.componentFactoryResolver.resolveComponentFactory(rendering.componentImplementation);
+                var componentInstance = _this.view.createComponent(componentFactory, 0).instance;
+                componentInstance.rendering = rendering.componentDefinition;
+                if (_this._inputs) {
+                    _this._setComponentInputs(componentInstance, _this._inputs);
+                }
+                if (_this.outputs) {
+                    _this._subscribeComponentOutputs(componentInstance, _this.outputs);
+                }
+            });
+        };
+        RenderComponentComponent.ctorParameters = function () { return [
+            { type: core.ComponentFactoryResolver },
+            { type: core.KeyValueDiffers },
+            { type: JssComponentFactoryService },
+            { type: core.Type, decorators: [{ type: core.Inject, args: [PLACEHOLDER_MISSING_COMPONENT_COMPONENT,] }] }
+        ]; };
+        __decorate([
+            core.Input()
+        ], RenderComponentComponent.prototype, "rendering", void 0);
+        __decorate([
+            core.Input()
+        ], RenderComponentComponent.prototype, "outputs", void 0);
+        __decorate([
+            core.ViewChild('view', { read: core.ViewContainerRef, static: true })
+        ], RenderComponentComponent.prototype, "view", void 0);
+        __decorate([
+            core.Input()
+        ], RenderComponentComponent.prototype, "inputs", null);
+        RenderComponentComponent = __decorate([
+            core.Component({
+                selector: 'sc-render-component',
+                template: "\n    <ng-template #view></ng-template>\n  "
+            }),
+            __param(3, core.Inject(PLACEHOLDER_MISSING_COMPONENT_COMPONENT))
+        ], RenderComponentComponent);
+        return RenderComponentComponent;
     }());
 
-    var JssModule = /** @class */ (function () {
-        function JssModule() {
-        }
-        JssModule_1 = JssModule;
-        /**
-         * Instantiates the JSS module with no component factory.
-         * Useful for using it from libraries. Most of the time you'd want withComponents()
-         */
-        JssModule.forRoot = function () {
-            return {
-                ngModule: JssModule_1,
-                providers: [
-                    LayoutService,
-                    common.DatePipe,
-                    JssComponentFactoryService,
-                ],
-            };
-        };
-        /** Instantiates a module for a lazy-loaded JSS component */
-        JssModule.forChild = function (component) {
-            return {
-                ngModule: JssModule_1,
-                providers: [
-                    { provide: core.ANALYZE_FOR_ENTRY_COMPONENTS, useValue: component, multi: true },
-                    { provide: router.ROUTES, useValue: [], multi: true },
-                    { provide: DYNAMIC_COMPONENT, useValue: component },
-                ],
-            };
-        };
-        /**
-         * Instantiates the JSS module and specifies the mapping from component name to component implementation.
-         * Appropriate when defining the set of JSS components that your app is aware of.
-         */
-        JssModule.withComponents = function (components, lazyComponents) {
-            return {
-                ngModule: JssModule_1,
-                providers: __spread([
-                    {
-                        provide: core.ANALYZE_FOR_ENTRY_COMPONENTS,
-                        useValue: components,
-                        multi: true,
-                    },
-                    { provide: PLACEHOLDER_COMPONENTS, useValue: components },
-                    { provide: PLACEHOLDER_LAZY_COMPONENTS, useValue: lazyComponents || [] },
-                    { provide: router.ROUTES, useValue: lazyComponents || [], multi: true },
-                    { provide: PLACEHOLDER_MISSING_COMPONENT_COMPONENT, useValue: MissingComponentComponent }
-                ], JssModule_1.forRoot().providers),
-            };
-        };
-        var JssModule_1;
-        JssModule = JssModule_1 = __decorate([
-            core.NgModule({
-                imports: [
-                    common.CommonModule,
-                ],
-                declarations: [
-                    FileDirective,
-                    ImageDirective,
-                    LinkDirective,
-                    RouterLinkDirective,
-                    GenericLinkDirective,
-                    DateDirective,
-                    RenderEachDirective,
-                    RenderEmptyDirective,
-                    PlaceholderLoadingDirective,
-                    RenderComponentComponent,
-                    PlaceholderComponent,
-                    RawComponent,
-                    RichTextDirective,
-                    TextDirective,
-                    MissingComponentComponent,
-                ],
-                exports: [
-                    FileDirective,
-                    ImageDirective,
-                    DateDirective,
-                    LinkDirective,
-                    RouterLinkDirective,
-                    GenericLinkDirective,
-                    RenderEachDirective,
-                    RenderEmptyDirective,
-                    RenderComponentComponent,
-                    PlaceholderComponent,
-                    PlaceholderLoadingDirective,
-                    RichTextDirective,
-                    TextDirective,
-                ],
-                entryComponents: [
-                    RawComponent,
-                    MissingComponentComponent,
-                ],
-            })
-        ], JssModule);
-        return JssModule;
+    var JssModule = /** @class */ (function () {
+        function JssModule() {
+        }
+        JssModule_1 = JssModule;
+        /**
+         * Instantiates the JSS module with no component factory.
+         * Useful for using it from libraries. Most of the time you'd want withComponents()
+         */
+        JssModule.forRoot = function () {
+            return {
+                ngModule: JssModule_1,
+                providers: [
+                    LayoutService,
+                    common.DatePipe,
+                    JssComponentFactoryService,
+                ],
+            };
+        };
+        /** Instantiates a module for a lazy-loaded JSS component */
+        JssModule.forChild = function (component) {
+            return {
+                ngModule: JssModule_1,
+                providers: [
+                    { provide: core.ANALYZE_FOR_ENTRY_COMPONENTS, useValue: component, multi: true },
+                    { provide: router.ROUTES, useValue: [], multi: true },
+                    { provide: DYNAMIC_COMPONENT, useValue: component },
+                ],
+            };
+        };
+        /**
+         * Instantiates the JSS module and specifies the mapping from component name to component implementation.
+         * Appropriate when defining the set of JSS components that your app is aware of.
+         */
+        JssModule.withComponents = function (components, lazyComponents) {
+            return {
+                ngModule: JssModule_1,
+                providers: __spread([
+                    {
+                        provide: core.ANALYZE_FOR_ENTRY_COMPONENTS,
+                        useValue: components,
+                        multi: true,
+                    },
+                    { provide: PLACEHOLDER_COMPONENTS, useValue: components },
+                    { provide: PLACEHOLDER_LAZY_COMPONENTS, useValue: lazyComponents || [] },
+                    { provide: router.ROUTES, useValue: lazyComponents || [], multi: true },
+                    { provide: PLACEHOLDER_MISSING_COMPONENT_COMPONENT, useValue: MissingComponentComponent }
+                ], JssModule_1.forRoot().providers),
+            };
+        };
+        var JssModule_1;
+        JssModule = JssModule_1 = __decorate([
+            core.NgModule({
+                imports: [
+                    common.CommonModule,
+                ],
+                declarations: [
+                    FileDirective,
+                    ImageDirective,
+                    LinkDirective,
+                    RouterLinkDirective,
+                    GenericLinkDirective,
+                    DateDirective,
+                    RenderEachDirective,
+                    RenderEmptyDirective,
+                    PlaceholderLoadingDirective,
+                    RenderComponentComponent,
+                    PlaceholderComponent,
+                    RawComponent,
+                    RichTextDirective,
+                    TextDirective,
+                    MissingComponentComponent,
+                ],
+                exports: [
+                    FileDirective,
+                    ImageDirective,
+                    DateDirective,
+                    LinkDirective,
+                    RouterLinkDirective,
+                    GenericLinkDirective,
+                    RenderEachDirective,
+                    RenderEmptyDirective,
+                    RenderComponentComponent,
+                    PlaceholderComponent,
+                    PlaceholderLoadingDirective,
+                    RichTextDirective,
+                    TextDirective,
+                ],
+                entryComponents: [
+                    RawComponent,
+                    MissingComponentComponent,
+                ],
+            })
+        ], JssModule);
+        return JssModule;
     }());
 
     Object.defineProperty(exports, 'dataApi', {