@searchstax-inc/searchstudio-ux-angular 4.1.72 → 4.2.0

package/fesm2022/searchstax-inc-searchstudio-ux-angular.mjs

@@ -1,22 +1,37 @@
 import * as i0 from '@angular/core';
 import { Injectable, EventEmitter, Output, Input, Component, ViewChild, NgModule } from '@angular/core';
 import { Searchstax } from '@searchstax-inc/searchstudio-ux-js';
-import * as i1 from '@angular/common';
+import { ReplaySubject } from 'rxjs';
+import { take } from 'rxjs/operators';
+import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i2 from '@angular/forms';
+import * as i2$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 
 class StoreServiceService {
     constructor() {
-        this.searchstax = new Searchstax('vue');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StoreServiceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StoreServiceService, providedIn: 'root' }); }
+        this.searchstax = new Searchstax(3 /* ISearchstaxRenderEngine.angular */);
+        /**
+         * `Searchstax.initialize()` assigns a fresh `dataLayer`. Widgets must not
+         * subscribe before that runs, or they listen to stale observables and never
+         * see search results (projection order can run child `ngOnInit` first).
+         */
+        this.dataLayerReady$ = new ReplaySubject(1);
+    }
+    /** Called from `SearchstaxWrapper` immediately after `initialize()`. */
+    notifyDataLayerReady() {
+        this.dataLayerReady$.next();
+    }
+    whenDataLayerReady(callback) {
+        this.dataLayerReady$.pipe(take(1)).subscribe(() => callback());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: StoreServiceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: StoreServiceService, providedIn: "root" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StoreServiceService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: StoreServiceService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: "root",
                 }]
         }], ctorParameters: () => [] });
 
@@ -61,17 +76,18 @@ class SearchstaxWrapper {
             questionURL: this.questionURL
         });
         this.initialized.emit(this.storeServiceService.searchstax);
