@searchcraft/javascript-sdk 0.2.3 → 0.2.4

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

@@ -0,0 +1,308 @@
+import { h } from "@stencil/core";
+export class SearchcraftBaseSearchResult {
+    constructor() {
+        this.buttonCallback = () => { }; // Callback for button click
+        this.keyDownCallback = () => { }; // Callback for key down event
+        this.resultCallback = () => { }; // Callback for result container click
+        this.handleButtonClick = () => {
+            this.buttonCallback();
+        };
+        this.handleContainerClick = () => {
+            if (this.isInteractive) {
+                this.resultCallback();
+            }
+        };
+        this.buttonText = '';
+        this.customStyles = '{}';
+        this.headingText = '';
+        this.imageDescription = '';
+        this.imageSource = '';
+        this.isInteractive = false;
+        this.primaryContent = '';
+        this.secondaryContent = '';
+        this.subheadingText = '';
+        this.tertiaryContent = '';
+        this.themeMode = 'light';
+    }
+    parseStyles() {
+        try {
+            return JSON.parse(this.customStyles);
+        }
+        catch (error) {
+            console.error('Error parsing custom styles:', error);
+            return {};
+        }
+    }
+    render() {
+        const isLightTheme = this.themeMode === 'light';
+        const styles = this.parseStyles();
+        return (h("div", { key: '91cfc671b0b99082915df3eaafa053a9a7f77929', class: this.isInteractive
+                ? isLightTheme
+                    ? 'interactiveResultContainerLight'
+                    : 'interactiveResultContainerDark'
+                : 'resultContainer', onKeyDown: this.keyDownCallback, onClick: this.handleContainerClick, style: styles.container || {}, tabindex: '0' }, h("div", { key: 'ccda236ef60aee285472155889c5490c69a86415', class: 'imageContainer' }, h("img", { key: 'e55d743952e2997d91f6486436e3a7955ffc1dcc', alt: this.imageDescription, class: isLightTheme ? 'imageLight' : 'imageDark', src: this.imageSource, style: styles.image || {} })), h("div", { key: 'b0e831c0c7bfef46b8b6da4e84536adf3ebd7158', class: 'contentContainer' }, h("h2", { key: '54137612623a39d711f4e3c888bf2015b6fb9500', class: isLightTheme ? 'headingLight' : 'headingDark', style: styles.heading || {} }, this.headingText), h("h3", { key: 'de46df990be3d0b5d2134d272e1766e911ab094a', class: isLightTheme ? 'subheadingLight' : 'subheadingDark', style: styles.subheading || {} }, this.subheadingText), h("p", { key: 'd9e7656bc739b0dd2267f86ac51b17d9ca16da6a', class: isLightTheme ? 'primaryContentLight' : 'primaryContentDark', style: styles.primaryContent || {} }, this.primaryContent), h("div", { key: 'd05813b3da29b8b21c2e370db9c0cbc7b48b9556', class: 'secondaryContentContainer' }, h("p", { key: 'e8d2ede937705a5bd88927779ee24e35ba2efbd8', class: isLightTheme ? 'secondaryContentLight' : 'secondaryContentDark', style: styles.secondaryContent || {} }, this.secondaryContent), h("p", { key: '2f9b9f603d55bcefe8347675cb31f705b1f7a0e8', class: isLightTheme ? 'tertiaryContentLight' : 'tertiaryContentDark', style: styles.tertiaryContent || {} }, this.tertiaryContent)), this.buttonText && (h("button", { key: '58724046c9704974cb3ae1c34335ebb7131b91ab', onClick: this.handleButtonClick, style: styles.button || {}, type: 'button' }, this.buttonText)))));
+    }
+    static get is() { return "searchcraft-base-search-result"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["searchcraft-base-search-result.module.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["searchcraft-base-search-result.module.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "buttonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "button-text",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "customStyles": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "custom-styles",
+                "reflect": false,
+                "defaultValue": "'{}'"
+            },
+            "headingText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "heading-text",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "imageDescription": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "image-description",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "imageSource": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "image-source",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "isInteractive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "is-interactive",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "primaryContent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "primary-content",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "secondaryContent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "secondary-content",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "subheadingText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "subheading-text",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "tertiaryContent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "tertiary-content",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "themeMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "theme-mode",
+                "reflect": false,
+                "defaultValue": "'light'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "buttonCallback",
+                "name": "buttonCallback",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "keyDownCallback",
+                "name": "keyDownCallback",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "resultCallback",
+                "name": "resultCallback",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=searchcraft-base-search-result.js.map

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

@@ -0,0 +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 { Component, Event, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'searchcraft-base-search-result',\n  styleUrl: 'searchcraft-base-search-result.module.scss',\n  shadow: true,\n})\nexport class SearchcraftBaseSearchResult {\n  @Prop() buttonText = ''; // Label for the button\n  @Prop() customStyles = '{}'; // New string prop for serialized styles.\n  @Prop() headingText = ''; // Text for the heading\n  @Prop() imageDescription = ''; // Alternative text for the image\n  @Prop() imageSource = ''; // Source URL for the image\n  @Prop() isInteractive = false; // Determines if the result is interactive\n  @Prop() primaryContent = ''; // Primary body content\n  @Prop() secondaryContent = ''; // Secondary body content\n  @Prop() subheadingText = ''; // Text for the subheading\n  @Prop() tertiaryContent = ''; // Tertiary body content\n  @Prop() themeMode: 'light' | 'dark' = 'light'; // Light or dark theme context\n\n  @Event() buttonCallback: () => void = () => {}; // Callback for button click\n  @Event() keyDownCallback: () => void = () => {}; // Callback for key down event\n  @Event() resultCallback: () => void = () => {}; // Callback for result container click\n\n  private handleButtonClick = () => {\n    this.buttonCallback();\n  };\n\n  private handleContainerClick = () => {\n    if (this.isInteractive) {\n      this.resultCallback();\n    }\n  };\n\n  private parseStyles(): Record<string, { [key: string]: string }> {\n    try {\n      return JSON.parse(this.customStyles);\n    } catch (error) {\n      console.error('Error parsing custom styles:', error);\n      return {};\n    }\n  }\n\n  render() {\n    const isLightTheme = this.themeMode === 'light';\n    const styles = this.parseStyles();\n\n    return (\n      <div\n        class={\n          this.isInteractive\n            ? isLightTheme\n              ? 'interactiveResultContainerLight'\n              : 'interactiveResultContainerDark'\n            : 'resultContainer'\n        }\n        onKeyDown={this.keyDownCallback}\n        onClick={this.handleContainerClick}\n        style={styles.container || {}}\n        tabindex='0'\n      >\n        <div class='imageContainer'>\n          <img\n            alt={this.imageDescription}\n            class={isLightTheme ? 'imageLight' : 'imageDark'}\n            src={this.imageSource}\n            style={styles.image || {}}\n          />\n        </div>\n        <div class='contentContainer'>\n          <h2\n            class={isLightTheme ? 'headingLight' : 'headingDark'}\n            style={styles.heading || {}}\n          >\n            {this.headingText}\n          </h2>\n          <h3\n            class={isLightTheme ? 'subheadingLight' : 'subheadingDark'}\n            style={styles.subheading || {}}\n          >\n            {this.subheadingText}\n          </h3>\n          <p\n            class={isLightTheme ? 'primaryContentLight' : 'primaryContentDark'}\n            style={styles.primaryContent || {}}\n          >\n            {this.primaryContent}\n          </p>\n          <div class='secondaryContentContainer'>\n            <p\n              class={\n                isLightTheme ? 'secondaryContentLight' : 'secondaryContentDark'\n              }\n              style={styles.secondaryContent || {}}\n            >\n              {this.secondaryContent}\n            </p>\n            <p\n              class={\n                isLightTheme ? 'tertiaryContentLight' : 'tertiaryContentDark'\n              }\n              style={styles.tertiaryContent || {}}\n            >\n              {this.tertiaryContent}\n            </p>\n          </div>\n          {this.buttonText && (\n            <button\n              onClick={this.handleButtonClick}\n              style={styles.button || {}}\n              type='button'\n            >\n              {this.buttonText}\n            </button>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,216 @@
+@charset "UTF-8";
+:root {
+  --font-stack: Helvetica, Arial, sans-serif;
+}
+
+.interactiveResultContainerLight {
+  align-items: flex-start;
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 8px;
+  position: relative;
+  background-color: #FAFAFA;
+}
+@media (min-width: 600px) {
+  .interactiveResultContainerLight {
+    flex-direction: row;
+  }
+}
+
+.interactiveResultContainerDark {
+  align-items: flex-start;
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 8px;
+  position: relative;
+  background-color: #2E2E2E;
+}
+@media (min-width: 600px) {
+  .interactiveResultContainerDark {
+    flex-direction: row;
+  }
+}
+
+.resultContainer {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+@media (min-width: 600px) {
+  .resultContainer {
+    flex-direction: row;
+  }
+}
+
+.interactiveIconLarge {
+  display: inline-block;
+  position: absolute;
+  right: 5px;
+  top: 8px;
+}
+@media (max-width: 600px) {
+  .interactiveIconLarge {
+    display: none;
+  }
+}
+
+.interactiveIconSmall {
+  display: inline-block;
+  position: absolute;
+  right: 5px;
+  top: -2px;
+}
+@media (min-width: 600px) {
+  .interactiveIconSmall {
+    display: none;
+  }
+}
+
+.imageContainer {
+  max-width: 100%;
+}
+
+.contentContainer {
+  max-height: 100%;
+  max-width: 100%;
+}
+@media (min-width: 600px) {
+  .contentContainer {
+    max-width: 50%;
+  }
+}
+
+.secondaryContentContainer {
+  display: flex;
+}
+
+.imageLight {
+  aspect-ratio: 2/1;
+  border-radius: 8px;
+  max-height: 100%;
+  max-width: 100%;
+  border: 1px solid #D9D9D9;
+}
+
+.imageDark {
+  aspect-ratio: 2/1;
+  border-radius: 8px;
+  max-height: 100%;
+  max-width: 100%;
+  border: 1px solid #333;
+}
+
+.headingLight {
+  font-family: var(--font-stack);
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 20px;
+  margin-bottom: 4px;
+  margin-top: 0;
+  position: relative;
+  color: #292929;
+}
+
+.headingDark {
+  font-family: var(--font-stack);
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 20px;
+  margin-bottom: 4px;
+  margin-top: 0;
+  position: relative;
+  color: #FFF;
+}
+
+.subheadingLight {
+  font-family: var(--font-stack);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  margin-bottom: 4px;
+  margin-top: 0px;
+  color: #737373;
+}
+
+.subheadingDark {
+  font-family: var(--font-stack);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  margin-bottom: 4px;
+  margin-top: 0px;
+  color: #BFBFBF;
+}
+
+.primaryContentLight {
+  font-family: var(--font-stack);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 20px;
+  margin-bottom: 4px;
+  margin-top: 0px;
+  color: #404040;
+}
+
+.primaryContentDark {
+  font-family: var(--font-stack);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 20px;
+  margin-bottom: 4px;
+  margin-top: 0px;
+  color: #E6E6E6;
+}
+
+.secondaryContentLight {
+  font-family: var(--font-stack);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 20px;
+  margin-bottom: 4px;
+  margin-top: 0px;
+  color: #404040;
+}
+
+.secondaryContentLight::after {
+  content: "•";
+  color: #404040;
+  font-size: 1em;
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
+.secondaryContentDark {
+  font-family: var(--font-stack);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 20px;
+  margin-bottom: 4px;
+  margin-top: 0px;
+  color: #E6E6E6;
+}
+
+.tertiaryContentLight {
+  font-family: var(--font-stack);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 20px;
+  margin-bottom: 4px;
+  margin-top: 0px;
+  color: #404040;
+}
+
+.tertiaryContentDark {
+  font-family: var(--font-stack);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 20px;
+  margin-bottom: 4px;
+  margin-top: 0px;
+  color: #E6E6E6;
+}