@sitecore-jss/sitecore-jss-angular 21.6.3 → 21.6.4-canary.2

package/dist/fesm2022/sitecore-jss-sitecore-jss-angular.mjs

@@ -13,1133 +13,1133 @@ import { takeWhile, take, mergeMap } from 'rxjs/operators';
 export { GraphQLDictionaryService, RestDictionaryService } from '@sitecore-jss/sitecore-jss/i18n';
 export { GraphQLLayoutService, RestLayoutService, getChildPlaceholder, getFieldValue } from '@sitecore-jss/sitecore-jss/layout';
 export { DefaultRetryStrategy } from '@sitecore-jss/sitecore-jss/graphql';
-export { constants, enableDebug } from '@sitecore-jss/sitecore-jss';
+export { ClientError, constants, enableDebug } from '@sitecore-jss/sitecore-jss';
 export { trackingApi } from '@sitecore-jss/sitecore-jss/tracking';
 
-/**
- * File fields cannot be managed via the EE. We never output "editable."
- */
-class FileDirective {
-    viewContainer;
-    templateRef;
-    field;
-    viewRef;
-    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;
-            }
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FileDirective, selector: "[scFile]", inputs: { field: ["scFile", "field"] }, usesOnChanges: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[scFile]' }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }]; }, propDecorators: { field: [{
-                type: Input,
-                args: ['scFile']
+/**
+ * File fields cannot be managed via the EE. We never output "editable."
+ */
+class FileDirective {
+    viewContainer;
+    templateRef;
+    field;
+    viewRef;
+    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;
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FileDirective, selector: "[scFile]", inputs: { field: ["scFile", "field"] }, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[scFile]' }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }]; }, propDecorators: { field: [{
+                type: Input,
+                args: ['scFile']
             }] } });
 
