@searchcraft/javascript-sdk 0.10.4 → 0.10.5

package/dist/components/index.d.ts

@@ -277,21 +277,33 @@ export interface ADMAd {
 	sale_price?: number;
 	term: string;
 }
+export type Facet = {
+	/**
+	 * The path of the facet. The path represents where in the facet tree structure
+	 * this facet exists. There is an arbitrary number of levels in a facet tree.
+	 *
+	 * @example
+	 *
+	 * '/sports/college' - Represents that this is the facet node exists at [root] -> [sports] -> [college] in the facet tree.
+	 * '/weather' - Represents that this facet exists at [root] -> [weather] in the facet tree
+	 * '/news/local' - [root] -> [news] -> [local]
+	 */
+	path: string;
+	/**
+	 * The count value just represents an arbitrary `count` metadata for this facet node.
+	 */
+	count: number;
+};
+export type FacetWithChildrenArray = Facet & {
+	children: FacetWithChildrenArray[] | null | undefined;
+};
 /**
  * A Facet object returned in a search response.
  */
 export type FacetRoot = {
-	[key: string]: FacetChild[];
+	[key: string]: FacetWithChildrenArray[];
 };
 export type FacetPrime = FacetRoot[];
-/**
- * Represents the structure of facets, which group search results into categories.
- */
-export interface FacetChild {
-	count: number;
-	path: string;
-	children?: FacetChild[];
-}
 /**
  * Types of measure requests that can be sent to the /measure/event endpoint.
  */
@@ -538,9 +550,10 @@ declare class SearchClient {
 	/**
 	 * Make the request to get the search results.
 	 * @param {properties} properties - The properties for the search.
+	 * @param sendTelemetry - Whether or not to emit measure and subscription events for this search.
 	 * @returns
 	 */
-	getSearchResponseItems: (properties: SearchClientRequestProperties | string) => Promise<SearchcraftResponse>;
+	getSearchResponseItems: (properties: SearchClientRequestProperties | string, sendTelemetry?: boolean) => Promise<SearchcraftResponse>;
 	private handleGetSearchResponseItemsWithString;
 	private handleGetSearchResponseItemsWithObject;
 	/**
@@ -592,7 +605,7 @@ export declare class SearchcraftCore {
 	 * Perform various actions when the input is cleared
 	 */
 	handleInputCleared(): void;
-	getResponseItems: (properties: SearchClientRequestProperties | string, searchCallback: (response: SearchcraftResponse, items: SearchClientResponseItem[]) => void, adCallback: (items: AdClientResponseItem[]) => void) => void;
+	getResponseItems: (properties: SearchClientRequestProperties | string, searchCallback: (response: SearchcraftResponse, items: SearchClientResponseItem[], supplementalResponse: SearchcraftResponse | undefined) => void, adCallback: (items: AdClientResponseItem[]) => void) => void;
 }
 /**
  * Callable functions made available by the SearchcraftStore.
@@ -608,7 +621,7 @@ export interface SearchcraftStateFunctions {
 	search: () => Promise<void>;
 	set: (state: Partial<SearchcraftState> | ((state: SearchcraftState) => Partial<SearchcraftState>)) => SearchcraftState;
 	setAdClientResponseItems: (items: AdClientResponseItem[]) => void;
-	setSearchClientResponseItemsFromResponse: (response: SearchcraftResponse, items: SearchClientResponseItem[]) => void;
+	setSearchClientResponseItemsFromResponse: (response: SearchcraftResponse, items: SearchClientResponseItem[], supplementalResponse: SearchcraftResponse | undefined) => void;
 	setInitialSearchClientResponseItemsFromResponse: (response: SearchcraftResponse, items: SearchClientResponseItem[]) => void;
 	setInitialQuery: (query: string) => void;
 	setPopoverVisibility: (isVisible: boolean) => void;
@@ -643,6 +656,7 @@ export interface SearchcraftStateValues {
 	searchClientResponseItems: SearchClientResponseItem[];
 	searchResponseTimeTaken: number | undefined;
 	searchResponseFacetPrime: FacetPrime | undefined | null;
+	supplementalFacetPrime: FacetPrime | undefined | null;
 	searchResultsCount: number;
 	searchResultsPage: number;
 	searchResultsPerPage: number;
@@ -802,6 +816,10 @@ export namespace Components {
 		  * The label rendered above the input.
 		 */
 		"inputLabel"?: string;
+		/**
+		  * The placeholder's render behavior. 'hide-on-focus' - Hide the placeholder text immediately when the input form gains focus. 'hide-on-text-entered' - Only hide the placeholder when the input form has text entered into it.
+		 */
+		"placeholderBehavior"?: "hide-on-focus" | "hide-on-text-entered";
 		/**
 		  * The input element's placeholder value.
 		 */
