npm - @searchcraft/javascript-sdk - Versions diffs - 0.5.3 → 0.7.0 - Mend

@searchcraft/javascript-sdk 0.5.3 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (326) hide show

package/dist/cjs/searchcraft-base-search-result.cjs.entry.js CHANGED Viewed

@@ -2,15 +2,27 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-b76bece0.js');
-const store = require('./store-943576b0.js');
+const index = require('./index-d4b4a45e.js');
+const store = require('./store-abe47006.js');
-const searchcraftBaseSearchResultModuleCss = ":root{--sc-spinner-size:20px;--sc-input-border-radius:8px;--sc-input-search-icon-size:20px;--sc-input-clear-icon-size:20px;--sc-input-padding-left:44px;--sc-input-padding-right:44px;--sc-image-border-radius:8px}:root{--sc-surface-disabled:#D9D9D9;--sc-surface-neutral-primary:#FFFFFF;--sc-surface-neutral-secondary:#F3F3F3;--sc-surface-neutral-light:#FFFFFF;--sc-surface-neutral-primary-hover:#FAFAFA;--sc-surface-neutral-primary-active:#F7F7F7;--sc-surface-neutral-secondary-hover:#EDEDED;--sc-surface-neutral-secondary-active:#E6E6E6;--sc-surface-brand-primary:#000000;--sc-surface-brand-secondary:#E6E6E6;--sc-surface-brand-primary-hover:#2E2E2E;--sc-surface-brand-primary-active:#292929;--sc-surface-brand-secondary-hover:#EBEBEB;--sc-surface-brand-secondary-active:#E0E0E0;--sc-surface-success-primary:#008000;--sc-surface-success-secondary:#CCFFCC;--sc-surface-success-primary-hover:#009900;--sc-surface-success-primary-active:#006600;--sc-surface-success-secondary-hover:#E6FFE6;--sc-surface-success-secondary-active:#E6FFE6;--sc-surface-caution-primary:#CC6600;--sc-surface-caution-secondary:#FFD9B3;--sc-surface-caution-primary-hover:#E57300;--sc-surface-caution-primary-active:#B25A00;--sc-surface-caution-secondary-hover:#FFE5CC;--sc-surface-caution-secondary-active:#FFCC99;--sc-surface-danger-primary:#CC0000;--sc-surface-danger-secondary:#FFCCCC;--sc-surface-danger-primary-hover:#E50000;--sc-surface-danger-primary-active:#B30000;--sc-surface-danger-secondary-hover:#FFE7E7;--sc-surface-danger-secondary-active:#FFB3B3;--sc-content-brand:#000000;--sc-content-success:#008000;--sc-content-caution:#994D00;--sc-content-danger:#990000;--sc-content-disabled:#737373;--sc-content-neutral-primary:#292929;--sc-content-neutral-secondary:#404040;--sc-content-brand-on-primary:#FFFFFF;--sc-content-success-on-primary:#FFFFFF;--sc-content-caution-on-primary:#FFFFFF;--sc-content-danger-on-primary:#FFFFFF;--sc-content-disabled-on-disabled:#737373;--sc-border-neutral:rgba(0,0,0, 0.1);--sc-border-brand:#000000;--sc-border-success:#008000;--sc-border-caution:#CC6600;--sc-border-danger:#CC0000;--sc-border-disabled:#737373}:root{--sc-font-family:sans-serif;--sc-heading-1-font-size:32px;--sc-heading-1-line-height:36px;--sc-heading-1-font-weight:700;--sc-heading-2-font-size:29px;--sc-heading-2-line-height:32px;--sc-heading-2-font-weight:700;--sc-heading-3-font-size:26px;--sc-heading-3-line-height:28px;--sc-heading-3-font-weight:700;--sc-heading-4-font-size:23px;--sc-heading-4-line-height:24px;--sc-heading-4-font-weight:700;--sc-heading-5-font-size:20px;--sc-heading-5-line-height:24px;--sc-heading-5-font-weight:700;--sc-heading-6-font-size:10px;--sc-heading-6-line-height:12px;--sc-heading-6-font-weight:700;--sc-body-bold-font-size:16px;--sc-body-bold-line-height:20px;--sc-body-bold-font-weight:700;--sc-body-font-size:16px;--sc-body-line-height:20px;--sc-body-font-weight:400;--sc-body-small-bold-font-size:12px;--sc-body-small-bold-line-height:16px;--sc-body-small-bold-font-weight:700;--sc-body-small-font-size:12px;--sc-body-small-line-height:16px;--sc-body-small-font-weight:400}.searchcraft-search-result-container{all:unset;align-items:flex-start;border-radius:16px;display:flex;flex-direction:column;gap:16px;padding:8px;color:inherit;background-color:var(--sc-surface-neutral-primary)}@media (min-width: 900px){.searchcraft-search-result-container{flex-direction:row}}a.searchcraft-search-result-container{cursor:pointer;transition:background-color 100ms}.searchcraft-base-search-result-content-container{flex:1;display:flex;flex-direction:column;gap:8px}.searchcraft-search-result-image{border-radius:var(--sc-image-border-radius);width:100%}@media (min-width: 900px){.searchcraft-search-result-image{width:200px}}.searchcraft-base-search-result-title{font-family:var(--sc-font-family);-webkit-font-smoothing:antialiased;font-size:var(--sc-body-bold-font-size);font-weight:var(--sc-body-bold-font-weight);line-height:var(--sc-body-bold-line-height);margin:0;color:var(--sc-content-neutral-primary)}.searchcraft-base-search-result-subtitle{font-family:var(--sc-font-family);-webkit-font-smoothing:antialiased;font-size:var(--sc-body-small-font-size);font-weight:var(--sc-body-small-font-weight);line-height:var(--sc-body-small-line-height);margin:0;color:var(--sc-content-disabled)}.searchcraft-base-search-result-body-content{font-family:var(--sc-font-family);-webkit-font-smoothing:antialiased;font-size:var(--sc-body-font-size);font-weight:var(--sc-body-font-weight);line-height:var(--sc-body-line-height);margin:0;color:var(--sc-content-neutral-secondary)}.searchcraft-base-search-result-footer-content{font-family:var(--sc-font-family);-webkit-font-smoothing:antialiased;font-size:var(--sc-body-font-size);font-weight:var(--sc-body-font-weight);line-height:var(--sc-body-line-height);margin:0;color:var(--sc-content-disabled)}";
+const searchcraftBaseSearchResultModuleCss = ":root{--sc-input-border-radius:8px;--sc-input-search-icon-size:20px;--sc-input-clear-icon-size:20px;--sc-input-padding-left:44px;--sc-input-padding-right:44px;--sc-image-border-radius:8px;--sc-popover-form-border-radius:8px;--sc-popover-list-view-height:400px;--sc-popover-list-item-image-size:60px;--sc-popover-list-item-padding-horizontal:8px;--sc-popover-list-item-padding-vertical:8px;--sc-popover-modal-max-width:570px}:root{--sc-surface-disabled:#D9D9D9;--sc-surface-neutral-primary:#FFFFFF;--sc-surface-neutral-secondary:#F3F3F3;--sc-surface-neutral-light:#FFFFFF;--sc-surface-neutral-primary-hover:#FAFAFA;--sc-surface-neutral-primary-active:#F7F7F7;--sc-surface-neutral-secondary-hover:#EDEDED;--sc-surface-neutral-secondary-active:#E6E6E6;--sc-surface-brand-primary:#000000;--sc-surface-brand-secondary:#E6E6E6;--sc-surface-brand-primary-hover:#2E2E2E;--sc-surface-brand-primary-active:#292929;--sc-surface-brand-secondary-hover:#EBEBEB;--sc-surface-brand-secondary-active:#E0E0E0;--sc-surface-success-primary:#008000;--sc-surface-success-secondary:#CCFFCC;--sc-surface-success-primary-hover:#009900;--sc-surface-success-primary-active:#006600;--sc-surface-success-secondary-hover:#E6FFE6;--sc-surface-success-secondary-active:#E6FFE6;--sc-surface-caution-primary:#CC6600;--sc-surface-caution-secondary:#FFD9B3;--sc-surface-caution-primary-hover:#E57300;--sc-surface-caution-primary-active:#B25A00;--sc-surface-caution-secondary-hover:#FFE5CC;--sc-surface-caution-secondary-active:#FFCC99;--sc-surface-danger-primary:#CC0000;--sc-surface-danger-secondary:#FFCCCC;--sc-surface-danger-primary-hover:#E50000;--sc-surface-danger-primary-active:#B30000;--sc-surface-danger-secondary-hover:#FFE7E7;--sc-surface-danger-secondary-active:#FFB3B3;--sc-content-brand:#000000;--sc-content-success:#008000;--sc-content-caution:#994D00;--sc-content-danger:#990000;--sc-content-disabled:#737373;--sc-content-neutral-primary:#292929;--sc-content-neutral-secondary:#404040;--sc-content-brand-on-primary:#FFFFFF;--sc-content-success-on-primary:#FFFFFF;--sc-content-caution-on-primary:#FFFFFF;--sc-content-danger-on-primary:#FFFFFF;--sc-content-disabled-on-disabled:#737373;--sc-border-neutral:rgba(0,0,0, 0.1);--sc-border-brand:#000000;--sc-border-success:#008000;--sc-border-caution:#CC6600;--sc-border-danger:#CC0000;--sc-border-disabled:#737373}:root{--sc-font-family:sans-serif;--sc-heading-1-font-size:32px;--sc-heading-1-line-height:36px;--sc-heading-1-font-weight:700;--sc-heading-2-font-size:29px;--sc-heading-2-line-height:32px;--sc-heading-2-font-weight:700;--sc-heading-3-font-size:26px;--sc-heading-3-line-height:28px;--sc-heading-3-font-weight:700;--sc-heading-4-font-size:23px;--sc-heading-4-line-height:24px;--sc-heading-4-font-weight:700;--sc-heading-5-font-size:20px;--sc-heading-5-line-height:24px;--sc-heading-5-font-weight:700;--sc-heading-6-font-size:10px;--sc-heading-6-line-height:12px;--sc-heading-6-font-weight:700;--sc-body-bold-font-size:16px;--sc-body-bold-line-height:20px;--sc-body-bold-font-weight:700;--sc-body-font-size:16px;--sc-body-line-height:20px;--sc-body-font-weight:400;--sc-body-small-bold-font-size:12px;--sc-body-small-bold-line-height:16px;--sc-body-small-bold-font-weight:700;--sc-body-small-font-size:12px;--sc-body-small-line-height:16px;--sc-body-small-font-weight:400}:root{--sc-breakpoint-sm:576px;--sc-breakpoint-md:768px;--sc-breakpoint-lg:992px}.searchcraft-search-result-container{all:unset;align-items:flex-start;border-radius:16px;display:flex;flex-direction:column;gap:16px;padding:8px;color:inherit;background-color:var(--sc-surface-neutral-primary)}@media (min-width: 768px){.searchcraft-search-result-container{flex-direction:row}}a.searchcraft-search-result-container{cursor:pointer;transition:background-color 100ms}.searchcraft-base-search-result-content-container{flex:1;display:flex;flex-direction:column;gap:8px}.searchcraft-search-result-image{border-radius:var(--sc-image-border-radius);width:100%}@media (min-width: 768px){.searchcraft-search-result-image{width:200px}}.searchcraft-base-search-result-title{font-family:var(--sc-font-family);-webkit-font-smoothing:antialiased;font-size:var(--sc-body-bold-font-size);font-weight:var(--sc-body-bold-font-weight);line-height:var(--sc-body-bold-line-height);margin:0;color:var(--sc-content-neutral-primary)}.searchcraft-base-search-result-subtitle{font-family:var(--sc-font-family);-webkit-font-smoothing:antialiased;font-size:var(--sc-body-small-font-size);font-weight:var(--sc-body-small-font-weight);line-height:var(--sc-body-small-line-height);margin:0;color:var(--sc-content-disabled)}.searchcraft-base-search-result-body-content{font-family:var(--sc-font-family);-webkit-font-smoothing:antialiased;font-size:var(--sc-body-font-size);font-weight:var(--sc-body-font-weight);line-height:var(--sc-body-line-height);margin:0;color:var(--sc-content-neutral-secondary)}.searchcraft-base-search-result-footer-content{font-family:var(--sc-font-family);-webkit-font-smoothing:antialiased;font-size:var(--sc-body-font-size);font-weight:var(--sc-body-font-weight);line-height:var(--sc-body-line-height);margin:0;color:var(--sc-content-disabled)}";
 const SearchcraftBaseSearchResultStyle0 = searchcraftBaseSearchResultModuleCss;
 const SearchcraftBaseSearchResult = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * 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 = store.useSearchcraftStore.getState();
         this.recordMeasureEvent = () => {
             var _a, _b, _c;
@@ -38,22 +50,6 @@ const SearchcraftBaseSearchResult = class {
             }
             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();

package/dist/cjs/searchcraft-base-search-result.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"searchcraft-base-search-result.entry.cjs.js","mappings":"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","names":["useSearchcraftStore","h","Fragment"],"sources":["src/components/searchcraft-base-search-result/searchcraft-base-search-result.module.scss?tag=searchcraft-base-search-result","src/components/searchcraft-base-search-result/searchcraft-base-search-result.tsx"],"sourcesContent":["\n.searchcraft-search-result-container {\n all: unset;\n align-items: flex-start;\n border-radius: 16px;\n display: flex;\n flex-direction: column;\n gap: 16px;\n padding: 8px;\n color: inherit;\n\n background-color: var(--sc-surface-neutral-primary);\n\n @media (min-width: 900px) {\n flex-direction: row;\n }\n}\n\na.searchcraft-search-result-container {\n cursor: pointer;\n transition: background-color 100ms;\n}\n\n.searchcraft-base-search-result-content-container {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.searchcraft-search-result-image {\n border-radius: var(--sc-image-border-radius);\n width: 100%;\n\n @media (min-width: 900px) {\n width: 200px;\n }\n}\n\n.searchcraft-base-search-result-title {\n @include body-bold();\n margin: 0;\n color: var(--sc-content-neutral-primary);\n}\n\n.searchcraft-base-search-result-subtitle {\n @include body-small();\n margin: 0;\n color: var(--sc-content-disabled);\n}\n\n.searchcraft-base-search-result-body-content {\n @include body();\n margin: 0;\n color: var(--sc-content-neutral-secondary);\n}\n\n.searchcraft-base-search-result-footer-content {\n @include body();\n margin: 0;\n color: var(--sc-content-disabled);\n}\n","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}
1	+ {"file":"searchcraft-base-search-result.entry.cjs.js","mappings":"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","names":["useSearchcraftStore","h","Fragment"],"sources":["src/components/searchcraft-base-search-result/searchcraft-base-search-result.module.scss?tag=searchcraft-base-search-result","src/components/searchcraft-base-search-result/searchcraft-base-search-result.tsx"],"sourcesContent":["\n.searchcraft-search-result-container {\n all: unset;\n align-items: flex-start;\n border-radius: 16px;\n display: flex;\n flex-direction: column;\n gap: 16px;\n padding: 8px;\n color: inherit;\n\n background-color: var(--sc-surface-neutral-primary);\n\n @media (min-width: $breakpoint-md) {\n flex-direction: row;\n }\n}\n\na.searchcraft-search-result-container {\n cursor: pointer;\n transition: background-color 100ms;\n}\n\n.searchcraft-base-search-result-content-container {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.searchcraft-search-result-image {\n border-radius: var(--sc-image-border-radius);\n width: 100%;\n\n @media (min-width: $breakpoint-md) {\n width: 200px;\n }\n}\n\n.searchcraft-base-search-result-title {\n @include body-bold();\n margin: 0;\n color: var(--sc-content-neutral-primary);\n}\n\n.searchcraft-base-search-result-subtitle {\n @include body-small();\n margin: 0;\n color: var(--sc-content-disabled);\n}\n\n.searchcraft-base-search-result-body-content {\n @include body();\n margin: 0;\n color: var(--sc-content-neutral-secondary);\n}\n\n.searchcraft-base-search-result-footer-content {\n @include body();\n margin: 0;\n color: var(--sc-content-disabled);\n}\n","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"],"version":3}

package/dist/cjs/searchcraft-base-search-results.cjs.entry.js CHANGED Viewed

@@ -2,28 +2,42 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-b76bece0.js');
-const store = require('./store-943576b0.js');
-const utils = require('./utils-a17279a2.js');
+const index = require('./index-d4b4a45e.js');
+const store = require('./store-abe47006.js');
+const units = require('./units-fe4d8083.js');
+const styles = require('./styles-7b2d06f2.js');
-const searchcraftBaseSearchResultsModuleCss = ":root{--sc-spinner-size:20px;--sc-input-border-radius:8px;--sc-input-search-icon-size:20px;--sc-input-clear-icon-size:20px;--sc-input-padding-left:44px;--sc-input-padding-right:44px;--sc-image-border-radius:8px}:root{--sc-surface-disabled:#D9D9D9;--sc-surface-neutral-primary:#FFFFFF;--sc-surface-neutral-secondary:#F3F3F3;--sc-surface-neutral-light:#FFFFFF;--sc-surface-neutral-primary-hover:#FAFAFA;--sc-surface-neutral-primary-active:#F7F7F7;--sc-surface-neutral-secondary-hover:#EDEDED;--sc-surface-neutral-secondary-active:#E6E6E6;--sc-surface-brand-primary:#000000;--sc-surface-brand-secondary:#E6E6E6;--sc-surface-brand-primary-hover:#2E2E2E;--sc-surface-brand-primary-active:#292929;--sc-surface-brand-secondary-hover:#EBEBEB;--sc-surface-brand-secondary-active:#E0E0E0;--sc-surface-success-primary:#008000;--sc-surface-success-secondary:#CCFFCC;--sc-surface-success-primary-hover:#009900;--sc-surface-success-primary-active:#006600;--sc-surface-success-secondary-hover:#E6FFE6;--sc-surface-success-secondary-active:#E6FFE6;--sc-surface-caution-primary:#CC6600;--sc-surface-caution-secondary:#FFD9B3;--sc-surface-caution-primary-hover:#E57300;--sc-surface-caution-primary-active:#B25A00;--sc-surface-caution-secondary-hover:#FFE5CC;--sc-surface-caution-secondary-active:#FFCC99;--sc-surface-danger-primary:#CC0000;--sc-surface-danger-secondary:#FFCCCC;--sc-surface-danger-primary-hover:#E50000;--sc-surface-danger-primary-active:#B30000;--sc-surface-danger-secondary-hover:#FFE7E7;--sc-surface-danger-secondary-active:#FFB3B3;--sc-content-brand:#000000;--sc-content-success:#008000;--sc-content-caution:#994D00;--sc-content-danger:#990000;--sc-content-disabled:#737373;--sc-content-neutral-primary:#292929;--sc-content-neutral-secondary:#404040;--sc-content-brand-on-primary:#FFFFFF;--sc-content-success-on-primary:#FFFFFF;--sc-content-caution-on-primary:#FFFFFF;--sc-content-danger-on-primary:#FFFFFF;--sc-content-disabled-on-disabled:#737373;--sc-border-neutral:rgba(0,0,0, 0.1);--sc-border-brand:#000000;--sc-border-success:#008000;--sc-border-caution:#CC6600;--sc-border-danger:#CC0000;--sc-border-disabled:#737373}:root{--sc-font-family:sans-serif;--sc-heading-1-font-size:32px;--sc-heading-1-line-height:36px;--sc-heading-1-font-weight:700;--sc-heading-2-font-size:29px;--sc-heading-2-line-height:32px;--sc-heading-2-font-weight:700;--sc-heading-3-font-size:26px;--sc-heading-3-line-height:28px;--sc-heading-3-font-weight:700;--sc-heading-4-font-size:23px;--sc-heading-4-line-height:24px;--sc-heading-4-font-weight:700;--sc-heading-5-font-size:20px;--sc-heading-5-line-height:24px;--sc-heading-5-font-weight:700;--sc-heading-6-font-size:10px;--sc-heading-6-line-height:12px;--sc-heading-6-font-weight:700;--sc-body-bold-font-size:16px;--sc-body-bold-line-height:20px;--sc-body-bold-font-weight:700;--sc-body-font-size:16px;--sc-body-line-height:20px;--sc-body-font-weight:400;--sc-body-small-bold-font-size:12px;--sc-body-small-bold-line-height:16px;--sc-body-small-bold-font-weight:700;--sc-body-small-font-size:12px;--sc-body-small-line-height:16px;--sc-body-small-font-weight:400}.searchcraft-search-results-container{display:flex;flex-direction:column;justify-content:center;gap:16px}.searchcraft-ad-section{align-items:center;background-color:#F1F1F1;border-radius:16px;display:flex;flex-direction:column;font-size:16px;justify-content:center;min-height:176px;text-align:center}.searchcraft-ad-section p{margin:0;color:var(--sc-content-disabled)}.searchcraft-search-results-empty-state-container{text-align:center}.searchcraft-search-results-error-message-container{text-align:center}";
+const searchcraftBaseSearchResultsModuleCss = ":root{--sc-input-border-radius:8px;--sc-input-search-icon-size:20px;--sc-input-clear-icon-size:20px;--sc-input-padding-left:44px;--sc-input-padding-right:44px;--sc-image-border-radius:8px;--sc-popover-form-border-radius:8px;--sc-popover-list-view-height:400px;--sc-popover-list-item-image-size:60px;--sc-popover-list-item-padding-horizontal:8px;--sc-popover-list-item-padding-vertical:8px;--sc-popover-modal-max-width:570px}:root{--sc-surface-disabled:#D9D9D9;--sc-surface-neutral-primary:#FFFFFF;--sc-surface-neutral-secondary:#F3F3F3;--sc-surface-neutral-light:#FFFFFF;--sc-surface-neutral-primary-hover:#FAFAFA;--sc-surface-neutral-primary-active:#F7F7F7;--sc-surface-neutral-secondary-hover:#EDEDED;--sc-surface-neutral-secondary-active:#E6E6E6;--sc-surface-brand-primary:#000000;--sc-surface-brand-secondary:#E6E6E6;--sc-surface-brand-primary-hover:#2E2E2E;--sc-surface-brand-primary-active:#292929;--sc-surface-brand-secondary-hover:#EBEBEB;--sc-surface-brand-secondary-active:#E0E0E0;--sc-surface-success-primary:#008000;--sc-surface-success-secondary:#CCFFCC;--sc-surface-success-primary-hover:#009900;--sc-surface-success-primary-active:#006600;--sc-surface-success-secondary-hover:#E6FFE6;--sc-surface-success-secondary-active:#E6FFE6;--sc-surface-caution-primary:#CC6600;--sc-surface-caution-secondary:#FFD9B3;--sc-surface-caution-primary-hover:#E57300;--sc-surface-caution-primary-active:#B25A00;--sc-surface-caution-secondary-hover:#FFE5CC;--sc-surface-caution-secondary-active:#FFCC99;--sc-surface-danger-primary:#CC0000;--sc-surface-danger-secondary:#FFCCCC;--sc-surface-danger-primary-hover:#E50000;--sc-surface-danger-primary-active:#B30000;--sc-surface-danger-secondary-hover:#FFE7E7;--sc-surface-danger-secondary-active:#FFB3B3;--sc-content-brand:#000000;--sc-content-success:#008000;--sc-content-caution:#994D00;--sc-content-danger:#990000;--sc-content-disabled:#737373;--sc-content-neutral-primary:#292929;--sc-content-neutral-secondary:#404040;--sc-content-brand-on-primary:#FFFFFF;--sc-content-success-on-primary:#FFFFFF;--sc-content-caution-on-primary:#FFFFFF;--sc-content-danger-on-primary:#FFFFFF;--sc-content-disabled-on-disabled:#737373;--sc-border-neutral:rgba(0,0,0, 0.1);--sc-border-brand:#000000;--sc-border-success:#008000;--sc-border-caution:#CC6600;--sc-border-danger:#CC0000;--sc-border-disabled:#737373}:root{--sc-font-family:sans-serif;--sc-heading-1-font-size:32px;--sc-heading-1-line-height:36px;--sc-heading-1-font-weight:700;--sc-heading-2-font-size:29px;--sc-heading-2-line-height:32px;--sc-heading-2-font-weight:700;--sc-heading-3-font-size:26px;--sc-heading-3-line-height:28px;--sc-heading-3-font-weight:700;--sc-heading-4-font-size:23px;--sc-heading-4-line-height:24px;--sc-heading-4-font-weight:700;--sc-heading-5-font-size:20px;--sc-heading-5-line-height:24px;--sc-heading-5-font-weight:700;--sc-heading-6-font-size:10px;--sc-heading-6-line-height:12px;--sc-heading-6-font-weight:700;--sc-body-bold-font-size:16px;--sc-body-bold-line-height:20px;--sc-body-bold-font-weight:700;--sc-body-font-size:16px;--sc-body-line-height:20px;--sc-body-font-weight:400;--sc-body-small-bold-font-size:12px;--sc-body-small-bold-line-height:16px;--sc-body-small-bold-font-weight:700;--sc-body-small-font-size:12px;--sc-body-small-line-height:16px;--sc-body-small-font-weight:400}:root{--sc-breakpoint-sm:576px;--sc-breakpoint-md:768px;--sc-breakpoint-lg:992px}.searchcraft-search-results-container{display:flex;flex-direction:column;justify-content:center;gap:16px}.searchcraft-ad-section{align-items:center;background-color:#F1F1F1;border-radius:16px;display:flex;flex-direction:column;font-size:16px;justify-content:center;min-height:176px;text-align:center}.searchcraft-ad-section p{margin:0;color:var(--sc-content-disabled)}.searchcraft-search-results-empty-state-container{text-align:center}.searchcraft-search-results-error-message-container{text-align:center}";
 const SearchcraftBaseSearchResultsStyle0 = searchcraftBaseSearchResultsModuleCss;
 const SearchcraftBaseSearchResults = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.noResults = index.createEvent(this, "noResults", 7);
+        /**
+         * 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;
@@ -52,16 +66,16 @@ const SearchcraftBaseSearchResults = class {
         /**
          * Index field values -> Result container props mappings.
          */
-        const titleContent = utils.getDocumentValueFromSearchResultMapping(document, this.searchResultMappings.title);
-        const subtitleContent = utils.getDocumentValueFromSearchResultMapping(document, this.searchResultMappings.subtitle);
-        const bodyContent = utils.getDocumentValueFromSearchResultMapping(document, this.searchResultMappings.body);
-        const containerHref = utils.getDocumentValueFromSearchResultMapping(document, this.searchResultMappings.containerHref);
-        const buttonHref = utils.getDocumentValueFromSearchResultMapping(document, this.searchResultMappings.buttonHref);
-        const imageSource = utils.getDocumentValueFromSearchResultMapping(document, this.searchResultMappings.imageSource);
-        const footerContent = utils.getDocumentValueFromSearchResultMapping(document, this.searchResultMappings.footer);
+        const titleContent = units.getDocumentValueFromSearchResultMapping(document, this.searchResultMappings.title);
+        const subtitleContent = units.getDocumentValueFromSearchResultMapping(document, this.searchResultMappings.subtitle);
+        const bodyContent = units.getDocumentValueFromSearchResultMapping(document, this.searchResultMappings.body);
+        const containerHref = units.getDocumentValueFromSearchResultMapping(document, this.searchResultMappings.containerHref);
+        const buttonHref = units.getDocumentValueFromSearchResultMapping(document, this.searchResultMappings.buttonHref);
+        const imageSource = units.getDocumentValueFromSearchResultMapping(document, this.searchResultMappings.imageSource);
+        const footerContent = units.getDocumentValueFromSearchResultMapping(document, this.searchResultMappings.footer);
         const serializedStyles = typeof this.customStylesForResults === 'string'
             ? this.customStylesForResults
-            : utils.serializeStyles(this.customStylesForResults);
+            : styles.serializeStyles(this.customStylesForResults);
         return (index.h("searchcraft-base-search-result", { key: `${document.document_id}-${index$1}`, "custom-styles": serializedStyles, "image-placement": this.resultImagePlacement, "container-rel": this.containerRel, "container-target": this.containerTarget, "button-label": this.buttonLabel || 'View more', "button-rel": this.buttonRel, "button-target": this.buttonTarget, "document-position": index$1, "title-content": titleContent, "subtitle-content": subtitleContent, "body-content": bodyContent, "footer-content": footerContent, "container-href": containerHref, "button-href": buttonHref, "image-src": imageSource }));
     }
     render() {

package/dist/cjs/searchcraft-base-search-results.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"searchcraft-base-search-results.entry.cjs.js","mappings":"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","names":["useSearchcraftStore","index","getDocumentValueFromSearchResultMapping","serializeStyles","h"],"sources":["src/components/searchcraft-base-search-results/searchcraft-base-search-results.module.scss?tag=searchcraft-base-search-results","src/components/searchcraft-base-search-results/searchcraft-base-search-results.tsx"],"sourcesContent":[".searchcraft-search-results-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: 16px;\n}\n\n.searchcraft-ad-section {\n align-items: center;\n background-color: #F1F1F1;\n border-radius: 16px;\n display: flex;\n flex-direction: column;\n font-size: 16px;\n justify-content: center;\n min-height: 176px;\n text-align: center;\n\n p {\n margin: 0;\n color: var(--sc-content-disabled);\n }\n}\n\n.searchcraft-search-results-empty-state-container {\n text-align: center;\n}\n\n.searchcraft-search-results-error-message-container {\n text-align: center;\n}\n","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}
1	+ {"file":"searchcraft-base-search-results.entry.cjs.js","mappings":"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","names":["useSearchcraftStore","index","getDocumentValueFromSearchResultMapping","serializeStyles","h"],"sources":["src/components/searchcraft-base-search-results/searchcraft-base-search-results.module.scss?tag=searchcraft-base-search-results","src/components/searchcraft-base-search-results/searchcraft-base-search-results.tsx"],"sourcesContent":[".searchcraft-search-results-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: 16px;\n}\n\n.searchcraft-ad-section {\n align-items: center;\n background-color: #F1F1F1;\n border-radius: 16px;\n display: flex;\n flex-direction: column;\n font-size: 16px;\n justify-content: center;\n min-height: 176px;\n text-align: center;\n\n p {\n margin: 0;\n color: var(--sc-content-disabled);\n }\n}\n\n.searchcraft-search-results-empty-state-container {\n text-align: center;\n}\n\n.searchcraft-search-results-error-message-container {\n text-align: center;\n}\n","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"],"version":3}

package/dist/cjs/searchcraft-button_3.cjs.entry.js ADDED Viewed

@@ -0,0 +1,72 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-d4b4a45e.js');
+const index$1 = require('./index-5b0b9d4c.js');
+const searchcraftButtonModuleCss = ":root{--sc-input-border-radius:8px;--sc-input-search-icon-size:20px;--sc-input-clear-icon-size:20px;--sc-input-padding-left:44px;--sc-input-padding-right:44px;--sc-image-border-radius:8px;--sc-popover-form-border-radius:8px;--sc-popover-list-view-height:400px;--sc-popover-list-item-image-size:60px;--sc-popover-list-item-padding-horizontal:8px;--sc-popover-list-item-padding-vertical:8px;--sc-popover-modal-max-width:570px}:root{--sc-surface-disabled:#D9D9D9;--sc-surface-neutral-primary:#FFFFFF;--sc-surface-neutral-secondary:#F3F3F3;--sc-surface-neutral-light:#FFFFFF;--sc-surface-neutral-primary-hover:#FAFAFA;--sc-surface-neutral-primary-active:#F7F7F7;--sc-surface-neutral-secondary-hover:#EDEDED;--sc-surface-neutral-secondary-active:#E6E6E6;--sc-surface-brand-primary:#000000;--sc-surface-brand-secondary:#E6E6E6;--sc-surface-brand-primary-hover:#2E2E2E;--sc-surface-brand-primary-active:#292929;--sc-surface-brand-secondary-hover:#EBEBEB;--sc-surface-brand-secondary-active:#E0E0E0;--sc-surface-success-primary:#008000;--sc-surface-success-secondary:#CCFFCC;--sc-surface-success-primary-hover:#009900;--sc-surface-success-primary-active:#006600;--sc-surface-success-secondary-hover:#E6FFE6;--sc-surface-success-secondary-active:#E6FFE6;--sc-surface-caution-primary:#CC6600;--sc-surface-caution-secondary:#FFD9B3;--sc-surface-caution-primary-hover:#E57300;--sc-surface-caution-primary-active:#B25A00;--sc-surface-caution-secondary-hover:#FFE5CC;--sc-surface-caution-secondary-active:#FFCC99;--sc-surface-danger-primary:#CC0000;--sc-surface-danger-secondary:#FFCCCC;--sc-surface-danger-primary-hover:#E50000;--sc-surface-danger-primary-active:#B30000;--sc-surface-danger-secondary-hover:#FFE7E7;--sc-surface-danger-secondary-active:#FFB3B3;--sc-content-brand:#000000;--sc-content-success:#008000;--sc-content-caution:#994D00;--sc-content-danger:#990000;--sc-content-disabled:#737373;--sc-content-neutral-primary:#292929;--sc-content-neutral-secondary:#404040;--sc-content-brand-on-primary:#FFFFFF;--sc-content-success-on-primary:#FFFFFF;--sc-content-caution-on-primary:#FFFFFF;--sc-content-danger-on-primary:#FFFFFF;--sc-content-disabled-on-disabled:#737373;--sc-border-neutral:rgba(0,0,0, 0.1);--sc-border-brand:#000000;--sc-border-success:#008000;--sc-border-caution:#CC6600;--sc-border-danger:#CC0000;--sc-border-disabled:#737373}:root{--sc-font-family:sans-serif;--sc-heading-1-font-size:32px;--sc-heading-1-line-height:36px;--sc-heading-1-font-weight:700;--sc-heading-2-font-size:29px;--sc-heading-2-line-height:32px;--sc-heading-2-font-weight:700;--sc-heading-3-font-size:26px;--sc-heading-3-line-height:28px;--sc-heading-3-font-weight:700;--sc-heading-4-font-size:23px;--sc-heading-4-line-height:24px;--sc-heading-4-font-weight:700;--sc-heading-5-font-size:20px;--sc-heading-5-line-height:24px;--sc-heading-5-font-weight:700;--sc-heading-6-font-size:10px;--sc-heading-6-line-height:12px;--sc-heading-6-font-weight:700;--sc-body-bold-font-size:16px;--sc-body-bold-line-height:20px;--sc-body-bold-font-weight:700;--sc-body-font-size:16px;--sc-body-line-height:20px;--sc-body-font-weight:400;--sc-body-small-bold-font-size:12px;--sc-body-small-bold-line-height:16px;--sc-body-small-bold-font-weight:700;--sc-body-small-font-size:12px;--sc-body-small-line-height:16px;--sc-body-small-font-weight:400}:root{--sc-breakpoint-sm:576px;--sc-breakpoint-md:768px;--sc-breakpoint-lg:992px}.searchcraft-button{font-family:var(--sc-font-family);-webkit-font-smoothing:antialiased;font-size:var(--sc-body-bold-font-size);font-weight:var(--sc-body-bold-font-weight);line-height:var(--sc-body-bold-line-height);border-radius:8px;display:flex;padding:12px 20px;position:relative;background-color:var(--sc-surface-brand-primary);border:1px solid var(--sc-border-primary);color:var(--sc-content-brand-on-primary)}.searchcraft-button:hover{cursor:pointer;background-color:var(--sc-surface-brand-primary-hover)}.searchcraft-button:focus{outline:2px solid var(--sc-surface-brand-primary)}.buttonLabel{position:relative}";
+const SearchcraftButtonStyle0 = searchcraftButtonModuleCss;
+const SearchcraftButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.buttonClick = index.createEvent(this, "buttonClick", 7);
+        /**
+         * Should the button only display an icon.
+         */
+        this.iconOnly = false;
+        /**
+         * The position of the icon.
+         */
+        this.iconPosition = 'left';
+        /**
+         * The label for the button.
+         */
+        this.label = 'Search';
+        this.isRequesting = false;
+        this.handleClick = () => {
+            this.buttonClick.emit();
+        };
+    }
+    render() {
+        return (index.h(index.Fragment, { key: '52b95f09f5da9f281b250285623e150c5d952dce' }, this.iconOnly ? (index.h("button", { class: index$1.classNames('searchcraft-button'), onClick: this.handleClick, type: 'submit' }, this.isRequesting ? (index.h("searchcraft-spinner-dark", null)) : (this.iconElement))) : (index.h("button", { class: index$1.classNames('searchcraft-button'), onClick: this.handleClick, type: 'submit' }, this.iconPosition === 'left' && this.iconElement, index.h("span", { class: index$1.classNames('buttonLabel', 'searchcraft-button-label') }, this.label)))));
+    }
+};
+SearchcraftButton.style = SearchcraftButtonStyle0;
+const searchcraftErrorMessageModuleCss = ":root{--sc-input-border-radius:8px;--sc-input-search-icon-size:20px;--sc-input-clear-icon-size:20px;--sc-input-padding-left:44px;--sc-input-padding-right:44px;--sc-image-border-radius:8px;--sc-popover-form-border-radius:8px;--sc-popover-list-view-height:400px;--sc-popover-list-item-image-size:60px;--sc-popover-list-item-padding-horizontal:8px;--sc-popover-list-item-padding-vertical:8px;--sc-popover-modal-max-width:570px}:root{--sc-surface-disabled:#D9D9D9;--sc-surface-neutral-primary:#FFFFFF;--sc-surface-neutral-secondary:#F3F3F3;--sc-surface-neutral-light:#FFFFFF;--sc-surface-neutral-primary-hover:#FAFAFA;--sc-surface-neutral-primary-active:#F7F7F7;--sc-surface-neutral-secondary-hover:#EDEDED;--sc-surface-neutral-secondary-active:#E6E6E6;--sc-surface-brand-primary:#000000;--sc-surface-brand-secondary:#E6E6E6;--sc-surface-brand-primary-hover:#2E2E2E;--sc-surface-brand-primary-active:#292929;--sc-surface-brand-secondary-hover:#EBEBEB;--sc-surface-brand-secondary-active:#E0E0E0;--sc-surface-success-primary:#008000;--sc-surface-success-secondary:#CCFFCC;--sc-surface-success-primary-hover:#009900;--sc-surface-success-primary-active:#006600;--sc-surface-success-secondary-hover:#E6FFE6;--sc-surface-success-secondary-active:#E6FFE6;--sc-surface-caution-primary:#CC6600;--sc-surface-caution-secondary:#FFD9B3;--sc-surface-caution-primary-hover:#E57300;--sc-surface-caution-primary-active:#B25A00;--sc-surface-caution-secondary-hover:#FFE5CC;--sc-surface-caution-secondary-active:#FFCC99;--sc-surface-danger-primary:#CC0000;--sc-surface-danger-secondary:#FFCCCC;--sc-surface-danger-primary-hover:#E50000;--sc-surface-danger-primary-active:#B30000;--sc-surface-danger-secondary-hover:#FFE7E7;--sc-surface-danger-secondary-active:#FFB3B3;--sc-content-brand:#000000;--sc-content-success:#008000;--sc-content-caution:#994D00;--sc-content-danger:#990000;--sc-content-disabled:#737373;--sc-content-neutral-primary:#292929;--sc-content-neutral-secondary:#404040;--sc-content-brand-on-primary:#FFFFFF;--sc-content-success-on-primary:#FFFFFF;--sc-content-caution-on-primary:#FFFFFF;--sc-content-danger-on-primary:#FFFFFF;--sc-content-disabled-on-disabled:#737373;--sc-border-neutral:rgba(0,0,0, 0.1);--sc-border-brand:#000000;--sc-border-success:#008000;--sc-border-caution:#CC6600;--sc-border-danger:#CC0000;--sc-border-disabled:#737373}:root{--sc-font-family:sans-serif;--sc-heading-1-font-size:32px;--sc-heading-1-line-height:36px;--sc-heading-1-font-weight:700;--sc-heading-2-font-size:29px;--sc-heading-2-line-height:32px;--sc-heading-2-font-weight:700;--sc-heading-3-font-size:26px;--sc-heading-3-line-height:28px;--sc-heading-3-font-weight:700;--sc-heading-4-font-size:23px;--sc-heading-4-line-height:24px;--sc-heading-4-font-weight:700;--sc-heading-5-font-size:20px;--sc-heading-5-line-height:24px;--sc-heading-5-font-weight:700;--sc-heading-6-font-size:10px;--sc-heading-6-line-height:12px;--sc-heading-6-font-weight:700;--sc-body-bold-font-size:16px;--sc-body-bold-line-height:20px;--sc-body-bold-font-weight:700;--sc-body-font-size:16px;--sc-body-line-height:20px;--sc-body-font-weight:400;--sc-body-small-bold-font-size:12px;--sc-body-small-bold-line-height:16px;--sc-body-small-bold-font-weight:700;--sc-body-small-font-size:12px;--sc-body-small-line-height:16px;--sc-body-small-font-weight:400}:root{--sc-breakpoint-sm:576px;--sc-breakpoint-md:768px;--sc-breakpoint-lg:992px}.searchcraft-error-message{font-family:var(--sc-font-family);-webkit-font-smoothing:antialiased;font-size:var(--sc-body-small-font-size);font-weight:var(--sc-body-small-font-weight);line-height:var(--sc-body-small-line-height);color:var(--sc-content-danger);margin:0}";
+const SearchcraftErrorMessageStyle0 = searchcraftErrorMessageModuleCss;
+const SearchcraftErrorMessage = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h("p", { key: '5bdc428adf6f239d66a9b0f946ee6e582de41e86', class: 'searchcraft-error-message' }, this.errorMessage || 'Search term is required.'));
+    }
+};
+SearchcraftErrorMessage.style = SearchcraftErrorMessageStyle0;
+const searchcraftInputLabelModuleCss = ":root{--sc-input-border-radius:8px;--sc-input-search-icon-size:20px;--sc-input-clear-icon-size:20px;--sc-input-padding-left:44px;--sc-input-padding-right:44px;--sc-image-border-radius:8px;--sc-popover-form-border-radius:8px;--sc-popover-list-view-height:400px;--sc-popover-list-item-image-size:60px;--sc-popover-list-item-padding-horizontal:8px;--sc-popover-list-item-padding-vertical:8px;--sc-popover-modal-max-width:570px}:root{--sc-surface-disabled:#D9D9D9;--sc-surface-neutral-primary:#FFFFFF;--sc-surface-neutral-secondary:#F3F3F3;--sc-surface-neutral-light:#FFFFFF;--sc-surface-neutral-primary-hover:#FAFAFA;--sc-surface-neutral-primary-active:#F7F7F7;--sc-surface-neutral-secondary-hover:#EDEDED;--sc-surface-neutral-secondary-active:#E6E6E6;--sc-surface-brand-primary:#000000;--sc-surface-brand-secondary:#E6E6E6;--sc-surface-brand-primary-hover:#2E2E2E;--sc-surface-brand-primary-active:#292929;--sc-surface-brand-secondary-hover:#EBEBEB;--sc-surface-brand-secondary-active:#E0E0E0;--sc-surface-success-primary:#008000;--sc-surface-success-secondary:#CCFFCC;--sc-surface-success-primary-hover:#009900;--sc-surface-success-primary-active:#006600;--sc-surface-success-secondary-hover:#E6FFE6;--sc-surface-success-secondary-active:#E6FFE6;--sc-surface-caution-primary:#CC6600;--sc-surface-caution-secondary:#FFD9B3;--sc-surface-caution-primary-hover:#E57300;--sc-surface-caution-primary-active:#B25A00;--sc-surface-caution-secondary-hover:#FFE5CC;--sc-surface-caution-secondary-active:#FFCC99;--sc-surface-danger-primary:#CC0000;--sc-surface-danger-secondary:#FFCCCC;--sc-surface-danger-primary-hover:#E50000;--sc-surface-danger-primary-active:#B30000;--sc-surface-danger-secondary-hover:#FFE7E7;--sc-surface-danger-secondary-active:#FFB3B3;--sc-content-brand:#000000;--sc-content-success:#008000;--sc-content-caution:#994D00;--sc-content-danger:#990000;--sc-content-disabled:#737373;--sc-content-neutral-primary:#292929;--sc-content-neutral-secondary:#404040;--sc-content-brand-on-primary:#FFFFFF;--sc-content-success-on-primary:#FFFFFF;--sc-content-caution-on-primary:#FFFFFF;--sc-content-danger-on-primary:#FFFFFF;--sc-content-disabled-on-disabled:#737373;--sc-border-neutral:rgba(0,0,0, 0.1);--sc-border-brand:#000000;--sc-border-success:#008000;--sc-border-caution:#CC6600;--sc-border-danger:#CC0000;--sc-border-disabled:#737373}:root{--sc-font-family:sans-serif;--sc-heading-1-font-size:32px;--sc-heading-1-line-height:36px;--sc-heading-1-font-weight:700;--sc-heading-2-font-size:29px;--sc-heading-2-line-height:32px;--sc-heading-2-font-weight:700;--sc-heading-3-font-size:26px;--sc-heading-3-line-height:28px;--sc-heading-3-font-weight:700;--sc-heading-4-font-size:23px;--sc-heading-4-line-height:24px;--sc-heading-4-font-weight:700;--sc-heading-5-font-size:20px;--sc-heading-5-line-height:24px;--sc-heading-5-font-weight:700;--sc-heading-6-font-size:10px;--sc-heading-6-line-height:12px;--sc-heading-6-font-weight:700;--sc-body-bold-font-size:16px;--sc-body-bold-line-height:20px;--sc-body-bold-font-weight:700;--sc-body-font-size:16px;--sc-body-line-height:20px;--sc-body-font-weight:400;--sc-body-small-bold-font-size:12px;--sc-body-small-bold-line-height:16px;--sc-body-small-bold-font-weight:700;--sc-body-small-font-size:12px;--sc-body-small-line-height:16px;--sc-body-small-font-weight:400}:root{--sc-breakpoint-sm:576px;--sc-breakpoint-md:768px;--sc-breakpoint-lg:992px}.searchcraft-input-label{font-family:var(--sc-font-family);-webkit-font-smoothing:antialiased;font-size:var(--sc-body-small-bold-font-size);font-weight:var(--sc-body-small-bold-font-weight);line-height:var(--sc-body-small-bold-line-height);color:var(--sc-content-neutral-primary);margin-top:4px;margin-bottom:4px}";
+const SearchcraftInputLabelStyle0 = searchcraftInputLabelModuleCss;
+const SearchcraftInputLabel = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * The classname applied to the label element.
+         */
+        this.inputLabelClassName = '';
+    }
+    render() {
+        return (index.h("label", { key: '4f913c1d9027ff781725a01e71e241cb5767eadb', class: index$1.classNames('searchcraft-input-label', this.inputLabelClassName), htmlFor: 'searchcraft-input-id' }, this.label));
+    }
+};
+SearchcraftInputLabel.style = SearchcraftInputLabelStyle0;
+exports.searchcraft_button = SearchcraftButton;
+exports.searchcraft_error_message = SearchcraftErrorMessage;
+exports.searchcraft_input_label = SearchcraftInputLabel;
+//# sourceMappingURL=searchcraft-button_3.cjs.entry.js.map

