@searchstax-inc/searchstudio-ux-angular 1.2.53 → 2.0.0

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

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Output, Input, Component, NgModule } from '@angular/core';
+import { Injectable, EventEmitter, Output, Input, Component, ViewChild, NgModule } from '@angular/core';
 import { Searchstax } from '@searchstax-inc/searchstudio-ux-js';
-import * as i2 from '@angular/common';
+import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i3 from '@angular/forms';
+import * as i2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 
 class StoreServiceService {
@@ -110,6 +110,243 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }] } });
 
+//CUT START
+const config = {
+    appId: "APP_ID",
+    relatedSearchesAPIKey: "KEY"
+};
+const locationWidgetConfig = {
+    locationDecode: (term) => {
+        return new Promise((resolve) => {
+            // make a request to google geocoding API to retrieve lat, lon and address
+            const geocodingAPIKey = "GEOCODING_API_KEY";
+            const geocodingURL = `https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURIComponent(term)}&key=${geocodingAPIKey}`;
+            fetch(geocodingURL)
+                .then((response) => response.json())
+                .then((data) => {
+                if (data.status === "OK" && data.results.length > 0) {
+                    const result = data.results[0];
+                    const location = {
+                        lat: result.geometry.location.lat,
+                        lon: result.geometry.location.lng,
+                        address: result.formatted_address,
+                    };
+                    resolve(location);
+                }
+                else {
+                    resolve({
+                        address: undefined,
+                        lat: undefined,
+                        lon: undefined,
+                        error: true,
+                    });
+                }
+            })
+                .catch(() => {
+                resolve({
+                    address: undefined,
+                    lat: undefined,
+                    lon: undefined,
+                    error: true,
+                });
+            });
+        });
+    },
+    locationDecodeCoordinatesToAddress: (lat, lon) => {
+        return new Promise((resolve) => {
+            fetch(`https://geocoding-staging.searchstax.co/reverse?location=${lat},${lon}&components=country:US&app_id=${config.appId}`, {
+                method: "GET",
+                headers: {
+                    Authorization: `Token ${config.relatedSearchesAPIKey}`,
+                },
+            })
+                .then((response) => response.json())
+                .then((data) => {
+                if (data.status === "OK" && data.results.length > 0) {
+                    const result = data.results[0];
+                    resolve({
+                        address: result.formatted_address,
+                        lat: lat,
+                        lon: lon,
+                        error: false,
+                    });
+                }
+                else {
+                    resolve({
+                        address: undefined,
+                        lat: lat,
+                        lon: lon,
+                        error: true,
+                    });
+                }
+            })
+                .catch(() => {
+                resolve({
+                    address: undefined,
+                    lat: lat,
+                    lon: lon,
+                    error: true,
+                });
+            });
+        });
+    },
+    locationSearchEnabled: false,
+    locationValuesOverride: {
+        locationDistanceEnabled: true,
+        filterValues: ["any", "1000"],
+        filterUnit: "miles",
+        locationFilterDefaultValue: "any"
+    },
+};
+
+// 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: `
+    <ng-template
+      #locationTemplate
+      let-context="context"
+      let-locationData="locationData"
+      let-inputValue="inputValue"
+      let-selectValue="selectValue"
+      let-radiusChange="radiusChange"
+      let-inputChange="inputChange"
+      let-locationBlur="locationBlur"
+      let-locationError="locationError"
+      let-getCurrentLocation="getCurrentLocation"
+    >
+      <div
+        class="searchstax-location-input-container"
+        data-test-id="searchstax-location-input-container"
+        *ngIf="locationData"
+      >
+        <div class="searchstax-location-input-wrapper">
+          <span class="searchstax-location-input-label">NEAR</span>
+          <div class="searchstax-location-input-wrapper-inner">
+            <input
+              type="text"
+              id="searchstax-location-input"
+              class="searchstax-location-input"
+              [ngClass]="{
+                'searchstax-input-location-error': locationError
+              }"
+              placeholder="Zip, Postal Code or City..."
+              aria-label="Search Location Input"
+              data-test-id="searchstax-location-input"
+              [value]="inputValue"
+              (change)="inputChange($event, context)"
+              (blur)="locationBlur(context)"
+            />
+            <button
+              (click)="getCurrentLocation(context)"
+              class="searchstax-get-current-location-button"
+            >
+              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"
+            >
+              {{ value.label }}
+            </option>
+          </select>
+        </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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LocationTemplateComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "app-location-template",
+                    template: `
+    <ng-template
+      #locationTemplate
+      let-context="context"
+      let-locationData="locationData"
+      let-inputValue="inputValue"
+      let-selectValue="selectValue"
+      let-radiusChange="radiusChange"
+      let-inputChange="inputChange"
+      let-locationBlur="locationBlur"
+      let-locationError="locationError"
+      let-getCurrentLocation="getCurrentLocation"
+    >
+      <div
+        class="searchstax-location-input-container"
+        data-test-id="searchstax-location-input-container"
+        *ngIf="locationData"
+      >
+        <div class="searchstax-location-input-wrapper">
+          <span class="searchstax-location-input-label">NEAR</span>
+          <div class="searchstax-location-input-wrapper-inner">
+            <input
+              type="text"
+              id="searchstax-location-input"
+              class="searchstax-location-input"
+              [ngClass]="{
+                'searchstax-input-location-error': locationError
+              }"
+              placeholder="Zip, Postal Code or City..."
+              aria-label="Search Location Input"
+              data-test-id="searchstax-location-input"
+              [value]="inputValue"
+              (change)="inputChange($event, context)"
+              (blur)="locationBlur(context)"
+            />
+            <button
+              (click)="getCurrentLocation(context)"
+              class="searchstax-get-current-location-button"
+            >
+              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"
+            >
+              {{ value.label }}
+            </option>
+          </select>
+        </div>
+      </div>
+    </ng-template>
+  `,
+                }]
+        }], propDecorators: { locationTemplate: [{
+                type: ViewChild,
+                args: ["locationTemplate"]
+            }] } });
+
 class SearchstaxSearchLocationWidget {
     constructor(storeServiceService) {
         this.storeServiceService = storeServiceService;
@@ -180,11 +417,11 @@ class SearchstaxSearchLocationWidget {
         });
     }
     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\n    class=\"searchstax-location-input-container\"\n    data-test-id=\"searchstax-location-input-container\"\n    *ngIf=\"locationData && !templateOverride\"\n  >\n    <div class=\"searchstax-location-input-wrapper\">\n      <span class=\"searchstax-location-input-label\">NEAR</span>\n      <div class=\"searchstax-location-input-wrapper-inner\">\n        <input\n          type=\"text\"\n          id=\"searchstax-location-input\"\n          class=\"searchstax-location-input\"\n          [ngClass]=\"{\n            'searchstax-input-location-error': locationError\n          }\"\n          placeholder=\"Zip, Postal Code or City...\"\n          aria-label=\"Search Location Input\"\n          data-test-id=\"searchstax-location-input\"\n          [(ngModel)]=\"inputValue\"\n          (blur)=\"locationBlur(context)\"\n        />\n        <button\n          (click)=\"getCurrentLocation(context)\"\n          class=\"searchstax-get-current-location-button\"\n        >\n          Use my current location\n        </button>\n      </div>\n      <span\n        *ngIf=\"locationData.shouldShowLocationDistanceDropdown\"\n        class=\"searchstax-location-input-label\"\n        >WITHIN</span\n      >\n      <select\n        *ngIf=\"locationData.shouldShowLocationDistanceDropdown\"\n        id=\"searchstax-location-radius-select\"\n        class=\"searchstax-location-radius-select\"\n        aria-label=\"Search Location Radius Select\"\n        data-test-id=\"searchstax-location-radius-select\"\n        (change)=\"radiusChange($event, context)\"\n        [(ngModel)]=\"selectValue\"\n      >\n        <option\n          *ngFor=\"let value of locationData.locationSearchDistanceValues\"\n          [value]=\"value.value\"\n        >\n          {{ value.label }}\n        </option>\n      </select>\n    </div>\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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", 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\n    class=\"searchstax-location-input-container\"\n    data-test-id=\"searchstax-location-input-container\"\n    *ngIf=\"locationData && !templateOverride\"\n  >\n    <div class=\"searchstax-location-input-wrapper\">\n      <span class=\"searchstax-location-input-label\">NEAR</span>\n      <div class=\"searchstax-location-input-wrapper-inner\">\n        <input\n          type=\"text\"\n          id=\"searchstax-location-input\"\n          class=\"searchstax-location-input\"\n          [ngClass]=\"{\n            'searchstax-input-location-error': locationError\n          }\"\n          placeholder=\"Zip, Postal Code or City...\"\n          aria-label=\"Search Location Input\"\n          data-test-id=\"searchstax-location-input\"\n          [(ngModel)]=\"inputValue\"\n          (blur)=\"locationBlur(context)\"\n        />\n        <button\n          (click)=\"getCurrentLocation(context)\"\n          class=\"searchstax-get-current-location-button\"\n        >\n          Use my current location\n        </button>\n      </div>\n      <span\n        *ngIf=\"locationData.shouldShowLocationDistanceDropdown\"\n        class=\"searchstax-location-input-label\"\n        >WITHIN</span\n      >\n      <select\n        *ngIf=\"locationData.shouldShowLocationDistanceDropdown\"\n        id=\"searchstax-location-radius-select\"\n        class=\"searchstax-location-radius-select\"\n        aria-label=\"Search Location Radius Select\"\n        data-test-id=\"searchstax-location-radius-select\"\n        (change)=\"radiusChange($event, context)\"\n        [(ngModel)]=\"selectValue\"\n      >\n        <option\n          *ngFor=\"let value of locationData.locationSearchDistanceValues\"\n          [value]=\"value.value\"\n        >\n          {{ value.label }}\n        </option>\n      </select>\n    </div>\n  </div>\n\n  <div *ngIf=\"locationData && templateOverride\">\n    <ng-container\n      *ngTemplateOutlet=\"templateOverride; context: context\"\n    ></ng-container>\n  </div>\n</div>\n" }]
+            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: [{
                 type: Input
             }], locationSearchEnabled: [{
@@ -197,6 +434,128 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }] } });
 
