npm - @searchcraft/javascript-sdk - Versions diffs - 0.3.0 → 0.3.1 - Mend

@searchcraft/javascript-sdk 0.3.0 → 0.3.1

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 (224) hide show

package/dist/collection/components/searchcraft-input/searchcraft-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"searchcraft-input.js","sourceRoot":"","sources":["~~../../../~~src/components/searchcraft-input/searchcraft-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,CAAC,EACD,IAAI,EACJ,KAAK,EACL,KAAK,EACL,QAAQ,GAET,MAAM,eAAe,CAAC;AACvB,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAYjD,MAAM,OAAO,gBAAgB;;~~4BAC6B~~,~~EAAE;qBAC1C~~,~~KAAK;6BACG~~,~~EAAE;qCACM~~,~~EAAE;iCACN~~,EAAE~~;8BACL~~,EAAE~~;+BACD,EAAE~~;~~8BACH~~,~~EAAE;4BACJ,KAAK;gCACD,cAAc;sCACR,KAAK;qBACtB,EAAE;qBAMD,OAAO;;IAExB,IAAY,YAAY;QACtB,OAAO,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC;IAChC,CAAC;IAED,iBAAiB,CAAC,KAAY;QAC5B,~~MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B,CAAC;~~QAC~~/C,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;~~IAC3C~~,CAAC;~~IAED~~,~~gBAAgB~~,CAAC,KAAoB;~~QACnC~~,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B,CAAC;~~QAC~~/C,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;~~IACpC~~,CAAC;~~IAED~~,~~gBAAgB~~;~~QACd~~,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,EAAE,CAAC;~~YACtB~~,OAAO;~~QACT~~,CAAC;~~QACD~~,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;~~QAChB~~,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;~~YACpB~~,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;~~QACzB~~,CAAC;~~IACH~~,CAAC;~~IAED~~,MAAM;QACJ,MAAM,kBAAkB,GAAG,IAAI,CAAC,sBAAsB;YACpD,CAAC,CAAC,mBAAmB;YACrB,CAAC,CAAC,mBAAmB,CAAC;QAExB,MAAM,cAAc,GAAG,~~UAAU,CAC/B,~~IAAI,CAAC,KAAK;~~YACR~~,CAAC,CAAC,IAAI,CAAC,YAAY;gBACjB,CAAC,CAAC,oBAAoB;gBACtB,CAAC,CAAC,mBAAmB;YACvB,CAAC,CAAC,IAAI,CAAC,YAAY;gBACjB,CAAC,CAAC,eAAe;gBACjB,CAAC,CAAC,cAAc,~~EACpB,mBAAmB,CACpB,~~CAAC;~~QAEF~~,MAAM,qBAAqB,GAAG,iBAAiB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAEnE,MAAM,gBAAgB,GAAG;YACvB,QAAQ,EAAE,qBAAqB,CAAC,mBAAmB,IAAI,MAAM;SAC9D,CAAC;QACF,OAAO,CACL,4DACE,KAAK,EAAE,UAAU,CACf,kBAAkB,EAClB,IAAI,CAAC,aAAa,EAClB,wBAAwB,CACzB,IAEA,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAC7B,EAAC,QAAQ;YACP,aACE,YAAY,EAAC,KAAK,EAClB,KAAK,EAAE,UAAU,CAAC,cAAc,EAAE,mBAAmB,CAAC,EACtD,EAAE,EAAC,sBAAsB,EACzB,QAAQ,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,EAC3C,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,EACzC,WAAW,EAAE,IAAI,CAAC,gBAAgB,EAClC,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,IAAI,CAAC,KAAK,~~EACjB,KAAK,EAAE,qBAAqB,GAC5B~~;YACF,iBACG;;+BAEgB,gBAAgB,CAAC,QAAQ;;eAEzC,CACK;YACP,IAAI,CAAC,iBAAiB,IAAI,CACzB,iCACE,qBAAqB,EAAE,IAAI,CAAC,qBAAqB,EACjD,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,sBAAsB,EAAE,IAAI,CAAC,sBAAsB,GACnD,CACH;YACA,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CACxB,sCACE,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,sBAAsB,EAAE,IAAI,CAAC,sBAAsB,GACnD,CACH;YACD,8BACE,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,eAAe,EAC5B,sBAAsB,EAAE,IAAI,CAAC,sBAAsB,EACnD,KAAK,EAAE,IAAI,CAAC,cAAc,GAC1B,CACO,CACZ,CAAC,CAAC,CAAC,CACF,EAAC,QAAQ;YACP,8BACE,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,eAAe,EAC5B,sBAAsB,EAAE,IAAI,CAAC,sBAAsB,EACnD,KAAK,EAAE,IAAI,CAAC,cAAc,GAC1B;YACF,aACE,YAAY,EAAC,KAAK,EAClB,KAAK,EAAE,UAAU,CAAC,cAAc,EAAE,mBAAmB,CAAC,EACtD,EAAE,EAAC,sBAAsB,EACzB,QAAQ,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,EAC3C,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,EACzC,WAAW,EAAE,IAAI,CAAC,gBAAgB,EAClC,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,qBAAqB,GAC5B;YACF,iBACG;;+BAEgB,gBAAgB,CAAC,QAAQ;;eAEzC,CACK;YACP,IAAI,CAAC,iBAAiB,IAAI,CACzB,iCACE,qBAAqB,EAAE,IAAI,CAAC,qBAAqB,EACjD,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,sBAAsB,EAAE,IAAI,CAAC,sBAAsB,GACnD,CACH;YACA,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CACxB,sCACE,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,sBAAsB,EAAE,IAAI,CAAC,sBAAsB,GACnD,CACH,CACQ,CACZ,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n h,\n Prop,\n State,\n Event,\n Fragment,\n type EventEmitter,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\nimport { parseCustomStyles } from '@utils/utils';\n\nexport interface ScInputCustomEvent<T> extends CustomEvent<T> {\n detail: T;\n target: HTMLSearchcraftInputElement;\n}\n\n@Component({\n tag: 'searchcraft-input',\n styleUrl: 'searchcraft-input.module.scss',\n shadow: ~~true~~,\n})\nexport class SearchcraftInput {\n @Prop() customStyles: string \| Record<string, string> = {};\n @Prop() error = false;\n @Prop() formClassName = '';\n @Prop() inputCaptionClassName = '';\n @Prop() inputCaptionValue = '';\n @Prop() inputClassName = '';\n @Prop() inputIconHeight = 20;\n @Prop() inputIconWidth = 20;\n @Prop() isRequesting = false;\n @Prop() placeholderValue = 'Enter Search';\n @Prop() rightToLeftOrientation = false;\n @Prop() query = '';\n\n @Event() clearInput: EventEmitter<void>;\n @Event() searchInputChange: EventEmitter<string>;\n @Event() inputKeyUp: EventEmitter<string>;\n\n @State() theme = 'light';\n\n private get isLightTheme() {\n return this.theme === 'light';\n }\n\n handleInputChange(event: Event) {\n const input = event.target as HTMLInputElement;\n this.searchInputChange.emit(input.value);\n }\n\n handleInputKeyUp(event: KeyboardEvent) {\n const input = event.target as HTMLInputElement;\n this.inputKeyUp.emit(input.value);\n }\n\n handleClearInput() {\n if (this.query === '') {\n return;\n }\n this.query = '';\n if (this.clearInput) {\n this.clearInput.emit();\n }\n }\n\n render() {\n const containerClassName = this.rightToLeftOrientation\n ? 'inputContainerRTL'\n : 'inputContainerLTR';\n\n const inputClassName = ~~classNames(\n~~ this.error\n ? this.isLightTheme\n ? 'inputErrorLightRTL'\n : 'inputErrorDarkRTL'\n : this.isLightTheme\n ? 'inputLightLTR'\n : 'inputDarkLTR'~~,\n 'searchcraft-input',\n )~~;\n\n const validatedCustomStyles = parseCustomStyles(this.customStyles);\n\n const placeholderStyle = {\n fontSize: validatedCustomStyles.placeholderFontSize \|\| '16px',\n };\n return (\n <div\n class={classNames(\n containerClassName,\n this.formClassName,\n 'searchcraft-input-form',\n )}\n >\n {this.rightToLeftOrientation ? (\n <Fragment>\n <input\n autoComplete='off'\n class={classNames(inputClassName, 'searchcraft-input')}\n id='searchcraft-input-id'\n onChange={this.handleInputChange.bind(this)}\n onKeyUp={this.handleInputKeyUp.bind(this)}\n placeholder={this.placeholderValue}\n type='text'\n value={this.query}\n ~~style={validatedCustomStyles}\n~~ />\n <style>\n {`\n #searchcraft-input-id::placeholder {\n font-size: ${placeholderStyle.fontSize};\n }\n `}\n </style>\n {this.inputCaptionValue && (\n <searchcraft-input-caption\n inputCaptionClassName={this.inputCaptionClassName}\n inputCaptionValue={this.inputCaptionValue}\n rightToLeftOrientation={this.rightToLeftOrientation}\n />\n )}\n {this.query.length > 0 && (\n <searchcraft-clear-input-button\n isRequesting={this.isRequesting}\n onClearInput={this.handleClearInput}\n rightToLeftOrientation={this.rightToLeftOrientation}\n />\n )}\n <searchcraft-input-icon\n error={this.error}\n height={this.inputIconHeight}\n rightToLeftOrientation={this.rightToLeftOrientation}\n width={this.inputIconWidth}\n />\n </Fragment>\n ) : (\n <Fragment>\n <searchcraft-input-icon\n error={this.error}\n height={this.inputIconHeight}\n rightToLeftOrientation={this.rightToLeftOrientation}\n width={this.inputIconWidth}\n />\n <input\n autoComplete='off'\n class={classNames(inputClassName, 'searchcraft-input')}\n id='searchcraft-input-id'\n onChange={this.handleInputChange.bind(this)}\n onKeyUp={this.handleInputKeyUp.bind(this)}\n placeholder={this.placeholderValue}\n type='text'\n value={this.query}\n style={validatedCustomStyles}\n />\n <style>\n {`\n #searchcraft-input-id::placeholder {\n font-size: ${placeholderStyle.fontSize};\n }\n `}\n </style>\n {this.inputCaptionValue && (\n <searchcraft-input-caption\n inputCaptionClassName={this.inputCaptionClassName}\n inputCaptionValue={this.inputCaptionValue}\n rightToLeftOrientation={this.rightToLeftOrientation}\n />\n )}\n {this.query.length > 0 && (\n <searchcraft-clear-input-button\n isRequesting={this.isRequesting}\n onClearInput={this.handleClearInput}\n rightToLeftOrientation={this.rightToLeftOrientation}\n />\n )}\n </Fragment>\n )}\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"searchcraft-input.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-input/searchcraft-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Prop,\n State,\n Event,\n Fragment,\n type EventEmitter,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\nimport { parseCustomStyles } from '@utils/utils';\n\nexport interface ScInputCustomEvent<T> extends CustomEvent<T> {\n detail: T;\n target: HTMLSearchcraftInputElement;\n}\n\n@Component({\n tag: 'searchcraft-input',\n styleUrl: 'searchcraft-input.module.scss',\n shadow: false,\n})\nexport class SearchcraftInput {\n @Prop() customStyles: string \| Record<string, string> = {};\n @Prop() error = false;\n @Prop() formClassName = '';\n @Prop() inputCaptionClassName = '';\n @Prop() inputCaptionValue = '';\n @Prop() inputClassName = '';\n @Prop() inputIconHeight = 20;\n @Prop() inputIconWidth = 20;\n @Prop() isRequesting = false;\n @Prop() placeholderValue = 'Enter Search';\n @Prop() rightToLeftOrientation = false;\n @Prop() query = '';\n\n @Event() clearInput: EventEmitter<void>;\n @Event() searchInputChange: EventEmitter<string>;\n @Event() inputKeyUp: EventEmitter<string>;\n\n @State() theme = 'light';\n\n private get isLightTheme() {\n return this.theme === 'light';\n }\n\n handleInputChange = (event: Event) => {\n const input = event.target as HTMLInputElement;\n this.searchInputChange.emit(input.value);\n };\n\n handleInputKeyUp = (event: KeyboardEvent) => {\n const input = event.target as HTMLInputElement;\n this.inputKeyUp.emit(input.value);\n };\n\n handleClearInput = () => {\n if (this.query === '') {\n return;\n }\n this.query = '';\n if (this.clearInput) {\n this.clearInput.emit();\n }\n };\n\n render() {\n const containerClassName = this.rightToLeftOrientation\n ? 'inputContainerRTL'\n : 'inputContainerLTR';\n\n const inputClassName = this.error\n ? this.isLightTheme\n ? 'inputErrorLightRTL'\n : 'inputErrorDarkRTL'\n : this.isLightTheme\n ? 'inputLightLTR'\n : 'inputDarkLTR';\n\n const validatedCustomStyles = parseCustomStyles(this.customStyles);\n\n const placeholderStyle = {\n fontSize: validatedCustomStyles.placeholderFontSize \|\| '16px',\n };\n return (\n <div\n class={classNames(\n containerClassName,\n this.formClassName,\n 'searchcraft-input-form',\n )}\n >\n {this.rightToLeftOrientation ? (\n <Fragment>\n <input\n autoComplete='off'\n class={classNames(inputClassName, 'searchcraft-input')}\n id='searchcraft-input-id'\n onChange={this.handleInputChange.bind(this)}\n onKeyUp={this.handleInputKeyUp.bind(this)}\n placeholder={this.placeholderValue}\n style={validatedCustomStyles}\n type='text'\n value={this.query}\n />\n <style>\n {`\n #searchcraft-input-id::placeholder {\n font-size: ${placeholderStyle.fontSize};\n }\n `}\n </style>\n {this.inputCaptionValue && (\n <searchcraft-input-caption\n inputCaptionClassName={this.inputCaptionClassName}\n inputCaptionValue={this.inputCaptionValue}\n rightToLeftOrientation={this.rightToLeftOrientation}\n />\n )}\n {this.query.length > 0 && (\n <searchcraft-clear-input-button\n isRequesting={this.isRequesting}\n onClearInput={this.handleClearInput}\n rightToLeftOrientation={this.rightToLeftOrientation}\n />\n )}\n <searchcraft-input-icon\n error={this.error}\n height={this.inputIconHeight}\n rightToLeftOrientation={this.rightToLeftOrientation}\n width={this.inputIconWidth}\n />\n </Fragment>\n ) : (\n <Fragment>\n <searchcraft-input-icon\n error={this.error}\n height={this.inputIconHeight}\n rightToLeftOrientation={this.rightToLeftOrientation}\n width={this.inputIconWidth}\n />\n <input\n autoComplete='off'\n class={classNames(inputClassName, 'searchcraft-input')}\n id='searchcraft-input-id'\n onChange={this.handleInputChange.bind(this)}\n onKeyUp={this.handleInputKeyUp.bind(this)}\n placeholder={this.placeholderValue}\n type='text'\n value={this.query}\n style={validatedCustomStyles}\n />\n <style>\n {`\n #searchcraft-input-id::placeholder {\n font-size: ${placeholderStyle.fontSize};\n }\n `}\n </style>\n {this.inputCaptionValue && (\n <searchcraft-input-caption\n inputCaptionClassName={this.inputCaptionClassName}\n inputCaptionValue={this.inputCaptionValue}\n rightToLeftOrientation={this.rightToLeftOrientation}\n />\n )}\n {this.query.length > 0 && (\n <searchcraft-clear-input-button\n isRequesting={this.isRequesting}\n onClearInput={this.handleClearInput}\n rightToLeftOrientation={this.rightToLeftOrientation}\n />\n )}\n </Fragment>\n )}\n </div>\n );\n }\n}\n"]}

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

@@ -16,110 +16,106 @@
 .inputLightLTR {
   border: none;
   border-radius: 8px;
-  font-family: "Brygada 1918";
+  font-family: var(--font-stack);
   outline: none;
   padding-bottom: 15px;
   padding-top: 15px;
-  width: 100%;
-  background-color: #EDEDED;
+  background-color: #F3F3F3;
   color: #292929;
   margin-right: 8px;
   padding-left: 36px;
   padding-right: 16px;
 }
 .inputLightLTR::placeholder {
-  font-family: "Brygada 1918";
+  font-family: var(--font-stack);
   font-size: 16px;
-  font-weight: 600;
+  font-weight: 400;
 }
 .inputLightLTR::placeholder {
   color: #737373;
 }
 .inputLightLTR:focus {
-  outline: 2px solid #000;
+  outline: 2px solid #000000;
 }
 .inputDarkLTR {
   border: none;
   border-radius: 8px;
-  font-family: "Brygada 1918";
+  font-family: var(--font-stack);
   outline: none;
   padding-bottom: 15px;
   padding-top: 15px;
-  width: 100%;
   background-color: #1A1A1A;
-  color: #FFF;
+  color: #FFFFFF;
   margin-right: 8px;
   padding-left: 36px;
   padding-right: 16px;
 }
 .inputDarkLTR::placeholder {
-  font-family: "Brygada 1918";
+  font-family: var(--font-stack);
   font-size: 16px;
-  font-weight: 600;
+  font-weight: 400;
 }
 .inputDarkLTR::placeholder {
   color: #BFBFBF;
 }
 .inputDarkLTR:focus {
-  outline: 2px solid #FFF;
+  outline: 2px solid #FFFFFF;
 }
 .inputErrorLightLTR {
   border: none;
   border-radius: 8px;
-  font-family: "Brygada 1918";
+  font-family: var(--font-stack);
   outline: none;
   padding-bottom: 15px;
   padding-top: 15px;
-  width: 100%;
-  background-color: #EDEDED;
+  background-color: #F3F3F3;
   color: #292929;
-  outline: 2px solid #c00;
+  outline: 2px solid #CC0000;
   margin-right: 8px;
   padding-left: 36px;
   padding-right: 16px;
 }
 .inputErrorLightLTR::placeholder {
-  font-family: "Brygada 1918";
+  font-family: var(--font-stack);
   font-size: 16px;
-  font-weight: 600;
+  font-weight: 400;
 }
 .inputErrorLightLTR::placeholder {
   color: #737373;
 }
 .inputErrorLightLTR:focus {
-  outline: 2px solid #000;
+  outline: 2px solid #000000;
 }
 .inputErrorLightLTR:focus-visible {
-  outline: 2px solid #c00;
+  outline: 2px solid #CC0000;
 }
 .inputErrorDarkLTR {
   border: none;
   border-radius: 8px;
-  font-family: "Brygada 1918";
+  font-family: var(--font-stack);
   outline: none;
   padding-bottom: 15px;
   padding-top: 15px;
-  width: 100%;
   background-color: #1A1A1A;
-  color: #FFF;
+  color: #FFFFFF;
   outline: 2px solid #FFB3B3;
   margin-right: 8px;
   padding-left: 36px;
   padding-right: 16px;
 }
 .inputErrorDarkLTR::placeholder {
-  font-family: "Brygada 1918";
+  font-family: var(--font-stack);
   font-size: 16px;
-  font-weight: 600;
+  font-weight: 400;
 }
 .inputErrorDarkLTR::placeholder {
   color: #BFBFBF;
 }
 .inputErrorDarkLTR:focus {
-  outline: 2px solid #FFF;
+  outline: 2px solid #FFFFFF;
 }
 .inputErrorDarkLTR:focus-visible {
   outline: 2px solid #FFB3B3;
@@ -128,12 +124,11 @@
 .inputLightRTL {
   border: none;
   border-radius: 8px;
-  font-family: "Brygada 1918";
+  font-family: var(--font-stack);
   outline: none;
   padding-bottom: 15px;
   padding-top: 15px;
-  width: 100%;
-  background-color: #EDEDED;
+  background-color: #F3F3F3;
   color: #292929;
   margin-left: 8px;
   padding-left: 16px;
@@ -141,85 +136,82 @@
   text-align: right;
 }
 .inputLightRTL::placeholder {
-  font-family: "Brygada 1918";
+  font-family: var(--font-stack);
   font-size: 16px;
-  font-weight: 600;
+  font-weight: 400;
 }
 .inputLightRTL::placeholder {
   color: #737373;
 }
 .inputLightRTL:focus {
-  outline: 2px solid #000;
+  outline: 2px solid #000000;
 }
 .inputDarkRTL {
   border: none;
   border-radius: 8px;
-  font-family: "Brygada 1918";
+  font-family: var(--font-stack);
   outline: none;
   padding-bottom: 15px;
   padding-top: 15px;
-  width: 100%;
   background-color: #1A1A1A;
-  color: #FFF;
+  color: #FFFFFF;
   margin-left: 8px;
   padding-left: 16px;
   padding-right: 36px;
   text-align: right;
 }
 .inputDarkRTL::placeholder {
-  font-family: "Brygada 1918";
+  font-family: var(--font-stack);
   font-size: 16px;
-  font-weight: 600;
+  font-weight: 400;
 }
 .inputDarkRTL::placeholder {
   color: #BFBFBF;
 }
 .inputDarkRTL:focus {
-  outline: 2px solid #FFF;
+  outline: 2px solid #FFFFFF;
 }
 .inputErrorLightRTL {
   border: none;
   border-radius: 8px;
-  font-family: "Brygada 1918";
+  font-family: var(--font-stack);
   outline: none;
   padding-bottom: 15px;
   padding-top: 15px;
-  width: 100%;
-  background-color: #EDEDED;
+  background-color: #F3F3F3;
   color: #292929;
-  outline: 2px solid #c00;
+  outline: 2px solid #CC0000;
   margin-left: 8px;
   padding-left: 16px;
   padding-right: 36px;
   text-align: right;
 }
 .inputErrorLightRTL::placeholder {
-  font-family: "Brygada 1918";
+  font-family: var(--font-stack);
   font-size: 16px;
-  font-weight: 600;
+  font-weight: 400;
 }
 .inputErrorLightRTL::placeholder {
   color: #737373;
 }
 .inputErrorLightRTL:focus {
-  outline: 2px solid #000;
+  outline: 2px solid #000000;
 }
 .inputErrorLightRTL:focus-visible {
-  outline: 2px solid #c00;
+  outline: 2px solid #CC0000;
 }
 .inputErrorDarkRTL {
   border: none;
   border-radius: 8px;
-  font-family: "Brygada 1918";
+  font-family: var(--font-stack);
   outline: none;
   padding-bottom: 15px;
   padding-top: 15px;
-  width: 100%;
   background-color: #1A1A1A;
-  color: #FFF;
+  color: #FFFFFF;
   outline: 2px solid #FFB3B3;
   margin-left: 8px;
   padding-left: 16px;
@@ -227,15 +219,15 @@
   text-align: right;
 }
 .inputErrorDarkRTL::placeholder {
-  font-family: "Brygada 1918";
+  font-family: var(--font-stack);
   font-size: 16px;
-  font-weight: 600;
+  font-weight: 400;
 }
 .inputErrorDarkRTL::placeholder {
   color: #BFBFBF;
 }
 .inputErrorDarkRTL:focus {
-  outline: 2px solid #FFF;
+  outline: 2px solid #FFFFFF;
 }
 .inputErrorDarkRTL:focus-visible {
   outline: 2px solid #FFB3B3;

package/dist/collection/components/searchcraft-input-caption/searchcraft-input-caption.js CHANGED Viewed

@@ -18,16 +18,15 @@ export class SearchcraftInputCaption {
                     : 'inputCaptionErrorDarkRTL'
                 : this.isLightTheme
                     ? 'inputCaptionLightRTL'
-                    : 'inputCaptionDarkRTL', this.inputCaptionClassName, '.searchcraft-input-caption') }, this.inputCaptionValue)) : (h("p", { class: classNames(this.error
+                    : 'inputCaptionDarkRTL', this.inputCaptionClassName, 'searchcraft-input-caption') }, this.inputCaptionValue)) : (h("p", { class: classNames(this.error
                 ? this.isLightTheme
                     ? 'inputCaptionErrorLightLTR'
                     : 'inputCaptionErrorDarkLTR'
                 : this.isLightTheme
                     ? 'inputCaptionLightLTR'
-                    : 'inputCaptionDarkLTR', this.inputCaptionClassName, '.searchcraft-input-caption') }, this.inputCaptionValue));
+                    : 'inputCaptionDarkLTR', this.inputCaptionClassName, 'searchcraft-input-caption') }, this.inputCaptionValue));
     }
     static get is() { return "searchcraft-input-caption"; }
