@sitecore-jss/sitecore-jss-angular 20.0.0-canary.99 → 20.0.2

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

@@ -6,926 +6,925 @@ import { Router, ROUTES } from '@angular/router';
 import { Observable } from 'rxjs';
 import { takeWhile } from 'rxjs/operators';
 import { DatePipe, CommonModule } from '@angular/common';
-import { ExperienceEditor } from '@sitecore-jss/sitecore-jss/utils';
-export { isEditorActive, isExperienceEditorActive, isServer, resetEditorChromes, resetExperienceEditorChromes } from '@sitecore-jss/sitecore-jss/utils';
 export { GraphQLDictionaryService, RestDictionaryService } from '@sitecore-jss/sitecore-jss/i18n';
 export { GraphQLLayoutService, RestLayoutService, getChildPlaceholder, getFieldValue } from '@sitecore-jss/sitecore-jss/layout';
 export { constants } from '@sitecore-jss/sitecore-jss';
+export { handleEditorAnchors, isEditorActive, isExperienceEditorActive, isServer, resetEditorChromes, resetExperienceEditorChromes } from '@sitecore-jss/sitecore-jss/utils';
 
-/**
- * File fields cannot be managed via the EE. We never output "editable."
- */
-class FileDirective {
-    constructor(viewContainer, templateRef) {
-        this.viewContainer = viewContainer;
-        this.templateRef = templateRef;
-    }
-    ngOnChanges(changes) {
-        if (changes.field) {
-            if (!this.viewRef) {
-                this.viewContainer.clear();
-                this.viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
-            }
-            this.updateView();
-        }
-    }
-    updateView() {
-        const field = this.field;
-        if (!field || (!field.value && !field.src)) {
-            return;
-        }
-        const file = field.src ? field : field.value;
-        this.viewRef.rootNodes.forEach((node) => {
-            if (!file)
-                return;
-            node.href = file.src;
-            if (node.innerHTML === '') {
-                node.innerHTML = file.title || file.displayName;
-            }
-        });
-    }
-}
-FileDirective.decorators = [
-    { type: Directive, args: [{ selector: '[scFile]' },] }
-];
-FileDirective.ctorParameters = () => [
-    { type: ViewContainerRef },
-    { type: TemplateRef }
-];
-FileDirective.propDecorators = {
-    field: [{ type: Input, args: ['scFile',] }]
+/**
+ * File fields cannot be managed via the EE. We never output "editable."
+ */
+class FileDirective {
+    constructor(viewContainer, templateRef) {
+        this.viewContainer = viewContainer;
+        this.templateRef = templateRef;
+    }
+    ngOnChanges(changes) {
+        if (changes.field) {
+            if (!this.viewRef) {
+                this.viewContainer.clear();
+                this.viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
+            }
+            this.updateView();
+        }
+    }
+    updateView() {
+        const field = this.field;
+        if (!field || (!field.value && !field.src)) {
+            return;
+        }
+        const file = field.src ? field : field.value;
+        this.viewRef.rootNodes.forEach((node) => {
+            if (!file)
+                return;
+            node.href = file.src;
+            if (node.innerHTML === '') {
+                node.innerHTML = file.title || file.displayName;
+            }
+        });
+    }
+}
+FileDirective.decorators = [
+    { type: Directive, args: [{ selector: '[scFile]' },] }
+];
+FileDirective.ctorParameters = () => [
+    { type: ViewContainerRef },
+    { type: TemplateRef }
+];
+FileDirective.propDecorators = {
+    field: [{ type: Input, args: ['scFile',] }]
 };
 
-class ImageDirective {
-    constructor(viewContainer, templateRef, renderer, elementRef) {
-        this.viewContainer = viewContainer;
-        this.templateRef = templateRef;
-        this.renderer = renderer;
-        this.elementRef = elementRef;
-        this.inlineRef = null;
-        this.editable = true;
-        this.urlParams = {};
-        this.attrs = {};
-    }
-    ngOnChanges(changes) {
-        if (changes.field || changes.editable || changes.urlParams || changes.attrs) {
-            this.viewContainer.clear();
-            if (this.inlineRef) {
-                this.inlineRef.remove();
-                this.inlineRef = null;
-            }
-            this.updateView();
-        }
-    }
-    updateView() {
-        const overrideAttrs = Object.assign(Object.assign({}, this.getElementAttrs()), this.attrs);
-        const media = this.field;
-        if (!media || (!media.editable && !media.value && !media.src)) {
-            return;
-        }
-        let attrs = {};
-        // we likely have an experience editor value, should be a string
-        if (this.editable && media.editable) {
-            const 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);
-            }
-            const tempImg = this.renderer.createElement('img');
-            Object.entries(attrs).forEach(([key, attrValue]) => tempImg.setAttribute(key, attrValue));
-            const editableMarkup = media.editable.replace(foundImg.imgTag, tempImg.outerHTML);
-            return this.renderInlineWrapper(editableMarkup);
-        }
-        // some wise-guy/gal is passing in a 'raw' image object value
-        const img = media.src ? media : media.value;
-        if (!img) {
-            return null;
-        }
-        attrs = this.getImageAttrs(img, overrideAttrs, this.urlParams);
-        if (attrs) {
-            this.renderTemplate(attrs);
-        }
-    }
-    getImageAttrs(fieldAttrs, parsedAttrs, imageParams) {
-        const combinedAttrs = Object.assign(Object.assign({}, fieldAttrs), parsedAttrs);
-        // eslint-disable-next-line prefer-const
-        let { src, srcSet } = combinedAttrs, otherAttrs = __rest(combinedAttrs, ["src", "srcSet"]);
-        if (!src) {
-            return null;
-        }
-        const newAttrs = Object.assign({}, otherAttrs);
-        // update image URL for jss handler and image rendering params
-        src = mediaApi.updateImageUrl(src, imageParams, this.mediaUrlPrefix);
-        if (srcSet) {
-            // replace with HTML-formatted srcset, including updated image URLs
-            newAttrs.srcSet = mediaApi.getSrcSet(src, srcSet, imageParams, this.mediaUrlPrefix);
-        }
-        else {
-            newAttrs.src = src;
-        }
-        return newAttrs;
-    }
-    renderTemplate(imageProps) {
-        const viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
-        viewRef.rootNodes.forEach((node) => {
-            Object.entries(imageProps).forEach(([key, imgPropVal]) => this.renderer.setAttribute(node, key, imgPropVal));
-        });
-    }
-    getElementAttrs() {
-        const view = this.templateRef.createEmbeddedView(null);
-        const element = view.rootNodes[0];
-        if (!element) {
-            return {};
-        }
-        const attrs = {};
-        for (let i = 0; i < element.attributes.length; i++) {
-            const attr = element.attributes.item(i);
-            if (attr) {
-                attrs[attr.name] = attr.value;
-            }
-        }
-        return attrs;
-    }
-    renderInlineWrapper(editable) {
-        const span = this.renderer.createElement('span');
-        span.className = 'sc-image-wrapper';
-        span.innerHTML = editable;
-        const parentNode = this.renderer.parentNode(this.elementRef.nativeElement);
-        this.renderer.insertBefore(parentNode, span, this.elementRef.nativeElement);
-        parentNode.removeChild(this.elementRef.nativeElement);
-        this.inlineRef = span;
-    }
-}
-ImageDirective.decorators = [
-    { type: Directive, args: [{ selector: '[scImage]' },] }
-];
-ImageDirective.ctorParameters = () => [
-    { type: ViewContainerRef },
-    { type: TemplateRef },
-    { type: Renderer2 },
-    { type: ElementRef }
-];
-ImageDirective.propDecorators = {
-    field: [{ type: Input, args: ['scImage',] }],
-    editable: [{ type: Input, args: ['scImageEditable',] }],
-    mediaUrlPrefix: [{ type: Input, args: ['scImageMediaUrlPrefix',] }],
-    urlParams: [{ type: Input, args: ['scImageUrlParams',] }],
-    attrs: [{ type: Input, args: ['scImageAttrs',] }]
+class ImageDirective {
+    constructor(viewContainer, templateRef, renderer, elementRef) {
+        this.viewContainer = viewContainer;
+        this.templateRef = templateRef;
+        this.renderer = renderer;
+        this.elementRef = elementRef;
+        this.inlineRef = null;
+        this.editable = true;
+        this.urlParams = {};
+        this.attrs = {};
+    }
+    ngOnChanges(changes) {
+        if (changes.field || changes.editable || changes.urlParams || changes.attrs) {
+            this.viewContainer.clear();
+            if (this.inlineRef) {
+                this.inlineRef.remove();
+                this.inlineRef = null;
+            }
+            this.updateView();
+        }
+    }
+    updateView() {
+        const overrideAttrs = Object.assign(Object.assign({}, this.getElementAttrs()), this.attrs);
+        const media = this.field;
+        if (!media || (!media.editable && !media.value && !media.src)) {
+            return;
+        }
+        let attrs = {};
+        // we likely have an experience editor value, should be a string
+        if (this.editable && media.editable) {
+            const 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);
+            }
+            const tempImg = this.renderer.createElement('img');
+            Object.entries(attrs).forEach(([key, attrValue]) => tempImg.setAttribute(key, attrValue));
+            const editableMarkup = media.editable.replace(foundImg.imgTag, tempImg.outerHTML);
+            return this.renderInlineWrapper(editableMarkup);
+        }
+        // some wise-guy/gal is passing in a 'raw' image object value
+        const img = media.src ? media : media.value;
+        if (!img) {
+            return null;
+        }
+        attrs = this.getImageAttrs(img, overrideAttrs, this.urlParams);
+        if (attrs) {
+            this.renderTemplate(attrs);
+        }
+    }
+    getImageAttrs(fieldAttrs, parsedAttrs, imageParams) {
+        const combinedAttrs = Object.assign(Object.assign({}, fieldAttrs), parsedAttrs);
+        // eslint-disable-next-line prefer-const
+        let { src, srcSet } = combinedAttrs, otherAttrs = __rest(combinedAttrs, ["src", "srcSet"]);
+        if (!src) {
+            return null;
+        }
+        const newAttrs = Object.assign({}, otherAttrs);
+        // update image URL for jss handler and image rendering params
+        src = mediaApi.updateImageUrl(src, imageParams, this.mediaUrlPrefix);
+        if (srcSet) {
+            // replace with HTML-formatted srcset, including updated image URLs
+            newAttrs.srcSet = mediaApi.getSrcSet(src, srcSet, imageParams, this.mediaUrlPrefix);
+        }
+        else {
+            newAttrs.src = src;
+        }
+        return newAttrs;
+    }
+    renderTemplate(imageProps) {
+        const viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
+        viewRef.rootNodes.forEach((node) => {
+            Object.entries(imageProps).forEach(([key, imgPropVal]) => this.renderer.setAttribute(node, key, imgPropVal));
+        });
+    }
+    getElementAttrs() {
+        const view = this.templateRef.createEmbeddedView(null);
+        const element = view.rootNodes[0];
+        if (!element) {
+            return {};
+        }
+        const attrs = {};
+        for (let i = 0; i < element.attributes.length; i++) {
+            const attr = element.attributes.item(i);
+            if (attr) {
+                attrs[attr.name] = attr.value;
+            }
+        }
+        return attrs;
+    }
+    renderInlineWrapper(editable) {
+        const span = this.renderer.createElement('span');
+        span.className = 'sc-image-wrapper';
+        span.innerHTML = editable;
+        const parentNode = this.renderer.parentNode(this.elementRef.nativeElement);
+        this.renderer.insertBefore(parentNode, span, this.elementRef.nativeElement);
+        parentNode.removeChild(this.elementRef.nativeElement);
+        this.inlineRef = span;
+    }
+}
+ImageDirective.decorators = [
+    { type: Directive, args: [{ selector: '[scImage]' },] }
+];
+ImageDirective.ctorParameters = () => [
+    { type: ViewContainerRef },
+    { type: TemplateRef },
+    { type: Renderer2 },
+    { type: ElementRef }
+];
+ImageDirective.propDecorators = {
+    field: [{ type: Input, args: ['scImage',] }],
+    editable: [{ type: Input, args: ['scImageEditable',] }],
+    mediaUrlPrefix: [{ type: Input, args: ['scImageMediaUrlPrefix',] }],
+    urlParams: [{ type: Input, args: ['scImageUrlParams',] }],
+    attrs: [{ type: Input, args: ['scImageAttrs',] }]
 };
 