+// 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: `
+    <ng-template
+      #inputTemplate
+      let-suggestions="suggestions"
+      let-onMouseLeave="onMouseLeave"
+      let-onMouseOver="onMouseOver"
+      let-onMouseClick="onMouseClick"
+      let-context="context"
+      let-locationWidgetConfig="locationWidgetConfig"
+    >
+      <div class="searchstax-search-input-wrapper">
+        <input
+          type="text"
+          id="searchstax-search-input"
+          class="searchstax-search-input"
+          placeholder="SEARCH FOR..."
+          aria-label="search"
+        />
+        <div
+          class="searchstax-autosuggest-container"
+          [ngClass]="{ hidden: suggestions.length === 0 }"
+          (mouseleave)="onMouseLeave(context)"
+        >
+          <div
+            class="searchstax-autosuggest-item"
+            *ngFor="let suggestion of suggestions"
+          >
+            <div
+              class="searchstax-autosuggest-item-term-container"
+              [innerHtml]="suggestion.term"
+              (mouseover)="onMouseOver(suggestion, context)"
+              tabindex="0"
+              (click)="onMouseClick($event, context)"
+            ></div>
+          </div>
+        </div>
+      </div>
+      <app-searchstax-search-location
+        [locationDecode]="locationWidgetConfig.locationDecode"
+        [locationDecodeCoordinatesToAddress]="
+          locationWidgetConfig.locationDecodeCoordinatesToAddress
+        "
+        [locationSearchEnabled]="locationWidgetConfig.locationSearchEnabled"
+        [locationValuesOverride]="locationWidgetConfig.locationValuesOverride"
+      >
+      </app-searchstax-search-location>
+      <button
+        class="searchstax-spinner-icon"
+        id="searchstax-search-input-action-button"
+        role="button"
+        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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputTemplateComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "app-input-template",
+                    template: `
+    <ng-template
+      #inputTemplate
+      let-suggestions="suggestions"
+      let-onMouseLeave="onMouseLeave"
+      let-onMouseOver="onMouseOver"
+      let-onMouseClick="onMouseClick"
+      let-context="context"
+      let-locationWidgetConfig="locationWidgetConfig"
+    >
+      <div class="searchstax-search-input-wrapper">
+        <input
+          type="text"
+          id="searchstax-search-input"
+          class="searchstax-search-input"
+          placeholder="SEARCH FOR..."
+          aria-label="search"
+        />
+        <div
+          class="searchstax-autosuggest-container"
+          [ngClass]="{ hidden: suggestions.length === 0 }"
+          (mouseleave)="onMouseLeave(context)"
+        >
+          <div
+            class="searchstax-autosuggest-item"
+            *ngFor="let suggestion of suggestions"
+          >
+            <div
+              class="searchstax-autosuggest-item-term-container"
+              [innerHtml]="suggestion.term"
+              (mouseover)="onMouseOver(suggestion, context)"
+              tabindex="0"
+              (click)="onMouseClick($event, context)"
+            ></div>
+          </div>
+        </div>
+      </div>
+      <app-searchstax-search-location
+        [locationDecode]="locationWidgetConfig.locationDecode"
+        [locationDecodeCoordinatesToAddress]="
+          locationWidgetConfig.locationDecodeCoordinatesToAddress
+        "
+        [locationSearchEnabled]="locationWidgetConfig.locationSearchEnabled"
+        [locationValuesOverride]="locationWidgetConfig.locationValuesOverride"
+      >
+      </app-searchstax-search-location>
+      <button
+        class="searchstax-spinner-icon"
+        id="searchstax-search-input-action-button"
+        role="button"
+        aria-label="search"
+      ></button>
+    </ng-template>
+  `,
+                }]
+        }], propDecorators: { inputTemplate: [{
+                type: ViewChild,
+                args: ["inputTemplate"]
+            }] } });
+
 class SearchstaxInputWidget {
     constructor(storeServiceService) {
         this.storeServiceService = storeServiceService;
@@ -205,6 +564,7 @@ class SearchstaxInputWidget {
         this.suggestions = [];
         this.context = this;
         this.templateData = null;
+        this.locationWidgetConfig = locationWidgetConfig;
     }
     ngOnInit() {
         if (this.storeServiceService.searchstax) {
@@ -234,42 +594,6 @@ class SearchstaxInputWidget {
             throw Error("Searchstax instance needs to be passed via props");
         }
     }
-    locationDecode(term) {
-        return new Promise((resolve) => {
-            // make a request to google geocoding API to retrieve lat, lon and address
-            const geocodingAPIKey = "AIzaSyDK5wQQaz7kmP60_DViAto5rTQ301eVBFs";
-            const geocodingURL = `https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURIComponent(term)}&key=${geocodingAPIKey}`;
-            fetch(geocodingURL)
-                .then((response) => response.json())
-                .then((data) => {
-                if (data.status === "OK" && data.results.length > 0) {
-                    const result = data.results[0];
-                    const location = {
-                        lat: result.geometry.location.lat,
-                        lon: result.geometry.location.lng,
-                        address: result.formatted_address,
-                    };
-                    resolve(location);
-                }
-                else {
-                    resolve({
-                        address: undefined,
-                        lat: undefined,
-                        lon: undefined,
-                        error: true,
-                    });
-                }
-            })
-                .catch(() => {
-                resolve({
-                    address: undefined,
-                    lat: undefined,
-                    lon: undefined,
-                    error: true,
-                });
-            });
-        });
-    }
     onMouseLeave(context) {
         context.storeServiceService.searchstax.searchInputWidget?.resetAutosuggestSelection();
         context.storeServiceService.searchstax.searchInputWidget?.markActiveAutosuggestItem();
@@ -290,11 +614,11 @@ class SearchstaxInputWidget {
         });
     }
     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 class=\"searchstax-search-input-container searchstax-search-input-container-new\" [class]=\"{ 'searchstax-alternative-render': !!templateData?.locationEnabled }\">\n    <ng-container *ngIf=\"!templateOverride\">\n      <div class=\"searchstax-search-input-wrapper\">\n      <input\n        type=\"text\"\n        id=\"searchstax-search-input\"\n        class=\"searchstax-search-input\"\n        placeholder=\"SEARCH FOR...\"\n        aria-label=\"search\"\n      />\n      <div\n        class=\"searchstax-autosuggest-container\"\n        [ngClass]=\"{ hidden: suggestions.length === 0 }\"\n        (mouseleave)=\"(onMouseLeave)\"\n      >\n        <div\n          class=\"searchstax-autosuggest-item\"\n          *ngFor=\"let suggestion of suggestions\"\n        >\n          <div\n            class=\"searchstax-autosuggest-item-term-container\"\n            [innerHtml]=\"suggestion.term\"\n            (mouseover)=\"onMouseOver(suggestion, context)\"\n            tabindex=\"0\"\n            (click)=\"onMouseClick($event, context)\"\n          ></div>\n        </div>\n      </div>\n      </div>\n      <app-searchstax-search-location [locationDecode]=\"locationDecode\"></app-searchstax-search-location>\n      <button\n        class=\"searchstax-spinner-icon\"\n        id=\"searchstax-search-input-action-button\"\n        aria-label=\"search\"\n      ></button>\n    </ng-container>\n    <ng-container *ngIf=\"templateOverride\">\n      <ng-container\n        *ngTemplateOutlet=\"templateOverride; context: context\"\n      ></ng-container>\n    </ng-container>\n\n    <!-- <slot\n      name=\"input\"\n      :suggestions=\"suggestions\"\n      :onMouseClick=\"onMouseClick\"\n      :onMouseOver=\"onMouseOver\"\n      :onMouseLeave=\"onMouseLeave\"\n    ></slot> -->\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SearchstaxSearchLocationWidget, selector: "app-searchstax-search-location", inputs: ["templateOverride", "locationSearchEnabled", "locationValuesOverride", "locationDecode", "locationDecodeCoordinatesToAddress"] }] }); }
+    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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchstaxInputWidget, decorators: [{
             type: Component,
-            args: [{ selector: "app-searchstax-input", template: "<div id=\"searchstax-input-container\">\n  <div class=\"searchstax-search-input-container searchstax-search-input-container-new\" [class]=\"{ 'searchstax-alternative-render': !!templateData?.locationEnabled }\">\n    <ng-container *ngIf=\"!templateOverride\">\n      <div class=\"searchstax-search-input-wrapper\">\n      <input\n        type=\"text\"\n        id=\"searchstax-search-input\"\n        class=\"searchstax-search-input\"\n        placeholder=\"SEARCH FOR...\"\n        aria-label=\"search\"\n      />\n      <div\n        class=\"searchstax-autosuggest-container\"\n        [ngClass]=\"{ hidden: suggestions.length === 0 }\"\n        (mouseleave)=\"(onMouseLeave)\"\n      >\n        <div\n          class=\"searchstax-autosuggest-item\"\n          *ngFor=\"let suggestion of suggestions\"\n        >\n          <div\n            class=\"searchstax-autosuggest-item-term-container\"\n            [innerHtml]=\"suggestion.term\"\n            (mouseover)=\"onMouseOver(suggestion, context)\"\n            tabindex=\"0\"\n            (click)=\"onMouseClick($event, context)\"\n          ></div>\n        </div>\n      </div>\n      </div>\n      <app-searchstax-search-location [locationDecode]=\"locationDecode\"></app-searchstax-search-location>\n      <button\n        class=\"searchstax-spinner-icon\"\n        id=\"searchstax-search-input-action-button\"\n        aria-label=\"search\"\n      ></button>\n    </ng-container>\n    <ng-container *ngIf=\"templateOverride\">\n      <ng-container\n        *ngTemplateOutlet=\"templateOverride; context: context\"\n      ></ng-container>\n    </ng-container>\n\n    <!-- <slot\n      name=\"input\"\n      :suggestions=\"suggestions\"\n      :onMouseClick=\"onMouseClick\"\n      :onMouseOver=\"onMouseOver\"\n      :onMouseLeave=\"onMouseLeave\"\n    ></slot> -->\n  </div>\n</div>\n" }]
+            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: [{
                 type: Input
             }], beforeAutosuggest: [{
@@ -307,6 +631,256 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }] } });
 
+// 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: `
+    <ng-template
+      #resultsTemplate
+      let-searchResults="searchResults"
+      let-resultClicked="resultClicked"
+      let-isImage="isImage"
+      let-context="context"
+    >
+      <div class="searchstax-search-results">
+        <a
+          *ngFor="let searchResult of searchResults"
+          [href]="searchResult.url"
+          [attr.data-searchstax-unique-result-id]="searchResult.uniqueId"
+          (click)="resultClicked(searchResult, $event, context)"
+          (keyup.enter)="resultClicked(searchResult, $event, context)"
+          (keyup.space)="resultClicked(searchResult, $event, context)"
+          tabindex="0"
+          class="searchstax-result-item-link searchstax-result-item-link-wrapping"
+        >
+          <div
+            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"
+            />
+            <div class="searchstax-search-result-title-container">
+              <span
+                class="searchstax-search-result-title"
+                [innerHTML]="searchResult.title"
+              ></span>
+            </div>
+            <p
+              *ngIf="searchResult.paths"
+              class="searchstax-search-result-common"
+              [innerHTML]="searchResult.paths"
+            ></p>
+            <p
+              *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
+                  class="searchstax-search-result-common"
+                  [innerHTML]="unmappedField.value"
+                ></p>
+              </div>
+            </div>
+          </div>
+        </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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ResultsTemplateComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "app-results-template",
+                    template: `
+    <ng-template
+      #resultsTemplate
+      let-searchResults="searchResults"
+      let-resultClicked="resultClicked"
+      let-isImage="isImage"
+      let-context="context"
+    >
+      <div class="searchstax-search-results">
+        <a
+          *ngFor="let searchResult of searchResults"
+          [href]="searchResult.url"
+          [attr.data-searchstax-unique-result-id]="searchResult.uniqueId"
+          (click)="resultClicked(searchResult, $event, context)"
+          (keyup.enter)="resultClicked(searchResult, $event, context)"
+          (keyup.space)="resultClicked(searchResult, $event, context)"
+          tabindex="0"
+          class="searchstax-result-item-link searchstax-result-item-link-wrapping"
+        >
+          <div
+            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"
+            />
+            <div class="searchstax-search-result-title-container">
+              <span
+                class="searchstax-search-result-title"
+                [innerHTML]="searchResult.title"
+              ></span>
+            </div>
+            <p
+              *ngIf="searchResult.paths"
+              class="searchstax-search-result-common"
+              [innerHTML]="searchResult.paths"
+            ></p>
+            <p
+              *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
+                  class="searchstax-search-result-common"
+                  [innerHTML]="unmappedField.value"
+                ></p>
+              </div>
+            </div>
+          </div>
+        </a>
+      </div>
+    </ng-template>
+  `,
+                }]
+        }], propDecorators: { resultsTemplate: [{
+                type: ViewChild,
+                args: ["resultsTemplate"]
+            }] } });
+
+// 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: `
+    <ng-template
+      #noResultsTemplate
+      let-metadata="metadata"
+      let-searchTerm="searchTerm"
+      let-executeSearch="executeSearch"
+      let-context="context"
+    >
+      <div class="searchstax-no-results">
+        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
+        >
+      </div>
+      <ul>
+        <li>
+          Try searching for search related terms or topics. We offer a wide
+          variety of content to help you get the information you need.
+        </li>
+        <li>Lost? Click on the ‘X” in the Search Box to reset your search.</li>
+      </ul>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NoResultsTemplateComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "app-no-results-template",
+                    template: `
+    <ng-template
+      #noResultsTemplate
+      let-metadata="metadata"
+      let-searchTerm="searchTerm"
+      let-executeSearch="executeSearch"
+      let-context="context"
+    >
+      <div class="searchstax-no-results">
+        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
+        >
+      </div>
+      <ul>
+        <li>
+          Try searching for search related terms or topics. We offer a wide
+          variety of content to help you get the information you need.
+        </li>
+        <li>Lost? Click on the ‘X” in the Search Box to reset your search.</li>
+      </ul>
+    </ng-template>
+  `,
+                }]
+        }], propDecorators: { noResultsTemplate: [{
+                type: ViewChild,
+                args: ["noResultsTemplate"]
+            }] } });
+
 class SearchstaxResultsWidget {
     get hooks() {
         const hooks = {};
@@ -371,11 +945,11 @@ class SearchstaxResultsWidget {
         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" }, ngImport: i0, template: "<div id=\"searchstax-results-container\">\n  <div class=\"searchstax-search-results-container\">\n    <div id=\"searchstax-result-container\">\n      <div\n        *ngIf=\"searchResults?.length === 0 && searchTerm !== '' && searchTerm !== '*' && storeServiceService.searchstax.dataLayer.parsedData.firstSearchHappened && !noResultsTemplate\"\n      >\n        <div class=\"searchstax-no-results\">\n          Showing <strong>no results</strong> for\n          <strong>\"{{ searchTerm }}\"</strong>\n          <br />\n          <span *ngIf=\"metadata?.spellingSuggestion\"\n            >&nbsp;Did you mean\n            <a href=\"#\" class=\"searchstax-suggestion-term\" (click)=\"executeSearch(metadata?.spellingSuggestion ?? '', $event, context)\">{{\n              metadata?.spellingSuggestion\n            }}</a\n            >?</span\n          >\n        </div>\n        <ul>\n          <li>\n            Try searching for search related terms or topics. We offer a wide\n            variety of content to help you get the information you need.\n          </li>\n          <li>Lost? Click on the \u2018X\u201D in the Search Box to reset your search.</li>\n        </ul>\n      </div>\n      <div\n        *ngIf=\"searchResults?.length === 0 && searchTerm !== '' && searchTerm !== '*' && storeServiceService.searchstax.dataLayer.parsedData.firstSearchHappened && noResultsTemplate\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"noResultsTemplate; context: context\"\n        ></ng-container>\n      </div>\n\n      <div\n        class=\"searchstax-search-results\"\n        *ngIf=\"searchResults && searchResults.length && !resultsTemplate\"\n      >\n\n      <a\n      *ngFor=\"let searchResult of searchResults\"\n      [href]=\"searchResult.url\"\n      [attr.data-searchstax-unique-result-id]=\"searchResult.uniqueId\"\n      (click)=\"resultClicked(searchResult, $event, context)\"\n      (keyup.enter)=\"resultClicked(searchResult, $event, context)\"\n      (keyup.space)=\"resultClicked(searchResult, $event, context)\"\n      tabindex=\"0\"\n      class=\"searchstax-result-item-link searchstax-result-item-link-wrapping\"\n    >\n\n        <div\n          class=\"searchstax-search-result\"\n          [ngClass]=\"{ 'has-thumbnail': searchResult.thumbnail }\"\n\n        >\n          <div\n            *ngIf=\"searchResult.promoted\"\n            class=\"searchstax-search-result-promoted\"\n          ></div>\n          <div\n            *ngIf=\"searchResult.ribbon\"\n            [innerHTML]=\"searchResult.ribbon\"\n            class=\"searchstax-search-result-ribbon\"\n          >\n          </div>\n          <img\n            *ngIf=\"searchResult.thumbnail\"\n            [src]=\"searchResult.thumbnail\"\n            class=\"searchstax-thumbnail\"\n          />\n          <div class=\"searchstax-search-result-title-container\">\n            <span class=\"searchstax-search-result-title\" [innerHTML]=\"searchResult.title\"></span>\n          </div>\n          <p *ngIf=\"searchResult.paths\" class=\"searchstax-search-result-common\" [innerHTML]=\"searchResult.paths\">\n          </p>\n          <p\n            *ngIf=\"searchResult.description\"\n            [innerHTML]=\"searchResult.description\"\n            class=\"searchstax-search-result-description searchstax-search-result-common\"\n          >\n          </p>\n          <div *ngFor=\"let unmappedField of searchResult.unmappedFields\">\n            <div\n              *ngIf=\"isImage(unmappedField)\"\n              class=\"searchstax-search-result-image-container\"\n            >\n              <img\n                [src]=\"unmappedField.value\"\n                class=\"searchstax-result-image\"\n              />\n            </div>\n            <div *ngIf=\"!isImage(unmappedField)\">\n              <p class=\"searchstax-search-result-common\"\n                 [innerHTML]=\"unmappedField.value\"\n              >\n              </p>\n            </div>\n          </div>\n        </div>\n      </a>\n      </div>\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</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    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" }, 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchstaxResultsWidget, decorators: [{
             type: Component,
-            args: [{ selector: 'app-searchstax-results', template: "<div id=\"searchstax-results-container\">\n  <div class=\"searchstax-search-results-container\">\n    <div id=\"searchstax-result-container\">\n      <div\n        *ngIf=\"searchResults?.length === 0 && searchTerm !== '' && searchTerm !== '*' && storeServiceService.searchstax.dataLayer.parsedData.firstSearchHappened && !noResultsTemplate\"\n      >\n        <div class=\"searchstax-no-results\">\n          Showing <strong>no results</strong> for\n          <strong>\"{{ searchTerm }}\"</strong>\n          <br />\n          <span *ngIf=\"metadata?.spellingSuggestion\"\n            >&nbsp;Did you mean\n            <a href=\"#\" class=\"searchstax-suggestion-term\" (click)=\"executeSearch(metadata?.spellingSuggestion ?? '', $event, context)\">{{\n              metadata?.spellingSuggestion\n            }}</a\n            >?</span\n          >\n        </div>\n        <ul>\n          <li>\n            Try searching for search related terms or topics. We offer a wide\n            variety of content to help you get the information you need.\n          </li>\n          <li>Lost? Click on the \u2018X\u201D in the Search Box to reset your search.</li>\n        </ul>\n      </div>\n      <div\n        *ngIf=\"searchResults?.length === 0 && searchTerm !== '' && searchTerm !== '*' && storeServiceService.searchstax.dataLayer.parsedData.firstSearchHappened && noResultsTemplate\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"noResultsTemplate; context: context\"\n        ></ng-container>\n      </div>\n\n      <div\n        class=\"searchstax-search-results\"\n        *ngIf=\"searchResults && searchResults.length && !resultsTemplate\"\n      >\n\n      <a\n      *ngFor=\"let searchResult of searchResults\"\n      [href]=\"searchResult.url\"\n      [attr.data-searchstax-unique-result-id]=\"searchResult.uniqueId\"\n      (click)=\"resultClicked(searchResult, $event, context)\"\n      (keyup.enter)=\"resultClicked(searchResult, $event, context)\"\n      (keyup.space)=\"resultClicked(searchResult, $event, context)\"\n      tabindex=\"0\"\n      class=\"searchstax-result-item-link searchstax-result-item-link-wrapping\"\n    >\n\n        <div\n          class=\"searchstax-search-result\"\n          [ngClass]=\"{ 'has-thumbnail': searchResult.thumbnail }\"\n\n        >\n          <div\n            *ngIf=\"searchResult.promoted\"\n            class=\"searchstax-search-result-promoted\"\n          ></div>\n          <div\n            *ngIf=\"searchResult.ribbon\"\n            [innerHTML]=\"searchResult.ribbon\"\n            class=\"searchstax-search-result-ribbon\"\n          >\n          </div>\n          <img\n            *ngIf=\"searchResult.thumbnail\"\n            [src]=\"searchResult.thumbnail\"\n            class=\"searchstax-thumbnail\"\n          />\n          <div class=\"searchstax-search-result-title-container\">\n            <span class=\"searchstax-search-result-title\" [innerHTML]=\"searchResult.title\"></span>\n          </div>\n          <p *ngIf=\"searchResult.paths\" class=\"searchstax-search-result-common\" [innerHTML]=\"searchResult.paths\">\n          </p>\n          <p\n            *ngIf=\"searchResult.description\"\n            [innerHTML]=\"searchResult.description\"\n            class=\"searchstax-search-result-description searchstax-search-result-common\"\n          >\n          </p>\n          <div *ngFor=\"let unmappedField of searchResult.unmappedFields\">\n            <div\n              *ngIf=\"isImage(unmappedField)\"\n              class=\"searchstax-search-result-image-container\"\n            >\n              <img\n                [src]=\"unmappedField.value\"\n                class=\"searchstax-result-image\"\n              />\n            </div>\n            <div *ngIf=\"!isImage(unmappedField)\">\n              <p class=\"searchstax-search-result-common\"\n                 [innerHTML]=\"unmappedField.value\"\n              >\n              </p>\n            </div>\n          </div>\n        </div>\n      </a>\n      </div>\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</div>\n" }]
+            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: [{
                 type: Input
             }], noResultsTemplate: [{
@@ -386,6 +960,90 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }] } });
 
+// 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: `
+    <ng-template
+      #feedbackTemplate
+      let-searchFeedbackData="searchFeedbackData"
+      let-onOriginalQueryClick="onOriginalQueryClick"
+      let-context="context"
+    >
+      <h2 class="searchstax-feedback-container">
+        Showing
+        <b
+          >{{ searchFeedbackData!.startResultIndex }} -
+          {{ searchFeedbackData!.endResultIndex }}</b
+        >
+        of <b>{{ searchFeedbackData!.totalResults }}</b> results
+        <span *ngIf="searchFeedbackData.searchTerm"
+          >for "<b>{{ searchFeedbackData!.searchTerm }}</b
+          >"
+        </span>
+        <div class="searchstax-feedback-container-suggested">
+          <div *ngIf="searchFeedbackData.autoCorrectedQuery">
+            Search instead for
+            <a
+              href="#"
+              (click)="onOriginalQueryClick($event, context)"
+              class="searchstax-feedback-original-query"
+              [attr.aria-label]="
+                'Search instead for: ' + searchFeedbackData!.originalQuery
+              "
+              >{{ searchFeedbackData!.originalQuery }}</a
+            >
+          </div>
+        </div>
+      </h2>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverviewTemplateComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "app-overview-template",
+                    template: `
+    <ng-template
+      #feedbackTemplate
+      let-searchFeedbackData="searchFeedbackData"
+      let-onOriginalQueryClick="onOriginalQueryClick"
+      let-context="context"
+    >
+      <h2 class="searchstax-feedback-container">
+        Showing
+        <b
+          >{{ searchFeedbackData!.startResultIndex }} -
+          {{ searchFeedbackData!.endResultIndex }}</b
+        >
+        of <b>{{ searchFeedbackData!.totalResults }}</b> results
+        <span *ngIf="searchFeedbackData.searchTerm"
+          >for "<b>{{ searchFeedbackData!.searchTerm }}</b
+          >"
+        </span>
+        <div class="searchstax-feedback-container-suggested">
+          <div *ngIf="searchFeedbackData.autoCorrectedQuery">
+            Search instead for
+            <a
+              href="#"
+              (click)="onOriginalQueryClick($event, context)"
+              class="searchstax-feedback-original-query"
+              [attr.aria-label]="
+                'Search instead for: ' + searchFeedbackData!.originalQuery
+              "
+              >{{ searchFeedbackData!.originalQuery }}</a
+            >
+          </div>
+        </div>
+      </h2>
+    </ng-template>
+  `,
+                }]
+        }], propDecorators: { overviewTemplate: [{
+                type: ViewChild,
+                args: ["feedbackTemplate"]
+            }] } });
+
 class SearchstaxSearchFeedbackWidget {
     constructor(storeServiceService) {
         this.storeServiceService = storeServiceService;
@@ -414,15 +1072,167 @@ class SearchstaxSearchFeedbackWidget {
         });
     }
     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    Showing\n    <b\n      >{{ searchFeedbackData!.startResultIndex }} -\n      {{ searchFeedbackData!.endResultIndex }}</b\n    >\n    of <b>{{ searchFeedbackData!.totalResults }}</b> results\n    <span *ngIf=\"searchFeedbackData.searchTerm\"\n      >for \"<b>{{ searchFeedbackData!.searchTerm }}</b\n      >\"\n    </span>\n    <div class=\"searchstax-feedback-container-suggested\">\n      <div *ngIf=\"searchFeedbackData.autoCorrectedQuery\">\n        Search instead for\n        <a\n          href=\"#\"\n          (click)=\"onOriginalQueryClick($event, context)\"\n          class=\"searchstax-feedback-original-query\"\n          >{{ searchFeedbackData!.originalQuery }}</a\n        >\n      </div>\n    </div>\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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", 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    Showing\n    <b\n      >{{ searchFeedbackData!.startResultIndex }} -\n      {{ searchFeedbackData!.endResultIndex }}</b\n    >\n    of <b>{{ searchFeedbackData!.totalResults }}</b> results\n    <span *ngIf=\"searchFeedbackData.searchTerm\"\n      >for \"<b>{{ searchFeedbackData!.searchTerm }}</b\n      >\"\n    </span>\n    <div class=\"searchstax-feedback-container-suggested\">\n      <div *ngIf=\"searchFeedbackData.autoCorrectedQuery\">\n        Search instead for\n        <a\n          href=\"#\"\n          (click)=\"onOriginalQueryClick($event, context)\"\n          class=\"searchstax-feedback-original-query\"\n          >{{ searchFeedbackData!.originalQuery }}</a\n        >\n      </div>\n    </div>\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" }]