-class ImageDirective {
-    viewContainer;
-    templateRef;
-    renderer;
-    elementRef;
-    field;
-    editable = true;
-    /**
-     * Custom regexp that finds media URL prefix that will be replaced by `/-/jssmedia` or `/~/jssmedia`.
-     * @example
-     * /\/([-~]{1})assets\//i
-     * /-assets/website -> /-/jssmedia/website
-     * /~assets/website -> /~/jssmedia/website
-     */
-    mediaUrlPrefix;
-    urlParams = {};
-    attrs = {};
-    inlineRef = null;
-    constructor(viewContainer, templateRef, renderer, elementRef) {
-        this.viewContainer = viewContainer;
-        this.templateRef = templateRef;
-        this.renderer = renderer;
-        this.elementRef = elementRef;
-    }
-    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 = {
-            ...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 = {
-            ...fieldAttrs,
-            ...parsedAttrs,
-        };
-        // eslint-disable-next-line prefer-const
-        let { src, srcSet, ...otherAttrs } = combinedAttrs;
-        if (!src) {
-            return null;
-        }
-        const newAttrs = {
-            ...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) {
-            view.destroy();
-            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;
-            }
-        }
-        view.destroy();
-        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;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ImageDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ImageDirective, selector: "[scImage]", inputs: { field: ["scImage", "field"], editable: ["scImageEditable", "editable"], mediaUrlPrefix: ["scImageMediaUrlPrefix", "mediaUrlPrefix"], urlParams: ["scImageUrlParams", "urlParams"], attrs: ["scImageAttrs", "attrs"] }, usesOnChanges: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ImageDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[scImage]' }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, 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 {
+    viewContainer;
+    templateRef;
+    renderer;
+    elementRef;
+    field;
+    editable = true;
+    /**
+     * Custom regexp that finds media URL prefix that will be replaced by `/-/jssmedia` or `/~/jssmedia`.
+     * @example
+     * /\/([-~]{1})assets\//i
+     * /-assets/website -> /-/jssmedia/website
+     * /~assets/website -> /~/jssmedia/website
+     */
+    mediaUrlPrefix;
+    urlParams = {};
+    attrs = {};
+    inlineRef = null;
+    constructor(viewContainer, templateRef, renderer, elementRef) {
+        this.viewContainer = viewContainer;
+        this.templateRef = templateRef;
+        this.renderer = renderer;
+        this.elementRef = elementRef;
+    }
+    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 = {
+            ...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 = {
+            ...fieldAttrs,
+            ...parsedAttrs,
+        };
+        // eslint-disable-next-line prefer-const
+        let { src, srcSet, ...otherAttrs } = combinedAttrs;
+        if (!src) {
+            return null;
+        }
+        const newAttrs = {
+            ...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) {
+            view.destroy();
+            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;
+            }
+        }
+        view.destroy();
+        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;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ImageDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ImageDirective, selector: "[scImage]", inputs: { field: ["scImage", "field"], editable: ["scImageEditable", "editable"], mediaUrlPrefix: ["scImageMediaUrlPrefix", "mediaUrlPrefix"], urlParams: ["scImageUrlParams", "urlParams"], attrs: ["scImageAttrs", "attrs"] }, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ImageDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[scImage]' }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, 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 {
-    viewContainer;
-    templateRef;
-    renderer;
-    elementRef;
-    editable = true;
-    attrs = {};
-    field;
-    inlineRef = null;
-    constructor(viewContainer, templateRef, renderer, elementRef) {
-        this.viewContainer = viewContainer;
-        this.templateRef = templateRef;
-        this.renderer = renderer;
-        this.elementRef = elementRef;
-    }
-    ngOnChanges(changes) {
-        if (changes.field || changes.editable || changes.attrs) {
-            this.viewContainer.clear();
-            if (this.inlineRef) {
-                this.inlineRef.remove();
-                this.inlineRef = null;
-            }
-            this.updateView();
-        }
-    }
-    renderTemplate(props, linkText) {
-        const viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
-        viewRef.rootNodes.forEach((node) => {
-            Object.entries(props).forEach(([key, propValue]) => {
-                this.updateAttribute(node, key, propValue);
-            });
-            if (node.childNodes && node.childNodes.length === 0 && linkText) {
-                node.textContent = linkText;
-            }
-        });
-    }
-    updateAttribute(node, key, propValue) {
-        if (typeof propValue !== 'string' || !propValue || propValue === '') {
-            return;
-        }
-        if (key === 'href') {
-            const isInvalidLink = !propValue || /^https?:\/\/$/.test(propValue);
-            if (isInvalidLink) {
-                if (!node.href) {
-                    return;
-                }
-                propValue = node.href;
-            }
-            this.renderer.setAttribute(node, key, propValue);
-        }
-        else if (key === 'class' && node.className !== '') {
-            this.renderer.setAttribute(node, key, `${node.className} ${propValue}`);
-        }
-        else {
-            this.renderer.setAttribute(node, key, propValue);
-        }
-    }
-    updateView() {
-        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 || field.value?.text || field.href || field.value?.href;
-            const anchor = props?.anchor ? `#${props.anchor}` : '';
-            const href = `${props?.href}${anchor}`;
-            const mergedAttrs = { ...props, ...this.attrs, href };
-            delete mergedAttrs.anchor;
-            this.renderTemplate(mergedAttrs, 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 = {
-            ...this.getElementAttrs(),
-            ...this.attrs,
-        };
-        Object.entries(attrs).forEach(([key, attrValue]) => this.updateAttribute(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) {
-            view.destroy();
-            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;
-            }
-        }
-        view.destroy();
-        return attrs;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LinkDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: LinkDirective, selector: "[scLink]", inputs: { editable: ["scLinkEditable", "editable"], attrs: ["scLinkAttrs", "attrs"], field: ["scLink", "field"] }, usesOnChanges: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LinkDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[scLink]' }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { editable: [{
-                type: Input,
-                args: ['scLinkEditable']
-            }], attrs: [{
-                type: Input,
-                args: ['scLinkAttrs']
-            }], field: [{
-                type: Input,
-                args: ['scLink']
+class LinkDirective {
+    viewContainer;
+    templateRef;
+    renderer;
+    elementRef;
+    editable = true;
+    attrs = {};
+    field;
+    inlineRef = null;
+    constructor(viewContainer, templateRef, renderer, elementRef) {
+        this.viewContainer = viewContainer;
+        this.templateRef = templateRef;
+        this.renderer = renderer;
+        this.elementRef = elementRef;
+    }
+    ngOnChanges(changes) {
+        if (changes.field || changes.editable || changes.attrs) {
+            this.viewContainer.clear();
+            if (this.inlineRef) {
+                this.inlineRef.remove();
+                this.inlineRef = null;
+            }
+            this.updateView();
+        }
+    }
+    renderTemplate(props, linkText) {
+        const viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
+        viewRef.rootNodes.forEach((node) => {
+            Object.entries(props).forEach(([key, propValue]) => {
+                this.updateAttribute(node, key, propValue);
+            });
+            if (node.childNodes && node.childNodes.length === 0 && linkText) {
+                node.textContent = linkText;
+            }
+        });
+    }
+    updateAttribute(node, key, propValue) {
+        if (typeof propValue !== 'string' || !propValue || propValue === '') {
+            return;
+        }
+        if (key === 'href') {
+            const isInvalidLink = !propValue || /^https?:\/\/$/.test(propValue);
+            if (isInvalidLink) {
+                if (!node.href) {
+                    return;
+                }
+                propValue = node.href;
+            }
+            this.renderer.setAttribute(node, key, propValue);
+        }
+        else if (key === 'class' && node.className !== '') {
+            this.renderer.setAttribute(node, key, `${node.className} ${propValue}`);
+        }
+        else {
+            this.renderer.setAttribute(node, key, propValue);
+        }
+    }
+    updateView() {
+        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 || field.value?.text || field.href || field.value?.href;
+            const anchor = props?.anchor ? `#${props.anchor}` : '';
+            const href = `${props?.href}${anchor}`;
+            const mergedAttrs = { ...props, ...this.attrs, href };
+            delete mergedAttrs.anchor;
+            this.renderTemplate(mergedAttrs, 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 = {
+            ...this.getElementAttrs(),
+            ...this.attrs,
+        };
+        Object.entries(attrs).forEach(([key, attrValue]) => this.updateAttribute(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) {
+            view.destroy();
+            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;
+            }
+        }
+        view.destroy();
+        return attrs;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LinkDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: LinkDirective, selector: "[scLink]", inputs: { editable: ["scLinkEditable", "editable"], attrs: ["scLinkAttrs", "attrs"], field: ["scLink", "field"] }, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LinkDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[scLink]' }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { editable: [{
+                type: Input,
+                args: ['scLinkEditable']
+            }], attrs: [{
+                type: Input,
+                args: ['scLinkAttrs']
+            }], field: [{
+                type: Input,
+                args: ['scLink']
             }] } });
 
-class RouterLinkDirective extends LinkDirective {
-    router;
-    editable = true;
-    attrs = {};
-    field;
-    constructor(viewContainer, templateRef, renderer, elementRef, router) {
-        super(viewContainer, templateRef, renderer, elementRef);
-        this.router = router;
-    }
-    renderTemplate(props, linkText) {
-        const viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
-        viewRef.rootNodes.forEach((node) => {
-            Object.entries(props).forEach(([key, propValue]) => {
-                this.updateAttribute(node, key, propValue);
-                if (key === 'href') {
-                    this.renderer.listen(node, 'click', (event) => {
-                        this.router.navigateByUrl(propValue);
-                        // shouldn't prevent default if the link includes a fragment
-                        if (!propValue.includes('#')) {
-                            event.preventDefault();
-                        }
-                    });
-                }
-            });
-            if (node.childNodes && node.childNodes.length === 0 && linkText) {
-                node.textContent = linkText;
-            }
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RouterLinkDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: RouterLinkDirective, selector: "[scRouterLink]", inputs: { editable: ["scRouterLinkEditable", "editable"], attrs: ["scRouterLinkAttrs", "attrs"], field: ["scRouterLink", "field"] }, usesInheritance: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RouterLinkDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[scRouterLink]' }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.Router }]; }, propDecorators: { editable: [{
-                type: Input,
-                args: ['scRouterLinkEditable']
-            }], attrs: [{
-                type: Input,
-                args: ['scRouterLinkAttrs']
-            }], field: [{
-                type: Input,
-                args: ['scRouterLink']
+class RouterLinkDirective extends LinkDirective {
+    router;
+    editable = true;
+    attrs = {};
+    field;
+    constructor(viewContainer, templateRef, renderer, elementRef, router) {
+        super(viewContainer, templateRef, renderer, elementRef);
+        this.router = router;
+    }
+    renderTemplate(props, linkText) {
+        const viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
+        viewRef.rootNodes.forEach((node) => {
+            Object.entries(props).forEach(([key, propValue]) => {
+                this.updateAttribute(node, key, propValue);
+                if (key === 'href') {
+                    this.renderer.listen(node, 'click', (event) => {
+                        this.router.navigateByUrl(propValue);
+                        // shouldn't prevent default if the link includes a fragment
+                        if (!propValue.includes('#')) {
+                            event.preventDefault();
+                        }
+                    });
+                }
+            });
+            if (node.childNodes && node.childNodes.length === 0 && linkText) {
+                node.textContent = linkText;
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RouterLinkDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: RouterLinkDirective, selector: "[scRouterLink]", inputs: { editable: ["scRouterLinkEditable", "editable"], attrs: ["scRouterLinkAttrs", "attrs"], field: ["scRouterLink", "field"] }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RouterLinkDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[scRouterLink]' }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.Router }]; }, propDecorators: { editable: [{
+                type: Input,
+                args: ['scRouterLinkEditable']
+            }], attrs: [{
+                type: Input,
+                args: ['scRouterLinkAttrs']
+            }], field: [{
+                type: Input,
+                args: ['scRouterLink']
             }] } });
 
-class GenericLinkDirective extends LinkDirective {
-    router;
-    editable = true;
-    attrs = {};
-    field;
-    extras;
-    constructor(viewContainer, templateRef, renderer, elementRef, router) {
-        super(viewContainer, templateRef, renderer, elementRef);
-        this.router = router;
-    }
-    renderTemplate(props, linkText) {
-        const viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
-        viewRef.rootNodes.forEach((node) => {
-            Object.entries(props).forEach(([key, propValue]) => {
-                if (key === 'href' && !isAbsoluteUrl(propValue)) {
-                    const fragments = propValue.split('#');
-                    const url = fragments[0];
-                    const anchor = fragments[1];
-                    const urlTree = this.router.createUrlTree([url], {
-                        fragment: anchor,
-                        ...this.extras,
-                    });
-                    this.updateAttribute(node, key, this.router.serializeUrl(urlTree));
-                    this.renderer.listen(node, 'click', (event) => {
-                        this.router.navigate([url], {
-                            fragment: anchor,
-                            ...this.extras,
-                        });
-                        // shouldn't prevent default if the link includes a fragment
-                        if (!anchor) {
-                            event.preventDefault();
-                        }
-                    });
-                }
-                else {
-                    this.updateAttribute(node, key, propValue);
-                }
-            });
-            if (node.childNodes && node.childNodes.length === 0 && linkText) {
-                node.textContent = linkText;
-            }
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GenericLinkDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: GenericLinkDirective, selector: "[scGenericLink]", inputs: { editable: ["scGenericLinkEditable", "editable"], attrs: ["scGenericLinkAttrs", "attrs"], field: ["scGenericLink", "field"], extras: ["scGenericLinkExtras", "extras"] }, usesInheritance: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GenericLinkDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[scGenericLink]' }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.Router }]; }, 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 {
+    router;
+    editable = true;
+    attrs = {};
+    field;
+    extras;
+    constructor(viewContainer, templateRef, renderer, elementRef, router) {
+        super(viewContainer, templateRef, renderer, elementRef);
+        this.router = router;
+    }
+    renderTemplate(props, linkText) {
+        const viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
+        viewRef.rootNodes.forEach((node) => {
+            Object.entries(props).forEach(([key, propValue]) => {
+                if (key === 'href' && !isAbsoluteUrl(propValue)) {
+                    const fragments = propValue.split('#');
+                    const url = fragments[0];
+                    const anchor = fragments[1];
+                    const urlTree = this.router.createUrlTree([url], {
+                        fragment: anchor,
+                        ...this.extras,
+                    });
+                    this.updateAttribute(node, key, this.router.serializeUrl(urlTree));
+                    this.renderer.listen(node, 'click', (event) => {
+                        this.router.navigate([url], {
+                            fragment: anchor,
+                            ...this.extras,
+                        });
+                        // shouldn't prevent default if the link includes a fragment
+                        if (!anchor) {
+                            event.preventDefault();
+                        }
+                    });
+                }
+                else {
+                    this.updateAttribute(node, key, propValue);
+                }
+            });
+            if (node.childNodes && node.childNodes.length === 0 && linkText) {
+                node.textContent = linkText;
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GenericLinkDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: GenericLinkDirective, selector: "[scGenericLink]", inputs: { editable: ["scGenericLinkEditable", "editable"], attrs: ["scGenericLinkAttrs", "attrs"], field: ["scGenericLink", "field"], extras: ["scGenericLinkExtras", "extras"] }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GenericLinkDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[scGenericLink]' }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.Router }]; }, propDecorators: { editable: [{
+                type: Input,
+                args: ['scGenericLinkEditable']
+            }], attrs: [{
+                type: Input,
+                args: ['scGenericLinkAttrs']
+            }], field: [{
+                type: Input,
+                args: ['scGenericLink']
+            }], extras: [{
+                type: Input,
+                args: ['scGenericLinkExtras']
             }] } });
 
-class HiddenRenderingComponent {
-    get style() {
-        return 'background-image: linear-gradient(45deg, #ffffff 25%, #dcdcdc 25%, #dcdcdc 50%, #ffffff 50%, #ffffff 75%, #dcdcdc 75%, #dcdcdc 100%); background-size: 3px 3px; display: block; height: 100px;';
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HiddenRenderingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HiddenRenderingComponent, selector: "sc-hidden-rendering", host: { properties: { "style": "this.style" } }, ngImport: i0, template: '', isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HiddenRenderingComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'sc-hidden-rendering',
-                    template: '',
-                }]
-        }], propDecorators: { style: [{
-                type: HostBinding,
-                args: ['style']
-            }] } });
+class HiddenRenderingComponent {
+    get style() {
+        return 'background-image: linear-gradient(45deg, #ffffff 25%, #dcdcdc 25%, #dcdcdc 50%, #ffffff 50%, #ffffff 75%, #dcdcdc 75%, #dcdcdc 100%); background-size: 3px 3px; display: block; height: 100px;';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HiddenRenderingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HiddenRenderingComponent, selector: "sc-hidden-rendering", host: { properties: { "style": "this.style" } }, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HiddenRenderingComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sc-hidden-rendering',
+                    template: '',
+                }]
+        }], propDecorators: { style: [{
+                type: HostBinding,
+                args: ['style']
+            }] } });
 const HIDDEN_RENDERING_NAME = 'Hidden Rendering';
 