-class LinkDirective {
-    constructor(viewContainer, templateRef, renderer, elementRef) {
-        this.viewContainer = viewContainer;
-        this.templateRef = templateRef;
-        this.renderer = renderer;
-        this.elementRef = elementRef;
-        this.inlineRef = null;
-        this.editable = true;
-        this.attrs = {};
-    }
-    ngOnChanges(changes) {
-        if (changes.field || changes.editable || changes.attrs) {
-            this.viewContainer.clear();
-            if (this.inlineRef) {
-                this.inlineRef.remove();
-                this.inlineRef = null;
-            }
-            this.updateView();
-        }
-    }
-    updateView() {
-        var _a, _b;
-        const field = this.field;
-        if (this.editable && field && field.editableFirstPart && field.editableLastPart) {
-            this.renderInlineWrapper(field.editableFirstPart, field.editableLastPart);
-        }
-        else if (field && (field.href || field.value)) {
-            const props = field.href ? field : field.value;
-            const linkText = field.text || ((_a = field.value) === null || _a === void 0 ? void 0 : _a.text) || field.href || ((_b = field.value) === null || _b === void 0 ? void 0 : _b.href);
-            const mergedAttrs = Object.assign(Object.assign({}, props), this.attrs);
-            this.renderTemplate(mergedAttrs, linkText);
-        }
-    }
-    renderTemplate(props, linkText) {
-        const viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
-        viewRef.rootNodes.forEach((node) => {
-            Object.entries(props).forEach(([key, propValue]) => {
-                if (typeof propValue !== 'string')
-                    return;
-                if (key === 'href') {
-                    const isInvalidLink = !propValue || /^https?:\/\/$/.test(propValue);
-                    if (isInvalidLink) {
-                        if (!node.href) {
-                            return;
-                        }
-                        propValue = node.href;
-                    }
-                }
-                if (key === 'class' && node.className) {
-                    propValue += ` ${node.className}`;
-                }
-                this.renderer.setAttribute(node, key, propValue);
-            });
-            if (node.childNodes && node.childNodes.length === 0 && linkText) {
-                node.textContent = linkText;
-            }
-        });
-    }
-    renderInlineWrapper(editableFirstPart, editableLastPart) {
-        const span = this.renderer.createElement('span');
-        span.className = 'sc-link-wrapper';
-        span.innerHTML = editableFirstPart + editableLastPart;
-        // assign attributes from template to inline wrapper
-        const attrs = Object.assign(Object.assign({}, this.getElementAttrs()), this.attrs);
-        Object.entries(attrs).forEach(([key, attrValue]) => this.renderer.setAttribute(span, key, attrValue));
-        this.viewContainer.createEmbeddedView(this.templateRef);
-        const parentNode = this.renderer.parentNode(this.elementRef.nativeElement);
-        this.renderer.insertBefore(parentNode, span, this.elementRef.nativeElement);
-        this.inlineRef = span;
-    }
-    getElementAttrs() {
-        const view = this.templateRef.createEmbeddedView(null);
-        const element = view.rootNodes[0];
-        if (!element) {
-            return {};
-        }
-        const attrs = {};
-        for (let i = 0; i < element.attributes.length; i++) {
-            const attr = element.attributes.item(i);
-            if (attr) {
-                attrs[attr.name] = attr.value;
-            }
-        }
-        return attrs;
-    }
-}
-LinkDirective.decorators = [
-    { type: Directive, args: [{ selector: '[scLink]' },] }
-];
-LinkDirective.ctorParameters = () => [
-    { type: ViewContainerRef },
-    { type: TemplateRef },
-    { type: Renderer2 },
-    { type: ElementRef }
-];
-LinkDirective.propDecorators = {
-    editable: [{ type: Input, args: ['scLinkEditable',] }],
-    attrs: [{ type: Input, args: ['scLinkAttrs',] }],
-    field: [{ type: Input, args: ['scLink',] }]
+class LinkDirective {
+    constructor(viewContainer, templateRef, renderer, elementRef) {
+        this.viewContainer = viewContainer;
+        this.templateRef = templateRef;
+        this.renderer = renderer;
+        this.elementRef = elementRef;
+        this.inlineRef = null;
+        this.editable = true;
+        this.attrs = {};
+    }
+    ngOnChanges(changes) {
+        if (changes.field || changes.editable || changes.attrs) {
+            this.viewContainer.clear();
+            if (this.inlineRef) {
+                this.inlineRef.remove();
+                this.inlineRef = null;
+            }
+            this.updateView();
+        }
+    }
+    updateView() {
+        var _a, _b;
+        const field = this.field;
+        if (this.editable && field && field.editableFirstPart && field.editableLastPart) {
+            this.renderInlineWrapper(field.editableFirstPart, field.editableLastPart);
+        }
+        else if (field && (field.href || field.value)) {
+            const props = field.href ? field : field.value;
+            const linkText = field.text || ((_a = field.value) === null || _a === void 0 ? void 0 : _a.text) || field.href || ((_b = field.value) === null || _b === void 0 ? void 0 : _b.href);
+            const mergedAttrs = Object.assign(Object.assign({}, props), this.attrs);
+            this.renderTemplate(mergedAttrs, linkText);
+        }
+    }
+    renderTemplate(props, linkText) {
+        const viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
+        viewRef.rootNodes.forEach((node) => {
+            Object.entries(props).forEach(([key, propValue]) => {
+                if (typeof propValue !== 'string')
+                    return;
+                if (key === 'href') {
+                    const isInvalidLink = !propValue || /^https?:\/\/$/.test(propValue);
+                    if (isInvalidLink) {
+                        if (!node.href) {
+                            return;
+                        }
+                        propValue = node.href;
+                    }
+                }
+                if (key === 'class' && node.className) {
+                    propValue += ` ${node.className}`;
+                }
+                this.renderer.setAttribute(node, key, propValue);
+            });
+            if (node.childNodes && node.childNodes.length === 0 && linkText) {
+                node.textContent = linkText;
+            }
+        });
+    }
+    renderInlineWrapper(editableFirstPart, editableLastPart) {
+        const span = this.renderer.createElement('span');
+        span.className = 'sc-link-wrapper';
+        span.innerHTML = editableFirstPart + editableLastPart;
+        // assign attributes from template to inline wrapper
+        const attrs = Object.assign(Object.assign({}, this.getElementAttrs()), this.attrs);
+        Object.entries(attrs).forEach(([key, attrValue]) => this.renderer.setAttribute(span, key, attrValue));
+        this.viewContainer.createEmbeddedView(this.templateRef);
+        const parentNode = this.renderer.parentNode(this.elementRef.nativeElement);
+        this.renderer.insertBefore(parentNode, span, this.elementRef.nativeElement);
+        this.inlineRef = span;
+    }
+    getElementAttrs() {
+        const view = this.templateRef.createEmbeddedView(null);
+        const element = view.rootNodes[0];
+        if (!element) {
+            return {};
+        }
+        const attrs = {};
+        for (let i = 0; i < element.attributes.length; i++) {
+            const attr = element.attributes.item(i);
+            if (attr) {
+                attrs[attr.name] = attr.value;
+            }
+        }
+        return attrs;
+    }
+}
+LinkDirective.decorators = [
+    { type: Directive, args: [{ selector: '[scLink]' },] }
+];
+LinkDirective.ctorParameters = () => [
+    { type: ViewContainerRef },
+    { type: TemplateRef },
+    { type: Renderer2 },
+    { type: ElementRef }
+];
+LinkDirective.propDecorators = {
+    editable: [{ type: Input, args: ['scLinkEditable',] }],
+    attrs: [{ type: Input, args: ['scLinkAttrs',] }],
+    field: [{ type: Input, args: ['scLink',] }]
 };
 
-class RouterLinkDirective extends LinkDirective {
-    constructor(viewContainer, templateRef, renderer, elementRef, router) {
-        super(viewContainer, templateRef, renderer, elementRef);
-        this.router = router;
-        this.editable = true;
-        this.attrs = {};
-    }
-    renderTemplate(props, linkText) {
-        const viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
-        viewRef.rootNodes.forEach((node) => {
-            Object.entries(props).forEach(([key, propValue]) => {
-                this.renderer.setAttribute(node, key, propValue);
-                if (key === 'href') {
-                    this.renderer.listen(node, 'click', (event) => {
-                        this.router.navigateByUrl(propValue);
-                        event.preventDefault();
-                    });
-                }
-            });
-            if (node.childNodes && node.childNodes.length === 0 && linkText) {
-                node.textContent = linkText;
-            }
-        });
-    }
-}
-RouterLinkDirective.decorators = [
-    { type: Directive, args: [{ selector: '[scRouterLink]' },] }
-];
-RouterLinkDirective.ctorParameters = () => [
-    { type: ViewContainerRef },
-    { type: TemplateRef },
-    { type: Renderer2 },
-    { type: ElementRef },
-    { type: Router }
-];
-RouterLinkDirective.propDecorators = {
-    editable: [{ type: Input, args: ['scRouterLinkEditable',] }],
-    attrs: [{ type: Input, args: ['scRouterLinkAttrs',] }],
-    field: [{ type: Input, args: ['scRouterLink',] }]
+class RouterLinkDirective extends LinkDirective {
+    constructor(viewContainer, templateRef, renderer, elementRef, router) {
+        super(viewContainer, templateRef, renderer, elementRef);
+        this.router = router;
+        this.editable = true;
+        this.attrs = {};
+    }
+    renderTemplate(props, linkText) {
+        const viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
+        viewRef.rootNodes.forEach((node) => {
+            Object.entries(props).forEach(([key, propValue]) => {
+                this.renderer.setAttribute(node, key, propValue);
+                if (key === 'href') {
+                    this.renderer.listen(node, 'click', (event) => {
+                        this.router.navigateByUrl(propValue);
+                        event.preventDefault();
+                    });
+                }
+            });
+            if (node.childNodes && node.childNodes.length === 0 && linkText) {
+                node.textContent = linkText;
+            }
+        });
+    }
+}
+RouterLinkDirective.decorators = [
+    { type: Directive, args: [{ selector: '[scRouterLink]' },] }
+];
+RouterLinkDirective.ctorParameters = () => [
+    { type: ViewContainerRef },
+    { type: TemplateRef },
+    { type: Renderer2 },
+    { type: ElementRef },
+    { type: Router }
+];
+RouterLinkDirective.propDecorators = {
+    editable: [{ type: Input, args: ['scRouterLinkEditable',] }],
+    attrs: [{ type: Input, args: ['scRouterLinkAttrs',] }],
+    field: [{ type: Input, args: ['scRouterLink',] }]
 };
 
-class GenericLinkDirective extends LinkDirective {
-    constructor(viewContainer, templateRef, renderer, elementRef, router) {
-        super(viewContainer, templateRef, renderer, elementRef);
-        this.router = router;
-        this.editable = true;
-        this.attrs = {};
-    }
-    renderTemplate(props, linkText) {
-        const viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
-        viewRef.rootNodes.forEach((node) => {
-            Object.entries(props).forEach(([key, propValue]) => {
-                if (key === 'href' && !this.isAbsoluteUrl(propValue)) {
-                    const urlTree = this.router.createUrlTree([propValue], this.extras);
-                    this.renderer.setAttribute(node, key, this.router.serializeUrl(urlTree));
-                    this.renderer.listen(node, 'click', (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;
-            }
-        });
-    }
-    isAbsoluteUrl(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.decorators = [
-    { type: Directive, args: [{ selector: '[scGenericLink]' },] }
-];
-GenericLinkDirective.ctorParameters = () => [
-    { type: ViewContainerRef },
-    { type: TemplateRef },
-    { type: Renderer2 },
-    { type: ElementRef },
-    { type: Router }
-];
-GenericLinkDirective.propDecorators = {
-    editable: [{ type: Input, args: ['scGenericLinkEditable',] }],
-    attrs: [{ type: Input, args: ['scGenericLinkAttrs',] }],
-    field: [{ type: Input, args: ['scGenericLink',] }],
-    extras: [{ type: Input, args: ['scGenericLinkExtras',] }]
+class GenericLinkDirective extends LinkDirective {
+    constructor(viewContainer, templateRef, renderer, elementRef, router) {
+        super(viewContainer, templateRef, renderer, elementRef);
+        this.router = router;
+        this.editable = true;
+        this.attrs = {};
+    }
+    renderTemplate(props, linkText) {
+        const viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
+        viewRef.rootNodes.forEach((node) => {
+            Object.entries(props).forEach(([key, propValue]) => {
+                if (key === 'href' && !this.isAbsoluteUrl(propValue)) {
+                    const urlTree = this.router.createUrlTree([propValue], this.extras);
+                    this.renderer.setAttribute(node, key, this.router.serializeUrl(urlTree));
+                    this.renderer.listen(node, 'click', (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;
+            }
+        });
+    }
+    isAbsoluteUrl(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.decorators = [
+    { type: Directive, args: [{ selector: '[scGenericLink]' },] }
+];
+GenericLinkDirective.ctorParameters = () => [
+    { type: ViewContainerRef },
+    { type: TemplateRef },
+    { type: Renderer2 },
+    { type: ElementRef },
+    { type: Router }
+];
+GenericLinkDirective.propDecorators = {
+    editable: [{ type: Input, args: ['scGenericLinkEditable',] }],
+    attrs: [{ type: Input, args: ['scGenericLinkAttrs',] }],
+    field: [{ type: Input, args: ['scGenericLink',] }],
+    extras: [{ type: Input, args: ['scGenericLinkExtras',] }]
 };
 
-/** Registers a statically loaded component */
-class ComponentNameAndType {
-}
-/**
- * @param {unknown} object
- */
-function instanceOfComponentNameAndType(object) {
-    return typeof object === 'object' && object !== null && 'type' in object;
-}
-/**
- * @param {unknown} object
- */
-function instanceOfComponentNameAndModule(object) {
-    return typeof object === 'object' && object !== null && 'module' in object;
-}
-const PLACEHOLDER_COMPONENTS = new InjectionToken('Sc.placeholder.components');
-const PLACEHOLDER_LAZY_COMPONENTS = new InjectionToken('Sc.placeholder.lazyComponents');
-const PLACEHOLDER_MISSING_COMPONENT_COMPONENT = new InjectionToken('Sc.placeholder.missingComponentComponent');
-const PLACEHOLDER_HIDDEN_RENDERING_COMPONENT = new InjectionToken('Sc.placeholder.hiddenRenderingComponent');
+/** Registers a statically loaded component */
+class ComponentNameAndType {
+}
+/**
+ * @param {unknown} object
+ */
+function instanceOfComponentNameAndType(object) {
+    return typeof object === 'object' && object !== null && 'type' in object;
+}
+/**
+ * @param {unknown} object
+ */
+function instanceOfComponentNameAndModule(object) {
+    return typeof object === 'object' && object !== null && 'module' in object;
+}
+const PLACEHOLDER_COMPONENTS = new InjectionToken('Sc.placeholder.components');
+const PLACEHOLDER_LAZY_COMPONENTS = new InjectionToken('Sc.placeholder.lazyComponents');
+const PLACEHOLDER_MISSING_COMPONENT_COMPONENT = new InjectionToken('Sc.placeholder.missingComponentComponent');
+const PLACEHOLDER_HIDDEN_RENDERING_COMPONENT = new InjectionToken('Sc.placeholder.hiddenRenderingComponent');
 const DYNAMIC_COMPONENT = new InjectionToken('Sc.placeholder.dynamicComponent');
 
-class RawComponent {
-    constructor(renderer, elementRef) {
-        this.renderer = renderer;
-        this.elementRef = elementRef;
-    }
-    ngOnInit() {
-        const el = this.renderer.createElement(this.rendering.name);
-        const contents = this.renderer.createText(this.rendering.contents || '');
-        const attributes = this.rendering.attributes;
-        for (const attr in attributes) {
-            // eslint-disable-next-line no-prototype-builtins
-            if (attributes.hasOwnProperty(attr)) {
-                const value = attributes[attr];
-                this.renderer.setAttribute(el, attr, value || '');
-            }
-        }
-        this.renderer.appendChild(el, contents);
-        const parentNode = this.renderer.parentNode(this.elementRef.nativeElement);
-        this.renderer.insertBefore(parentNode, el, this.elementRef.nativeElement);
-        parentNode.removeChild(this.elementRef.nativeElement);
-    }
-}
-RawComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sc-raw',
-                template: ''
-            },] }
-];
-RawComponent.ctorParameters = () => [
-    { type: Renderer2 },
-    { type: ElementRef }
-];
-RawComponent.propDecorators = {
-    rendering: [{ type: Input }]
+class RawComponent {
+    constructor(renderer, elementRef) {
+        this.renderer = renderer;
+        this.elementRef = elementRef;
+    }
+    ngOnInit() {
+        const el = this.renderer.createElement(this.rendering.name);
+        const contents = this.renderer.createText(this.rendering.contents || '');
+        const attributes = this.rendering.attributes;
+        for (const attr in attributes) {
+            // eslint-disable-next-line no-prototype-builtins
+            if (attributes.hasOwnProperty(attr)) {
+                const value = attributes[attr];
+                this.renderer.setAttribute(el, attr, value || '');
+            }
+        }
+        this.renderer.appendChild(el, contents);
+        const parentNode = this.renderer.parentNode(this.elementRef.nativeElement);
+        this.renderer.insertBefore(parentNode, el, this.elementRef.nativeElement);
+        parentNode.removeChild(this.elementRef.nativeElement);
+    }
+}
+RawComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sc-raw',
+                template: ''
+            },] }
+];
+RawComponent.ctorParameters = () => [
+    { type: Renderer2 },
+    { type: ElementRef }
+];
+RawComponent.propDecorators = {
+    rendering: [{ type: Input }]
 };
 
-/**
- * @param {HtmlElementRendering | ComponentRendering} rendering
- */
-function isRawRendering(rendering) {
-    return (!rendering.componentName &&
-        rendering.name !== undefined);
+/**
+ * @param {HtmlElementRendering | ComponentRendering} rendering
+ */
+function isRawRendering(rendering) {
+    return (!rendering.componentName &&
+        rendering.name !== undefined);
 }
 
-class JssComponentFactoryService {
-    constructor(injector, compiler, components, lazyComponents) {
-        this.injector = injector;
-        this.compiler = compiler;
-        this.components = components;
-        this.lazyComponents = lazyComponents;
-        this.componentMap = new Map();
-        this.lazyComponentMap = new Map();
-        this.components.forEach((c) => this.componentMap.set(c.name, c.type));
-        if (this.lazyComponents) {
-            this.lazyComponents.forEach((c) => this.lazyComponentMap.set(c.path, c));
-        }
-    }
-    loadModuleFactory(lazyComponent) {
-        return lazyComponent.loadChildren().then((loaded) => {
-            if (loaded instanceof NgModuleFactory) {
-                return loaded;
-            }
-            else {
-                return this.compiler.compileModuleAsync(loaded);
-            }
-        });
-    }
-    getComponent(component) {
-        const loadedComponent = this.componentMap.get(component.componentName);
-        if (loadedComponent) {
-            return Promise.resolve({
-                componentDefinition: component,
-                componentImplementation: this.componentMap.get(component.componentName),
-            });
-        }
-        const lazyComponent = this.lazyComponentMap.get(component.componentName);
-        if (lazyComponent) {
-            return this.loadModuleFactory(lazyComponent).then((ngModuleFactory) => {
-                let componentType = null;
-                const moduleRef = ngModuleFactory.create(this.injector);
-                const dynamicComponentType = moduleRef.injector.get(DYNAMIC_COMPONENT);
-                if (!dynamicComponentType) {
-                    throw new Error(`JssComponentFactoryService: Lazy load module for component "${lazyComponent.path}" missing DYNAMIC_COMPONENT provider. Missing JssModule.forChild()?`);
-                }
-                if (component.componentName in dynamicComponentType) {
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    componentType = dynamicComponentType[component.componentName];
-                }
-                else {
-                    if (typeof dynamicComponentType === 'function') {
-                        componentType = dynamicComponentType;
-                    }
-                    else {
-                        throw new Error(`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,
-        });
-    }
-    getComponents(components) {
-        // acquire all components and keep them in order while handling their potential async-ness
-        return Promise.all(components.map((component) => isRawRendering(component) ? this.getRawComponent(component) : this.getComponent(component)));
-    }
-    getRawComponent(component) {
-        return Promise.resolve({
-            componentImplementation: RawComponent,
-            componentDefinition: component,
-        });
-    }
-}
-JssComponentFactoryService.decorators = [
-    { type: Injectable }
-];
-JssComponentFactoryService.ctorParameters = () => [
-    { type: Injector },
-    { type: Compiler },
-    { type: Array, decorators: [{ type: Inject, args: [PLACEHOLDER_COMPONENTS,] }] },
-    { type: Array, decorators: [{ type: Inject, args: [PLACEHOLDER_LAZY_COMPONENTS,] }] }
+class JssComponentFactoryService {
+    constructor(injector, compiler, components, lazyComponents) {
+        this.injector = injector;
+        this.compiler = compiler;
+        this.components = components;
+        this.lazyComponents = lazyComponents;
+        this.componentMap = new Map();
+        this.lazyComponentMap = new Map();
+        this.components.forEach((c) => this.componentMap.set(c.name, c.type));
+        if (this.lazyComponents) {
+            this.lazyComponents.forEach((c) => this.lazyComponentMap.set(c.path, c));
+        }
+    }
+    loadModuleFactory(lazyComponent) {
+        return lazyComponent.loadChildren().then((loaded) => {
+            if (loaded instanceof NgModuleFactory) {
+                return loaded;
+            }
+            else {
+                return this.compiler.compileModuleAsync(loaded);
+            }
+        });
+    }
+    getComponent(component) {
+        const loadedComponent = this.componentMap.get(component.componentName);
+        if (loadedComponent) {
+            return Promise.resolve({
+                componentDefinition: component,
+                componentImplementation: this.componentMap.get(component.componentName),
+            });
+        }
+        const lazyComponent = this.lazyComponentMap.get(component.componentName);
+        if (lazyComponent) {
+            return this.loadModuleFactory(lazyComponent).then((ngModuleFactory) => {
+                let componentType = null;
+                const moduleRef = ngModuleFactory.create(this.injector);
+                const dynamicComponentType = moduleRef.injector.get(DYNAMIC_COMPONENT);
+                if (!dynamicComponentType) {
+                    throw new Error(`JssComponentFactoryService: Lazy load module for component "${lazyComponent.path}" missing DYNAMIC_COMPONENT provider. Missing JssModule.forChild()?`);
+                }
+                if (component.componentName in dynamicComponentType) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    componentType = dynamicComponentType[component.componentName];
+                }
+                else {
+                    if (typeof dynamicComponentType === 'function') {
+                        componentType = dynamicComponentType;
+                    }
+                    else {
+                        throw new Error(`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,
+        });
+    }
+    getComponents(components) {
+        // acquire all components and keep them in order while handling their potential async-ness
+        return Promise.all(components.map((component) => isRawRendering(component) ? this.getRawComponent(component) : this.getComponent(component)));
+    }
+    getRawComponent(component) {
+        return Promise.resolve({
+            componentImplementation: RawComponent,
+            componentDefinition: component,
+        });
+    }
+}
+JssComponentFactoryService.decorators = [
+    { type: Injectable }
+];
+JssComponentFactoryService.ctorParameters = () => [
+    { type: Injector },
+    { type: Compiler },
+    { type: Array, decorators: [{ type: Inject, args: [PLACEHOLDER_COMPONENTS,] }] },
+    { type: Array, decorators: [{ type: Inject, args: [PLACEHOLDER_LAZY_COMPONENTS,] }] }
 ];
 
-class HiddenRenderingComponent {
-    get style() {
-        return 'display: block; height: 100px; background-image: linear-gradient(45deg, #ffffff 25%, #dcdcdc 25%, #dcdcdc 50%, #ffffff 50%, #ffffff 75%, #dcdcdc 75%, #dcdcdc 100%); background-size: 3px 3px;';
-    }
-}
-HiddenRenderingComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sc-hidden-rendering',
-                template: ''
-            },] }
-];
-HiddenRenderingComponent.propDecorators = {
-    style: [{ type: HostBinding, args: ['style',] }]
-};
+class HiddenRenderingComponent {
+    get style() {
+        return 'display: block; height: 100px; background-image: linear-gradient(45deg, #ffffff 25%, #dcdcdc 25%, #dcdcdc 50%, #ffffff 50%, #ffffff 75%, #dcdcdc 75%, #dcdcdc 100%); background-size: 3px 3px;';
+    }
+}
+HiddenRenderingComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sc-hidden-rendering',
+                template: ''
+            },] }
+];
+HiddenRenderingComponent.propDecorators = {
+    style: [{ type: HostBinding, args: ['style',] }]
+};
 const HIDDEN_RENDERING_NAME = 'Hidden Rendering';
 
-class PlaceholderLoadingDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-}
-PlaceholderLoadingDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[scPlaceholderLoading]',
-            },] }
-];
-PlaceholderLoadingDirective.ctorParameters = () => [
-    { type: TemplateRef }
+class PlaceholderLoadingDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+PlaceholderLoadingDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[scPlaceholderLoading]',
+            },] }
+];
+PlaceholderLoadingDirective.ctorParameters = () => [
+    { type: TemplateRef }
 ];
 
