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

package/dist/fesm5/sitecore-jss-sitecore-jss-angular.js

@@ -7,1208 +7,1208 @@ import { Observable, throwError, from } from 'rxjs';
 import { takeWhile, catchError } from 'rxjs/operators';
 import { DatePipe, CommonModule } from '@angular/common';
 
-/**
- * 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: ViewContainerRef },
-        { type: TemplateRef }
-    ]; };
-    __decorate([
-        Input('scFile')
-    ], FileDirective.prototype, "field", void 0);
-    FileDirective = __decorate([
-        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: ViewContainerRef },
+        { type: TemplateRef }
+    ]; };
+    __decorate([
+        Input('scFile')
+    ], FileDirective.prototype, "field", void 0);
+    FileDirective = __decorate([
+        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 = 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 = mediaApi.updateImageUrl(src, imageParams);
-        if (srcSet) {
-            // replace with HTML-formatted srcset, including updated image URLs
-            newAttrs.srcSet = 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: ViewContainerRef },
-        { type: TemplateRef },
-        { type: Renderer2 },
-        { type: ElementRef }
-    ]; };
-    __decorate([
-        Input('scImage')
-    ], ImageDirective.prototype, "field", void 0);
-    __decorate([
-        Input('scImageEditable')
-    ], ImageDirective.prototype, "editable", void 0);
-    __decorate([
-        Input('scImageUrlParams')
-    ], ImageDirective.prototype, "urlParams", void 0);
-    __decorate([
-        Input('scImageAttrs')
-    ], ImageDirective.prototype, "attrs", void 0);
-    ImageDirective = __decorate([
-        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 = 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 = mediaApi.updateImageUrl(src, imageParams);
+        if (srcSet) {
+            // replace with HTML-formatted srcset, including updated image URLs
+            newAttrs.srcSet = 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: ViewContainerRef },
+        { type: TemplateRef },
+        { type: Renderer2 },
+        { type: ElementRef }
+    ]; };
+    __decorate([
+        Input('scImage')
+    ], ImageDirective.prototype, "field", void 0);
+    __decorate([
+        Input('scImageEditable')
+    ], ImageDirective.prototype, "editable", void 0);
+    __decorate([
+        Input('scImageUrlParams')
+    ], ImageDirective.prototype, "urlParams", void 0);
+    __decorate([
+        Input('scImageAttrs')
+    ], ImageDirective.prototype, "attrs", void 0);
+    ImageDirective = __decorate([
+        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: ViewContainerRef },
-        { type: TemplateRef },
-        { type: Renderer2 },
-        { type: ElementRef }
-    ]; };
-    __decorate([
-        Input('scLinkEditable')
-    ], LinkDirective.prototype, "editable", void 0);
-    __decorate([
-        Input('scLinkAttrs')
-    ], LinkDirective.prototype, "attrs", void 0);
-    __decorate([
-        Input('scLink')
-    ], LinkDirective.prototype, "field", void 0);
-    LinkDirective = __decorate([
-        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: ViewContainerRef },
+        { type: TemplateRef },
+        { type: Renderer2 },
+        { type: ElementRef }
+    ]; };
+    __decorate([
+        Input('scLinkEditable')
+    ], LinkDirective.prototype, "editable", void 0);
+    __decorate([
+        Input('scLinkAttrs')
+    ], LinkDirective.prototype, "attrs", void 0);
+    __decorate([
+        Input('scLink')
+    ], LinkDirective.prototype, "field", void 0);
+    LinkDirective = __decorate([
+        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: ViewContainerRef },
-        { type: TemplateRef },
-        { type: Renderer2 },
-        { type: ElementRef },
-        { type: Router }
-    ]; };
-    __decorate([
-        Input('scRouterLinkEditable')
-    ], RouterLinkDirective.prototype, "editable", void 0);
-    __decorate([
-        Input('scRouterLinkAttrs')
-    ], RouterLinkDirective.prototype, "attrs", void 0);
-    __decorate([
-        Input('scRouterLink')
-    ], RouterLinkDirective.prototype, "field", void 0);
-    RouterLinkDirective = __decorate([
-        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: ViewContainerRef },
+        { type: TemplateRef },
+        { type: Renderer2 },
+        { type: ElementRef },
+        { type: Router }
+    ]; };
+    __decorate([
+        Input('scRouterLinkEditable')
+    ], RouterLinkDirective.prototype, "editable", void 0);
+    __decorate([
+        Input('scRouterLinkAttrs')
+    ], RouterLinkDirective.prototype, "attrs", void 0);
+    __decorate([
+        Input('scRouterLink')
+    ], RouterLinkDirective.prototype, "field", void 0);
+    RouterLinkDirective = __decorate([
+        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: ViewContainerRef },
-        { type: TemplateRef },
-        { type: Renderer2 },
-        { type: ElementRef },
-        { type: Router }
-    ]; };
-    __decorate([
-        Input('scGenericLinkEditable')
-    ], GenericLinkDirective.prototype, "editable", void 0);
-    __decorate([
-        Input('scGenericLinkAttrs')
-    ], GenericLinkDirective.prototype, "attrs", void 0);
-    __decorate([
-        Input('scGenericLink')
-    ], GenericLinkDirective.prototype, "field", void 0);
-    __decorate([
-        Input('scGenericLinkExtras')
-    ], GenericLinkDirective.prototype, "extras", void 0);
-    GenericLinkDirective = __decorate([
-        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: ViewContainerRef },
+        { type: TemplateRef },
+        { type: Renderer2 },
+        { type: ElementRef },
+        { type: Router }
+    ]; };
+    __decorate([
+        Input('scGenericLinkEditable')
+    ], GenericLinkDirective.prototype, "editable", void 0);
+    __decorate([
+        Input('scGenericLinkAttrs')
+    ], GenericLinkDirective.prototype, "attrs", void 0);
+    __decorate([
+        Input('scGenericLink')
+    ], GenericLinkDirective.prototype, "field", void 0);
+    __decorate([
+        Input('scGenericLinkExtras')
+    ], GenericLinkDirective.prototype, "extras", void 0);
+    GenericLinkDirective = __decorate([
+        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 InjectionToken('Sc.placeholder.components');
-var PLACEHOLDER_LAZY_COMPONENTS = new InjectionToken('Sc.placeholder.lazyComponents');
-var PLACEHOLDER_MISSING_COMPONENT_COMPONENT = new 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 InjectionToken('Sc.placeholder.components');
+var PLACEHOLDER_LAZY_COMPONENTS = new InjectionToken('Sc.placeholder.lazyComponents');
+var PLACEHOLDER_MISSING_COMPONENT_COMPONENT = new InjectionToken('Sc.placeholder.missingComponentComponent');
 var DYNAMIC_COMPONENT = new 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: Renderer2 },
-        { type: ElementRef }
-    ]; };
-    __decorate([
-        Input()
-    ], RawComponent.prototype, "rendering", void 0);
-    RawComponent = __decorate([
-        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: Renderer2 },
+        { type: ElementRef }
+    ]; };
+    __decorate([
+        Input()
+    ], RawComponent.prototype, "rendering", void 0);
+    RawComponent = __decorate([
+        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: Injector },
-        { type: Array, decorators: [{ type: Inject, args: [PLACEHOLDER_COMPONENTS,] }] },
-        { type: Array, decorators: [{ type: Inject, args: [PLACEHOLDER_LAZY_COMPONENTS,] }] }
-    ]; };
-    JssComponentFactoryService = __decorate([
-        Injectable(),
-        __param(1, Inject(PLACEHOLDER_COMPONENTS)),
-        __param(2, 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: Injector },
+        { type: Array, decorators: [{ type: Inject, args: [PLACEHOLDER_COMPONENTS,] }] },
+        { type: Array, decorators: [{ type: Inject, args: [PLACEHOLDER_LAZY_COMPONENTS,] }] }
+    ]; };
+    JssComponentFactoryService = __decorate([
+        Injectable(),
+        __param(1, Inject(PLACEHOLDER_COMPONENTS)),
+        __param(2, Inject(PLACEHOLDER_LAZY_COMPONENTS))
+    ], JssComponentFactoryService);
+    return JssComponentFactoryService;
 }());
 
-var PlaceholderLoadingDirective = /** @class */ (function () {
-    function PlaceholderLoadingDirective(templateRef) {
-        this.templateRef = templateRef;
-    }
-    PlaceholderLoadingDirective.ctorParameters = function () { return [
-        { type: TemplateRef }
-    ]; };
-    PlaceholderLoadingDirective = __decorate([
-        Directive({
-            selector: '[scPlaceholderLoading]',
-        })
-    ], PlaceholderLoadingDirective);
-    return PlaceholderLoadingDirective;
+var PlaceholderLoadingDirective = /** @class */ (function () {
+    function PlaceholderLoadingDirective(templateRef) {
+        this.templateRef = templateRef;
+    }
+    PlaceholderLoadingDirective.ctorParameters = function () { return [
+        { type: TemplateRef }
+    ]; };
+    PlaceholderLoadingDirective = __decorate([
+        Directive({
+            selector: '[scPlaceholderLoading]',
+        })
+    ], PlaceholderLoadingDirective);
+    return PlaceholderLoadingDirective;
 }());
 
-var RenderEachDirective = /** @class */ (function () {
-    function RenderEachDirective(templateRef) {
-        this.templateRef = templateRef;
-    }
-    RenderEachDirective.ctorParameters = function () { return [
-        { type: TemplateRef }
-    ]; };
-    RenderEachDirective = __decorate([
-        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: TemplateRef }
+    ]; };
+    RenderEachDirective = __decorate([
+        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: TemplateRef }
-    ]; };
-    RenderEmptyDirective = __decorate([
-        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: TemplateRef }
+    ]; };
+    RenderEmptyDirective = __decorate([
+        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 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 Observable; })
-            .forEach(function (output) { return componentInstance[output]
-            .pipe(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: ComponentFactoryResolver },
-        { type: KeyValueDiffers },
-        { type: JssComponentFactoryService },
-        { type: ChangeDetectorRef },
-        { type: ElementRef },
-        { type: Renderer2 },
-        { type: Type, decorators: [{ type: Inject, args: [PLACEHOLDER_MISSING_COMPONENT_COMPONENT,] }] }
-    ]; };
-    __decorate([
-        Input()
-    ], PlaceholderComponent.prototype, "name", void 0);
-    __decorate([
-        Input()
-    ], PlaceholderComponent.prototype, "rendering", void 0);
-    __decorate([
-        Input()
-    ], PlaceholderComponent.prototype, "renderings", void 0);
-    __decorate([
-        Input()
-    ], PlaceholderComponent.prototype, "outputs", void 0);
-    __decorate([
-        Output()
-    ], PlaceholderComponent.prototype, "loaded", void 0);
-    __decorate([
-        ViewChild('view', { read: ViewContainerRef, static: true })
-    ], PlaceholderComponent.prototype, "view", void 0);
-    __decorate([
-        ContentChild(RenderEachDirective, { static: true })
-    ], PlaceholderComponent.prototype, "renderEachTemplate", void 0);
-    __decorate([
-        ContentChild(RenderEmptyDirective, { static: true })
-    ], PlaceholderComponent.prototype, "renderEmptyTemplate", void 0);
-    __decorate([
-        ContentChild(PlaceholderLoadingDirective, { static: true })
-    ], PlaceholderComponent.prototype, "placeholderLoading", void 0);
-    __decorate([
-        Input()
-    ], PlaceholderComponent.prototype, "inputs", null);
-    PlaceholderComponent = __decorate([
-        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, 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 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 Observable; })
+            .forEach(function (output) { return componentInstance[output]
+            .pipe(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: ComponentFactoryResolver },
+        { type: KeyValueDiffers },
+        { type: JssComponentFactoryService },
+        { type: ChangeDetectorRef },
+        { type: ElementRef },
+        { type: Renderer2 },
+        { type: Type, decorators: [{ type: Inject, args: [PLACEHOLDER_MISSING_COMPONENT_COMPONENT,] }] }
+    ]; };
+    __decorate([
+        Input()
+    ], PlaceholderComponent.prototype, "name", void 0);
+    __decorate([
+        Input()
+    ], PlaceholderComponent.prototype, "rendering", void 0);
+    __decorate([
+        Input()
+    ], PlaceholderComponent.prototype, "renderings", void 0);
+    __decorate([
+        Input()
+    ], PlaceholderComponent.prototype, "outputs", void 0);
+    __decorate([
+        Output()
+    ], PlaceholderComponent.prototype, "loaded", void 0);
+    __decorate([
+        ViewChild('view', { read: ViewContainerRef, static: true })
+    ], PlaceholderComponent.prototype, "view", void 0);
+    __decorate([
+        ContentChild(RenderEachDirective, { static: true })
+    ], PlaceholderComponent.prototype, "renderEachTemplate", void 0);
+    __decorate([
+        ContentChild(RenderEmptyDirective, { static: true })
+    ], PlaceholderComponent.prototype, "renderEmptyTemplate", void 0);
+    __decorate([
+        ContentChild(PlaceholderLoadingDirective, { static: true })
+    ], PlaceholderComponent.prototype, "placeholderLoading", void 0);
+    __decorate([
+        Input()
+    ], PlaceholderComponent.prototype, "inputs", null);
+    PlaceholderComponent = __decorate([
+        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, 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: ViewContainerRef },
-        { type: TemplateRef }
-    ]; };
-    __decorate([
-        Input('scRichTextEditable')
-    ], RichTextDirective.prototype, "editable", void 0);
-    __decorate([
-        Input('scRichText')
-    ], RichTextDirective.prototype, "field", void 0);
-    RichTextDirective = __decorate([
-        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: ViewContainerRef },
+        { type: TemplateRef }
+    ]; };
+    __decorate([
+        Input('scRichTextEditable')
+    ], RichTextDirective.prototype, "editable", void 0);
+    __decorate([
+        Input('scRichText')
+    ], RichTextDirective.prototype, "field", void 0);
+    RichTextDirective = __decorate([
+        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: ViewContainerRef },
-        { type: TemplateRef }
-    ]; };
-    __decorate([
-        Input('scTextEditable')
-    ], TextDirective.prototype, "editable", void 0);
-    __decorate([
-        Input('scTextEncode')
-    ], TextDirective.prototype, "encode", void 0);
-    __decorate([
-        Input('scText')
-    ], TextDirective.prototype, "field", void 0);
-    TextDirective = __decorate([
-        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: ViewContainerRef },
+        { type: TemplateRef }
+    ]; };
+    __decorate([
+        Input('scTextEditable')
+    ], TextDirective.prototype, "editable", void 0);
+    __decorate([
+        Input('scTextEncode')
+    ], TextDirective.prototype, "encode", void 0);
+    __decorate([
+        Input('scText')
+    ], TextDirective.prototype, "field", void 0);
+    TextDirective = __decorate([
+        Directive({
+            selector: '[scText]',
+        })
+    ], TextDirective);
+    return TextDirective;
 }());
 