-class PlaceholderLoadingDirective {
-    templateRef;
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PlaceholderLoadingDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: PlaceholderLoadingDirective, selector: "[scPlaceholderLoading]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PlaceholderLoadingDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[scPlaceholderLoading]',
-                }]
+class PlaceholderLoadingDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PlaceholderLoadingDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: PlaceholderLoadingDirective, selector: "[scPlaceholderLoading]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PlaceholderLoadingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[scPlaceholderLoading]',
+                }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
-/** Registers a statically loaded component */
-class ComponentNameAndType {
-    name;
-    type;
-    canActivate;
-    resolve;
-}
-/**
- * @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');
-const GUARD_RESOLVER = new InjectionToken('Sc.placeholder.guardResolver');
+/** Registers a statically loaded component */
+class ComponentNameAndType {
+    name;
+    type;
+    canActivate;
+    resolve;
+}
+/**
+ * @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');
+const GUARD_RESOLVER = new InjectionToken('Sc.placeholder.guardResolver');
 const DATA_RESOLVER = new InjectionToken('Sc.placeholder.dataResolver');
 
-class RenderEachDirective {
-    templateRef;
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RenderEachDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: RenderEachDirective, selector: "[renderEach]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RenderEachDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[renderEach]',
-                }]
+class RenderEachDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RenderEachDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: RenderEachDirective, selector: "[renderEach]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RenderEachDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[renderEach]',
+                }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
-class RenderEmptyDirective {
-    templateRef;
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RenderEmptyDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: RenderEmptyDirective, selector: "[renderEmpty]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RenderEmptyDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[renderEmpty]',
-                }]
+class RenderEmptyDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RenderEmptyDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: RenderEmptyDirective, selector: "[renderEmpty]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RenderEmptyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[renderEmpty]',
+                }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
-/**
- * @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 RawComponent {
-    renderer;
-    elementRef;
-    rendering;
-    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);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RawComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RawComponent, selector: "sc-raw", inputs: { rendering: "rendering" }, ngImport: i0, template: '', isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RawComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'sc-raw',
-                    template: '',
-                }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { rendering: [{
-                type: Input
+class RawComponent {
+    renderer;
+    elementRef;
+    rendering;
+    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);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RawComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RawComponent, selector: "sc-raw", inputs: { rendering: "rendering" }, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RawComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sc-raw',
+                    template: '',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { rendering: [{
+                type: Input
             }] } });
 
-class JssComponentFactoryService {
-    injector;
-    components;
-    lazyComponents;
-    componentMap;
-    lazyComponentMap;
-    constructor(injector, components, lazyComponents) {
-        this.injector = injector;
-        this.components = components;
-        this.lazyComponents = lazyComponents;
-        this.componentMap = new Map();
-        this.lazyComponentMap = new Map();
-        this.components.forEach((c) => this.componentMap.set(c.name, c));
-        if (this.lazyComponents) {
-            this.lazyComponents.forEach((c) => this.lazyComponentMap.set(c.path, c));
-        }
-    }
-    getComponent(component) {
-        const loadedComponent = this.componentMap.get(component.componentName);
-        if (loadedComponent) {
-            return Promise.resolve({
-                componentDefinition: component,
-                componentImplementation: loadedComponent.type,
-                canActivate: loadedComponent.canActivate,
-                resolve: loadedComponent.resolve,
-            });
-        }
-        const lazyComponent = this.lazyComponentMap.get(component.componentName);
-        if (lazyComponent) {
-            return lazyComponent.loadChildren().then((lazyChild) => {
-                let componentType = null;
-                const moduleRef = createNgModule(lazyChild, 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,
-                    componentModuleRef: moduleRef,
-                    canActivate: lazyComponent.canActivate,
-                    resolve: lazyComponent.resolve,
-                };
-            });
-        }
-        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,
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: JssComponentFactoryService, deps: [{ token: i0.Injector }, { token: PLACEHOLDER_COMPONENTS }, { token: PLACEHOLDER_LAZY_COMPONENTS }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: JssComponentFactoryService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: JssComponentFactoryService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [PLACEHOLDER_COMPONENTS]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [PLACEHOLDER_LAZY_COMPONENTS]
+class JssComponentFactoryService {
+    injector;
+    components;
+    lazyComponents;
+    componentMap;
+    lazyComponentMap;
+    constructor(injector, components, lazyComponents) {
+        this.injector = injector;
+        this.components = components;
+        this.lazyComponents = lazyComponents;
+        this.componentMap = new Map();
+        this.lazyComponentMap = new Map();
+        this.components.forEach((c) => this.componentMap.set(c.name, c));
+        if (this.lazyComponents) {
+            this.lazyComponents.forEach((c) => this.lazyComponentMap.set(c.path, c));
+        }
+    }
+    getComponent(component) {
+        const loadedComponent = this.componentMap.get(component.componentName);
+        if (loadedComponent) {
+            return Promise.resolve({
+                componentDefinition: component,
+                componentImplementation: loadedComponent.type,
+                canActivate: loadedComponent.canActivate,
+                resolve: loadedComponent.resolve,
+            });
+        }
+        const lazyComponent = this.lazyComponentMap.get(component.componentName);
+        if (lazyComponent) {
+            return lazyComponent.loadChildren().then((lazyChild) => {
+                let componentType = null;
+                const moduleRef = createNgModule(lazyChild, 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,
+                    componentModuleRef: moduleRef,
+                    canActivate: lazyComponent.canActivate,
+                    resolve: lazyComponent.resolve,
+                };
+            });
+        }
+        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,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: JssComponentFactoryService, deps: [{ token: i0.Injector }, { token: PLACEHOLDER_COMPONENTS }, { token: PLACEHOLDER_LAZY_COMPONENTS }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: JssComponentFactoryService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: JssComponentFactoryService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLACEHOLDER_COMPONENTS]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLACEHOLDER_LAZY_COMPONENTS]
                 }] }]; } });
 
-/* 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 {
-    differs;
-    componentFactory;
-    changeDetectorRef;
-    elementRef;
-    renderer;
-    router;
-    missingComponentComponent;
-    hiddenRenderingComponent;
-    guardResolver;
-    dataResolver;
-    platformId;
-    name;
-    rendering;
-    renderings;
-    outputs;
-    clientOnly = false;
-    loaded = new EventEmitter();
-    renderEachTemplate;
-    renderEmptyTemplate;
-    placeholderLoading;
-    view;
-    isLoading = true;
-    _inputs;
-    _differ;
-    _componentInstances = [];
-    destroyed = false;
-    parentStyleAttribute = '';
-    constructor(differs, componentFactory, changeDetectorRef, elementRef, renderer, router, missingComponentComponent, hiddenRenderingComponent, guardResolver, dataResolver, 
-    // eslint-disable-next-line @typescript-eslint/ban-types
-    platformId) {
-        this.differs = differs;
-        this.componentFactory = componentFactory;
-        this.changeDetectorRef = changeDetectorRef;
-        this.elementRef = elementRef;
-        this.renderer = renderer;
-        this.router = router;
-        this.missingComponentComponent = missingComponentComponent;
-        this.hiddenRenderingComponent = hiddenRenderingComponent;
-        this.guardResolver = guardResolver;
-        this.dataResolver = dataResolver;
-        this.platformId = platformId;
-    }
-    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]));
-    }
-    async _render() {
-        if (this.clientOnly && isPlatformServer(this.platformId)) {
-            return;
-        }
-        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 {
-            const factories = await this.componentFactory.getComponents(placeholder);
-            try {
-                const nonGuarded = await this.guardResolver(factories);
-                const withData = await this.dataResolver(nonGuarded);
-                withData.forEach((rendering, index) => {
-                    if (this.renderEachTemplate && !isRawRendering(rendering.factory.componentDefinition)) {
-                        this._renderTemplatedComponent(rendering.factory.componentDefinition, index);
-                    }
-                    else {
-                        this._renderEmbeddedComponent(rendering.factory, rendering.data, index);
-                    }
-                });
-                this.isLoading = false;
-                this.changeDetectorRef.markForCheck();
-                this.loaded.emit(this.name);
-            }
-            catch (e) {
-                this.isLoading = false;
-                if (e instanceof UrlTree) {
-                    this.router.navigateByUrl(e);
-                }
-                else if (typeof e === 'string') {
-                    this.router.navigate([e]);
-                }
-                else if (Array.isArray(e)) {
-                    this.router.navigate(e);
-                }
-                else {
-                    throw e;
-                }
-            }
-        }
-    }
-    _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, data, 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 {
+    differs;
+    componentFactory;
+    changeDetectorRef;
+    elementRef;
+    renderer;
+    router;
+    missingComponentComponent;
+    hiddenRenderingComponent;
+    guardResolver;
+    dataResolver;
+    platformId;
+    name;
+    rendering;
+    renderings;
+    outputs;
+    clientOnly = false;
+    loaded = new EventEmitter();
+    renderEachTemplate;
+    renderEmptyTemplate;
+    placeholderLoading;
+    view;
+    isLoading = true;
+    _inputs;
+    _differ;
+    _componentInstances = [];
+    destroyed = false;
+    parentStyleAttribute = '';
+    constructor(differs, componentFactory, changeDetectorRef, elementRef, renderer, router, missingComponentComponent, hiddenRenderingComponent, guardResolver, dataResolver, 
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    platformId) {
+        this.differs = differs;
+        this.componentFactory = componentFactory;
+        this.changeDetectorRef = changeDetectorRef;
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        this.router = router;
+        this.missingComponentComponent = missingComponentComponent;
+        this.hiddenRenderingComponent = hiddenRenderingComponent;
+        this.guardResolver = guardResolver;
+        this.dataResolver = dataResolver;
+        this.platformId = platformId;
+    }
+    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]));
+    }
+    async _render() {
+        if (this.clientOnly && isPlatformServer(this.platformId)) {
+            return;
+        }
+        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 {
+            const factories = await this.componentFactory.getComponents(placeholder);
+            try {
+                const nonGuarded = await this.guardResolver(factories);
+                const withData = await this.dataResolver(nonGuarded);
+                withData.forEach((rendering, index) => {
+                    if (this.renderEachTemplate && !isRawRendering(rendering.factory.componentDefinition)) {
+                        this._renderTemplatedComponent(rendering.factory.componentDefinition, index);
+                    }
+                    else {
+                        this._renderEmbeddedComponent(rendering.factory, rendering.data, index);
+                    }
+                });
+                this.isLoading = false;
+                this.changeDetectorRef.markForCheck();
+                this.loaded.emit(this.name);
+            }
+            catch (e) {
+                this.isLoading = false;
+                if (e instanceof UrlTree) {
+                    this.router.navigateByUrl(e);
+                }
+                else if (typeof e === 'string') {
+                    this.router.navigate([e]);
+                }
+                else if (Array.isArray(e)) {
+                    this.router.navigate(e);
+                }
+                else {
+                    throw e;
+                }
+            }
+        }
+    }
+    _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, data, 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;
-        }
-        // apply the parent style attribute _ngcontent
-        // work-around for https://github.com/angular/angular/issues/12215
-        const createdComponentRef = this.view.createComponent(rendering.componentImplementation, {
-            index: index,
-            ngModuleRef: rendering.componentModuleRef,
-        });
-        if (this.parentStyleAttribute) {
-            this.renderer.setAttribute(createdComponentRef.location.nativeElement, this.parentStyleAttribute, '');
-        }
-        const componentInstance = createdComponentRef.instance;
-        componentInstance.rendering = rendering.componentDefinition;
-        componentInstance.data = data;
-        if (this._inputs) {
-            this._setComponentInputs(componentInstance, this._inputs);
-        }
-        if (this.outputs) {
-            this._subscribeComponentOutputs(componentInstance, this.outputs);
-        }
-        this._componentInstances.push(componentInstance);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PlaceholderComponent, deps: [{ token: i0.KeyValueDiffers }, { token: JssComponentFactoryService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.Router }, { token: PLACEHOLDER_MISSING_COMPONENT_COMPONENT }, { token: PLACEHOLDER_HIDDEN_RENDERING_COMPONENT }, { token: GUARD_RESOLVER }, { token: DATA_RESOLVER }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
+        ])`);
+            rendering.componentImplementation = this.missingComponentComponent;
+        }
+        // apply the parent style attribute _ngcontent
+        // work-around for https://github.com/angular/angular/issues/12215
+        const createdComponentRef = this.view.createComponent(rendering.componentImplementation, {
+            index: index,
+            ngModuleRef: rendering.componentModuleRef,
+        });
+        if (this.parentStyleAttribute) {
+            this.renderer.setAttribute(createdComponentRef.location.nativeElement, this.parentStyleAttribute, '');
+        }
+        const componentInstance = createdComponentRef.instance;
+        componentInstance.rendering = rendering.componentDefinition;
+        componentInstance.data = data;
+        if (this._inputs) {
+            this._setComponentInputs(componentInstance, this._inputs);
+        }
+        if (this.outputs) {
+            this._subscribeComponentOutputs(componentInstance, this.outputs);
+        }
+        this._componentInstances.push(componentInstance);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PlaceholderComponent, deps: [{ token: i0.KeyValueDiffers }, { token: JssComponentFactoryService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.Router }, { token: PLACEHOLDER_MISSING_COMPONENT_COMPONENT }, { token: PLACEHOLDER_HIDDEN_RENDERING_COMPONENT }, { token: GUARD_RESOLVER }, { token: DATA_RESOLVER }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PlaceholderComponent, selector: "sc-placeholder,[sc-placeholder]", inputs: { name: "name", rendering: "rendering", renderings: "renderings", outputs: "outputs", clientOnly: "clientOnly", inputs: "inputs" }, outputs: { loaded: "loaded" }, queries: [{ propertyName: "renderEachTemplate", first: true, predicate: RenderEachDirective, descendants: true, static: true }, { propertyName: "renderEmptyTemplate", first: true, predicate: RenderEmptyDirective, descendants: true, static: true }, { propertyName: "placeholderLoading", first: true, predicate: PlaceholderLoadingDirective, descendants: true, static: true }], viewQueries: [{ propertyName: "view", first: true, predicate: ["view"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: `
     <ng-template
       *ngIf="isLoading"
       [ngTemplateOutlet]="placeholderLoading?.templateRef"
     ></ng-template>
     <ng-template #view></ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PlaceholderComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'sc-placeholder,[sc-placeholder]',
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: 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>
-  `,
-                }]
-        }], ctorParameters: function () { return [{ type: i0.KeyValueDiffers }, { type: JssComponentFactoryService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.Router }, { type: i0.Type, decorators: [{
-                    type: Inject,
-                    args: [PLACEHOLDER_MISSING_COMPONENT_COMPONENT]
-                }] }, { type: i0.Type, decorators: [{
-                    type: Inject,
-                    args: [PLACEHOLDER_HIDDEN_RENDERING_COMPONENT]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [GUARD_RESOLVER]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DATA_RESOLVER]
-                }] }, { type: Object, decorators: [{
-                    type: Inject,
-                    args: [PLATFORM_ID]
-                }] }]; }, propDecorators: { name: [{
-                type: Input
-            }], rendering: [{
-                type: Input
-            }], renderings: [{
-                type: Input
-            }], outputs: [{
-                type: Input
-            }], clientOnly: [{
-                type: Input
-            }], loaded: [{
-                type: Output
-            }], renderEachTemplate: [{
-                type: ContentChild,
-                args: [RenderEachDirective, { static: true }]
-            }], renderEmptyTemplate: [{
-                type: ContentChild,
-                args: [RenderEmptyDirective, { static: true }]
-            }], placeholderLoading: [{
-                type: ContentChild,
-                args: [PlaceholderLoadingDirective, { static: true }]
-            }], view: [{
-                type: ViewChild,
-                args: ['view', { read: ViewContainerRef, static: true }]
-            }], inputs: [{
-                type: Input
+  `,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.KeyValueDiffers }, { type: JssComponentFactoryService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.Router }, { type: i0.Type, decorators: [{
+                    type: Inject,
+                    args: [PLACEHOLDER_MISSING_COMPONENT_COMPONENT]
+                }] }, { type: i0.Type, decorators: [{
+                    type: Inject,
+                    args: [PLACEHOLDER_HIDDEN_RENDERING_COMPONENT]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [GUARD_RESOLVER]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DATA_RESOLVER]
+                }] }, { type: Object, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }]; }, propDecorators: { name: [{
+                type: Input
+            }], rendering: [{
+                type: Input
+            }], renderings: [{
+                type: Input
+            }], outputs: [{
+                type: Input
+            }], clientOnly: [{
+                type: Input
+            }], loaded: [{
+                type: Output
+            }], renderEachTemplate: [{
+                type: ContentChild,
+                args: [RenderEachDirective, { static: true }]
+            }], renderEmptyTemplate: [{
+                type: ContentChild,
+                args: [RenderEmptyDirective, { static: true }]
+            }], placeholderLoading: [{
+                type: ContentChild,
+                args: [PlaceholderLoadingDirective, { static: true }]
+            }], view: [{
+                type: ViewChild,
+                args: ['view', { read: ViewContainerRef, static: true }]
+            }], inputs: [{
+                type: Input
             }] } });
 
-/**
- * Renders a single JSS component given a rendering definition.
- * Useful inside templated placeholders.
- */
-class RenderComponentComponent {
-    differs;
-    componentFactory;
-    missingComponentComponent;
-    rendering;
-    outputs;
-    view;
-    _inputs;
-    _differ;
-    destroyed = false;
-    constructor(differs, componentFactory, missingComponentComponent) {
-        this.differs = differs;
-        this.componentFactory = componentFactory;
-        this.missingComponentComponent = missingComponentComponent;
-    }
-    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 {
+    differs;
+    componentFactory;
+    missingComponentComponent;
+    rendering;
+    outputs;
+    view;
+    _inputs;
+    _differ;
+    destroyed = false;
+    constructor(differs, componentFactory, missingComponentComponent) {
+        this.differs = differs;
+        this.componentFactory = componentFactory;
+        this.missingComponentComponent = missingComponentComponent;
+    }
+    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 componentInstance = this.view.createComponent(rendering.componentImplementation)
-                .instance;
-            componentInstance.rendering = rendering.componentDefinition;
-            if (this._inputs) {
-                this._setComponentInputs(componentInstance, this._inputs);
-            }
-            if (this.outputs) {
-                this._subscribeComponentOutputs(componentInstance, this.outputs);
-            }
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RenderComponentComponent, deps: [{ token: i0.KeyValueDiffers }, { token: JssComponentFactoryService }, { token: PLACEHOLDER_MISSING_COMPONENT_COMPONENT }], target: i0.ɵɵFactoryTarget.Component });
+          ])`);
+                rendering.componentImplementation = this.missingComponentComponent;
+            }
+            const componentInstance = this.view.createComponent(rendering.componentImplementation)
+                .instance;
+            componentInstance.rendering = rendering.componentDefinition;
+            if (this._inputs) {
+                this._setComponentInputs(componentInstance, this._inputs);
+            }
+            if (this.outputs) {
+                this._subscribeComponentOutputs(componentInstance, this.outputs);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RenderComponentComponent, deps: [{ token: i0.KeyValueDiffers }, { token: JssComponentFactoryService }, { token: PLACEHOLDER_MISSING_COMPONENT_COMPONENT }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RenderComponentComponent, selector: "sc-render-component", inputs: { rendering: "rendering", outputs: "outputs", inputs: "inputs" }, viewQueries: [{ propertyName: "view", first: true, predicate: ["view"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: `
     <ng-template #view></ng-template>