-class RenderEachDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-}
-RenderEachDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[renderEach]',
-            },] }
-];
-RenderEachDirective.ctorParameters = () => [
-    { type: TemplateRef }
+class RenderEachDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+RenderEachDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[renderEach]',
+            },] }
+];
+RenderEachDirective.ctorParameters = () => [
+    { type: TemplateRef }
 ];
 
-class RenderEmptyDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-}
-RenderEmptyDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[renderEmpty]',
-            },] }
-];
-RenderEmptyDirective.ctorParameters = () => [
-    { type: TemplateRef }
+class RenderEmptyDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+RenderEmptyDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[renderEmpty]',
+            },] }
+];
+RenderEmptyDirective.ctorParameters = () => [
+    { type: TemplateRef }
 ];
 
-/* eslint-disable @angular-eslint/no-conflicting-lifecycle */
-/**
- * @param {ComponentRendering} rendering
- * @param {string} name
- */
-function getPlaceholder(rendering, name) {
-    if (rendering && rendering.placeholders && Object.keys(rendering.placeholders).length > 0) {
-        return rendering.placeholders[name];
-    }
-    return null;
-}
-class PlaceholderComponent {
-    constructor(componentFactoryResolver, differs, componentFactory, changeDetectorRef, elementRef, renderer, missingComponentComponent, hiddenRenderingComponent) {
-        this.componentFactoryResolver = componentFactoryResolver;
-        this.differs = differs;
-        this.componentFactory = componentFactory;
-        this.changeDetectorRef = changeDetectorRef;
-        this.elementRef = elementRef;
-        this.renderer = renderer;
-        this.missingComponentComponent = missingComponentComponent;
-        this.hiddenRenderingComponent = hiddenRenderingComponent;
-        this._componentInstances = [];
-        this.destroyed = false;
-        this.parentStyleAttribute = '';
-        this.isLoading = true;
-        this.loaded = new EventEmitter();
-    }
-    set inputs(value) {
-        this._inputs = value;
-        if (!this._differ && value) {
-            this._differ = this.differs.find(value).create();
-        }
-    }
-    ngOnInit() {
-        // just to ensure the element exists
-        const elem = this.elementRef.nativeElement;
-        if (elem) {
-            const attributes = elem.attributes;
-            for (let i = 0; i < attributes.length; i++) {
-                const attr = attributes.item(i);
-                if (attr && attr.name.indexOf('_ngcontent') !== -1) {
-                    this.parentStyleAttribute = attr.name;
-                }
-            }
-        }
-    }
-    ngOnDestroy() {
-        this.destroyed = true;
-        this._componentInstances = [];
-    }
-    ngOnChanges(changes) {
-        if (changes.rendering || changes.renderings) {
-            this._render();
-        }
-    }
-    ngDoCheck() {
-        if (!this._differ || !this._inputs || this._componentInstances.length === 0) {
-            return;
-        }
-        const changes = this._differ.diff(this._inputs);
-        if (!changes) {
-            return;
-        }
-        const updates = {};
-        changes.forEachRemovedItem((change) => (updates[change.key] = null));
-        changes.forEachAddedItem((change) => (updates[change.key] = change.currentValue));
-        changes.forEachChangedItem((change) => (updates[change.key] = change.currentValue));
-        this._componentInstances.forEach((componentInstance) => this._setComponentInputs(componentInstance, updates));
-    }
-    _setComponentInputs(componentInstance, inputs) {
-        Object.entries(inputs).forEach(([input, inputValue]) => (componentInstance[input] = inputValue));
-    }
-    _subscribeComponentOutputs(componentInstance, outputs) {
-        Object.keys(outputs)
-            .filter((output) => componentInstance[output] && componentInstance[output] instanceof Observable)
-            .forEach((output) => componentInstance[output]
-            .pipe(takeWhile(() => !this.destroyed))
-            .subscribe(outputs[output]));
-    }
-    _render() {
-        this._componentInstances = [];
-        this.view.clear();
-        if (!this.rendering && !this.renderings) {
-            return;
-        }
-        if (!this.name && !this.renderings) {
-            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;
-        }
-        const 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
-        const placeholderIsEmpty = placeholder.every((rendering) => isRawRendering(rendering));
-        if (this.renderEmptyTemplate && placeholderIsEmpty) {
-            this.view.createEmbeddedView(this.renderEmptyTemplate.templateRef, {
-                renderings: placeholder,
-            });
-            this.isLoading = false;
-        }
-        else {
-            this.componentFactory
-                .getComponents(placeholder)
-                .then((components) => components.forEach((rendering, index) => {
-                if (this.renderEachTemplate && !isRawRendering(rendering.componentDefinition)) {
-                    this._renderTemplatedComponent(rendering.componentDefinition, index);
-                }
-                else {
-                    this._renderEmbeddedComponent(rendering, index);
-                }
-                this.isLoading = false;
-            }))
-                .then(() => {
-                this.changeDetectorRef.markForCheck();
-                this.loaded.emit(this.name);
-            });
-        }
-    }
-    _renderTemplatedComponent(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,
-            index,
-        });
-    }
-    _renderEmbeddedComponent(rendering, index) {
-        if (rendering.componentDefinition.componentName === HIDDEN_RENDERING_NAME) {
-            rendering.componentImplementation = this.hiddenRenderingComponent;
-        }
-        if (!rendering.componentImplementation) {
-            const componentName = rendering.componentDefinition.componentName;
+/* eslint-disable @angular-eslint/no-conflicting-lifecycle */
+/**
+ * @param {ComponentRendering} rendering
+ * @param {string} name
+ */
+function getPlaceholder(rendering, name) {
+    if (rendering && rendering.placeholders && Object.keys(rendering.placeholders).length > 0) {
+        return rendering.placeholders[name];
+    }
+    return null;
+}
+class PlaceholderComponent {
+    constructor(componentFactoryResolver, differs, componentFactory, changeDetectorRef, elementRef, renderer, missingComponentComponent, hiddenRenderingComponent) {
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.differs = differs;
+        this.componentFactory = componentFactory;
+        this.changeDetectorRef = changeDetectorRef;
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        this.missingComponentComponent = missingComponentComponent;
+        this.hiddenRenderingComponent = hiddenRenderingComponent;
+        this._componentInstances = [];
+        this.destroyed = false;
+        this.parentStyleAttribute = '';
+        this.isLoading = true;
+        this.loaded = new EventEmitter();
+    }
+    set inputs(value) {
+        this._inputs = value;
+        if (!this._differ && value) {
+            this._differ = this.differs.find(value).create();
+        }
+    }
+    ngOnInit() {
+        // just to ensure the element exists
+        const elem = this.elementRef.nativeElement;
+        if (elem) {
+            const attributes = elem.attributes;
+            for (let i = 0; i < attributes.length; i++) {
+                const attr = attributes.item(i);
+                if (attr && attr.name.indexOf('_ngcontent') !== -1) {
+                    this.parentStyleAttribute = attr.name;
+                }
+            }
+        }
+    }
+    ngOnDestroy() {
+        this.destroyed = true;
+        this._componentInstances = [];
+    }
+    ngOnChanges(changes) {
+        if (changes.rendering || changes.renderings) {
+            this._render();
+        }
+    }
+    ngDoCheck() {
+        if (!this._differ || !this._inputs || this._componentInstances.length === 0) {
+            return;
+        }
+        const changes = this._differ.diff(this._inputs);
+        if (!changes) {
+            return;
+        }
+        const updates = {};
+        changes.forEachRemovedItem((change) => (updates[change.key] = null));
+        changes.forEachAddedItem((change) => (updates[change.key] = change.currentValue));
+        changes.forEachChangedItem((change) => (updates[change.key] = change.currentValue));
+        this._componentInstances.forEach((componentInstance) => this._setComponentInputs(componentInstance, updates));
+    }
+    _setComponentInputs(componentInstance, inputs) {
+        Object.entries(inputs).forEach(([input, inputValue]) => (componentInstance[input] = inputValue));
+    }
+    _subscribeComponentOutputs(componentInstance, outputs) {
+        Object.keys(outputs)
+            .filter((output) => componentInstance[output] && componentInstance[output] instanceof Observable)
+            .forEach((output) => componentInstance[output]
+            .pipe(takeWhile(() => !this.destroyed))
+            .subscribe(outputs[output]));
+    }
+    _render() {
+        this._componentInstances = [];
+        this.view.clear();
+        if (!this.rendering && !this.renderings) {
+            return;
+        }
+        if (!this.name && !this.renderings) {
+            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;
+        }
+        const 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
+        const placeholderIsEmpty = placeholder.every((rendering) => isRawRendering(rendering));
+        if (this.renderEmptyTemplate && placeholderIsEmpty) {
+            this.view.createEmbeddedView(this.renderEmptyTemplate.templateRef, {
+                renderings: placeholder,
+            });
+            this.isLoading = false;
+        }
+        else {
+            this.componentFactory
+                .getComponents(placeholder)
+                .then((components) => components.forEach((rendering, index) => {
+                if (this.renderEachTemplate && !isRawRendering(rendering.componentDefinition)) {
+                    this._renderTemplatedComponent(rendering.componentDefinition, index);
+                }
+                else {
+                    this._renderEmbeddedComponent(rendering, index);
+                }
+                this.isLoading = false;
+            }))
+                .then(() => {
+                this.changeDetectorRef.markForCheck();
+                this.loaded.emit(this.name);
+            });
+        }
+    }
+    _renderTemplatedComponent(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,
+            index,
+        });
+    }
+    _renderEmbeddedComponent(rendering, index) {
+        if (rendering.componentDefinition.componentName === HIDDEN_RENDERING_NAME) {
+            rendering.componentImplementation = this.hiddenRenderingComponent;
+        }
+        if (!rendering.componentImplementation) {
+            const componentName = rendering.componentDefinition.componentName;
             console.error(`Placeholder ${this.name} contains unknown component ${componentName}.`, `Ensure component is mapped, like:
         JssModule.withComponents([
           { name: '${componentName}', type: ${componentName}Component }
-        ])`);
-            rendering.componentImplementation = this.missingComponentComponent;
-        }
-        const componentFactory = rendering.componentFactory ||
-            this.componentFactoryResolver.resolveComponentFactory(rendering.componentImplementation);
-        // apply the parent style attribute _ngcontent
-        // work-around for https://github.com/angular/angular/issues/12215
-        const createdComponentRef = this.view.createComponent(componentFactory, index);
-        if (this.parentStyleAttribute) {
-            this.renderer.setAttribute(createdComponentRef.location.nativeElement, this.parentStyleAttribute, '');
-        }
-        const 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.decorators = [
-    { type: Component, args: [{
-                selector: 'sc-placeholder,[sc-placeholder]',
+        ])`);
+            rendering.componentImplementation = this.missingComponentComponent;
+        }
+        const componentFactory = rendering.componentFactory ||
+            this.componentFactoryResolver.resolveComponentFactory(rendering.componentImplementation);
+        // apply the parent style attribute _ngcontent
+        // work-around for https://github.com/angular/angular/issues/12215
+        const createdComponentRef = this.view.createComponent(componentFactory, index);
+        if (this.parentStyleAttribute) {
+            this.renderer.setAttribute(createdComponentRef.location.nativeElement, this.parentStyleAttribute, '');
+        }
+        const 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.decorators = [
+    { type: Component, args: [{
+                selector: 'sc-placeholder,[sc-placeholder]',
                 template: `
     <ng-template
       *ngIf="isLoading"
       [ngTemplateOutlet]="placeholderLoading?.templateRef"
     ></ng-template>
     <ng-template #view></ng-template>
-  `
-            },] }
-];
-PlaceholderComponent.ctorParameters = () => [
-    { type: ComponentFactoryResolver },
-    { type: KeyValueDiffers },
-    { type: JssComponentFactoryService },
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: Renderer2 },
-    { type: Type, decorators: [{ type: Inject, args: [PLACEHOLDER_MISSING_COMPONENT_COMPONENT,] }] },
-    { type: Type, decorators: [{ type: Inject, args: [PLACEHOLDER_HIDDEN_RENDERING_COMPONENT,] }] }
-];
-PlaceholderComponent.propDecorators = {
-    name: [{ type: Input }],
-    rendering: [{ type: Input }],
-    renderings: [{ type: Input }],
-    outputs: [{ type: Input }],
-    loaded: [{ type: Output }],
-    view: [{ type: ViewChild, args: ['view', { read: ViewContainerRef, static: true },] }],
-    renderEachTemplate: [{ type: ContentChild, args: [RenderEachDirective, { static: true },] }],
-    renderEmptyTemplate: [{ type: ContentChild, args: [RenderEmptyDirective, { static: true },] }],
-    placeholderLoading: [{ type: ContentChild, args: [PlaceholderLoadingDirective, { static: true },] }],
-    inputs: [{ type: Input }]
+  `
+            },] }
+];
+PlaceholderComponent.ctorParameters = () => [
+    { type: ComponentFactoryResolver },
+    { type: KeyValueDiffers },
+    { type: JssComponentFactoryService },
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: Renderer2 },
+    { type: Type, decorators: [{ type: Inject, args: [PLACEHOLDER_MISSING_COMPONENT_COMPONENT,] }] },
+    { type: Type, decorators: [{ type: Inject, args: [PLACEHOLDER_HIDDEN_RENDERING_COMPONENT,] }] }
+];
+PlaceholderComponent.propDecorators = {
+    name: [{ type: Input }],
+    rendering: [{ type: Input }],
+    renderings: [{ type: Input }],
+    outputs: [{ type: Input }],
+    loaded: [{ type: Output }],
+    view: [{ type: ViewChild, args: ['view', { read: ViewContainerRef, static: true },] }],
+    renderEachTemplate: [{ type: ContentChild, args: [RenderEachDirective, { static: true },] }],
+    renderEmptyTemplate: [{ type: ContentChild, args: [RenderEmptyDirective, { static: true },] }],
+    placeholderLoading: [{ type: ContentChild, args: [PlaceholderLoadingDirective, { static: true },] }],
+    inputs: [{ type: Input }]
 };
 