-var LayoutServiceError = /** @class */ (function () {
-    function LayoutServiceError() {
-    }
-    return LayoutServiceError;
+var LayoutServiceError = /** @class */ (function () {
+    function LayoutServiceError() {
+    }
+    return LayoutServiceError;
 }());
 
-var fetchRouteData = dataApi.fetchRouteData, fetchPlaceholderData = 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 throwError(layoutServiceError);
-    };
-    LayoutService.prototype.getRouteData = function (route, options) {
-        return from(fetchRouteData(route, options))
-            .pipe(catchError(LayoutService_1.getLayoutServiceError));
-    };
-    LayoutService.prototype.getPlaceholderData = function (route, placeholderName, options) {
-        return from(fetchPlaceholderData(placeholderName, route, options))
-            .pipe(catchError(LayoutService_1.getLayoutServiceError));
-    };
-    var LayoutService_1;
-    LayoutService = LayoutService_1 = __decorate([
-        Injectable()
-    ], LayoutService);
-    return LayoutService;
+var fetchRouteData = dataApi.fetchRouteData, fetchPlaceholderData = 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 throwError(layoutServiceError);
+    };
+    LayoutService.prototype.getRouteData = function (route, options) {
+        return from(fetchRouteData(route, options))
+            .pipe(catchError(LayoutService_1.getLayoutServiceError));
+    };
+    LayoutService.prototype.getPlaceholderData = function (route, placeholderName, options) {
+        return from(fetchPlaceholderData(placeholderName, route, options))
+            .pipe(catchError(LayoutService_1.getLayoutServiceError));
+    };
+    var LayoutService_1;
+    LayoutService = LayoutService_1 = __decorate([
+        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: ViewContainerRef },
-        { type: TemplateRef },
-        { type: DatePipe }
-    ]; };
-    __decorate([
-        Input('scDateFormat')
-    ], DateDirective.prototype, "format", void 0);
-    __decorate([
-        Input('scDateTimezone')
-    ], DateDirective.prototype, "timezone", void 0);
-    __decorate([
-        Input('scDateLocale')
-    ], DateDirective.prototype, "locale", void 0);
-    __decorate([
-        Input('scDateEditable')
-    ], DateDirective.prototype, "editable", void 0);
-    __decorate([
-        Input('scDate')
-    ], DateDirective.prototype, "field", void 0);
-    DateDirective = __decorate([
-        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: ViewContainerRef },
+        { type: TemplateRef },
+        { type: DatePipe }
+    ]; };
+    __decorate([
+        Input('scDateFormat')
+    ], DateDirective.prototype, "format", void 0);
+    __decorate([
+        Input('scDateTimezone')
+    ], DateDirective.prototype, "timezone", void 0);
+    __decorate([
+        Input('scDateLocale')
+    ], DateDirective.prototype, "locale", void 0);
+    __decorate([
+        Input('scDateEditable')
+    ], DateDirective.prototype, "editable", void 0);
+    __decorate([
+        Input('scDate')
+    ], DateDirective.prototype, "field", void 0);
+    DateDirective = __decorate([
+        Directive({
+            selector: '[scDate]',
+        })
+    ], DateDirective);
+    return DateDirective;
 }());
 