-  `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RenderComponentComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'sc-render-component',
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RenderComponentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sc-render-component',
                     template: `
     <ng-template #view></ng-template>
-  `,
-                }]
-        }], ctorParameters: function () { return [{ type: i0.KeyValueDiffers }, { type: JssComponentFactoryService }, { type: i0.Type, decorators: [{
-                    type: Inject,
-                    args: [PLACEHOLDER_MISSING_COMPONENT_COMPONENT]
-                }] }]; }, propDecorators: { rendering: [{
-                type: Input
-            }], outputs: [{
-                type: Input
-            }], view: [{
-                type: ViewChild,
-                args: ['view', { read: ViewContainerRef, static: true }]
-            }], inputs: [{
-                type: Input
+  `,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.KeyValueDiffers }, { type: JssComponentFactoryService }, { type: i0.Type, decorators: [{
+                    type: Inject,
+                    args: [PLACEHOLDER_MISSING_COMPONENT_COMPONENT]
+                }] }]; }, propDecorators: { rendering: [{
+                type: Input
+            }], outputs: [{
+                type: Input
+            }], view: [{
+                type: ViewChild,
+                args: ['view', { read: ViewContainerRef, static: true }]
+            }], inputs: [{
+                type: Input
             }] } });
 
-class DateDirective {
-    viewContainer;
-    templateRef;
-    datePipe;
-    format;
-    timezone;
-    locale;
-    editable = true;
-    field;
-    viewRef;
-    constructor(viewContainer, templateRef, datePipe) {
-        this.viewContainer = viewContainer;
-        this.templateRef = templateRef;
-        this.datePipe = datePipe;
-    }
-    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);
-            }
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: i1$1.DatePipe }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DateDirective, selector: "[scDate]", inputs: { format: ["scDateFormat", "format"], timezone: ["scDateTimezone", "timezone"], locale: ["scDateLocale", "locale"], editable: ["scDateEditable", "editable"], field: ["scDate", "field"] }, usesOnChanges: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[scDate]',
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: i1$1.DatePipe }]; }, 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 {
+    viewContainer;
+    templateRef;
+    datePipe;
+    format;
+    timezone;
+    locale;
+    editable = true;
+    field;
+    viewRef;
+    constructor(viewContainer, templateRef, datePipe) {
+        this.viewContainer = viewContainer;
+        this.templateRef = templateRef;
+        this.datePipe = datePipe;
+    }
+    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);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: i1$1.DatePipe }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DateDirective, selector: "[scDate]", inputs: { format: ["scDateFormat", "format"], timezone: ["scDateTimezone", "timezone"], locale: ["scDateLocale", "locale"], editable: ["scDateEditable", "editable"], field: ["scDate", "field"] }, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[scDate]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: i1$1.DatePipe }]; }, 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 EditFrameComponent {
-    dataSource;
-    buttons;
-    title;
-    tooltip;
-    cssClass;
-    parameters;
-    sitecore;
-    isEditing = false;
-    frameProps = {};
-    chromeData = '';
-    ngOnChanges() {
-        this.isEditing = this.sitecore.context.pageEditing || false;
-        if (!this.isEditing) {
-            return;
-        }
-        this.frameProps.class = 'scLooseFrameZone';
-        if (this.cssClass) {
-            this.frameProps.class = `${this.frameProps.class} ${this.cssClass}`;
-        }
-        // item uri for edit frame target
-        if (this.dataSource) {
-            const route = this.sitecore.route;
-            const databaseName = this.dataSource.databaseName || route?.databaseName;
-            const language = this.dataSource.language || this.sitecore.context.language;
-            this.frameProps.sc_item = `sitecore://${databaseName}/${this.dataSource.itemId}?lang=${language}`;
-        }
-        this.chromeData = this.buildChromeData();
-    }
-    buildChromeData() {
-        const chromeData = {
-            displayName: this.title,
-            expandedDisplayName: this.tooltip,
-        };
-        if (this.dataSource) {
-            chromeData.contextItemUri = this.frameProps.sc_item;
-        }
-        chromeData.commands = this.buttons?.map((value) => {
-            return mapButtonToCommand(value, this.dataSource?.itemId, this.parameters);
-        });
-        return JSON.stringify(chromeData);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditFrameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+class EditFrameComponent {
+    dataSource;
+    buttons;
+    title;
+    tooltip;
+    cssClass;
+    parameters;
+    sitecore;
+    isEditing = false;
+    frameProps = {};
+    chromeData = '';
+    ngOnChanges() {
+        this.isEditing = this.sitecore.context.pageEditing || false;
+        if (!this.isEditing) {
+            return;
+        }
+        this.frameProps.class = 'scLooseFrameZone';
+        if (this.cssClass) {
+            this.frameProps.class = `${this.frameProps.class} ${this.cssClass}`;
+        }
+        // item uri for edit frame target
+        if (this.dataSource) {
+            const route = this.sitecore.route;
+            const databaseName = this.dataSource.databaseName || route?.databaseName;
+            const language = this.dataSource.language || this.sitecore.context.language;
+            this.frameProps.sc_item = `sitecore://${databaseName}/${this.dataSource.itemId}?lang=${language}`;
+        }
+        this.chromeData = this.buildChromeData();
+    }
+    buildChromeData() {
+        const chromeData = {
+            displayName: this.title,
+            expandedDisplayName: this.tooltip,
+        };
+        if (this.dataSource) {
+            chromeData.contextItemUri = this.frameProps.sc_item;
+        }
+        chromeData.commands = this.buttons?.map((value) => {
+            return mapButtonToCommand(value, this.dataSource?.itemId, this.parameters);
+        });
+        return JSON.stringify(chromeData);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditFrameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EditFrameComponent, selector: "sc-edit-frame,[sc-edit-frame]", inputs: { dataSource: "dataSource", buttons: "buttons", title: "title", tooltip: "tooltip", cssClass: "cssClass", parameters: "parameters", sitecore: "sitecore" }, usesOnChanges: true, ngImport: i0, template: `
     <ng-template #childContent>
       <ng-content></ng-content>
@@ -1155,12 +1155,12 @@ class EditFrameComponent {
     <ng-template #elseBlock>
       <ng-container *ngTemplateOutlet="childContent"></ng-container>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditFrameComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'sc-edit-frame,[sc-edit-frame]',
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditFrameComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sc-edit-frame,[sc-edit-frame]',
                     template: `
     <ng-template #childContent>
       <ng-content></ng-content>
@@ -1176,305 +1176,305 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
     <ng-template #elseBlock>
       <ng-container *ngTemplateOutlet="childContent"></ng-container>
     </ng-template>
-  `,
-                }]
-        }], propDecorators: { dataSource: [{
-                type: Input
-            }], buttons: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], tooltip: [{
-                type: Input
-            }], cssClass: [{
-                type: Input
-            }], parameters: [{
-                type: Input
-            }], sitecore: [{
-                type: Input
+  `,
+                }]
+        }], propDecorators: { dataSource: [{
+                type: Input
+            }], buttons: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], tooltip: [{
+                type: Input
+            }], cssClass: [{
+                type: Input
+            }], parameters: [{
+                type: Input
+            }], sitecore: [{
+                type: Input
             }] } });
 