-class RichTextDirective {
-    constructor(viewContainer, templateRef) {
-        this.viewContainer = viewContainer;
-        this.templateRef = templateRef;
-        this.editable = true;
-    }
-    ngOnChanges(changes) {
-        if (changes.field || changes.editable) {
-            if (!this.viewRef) {
-                this.viewContainer.clear();
-                this.viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
-            }
-            this.updateView();
-        }
-    }
-    updateView() {
-        const field = this.field;
-        if (!field || (!field.editable && !field.value)) {
-            return;
-        }
-        const html = field.editable && this.editable ? field.editable : field.value;
-        this.viewRef.rootNodes.forEach((node) => {
-            node.innerHTML = html;
-        });
-    }
-}
-RichTextDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[scRichText]',
-            },] }
-];
-RichTextDirective.ctorParameters = () => [
-    { type: ViewContainerRef },
-    { type: TemplateRef }
-];
-RichTextDirective.propDecorators = {
-    editable: [{ type: Input, args: ['scRichTextEditable',] }],
-    field: [{ type: Input, args: ['scRichText',] }]
+class RichTextDirective {
+    constructor(viewContainer, templateRef) {
+        this.viewContainer = viewContainer;
+        this.templateRef = templateRef;
+        this.editable = true;
+    }
+    ngOnChanges(changes) {
+        if (changes.field || changes.editable) {
+            if (!this.viewRef) {
+                this.viewContainer.clear();
+                this.viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
+            }
+            this.updateView();
+        }
+    }
+    updateView() {
+        const field = this.field;
+        if (!field || (!field.editable && !field.value)) {
+            return;
+        }
+        const html = field.editable && this.editable ? field.editable : field.value;
+        this.viewRef.rootNodes.forEach((node) => {
+            node.innerHTML = html;
+        });
+    }
+}
+RichTextDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[scRichText]',
+            },] }
+];
+RichTextDirective.ctorParameters = () => [
+    { type: ViewContainerRef },
+    { type: TemplateRef }
+];
+RichTextDirective.propDecorators = {
+    editable: [{ type: Input, args: ['scRichTextEditable',] }],
+    field: [{ type: Input, args: ['scRichText',] }]
 };
 
