@searchcraft/javascript-sdk 0.1.5 → 0.1.7

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.imageDescription = '';
+        this.imageSource = '';
+        this.isInteractive = false;
+        this.primaryContent = '';
+        this.secondaryContent = '';
+        this.tertiaryContent = '';
+        this.headingText = '';
+        this.subheadingText = '';
+        this.themeMode = 'light';
+        this.customStyles = '{}';
+    }
+    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: 'e16bae2d337d064e057645cfb0ebf52346229b83', class: this.isInteractive
+                ? isLightTheme
+                    ? 'interactiveResultContainerLight'
+                    : 'interactiveResultContainerDark'
+                : 'resultContainer', style: styles.container || {}, tabindex: '0', onClick: this.handleContainerClick, onKeyDown: this.keyDownCallback }, h("div", { key: 'f2154ce85febbe54956a7f28292b13113e3048dd', class: 'imageContainer' }, h("img", { key: '8063fa3b88ba56b9cba63ded99967c8097b8b185', alt: this.imageDescription, src: this.imageSource, style: styles.image || {}, class: isLightTheme ? 'imageLight' : 'imageDark' })), h("div", { key: 'e04a38165dc98b0d72f215e4252f7065db3664d6', class: 'contentContainer' }, h("h2", { key: '33d2d3483d7c0f4e1ae7e15ba5895a8b15b45a34', style: styles.heading || {}, class: isLightTheme ? 'headingLight' : 'headingDark' }, this.headingText), h("h3", { key: '9587d0acea25ede251eba3e79dba932a5565f51a', style: styles.subheading || {}, class: isLightTheme ? 'subheadingLight' : 'subheadingDark' }, this.subheadingText), h("p", { key: '74f55a23963d5ddc8753d68b164587865da2dd13', style: styles.primaryContent || {}, class: isLightTheme ? 'primaryContentLight' : 'primaryContentDark' }, this.primaryContent), h("div", { key: 'db4e498b08c7075b276e90d8ed233dd48992ecdd' }, h("p", { key: 'c09d3164a15452c5fbfa23a54028f2080dd56550', style: styles.secondaryContent || {}, class: isLightTheme ? 'secondaryContentLight' : 'secondaryContentDark' }, this.secondaryContent), h("p", { key: 'ae78c4f53d9b12d62cad6b408aad5caf103303db', style: styles.tertiaryContent || {}, class: isLightTheme ? 'tertiaryContentLight' : 'tertiaryContentDark' }, this.tertiaryContent)), this.buttonText && (h("button", { key: '3ea036c680f3970e9d6f1b00b3505f11e338922c', 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": "''"
+            },
+            "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": "''"
+            },
+            "tertiaryContent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "tertiary-content",
+                "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": "''"
+            },
+            "subheadingText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "subheading-text",
+                "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'"
+            },
+            "customStyles": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "custom-styles",
+                "reflect": false,
+                "defaultValue": "'{}'"
+            }
+        };
+    }
+    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() 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() tertiaryContent = ''; // Tertiary body content\n  @Prop() headingText = ''; // Text for the heading\n  @Prop() subheadingText = ''; // Text for the subheading\n  @Prop() themeMode: 'light' | 'dark' = 'light'; // Light or dark theme context\n  @Prop() customStyles = '{}'; // New string prop for serialized styles.\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        style={styles.container || {}}\n        tabindex='0'\n        onClick={this.handleContainerClick}\n        onKeyDown={this.keyDownCallback}\n      >\n        <div class='imageContainer'>\n          <img\n            alt={this.imageDescription}\n            src={this.imageSource}\n            style={styles.image || {}}\n            class={isLightTheme ? 'imageLight' : 'imageDark'}\n          />\n        </div>\n        <div class='contentContainer'>\n          <h2\n            style={styles.heading || {}}\n            class={isLightTheme ? 'headingLight' : 'headingDark'}\n          >\n            {this.headingText}\n          </h2>\n          <h3\n            style={styles.subheading || {}}\n            class={isLightTheme ? 'subheadingLight' : 'subheadingDark'}\n          >\n            {this.subheadingText}\n          </h3>\n          <p\n            style={styles.primaryContent || {}}\n            class={isLightTheme ? 'primaryContentLight' : 'primaryContentDark'}\n          >\n            {this.primaryContent}\n          </p>\n          <div>\n            <p\n              style={styles.secondaryContent || {}}\n              class={\n                isLightTheme ? 'secondaryContentLight' : 'secondaryContentDark'\n              }\n            >\n              {this.secondaryContent}\n            </p>\n            <p\n              style={styles.tertiaryContent || {}}\n              class={\n                isLightTheme ? 'tertiaryContentLight' : 'tertiaryContentDark'\n              }\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,209 @@
+:root {
+  --font-stack: Helvetica, Arial, sans-serif;
+}
+
+.interactiveResultContainerLight {
+  background-color: #FAFAFA;
+  align-items: flex-start;
+  border-radius: 16px;
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  gap: 16px;
+  padding: 8px;
+}
+@media (min-width: 600px) {
+  .interactiveResultContainerLight {
+    flex-direction: row;
+  }
+}
+
+.interactiveResultContainerDark {
+  background-color: #2E2E2E;
+  align-items: flex-start;
+  border-radius: 16px;
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  gap: 16px;
+  padding: 8px;
+}
+@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 {
+  position: absolute;
+  right: 5px;
+  top: -2px;
+  display: inline-block;
+}
+@media (min-width: 600px) {
+  .interactiveIconSmall {
+    display: none;
+  }
+}
+
+.imageContainer {
+  max-height: 540px;
+  max-width: 100%;
+}
+@media (min-width: 600px) {
+  .imageContainer {
+    max-height: 175px;
+  }
+}
+
+.contentContainer {
+  max-height: 100%;
+  max-width: 100%;
+}
+@media (min-width: 600px) {
+  .contentContainer {
+    max-width: 50%;
+  }
+}
+
+.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: 0px;
+  position: relative;
+  color: #292929;
+}
+
+.headingDark {
+  font-family: var(--font-stack);
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 20px;
+  margin-bottom: 4px;
+  margin-top: 0px;
+  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;
+}
+
+.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;
+}