-var MissingComponentComponent = /** @class */ (function () {
-    function MissingComponentComponent() {
-    }
-    __decorate([
-        Input()
-    ], MissingComponentComponent.prototype, "rendering", void 0);
-    MissingComponentComponent = __decorate([
-        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([
+        Input()
+    ], MissingComponentComponent.prototype, "rendering", void 0);
+    MissingComponentComponent = __decorate([
+        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 Observable; })
-            .forEach(function (output) { return componentInstance[output]
-            .pipe(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: ComponentFactoryResolver },
-        { type: KeyValueDiffers },
-        { type: JssComponentFactoryService },
-        { type: Type, decorators: [{ type: Inject, args: [PLACEHOLDER_MISSING_COMPONENT_COMPONENT,] }] }
-    ]; };
-    __decorate([
-        Input()
-    ], RenderComponentComponent.prototype, "rendering", void 0);
-    __decorate([
-        Input()
-    ], RenderComponentComponent.prototype, "outputs", void 0);
-    __decorate([
-        ViewChild('view', { read: ViewContainerRef, static: true })
-    ], RenderComponentComponent.prototype, "view", void 0);
-    __decorate([
-        Input()
-    ], RenderComponentComponent.prototype, "inputs", null);
-    RenderComponentComponent = __decorate([
-        Component({
-            selector: 'sc-render-component',
-            template: "\n    <ng-template #view></ng-template>\n  "
-        }),
-        __param(3, 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 Observable; })
+            .forEach(function (output) { return componentInstance[output]
+            .pipe(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: ComponentFactoryResolver },
+        { type: KeyValueDiffers },
+        { type: JssComponentFactoryService },
+        { type: Type, decorators: [{ type: Inject, args: [PLACEHOLDER_MISSING_COMPONENT_COMPONENT,] }] }
+    ]; };
+    __decorate([
+        Input()
+    ], RenderComponentComponent.prototype, "rendering", void 0);
+    __decorate([
+        Input()
+    ], RenderComponentComponent.prototype, "outputs", void 0);
+    __decorate([
+        ViewChild('view', { read: ViewContainerRef, static: true })
+    ], RenderComponentComponent.prototype, "view", void 0);
+    __decorate([
+        Input()
+    ], RenderComponentComponent.prototype, "inputs", null);
+    RenderComponentComponent = __decorate([
+        Component({
+            selector: 'sc-render-component',
+            template: "\n    <ng-template #view></ng-template>\n  "
+        }),
+        __param(3, 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,
-                DatePipe,
-                JssComponentFactoryService,
-            ],
-        };
-    };
-    /** Instantiates a module for a lazy-loaded JSS component */
-    JssModule.forChild = function (component) {
-        return {
-            ngModule: JssModule_1,
-            providers: [
-                { provide: ANALYZE_FOR_ENTRY_COMPONENTS, useValue: component, multi: true },
-                { provide: 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: ANALYZE_FOR_ENTRY_COMPONENTS,
-                    useValue: components,
-                    multi: true,
-                },
-                { provide: PLACEHOLDER_COMPONENTS, useValue: components },
-                { provide: PLACEHOLDER_LAZY_COMPONENTS, useValue: lazyComponents || [] },
-                { provide: ROUTES, useValue: lazyComponents || [], multi: true },
-                { provide: PLACEHOLDER_MISSING_COMPONENT_COMPONENT, useValue: MissingComponentComponent }
-            ], JssModule_1.forRoot().providers),
-        };
-    };
-    var JssModule_1;
-    JssModule = JssModule_1 = __decorate([
-        NgModule({
-            imports: [
-                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,
+                DatePipe,
+                JssComponentFactoryService,
+            ],
+        };
+    };
+    /** Instantiates a module for a lazy-loaded JSS component */
+    JssModule.forChild = function (component) {
+        return {
+            ngModule: JssModule_1,
+            providers: [
+                { provide: ANALYZE_FOR_ENTRY_COMPONENTS, useValue: component, multi: true },
+                { provide: 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: ANALYZE_FOR_ENTRY_COMPONENTS,
+                    useValue: components,
+                    multi: true,
+                },
+                { provide: PLACEHOLDER_COMPONENTS, useValue: components },
+                { provide: PLACEHOLDER_LAZY_COMPONENTS, useValue: lazyComponents || [] },
+                { provide: ROUTES, useValue: lazyComponents || [], multi: true },
+                { provide: PLACEHOLDER_MISSING_COMPONENT_COMPONENT, useValue: MissingComponentComponent }
+            ], JssModule_1.forRoot().providers),
+        };
+    };
+    var JssModule_1;
+    JssModule = JssModule_1 = __decorate([
+        NgModule({
+            imports: [
+                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;
 }());
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { ComponentNameAndType, DYNAMIC_COMPONENT, FileDirective, GenericLinkDirective, ImageDirective, JssModule, LayoutService, LayoutServiceError, LinkDirective, PlaceholderComponent, PlaceholderLoadingDirective, RichTextDirective, RouterLinkDirective, TextDirective, isRawRendering, PLACEHOLDER_COMPONENTS as ɵb, PLACEHOLDER_LAZY_COMPONENTS as ɵc, PLACEHOLDER_MISSING_COMPONENT_COMPONENT as ɵd, RenderEachDirective as ɵe, RenderEmptyDirective as ɵf, JssComponentFactoryService as ɵg, DateDirective as ɵh, RenderComponentComponent as ɵi, RawComponent as ɵj, MissingComponentComponent as ɵk };