package/dist/cjs/searchcraft-button_3.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"searchcraft-button.searchcraft-error-message.searchcraft-input-label.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,0BAA0B,GAAG,46HAA46H,CAAC;AACh9H,gCAAe,0BAA0B;;MCoB5B,iBAAiB;IAL9B;;;;;;QAaU,aAAQ,GAAG,KAAK,CAAC;;;;QAIjB,iBAAY,GAAG,MAAM,CAAC;;;;QAItB,UAAK,GAAG,QAAQ,CAAC;QAOhB,iBAAY,GAAG,KAAK,CAAC;QAEtB,gBAAW,GAAG;YACpB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;SACzB,CAAC;KAgCH;IA9BC,MAAM;QACJ,QACEA,QAACC,cAAQ,uDACN,IAAI,CAAC,QAAQ,IACZD,oBACE,KAAK,EAAEE,kBAAU,CAAC,oBAAoB,CAAC,EACvC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,YAAY,IAChBF,yCAA4B,KAE5B,IAAI,CAAC,WAAW,CACjB,CACM,KAETA,oBACE,KAAK,EAAEE,kBAAU,CAAC,oBAAoB,CAAC,EACvC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,YAAY,KAAK,MAAM,IAAI,IAAI,CAAC,WAAW,EACjDF,kBAAM,KAAK,EAAEE,kBAAU,CAAC,aAAa,EAAE,0BAA0B,CAAC,IAC/D,IAAI,CAAC,KAAK,CACN,CACA,CACV,CACQ,EACX;KACH;;;;AC/EH,MAAM,gCAAgC,GAAG,4kHAA4kH,CAAC;AACtnH,sCAAe,gCAAgC;;MCelC,uBAAuB;;;;IAMlC,MAAM;QACJ,QACEF,gEAAG,KAAK,EAAC,2BAA2B,IACjC,IAAI,CAAC,YAAY,IAAI,0BAA0B,CAC9C,EACJ;KACH;;;;AC5BH,MAAM,8BAA8B,GAAG,0nHAA0nH,CAAC;AAClqH,oCAAe,8BAA8B;;MCgBhC,qBAAqB;IALlC;;;;;QASU,wBAAmB,GAAI,EAAE,CAAC;KAanC;IAVC,MAAM;QACJ,QACEA,oEACE,KAAK,EAAEE,kBAAU,CAAC,yBAAyB,EAAE,IAAI,CAAC,mBAAmB,CAAC,EACtE,OAAO,EAAC,sBAAsB,IAE7B,IAAI,CAAC,KAAK,CACL,EACR;KACH;;;;;;;;","names":["h","Fragment","classNames"],"sources":["src/components/searchcraft-button/searchcraft-button.module.scss?tag=searchcraft-button","src/components/searchcraft-button/searchcraft-button.tsx","src/components/searchcraft-error-message/searchcraft-error-message.module.scss?tag=searchcraft-error-message","src/components/searchcraft-error-message/searchcraft-error-message.tsx","src/components/searchcraft-input-label/searchcraft-input-label.module.scss?tag=searchcraft-input-label","src/components/searchcraft-input-label/searchcraft-input-label.tsx"],"sourcesContent":[".searchcraft-button {\n @include body-bold;\n\n border-radius: 8px;\n display: flex;\n padding: 12px 20px;\n position: relative;\n\n background-color: var(--sc-surface-brand-primary);\n border: 1px solid var(--sc-border-primary);\n color: var(--sc-content-brand-on-primary);\n\n &:hover {\n cursor: pointer;\n background-color: var(--sc-surface-brand-primary-hover);\n }\n\n &:focus {\n outline: 2px solid var(--sc-surface-brand-primary);\n }\n}\n\n.buttonLabel {\n position: relative;\n}","import {\n Component,\n Event,\n type EventEmitter,\n Prop,\n h,\n State,\n Fragment,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\n/**\n * This web component represents a button to be consumed within the `search-input-form` component.\n * It provides a clear, interactive way for users to submit search queries or trigger actions in a search interface.\n * It is consumed within the `searchcraft-input-form` component.\n */\n@Component({\n tag: 'searchcraft-button',\n styleUrl: 'searchcraft-button.module.scss',\n shadow: false,\n})\nexport class SearchcraftButton {\n /**\n * The icon element.\n */\n @Prop() iconElement?: Element;\n /**\n * Should the button only display an icon.\n */\n @Prop() iconOnly = false;\n /**\n * The position of the icon.\n */\n @Prop() iconPosition = 'left';\n /**\n * The label for the button.\n */\n @Prop() label = 'Search';\n\n /**\n * When the button is clicked.\n */\n @Event() buttonClick!: EventEmitter<void>;\n\n @State() isRequesting = false;\n\n private handleClick = () => {\n this.buttonClick.emit();\n };\n\n render() {\n return (\n <Fragment>\n {this.iconOnly ? (\n <button\n class={classNames('searchcraft-button')}\n onClick={this.handleClick}\n type='submit'\n >\n {this.isRequesting ? (\n <searchcraft-spinner-dark />\n ) : (\n this.iconElement\n )}\n </button>\n ) : (\n <button\n class={classNames('searchcraft-button')}\n onClick={this.handleClick}\n type='submit'\n >\n {this.iconPosition === 'left' && this.iconElement}\n <span class={classNames('buttonLabel', 'searchcraft-button-label')}>\n {this.label}\n </span>\n </button>\n )}\n </Fragment>\n );\n }\n}\n",".searchcraft-error-message {\n @include body-small();\n color: var(--sc-content-danger);\n margin: 0;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n/**\n * This web component is designed to display a user-friendly error message when a search query fails, providing clear feedback to users and enhancing their experience when an issue arises during the search process.\n *\n * ## Usage\n * ```html\n * \n * <searchcraft-error-message error-message=\"No search results found for query\" />\n * ```\n */\n@Component({\n tag: 'searchcraft-error-message',\n styleUrl: 'searchcraft-error-message.module.scss',\n shadow: false,\n})\nexport class SearchcraftErrorMessage {\n /**\n * The error message.\n */\n @Prop() errorMessage?: string;\n\n render() {\n return (\n <p class='searchcraft-error-message'>\n {this.errorMessage || 'Search term is required.'}\n </p>\n );\n }\n}\n",".searchcraft-input-label {\n @include body-small-bold();\n color: var(--sc-content-neutral-primary);\n margin-top: 4px;\n margin-bottom: 4px;\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport classNames from 'classnames';\n\n/**\n * This web component serves as the input label for the searchcraft-input-form component.\n *\n * ## Usage\n * ```html\n * \n * <searchcraft-input-label label=\"Search\" />\n * ```\n */\n@Component({\n tag: 'searchcraft-input-label',\n styleUrl: 'searchcraft-input-label.module.scss',\n shadow: false,\n})\nexport class SearchcraftInputLabel {\n /**\n * The classname applied to the label element.\n */\n @Prop() inputLabelClassName? = '';\n @Prop() label: string;\n\n render() {\n return (\n <label\n class={classNames('searchcraft-input-label', this.inputLabelClassName)}\n htmlFor='searchcraft-input-id'\n >\n {this.label}\n </label>\n );\n }\n}\n"],"version":3}