-class RichTextDirective {
-    viewContainer;
-    templateRef;
-    renderer;
-    router;
-    editable = true;
-    field;
-    viewRef;
-    constructor(viewContainer, templateRef, renderer, router) {
-        this.viewContainer = viewContainer;
-        this.templateRef = templateRef;
-        this.renderer = renderer;
-        this.router = router;
-    }
-    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;
-            if (!node.querySelectorAll) {
-                return;
-            }
-            const links = node.querySelectorAll('a[href]');
-            const linksArray = [].slice.call(links);
-            linksArray.forEach((link) => {
-                const href = link.getAttribute('href');
-                const target = link.getAttribute('target');
-                if (!href || isAbsoluteUrl(href) || target === '_blank' || target === '_top') {
-                    return;
-                }
-                this.renderer.listen(link, 'click', (event) => {
-                    this.router.navigateByUrl(href);
-                    event.preventDefault();
-                });
-            });
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RichTextDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: i0.Renderer2 }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: RichTextDirective, selector: "[scRichText]", inputs: { editable: ["scRichTextEditable", "editable"], field: ["scRichText", "field"] }, usesOnChanges: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RichTextDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[scRichText]',
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: i0.Renderer2 }, { type: i1.Router }]; }, propDecorators: { editable: [{
-                type: Input,
-                args: ['scRichTextEditable']
-            }], field: [{
-                type: Input,
-                args: ['scRichText']
+class RichTextDirective {
+    viewContainer;
+    templateRef;
+    renderer;
+    router;
+    editable = true;
+    field;
+    viewRef;
+    constructor(viewContainer, templateRef, renderer, router) {
+        this.viewContainer = viewContainer;
+        this.templateRef = templateRef;
+        this.renderer = renderer;
+        this.router = router;
+    }
+    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;
+            if (!node.querySelectorAll) {
+                return;
+            }
+            const links = node.querySelectorAll('a[href]');
+            const linksArray = [].slice.call(links);
+            linksArray.forEach((link) => {
+                const href = link.getAttribute('href');
+                const target = link.getAttribute('target');
+                if (!href || isAbsoluteUrl(href) || target === '_blank' || target === '_top') {
+                    return;
+                }
+                this.renderer.listen(link, 'click', (event) => {
+                    this.router.navigateByUrl(href);
+                    event.preventDefault();
+                });
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RichTextDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: i0.Renderer2 }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: RichTextDirective, selector: "[scRichText]", inputs: { editable: ["scRichTextEditable", "editable"], field: ["scRichText", "field"] }, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RichTextDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[scRichText]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: i0.Renderer2 }, { type: i1.Router }]; }, propDecorators: { editable: [{
+                type: Input,
+                args: ['scRichTextEditable']
+            }], field: [{
+                type: Input,
+                args: ['scRichText']
             }] } });
 
