@searchcraft/javascript-sdk 0.3.1 → 0.4.0

package/dist/collection/components/searchcraft-results-info/searchcraft-results-info.module.css

@@ -1,24 +1,118 @@
 :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;
 }
 
-.resultsInfoContainer {
-  border-bottom: 1px solid #D9D9D9;
+: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;
+}
+
+.searchcraft-results-info-container {
+  border-bottom: 1px solid var(--sc-surface-disabled);
   display: flex;
   justify-content: flex-start;
-  width: 100%;
 }
 
-.resultsInfoContent {
-  color: #292929;
-  font-family: var(--font-stack);
+.searchcraft-results-info-content {
+  color: var(--sc-content-primary);
+  font-family: var(--sc-font-family);
   font-size: 18px;
   font-weight: 600;
   line-height: 20px;
-  margin: 24px 0 8px;
+  margin: 0px 0 8px;
 }
 @media (max-width: 900px) {
-  .resultsInfoContent {
+  .searchcraft-results-info-content {
     margin: 0;
     margin-bottom: 8px;
   }

package/dist/collection/components/searchcraft-slider/searchcraft-slider.js

@@ -1,76 +1,57 @@
 import { h, } from "@stencil/core";
+import { getMillis } from "../../utils/utils";
 import classNames from "classnames";
-import { useSearchcraftStore } from "../../provider/store";
 export class SearchcraftSlider {
     constructor() {
-        this.searchStore = useSearchcraftStore.getState();
-        this.updateYears = async () => {
-            this.searchStore.setYearsRange([this.startYear, this.endYear]);
+        this.updateValues = async () => {
             this.rangeChanged.emit({
-                startYear: this.startYear,
-                endYear: this.endYear,
+                startValue: this.startValue,
+                endValue: this.endValue,
             });
-            try {
-                if (typeof this.query === 'string' && this.query.trim() !== '') {
-                    await this.searchStore.search();
-                }
-                else {
-                    console.warn('Query is missing or empty, skipping search request.');
-                }
-            }
-            catch (error) {
-                console.error('Search failed:', error);
-            }
         };
-        this.handleStartYearChange = (event) => {
+        this.handlestartValueChange = (event) => {
             const value = Number.parseInt(event.target.value, 10);
-            if (value <= this.endYear) {
-                this.startYear = value;
-                this.updateYears();
+            if (value <= this.endValue) {
+                this.startValue = value;
+                this.updateValues();
             }
         };
-        this.handleEndYearChange = (event) => {
+        this.handleendValueChange = (event) => {
             const value = Number.parseInt(event.target.value, 10);
-            if (value >= this.startYear) {
-                this.endYear = value;
-                this.updateYears();
+            if (value >= this.startValue) {
+                this.endValue = value;
+                this.updateValues();
             }
         };
-        this.maxYear = new Date().getFullYear();
-        this.minYear = 2014;
-        this.endYear = this.maxYear;
+        this.max = 100;
+        this.min = 0;
+        this.granularity = getMillis('month');
+        this.dataType = 'number';
+        this.endValue = this.max;
+        this.startValue = this.min;
         this.hasSearched = false;
         this.query = '';
         this.resultsCount = 0;
-        this.startYear = this.minYear;
     }
     componentDidLoad() {
-        this.unsubscribe = useSearchcraftStore.subscribe((state) => {
-            var _a, _b, _c;
-            if (state.query.length > 0) {
-                this.hasSearched = true;
-                this.resultsCount = ((_c = (_b = (_a = state.searchResults) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.hits) === null || _c === void 0 ? void 0 : _c.length) || 0;
-            }
-            this.query = state.query;
-        });
-    }
-    disconnectedCallback() {
-        if (this.unsubscribe) {
-            this.unsubscribe();
-        }
+        this.startValue = this.min;
+        this.endValue = this.max;
     }
     render() {
-        if (!this.query || this.resultsCount === 0) {
-            return null;
-        }
-        const rangeMin = this.minYear;
-        const rangeMax = this.maxYear;
-        const startPercent = ((this.startYear - rangeMin) / (rangeMax - rangeMin)) * 100;
-        const endPercent = ((this.endYear - rangeMin) / (rangeMax - rangeMin)) * 100;
-        return (h("div", { class: classNames('sliderContainer', 'searchcraft-slider-container') }, h("div", { class: classNames('rangeContainer', 'searchcraft-slider-range-container') }, h("div", { class: classNames('activeRange', 'searchcraft-slider-active-range'), style: {
+        const rangeMin = this.min;
+        const rangeMax = this.max;
+        const startPercent = ((this.startValue - rangeMin) / (rangeMax - rangeMin)) * 100;
+        const endPercent = ((this.endValue - rangeMin) / (rangeMax - rangeMin)) * 100;
+        const startLabel = this.dataType === 'number'
+            ? this.startValue
+            : new Date(this.startValue).getFullYear();
+        const endLabel = this.dataType === 'number'
+            ? this.endValue
+            : new Date(this.endValue).getFullYear();
+        return (h("div", { key: '5b85ed684719fc53cb2c6d4d6b9b25dda95238c4', class: classNames('sliderContainer', 'searchcraft-slider-container') }, h("div", { key: '4222101284dc36c5fc70f033fbdd5080e4c25f41', class: classNames('rangeContainer', 'searchcraft-slider-range-container') }, h("div", { key: '8610d8fbdd7c920e93969d588d75e4b1266d24a9', class: classNames('activeRange', 'searchcraft-slider-active-range'), style: {
                 left: `${startPercent}%`,
                 width: `${endPercent - startPercent}%`,
-            } }), h("input", { class: classNames('rangeSlider', 'searchcraft-slider-range-slider-start-thumb'), max: this.maxYear, min: this.minYear, onInput: this.handleStartYearChange, step: '1', type: 'range', value: this.startYear }), h("input", { class: classNames('rangeSlider', 'searchcraft-slider-range-slider-end-thumb'), max: this.maxYear, min: this.minYear, onInput: this.handleEndYearChange, step: '1', type: 'range', value: this.endYear })), h("div", { class: classNames('yearLabels', 'searchcraft-slider-year-label-container') }, h("span", { class: classNames('yearLabel', 'searchcraft-slider-start-year-label') }, this.startYear), h("span", { class: classNames('yearLabel', 'searchcraft-slider-end-year-label') }, this.endYear))));
+            } }), h("input", { key: 'aafc7ecf347131e8f86bce144d046ca33d3ce7a9', class: classNames('rangeSlider', 'searchcraft-slider-range-slider-start-thumb'), max: this.max, min: this.min, onInput: this.handlestartValueChange, step: this.granularity, type: 'range', value: this.startValue }), h("input", { key: '8247c65541d1fe70ac078d4f3ddf9111919750e7', class: classNames('rangeSlider', 'searchcraft-slider-range-slider-end-thumb'), max: this.max, min: this.min, onInput: this.handleendValueChange, step: this.granularity, type: 'range', value: this.endValue })), h("div", { key: '43f708034b96d7683dea2c60c95b1689bce47ad5', class: classNames('yearLabels', 'searchcraft-slider-year-label-container') }, h("span", { key: '39c5a9f41c9ddc87f81cb7fc488fdc61afd82ae6', class: classNames('yearLabel', 'searchcraft-slider-start-year-label') }, startLabel), h("span", { key: '536fb604734b109318f3b4da38743c00581f369a', class: classNames('yearLabel', 'searchcraft-slider-end-year-label') }, endLabel))));
     }
     static get is() { return "searchcraft-slider"; }
     static get originalStyleUrls() {
@@ -85,7 +66,7 @@ export class SearchcraftSlider {
     }
     static get properties() {
         return {
-            "maxYear": {
+            "max": {
                 "type": "number",
                 "mutable": false,
                 "complexType": {
@@ -99,11 +80,11 @@ export class SearchcraftSlider {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "max-year",
+                "attribute": "max",
                 "reflect": false,
-                "defaultValue": "new Date().getFullYear()"
+                "defaultValue": "100"
             },
-            "minYear": {
+            "min": {
                 "type": "number",
                 "mutable": false,
                 "complexType": {
@@ -117,19 +98,55 @@ export class SearchcraftSlider {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "min-year",
+                "attribute": "min",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "granularity": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "granularity",
+                "reflect": false,
+                "defaultValue": "getMillis('month')"
+            },
+            "dataType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'number' | 'date'",
+                    "resolved": "\"date\" | \"number\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "data-type",
                 "reflect": false,
-                "defaultValue": "2014"
+                "defaultValue": "'number'"
             }
         };
     }
     static get states() {
         return {
-            "endYear": {},
+            "endValue": {},
+            "startValue": {},
             "hasSearched": {},
             "query": {},
-            "resultsCount": {},
-            "startYear": {}
+            "resultsCount": {}
         };
     }
     static get events() {
@@ -144,8 +161,8 @@ export class SearchcraftSlider {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "{ startYear: number; endYear: number }",
-                    "resolved": "{ startYear: number; endYear: number; }",
+                    "original": "{ startValue: number; endValue: number }",
+                    "resolved": "{ startValue: number; endValue: number; }",
                     "references": {}
                 }
             }];

package/dist/collection/components/searchcraft-slider/searchcraft-slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"searchcraft-slider.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-slider/searchcraft-slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Event,\n  type EventEmitter,\n  h,\n  State,\n  Prop,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\nimport { useSearchcraftStore } from '@provider/store';\n\n@Component({\n  tag: 'searchcraft-slider',\n  styleUrl: 'searchcraft-slider.module.scss',\n  shadow: false,\n})\nexport class SearchcraftSlider {\n  @Prop() maxYear = new Date().getFullYear();\n  @Prop() minYear = 2014;\n\n  @State() endYear = this.maxYear;\n  @State() hasSearched = false;\n  @State() query = '';\n  @State() resultsCount = 0;\n  @State() startYear = this.minYear;\n\n  @Event() rangeChanged: EventEmitter<{ startYear: number; endYear: number }>;\n\n  private searchStore = useSearchcraftStore.getState();\n\n  unsubscribe: () => void;\n\n  componentDidLoad() {\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      if (state.query.length > 0) {\n        this.hasSearched = true;\n        this.resultsCount = state.searchResults?.data?.hits?.length || 0;\n      }\n      this.query = state.query;\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribe) {\n      this.unsubscribe();\n    }\n  }\n\n  private updateYears = async () => {\n    this.searchStore.setYearsRange([this.startYear, this.endYear]);\n    this.rangeChanged.emit({\n      startYear: this.startYear,\n      endYear: this.endYear,\n    });\n\n    try {\n      if (typeof this.query === 'string' && this.query.trim() !== '') {\n        await this.searchStore.search();\n      } else {\n        console.warn('Query is missing or empty, skipping search request.');\n      }\n    } catch (error) {\n      console.error('Search failed:', error);\n    }\n  };\n\n  private handleStartYearChange = (event: InputEvent) => {\n    const value = Number.parseInt((event.target as HTMLInputElement).value, 10);\n    if (value <= this.endYear) {\n      this.startYear = value;\n      this.updateYears();\n    }\n  };\n\n  private handleEndYearChange = (event: InputEvent) => {\n    const value = Number.parseInt((event.target as HTMLInputElement).value, 10);\n    if (value >= this.startYear) {\n      this.endYear = value;\n      this.updateYears();\n    }\n  };\n\n  render() {\n    if (!this.query || this.resultsCount === 0) {\n      return null;\n    }\n\n    const rangeMin = this.minYear;\n    const rangeMax = this.maxYear;\n    const startPercent =\n      ((this.startYear - rangeMin) / (rangeMax - rangeMin)) * 100;\n    const endPercent =\n      ((this.endYear - rangeMin) / (rangeMax - rangeMin)) * 100;\n\n    return (\n      <div\n        class={classNames('sliderContainer', 'searchcraft-slider-container')}\n      >\n        <div\n          class={classNames(\n            'rangeContainer',\n            'searchcraft-slider-range-container',\n          )}\n        >\n          <div\n            class={classNames('activeRange', 'searchcraft-slider-active-range')}\n            style={{\n              left: `${startPercent}%`,\n              width: `${endPercent - startPercent}%`,\n            }}\n          />\n          <input\n            class={classNames(\n              'rangeSlider',\n              'searchcraft-slider-range-slider-start-thumb',\n            )}\n            max={this.maxYear}\n            min={this.minYear}\n            onInput={this.handleStartYearChange}\n            step='1'\n            type='range'\n            value={this.startYear}\n          />\n          <input\n            class={classNames(\n              'rangeSlider',\n              'searchcraft-slider-range-slider-end-thumb',\n            )}\n            max={this.maxYear}\n            min={this.minYear}\n            onInput={this.handleEndYearChange}\n            step='1'\n            type='range'\n            value={this.endYear}\n          />\n        </div>\n        <div\n          class={classNames(\n            'yearLabels',\n            'searchcraft-slider-year-label-container',\n          )}\n        >\n          <span\n            class={classNames(\n              'yearLabel',\n              'searchcraft-slider-start-year-label',\n            )}\n          >\n            {this.startYear}\n          </span>\n          <span\n            class={classNames('yearLabel', 'searchcraft-slider-end-year-label')}\n          >\n            {this.endYear}\n          </span>\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"searchcraft-slider.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-slider/searchcraft-slider.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,EAEL,CAAC,EACD,KAAK,EACL,IAAI,GACL,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,UAAU,MAAM,YAAY,CAAC;AAOpC,MAAM,OAAO,iBAAiB;;QAmBpB,iBAAY,GAAG,KAAK,IAAI,EAAE;YAChC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;gBACrB,UAAU,EAAE,IAAI,CAAC,UAAU;gBAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,CAAC,CAAC;QACL,CAAC,CAAC;QAEM,2BAAsB,GAAG,CAAC,KAAiB,EAAE,EAAE;YACrD,MAAM,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAE,KAAK,CAAC,MAA2B,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;YAC5E,IAAI,KAAK,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAC3B,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;gBACxB,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,CAAC;QACH,CAAC,CAAC;QAEM,yBAAoB,GAAG,CAAC,KAAiB,EAAE,EAAE;YACnD,MAAM,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAE,KAAK,CAAC,MAA2B,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;YAC5E,IAAI,KAAK,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;gBAC7B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;gBACtB,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,CAAC;QACH,CAAC,CAAC;mBAvCY,GAAG;mBACH,CAAC;2BACe,SAAS,CAAC,OAAO,CAAC;wBACV,QAAQ;wBAE1B,IAAI,CAAC,GAAG;0BACN,IAAI,CAAC,GAAG;2BACP,KAAK;qBACX,EAAE;4BACK,CAAC;;IAIzB,gBAAgB;QACd,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC;QAC3B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC;IAC3B,CAAC;IAyBD,MAAM;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC;QAC1B,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC;QAC1B,MAAM,YAAY,GAChB,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC,GAAG,CAAC,QAAQ,GAAG,QAAQ,CAAC,CAAC,GAAG,GAAG,CAAC;QAC/D,MAAM,UAAU,GACd,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,GAAG,CAAC,QAAQ,GAAG,QAAQ,CAAC,CAAC,GAAG,GAAG,CAAC;QAE7D,MAAM,UAAU,GACd,IAAI,CAAC,QAAQ,KAAK,QAAQ;YACxB,CAAC,CAAC,IAAI,CAAC,UAAU;YACjB,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,WAAW,EAAE,CAAC;QAE9C,MAAM,QAAQ,GACZ,IAAI,CAAC,QAAQ,KAAK,QAAQ;YACxB,CAAC,CAAC,IAAI,CAAC,QAAQ;YACf,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,WAAW,EAAE,CAAC;QAE5C,OAAO,CACL,4DACE,KAAK,EAAE,UAAU,CAAC,iBAAiB,EAAE,8BAA8B,CAAC;YAEpE,4DACE,KAAK,EAAE,UAAU,CACf,gBAAgB,EAChB,oCAAoC,CACrC;gBAED,4DACE,KAAK,EAAE,UAAU,CAAC,aAAa,EAAE,iCAAiC,CAAC,EACnE,KAAK,EAAE;wBACL,IAAI,EAAE,GAAG,YAAY,GAAG;wBACxB,KAAK,EAAE,GAAG,UAAU,GAAG,YAAY,GAAG;qBACvC,GACD;gBACF,8DACE,KAAK,EAAE,UAAU,CACf,aAAa,EACb,6CAA6C,CAC9C,EACD,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,OAAO,EAAE,IAAI,CAAC,sBAAsB,EACpC,IAAI,EAAE,IAAI,CAAC,WAAW,EACtB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,IAAI,CAAC,UAAU,GACtB;gBACF,8DACE,KAAK,EAAE,UAAU,CACf,aAAa,EACb,2CAA2C,CAC5C,EACD,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAClC,IAAI,EAAE,IAAI,CAAC,WAAW,EACtB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,IAAI,CAAC,QAAQ,GACpB,CACE;YACN,4DACE,KAAK,EAAE,UAAU,CACf,YAAY,EACZ,yCAAyC,CAC1C;gBAED,6DACE,KAAK,EAAE,UAAU,CACf,WAAW,EACX,qCAAqC,CACtC,IAEA,UAAU,CACN;gBACP,6DACE,KAAK,EAAE,UAAU,CAAC,WAAW,EAAE,mCAAmC,CAAC,IAElE,QAAQ,CACJ,CACH,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Event,\n  type EventEmitter,\n  h,\n  State,\n  Prop,\n} from '@stencil/core';\nimport { getMillis } from '@utils/utils';\nimport classNames from 'classnames';\n\n@Component({\n  tag: 'searchcraft-slider',\n  styleUrl: 'searchcraft-slider.module.scss',\n  shadow: false,\n})\nexport class SearchcraftSlider {\n  @Prop() max = 100;\n  @Prop() min = 0;\n  @Prop() granularity: number = getMillis('month');\n  @Prop() dataType: 'number' | 'date' = 'number';\n\n  @State() endValue = this.max;\n  @State() startValue = this.min;\n  @State() hasSearched = false;\n  @State() query = '';\n  @State() resultsCount = 0;\n\n  @Event() rangeChanged: EventEmitter<{ startValue: number; endValue: number }>;\n\n  componentDidLoad() {\n    this.startValue = this.min;\n    this.endValue = this.max;\n  }\n\n  private updateValues = async () => {\n    this.rangeChanged.emit({\n      startValue: this.startValue,\n      endValue: this.endValue,\n    });\n  };\n\n  private handlestartValueChange = (event: InputEvent) => {\n    const value = Number.parseInt((event.target as HTMLInputElement).value, 10);\n    if (value <= this.endValue) {\n      this.startValue = value;\n      this.updateValues();\n    }\n  };\n\n  private handleendValueChange = (event: InputEvent) => {\n    const value = Number.parseInt((event.target as HTMLInputElement).value, 10);\n    if (value >= this.startValue) {\n      this.endValue = value;\n      this.updateValues();\n    }\n  };\n\n  render() {\n    const rangeMin = this.min;\n    const rangeMax = this.max;\n    const startPercent =\n      ((this.startValue - rangeMin) / (rangeMax - rangeMin)) * 100;\n    const endPercent =\n      ((this.endValue - rangeMin) / (rangeMax - rangeMin)) * 100;\n\n    const startLabel =\n      this.dataType === 'number'\n        ? this.startValue\n        : new Date(this.startValue).getFullYear();\n\n    const endLabel =\n      this.dataType === 'number'\n        ? this.endValue\n        : new Date(this.endValue).getFullYear();\n\n    return (\n      <div\n        class={classNames('sliderContainer', 'searchcraft-slider-container')}\n      >\n        <div\n          class={classNames(\n            'rangeContainer',\n            'searchcraft-slider-range-container',\n          )}\n        >\n          <div\n            class={classNames('activeRange', 'searchcraft-slider-active-range')}\n            style={{\n              left: `${startPercent}%`,\n              width: `${endPercent - startPercent}%`,\n            }}\n          />\n          <input\n            class={classNames(\n              'rangeSlider',\n              'searchcraft-slider-range-slider-start-thumb',\n            )}\n            max={this.max}\n            min={this.min}\n            onInput={this.handlestartValueChange}\n            step={this.granularity}\n            type='range'\n            value={this.startValue}\n          />\n          <input\n            class={classNames(\n              'rangeSlider',\n              'searchcraft-slider-range-slider-end-thumb',\n            )}\n            max={this.max}\n            min={this.min}\n            onInput={this.handleendValueChange}\n            step={this.granularity}\n            type='range'\n            value={this.endValue}\n          />\n        </div>\n        <div\n          class={classNames(\n            'yearLabels',\n            'searchcraft-slider-year-label-container',\n          )}\n        >\n          <span\n            class={classNames(\n              'yearLabel',\n              'searchcraft-slider-start-year-label',\n            )}\n          >\n            {startLabel}\n          </span>\n          <span\n            class={classNames('yearLabel', 'searchcraft-slider-end-year-label')}\n          >\n            {endLabel}\n          </span>\n        </div>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -1,3 +1,102 @@
+:root {
+  /** 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;
+}
+
+: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;
+}
+
 .sliderContainer {
   align-items: center;
   display: flex;
@@ -8,7 +107,7 @@
 
 .rangeContainer {
   align-items: center;
-  background-color: #D9D9D9;
+  background-color: var(--sc-surface-disabled);
   border-radius: 999px;
   display: flex;
   position: relative;
@@ -19,7 +118,7 @@
   pointer-events: none;
 }
 .rangeContainer .activeRange {
-  background-color: #000000;
+  background-color: var(--sc-surface-brand-primary);
   border-radius: 2px;
   height: 4px;
   position: absolute;
@@ -46,9 +145,9 @@
   -webkit-appearance: none;
 }
 .rangeContainer .rangeSlider::-webkit-slider-thumb {
-  background-color: #FFFFFF;
+  background-color: var(--sc-surface-neutral-light);
   border-radius: 50%;
-  border: 2px solid #E6E6E6;
+  border: 2px solid var(--sc-border-neutral);
   cursor: pointer;
   height: 20px;
   pointer-events: all;
@@ -56,9 +155,9 @@
   -webkit-appearance: none;
 }
 .rangeContainer .rangeSlider::-moz-range-thumb {
-  background-color: #FFFFFF;
+  background-color: var(--sc-surface-neutral-light);
   border-radius: 50%;
-  border: 2px solid #E6E6E6;
+  border: 2px solid var(--sc-border-neutral);
   cursor: pointer;
   height: 20px;
   pointer-events: all;
@@ -66,7 +165,7 @@
 }
 
 .yearLabels {
-  color: #292929;
+  color: var(--sc-content-primary);
   display: flex;
   font-family: "Source Sans Pro", sans-serif;
   font-size: 15px;

package/dist/collection/components/searchcraft-spinner-dark/searchcraft-spinner-dark.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SearchcraftSpinnerDark {
     render() {
-        return (h("div", { key: 'be34b9a3ecec05fdc169145a5db5a4f37bbd404b', class: 'spinnerContainer' }, h("div", { key: 'b59ffd2fe8dd3ac990003bff3085cb571c08730e', class: 'spinnerDark' })));
+        return (h("div", { key: '8422a3414f343dbcd8f7c90ffc8ad440a52d22d9', class: 'spinnerContainer' }, h("div", { key: '06ae9efe8771068a9fec6769c0a614a98ceb8031', class: 'spinnerDark' })));
     }
     static get is() { return "searchcraft-spinner-dark"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/searchcraft-spinner-dark/searchcraft-spinner-dark.module.css

@@ -1,7 +1,106 @@
+:root {
+  /** 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;
+}
+
+: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;
+}
+
 .spinnerContainer {
   background-color: transparent;
-  height: 20px;
-  width: 20px;
+  height: var(--sc-spinner-size);
+  width: var(--sc-spinner-size);
 }
 
 .spinnerDark {
@@ -9,7 +108,7 @@
   background: conic-gradient(#000 50%, #FFFFFF);
   clip-path: circle(50%);
   height: 100%;
-  mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 6.6666666667px, rgb(0, 0, 0) 6.6666666667px);
+  mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) calc(var(--sc-spinner-size) / 3), rgb(0, 0, 0) calc(var(--sc-spinner-size) / 3));
   width: 100%;
 }
 
@@ -18,7 +117,7 @@
   background: conic-gradient(#737373 50%, #FFFFFF);
   clip-path: circle(50%);
   height: 100%;
-  mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 6.6666666667px, rgb(0, 0, 0) 6.6666666667px);
+  mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) calc(var(--sc-spinner-size) / 3), rgb(0, 0, 0) calc(var(--sc-spinner-size) / 3));
   width: 100%;
 }