-    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["searchcraft-input-caption.module.scss"]

package/dist/collection/components/searchcraft-input-caption/searchcraft-input-caption.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"searchcraft-input-caption.js","sourceRoot":"","sources":["~~../../../~~src/components/searchcraft-input-caption/searchcraft-input-caption.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,uBAAuB;;;qCAED,EAAE;iCACP,cAAc;sCACT,KAAK;~~qBACrB~~,OAAO;;IAEhB,YAAY;QAClB,OAAO,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC;IAChC,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,CACnC,SACE,KAAK,EAAE,UAAU,CACf,IAAI,CAAC,KAAK;gBACR,CAAC,CAAC,IAAI,CAAC,YAAY;oBACjB,CAAC,CAAC,2BAA2B;oBAC7B,CAAC,CAAC,0BAA0B;gBAC9B,CAAC,CAAC,IAAI,CAAC,YAAY;oBACjB,CAAC,CAAC,sBAAsB;oBACxB,CAAC,CAAC,qBAAqB,EAC3B,IAAI,CAAC,qBAAqB,EAC1B,~~4BAA4B~~,~~CAC7B~~,IAEA,IAAI,CAAC,iBAAiB,CACrB,CACL,CAAC,CAAC,CAAC,CACF,SACE,KAAK,EAAE,UAAU,CACf,IAAI,CAAC,KAAK;gBACR,CAAC,CAAC,IAAI,CAAC,YAAY;oBACjB,CAAC,CAAC,2BAA2B;oBAC7B,CAAC,CAAC,0BAA0B;gBAC9B,CAAC,CAAC,IAAI,CAAC,YAAY;oBACjB,CAAC,CAAC,sBAAsB;oBACxB,CAAC,CAAC,qBAAqB,EAC3B,IAAI,CAAC,qBAAqB,EAC1B,~~4BAA4B~~,~~CAC7B~~,IAEA,IAAI,CAAC,iBAAiB,CACrB,CACL,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, Prop, h, State } from '@stencil/core';\nimport classNames from 'classnames';\n\n@Component({\n tag: 'searchcraft-input-caption',\n styleUrl: 'searchcraft-input-caption.module.scss',\n shadow: ~~true~~,\n})\nexport class SearchcraftInputCaption {\n @Prop() error?: boolean;\n @Prop() inputCaptionClassName? = '';\n @Prop() inputCaptionValue = 'Enter Search';\n @Prop() rightToLeftOrientation = false;\n @State() theme = 'light';\n\n private isLightTheme() {\n return this.theme === 'light';\n }\n\n render() {\n return this.rightToLeftOrientation ? (\n <p\n class={classNames(\n this.error\n ? this.isLightTheme\n ? 'inputCaptionErrorLightRTL'\n : 'inputCaptionErrorDarkRTL'\n : this.isLightTheme\n ? 'inputCaptionLightRTL'\n : 'inputCaptionDarkRTL',\n this.inputCaptionClassName,\n '.searchcraft-input-caption',\n )}\n >\n {this.inputCaptionValue}\n </p>\n ) : (\n <p\n class={classNames(\n this.error\n ? this.isLightTheme\n ? 'inputCaptionErrorLightLTR'\n : 'inputCaptionErrorDarkLTR'\n : this.isLightTheme\n ? 'inputCaptionLightLTR'\n : 'inputCaptionDarkLTR',\n this.inputCaptionClassName,\n '.searchcraft-input-caption',\n )}\n >\n {this.inputCaptionValue}\n </p>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"searchcraft-input-caption.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-input-caption/searchcraft-input-caption.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,uBAAuB;;;qCAED,EAAE;iCACP,cAAc;sCACT,KAAK;qBAErB,OAAO;;IAEhB,YAAY;QAClB,OAAO,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC;IAChC,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,CACnC,SACE,KAAK,EAAE,UAAU,CACf,IAAI,CAAC,KAAK;gBACR,CAAC,CAAC,IAAI,CAAC,YAAY;oBACjB,CAAC,CAAC,2BAA2B;oBAC7B,CAAC,CAAC,0BAA0B;gBAC9B,CAAC,CAAC,IAAI,CAAC,YAAY;oBACjB,CAAC,CAAC,sBAAsB;oBACxB,CAAC,CAAC,qBAAqB,EAC3B,IAAI,CAAC,qBAAqB,EAC1B,2BAA2B,CAC5B,IAEA,IAAI,CAAC,iBAAiB,CACrB,CACL,CAAC,CAAC,CAAC,CACF,SACE,KAAK,EAAE,UAAU,CACf,IAAI,CAAC,KAAK;gBACR,CAAC,CAAC,IAAI,CAAC,YAAY;oBACjB,CAAC,CAAC,2BAA2B;oBAC7B,CAAC,CAAC,0BAA0B;gBAC9B,CAAC,CAAC,IAAI,CAAC,YAAY;oBACjB,CAAC,CAAC,sBAAsB;oBACxB,CAAC,CAAC,qBAAqB,EAC3B,IAAI,CAAC,qBAAqB,EAC1B,2BAA2B,CAC5B,IAEA,IAAI,CAAC,iBAAiB,CACrB,CACL,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, State } from '@stencil/core';\nimport classNames from 'classnames';\n\n@Component({\n tag: 'searchcraft-input-caption',\n styleUrl: 'searchcraft-input-caption.module.scss',\n shadow: false,\n})\nexport class SearchcraftInputCaption {\n @Prop() error?: boolean;\n @Prop() inputCaptionClassName? = '';\n @Prop() inputCaptionValue = 'Enter Search';\n @Prop() rightToLeftOrientation = false;\n\n @State() theme = 'light';\n\n private isLightTheme() {\n return this.theme === 'light';\n }\n\n render() {\n return this.rightToLeftOrientation ? (\n <p\n class={classNames(\n this.error\n ? this.isLightTheme\n ? 'inputCaptionErrorLightRTL'\n : 'inputCaptionErrorDarkRTL'\n : this.isLightTheme\n ? 'inputCaptionLightRTL'\n : 'inputCaptionDarkRTL',\n this.inputCaptionClassName,\n 'searchcraft-input-caption',\n )}\n >\n {this.inputCaptionValue}\n </p>\n ) : (\n <p\n class={classNames(\n this.error\n ? this.isLightTheme\n ? 'inputCaptionErrorLightLTR'\n : 'inputCaptionErrorDarkLTR'\n : this.isLightTheme\n ? 'inputCaptionLightLTR'\n : 'inputCaptionDarkLTR',\n this.inputCaptionClassName,\n 'searchcraft-input-caption',\n )}\n >\n {this.inputCaptionValue}\n </p>\n );\n }\n}\n"]}