-class TextDirective {
-    constructor(viewContainer, templateRef) {
-        this.viewContainer = viewContainer;
-        this.templateRef = templateRef;
-        this.editable = true;
-        this.encode = true;
-    }
-    ngOnChanges(changes) {
-        if (changes.field || changes.editable || changes.encode) {
-            if (!this.viewRef) {
-                this.viewContainer.clear();
-                this.viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
-            }
-            this.updateView();
-        }
-    }
-    updateView() {
-        const field = this.field;
-        let editable = this.editable;
-        if (!field || (!field.editable && (field.value === undefined || field.value === ''))) {
-            return;
-        }
-        // can't use editable value if we want to output unencoded
-        if (!this.encode) {
-            editable = false;
-        }
-        const html = field.editable && editable ? field.editable : field.value;
-        const setDangerously = (field.editable && editable) || !this.encode;
-        this.viewRef.rootNodes.forEach((node) => {
-            if (setDangerously) {
-                node.innerHTML = html;
-            }
-            else {
-                node.textContent = html;
-            }
-        });
-    }
-}
-TextDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[scText]',
-            },] }
-];
-TextDirective.ctorParameters = () => [
-    { type: ViewContainerRef },
-    { type: TemplateRef }
-];
-TextDirective.propDecorators = {
-    editable: [{ type: Input, args: ['scTextEditable',] }],
-    encode: [{ type: Input, args: ['scTextEncode',] }],
-    field: [{ type: Input, args: ['scText',] }]
+class TextDirective {
+    constructor(viewContainer, templateRef) {
+        this.viewContainer = viewContainer;
+        this.templateRef = templateRef;
+        this.editable = true;
+        this.encode = true;
+    }
+    ngOnChanges(changes) {
+        if (changes.field || changes.editable || changes.encode) {
+            if (!this.viewRef) {
+                this.viewContainer.clear();
+                this.viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
+            }
+            this.updateView();
+        }
+    }
+    updateView() {
+        const field = this.field;
+        let editable = this.editable;
+        if (!field || (!field.editable && (field.value === undefined || field.value === ''))) {
+            return;
+        }
+        // can't use editable value if we want to output unencoded
+        if (!this.encode) {
+            editable = false;
+        }
+        const html = field.editable && editable ? field.editable : field.value;
+        const setDangerously = (field.editable && editable) || !this.encode;
+        this.viewRef.rootNodes.forEach((node) => {
+            if (setDangerously) {
+                node.innerHTML = html;
+            }
+            else {
+                node.textContent = html;
+            }
+        });
+    }
+}
+TextDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[scText]',
+            },] }
+];
+TextDirective.ctorParameters = () => [
+    { type: ViewContainerRef },
+    { type: TemplateRef }
+];
+TextDirective.propDecorators = {
+    editable: [{ type: Input, args: ['scTextEditable',] }],
+    encode: [{ type: Input, args: ['scTextEncode',] }],
+    field: [{ type: Input, args: ['scText',] }]
 };
 