+            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: [{
                 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: `
+    <ng-template
+      #paginationTemplate
+      let-paginationData="paginationData"
+      let-previousPage="previousPage"
+      let-nextPage="nextPage"
+      let-context="context"
+    >
+      <div class="searchstax-pagination-container">
+        <div class="searchstax-pagination-content">
+          <a
+            class="searchstax-pagination-previous"
+            [class]="paginationData.isFirstPage ? 'disabled' : ''"
+            (click)="previousPage($event, context)"
+            (keyup.enter)="previousPage($event, context)"
+            (keyup.space)="previousPage($event, context)"
+            tabindex="0"
+            id="searchstax-pagination-previous"
+          >
+            &lt; Previous
+          </a>
+          <div class="searchstax-pagination-details">
+            {{ paginationData?.startResultIndex }} -
+            {{ paginationData?.endResultIndex }} of
+            {{ paginationData?.totalResults }}
+          </div>
+          <a
+            class="searchstax-pagination-next"
+            [class]="paginationData.isLastPage ? 'disabled' : ''"
+            (click)="nextPage($event, context)"
+            (keyup.enter)="nextPage($event, context)"
+            (keyup.space)="nextPage($event, context)"
+            tabindex="0"
+            id="searchstax-pagination-next"
+            >Next ></a
+          >
+        </div>
+      </div>
+    </ng-template>
+  `, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaginationTemplateComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "app-pagination-template",
+                    template: `
+    <ng-template
+      #paginationTemplate
+      let-paginationData="paginationData"
+      let-previousPage="previousPage"
+      let-nextPage="nextPage"
+      let-context="context"
+    >
+      <div class="searchstax-pagination-container">
+        <div class="searchstax-pagination-content">
+          <a
+            class="searchstax-pagination-previous"
+            [class]="paginationData.isFirstPage ? 'disabled' : ''"
+            (click)="previousPage($event, context)"
+            (keyup.enter)="previousPage($event, context)"
+            (keyup.space)="previousPage($event, context)"
+            tabindex="0"
+            id="searchstax-pagination-previous"
+          >
+            &lt; Previous
+          </a>
+          <div class="searchstax-pagination-details">
+            {{ paginationData?.startResultIndex }} -
+            {{ paginationData?.endResultIndex }} of
+            {{ paginationData?.totalResults }}
+          </div>
+          <a
+            class="searchstax-pagination-next"
+            [class]="paginationData.isLastPage ? 'disabled' : ''"
+            (click)="nextPage($event, context)"
+            (keyup.enter)="nextPage($event, context)"
+            (keyup.space)="nextPage($event, context)"
+            tabindex="0"
+            id="searchstax-pagination-next"
+            >Next ></a
+          >
+        </div>
+      </div>
+    </ng-template>
+  `,
+                }]
+        }], propDecorators: { paginationTemplate: [{
+                type: ViewChild,
+                args: ["paginationTemplate"]
+            }] } });
+
+// 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: `
+    <ng-template
+      #infiniteScrollTemplate
+      let-paginationData="paginationData"
+      let-nextPage="nextPage"
+      let-context="context"
+    >
+      <div class="searchstax-pagination-container">
+        <div class="searchstax-pagination-content">
+          <a
+            class="searchstax-pagination-load-more"
+            (click)="nextPage($event, context)"
+            (keyup.enter)="nextPage($event, context)"
+            (keyup.space)="nextPage($event, context)"
+            tabindex="0"
+          >
+            Load More
+          </a>
+        </div>
+      </div>
+    </ng-template>
+  `, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaginationInfiniteTemplateComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "app-pagination-infinite-template",
+                    template: `
+    <ng-template
+      #infiniteScrollTemplate
+      let-paginationData="paginationData"
+      let-nextPage="nextPage"
+      let-context="context"
+    >
+      <div class="searchstax-pagination-container">
+        <div class="searchstax-pagination-content">
+          <a
+            class="searchstax-pagination-load-more"
+            (click)="nextPage($event, context)"
+            (keyup.enter)="nextPage($event, context)"
+            (keyup.space)="nextPage($event, context)"
+            tabindex="0"
+          >
+            Load More
+          </a>
+        </div>
+      </div>
+    </ng-template>
+  `,
+                }]
+        }], propDecorators: { infiniteScrollTemplate: [{
+                type: ViewChild,
+                args: ["infiniteScrollTemplate"]
+            }] } });
+
 class SearchstaxSearchPaginationWidget {
     constructor(storeServiceService) {
         this.storeServiceService = storeServiceService;
@@ -470,17 +1280,561 @@ class SearchstaxSearchPaginationWidget {
         });
     }
     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  <div\n    class=\"searchstax-pagination-container\"\n    *ngIf=\"\n      paginationData?.totalResults &&\n      !templateOverride &&\n      !paginationData?.isInfiniteScroll\n    \"\n  >\n    <div class=\"searchstax-pagination-content\">\n      <a\n        class=\"searchstax-pagination-previous\"\n        [class]=\"paginationData?.isFirstPage ? 'disabled' : ''\"\n        (click)=\"previousPage($event, context)\"\n        (keyup.enter)=\"previousPage($event, context)\"\n        (keyup.space)=\"previousPage($event, context)\"\n        tabindex=\"0\"\n        id=\"searchstax-pagination-previous\"\n      >\n        &lt; Previous\n      </a>\n      <div class=\"searchstax-pagination-details\">\n        {{ paginationData?.startResultIndex }} -\n        {{ paginationData?.endResultIndex }} of\n        {{ paginationData?.totalResults }}\n      </div>\n      <a\n        class=\"searchstax-pagination-next\"\n        [class]=\"paginationData?.isLastPage ? 'disabled' : ''\"\n        (click)=\"nextPage($event, context)\"\n        (keyup.enter)=\"nextPage($event, context)\"\n        (keyup.space)=\"nextPage($event, context)\"\n        tabindex=\"0\"\n        id=\"searchstax-pagination-next\"\n        >Next ></a\n      >\n    </div>\n  </div>\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  <div\n    class=\"searchstax-pagination-container\"\n    *ngIf=\"\n      paginationData?.totalResults &&\n      !infiniteScrollTemplateOverride &&\n      paginationData?.totalResults !== 0 &&\n      !paginationData?.isLastPage &&\n      paginationData?.isInfiniteScroll\n    \"\n  >\n    <a\n      class=\"searchstax-pagination-load-more\"\n      (click)=\"nextPage($event, context)\"\n      (keyup.enter)=\"nextPage($event, context)\"\n      (keyup.space)=\"nextPage($event, context)\"\n      tabindex=\"0\"\n    >\n    Load More\n    </a>\n  </div>\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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchstaxSearchPaginationWidget, decorators: [{
             type: Component,
-            args: [{ selector: "app-searchstax-search-pagination", template: "<div [id]=\"'searchstax-pagination-container' + rand\">\n  <div\n    class=\"searchstax-pagination-container\"\n    *ngIf=\"\n      paginationData?.totalResults &&\n      !templateOverride &&\n      !paginationData?.isInfiniteScroll\n    \"\n  >\n    <div class=\"searchstax-pagination-content\">\n      <a\n        class=\"searchstax-pagination-previous\"\n        [class]=\"paginationData?.isFirstPage ? 'disabled' : ''\"\n        (click)=\"previousPage($event, context)\"\n        (keyup.enter)=\"previousPage($event, context)\"\n        (keyup.space)=\"previousPage($event, context)\"\n        tabindex=\"0\"\n        id=\"searchstax-pagination-previous\"\n      >\n        &lt; Previous\n      </a>\n      <div class=\"searchstax-pagination-details\">\n        {{ paginationData?.startResultIndex }} -\n        {{ paginationData?.endResultIndex }} of\n        {{ paginationData?.totalResults }}\n      </div>\n      <a\n        class=\"searchstax-pagination-next\"\n        [class]=\"paginationData?.isLastPage ? 'disabled' : ''\"\n        (click)=\"nextPage($event, context)\"\n        (keyup.enter)=\"nextPage($event, context)\"\n        (keyup.space)=\"nextPage($event, context)\"\n        tabindex=\"0\"\n        id=\"searchstax-pagination-next\"\n        >Next ></a\n      >\n    </div>\n  </div>\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  <div\n    class=\"searchstax-pagination-container\"\n    *ngIf=\"\n      paginationData?.totalResults &&\n      !infiniteScrollTemplateOverride &&\n      paginationData?.totalResults !== 0 &&\n      !paginationData?.isLastPage &&\n      paginationData?.isInfiniteScroll\n    \"\n  >\n    <a\n      class=\"searchstax-pagination-load-more\"\n      (click)=\"nextPage($event, context)\"\n      (keyup.enter)=\"nextPage($event, context)\"\n      (keyup.space)=\"nextPage($event, context)\"\n      tabindex=\"0\"\n    >\n    Load More\n    </a>\n  </div>\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" }]
+            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: [{
                 type: Input
             }], infiniteScrollTemplateOverride: [{
                 type: Input
             }] } });
 
+// 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: `
+    <ng-template
+      #templateOverrideDesktop
+      let-facetsTemplateDataDesktop="facetsTemplateDataDesktop"
+      let-isNotDeactivated="isNotDeactivated"
+      let-context="context"
+      let-toggleFacetGroup="toggleFacetGroup"
+      let-facetValues="facetValues"
+      let-isChecked="isChecked"
+      let-selectFacet="selectFacet"
+      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) }"
+        >
+          <div>
+            <div
+              class="searchstax-facet-title-container"
+              (click)="toggleFacetGroup(facet.name, context)"
+            >
+              <div class="searchstax-facet-title">
+                {{ facet.label }}
+              </div>
+              <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
+              >
+                <div class="searchstax-facet-input">
+                  <input
+                    type="checkbox"
+                    class="searchstax-facet-input-checkbox"
+                    [checked]="isChecked(facetValue, context)"
+                    [attr.aria-label]="
+                      facetValue.value + ' ' + facetValue.count
+                    "
+                    [disabled]="facetValue.disabled"
+                    (click)="
+                      selectFacet(ref, $event, facetValue, true, context)
+                    "
+                  />
+                </div>
+                <div
+                  class="searchstax-facet-value-label"
+                  (click)="selectFacet(ref, $event, facetValue, false, context)"
+                >
+                  {{ facetValue.value }}
+                </div>
+                <div
+                  class="searchstax-facet-value-count"
+                  (click)="selectFacet(ref, $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"
+                >
+                  <div
+                    *ngIf="facet.showingAllFacets"
+                    class="searchstax-facet-show-less-button searchstax-facet-show-button"
+                  >
+                    less
+                  </div>
+                  <div
+                    *ngIf="!facet.showingAllFacets"
+                    class="searchstax-facet-show-more-button searchstax-facet-show-button"
+                  >
+                    more
+                  </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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FacetDesktopTemplateComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "app-facet-desktop-template",
+                    template: `
+    <ng-template
+      #templateOverrideDesktop
+      let-facetsTemplateDataDesktop="facetsTemplateDataDesktop"
+      let-isNotDeactivated="isNotDeactivated"
+      let-context="context"
+      let-toggleFacetGroup="toggleFacetGroup"
+      let-facetValues="facetValues"
+      let-isChecked="isChecked"
+      let-selectFacet="selectFacet"
+      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) }"
+        >
+          <div>
+            <div
+              class="searchstax-facet-title-container"
+              (click)="toggleFacetGroup(facet.name, context)"
+            >
+              <div class="searchstax-facet-title">
+                {{ facet.label }}
+              </div>
+              <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
+              >
+                <div class="searchstax-facet-input">
+                  <input
+                    type="checkbox"
+                    class="searchstax-facet-input-checkbox"
+                    [checked]="isChecked(facetValue, context)"
+                    [attr.aria-label]="
+                      facetValue.value + ' ' + facetValue.count
+                    "
+                    [disabled]="facetValue.disabled"
+                    (click)="
+                      selectFacet(ref, $event, facetValue, true, context)
+                    "
+                  />
+                </div>
+                <div
+                  class="searchstax-facet-value-label"
+                  (click)="selectFacet(ref, $event, facetValue, false, context)"
+                >
+                  {{ facetValue.value }}
+                </div>
+                <div
+                  class="searchstax-facet-value-count"
+                  (click)="selectFacet(ref, $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"
+                >
+                  <div
+                    *ngIf="facet.showingAllFacets"
+                    class="searchstax-facet-show-less-button searchstax-facet-show-button"
+                  >
+                    less
+                  </div>
+                  <div
+                    *ngIf="!facet.showingAllFacets"
+                    class="searchstax-facet-show-more-button searchstax-facet-show-button"
+                  >
+                    more
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </ng-template>
+  `,
+                }]
+        }], propDecorators: { templateOverrideDesktop: [{
+                type: ViewChild,
+                args: ["templateOverrideDesktop"]
+            }] } });
+
+// 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: `
+    <ng-template
+      #templateOverrideMobile
+      let-isNotDeactivated="isNotDeactivated"
+      let-context="context"
+      let-toggleFacetGroup="toggleFacetGroup"
+      let-facetValues="facetValues"
+      let-isChecked="isChecked"
+      let-selectFacet="selectFacet"
+      let-openOverlay="openOverlay"
+      let-selectedFacetsCheckboxes="selectedFacetsCheckboxes"
+      let-unselectFacet="unselectFacet"
+      let-unselectAll="unselectAll"
+      let-facetMobileData="facetMobileData"
+      let-facetsTemplateDataMobile="facetsTemplateDataMobile"
+      let-closeOverlay="closeOverlay"
+      let-showMoreLessDesktop="showMoreLessDesktop"
+      let-showMoreLessMobile="showMoreLessMobile"
+    >
+      <div class="searchstax-facets-container-mobile">
+        <div class="searchstax-facets-pills-container">
+          <div
+            class="searchstax-facets-pill searchstax-facets-pill-filter-by"
+            (click)="openOverlay(context)"
+          >
+            <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)"
+            >
+              <div class="searchstax-facets-pill-label">
+                {{ facet.value }} ({{ facet.count }})
+              </div>
+              <div class="searchstax-facets-pill-icon-close"></div>
+            </div>
+          </div>
+          <div
+            class="searchstax-facets-pill searchstax-clear-filters searchstax-facets-pill-clear-all"
+            *ngIf="selectedFacetsCheckboxes.length"
+            (click)="unselectAll(context)"
+          >
+            <div class="searchstax-facets-pill-label">Clear Filters</div>
+          </div>
+        </div>
+        <div
+          class="searchstax-facets-mobile-overlay"
+          [class]="{
+            'searchstax-show': facetMobileData(facetsTemplateDataMobile)
+              ?.overlayOpened
+          }"
+        >
+          <div class="searchstax-facets-mobile-overlay-header">
+            <div class="searchstax-facets-mobile-overlay-header-title">
+              Filter By
+            </div>
+            <div
+              class="searchstax-search-close"
+              (click)="closeOverlay(context)"
+            ></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)
+              }"
+            >
+              <div>
+                <div
+                  class="searchstax-facet-title-container"
+                  (click)="toggleFacetGroup(facet.name, context)"
+                >
+                  <div class="searchstax-facet-title">
+                    {{ facet.label }}
+                  </div>
+                  <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
+                  >
+                    <div class="searchstax-facet-input">
+                      <input
+                        type="checkbox"
+                        class="searchstax-facet-input-checkbox"
+                        [checked]="isChecked(facetValue, context)"
+                        [attr.aria-label]="
+                          facetValue.value + ' ' + facetValue.count
+                        "
+                        [disabled]="facetValue.disabled"
+                        (click)="
+                          selectFacet(ref, $event, facetValue, true, context)
+                        "
+                      />
+                    </div>
+                    <div
+                      class="searchstax-facet-value-label"
+                      (click)="
+                        selectFacet(ref, $event, facetValue, false, context)
+                      "
+                    >
+                      {{ facetValue.value }}
+                    </div>
+                    <div
+                      class="searchstax-facet-value-count"
+                      (click)="
+                        selectFacet(ref, $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
+                        *ngIf="!facet.showingAllFacets"
+                        class="searchstax-facet-show-more-button searchstax-facet-show-button"
+                      >
+                        more
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <button
+            class="searchstax-facets-mobile-overlay-done"
+            (click)="closeOverlay(context)"
+          >
+            Done
+          </button>
+        </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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FacetMobileTemplateComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "app-facet-mobile-template",
+                    template: `
+    <ng-template
+      #templateOverrideMobile
+      let-isNotDeactivated="isNotDeactivated"
+      let-context="context"
+      let-toggleFacetGroup="toggleFacetGroup"
+      let-facetValues="facetValues"
+      let-isChecked="isChecked"
+      let-selectFacet="selectFacet"
+      let-openOverlay="openOverlay"
+      let-selectedFacetsCheckboxes="selectedFacetsCheckboxes"
+      let-unselectFacet="unselectFacet"
+      let-unselectAll="unselectAll"
+      let-facetMobileData="facetMobileData"
+      let-facetsTemplateDataMobile="facetsTemplateDataMobile"
+      let-closeOverlay="closeOverlay"
+      let-showMoreLessDesktop="showMoreLessDesktop"
+      let-showMoreLessMobile="showMoreLessMobile"
+    >
+      <div class="searchstax-facets-container-mobile">
+        <div class="searchstax-facets-pills-container">
+          <div
+            class="searchstax-facets-pill searchstax-facets-pill-filter-by"
+            (click)="openOverlay(context)"
+          >
+            <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)"
+            >
+              <div class="searchstax-facets-pill-label">
+                {{ facet.value }} ({{ facet.count }})
+              </div>
+              <div class="searchstax-facets-pill-icon-close"></div>
+            </div>
+          </div>
+          <div
+            class="searchstax-facets-pill searchstax-clear-filters searchstax-facets-pill-clear-all"
+            *ngIf="selectedFacetsCheckboxes.length"
+            (click)="unselectAll(context)"
+          >
+            <div class="searchstax-facets-pill-label">Clear Filters</div>
+          </div>
+        </div>
+        <div
+          class="searchstax-facets-mobile-overlay"
+          [class]="{
+            'searchstax-show': facetMobileData(facetsTemplateDataMobile)
+              ?.overlayOpened
+          }"
+        >
+          <div class="searchstax-facets-mobile-overlay-header">
+            <div class="searchstax-facets-mobile-overlay-header-title">
+              Filter By
+            </div>
+            <div
+              class="searchstax-search-close"
+              (click)="closeOverlay(context)"
+            ></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)
+              }"
+            >
+              <div>
+                <div
+                  class="searchstax-facet-title-container"
+                  (click)="toggleFacetGroup(facet.name, context)"
+                >
+                  <div class="searchstax-facet-title">
+                    {{ facet.label }}
+                  </div>
+                  <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
+                  >
+                    <div class="searchstax-facet-input">
+                      <input
+                        type="checkbox"
+                        class="searchstax-facet-input-checkbox"
+                        [checked]="isChecked(facetValue, context)"
+                        [attr.aria-label]="
+                          facetValue.value + ' ' + facetValue.count
+                        "
+                        [disabled]="facetValue.disabled"
+                        (click)="
+                          selectFacet(ref, $event, facetValue, true, context)
+                        "
+                      />
+                    </div>
+                    <div
+                      class="searchstax-facet-value-label"
+                      (click)="
+                        selectFacet(ref, $event, facetValue, false, context)
+                      "
+                    >
+                      {{ facetValue.value }}
+                    </div>
+                    <div
+                      class="searchstax-facet-value-count"
+                      (click)="
+                        selectFacet(ref, $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
+                        *ngIf="!facet.showingAllFacets"
+                        class="searchstax-facet-show-more-button searchstax-facet-show-button"
+                      >
+                        more
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <button
+            class="searchstax-facets-mobile-overlay-done"
+            (click)="closeOverlay(context)"
+          >
+            Done
+          </button>
+        </div>
+      </div>
+    </ng-template>
+  `,
+                }]
+        }], propDecorators: { templateOverrideMobile: [{
+                type: ViewChild,
+                args: ["templateOverrideMobile"]
+            }] } });
+
 class SearchstaxSearchFacetsWidget {
     // @ViewChildren("facetContainers") facetContainers: QueryList<ElementRef>;
     constructor(storeServiceService) {
@@ -570,11 +1924,11 @@ class SearchstaxSearchFacetsWidget {
         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" }, ngImport: i0, template: "<div [id]=\"'searchstax-facets-container' + rand\">\n  <div\n    *ngIf=\"facetsTemplateDataDesktop?.hasResultsOrExternalPromotions && !templateOverrideDesktop\"\n    class=\"searchstax-facets-container-desktop\"\n  >\n    <div\n      class=\"searchstax-facet-container\"\n      *ngFor=\"let facet of facetsTemplateDataDesktop?.facets\"\n      [class]=\"{ active: isNotDeactivated(facet.name, context) }\"\n    >\n      <div>\n        <div class=\"searchstax-facet-title-container\" (click)=\"toggleFacetGroup(facet.name, context)\">\n          <div class=\"searchstax-facet-title\">{{ facet.label }}</div>\n          <div class=\"searchstax-facet-title-arrow active\"></div>\n        </div>\n        <div class=\"searchstax-facet-values-container\">\n          <div\n            *ngFor=\"let facetValue of facetValues(facet); index as key\"\n            class=\"searchstax-facet-value-container\"\n            [class]=\"{ 'searchstax-facet-value-disabled': facetValue.disabled }\"\n            #ref\n          >\n            <div class=\"searchstax-facet-input\">\n              <input\n                type=\"checkbox\"\n                class=\"searchstax-facet-input-checkbox\"\n                [attr.aria-label]=\"facetValue.value + ' ' + facetValue.count\"\n                [checked]=\"isChecked(facetValue, context)\"\n                [disabled]=\"facetValue.disabled\"\n                (click)=\"selectFacet(ref, $event, facetValue, true, context)\"\n              />\n            </div>\n            <div class=\"searchstax-facet-value-label\" (click)=\"selectFacet(ref, $event, facetValue, false, context)\">\n              {{ facetValue.value }}\n            </div>\n            <div class=\"searchstax-facet-value-count\" (click)=\"selectFacet(ref, $event, facetValue, false, context)\">\n              ({{ facetValue.count }})\n            </div>\n          </div>\n          <div class=\"searchstax-facet-show-more-container\" *ngIf=\"facet.hasMoreFacets\">\n            <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\">\n              <div\n                *ngIf=\"facet.showingAllFacets\"\n                class=\"searchstax-facet-show-less-button searchstax-facet-show-button\"\n              >\n                less\n              </div>\n              <div\n                *ngIf=\"!facet.showingAllFacets\"\n                class=\"searchstax-facet-show-more-button searchstax-facet-show-button\"\n              >\n                more\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div *ngIf=\"facetsTemplateDataDesktop?.hasResultsOrExternalPromotions && templateOverrideDesktop\">\n    <ng-container *ngTemplateOutlet=\"templateOverrideDesktop; context: context\"></ng-container>\n  </div>\n\n  <div\n    class=\"searchstax-facets-container-mobile\"\n    *ngIf=\"facetsTemplateDataMobile?.hasResultsOrExternalPromotions && !templateOverrideMobile\"\n  >\n    <div class=\"searchstax-facets-pills-container\">\n      <div class=\"searchstax-facets-pill searchstax-facets-pill-filter-by\" (click)=\"openOverlay(context)\">\n        <div class=\"searchstax-facets-pill-label\">Filter By</div>\n      </div>\n      <div class=\"searchstax-facets-pills-selected\">\n        <div\n          class=\"searchstax-facets-pill searchstax-facets-pill-facets\"\n          *ngFor=\"let facet of selectedFacetsCheckboxes\"\n          (click)=\"unselectFacet(facet, context)\"\n        >\n          <div class=\"searchstax-facets-pill-label\">{{ facet.value }} ({{ facet.count }})</div>\n          <div class=\"searchstax-facets-pill-icon-close\"></div>\n        </div>\n      </div>\n      <div\n        class=\"searchstax-facets-pill searchstax-clear-filters searchstax-facets-pill-clear-all\"\n        *ngIf=\"selectedFacetsCheckboxes.length\"\n        (click)=\"unselectAll(context)\"\n      >\n        <div class=\"searchstax-facets-pill-label\">Clear Filters</div>\n      </div>\n    </div>\n    <div\n      class=\"searchstax-facets-mobile-overlay\"\n      [class]=\"{ 'searchstax-show': facetMobileData(facetsTemplateDataMobile)?.overlayOpened }\"\n    >\n      <div class=\"searchstax-facets-mobile-overlay-header\">\n        <div class=\"searchstax-facets-mobile-overlay-header-title\">Filter By</div>\n        <div class=\"searchstax-search-close\" (click)=\"closeOverlay(context)\"></div>\n      </div>\n      <div class=\"searchstax-facets-container-mobile\">\n        <div\n          *ngFor=\"let facet of facetsTemplateDataMobile?.facets\"\n          class=\"searchstax-facet-container\"\n          [class]=\"{ active: isNotDeactivated(facet.name, context) }\"\n        >\n          <div>\n            <div class=\"searchstax-facet-title-container\" (click)=\"toggleFacetGroup(facet.name, context)\">\n              <div class=\"searchstax-facet-title\">{{ facet.label }}</div>\n              <div class=\"searchstax-facet-title-arrow active\"></div>\n            </div>\n            <div class=\"searchstax-facet-values-container\">\n              <div\n                *ngFor=\"let facetValue of facetValues(facet); index as key\"\n                class=\"searchstax-facet-value-container\"\n                [class]=\"{ 'searchstax-facet-value-disabled': facetValue.disabled }\"\n                #ref\n              >\n                <div class=\"searchstax-facet-input\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"searchstax-facet-input-checkbox\"\n                    [attr.aria-label]=\"facetValue.value + ' ' + facetValue.count\"\n                    [checked]=\"isChecked(facetValue, context)\"\n                    [disabled]=\"facetValue.disabled\"\n                    (click)=\"selectFacet(ref, $event, facetValue, true, context)\"\n                  />\n                </div>\n                <div\n                  class=\"searchstax-facet-value-label\"\n                  (click)=\"selectFacet(ref, $event, facetValue, false, context)\"\n                >\n                  {{ facetValue.value }}\n                </div>\n                <div\n                  class=\"searchstax-facet-value-count\"\n                  (click)=\"selectFacet(ref, $event, facetValue, false, context)\"\n                >\n                  ({{ facetValue.count }})\n                </div>\n              </div>\n              <div class=\"searchstax-facet-show-more-container\" *ngIf=\"facet.hasMoreFacets\">\n                <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\">\n                  <div\n                    *ngIf=\"facet.showingAllFacets\"\n                    class=\"searchstax-facet-show-less-button searchstax-facet-show-button\"\n                  >\n                    less\n                  </div>\n                  <div\n                    *ngIf=\"!facet.showingAllFacets\"\n                    class=\"searchstax-facet-show-more-button searchstax-facet-show-button\"\n                  >\n                    more\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <button class=\"searchstax-facets-mobile-overlay-done\" (click)=\"closeOverlay(context)\">Done</button>\n    </div>\n  </div>\n  <div *ngIf=\"facetsTemplateDataMobile?.hasResultsOrExternalPromotions && templateOverrideMobile\">\n    <ng-container *ngTemplateOutlet=\"templateOverrideMobile; context: context\"></ng-container>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    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" }, 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchstaxSearchFacetsWidget, decorators: [{
             type: Component,
-            args: [{ selector: "app-searchstax-search-facets", template: "<div [id]=\"'searchstax-facets-container' + rand\">\n  <div\n    *ngIf=\"facetsTemplateDataDesktop?.hasResultsOrExternalPromotions && !templateOverrideDesktop\"\n    class=\"searchstax-facets-container-desktop\"\n  >\n    <div\n      class=\"searchstax-facet-container\"\n      *ngFor=\"let facet of facetsTemplateDataDesktop?.facets\"\n      [class]=\"{ active: isNotDeactivated(facet.name, context) }\"\n    >\n      <div>\n        <div class=\"searchstax-facet-title-container\" (click)=\"toggleFacetGroup(facet.name, context)\">\n          <div class=\"searchstax-facet-title\">{{ facet.label }}</div>\n          <div class=\"searchstax-facet-title-arrow active\"></div>\n        </div>\n        <div class=\"searchstax-facet-values-container\">\n          <div\n            *ngFor=\"let facetValue of facetValues(facet); index as key\"\n            class=\"searchstax-facet-value-container\"\n            [class]=\"{ 'searchstax-facet-value-disabled': facetValue.disabled }\"\n            #ref\n          >\n            <div class=\"searchstax-facet-input\">\n              <input\n                type=\"checkbox\"\n                class=\"searchstax-facet-input-checkbox\"\n                [attr.aria-label]=\"facetValue.value + ' ' + facetValue.count\"\n                [checked]=\"isChecked(facetValue, context)\"\n                [disabled]=\"facetValue.disabled\"\n                (click)=\"selectFacet(ref, $event, facetValue, true, context)\"\n              />\n            </div>\n            <div class=\"searchstax-facet-value-label\" (click)=\"selectFacet(ref, $event, facetValue, false, context)\">\n              {{ facetValue.value }}\n            </div>\n            <div class=\"searchstax-facet-value-count\" (click)=\"selectFacet(ref, $event, facetValue, false, context)\">\n              ({{ facetValue.count }})\n            </div>\n          </div>\n          <div class=\"searchstax-facet-show-more-container\" *ngIf=\"facet.hasMoreFacets\">\n            <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\">\n              <div\n                *ngIf=\"facet.showingAllFacets\"\n                class=\"searchstax-facet-show-less-button searchstax-facet-show-button\"\n              >\n                less\n              </div>\n              <div\n                *ngIf=\"!facet.showingAllFacets\"\n                class=\"searchstax-facet-show-more-button searchstax-facet-show-button\"\n              >\n                more\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div *ngIf=\"facetsTemplateDataDesktop?.hasResultsOrExternalPromotions && templateOverrideDesktop\">\n    <ng-container *ngTemplateOutlet=\"templateOverrideDesktop; context: context\"></ng-container>\n  </div>\n\n  <div\n    class=\"searchstax-facets-container-mobile\"\n    *ngIf=\"facetsTemplateDataMobile?.hasResultsOrExternalPromotions && !templateOverrideMobile\"\n  >\n    <div class=\"searchstax-facets-pills-container\">\n      <div class=\"searchstax-facets-pill searchstax-facets-pill-filter-by\" (click)=\"openOverlay(context)\">\n        <div class=\"searchstax-facets-pill-label\">Filter By</div>\n      </div>\n      <div class=\"searchstax-facets-pills-selected\">\n        <div\n          class=\"searchstax-facets-pill searchstax-facets-pill-facets\"\n          *ngFor=\"let facet of selectedFacetsCheckboxes\"\n          (click)=\"unselectFacet(facet, context)\"\n        >\n          <div class=\"searchstax-facets-pill-label\">{{ facet.value }} ({{ facet.count }})</div>\n          <div class=\"searchstax-facets-pill-icon-close\"></div>\n        </div>\n      </div>\n      <div\n        class=\"searchstax-facets-pill searchstax-clear-filters searchstax-facets-pill-clear-all\"\n        *ngIf=\"selectedFacetsCheckboxes.length\"\n        (click)=\"unselectAll(context)\"\n      >\n        <div class=\"searchstax-facets-pill-label\">Clear Filters</div>\n      </div>\n    </div>\n    <div\n      class=\"searchstax-facets-mobile-overlay\"\n      [class]=\"{ 'searchstax-show': facetMobileData(facetsTemplateDataMobile)?.overlayOpened }\"\n    >\n      <div class=\"searchstax-facets-mobile-overlay-header\">\n        <div class=\"searchstax-facets-mobile-overlay-header-title\">Filter By</div>\n        <div class=\"searchstax-search-close\" (click)=\"closeOverlay(context)\"></div>\n      </div>\n      <div class=\"searchstax-facets-container-mobile\">\n        <div\n          *ngFor=\"let facet of facetsTemplateDataMobile?.facets\"\n          class=\"searchstax-facet-container\"\n          [class]=\"{ active: isNotDeactivated(facet.name, context) }\"\n        >\n          <div>\n            <div class=\"searchstax-facet-title-container\" (click)=\"toggleFacetGroup(facet.name, context)\">\n              <div class=\"searchstax-facet-title\">{{ facet.label }}</div>\n              <div class=\"searchstax-facet-title-arrow active\"></div>\n            </div>\n            <div class=\"searchstax-facet-values-container\">\n              <div\n                *ngFor=\"let facetValue of facetValues(facet); index as key\"\n                class=\"searchstax-facet-value-container\"\n                [class]=\"{ 'searchstax-facet-value-disabled': facetValue.disabled }\"\n                #ref\n              >\n                <div class=\"searchstax-facet-input\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"searchstax-facet-input-checkbox\"\n                    [attr.aria-label]=\"facetValue.value + ' ' + facetValue.count\"\n                    [checked]=\"isChecked(facetValue, context)\"\n                    [disabled]=\"facetValue.disabled\"\n                    (click)=\"selectFacet(ref, $event, facetValue, true, context)\"\n                  />\n                </div>\n                <div\n                  class=\"searchstax-facet-value-label\"\n                  (click)=\"selectFacet(ref, $event, facetValue, false, context)\"\n                >\n                  {{ facetValue.value }}\n                </div>\n                <div\n                  class=\"searchstax-facet-value-count\"\n                  (click)=\"selectFacet(ref, $event, facetValue, false, context)\"\n                >\n                  ({{ facetValue.count }})\n                </div>\n              </div>\n              <div class=\"searchstax-facet-show-more-container\" *ngIf=\"facet.hasMoreFacets\">\n                <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\">\n                  <div\n                    *ngIf=\"facet.showingAllFacets\"\n                    class=\"searchstax-facet-show-less-button searchstax-facet-show-button\"\n                  >\n                    less\n                  </div>\n                  <div\n                    *ngIf=\"!facet.showingAllFacets\"\n                    class=\"searchstax-facet-show-more-button searchstax-facet-show-button\"\n                  >\n                    more\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <button class=\"searchstax-facets-mobile-overlay-done\" (click)=\"closeOverlay(context)\">Done</button>\n    </div>\n  </div>\n  <div *ngIf=\"facetsTemplateDataMobile?.hasResultsOrExternalPromotions && templateOverrideMobile\">\n    <ng-container *ngTemplateOutlet=\"templateOverrideMobile; context: context\"></ng-container>\n  </div>\n</div>\n" }]
+            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: [{
                 type: Input
             }], templateOverrideDesktop: [{
@@ -589,6 +1943,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }] } });
 
+// 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: `
+    <ng-template
+      #sortingTemplateOverride
+      let-selectedSorting="selectedSorting"
+      let-orderChange="orderChange"
+      let-context="context"
+    >
+      <div class="searchstax-sorting-container">
+        <label
+          class="searchstax-sorting-label"
+          for="searchstax-search-order-select"
+          >Sort By</label
+        >
+        <select
+          id="searchstax-search-order-select"
+          class="searchstax-search-order-select"
+          [(ngModel)]="context.selectedSorting"
+          (change)="orderChange($event, context)"
+        >
+          <option
+            *ngFor="let sortOption of context.sortingData.sortOptions"
+            [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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SortingTemplateComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "app-sorting-template",
+                    template: `
+    <ng-template
+      #sortingTemplateOverride
+      let-selectedSorting="selectedSorting"
+      let-orderChange="orderChange"
+      let-context="context"
+    >
+      <div class="searchstax-sorting-container">
+        <label
+          class="searchstax-sorting-label"
+          for="searchstax-search-order-select"
+          >Sort By</label
+        >
+        <select
+          id="searchstax-search-order-select"
+          class="searchstax-search-order-select"
+          [(ngModel)]="context.selectedSorting"
+          (change)="orderChange($event, context)"
+        >
+          <option
+            *ngFor="let sortOption of context.sortingData.sortOptions"
+            [value]="sortOption.key"
+          >
+            {{ sortOption.value }}
+          </option>
+        </select>
+      </div>
+    </ng-template>
+  `,
+                }]
+        }], propDecorators: { sortingTemplate: [{
+                type: ViewChild,
+                args: ["sortingTemplateOverride"]
+            }] } });
+
 class SearchstaxSearchSortingWidget {
     constructor(storeServiceService) {
         this.storeServiceService = storeServiceService;
@@ -621,15 +2047,131 @@ class SearchstaxSearchSortingWidget {
         });
     }
     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  <div\n    class=\"searchstax-sorting-container\"\n    *ngIf=\"sortingData && sortingData?.searchExecuted && sortingData?.hasResultsOrExternalPromotions && !templateOverride\"\n  >\n    <label class=\"searchstax-sorting-label\" for=\"searchstax-search-order-select\">Sort By</label>\n    <select\n      id=\"searchstax-search-order-select\"\n      class=\"searchstax-search-order-select\"\n      [(ngModel)]=\"selectedSorting\"\n      (change)=\"orderChange($event, context)\"\n    >\n      <option *ngFor=\"let sortOption of sortingData.sortOptions\" [value]=\"sortOption.key\">{{sortOption.value}}</option>\n    </select>\n  </div>\n\n  <div\n    *ngIf=\"\n      sortingData && sortingData?.searchExecuted && sortingData?.hasResultsOrExternalPromotions && templateOverride\n    \"\n  >\n    <ng-container *ngTemplateOutlet=\"templateOverride; context: context\"></ng-container>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    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      !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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", 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  <div\n    class=\"searchstax-sorting-container\"\n    *ngIf=\"sortingData && sortingData?.searchExecuted && sortingData?.hasResultsOrExternalPromotions && !templateOverride\"\n  >\n    <label class=\"searchstax-sorting-label\" for=\"searchstax-search-order-select\">Sort By</label>\n    <select\n      id=\"searchstax-search-order-select\"\n      class=\"searchstax-search-order-select\"\n      [(ngModel)]=\"selectedSorting\"\n      (change)=\"orderChange($event, context)\"\n    >\n      <option *ngFor=\"let sortOption of sortingData.sortOptions\" [value]=\"sortOption.key\">{{sortOption.value}}</option>\n    </select>\n  </div>\n\n  <div\n    *ngIf=\"\n      sortingData && sortingData?.searchExecuted && sortingData?.hasResultsOrExternalPromotions && templateOverride\n    \"\n  >\n    <ng-container *ngTemplateOutlet=\"templateOverride; context: context\"></ng-container>\n  </div>\n</div>\n" }]