package/dist/collection/components/searchcraft-input-icon/searchcraft-input-icon.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import classNames from "classnames";
 export class SearchcraftInputIcon {
     constructor() {
         this.error = undefined;
@@ -11,10 +12,9 @@ export class SearchcraftInputIcon {
         return this.theme === 'light';
     }
     render() {
-        return this.error ? (h("div", { class: this.rightToLeftOrientation ? 'inputIconRTL' : 'inputIconLTR' }, this.isLightTheme() ? (h("searchcraft-search-icon-set", { height: this.height, type: 'error-light', width: this.width })) : (h("searchcraft-search-icon-set", { height: this.height, type: 'error-dark', width: this.width })))) : (h("div", { class: this.rightToLeftOrientation ? 'inputIconRTL' : 'inputIconLTR' }, this.isLightTheme() ? (h("searchcraft-search-icon-set", { height: this.height, type: 'search-light', width: this.width })) : (h("searchcraft-search-icon-set", { height: this.height, type: 'search-dark', width: this.width }))));
+        return this.error ? (h("div", { class: classNames(this.rightToLeftOrientation ? 'inputIconRTL' : 'inputIconLTR', 'searchcraft-input-icon-container') }, this.isLightTheme() ? (h("searchcraft-search-icon-set", { height: this.height, type: 'error-light', width: this.width })) : (h("searchcraft-search-icon-set", { height: this.height, type: 'error-dark', width: this.width })))) : (h("div", { class: classNames(this.rightToLeftOrientation ? 'inputIconRTL' : 'inputIconLTR', 'searchcraft-input-icon-container') }, this.isLightTheme() ? (h("searchcraft-search-icon-set", { height: this.height, type: 'search-light', width: this.width })) : (h("searchcraft-search-icon-set", { height: this.height, type: 'search-dark', width: this.width }))));
     }
     static get is() { return "searchcraft-input-icon"; }
-    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["searchcraft-input-icon.module.scss"]

package/dist/collection/components/searchcraft-input-icon/searchcraft-input-icon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"searchcraft-input-icon.js","sourceRoot":"","sources":["~~../../../~~src/components/searchcraft-input-icon/searchcraft-input-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;~~AAO1D~~,MAAM,OAAO,oBAAoB;;;sBAEd,EAAE;sCACc,KAAK;qBACtB,EAAE;qBAED,OAAO;;IAEhB,YAAY;QAClB,OAAO,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC;IAChC,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAClB,WACE,KAAK,EAAE,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,~~IAEnE~~,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,CACrB,mCACE,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAC,aAAa,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,CACH,CAAC,CAAC,CAAC,CACF,mCACE,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAC,YAAY,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,CACH,CACG,CACP,CAAC,CAAC,CAAC,CACF,WACE,KAAK,EAAE,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,~~IAEnE~~,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,CACrB,mCACE,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAC,cAAc,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,CACH,CAAC,CAAC,CAAC,CACF,mCACE,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAC,aAAa,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,CACH,CACG,CACP,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, Prop, h, State } from '@stencil/core';\n\n@Component({\n tag: 'searchcraft-input-icon',\n styleUrl: 'searchcraft-input-icon.module.scss',\n shadow: ~~true~~,\n})\nexport class SearchcraftInputIcon {\n @Prop() error?: boolean;\n @Prop() height = 20;\n @Prop() rightToLeftOrientation = false;\n @Prop() width = 20;\n\n @State() theme = 'light';\n\n private isLightTheme() {\n return this.theme === 'light';\n }\n\n render() {\n return this.error ? (\n <div\n class={this.rightToLeftOrientation ? 'inputIconRTL' : 'inputIconLTR'}\n >\n {this.isLightTheme() ? (\n <searchcraft-search-icon-set\n height={this.height}\n type='error-light'\n width={this.width}\n />\n ) : (\n <searchcraft-search-icon-set\n height={this.height}\n type='error-dark'\n width={this.width}\n />\n )}\n </div>\n ) : (\n <div\n class={this.rightToLeftOrientation ? 'inputIconRTL' : 'inputIconLTR'}\n >\n {this.isLightTheme() ? (\n <searchcraft-search-icon-set\n height={this.height}\n type='search-light'\n width={this.width}\n />\n ) : (\n <searchcraft-search-icon-set\n height={this.height}\n type='search-dark'\n width={this.width}\n />\n )}\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"searchcraft-input-icon.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-input-icon/searchcraft-input-icon.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,oBAAoB;;;sBAEd,EAAE;sCACc,KAAK;qBACtB,EAAE;qBAED,OAAO;;IAEhB,YAAY;QAClB,OAAO,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC;IAChC,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAClB,WACE,KAAK,EAAE,UAAU,CACf,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,EAC7D,kCAAkC,CACnC,IAEA,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,CACrB,mCACE,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAC,aAAa,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,CACH,CAAC,CAAC,CAAC,CACF,mCACE,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAC,YAAY,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,CACH,CACG,CACP,CAAC,CAAC,CAAC,CACF,WACE,KAAK,EAAE,UAAU,CACf,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,EAC7D,kCAAkC,CACnC,IAEA,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,CACrB,mCACE,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAC,cAAc,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,CACH,CAAC,CAAC,CAAC,CACF,mCACE,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAC,aAAa,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,CACH,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, State } from '@stencil/core';\nimport classNames from 'classnames';\n\n@Component({\n tag: 'searchcraft-input-icon',\n styleUrl: 'searchcraft-input-icon.module.scss',\n shadow: false,\n})\nexport class SearchcraftInputIcon {\n @Prop() error?: boolean;\n @Prop() height = 20;\n @Prop() rightToLeftOrientation = false;\n @Prop() width = 20;\n\n @State() theme = 'light';\n\n private isLightTheme() {\n return this.theme === 'light';\n }\n\n render() {\n return this.error ? (\n <div\n class={classNames(\n this.rightToLeftOrientation ? 'inputIconRTL' : 'inputIconLTR',\n 'searchcraft-input-icon-container',\n )}\n >\n {this.isLightTheme() ? (\n <searchcraft-search-icon-set\n height={this.height}\n type='error-light'\n width={this.width}\n />\n ) : (\n <searchcraft-search-icon-set\n height={this.height}\n type='error-dark'\n width={this.width}\n />\n )}\n </div>\n ) : (\n <div\n class={classNames(\n this.rightToLeftOrientation ? 'inputIconRTL' : 'inputIconLTR',\n 'searchcraft-input-icon-container',\n )}\n >\n {this.isLightTheme() ? (\n <searchcraft-search-icon-set\n height={this.height}\n type='search-light'\n width={this.width}\n />\n ) : (\n <searchcraft-search-icon-set\n height={this.height}\n type='search-dark'\n width={this.width}\n />\n )}\n </div>\n );\n }\n}\n"]}

package/dist/collection/components/searchcraft-input-icon/searchcraft-input-icon.module.css CHANGED Viewed

@@ -5,13 +5,13 @@
 .inputIconLTR {
   left: 15px;
   position: absolute;
-  top: 50%;
+  top: 52%;
   transform: translateY(-50%);
 }
 .inputIconRTL {
   position: absolute;
   right: 15px;
-  top: 50%;
+  top: 52%;
   transform: translateY(-50%);
 }

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

@@ -14,10 +14,9 @@ export class SearchcraftInputLabel {
             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: classNames(labelStyle, this.inputLabelClassName, '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"]

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

	@@ -1 +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"]}
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,CACf,UAAU,EACV,IAAI,CAAC,mBAAmB,EACxB,yBAAyB,CAC1B,EACD,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: false,\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(\n labelStyle,\n this.inputLabelClassName,\n 'searchcraft-input-label',\n )}\n htmlFor='searchcraft-input-id'\n >\n {this.label}\n </label>\n );\n }\n}\n"]}

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

