@searchcraft/javascript-sdk 0.1.1 → 0.1.3

package/dist/components/p-8646a603.js.map

@@ -1 +0,0 @@
-{"file":"p-8646a603.js","mappings":";;;AAAA,MAAM,6BAA6B,GAAG,uMAAuM,CAAC;AAC9O,mCAAe,6BAA6B;;MCM/B,oBAAoB;;;;;;sCAEE,KAAK;qBACrB,OAAO;;IAEhB,YAAY;QAClB,OAAO,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC;KAC/B;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,KAAK,IACf,WACE,KAAK,EAAE,IAAI,CAAC,sBAAsB,GAAG,cAAc,GAAG,cAAc,IAEnE,IAAI,CAAC,YAAY,IAChB,mCAA6B,IAAI,EAAC,aAAa,GAAG,KAElD,mCAA6B,IAAI,EAAC,YAAY,GAAG,CAClD,CACG,KAEN,WACE,KAAK,EAAE,IAAI,CAAC,sBAAsB,GAAG,cAAc,GAAG,cAAc,IAEnE,IAAI,CAAC,YAAY,IAChB,mCAA6B,IAAI,EAAC,cAAc,GAAG,KAEnD,mCAA6B,IAAI,EAAC,aAAa,GAAG,CACnD,CACG,CACP,CAAC;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/searchcraft-input-icon/searchcraft-input-icon.module.scss?tag=searchcraft-input-icon&encapsulation=shadow","src/components/searchcraft-input-icon/searchcraft-input-icon.tsx"],"sourcesContent":[":root {\n  --font-stack: Helvetica, Arial, sans-serif;\n}\n\n.inputIconLTR {\n  height: 20px;\n  left: 10px;\n  position: absolute;\n  top: 11px;\n  width: 20px;\n}\n\n.inputIconRTL {\n  height: 20px;\n  position: absolute;\n  right: 10px;\n  top: 11px;\n  width: 20px;\n}","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() rightToLeftOrientation = false;\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 type='error-light' />\n        ) : (\n          <searchcraft-search-icon-set type='error-dark' />\n        )}\n      </div>\n    ) : (\n      <div\n        class={this.rightToLeftOrientation ? 'inputIconRTL' : 'inputIconLTR'}\n      >\n        {this.isLightTheme ? (\n          <searchcraft-search-icon-set type='search-light' />\n        ) : (\n          <searchcraft-search-icon-set type='search-dark' />\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-9283a3c2.js

@@ -1,50 +0,0 @@
-import { p as proxyCustomElement, H, h } from './p-c69651f6.js';
-import { c as classNames } from './p-5cdc6210.js';
-
-const searchcraftInputLabelModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.labelLight{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-top:4px;color:#292929}.labelDark{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-top:4px;color:#FFF}";
-const SearchcraftInputLabelStyle0 = searchcraftInputLabelModuleCss;
-
-const SearchcraftInputLabel = /*@__PURE__*/ proxyCustomElement(class SearchcraftInputLabel extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.inputLabelClassName = '';
-        this.label = undefined;
-        this.theme = 'light';
-    }
-    isLightTheme() {
-        return this.theme === 'light';
-    }
-    render() {
-        // Render nothing if no label prop is provided
-        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));
-    }
-    static get style() { return SearchcraftInputLabelStyle0; }
-}, [1, "searchcraft-input-label", {
-        "inputLabelClassName": [1, "input-label-class-name"],
-        "label": [1],
-        "theme": [32]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["searchcraft-input-label"];
-    components.forEach(tagName => { switch (tagName) {
-        case "searchcraft-input-label":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SearchcraftInputLabel);
-            }
-            break;
-    } });
-}
-defineCustomElement();
-
-export { SearchcraftInputLabel as S, defineCustomElement as d };
-
-//# sourceMappingURL=p-9283a3c2.js.map

package/dist/components/p-9283a3c2.js.map