+            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      !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: [{
                 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: `
+    <ng-template
+      #answerTemplate
+      let-answerData="answerData"
+      let-showMore="showMore"
+      let-context="context"
+    >
+      <div class="searchstax-answer-wrap">
+        <div class="searchstax-answer-icon"></div>
+        <div>
+          <div
+            [class]="{
+              'searchstax-answer-container': true,
+              'searchstax-answer-show-more': answerData.showMoreButtonVisible
+            }"
+          >
+            <div class="searchstax-answer-title">Smart Answers</div>
+            <div
+              class="searchstax-answer-error"
+              *ngIf="answerData.shouldShowAnswerError"
+              [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)"
+            >
+              Read More
+            </button>
+          </div>
+        </div>
+        <div class="searchstax-answer-footer">
+          <div id="feedbackWidgetContainer"></div>
+          <div class="searchstax-lightweight-widget-separator-inline"></div>
+          <p class="searchstax-disclaimer">Generative AI is Experimental</p>
+        </div>
+      </div>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AnswerTemplateComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "app-answer-template",
+                    template: `
+    <ng-template
+      #answerTemplate
+      let-answerData="answerData"
+      let-showMore="showMore"
+      let-context="context"
+    >
+      <div class="searchstax-answer-wrap">
+        <div class="searchstax-answer-icon"></div>
+        <div>
+          <div
+            [class]="{
+              'searchstax-answer-container': true,
+              'searchstax-answer-show-more': answerData.showMoreButtonVisible
+            }"
+          >
+            <div class="searchstax-answer-title">Smart Answers</div>
+            <div
+              class="searchstax-answer-error"
+              *ngIf="answerData.shouldShowAnswerError"
+              [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)"
+            >
+              Read More
+            </button>
+          </div>
+        </div>
+        <div class="searchstax-answer-footer">
+          <div id="feedbackWidgetContainer"></div>
+          <div class="searchstax-lightweight-widget-separator-inline"></div>
+          <p class="searchstax-disclaimer">Generative AI is Experimental</p>
+        </div>
+      </div>
+    </ng-template>
+  `,
+                }]
+        }], propDecorators: { answerTemplate: [{
+                type: ViewChild,
+                args: ["answerTemplate"]
+            }] } });
+
 class SearchstaxSearchAnswerWidget {
     constructor(storeServiceService) {
         this.storeServiceService = storeServiceService;
@@ -659,11 +2201,11 @@ class SearchstaxSearchAnswerWidget {
         });
     }
     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", showShowMoreAfterWordCount: "showShowMoreAfterWordCount" }, 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    <div class=\"searchstax-answer-wrap\">\n      <div class=\"searchstax-answer-icon\"></div>\n      <div>\n        <div\n          [class]=\"\n            'searchstax-answer-container' + answerData.showMoreButtonVisible\n              ? 'searchstax-answer-show-more'\n              : ''\n          \"\n        >\n          <div class=\"searchstax-answer-title\">Answer</div>\n          <div class=\"searchstax-answer-error\" *ngIf=\"answerData.shouldShowAnswerError\" [innerHTML]=\"answerData.answerErrorMessage\"></div>\n          <div\n            class=\"searchstax-answer-description\"\n            [innerHTML]=\"answerData.fullAnswerFormatted\"\n          ></div>\n          <div\n            *ngIf=\"answerData.answerLoading\"\n            class=\"searchstax-answer-loading\"\n          ></div>\n        </div>\n        <div\n          *ngIf=\"answerData.showMoreButtonVisible\"\n          class=\"searchstax-answer-load-more-button-container\"\n        >\n          <button\n            class=\"searchstax-answer-load-more-button\"\n            (click)=\"showMore($event, context)\"\n          >\n            Show More...\n          </button>\n        </div>\n      </div>\n      <div class=\"searchstax-answer-footer\">\n        <div id=\"feedbackWidgetContainer\"></div>\n        <div class=\"searchstax-lightweight-widget-separator-inline\"></div>\n        <p class=\"searchstax-disclaimer\">Generative AI is Experimental</p>\n      </div>\n    </div>\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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SearchstaxSearchAnswerWidget, selector: "app-searchstax-answer", inputs: { templateOverride: "templateOverride", feedbackwidget: "feedbackwidget", showShowMoreAfterWordCount: "showShowMoreAfterWordCount" }, 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", 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    <div class=\"searchstax-answer-wrap\">\n      <div class=\"searchstax-answer-icon\"></div>\n      <div>\n        <div\n          [class]=\"\n            'searchstax-answer-container' + answerData.showMoreButtonVisible\n              ? 'searchstax-answer-show-more'\n              : ''\n          \"\n        >\n          <div class=\"searchstax-answer-title\">Answer</div>\n          <div class=\"searchstax-answer-error\" *ngIf=\"answerData.shouldShowAnswerError\" [innerHTML]=\"answerData.answerErrorMessage\"></div>\n          <div\n            class=\"searchstax-answer-description\"\n            [innerHTML]=\"answerData.fullAnswerFormatted\"\n          ></div>\n          <div\n            *ngIf=\"answerData.answerLoading\"\n            class=\"searchstax-answer-loading\"\n          ></div>\n        </div>\n        <div\n          *ngIf=\"answerData.showMoreButtonVisible\"\n          class=\"searchstax-answer-load-more-button-container\"\n        >\n          <button\n            class=\"searchstax-answer-load-more-button\"\n            (click)=\"showMore($event, context)\"\n          >\n            Show More...\n          </button>\n        </div>\n      </div>\n      <div class=\"searchstax-answer-footer\">\n        <div id=\"feedbackWidgetContainer\"></div>\n        <div class=\"searchstax-lightweight-widget-separator-inline\"></div>\n        <p class=\"searchstax-disclaimer\">Generative AI is Experimental</p>\n      </div>\n    </div>\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" }]
+            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: [{
                 type: Input
             }], feedbackwidget: [{
@@ -672,6 +2214,84 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }] } });
 
+// 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: `
+    <ng-template
+      #relatedTemplate
+      let-rand="rand"
+      let-relatedData="relatedData"
+      let-executeSearch="executeSearch"
+      let-context="context"
+    >
+      <div
+        class="searchstax-related-searches-container"
+        [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>
+          </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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RelatedTemplateComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "app-related-template",
+                    template: `
+    <ng-template
+      #relatedTemplate
+      let-rand="rand"
+      let-relatedData="relatedData"
+      let-executeSearch="executeSearch"
+      let-context="context"
+    >
+      <div
+        class="searchstax-related-searches-container"
+        [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>
+          </span>
+        </span>
+      </div>
+    </ng-template>
+  `,
+                }]
+        }], propDecorators: { relatedTemplate: [{
+                type: ViewChild,
+                args: ["relatedTemplate"]
+            }] } });
+
 class SearchstaxSearchRelatedSearchesWidget {
     constructor(storeServiceService) {
         this.storeServiceService = storeServiceService;
@@ -699,11 +2319,11 @@ class SearchstaxSearchRelatedSearchesWidget {
         });
     }
     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: "<div\n  class=\"searchstax-related-searches-container\"\n  [id]=\"'searchstax-related-searches-container' + rand\"\n  *ngIf=\"relatedData && relatedData?.searchExecuted && relatedData?.hasRelatedSearches && !templateOverride\"\n>\n  Related searches: <span id=\"searchstax-related-searches\"></span>\n  <span class=\"searchstax-related-search\" *ngIf=\"relatedData.relatedSearches\">\n    <span\n      *ngFor=\"let related of relatedData.relatedSearches\"\n      tabindex=\"0\"\n      (click)=\"executeSearch(related, context)\"\n      (keyup.enter)=\"executeSearch(related, context)\"\n      (keyup.space)=\"executeSearch(related, context)\"\n      class=\"searchstax-related-search searchstax-related-search-item\"\n    >\n      {{ related.related_search }}<span *ngIf=\"!related.last\">,</span>\n    </span>\n  </span>\n</div>\n\n<div *ngIf=\"relatedData && relatedData?.searchExecuted && relatedData?.hasRelatedSearches && templateOverride\">\n  <ng-container *ngTemplateOutlet=\"templateOverride; context: context\"></ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchstaxSearchRelatedSearchesWidget, decorators: [{
             type: Component,
