@searchcraft/javascript-sdk 0.5.3 → 0.7.0

package/dist/collection/components/searchcraft-base-search-result/searchcraft-base-search-result.js

@@ -1,7 +1,24 @@
 import { useSearchcraftStore } from "../../provider/store";
 import { Fragment, h } from "@stencil/core";
+/**
+ * This web component is designed to display detailed information for a single search result.
+ * Once a query is submitted, the component formats and presents the result.
+ * It is consumed within the `searchcraft-base-search-results` component.
+ */
 export class SearchcraftBaseSearchResult {
     constructor() {
+        /**
+         * Where to open the link for the button rendered when containerHref is not present.
+         */
+        this.buttonTarget = '_blank';
+        /**
+         * Where to open the link for the containing element.
+         */
+        this.containerTarget = '_blank';
+        /**
+         * The position in the document. Used with the "document_clicked" measure event.
+         */
+        this.documentPosition = 0;
         this.searchcraftStore = useSearchcraftStore.getState();
         this.recordMeasureEvent = () => {
             var _a, _b, _c;
@@ -29,22 +46,6 @@ export class SearchcraftBaseSearchResult {
             }
             return {};
         };
-        this.titleContent = undefined;
-        this.subtitleContent = undefined;
-        this.bodyContent = undefined;
-        this.footerContent = undefined;
-        this.buttonLabel = undefined;
-        this.buttonHref = undefined;
-        this.buttonTarget = '_blank';
-        this.buttonRel = undefined;
-        this.containerHref = undefined;
-        this.containerTarget = '_blank';
-        this.containerRel = undefined;
-        this.imageSrc = undefined;
-        this.imageAlt = undefined;
-        this.imagePlacement = undefined;
-        this.customStyles = undefined;
-        this.documentPosition = 0;
     }
     render() {
         const styles = this.parseStyles();
@@ -82,8 +83,10 @@ export class SearchcraftBaseSearchResult {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The title content."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "title-content",
                 "reflect": false
             },
@@ -99,8 +102,10 @@ export class SearchcraftBaseSearchResult {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The subtitle content."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "subtitle-content",
                 "reflect": false
             },
@@ -116,8 +121,10 @@ export class SearchcraftBaseSearchResult {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The body content."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "body-content",
                 "reflect": false
             },
@@ -133,8 +140,10 @@ export class SearchcraftBaseSearchResult {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The footer content."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "footer-content",
                 "reflect": false
             },
@@ -150,8 +159,10 @@ export class SearchcraftBaseSearchResult {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The label for the button rendered when containerHref is not present."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "button-label",
                 "reflect": false
             },
@@ -167,8 +178,10 @@ export class SearchcraftBaseSearchResult {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The link for the button rendered when containerHref is not present."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "button-href",
                 "reflect": false
             },
@@ -184,8 +197,10 @@ export class SearchcraftBaseSearchResult {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Where to open the link for the button rendered when containerHref is not present."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "button-target",
                 "reflect": false,
                 "defaultValue": "'_blank'"
@@ -202,8 +217,10 @@ export class SearchcraftBaseSearchResult {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The relationship between the current document and the link for the button rendered when containerHref is not present."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "button-rel",
                 "reflect": false
             },
@@ -219,8 +236,10 @@ export class SearchcraftBaseSearchResult {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The link for the containing element."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "container-href",
                 "reflect": false
             },
@@ -236,8 +255,10 @@ export class SearchcraftBaseSearchResult {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Where to open the link for the containing element."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "container-target",
                 "reflect": false,
                 "defaultValue": "'_blank'"
@@ -254,8 +275,10 @@ export class SearchcraftBaseSearchResult {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The relationship between the current document and the link for the containing element."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "container-rel",
                 "reflect": false
             },
@@ -271,8 +294,10 @@ export class SearchcraftBaseSearchResult {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The image source."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "image-src",
                 "reflect": false
             },
@@ -288,8 +313,10 @@ export class SearchcraftBaseSearchResult {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The image alternative text."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "image-alt",
                 "reflect": false
             },
@@ -305,8 +332,10 @@ export class SearchcraftBaseSearchResult {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The placement of the image."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "image-placement",
                 "reflect": false
             },
@@ -322,8 +351,10 @@ export class SearchcraftBaseSearchResult {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "A custom styles object."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "custom-styles",
                 "reflect": false
             },
@@ -339,8 +370,10 @@ export class SearchcraftBaseSearchResult {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The position in the document. Used with the \"document_clicked\" measure event."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "document-position",
                 "reflect": false,
                 "defaultValue": "0"

package/dist/collection/components/searchcraft-base-search-result/searchcraft-base-search-result.js.map

@@ -1 +1 @@
-{"version":3,"file":"searchcraft-base-search-result.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-base-search-result/searchcraft-base-search-result.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useSearchcraftStore } from '@provider/store';\nimport { Component, Fragment, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'searchcraft-base-search-result',\n  styleUrl: 'searchcraft-base-search-result.module.scss',\n  shadow: false,\n})\nexport class SearchcraftBaseSearchResult {\n  @Prop() titleContent: string | undefined;\n  @Prop() subtitleContent: string | undefined;\n  @Prop() bodyContent: string | undefined;\n  @Prop() footerContent: string | undefined;\n  @Prop() buttonLabel: string | undefined;\n  @Prop() buttonHref: string | undefined;\n  @Prop() buttonTarget: '_blank' | '_self' | '_top' | '_parent' = '_blank';\n  @Prop() buttonRel: 'noreferrer' | 'noopener' | 'nofollow' | undefined;\n  @Prop() containerHref: string | undefined;\n  @Prop() containerTarget: '_blank' | '_self' | '_top' | '_parent' = '_blank';\n  @Prop() containerRel: 'noreferrer' | 'noopener' | 'nofollow' | undefined;\n  @Prop() imageSrc: string | undefined;\n  @Prop() imageAlt: string | undefined;\n  @Prop() imagePlacement: 'left' | 'right';\n  @Prop() customStyles: string | undefined;\n  @Prop() documentPosition = 0;\n\n  private searchcraftStore = useSearchcraftStore.getState();\n\n  private recordMeasureEvent = () => {\n    const searchcraft = this.searchcraftStore.getSearchcraftInstance();\n\n    if (searchcraft) {\n      const document_position = this.documentPosition;\n      const search_term = this.searchcraftStore.query;\n      const number_of_documents =\n        this.searchcraftStore.searchResults?.data?.hits?.length || 0;\n\n      searchcraft.sendMeasureEvent('document_clicked', {\n        document_position,\n        number_of_documents,\n        search_term,\n      });\n    }\n  };\n\n  private parseStyles = (): Record<string, { [key: string]: string }> => {\n    if (this.customStyles) {\n      try {\n        return JSON.parse(this.customStyles);\n      } catch (error) {\n        console.error('Error parsing custom styles:', error);\n        return {};\n      }\n    }\n    return {};\n  };\n\n  render() {\n    const styles = this.parseStyles();\n    const imageContainer = this.imageSrc && (\n      <img\n        alt={this.imageAlt}\n        class='searchcraft-search-result-image'\n        src={this.imageSrc}\n        style={styles.image || {}}\n      />\n    );\n\n    const contentContainer = (\n      <Fragment>\n        {this.imageSrc && this.imagePlacement === 'left' && imageContainer}\n        <div class='searchcraft-base-search-result-content-container'>\n          {this.titleContent && (\n            <h2\n              class='searchcraft-base-search-result-title'\n              style={styles.title || {}}\n            >\n              {this.titleContent}\n            </h2>\n          )}\n          {this.subtitleContent && (\n            <h3\n              class='searchcraft-base-search-result-subtitle'\n              style={styles.subtitle || {}}\n            >\n              {this.subtitleContent}\n            </h3>\n          )}\n          {this.bodyContent && (\n            <p\n              class='searchcraft-base-search-result-body-content'\n              style={styles.primaryContent || {}}\n            >\n              {this.bodyContent}\n            </p>\n          )}\n\n          {this.footerContent && (\n            <p\n              class='searchcraft-base-search-result-footer-content'\n              style={styles.secondaryContent || {}}\n            >\n              {this.footerContent}\n            </p>\n          )}\n          {this.buttonHref && !this.containerHref && this.buttonLabel && (\n            <a\n              class='searchcraft-search-result-button'\n              href={this.buttonHref}\n              style={styles.button || {}}\n              target={this.buttonTarget}\n              rel={this.buttonRel}\n            >\n              {this.buttonLabel}\n            </a>\n          )}\n        </div>\n        {this.imageSrc && this.imagePlacement === 'right' && imageContainer}\n      </Fragment>\n    );\n\n    /** Render as an anchor tag if the containerHref prop is present. */\n    if (this.containerHref) {\n      return (\n        <a\n          class='searchcraft-search-result-container'\n          onClick={this.recordMeasureEvent}\n          href={this.containerHref}\n          rel={this.containerRel}\n          style={styles.container || {}}\n          tabindex='0'\n          target={this.containerTarget}\n        >\n          {contentContainer}\n        </a>\n      );\n    }\n\n    /** Render as a div if no href prop. */\n    return (\n      <div\n        class='searchcraft-search-result-container'\n        style={styles.container || {}}\n      >\n        {contentContainer}\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"searchcraft-base-search-result.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-base-search-result/searchcraft-base-search-result.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useSearchcraftStore } from '@provider/store';\nimport { Component, Fragment, h, Prop } from '@stencil/core';\n\n/**\n * This web component is designed to display detailed information for a single search result.\n * Once a query is submitted, the component formats and presents the result.\n * It is consumed within the `searchcraft-base-search-results` component.\n */\n@Component({\n  tag: 'searchcraft-base-search-result',\n  styleUrl: 'searchcraft-base-search-result.module.scss',\n  shadow: false,\n})\nexport class SearchcraftBaseSearchResult {\n  /**\n   * The title content.\n   */\n  @Prop() titleContent: string | undefined;\n  /**\n   * The subtitle content.\n   */\n  @Prop() subtitleContent: string | undefined;\n  /**\n   * The body content.\n   */\n  @Prop() bodyContent: string | undefined;\n  /**\n   * The footer content.\n   */\n  @Prop() footerContent: string | undefined;\n  /**\n   * The label for the button rendered when containerHref is not present.\n   */\n  @Prop() buttonLabel: string | undefined;\n  /**\n   * The link for the button rendered when containerHref is not present.\n   */\n  @Prop() buttonHref: string | undefined;\n  /**\n   * Where to open the link for the button rendered when containerHref is not present.\n   */\n  @Prop() buttonTarget: '_blank' | '_self' | '_top' | '_parent' = '_blank';\n  /**\n   * The relationship between the current document and the link for the button rendered when containerHref is not present.\n   */\n  @Prop() buttonRel: 'noreferrer' | 'noopener' | 'nofollow' | undefined;\n  /**\n   * The link for the containing element.\n   */\n  @Prop() containerHref: string | undefined;\n  /**\n   * Where to open the link for the containing element.\n   */\n  @Prop() containerTarget: '_blank' | '_self' | '_top' | '_parent' = '_blank';\n  /**\n   * The relationship between the current document and the link for the containing element.\n   */\n  @Prop() containerRel: 'noreferrer' | 'noopener' | 'nofollow' | undefined;\n  /**\n   * The image source.\n   */\n  @Prop() imageSrc: string | undefined;\n  /**\n   * The image alternative text.\n   */\n  @Prop() imageAlt: string | undefined;\n  /**\n   * The placement of the image.\n   */\n  @Prop() imagePlacement: 'left' | 'right';\n  /**\n   * A custom styles object.\n   */\n  @Prop() customStyles: string | undefined;\n  /**\n   * The position in the document. Used with the \"document_clicked\" measure event.\n   */\n  @Prop() documentPosition = 0;\n\n  private searchcraftStore = useSearchcraftStore.getState();\n\n  private recordMeasureEvent = () => {\n    const searchcraft = this.searchcraftStore.getSearchcraftInstance();\n\n    if (searchcraft) {\n      const document_position = this.documentPosition;\n      const search_term = this.searchcraftStore.query;\n      const number_of_documents =\n        this.searchcraftStore.searchResults?.data?.hits?.length || 0;\n\n      searchcraft.sendMeasureEvent('document_clicked', {\n        document_position,\n        number_of_documents,\n        search_term,\n      });\n    }\n  };\n\n  private parseStyles = (): Record<string, { [key: string]: string }> => {\n    if (this.customStyles) {\n      try {\n        return JSON.parse(this.customStyles);\n      } catch (error) {\n        console.error('Error parsing custom styles:', error);\n        return {};\n      }\n    }\n    return {};\n  };\n\n  render() {\n    const styles = this.parseStyles();\n    const imageContainer = this.imageSrc && (\n      <img\n        alt={this.imageAlt}\n        class='searchcraft-search-result-image'\n        src={this.imageSrc}\n        style={styles.image || {}}\n      />\n    );\n\n    const contentContainer = (\n      <Fragment>\n        {this.imageSrc && this.imagePlacement === 'left' && imageContainer}\n        <div class='searchcraft-base-search-result-content-container'>\n          {this.titleContent && (\n            <h2\n              class='searchcraft-base-search-result-title'\n              style={styles.title || {}}\n            >\n              {this.titleContent}\n            </h2>\n          )}\n          {this.subtitleContent && (\n            <h3\n              class='searchcraft-base-search-result-subtitle'\n              style={styles.subtitle || {}}\n            >\n              {this.subtitleContent}\n            </h3>\n          )}\n          {this.bodyContent && (\n            <p\n              class='searchcraft-base-search-result-body-content'\n              style={styles.primaryContent || {}}\n            >\n              {this.bodyContent}\n            </p>\n          )}\n\n          {this.footerContent && (\n            <p\n              class='searchcraft-base-search-result-footer-content'\n              style={styles.secondaryContent || {}}\n            >\n              {this.footerContent}\n            </p>\n          )}\n          {this.buttonHref && !this.containerHref && this.buttonLabel && (\n            <a\n              class='searchcraft-search-result-button'\n              href={this.buttonHref}\n              style={styles.button || {}}\n              target={this.buttonTarget}\n              rel={this.buttonRel}\n            >\n              {this.buttonLabel}\n            </a>\n          )}\n        </div>\n        {this.imageSrc && this.imagePlacement === 'right' && imageContainer}\n      </Fragment>\n    );\n\n    /** Render as an anchor tag if the containerHref prop is present. */\n    if (this.containerHref) {\n      return (\n        <a\n          class='searchcraft-search-result-container'\n          onClick={this.recordMeasureEvent}\n          href={this.containerHref}\n          rel={this.containerRel}\n          style={styles.container || {}}\n          tabindex='0'\n          target={this.containerTarget}\n        >\n          {contentContainer}\n        </a>\n      );\n    }\n\n    /** Render as a div if no href prop. */\n    return (\n      <div\n        class='searchcraft-search-result-container'\n        style={styles.container || {}}\n      >\n        {contentContainer}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/searchcraft-base-search-result/searchcraft-base-search-result.module.css

@@ -1,12 +1,53 @@
+/** Appearance & Layout */
 :root {
-  /** Appearance & Layout */
-  --sc-spinner-size: 20px;
+  /**
+   * Border radius of the input form element.
+   */
   --sc-input-border-radius: 8px;
+  /**
+   * Icon size of the "magnifying glass" icon rendered in the input form.
+   */
   --sc-input-search-icon-size: 20px;
+  /**
+   * Icon size of the `x` button rendered in the input form.
+   */
   --sc-input-clear-icon-size: 20px;
+  /**
+   * Padding on the left side of the input form.
+   */
   --sc-input-padding-left: 44px;
+  /**
+   * Padding on the right side of the input form.
+   */
   --sc-input-padding-right: 44px;
+  /**
+   * Border radius applied to result images.
+   */
   --sc-image-border-radius: 8px;
+  /**
+   * Border radius applied to popover form containers.
+   */
+  --sc-popover-form-border-radius: 8px;
+  /**
+   * Height of the list view/results container portion of the popover form.
+   */
+  --sc-popover-list-view-height: 400px;
+  /**
+   * Size of images of list view items in the popoer list view.
+   */
+  --sc-popover-list-item-image-size: 60px;
+  /**
+   * Horizontal padding of popover list items.
+   */
+  --sc-popover-list-item-padding-horizontal: 8px;
+  /**
+   * Vertical padding of popover list items.
+   */
+  --sc-popover-list-item-padding-vertical: 8px;
+  /**
+   * Maximum width of popover forms of type `modal`.
+   */
+  --sc-popover-modal-max-width: 570px;
 }
 
 :root {
@@ -97,6 +138,15 @@
   --sc-body-small-font-weight: 400;
 }
 
+/**
+* Variables that need to be part of the preprocessor can go here.
+*/
+:root {
+  --sc-breakpoint-sm: 576px;
+  --sc-breakpoint-md: 768px;
+  --sc-breakpoint-lg: 992px;
+}
+
 .searchcraft-search-result-container {
   all: unset;
   align-items: flex-start;
@@ -108,7 +158,7 @@
   color: inherit;
   background-color: var(--sc-surface-neutral-primary);
 }
-@media (min-width: 900px) {
+@media (min-width: 768px) {
   .searchcraft-search-result-container {
     flex-direction: row;
   }
@@ -130,7 +180,7 @@ a.searchcraft-search-result-container {
   border-radius: var(--sc-image-border-radius);
   width: 100%;
 }
-@media (min-width: 900px) {
+@media (min-width: 768px) {
   .searchcraft-search-result-image {
     width: 200px;
   }

package/dist/collection/components/searchcraft-base-search-results/searchcraft-base-search-results.js

@@ -1,19 +1,64 @@
 import { h, } from "@stencil/core";
 import { useSearchcraftStore } from "../../provider/store";
-import { getDocumentValueFromSearchResultMapping, serializeStyles, } from "../../utils/utils";
+import { getDocumentValueFromSearchResultMapping, serializeStyles, } from "../../utils/index";
+/**
+ * This web component is responsible for displaying the results of a search query.
+ * Once a query is submitted, the component formats and presents an ordered list of the results.
+ *
+ * ## Usage
+ * ```html
+ * <!-- index.html -->
+ * <searchcraft-base-search-results
+ *   ad-interval="4"
+ *   place-ad-at-start="false"
+ *   result-image-placement="right"
+ * />
+ * ```
+ *
+ * ```js
+ * // index.js
+ * const baseSearchResults = document.querySelector('searchcraft-base-search-results');
+ *
+ * baseSearchResults.searchResultMappings = containerHref: {
+ *   fieldNames: [
+ *    {
+ *      fieldName: 'canonical_link',
+ *      dataType: 'text',
+ *    },
+ *  ],
+ * };
+ *
+ * baseSearchResults.addEventListener('noResults', () => {
+ *   console.log('No search results found');
+ * });
+ * ```
+ */
 export class SearchcraftBaseSearchResults {
     constructor() {
+        /**
+         * How often ads are injected.
+         */
         this.adInterval = 4;
-        this.customStylesForResults = undefined;
-        this.searchResultMappings = undefined;
+        /**
+         * Should an ad be placed at the end of the results.
+         */
         this.placeAdAtEnd = false;
+        /**
+         * Should an ad be placed at the start of the results.
+         */
         this.placeAdAtStart = true;
+        /**
+         * The placement of the image for each result.
+         */
         this.resultImagePlacement = 'right';
-        this.buttonLabel = undefined;
+        /**
+         * Where to open the link for the button rendered when containerHref is not present for each result.
+         */
         this.buttonTarget = '_blank';
-        this.buttonRel = undefined;
+        /**
+         * Where to open the link for the containing element for each result.
+         */
         this.containerTarget = '_blank';
-        this.containerRel = undefined;
         this.hasSearched = false;
         this.query = '';
         this.searchResults = null;
@@ -116,8 +161,10 @@ export class SearchcraftBaseSearchResults {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "How often ads are injected."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "ad-interval",
                 "reflect": false,
                 "defaultValue": "4"
@@ -139,8 +186,10 @@ export class SearchcraftBaseSearchResults {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "A custom styles object."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "custom-styles-for-results",
                 "reflect": false
             },
@@ -162,8 +211,10 @@ export class SearchcraftBaseSearchResults {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
-                }
+                    "text": "Formats the content rendered for each result."
+                },
+                "getter": false,
+                "setter": false
             },
             "placeAdAtEnd": {
                 "type": "boolean",
@@ -177,8 +228,10 @@ export class SearchcraftBaseSearchResults {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Should an ad be placed at the end of the results."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "place-ad-at-end",
                 "reflect": false,
                 "defaultValue": "false"
@@ -195,8 +248,10 @@ export class SearchcraftBaseSearchResults {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Should an ad be placed at the start of the results."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "place-ad-at-start",
                 "reflect": false,
                 "defaultValue": "true"
@@ -213,8 +268,10 @@ export class SearchcraftBaseSearchResults {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The placement of the image for each result."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "result-image-placement",
                 "reflect": false,
                 "defaultValue": "'right'"
@@ -231,8 +288,10 @@ export class SearchcraftBaseSearchResults {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The label for the button rendered when containerHref is not present for each result."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "button-label",
                 "reflect": false
             },
@@ -248,8 +307,10 @@ export class SearchcraftBaseSearchResults {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Where to open the link for the button rendered when containerHref is not present for each result."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "button-target",
                 "reflect": false,
                 "defaultValue": "'_blank'"
@@ -266,8 +327,10 @@ export class SearchcraftBaseSearchResults {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The relationship between the current document and the link for the button rendered when containerHref is not present for each result."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "button-rel",
                 "reflect": false
             },
@@ -283,8 +346,10 @@ export class SearchcraftBaseSearchResults {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Where to open the link for the containing element for each result."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "container-target",
                 "reflect": false,
                 "defaultValue": "'_blank'"
@@ -301,8 +366,10 @@ export class SearchcraftBaseSearchResults {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The relationship between the current document and the link for the containing element for each result."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "container-rel",
                 "reflect": false
             }
@@ -324,7 +391,7 @@ export class SearchcraftBaseSearchResults {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "When no results are returned."
                 },
                 "complexType": {
                     "original": "void",

package/dist/collection/components/searchcraft-base-search-results/searchcraft-base-search-results.js.map

@@ -1 +1 @@
-{"version":3,"file":"searchcraft-base-search-results.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-base-search-results/searchcraft-base-search-results.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Event,\n  Prop,\n  State,\n  type EventEmitter,\n} from '@stencil/core';\n\nimport type { SearchcraftResponse } from '@searchcraft/core';\n\nimport { useSearchcraftStore } from '@provider/store';\n\nimport {\n  getDocumentValueFromSearchResultMapping,\n  serializeStyles,\n} from '@utils/utils';\nimport type { SearchResultMappings } from 'types';\n\n@Component({\n  tag: 'searchcraft-base-search-results',\n  styleUrl: 'searchcraft-base-search-results.module.scss',\n  shadow: false,\n})\nexport class SearchcraftBaseSearchResults {\n  @Prop() adInterval = 4;\n  @Prop() customStylesForResults:\n    | string\n    | Record<string, Record<string, string>>\n    | undefined;\n  @Prop() searchResultMappings: SearchResultMappings | undefined;\n  @Prop() placeAdAtEnd = false;\n  @Prop() placeAdAtStart = true;\n  @Prop() resultImagePlacement: 'left' | 'right' = 'right';\n  @Prop() buttonLabel: string | undefined;\n  @Prop() buttonTarget: '_blank' | '_self' | '_top' | '_parent' = '_blank';\n  @Prop() buttonRel: 'noreferrer' | 'noopener' | 'nofollow' | undefined;\n  @Prop() containerTarget: '_blank' | '_self' | '_top' | '_parent' = '_blank';\n  @Prop() containerRel: 'noreferrer' | 'noopener' | 'nofollow' | undefined;\n\n  @Event() noResults: EventEmitter<void>;\n\n  @State() hasSearched = false;\n  @State() query = '';\n  @State() searchResults: SearchcraftResponse | null = null;\n\n  private unsubscribe: () => void;\n\n  componentDidLoad() {\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      if (state.query.length > 0) {\n        this.hasSearched = true;\n      } else {\n        this.hasSearched = false;\n      }\n      this.searchResults = { ...state.searchResults };\n      this.query = state.query;\n    });\n\n    const { searchResults, query } = useSearchcraftStore.getState();\n    this.searchResults = searchResults;\n    this.query = query;\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribe) {\n      this.unsubscribe();\n    }\n  }\n\n  renderDocument(document: Record<string, unknown>, index: number) {\n    /**\n     * Index field values -> Result container props mappings.\n     */\n    const titleContent = getDocumentValueFromSearchResultMapping(\n      document,\n      this.searchResultMappings.title,\n    );\n    const subtitleContent = getDocumentValueFromSearchResultMapping(\n      document,\n      this.searchResultMappings.subtitle,\n    );\n    const bodyContent = getDocumentValueFromSearchResultMapping(\n      document,\n      this.searchResultMappings.body,\n    );\n    const containerHref = getDocumentValueFromSearchResultMapping(\n      document,\n      this.searchResultMappings.containerHref,\n    );\n    const buttonHref = getDocumentValueFromSearchResultMapping(\n      document,\n      this.searchResultMappings.buttonHref,\n    );\n    const imageSource = getDocumentValueFromSearchResultMapping(\n      document,\n      this.searchResultMappings.imageSource,\n    );\n    const footerContent = getDocumentValueFromSearchResultMapping(\n      document,\n      this.searchResultMappings.footer,\n    );\n\n    const serializedStyles =\n      typeof this.customStylesForResults === 'string'\n        ? this.customStylesForResults\n        : serializeStyles(this.customStylesForResults);\n\n    return (\n      <searchcraft-base-search-result\n        key={`${document.document_id}-${index}`}\n        custom-styles={serializedStyles}\n        image-placement={this.resultImagePlacement}\n        container-rel={this.containerRel}\n        container-target={this.containerTarget}\n        button-label={this.buttonLabel || 'View more'}\n        button-rel={this.buttonRel}\n        button-target={this.buttonTarget}\n        document-position={index}\n        title-content={titleContent}\n        subtitle-content={subtitleContent}\n        body-content={bodyContent}\n        footer-content={footerContent}\n        container-href={containerHref}\n        button-href={buttonHref}\n        image-src={imageSource}\n      />\n    );\n  }\n\n  render() {\n    if (this.query.trim() === '') {\n      return (\n        <div class='searchcraft-search-results-empty-state-container'>\n          <slot name='empty-search' />\n        </div>\n      );\n    }\n\n    if (!this.searchResults?.data) {\n      return;\n    }\n\n    const documents: Record<string, unknown>[] =\n      this.searchResults?.data?.hits?.map((data, _index) => {\n        const { doc: result } = data;\n        return result;\n      });\n\n    const finalComponents: JSX.Element[] = [];\n\n    if (this.placeAdAtStart) {\n      finalComponents.push(\n        <div key='ad-section-start' class='searchcraft-ad-section'>\n          <p>Ad Section</p>\n        </div>,\n      );\n    }\n\n    if (this.adInterval > 0) {\n      documents.forEach((document, index) => {\n        finalComponents.push(this.renderDocument(document, index));\n\n        if ((index + 1) % this.adInterval === 0) {\n          finalComponents.push(\n            <div\n              key={`ad-section-${index + 1}`}\n              class='searchcraft-ad-section '\n            >\n              <p>Ad Section</p>\n            </div>,\n          );\n        }\n      });\n    } else {\n      const documentElements = documents.map((document, index) =>\n        this.renderDocument(document, index),\n      );\n      finalComponents.push(...documentElements);\n    }\n\n    if (this.placeAdAtEnd) {\n      finalComponents.push(\n        <div key='ad-section-end' class='searchcraft-ad-section'>\n          <p>Ad Section</p>\n        </div>,\n      );\n    }\n\n    if (this.query.length > 0 && this.searchResults?.data?.hits?.length === 0) {\n      this.noResults.emit();\n    }\n\n    return (\n      <div class='searchcraft-search-results-container'>\n        {finalComponents}\n        {this.query.length > 0 &&\n          this.searchResults?.data?.hits?.length === 0 && (\n            <div class='searchcraft-search-results-error-message-container'>\n              <searchcraft-error-message\n                error-message={`No search results found for \"${this.query}\" query`}\n              />\n            </div>\n          )}\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"searchcraft-base-search-results.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-base-search-results/searchcraft-base-search-results.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Event,\n  Prop,\n  State,\n  type EventEmitter,\n} from '@stencil/core';\n\nimport type { SearchcraftResponse } from '@searchcraft/core';\n\nimport { useSearchcraftStore } from '@provider/store';\n\nimport {\n  getDocumentValueFromSearchResultMapping,\n  serializeStyles,\n} from '@utils';\nimport type { SearchResultMappings } from 'types';\n\n/**\n * This web component is responsible for displaying the results of a search query.\n * Once a query is submitted, the component formats and presents an ordered list of the results.\n *\n * ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-base-search-results\n *   ad-interval=\"4\"\n *   place-ad-at-start=\"false\"\n *   result-image-placement=\"right\"\n * />\n * ```\n *\n * ```js\n * // index.js\n * const baseSearchResults = document.querySelector('searchcraft-base-search-results');\n *\n * baseSearchResults.searchResultMappings = containerHref: {\n *   fieldNames: [\n *    {\n *      fieldName: 'canonical_link',\n *      dataType: 'text',\n *    },\n *  ],\n * };\n *\n * baseSearchResults.addEventListener('noResults', () => {\n *   console.log('No search results found');\n * });\n * ```\n */\n@Component({\n  tag: 'searchcraft-base-search-results',\n  styleUrl: 'searchcraft-base-search-results.module.scss',\n  shadow: false,\n})\nexport class SearchcraftBaseSearchResults {\n  /**\n   * How often ads are injected.\n   */\n  @Prop() adInterval = 4;\n  /**\n   * A custom styles object.\n   */\n  @Prop() customStylesForResults:\n    | string\n    | Record<string, Record<string, string>>\n    | undefined;\n  /**\n   * Formats the content rendered for each result.\n   */\n  @Prop() searchResultMappings: SearchResultMappings | undefined;\n  /**\n   * Should an ad be placed at the end of the results.\n   */\n  @Prop() placeAdAtEnd = false;\n  /**\n   * Should an ad be placed at the start of the results.\n   */\n  @Prop() placeAdAtStart = true;\n  /**\n   * The placement of the image for each result.\n   */\n  @Prop() resultImagePlacement: 'left' | 'right' = 'right';\n  /**\n   * The label for the button rendered when containerHref is not present for each result.\n   */\n  @Prop() buttonLabel: string | undefined;\n  /**\n   * Where to open the link for the button rendered when containerHref is not present for each result.\n   */\n  @Prop() buttonTarget: '_blank' | '_self' | '_top' | '_parent' = '_blank';\n  /**\n   * The relationship between the current document and the link for the button rendered when containerHref is not present for each result.\n   */\n  @Prop() buttonRel: 'noreferrer' | 'noopener' | 'nofollow' | undefined;\n  /**\n   * Where to open the link for the containing element for each result.\n   */\n  @Prop() containerTarget: '_blank' | '_self' | '_top' | '_parent' = '_blank';\n  /**\n   * The relationship between the current document and the link for the containing element for each result.\n   */\n  @Prop() containerRel: 'noreferrer' | 'noopener' | 'nofollow' | undefined;\n\n  /**\n   * When no results are returned.\n   */\n  @Event() noResults: EventEmitter<void>;\n\n  @State() hasSearched = false;\n  @State() query = '';\n  @State() searchResults: SearchcraftResponse | null = null;\n\n  private unsubscribe: () => void;\n\n  componentDidLoad() {\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      if (state.query.length > 0) {\n        this.hasSearched = true;\n      } else {\n        this.hasSearched = false;\n      }\n      this.searchResults = { ...state.searchResults };\n      this.query = state.query;\n    });\n\n    const { searchResults, query } = useSearchcraftStore.getState();\n    this.searchResults = searchResults;\n    this.query = query;\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribe) {\n      this.unsubscribe();\n    }\n  }\n\n  renderDocument(document: Record<string, unknown>, index: number) {\n    /**\n     * Index field values -> Result container props mappings.\n     */\n    const titleContent = getDocumentValueFromSearchResultMapping(\n      document,\n      this.searchResultMappings.title,\n    );\n    const subtitleContent = getDocumentValueFromSearchResultMapping(\n      document,\n      this.searchResultMappings.subtitle,\n    );\n    const bodyContent = getDocumentValueFromSearchResultMapping(\n      document,\n      this.searchResultMappings.body,\n    );\n    const containerHref = getDocumentValueFromSearchResultMapping(\n      document,\n      this.searchResultMappings.containerHref,\n    );\n    const buttonHref = getDocumentValueFromSearchResultMapping(\n      document,\n      this.searchResultMappings.buttonHref,\n    );\n    const imageSource = getDocumentValueFromSearchResultMapping(\n      document,\n      this.searchResultMappings.imageSource,\n    );\n    const footerContent = getDocumentValueFromSearchResultMapping(\n      document,\n      this.searchResultMappings.footer,\n    );\n\n    const serializedStyles =\n      typeof this.customStylesForResults === 'string'\n        ? this.customStylesForResults\n        : serializeStyles(this.customStylesForResults);\n\n    return (\n      <searchcraft-base-search-result\n        key={`${document.document_id}-${index}`}\n        custom-styles={serializedStyles}\n        image-placement={this.resultImagePlacement}\n        container-rel={this.containerRel}\n        container-target={this.containerTarget}\n        button-label={this.buttonLabel || 'View more'}\n        button-rel={this.buttonRel}\n        button-target={this.buttonTarget}\n        document-position={index}\n        title-content={titleContent}\n        subtitle-content={subtitleContent}\n        body-content={bodyContent}\n        footer-content={footerContent}\n        container-href={containerHref}\n        button-href={buttonHref}\n        image-src={imageSource}\n      />\n    );\n  }\n\n  render() {\n    if (this.query.trim() === '') {\n      return (\n        <div class='searchcraft-search-results-empty-state-container'>\n          <slot name='empty-search' />\n        </div>\n      );\n    }\n\n    if (!this.searchResults?.data) {\n      return;\n    }\n\n    const documents: Record<string, unknown>[] =\n      this.searchResults?.data?.hits?.map((data, _index) => {\n        const { doc: result } = data;\n        return result;\n      });\n\n    const finalComponents: JSX.Element[] = [];\n\n    if (this.placeAdAtStart) {\n      finalComponents.push(\n        <div key='ad-section-start' class='searchcraft-ad-section'>\n          <p>Ad Section</p>\n        </div>,\n      );\n    }\n\n    if (this.adInterval > 0) {\n      documents.forEach((document, index) => {\n        finalComponents.push(this.renderDocument(document, index));\n\n        if ((index + 1) % this.adInterval === 0) {\n          finalComponents.push(\n            <div\n              key={`ad-section-${index + 1}`}\n              class='searchcraft-ad-section '\n            >\n              <p>Ad Section</p>\n            </div>,\n          );\n        }\n      });\n    } else {\n      const documentElements = documents.map((document, index) =>\n        this.renderDocument(document, index),\n      );\n      finalComponents.push(...documentElements);\n    }\n\n    if (this.placeAdAtEnd) {\n      finalComponents.push(\n        <div key='ad-section-end' class='searchcraft-ad-section'>\n          <p>Ad Section</p>\n        </div>,\n      );\n    }\n\n    if (this.query.length > 0 && this.searchResults?.data?.hits?.length === 0) {\n      this.noResults.emit();\n    }\n\n    return (\n      <div class='searchcraft-search-results-container'>\n        {finalComponents}\n        {this.query.length > 0 &&\n          this.searchResults?.data?.hits?.length === 0 && (\n            <div class='searchcraft-search-results-error-message-container'>\n              <searchcraft-error-message\n                error-message={`No search results found for \"${this.query}\" query`}\n              />\n            </div>\n          )}\n      </div>\n    );\n  }\n}\n"]}