@sitecore-jss/sitecore-jss-angular 22.10.0-canary.8 → 22.10.0

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

@@ -1,17 +1,16 @@
 import * as i0 from '@angular/core';
-import { Input, Directive, HostBinding, Component, InjectionToken, createNgModule, Inject, Injectable, EventEmitter, PLATFORM_ID, ViewContainerRef, TemplateRef, ViewChild, ContentChild, Output, ɵisPromise as _isPromise, Injector, NgModule } from '@angular/core';
+import { inject, ViewContainerRef, TemplateRef, Input, Directive, HostBinding, Component, Renderer2, ElementRef, InjectionToken, Injector, createNgModule, Injectable, TransferState, EventEmitter, KeyValueDiffers, ChangeDetectorRef, PLATFORM_ID, ViewChild, ContentChild, Output, ɵisPromise as _isPromise, NgModule } from '@angular/core';
 import { mediaApi } from '@sitecore-jss/sitecore-jss/media';
 export { mediaApi } from '@sitecore-jss/sitecore-jss/media';
 import { isFieldValueEmpty, EditMode, isDynamicPlaceholder, getDynamicPlaceholderPattern, LayoutServicePageState } from '@sitecore-jss/sitecore-jss/layout';
 export { EditMode, GraphQLLayoutService, LayoutServicePageState, RestLayoutService, getChildPlaceholder, getContentStylesheetLink, getFieldValue } from '@sitecore-jss/sitecore-jss/layout';
 import { MetadataKind, DEFAULT_PLACEHOLDER_UID, mapButtonToCommand, getJssPagesClientData } from '@sitecore-jss/sitecore-jss/editing';
 export { DefaultEditFrameButton, DefaultEditFrameButtons, handleEditorAnchors, isEditorActive, resetEditorChromes } from '@sitecore-jss/sitecore-jss/editing';
-import * as i1 from '@angular/router';
-import { RedirectCommand, UrlTree, ActivatedRoute, Router, ROUTES } from '@angular/router';
+import { Router, RedirectCommand, UrlTree, ActivatedRoute, ROUTES } from '@angular/router';
 import { isAbsoluteUrl, isServer } from '@sitecore-jss/sitecore-jss/utils';
 export { isServer } from '@sitecore-jss/sitecore-jss/utils';
-import * as i1$1 from '@angular/common';
-import { isPlatformServer, DOCUMENT, isPlatformBrowser, DatePipe, CommonModule } from '@angular/common';
+import * as i1 from '@angular/common';
+import { isPlatformServer, CommonModule, DatePipe, DOCUMENT, isPlatformBrowser } from '@angular/common';
 import { BehaviorSubject, Observable, isObservable, from, of, lastValueFrom } from 'rxjs';
 import { takeWhile, take, mergeMap } from 'rxjs/operators';
 import { constants, form, debug } from '@sitecore-jss/sitecore-jss';
@@ -25,14 +24,10 @@ 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;
-    }
+    viewContainer = inject(ViewContainerRef);
+    templateRef = inject(TemplateRef);
     ngOnChanges(changes) {
         if (changes.field) {
             if (!this.viewRef) {
@@ -57,13 +52,13 @@ class FileDirective {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FileDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: FileDirective, selector: "[scFile]", inputs: { field: ["scFile", "field"] }, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: FileDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: FileDirective, isStandalone: true, selector: "[scFile]", inputs: { field: ["scFile", "field"] }, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FileDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: FileDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[scFile]' }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }], propDecorators: { field: [{
+        }], propDecorators: { field: [{
                 type: Input,
                 args: ['scFile']
             }] } });