-            args: [{ selector: "app-searchstax-related-searches", template: "<div\n  class=\"searchstax-related-searches-container\"\n  [id]=\"'searchstax-related-searches-container' + rand\"\n  *ngIf=\"relatedData && relatedData?.searchExecuted && relatedData?.hasRelatedSearches && !templateOverride\"\n>\n  Related searches: <span id=\"searchstax-related-searches\"></span>\n  <span class=\"searchstax-related-search\" *ngIf=\"relatedData.relatedSearches\">\n    <span\n      *ngFor=\"let related of relatedData.relatedSearches\"\n      tabindex=\"0\"\n      (click)=\"executeSearch(related, context)\"\n      (keyup.enter)=\"executeSearch(related, context)\"\n      (keyup.space)=\"executeSearch(related, context)\"\n      class=\"searchstax-related-search searchstax-related-search-item\"\n    >\n      {{ related.related_search }}<span *ngIf=\"!related.last\">,</span>\n    </span>\n  </span>\n</div>\n\n<div *ngIf=\"relatedData && relatedData?.searchExecuted && relatedData?.hasRelatedSearches && templateOverride\">\n  <ng-container *ngTemplateOutlet=\"templateOverride; context: context\"></ng-container>\n</div>\n" }]
+            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: [{
                 type: Input
             }], relatedSearchesAPIKey: [{
@@ -712,6 +2332,110 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }] } });
 