-class TextDirective {
-    viewContainer;
-    templateRef;
-    editable = true;
-    encode = true;
-    field;
-    viewRef;
-    constructor(viewContainer, templateRef) {
-        this.viewContainer = viewContainer;
-        this.templateRef = templateRef;
-    }
-    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;
-            }
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TextDirective, selector: "[scText]", inputs: { editable: ["scTextEditable", "editable"], encode: ["scTextEncode", "encode"], field: ["scText", "field"] }, usesOnChanges: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[scText]',
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }]; }, propDecorators: { editable: [{
-                type: Input,
-                args: ['scTextEditable']
-            }], encode: [{
-                type: Input,
-                args: ['scTextEncode']
-            }], field: [{
-                type: Input,
-                args: ['scText']
+class TextDirective {
+    viewContainer;
+    templateRef;
+    editable = true;
+    encode = true;
+    field;
+    viewRef;
+    constructor(viewContainer, templateRef) {
+        this.viewContainer = viewContainer;
+        this.templateRef = templateRef;
+    }
+    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;
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TextDirective, selector: "[scText]", inputs: { editable: ["scTextEditable", "editable"], encode: ["scTextEncode", "encode"], field: ["scText", "field"] }, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[scText]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }]; }, propDecorators: { editable: [{
+                type: Input,
+                args: ['scTextEditable']
+            }], encode: [{
+                type: Input,
+                args: ['scTextEncode']
+            }], field: [{
+                type: Input,
+                args: ['scText']
             }] } });
 