-class DateDirective {
-    constructor(viewContainer, templateRef, datePipe) {
-        this.viewContainer = viewContainer;
-        this.templateRef = templateRef;
-        this.datePipe = datePipe;
-        this.editable = true;
-    }
-    ngOnChanges(changes) {
-        if (changes.field || changes.format) {
-            if (!this.viewRef) {
-                this.viewContainer.clear();
-                this.viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
-            }
-            this.updateView();
-        }
-    }
-    updateView() {
-        const field = this.field;
-        if (!field || (!field.editable && !field.value)) {
-            return;
-        }
-        const html = field.editable && this.editable ? field.editable : field.value;
-        const setDangerously = field.editable && this.editable;
-        this.viewRef.rootNodes.forEach((node) => {
-            if (setDangerously) {
-                node.innerHTML = html;
-            }
-            else {
-                node.textContent = this.datePipe.transform(html, this.format, this.timezone, this.locale);
-            }
-        });
-    }
-}
-DateDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[scDate]',
-            },] }
-];
-DateDirective.ctorParameters = () => [
-    { type: ViewContainerRef },
-    { type: TemplateRef },
-    { type: DatePipe }
-];
-DateDirective.propDecorators = {
-    format: [{ type: Input, args: ['scDateFormat',] }],
-    timezone: [{ type: Input, args: ['scDateTimezone',] }],
-    locale: [{ type: Input, args: ['scDateLocale',] }],
-    editable: [{ type: Input, args: ['scDateEditable',] }],
-    field: [{ type: Input, args: ['scDate',] }]
+class DateDirective {
+    constructor(viewContainer, templateRef, datePipe) {
+        this.viewContainer = viewContainer;
+        this.templateRef = templateRef;
+        this.datePipe = datePipe;
+        this.editable = true;
+    }
+    ngOnChanges(changes) {
+        if (changes.field || changes.format) {
+            if (!this.viewRef) {
+                this.viewContainer.clear();
+                this.viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
+            }
+            this.updateView();
+        }
+    }
+    updateView() {
+        const field = this.field;
+        if (!field || (!field.editable && !field.value)) {
+            return;
+        }
+        const html = field.editable && this.editable ? field.editable : field.value;
+        const setDangerously = field.editable && this.editable;
+        this.viewRef.rootNodes.forEach((node) => {
+            if (setDangerously) {
+                node.innerHTML = html;
+            }
+            else {
+                node.textContent = this.datePipe.transform(html, this.format, this.timezone, this.locale);
+            }
+        });
+    }
+}
+DateDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[scDate]',
+            },] }
+];
+DateDirective.ctorParameters = () => [
+    { type: ViewContainerRef },
+    { type: TemplateRef },
+    { type: DatePipe }
+];
+DateDirective.propDecorators = {
+    format: [{ type: Input, args: ['scDateFormat',] }],
+    timezone: [{ type: Input, args: ['scDateTimezone',] }],
+    locale: [{ type: Input, args: ['scDateLocale',] }],
+    editable: [{ type: Input, args: ['scDateEditable',] }],
+    field: [{ type: Input, args: ['scDate',] }]
 };
 