@@ -1148,13 +1166,13 @@ export namespace Components {
 	 */
 	interface SearchcraftSlider {
 		/**
-		  * The type of data allowed.
+		  * The type of data the sliders are using.
 		 */
 		"dataType": "number" | "date";
 		/**
-		  * The granularity that the value must adhere to.
+		  * The date granularity to use. Used to format date labels.
 		 */
-		"granularity": number;
+		"dateGranularity"?: "year" | "month" | "day" | "hour";
 		/**
 		  * The maximum value allowed.
 		 */
@@ -1163,6 +1181,10 @@ export namespace Components {
 		  * The minimum value allowed.
 		 */
 		"min": number;
+		/**
+		  * The step amount for the slider inputs.
+		 */
+		"step": number;
 	}
 	/**
 	 * This web component adds Searchcraft's built-in css theme to your page. It does not render anything visible, its only function is to manage the css styles on the page.'
@@ -1829,7 +1851,7 @@ declare namespace LocalJSX {
 		 */
 		"fieldName"?: string;
 		/**
-		  * When the facets are updated.
+		  * Emitted when the facets are updated.
 		 */
 		"onFacetSelectionUpdated"?: (event: SearchcraftFacetListCustomEvent<{
 			paths: string[];
@@ -1916,6 +1938,10 @@ declare namespace LocalJSX {
 		  * Event emitted when input initializes.
 		 */
 		"onInputInit"?: (event: SearchcraftInputFormCustomEvent<void>) => void;
+		/**
+		  * The placeholder's render behavior. 'hide-on-focus' - Hide the placeholder text immediately when the input form gains focus. 'hide-on-text-entered' - Only hide the placeholder when the input form has text entered into it.
+		 */
+		"placeholderBehavior"?: "hide-on-focus" | "hide-on-text-entered";
 		/**
 		  * The input element's placeholder value.
 		 */
@@ -2266,13 +2292,13 @@ declare namespace LocalJSX {
 	 */
 	interface SearchcraftSlider {
 		/**
-		  * The type of data allowed.
+		  * The type of data the sliders are using.
 		 */
 		"dataType"?: "number" | "date";
 		/**
-		  * The granularity that the value must adhere to.
+		  * The date granularity to use. Used to format date labels.
 		 */
-		"granularity"?: number;
+		"dateGranularity"?: "year" | "month" | "day" | "hour";
 		/**
 		  * The maximum value allowed.
 		 */
@@ -2285,6 +2311,10 @@ declare namespace LocalJSX {
 		  * When the range has changed.
 		 */
 		"onRangeChanged"?: (event: SearchcraftSliderCustomEvent<any>) => void;
+		/**
+		  * The step amount for the slider inputs.
+		 */
+		"step"?: number;
 	}
 	/**
 	 * This web component adds Searchcraft's built-in css theme to your page. It does not render anything visible, its only function is to manage the css styles on the page.'

package/dist/components/index.js

@@ -1,6 +1,6 @@
 export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-5365011f.js';
-import { v as ve } from './p-60fd824d.js';
-export { v as SearchcraftCore, s as searchcraftStore } from './p-60fd824d.js';
+import { v as ve } from './p-7c10ca44.js';
+export { v as SearchcraftCore, s as searchcraftStore } from './p-7c10ca44.js';
 export { SearchcraftAd, defineCustomElement as defineCustomElementSearchcraftAd } from './searchcraft-ad.js';
 export { SearchcraftButton, defineCustomElement as defineCustomElementSearchcraftButton } from './searchcraft-button.js';
 export { SearchcraftErrorMessage, defineCustomElement as defineCustomElementSearchcraftErrorMessage } from './searchcraft-error-message.js';
@@ -24,7 +24,7 @@ export { SearchcraftTheme, defineCustomElement as defineCustomElementSearchcraft
 export { SearchcraftToggleButton, defineCustomElement as defineCustomElementSearchcraftToggleButton } from './searchcraft-toggle-button.js';
 
 const name = "@searchcraft/javascript-sdk";
-const version = "0.10.4";
+const version = "0.10.5";
 const description = "Searchcraft Javascript SDK";
 const author = "Searchcraft Inc.";
 const license = "Apache-2.0";
@@ -67,7 +67,7 @@ const dependencies = {
 	nanoid: "^5.0.9"
 };
 const devDependencies = {
-	"@searchcraft/core": "^0.10.4",
+	"@searchcraft/core": "^0.10.5",
 	"@stencil/core": "^4.7.0",
 	"@stencil/react-output-target": "^0.8.2",
 	"@stencil/sass": "^3.0.12",

package/dist/components/p-4dd1995c.js

@@ -0,0 +1,193 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-5365011f.js';
+import { a as getDifferenceInUnits, b as getStartOf, c as getFormattedDateString } from './p-d54771ef.js';
+import './p-a64b4cba.js';
+import { c as classNames } from './p-5cdc6210.js';
+
+/**
+ * Creates a throttled version of the given function that only invokes
+ * the original function at most once every specified number of milliseconds.
+ *
+ * The logic is written in a way that the last invocation is always called, after the
+ * throttle cooldown period has ended.
+ *
+ * @template Arguments - The argument types for the function to throttle
+ * @param callback - The function to throttle
+ * @param delayInMilliseconds - The number of milliseconds to wait before allowing the next invocation
+ * @returns A throttled version of the original function
+ */
+function throttle(callback, delayInMilliseconds) {
+    let isThrottleOnCooldown = false;
+    let trailingCallArgs = null;
+    const invokeAction = (args) => {
+        callback(...args);
+        isThrottleOnCooldown = true;
+        setTimeout(() => {
+            isThrottleOnCooldown = false;
+            if (trailingCallArgs) {
+                const nextArgs = trailingCallArgs;
+                trailingCallArgs = null;
+                invokeAction(nextArgs);
+            }
+        }, delayInMilliseconds);
+    };
+    return (...args) => {
+        if (!isThrottleOnCooldown) {
+            invokeAction(args);
+        }
+        else {
+            trailingCallArgs = args;
+        }
+    };
+}
+
+const SearchcraftSlider = /*@__PURE__*/ proxyCustomElement(class SearchcraftSlider extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.rangeChanged = createEvent(this, "rangeChanged", 7);
+    }
+    /**
+     * The maximum value allowed.
+     */
+    max = 100;
+    /**
+     * The minimum value allowed.
+     */
+    min = 0;
+    /**
+     * The step amount for the slider inputs.
+     */
+    step = 1;
+    /** The type of data the sliders are using. */
+    dataType = 'number';
+    /** The date granularity to use. Used to format date labels. */
+    dateGranularity;
+    lowerBound = 0;
+    upperBound = 1;
+    endValue = 0;
+    startValue = 0;
+    lastFocusedHandle = 'max';
+    throttledEmitUpdate = () => { };
+    /**
+     * When the range has changed.
+     * */
+    rangeChanged;
+    connectedCallback() {
+        switch (this.dataType) {
+            case 'number':
+                this.startValue = this.min;
+                this.endValue = this.max;
+                this.lowerBound = this.min;
+                this.upperBound = this.max;
+                break;
+            case 'date': {
+                this.startValue = 0;
+                this.endValue = getDifferenceInUnits(this.dateGranularity || 'year', this.min, this.max);
+                this.lowerBound = 0;
+                this.upperBound = this.endValue;
+                break;
+            }
+        }
+        this.throttledEmitUpdate = throttle(this.emitUpdate, 120);
+    }
+    emitUpdate = async () => {
+        switch (this.dataType) {
+            case 'number':
+                this.rangeChanged?.emit({
+                    startValue: this.startValue,
+                    endValue: this.endValue,
+                });
+                break;
+            case 'date': {
+                const granularity = this.dateGranularity || 'year';
+                const startTimestamp = getStartOf(this.min, granularity, this.lowerBound + this.startValue);
+                const endTimestamp = getStartOf(this.min, granularity, this.lowerBound + this.endValue + 1);
+                this.rangeChanged?.emit({
+                    startValue: startTimestamp,
+                    endValue: endTimestamp,
+                });
+                break;
+            }
+        }
+    };
+    handleStartValueChange = (event) => {
+        const inputElement = event.target;
+        const value = Number.parseInt(inputElement.value, 10);
+        this.lastFocusedHandle = 'min';
+        if (value <= this.endValue) {
+            this.startValue = value;
+            this.throttledEmitUpdate();
+        }
+        else {
+            this.startValue = this.endValue;
+            inputElement.value = `${this.endValue}`;
+        }
+    };
+    handleEndValueChange = (event) => {
+        const inputElement = event.target;
+        const value = Number.parseInt(inputElement.value, 10);
+        this.lastFocusedHandle = 'max';
+        if (value >= this.startValue) {
+            this.endValue = value;
+            this.throttledEmitUpdate();
+        }
+        else {
+            this.endValue = this.startValue;
+            inputElement.value = `${this.startValue}`;
+        }
+    };
+    getLabel = (value) => {
+        switch (this.dataType) {
+            case 'number':
+                return `${this.startValue}`;
+            case 'date': {
+                const granularity = this.dateGranularity || 'year';
+                const dateOffset = this.lowerBound + value;
+                const timestamp = getStartOf(this.min, granularity, dateOffset);
+                return getFormattedDateString(this.dateGranularity || 'year', new Date(timestamp));
+            }
+        }
+    };
+    render() {
+        const startPercent = ((this.startValue - this.lowerBound) /
+            (this.upperBound - this.lowerBound)) *
+            100;
+        const endPercent = ((this.endValue - this.lowerBound) /
+            (this.upperBound - this.lowerBound)) *
+            100;
+        const startLabel = this.getLabel(this.startValue);
+        const endLabel = this.getLabel(this.endValue);
+        return (h("div", { key: '3b2e8576d64826f123d40deff3b0df9316649a03', class: 'searchcraft-slider' }, h("div", { key: 'ecaa546b96855aad4e839c5e34e995da0925e0b6', class: 'searchcraft-slider-range' }, h("div", { key: 'f37fc0329249857a29f77d9e3739d10f05f6bf62', class: 'searchcraft-slider-active-range', style: {
+                left: `${startPercent}%`,
+                width: `${endPercent - startPercent}%`,
+            } }), h("input", { key: '7b5e6f3983b7c109ea0a3f2b248c35d0e225400b', class: classNames('searchcraft-slider-input', 'searchcraft-slider-input-min-handle'), max: this.upperBound, min: this.lowerBound, onInput: this.handleStartValueChange.bind(this), step: this.step, style: { zIndex: this.lastFocusedHandle === 'min' ? '2' : '1' }, type: 'range', value: this.startValue }), h("input", { key: 'b5bb628b73c8b582a31453e73cb3ef38579eeea5', class: classNames('searchcraft-slider-input', 'searchcraft-slider-input-max-handle'), max: this.upperBound, min: this.lowerBound, onInput: this.handleEndValueChange.bind(this), step: this.step, style: { zIndex: this.lastFocusedHandle === 'max' ? '2' : '1' }, type: 'range', value: this.endValue })), h("div", { key: 'ecb379babd244e3205f30d45628506566fbeff3c', class: 'searchcraft-slider-label' }, h("span", { key: '2be886d05c323f7da1059be88c0cb8ede2e1e98b', class: 'searchcraft-slider-start-label' }, startLabel), h("span", { key: 'bf66fcab3fae565980a4637cb13b14589ffcb5ba', class: 'searchcraft-slider-end-label' }, endLabel))));
+    }
+}, [0, "searchcraft-slider", {
+        "max": [2],
+        "min": [2],
+        "step": [2],
+        "dataType": [1, "data-type"],
+        "dateGranularity": [1, "date-granularity"],
+        "lowerBound": [32],
+        "upperBound": [32],
+        "endValue": [32],
+        "startValue": [32],
+        "lastFocusedHandle": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["searchcraft-slider"];
+    components.forEach(tagName => { switch (tagName) {
+        case "searchcraft-slider":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SearchcraftSlider);
+            }
+            break;
+    } });
+}
+
+export { SearchcraftSlider as S, defineCustomElement as d };
+
+//# sourceMappingURL=p-4dd1995c.js.map

package/dist/components/p-4dd1995c.js.map

@@ -0,0 +1 @@
+{"file":"p-4dd1995c.js","mappings":";;;;;AAAA;;;;;;;;;;;;SAYgB,QAAQ,CAItB,QAAsC,EACtC,mBAA2B;IAE3B,IAAI,oBAAoB,GAAG,KAAK,CAAC;IACjC,IAAI,gBAAgB,GAAqB,IAAI,CAAC;IAE9C,MAAM,YAAY,GAAG,CAAC,IAAe;QACnC,QAAQ,CAAC,GAAG,IAAI,CAAC,CAAC;QAClB,oBAAoB,GAAG,IAAI,CAAC;QAC5B,UAAU,CAAC;YACT,oBAAoB,GAAG,KAAK,CAAC;YAC7B,IAAI,gBAAgB,EAAE;gBACpB,MAAM,QAAQ,GAAG,gBAAgB,CAAC;gBAClC,gBAAgB,GAAG,IAAI,CAAC;gBACxB,YAAY,CAAC,QAAQ,CAAC,CAAC;aACxB;SACF,EAAE,mBAAmB,CAAC,CAAC;KACzB,CAAC;IAEF,OAAO,CAAC,GAAG,IAAe;QACxB,IAAI,CAAC,oBAAoB,EAAE;YACzB,YAAY,CAAC,IAAI,CAAC,CAAC;SACpB;aAAM;YACL,gBAAgB,GAAG,IAAI,CAAC;SACzB;KACF,CAAC;AACJ;;MCjBa,iBAAiB;;;;;;;;;IAIpB,GAAG,GAAG,GAAG,CAAC;;;;IAIV,GAAG,GAAG,CAAC,CAAC;;;;IAIR,IAAI,GAAG,CAAC,CAAC;;IAET,QAAQ,GAAsB,QAAQ,CAAC;;IAEvC,eAAe,CAAqC;IAEnD,UAAU,GAAG,CAAC,CAAC;IACf,UAAU,GAAG,CAAC,CAAC;IACf,QAAQ,GAAG,CAAC,CAAC;IACb,UAAU,GAAG,CAAC,CAAC;IACf,iBAAiB,GAAkB,KAAK,CAAC;IAElD,mBAAmB,GAAe,SAAQ,CAAC;;;;IAKlC,YAAY,CAEP;IAEd,iBAAiB;QACf,QAAQ,IAAI,CAAC,QAAQ;YACnB,KAAK,QAAQ;gBACX,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC;gBAC3B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC;gBACzB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC;gBAC3B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC;gBAC3B,MAAM;YACR,KAAK,MAAM,EAAE;gBACX,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC;gBACpB,IAAI,CAAC,QAAQ,GAAG,oBAAoB,CAClC,IAAI,CAAC,eAAe,IAAI,MAAM,EAC9B,IAAI,CAAC,GAAG,EACR,IAAI,CAAC,GAAG,CACT,CAAC;gBACF,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC;gBACpB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC;gBAEhC,MAAM;aACP;SACF;QAED,IAAI,CAAC,mBAAmB,GAAG,QAAQ,CAAC,IAAI,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;KAC3D;IAEO,UAAU,GAAG;QACnB,QAAQ,IAAI,CAAC,QAAQ;YACnB,KAAK,QAAQ;gBACX,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC;oBACtB,UAAU,EAAE,IAAI,CAAC,UAAU;oBAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ;iBACxB,CAAC,CAAC;gBACH,MAAM;YACR,KAAK,MAAM,EAAE;gBACX,MAAM,WAAW,GAAG,IAAI,CAAC,eAAe,IAAI,MAAM,CAAC;gBACnD,MAAM,cAAc,GAAG,UAAU,CAC/B,IAAI,CAAC,GAAG,EACR,WAAW,EACX,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAClC,CAAC;gBACF,MAAM,YAAY,GAAG,UAAU,CAC7B,IAAI,CAAC,GAAG,EACR,WAAW,EACX,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,QAAQ,GAAG,CAAC,CACpC,CAAC;gBACF,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC;oBACtB,UAAU,EAAE,cAAc;oBAC1B,QAAQ,EAAE,YAAY;iBACvB,CAAC,CAAC;gBACH,MAAM;aACP;SACF;KACF,CAAC;IAEM,sBAAsB,GAAG,CAAC,KAAiB;QACjD,MAAM,YAAY,GAAG,KAAK,CAAC,MAA0B,CAAC;QACtD,MAAM,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QACtD,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;QAE/B,IAAI,KAAK,IAAI,IAAI,CAAC,QAAQ,EAAE;YAC1B,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;YACxB,IAAI,CAAC,mBAAmB,EAAE,CAAC;SAC5B;aAAM;YACL,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC;YAChC,YAAY,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;SACzC;KACF,CAAC;IAEM,oBAAoB,GAAG,CAAC,KAAiB;QAC/C,MAAM,YAAY,GAAG,KAAK,CAAC,MAA0B,CAAC;QACtD,MAAM,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QACtD,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;QAE/B,IAAI,KAAK,IAAI,IAAI,CAAC,UAAU,EAAE;YAC5B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACtB,IAAI,CAAC,mBAAmB,EAAE,CAAC;SAC5B;aAAM;YACL,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC;YAChC,YAAY,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;SAC3C;KACF,CAAC;IAEM,QAAQ,GAAG,CAAC,KAAK;QACvB,QAAQ,IAAI,CAAC,QAAQ;YACnB,KAAK,QAAQ;gBACX,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;YAC9B,KAAK,MAAM,EAAE;gBACX,MAAM,WAAW,GAAG,IAAI,CAAC,eAAe,IAAI,MAAM,CAAC;gBACnD,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;gBAC3C,MAAM,SAAS,GAAG,UAAU,CAAC,IAAI,CAAC,GAAG,EAAE,WAAW,EAAE,UAAU,CAAC,CAAC;gBAEhE,OAAO,sBAAsB,CAC3B,IAAI,CAAC,eAAe,IAAI,MAAM,EAC9B,IAAI,IAAI,CAAC,SAAS,CAAC,CACpB,CAAC;aACH;SACF;KACF,CAAC;IAEF,MAAM;QACJ,MAAM,YAAY,GAChB,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU;aAChC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;YACrC,GAAG,CAAC;QACN,MAAM,UAAU,GACd,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,UAAU;aAC9B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;YACrC,GAAG,CAAC;QAEN,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAClD,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAE9C,QACE,4DAAK,KAAK,EAAC,oBAAoB,IAC7B,4DAAK,KAAK,EAAC,0BAA0B,IACnC,4DACE,KAAK,EAAC,iCAAiC,EACvC,KAAK,EAAE;gBACL,IAAI,EAAE,GAAG,YAAY,GAAG;gBACxB,KAAK,EAAE,GAAG,UAAU,GAAG,YAAY,GAAG;aACvC,GACD,EACF,8DACE,KAAK,EAAE,UAAU,CACf,0BAA0B,EAC1B,qCAAqC,CACtC,EACD,GAAG,EAAE,IAAI,CAAC,UAAU,EACpB,GAAG,EAAE,IAAI,CAAC,UAAU,EACpB,OAAO,EAAE,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,EAC/C,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,iBAAiB,KAAK,KAAK,GAAG,GAAG,GAAG,GAAG,EAAE,EAC/D,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,IAAI,CAAC,UAAU,GACtB,EACF,8DACE,KAAK,EAAE,UAAU,CACf,0BAA0B,EAC1B,qCAAqC,CACtC,EACD,GAAG,EAAE,IAAI,CAAC,UAAU,EACpB,GAAG,EAAE,IAAI,CAAC,UAAU,EACpB,OAAO,EAAE,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,EAC7C,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,iBAAiB,KAAK,KAAK,GAAG,GAAG,GAAG,GAAG,EAAE,EAC/D,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,IAAI,CAAC,QAAQ,GACpB,CACE,EACN,4DAAK,KAAK,EAAC,0BAA0B,IACnC,6DAAM,KAAK,EAAC,gCAAgC,IAAE,UAAU,CAAQ,EAChE,6DAAM,KAAK,EAAC,8BAA8B,IAAE,QAAQ,CAAQ,CACxD,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/utils/throttle.ts","src/components/searchcraft-slider/searchcraft-slider.tsx"],"sourcesContent":["/**\n * Creates a throttled version of the given function that only invokes\n * the original function at most once every specified number of milliseconds.\n *\n * The logic is written in a way that the last invocation is always called, after the\n * throttle cooldown period has ended.\n *\n * @template Arguments - The argument types for the function to throttle\n * @param callback - The function to throttle\n * @param delayInMilliseconds - The number of milliseconds to wait before allowing the next invocation\n * @returns A throttled version of the original function\n */\nexport function throttle<\n  // biome-ignore lint/suspicious/noExplicitAny: To be an effective util, this needs to be flexibile enough allow any type of arguments.\n  Arguments extends any[],\n>(\n  callback: (...args: Arguments) => void,\n  delayInMilliseconds: number,\n): (...args: Arguments) => void {\n  let isThrottleOnCooldown = false;\n  let trailingCallArgs: Arguments | null = null;\n\n  const invokeAction = (args: Arguments) => {\n    callback(...args);\n    isThrottleOnCooldown = true;\n    setTimeout(() => {\n      isThrottleOnCooldown = false;\n      if (trailingCallArgs) {\n        const nextArgs = trailingCallArgs;\n        trailingCallArgs = null;\n        invokeAction(nextArgs);\n      }\n    }, delayInMilliseconds);\n  };\n\n  return (...args: Arguments) => {\n    if (!isThrottleOnCooldown) {\n      invokeAction(args);\n    } else {\n      trailingCallArgs = args;\n    }\n  };\n}\n","import {\n  Component,\n  Event,\n  type EventEmitter,\n  h,\n  State,\n  Prop,\n} from '@stencil/core';\nimport {\n  getDifferenceInUnits,\n  getFormattedDateString,\n  getStartOf,\n} from '@utils';\nimport { throttle } from '@utils/throttle';\nimport classNames from 'classnames';\n\n/**\n * This web component is designed to allow users to select a value from a range defined by a minimum and maximum value. The component renders a slider interface, which can be used to visually choose a value between two boundaries.\n *\n * @internal\n */\n@Component({\n  tag: 'searchcraft-slider',\n  shadow: false,\n})\nexport class SearchcraftSlider {\n  /**\n   * The maximum value allowed.\n   */\n  @Prop() max = 100;\n  /**\n   * The minimum value allowed.\n   */\n  @Prop() min = 0;\n  /**\n   * The step amount for the slider inputs.\n   */\n  @Prop() step = 1;\n  /** The type of data the sliders are using. */\n  @Prop() dataType: 'number' | 'date' = 'number';\n  /** The date granularity to use. Used to format date labels. */\n  @Prop() dateGranularity?: 'year' | 'month' | 'day' | 'hour';\n\n  @State() lowerBound = 0;\n  @State() upperBound = 1;\n  @State() endValue = 0;\n  @State() startValue = 0;\n  @State() lastFocusedHandle: 'min' | 'max' = 'max';\n\n  throttledEmitUpdate: () => void = () => {};\n\n  /**\n   * When the range has changed.\n   * */\n  @Event() rangeChanged:\n    | EventEmitter<{ startValue: number; endValue: number }>\n    | undefined;\n\n  connectedCallback() {\n    switch (this.dataType) {\n      case 'number':\n        this.startValue = this.min;\n        this.endValue = this.max;\n        this.lowerBound = this.min;\n        this.upperBound = this.max;\n        break;\n      case 'date': {\n        this.startValue = 0;\n        this.endValue = getDifferenceInUnits(\n          this.dateGranularity || 'year',\n          this.min,\n          this.max,\n        );\n        this.lowerBound = 0;\n        this.upperBound = this.endValue;\n\n        break;\n      }\n    }\n\n    this.throttledEmitUpdate = throttle(this.emitUpdate, 120);\n  }\n\n  private emitUpdate = async () => {\n    switch (this.dataType) {\n      case 'number':\n        this.rangeChanged?.emit({\n          startValue: this.startValue,\n          endValue: this.endValue,\n        });\n        break;\n      case 'date': {\n        const granularity = this.dateGranularity || 'year';\n        const startTimestamp = getStartOf(\n          this.min,\n          granularity,\n          this.lowerBound + this.startValue,\n        );\n        const endTimestamp = getStartOf(\n          this.min,\n          granularity,\n          this.lowerBound + this.endValue + 1,\n        );\n        this.rangeChanged?.emit({\n          startValue: startTimestamp,\n          endValue: endTimestamp,\n        });\n        break;\n      }\n    }\n  };\n\n  private handleStartValueChange = (event: InputEvent) => {\n    const inputElement = event.target as HTMLInputElement;\n    const value = Number.parseInt(inputElement.value, 10);\n    this.lastFocusedHandle = 'min';\n\n    if (value <= this.endValue) {\n      this.startValue = value;\n      this.throttledEmitUpdate();\n    } else {\n      this.startValue = this.endValue;\n      inputElement.value = `${this.endValue}`;\n    }\n  };\n\n  private handleEndValueChange = (event: InputEvent) => {\n    const inputElement = event.target as HTMLInputElement;\n    const value = Number.parseInt(inputElement.value, 10);\n    this.lastFocusedHandle = 'max';\n\n    if (value >= this.startValue) {\n      this.endValue = value;\n      this.throttledEmitUpdate();\n    } else {\n      this.endValue = this.startValue;\n      inputElement.value = `${this.startValue}`;\n    }\n  };\n\n  private getLabel = (value): string => {\n    switch (this.dataType) {\n      case 'number':\n        return `${this.startValue}`;\n      case 'date': {\n        const granularity = this.dateGranularity || 'year';\n        const dateOffset = this.lowerBound + value;\n        const timestamp = getStartOf(this.min, granularity, dateOffset);\n\n        return getFormattedDateString(\n          this.dateGranularity || 'year',\n          new Date(timestamp),\n        );\n      }\n    }\n  };\n\n  render() {\n    const startPercent =\n      ((this.startValue - this.lowerBound) /\n        (this.upperBound - this.lowerBound)) *\n      100;\n    const endPercent =\n      ((this.endValue - this.lowerBound) /\n        (this.upperBound - this.lowerBound)) *\n      100;\n\n    const startLabel = this.getLabel(this.startValue);\n    const endLabel = this.getLabel(this.endValue);\n\n    return (\n      <div class='searchcraft-slider'>\n        <div class='searchcraft-slider-range'>\n          <div\n            class='searchcraft-slider-active-range'\n            style={{\n              left: `${startPercent}%`,\n              width: `${endPercent - startPercent}%`,\n            }}\n          />\n          <input\n            class={classNames(\n              'searchcraft-slider-input',\n              'searchcraft-slider-input-min-handle',\n            )}\n            max={this.upperBound}\n            min={this.lowerBound}\n            onInput={this.handleStartValueChange.bind(this)}\n            step={this.step}\n            style={{ zIndex: this.lastFocusedHandle === 'min' ? '2' : '1' }}\n            type='range'\n            value={this.startValue}\n          />\n          <input\n            class={classNames(\n              'searchcraft-slider-input',\n              'searchcraft-slider-input-max-handle',\n            )}\n            max={this.upperBound}\n            min={this.lowerBound}\n            onInput={this.handleEndValueChange.bind(this)}\n            step={this.step}\n            style={{ zIndex: this.lastFocusedHandle === 'max' ? '2' : '1' }}\n            type='range'\n            value={this.endValue}\n          />\n        </div>\n        <div class='searchcraft-slider-label'>\n          <span class='searchcraft-slider-start-label'>{startLabel}</span>\n          <span class='searchcraft-slider-end-label'>{endLabel}</span>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-9d2e55a7.js → p-6c471ee0.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h } from './p-5365011f.js';
-import { s as searchcraftStore } from './p-60fd824d.js';
-import { a as getDocumentValueFromSearchResultMapping } from './p-4d37616e.js';
+import { s as searchcraftStore } from './p-7c10ca44.js';
+import { g as getDocumentValueFromSearchResultMapping } from './p-d54771ef.js';
 import './p-a64b4cba.js';
 
 const SearchcraftPopoverListItem = /*@__PURE__*/ proxyCustomElement(class SearchcraftPopoverListItem extends H {
@@ -73,4 +73,4 @@ function defineCustomElement() {
 
 export { SearchcraftPopoverListItem as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-9d2e55a7.js.map
+//# sourceMappingURL=p-6c471ee0.js.map

package/dist/components/{p-9d2e55a7.js.map → p-6c471ee0.js.map}

@@ -1 +1 @@
-{"file":"p-9d2e55a7.js","mappings":";;;;;MAkBa,0BAA0B;;;;;IAC7B,IAAI,CAAuC;IAC3C,qBAAqB,CAAoC;;IAEzD,gBAAgB,GAAG,CAAC,CAAC;IAEpB,KAAK,CAAU;IACf,QAAQ,CAAU;IAClB,IAAI,CAAU;IACd,WAAW,CAAU;IACrB,QAAQ,CAAU;IAE3B,qBAAqB,CAAC,QAAwB;QAC5C,IAAI,CAAC,KAAK,GAAG,uCAAuC,CAClD,QAAQ,EACR,IAAI,CAAC,qBAAqB,EAAE,KAAK,CAClC,CAAC;QACF,IAAI,CAAC,QAAQ,GAAG,uCAAuC,CACrD,QAAQ,EACR,IAAI,CAAC,qBAAqB,EAAE,QAAQ,CACrC,CAAC;QACF,IAAI,CAAC,IAAI,GAAG,uCAAuC,CACjD,QAAQ,EACR,IAAI,CAAC,qBAAqB,EAAE,IAAI,CACjC,CAAC;QACF,IAAI,CAAC,WAAW,GAAG,uCAAuC,CACxD,QAAQ,EACR,IAAI,CAAC,qBAAqB,EAAE,WAAW,CACxC,CAAC;QACF,IAAI,CAAC,QAAQ,GAAG,uCAAuC,CACrD,QAAQ,EACR,IAAI,CAAC,qBAAqB,EAAE,QAAQ,CACrC,CAAC;KACH;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SAChD;KACF;IAED,oBAAoB,MAAK;IAEzB,eAAe,GAAG;QAChB,MAAM,KAAK,GAAG,gBAAgB,CAAC,QAAQ,EAAE,CAAC;QAC1C,MAAM,IAAI,GAAG,KAAK,CAAC,kBAAkB,EAAE,CAAC;QAExC,IAAI,IAAI,EAAE;YACR,MAAM,iBAAiB,GAAG,IAAI,CAAC,gBAAgB,CAAC;YAChD,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC;YACrC,MAAM,mBAAmB,GAAG,KAAK,CAAC,yBAAyB,CAAC,MAAM,IAAI,CAAC,CAAC;YAExE,IAAI,CAAC,aAAa,EAAE,gBAAgB,CAAC,kBAAkB,EAAE;gBACvD,iBAAiB;gBACjB,mBAAmB;gBACnB,WAAW;aACZ,CAAC,CAAC;SACJ;KACF,CAAC;IAEF,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,+BAA+B,IACxC,0DACE,KAAK,EAAC,oCAAoC,EAC1C,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,IAEvC,IAAI,CAAC,WAAW,KACf,4DAAK,KAAK,EAAC,6CAA6C,IACtD,4DACE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,GAAG,EAAE,IAAI,CAAC,WAAW,EACrB,KAAK,EAAC,qCAAqC,GAC3C,CACE,CACP,EACD,4DAAK,KAAK,EAAC,uCAAuC,IAC/C,IAAI,CAAC,KAAK,KACT,0DAAG,KAAK,EAAC,6CAA6C,IACnD,IAAI,CAAC,KAAK,CACT,CACL,EACA,IAAI,CAAC,QAAQ,KACZ,0DAAG,KAAK,EAAC,gDAAgD,IACtD,IAAI,CAAC,QAAQ,CACZ,CACL,CACG,CACJ,CACA,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/searchcraft-popover-list-item/searchcraft-popover-list-item.tsx"],"sourcesContent":["import { searchcraftStore } from '@store';\nimport type {\n  SearchDocument,\n  SearchClientResponseItem,\n  PopoverResultMappings,\n} from '@searchcraft/core';\nimport { Component, h, Prop, State } from '@stencil/core';\nimport { getDocumentValueFromSearchResultMapping } from '@utils';\n\n/**\n * A single list item rendered in a searchcraft-popover-list-view.\n *\n * @internal\n */\n@Component({\n  tag: 'searchcraft-popover-list-item',\n  shadow: false,\n})\nexport class SearchcraftPopoverListItem {\n  @Prop() item: SearchClientResponseItem | undefined;\n  @Prop() popoverResultMappings: PopoverResultMappings | undefined;\n  /** The document position relative to the search results (For Measure) */\n  @Prop() documentPosition = 0;\n\n  @State() title?: string;\n  @State() subtitle?: string;\n  @State() href?: string;\n  @State() imageSource?: string;\n  @State() imageAlt?: string;\n\n  mapValuesFromDocument(document: SearchDocument) {\n    this.title = getDocumentValueFromSearchResultMapping(\n      document,\n      this.popoverResultMappings?.title,\n    );\n    this.subtitle = getDocumentValueFromSearchResultMapping(\n      document,\n      this.popoverResultMappings?.subtitle,\n    );\n    this.href = getDocumentValueFromSearchResultMapping(\n      document,\n      this.popoverResultMappings?.href,\n    );\n    this.imageSource = getDocumentValueFromSearchResultMapping(\n      document,\n      this.popoverResultMappings?.imageSource,\n    );\n    this.imageAlt = getDocumentValueFromSearchResultMapping(\n      document,\n      this.popoverResultMappings?.imageAlt,\n    );\n  }\n\n  connectedCallback() {\n    if (this.item) {\n      this.mapValuesFromDocument(this.item.document);\n    }\n  }\n\n  disconnectedCallback() {}\n\n  handleLinkClick = () => {\n    const state = searchcraftStore.getState();\n    const core = state.getSearchcraftCore();\n\n    if (core) {\n      const document_position = this.documentPosition;\n      const search_term = state.searchTerm;\n      const number_of_documents = state.searchClientResponseItems.length || 0;\n\n      core.measureClient?.sendMeasureEvent('document_clicked', {\n        document_position,\n        number_of_documents,\n        search_term,\n      });\n    }\n  };\n\n  render() {\n    return (\n      <div class='searchcraft-popover-list-item'>\n        <a\n          class='searchcraft-popover-list-item-link'\n          href={this.href}\n          onClick={this.handleLinkClick.bind(this)}\n        >\n          {this.imageSource && (\n            <div class='searchcraft-popover-list-item-image-wrapper'>\n              <img\n                alt={this.imageAlt}\n                src={this.imageSource}\n                class='searchcraft-popover-list-item-image'\n              />\n            </div>\n          )}\n          <div class='searchcraft-popover-list-item-content'>\n            {this.title && (\n              <p class='searchcraft-popover-list-item-content-title'>\n                {this.title}\n              </p>\n            )}\n            {this.subtitle && (\n              <p class='searchcraft-popover-list-item-content-subtitle'>\n                {this.subtitle}\n              </p>\n            )}\n          </div>\n        </a>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-6c471ee0.js","mappings":";;;;;MAkBa,0BAA0B;;;;;IAC7B,IAAI,CAAuC;IAC3C,qBAAqB,CAAoC;;IAEzD,gBAAgB,GAAG,CAAC,CAAC;IAEpB,KAAK,CAAU;IACf,QAAQ,CAAU;IAClB,IAAI,CAAU;IACd,WAAW,CAAU;IACrB,QAAQ,CAAU;IAE3B,qBAAqB,CAAC,QAAwB;QAC5C,IAAI,CAAC,KAAK,GAAG,uCAAuC,CAClD,QAAQ,EACR,IAAI,CAAC,qBAAqB,EAAE,KAAK,CAClC,CAAC;QACF,IAAI,CAAC,QAAQ,GAAG,uCAAuC,CACrD,QAAQ,EACR,IAAI,CAAC,qBAAqB,EAAE,QAAQ,CACrC,CAAC;QACF,IAAI,CAAC,IAAI,GAAG,uCAAuC,CACjD,QAAQ,EACR,IAAI,CAAC,qBAAqB,EAAE,IAAI,CACjC,CAAC;QACF,IAAI,CAAC,WAAW,GAAG,uCAAuC,CACxD,QAAQ,EACR,IAAI,CAAC,qBAAqB,EAAE,WAAW,CACxC,CAAC;QACF,IAAI,CAAC,QAAQ,GAAG,uCAAuC,CACrD,QAAQ,EACR,IAAI,CAAC,qBAAqB,EAAE,QAAQ,CACrC,CAAC;KACH;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SAChD;KACF;IAED,oBAAoB,MAAK;IAEzB,eAAe,GAAG;QAChB,MAAM,KAAK,GAAG,gBAAgB,CAAC,QAAQ,EAAE,CAAC;QAC1C,MAAM,IAAI,GAAG,KAAK,CAAC,kBAAkB,EAAE,CAAC;QAExC,IAAI,IAAI,EAAE;YACR,MAAM,iBAAiB,GAAG,IAAI,CAAC,gBAAgB,CAAC;YAChD,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC;YACrC,MAAM,mBAAmB,GAAG,KAAK,CAAC,yBAAyB,CAAC,MAAM,IAAI,CAAC,CAAC;YAExE,IAAI,CAAC,aAAa,EAAE,gBAAgB,CAAC,kBAAkB,EAAE;gBACvD,iBAAiB;gBACjB,mBAAmB;gBACnB,WAAW;aACZ,CAAC,CAAC;SACJ;KACF,CAAC;IAEF,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,+BAA+B,IACxC,0DACE,KAAK,EAAC,oCAAoC,EAC1C,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,IAEvC,IAAI,CAAC,WAAW,KACf,4DAAK,KAAK,EAAC,6CAA6C,IACtD,4DACE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,GAAG,EAAE,IAAI,CAAC,WAAW,EACrB,KAAK,EAAC,qCAAqC,GAC3C,CACE,CACP,EACD,4DAAK,KAAK,EAAC,uCAAuC,IAC/C,IAAI,CAAC,KAAK,KACT,0DAAG,KAAK,EAAC,6CAA6C,IACnD,IAAI,CAAC,KAAK,CACT,CACL,EACA,IAAI,CAAC,QAAQ,KACZ,0DAAG,KAAK,EAAC,gDAAgD,IACtD,IAAI,CAAC,QAAQ,CACZ,CACL,CACG,CACJ,CACA,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/searchcraft-popover-list-item/searchcraft-popover-list-item.tsx"],"sourcesContent":["import { searchcraftStore } from '@store';\nimport type {\n  SearchDocument,\n  SearchClientResponseItem,\n  PopoverResultMappings,\n} from '@searchcraft/core';\nimport { Component, h, Prop, State } from '@stencil/core';\nimport { getDocumentValueFromSearchResultMapping } from '@utils';\n\n/**\n * A single list item rendered in a searchcraft-popover-list-view.\n *\n * @internal\n */\n@Component({\n  tag: 'searchcraft-popover-list-item',\n  shadow: false,\n})\nexport class SearchcraftPopoverListItem {\n  @Prop() item: SearchClientResponseItem | undefined;\n  @Prop() popoverResultMappings: PopoverResultMappings | undefined;\n  /** The document position relative to the search results (For Measure) */\n  @Prop() documentPosition = 0;\n\n  @State() title?: string;\n  @State() subtitle?: string;\n  @State() href?: string;\n  @State() imageSource?: string;\n  @State() imageAlt?: string;\n\n  mapValuesFromDocument(document: SearchDocument) {\n    this.title = getDocumentValueFromSearchResultMapping(\n      document,\n      this.popoverResultMappings?.title,\n    );\n    this.subtitle = getDocumentValueFromSearchResultMapping(\n      document,\n      this.popoverResultMappings?.subtitle,\n    );\n    this.href = getDocumentValueFromSearchResultMapping(\n      document,\n      this.popoverResultMappings?.href,\n    );\n    this.imageSource = getDocumentValueFromSearchResultMapping(\n      document,\n      this.popoverResultMappings?.imageSource,\n    );\n    this.imageAlt = getDocumentValueFromSearchResultMapping(\n      document,\n      this.popoverResultMappings?.imageAlt,\n    );\n  }\n\n  connectedCallback() {\n    if (this.item) {\n      this.mapValuesFromDocument(this.item.document);\n    }\n  }\n\n  disconnectedCallback() {}\n\n  handleLinkClick = () => {\n    const state = searchcraftStore.getState();\n    const core = state.getSearchcraftCore();\n\n    if (core) {\n      const document_position = this.documentPosition;\n      const search_term = state.searchTerm;\n      const number_of_documents = state.searchClientResponseItems.length || 0;\n\n      core.measureClient?.sendMeasureEvent('document_clicked', {\n        document_position,\n        number_of_documents,\n        search_term,\n      });\n    }\n  };\n\n  render() {\n    return (\n      <div class='searchcraft-popover-list-item'>\n        <a\n          class='searchcraft-popover-list-item-link'\n          href={this.href}\n          onClick={this.handleLinkClick.bind(this)}\n        >\n          {this.imageSource && (\n            <div class='searchcraft-popover-list-item-image-wrapper'>\n              <img\n                alt={this.imageAlt}\n                src={this.imageSource}\n                class='searchcraft-popover-list-item-image'\n              />\n            </div>\n          )}\n          <div class='searchcraft-popover-list-item-content'>\n            {this.title && (\n              <p class='searchcraft-popover-list-item-content-title'>\n                {this.title}\n              </p>\n            )}\n            {this.subtitle && (\n              <p class='searchcraft-popover-list-item-content-subtitle'>\n                {this.subtitle}\n              </p>\n            )}\n          </div>\n        </a>\n      </div>\n    );\n  }\n}\n"],"version":3}