+// 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: `
+    <ng-template
+      #externalPromotionsTemplate
+      let-context="context"
+      let-externalPromotionsData="externalPromotionsData"
+      let-trackClick="trackClick"
+    >
+      <div
+        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"
+          >
+            {{ 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ExternalPromotionsTemplateComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "app-external-template",
+                    template: `
+    <ng-template
+      #externalPromotionsTemplate
+      let-context="context"
+      let-externalPromotionsData="externalPromotionsData"
+      let-trackClick="trackClick"
+    >
+      <div
+        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"
+          >
+            {{ externalPromotion.url }}
+          </p>
+        </div>
+      </div>
+    </ng-template>
+  `,
+                }]
+        }], propDecorators: { externalPromotionsTemplate: [{
+                type: ViewChild,
+                args: ["externalPromotionsTemplate"]
+            }] } });
+
 class SearchstaxSearchExternalPromotionsWidget {
     constructor(storeServiceService) {
         this.storeServiceService = storeServiceService;
@@ -739,11 +2463,11 @@ class SearchstaxSearchExternalPromotionsWidget {
         });
     }
     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  <div\n    class=\"searchstax-external-promotions-container\"\n    id=\"searchstax-external-promotions-container\"\n    *ngIf=\"\n      externalPromotionsData &&\n      externalPromotionsData?.searchExecuted &&\n      externalPromotionsData?.hasExternalPromotions &&\n      !templateOverride\n    \"\n  >\n    <div\n      class=\"searchstax-external-promotion searchstax-search-result\"\n      *ngFor=\"let externalPromotion of externalPromotionsData.externalPromotions\"\n    >\n      <div class=\"icon-elevated\"></div>\n      <a\n        *ngIf=\"externalPromotion.url\"\n        [href]=\"externalPromotion.url\"\n        (click)=\"trackClick(externalPromotion, $event, context)\"\n        class=\"searchstax-result-item-link\"\n      ></a>\n      <div class=\"searchstax-search-result-title-container\">\n        <span class=\"searchstax-search-result-title\">{{ externalPromotion.name }}</span>\n      </div>\n      <p\n        *ngIf=\"externalPromotion.description\"\n        class=\"searchstax-search-result-description searchstax-search-result-common\"\n      >\n        {{ externalPromotion.description }}\n      </p>\n      <p *ngIf=\"externalPromotion.url\" class=\"searchstax-search-result-description searchstax-search-result-common\">\n        {{ externalPromotion.url }}\n      </p>\n    </div>\n  </div>\n  <div\n    *ngIf=\"\n      externalPromotionsData &&\n      externalPromotionsData?.searchExecuted &&\n      externalPromotionsData?.hasExternalPromotions &&\n      templateOverride\n    \"\n  >\n    <ng-container *ngTemplateOutlet=\"templateOverride; context: context\"></ng-container>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchstaxSearchExternalPromotionsWidget, decorators: [{
             type: Component,