-/**
- * @param {T} value
- * @returns {Promise | Observable | any} resolved value
- */
-function wrapIntoObservable(value) {
-    if (isObservable(value)) {
-        return value;
-    }
-    if (ɵisPromise(value)) {
-        return from(Promise.resolve(value));
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return of(value);
+/**
+ * @param {T} value
+ * @returns {Promise | Observable | any} resolved value
+ */
+function wrapIntoObservable(value) {
+    if (isObservable(value)) {
+        return value;
+    }
+    if (ɵisPromise(value)) {
+        return from(Promise.resolve(value));
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return of(value);
 }
 
-/**
- * @param {Injector} injector
- * @param {ActivatedRoute} activatedRoute
- * @param {Router} router
- * @returns resolved data
- */
-function dataResolverFactory(injector, activatedRoute, router) {
-    /**
-     * @param {JssResolve<unknown> | Type<JssResolve<unknown>>} resolver
-     * @returns resolver instance
-     */
-    function getResolverInstance(resolver) {
-        return 'resolve' in resolver ? resolver : injector.get(resolver);
-    }
-    /**
-     * @param {ComponentFactoryResult} factory
-     * @returns {Array<[string, JssResolve<unknown>]>} resolver instances
-     */
-    function collectResolverInstances(factory) {
-        if (factory.resolve) {
-            const resolve = factory.resolve;
-            return Object.keys(factory.resolve).map((key) => [
-                key,
-                getResolverInstance(resolve[key]),
-            ]);
-        }
-        return [];
-    }
-    /**
-     * @param {JssResolve<unknown>} resolver
-     * @param {ComponentFactoryResult} factory
-     * @returns data
-     */
-    function _resolveData(resolver, factory) {
-        const data = resolver.resolve({
-            activatedRoute: activatedRoute.snapshot,
-            routerState: router.routerState.snapshot,
-            rendering: factory.componentDefinition,
-        });
-        const data$ = wrapIntoObservable(data);
-        return lastValueFrom(data$.pipe(take(1)));
-    }
-    return function resolveData(factories) {
-        return Promise.all(factories.map((factory) => {
-            const resolvers = collectResolverInstances(factory);
-            const pendingData = resolvers.map(([key, resolver]) => _resolveData(resolver, factory).then((data) => [key, data]));
-            return Promise.all(pendingData)
-                .then((allData) => allData.reduce((acc, [key, data]) => {
-                acc[key] = data;
-                return acc;
-            }, {}))
-                .then((data) => ({ factory, data }));
-        }));
-    };
+/**
+ * @param {Injector} injector
+ * @param {ActivatedRoute} activatedRoute
+ * @param {Router} router
+ * @returns resolved data
+ */
+function dataResolverFactory(injector, activatedRoute, router) {
+    /**
+     * @param {JssResolve<unknown> | Type<JssResolve<unknown>>} resolver
+     * @returns resolver instance
+     */
+    function getResolverInstance(resolver) {
+        return 'resolve' in resolver ? resolver : injector.get(resolver);
+    }
+    /**
+     * @param {ComponentFactoryResult} factory
+     * @returns {Array<[string, JssResolve<unknown>]>} resolver instances
+     */
+    function collectResolverInstances(factory) {
+        if (factory.resolve) {
+            const resolve = factory.resolve;
+            return Object.keys(factory.resolve).map((key) => [
+                key,
+                getResolverInstance(resolve[key]),
+            ]);
+        }
+        return [];
+    }
+    /**
+     * @param {JssResolve<unknown>} resolver
+     * @param {ComponentFactoryResult} factory
+     * @returns data
+     */
+    function _resolveData(resolver, factory) {
+        const data = resolver.resolve({
+            activatedRoute: activatedRoute.snapshot,
+            routerState: router.routerState.snapshot,
+            rendering: factory.componentDefinition,
+        });
+        const data$ = wrapIntoObservable(data);
+        return lastValueFrom(data$.pipe(take(1)));
+    }
+    return function resolveData(factories) {
+        return Promise.all(factories.map((factory) => {
+            const resolvers = collectResolverInstances(factory);
+            const pendingData = resolvers.map(([key, resolver]) => _resolveData(resolver, factory).then((data) => [key, data]));
+            return Promise.all(pendingData)
+                .then((allData) => allData.reduce((acc, [key, data]) => {
+                acc[key] = data;
+                return acc;
+            }, {}))
+                .then((data) => ({ factory, data }));
+        }));
+    };
 }
 
-/**
- * @param {boolean | string | string[] | UrlTree} value
- * @returns instance of value
- */
-function isRedirectValue(value) {
-    return value instanceof UrlTree || typeof value === 'string' || Array.isArray(value);
-}
-/**
- * Resolves components based on provided guards
- * @param {Injector} injector
- * @param {ActivatedRoute} activatedRoute
- * @param {Router} router
- * @returns {(factories: ComponentFactoryResult[]) => Promise<ComponentFactoryResult[]>} factory
- */
-function guardResolverFactory(injector, activatedRoute, router) {
-    /**
-     * @param {JssCanActivate | Type<JssCanActivate> | JssCanActivateFn} guard
-     * @returns resolved guard
-     */
-    function getGuardInstance(guard) {
-        if ('canActivate' in guard) {
-            return guard;
-        }
-        try {
-            // Class is provided
-            return injector.get(guard);
-        }
-        catch {
-            // Function is provided
-            return guard;
-        }
-    }
-    /**
-     * @param {ComponentFactoryResult} factory
-     * @returns {(JssCanActivate | JssCanActivateFn)[]} guard instances
-     */
-    function collectGuardInstances(factory) {
-        if (factory.canActivate) {
-            return Array.isArray(factory.canActivate)
-                ? factory.canActivate.map(getGuardInstance)
-                : [getGuardInstance(factory.canActivate)];
-        }
-        return [];
-    }
-    /**
-     *
-     * @param {JssCanActivate | JssCanActivateFn} guard
-     * @param {ComponentFactoryResult} factory
-     * @returns canActivate
-     */
-    function resolveGuard(guard, factory) {
-        const canActivate = 'canActivate' in guard ? guard.canActivate : guard;
-        const guardValue = canActivate({
-            activatedRoute: activatedRoute.snapshot,
-            routerState: router.routerState.snapshot,
-            rendering: factory.componentDefinition,
-        });
-        const canActivate$ = wrapIntoObservable(guardValue);
-        return lastValueFrom(canActivate$.pipe(take(1), mergeMap((value) => {
-            if (isRedirectValue(value)) {
-                return throwError(() => new Error(value.toString()));
-            }
-            else {
-                return of(value);
-            }
-        })));
-    }
-    return function resolveGuards(factories) {
-        const resolved = factories.map((factory) => {
-            const guards = collectGuardInstances(factory);
-            const pending = guards.map((guard) => resolveGuard(guard, factory));
-            return Promise.all(pending)
-                .then((canActive) => canActive.every((v) => v))
-                .then((canActivate) => ({
-                factory,
-                canActivate,
-            }));
-        });
-        return Promise.all(resolved).then((mapped) => mapped.filter((m) => m.canActivate).map((m) => m.factory));
-    };
+/**
+ * @param {boolean | string | string[] | UrlTree} value
+ * @returns instance of value
+ */
+function isRedirectValue(value) {
+    return value instanceof UrlTree || typeof value === 'string' || Array.isArray(value);
+}
+/**
+ * Resolves components based on provided guards
+ * @param {Injector} injector
+ * @param {ActivatedRoute} activatedRoute
+ * @param {Router} router
+ * @returns {(factories: ComponentFactoryResult[]) => Promise<ComponentFactoryResult[]>} factory
+ */
+function guardResolverFactory(injector, activatedRoute, router) {
+    /**
+     * @param {JssCanActivate | Type<JssCanActivate> | JssCanActivateFn} guard
+     * @returns resolved guard
+     */
+    function getGuardInstance(guard) {
+        if ('canActivate' in guard) {
+            return guard;
+        }
+        try {
+            // Class is provided
+            return injector.get(guard);
+        }
+        catch {
+            // Function is provided
+            return guard;
+        }
+    }
+    /**
+     * @param {ComponentFactoryResult} factory
+     * @returns {(JssCanActivate | JssCanActivateFn)[]} guard instances
+     */
+    function collectGuardInstances(factory) {
+        if (factory.canActivate) {
+            return Array.isArray(factory.canActivate)
+                ? factory.canActivate.map(getGuardInstance)
+                : [getGuardInstance(factory.canActivate)];
+        }
+        return [];
+    }
+    /**
+     *
+     * @param {JssCanActivate | JssCanActivateFn} guard
+     * @param {ComponentFactoryResult} factory
+     * @returns canActivate
+     */
+    function resolveGuard(guard, factory) {
+        const canActivate = 'canActivate' in guard ? guard.canActivate : guard;
+        const guardValue = canActivate({
+            activatedRoute: activatedRoute.snapshot,
+            routerState: router.routerState.snapshot,
+            rendering: factory.componentDefinition,
+        });
+        const canActivate$ = wrapIntoObservable(guardValue);
+        return lastValueFrom(canActivate$.pipe(take(1), mergeMap((value) => {
+            if (isRedirectValue(value)) {
+                return throwError(() => new Error(value.toString()));
+            }
+            else {
+                return of(value);
+            }
+        })));
+    }
+    return function resolveGuards(factories) {
+        const resolved = factories.map((factory) => {
+            const guards = collectGuardInstances(factory);
+            const pending = guards.map((guard) => resolveGuard(guard, factory));
+            return Promise.all(pending)
+                .then((canActive) => canActive.every((v) => v))
+                .then((canActivate) => ({
+                factory,
+                canActivate,
+            }));
+        });
+        return Promise.all(resolved).then((mapped) => mapped.filter((m) => m.canActivate).map((m) => m.factory));
+    };
 }
 
-class MissingComponentComponent {
-    rendering;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MissingComponentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+class MissingComponentComponent {
+    rendering;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MissingComponentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MissingComponentComponent, selector: "sc-missing-component", inputs: { rendering: "rendering" }, ngImport: i0, template: `
     <div
       style="background: darkorange; outline: 5px solid orange; padding: 10px; color: white; max-width: 500px;"
@@ -1482,12 +1482,12 @@ class MissingComponentComponent {
       <h2>{{ rendering.componentName }}</h2>
       <p>JSS component is missing Angular component implementation.</p>
     </div>
-  `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MissingComponentComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'sc-missing-component',
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: 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;"
@@ -1495,150 +1495,150 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
       <h2>{{ rendering.componentName }}</h2>
       <p>JSS component is missing Angular component implementation.</p>
     </div>
-  `,
-                }]
-        }], propDecorators: { rendering: [{
-                type: Input
+  `,
+                }]
+        }], propDecorators: { rendering: [{
+                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,
-                {
-                    provide: GUARD_RESOLVER,
-                    useFactory: guardResolverFactory,
-                    deps: [Injector, ActivatedRoute, Router],
-                },
-                {
-                    provide: DATA_RESOLVER,
-                    useFactory: dataResolverFactory,
-                    deps: [Injector, ActivatedRoute, Router],
-                },
-            ],
-        };
-    }
-    /**
-     * 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: 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: 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,
-            ],
-        };
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: JssModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: JssModule, declarations: [FileDirective,
-            ImageDirective,
-            LinkDirective,
-            RouterLinkDirective,
-            GenericLinkDirective,
-            DateDirective,
-            RenderEachDirective,
-            RenderEmptyDirective,
-            PlaceholderLoadingDirective,
-            RenderComponentComponent,
-            PlaceholderComponent,
-            RawComponent,
-            RichTextDirective,
-            TextDirective,
-            MissingComponentComponent,
-            HiddenRenderingComponent,
-            EditFrameComponent], imports: [CommonModule], exports: [FileDirective,
-            ImageDirective,
-            DateDirective,
-            LinkDirective,
-            RouterLinkDirective,
-            GenericLinkDirective,
-            RenderEachDirective,
-            RenderEmptyDirective,
-            RenderComponentComponent,
-            PlaceholderComponent,
-            HiddenRenderingComponent,
-            PlaceholderLoadingDirective,
-            RichTextDirective,
-            TextDirective,
-            EditFrameComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: JssModule, imports: [CommonModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: JssModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule],
-                    declarations: [
-                        FileDirective,
-                        ImageDirective,
-                        LinkDirective,
-                        RouterLinkDirective,
-                        GenericLinkDirective,
-                        DateDirective,
-                        RenderEachDirective,
-                        RenderEmptyDirective,
-                        PlaceholderLoadingDirective,
-                        RenderComponentComponent,
-                        PlaceholderComponent,
-                        RawComponent,
-                        RichTextDirective,
-                        TextDirective,
-                        MissingComponentComponent,
-                        HiddenRenderingComponent,
-                        EditFrameComponent,
-                    ],
-                    exports: [
-                        FileDirective,
-                        ImageDirective,
-                        DateDirective,
-                        LinkDirective,
-                        RouterLinkDirective,
-                        GenericLinkDirective,
-                        RenderEachDirective,
-                        RenderEmptyDirective,
-                        RenderComponentComponent,
-                        PlaceholderComponent,
-                        HiddenRenderingComponent,
-                        PlaceholderLoadingDirective,
-                        RichTextDirective,
-                        TextDirective,
-                        EditFrameComponent,
-                    ],
-                }]
+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,
+                {
+                    provide: GUARD_RESOLVER,
+                    useFactory: guardResolverFactory,
+                    deps: [Injector, ActivatedRoute, Router],
+                },
+                {
+                    provide: DATA_RESOLVER,
+                    useFactory: dataResolverFactory,
+                    deps: [Injector, ActivatedRoute, Router],
+                },
+            ],
+        };
+    }
+    /**
+     * 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: 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: 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,
+            ],
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: JssModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: JssModule, declarations: [FileDirective,
+            ImageDirective,
+            LinkDirective,
+            RouterLinkDirective,
+            GenericLinkDirective,
+            DateDirective,
+            RenderEachDirective,
+            RenderEmptyDirective,
+            PlaceholderLoadingDirective,
+            RenderComponentComponent,
+            PlaceholderComponent,
+            RawComponent,
+            RichTextDirective,
+            TextDirective,
+            MissingComponentComponent,
+            HiddenRenderingComponent,
+            EditFrameComponent], imports: [CommonModule], exports: [FileDirective,
+            ImageDirective,
+            DateDirective,
+            LinkDirective,
+            RouterLinkDirective,
+            GenericLinkDirective,
+            RenderEachDirective,
+            RenderEmptyDirective,
+            RenderComponentComponent,
+            PlaceholderComponent,
+            HiddenRenderingComponent,
+            PlaceholderLoadingDirective,
+            RichTextDirective,
+            TextDirective,
+            EditFrameComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: JssModule, imports: [CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: JssModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [
+                        FileDirective,
+                        ImageDirective,
+                        LinkDirective,
+                        RouterLinkDirective,
+                        GenericLinkDirective,
+                        DateDirective,
+                        RenderEachDirective,
+                        RenderEmptyDirective,
+                        PlaceholderLoadingDirective,
+                        RenderComponentComponent,
+                        PlaceholderComponent,
+                        RawComponent,
+                        RichTextDirective,
+                        TextDirective,
+                        MissingComponentComponent,
+                        HiddenRenderingComponent,
+                        EditFrameComponent,
+                    ],
+                    exports: [
+                        FileDirective,
+                        ImageDirective,
+                        DateDirective,
+                        LinkDirective,
+                        RouterLinkDirective,
+                        GenericLinkDirective,
+                        RenderEachDirective,
+                        RenderEmptyDirective,
+                        RenderComponentComponent,
+                        PlaceholderComponent,
+                        HiddenRenderingComponent,
+                        PlaceholderLoadingDirective,
+                        RichTextDirective,
+                        TextDirective,
+                        EditFrameComponent,
+                    ],
+                }]
         }] });
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { ComponentNameAndType, DYNAMIC_COMPONENT, DateDirective, EditFrameComponent, FileDirective, GenericLinkDirective, HiddenRenderingComponent, ImageDirective, JssModule, LinkDirective, PlaceholderComponent, PlaceholderLoadingDirective, RenderComponentComponent, RenderEachDirective, RenderEmptyDirective, RichTextDirective, RouterLinkDirective, TextDirective, isRawRendering };