@@ -77,15 +72,14 @@ class FieldMetadataMarkerComponent {
     get metadataString() {
         return this.metadata ? JSON.stringify(this.metadata) : '';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FieldMetadataMarkerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FieldMetadataMarkerComponent, selector: "code[scFieldMetadataMarker]", inputs: { metadata: "metadata", kind: "kind" }, host: { properties: { "attr.type": "\"text/sitecore\"", "attr.chrometype": "\"field\"", "class": "\"scpm\"", "attr.kind": "this.kind" } }, ngImport: i0, template: '{{ metadataString }}', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: FieldMetadataMarkerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: FieldMetadataMarkerComponent, isStandalone: true, selector: "code[scFieldMetadataMarker]", inputs: { metadata: "metadata", kind: "kind" }, host: { properties: { "attr.type": "\"text/sitecore\"", "attr.chrometype": "\"field\"", "class": "\"scpm\"", "attr.kind": "this.kind" } }, ngImport: i0, template: '{{ metadataString }}', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FieldMetadataMarkerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: FieldMetadataMarkerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'code[scFieldMetadataMarker]',
                     template: '{{ metadataString }}',
-                    // eslint-disable-next-line @angular-eslint/no-host-metadata-property -- the only way to set static attributes
                     host: {
                         '[attr.type]': '"text/sitecore"',
                         '[attr.chrometype]': '"field"',
@@ -105,11 +99,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Base class that contains common functionality for the field directives.
  */
 class BaseFieldDirective {
-    viewContainer;
+    viewContainer = inject(ViewContainerRef);
     viewRef;
-    constructor(viewContainer) {
-        this.viewContainer = viewContainer;
-    }
     /**
      * Determines if directive should render the field as is
      * Returns true if we are in edit mode 'chromes' (field.editable is present) or field is not empty
@@ -145,19 +136,19 @@ class BaseFieldDirective {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BaseFieldDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: BaseFieldDirective, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BaseFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: BaseFieldDirective, isStandalone: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BaseFieldDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BaseFieldDirective, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }] });
+        }] });
 
 /**
  * Default component that will be rendered in pages when image field is empty.
  */
 class DefaultEmptyImageFieldEditingComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DefaultEmptyImageFieldEditingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DefaultEmptyImageFieldEditingComponent, selector: "[sc-default-empty-image-field-editing-placeholder]", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DefaultEmptyImageFieldEditingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: DefaultEmptyImageFieldEditingComponent, isStandalone: true, selector: "[sc-default-empty-image-field-editing-placeholder]", ngImport: i0, template: `
     <img
       alt=""
       src='data:image/svg+xml,%3Csvg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 240 240" style="enable-background:new 0 0 240 240;" xml:space="preserve"%3E%3Cstyle type="text/css"%3E .st0%7Bfill:none;%7D .st1%7Bfill:%23969696;%7D .st2%7Bfill:%23FFFFFF;%7D .st3%7Bfill:%23FFFFFF;stroke:%23FFFFFF;stroke-width:0.75;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg%3E%3Crect class="st0" width="240" height="240"/%3E%3Cg%3E%3Cg%3E%3Crect x="20" y="20" class="st1" width="200" height="200"/%3E%3C/g%3E%3Cg%3E%3Ccircle class="st2" cx="174" cy="67" r="14"/%3E%3Cpath class="st2" d="M174,54c7.17,0,13,5.83,13,13s-5.83,13-13,13s-13-5.83-13-13S166.83,54,174,54 M174,52 c-8.28,0-15,6.72-15,15s6.72,15,15,15s15-6.72,15-15S182.28,52,174,52L174,52z"/%3E%3C/g%3E%3Cpolyline class="st3" points="29.5,179.25 81.32,122.25 95.41,137.75 137.23,91.75 209.5,179.75 "/%3E%3C/g%3E%3C/g%3E%3C/svg%3E'
@@ -165,7 +156,7 @@ class DefaultEmptyImageFieldEditingComponent {
     />
   `, isInline: true, styles: [":host{min-width:48px;min-height:48px;max-width:400px;max-height:400px;cursor:pointer}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DefaultEmptyImageFieldEditingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DefaultEmptyImageFieldEditingComponent, decorators: [{
             type: Component,
             args: [{ selector: '[sc-default-empty-image-field-editing-placeholder]', template: `
     <img
@@ -177,9 +168,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }] });
 
 class ImageDirective extends BaseFieldDirective {
-    templateRef;
-    renderer;
-    elementRef;
     field;
     editable = true;
     /**
@@ -199,15 +187,11 @@ class ImageDirective extends BaseFieldDirective {
     /**
      * Default component to render in Pages in Metadata edit mode if field value is empty and emptyFieldEditingTemplate is not provided
      */
-    defaultFieldEditingComponent;
+    defaultFieldEditingComponent = DefaultEmptyImageFieldEditingComponent;
     inlineRef = null;
-    constructor(viewContainer, templateRef, renderer, elementRef) {
-        super(viewContainer);
-        this.templateRef = templateRef;
-        this.renderer = renderer;
-        this.elementRef = elementRef;
-        this.defaultFieldEditingComponent = DefaultEmptyImageFieldEditingComponent;
-    }
+    templateRef = inject(TemplateRef);
+    renderer = inject(Renderer2);
+    elementRef = inject(ElementRef);
     ngOnChanges(changes) {
         if (changes.field || changes.editable || changes.urlParams || changes.attrs) {
             this.viewContainer.clear();
@@ -317,13 +301,13 @@ class ImageDirective extends BaseFieldDirective {
         parentNode.removeChild(this.elementRef.nativeElement);
         this.inlineRef = span;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", 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: "18.2.13", type: ImageDirective, selector: "[scImage]", inputs: { field: ["scImage", "field"], editable: ["scImageEditable", "editable"], mediaUrlPrefix: ["scImageMediaUrlPrefix", "mediaUrlPrefix"], urlParams: ["scImageUrlParams", "urlParams"], attrs: ["scImageAttrs", "attrs"], emptyFieldEditingTemplate: ["scImageEmptyFieldEditingTemplate", "emptyFieldEditingTemplate"] }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ImageDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: ImageDirective, isStandalone: true, selector: "[scImage]", inputs: { field: ["scImage", "field"], editable: ["scImageEditable", "editable"], mediaUrlPrefix: ["scImageMediaUrlPrefix", "mediaUrlPrefix"], urlParams: ["scImageUrlParams", "urlParams"], attrs: ["scImageAttrs", "attrs"], emptyFieldEditingTemplate: ["scImageEmptyFieldEditingTemplate", "emptyFieldEditingTemplate"] }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ImageDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[scImage]' }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { field: [{
+        }], propDecorators: { field: [{
                 type: Input,
                 args: ['scImage']
             }], editable: [{
@@ -347,10 +331,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Default component that will be rendered in pages when field is empty; applies for text, richtext, date and link fields.
  */
 class DefaultEmptyFieldEditingComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DefaultEmptyFieldEditingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DefaultEmptyFieldEditingComponent, selector: "<span>[sc-default-empty-text-field-editing-placeholder]</span>", ngImport: i0, template: '[No text in field]', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DefaultEmptyFieldEditingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: DefaultEmptyFieldEditingComponent, isStandalone: true, selector: "<span>[sc-default-empty-text-field-editing-placeholder]</span>", ngImport: i0, template: '[No text in field]', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DefaultEmptyFieldEditingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DefaultEmptyFieldEditingComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '<span>[sc-default-empty-text-field-editing-placeholder]</span>',
@@ -359,9 +343,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }] });
 
 class LinkDirective extends BaseFieldDirective {
-    templateRef;
-    renderer;
-    elementRef;
     editable = true;
     attrs = {};
     field;
@@ -372,15 +353,11 @@ class LinkDirective extends BaseFieldDirective {
     /**
      * Default component to render in Pages in Metadata edit mode if field value is empty and emptyFieldEditingTemplate is not provided
      */
-    defaultFieldEditingComponent;
+    defaultFieldEditingComponent = DefaultEmptyFieldEditingComponent;
+    templateRef = inject(TemplateRef);
+    renderer = inject(Renderer2);
     inlineRef = null;
-    constructor(viewContainer, templateRef, renderer, elementRef) {
-        super(viewContainer);
-        this.templateRef = templateRef;
-        this.renderer = renderer;
-        this.elementRef = elementRef;
-        this.defaultFieldEditingComponent = DefaultEmptyFieldEditingComponent;
-    }
+    elementRef = inject(ElementRef);
     ngOnChanges(changes) {
         if (changes.field || changes.editable || changes.attrs) {
             this.viewContainer.clear();
@@ -486,13 +463,13 @@ class LinkDirective extends BaseFieldDirective {
         view.destroy();
         return attrs;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", 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: "18.2.13", type: LinkDirective, selector: "[scLink]", inputs: { editable: ["scLinkEditable", "editable"], attrs: ["scLinkAttrs", "attrs"], field: ["scLink", "field"], emptyFieldEditingTemplate: ["scLinkEmptyFieldEditingTemplate", "emptyFieldEditingTemplate"] }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LinkDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: LinkDirective, isStandalone: true, selector: "[scLink]", inputs: { editable: ["scLinkEditable", "editable"], attrs: ["scLinkAttrs", "attrs"], field: ["scLink", "field"], emptyFieldEditingTemplate: ["scLinkEmptyFieldEditingTemplate", "emptyFieldEditingTemplate"] }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LinkDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: LinkDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[scLink]' }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { editable: [{
+        }], propDecorators: { editable: [{
                 type: Input,
                 args: ['scLinkEditable']
             }], attrs: [{
@@ -507,7 +484,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 class RouterLinkDirective extends LinkDirective {
-    router;
     editable = true;
     attrs = {};
     field;
@@ -515,10 +491,7 @@ class RouterLinkDirective extends LinkDirective {
      * Custom template to render in Pages in Metadata edit mode if field value is empty
      */
     emptyFieldEditingTemplate;
-    constructor(viewContainer, templateRef, renderer, elementRef, router) {
-        super(viewContainer, templateRef, renderer, elementRef);
-        this.router = router;
-    }
+    router = inject(Router);
     renderTemplate(props, linkText) {
         const viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
         viewRef.rootNodes.forEach((node) => {
@@ -539,13 +512,13 @@ class RouterLinkDirective extends LinkDirective {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", 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: "18.2.13", type: RouterLinkDirective, selector: "[scRouterLink]", inputs: { editable: ["scRouterLinkEditable", "editable"], attrs: ["scRouterLinkAttrs", "attrs"], field: ["scRouterLink", "field"], emptyFieldEditingTemplate: ["scRouterLinkEmptyFieldEditingTemplate", "emptyFieldEditingTemplate"] }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: RouterLinkDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: RouterLinkDirective, isStandalone: true, selector: "[scRouterLink]", inputs: { editable: ["scRouterLinkEditable", "editable"], attrs: ["scRouterLinkAttrs", "attrs"], field: ["scRouterLink", "field"], emptyFieldEditingTemplate: ["scRouterLinkEmptyFieldEditingTemplate", "emptyFieldEditingTemplate"] }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RouterLinkDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: RouterLinkDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[scRouterLink]' }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.Router }], propDecorators: { editable: [{
+        }], propDecorators: { editable: [{
                 type: Input,
                 args: ['scRouterLinkEditable']
             }], attrs: [{
@@ -560,7 +533,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 class GenericLinkDirective extends LinkDirective {
-    router;
     editable = true;
     attrs = {};
     field;
@@ -569,10 +541,7 @@ class GenericLinkDirective extends LinkDirective {
      * Custom template to render in Pages in Metadata edit mode if field value is empty
      */
     emptyFieldEditingTemplate;
-    constructor(viewContainer, templateRef, renderer, elementRef, router) {
-        super(viewContainer, templateRef, renderer, elementRef);
-        this.router = router;
-    }
+    router = inject(Router);
     renderTemplate(props, linkText) {
         const viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
         viewRef.rootNodes.forEach((node) => {
@@ -606,13 +575,13 @@ class GenericLinkDirective extends LinkDirective {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", 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: "18.2.13", type: GenericLinkDirective, selector: "[scGenericLink]", inputs: { editable: ["scGenericLinkEditable", "editable"], attrs: ["scGenericLinkAttrs", "attrs"], field: ["scGenericLink", "field"], extras: ["scGenericLinkExtras", "extras"], emptyFieldEditingTemplate: ["scGenericLinkEmptyFieldEditingTemplate", "emptyFieldEditingTemplate"] }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GenericLinkDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: GenericLinkDirective, isStandalone: true, selector: "[scGenericLink]", inputs: { editable: ["scGenericLinkEditable", "editable"], attrs: ["scGenericLinkAttrs", "attrs"], field: ["scGenericLink", "field"], extras: ["scGenericLinkExtras", "extras"], emptyFieldEditingTemplate: ["scGenericLinkEmptyFieldEditingTemplate", "emptyFieldEditingTemplate"] }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GenericLinkDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: GenericLinkDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[scGenericLink]' }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.Router }], propDecorators: { editable: [{
+        }], propDecorators: { editable: [{
                 type: Input,
                 args: ['scGenericLinkEditable']
             }], attrs: [{
@@ -671,67 +640,10 @@ 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 PlaceholderLoadingDirective {
-    templateRef;
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PlaceholderLoadingDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: PlaceholderLoadingDirective, selector: "[scPlaceholderLoading]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PlaceholderLoadingDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[scPlaceholderLoading]',
-                }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
-
-class RenderEachDirective {
-    templateRef;
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RenderEachDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: RenderEachDirective, selector: "[renderEach]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RenderEachDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[renderEach]',
-                }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
-
-class RenderEmptyDirective {
-    templateRef;
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RenderEmptyDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: RenderEmptyDirective, selector: "[renderEmpty]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RenderEmptyDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[renderEmpty]',
-                }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
-
-/**
- * @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;
-    }
+    renderer = inject(Renderer2);
+    elementRef = inject(ElementRef);
     ngOnInit() {
         const el = this.renderer.createElement(this.rendering.name);
         const contents = this.renderer.createText(this.rendering.contents || '');
@@ -748,29 +660,34 @@ class RawComponent {
         this.renderer.insertBefore(parentNode, el, this.elementRef.nativeElement);
         parentNode.removeChild(this.elementRef.nativeElement);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RawComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RawComponent, selector: "sc-raw", inputs: { rendering: "rendering" }, ngImport: i0, template: '', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: RawComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: RawComponent, isStandalone: true, selector: "sc-raw", inputs: { rendering: "rendering" }, ngImport: i0, template: '', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RawComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: RawComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sc-raw',
                     template: '',
                 }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { rendering: [{
+        }], propDecorators: { rendering: [{
                 type: Input
             }] } });
 
+/**
+ * @param {HtmlElementRendering | ComponentRendering} rendering
+ */
+function isRawRendering(rendering) {
+    return (!rendering.componentName &&
+        rendering.name !== undefined);
+}
+
 class JssComponentFactoryService {
-    injector;
-    components;
-    lazyComponents;
     componentMap;
     lazyComponentMap;
-    constructor(injector, components, lazyComponents) {
-        this.injector = injector;
-        this.components = components;
-        this.lazyComponents = lazyComponents;
+    injector = inject(Injector);
+    components = inject(PLACEHOLDER_COMPONENTS);
+    lazyComponents = inject(PLACEHOLDER_LAZY_COMPONENTS);
+    constructor() {
         this.componentMap = new Map();
         this.lazyComponentMap = new Map();
         this.components.forEach((c) => this.componentMap.set(c.name, c));
@@ -846,18 +763,48 @@ class JssComponentFactoryService {
         }
         return rendering;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", 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: "18.2.13", ngImport: i0, type: JssComponentFactoryService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: JssComponentFactoryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: JssComponentFactoryService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: JssComponentFactoryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: JssComponentFactoryService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [PLACEHOLDER_COMPONENTS]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [PLACEHOLDER_LAZY_COMPONENTS]
-                }] }] });
+        }], ctorParameters: () => [] });
+
+class PlaceholderLoadingDirective {
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: PlaceholderLoadingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: PlaceholderLoadingDirective, isStandalone: true, selector: "[scPlaceholderLoading]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: PlaceholderLoadingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[scPlaceholderLoading]',
+                }]
+        }] });
+
+class RenderEachDirective {
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: RenderEachDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: RenderEachDirective, isStandalone: true, selector: "[renderEach]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: RenderEachDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[renderEach]',
+                }]
+        }] });
+
+class RenderEmptyDirective {
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: RenderEmptyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: RenderEmptyDirective, isStandalone: true, selector: "[renderEmpty]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: RenderEmptyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[renderEmpty]',
+                }]
+        }] });
 
 class BaseJssState {
     sitecore;
@@ -868,10 +815,9 @@ class BaseJssState {
  * Referenced by the SDK to get the current state of the app.
  */
 class JssStateService {
-    transferState;
+    transferState = inject(TransferState);
     _state;
-    constructor(transferState) {
-        this.transferState = transferState;
+    constructor() {
         this._state = new BehaviorSubject({});
     }
     /**
@@ -893,27 +839,15 @@ class JssStateService {
     setState(newState) {
         this._state.next(newState);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: JssStateService, deps: [{ token: i0.TransferState }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: JssStateService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: JssStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: JssStateService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: JssStateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: JssStateService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i0.TransferState }] });
+        }], ctorParameters: () => [] });
 
 /* eslint-disable @angular-eslint/no-conflicting-lifecycle */
 class PlaceholderComponent {
-    differs;
-    componentFactory;
-    changeDetectorRef;
-    elementRef;
-    renderer;
-    router;
-    missingComponentComponent;
-    hiddenRenderingComponent;
-    guardResolver;
-    dataResolver;
-    platformId;
-    jssState;
     name;
     rendering;
     renderings;
@@ -936,19 +870,19 @@ class PlaceholderComponent {
     destroyed = false;
     parentStyleAttribute = '';
     contextSubscription;
-    constructor(differs, componentFactory, changeDetectorRef, elementRef, renderer, router, missingComponentComponent, hiddenRenderingComponent, guardResolver, dataResolver, platformId, jssState) {
-        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;
-        this.jssState = jssState;
+    differs = inject(KeyValueDiffers);
+    componentFactory = inject(JssComponentFactoryService);
+    changeDetectorRef = inject(ChangeDetectorRef);
+    elementRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+    router = inject(Router);
+    missingComponentComponent = inject(PLACEHOLDER_MISSING_COMPONENT_COMPONENT);
+    hiddenRenderingComponent = inject(PLACEHOLDER_HIDDEN_RENDERING_COMPONENT);
+    guardResolver = inject(GUARD_RESOLVER);
+    dataResolver = inject(DATA_RESOLVER);
+    platformId = inject(PLATFORM_ID);
+    jssState = inject(JssStateService);
+    constructor() {
         this.contextSubscription = this.jssState.state.subscribe(({ sitecore }) => {
             this.metadataMode = sitecore?.context.editMode === EditMode.Metadata;
         });
@@ -1208,12 +1142,11 @@ class PlaceholderComponent {
         }
         this._componentInstances.push(componentInstance);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", 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 }, { token: JssStateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PlaceholderComponent, selector: "sc-placeholder,[sc-placeholder]", inputs: { name: "name", rendering: "rendering", renderings: "renderings", outputs: "outputs", clientOnly: "clientOnly", inputs: "inputs" }, outputs: { loaded: "loaded", failed: "failed" }, 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 }, { propertyName: "metadataNode", first: true, predicate: ["metadataCodeBlock"], descendants: true, read: TemplateRef }], usesOnChanges: true, ngImport: i0, template: `
-    <ng-template
-      *ngIf="isLoading"
-      [ngTemplateOutlet]="placeholderLoading?.templateRef"
-    ></ng-template>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: PlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: PlaceholderComponent, isStandalone: true, selector: "sc-placeholder,[sc-placeholder]", inputs: { name: "name", rendering: "rendering", renderings: "renderings", outputs: "outputs", clientOnly: "clientOnly", inputs: "inputs" }, outputs: { loaded: "loaded", failed: "failed" }, 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 }, { propertyName: "metadataNode", first: true, predicate: ["metadataCodeBlock"], descendants: true, read: TemplateRef }], usesOnChanges: true, ngImport: i0, template: `
+    @if (isLoading) {
+    <ng-template [ngTemplateOutlet]="placeholderLoading?.templateRef"></ng-template>
+    }
     <ng-template
       #metadataCodeBlock
       let-kind="kind"
@@ -1229,34 +1162,31 @@ class PlaceholderComponent {
       ></code
     ></ng-template>
 
+    @if (metadataMode && metadataCodeBlock) {
     <ng-container
-      *ngTemplateOutlet="
-        metadataMode && metadataCodeBlock;
-        context: { kind: 'open', chromeType: 'placeholder' }
-      "
+      *ngTemplateOutlet="metadataCodeBlock; context: { kind: 'open', chromeType: 'placeholder' }"
     >
     </ng-container>
+    }
 
     <ng-template #view></ng-template>
 
+    @if (metadataMode && metadataCodeBlock) {
     <ng-container
-      *ngTemplateOutlet="
-        metadataMode && metadataCodeBlock;
-        context: { kind: 'close', chromeType: 'placeholder' }
-      "
+      *ngTemplateOutlet="metadataCodeBlock; context: { kind: 'close', chromeType: 'placeholder' }"
     >
     </ng-container>
-  `, 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"] }] });
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PlaceholderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: PlaceholderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sc-placeholder,[sc-placeholder]',
                     template: `
-    <ng-template
-      *ngIf="isLoading"
-      [ngTemplateOutlet]="placeholderLoading?.templateRef"
-    ></ng-template>
+    @if (isLoading) {
+    <ng-template [ngTemplateOutlet]="placeholderLoading?.templateRef"></ng-template>
+    }
     <ng-template
       #metadataCodeBlock
       let-kind="kind"
@@ -1272,41 +1202,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
       ></code
     ></ng-template>
 
+    @if (metadataMode && metadataCodeBlock) {
     <ng-container
-      *ngTemplateOutlet="
-        metadataMode && metadataCodeBlock;
-        context: { kind: 'open', chromeType: 'placeholder' }
-      "
+      *ngTemplateOutlet="metadataCodeBlock; context: { kind: 'open', chromeType: 'placeholder' }"
     >
     </ng-container>
+    }
 
     <ng-template #view></ng-template>
 
+    @if (metadataMode && metadataCodeBlock) {
     <ng-container
-      *ngTemplateOutlet="
-        metadataMode && metadataCodeBlock;
-        context: { kind: 'close', chromeType: 'placeholder' }
-      "
+      *ngTemplateOutlet="metadataCodeBlock; context: { kind: 'close', chromeType: 'placeholder' }"
     >
     </ng-container>
+    }
   `,
+                    imports: [CommonModule],
                 }]
-        }], ctorParameters: () => [{ 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: undefined, decorators: [{
-                    type: Inject,
-                    args: [PLATFORM_ID]
-                }] }, { type: JssStateService }], propDecorators: { name: [{
+        }], ctorParameters: () => [], propDecorators: { name: [{
                 type: Input
             }], rendering: [{
                 type: Input
@@ -1343,10 +1257,10 @@ 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: flex; justify-content: center; align-items: center; padding: 30px; color: #aaa;';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HiddenRenderingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HiddenRenderingComponent, selector: "sc-hidden-rendering", host: { properties: { "style": "this.style" } }, ngImport: i0, template: 'The component is hidden', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: HiddenRenderingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: HiddenRenderingComponent, isStandalone: true, selector: "sc-hidden-rendering", host: { properties: { "style": "this.style" } }, ngImport: i0, template: 'The component is hidden', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HiddenRenderingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: HiddenRenderingComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sc-hidden-rendering',
@@ -1362,20 +1276,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * 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;
-    }
+    differs = inject(KeyValueDiffers);
+    componentFactory = inject(JssComponentFactoryService);
+    missingComponentComponent = inject(PLACEHOLDER_MISSING_COMPONENT_COMPONENT);
     set inputs(value) {
         this._inputs = value;
         if (!this._differ && value) {
@@ -1428,12 +1337,12 @@ class RenderComponentComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", 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: "18.2.13", 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: RenderComponentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: RenderComponentComponent, isStandalone: true, 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: "18.2.13", ngImport: i0, type: RenderComponentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: RenderComponentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sc-render-component',
@@ -1441,10 +1350,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
     <ng-template #view></ng-template>
   `,
                 }]
-        }], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: JssComponentFactoryService }, { type: i0.Type, decorators: [{
-                    type: Inject,
-                    args: [PLACEHOLDER_MISSING_COMPONENT_COMPONENT]
-                }] }], propDecorators: { rendering: [{
+        }], propDecorators: { rendering: [{
                 type: Input
             }], outputs: [{
                 type: Input
@@ -1456,8 +1362,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 class DateDirective extends BaseFieldDirective {
-    templateRef;
-    datePipe;
     format;
     timezone;
     locale;
@@ -1470,13 +1374,9 @@ class DateDirective extends BaseFieldDirective {
     /**
      * Default component to render in Pages in Metadata edit mode if field value is empty and emptyFieldEditingTemplate is not provided
      */
-    defaultFieldEditingComponent;
-    constructor(viewContainer, templateRef, datePipe) {
-        super(viewContainer);
-        this.templateRef = templateRef;
-        this.datePipe = datePipe;
-        this.defaultFieldEditingComponent = DefaultEmptyFieldEditingComponent;
-    }
+    defaultFieldEditingComponent = DefaultEmptyFieldEditingComponent;
+    templateRef = inject(TemplateRef);
+    datePipe = inject(DatePipe);
     ngOnChanges(changes) {
         if (changes.field || changes.format) {
             this.viewContainer.clear();
@@ -1503,15 +1403,15 @@ class DateDirective extends BaseFieldDirective {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", 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: "18.2.13", type: DateDirective, selector: "[scDate]", inputs: { format: ["scDateFormat", "format"], timezone: ["scDateTimezone", "timezone"], locale: ["scDateLocale", "locale"], editable: ["scDateEditable", "editable"], field: ["scDate", "field"], emptyFieldEditingTemplate: ["scDateEmptyFieldEditingTemplate", "emptyFieldEditingTemplate"] }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: DateDirective, isStandalone: true, selector: "[scDate]", inputs: { format: ["scDateFormat", "format"], timezone: ["scDateTimezone", "timezone"], locale: ["scDateLocale", "locale"], editable: ["scDateEditable", "editable"], field: ["scDate", "field"], emptyFieldEditingTemplate: ["scDateEmptyFieldEditingTemplate", "emptyFieldEditingTemplate"] }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: DateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[scDate]',
                 }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: i1$1.DatePipe }], propDecorators: { format: [{
+        }], propDecorators: { format: [{
                 type: Input,
                 args: ['scDateFormat']
             }], timezone: [{
@@ -1573,25 +1473,22 @@ class EditFrameComponent {
         });
         return JSON.stringify(chromeData);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditFrameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: EditFrameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: EditFrameComponent, isStandalone: true, 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>
     </ng-template>
-    <div
-      *ngIf="isEditing; else elseBlock"
-      [class]="frameProps.class"
-      [attr.sc_item]="frameProps.sc_item"
-    >
+    @if (isEditing) {
+    <div [class]="frameProps.class" [attr.sc_item]="frameProps.sc_item">
       <span class="scChromeData">{{ chromeData }}</span>
       <ng-container *ngTemplateOutlet="childContent"></ng-container>
     </div>
-    <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"] }] });
+    } @else {
+    <ng-container *ngTemplateOutlet="childContent"></ng-container>
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditFrameComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: EditFrameComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sc-edit-frame,[sc-edit-frame]',
@@ -1599,18 +1496,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
     <ng-template #childContent>
       <ng-content></ng-content>
     </ng-template>
-    <div
-      *ngIf="isEditing; else elseBlock"
-      [class]="frameProps.class"
-      [attr.sc_item]="frameProps.sc_item"
-    >
+    @if (isEditing) {
+    <div [class]="frameProps.class" [attr.sc_item]="frameProps.sc_item">
       <span class="scChromeData">{{ chromeData }}</span>
       <ng-container *ngTemplateOutlet="childContent"></ng-container>
     </div>
-    <ng-template #elseBlock>
-      <ng-container *ngTemplateOutlet="childContent"></ng-container>
-    </ng-template>
+    } @else {
+    <ng-container *ngTemplateOutlet="childContent"></ng-container>
+    }
   `,
+                    imports: [CommonModule],
                 }]
         }], propDecorators: { dataSource: [{
                 type: Input
@@ -1633,14 +1528,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Only renders scripts when Metadata mode is used.
  */
 class EditingScriptsComponent {
-    renderer;
-    stateService;
-    document;
-    constructor(renderer, stateService, document) {
-        this.renderer = renderer;
-        this.stateService = stateService;
-        this.document = document;
-    }
+    renderer = inject(Renderer2);
+    stateService = inject(JssStateService);
+    document = inject(DOCUMENT);
     ngOnInit() {
         const state = this.stateService.stateValue;
         const { pageState, editMode, clientData, clientScripts } = state.sitecore?.context || {};
@@ -1666,19 +1556,16 @@ class EditingScriptsComponent {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditingScriptsComponent, deps: [{ token: i0.Renderer2 }, { token: JssStateService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EditingScriptsComponent, selector: "sc-editing-scripts", ngImport: i0, template: '', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: EditingScriptsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: EditingScriptsComponent, isStandalone: true, selector: "sc-editing-scripts", ngImport: i0, template: '', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditingScriptsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: EditingScriptsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sc-editing-scripts',
                     template: '',
                 }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: JssStateService }, { type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }] });
+        }] });
 
 /**
  * Injection token for the Sitecore Edge configuration.
@@ -1701,10 +1588,6 @@ const mockFormModule = (formModule) => {
  * It fetches the form markup from the Sitecore Edge service and renders it in the component's template.
  */
 class FormComponent {
-    edgeConfig;
-    platformId;
-    elRef;
-    jssState;
     /**
      * The rendering data for the component
      */
@@ -1712,12 +1595,10 @@ class FormComponent {
     hasError = false;
     isEditing = false;
     contextSubscription;
-    constructor(edgeConfig, platformId, elRef, jssState) {
-        this.edgeConfig = edgeConfig;
-        this.platformId = platformId;
-        this.elRef = elRef;
-        this.jssState = jssState;
-    }
+    edgeConfig = inject(EDGE_CONFIG);
+    platformId = inject(PLATFORM_ID);
+    elRef = inject(ElementRef);
+    jssState = inject(JssStateService);
     ngOnInit() {
         if (isPlatformBrowser(this.platformId)) {
             this.loadForm();
@@ -1755,57 +1636,17 @@ class FormComponent {
             this.hasError = true;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormComponent, deps: [{ token: EDGE_CONFIG }, { token: PLATFORM_ID }, { token: i0.ElementRef }, { token: JssStateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormComponent, selector: "app-form", inputs: { rendering: "rendering" }, ngImport: i0, template: `
-    <ng-container *ngIf="isEditing">
-      <ng-container *ngIf="!rendering.params.FormId">
-        <div
-          style="background: darkorange; outline: 5px solid orange; padding: 10px; color: white; max-width: 500px;"
-        >
-          <h2>{{ rendering.componentName }}</h2>
-          <p>JSS component is missing FormId rendering parameter.</p>
-        </div>
-      </ng-container>
-      <ng-container *ngIf="hasError">
-        <div class="sc-jss-placeholder-error">There was a problem loading this section</div>
-      </ng-container>
-    </ng-container>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: FormComponent, isStandalone: true, selector: "app-form", inputs: { rendering: "rendering" }, ngImport: i0, template: "@if (isEditing) {\r\n  @if (!rendering.params.FormId) {\r\n    <div\r\n      style=\"background: darkorange; outline: 5px solid orange; padding: 10px; color: white; max-width: 500px;\"\r\n    >\r\n      <h2>{{ rendering.componentName }}</h2>\r\n        <p>JSS component is missing FormId rendering parameter.</p>\r\n      </div>\r\n  }\r\n  @if (hasError) {\r\n    <div class=\"sc-jss-placeholder-error\">There was a problem loading this section</div>\r\n  }\r\n}\r\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'app-form',
-                    template: `
-    <ng-container *ngIf="isEditing">
-      <ng-container *ngIf="!rendering.params.FormId">
-        <div
-          style="background: darkorange; outline: 5px solid orange; padding: 10px; color: white; max-width: 500px;"
-        >
-          <h2>{{ rendering.componentName }}</h2>
-          <p>JSS component is missing FormId rendering parameter.</p>
-        </div>
-      </ng-container>
-      <ng-container *ngIf="hasError">
-        <div class="sc-jss-placeholder-error">There was a problem loading this section</div>
-      </ng-container>
-    </ng-container>
-  `,
-                }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [EDGE_CONFIG]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [PLATFORM_ID]
-                }] }, { type: i0.ElementRef }, { type: JssStateService }], propDecorators: { rendering: [{
+            args: [{ selector: 'app-form', template: "@if (isEditing) {\r\n  @if (!rendering.params.FormId) {\r\n    <div\r\n      style=\"background: darkorange; outline: 5px solid orange; padding: 10px; color: white; max-width: 500px;\"\r\n    >\r\n      <h2>{{ rendering.componentName }}</h2>\r\n        <p>JSS component is missing FormId rendering parameter.</p>\r\n      </div>\r\n  }\r\n  @if (hasError) {\r\n    <div class=\"sc-jss-placeholder-error\">There was a problem loading this section</div>\r\n  }\r\n}\r\n" }]
+        }], propDecorators: { rendering: [{
                 type: Input
             }] } });
 
 class RichTextDirective extends BaseFieldDirective {
-    templateRef;
-    renderer;
-    router;
     editable = true;
     field;
     /**
@@ -1815,14 +1656,10 @@ class RichTextDirective extends BaseFieldDirective {
     /**
      * Default component to render in Pages in Metadata edit mode if field value is empty and emptyFieldEditingTemplate is not provided
      */
-    defaultFieldEditingComponent;
-    constructor(viewContainer, templateRef, renderer, router) {
-        super(viewContainer);
-        this.templateRef = templateRef;
-        this.renderer = renderer;
-        this.router = router;
-        this.defaultFieldEditingComponent = DefaultEmptyFieldEditingComponent;
-    }
+    defaultFieldEditingComponent = DefaultEmptyFieldEditingComponent;
+    templateRef = inject(TemplateRef);
+    renderer = inject(Renderer2);
+    router = inject(Router);
     ngOnChanges(changes) {
         if (changes.field || changes.editable) {
             this.viewContainer.clear();
@@ -1859,15 +1696,15 @@ class RichTextDirective extends BaseFieldDirective {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", 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: "18.2.13", type: RichTextDirective, selector: "[scRichText]", inputs: { editable: ["scRichTextEditable", "editable"], field: ["scRichText", "field"], emptyFieldEditingTemplate: ["scRichTextEmptyFieldEditingTemplate", "emptyFieldEditingTemplate"] }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: RichTextDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: RichTextDirective, isStandalone: true, selector: "[scRichText]", inputs: { editable: ["scRichTextEditable", "editable"], field: ["scRichText", "field"], emptyFieldEditingTemplate: ["scRichTextEmptyFieldEditingTemplate", "emptyFieldEditingTemplate"] }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RichTextDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: RichTextDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[scRichText]',
                 }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: i0.Renderer2 }, { type: i1.Router }], propDecorators: { editable: [{
+        }], propDecorators: { editable: [{
                 type: Input,
                 args: ['scRichTextEditable']
             }], field: [{
@@ -1879,7 +1716,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 class TextDirective extends BaseFieldDirective {
-    templateRef;
     editable = true;
     encode = true;
     field;
@@ -1890,12 +1726,8 @@ class TextDirective extends BaseFieldDirective {
     /**
      * Default component to render in Pages in Metadata edit mode if field value is empty and emptyFieldEditingTemplate is not provided
      */
-    defaultFieldEditingComponent;
-    constructor(viewContainer, templateRef) {
-        super(viewContainer);
-        this.templateRef = templateRef;
-        this.defaultFieldEditingComponent = DefaultEmptyFieldEditingComponent;
-    }
+    defaultFieldEditingComponent = DefaultEmptyFieldEditingComponent;
+    templateRef = inject(TemplateRef);
     ngOnChanges(changes) {
         if (changes.field || changes.editable || changes.encode) {
             this.viewContainer.clear();
@@ -1927,15 +1759,15 @@ class TextDirective extends BaseFieldDirective {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: TextDirective, selector: "[scText]", inputs: { editable: ["scTextEditable", "editable"], encode: ["scTextEncode", "encode"], field: ["scText", "field"], emptyFieldEditingTemplate: ["scTextEmptyFieldEditingTemplate", "emptyFieldEditingTemplate"] }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TextDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: TextDirective, isStandalone: true, selector: "[scText]", inputs: { editable: ["scTextEditable", "editable"], encode: ["scTextEncode", "encode"], field: ["scText", "field"], emptyFieldEditingTemplate: ["scTextEmptyFieldEditingTemplate", "emptyFieldEditingTemplate"] }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TextDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[scText]',
                 }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }], propDecorators: { editable: [{
+        }], propDecorators: { editable: [{
                 type: Input,
                 args: ['scTextEditable']
             }], encode: [{
@@ -2116,8 +1948,8 @@ function guardResolverFactory(injector, activatedRoute, router) {
 
 class MissingComponentComponent {
     rendering;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MissingComponentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MissingComponentComponent, selector: "sc-missing-component", inputs: { rendering: "rendering" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: MissingComponentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: MissingComponentComponent, isStandalone: true, 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;"
     >
@@ -2126,7 +1958,7 @@ class MissingComponentComponent {
     </div>
   `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MissingComponentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: MissingComponentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sc-missing-component',
@@ -2203,12 +2035,14 @@ class JssModule {
             ],
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: JssModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: JssModule, declarations: [FileDirective,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: JssModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: JssModule, imports: [CommonModule,
+            FileDirective,
             ImageDirective,
             LinkDirective,
             RouterLinkDirective,
             GenericLinkDirective,
+            TextDirective,
             DateDirective,
             RenderEachDirective,
             RenderEmptyDirective,
@@ -2217,12 +2051,11 @@ class JssModule {
             PlaceholderComponent,
             RawComponent,
             RichTextDirective,
-            TextDirective,
             MissingComponentComponent,
             HiddenRenderingComponent,
             EditFrameComponent,
             EditingScriptsComponent,
-            FormComponent], imports: [CommonModule], exports: [FileDirective,
+            FormComponent], exports: [FileDirective,
             ImageDirective,
             DateDirective,
             LinkDirective,
@@ -2239,18 +2072,21 @@ class JssModule {
             EditFrameComponent,
             EditingScriptsComponent,
             FormComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: JssModule, imports: [CommonModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: JssModule, imports: [CommonModule,
+            PlaceholderComponent,
+            EditFrameComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: JssModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: JssModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule],
-                    declarations: [
+                    imports: [
+                        CommonModule,
                         FileDirective,
                         ImageDirective,
                         LinkDirective,
                         RouterLinkDirective,
                         GenericLinkDirective,
+                        TextDirective,
                         DateDirective,
                         RenderEachDirective,
                         RenderEmptyDirective,
@@ -2259,7 +2095,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         PlaceholderComponent,
                         RawComponent,
                         RichTextDirective,
-                        TextDirective,
                         MissingComponentComponent,
                         HiddenRenderingComponent,
                         EditFrameComponent,