@@ -17,5 +17,5 @@
   font-weight: 400;
   line-height: 16px;
   margin-top: 4px;
-  color: #FFF;
+  color: #FFFFFF;
 }

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

@@ -1,5 +1,7 @@
 import { h } from "@stencil/core";
+import classNames from "classnames";
 import { useSearchcraftStore } from "../../provider/store";
+import { formatNumberWithCommas } from "../../utils/utils";
 export class SearchcraftResultsInfo {
     constructor() {
         this.isRequesting = false;
@@ -13,7 +15,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 +27,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: classNames('resultsInfoContainer', 'searchcraft-results-info-container') }, h("p", { class: classNames('resultsInfoContent', '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 CHANGED Viewed

	@@ -1 +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"]}
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,UAAU,MAAM,YAAY,CAAC;AAEpC,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,WACE,KAAK,EAAE,UAAU,CACf,sBAAsB,EACtB,oCAAoC,CACrC;YAED,SACE,KAAK,EAAE,UAAU,CACf,oBAAoB,EACpB,kCAAkC,CACnC;gBAEA,gBAAgB;;gBAAoB,IAAI,CAAC,YAAY;qBACpD,CACA,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, State } from '@stencil/core';\nimport classNames from 'classnames';\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\n class={classNames(\n 'resultsInfoContainer',\n 'searchcraft-results-info-container',\n )}\n >\n <p\n class={classNames(\n 'resultsInfoContent',\n 'searchcraft-results-info-content',\n )}\n >\n {formattedResults} results found in {this.responseTime}ms\n </p>\n </div>\n );\n }\n}\n"]}

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