@@ -1 +0,0 @@
-{"file":"p-9283a3c2.js","mappings":";;;AAAA,MAAM,8BAA8B,GAAG,4RAA4R,CAAC;AACpU,oCAAe,8BAA8B;;MCOhC,qBAAqB;;;;;mCACD,EAAE;;qBAEhB,OAAO;;IAEhB,YAAY;QAClB,OAAO,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC;KAC/B;IAED,MAAM;;QAEJ,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACf,OAAO,IAAI,CAAC;SACb;QAED,MAAM,UAAU,GAAG,IAAI,CAAC,YAAY,EAAE,GAAG,YAAY,GAAG,WAAW,CAAC;QAEpE,QACE,aACE,KAAK,EAAE,UAAU,CAAC,UAAU,EAAE,IAAI,CAAC,mBAAmB,CAAC,EACvD,OAAO,EAAC,sBAAsB,IAE7B,IAAI,CAAC,KAAK,CACL,EACR;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/searchcraft-input-label/searchcraft-input-label.module.scss?tag=searchcraft-input-label&encapsulation=shadow","src/components/searchcraft-input-label/searchcraft-input-label.tsx"],"sourcesContent":["@import '../../utils/theme';\n\n:root {\n  --font-stack: Helvetica, Arial, sans-serif;\n}\n\n@mixin input-label-base {\n  font-family: var(--font-stack);\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 16px;\n  margin-top: 4px;\n}\n\n.labelLight {\n  @include input-label-base;\n  color: $light-input-label-color;\n}\n\n.labelDark {\n  @include input-label-base;\n  color: $dark-input-label-color;\n}","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; // Make label optional\n  @State() theme = 'light';\n\n  private isLightTheme() {\n    return this.theme === 'light';\n  }\n\n  render() {\n    // Render nothing if no label prop is provided\n    if (!this.label) {\n      return null;\n    }\n\n    const labelStyle = this.isLightTheme() ? 'labelLight' : 'labelDark';\n\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}

package/dist/components/p-a18c4969.js.map

@@ -1 +0,0 @@
-{"file":"p-a18c4969.js","mappings":"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","names":[],"sources":["src/components/searchcraft-input/searchcraft-input.module.scss?tag=searchcraft-input&encapsulation=shadow","src/components/searchcraft-input/searchcraft-input.tsx"],"sourcesContent":["@import '../../utils/theme';\n\n:root {\n  --font-stack: Helvetica, Arial, sans-serif;\n}\n\n@mixin input-container-base {\n  position: relative;\n  width: 100%;\n}\n\n@mixin input-base {\n  border: none;\n  border-radius: 8px;\n  font-family: var(--font-stack);\n  outline: none;\n  padding-bottom: 15px;\n  padding-top: 15px;\n  width: 100%;\n\n  &::placeholder {\n    font-family: var(--font-stack);\n    font-size: 16px;\n  }\n}\n\n@mixin input-base-light {\n  @include input-base;\n  background-color: $light-input-background-color;\n  color: $light-input-label-color;\n\n  &::placeholder {\n    color: $light-input-placeholder-color;\n  }\n\n  &:focus {\n    outline: 2px solid $light-input-outline-focus;\n  }\n}\n\n@mixin input-base-dark {\n  @include input-base;\n  background-color: $dark-input-background-color;\n  color: $dark-input-label-color;\n\n  &::placeholder {\n    color: $dark-input-placeholder-color;\n  }\n\n  &:focus {\n    outline: 2px solid $dark-input-outline-focus;\n  }\n}\n\n@mixin input-error-base-light {\n  @include input-base-light;\n  outline: 2px solid $light-input-error-outline;\n\n  &:focus-visible {\n    outline: 2px solid $light-input-error-outline,\n  }\n}\n\n@mixin input-error-base-dark {\n  @include input-base-dark;\n  outline: 2px solid $dark-input-error-outline;\n\n  &:focus-visible {\n    outline: 2px solid $dark-input-error-outline;\n  }\n}\n\n.inputContainerLTR {\n  @include input-container-base;\n}\n\n.inputContainerRTL {\n  @include input-container-base;\n  margin-left: 8px;\n}\n\n@mixin align-LTR {\n  margin-right: 8px;\n  padding-left: 36px;\n  padding-right: 16px;\n}\n\n.inputLightLTR {\n  @include input-base-light;\n  @include align-LTR;\n}\n\n.inputDarkLTR {\n  @include input-base-dark;\n  @include align-LTR;\n}\n\n.inputErrorLightLTR {\n  @include input-error-base-light;\n  @include align-LTR;\n}\n\n.inputErrorDarkLTR {\n  @include input-error-base-dark;\n  @include align-LTR;\n}\n\n@mixin align-RTL {\n  margin-left: 8px;\n  padding-left: 16px;\n  padding-right: 36px;\n  text-align: right;\n}\n\n.inputLightRTL {\n  @include input-base-light;\n  @include align-RTL;\n}\n\n.inputDarkRTL {\n  @include input-base-dark;\n  @include align-RTL;\n}\n\n.inputErrorLightRTL {\n  @include input-error-base-light;\n  @include align-RTL;\n}\n\n.inputErrorDarkRTL {\n  @include input-error-base-dark;\n  @include align-RTL;\n}\n\n.inputWrapper {\n  align-items: center;\n  display: flex;\n  position: relative;\n  width: 100%;\n}\n","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() placeholderValue = 'Enter Search';\n  @Prop() rightToLeftOrientation = false;\n  @Prop() query = '';\n\n  @Event() clearInput: EventEmitter<void>;\n  @Event() searchInputChange: 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  handleClearInput() {\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              class={classNames(inputClassName, 'searchcraft-input')}\n              id='searchcraft-input-id'\n              onChange={this.handleInputChange.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                onClearInput={this.handleClearInput}\n                rightToLeftOrientation={this.rightToLeftOrientation}\n              />\n            )}\n            <searchcraft-input-icon\n              error={this.error}\n              rightToLeftOrientation={this.rightToLeftOrientation}\n            />\n          </Fragment>\n        ) : (\n          <div class='inputWrapper'>\n            <searchcraft-input-icon\n              error={this.error}\n              rightToLeftOrientation={this.rightToLeftOrientation}\n            />\n            <input\n              class={classNames(inputClassName, 'searchcraft-input')}\n              id='searchcraft-input-id'\n              onChange={this.handleInputChange.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                onClearInput={this.handleClearInput}\n                rightToLeftOrientation={this.rightToLeftOrientation}\n              />\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}