-            args: [{ selector: "app-searchstax-external-promotions", template: "<div [id]=\"'searchstax-external-promotions-layout-container' + rand\">\n  <div\n    class=\"searchstax-external-promotions-container\"\n    id=\"searchstax-external-promotions-container\"\n    *ngIf=\"\n      externalPromotionsData &&\n      externalPromotionsData?.searchExecuted &&\n      externalPromotionsData?.hasExternalPromotions &&\n      !templateOverride\n    \"\n  >\n    <div\n      class=\"searchstax-external-promotion searchstax-search-result\"\n      *ngFor=\"let externalPromotion of externalPromotionsData.externalPromotions\"\n    >\n      <div class=\"icon-elevated\"></div>\n      <a\n        *ngIf=\"externalPromotion.url\"\n        [href]=\"externalPromotion.url\"\n        (click)=\"trackClick(externalPromotion, $event, context)\"\n        class=\"searchstax-result-item-link\"\n      ></a>\n      <div class=\"searchstax-search-result-title-container\">\n        <span class=\"searchstax-search-result-title\">{{ externalPromotion.name }}</span>\n      </div>\n      <p\n        *ngIf=\"externalPromotion.description\"\n        class=\"searchstax-search-result-description searchstax-search-result-common\"\n      >\n        {{ externalPromotion.description }}\n      </p>\n      <p *ngIf=\"externalPromotion.url\" class=\"searchstax-search-result-description searchstax-search-result-common\">\n        {{ externalPromotion.url }}\n      </p>\n    </div>\n  </div>\n  <div\n    *ngIf=\"\n      externalPromotionsData &&\n      externalPromotionsData?.searchExecuted &&\n      externalPromotionsData?.hasExternalPromotions &&\n      templateOverride\n    \"\n  >\n    <ng-container *ngTemplateOutlet=\"templateOverride; context: context\"></ng-container>\n  </div>\n</div>\n" }]
+            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: [{
                 type: Input
             }] } });