@@ -1,15 +1,25 @@
-.container {
+:root {
+  --font-stack: Helvetica, Arial, sans-serif;
+}
+.resultsInfoContainer {
   border-bottom: 1px solid #D9D9D9;
   display: flex;
   justify-content: flex-start;
   width: 100%;
 }
-.resultsInfo {
+.resultsInfoContent {
   color: #292929;
+  font-family: var(--font-stack);
   font-size: 18px;
   font-weight: 600;
   line-height: 20px;
-  margin: 0;
-  margin-bottom: 8px;
+  margin: 24px 0 8px;
+}
+@media (max-width: 900px) {
+  .resultsInfoContent {
+    margin: 0;
+    margin-bottom: 8px;
+  }
 }

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

@@ -1,10 +1,15 @@
-import { h } from "@stencil/core";
+import { h, } from "@stencil/core";
+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.rangeChanged.emit({
+                startYear: this.startYear,
+                endYear: this.endYear,
+            });
             try {
                 if (typeof this.query === 'string' && this.query.trim() !== '') {
                     await this.searchStore.search();
@@ -19,13 +24,17 @@ export class SearchcraftSlider {
         };
         this.handleStartYearChange = (event) => {
             const value = Number.parseInt(event.target.value, 10);
-            this.startYear = Math.min(value, this.endYear);
-            this.updateYears();
+            if (value <= this.endYear) {
+                this.startYear = value;
+                this.updateYears();
+            }
         };
         this.handleEndYearChange = (event) => {
             const value = Number.parseInt(event.target.value, 10);
-            this.endYear = Math.max(value, this.startYear);
-            this.updateYears();
+            if (value >= this.startYear) {
+                this.endYear = value;
+                this.updateYears();
+            }
         };
         this.maxYear = new Date().getFullYear();
         this.minYear = 2014;
@@ -58,13 +67,12 @@ export class SearchcraftSlider {
         const rangeMax = this.maxYear;
         const startPercent = ((this.startYear - rangeMin) / (rangeMax - rangeMin)) * 100;
         const endPercent = ((this.endYear - rangeMin) / (rangeMax - rangeMin)) * 100;
-        return (h("div", { class: 'sliderContainer' }, h("div", { class: 'rangeContainer' }, h("div", { class: 'activeRange', style: {
+        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: {
                 left: `${startPercent}%`,
                 width: `${endPercent - startPercent}%`,
-            } }), h("input", { class: 'rangeSlider', max: this.maxYear, min: this.minYear, onInput: this.handleStartYearChange, step: '1', type: 'range', value: this.startYear }), h("input", { class: 'rangeSlider', max: this.maxYear, min: this.minYear, onInput: this.handleEndYearChange, step: '1', type: 'range', value: this.endYear })), h("div", { class: 'yearLabels' }, h("span", { class: 'yearLabel' }, this.startYear), h("span", { class: 'yearLabel' }, this.endYear))));
+            } }), 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))));
     }
     static get is() { return "searchcraft-slider"; }
-    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["searchcraft-slider.module.scss"]
@@ -124,5 +132,23 @@ export class SearchcraftSlider {
             "startYear": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "rangeChanged",
+                "name": "rangeChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ startYear: number; endYear: number }",
+                    "resolved": "{ startYear: number; endYear: number; }",
+                    "references": {}
+                }
+            }];
+    }
 }
 //# sourceMappingURL=searchcraft-slider.js.map