@searchcraft/javascript-sdk 0.3.0 → 0.4.0

package/dist/collection/components/searchcraft-input/searchcraft-input.module.css

@@ -1,249 +1,190 @@
 :root {
-  --font-stack: Helvetica, Arial, sans-serif;
+  /** Appearance & Layout */
+  --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;
 }
 
-.inputContainerLTR {
-  position: relative;
-  width: 100%;
+: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;
 }
 
-.inputContainerRTL {
-  position: relative;
-  width: 100%;
-  margin-left: 8px;
+:root {
+  /** Typography */
+  --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;
 }
 
-.inputLightLTR {
-  border: none;
-  border-radius: 8px;
-  font-family: "Brygada 1918";
-  outline: none;
-  padding-bottom: 15px;
-  padding-top: 15px;
-  width: 100%;
-  background-color: #EDEDED;
-  color: #292929;
-  margin-right: 8px;
-  padding-left: 36px;
-  padding-right: 16px;
-}
-.inputLightLTR::placeholder {
-  font-family: "Brygada 1918";
-  font-size: 16px;
-  font-weight: 600;
-}
-.inputLightLTR::placeholder {
-  color: #737373;
-}
-.inputLightLTR:focus {
-  outline: 2px solid #000;
+searchcraft-input {
+  display: flex;
+  flex: 1;
 }
 
-.inputDarkLTR {
-  border: none;
-  border-radius: 8px;
-  font-family: "Brygada 1918";
-  outline: none;
-  padding-bottom: 15px;
-  padding-top: 15px;
-  width: 100%;
-  background-color: #1A1A1A;
-  color: #FFF;
-  margin-right: 8px;
-  padding-left: 36px;
-  padding-right: 16px;
-}
-.inputDarkLTR::placeholder {
-  font-family: "Brygada 1918";
-  font-size: 16px;
-  font-weight: 600;
-}
-.inputDarkLTR::placeholder {
-  color: #BFBFBF;
-}
-.inputDarkLTR:focus {
-  outline: 2px solid #FFF;
+.searchcraft-input-wrapper {
+  display: inline-block;
+  position: relative;
+  cursor: text;
 }
 
-.inputErrorLightLTR {
-  border: none;
-  border-radius: 8px;
-  font-family: "Brygada 1918";
-  outline: none;
-  padding-bottom: 15px;
-  padding-top: 15px;
-  width: 100%;
-  background-color: #EDEDED;
-  color: #292929;
-  outline: 2px solid #c00;
-  margin-right: 8px;
-  padding-left: 36px;
-  padding-right: 16px;
-}
-.inputErrorLightLTR::placeholder {
-  font-family: "Brygada 1918";
-  font-size: 16px;
-  font-weight: 600;
-}
-.inputErrorLightLTR::placeholder {
-  color: #737373;
-}
-.inputErrorLightLTR:focus {
-  outline: 2px solid #000;
-}
-.inputErrorLightLTR:focus-visible {
-  outline: 2px solid #c00;
+.searchcraft-input-wrapper-flex {
+  display: flex;
+  flex: 1;
 }
 
-.inputErrorDarkLTR {
-  border: none;
-  border-radius: 8px;
-  font-family: "Brygada 1918";
-  outline: none;
-  padding-bottom: 15px;
-  padding-top: 15px;
-  width: 100%;
-  background-color: #1A1A1A;
-  color: #FFF;
-  outline: 2px solid #FFB3B3;
-  margin-right: 8px;
-  padding-left: 36px;
-  padding-right: 16px;
-}
-.inputErrorDarkLTR::placeholder {
-  font-family: "Brygada 1918";
-  font-size: 16px;
-  font-weight: 600;
-}
-.inputErrorDarkLTR::placeholder {
-  color: #BFBFBF;
-}
-.inputErrorDarkLTR:focus {
-  outline: 2px solid #FFF;
-}
-.inputErrorDarkLTR:focus-visible {
-  outline: 2px solid #FFB3B3;
+.searchcraft-input-flex {
+  flex: 1;
 }
 
-.inputLightRTL {
+.searchcraft-input {
+  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);
+  background-color: var(--sc-surface-neutral-secondary);
   border: none;
-  border-radius: 8px;
-  font-family: "Brygada 1918";
+  border-radius: var(--sc-input-border-radius);
+  color: var(--sc-content-neutral-primary);
   outline: none;
-  padding-bottom: 15px;
-  padding-top: 15px;
-  width: 100%;
-  background-color: #EDEDED;
-  color: #292929;
-  margin-left: 8px;
-  padding-left: 16px;
-  padding-right: 36px;
-  text-align: right;
-}
-.inputLightRTL::placeholder {
-  font-family: "Brygada 1918";
-  font-size: 16px;
-  font-weight: 600;
-}
-.inputLightRTL::placeholder {
-  color: #737373;
-}
-.inputLightRTL:focus {
-  outline: 2px solid #000;
+  padding-left: var(--sc-input-padding-left);
+  padding-right: var(--sc-input-padding-right);
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+.searchcraft-input::placeholder {
+  color: var(--sc-content-disabled);
+}
+.searchcraft-input:focus {
+  outline: var(--sc-border-brand) solid 2px;
+}
+.searchcraft-input:focus::placeholder {
+  opacity: 0;
 }
 
-.inputDarkRTL {
-  border: none;
-  border-radius: 8px;
-  font-family: "Brygada 1918";
-  outline: none;
-  padding-bottom: 15px;
-  padding-top: 15px;
-  width: 100%;
-  background-color: #1A1A1A;
-  color: #FFF;
-  margin-left: 8px;
-  padding-left: 16px;
-  padding-right: 36px;
-  text-align: right;
-}
-.inputDarkRTL::placeholder {
-  font-family: "Brygada 1918";
-  font-size: 16px;
-  font-weight: 600;
-}
-.inputDarkRTL::placeholder {
-  color: #BFBFBF;
-}
-.inputDarkRTL:focus {
-  outline: 2px solid #FFF;
+.searchcraft-input.error {
+  color: var(--sc-content-danger);
+  outline: var(--sc-border-danger) solid 2px;
+}
+.searchcraft-input.error:focus {
+  outline: var(--sc-border-danger) solid 2px;
 }
 
-.inputErrorLightRTL {
-  border: none;
-  border-radius: 8px;
-  font-family: "Brygada 1918";
-  outline: none;
-  padding-bottom: 15px;
-  padding-top: 15px;
-  width: 100%;
-  background-color: #EDEDED;
-  color: #292929;
-  outline: 2px solid #c00;
-  margin-left: 8px;
-  padding-left: 16px;
-  padding-right: 36px;
-  text-align: right;
-}
-.inputErrorLightRTL::placeholder {
-  font-family: "Brygada 1918";
-  font-size: 16px;
-  font-weight: 600;
-}
-.inputErrorLightRTL::placeholder {
-  color: #737373;
-}
-.inputErrorLightRTL:focus {
-  outline: 2px solid #000;
-}
-.inputErrorLightRTL:focus-visible {
-  outline: 2px solid #c00;
+.searchcraft-input-search-icon-wrapper {
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  position: absolute;
+  pointer-events: none;
+  bottom: 0;
+  left: 0;
+  top: 0;
+  width: var(--sc-input-padding-left);
 }
 
-.inputErrorDarkRTL {
-  border: none;
-  border-radius: 8px;
-  font-family: "Brygada 1918";
-  outline: none;
-  padding-bottom: 15px;
-  padding-top: 15px;
-  width: 100%;
-  background-color: #1A1A1A;
-  color: #FFF;
-  outline: 2px solid #FFB3B3;
-  margin-left: 8px;
-  padding-left: 16px;
-  padding-right: 36px;
-  text-align: right;
-}
-.inputErrorDarkRTL::placeholder {
-  font-family: "Brygada 1918";
-  font-size: 16px;
-  font-weight: 600;
-}
-.inputErrorDarkRTL::placeholder {
-  color: #BFBFBF;
-}
-.inputErrorDarkRTL:focus {
-  outline: 2px solid #FFF;
-}
-.inputErrorDarkRTL:focus-visible {
-  outline: 2px solid #FFB3B3;
+.searchcraft-input-search-icon {
+  pointer-events: none;
+  width: var(--sc-input-search-icon-size);
+  height: var(--sc-input-search-icon-size);
 }
 
-.inputWrapper {
+.searchcraft-input-clear-button {
+  all: unset;
   align-items: center;
+  justify-content: center;
+  cursor: pointer;
   display: flex;
-  position: relative;
-  width: 100%;
+  position: absolute;
+  border: none;
+  outline: none;
+  bottom: 0;
+  right: 0;
+  top: 0;
+  width: var(--sc-input-padding-right);
+}
+
+.searchcraft-input-clear-icon {
+  width: var(--sc-input-clear-icon-size);
+  height: var(--sc-input-clear-icon-size);
 }

package/dist/collection/components/searchcraft-input-label/searchcraft-input-label.js

@@ -1,23 +1,16 @@
 import { h } from "@stencil/core";
-import classNames from "classnames";
 export class SearchcraftInputLabel {
     constructor() {
         this.inputLabelClassName = '';
         this.label = undefined;
-        this.theme = 'light';
-    }
-    isLightTheme() {
-        return this.theme === 'light';
     }
     render() {
         if (!this.label) {
             return null;
         }
-        const labelStyle = this.isLightTheme() ? 'labelLight' : 'labelDark';
-        return (h("label", { class: classNames(labelStyle, this.inputLabelClassName), htmlFor: 'searchcraft-input-id' }, this.label));
+        return (h("label", { class: 'searchcraft-input-label', htmlFor: 'searchcraft-input-id' }, this.label));
     }
     static get is() { return "searchcraft-input-label"; }
-    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["searchcraft-input-label.module.scss"]
@@ -67,10 +60,5 @@ export class SearchcraftInputLabel {
             }
         };
     }
-    static get states() {
-        return {
-            "theme": {}
-        };
-    }
 }
 //# sourceMappingURL=searchcraft-input-label.js.map

package/dist/collection/components/searchcraft-input-label/searchcraft-input-label.js.map

@@ -1 +1 @@
-{"version":3,"file":"searchcraft-input-label.js","sourceRoot":"","sources":["../../../src/components/searchcraft-input-label/searchcraft-input-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,UAAU,MAAM,YAAY,CAAC;AAOpC,MAAM,OAAO,qBAAqB;;mCACD,EAAE;;qBAEhB,OAAO;;IAEhB,YAAY;QAClB,OAAO,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC;IAChC,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAChB,OAAO,IAAI,CAAC;QACd,CAAC;QACD,MAAM,UAAU,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,CAAC;QACpE,OAAO,CACL,aACE,KAAK,EAAE,UAAU,CAAC,UAAU,EAAE,IAAI,CAAC,mBAAmB,CAAC,EACvD,OAAO,EAAC,sBAAsB,IAE7B,IAAI,CAAC,KAAK,CACL,CACT,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, State } from '@stencil/core';\nimport classNames from 'classnames';\n\n@Component({\n  tag: 'searchcraft-input-label',\n  styleUrl: 'searchcraft-input-label.module.scss',\n  shadow: true,\n})\nexport class SearchcraftInputLabel {\n  @Prop() inputLabelClassName? = '';\n  @Prop() label?: string;\n  @State() theme = 'light';\n\n  private isLightTheme() {\n    return this.theme === 'light';\n  }\n\n  render() {\n    if (!this.label) {\n      return null;\n    }\n    const labelStyle = this.isLightTheme() ? 'labelLight' : 'labelDark';\n    return (\n      <label\n        class={classNames(labelStyle, this.inputLabelClassName)}\n        htmlFor='searchcraft-input-id'\n      >\n        {this.label}\n      </label>\n    );\n  }\n}\n"]}
+{"version":3,"file":"searchcraft-input-label.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-input-label/searchcraft-input-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,qBAAqB;;mCACD,EAAE;;;IAGjC,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAChB,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,CACL,aAAO,KAAK,EAAC,yBAAyB,EAAC,OAAO,EAAC,sBAAsB,IAClE,IAAI,CAAC,KAAK,CACL,CACT,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'searchcraft-input-label',\n  styleUrl: 'searchcraft-input-label.module.scss',\n  shadow: false,\n})\nexport class SearchcraftInputLabel {\n  @Prop() inputLabelClassName? = '';\n  @Prop() label?: string;\n\n  render() {\n    if (!this.label) {\n      return null;\n    }\n    return (\n      <label class='searchcraft-input-label' htmlFor='searchcraft-input-id'>\n        {this.label}\n      </label>\n    );\n  }\n}\n"]}

package/dist/collection/components/searchcraft-input-label/searchcraft-input-label.module.css

@@ -1,21 +1,109 @@
 :root {
-  --font-stack: Helvetica, Arial, sans-serif;
+  /** Appearance & Layout */
+  --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;
 }
 
-.labelLight {
-  font-family: var(--font-stack);
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 16px;
-  margin-top: 4px;
-  color: #292929;
+: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 {
+  /** Typography */
+  --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;
 }
 
-.labelDark {
-  font-family: var(--font-stack);
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 16px;
+.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;
-  color: #FFF;
+  margin-bottom: 4px;
 }

package/dist/collection/components/searchcraft-results-info/searchcraft-results-info.js

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import { useSearchcraftStore } from "../../provider/store";
+import { formatNumberWithCommas } from "../../utils/utils";
 export class SearchcraftResultsInfo {
     constructor() {
         this.isRequesting = false;
@@ -13,7 +14,7 @@ export class SearchcraftResultsInfo {
             this.isRequesting = state.isRequesting;
             this.resultsCount = ((_b = (_a = state.searchResults) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.count) || 0;
             this.responseTime = ((((_d = (_c = state.searchResults) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.time_taken) || 0) * 1000).toFixed(2);
-            this.query = state.query || ''; // Update query from store
+            this.query = state.query || '';
         });
     }
     disconnectedCallback() {
@@ -25,10 +26,10 @@ export class SearchcraftResultsInfo {
         if (!this.query || this.resultsCount === 0) {
             return null;
         }
-        return (h("div", { class: 'container' }, h("p", { class: 'resultsInfo' }, this.resultsCount, " results found in ", this.responseTime, "ms")));
+        const formattedResults = formatNumberWithCommas(this.resultsCount);
+        return (h("div", { class: 'searchcraft-results-info-container' }, h("p", { class: 'searchcraft-results-info-content' }, formattedResults, " results found in ", this.responseTime, "ms")));
     }
     static get is() { return "searchcraft-results-info"; }
-    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["searchcraft-results-info.module.scss"]

package/dist/collection/components/searchcraft-results-info/searchcraft-results-info.js.map

@@ -1 +1 @@
-{"version":3,"file":"searchcraft-results-info.js","sourceRoot":"","sources":["../../../src/components/searchcraft-results-info/searchcraft-results-info.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAOtD,MAAM,OAAO,sBAAsB;;4BACT,KAAK;4BACL,CAAC;4BACD,EAAE;qBACT,EAAE;;IAInB,iBAAiB;QACf,IAAI,CAAC,WAAW,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;;YACzD,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,YAAY,CAAC;YACvC,IAAI,CAAC,YAAY,GAAG,CAAA,MAAA,MAAA,KAAK,CAAC,aAAa,0CAAE,IAAI,0CAAE,KAAK,KAAI,CAAC,CAAC;YAC1D,IAAI,CAAC,YAAY,GAAG,CAClB,CAAC,CAAA,MAAA,MAAA,KAAK,CAAC,aAAa,0CAAE,IAAI,0CAAE,UAAU,KAAI,CAAC,CAAC,GAAG,IAAI,CACpD,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;YACb,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,0BAA0B;QAC5D,CAAC,CAAC,CAAC;IACL,CAAC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,YAAY,KAAK,CAAC,EAAE,CAAC;YAC3C,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,CACL,WAAK,KAAK,EAAC,WAAW;YACpB,SAAG,KAAK,EAAC,aAAa;gBACnB,IAAI,CAAC,YAAY;;gBAAoB,IAAI,CAAC,YAAY;qBACrD,CACA,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, State } from '@stencil/core';\nimport { useSearchcraftStore } from '@provider/store';\n\n@Component({\n  tag: 'searchcraft-results-info',\n  styleUrl: 'searchcraft-results-info.module.scss',\n  shadow: true,\n})\nexport class SearchcraftResultsInfo {\n  @State() isRequesting = false;\n  @State() resultsCount = 0;\n  @State() responseTime = '';\n  @State() query = ''; // Track the query\n\n  unsubscribe: () => void;\n\n  connectedCallback() {\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      this.isRequesting = state.isRequesting;\n      this.resultsCount = state.searchResults?.data?.count || 0;\n      this.responseTime = (\n        (state.searchResults?.data?.time_taken || 0) * 1000\n      ).toFixed(2);\n      this.query = state.query || ''; // Update query from store\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribe) {\n      this.unsubscribe();\n    }\n  }\n\n  render() {\n    if (!this.query || this.resultsCount === 0) {\n      return null;\n    }\n\n    return (\n      <div class='container'>\n        <p class='resultsInfo'>\n          {this.resultsCount} results found in {this.responseTime}ms\n        </p>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"searchcraft-results-info.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-results-info/searchcraft-results-info.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAEtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAOtD,MAAM,OAAO,sBAAsB;;4BACT,KAAK;4BACL,CAAC;4BACD,EAAE;qBACT,EAAE;;IAInB,iBAAiB;QACf,IAAI,CAAC,WAAW,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;;YACzD,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,YAAY,CAAC;YACvC,IAAI,CAAC,YAAY,GAAG,CAAA,MAAA,MAAA,KAAK,CAAC,aAAa,0CAAE,IAAI,0CAAE,KAAK,KAAI,CAAC,CAAC;YAC1D,IAAI,CAAC,YAAY,GAAG,CAClB,CAAC,CAAA,MAAA,MAAA,KAAK,CAAC,aAAa,0CAAE,IAAI,0CAAE,UAAU,KAAI,CAAC,CAAC,GAAG,IAAI,CACpD,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;YACb,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;QACjC,CAAC,CAAC,CAAC;IACL,CAAC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,YAAY,KAAK,CAAC,EAAE,CAAC;YAC3C,OAAO,IAAI,CAAC;QACd,CAAC;QACD,MAAM,gBAAgB,GAAG,sBAAsB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACnE,OAAO,CACL,WAAK,KAAK,EAAC,oCAAoC;YAC7C,SAAG,KAAK,EAAC,kCAAkC;gBACxC,gBAAgB;;gBAAoB,IAAI,CAAC,YAAY;qBACpD,CACA,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, State } from '@stencil/core';\n\nimport { useSearchcraftStore } from '@provider/store';\n\nimport { formatNumberWithCommas } from '@utils/utils';\n\n@Component({\n  tag: 'searchcraft-results-info',\n  styleUrl: 'searchcraft-results-info.module.scss',\n  shadow: false,\n})\nexport class SearchcraftResultsInfo {\n  @State() isRequesting = false;\n  @State() resultsCount = 0;\n  @State() responseTime = '';\n  @State() query = '';\n\n  unsubscribe: () => void;\n\n  connectedCallback() {\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      this.isRequesting = state.isRequesting;\n      this.resultsCount = state.searchResults?.data?.count || 0;\n      this.responseTime = (\n        (state.searchResults?.data?.time_taken || 0) * 1000\n      ).toFixed(2);\n      this.query = state.query || '';\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribe) {\n      this.unsubscribe();\n    }\n  }\n\n  render() {\n    if (!this.query || this.resultsCount === 0) {\n      return null;\n    }\n    const formattedResults = formatNumberWithCommas(this.resultsCount);\n    return (\n      <div class='searchcraft-results-info-container'>\n        <p class='searchcraft-results-info-content'>\n          {formattedResults} results found in {this.responseTime}ms\n        </p>\n      </div>\n    );\n  }\n}\n"]}