@@ -760,7 +2484,20 @@ class SearchstudioUxAngularModule {
             SearchstaxSearchRelatedSearchesWidget,
             SearchstaxSearchExternalPromotionsWidget,
             SearchstaxSearchAnswerWidget,
-            SearchstaxSearchLocationWidget], imports: [CommonModule, FormsModule], exports: [SearchstaxWrapper,
+            SearchstaxSearchLocationWidget,
+            AnswerTemplateComponent,
+            OverviewTemplateComponent,
+            InputTemplateComponent,
+            LocationTemplateComponent,
+            PaginationTemplateComponent,
+            PaginationInfiniteTemplateComponent,
+            ResultsTemplateComponent,
+            NoResultsTemplateComponent,
+            ExternalPromotionsTemplateComponent,
+            SortingTemplateComponent,
+            RelatedTemplateComponent,
+            FacetDesktopTemplateComponent,
+            FacetMobileTemplateComponent], imports: [CommonModule, FormsModule], exports: [SearchstaxWrapper,
             SearchstaxInputWidget,
             SearchstaxResultsWidget,
             SearchstaxSearchFeedbackWidget,
@@ -770,7 +2507,20 @@ class SearchstudioUxAngularModule {
             SearchstaxSearchRelatedSearchesWidget,
             SearchstaxSearchExternalPromotionsWidget,
             SearchstaxSearchAnswerWidget,
-            SearchstaxSearchLocationWidget] }); }
+            SearchstaxSearchLocationWidget,
+            AnswerTemplateComponent,
+            OverviewTemplateComponent,
+            InputTemplateComponent,
+            LocationTemplateComponent,
+            PaginationTemplateComponent,
+            PaginationInfiniteTemplateComponent,
+            ResultsTemplateComponent,
+            NoResultsTemplateComponent,
+            ExternalPromotionsTemplateComponent,
+            SortingTemplateComponent,
+            RelatedTemplateComponent,
+            FacetDesktopTemplateComponent,
+            FacetMobileTemplateComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchstudioUxAngularModule, imports: [CommonModule, FormsModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchstudioUxAngularModule, decorators: [{
@@ -787,7 +2537,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         SearchstaxSearchRelatedSearchesWidget,
                         SearchstaxSearchExternalPromotionsWidget,
                         SearchstaxSearchAnswerWidget,
-                        SearchstaxSearchLocationWidget
+                        SearchstaxSearchLocationWidget,
+                        AnswerTemplateComponent,
+                        OverviewTemplateComponent,
+                        InputTemplateComponent,
+                        LocationTemplateComponent,
+                        PaginationTemplateComponent,
+                        PaginationInfiniteTemplateComponent,
+                        ResultsTemplateComponent,
+                        NoResultsTemplateComponent,
+                        ExternalPromotionsTemplateComponent,
+                        SortingTemplateComponent,
+                        RelatedTemplateComponent,
+                        FacetDesktopTemplateComponent,
+                        FacetMobileTemplateComponent
                     ],
                     imports: [CommonModule, FormsModule],
                     exports: [
@@ -801,7 +2564,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         SearchstaxSearchRelatedSearchesWidget,
                         SearchstaxSearchExternalPromotionsWidget,
                         SearchstaxSearchAnswerWidget,
-                        SearchstaxSearchLocationWidget
+                        SearchstaxSearchLocationWidget,
+                        AnswerTemplateComponent,
+                        OverviewTemplateComponent,
+                        InputTemplateComponent,
+                        LocationTemplateComponent,
+                        PaginationTemplateComponent,
+                        PaginationInfiniteTemplateComponent,
+                        ResultsTemplateComponent,
+                        NoResultsTemplateComponent,
+                        ExternalPromotionsTemplateComponent,
+                        SortingTemplateComponent,
+                        RelatedTemplateComponent,
+                        FacetDesktopTemplateComponent,
+                        FacetMobileTemplateComponent
                     ],
                 }]
         }] });
@@ -814,5 +2590,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { SearchstaxInputWidget, SearchstaxResultsWidget, SearchstaxSearchAnswerWidget, SearchstaxSearchExternalPromotionsWidget, SearchstaxSearchFacetsWidget, SearchstaxSearchFeedbackWidget, SearchstaxSearchLocationWidget, SearchstaxSearchPaginationWidget, SearchstaxSearchRelatedSearchesWidget, SearchstaxSearchSortingWidget, SearchstaxWrapper, SearchstudioUxAngularModule, StoreServiceService };
+export { AnswerTemplateComponent, ExternalPromotionsTemplateComponent, FacetDesktopTemplateComponent, FacetMobileTemplateComponent, InputTemplateComponent, LocationTemplateComponent, NoResultsTemplateComponent, OverviewTemplateComponent, PaginationInfiniteTemplateComponent, PaginationTemplateComponent, RelatedTemplateComponent, ResultsTemplateComponent, SearchstaxInputWidget, SearchstaxResultsWidget, SearchstaxSearchAnswerWidget, SearchstaxSearchExternalPromotionsWidget, SearchstaxSearchFacetsWidget, SearchstaxSearchFeedbackWidget, SearchstaxSearchLocationWidget, SearchstaxSearchPaginationWidget, SearchstaxSearchRelatedSearchesWidget, SearchstaxSearchSortingWidget, SearchstaxWrapper, SearchstudioUxAngularModule, SortingTemplateComponent, StoreServiceService };
 //# sourceMappingURL=searchstax-inc-searchstudio-ux-angular.mjs.map