-class MissingComponentComponent {
-}
-MissingComponentComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sc-missing-component',
+class MissingComponentComponent {
+}
+MissingComponentComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sc-missing-component',
                 template: `
     <div
       style="background: darkorange; outline: 5px solid orange; padding: 10px; color: white; max-width: 500px;"
@@ -933,234 +932,197 @@ MissingComponentComponent.decorators = [
       <h2>{{ rendering.componentName }}</h2>
       <p>JSS component is missing Angular component implementation.</p>
     </div>
-  `
-            },] }
-];
-MissingComponentComponent.propDecorators = {
-    rendering: [{ type: Input }]
+  `
+            },] }
+];
+MissingComponentComponent.propDecorators = {
+    rendering: [{ type: Input }]
 };
 
-/**
- * Renders a single JSS component given a rendering definition.
- * Useful inside templated placeholders.
- */
-class RenderComponentComponent {
-    constructor(componentFactoryResolver, differs, componentFactory, missingComponentComponent) {
-        this.componentFactoryResolver = componentFactoryResolver;
-        this.differs = differs;
-        this.componentFactory = componentFactory;
-        this.missingComponentComponent = missingComponentComponent;
-        this.destroyed = false;
-    }
-    set inputs(value) {
-        this._inputs = value;
-        if (!this._differ && value) {
-            this._differ = this.differs.find(value).create();
-        }
-    }
-    ngOnChanges(changes) {
-        if (changes.rendering) {
-            this._render();
-        }
-    }
-    _setComponentInputs(componentInstance, inputs) {
-        Object.entries(inputs).forEach(([input, inputValue]) => (componentInstance[input] = inputValue));
-    }
-    _subscribeComponentOutputs(componentInstance, outputs) {
-        Object.keys(outputs)
-            .filter((output) => componentInstance[output] && componentInstance[output] instanceof Observable)
-            .forEach((output) => componentInstance[output]
-            .pipe(takeWhile(() => !this.destroyed))
-            .subscribe(outputs[output]));
-    }
-    _render() {
-        this.view.clear();
-        if (!this.rendering) {
-            return;
-        }
-        const resolveComponent = isRawRendering(this.rendering)
-            ? Promise.resolve({
-                componentImplementation: RawComponent,
-                componentDefinition: this.rendering,
-            })
-            : this.componentFactory.getComponent(this.rendering);
-        resolveComponent.then((rendering) => {
-            if (!rendering.componentImplementation) {
-                const componentName = rendering.componentDefinition.componentName;
+/**
+ * Renders a single JSS component given a rendering definition.
+ * Useful inside templated placeholders.
+ */
+class RenderComponentComponent {
+    constructor(componentFactoryResolver, differs, componentFactory, missingComponentComponent) {
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.differs = differs;
+        this.componentFactory = componentFactory;
+        this.missingComponentComponent = missingComponentComponent;
+        this.destroyed = false;
+    }
+    set inputs(value) {
+        this._inputs = value;
+        if (!this._differ && value) {
+            this._differ = this.differs.find(value).create();
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes.rendering) {
+            this._render();
+        }
+    }
+    _setComponentInputs(componentInstance, inputs) {
+        Object.entries(inputs).forEach(([input, inputValue]) => (componentInstance[input] = inputValue));
+    }
+    _subscribeComponentOutputs(componentInstance, outputs) {
+        Object.keys(outputs)
+            .filter((output) => componentInstance[output] && componentInstance[output] instanceof Observable)
+            .forEach((output) => componentInstance[output]
+            .pipe(takeWhile(() => !this.destroyed))
+            .subscribe(outputs[output]));
+    }
+    _render() {
+        this.view.clear();
+        if (!this.rendering) {
+            return;
+        }
+        const resolveComponent = isRawRendering(this.rendering)
+            ? Promise.resolve({
+                componentImplementation: RawComponent,
+                componentDefinition: this.rendering,
+            })
+            : this.componentFactory.getComponent(this.rendering);
+        resolveComponent.then((rendering) => {
+            if (!rendering.componentImplementation) {
+                const componentName = rendering.componentDefinition.componentName;
                 console.error(`Attempted to render unknown component ${componentName}.`, `Ensure component is mapped, like:
           JssModule.withComponents([
             { name: '${componentName}', type: ${componentName}Component }
-          ])`);
-                rendering.componentImplementation = this.missingComponentComponent;
-            }
-            const componentFactory = rendering.componentFactory ||
-                this.componentFactoryResolver.resolveComponentFactory(rendering.componentImplementation);
-            const 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.decorators = [
-    { type: Component, args: [{
-                selector: 'sc-render-component',
+          ])`);
+                rendering.componentImplementation = this.missingComponentComponent;
+            }
+            const componentFactory = rendering.componentFactory ||
+                this.componentFactoryResolver.resolveComponentFactory(rendering.componentImplementation);
+            const 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.decorators = [
+    { type: Component, args: [{
+                selector: 'sc-render-component',
                 template: `
     <ng-template #view></ng-template>
-  `
-            },] }
-];
-RenderComponentComponent.ctorParameters = () => [
-    { type: ComponentFactoryResolver },
-    { type: KeyValueDiffers },
-    { type: JssComponentFactoryService },
-    { type: Type, decorators: [{ type: Inject, args: [PLACEHOLDER_MISSING_COMPONENT_COMPONENT,] }] }
-];
-RenderComponentComponent.propDecorators = {
-    rendering: [{ type: Input }],
-    outputs: [{ type: Input }],
-    view: [{ type: ViewChild, args: ['view', { read: ViewContainerRef, static: true },] }],
-    inputs: [{ type: Input }]
+  `
+            },] }
+];
+RenderComponentComponent.ctorParameters = () => [
+    { type: ComponentFactoryResolver },
+    { type: KeyValueDiffers },
+    { type: JssComponentFactoryService },
+    { type: Type, decorators: [{ type: Inject, args: [PLACEHOLDER_MISSING_COMPONENT_COMPONENT,] }] }
+];
+RenderComponentComponent.propDecorators = {
+    rendering: [{ type: Input }],
+    outputs: [{ type: Input }],
+    view: [{ type: ViewChild, args: ['view', { read: ViewContainerRef, static: true },] }],
+    inputs: [{ type: Input }]
 };
 
-class JssModule {
-    /**
-     * Instantiates the JSS module with no component factory.
-     * Useful for using it from libraries. Most of the time you'd want withComponents()
-     * @returns {ModuleWithProviders<JssModule>} module
-     */
-    static forRoot() {
-        return {
-            ngModule: JssModule,
-            providers: [DatePipe, JssComponentFactoryService],
-        };
-    }
-    /**
-     * Instantiates a module for a lazy-loaded JSS component
-     * @param {Type<unknown>} component
-     * @returns {ModuleWithProviders<JssModule>} module
-     */
-    static forChild(component) {
-        return {
-            ngModule: JssModule,
-            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.
-     * @param {ComponentNameAndType[]} components
-     * @param {ComponentNameAndModule[]} [lazyComponents]
-     * @returns {ModuleWithProviders<JssModule>} module
-     */
-    static withComponents(components, lazyComponents) {
-        return {
-            ngModule: JssModule,
-            providers: [
-                {
-                    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 },
-                { provide: PLACEHOLDER_HIDDEN_RENDERING_COMPONENT, useValue: HiddenRenderingComponent },
-                ...JssModule.forRoot().providers,
-            ],
-        };
-    }
-}
-JssModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule],
-                declarations: [
-                    FileDirective,
-                    ImageDirective,
-                    LinkDirective,
-                    RouterLinkDirective,
-                    GenericLinkDirective,
-                    DateDirective,
-                    RenderEachDirective,
-                    RenderEmptyDirective,
-                    PlaceholderLoadingDirective,
-                    RenderComponentComponent,
-                    PlaceholderComponent,
-                    RawComponent,
-                    RichTextDirective,
-                    TextDirective,
-                    MissingComponentComponent,
-                    HiddenRenderingComponent,
-                ],
-                exports: [
-                    FileDirective,
-                    ImageDirective,
-                    DateDirective,
-                    LinkDirective,
-                    RouterLinkDirective,
-                    GenericLinkDirective,
-                    RenderEachDirective,
-                    RenderEmptyDirective,
-                    RenderComponentComponent,
-                    PlaceholderComponent,
-                    HiddenRenderingComponent,
-                    PlaceholderLoadingDirective,
-                    RichTextDirective,
-                    TextDirective,
-                ],
-                entryComponents: [RawComponent, MissingComponentComponent],
-            },] }
+class JssModule {
+    /**
+     * Instantiates the JSS module with no component factory.
+     * Useful for using it from libraries. Most of the time you'd want withComponents()
+     * @returns {ModuleWithProviders<JssModule>} module
+     */
+    static forRoot() {
+        return {
+            ngModule: JssModule,
+            providers: [DatePipe, JssComponentFactoryService],
+        };
+    }
+    /**
+     * Instantiates a module for a lazy-loaded JSS component
+     * @param {Type<unknown>} component
+     * @returns {ModuleWithProviders<JssModule>} module
+     */
+    static forChild(component) {
+        return {
+            ngModule: JssModule,
+            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.
+     * @param {ComponentNameAndType[]} components
+     * @param {ComponentNameAndModule[]} [lazyComponents]
+     * @returns {ModuleWithProviders<JssModule>} module
+     */
+    static withComponents(components, lazyComponents) {
+        return {
+            ngModule: JssModule,
+            providers: [
+                {
+                    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 },
+                { provide: PLACEHOLDER_HIDDEN_RENDERING_COMPONENT, useValue: HiddenRenderingComponent },
+                ...JssModule.forRoot().providers,
+            ],
+        };
+    }
+}
+JssModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [CommonModule],
+                declarations: [
+                    FileDirective,
+                    ImageDirective,
+                    LinkDirective,
+                    RouterLinkDirective,
+                    GenericLinkDirective,
+                    DateDirective,
+                    RenderEachDirective,
+                    RenderEmptyDirective,
+                    PlaceholderLoadingDirective,
+                    RenderComponentComponent,
+                    PlaceholderComponent,
+                    RawComponent,
+                    RichTextDirective,
+                    TextDirective,
+                    MissingComponentComponent,
+                    HiddenRenderingComponent,
+                ],
+                exports: [
+                    FileDirective,
+                    ImageDirective,
+                    DateDirective,
+                    LinkDirective,
+                    RouterLinkDirective,
+                    GenericLinkDirective,
+                    RenderEachDirective,
+                    RenderEmptyDirective,
+                    RenderComponentComponent,
+                    PlaceholderComponent,
+                    HiddenRenderingComponent,
+                    PlaceholderLoadingDirective,
+                    RichTextDirective,
+                    TextDirective,
+                ],
+                entryComponents: [RawComponent, MissingComponentComponent],
+            },] }
 ];
 
-/**
- * @description in Experience Editor with an Angular sample app, anchor tags
- * with both onclick and href attributes will use the href, blocking the onclick from firing.
- * This function makes it so the anchor tags function as intended in an Angular sample when using Experience Editor
- *
- * The Mutation Observer API is used to observe changes to the body, then select all elements with href="#" and an onclick,
- * and replaces the # value with javascript:void(0); which prevents the anchor tag from blocking the onclick event handler.
- * @see Mutation Observer API: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/MutationObserver
- */
-const handleEditorAnchors = () => {
-    // Angular gives the href attribute priority over the onclick attribute if both are present, so we must replace
-    // the href attribute to avoid overriding the onclick in Experience Editor
-    if (!window || !ExperienceEditor.isActive()) {
-        return;
-    }
-    const targetNode = document.querySelector('body');
-    const callback = (mutationList) => {
-        mutationList.forEach((mutation) => {
-            const btns = document.querySelectorAll('.scChromeDropDown > a[href="#"], a[onclick]');
-            if (mutation.type === 'childList') {
-                btns.forEach((link) => {
-                    link.href = 'javascript:void(0);';
-                });
-            }
-            return;
-        });
-    };
-    const observer = new MutationObserver(callback);
-    const observerOptions = {
-        childList: true,
-        subtree: true,
-    };
-    if (targetNode) {
-        observer.observe(targetNode, observerOptions);
-    }
-};
-
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
-export { ComponentNameAndType, DYNAMIC_COMPONENT, FileDirective, GenericLinkDirective, ImageDirective, JssModule, LinkDirective, PlaceholderComponent, PlaceholderLoadingDirective, RichTextDirective, RouterLinkDirective, TextDirective, handleEditorAnchors, isRawRendering, PLACEHOLDER_COMPONENTS as ɵb, PLACEHOLDER_LAZY_COMPONENTS as ɵc, PLACEHOLDER_MISSING_COMPONENT_COMPONENT as ɵd, PLACEHOLDER_HIDDEN_RENDERING_COMPONENT as ɵe, RenderEachDirective as ɵf, RenderEmptyDirective as ɵg, JssComponentFactoryService as ɵh, DateDirective as ɵi, RenderComponentComponent as ɵj, RawComponent as ɵk, MissingComponentComponent as ɵl, HiddenRenderingComponent as ɵm };
+export { ComponentNameAndType, DYNAMIC_COMPONENT, FileDirective, GenericLinkDirective, ImageDirective, JssModule, LinkDirective, PlaceholderComponent, PlaceholderLoadingDirective, RichTextDirective, RouterLinkDirective, TextDirective, isRawRendering, PLACEHOLDER_COMPONENTS as ɵb, PLACEHOLDER_LAZY_COMPONENTS as ɵc, PLACEHOLDER_MISSING_COMPONENT_COMPONENT as ɵd, PLACEHOLDER_HIDDEN_RENDERING_COMPONENT as ɵe, RenderEachDirective as ɵf, RenderEmptyDirective as ɵg, JssComponentFactoryService as ɵh, DateDirective as ɵi, RenderComponentComponent as ɵj, RawComponent as ɵk, MissingComponentComponent as ɵl, HiddenRenderingComponent as ɵm };
 //# sourceMappingURL=sitecore-jss-sitecore-jss-angular.js.map