+        this.storeServiceService.notifyDataLayerReady();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchstaxWrapper, deps: [{ token: StoreServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SearchstaxWrapper, selector: "app-searchstax-wrapper", inputs: { language: "language", model: "model", searchURL: "searchURL", suggesterURL: "suggesterURL", trackApiKey: "trackApiKey", searchAuth: "searchAuth", sessionId: "sessionId", analyticsBaseUrl: "analyticsBaseUrl", analyticsSrc: "analyticsSrc", questionURL: "questionURL", authType: "authType", autoCorrect: "autoCorrect", router: "router", beforeSearch: "beforeSearch", afterSearch: "afterSearch" }, outputs: { initialized: "initialized" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SearchstaxWrapper, deps: [{ token: StoreServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: SearchstaxWrapper, isStandalone: false, selector: "app-searchstax-wrapper", inputs: { language: "language", model: "model", searchURL: "searchURL", suggesterURL: "suggesterURL", trackApiKey: "trackApiKey", searchAuth: "searchAuth", sessionId: "sessionId", analyticsBaseUrl: "analyticsBaseUrl", analyticsSrc: "analyticsSrc", questionURL: "questionURL", authType: "authType", autoCorrect: "autoCorrect", router: "router", beforeSearch: "beforeSearch", afterSearch: "afterSearch" }, outputs: { initialized: "initialized" }, ngImport: i0, template: `
   <div>
     <ng-content></ng-content>
   </div>
   `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchstaxWrapper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SearchstaxWrapper, decorators: [{
             type: Component,
-            args: [{ selector: 'app-searchstax-wrapper', template: `
+            args: [{ standalone: false, selector: 'app-searchstax-wrapper', template: `
   <div>
     <ng-content></ng-content>
   </div>
@@ -110,6 +126,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }] } });
 
+/**
+ * Studio JS often emits on dataLayer streams outside Angular's zone (fetch/XHR).
+ * `NgZone.run()` alone does not always schedule a tick for library components, so
+ * pass the host `ChangeDetectorRef` to refresh the widget after each emission.
+ */
+function subscribeInNgZone(ngZone, source, next, cdr) {
+    return source.subscribe((value) => {
+        ngZone.run(() => {
+            next(value);
+            cdr.detectChanges();
+        });
+    });
+}
+
 //CUT START
 const config = {
     appId: "APP_ID",
@@ -201,8 +231,8 @@ const locationWidgetConfig = {
 
 // reusable-template.component.ts
 class LocationTemplateComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LocationTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LocationTemplateComponent, selector: "app-location-template", viewQueries: [{ propertyName: "locationTemplate", first: true, predicate: ["locationTemplate"], descendants: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: LocationTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: LocationTemplateComponent, isStandalone: false, selector: "app-location-template", viewQueries: [{ propertyName: "locationTemplate", first: true, predicate: ["locationTemplate"], descendants: true, static: true }], ngImport: i0, template: `
     <ng-template
       #locationTemplate
       let-context="context"
@@ -215,11 +245,11 @@ class LocationTemplateComponent {
       let-locationError="locationError"
       let-getCurrentLocation="getCurrentLocation"
     >
-      <div
-        class="searchstax-location-input-container"
-        data-test-id="searchstax-location-input-container"
-        *ngIf="locationData"
-      >
+      @if (locationData) {
+        <div
+          class="searchstax-location-input-container"
+          data-test-id="searchstax-location-input-container"
+        >
         <div class="searchstax-location-input-wrapper">
           <span class="searchstax-location-input-label">NEAR</span>
           <div class="searchstax-location-input-wrapper-inner">
@@ -244,35 +274,41 @@ class LocationTemplateComponent {
               Use my current location
             </button>
           </div>
-          <span
-            *ngIf="locationData.shouldShowLocationDistanceDropdown"
-            class="searchstax-location-input-label"
-            >WITHIN</span
-          >
-          <select
-            *ngIf="locationData.shouldShowLocationDistanceDropdown"
-            id="searchstax-location-radius-select"
-            class="searchstax-location-radius-select"
-            aria-label="Search Location Radius Select"
-            data-test-id="searchstax-location-radius-select"
-            (change)="radiusChange($event, context)"
-            [(ngModel)]="context.selectValue"
-          >
-            <option
-              *ngFor="let value of locationData.locationSearchDistanceValues"
-              [value]="value.value"
+          @if (locationData.shouldShowLocationDistanceDropdown) {
+            <span
+              class="searchstax-location-input-label"
+              >WITHIN</span
             >
-              {{ value.label }}
-            </option>
-          </select>
+          }
+          @if (locationData.shouldShowLocationDistanceDropdown) {
+            <select
+              id="searchstax-location-radius-select"
+              class="searchstax-location-radius-select"
+              aria-label="Search Location Radius Select"
+              data-test-id="searchstax-location-radius-select"
+              (change)="radiusChange($event, context)"
+              [(ngModel)]="context.selectValue"
+            >
+              @for (
+                value of locationData.locationSearchDistanceValues;
+                track value.value
+              ) {
+                <option [value]="value.value">
+                  {{ value.label }}
+                </option>
+              }
+            </select>
+          }
         </div>
-      </div>
+        </div>
+      }
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LocationTemplateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: LocationTemplateComponent, decorators: [{
             type: Component,
             args: [{
+                    standalone: false,
                     selector: "app-location-template",
                     template: `
     <ng-template
@@ -287,11 +323,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
       let-locationError="locationError"
       let-getCurrentLocation="getCurrentLocation"
     >
-      <div
-        class="searchstax-location-input-container"
-        data-test-id="searchstax-location-input-container"
-        *ngIf="locationData"
-      >
+      @if (locationData) {
+        <div
+          class="searchstax-location-input-container"
+          data-test-id="searchstax-location-input-container"
+        >
         <div class="searchstax-location-input-wrapper">
           <span class="searchstax-location-input-label">NEAR</span>
           <div class="searchstax-location-input-wrapper-inner">
@@ -316,40 +352,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
               Use my current location
             </button>
           </div>
-          <span
-            *ngIf="locationData.shouldShowLocationDistanceDropdown"
-            class="searchstax-location-input-label"
-            >WITHIN</span
-          >
-          <select
-            *ngIf="locationData.shouldShowLocationDistanceDropdown"
-            id="searchstax-location-radius-select"
-            class="searchstax-location-radius-select"
-            aria-label="Search Location Radius Select"
-            data-test-id="searchstax-location-radius-select"
-            (change)="radiusChange($event, context)"
-            [(ngModel)]="context.selectValue"
-          >
-            <option
-              *ngFor="let value of locationData.locationSearchDistanceValues"
-              [value]="value.value"
+          @if (locationData.shouldShowLocationDistanceDropdown) {
+            <span
+              class="searchstax-location-input-label"
+              >WITHIN</span
             >
-              {{ value.label }}
-            </option>
-          </select>
+          }
+          @if (locationData.shouldShowLocationDistanceDropdown) {
+            <select
+              id="searchstax-location-radius-select"
+              class="searchstax-location-radius-select"
+              aria-label="Search Location Radius Select"
+              data-test-id="searchstax-location-radius-select"
+              (change)="radiusChange($event, context)"
+              [(ngModel)]="context.selectValue"
+            >
+              @for (
+                value of locationData.locationSearchDistanceValues;
+                track value.value
+              ) {
+                <option [value]="value.value">
+                  {{ value.label }}
+                </option>
+              }
+            </select>
+          }
         </div>
-      </div>
+        </div>
+      }
     </ng-template>
   `,
                 }]
         }], propDecorators: { locationTemplate: [{
                 type: ViewChild,
-                args: ["locationTemplate"]
+                args: ["locationTemplate", { static: true }]
             }] } });
 
 class SearchstaxSearchLocationWidget {
-    constructor(storeServiceService) {
+    constructor(storeServiceService, ngZone, cdr) {
         this.storeServiceService = storeServiceService;
+        this.ngZone = ngZone;
+        this.cdr = cdr;
         this.locationData = null;
         this.inputValue = "";
         this.selectValue = "";
@@ -360,7 +403,9 @@ class SearchstaxSearchLocationWidget {
     }
     ngOnInit() {
         if (this.storeServiceService.searchstax) {
-            this.attachObservables();
+            this.storeServiceService.whenDataLayerReady(() => {
+                this.attachObservables();
+            });
             setTimeout(() => {
                 this.addWidget();
             }, 100);
@@ -399,30 +444,30 @@ class SearchstaxSearchLocationWidget {
         }
     }
     attachObservables() {
-        this.storeServiceService.searchstax.dataLayer.$locationWidgetTemplateData.subscribe((sortingData) => {
+        subscribeInNgZone(this.ngZone, this.storeServiceService.searchstax.dataLayer.$locationWidgetTemplateData, (sortingData) => {
             this.locationData = sortingData;
-        });
-        this.storeServiceService.searchstax.dataLayer.$searchObject.subscribe((result) => {
-            this.inputValue = result.location.address ?? "";
-            this.selectValue = result.location.radius || "";
-        });
-        this.storeServiceService.searchstax.dataLayer.$locationError.subscribe((locationError) => {
+        }, this.cdr);
+        subscribeInNgZone(this.ngZone, this.storeServiceService.searchstax.dataLayer.$searchObject, (result) => {
+            this.inputValue = result?.location?.address ?? "";
+            this.selectValue = result?.location?.radius || "";
+        }, this.cdr);
+        subscribeInNgZone(this.ngZone, this.storeServiceService.searchstax.dataLayer.$locationError, (locationError) => {
             this.locationError = locationError;
-        });
-        this.storeServiceService.searchstax.dataLayer.$searchLocationChange.subscribe((location) => {
+        }, this.cdr);
+        subscribeInNgZone(this.ngZone, this.storeServiceService.searchstax.dataLayer.$searchLocationChange, (location) => {
             this.inputValue = location;
-        });
-        this.storeServiceService.searchstax.dataLayer.$searchRadiusChange.subscribe((radius) => {
+        }, this.cdr);
+        subscribeInNgZone(this.ngZone, this.storeServiceService.searchstax.dataLayer.$searchRadiusChange, (radius) => {
             this.selectValue = radius;
-        });
+        }, this.cdr);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchstaxSearchLocationWidget, deps: [{ token: StoreServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SearchstaxSearchLocationWidget, selector: "app-searchstax-search-location", inputs: { templateOverride: "templateOverride", locationSearchEnabled: "locationSearchEnabled", locationValuesOverride: "locationValuesOverride", locationDecode: "locationDecode", locationDecodeCoordinatesToAddress: "locationDecodeCoordinatesToAddress" }, ngImport: i0, template: "<div\n  [id]=\"'searchstax-location-container' + rand\"\n  class=\"searchstax-location-container\"\n>\n  <div *ngIf=\"!!locationData && !templateOverride\">\n    <app-location-template #ref></app-location-template>\n    <ng-template\n      *ngTemplateOutlet=\"ref.locationTemplate; context: context\"\n    ></ng-template>\n  </div>\n\n  <div *ngIf=\"!!locationData && templateOverride\">\n    <ng-container\n      *ngTemplateOutlet=\"templateOverride; context: context\"\n    ></ng-container>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LocationTemplateComponent, selector: "app-location-template" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SearchstaxSearchLocationWidget, deps: [{ token: StoreServiceService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: SearchstaxSearchLocationWidget, isStandalone: false, selector: "app-searchstax-search-location", inputs: { templateOverride: "templateOverride", locationSearchEnabled: "locationSearchEnabled", locationValuesOverride: "locationValuesOverride", locationDecode: "locationDecode", locationDecodeCoordinatesToAddress: "locationDecodeCoordinatesToAddress" }, ngImport: i0, template: "<div\n  [id]=\"'searchstax-location-container' + rand\"\n  class=\"searchstax-location-container\"\n>\n  @if (!!locationData && !templateOverride) {\n    <div>\n      <app-location-template #ref></app-location-template>\n      <ng-container\n        [ngTemplateOutlet]=\"ref.locationTemplate\"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n    </div>\n  }\n\n  @if (!!locationData && templateOverride) {\n    <div>\n      <ng-container\n        [ngTemplateOutlet]=\"templateOverride\"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LocationTemplateComponent, selector: "app-location-template" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchstaxSearchLocationWidget, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SearchstaxSearchLocationWidget, decorators: [{
             type: Component,
-            args: [{ selector: "app-searchstax-search-location", template: "<div\n  [id]=\"'searchstax-location-container' + rand\"\n  class=\"searchstax-location-container\"\n>\n  <div *ngIf=\"!!locationData && !templateOverride\">\n    <app-location-template #ref></app-location-template>\n    <ng-template\n      *ngTemplateOutlet=\"ref.locationTemplate; context: context\"\n    ></ng-template>\n  </div>\n\n  <div *ngIf=\"!!locationData && templateOverride\">\n    <ng-container\n      *ngTemplateOutlet=\"templateOverride; context: context\"\n    ></ng-container>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: StoreServiceService }], propDecorators: { templateOverride: [{
+            args: [{ standalone: false, selector: "app-searchstax-search-location", template: "<div\n  [id]=\"'searchstax-location-container' + rand\"\n  class=\"searchstax-location-container\"\n>\n  @if (!!locationData && !templateOverride) {\n    <div>\n      <app-location-template #ref></app-location-template>\n      <ng-container\n        [ngTemplateOutlet]=\"ref.locationTemplate\"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n    </div>\n  }\n\n  @if (!!locationData && templateOverride) {\n    <div>\n      <ng-container\n        [ngTemplateOutlet]=\"templateOverride\"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n    </div>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [{ type: StoreServiceService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { templateOverride: [{
                 type: Input
             }], locationSearchEnabled: [{
                 type: Input
@@ -436,8 +481,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 
 // reusable-template.component.ts
 class InputTemplateComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: InputTemplateComponent, selector: "app-input-template", viewQueries: [{ propertyName: "inputTemplate", first: true, predicate: ["inputTemplate"], descendants: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: InputTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: InputTemplateComponent, isStandalone: false, selector: "app-input-template", viewQueries: [{ propertyName: "inputTemplate", first: true, predicate: ["inputTemplate"], descendants: true, static: true }], ngImport: i0, template: `
     <ng-template
       #inputTemplate
       let-suggestions="suggestions"
@@ -460,10 +505,10 @@ class InputTemplateComponent {
           [ngClass]="{ hidden: suggestions.length === 0 }"
           (mouseleave)="onMouseLeave(context)"
         >
-          <div
-            class="searchstax-autosuggest-item"
-            *ngFor="let suggestion of suggestions"
-          >
+          @for (suggestion of suggestions; track $index) {
+            <div
+              class="searchstax-autosuggest-item"
+            >
             <div
               class="searchstax-autosuggest-item-term-container"
               [innerHtml]="suggestion.term"
@@ -471,7 +516,8 @@ class InputTemplateComponent {
               tabindex="0"
               (click)="onMouseClick($event, context)"
             ></div>
-          </div>
+            </div>
+          }
         </div>
       </div>
       <app-searchstax-search-location
@@ -490,11 +536,12 @@ class InputTemplateComponent {
         aria-label="search"
       ></button>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SearchstaxSearchLocationWidget, selector: "app-searchstax-search-location", inputs: ["templateOverride", "locationSearchEnabled", "locationValuesOverride", "locationDecode", "locationDecodeCoordinatesToAddress"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SearchstaxSearchLocationWidget, selector: "app-searchstax-search-location", inputs: ["templateOverride", "locationSearchEnabled", "locationValuesOverride", "locationDecode", "locationDecodeCoordinatesToAddress"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputTemplateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: InputTemplateComponent, decorators: [{
             type: Component,
             args: [{
+                    standalone: false,
                     selector: "app-input-template",
                     template: `
     <ng-template
@@ -519,10 +566,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
           [ngClass]="{ hidden: suggestions.length === 0 }"
           (mouseleave)="onMouseLeave(context)"
         >
-          <div
-            class="searchstax-autosuggest-item"
-            *ngFor="let suggestion of suggestions"
-          >
+          @for (suggestion of suggestions; track $index) {
+            <div
+              class="searchstax-autosuggest-item"
+            >
             <div
               class="searchstax-autosuggest-item-term-container"
               [innerHtml]="suggestion.term"
@@ -530,7 +577,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
               tabindex="0"
               (click)="onMouseClick($event, context)"
             ></div>
-          </div>
+            </div>
+          }
         </div>
       </div>
       <app-searchstax-search-location
@@ -553,47 +601,79 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }]
         }], propDecorators: { inputTemplate: [{
                 type: ViewChild,
-                args: ["inputTemplate"]
+                args: ["inputTemplate", { static: true }]
             }] } });
 
 class SearchstaxInputWidget {
-    constructor(storeServiceService) {
+    constructor(storeServiceService, ngZone, cdr) {
         this.storeServiceService = storeServiceService;
+        this.ngZone = ngZone;
+        this.cdr = cdr;
         this.searchInputId = "";
         this.hooks = {};
         this.suggestions = [];
         this.context = this;
         this.templateData = null;
         this.locationWidgetConfig = locationWidgetConfig;
+        this.searchInputWidgetAttached = false;
     }
     ngOnInit() {
         if (this.storeServiceService.searchstax) {
-            this.attachObservables();
-            // const hooks: { [key: string]: (prop: any) => any } = {}
+            this.storeServiceService.whenDataLayerReady(() => {
+                this.attachObservables();
+            });
             if (this.afterAutosuggest) {
                 this.hooks["afterAutosuggest"] = this.afterAutosuggest;
             }
             if (this.beforeAutosuggest) {
                 this.hooks["beforeAutosuggest"] = this.beforeAutosuggest;
             }
-            setTimeout(() => {
-                this.storeServiceService.searchstax.addSearchInputWidget("searchstax-input-container", {
-                    suggestAfterMinChars: this.suggestAfterMinChars,
-                    hooks: this.hooks,
-                    templates: {
-                        mainTemplate: {
-                            template: ``,
-                            searchInputId: this.searchInputId ?? "searchstax-search-input",
-                        },
-                    },
-                });
-                this.storeServiceService.searchstax.dataLayer.setInputTemplateRendered(true);
-            }, 100);
         }
         else {
             throw Error("Searchstax instance needs to be passed via props");
         }
     }
+    /**
+     * Studio JS looks up `#searchInputId` as soon as `addSearchInputWidget` runs.
+     * The real input is stamped by `ngTemplateOutlet` after child views exist, so
+     * `ngOnInit` + a fixed delay can run too early (especially with control flow).
+     */
+    ngAfterViewInit() {
+        this.tryAttachSearchInputWidget(0);
+    }
+    tryAttachSearchInputWidget(attempt) {
+        const searchstax = this.storeServiceService.searchstax;
+        if (!searchstax || this.searchInputWidgetAttached) {
+            return;
+        }
+        if (typeof document === "undefined") {
+            return;
+        }
+        const inputId = this.searchInputId || "searchstax-search-input";
+        if (document.getElementById(inputId)) {
+            searchstax.addSearchInputWidget("searchstax-input-container", {
+                suggestAfterMinChars: this.suggestAfterMinChars,
+                hooks: this.hooks,
+                templates: {
+                    mainTemplate: {
+                        template: ``,
+                        searchInputId: inputId,
+                    },
+                },
+            });
+            searchstax.dataLayer.setInputTemplateRendered(true);
+            this.searchInputWidgetAttached = true;
+            return;
+        }
+        const maxAttempts = 60;
+        if (attempt < maxAttempts) {
+            requestAnimationFrame(() => this.tryAttachSearchInputWidget(attempt + 1));
+        }
+        else {
+            console.warn(`[Searchstax] Input #${inputId} not found after view init; search input widget was not attached. ` +
+                `With a custom templateOverride, set the input id to match [searchInputId] (default "${inputId}").`);
+        }
+    }
     onMouseLeave(context) {
         context.storeServiceService.searchstax.searchInputWidget?.resetAutosuggestSelection();
         context.storeServiceService.searchstax.searchInputWidget?.markActiveAutosuggestItem();
@@ -606,20 +686,20 @@ class SearchstaxInputWidget {
         context.storeServiceService.searchstax.searchInputWidget?.suggestionChosen();
     }
     attachObservables() {
-        this.storeServiceService.searchstax.dataLayer.$autosuggestResults.subscribe((suggestions) => {
+        subscribeInNgZone(this.ngZone, this.storeServiceService.searchstax.dataLayer.$autosuggestResults, (suggestions) => {
             this.suggestions = suggestions?.suggestions ?? [];
-        });
-        this.storeServiceService.searchstax.dataLayer.$inputWidgetTemplateData.subscribe((data) => {
+        }, this.cdr);
+        subscribeInNgZone(this.ngZone, this.storeServiceService.searchstax.dataLayer.$inputWidgetTemplateData, (data) => {
             this.templateData = data;
-        });
+        }, this.cdr);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchstaxInputWidget, deps: [{ token: StoreServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SearchstaxInputWidget, selector: "app-searchstax-input", inputs: { afterAutosuggest: "afterAutosuggest", beforeAutosuggest: "beforeAutosuggest", searchInputId: "searchInputId", suggestAfterMinChars: "suggestAfterMinChars", templateOverride: "templateOverride" }, ngImport: i0, template: "<div id=\"searchstax-input-container\">\n  <div\n    class=\"searchstax-search-input-container searchstax-search-input-container-new\"\n    [class]=\"{\n      'searchstax-alternative-render': !!templateData?.locationEnabled\n    }\"\n  >\n    <ng-container *ngIf=\"!templateOverride\">\n      <app-input-template #ref></app-input-template>\n      <ng-template\n        *ngTemplateOutlet=\"ref.inputTemplate; context: context\"\n      ></ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"templateOverride\">\n      <ng-container\n        *ngTemplateOutlet=\"templateOverride; context: context\"\n      ></ng-container>\n    </ng-container>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputTemplateComponent, selector: "app-input-template" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SearchstaxInputWidget, deps: [{ token: StoreServiceService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: SearchstaxInputWidget, isStandalone: false, selector: "app-searchstax-input", inputs: { afterAutosuggest: "afterAutosuggest", beforeAutosuggest: "beforeAutosuggest", searchInputId: "searchInputId", suggestAfterMinChars: "suggestAfterMinChars", templateOverride: "templateOverride" }, ngImport: i0, template: "<div id=\"searchstax-input-container\">\n  <div\n    class=\"searchstax-search-input-container searchstax-search-input-container-new\"\n    [class]=\"{\n      'searchstax-alternative-render': !!templateData?.locationEnabled\n    }\"\n  >\n    @if (!templateOverride) {\n      <app-input-template #ref></app-input-template>\n      <ng-container\n        [ngTemplateOutlet]=\"ref.inputTemplate\"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n    } @else {\n      <ng-container\n        [ngTemplateOutlet]=\"templateOverride\"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputTemplateComponent, selector: "app-input-template" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchstaxInputWidget, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SearchstaxInputWidget, decorators: [{
             type: Component,
-            args: [{ selector: "app-searchstax-input", template: "<div id=\"searchstax-input-container\">\n  <div\n    class=\"searchstax-search-input-container searchstax-search-input-container-new\"\n    [class]=\"{\n      'searchstax-alternative-render': !!templateData?.locationEnabled\n    }\"\n  >\n    <ng-container *ngIf=\"!templateOverride\">\n      <app-input-template #ref></app-input-template>\n      <ng-template\n        *ngTemplateOutlet=\"ref.inputTemplate; context: context\"\n      ></ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"templateOverride\">\n      <ng-container\n        *ngTemplateOutlet=\"templateOverride; context: context\"\n      ></ng-container>\n    </ng-container>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: StoreServiceService }], propDecorators: { afterAutosuggest: [{
+            args: [{ standalone: false, selector: "app-searchstax-input", template: "<div id=\"searchstax-input-container\">\n  <div\n    class=\"searchstax-search-input-container searchstax-search-input-container-new\"\n    [class]=\"{\n      'searchstax-alternative-render': !!templateData?.locationEnabled\n    }\"\n  >\n    @if (!templateOverride) {\n      <app-input-template #ref></app-input-template>\n      <ng-container\n        [ngTemplateOutlet]=\"ref.inputTemplate\"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n    } @else {\n      <ng-container\n        [ngTemplateOutlet]=\"templateOverride\"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n    }\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: StoreServiceService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { afterAutosuggest: [{
                 type: Input
             }], beforeAutosuggest: [{
                 type: Input
@@ -633,8 +713,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 
 // reusable-template.component.ts
 class ResultsTemplateComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ResultsTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ResultsTemplateComponent, selector: "app-results-template", viewQueries: [{ propertyName: "resultsTemplate", first: true, predicate: ["resultsTemplate"], descendants: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ResultsTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: ResultsTemplateComponent, isStandalone: false, selector: "app-results-template", viewQueries: [{ propertyName: "resultsTemplate", first: true, predicate: ["resultsTemplate"], descendants: true, static: true }], ngImport: i0, template: `
     <ng-template
       #resultsTemplate
       let-searchResults="searchResults"
@@ -642,10 +722,13 @@ class ResultsTemplateComponent {
       let-isImage="isImage"
       let-context="context"
     >
-      <div class="searchstax-search-results">
-        <a
-          *ngFor="let searchResult of searchResults"
-          [href]="searchResult.url"
+      <div class="searchstax-search-results" id="searchstax-search-results">
+        @for (
+          searchResult of searchResults ?? [];
+          track searchResult.uniqueId
+        ) {
+          <a
+            [href]="searchResult.url"
           [attr.data-searchstax-unique-result-id]="searchResult.uniqueId"
           (click)="resultClicked(searchResult, $event, context)"
           (keyup.enter)="resultClicked(searchResult, $event, context)"
@@ -658,21 +741,22 @@ class ResultsTemplateComponent {
             class="searchstax-search-result"
             [ngClass]="{ 'has-thumbnail': searchResult.thumbnail }"
           >
-            <div
-              *ngIf="searchResult.promoted"
-              class="searchstax-search-result-promoted"
-            ></div>
-            <div
-              *ngIf="searchResult.ribbon"
-              [innerHTML]="searchResult.ribbon"
-              class="searchstax-search-result-ribbon"
-            ></div>
-            <img
-              alt=""
-              *ngIf="searchResult.thumbnail"
-              [src]="searchResult.thumbnail"
-              class="searchstax-thumbnail"
-            />
+            @if (searchResult.promoted) {
+              <div class="searchstax-search-result-promoted"></div>
+            }
+            @if (searchResult.ribbon) {
+              <div
+                [innerHTML]="searchResult.ribbon"
+                class="searchstax-search-result-ribbon"
+              ></div>
+            }
+            @if (searchResult.thumbnail) {
+              <img
+                alt=""
+                [src]="searchResult.thumbnail"
+                class="searchstax-thumbnail"
+              />
+            }
             <div class="searchstax-search-result-title-container">
               <span
                 class="searchstax-search-result-title"
@@ -680,46 +764,53 @@ class ResultsTemplateComponent {
                 [innerHTML]="searchResult.title"
               ></span>
             </div>
-            <p
-              tabindex="0"
-              *ngIf="searchResult.paths"
-              class="searchstax-search-result-common"
-              [innerHTML]="searchResult.paths"
-            ></p>
-            <p
-              tabindex="0"
-              *ngIf="searchResult.description"
-              [innerHTML]="searchResult.description"
-              class="searchstax-search-result-description searchstax-search-result-common"
-            ></p>
-            <div *ngFor="let unmappedField of searchResult.unmappedFields">
-              <div
-                *ngIf="isImage(unmappedField)"
-                class="searchstax-search-result-image-container"
-              >
-                <img
-                  alt=""
-                  [src]="unmappedField.value"
-                  class="searchstax-result-image"
-                />
-              </div>
-              <div *ngIf="!isImage(unmappedField)">
-                <p
-                  tabindex="0"
-                  class="searchstax-search-result-common"
-                  [innerHTML]="unmappedField.value"
-                ></p>
-              </div>
-            </div>
+            @if (searchResult.paths) {
+              <p
+                tabindex="0"
+                class="searchstax-search-result-common"
+                [innerHTML]="searchResult.paths"
+              ></p>
+            }
+            @if (searchResult.description) {
+              <p
+                tabindex="0"
+                [innerHTML]="searchResult.description"
+                class="searchstax-search-result-description searchstax-search-result-common"
+              ></p>
+            }
+            @for (
+              unmappedField of searchResult.unmappedFields ?? [];
+              track $index
+            ) {
+              @if (isImage(unmappedField)) {
+                <div class="searchstax-search-result-image-container">
+                  <img
+                    alt=""
+                    [src]="unmappedField.value"
+                    class="searchstax-result-image"
+                  />
+                </div>
+              } @else {
+                <div>
+                  <p
+                    tabindex="0"
+                    class="searchstax-search-result-common"
+                    [innerHTML]="unmappedField.value"
+                  ></p>
+                </div>
+              }
+            }
           </div>
-        </a>
+          </a>
+        }
       </div>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ResultsTemplateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ResultsTemplateComponent, decorators: [{
             type: Component,
             args: [{
+                    standalone: false,
                     selector: "app-results-template",
                     template: `
     <ng-template
@@ -729,10 +820,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
       let-isImage="isImage"
       let-context="context"
     >
-      <div class="searchstax-search-results">
-        <a
-          *ngFor="let searchResult of searchResults"
-          [href]="searchResult.url"
+      <div class="searchstax-search-results" id="searchstax-search-results">
+        @for (
+          searchResult of searchResults ?? [];
+          track searchResult.uniqueId
+        ) {
+          <a
+            [href]="searchResult.url"
           [attr.data-searchstax-unique-result-id]="searchResult.uniqueId"
           (click)="resultClicked(searchResult, $event, context)"
           (keyup.enter)="resultClicked(searchResult, $event, context)"
@@ -745,21 +839,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             class="searchstax-search-result"
             [ngClass]="{ 'has-thumbnail': searchResult.thumbnail }"
           >
-            <div
-              *ngIf="searchResult.promoted"
-              class="searchstax-search-result-promoted"
-            ></div>
-            <div
-              *ngIf="searchResult.ribbon"
-              [innerHTML]="searchResult.ribbon"
-              class="searchstax-search-result-ribbon"
-            ></div>
-            <img
-              alt=""
-              *ngIf="searchResult.thumbnail"
-              [src]="searchResult.thumbnail"
-              class="searchstax-thumbnail"
-            />
+            @if (searchResult.promoted) {
+              <div class="searchstax-search-result-promoted"></div>
+            }
+            @if (searchResult.ribbon) {
+              <div
+                [innerHTML]="searchResult.ribbon"
+                class="searchstax-search-result-ribbon"
+              ></div>
+            }
+            @if (searchResult.thumbnail) {
+              <img
+                alt=""
+                [src]="searchResult.thumbnail"
+                class="searchstax-thumbnail"
+              />
+            }
             <div class="searchstax-search-result-title-container">
               <span
                 class="searchstax-search-result-title"
@@ -767,52 +862,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 [innerHTML]="searchResult.title"
               ></span>
             </div>
-            <p
-              tabindex="0"
-              *ngIf="searchResult.paths"
-              class="searchstax-search-result-common"
-              [innerHTML]="searchResult.paths"
-            ></p>
-            <p
-              tabindex="0"
-              *ngIf="searchResult.description"
-              [innerHTML]="searchResult.description"
-              class="searchstax-search-result-description searchstax-search-result-common"
-            ></p>
-            <div *ngFor="let unmappedField of searchResult.unmappedFields">
-              <div
-                *ngIf="isImage(unmappedField)"
-                class="searchstax-search-result-image-container"
-              >
-                <img
-                  alt=""
-                  [src]="unmappedField.value"
-                  class="searchstax-result-image"
-                />
-              </div>
-              <div *ngIf="!isImage(unmappedField)">
-                <p
-                  tabindex="0"
-                  class="searchstax-search-result-common"
-                  [innerHTML]="unmappedField.value"
-                ></p>
-              </div>
-            </div>
+            @if (searchResult.paths) {
+              <p
+                tabindex="0"
+                class="searchstax-search-result-common"
+                [innerHTML]="searchResult.paths"
+              ></p>
+            }
+            @if (searchResult.description) {
+              <p
+                tabindex="0"
+                [innerHTML]="searchResult.description"
+                class="searchstax-search-result-description searchstax-search-result-common"
+              ></p>
+            }
+            @for (
+              unmappedField of searchResult.unmappedFields ?? [];
+              track $index
+            ) {
+              @if (isImage(unmappedField)) {
+                <div class="searchstax-search-result-image-container">
+                  <img
+                    alt=""
+                    [src]="unmappedField.value"
+                    class="searchstax-result-image"
+                  />
+                </div>
+              } @else {
+                <div>
+                  <p
+                    tabindex="0"
+                    class="searchstax-search-result-common"
+                    [innerHTML]="unmappedField.value"
+                  ></p>
+                </div>
+              }
+            }
           </div>
-        </a>
+          </a>
+        }
       </div>
     </ng-template>
   `,
                 }]
         }], propDecorators: { resultsTemplate: [{
                 type: ViewChild,
-                args: ["resultsTemplate"]
+                args: ["resultsTemplate", { static: true }]
             }] } });
 
 // reusable-template.component.ts
 class NoResultsTemplateComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NoResultsTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NoResultsTemplateComponent, selector: "app-no-results-template", viewQueries: [{ propertyName: "noResultsTemplate", first: true, predicate: ["noResultsTemplate"], descendants: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: NoResultsTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: NoResultsTemplateComponent, isStandalone: false, selector: "app-no-results-template", viewQueries: [{ propertyName: "noResultsTemplate", first: true, predicate: ["noResultsTemplate"], descendants: true, static: true }], ngImport: i0, template: `
     <ng-template
       #noResultsTemplate
       let-metadata="metadata"
@@ -824,18 +925,20 @@ class NoResultsTemplateComponent {
         Showing <strong>no results</strong> for
         <strong>"{{ searchTerm }}"</strong>
         <br />
-        <span *ngIf="metadata?.spellingSuggestion"
-          >&nbsp;Did you mean
-          <a
-            href="#"
-            [attr.aria-label]="'did you mean: ' + metadata?.spellingSuggestion"
-            class="searchstax-suggestion-term"
-            (click)="
-              executeSearch(metadata?.spellingSuggestion ?? '', $event, context)
-            "
-            >{{ metadata?.spellingSuggestion }}</a
-          >?</span
-        >
+        @if (metadata?.spellingSuggestion) {
+          <span
+            >&nbsp;Did you mean
+            <a
+              href="#"
+              [attr.aria-label]="'did you mean: ' + metadata?.spellingSuggestion"
+              class="searchstax-suggestion-term"
+              (click)="
+                executeSearch(metadata?.spellingSuggestion ?? '', $event, context)
+              "
+              >{{ metadata?.spellingSuggestion }}</a
+            >?</span
+          >
+        }
       </div>
       <ul>
         <li>
@@ -844,11 +947,12 @@ class NoResultsTemplateComponent {
         </li>
       </ul>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+  `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NoResultsTemplateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: NoResultsTemplateComponent, decorators: [{
             type: Component,
             args: [{
+                    standalone: false,
                     selector: "app-no-results-template",
                     template: `
     <ng-template
@@ -862,18 +966,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         Showing <strong>no results</strong> for
         <strong>"{{ searchTerm }}"</strong>
         <br />
-        <span *ngIf="metadata?.spellingSuggestion"
-          >&nbsp;Did you mean
-          <a
-            href="#"
-            [attr.aria-label]="'did you mean: ' + metadata?.spellingSuggestion"
-            class="searchstax-suggestion-term"
-            (click)="
-              executeSearch(metadata?.spellingSuggestion ?? '', $event, context)
-            "
-            >{{ metadata?.spellingSuggestion }}</a
-          >?</span
-        >
+        @if (metadata?.spellingSuggestion) {
+          <span
+            >&nbsp;Did you mean
+            <a
+              href="#"
+              [attr.aria-label]="'did you mean: ' + metadata?.spellingSuggestion"
+              class="searchstax-suggestion-term"
+              (click)="
+                executeSearch(metadata?.spellingSuggestion ?? '', $event, context)
+              "
+              >{{ metadata?.spellingSuggestion }}</a
+            >?</span
+          >
+        }
       </div>
       <ul>
         <li>
@@ -886,7 +992,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }]
         }], propDecorators: { noResultsTemplate: [{
                 type: ViewChild,
-                args: ["noResultsTemplate"]
+                args: ["noResultsTemplate", { static: true }]
             }] } });
 
 class SearchstaxResultsWidget {
@@ -897,8 +1003,10 @@ class SearchstaxResultsWidget {
         }
         return hooks;
     }
-    constructor(storeServiceService) {
+    constructor(storeServiceService, ngZone, cdr) {
         this.storeServiceService = storeServiceService;
+        this.ngZone = ngZone;
+        this.cdr = cdr;
         this.searchResults = null;
         this.metadata = null;
         this.searchTerm = '';
@@ -906,7 +1014,9 @@ class SearchstaxResultsWidget {
     }
     ngOnInit() {
         if (this.storeServiceService.searchstax) {
-            this.attachObservables();
+            this.storeServiceService.whenDataLayerReady(() => {
+                this.attachObservables();
+            });
             setTimeout(() => {
                 this.storeServiceService.searchstax.addSearchResultsWidget('searchstax-results-container', {
                     templates: {},
@@ -925,25 +1035,26 @@ class SearchstaxResultsWidget {
         context.storeServiceService.searchstax.executeSearch(term);
     }
     attachObservables() {
-        this.storeServiceService.searchstax.dataLayer.$searchResults.subscribe((results) => {
+        subscribeInNgZone(this.ngZone, this.storeServiceService.searchstax.dataLayer.$searchResults, (results) => {
             const current = this.searchResults ? [...this.searchResults] : [];
             const newResults = results ?? [];
             const resultsCombined = this.renderMethod === "infiniteScroll"
                 ? [...current, ...newResults]
                 : results;
-            if (this.storeServiceService.searchstax.dataLayer.$searchObject.value?.page === 1) {
+            if (this.storeServiceService.searchstax.dataLayer.$searchObject.value
+                ?.page === 1) {
                 this.searchResults = newResults;
             }
             else {
                 this.searchResults = resultsCombined;
             }
-        });
-        this.storeServiceService.searchstax.dataLayer.$searchTermChange.subscribe((result) => {
+        }, this.cdr);
+        subscribeInNgZone(this.ngZone, this.storeServiceService.searchstax.dataLayer.$searchTermChange, (result) => {
             this.searchTerm = result;
-        });
-        this.storeServiceService.searchstax.dataLayer.$searchResultsMetadata.subscribe((value) => {
+        }, this.cdr);
+        subscribeInNgZone(this.ngZone, this.storeServiceService.searchstax.dataLayer.$searchResultsMetadata, (value) => {
             this.metadata = value;
-        });
+        }, this.cdr);
     }
     resultClicked(result, event, context) {
         event.preventDefault();
@@ -953,13 +1064,13 @@ class SearchstaxResultsWidget {
     isImage(field) {
         return field.isImage && typeof field.value === 'string';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchstaxResultsWidget, deps: [{ token: StoreServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SearchstaxResultsWidget, selector: "app-searchstax-results", inputs: { afterLinkClick: "afterLinkClick", noResultsTemplate: "noResultsTemplate", resultsTemplate: "resultsTemplate", renderMethod: "renderMethod", resultsPerPage: "resultsPerPage" }, ngImport: i0, template: "<div id=\"searchstax-results-container\">\n  <section aria-label=\"search results container\" tabindex=\"0\">\n    <div\n      class=\"searchstax-search-results-container\"\n      id=\"searchstax-search-results-container\"\n    >\n      <div id=\"searchstax-result-container\">\n        <div\n          *ngIf=\"\n            searchResults?.length === 0 &&\n            searchTerm !== '' &&\n            searchTerm !== '*' &&\n            storeServiceService.searchstax.dataLayer.parsedData\n              .firstSearchHappened &&\n            !noResultsTemplate\n          \"\n        >\n          <app-no-results-template #ref></app-no-results-template>\n          <ng-template\n            *ngTemplateOutlet=\"ref.noResultsTemplate; context: context\"\n          ></ng-template>\n        </div>\n        <div\n          *ngIf=\"\n            searchResults?.length === 0 &&\n            searchTerm !== '' &&\n            searchTerm !== '*' &&\n            storeServiceService.searchstax.dataLayer.parsedData\n              .firstSearchHappened &&\n            noResultsTemplate\n          \"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"noResultsTemplate; context: context\"\n          ></ng-container>\n        </div>\n\n        <ng-container\n          *ngIf=\"searchResults && searchResults.length && !resultsTemplate\"\n        >\n          <app-results-template #ref></app-results-template>\n          <ng-template\n            *ngTemplateOutlet=\"ref.resultsTemplate; context: context\"\n          ></ng-template>\n        </ng-container>\n\n        <div *ngIf=\"searchResults && searchResults.length && resultsTemplate\">\n          <ng-container\n            *ngTemplateOutlet=\"resultsTemplate; context: context\"\n          ></ng-container>\n        </div>\n      </div>\n    </div>\n  </section>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResultsTemplateComponent, selector: "app-results-template" }, { kind: "component", type: NoResultsTemplateComponent, selector: "app-no-results-template" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SearchstaxResultsWidget, deps: [{ token: StoreServiceService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: SearchstaxResultsWidget, isStandalone: false, selector: "app-searchstax-results", inputs: { afterLinkClick: "afterLinkClick", noResultsTemplate: "noResultsTemplate", resultsTemplate: "resultsTemplate", renderMethod: "renderMethod", resultsPerPage: "resultsPerPage" }, ngImport: i0, template: "<div id=\"searchstax-results-container\">\n  <section aria-label=\"search results container\" tabindex=\"0\">\n    <div\n      class=\"searchstax-search-results-container\"\n      id=\"searchstax-search-results-container\"\n    >\n      <div id=\"searchstax-result-container\">\n        @if (\n          searchResults?.length === 0 &&\n          searchTerm !== '' &&\n          searchTerm !== '*' &&\n          storeServiceService.searchstax.dataLayer.parsedData\n            ?.firstSearchHappened &&\n          !noResultsTemplate\n        ) {\n          <div>\n            <app-no-results-template #noResultsTpl></app-no-results-template>\n            <ng-container\n              [ngTemplateOutlet]=\"noResultsTpl.noResultsTemplate\"\n              [ngTemplateOutletContext]=\"context\"\n            ></ng-container>\n          </div>\n        }\n        @if (\n          searchResults?.length === 0 &&\n          searchTerm !== '' &&\n          searchTerm !== '*' &&\n          storeServiceService.searchstax.dataLayer.parsedData\n            ?.firstSearchHappened &&\n          noResultsTemplate\n        ) {\n          <div>\n            <ng-container\n              [ngTemplateOutlet]=\"noResultsTemplate\"\n              [ngTemplateOutletContext]=\"context\"\n            ></ng-container>\n          </div>\n        }\n\n        @if (searchResults && searchResults.length && !resultsTemplate) {\n          <app-results-template #resultsTpl></app-results-template>\n          <ng-container\n            [ngTemplateOutlet]=\"resultsTpl.resultsTemplate\"\n            [ngTemplateOutletContext]=\"context\"\n          ></ng-container>\n        }\n\n        @if (searchResults && searchResults.length && resultsTemplate) {\n          <div>\n            <ng-container\n              [ngTemplateOutlet]=\"resultsTemplate\"\n              [ngTemplateOutletContext]=\"context\"\n            ></ng-container>\n          </div>\n        }\n      </div>\n    </div>\n  </section>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResultsTemplateComponent, selector: "app-results-template" }, { kind: "component", type: NoResultsTemplateComponent, selector: "app-no-results-template" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchstaxResultsWidget, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SearchstaxResultsWidget, decorators: [{
             type: Component,
-            args: [{ selector: 'app-searchstax-results', template: "<div id=\"searchstax-results-container\">\n  <section aria-label=\"search results container\" tabindex=\"0\">\n    <div\n      class=\"searchstax-search-results-container\"\n      id=\"searchstax-search-results-container\"\n    >\n      <div id=\"searchstax-result-container\">\n        <div\n          *ngIf=\"\n            searchResults?.length === 0 &&\n            searchTerm !== '' &&\n            searchTerm !== '*' &&\n            storeServiceService.searchstax.dataLayer.parsedData\n              .firstSearchHappened &&\n            !noResultsTemplate\n          \"\n        >\n          <app-no-results-template #ref></app-no-results-template>\n          <ng-template\n            *ngTemplateOutlet=\"ref.noResultsTemplate; context: context\"\n          ></ng-template>\n        </div>\n        <div\n          *ngIf=\"\n            searchResults?.length === 0 &&\n            searchTerm !== '' &&\n            searchTerm !== '*' &&\n            storeServiceService.searchstax.dataLayer.parsedData\n              .firstSearchHappened &&\n            noResultsTemplate\n          \"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"noResultsTemplate; context: context\"\n          ></ng-container>\n        </div>\n\n        <ng-container\n          *ngIf=\"searchResults && searchResults.length && !resultsTemplate\"\n        >\n          <app-results-template #ref></app-results-template>\n          <ng-template\n            *ngTemplateOutlet=\"ref.resultsTemplate; context: context\"\n          ></ng-template>\n        </ng-container>\n\n        <div *ngIf=\"searchResults && searchResults.length && resultsTemplate\">\n          <ng-container\n            *ngTemplateOutlet=\"resultsTemplate; context: context\"\n          ></ng-container>\n        </div>\n      </div>\n    </div>\n  </section>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: StoreServiceService }], propDecorators: { afterLinkClick: [{
+            args: [{ standalone: false, selector: 'app-searchstax-results', template: "<div id=\"searchstax-results-container\">\n  <section aria-label=\"search results container\" tabindex=\"0\">\n    <div\n      class=\"searchstax-search-results-container\"\n      id=\"searchstax-search-results-container\"\n    >\n      <div id=\"searchstax-result-container\">\n        @if (\n          searchResults?.length === 0 &&\n          searchTerm !== '' &&\n          searchTerm !== '*' &&\n          storeServiceService.searchstax.dataLayer.parsedData\n            ?.firstSearchHappened &&\n          !noResultsTemplate\n        ) {\n          <div>\n            <app-no-results-template #noResultsTpl></app-no-results-template>\n            <ng-container\n              [ngTemplateOutlet]=\"noResultsTpl.noResultsTemplate\"\n              [ngTemplateOutletContext]=\"context\"\n            ></ng-container>\n          </div>\n        }\n        @if (\n          searchResults?.length === 0 &&\n          searchTerm !== '' &&\n          searchTerm !== '*' &&\n          storeServiceService.searchstax.dataLayer.parsedData\n            ?.firstSearchHappened &&\n          noResultsTemplate\n        ) {\n          <div>\n            <ng-container\n              [ngTemplateOutlet]=\"noResultsTemplate\"\n              [ngTemplateOutletContext]=\"context\"\n            ></ng-container>\n          </div>\n        }\n\n        @if (searchResults && searchResults.length && !resultsTemplate) {\n          <app-results-template #resultsTpl></app-results-template>\n          <ng-container\n            [ngTemplateOutlet]=\"resultsTpl.resultsTemplate\"\n            [ngTemplateOutletContext]=\"context\"\n          ></ng-container>\n        }\n\n        @if (searchResults && searchResults.length && resultsTemplate) {\n          <div>\n            <ng-container\n              [ngTemplateOutlet]=\"resultsTemplate\"\n              [ngTemplateOutletContext]=\"context\"\n            ></ng-container>\n          </div>\n        }\n      </div>\n    </div>\n  </section>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: StoreServiceService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { afterLinkClick: [{
                 type: Input
             }], noResultsTemplate: [{
                 type: Input
@@ -973,8 +1084,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 
 // reusable-template.component.ts
 class OverviewTemplateComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverviewTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OverviewTemplateComponent, selector: "app-overview-template", viewQueries: [{ propertyName: "overviewTemplate", first: true, predicate: ["feedbackTemplate"], descendants: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: OverviewTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: OverviewTemplateComponent, isStandalone: false, selector: "app-overview-template", viewQueries: [{ propertyName: "overviewTemplate", first: true, predicate: ["feedbackTemplate"], descendants: true, static: true }], ngImport: i0, template: `
     <ng-template
       #feedbackTemplate
       let-searchFeedbackData="searchFeedbackData"
@@ -988,12 +1099,15 @@ class OverviewTemplateComponent {
           {{ searchFeedbackData!.endResultIndex }}</b
         >
         of <b>{{ searchFeedbackData!.totalResults }}</b> results
-        <span *ngIf="searchFeedbackData.searchTerm"
-          >for "<b>{{ searchFeedbackData!.searchTerm }}</b
-          >"
-        </span>
+        @if (searchFeedbackData.searchTerm) {
+          <span
+            >for "<b>{{ searchFeedbackData!.searchTerm }}</b
+            >"
+          </span>
+        }
         <div class="searchstax-feedback-container-suggested">
-          <div *ngIf="searchFeedbackData.autoCorrectedQuery">
+          @if (searchFeedbackData.autoCorrectedQuery) {
+            <div>
             Search instead for
             <a
               href="#"
@@ -1004,15 +1118,17 @@ class OverviewTemplateComponent {
               "
               >{{ searchFeedbackData!.originalQuery }}</a
             >
-          </div>
+            </div>
+          }
         </div>
       </h2>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+  `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverviewTemplateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: OverviewTemplateComponent, decorators: [{
             type: Component,
             args: [{
+                    standalone: false,
                     selector: "app-overview-template",
                     template: `
     <ng-template
@@ -1028,12 +1144,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
           {{ searchFeedbackData!.endResultIndex }}</b
         >
         of <b>{{ searchFeedbackData!.totalResults }}</b> results
-        <span *ngIf="searchFeedbackData.searchTerm"
-          >for "<b>{{ searchFeedbackData!.searchTerm }}</b
-          >"
-        </span>
+        @if (searchFeedbackData.searchTerm) {
+          <span
+            >for "<b>{{ searchFeedbackData!.searchTerm }}</b
+            >"
+          </span>
+        }
         <div class="searchstax-feedback-container-suggested">
-          <div *ngIf="searchFeedbackData.autoCorrectedQuery">
+          @if (searchFeedbackData.autoCorrectedQuery) {
+            <div>
             Search instead for
             <a
               href="#"
@@ -1044,7 +1163,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
               "
               >{{ searchFeedbackData!.originalQuery }}</a
             >
-          </div>
+            </div>
+          }
         </div>
       </h2>
     </ng-template>
@@ -1052,19 +1172,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }]
         }], propDecorators: { overviewTemplate: [{
                 type: ViewChild,
-                args: ["feedbackTemplate"]
+                args: ["feedbackTemplate", { static: true }]
             }] } });
 
 class SearchstaxSearchFeedbackWidget {
-    constructor(storeServiceService) {
+    constructor(storeServiceService, ngZone, cdr) {
         this.storeServiceService = storeServiceService;
+        this.ngZone = ngZone;
+        this.cdr = cdr;
         this.searchFeedbackData = null;
         this.rand = Math.random();
         this.context = this;
     }
     ngOnInit() {
         if (this.storeServiceService.searchstax) {
-            this.attachObservables();
+            this.storeServiceService.whenDataLayerReady(() => {
+                this.attachObservables();
+            });
             setTimeout(() => {
                 this.storeServiceService.searchstax.addSearchFeedbackWidget("search-feedback-container" + this.rand, {});
             }, 0);
@@ -1078,24 +1202,24 @@ class SearchstaxSearchFeedbackWidget {
         context.storeServiceService.searchstax.searchFeedbackWidget?.onOriginalQueryClick(e);
     }
     attachObservables() {
-        this.storeServiceService.searchstax.dataLayer.$searchFeedbackData.subscribe((searchFeedbackData) => {
+        subscribeInNgZone(this.ngZone, this.storeServiceService.searchstax.dataLayer.$searchFeedbackData, (searchFeedbackData) => {
             this.searchFeedbackData = searchFeedbackData;
-        });
+        }, this.cdr);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchstaxSearchFeedbackWidget, deps: [{ token: StoreServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SearchstaxSearchFeedbackWidget, selector: "app-searchstax-search-feedback", inputs: { templateOverride: "templateOverride" }, ngImport: i0, template: "<div\n  class=\"search-feedback-container\"\n  [id]=\"'search-feedback-container' + rand\"\n>\n  <div\n    class=\"searchstax-feedback-container\"\n    *ngIf=\"\n      searchFeedbackData &&\n      searchFeedbackData?.searchExecuted &&\n      !templateOverride &&\n      searchFeedbackData?.totalResults\n    \"\n  >\n    <app-overview-template #ref></app-overview-template>\n    <ng-template\n      *ngTemplateOutlet=\"ref.overviewTemplate; context: context\"\n    ></ng-template>\n  </div>\n\n  <div\n    *ngIf=\"\n      searchFeedbackData &&\n      searchFeedbackData?.searchExecuted &&\n      templateOverride &&\n      searchFeedbackData?.totalResults\n    \"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"templateOverride; context: context\"\n    ></ng-container>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: OverviewTemplateComponent, selector: "app-overview-template" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SearchstaxSearchFeedbackWidget, deps: [{ token: StoreServiceService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: SearchstaxSearchFeedbackWidget, isStandalone: false, selector: "app-searchstax-search-feedback", inputs: { templateOverride: "templateOverride" }, ngImport: i0, template: "<div\n  class=\"search-feedback-container\"\n  [id]=\"'search-feedback-container' + rand\"\n>\n  @if (\n    searchFeedbackData &&\n    searchFeedbackData?.searchExecuted &&\n    !templateOverride &&\n    searchFeedbackData?.totalResults\n  ) {\n    <div class=\"searchstax-feedback-container\">\n      <app-overview-template #ref></app-overview-template>\n      <ng-container\n        [ngTemplateOutlet]=\"ref.overviewTemplate\"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n    </div>\n  }\n\n  @if (\n    searchFeedbackData &&\n    searchFeedbackData?.searchExecuted &&\n    templateOverride &&\n    searchFeedbackData?.totalResults\n  ) {\n    <div>\n      <ng-container\n        [ngTemplateOutlet]=\"templateOverride\"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: OverviewTemplateComponent, selector: "app-overview-template" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchstaxSearchFeedbackWidget, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SearchstaxSearchFeedbackWidget, decorators: [{
             type: Component,
-            args: [{ selector: "app-searchstax-search-feedback", template: "<div\n  class=\"search-feedback-container\"\n  [id]=\"'search-feedback-container' + rand\"\n>\n  <div\n    class=\"searchstax-feedback-container\"\n    *ngIf=\"\n      searchFeedbackData &&\n      searchFeedbackData?.searchExecuted &&\n      !templateOverride &&\n      searchFeedbackData?.totalResults\n    \"\n  >\n    <app-overview-template #ref></app-overview-template>\n    <ng-template\n      *ngTemplateOutlet=\"ref.overviewTemplate; context: context\"\n    ></ng-template>\n  </div>\n\n  <div\n    *ngIf=\"\n      searchFeedbackData &&\n      searchFeedbackData?.searchExecuted &&\n      templateOverride &&\n      searchFeedbackData?.totalResults\n    \"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"templateOverride; context: context\"\n    ></ng-container>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: StoreServiceService }], propDecorators: { templateOverride: [{
+            args: [{ standalone: false, selector: "app-searchstax-search-feedback", template: "<div\n  class=\"search-feedback-container\"\n  [id]=\"'search-feedback-container' + rand\"\n>\n  @if (\n    searchFeedbackData &&\n    searchFeedbackData?.searchExecuted &&\n    !templateOverride &&\n    searchFeedbackData?.totalResults\n  ) {\n    <div class=\"searchstax-feedback-container\">\n      <app-overview-template #ref></app-overview-template>\n      <ng-container\n        [ngTemplateOutlet]=\"ref.overviewTemplate\"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n    </div>\n  }\n\n  @if (\n    searchFeedbackData &&\n    searchFeedbackData?.searchExecuted &&\n    templateOverride &&\n    searchFeedbackData?.totalResults\n  ) {\n    <div>\n      <ng-container\n        [ngTemplateOutlet]=\"templateOverride\"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n    </div>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [{ type: StoreServiceService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { templateOverride: [{
                 type: Input
             }] } });
 
 // reusable-template.component.ts
 class PaginationTemplateComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaginationTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PaginationTemplateComponent, selector: "app-pagination-template", viewQueries: [{ propertyName: "paginationTemplate", first: true, predicate: ["paginationTemplate"], descendants: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: PaginationTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: PaginationTemplateComponent, isStandalone: false, selector: "app-pagination-template", viewQueries: [{ propertyName: "paginationTemplate", first: true, predicate: ["paginationTemplate"], descendants: true, static: true }], ngImport: i0, template: `
     <ng-template
       #paginationTemplate
       let-paginationData="paginationData"
@@ -1136,9 +1260,10 @@ class PaginationTemplateComponent {
     </ng-template>
   `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaginationTemplateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: PaginationTemplateComponent, decorators: [{
             type: Component,
             args: [{
+                    standalone: false,
                     selector: "app-pagination-template",
                     template: `
     <ng-template
@@ -1183,13 +1308,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }]
         }], propDecorators: { paginationTemplate: [{
                 type: ViewChild,
-                args: ["paginationTemplate"]
+                args: ["paginationTemplate", { static: true }]
             }] } });
 
 // reusable-template.component.ts
 class PaginationInfiniteTemplateComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaginationInfiniteTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PaginationInfiniteTemplateComponent, selector: "app-pagination-infinite-template", viewQueries: [{ propertyName: "infiniteScrollTemplate", first: true, predicate: ["infiniteScrollTemplate"], descendants: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: PaginationInfiniteTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: PaginationInfiniteTemplateComponent, isStandalone: false, selector: "app-pagination-infinite-template", viewQueries: [{ propertyName: "infiniteScrollTemplate", first: true, predicate: ["infiniteScrollTemplate"], descendants: true, static: true }], ngImport: i0, template: `
     <ng-template
       #infiniteScrollTemplate
       let-paginationData="paginationData"
@@ -1212,9 +1337,10 @@ class PaginationInfiniteTemplateComponent {
     </ng-template>
   `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaginationInfiniteTemplateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: PaginationInfiniteTemplateComponent, decorators: [{
             type: Component,
             args: [{
+                    standalone: false,
                     selector: "app-pagination-infinite-template",
                     template: `
     <ng-template
@@ -1241,12 +1367,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }]
         }], propDecorators: { infiniteScrollTemplate: [{
                 type: ViewChild,
-                args: ["infiniteScrollTemplate"]
+                args: ["infiniteScrollTemplate", { static: true }]
             }] } });
 
 class SearchstaxSearchPaginationWidget {
-    constructor(storeServiceService) {
+    constructor(storeServiceService, ngZone, cdr) {
         this.storeServiceService = storeServiceService;
+        this.ngZone = ngZone;
+        this.cdr = cdr;
         this.paginationData = null;
         this.rand = Math.random();
         this.context = this;
@@ -1254,7 +1382,9 @@ class SearchstaxSearchPaginationWidget {
     }
     ngOnInit() {
         if (this.storeServiceService.searchstax) {
-            this.attachObservables();
+            this.storeServiceService.whenDataLayerReady(() => {
+                this.attachObservables();
+            });
             setTimeout(() => {
                 this.addWidget();
             }, 0);
@@ -1283,20 +1413,20 @@ class SearchstaxSearchPaginationWidget {
         }
     }
     attachObservables() {
-        this.storeServiceService.searchstax.dataLayer.$searchObject.subscribe((pagination) => {
+        subscribeInNgZone(this.ngZone, this.storeServiceService.searchstax.dataLayer.$searchObject, (_pagination) => {
             this.addWidget();
-        });
-        this.storeServiceService.searchstax.dataLayer.$paginationData.subscribe((pagination) => {
+        }, this.cdr);
+        subscribeInNgZone(this.ngZone, this.storeServiceService.searchstax.dataLayer.$paginationData, (pagination) => {
             this.paginationData = pagination;
-        });
+        }, this.cdr);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchstaxSearchPaginationWidget, deps: [{ token: StoreServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SearchstaxSearchPaginationWidget, selector: "app-searchstax-search-pagination", inputs: { templateOverride: "templateOverride", infiniteScrollTemplateOverride: "infiniteScrollTemplateOverride" }, ngImport: i0, template: "<div [id]=\"'searchstax-pagination-container' + rand\">\n  <ng-container\n    *ngIf=\"\n      paginationData?.totalResults &&\n      !templateOverride &&\n      !paginationData?.isInfiniteScroll\n    \"\n  >\n    <app-pagination-template #ref></app-pagination-template>\n    <ng-template\n      *ngTemplateOutlet=\"ref.paginationTemplate; context: context\"\n    ></ng-template>\n  </ng-container>\n\n  <div\n    *ngIf=\"\n      paginationData?.totalResults &&\n      templateOverride &&\n      !paginationData?.isInfiniteScroll\n    \"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"templateOverride; context: context\"\n    ></ng-container>\n  </div>\n\n  <ng-container\n    *ngIf=\"\n      paginationData?.totalResults &&\n      !infiniteScrollTemplateOverride &&\n      paginationData?.totalResults !== 0 &&\n      !paginationData?.isLastPage &&\n      paginationData?.isInfiniteScroll\n    \"\n  >\n    <app-pagination-infinite-template #ref></app-pagination-infinite-template>\n    <ng-template\n      *ngTemplateOutlet=\"ref.infiniteScrollTemplate; context: context\"\n    ></ng-template>\n  </ng-container>\n\n  <div\n    *ngIf=\"\n      paginationData?.totalResults &&\n      infiniteScrollTemplateOverride &&\n      paginationData?.totalResults !== 0 &&\n      !paginationData?.isLastPage &&\n      paginationData?.isInfiniteScroll\n    \"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"infiniteScrollTemplateOverride; context: context\"\n    ></ng-container>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginationTemplateComponent, selector: "app-pagination-template" }, { kind: "component", type: PaginationInfiniteTemplateComponent, selector: "app-pagination-infinite-template" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SearchstaxSearchPaginationWidget, deps: [{ token: StoreServiceService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: SearchstaxSearchPaginationWidget, isStandalone: false, selector: "app-searchstax-search-pagination", inputs: { templateOverride: "templateOverride", infiniteScrollTemplateOverride: "infiniteScrollTemplateOverride" }, ngImport: i0, template: "<div [id]=\"'searchstax-pagination-container' + rand\">\n  @if (\n    paginationData?.totalResults &&\n    !templateOverride &&\n    !paginationData?.isInfiniteScroll\n  ) {\n    <ng-container>\n      <app-pagination-template #paginationTpl></app-pagination-template>\n      <ng-container\n        [ngTemplateOutlet]=\"paginationTpl.paginationTemplate\"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n    </ng-container>\n  }\n\n  @if (\n    paginationData?.totalResults &&\n    templateOverride &&\n    !paginationData?.isInfiniteScroll\n  ) {\n    <div>\n      <ng-container\n        [ngTemplateOutlet]=\"templateOverride\"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n    </div>\n  }\n\n  @if (\n    paginationData?.totalResults &&\n    !infiniteScrollTemplateOverride &&\n    paginationData?.totalResults !== 0 &&\n    !paginationData?.isLastPage &&\n    paginationData?.isInfiniteScroll\n  ) {\n    <ng-container>\n      <app-pagination-infinite-template\n        #infiniteScrollTpl\n      ></app-pagination-infinite-template>\n      <ng-container\n        [ngTemplateOutlet]=\"infiniteScrollTpl.infiniteScrollTemplate\"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n    </ng-container>\n  }\n\n  @if (\n    paginationData?.totalResults &&\n    infiniteScrollTemplateOverride &&\n    paginationData?.totalResults !== 0 &&\n    !paginationData?.isLastPage &&\n    paginationData?.isInfiniteScroll\n  ) {\n    <div>\n      <ng-container\n        [ngTemplateOutlet]=\"infiniteScrollTemplateOverride\"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginationTemplateComponent, selector: "app-pagination-template" }, { kind: "component", type: PaginationInfiniteTemplateComponent, selector: "app-pagination-infinite-template" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchstaxSearchPaginationWidget, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SearchstaxSearchPaginationWidget, decorators: [{
             type: Component,
-            args: [{ selector: "app-searchstax-search-pagination", template: "<div [id]=\"'searchstax-pagination-container' + rand\">\n  <ng-container\n    *ngIf=\"\n      paginationData?.totalResults &&\n      !templateOverride &&\n      !paginationData?.isInfiniteScroll\n    \"\n  >\n    <app-pagination-template #ref></app-pagination-template>\n    <ng-template\n      *ngTemplateOutlet=\"ref.paginationTemplate; context: context\"\n    ></ng-template>\n  </ng-container>\n\n  <div\n    *ngIf=\"\n      paginationData?.totalResults &&\n      templateOverride &&\n      !paginationData?.isInfiniteScroll\n    \"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"templateOverride; context: context\"\n    ></ng-container>\n  </div>\n\n  <ng-container\n    *ngIf=\"\n      paginationData?.totalResults &&\n      !infiniteScrollTemplateOverride &&\n      paginationData?.totalResults !== 0 &&\n      !paginationData?.isLastPage &&\n      paginationData?.isInfiniteScroll\n    \"\n  >\n    <app-pagination-infinite-template #ref></app-pagination-infinite-template>\n    <ng-template\n      *ngTemplateOutlet=\"ref.infiniteScrollTemplate; context: context\"\n    ></ng-template>\n  </ng-container>\n\n  <div\n    *ngIf=\"\n      paginationData?.totalResults &&\n      infiniteScrollTemplateOverride &&\n      paginationData?.totalResults !== 0 &&\n      !paginationData?.isLastPage &&\n      paginationData?.isInfiniteScroll\n    \"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"infiniteScrollTemplateOverride; context: context\"\n    ></ng-container>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: StoreServiceService }], propDecorators: { templateOverride: [{
+            args: [{ standalone: false, selector: "app-searchstax-search-pagination", template: "<div [id]=\"'searchstax-pagination-container' + rand\">\n  @if (\n    paginationData?.totalResults &&\n    !templateOverride &&\n    !paginationData?.isInfiniteScroll\n  ) {\n    <ng-container>\n      <app-pagination-template #paginationTpl></app-pagination-template>\n      <ng-container\n        [ngTemplateOutlet]=\"paginationTpl.paginationTemplate\"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n    </ng-container>\n  }\n\n  @if (\n    paginationData?.totalResults &&\n    templateOverride &&\n    !paginationData?.isInfiniteScroll\n  ) {\n    <div>\n      <ng-container\n        [ngTemplateOutlet]=\"templateOverride\"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n    </div>\n  }\n\n  @if (\n    paginationData?.totalResults &&\n    !infiniteScrollTemplateOverride &&\n    paginationData?.totalResults !== 0 &&\n    !paginationData?.isLastPage &&\n    paginationData?.isInfiniteScroll\n  ) {\n    <ng-container>\n      <app-pagination-infinite-template\n        #infiniteScrollTpl\n      ></app-pagination-infinite-template>\n      <ng-container\n        [ngTemplateOutlet]=\"infiniteScrollTpl.infiniteScrollTemplate\"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n    </ng-container>\n  }\n\n  @if (\n    paginationData?.totalResults &&\n    infiniteScrollTemplateOverride &&\n    paginationData?.totalResults !== 0 &&\n    !paginationData?.isLastPage &&\n    paginationData?.isInfiniteScroll\n  ) {\n    <div>\n      <ng-container\n        [ngTemplateOutlet]=\"infiniteScrollTemplateOverride\"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n    </div>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [{ type: StoreServiceService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { templateOverride: [{
                 type: Input
             }], infiniteScrollTemplateOverride: [{
                 type: Input
@@ -1304,8 +1434,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 
 // reusable-template.component.ts
 class FacetDesktopTemplateComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FacetDesktopTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FacetDesktopTemplateComponent, selector: "app-facet-desktop-template", viewQueries: [{ propertyName: "templateOverrideDesktop", first: true, predicate: ["templateOverrideDesktop"], descendants: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FacetDesktopTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: FacetDesktopTemplateComponent, isStandalone: false, selector: "app-facet-desktop-template", viewQueries: [{ propertyName: "templateOverrideDesktop", first: true, predicate: ["templateOverrideDesktop"], descendants: true, static: true }], ngImport: i0, template: `
     <ng-template
       #templateOverrideDesktop
       let-facetsTemplateDataDesktop="facetsTemplateDataDesktop"
@@ -1318,11 +1448,14 @@ class FacetDesktopTemplateComponent {
       let-showMoreLessDesktop="showMoreLessDesktop"
     >
       <div class="searchstax-facets-container-desktop">
-        <div
-          class="searchstax-facet-container"
-          *ngFor="let facet of facetsTemplateDataDesktop?.facets"
-          [class]="{ active: isNotDeactivated(facet.name, context) }"
-        >
+        @for (
+          facet of facetsTemplateDataDesktop?.facets ?? [];
+          track facet.name
+        ) {
+          <div
+            class="searchstax-facet-container"
+            [class]="{ active: isNotDeactivated(facet.name, context) }"
+          >
           <div>
             <div
               class="searchstax-facet-title-container"
@@ -1334,14 +1467,17 @@ class FacetDesktopTemplateComponent {
               <div class="searchstax-facet-title-arrow active"></div>
             </div>
             <div class="searchstax-facet-values-container" aria-live="polite">
-              <div
-                *ngFor="let facetValue of facetValues(facet); index as key"
-                class="searchstax-facet-value-container"
-                [class]="{
-                  'searchstax-facet-value-disabled': facetValue.disabled
-                }"
-                #ref
-              >
+              @for (
+                facetValue of facetValues(facet);
+                track $index
+              ) {
+                <div
+                  class="searchstax-facet-value-container"
+                  [class]="{
+                    'searchstax-facet-value-disabled': facetValue.disabled
+                  }"
+                  #facetValueRow
+                >
                 <div class="searchstax-facet-input">
                   <input
                     type="checkbox"
@@ -1352,59 +1488,67 @@ class FacetDesktopTemplateComponent {
                     "
                     [disabled]="facetValue.disabled"
                     (click)="
-                      selectFacet(ref, $event, facetValue, true, context)
+                      selectFacet(facetValueRow, $event, facetValue, true, context)
                     "
                   />
                 </div>
                 <div
                   class="searchstax-facet-value-label"
-                  (click)="selectFacet(ref, $event, facetValue, false, context)"
+                  (click)="
+                    selectFacet(facetValueRow, $event, facetValue, false, context)
+                  "
                 >
                   {{ facetValue.value }}
                 </div>
                 <div
                   class="searchstax-facet-value-count"
-                  (click)="selectFacet(ref, $event, facetValue, false, context)"
+                  (click)="
+                    selectFacet(facetValueRow, $event, facetValue, false, context)
+                  "
                 >
                   ({{ facetValue.count }})
                 </div>
-              </div>
-              <div
-                class="searchstax-facet-show-more-container"
-                *ngIf="facet.hasMoreFacets"
-              >
-                <div
-                  class="searchstax-facet-show-more-container"
-                  (click)="showMoreLessDesktop($event, facet, context)"
-                  (keyup.enter)="showMoreLessDesktop($event, facet, context)"
-                  (keyup.space)="showMoreLessDesktop($event, facet, context)"
-                  tabindex="0"
-                  role="button"
-                >
-                  <div
-                    *ngIf="facet.showingAllFacets"
-                    class="searchstax-facet-show-less-button searchstax-facet-show-button"
-                  >
-                    less
-                  </div>
+                </div>
+              }
+              @if (facet.hasMoreFacets) {
+                <div class="searchstax-facet-show-more-container">
                   <div
-                    *ngIf="!facet.showingAllFacets"
-                    class="searchstax-facet-show-more-button searchstax-facet-show-button"
+                    class="searchstax-facet-show-more-container"
+                    (click)="showMoreLessDesktop($event, facet, context)"
+                    (keyup.enter)="showMoreLessDesktop($event, facet, context)"
+                    (keyup.space)="showMoreLessDesktop($event, facet, context)"
+                    tabindex="0"
+                    role="button"
                   >
-                    more
+                    @if (facet.showingAllFacets) {
+                      <div
+                        class="searchstax-facet-show-less-button searchstax-facet-show-button"
+                      >
+                        less
+                      </div>
+                    }
+                    @if (!facet.showingAllFacets) {
+                      <div
+                        class="searchstax-facet-show-more-button searchstax-facet-show-button"
+                      >
+                        more
+                      </div>
+                    }
                   </div>
                 </div>
-              </div>
+              }
             </div>
           </div>
-        </div>
+          </div>
+        }
       </div>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+  `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FacetDesktopTemplateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FacetDesktopTemplateComponent, decorators: [{
             type: Component,
             args: [{
+                    standalone: false,
                     selector: "app-facet-desktop-template",
                     template: `
     <ng-template
@@ -1419,11 +1563,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
       let-showMoreLessDesktop="showMoreLessDesktop"
     >
       <div class="searchstax-facets-container-desktop">
-        <div
-          class="searchstax-facet-container"
-          *ngFor="let facet of facetsTemplateDataDesktop?.facets"
-          [class]="{ active: isNotDeactivated(facet.name, context) }"
-        >
+        @for (
+          facet of facetsTemplateDataDesktop?.facets ?? [];
+          track facet.name
+        ) {
+          <div
+            class="searchstax-facet-container"
+            [class]="{ active: isNotDeactivated(facet.name, context) }"
+          >
           <div>
             <div
               class="searchstax-facet-title-container"
@@ -1435,14 +1582,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
               <div class="searchstax-facet-title-arrow active"></div>
             </div>
             <div class="searchstax-facet-values-container" aria-live="polite">
-              <div
-                *ngFor="let facetValue of facetValues(facet); index as key"
-                class="searchstax-facet-value-container"
-                [class]="{
-                  'searchstax-facet-value-disabled': facetValue.disabled
-                }"
-                #ref
-              >
+              @for (
+                facetValue of facetValues(facet);
+                track $index
+              ) {
+                <div
+                  class="searchstax-facet-value-container"
+                  [class]="{
+                    'searchstax-facet-value-disabled': facetValue.disabled
+                  }"
+                  #facetValueRow
+                >
                 <div class="searchstax-facet-input">
                   <input
                     type="checkbox"
@@ -1453,65 +1603,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     "
                     [disabled]="facetValue.disabled"
                     (click)="
-                      selectFacet(ref, $event, facetValue, true, context)
+                      selectFacet(facetValueRow, $event, facetValue, true, context)
                     "
                   />
                 </div>
                 <div
                   class="searchstax-facet-value-label"
-                  (click)="selectFacet(ref, $event, facetValue, false, context)"
+                  (click)="
+                    selectFacet(facetValueRow, $event, facetValue, false, context)
+                  "
                 >
                   {{ facetValue.value }}
                 </div>
                 <div
                   class="searchstax-facet-value-count"
-                  (click)="selectFacet(ref, $event, facetValue, false, context)"
+                  (click)="
+                    selectFacet(facetValueRow, $event, facetValue, false, context)
+                  "
                 >
                   ({{ facetValue.count }})
                 </div>
-              </div>
-              <div
-                class="searchstax-facet-show-more-container"
-                *ngIf="facet.hasMoreFacets"
-              >
-                <div
-                  class="searchstax-facet-show-more-container"
-                  (click)="showMoreLessDesktop($event, facet, context)"
-                  (keyup.enter)="showMoreLessDesktop($event, facet, context)"
-                  (keyup.space)="showMoreLessDesktop($event, facet, context)"
-                  tabindex="0"
-                  role="button"
-                >
-                  <div
-                    *ngIf="facet.showingAllFacets"
-                    class="searchstax-facet-show-less-button searchstax-facet-show-button"
-                  >
-                    less
-                  </div>
+                </div>
+              }
+              @if (facet.hasMoreFacets) {
+                <div class="searchstax-facet-show-more-container">
                   <div
-                    *ngIf="!facet.showingAllFacets"
-                    class="searchstax-facet-show-more-button searchstax-facet-show-button"
+                    class="searchstax-facet-show-more-container"
+                    (click)="showMoreLessDesktop($event, facet, context)"
+                    (keyup.enter)="showMoreLessDesktop($event, facet, context)"
+                    (keyup.space)="showMoreLessDesktop($event, facet, context)"
+                    tabindex="0"
+                    role="button"
                   >
-                    more
+                    @if (facet.showingAllFacets) {
+                      <div
+                        class="searchstax-facet-show-less-button searchstax-facet-show-button"
+                      >
+                        less
+                      </div>
+                    }
+                    @if (!facet.showingAllFacets) {
+                      <div
+                        class="searchstax-facet-show-more-button searchstax-facet-show-button"
+                      >
+                        more
+                      </div>
+                    }
                   </div>
                 </div>
-              </div>
+              }
             </div>
           </div>
-        </div>
+          </div>
+        }
       </div>
     </ng-template>
   `,
                 }]
         }], propDecorators: { templateOverrideDesktop: [{
                 type: ViewChild,
-                args: ["templateOverrideDesktop"]
+                args: ["templateOverrideDesktop", { static: true }]
             }] } });
 
 // reusable-template.component.ts
 class FacetMobileTemplateComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FacetMobileTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FacetMobileTemplateComponent, selector: "app-facet-mobile-template", viewQueries: [{ propertyName: "templateOverrideMobile", first: true, predicate: ["templateOverrideMobile"], descendants: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FacetMobileTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: FacetMobileTemplateComponent, isStandalone: false, selector: "app-facet-mobile-template", viewQueries: [{ propertyName: "templateOverrideMobile", first: true, predicate: ["templateOverrideMobile"], descendants: true, static: true }], ngImport: i0, template: `
     <ng-template
       #templateOverrideMobile
       let-isNotDeactivated="isNotDeactivated"
@@ -1539,24 +1696,26 @@ class FacetMobileTemplateComponent {
             <div class="searchstax-facets-pill-label">Filter By</div>
           </div>
           <div class="searchstax-facets-pills-selected">
-            <div
-              class="searchstax-facets-pill searchstax-facets-pill-facets"
-              *ngFor="let facet of selectedFacetsCheckboxes"
-              (click)="unselectFacet(facet, context)"
-            >
+            @for (facet of selectedFacetsCheckboxes; track $index) {
+              <div
+                class="searchstax-facets-pill searchstax-facets-pill-facets"
+                (click)="unselectFacet(facet, context)"
+              >
               <div class="searchstax-facets-pill-label">
                 {{ facet.value }} ({{ facet.count }})
               </div>
               <div class="searchstax-facets-pill-icon-close"></div>
-            </div>
+              </div>
+            }
           </div>
-          <div
-            class="searchstax-facets-pill searchstax-clear-filters searchstax-facets-pill-clear-all"
-            *ngIf="selectedFacetsCheckboxes.length"
-            (click)="unselectAll(context)"
-          >
+          @if (selectedFacetsCheckboxes.length) {
+            <div
+              class="searchstax-facets-pill searchstax-clear-filters searchstax-facets-pill-clear-all"
+              (click)="unselectAll(context)"
+            >
             <div class="searchstax-facets-pill-label">Clear Filters</div>
-          </div>
+            </div>
+          }
         </div>
         <div
           class="searchstax-facets-mobile-overlay"
@@ -1575,13 +1734,16 @@ class FacetMobileTemplateComponent {
             ></div>
           </div>
           <div class="searchstax-facets-container-mobile">
-            <div
-              *ngFor="let facet of facetsTemplateDataMobile?.facets"
-              class="searchstax-facet-container"
-              [class]="{
-                active: isNotDeactivated(facet.name, context)
-              }"
-            >
+            @for (
+              facet of facetsTemplateDataMobile?.facets ?? [];
+              track facet.name
+            ) {
+              <div
+                class="searchstax-facet-container"
+                [class]="{
+                  active: isNotDeactivated(facet.name, context)
+                }"
+              >
               <div>
                 <div
                   class="searchstax-facet-title-container"
@@ -1596,14 +1758,17 @@ class FacetMobileTemplateComponent {
                   class="searchstax-facet-values-container"
                   aria-live="polite"
                 >
-                  <div
-                    *ngFor="let facetValue of facetValues(facet); index as key"
-                    class="searchstax-facet-value-container"
-                    [class]="{
-                      'searchstax-facet-value-disabled': facetValue.disabled
-                    }"
-                    #ref
-                  >
+                  @for (
+                    facetValue of facetValues(facet);
+                    track $index
+                  ) {
+                    <div
+                      class="searchstax-facet-value-container"
+                      [class]="{
+                        'searchstax-facet-value-disabled': facetValue.disabled
+                      }"
+                      #facetValueRow
+                    >
                     <div class="searchstax-facet-input">
                       <input
                         type="checkbox"
@@ -1614,14 +1779,14 @@ class FacetMobileTemplateComponent {
                         "
                         [disabled]="facetValue.disabled"
                         (click)="
-                          selectFacet(ref, $event, facetValue, true, context)
+                          selectFacet(facetValueRow, $event, facetValue, true, context)
                         "
                       />
                     </div>
                     <div
                       class="searchstax-facet-value-label"
                       (click)="
-                        selectFacet(ref, $event, facetValue, false, context)
+                        selectFacet(facetValueRow, $event, facetValue, false, context)
                       "
                     >
                       {{ facetValue.value }}
@@ -1629,40 +1794,43 @@ class FacetMobileTemplateComponent {
                     <div
                       class="searchstax-facet-value-count"
                       (click)="
-                        selectFacet(ref, $event, facetValue, false, context)
+                        selectFacet(facetValueRow, $event, facetValue, false, context)
                       "
                     >
                       ({{ facetValue.count }})
                     </div>
-                  </div>
-                  <div
-                    class="searchstax-facet-show-more-container"
-                    *ngIf="facet.hasMoreFacets"
-                  >
-                    <div
-                      class="searchstax-facet-show-more-container"
-                      (click)="showMoreLessMobile($event, facet, context)"
-                      (keyup.enter)="showMoreLessMobile($event, facet, context)"
-                      (keyup.space)="showMoreLessMobile($event, facet, context)"
-                      tabindex="0"
-                    >
-                      <div
-                        *ngIf="facet.showingAllFacets"
-                        class="searchstax-facet-show-less-button searchstax-facet-show-button"
-                      >
-                        less
-                      </div>
+                    </div>
+                  }
+                  @if (facet.hasMoreFacets) {
+                    <div class="searchstax-facet-show-more-container">
                       <div
-                        *ngIf="!facet.showingAllFacets"
-                        class="searchstax-facet-show-more-button searchstax-facet-show-button"
+                        class="searchstax-facet-show-more-container"
+                        (click)="showMoreLessMobile($event, facet, context)"
+                        (keyup.enter)="showMoreLessMobile($event, facet, context)"
+                        (keyup.space)="showMoreLessMobile($event, facet, context)"
+                        tabindex="0"
                       >
-                        more
+                        @if (facet.showingAllFacets) {
+                          <div
+                            class="searchstax-facet-show-less-button searchstax-facet-show-button"
+                          >
+                            less
+                          </div>
+                        }
+                        @if (!facet.showingAllFacets) {
+                          <div
+                            class="searchstax-facet-show-more-button searchstax-facet-show-button"
+                          >
+                            more
+                          </div>
+                        }
                       </div>
                     </div>
-                  </div>
+                  }
                 </div>
               </div>
-            </div>
+              </div>
+            }
           </div>
           <button
             class="searchstax-facets-mobile-overlay-done"
@@ -1673,11 +1841,12 @@ class FacetMobileTemplateComponent {
         </div>
       </div>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+  `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FacetMobileTemplateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FacetMobileTemplateComponent, decorators: [{
             type: Component,
             args: [{
+                    standalone: false,
                     selector: "app-facet-mobile-template",
                     template: `
     <ng-template
@@ -1707,24 +1876,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             <div class="searchstax-facets-pill-label">Filter By</div>
           </div>
           <div class="searchstax-facets-pills-selected">
-            <div
-              class="searchstax-facets-pill searchstax-facets-pill-facets"
-              *ngFor="let facet of selectedFacetsCheckboxes"
-              (click)="unselectFacet(facet, context)"
-            >
+            @for (facet of selectedFacetsCheckboxes; track $index) {
+              <div
+                class="searchstax-facets-pill searchstax-facets-pill-facets"
+                (click)="unselectFacet(facet, context)"
+              >
               <div class="searchstax-facets-pill-label">
                 {{ facet.value }} ({{ facet.count }})
               </div>
               <div class="searchstax-facets-pill-icon-close"></div>
-            </div>
+              </div>
+            }
           </div>
-          <div
-            class="searchstax-facets-pill searchstax-clear-filters searchstax-facets-pill-clear-all"
-            *ngIf="selectedFacetsCheckboxes.length"
-            (click)="unselectAll(context)"
-          >
+          @if (selectedFacetsCheckboxes.length) {
+            <div
+              class="searchstax-facets-pill searchstax-clear-filters searchstax-facets-pill-clear-all"
+              (click)="unselectAll(context)"
+            >
             <div class="searchstax-facets-pill-label">Clear Filters</div>
-          </div>
+            </div>
+          }
         </div>
         <div
           class="searchstax-facets-mobile-overlay"
@@ -1743,13 +1914,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             ></div>
           </div>
           <div class="searchstax-facets-container-mobile">
-            <div
-              *ngFor="let facet of facetsTemplateDataMobile?.facets"
-              class="searchstax-facet-container"
-              [class]="{
-                active: isNotDeactivated(facet.name, context)
-              }"
-            >
+            @for (
+              facet of facetsTemplateDataMobile?.facets ?? [];
+              track facet.name
+            ) {
+              <div
+                class="searchstax-facet-container"
+                [class]="{
+                  active: isNotDeactivated(facet.name, context)
+                }"
+              >
               <div>
                 <div
                   class="searchstax-facet-title-container"
@@ -1764,14 +1938,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                   class="searchstax-facet-values-container"
                   aria-live="polite"
                 >
-                  <div
-                    *ngFor="let facetValue of facetValues(facet); index as key"
-                    class="searchstax-facet-value-container"
-                    [class]="{
-                      'searchstax-facet-value-disabled': facetValue.disabled
-                    }"
-                    #ref
-                  >
+                  @for (
+                    facetValue of facetValues(facet);
+                    track $index
+                  ) {
+                    <div
+                      class="searchstax-facet-value-container"
+                      [class]="{
+                        'searchstax-facet-value-disabled': facetValue.disabled
+                      }"
+                      #facetValueRow
+                    >
                     <div class="searchstax-facet-input">
                       <input
                         type="checkbox"
@@ -1782,14 +1959,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         "
                         [disabled]="facetValue.disabled"
                         (click)="
-                          selectFacet(ref, $event, facetValue, true, context)
+                          selectFacet(facetValueRow, $event, facetValue, true, context)
                         "
                       />
                     </div>
                     <div
                       class="searchstax-facet-value-label"
                       (click)="
-                        selectFacet(ref, $event, facetValue, false, context)
+                        selectFacet(facetValueRow, $event, facetValue, false, context)
                       "
                     >
                       {{ facetValue.value }}
@@ -1797,40 +1974,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     <div
                       class="searchstax-facet-value-count"
                       (click)="
-                        selectFacet(ref, $event, facetValue, false, context)
+                        selectFacet(facetValueRow, $event, facetValue, false, context)
                       "
                     >
                       ({{ facetValue.count }})
                     </div>
-                  </div>
-                  <div
-                    class="searchstax-facet-show-more-container"
-                    *ngIf="facet.hasMoreFacets"
-                  >
-                    <div
-                      class="searchstax-facet-show-more-container"
-                      (click)="showMoreLessMobile($event, facet, context)"
-                      (keyup.enter)="showMoreLessMobile($event, facet, context)"
-                      (keyup.space)="showMoreLessMobile($event, facet, context)"
-                      tabindex="0"
-                    >
+                    </div>
+                  }
+                  @if (facet.hasMoreFacets) {
+                    <div class="searchstax-facet-show-more-container">
                       <div
-                        *ngIf="facet.showingAllFacets"
-                        class="searchstax-facet-show-less-button searchstax-facet-show-button"
+                        class="searchstax-facet-show-more-container"
+                        (click)="showMoreLessMobile($event, facet, context)"
+                        (keyup.enter)="showMoreLessMobile($event, facet, context)"
+                        (keyup.space)="showMoreLessMobile($event, facet, context)"
+                        tabindex="0"
                       >
-                        less
-                      </div>
-                      <div
-                        *ngIf="!facet.showingAllFacets"
-                        class="searchstax-facet-show-more-button searchstax-facet-show-button"
-                      >
-                        more
+                        @if (facet.showingAllFacets) {
+                          <div
+                            class="searchstax-facet-show-less-button searchstax-facet-show-button"
+                          >
+                            less
+                          </div>
+                        }
+                        @if (!facet.showingAllFacets) {
+                          <div
+                            class="searchstax-facet-show-more-button searchstax-facet-show-button"
+                          >
+                            more
+                          </div>
+                        }
                       </div>
                     </div>
-                  </div>
+                  }
                 </div>
               </div>
-            </div>
+              </div>
+            }
           </div>
           <button
             class="searchstax-facets-mobile-overlay-done"
@@ -1845,13 +2025,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }]
         }], propDecorators: { templateOverrideMobile: [{
                 type: ViewChild,
-                args: ["templateOverrideMobile"]
+                args: ["templateOverrideMobile", { static: true }]
             }] } });
 
 class SearchstaxSearchFacetsWidget {
     // @ViewChildren("facetContainers") facetContainers: QueryList<ElementRef>;
-    constructor(storeServiceService) {
+    constructor(storeServiceService, ngZone, cdr) {
         this.storeServiceService = storeServiceService;
+        this.ngZone = ngZone;
+        this.cdr = cdr;
         this.facetsTemplateDataDesktop = null;
         this.facetsTemplateDataMobile = null;
         this.context = this;
@@ -1861,7 +2043,9 @@ class SearchstaxSearchFacetsWidget {
     }
     ngOnInit() {
         if (this.storeServiceService.searchstax) {
-            this.attachObservables();
+            this.storeServiceService.whenDataLayerReady(() => {
+                this.attachObservables();
+            });
             setTimeout(() => {
                 this.addWidget();
             }, 0);
@@ -1882,18 +2066,18 @@ class SearchstaxSearchFacetsWidget {
         });
     }
     attachObservables() {
-        this.storeServiceService.searchstax.dataLayer.$facetsTemplateData.subscribe((data) => {
+        subscribeInNgZone(this.ngZone, this.storeServiceService.searchstax.dataLayer.$facetsTemplateData, (data) => {
             if (data?.isMobile) {
                 this.facetsTemplateDataMobile = data;
             }
             else {
                 this.facetsTemplateDataDesktop = data;
             }
-        });
-        this.storeServiceService.searchstax.dataLayer.$selectedFacetsTemplateData.subscribe((data) => {
+        }, this.cdr);
+        subscribeInNgZone(this.ngZone, this.storeServiceService.searchstax.dataLayer.$selectedFacetsTemplateData, (data) => {
             const da = data ?? [];
-            this.selectedFacetsCheckboxes = da.filter((d) => d.type === 'checkbox');
-        });
+            this.selectedFacetsCheckboxes = da.filter((d) => d.type === "checkbox");
+        }, this.cdr);
     }
     unselectFacet(facet, context) {
         context.storeServiceService.searchstax.searchFacetsWidget?.unselectFacet(facet);
@@ -1939,13 +2123,13 @@ class SearchstaxSearchFacetsWidget {
     facetMobileData(facet) {
         return facet;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchstaxSearchFacetsWidget, deps: [{ token: StoreServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SearchstaxSearchFacetsWidget, selector: "app-searchstax-search-facets", inputs: { templateOverrideMobile: "templateOverrideMobile", templateOverrideDesktop: "templateOverrideDesktop", facetingType: "facetingType", itemsPerPageDesktop: "itemsPerPageDesktop", itemsPerPageMobile: "itemsPerPageMobile", specificFacets: "specificFacets", beforeFacetsRender: "beforeFacetsRender" }, ngImport: i0, template: "<div [id]=\"'searchstax-facets-container' + rand\">\n  <ng-container\n    *ngIf=\"\n      facetsTemplateDataDesktop?.hasResultsOrExternalPromotions &&\n      !templateOverrideDesktop\n    \"\n  >\n    <app-facet-desktop-template #ref></app-facet-desktop-template>\n    <ng-template\n      *ngTemplateOutlet=\"ref.templateOverrideDesktop; context: context\"\n    ></ng-template>\n  </ng-container>\n\n  <div\n    *ngIf=\"\n      facetsTemplateDataDesktop?.hasResultsOrExternalPromotions &&\n      templateOverrideDesktop\n    \"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"templateOverrideDesktop; context: context\"\n    ></ng-container>\n  </div>\n\n  <ng-container\n    *ngIf=\"\n      facetsTemplateDataMobile?.hasResultsOrExternalPromotions &&\n      !templateOverrideMobile\n    \"\n  >\n    <app-facet-mobile-template #ref></app-facet-mobile-template>\n    <ng-template\n      *ngTemplateOutlet=\"ref.templateOverrideMobile; context: context\"\n    ></ng-template>\n  </ng-container>\n\n  <div\n    *ngIf=\"\n      facetsTemplateDataMobile?.hasResultsOrExternalPromotions &&\n      templateOverrideMobile\n    \"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"templateOverrideMobile; context: context\"\n    ></ng-container>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FacetDesktopTemplateComponent, selector: "app-facet-desktop-template" }, { kind: "component", type: FacetMobileTemplateComponent, selector: "app-facet-mobile-template" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SearchstaxSearchFacetsWidget, deps: [{ token: StoreServiceService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: SearchstaxSearchFacetsWidget, isStandalone: false, selector: "app-searchstax-search-facets", inputs: { templateOverrideMobile: "templateOverrideMobile", templateOverrideDesktop: "templateOverrideDesktop", facetingType: "facetingType", itemsPerPageDesktop: "itemsPerPageDesktop", itemsPerPageMobile: "itemsPerPageMobile", specificFacets: "specificFacets", beforeFacetsRender: "beforeFacetsRender" }, ngImport: i0, template: "<div [id]=\"'searchstax-facets-container' + rand\">\n  @if (\n    facetsTemplateDataDesktop?.hasResultsOrExternalPromotions &&\n    !templateOverrideDesktop\n  ) {\n    <ng-container>\n      <app-facet-desktop-template #facetDesktopTpl></app-facet-desktop-template>\n      <ng-container\n        [ngTemplateOutlet]=\"facetDesktopTpl.templateOverrideDesktop\"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n    </ng-container>\n  }\n\n  @if (\n    facetsTemplateDataDesktop?.hasResultsOrExternalPromotions &&\n    templateOverrideDesktop\n  ) {\n    <div>\n      <ng-container\n        [ngTemplateOutlet]=\"templateOverrideDesktop\"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n    </div>\n  }\n\n  @if (\n    facetsTemplateDataMobile?.hasResultsOrExternalPromotions &&\n    !templateOverrideMobile\n  ) {\n    <ng-container>\n      <app-facet-mobile-template #facetMobileTpl></app-facet-mobile-template>\n      <ng-container\n        [ngTemplateOutlet]=\"facetMobileTpl.templateOverrideMobile\"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n    </ng-container>\n  }\n\n  @if (\n    facetsTemplateDataMobile?.hasResultsOrExternalPromotions &&\n    templateOverrideMobile\n  ) {\n    <div>\n      <ng-container\n        [ngTemplateOutlet]=\"templateOverrideMobile\"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FacetDesktopTemplateComponent, selector: "app-facet-desktop-template" }, { kind: "component", type: FacetMobileTemplateComponent, selector: "app-facet-mobile-template" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchstaxSearchFacetsWidget, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SearchstaxSearchFacetsWidget, decorators: [{
             type: Component,
-            args: [{ selector: "app-searchstax-search-facets", template: "<div [id]=\"'searchstax-facets-container' + rand\">\n  <ng-container\n    *ngIf=\"\n      facetsTemplateDataDesktop?.hasResultsOrExternalPromotions &&\n      !templateOverrideDesktop\n    \"\n  >\n    <app-facet-desktop-template #ref></app-facet-desktop-template>\n    <ng-template\n      *ngTemplateOutlet=\"ref.templateOverrideDesktop; context: context\"\n    ></ng-template>\n  </ng-container>\n\n  <div\n    *ngIf=\"\n      facetsTemplateDataDesktop?.hasResultsOrExternalPromotions &&\n      templateOverrideDesktop\n    \"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"templateOverrideDesktop; context: context\"\n    ></ng-container>\n  </div>\n\n  <ng-container\n    *ngIf=\"\n      facetsTemplateDataMobile?.hasResultsOrExternalPromotions &&\n      !templateOverrideMobile\n    \"\n  >\n    <app-facet-mobile-template #ref></app-facet-mobile-template>\n    <ng-template\n      *ngTemplateOutlet=\"ref.templateOverrideMobile; context: context\"\n    ></ng-template>\n  </ng-container>\n\n  <div\n    *ngIf=\"\n      facetsTemplateDataMobile?.hasResultsOrExternalPromotions &&\n      templateOverrideMobile\n    \"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"templateOverrideMobile; context: context\"\n    ></ng-container>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: StoreServiceService }], propDecorators: { templateOverrideMobile: [{
+            args: [{ standalone: false, selector: "app-searchstax-search-facets", template: "<div [id]=\"'searchstax-facets-container' + rand\">\n  @if (\n    facetsTemplateDataDesktop?.hasResultsOrExternalPromotions &&\n    !templateOverrideDesktop\n  ) {\n    <ng-container>\n      <app-facet-desktop-template #facetDesktopTpl></app-facet-desktop-template>\n      <ng-container\n        [ngTemplateOutlet]=\"facetDesktopTpl.templateOverrideDesktop\"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n    </ng-container>\n  }\n\n  @if (\n    facetsTemplateDataDesktop?.hasResultsOrExternalPromotions &&\n    templateOverrideDesktop\n  ) {\n    <div>\n      <ng-container\n        [ngTemplateOutlet]=\"templateOverrideDesktop\"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n    </div>\n  }\n\n  @if (\n    facetsTemplateDataMobile?.hasResultsOrExternalPromotions &&\n    !templateOverrideMobile\n  ) {\n    <ng-container>\n      <app-facet-mobile-template #facetMobileTpl></app-facet-mobile-template>\n      <ng-container\n        [ngTemplateOutlet]=\"facetMobileTpl.templateOverrideMobile\"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n    </ng-container>\n  }\n\n  @if (\n    facetsTemplateDataMobile?.hasResultsOrExternalPromotions &&\n    templateOverrideMobile\n  ) {\n    <div>\n      <ng-container\n        [ngTemplateOutlet]=\"templateOverrideMobile\"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n    </div>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [{ type: StoreServiceService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { templateOverrideMobile: [{
                 type: Input
             }], templateOverrideDesktop: [{
                 type: Input
@@ -1963,8 +2147,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 
 // reusable-template.component.ts
 class SortingTemplateComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SortingTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SortingTemplateComponent, selector: "app-sorting-template", viewQueries: [{ propertyName: "sortingTemplate", first: true, predicate: ["sortingTemplateOverride"], descendants: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SortingTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: SortingTemplateComponent, isStandalone: false, selector: "app-sorting-template", viewQueries: [{ propertyName: "sortingTemplate", first: true, predicate: ["sortingTemplateOverride"], descendants: true, static: true }], ngImport: i0, template: `
     <ng-template
       #sortingTemplateOverride
       let-selectedSorting="selectedSorting"
@@ -1983,20 +2167,23 @@ class SortingTemplateComponent {
           [(ngModel)]="context.selectedSorting"
           (change)="orderChange($event, context)"
         >
-          <option
-            *ngFor="let sortOption of context.sortingData.sortOptions"
-            [value]="sortOption.key"
-          >
-            {{ sortOption.value }}
-          </option>
+          @for (
+            sortOption of context.sortingData?.sortOptions ?? [];
+            track sortOption.key
+          ) {
+            <option [value]="sortOption.key">
+              {{ sortOption.value }}
+            </option>
+          }
         </select>
       </div>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SortingTemplateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SortingTemplateComponent, decorators: [{
             type: Component,
             args: [{
+                    standalone: false,
                     selector: "app-sorting-template",
                     template: `
     <ng-template
@@ -2017,12 +2204,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
           [(ngModel)]="context.selectedSorting"
           (change)="orderChange($event, context)"
         >
-          <option
-            *ngFor="let sortOption of context.sortingData.sortOptions"
-            [value]="sortOption.key"
-          >
-            {{ sortOption.value }}
-          </option>
+          @for (
+            sortOption of context.sortingData?.sortOptions ?? [];
+            track sortOption.key
+          ) {
+            <option [value]="sortOption.key">
+              {{ sortOption.value }}
+            </option>
+          }
         </select>
       </div>
     </ng-template>
@@ -2030,12 +2219,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }]
         }], propDecorators: { sortingTemplate: [{
                 type: ViewChild,
-                args: ["sortingTemplateOverride"]
+                args: ["sortingTemplateOverride", { static: true }]
             }] } });
 
 class SearchstaxSearchSortingWidget {
-    constructor(storeServiceService) {
+    constructor(storeServiceService, ngZone, cdr) {
         this.storeServiceService = storeServiceService;
+        this.ngZone = ngZone;
+        this.cdr = cdr;
         this.sortingData = null;
         this.rand = Math.random();
         this.context = this;
@@ -2043,7 +2234,9 @@ class SearchstaxSearchSortingWidget {
     }
     ngOnInit() {
         if (this.storeServiceService.searchstax) {
-            this.attachObservables();
+            this.storeServiceService.whenDataLayerReady(() => {
+                this.attachObservables();
+            });
             setTimeout(() => {
                 this.storeServiceService.searchstax.addSearchSortingWidget("search-sorting-container" + this.rand, {});
             }, 0);
@@ -2057,27 +2250,27 @@ class SearchstaxSearchSortingWidget {
         context.storeServiceService.searchstax.searchSortingWidget?.setOrderQuery(e.target.value);
     }
     attachObservables() {
-        this.storeServiceService.searchstax.dataLayer.$searchSortingData.subscribe((sortingData) => {
+        subscribeInNgZone(this.ngZone, this.storeServiceService.searchstax.dataLayer.$searchSortingData, (sortingData) => {
             this.sortingData = sortingData;
-        });
-        this.storeServiceService.searchstax.dataLayer.$searchObject.subscribe((searchObject) => {
-            this.selectedSorting = decodeURIComponent(searchObject?.order ?? '');
-        });
+        }, this.cdr);
+        subscribeInNgZone(this.ngZone, this.storeServiceService.searchstax.dataLayer.$searchObject, (searchObject) => {
+            this.selectedSorting = decodeURIComponent(searchObject?.order ?? "");
+        }, this.cdr);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchstaxSearchSortingWidget, deps: [{ token: StoreServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SearchstaxSearchSortingWidget, selector: "app-searchstax-search-sorting", inputs: { templateOverride: "templateOverride" }, ngImport: i0, template: "<div class=\"search-feedback-container\" [id]=\"'search-sorting-container' + rand\">\n  <ng-container\n    *ngIf=\"\n      sortingData &&\n      sortingData?.searchExecuted &&\n      sortingData?.hasResultsOrExternalPromotions &&\n      sortingData.sortOptions.length > 0 &&\n      !templateOverride\n    \"\n  >\n    <app-sorting-template #ref></app-sorting-template>\n    <ng-template\n      *ngTemplateOutlet=\"ref.sortingTemplate; context: context\"\n    ></ng-template>\n  </ng-container>\n\n  <div\n    *ngIf=\"\n      sortingData &&\n      sortingData?.searchExecuted &&\n      sortingData?.hasResultsOrExternalPromotions &&\n      templateOverride\n    \"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"templateOverride; context: context\"\n    ></ng-container>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SortingTemplateComponent, selector: "app-sorting-template" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SearchstaxSearchSortingWidget, deps: [{ token: StoreServiceService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: SearchstaxSearchSortingWidget, isStandalone: false, selector: "app-searchstax-search-sorting", inputs: { templateOverride: "templateOverride" }, ngImport: i0, template: "<div class=\"search-feedback-container\" [id]=\"'search-sorting-container' + rand\">\n  @if (\n    sortingData &&\n    sortingData?.searchExecuted &&\n    sortingData?.hasResultsOrExternalPromotions &&\n    (sortingData.sortOptions?.length ?? 0) > 0 &&\n    !templateOverride\n  ) {\n    <ng-container>\n      <app-sorting-template #ref></app-sorting-template>\n      <ng-container\n        [ngTemplateOutlet]=\"ref.sortingTemplate\"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n    </ng-container>\n  }\n\n  @if (\n    sortingData &&\n    sortingData?.searchExecuted &&\n    sortingData?.hasResultsOrExternalPromotions &&\n    templateOverride\n  ) {\n    <div>\n      <ng-container\n        [ngTemplateOutlet]=\"templateOverride\"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SortingTemplateComponent, selector: "app-sorting-template" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchstaxSearchSortingWidget, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SearchstaxSearchSortingWidget, decorators: [{
             type: Component,
-            args: [{ selector: "app-searchstax-search-sorting", template: "<div class=\"search-feedback-container\" [id]=\"'search-sorting-container' + rand\">\n  <ng-container\n    *ngIf=\"\n      sortingData &&\n      sortingData?.searchExecuted &&\n      sortingData?.hasResultsOrExternalPromotions &&\n      sortingData.sortOptions.length > 0 &&\n      !templateOverride\n    \"\n  >\n    <app-sorting-template #ref></app-sorting-template>\n    <ng-template\n      *ngTemplateOutlet=\"ref.sortingTemplate; context: context\"\n    ></ng-template>\n  </ng-container>\n\n  <div\n    *ngIf=\"\n      sortingData &&\n      sortingData?.searchExecuted &&\n      sortingData?.hasResultsOrExternalPromotions &&\n      templateOverride\n    \"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"templateOverride; context: context\"\n    ></ng-container>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: StoreServiceService }], propDecorators: { templateOverride: [{
+            args: [{ standalone: false, selector: "app-searchstax-search-sorting", template: "<div class=\"search-feedback-container\" [id]=\"'search-sorting-container' + rand\">\n  @if (\n    sortingData &&\n    sortingData?.searchExecuted &&\n    sortingData?.hasResultsOrExternalPromotions &&\n    (sortingData.sortOptions?.length ?? 0) > 0 &&\n    !templateOverride\n  ) {\n    <ng-container>\n      <app-sorting-template #ref></app-sorting-template>\n      <ng-container\n        [ngTemplateOutlet]=\"ref.sortingTemplate\"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n    </ng-container>\n  }\n\n  @if (\n    sortingData &&\n    sortingData?.searchExecuted &&\n    sortingData?.hasResultsOrExternalPromotions &&\n    templateOverride\n  ) {\n    <div>\n      <ng-container\n        [ngTemplateOutlet]=\"templateOverride\"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n    </div>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [{ type: StoreServiceService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { templateOverride: [{
                 type: Input
             }] } });
 
 // reusable-template.component.ts
 class AnswerTemplateComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AnswerTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AnswerTemplateComponent, selector: "app-answer-template", viewQueries: [{ propertyName: "answerTemplate", first: true, predicate: ["answerTemplate"], descendants: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AnswerTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: AnswerTemplateComponent, isStandalone: false, selector: "app-answer-template", viewQueries: [{ propertyName: "answerTemplate", first: true, predicate: ["answerTemplate"], descendants: true, static: true }], ngImport: i0, template: `
     <ng-template
       #answerTemplate
       let-answerData="answerData"
@@ -2094,31 +2287,30 @@ class AnswerTemplateComponent {
             }"
           >
             <div class="searchstax-answer-title">Smart Answers</div>
-            <div
-              class="searchstax-answer-error"
-              *ngIf="answerData.shouldShowAnswerError"
-              [innerHTML]="answerData.answerErrorMessage"
-            ></div>
+            @if (answerData.shouldShowAnswerError) {
+              <div
+                class="searchstax-answer-error"
+                [innerHTML]="answerData.answerErrorMessage"
+              ></div>
+            }
             <div
               class="searchstax-answer-description"
               [innerHTML]="answerData.fullAnswerFormatted"
             ></div>
-            <div
-              *ngIf="answerData.answerLoading"
-              class="searchstax-answer-loading"
-            ></div>
-          </div>
-          <div
-            *ngIf="answerData.showMoreButtonVisible"
-            class="searchstax-answer-load-more-button-container"
-          >
-            <button
-              class="searchstax-answer-load-more-button"
-              (click)="showMore($event, context)"
-            >
-              Show More
-            </button>
+            @if (answerData.answerLoading) {
+              <div class="searchstax-answer-loading"></div>
+            }
           </div>
+          @if (answerData.showMoreButtonVisible) {
+            <div class="searchstax-answer-load-more-button-container">
+              <button
+                class="searchstax-answer-load-more-button"
+                (click)="showMore($event, context)"
+              >
+                Show More
+              </button>
+            </div>
+          }
         </div>
         <div class="searchstax-answer-footer">
           <div id="feedbackWidgetContainer"></div>
@@ -2127,11 +2319,12 @@ class AnswerTemplateComponent {
         </div>
       </div>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+  `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AnswerTemplateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AnswerTemplateComponent, decorators: [{
             type: Component,
             args: [{
+                    standalone: false,
                     selector: "app-answer-template",
                     template: `
     <ng-template
@@ -2150,31 +2343,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }"
           >
             <div class="searchstax-answer-title">Smart Answers</div>
-            <div
-              class="searchstax-answer-error"
-              *ngIf="answerData.shouldShowAnswerError"
-              [innerHTML]="answerData.answerErrorMessage"
-            ></div>
+            @if (answerData.shouldShowAnswerError) {
+              <div
+                class="searchstax-answer-error"
+                [innerHTML]="answerData.answerErrorMessage"
+              ></div>
+            }
             <div
               class="searchstax-answer-description"
               [innerHTML]="answerData.fullAnswerFormatted"
             ></div>
-            <div
-              *ngIf="answerData.answerLoading"
-              class="searchstax-answer-loading"
-            ></div>
-          </div>
-          <div
-            *ngIf="answerData.showMoreButtonVisible"
-            class="searchstax-answer-load-more-button-container"
-          >
-            <button
-              class="searchstax-answer-load-more-button"
-              (click)="showMore($event, context)"
-            >
-              Show More
-            </button>
+            @if (answerData.answerLoading) {
+              <div class="searchstax-answer-loading"></div>
+            }
           </div>
+          @if (answerData.showMoreButtonVisible) {
+            <div class="searchstax-answer-load-more-button-container">
+              <button
+                class="searchstax-answer-load-more-button"
+                (click)="showMore($event, context)"
+              >
+                Show More
+              </button>
+            </div>
+          }
         </div>
         <div class="searchstax-answer-footer">
           <div id="feedbackWidgetContainer"></div>
@@ -2187,19 +2379,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }]
         }], propDecorators: { answerTemplate: [{
                 type: ViewChild,
-                args: ["answerTemplate"]
+                args: ["answerTemplate", { static: true }]
             }] } });
 
 class SearchstaxSearchAnswerWidget {
-    constructor(storeServiceService) {
+    constructor(storeServiceService, ngZone, cdr) {
         this.storeServiceService = storeServiceService;
+        this.ngZone = ngZone;
+        this.cdr = cdr;
         this.answerData = null;
         this.rand = Math.random();
         this.context = this;
     }
     ngOnInit() {
         if (this.storeServiceService.searchstax) {
-            this.attachObservables();
+            this.storeServiceService.whenDataLayerReady(() => {
+                this.attachObservables();
+            });
             setTimeout(() => {
                 this.storeServiceService.searchstax.addAnswerWidget('searchstax-answer-container' + this.rand, { showMoreAfterWordCount: this.showMoreAfterWordCount, feedbackwidget: this.feedbackwidget, testString: this.testString });
             }, 0);
@@ -2214,17 +2410,17 @@ class SearchstaxSearchAnswerWidget {
         }
     }
     attachObservables() {
-        this.storeServiceService.searchstax.dataLayer.$answerData.subscribe((answerData) => {
+        subscribeInNgZone(this.ngZone, this.storeServiceService.searchstax.dataLayer.$answerData, (answerData) => {
             this.answerData = answerData;
-        });
+        }, this.cdr);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchstaxSearchAnswerWidget, deps: [{ token: StoreServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SearchstaxSearchAnswerWidget, selector: "app-searchstax-answer", inputs: { templateOverride: "templateOverride", feedbackwidget: "feedbackwidget", showMoreAfterWordCount: "showMoreAfterWordCount", testString: "testString" }, ngImport: i0, template: "<div [id]=\"'searchstax-answer-container' + rand\">\n  <div\n    *ngIf=\"\n      answerData &&\n      answerData?.searchExecuted &&\n      answerData.shouldShowAnswer &&\n      !templateOverride\n    \"\n  >\n    <app-answer-template #ref></app-answer-template>\n    <ng-template\n      [ngTemplateOutlet]=\"ref.answerTemplate\"\n      [ngTemplateOutletContext]=\"context\"\n    ></ng-template>\n  </div>\n  <div\n    *ngIf=\"\n      answerData &&\n      answerData?.searchExecuted &&\n      answerData.shouldShowAnswer &&\n      templateOverride\n    \"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"templateOverride; context: context\"\n    ></ng-container>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AnswerTemplateComponent, selector: "app-answer-template" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SearchstaxSearchAnswerWidget, deps: [{ token: StoreServiceService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: SearchstaxSearchAnswerWidget, isStandalone: false, selector: "app-searchstax-answer", inputs: { templateOverride: "templateOverride", feedbackwidget: "feedbackwidget", showMoreAfterWordCount: "showMoreAfterWordCount", testString: "testString" }, ngImport: i0, template: "<div [id]=\"'searchstax-answer-container' + rand\">\n  @if (\n    answerData &&\n    answerData?.searchExecuted &&\n    answerData.shouldShowAnswer &&\n    !templateOverride\n  ) {\n    <div>\n      <app-answer-template #ref></app-answer-template>\n      <ng-container\n        [ngTemplateOutlet]=\"ref.answerTemplate\"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n    </div>\n  }\n  @if (\n    answerData &&\n    answerData?.searchExecuted &&\n    answerData.shouldShowAnswer &&\n    templateOverride\n  ) {\n    <div>\n      <ng-container\n        [ngTemplateOutlet]=\"templateOverride\"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AnswerTemplateComponent, selector: "app-answer-template" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchstaxSearchAnswerWidget, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SearchstaxSearchAnswerWidget, decorators: [{
             type: Component,
-            args: [{ selector: "app-searchstax-answer", template: "<div [id]=\"'searchstax-answer-container' + rand\">\n  <div\n    *ngIf=\"\n      answerData &&\n      answerData?.searchExecuted &&\n      answerData.shouldShowAnswer &&\n      !templateOverride\n    \"\n  >\n    <app-answer-template #ref></app-answer-template>\n    <ng-template\n      [ngTemplateOutlet]=\"ref.answerTemplate\"\n      [ngTemplateOutletContext]=\"context\"\n    ></ng-template>\n  </div>\n  <div\n    *ngIf=\"\n      answerData &&\n      answerData?.searchExecuted &&\n      answerData.shouldShowAnswer &&\n      templateOverride\n    \"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"templateOverride; context: context\"\n    ></ng-container>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: StoreServiceService }], propDecorators: { templateOverride: [{
+            args: [{ standalone: false, selector: "app-searchstax-answer", template: "<div [id]=\"'searchstax-answer-container' + rand\">\n  @if (\n    answerData &&\n    answerData?.searchExecuted &&\n    answerData.shouldShowAnswer &&\n    !templateOverride\n  ) {\n    <div>\n      <app-answer-template #ref></app-answer-template>\n      <ng-container\n        [ngTemplateOutlet]=\"ref.answerTemplate\"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n    </div>\n  }\n  @if (\n    answerData &&\n    answerData?.searchExecuted &&\n    answerData.shouldShowAnswer &&\n    templateOverride\n  ) {\n    <div>\n      <ng-container\n        [ngTemplateOutlet]=\"templateOverride\"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n    </div>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [{ type: StoreServiceService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { templateOverride: [{
                 type: Input
             }], feedbackwidget: [{
                 type: Input
@@ -2236,8 +2432,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 
 // reusable-template.component.ts
 class RelatedTemplateComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RelatedTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: RelatedTemplateComponent, selector: "app-related-template", viewQueries: [{ propertyName: "relatedTemplate", first: true, predicate: ["relatedTemplate"], descendants: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: RelatedTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: RelatedTemplateComponent, isStandalone: false, selector: "app-related-template", viewQueries: [{ propertyName: "relatedTemplate", first: true, predicate: ["relatedTemplate"], descendants: true, static: true }], ngImport: i0, template: `
     <ng-template
       #relatedTemplate
       let-rand="rand"
@@ -2250,29 +2446,36 @@ class RelatedTemplateComponent {
         [id]="'searchstax-related-searches-container' + rand"
       >
         Related searches: <span id="searchstax-related-searches"></span>
-        <span
-          class="searchstax-related-search"
-          *ngIf="relatedData.relatedSearches"
-        >
-          <span
-            *ngFor="let related of relatedData.relatedSearches"
-            (click)="executeSearch(related, context)"
-            (keyup.enter)="executeSearch(related, context)"
-            (keyup.space)="executeSearch(related, context)"
-            tabindex="0"
-            class="searchstax-related-search searchstax-related-search-item"
-            [attr.aria-label]="'Related search: ' + related.related_search"
-          >
-            {{ related.related_search }}<span *ngIf="!related.last">,</span>
+        @if (relatedData.relatedSearches) {
+          <span class="searchstax-related-search">
+            @for (
+              related of relatedData.relatedSearches;
+              track $index
+            ) {
+              <span
+                (click)="executeSearch(related, context)"
+                (keyup.enter)="executeSearch(related, context)"
+                (keyup.space)="executeSearch(related, context)"
+                tabindex="0"
+                class="searchstax-related-search searchstax-related-search-item"
+                [attr.aria-label]="'Related search: ' + related.related_search"
+              >
+                {{ related.related_search }}
+                @if (!related.last) {
+                  <span>,</span>
+                }
+              </span>
+            }
           </span>
-        </span>
+        }
       </div>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+  `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RelatedTemplateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: RelatedTemplateComponent, decorators: [{
             type: Component,
             args: [{
+                    standalone: false,
                     selector: "app-related-template",
                     template: `
     <ng-template
@@ -2287,41 +2490,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         [id]="'searchstax-related-searches-container' + rand"
       >
         Related searches: <span id="searchstax-related-searches"></span>
-        <span
-          class="searchstax-related-search"
-          *ngIf="relatedData.relatedSearches"
-        >
-          <span
-            *ngFor="let related of relatedData.relatedSearches"
-            (click)="executeSearch(related, context)"
-            (keyup.enter)="executeSearch(related, context)"
-            (keyup.space)="executeSearch(related, context)"
-            tabindex="0"
-            class="searchstax-related-search searchstax-related-search-item"
-            [attr.aria-label]="'Related search: ' + related.related_search"
-          >
-            {{ related.related_search }}<span *ngIf="!related.last">,</span>
+        @if (relatedData.relatedSearches) {
+          <span class="searchstax-related-search">
+            @for (
+              related of relatedData.relatedSearches;
+              track $index
+            ) {
+              <span
+                (click)="executeSearch(related, context)"
+                (keyup.enter)="executeSearch(related, context)"
+                (keyup.space)="executeSearch(related, context)"
+                tabindex="0"
+                class="searchstax-related-search searchstax-related-search-item"
+                [attr.aria-label]="'Related search: ' + related.related_search"
+              >
+                {{ related.related_search }}
+                @if (!related.last) {
+                  <span>,</span>
+                }
+              </span>
+            }
           </span>
-        </span>
+        }
       </div>
     </ng-template>
   `,
                 }]
         }], propDecorators: { relatedTemplate: [{
                 type: ViewChild,
-                args: ["relatedTemplate"]
+                args: ["relatedTemplate", { static: true }]
             }] } });
 
 class SearchstaxSearchRelatedSearchesWidget {
-    constructor(storeServiceService) {
+    constructor(storeServiceService, ngZone, cdr) {
         this.storeServiceService = storeServiceService;
+        this.ngZone = ngZone;
+        this.cdr = cdr;
         this.relatedData = null;
         this.rand = Math.random();
         this.context = this;
     }
     ngOnInit() {
         if (this.storeServiceService.searchstax) {
-            this.attachObservables();
+            this.storeServiceService.whenDataLayerReady(() => {
+                this.attachObservables();
+            });
             setTimeout(() => {
                 this.storeServiceService.searchstax.addRelatedSearchesWidget("searchstax-related-searches-container" + this.rand, { relatedSearchesURL: this.relatedSearchesURL ?? "", relatedSearchesAPIKey: this.relatedSearchesAPIKey ?? "" });
             }, 0);
@@ -2334,17 +2547,17 @@ class SearchstaxSearchRelatedSearchesWidget {
         context.storeServiceService.searchstax.relatedSearchesWidget?.executeSearch(result);
     }
     attachObservables() {
-        this.storeServiceService.searchstax.dataLayer.$searchRelatedSearchesData.subscribe((relatedData) => {
+        subscribeInNgZone(this.ngZone, this.storeServiceService.searchstax.dataLayer.$searchRelatedSearchesData, (relatedData) => {
             this.relatedData = relatedData;
-        });
+        }, this.cdr);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchstaxSearchRelatedSearchesWidget, deps: [{ token: StoreServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SearchstaxSearchRelatedSearchesWidget, selector: "app-searchstax-related-searches", inputs: { relatedSearchesURL: "relatedSearchesURL", relatedSearchesAPIKey: "relatedSearchesAPIKey", templateOverride: "templateOverride" }, ngImport: i0, template: "<ng-container\n  *ngIf=\"\n    relatedData &&\n    relatedData?.searchExecuted &&\n    relatedData?.hasRelatedSearches &&\n    !templateOverride\n  \"\n>\n  <app-related-template #ref></app-related-template>\n  <ng-template\n    *ngTemplateOutlet=\"ref.relatedTemplate; context: context\"\n  ></ng-template>\n</ng-container>\n\n<div\n  *ngIf=\"\n    relatedData &&\n    relatedData?.searchExecuted &&\n    relatedData?.hasRelatedSearches &&\n    templateOverride\n  \"\n>\n  <ng-container\n    *ngTemplateOutlet=\"templateOverride; context: context\"\n  ></ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: RelatedTemplateComponent, selector: "app-related-template" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SearchstaxSearchRelatedSearchesWidget, deps: [{ token: StoreServiceService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: SearchstaxSearchRelatedSearchesWidget, isStandalone: false, selector: "app-searchstax-related-searches", inputs: { relatedSearchesURL: "relatedSearchesURL", relatedSearchesAPIKey: "relatedSearchesAPIKey", templateOverride: "templateOverride" }, ngImport: i0, template: "@if (\n  relatedData &&\n  relatedData?.searchExecuted &&\n  relatedData?.hasRelatedSearches &&\n  !templateOverride\n) {\n  <ng-container>\n    <app-related-template #ref></app-related-template>\n    <ng-container\n      [ngTemplateOutlet]=\"ref.relatedTemplate\"\n      [ngTemplateOutletContext]=\"context\"\n    ></ng-container>\n  </ng-container>\n}\n\n@if (\n  relatedData &&\n  relatedData?.searchExecuted &&\n  relatedData?.hasRelatedSearches &&\n  templateOverride\n) {\n  <div>\n    <ng-container\n      [ngTemplateOutlet]=\"templateOverride\"\n      [ngTemplateOutletContext]=\"context\"\n    ></ng-container>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: RelatedTemplateComponent, selector: "app-related-template" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchstaxSearchRelatedSearchesWidget, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SearchstaxSearchRelatedSearchesWidget, decorators: [{
             type: Component,
-            args: [{ selector: "app-searchstax-related-searches", template: "<ng-container\n  *ngIf=\"\n    relatedData &&\n    relatedData?.searchExecuted &&\n    relatedData?.hasRelatedSearches &&\n    !templateOverride\n  \"\n>\n  <app-related-template #ref></app-related-template>\n  <ng-template\n    *ngTemplateOutlet=\"ref.relatedTemplate; context: context\"\n  ></ng-template>\n</ng-container>\n\n<div\n  *ngIf=\"\n    relatedData &&\n    relatedData?.searchExecuted &&\n    relatedData?.hasRelatedSearches &&\n    templateOverride\n  \"\n>\n  <ng-container\n    *ngTemplateOutlet=\"templateOverride; context: context\"\n  ></ng-container>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: StoreServiceService }], propDecorators: { relatedSearchesURL: [{
+            args: [{ standalone: false, selector: "app-searchstax-related-searches", template: "@if (\n  relatedData &&\n  relatedData?.searchExecuted &&\n  relatedData?.hasRelatedSearches &&\n  !templateOverride\n) {\n  <ng-container>\n    <app-related-template #ref></app-related-template>\n    <ng-container\n      [ngTemplateOutlet]=\"ref.relatedTemplate\"\n      [ngTemplateOutletContext]=\"context\"\n    ></ng-container>\n  </ng-container>\n}\n\n@if (\n  relatedData &&\n  relatedData?.searchExecuted &&\n  relatedData?.hasRelatedSearches &&\n  templateOverride\n) {\n  <div>\n    <ng-container\n      [ngTemplateOutlet]=\"templateOverride\"\n      [ngTemplateOutletContext]=\"context\"\n    ></ng-container>\n  </div>\n}\n" }]
+        }], ctorParameters: () => [{ type: StoreServiceService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { relatedSearchesURL: [{
                 type: Input
             }], relatedSearchesAPIKey: [{
                 type: Input
@@ -2354,8 +2567,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 
 // reusable-template.component.ts
 class ExternalPromotionsTemplateComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ExternalPromotionsTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ExternalPromotionsTemplateComponent, selector: "app-external-template", viewQueries: [{ propertyName: "externalPromotionsTemplate", first: true, predicate: ["externalPromotionsTemplate"], descendants: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ExternalPromotionsTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: ExternalPromotionsTemplateComponent, isStandalone: false, selector: "app-external-template", viewQueries: [{ propertyName: "externalPromotionsTemplate", first: true, predicate: ["externalPromotionsTemplate"], descendants: true, static: true }], ngImport: i0, template: `
     <ng-template
       #externalPromotionsTemplate
       let-context="context"
@@ -2366,44 +2579,51 @@ class ExternalPromotionsTemplateComponent {
         class="searchstax-external-promotions-container"
         id="searchstax-external-promotions-container"
       >
-        <div
-          class="searchstax-external-promotion searchstax-search-result"
-          *ngFor="
-            let externalPromotion of externalPromotionsData.externalPromotions
-          "
-        >
-          <div class="icon-elevated"></div>
-          <a
-            *ngIf="externalPromotion.url"
-            [href]="externalPromotion.url"
-            (click)="trackClick(externalPromotion, $event, context)"
-            class="searchstax-result-item-link"
-          ></a>
-          <div class="searchstax-search-result-title-container">
-            <span class="searchstax-search-result-title">{{
-              externalPromotion.name
-            }}</span>
-          </div>
-          <p
-            *ngIf="externalPromotion.description"
-            class="searchstax-search-result-description searchstax-search-result-common"
-          >
-            {{ externalPromotion.description }}
-          </p>
-          <p
-            *ngIf="externalPromotion.url"
-            class="searchstax-search-result-description searchstax-search-result-common"
+        @for (
+          externalPromotion of externalPromotionsData?.externalPromotions ??
+            [];
+          track $index
+        ) {
+          <div
+            class="searchstax-external-promotion searchstax-search-result"
           >
-            {{ externalPromotion.url }}
-          </p>
-        </div>
+            <div class="icon-elevated"></div>
+            @if (externalPromotion.url) {
+              <a
+                [href]="externalPromotion.url"
+                (click)="trackClick(externalPromotion, $event, context)"
+                class="searchstax-result-item-link"
+              ></a>
+            }
+            <div class="searchstax-search-result-title-container">
+              <span class="searchstax-search-result-title">{{
+                externalPromotion.name
+              }}</span>
+            </div>
+            @if (externalPromotion.description) {
+              <p
+                class="searchstax-search-result-description searchstax-search-result-common"
+              >
+                {{ externalPromotion.description }}
+              </p>
+            }
+            @if (externalPromotion.url) {
+              <p
+                class="searchstax-search-result-description searchstax-search-result-common"
+              >
+                {{ externalPromotion.url }}
+              </p>
+            }
+          </div>
+        }
       </div>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+  `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ExternalPromotionsTemplateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ExternalPromotionsTemplateComponent, decorators: [{
             type: Component,
             args: [{
+                    standalone: false,
                     selector: "app-external-template",
                     template: `
     <ng-template
@@ -2416,56 +2636,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         class="searchstax-external-promotions-container"
         id="searchstax-external-promotions-container"
       >
-        <div
-          class="searchstax-external-promotion searchstax-search-result"
-          *ngFor="
-            let externalPromotion of externalPromotionsData.externalPromotions
-          "
-        >
-          <div class="icon-elevated"></div>
-          <a
-            *ngIf="externalPromotion.url"
-            [href]="externalPromotion.url"
-            (click)="trackClick(externalPromotion, $event, context)"
-            class="searchstax-result-item-link"
-          ></a>
-          <div class="searchstax-search-result-title-container">
-            <span class="searchstax-search-result-title">{{
-              externalPromotion.name
-            }}</span>
-          </div>
-          <p
-            *ngIf="externalPromotion.description"
-            class="searchstax-search-result-description searchstax-search-result-common"
-          >
-            {{ externalPromotion.description }}
-          </p>
-          <p
-            *ngIf="externalPromotion.url"
-            class="searchstax-search-result-description searchstax-search-result-common"
+        @for (
+          externalPromotion of externalPromotionsData?.externalPromotions ??
+            [];
+          track $index
+        ) {
+          <div
+            class="searchstax-external-promotion searchstax-search-result"
           >
-            {{ externalPromotion.url }}
-          </p>
-        </div>
+            <div class="icon-elevated"></div>
+            @if (externalPromotion.url) {
+              <a
+                [href]="externalPromotion.url"
+                (click)="trackClick(externalPromotion, $event, context)"
+                class="searchstax-result-item-link"
+              ></a>
+            }
+            <div class="searchstax-search-result-title-container">
+              <span class="searchstax-search-result-title">{{
+                externalPromotion.name
+              }}</span>
+            </div>
+            @if (externalPromotion.description) {
+              <p
+                class="searchstax-search-result-description searchstax-search-result-common"
+              >
+                {{ externalPromotion.description }}
+              </p>
+            }
+            @if (externalPromotion.url) {
+              <p
+                class="searchstax-search-result-description searchstax-search-result-common"
+              >
+                {{ externalPromotion.url }}
+              </p>
+            }
+          </div>
+        }
       </div>
     </ng-template>
   `,
                 }]
         }], propDecorators: { externalPromotionsTemplate: [{
                 type: ViewChild,
-                args: ["externalPromotionsTemplate"]
+                args: ["externalPromotionsTemplate", { static: true }]
             }] } });
 
 class SearchstaxSearchExternalPromotionsWidget {
-    constructor(storeServiceService) {
+    constructor(storeServiceService, ngZone, cdr) {
         this.storeServiceService = storeServiceService;
+        this.ngZone = ngZone;
+        this.cdr = cdr;
         this.externalPromotionsData = null;
         this.rand = Math.random();
         this.context = this;
     }
     ngOnInit() {
         if (this.storeServiceService.searchstax) {
-            this.attachObservables();
+            this.storeServiceService.whenDataLayerReady(() => {
+                this.attachObservables();
+            });
             setTimeout(() => {
                 this.storeServiceService.searchstax.addExternalPromotionsWidget("searchstax-external-promotions-layout-container" + this.rand, {});
             }, 0);
@@ -2478,23 +2708,49 @@ class SearchstaxSearchExternalPromotionsWidget {
         context.storeServiceService.searchstax.externalPromotionsWidget?.trackClick(externalPromotion, event);
     }
     attachObservables() {
-        this.storeServiceService.searchstax.dataLayer.$searchExternalPromotionsData.subscribe((externalPromotionsData) => {
+        subscribeInNgZone(this.ngZone, this.storeServiceService.searchstax.dataLayer.$searchExternalPromotionsData, (externalPromotionsData) => {
             this.externalPromotionsData = externalPromotionsData;
-        });
+        }, this.cdr);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchstaxSearchExternalPromotionsWidget, deps: [{ token: StoreServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SearchstaxSearchExternalPromotionsWidget, selector: "app-searchstax-external-promotions", inputs: { templateOverride: "templateOverride" }, ngImport: i0, template: "<div [id]=\"'searchstax-external-promotions-layout-container' + rand\">\n  <ng-container\n    *ngIf=\"\n      externalPromotionsData &&\n      externalPromotionsData?.searchExecuted &&\n      externalPromotionsData?.hasExternalPromotions &&\n      !templateOverride\n    \"\n  >\n    <app-external-template #ref></app-external-template>\n    <ng-template\n      *ngTemplateOutlet=\"ref.externalPromotionsTemplate; context: context\"\n    ></ng-template>\n  </ng-container>\n  <div\n    *ngIf=\"\n      externalPromotionsData &&\n      externalPromotionsData?.searchExecuted &&\n      externalPromotionsData?.hasExternalPromotions &&\n      templateOverride\n    \"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"templateOverride; context: context\"\n    ></ng-container>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ExternalPromotionsTemplateComponent, selector: "app-external-template" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SearchstaxSearchExternalPromotionsWidget, deps: [{ token: StoreServiceService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: SearchstaxSearchExternalPromotionsWidget, isStandalone: false, selector: "app-searchstax-external-promotions", inputs: { templateOverride: "templateOverride" }, ngImport: i0, template: "<div [id]=\"'searchstax-external-promotions-layout-container' + rand\">\n  @if (\n    externalPromotionsData &&\n    externalPromotionsData?.searchExecuted &&\n    externalPromotionsData?.hasExternalPromotions &&\n    !templateOverride\n  ) {\n    <ng-container>\n      <app-external-template #ref></app-external-template>\n      <ng-container\n        [ngTemplateOutlet]=\"ref.externalPromotionsTemplate\"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n    </ng-container>\n  }\n  @if (\n    externalPromotionsData &&\n    externalPromotionsData?.searchExecuted &&\n    externalPromotionsData?.hasExternalPromotions &&\n    templateOverride\n  ) {\n    <div>\n      <ng-container\n        [ngTemplateOutlet]=\"templateOverride\"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ExternalPromotionsTemplateComponent, selector: "app-external-template" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchstaxSearchExternalPromotionsWidget, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SearchstaxSearchExternalPromotionsWidget, decorators: [{
             type: Component,
-            args: [{ selector: "app-searchstax-external-promotions", template: "<div [id]=\"'searchstax-external-promotions-layout-container' + rand\">\n  <ng-container\n    *ngIf=\"\n      externalPromotionsData &&\n      externalPromotionsData?.searchExecuted &&\n      externalPromotionsData?.hasExternalPromotions &&\n      !templateOverride\n    \"\n  >\n    <app-external-template #ref></app-external-template>\n    <ng-template\n      *ngTemplateOutlet=\"ref.externalPromotionsTemplate; context: context\"\n    ></ng-template>\n  </ng-container>\n  <div\n    *ngIf=\"\n      externalPromotionsData &&\n      externalPromotionsData?.searchExecuted &&\n      externalPromotionsData?.hasExternalPromotions &&\n      templateOverride\n    \"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"templateOverride; context: context\"\n    ></ng-container>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: StoreServiceService }], propDecorators: { templateOverride: [{
+            args: [{ standalone: false, selector: "app-searchstax-external-promotions", template: "<div [id]=\"'searchstax-external-promotions-layout-container' + rand\">\n  @if (\n    externalPromotionsData &&\n    externalPromotionsData?.searchExecuted &&\n    externalPromotionsData?.hasExternalPromotions &&\n    !templateOverride\n  ) {\n    <ng-container>\n      <app-external-template #ref></app-external-template>\n      <ng-container\n        [ngTemplateOutlet]=\"ref.externalPromotionsTemplate\"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n    </ng-container>\n  }\n  @if (\n    externalPromotionsData &&\n    externalPromotionsData?.searchExecuted &&\n    externalPromotionsData?.hasExternalPromotions &&\n    templateOverride\n  ) {\n    <div>\n      <ng-container\n        [ngTemplateOutlet]=\"templateOverride\"\n        [ngTemplateOutletContext]=\"context\"\n      ></ng-container>\n    </div>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [{ type: StoreServiceService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { templateOverride: [{
                 type: Input
             }] } });
 
+const libraryComponents = [
+    SearchstaxWrapper,
+    SearchstaxInputWidget,
+    SearchstaxResultsWidget,
+    SearchstaxSearchFeedbackWidget,
+    SearchstaxSearchPaginationWidget,
+    SearchstaxSearchFacetsWidget,
+    SearchstaxSearchSortingWidget,
+    SearchstaxSearchRelatedSearchesWidget,
+    SearchstaxSearchExternalPromotionsWidget,
+    SearchstaxSearchAnswerWidget,
+    SearchstaxSearchLocationWidget,
+    AnswerTemplateComponent,
+    OverviewTemplateComponent,
+    InputTemplateComponent,
+    LocationTemplateComponent,
+    PaginationTemplateComponent,
+    PaginationInfiniteTemplateComponent,
+    ResultsTemplateComponent,
+    NoResultsTemplateComponent,
+    ExternalPromotionsTemplateComponent,
+    SortingTemplateComponent,
+    RelatedTemplateComponent,
+    FacetDesktopTemplateComponent,
+    FacetMobileTemplateComponent,
+];
 class SearchstudioUxAngularModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchstudioUxAngularModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: SearchstudioUxAngularModule, declarations: [SearchstaxWrapper,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SearchstudioUxAngularModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.7", ngImport: i0, type: SearchstudioUxAngularModule, declarations: [SearchstaxWrapper,
             SearchstaxInputWidget,
             SearchstaxResultsWidget,
             SearchstaxSearchFeedbackWidget,
@@ -2541,64 +2797,14 @@ class SearchstudioUxAngularModule {
             RelatedTemplateComponent,
             FacetDesktopTemplateComponent,
             FacetMobileTemplateComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchstudioUxAngularModule, imports: [CommonModule, FormsModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SearchstudioUxAngularModule, imports: [CommonModule, FormsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchstudioUxAngularModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SearchstudioUxAngularModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        SearchstaxWrapper,
-                        SearchstaxInputWidget,
-                        SearchstaxResultsWidget,
-                        SearchstaxSearchFeedbackWidget,
-                        SearchstaxSearchPaginationWidget,
-                        SearchstaxSearchFacetsWidget,
-                        SearchstaxSearchSortingWidget,
-                        SearchstaxSearchRelatedSearchesWidget,
-                        SearchstaxSearchExternalPromotionsWidget,
-                        SearchstaxSearchAnswerWidget,
-                        SearchstaxSearchLocationWidget,
-                        AnswerTemplateComponent,
-                        OverviewTemplateComponent,
-                        InputTemplateComponent,
-                        LocationTemplateComponent,
-                        PaginationTemplateComponent,
-                        PaginationInfiniteTemplateComponent,
-                        ResultsTemplateComponent,
-                        NoResultsTemplateComponent,
-                        ExternalPromotionsTemplateComponent,
-                        SortingTemplateComponent,
-                        RelatedTemplateComponent,
-                        FacetDesktopTemplateComponent,
-                        FacetMobileTemplateComponent
-                    ],
+                    declarations: [...libraryComponents],
                     imports: [CommonModule, FormsModule],
-                    exports: [
-                        SearchstaxWrapper,
-                        SearchstaxInputWidget,
-                        SearchstaxResultsWidget,
-                        SearchstaxSearchFeedbackWidget,
-                        SearchstaxSearchPaginationWidget,
-                        SearchstaxSearchFacetsWidget,
-                        SearchstaxSearchSortingWidget,
-                        SearchstaxSearchRelatedSearchesWidget,
-                        SearchstaxSearchExternalPromotionsWidget,
-                        SearchstaxSearchAnswerWidget,
-                        SearchstaxSearchLocationWidget,
-                        AnswerTemplateComponent,
-                        OverviewTemplateComponent,
-                        InputTemplateComponent,
-                        LocationTemplateComponent,
-                        PaginationTemplateComponent,
-                        PaginationInfiniteTemplateComponent,
-                        ResultsTemplateComponent,
-                        NoResultsTemplateComponent,
-                        ExternalPromotionsTemplateComponent,
-                        SortingTemplateComponent,
-                        RelatedTemplateComponent,
-                        FacetDesktopTemplateComponent,
-                        FacetMobileTemplateComponent
-                    ],
+                    exports: [...libraryComponents],
                 }]
         }] });