@searchstax-inc/searchstudio-ux-angular 4.1.0 → 4.1.1

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

@@ -0,0 +1,2601 @@
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, Output, Input, Component, ViewChild, NgModule } from '@angular/core';
+import { Searchstax } from '@searchstax-inc/searchstudio-ux-js';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+
+class StoreServiceService {
+    constructor() {
+        this.searchstax = new Searchstax('vue');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StoreServiceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StoreServiceService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StoreServiceService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class SearchstaxWrapper {
+    constructor(storeServiceService) {
+        this.storeServiceService = storeServiceService;
+        this.language = 'en';
+        this.model = '';
+        this.searchURL = '';
+        this.suggesterURL = '';
+        this.trackApiKey = '';
+        this.searchAuth = '';
+        this.analyticsBaseUrl = '';
+        this.analyticsSrc = '';
+        this.questionURL = '';
+        this.authType = 'basic';
+        this.autoCorrect = true;
+        this.initialized = new EventEmitter();
+        this.hooks = {};
+    }
+    ngOnInit() {
+        if (this.beforeSearch) {
+            this.hooks.beforeSearch = this.beforeSearch;
+        }
+        if (this.afterSearch) {
+            this.hooks.afterSearch = this.afterSearch;
+        }
+        this.storeServiceService.searchstax.initialize({
+            language: this.language,
+            model: this.model,
+            searchURL: this.searchURL,
+            suggesterURL: this.suggesterURL,
+            trackApiKey: this.trackApiKey,
+            searchAuth: this.searchAuth,
+            authType: this.authType,
+            autoCorrect: this.autoCorrect,
+            router: this.router,
+            hooks: this.hooks,
+            analyticsBaseUrl: this.analyticsBaseUrl,
+            analyticsSrc: this.analyticsSrc,
+            sessionId: this.sessionId,
+            questionURL: this.questionURL
+        });
+        this.initialized.emit(this.storeServiceService.searchstax);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchstaxWrapper, deps: [{ token: StoreServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SearchstaxWrapper, selector: "app-searchstax-wrapper", inputs: { language: "language", model: "model", searchURL: "searchURL", suggesterURL: "suggesterURL", trackApiKey: "trackApiKey", searchAuth: "searchAuth", sessionId: "sessionId", analyticsBaseUrl: "analyticsBaseUrl", analyticsSrc: "analyticsSrc", questionURL: "questionURL", authType: "authType", autoCorrect: "autoCorrect", router: "router", beforeSearch: "beforeSearch", afterSearch: "afterSearch" }, outputs: { initialized: "initialized" }, ngImport: i0, template: `
+  <div>
+    <ng-content></ng-content>
+  </div>
+  `, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchstaxWrapper, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-searchstax-wrapper', template: `
+  <div>
+    <ng-content></ng-content>
+  </div>
+  ` }]
+        }], ctorParameters: () => [{ type: StoreServiceService }], propDecorators: { language: [{
+                type: Input
+            }], model: [{
+                type: Input
+            }], searchURL: [{
+                type: Input
+            }], suggesterURL: [{
+                type: Input
+            }], trackApiKey: [{
+                type: Input
+            }], searchAuth: [{
+                type: Input
+            }], sessionId: [{
+                type: Input
+            }], analyticsBaseUrl: [{
+                type: Input
+            }], analyticsSrc: [{
+                type: Input
+            }], questionURL: [{
+                type: Input
+            }], authType: [{
+                type: Input
+            }], autoCorrect: [{
+                type: Input
+            }], router: [{
+                type: Input
+            }], beforeSearch: [{
+                type: Input
+            }], afterSearch: [{
+                type: Input
+            }], initialized: [{
+                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;
+        this.locationData = null;
+        this.inputValue = "";
+        this.selectValue = "";
+        this.locationAdded = false;
+        this.locationError = false;
+        this.rand = Math.random();
+        this.context = this;
+    }
+    ngOnInit() {
+        if (this.storeServiceService.searchstax) {
+            this.attachObservables();
+            setTimeout(() => {
+                this.addWidget();
+            }, 100);
+        }
+        else {
+            throw Error("Searchstax instance needs to be passed via props");
+        }
+    }
+    locationBlur(context) {
+        context.storeServiceService.searchstax.searchLocationWidget?.triggerGeocoder(context.inputValue);
+    }
+    radiusChange(e, context) {
+        const target = e.target;
+        context.selectValue = target.value;
+        context.storeServiceService.searchstax.searchLocationWidget?.setRadiusValue(context.selectValue);
+    }
+    inputChange(e, context) {
+        const target = e.target;
+        context.inputValue = target.value;
+    }
+    getCurrentLocation(context) {
+        context.storeServiceService.searchstax.searchLocationWidget?.getCurrentLocation();
+    }
+    addWidget() {
+        if (!this.locationAdded &&
+            this.storeServiceService.searchstax.routerHelper) {
+            this.locationAdded = true;
+            this.storeServiceService.searchstax.addSearchLocationWidget("searchstax-location-container" + this.rand, {
+                hooks: {
+                    locationDecode: this.locationDecode,
+                    locationDecodeCoordinatesToAddress: this.locationDecodeCoordinatesToAddress,
+                },
+                locationSearchEnabled: this.locationSearchEnabled,
+                locationValuesOverride: this.locationValuesOverride,
+            });
+        }
+    }
+    attachObservables() {
+        this.storeServiceService.searchstax.dataLayer.$locationWidgetTemplateData.subscribe((sortingData) => {
+            this.locationData = sortingData;
+        });
+        this.storeServiceService.searchstax.dataLayer.$searchObject.subscribe((result) => {
+            this.inputValue = result.location.address ?? "";
+            this.selectValue = result.location.radius || "";
+        });
+        this.storeServiceService.searchstax.dataLayer.$locationError.subscribe((locationError) => {
+            this.locationError = locationError;
+        });
+        this.storeServiceService.searchstax.dataLayer.$searchLocationChange.subscribe((location) => {
+            this.inputValue = location;
+        });
+        this.storeServiceService.searchstax.dataLayer.$searchRadiusChange.subscribe((radius) => {
+            this.selectValue = radius;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchstaxSearchLocationWidget, deps: [{ token: StoreServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SearchstaxSearchLocationWidget, selector: "app-searchstax-search-location", inputs: { templateOverride: "templateOverride", locationSearchEnabled: "locationSearchEnabled", locationValuesOverride: "locationValuesOverride", locationDecode: "locationDecode", locationDecodeCoordinatesToAddress: "locationDecodeCoordinatesToAddress" }, ngImport: i0, template: "<div\n  [id]=\"'searchstax-location-container' + rand\"\n  class=\"searchstax-location-container\"\n>\n  <div *ngIf=\"!!locationData && !templateOverride\">\n    <app-location-template #ref></app-location-template>\n    <ng-template\n      *ngTemplateOutlet=\"ref.locationTemplate; context: context\"\n    ></ng-template>\n  </div>\n\n  <div *ngIf=\"!!locationData && templateOverride\">\n    <ng-container\n      *ngTemplateOutlet=\"templateOverride; context: context\"\n    ></ng-container>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LocationTemplateComponent, selector: "app-location-template" }] }); }
+}
+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 *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: [{
+                type: Input
+            }], locationValuesOverride: [{
+                type: Input
+            }], locationDecode: [{
+                type: Input
+            }], locationDecodeCoordinatesToAddress: [{
+                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;
+        this.searchInputId = "";
+        this.hooks = {};
+        this.suggestions = [];
+        this.context = this;
+        this.templateData = null;
+        this.locationWidgetConfig = locationWidgetConfig;
+    }
+    ngOnInit() {
+        if (this.storeServiceService.searchstax) {
+            this.attachObservables();
+            // const hooks: { [key: string]: (prop: any) => any } = {}
+            if (this.afterAutosuggest) {
+                this.hooks["afterAutosuggest"] = this.afterAutosuggest;
+            }
+            if (this.beforeAutosuggest) {
+                this.hooks["beforeAutosuggest"] = this.beforeAutosuggest;
+            }
+            setTimeout(() => {
+                this.storeServiceService.searchstax.addSearchInputWidget("searchstax-input-container", {
+                    suggestAfterMinChars: this.suggestAfterMinChars,
+                    hooks: this.hooks,
+                    templates: {
+                        mainTemplate: {
+                            template: ``,
+                            searchInputId: this.searchInputId ?? "searchstax-search-input",
+                        },
+                    },
+                });
+                this.storeServiceService.searchstax.dataLayer.setInputTemplateRendered(true);
+            }, 100);
+        }
+        else {
+            throw Error("Searchstax instance needs to be passed via props");
+        }
+    }
+    onMouseLeave(context) {
+        context.storeServiceService.searchstax.searchInputWidget?.resetAutosuggestSelection();
+        context.storeServiceService.searchstax.searchInputWidget?.markActiveAutosuggestItem();
+    }
+    onMouseOver(suggestion, context) {
+        context.storeServiceService.searchstax.searchInputWidget?.onSuggestionEnter(suggestion);
+    }
+    onMouseClick(e, context) {
+        e.stopImmediatePropagation();
+        context.storeServiceService.searchstax.searchInputWidget?.suggestionChosen();
+    }
+    attachObservables() {
+        this.storeServiceService.searchstax.dataLayer.$autosuggestResults.subscribe((suggestions) => {
+            this.suggestions = suggestions?.suggestions ?? [];
+        });
+        this.storeServiceService.searchstax.dataLayer.$inputWidgetTemplateData.subscribe((data) => {
+            this.templateData = data;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchstaxInputWidget, deps: [{ token: StoreServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SearchstaxInputWidget, selector: "app-searchstax-input", inputs: { afterAutosuggest: "afterAutosuggest", beforeAutosuggest: "beforeAutosuggest", searchInputId: "searchInputId", suggestAfterMinChars: "suggestAfterMinChars", templateOverride: "templateOverride" }, ngImport: i0, template: "<div id=\"searchstax-input-container\">\n  <div\n    class=\"searchstax-search-input-container searchstax-search-input-container-new\"\n    [class]=\"{\n      'searchstax-alternative-render': !!templateData?.locationEnabled\n    }\"\n  >\n    <ng-container *ngIf=\"!templateOverride\">\n      <app-input-template #ref></app-input-template>\n      <ng-template\n        *ngTemplateOutlet=\"ref.inputTemplate; context: context\"\n      ></ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"templateOverride\">\n      <ng-container\n        *ngTemplateOutlet=\"templateOverride; context: context\"\n      ></ng-container>\n    </ng-container>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputTemplateComponent, selector: "app-input-template" }] }); }
+}
+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\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: [{
+                type: Input
+            }], searchInputId: [{
+                type: Input
+            }], suggestAfterMinChars: [{
+                type: Input
+            }], templateOverride: [{
+                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)"
+          [attr.aria-labelledby]="'title-' + searchResult.uniqueId"
+          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"
+                [id]="'title-' + searchResult.uniqueId"
+                [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)"
+          [attr.aria-labelledby]="'title-' + searchResult.uniqueId"
+          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"
+                [id]="'title-' + searchResult.uniqueId"
+                [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 = {};
+        if (this.afterLinkClick) {
+            hooks['afterLinkClick'] = this.afterLinkClick;
+        }
+        return hooks;
+    }
+    constructor(storeServiceService) {
+        this.storeServiceService = storeServiceService;
+        this.searchResults = null;
+        this.metadata = null;
+        this.searchTerm = '';
+        this.context = this;
+    }
+    ngOnInit() {
+        if (this.storeServiceService.searchstax) {
+            this.attachObservables();
+            setTimeout(() => {
+                this.storeServiceService.searchstax.addSearchResultsWidget('searchstax-results-container', {
+                    templates: {},
+                    hooks: this.hooks,
+                    renderMethod: this.renderMethod ?? "pagination",
+                    resultsPerPage: this.resultsPerPage,
+                });
+            }, 0);
+        }
+        else {
+            throw Error('Searchstax instance needs to be passed via props');
+        }
+    }
+    executeSearch(term, event, context) {
+        event.preventDefault();
+        context.storeServiceService.searchstax.executeSearch(term);
+    }
+    attachObservables() {
+        this.storeServiceService.searchstax.dataLayer.$searchResults.subscribe((results) => {
+            const current = this.searchResults ? [...this.searchResults] : [];
+            const newResults = results ?? [];
+            const resultsCombined = this.renderMethod === "infiniteScroll"
+                ? [...current, ...newResults]
+                : results;
+            if (this.storeServiceService.searchstax.dataLayer.$searchObject.value?.page === 1) {
+                this.searchResults = newResults;
+            }
+            else {
+                this.searchResults = resultsCombined;
+            }
+        });
+        this.storeServiceService.searchstax.dataLayer.$searchTermChange.subscribe((result) => {
+            this.searchTerm = result;
+        });
+        this.storeServiceService.searchstax.dataLayer.$searchResultsMetadata.subscribe((value) => {
+            this.metadata = value;
+        });
+    }
+    resultClicked(result, event, context) {
+        event.preventDefault();
+        event.stopPropagation();
+        context.storeServiceService.searchstax.executeLinkClick(result.uniqueId);
+    }
+    isImage(field) {
+        return field.isImage && typeof field.value === 'string';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchstaxResultsWidget, deps: [{ token: StoreServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SearchstaxResultsWidget, selector: "app-searchstax-results", inputs: { afterLinkClick: "afterLinkClick", noResultsTemplate: "noResultsTemplate", resultsTemplate: "resultsTemplate", renderMethod: "renderMethod", resultsPerPage: "resultsPerPage" }, ngImport: i0, template: "<div id=\"searchstax-results-container\">\n  <section aria-label=\"search results container\" tabindex=\"0\">\n    <div\n      class=\"searchstax-search-results-container\"\n      id=\"searchstax-search-results-container\"\n    >\n      <div id=\"searchstax-result-container\">\n        <div\n          *ngIf=\"\n            searchResults?.length === 0 &&\n            searchTerm !== '' &&\n            searchTerm !== '*' &&\n            storeServiceService.searchstax.dataLayer.parsedData\n              .firstSearchHappened &&\n            !noResultsTemplate\n          \"\n        >\n          <app-no-results-template #ref></app-no-results-template>\n          <ng-template\n            *ngTemplateOutlet=\"ref.noResultsTemplate; context: context\"\n          ></ng-template>\n        </div>\n        <div\n          *ngIf=\"\n            searchResults?.length === 0 &&\n            searchTerm !== '' &&\n            searchTerm !== '*' &&\n            storeServiceService.searchstax.dataLayer.parsedData\n              .firstSearchHappened &&\n            noResultsTemplate\n          \"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"noResultsTemplate; context: context\"\n          ></ng-container>\n        </div>\n\n        <ng-container\n          *ngIf=\"searchResults && searchResults.length && !resultsTemplate\"\n        >\n          <app-results-template #ref></app-results-template>\n          <ng-template\n            *ngTemplateOutlet=\"ref.resultsTemplate; context: context\"\n          ></ng-template>\n        </ng-container>\n\n        <div *ngIf=\"searchResults && searchResults.length && resultsTemplate\">\n          <ng-container\n            *ngTemplateOutlet=\"resultsTemplate; context: context\"\n          ></ng-container>\n        </div>\n      </div>\n    </div>\n  </section>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResultsTemplateComponent, selector: "app-results-template" }, { kind: "component", type: NoResultsTemplateComponent, selector: "app-no-results-template" }] }); }
+}
+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  <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: [{
+                type: Input
+            }], resultsTemplate: [{
+                type: Input
+            }], renderMethod: [{
+                type: Input
+            }], resultsPerPage: [{
+                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;
+        this.searchFeedbackData = null;
+        this.rand = Math.random();
+        this.context = this;
+    }
+    ngOnInit() {
+        if (this.storeServiceService.searchstax) {
+            this.attachObservables();
+            setTimeout(() => {
+                this.storeServiceService.searchstax.addSearchFeedbackWidget("search-feedback-container" + this.rand, {});
+            }, 0);
+        }
+        else {
+            throw Error("Searchstax instance needs to be passed via props");
+        }
+    }
+    onOriginalQueryClick(e, context) {
+        e.stopImmediatePropagation();
+        context.storeServiceService.searchstax.searchFeedbackWidget?.onOriginalQueryClick(e);
+    }
+    attachObservables() {
+        this.storeServiceService.searchstax.dataLayer.$searchFeedbackData.subscribe((searchFeedbackData) => {
+            this.searchFeedbackData = searchFeedbackData;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchstaxSearchFeedbackWidget, deps: [{ token: StoreServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SearchstaxSearchFeedbackWidget, selector: "app-searchstax-search-feedback", inputs: { templateOverride: "templateOverride" }, ngImport: i0, template: "<div\n  class=\"search-feedback-container\"\n  [id]=\"'search-feedback-container' + rand\"\n>\n  <div\n    class=\"searchstax-feedback-container\"\n    *ngIf=\"\n      searchFeedbackData &&\n      searchFeedbackData?.searchExecuted &&\n      !templateOverride &&\n      searchFeedbackData?.totalResults\n    \"\n  >\n    <app-overview-template #ref></app-overview-template>\n    <ng-template\n      *ngTemplateOutlet=\"ref.overviewTemplate; context: context\"\n    ></ng-template>\n  </div>\n\n  <div\n    *ngIf=\"\n      searchFeedbackData &&\n      searchFeedbackData?.searchExecuted &&\n      templateOverride &&\n      searchFeedbackData?.totalResults\n    \"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"templateOverride; context: context\"\n    ></ng-container>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: OverviewTemplateComponent, selector: "app-overview-template" }] }); }
+}
+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    <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;
+        this.paginationData = null;
+        this.rand = Math.random();
+        this.context = this;
+        this.paginationAdded = false;
+    }
+    ngOnInit() {
+        if (this.storeServiceService.searchstax) {
+            this.attachObservables();
+            setTimeout(() => {
+                this.addWidget();
+            }, 0);
+        }
+        else {
+            throw Error("Searchstax instance needs to be passed via props");
+        }
+    }
+    nextPage(event, context) {
+        event.stopImmediatePropagation();
+        if (!context.paginationData?.isLastPage) {
+            context.storeServiceService.searchstax.searchPaginationWidget?.nextPage(event);
+        }
+    }
+    previousPage(event, context) {
+        event.stopImmediatePropagation();
+        if (!context.paginationData?.isFirstPage) {
+            context.storeServiceService.searchstax.searchPaginationWidget?.previousPage(event);
+        }
+    }
+    addWidget() {
+        if (!this.paginationAdded &&
+            this.storeServiceService.searchstax.routerHelper) {
+            this.paginationAdded = true;
+            this.storeServiceService.searchstax.addPaginationWidget("searchstax-pagination-container" + this.rand, {});
+        }
+    }
+    attachObservables() {
+        this.storeServiceService.searchstax.dataLayer.$searchObject.subscribe((pagination) => {
+            this.addWidget();
+        });
+        this.storeServiceService.searchstax.dataLayer.$paginationData.subscribe((pagination) => {
+            this.paginationData = pagination;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchstaxSearchPaginationWidget, deps: [{ token: StoreServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SearchstaxSearchPaginationWidget, selector: "app-searchstax-search-pagination", inputs: { templateOverride: "templateOverride", infiniteScrollTemplateOverride: "infiniteScrollTemplateOverride" }, ngImport: i0, template: "<div [id]=\"'searchstax-pagination-container' + rand\">\n  <ng-container\n    *ngIf=\"\n      paginationData?.totalResults &&\n      !templateOverride &&\n      !paginationData?.isInfiniteScroll\n    \"\n  >\n    <app-pagination-template #ref></app-pagination-template>\n    <ng-template\n      *ngTemplateOutlet=\"ref.paginationTemplate; context: context\"\n    ></ng-template>\n  </ng-container>\n\n  <div\n    *ngIf=\"\n      paginationData?.totalResults &&\n      templateOverride &&\n      !paginationData?.isInfiniteScroll\n    \"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"templateOverride; context: context\"\n    ></ng-container>\n  </div>\n\n  <ng-container\n    *ngIf=\"\n      paginationData?.totalResults &&\n      !infiniteScrollTemplateOverride &&\n      paginationData?.totalResults !== 0 &&\n      !paginationData?.isLastPage &&\n      paginationData?.isInfiniteScroll\n    \"\n  >\n    <app-pagination-infinite-template #ref></app-pagination-infinite-template>\n    <ng-template\n      *ngTemplateOutlet=\"ref.infiniteScrollTemplate; context: context\"\n    ></ng-template>\n  </ng-container>\n\n  <div\n    *ngIf=\"\n      paginationData?.totalResults &&\n      infiniteScrollTemplateOverride &&\n      paginationData?.totalResults !== 0 &&\n      !paginationData?.isLastPage &&\n      paginationData?.isInfiniteScroll\n    \"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"infiniteScrollTemplateOverride; context: context\"\n    ></ng-container>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginationTemplateComponent, selector: "app-pagination-template" }, { kind: "component", type: PaginationInfiniteTemplateComponent, selector: "app-pagination-infinite-template" }] }); }
+}
+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  <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) {
+        this.storeServiceService = storeServiceService;
+        this.facetsTemplateDataDesktop = null;
+        this.facetsTemplateDataMobile = null;
+        this.context = this;
+        this.selectedFacetsCheckboxes = [];
+        this.selectedFacetsRange = [];
+        this.rand = Math.random();
+    }
+    ngOnInit() {
+        if (this.storeServiceService.searchstax) {
+            this.attachObservables();
+            setTimeout(() => {
+                this.addWidget();
+            }, 0);
+        }
+        else {
+            throw Error("Searchstax instance needs to be passed via props");
+        }
+    }
+    addWidget() {
+        this.storeServiceService.searchstax.addFacetsWidget('searchstax-facets-container' + this.rand, {
+            facetingType: this.facetingType,
+            specificFacets: this.specificFacets,
+            itemsPerPageDesktop: this.itemsPerPageDesktop,
+            itemsPerPageMobile: this.itemsPerPageMobile
+        });
+    }
+    attachObservables() {
+        this.storeServiceService.searchstax.dataLayer.$facetsTemplateData.subscribe((data) => {
+            if (data?.isMobile) {
+                this.facetsTemplateDataMobile = data;
+            }
+            else {
+                this.facetsTemplateDataDesktop = data;
+            }
+        });
+        this.storeServiceService.searchstax.dataLayer.$selectedFacetsTemplateData.subscribe((data) => {
+            const da = data ?? [];
+            this.selectedFacetsCheckboxes = da.filter((d) => d.type === 'checkbox');
+        });
+    }
+    unselectFacet(facet, context) {
+        context.storeServiceService.searchstax.searchFacetsWidget?.unselectFacet(facet);
+    }
+    unselectAll(context) {
+        context.storeServiceService.searchstax.searchFacetsWidget?.removeSelectedFacets();
+    }
+    isNotDeactivated(name, context) {
+        return !context.storeServiceService.searchstax.searchFacetsWidget?.deactivatedFacets[name];
+    }
+    toggleFacetGroup(name, context) {
+        if (context.storeServiceService.searchstax.searchFacetsWidget)
+            if (context.isNotDeactivated(name, context)) {
+                context.storeServiceService.searchstax.searchFacetsWidget.deactivatedFacets[name] = true;
+            }
+            else {
+                context.storeServiceService.searchstax.searchFacetsWidget.deactivatedFacets[name] = false;
+            }
+    }
+    isChecked(facetValue, context) {
+        return context.storeServiceService.searchstax.searchFacetsWidget?.isChecked(facetValue);
+    }
+    selectFacet(el, event, data, isInput, context) {
+        const wrapperDiv = document.createElement('div');
+        wrapperDiv.innerHTML = el.outerHTML;
+        context.storeServiceService.searchstax.searchFacetsWidget?.onFacetSelect(event, data, el, isInput);
+    }
+    showMoreLessDesktop(e, data, context) {
+        context.storeServiceService.searchstax.searchFacetsWidget?.onShowMoreLessClick(e, data, false);
+    }
+    showMoreLessMobile(e, data, context) {
+        context.storeServiceService.searchstax.searchFacetsWidget?.onShowMoreLessClick(e, data, true);
+    }
+    openOverlay(context) {
+        context.storeServiceService.searchstax.searchFacetsWidget?.openOverlay();
+    }
+    closeOverlay(context) {
+        context.storeServiceService.searchstax.searchFacetsWidget?.closeOverlay();
+    }
+    facetValues(facet) {
+        return facet.values;
+    }
+    facetMobileData(facet) {
+        return facet;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchstaxSearchFacetsWidget, deps: [{ token: StoreServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SearchstaxSearchFacetsWidget, selector: "app-searchstax-search-facets", inputs: { templateOverrideMobile: "templateOverrideMobile", templateOverrideDesktop: "templateOverrideDesktop", facetingType: "facetingType", itemsPerPageDesktop: "itemsPerPageDesktop", itemsPerPageMobile: "itemsPerPageMobile", specificFacets: "specificFacets" }, 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  <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: [{
+                type: Input
+            }], facetingType: [{
+                type: Input
+            }], itemsPerPageDesktop: [{
+                type: Input
+            }], itemsPerPageMobile: [{
+                type: Input
+            }], specificFacets: [{
+                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;
+        this.sortingData = null;
+        this.rand = Math.random();
+        this.context = this;
+        this.selectedSorting = "";
+    }
+    ngOnInit() {
+        if (this.storeServiceService.searchstax) {
+            this.attachObservables();
+            setTimeout(() => {
+                this.storeServiceService.searchstax.addSearchSortingWidget("search-sorting-container" + this.rand, {});
+            }, 0);
+        }
+        else {
+            throw Error("Searchstax instance needs to be passed via props");
+        }
+    }
+    orderChange(e, context) {
+        e.stopImmediatePropagation();
+        context.storeServiceService.searchstax.searchSortingWidget?.setOrderQuery(e.target.value);
+    }
+    attachObservables() {
+        this.storeServiceService.searchstax.dataLayer.$searchSortingData.subscribe((sortingData) => {
+            this.sortingData = sortingData;
+        });
+        this.storeServiceService.searchstax.dataLayer.$searchObject.subscribe((searchObject) => {
+            this.selectedSorting = decodeURIComponent(searchObject?.order ?? '');
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchstaxSearchSortingWidget, deps: [{ token: StoreServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SearchstaxSearchSortingWidget, selector: "app-searchstax-search-sorting", inputs: { templateOverride: "templateOverride" }, ngImport: i0, template: "<div class=\"search-feedback-container\" [id]=\"'search-sorting-container' + rand\">\n  <ng-container\n    *ngIf=\"\n      sortingData &&\n      sortingData?.searchExecuted &&\n      sortingData?.hasResultsOrExternalPromotions &&\n      !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  <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;
+        this.answerData = null;
+        this.rand = Math.random();
+        this.context = this;
+    }
+    ngOnInit() {
+        if (this.storeServiceService.searchstax) {
+            this.attachObservables();
+            setTimeout(() => {
+                this.storeServiceService.searchstax.addAnswerWidget('searchstax-answer-container' + this.rand, { showMoreAfterWordCount: this.showMoreAfterWordCount, feedbackwidget: this.feedbackwidget });
+            }, 0);
+        }
+        else {
+            throw Error("Searchstax instance needs to be passed via props");
+        }
+    }
+    showMore(event, context) {
+        if (context.storeServiceService.searchstax) {
+            context.storeServiceService.searchstax.answerWidget?.showMore(event);
+        }
+    }
+    attachObservables() {
+        this.storeServiceService.searchstax.dataLayer.$answerData.subscribe((answerData) => {
+            this.answerData = answerData;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchstaxSearchAnswerWidget, deps: [{ token: StoreServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SearchstaxSearchAnswerWidget, selector: "app-searchstax-answer", inputs: { templateOverride: "templateOverride", feedbackwidget: "feedbackwidget", showMoreAfterWordCount: "showMoreAfterWordCount" }, 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    <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: [{
+                type: Input
+            }], showMoreAfterWordCount: [{
+                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;
+        this.relatedData = null;
+        this.rand = Math.random();
+        this.context = this;
+    }
+    ngOnInit() {
+        if (this.storeServiceService.searchstax) {
+            this.attachObservables();
+            setTimeout(() => {
+                this.storeServiceService.searchstax.addRelatedSearchesWidget("searchstax-related-searches-container" + this.rand, { relatedSearchesURL: this.relatedSearchesURL ?? "", relatedSearchesAPIKey: this.relatedSearchesAPIKey ?? "" });
+            }, 0);
+        }
+        else {
+            throw Error("Searchstax instance needs to be passed via props");
+        }
+    }
+    executeSearch(result, context) {
+        context.storeServiceService.searchstax.relatedSearchesWidget?.executeSearch(result);
+    }
+    attachObservables() {
+        this.storeServiceService.searchstax.dataLayer.$searchRelatedSearchesData.subscribe((relatedData) => {
+            this.relatedData = relatedData;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchstaxSearchRelatedSearchesWidget, deps: [{ token: StoreServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SearchstaxSearchRelatedSearchesWidget, selector: "app-searchstax-related-searches", inputs: { relatedSearchesURL: "relatedSearchesURL", relatedSearchesAPIKey: "relatedSearchesAPIKey", templateOverride: "templateOverride" }, ngImport: i0, template: "<ng-container\n  *ngIf=\"\n    relatedData &&\n    relatedData?.searchExecuted &&\n    relatedData?.hasRelatedSearches &&\n    !templateOverride\n  \"\n>\n  <app-related-template #ref></app-related-template>\n  <ng-template\n    *ngTemplateOutlet=\"ref.relatedTemplate; context: context\"\n  ></ng-template>\n</ng-container>\n\n<div\n  *ngIf=\"\n    relatedData &&\n    relatedData?.searchExecuted &&\n    relatedData?.hasRelatedSearches &&\n    templateOverride\n  \"\n>\n  <ng-container\n    *ngTemplateOutlet=\"templateOverride; context: context\"\n  ></ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: RelatedTemplateComponent, selector: "app-related-template" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchstaxSearchRelatedSearchesWidget, decorators: [{
+            type: Component,
+            args: [{ selector: "app-searchstax-related-searches", template: "<ng-container\n  *ngIf=\"\n    relatedData &&\n    relatedData?.searchExecuted &&\n    relatedData?.hasRelatedSearches &&\n    !templateOverride\n  \"\n>\n  <app-related-template #ref></app-related-template>\n  <ng-template\n    *ngTemplateOutlet=\"ref.relatedTemplate; context: context\"\n  ></ng-template>\n</ng-container>\n\n<div\n  *ngIf=\"\n    relatedData &&\n    relatedData?.searchExecuted &&\n    relatedData?.hasRelatedSearches &&\n    templateOverride\n  \"\n>\n  <ng-container\n    *ngTemplateOutlet=\"templateOverride; context: context\"\n  ></ng-container>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: StoreServiceService }], propDecorators: { relatedSearchesURL: [{
+                type: Input
+            }], relatedSearchesAPIKey: [{
+                type: Input
+            }], templateOverride: [{
+                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;
+        this.externalPromotionsData = null;
+        this.rand = Math.random();
+        this.context = this;
+    }
+    ngOnInit() {
+        if (this.storeServiceService.searchstax) {
+            this.attachObservables();
+            setTimeout(() => {
+                this.storeServiceService.searchstax.addExternalPromotionsWidget("searchstax-external-promotions-layout-container" + this.rand, {});
+            }, 0);
+        }
+        else {
+            throw Error("Searchstax instance needs to be passed via props");
+        }
+    }
+    trackClick(externalPromotion, event, context) {
+        context.storeServiceService.searchstax.externalPromotionsWidget?.trackClick(externalPromotion, event);
+    }
+    attachObservables() {
+        this.storeServiceService.searchstax.dataLayer.$searchExternalPromotionsData.subscribe((externalPromotionsData) => {
+            this.externalPromotionsData = externalPromotionsData;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchstaxSearchExternalPromotionsWidget, deps: [{ token: StoreServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SearchstaxSearchExternalPromotionsWidget, selector: "app-searchstax-external-promotions", inputs: { templateOverride: "templateOverride" }, ngImport: i0, template: "<div [id]=\"'searchstax-external-promotions-layout-container' + rand\">\n  <ng-container\n    *ngIf=\"\n      externalPromotionsData &&\n      externalPromotionsData?.searchExecuted &&\n      externalPromotionsData?.hasExternalPromotions &&\n      !templateOverride\n    \"\n  >\n    <app-external-template #ref></app-external-template>\n    <ng-template\n      *ngTemplateOutlet=\"ref.externalPromotionsTemplate; context: context\"\n    ></ng-template>\n  </ng-container>\n  <div\n    *ngIf=\"\n      externalPromotionsData &&\n      externalPromotionsData?.searchExecuted &&\n      externalPromotionsData?.hasExternalPromotions &&\n      templateOverride\n    \"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"templateOverride; context: context\"\n    ></ng-container>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ExternalPromotionsTemplateComponent, selector: "app-external-template" }] }); }
+}
+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  <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
+            }] } });
+
+class SearchstudioUxAngularModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchstudioUxAngularModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: SearchstudioUxAngularModule, declarations: [SearchstaxWrapper,
+            SearchstaxInputWidget,
+            SearchstaxResultsWidget,
+            SearchstaxSearchFeedbackWidget,
+            SearchstaxSearchPaginationWidget,
+            SearchstaxSearchFacetsWidget,
+            SearchstaxSearchSortingWidget,
+            SearchstaxSearchRelatedSearchesWidget,
+            SearchstaxSearchExternalPromotionsWidget,
+            SearchstaxSearchAnswerWidget,
+            SearchstaxSearchLocationWidget,
+            AnswerTemplateComponent,
+            OverviewTemplateComponent,
+            InputTemplateComponent,
+            LocationTemplateComponent,
+            PaginationTemplateComponent,
+            PaginationInfiniteTemplateComponent,
+            ResultsTemplateComponent,
+            NoResultsTemplateComponent,
+            ExternalPromotionsTemplateComponent,
+            SortingTemplateComponent,
+            RelatedTemplateComponent,
+            FacetDesktopTemplateComponent,
+            FacetMobileTemplateComponent], imports: [CommonModule, FormsModule], exports: [SearchstaxWrapper,
+            SearchstaxInputWidget,
+            SearchstaxResultsWidget,
+            SearchstaxSearchFeedbackWidget,
+            SearchstaxSearchPaginationWidget,
+            SearchstaxSearchFacetsWidget,
+            SearchstaxSearchSortingWidget,
+            SearchstaxSearchRelatedSearchesWidget,
+            SearchstaxSearchExternalPromotionsWidget,
+            SearchstaxSearchAnswerWidget,
+            SearchstaxSearchLocationWidget,
+            AnswerTemplateComponent,
+            OverviewTemplateComponent,
+            InputTemplateComponent,
+            LocationTemplateComponent,
+            PaginationTemplateComponent,
+            PaginationInfiniteTemplateComponent,
+            ResultsTemplateComponent,
+            NoResultsTemplateComponent,
+            ExternalPromotionsTemplateComponent,
+            SortingTemplateComponent,
+            RelatedTemplateComponent,
+            FacetDesktopTemplateComponent,
+            FacetMobileTemplateComponent] }); }
+    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: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SearchstaxWrapper,
+                        SearchstaxInputWidget,
+                        SearchstaxResultsWidget,
+                        SearchstaxSearchFeedbackWidget,
+                        SearchstaxSearchPaginationWidget,
+                        SearchstaxSearchFacetsWidget,
+                        SearchstaxSearchSortingWidget,
+                        SearchstaxSearchRelatedSearchesWidget,
+                        SearchstaxSearchExternalPromotionsWidget,
+                        SearchstaxSearchAnswerWidget,
+                        SearchstaxSearchLocationWidget,
+                        AnswerTemplateComponent,
+                        OverviewTemplateComponent,
+                        InputTemplateComponent,
+                        LocationTemplateComponent,
+                        PaginationTemplateComponent,
+                        PaginationInfiniteTemplateComponent,
+                        ResultsTemplateComponent,
+                        NoResultsTemplateComponent,
+                        ExternalPromotionsTemplateComponent,
+                        SortingTemplateComponent,
+                        RelatedTemplateComponent,
+                        FacetDesktopTemplateComponent,
+                        FacetMobileTemplateComponent
+                    ],
+                    imports: [CommonModule, FormsModule],
+                    exports: [
+                        SearchstaxWrapper,
+                        SearchstaxInputWidget,
+                        SearchstaxResultsWidget,
+                        SearchstaxSearchFeedbackWidget,
+                        SearchstaxSearchPaginationWidget,
+                        SearchstaxSearchFacetsWidget,
+                        SearchstaxSearchSortingWidget,
+                        SearchstaxSearchRelatedSearchesWidget,
+                        SearchstaxSearchExternalPromotionsWidget,
+                        SearchstaxSearchAnswerWidget,
+                        SearchstaxSearchLocationWidget,
+                        AnswerTemplateComponent,
+                        OverviewTemplateComponent,
+                        InputTemplateComponent,
+                        LocationTemplateComponent,
+                        PaginationTemplateComponent,
+                        PaginationInfiniteTemplateComponent,
+                        ResultsTemplateComponent,
+                        NoResultsTemplateComponent,
+                        ExternalPromotionsTemplateComponent,
+                        SortingTemplateComponent,
+                        RelatedTemplateComponent,
+                        FacetDesktopTemplateComponent,
+                        FacetMobileTemplateComponent
+                    ],
+                }]
+        }] });
+
+/*
+ * Public API Surface of searchstudio-ux-angular
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+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