@searchcraft/javascript-sdk 0.7.0 → 0.7.1

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

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

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

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

package/dist/cjs/searchcraft-facet-list_3.cjs.entry.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d4b4a45e.js');
+const index = require('./index-a81df4f0.js');
 const index$1 = require('./index-5b0b9d4c.js');
-const store = require('./store-abe47006.js');
+const store = require('./store-f6ba3dfb.js');
 const units = require('./units-fe4d8083.js');
 
 function deepMergeWithSpread(obj1, obj2) {
-    const result = Object.assign({}, obj1);
+    const result = { ...obj1 };
     for (const key in obj2) {
         // biome-ignore lint/suspicious/noPrototypeBuiltins: <explanation>
         if (obj2.hasOwnProperty(key)) {
@@ -31,12 +31,11 @@ function removeSubstringMatches(arr) {
 function facetToRecord(facet) {
     const records = {};
     const traverseAndAddToFragments = (facetChild) => {
-        var _a;
         records[facetChild.path] = {
             count: facetChild.count,
             path: facetChild.path,
         };
-        (_a = facetChild.children) === null || _a === void 0 ? void 0 : _a.forEach((child) => {
+        facetChild.children?.forEach((child) => {
             traverseAndAddToFragments(child);
         });
     };
@@ -51,6 +50,9 @@ function recordToObject(record) {
     };
     Object.keys(record).forEach((key) => {
         const fragment = record[key];
+        if (!fragment) {
+            return;
+        }
         if (fragment.path === '/') {
             return;
         }
@@ -133,32 +135,35 @@ function mergeFacetRoots(fieldName, currentRoot, incomingRoot) {
     };
 }
 
-const searchcraftFacetListModuleCss = ":root{--sc-input-border-radius:8px;--sc-input-search-icon-size:20px;--sc-input-clear-icon-size:20px;--sc-input-padding-left:44px;--sc-input-padding-right:44px;--sc-image-border-radius:8px;--sc-popover-form-border-radius:8px;--sc-popover-list-view-height:400px;--sc-popover-list-item-image-size:60px;--sc-popover-list-item-padding-horizontal:8px;--sc-popover-list-item-padding-vertical:8px;--sc-popover-modal-max-width:570px}:root{--sc-surface-disabled:#D9D9D9;--sc-surface-neutral-primary:#FFFFFF;--sc-surface-neutral-secondary:#F3F3F3;--sc-surface-neutral-light:#FFFFFF;--sc-surface-neutral-primary-hover:#FAFAFA;--sc-surface-neutral-primary-active:#F7F7F7;--sc-surface-neutral-secondary-hover:#EDEDED;--sc-surface-neutral-secondary-active:#E6E6E6;--sc-surface-brand-primary:#000000;--sc-surface-brand-secondary:#E6E6E6;--sc-surface-brand-primary-hover:#2E2E2E;--sc-surface-brand-primary-active:#292929;--sc-surface-brand-secondary-hover:#EBEBEB;--sc-surface-brand-secondary-active:#E0E0E0;--sc-surface-success-primary:#008000;--sc-surface-success-secondary:#CCFFCC;--sc-surface-success-primary-hover:#009900;--sc-surface-success-primary-active:#006600;--sc-surface-success-secondary-hover:#E6FFE6;--sc-surface-success-secondary-active:#E6FFE6;--sc-surface-caution-primary:#CC6600;--sc-surface-caution-secondary:#FFD9B3;--sc-surface-caution-primary-hover:#E57300;--sc-surface-caution-primary-active:#B25A00;--sc-surface-caution-secondary-hover:#FFE5CC;--sc-surface-caution-secondary-active:#FFCC99;--sc-surface-danger-primary:#CC0000;--sc-surface-danger-secondary:#FFCCCC;--sc-surface-danger-primary-hover:#E50000;--sc-surface-danger-primary-active:#B30000;--sc-surface-danger-secondary-hover:#FFE7E7;--sc-surface-danger-secondary-active:#FFB3B3;--sc-content-brand:#000000;--sc-content-success:#008000;--sc-content-caution:#994D00;--sc-content-danger:#990000;--sc-content-disabled:#737373;--sc-content-neutral-primary:#292929;--sc-content-neutral-secondary:#404040;--sc-content-brand-on-primary:#FFFFFF;--sc-content-success-on-primary:#FFFFFF;--sc-content-caution-on-primary:#FFFFFF;--sc-content-danger-on-primary:#FFFFFF;--sc-content-disabled-on-disabled:#737373;--sc-border-neutral:rgba(0,0,0, 0.1);--sc-border-brand:#000000;--sc-border-success:#008000;--sc-border-caution:#CC6600;--sc-border-danger:#CC0000;--sc-border-disabled:#737373}:root{--sc-font-family:sans-serif;--sc-heading-1-font-size:32px;--sc-heading-1-line-height:36px;--sc-heading-1-font-weight:700;--sc-heading-2-font-size:29px;--sc-heading-2-line-height:32px;--sc-heading-2-font-weight:700;--sc-heading-3-font-size:26px;--sc-heading-3-line-height:28px;--sc-heading-3-font-weight:700;--sc-heading-4-font-size:23px;--sc-heading-4-line-height:24px;--sc-heading-4-font-weight:700;--sc-heading-5-font-size:20px;--sc-heading-5-line-height:24px;--sc-heading-5-font-weight:700;--sc-heading-6-font-size:10px;--sc-heading-6-line-height:12px;--sc-heading-6-font-weight:700;--sc-body-bold-font-size:16px;--sc-body-bold-line-height:20px;--sc-body-bold-font-weight:700;--sc-body-font-size:16px;--sc-body-line-height:20px;--sc-body-font-weight:400;--sc-body-small-bold-font-size:12px;--sc-body-small-bold-line-height:16px;--sc-body-small-bold-font-weight:700;--sc-body-small-font-size:12px;--sc-body-small-line-height:16px;--sc-body-small-font-weight:400}:root{--sc-breakpoint-sm:576px;--sc-breakpoint-md:768px;--sc-breakpoint-lg:992px}.filtersListContainer{width:100%}.filterCheckboxLabel{align-items:center;color:var(--sc-content-primary);display:flex;font-family:var(--sc-font-family);font-size:14px;font-weight:600;gap:14px;position:relative;-webkit-font-smoothing:antialiased}.filterCheckboxLabel input[type=checkbox]{align-items:center;appearance:none;background-color:var(--sc-surface-brand-secondary-hover);border:1px solid var(--sc-surface-disabled);border-radius:8px;cursor:pointer;display:flex;height:24px;justify-content:center;width:24px}.filterCheckboxLabel input[type=checkbox]:focus{outline:2px solid var(--sc-surface-brand-primary)}.filterCheckboxLabel input[type=checkbox]:checked{background-color:var(--sc-surface-brand-primary);position:relative}.filterCheckboxLabel input[type=checkbox]:checked+.checkContainer{display:block}.filterCheckboxLabel input[type=checkbox]:checked+.dashContainer{display:block}.childFilterCheckboxLabel{align-items:center;color:var(--sc-content-primary);display:flex;font-family:var(--sc-font-family);font-size:14px;font-weight:600;gap:12px;margin-left:24px;position:relative}.childFilterCheckboxLabel input[type=checkbox]{align-items:center;appearance:none;background-color:var(--sc-surface-brand-secondary-hover);border:1px solid var(--sc-surface-disabled);border-radius:8px;cursor:pointer;display:flex;height:24px;justify-content:center;position:relative;width:24px;-webkit-font-smoothing:antialiased}.childFilterCheckboxLabel input[type=checkbox]:focus{outline:2px solid var(--sc-surface-brand-primary)}.childFilterCheckboxLabel input[type=checkbox]:checked{background-color:var(--sc-surface-brand-primary);position:relative}.childFilterCheckboxLabel input[type=checkbox]:checked+.checkContainer{display:block}.childFilterCheckboxLabel input[type=checkbox]:checked+.dashContainer{display:block}.checkContainer{display:none;height:16px;width:16px;position:absolute;top:9px;left:8px}.dashContainer{display:none;height:3px;width:14px;position:absolute;top:3px;left:9px}.searchcraft-facet-message{font-family:var(--sc-font-family);-webkit-font-smoothing:antialiased;font-size:var(--sc-body-small-font-size);font-weight:var(--sc-body-small-font-weight);line-height:var(--sc-body-small-line-height);color:var(--sc-content-disabled);text-align:center}";
-const SearchcraftFacetListStyle0 = searchcraftFacetListModuleCss;
-
 const SearchcraftFacetList = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.facetSelectionUpdated = index.createEvent(this, "facetSelectionUpdated", 7);
-        this.selectedPaths = {};
-        this.hasNewSearchTerm = false;
-        this.searchStore = store.useSearchcraftStore.getState();
-        this.formatLabel = (facetChild) => {
-            const label = facetChild.path.replace(/^\//, '');
-            const count = facetChild.count;
-            return `${label.replace(/-/g, ' ').replace(/\b\w/g, (char) => char.toUpperCase())} (${count})`;
-        };
-        this.formatSubLabel = (facetChild, facetChildAncestor) => {
-            const facetChildPath = facetChild.path.substring(facetChildAncestor.path.length);
-            const label = facetChildPath.replace(/^\//, '');
-            const count = facetChild.count;
-            return `${label.replace(/-/g, ' ').replace(/\b\w/g, (char) => char.toUpperCase())} (${count})`;
-        };
     }
+    /**
+     * The name of the field where facets are applied.
+     */
+    fieldName = '';
+    /**
+     * When the facets are updated.
+     */
+    facetSelectionUpdated;
+    baseFacetRoot;
+    facetRoot;
+    selectedPaths = {};
+    lastTimeTaken;
+    hasNewSearchTerm = false;
+    lastQuery;
+    lastSearchMode;
+    lastSortType;
+    unsubscribe;
+    searchStore = store.useSearchcraftStore.getState();
     handleStateUpdate(state) {
-        var _a, _b;
-        const facetPrime = (_a = state.searchResults) === null || _a === void 0 ? void 0 : _a.data.facets;
-        const timeTaken = (_b = state.searchResults) === null || _b === void 0 ? void 0 : _b.data.time_taken;
+        const facetPrime = state.searchResults?.data.facets;
+        const timeTaken = state.searchResults?.data.time_taken;
+        if (!this.fieldName) {
+            return;
+        }
         /** Things to do when the state's search term has changed, but before the response received */
         if (state.query !== this.lastQuery ||
             state.searchMode !== this.lastSearchMode ||
@@ -176,7 +181,7 @@ const SearchcraftFacetList = class {
                 this.facetRoot = incomingFacetRoot;
                 this.hasNewSearchTerm = false;
             }
-            else if (this.baseFacetRoot) {
+            else if (this.baseFacetRoot && incomingFacetRoot) {
                 /** Data is from an existing search term, merge the facets together */
                 this.facetRoot = mergeFacetRoots(this.fieldName, this.baseFacetRoot, incomingFacetRoot);
             }
@@ -193,8 +198,7 @@ const SearchcraftFacetList = class {
         });
     }
     disconnectedCallback() {
-        var _a;
-        (_a = this.unsubscribe) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.unsubscribe?.();
     }
     handleCheckboxChange(path) {
         const isCheckboxChecked = !this.selectedPaths[path];
@@ -203,7 +207,10 @@ const SearchcraftFacetList = class {
              * Checkbox Checked: Add to the selectedPaths record
              * Uses spread operator here so UI updates.
              */
-            this.selectedPaths = Object.assign(Object.assign({}, this.selectedPaths), { [path]: true });
+            this.selectedPaths = {
+                ...this.selectedPaths,
+                [path]: true,
+            };
         }
         else {
             /**
@@ -220,90 +227,101 @@ const SearchcraftFacetList = class {
          */
         const paths = Object.keys(this.selectedPaths).filter((path) => this.selectedPaths[path]);
         const pathsWithParentPathsRemoved = removeSubstringMatches(paths);
-        this.facetSelectionUpdated.emit({ paths: pathsWithParentPathsRemoved });
+        this.facetSelectionUpdated?.emit({ paths: pathsWithParentPathsRemoved });
     }
+    formatLabel = (facetChild) => {
+        const label = facetChild.path.replace(/^\//, '');
+        const count = facetChild.count;
+        return `${label.replace(/-/g, ' ').replace(/\b\w/g, (char) => char.toUpperCase())} (${count})`;
+    };
+    formatSubLabel = (facetChild, facetChildAncestor) => {
+        const facetChildPath = facetChild.path.substring(facetChildAncestor.path.length);
+        const label = facetChildPath.replace(/^\//, '');
+        const count = facetChild.count;
+        return `${label.replace(/-/g, ' ').replace(/\b\w/g, (char) => char.toUpperCase())} (${count})`;
+    };
     render() {
-        var _a;
-        const firstFacet = (_a = this.facetRoot) === null || _a === void 0 ? void 0 : _a[this.fieldName];
-        return (index.h("div", { key: '709834d9f86b75257ae0c67e9340c0fea4131035', class: index$1.classNames('filtersListContainer', 'searchcraft-filters-list-container') }, !firstFacet && (index.h("p", { key: 'a6e2ced40fcc0762ae8ea835c9d6c573aceeb1f1', class: 'searchcraft-facet-message' }, "Enter a search to view facets.")), firstFacet === null || firstFacet === void 0 ? void 0 :
-            firstFacet.map((facetChild) => {
-                var _a;
-                const isChildSelected = facetChild.children
-                    ? (_a = facetChild.children) === null || _a === void 0 ? void 0 : _a.some((child) => this.selectedPaths[child.path])
-                    : false;
-                return (index.h("div", { key: facetChild.path, class: index$1.classNames('searchcraft-filters-list-item') }, index.h("label", { class: index$1.classNames('filterCheckboxLabel', 'searchcraft-filters-list-checkbox-label') }, index.h("input", { checked: this.selectedPaths[facetChild.path], onChange: (_event) => this.handleCheckboxChange(facetChild.path), type: 'checkbox' }), isChildSelected ? (index.h("div", { class: index$1.classNames('dashContainer', 'searchcraft-filter-list-dash-container') }, index.h("searchcraft-dash-icon", null))) : (index.h("div", { class: index$1.classNames('checkContainer', 'searchcraft-filter-list-check-container') }, index.h("searchcraft-check-icon", null))), this.formatLabel(facetChild)), facetChild.children && facetChild.children.length > 0 && (index.h(index.Fragment, null, facetChild.children.map((grandchild) => (index.h("label", { key: grandchild.path, class: index$1.classNames('childFilterCheckboxLabel', 'searchcraft-child-filter-checkbox-label'), style: {
-                        display: this.selectedPaths[facetChild.path]
-                            ? 'flex'
-                            : 'none',
-                    } }, index.h("input", { checked: this.selectedPaths[grandchild.path], onChange: (_event) => {
-                        this.handleCheckboxChange(grandchild.path);
-                    }, type: 'checkbox' }), index.h("div", { class: index$1.classNames('checkContainer', 'searchcraft-filter-list-check-container') }, index.h("searchcraft-check-icon", null)), this.formatSubLabel(grandchild, facetChild))))))));
-            })));
+        if (!this.fieldName) {
+            return;
+        }
+        const firstFacet = this.facetRoot?.[this.fieldName];
+        return (index.h("div", { class: index$1.classNames('filtersListContainer', 'searchcraft-filters-list-container') }, !firstFacet && (index.h("p", { class: 'searchcraft-facet-message' }, "Enter a search to view facets.")), firstFacet?.map((facetChild) => {
+            const isChildSelected = facetChild.children
+                ? facetChild.children?.some((child) => this.selectedPaths[child.path])
+                : false;
+            return (index.h("div", { key: facetChild.path, class: index$1.classNames('searchcraft-filters-list-item') }, index.h("label", { class: index$1.classNames('filterCheckboxLabel', 'searchcraft-filters-list-checkbox-label') }, index.h("input", { checked: this.selectedPaths[facetChild.path], onChange: (_event) => this.handleCheckboxChange(facetChild.path), type: 'checkbox' }), isChildSelected ? (index.h("div", { class: index$1.classNames('dashContainer', 'searchcraft-filter-list-dash-container') }, index.h("searchcraft-dash-icon", null))) : (index.h("div", { class: index$1.classNames('checkContainer', 'searchcraft-filter-list-check-container') }, index.h("searchcraft-check-icon", null))), this.formatLabel(facetChild)), facetChild.children && facetChild.children.length > 0 && (index.h(index.Fragment, null, facetChild.children.map((grandchild) => (index.h("label", { key: grandchild.path, class: index$1.classNames('childFilterCheckboxLabel', 'searchcraft-child-filter-checkbox-label'), style: {
+                    display: this.selectedPaths[facetChild.path]
+                        ? 'flex'
+                        : 'none',
+                } }, index.h("input", { checked: this.selectedPaths[grandchild.path], onChange: (_event) => {
+                    this.handleCheckboxChange(grandchild.path);
+                }, type: 'checkbox' }), index.h("div", { class: index$1.classNames('checkContainer', 'searchcraft-filter-list-check-container') }, index.h("searchcraft-check-icon", null)), this.formatSubLabel(grandchild, facetChild))))))));
+        })));
     }
 };
-SearchcraftFacetList.style = SearchcraftFacetListStyle0;
-
-const searchcraftSliderModuleCss = ":root{--sc-input-border-radius:8px;--sc-input-search-icon-size:20px;--sc-input-clear-icon-size:20px;--sc-input-padding-left:44px;--sc-input-padding-right:44px;--sc-image-border-radius:8px;--sc-popover-form-border-radius:8px;--sc-popover-list-view-height:400px;--sc-popover-list-item-image-size:60px;--sc-popover-list-item-padding-horizontal:8px;--sc-popover-list-item-padding-vertical:8px;--sc-popover-modal-max-width:570px}:root{--sc-surface-disabled:#D9D9D9;--sc-surface-neutral-primary:#FFFFFF;--sc-surface-neutral-secondary:#F3F3F3;--sc-surface-neutral-light:#FFFFFF;--sc-surface-neutral-primary-hover:#FAFAFA;--sc-surface-neutral-primary-active:#F7F7F7;--sc-surface-neutral-secondary-hover:#EDEDED;--sc-surface-neutral-secondary-active:#E6E6E6;--sc-surface-brand-primary:#000000;--sc-surface-brand-secondary:#E6E6E6;--sc-surface-brand-primary-hover:#2E2E2E;--sc-surface-brand-primary-active:#292929;--sc-surface-brand-secondary-hover:#EBEBEB;--sc-surface-brand-secondary-active:#E0E0E0;--sc-surface-success-primary:#008000;--sc-surface-success-secondary:#CCFFCC;--sc-surface-success-primary-hover:#009900;--sc-surface-success-primary-active:#006600;--sc-surface-success-secondary-hover:#E6FFE6;--sc-surface-success-secondary-active:#E6FFE6;--sc-surface-caution-primary:#CC6600;--sc-surface-caution-secondary:#FFD9B3;--sc-surface-caution-primary-hover:#E57300;--sc-surface-caution-primary-active:#B25A00;--sc-surface-caution-secondary-hover:#FFE5CC;--sc-surface-caution-secondary-active:#FFCC99;--sc-surface-danger-primary:#CC0000;--sc-surface-danger-secondary:#FFCCCC;--sc-surface-danger-primary-hover:#E50000;--sc-surface-danger-primary-active:#B30000;--sc-surface-danger-secondary-hover:#FFE7E7;--sc-surface-danger-secondary-active:#FFB3B3;--sc-content-brand:#000000;--sc-content-success:#008000;--sc-content-caution:#994D00;--sc-content-danger:#990000;--sc-content-disabled:#737373;--sc-content-neutral-primary:#292929;--sc-content-neutral-secondary:#404040;--sc-content-brand-on-primary:#FFFFFF;--sc-content-success-on-primary:#FFFFFF;--sc-content-caution-on-primary:#FFFFFF;--sc-content-danger-on-primary:#FFFFFF;--sc-content-disabled-on-disabled:#737373;--sc-border-neutral:rgba(0,0,0, 0.1);--sc-border-brand:#000000;--sc-border-success:#008000;--sc-border-caution:#CC6600;--sc-border-danger:#CC0000;--sc-border-disabled:#737373}:root{--sc-font-family:sans-serif;--sc-heading-1-font-size:32px;--sc-heading-1-line-height:36px;--sc-heading-1-font-weight:700;--sc-heading-2-font-size:29px;--sc-heading-2-line-height:32px;--sc-heading-2-font-weight:700;--sc-heading-3-font-size:26px;--sc-heading-3-line-height:28px;--sc-heading-3-font-weight:700;--sc-heading-4-font-size:23px;--sc-heading-4-line-height:24px;--sc-heading-4-font-weight:700;--sc-heading-5-font-size:20px;--sc-heading-5-line-height:24px;--sc-heading-5-font-weight:700;--sc-heading-6-font-size:10px;--sc-heading-6-line-height:12px;--sc-heading-6-font-weight:700;--sc-body-bold-font-size:16px;--sc-body-bold-line-height:20px;--sc-body-bold-font-weight:700;--sc-body-font-size:16px;--sc-body-line-height:20px;--sc-body-font-weight:400;--sc-body-small-bold-font-size:12px;--sc-body-small-bold-line-height:16px;--sc-body-small-bold-font-weight:700;--sc-body-small-font-size:12px;--sc-body-small-line-height:16px;--sc-body-small-font-weight:400}:root{--sc-breakpoint-sm:576px;--sc-breakpoint-md:768px;--sc-breakpoint-lg:992px}.searchcraft-slider-container{align-items:center;display:flex;flex-direction:column;gap:10px;width:100%}.searchcraft-slider-range-container{align-items:center;background-color:var(--sc-surface-disabled);border-radius:999px;display:flex;position:relative;height:4px;width:100%}.searchcraft-slider-range-container::-webkit-slider-runnable-track{pointer-events:none}.searchcraft-slider-range-container .searchcraft-slider-active-range{background-color:var(--sc-surface-brand-primary);border-radius:2px;height:4px;position:absolute;top:50%;transform:translateY(-50%);z-index:0}.searchcraft-slider-range-container .searchcraft-slider-active-range::-webkit-slider-runnable-track{pointer-events:none}.searchcraft-slider-range-container .searchcraft-slider-active-range::-moz-range-track{pointer-events:none}.searchcraft-slider-range-container .searchcraft-slider-input{appearance:none;background:transparent;border-radius:2px;height:4px;margin:0;outline:none;pointer-events:none;position:absolute;width:100%;-webkit-appearance:none}.searchcraft-slider-range-container .searchcraft-slider-input::-webkit-slider-thumb{background-color:var(--sc-surface-neutral-light);border-radius:50%;border:2px solid var(--sc-border-neutral);cursor:pointer;height:20px;pointer-events:all;width:20px;-webkit-appearance:none}.searchcraft-slider-range-container .searchcraft-slider-input::-moz-range-thumb{background-color:var(--sc-surface-neutral-light);border-radius:50%;border:2px solid var(--sc-border-neutral);cursor:pointer;height:20px;pointer-events:all;width:20px}.searchcraft-slider-label-container{color:var(--sc-content-primary);display:flex;font-family:\"Source Sans Pro\", sans-serif;font-size:15px;font-weight:600;justify-content:space-between;margin-top:10px;width:100%}.searchcraft-slider-label{min-width:30px;text-align:center}";
-const SearchcraftSliderStyle0 = searchcraftSliderModuleCss;
 
 const SearchcraftSlider = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.rangeChanged = index.createEvent(this, "rangeChanged", 7);
-        /**
-         * The maximum value allowed.
-         */
-        this.max = 100;
-        /**
-         * The minimum value allowed.
-         */
-        this.min = 0;
-        /**
-         * The granularity that the value must adhere to.
-         */
-        this.granularity = units.getMillis('month');
-        /** The type of data allowed. */
-        this.dataType = 'number';
-        this.endValue = this.max;
-        this.startValue = this.min;
-        this.lastFocusedHandle = 'max';
-        this.emitUpdate = async () => {
-            this.rangeChanged.emit({
-                startValue: this.startValue,
-                endValue: this.endValue,
-            });
-        };
-        this.handleStartValueChange = (event) => {
-            const inputElement = event.target;
-            const value = Number.parseInt(inputElement.value, 10);
-            this.lastFocusedHandle = 'min';
-            if (value <= this.endValue) {
-                this.startValue = value;
-                this.emitUpdate();
-            }
-            else {
-                this.startValue = this.endValue;
-                inputElement.value = `${this.endValue}`;
-            }
-        };
-        this.handleEndValueChange = (event) => {
-            const inputElement = event.target;
-            const value = Number.parseInt(inputElement.value, 10);
-            this.lastFocusedHandle = 'max';
-            if (value >= this.startValue) {
-                this.endValue = value;
-                this.emitUpdate();
-            }
-            else {
-                this.endValue = this.startValue;
-                inputElement.value = `${this.startValue}`;
-            }
-        };
     }
+    /**
+     * The maximum value allowed.
+     */
+    max = 100;
+    /**
+     * The minimum value allowed.
+     */
+    min = 0;
+    /**
+     * The granularity that the value must adhere to.
+     */
+    granularity = units.getMillis('month');
+    /** The type of data allowed. */
+    dataType = 'number';
+    endValue = this.max;
+    startValue = this.min;
+    lastFocusedHandle = 'max';
+    /**
+     * When the range has changed.
+     * */
+    rangeChanged;
     componentDidLoad() {
         this.startValue = this.min;
         this.endValue = this.max;
     }
+    emitUpdate = async () => {
+        this.rangeChanged?.emit({
+            startValue: this.startValue,
+            endValue: this.endValue,
+        });
+    };
+    handleStartValueChange = (event) => {
+        const inputElement = event.target;
+        const value = Number.parseInt(inputElement.value, 10);
+        this.lastFocusedHandle = 'min';
+        if (value <= this.endValue) {
+            this.startValue = value;
+            this.emitUpdate();
+        }
+        else {
+            this.startValue = this.endValue;
+            inputElement.value = `${this.endValue}`;
+        }
+    };
+    handleEndValueChange = (event) => {
+        const inputElement = event.target;
+        const value = Number.parseInt(inputElement.value, 10);
+        this.lastFocusedHandle = 'max';
+        if (value >= this.startValue) {
+            this.endValue = value;
+            this.emitUpdate();
+        }
+        else {
+            this.endValue = this.startValue;
+            inputElement.value = `${this.startValue}`;
+        }
+    };
     render() {
         const rangeMin = this.min;
         const rangeMax = this.max;
@@ -315,31 +333,37 @@ const SearchcraftSlider = class {
         const endLabel = this.dataType === 'number'
             ? this.endValue
             : new Date(this.endValue).getFullYear();
-        return (index.h("div", { key: 'd03f03307d560048eff499afabb4171421c9b5cd', class: 'searchcraft-slider-container' }, index.h("div", { key: '986b2fb47def38024b256cb093546ee7db9ccf5c', class: 'searchcraft-slider-range-container' }, index.h("div", { key: '4c4f71c218f65acbfa25ec220cdeb581ef0e6c0d', class: 'searchcraft-slider-active-range', style: {
+        return (index.h("div", { key: 'bf815949fc9e24e7f3ff9e1870affe676592fc68', class: 'searchcraft-slider-container' }, index.h("div", { key: 'd0913ee4e35f551782ec5649b9782c535e81ff74', class: 'searchcraft-slider-range-container' }, index.h("div", { key: '5397b3ef9a79c589080560e886ef709b77279748', class: 'searchcraft-slider-active-range', style: {
                 left: `${startPercent}%`,
                 width: `${endPercent - startPercent}%`,
-            } }), index.h("input", { key: '8968b1925f83480561a460b5f7da64499ec220c0', class: index$1.classNames('searchcraft-slider-input', 'searchcraft-slider-input-min-handle'), max: this.max, min: this.min, onInput: this.handleStartValueChange.bind(this), step: this.granularity, style: { zIndex: this.lastFocusedHandle === 'min' ? '2' : '1' }, type: 'range', value: this.startValue }), index.h("input", { key: '1ec4b397eb5ca6834719b0c09811d2b11e70c6d0', class: index$1.classNames('searchcraft-slider-input', 'searchcraft-slider-input-max-handle'), max: this.max, min: this.min, onInput: this.handleEndValueChange.bind(this), step: this.granularity, style: { zIndex: this.lastFocusedHandle === 'max' ? '2' : '1' }, type: 'range', value: this.endValue })), index.h("div", { key: 'abc788f7398c68aefcd12468280ef07fcf2ae673', class: 'searchcraft-slider-label-container' }, index.h("span", { key: 'f09f772f95c21fc4dfcd58d6eed7ff6901d329b8', class: 'searchcraft-slider-label' }, startLabel), index.h("span", { key: '251cecce58bb785d9478e80edfe429a1e18ef274', class: 'searchcraft-slider-label' }, endLabel))));
+            } }), index.h("input", { key: '714896ec90ea07a1be7b73e7168c6fab9d2c095b', class: index$1.classNames('searchcraft-slider-input', 'searchcraft-slider-input-min-handle'), max: this.max, min: this.min, onInput: this.handleStartValueChange.bind(this), step: this.granularity, style: { zIndex: this.lastFocusedHandle === 'min' ? '2' : '1' }, type: 'range', value: this.startValue }), index.h("input", { key: '646042689f17b594dac00ba04c80d5d3a32a3cd0', class: index$1.classNames('searchcraft-slider-input', 'searchcraft-slider-input-max-handle'), max: this.max, min: this.min, onInput: this.handleEndValueChange.bind(this), step: this.granularity, style: { zIndex: this.lastFocusedHandle === 'max' ? '2' : '1' }, type: 'range', value: this.endValue })), index.h("div", { key: 'a6bc39619d6bcbb3ccf09e923436122db4559289', class: 'searchcraft-slider-label-container' }, index.h("span", { key: 'd15f19f86abeacb5c100403e9e4be20f28f604c0', class: 'searchcraft-slider-label' }, startLabel), index.h("span", { key: '6c0394917a4f54edae8a347cc8b225a64d044ea6', class: 'searchcraft-slider-label' }, endLabel))));
     }
 };
-SearchcraftSlider.style = SearchcraftSliderStyle0;
-
-const searchcraftToggleButtonModuleCss = ":root{--sc-input-border-radius:8px;--sc-input-search-icon-size:20px;--sc-input-clear-icon-size:20px;--sc-input-padding-left:44px;--sc-input-padding-right:44px;--sc-image-border-radius:8px;--sc-popover-form-border-radius:8px;--sc-popover-list-view-height:400px;--sc-popover-list-item-image-size:60px;--sc-popover-list-item-padding-horizontal:8px;--sc-popover-list-item-padding-vertical:8px;--sc-popover-modal-max-width:570px}:root{--sc-surface-disabled:#D9D9D9;--sc-surface-neutral-primary:#FFFFFF;--sc-surface-neutral-secondary:#F3F3F3;--sc-surface-neutral-light:#FFFFFF;--sc-surface-neutral-primary-hover:#FAFAFA;--sc-surface-neutral-primary-active:#F7F7F7;--sc-surface-neutral-secondary-hover:#EDEDED;--sc-surface-neutral-secondary-active:#E6E6E6;--sc-surface-brand-primary:#000000;--sc-surface-brand-secondary:#E6E6E6;--sc-surface-brand-primary-hover:#2E2E2E;--sc-surface-brand-primary-active:#292929;--sc-surface-brand-secondary-hover:#EBEBEB;--sc-surface-brand-secondary-active:#E0E0E0;--sc-surface-success-primary:#008000;--sc-surface-success-secondary:#CCFFCC;--sc-surface-success-primary-hover:#009900;--sc-surface-success-primary-active:#006600;--sc-surface-success-secondary-hover:#E6FFE6;--sc-surface-success-secondary-active:#E6FFE6;--sc-surface-caution-primary:#CC6600;--sc-surface-caution-secondary:#FFD9B3;--sc-surface-caution-primary-hover:#E57300;--sc-surface-caution-primary-active:#B25A00;--sc-surface-caution-secondary-hover:#FFE5CC;--sc-surface-caution-secondary-active:#FFCC99;--sc-surface-danger-primary:#CC0000;--sc-surface-danger-secondary:#FFCCCC;--sc-surface-danger-primary-hover:#E50000;--sc-surface-danger-primary-active:#B30000;--sc-surface-danger-secondary-hover:#FFE7E7;--sc-surface-danger-secondary-active:#FFB3B3;--sc-content-brand:#000000;--sc-content-success:#008000;--sc-content-caution:#994D00;--sc-content-danger:#990000;--sc-content-disabled:#737373;--sc-content-neutral-primary:#292929;--sc-content-neutral-secondary:#404040;--sc-content-brand-on-primary:#FFFFFF;--sc-content-success-on-primary:#FFFFFF;--sc-content-caution-on-primary:#FFFFFF;--sc-content-danger-on-primary:#FFFFFF;--sc-content-disabled-on-disabled:#737373;--sc-border-neutral:rgba(0,0,0, 0.1);--sc-border-brand:#000000;--sc-border-success:#008000;--sc-border-caution:#CC6600;--sc-border-danger:#CC0000;--sc-border-disabled:#737373}:root{--sc-font-family:sans-serif;--sc-heading-1-font-size:32px;--sc-heading-1-line-height:36px;--sc-heading-1-font-weight:700;--sc-heading-2-font-size:29px;--sc-heading-2-line-height:32px;--sc-heading-2-font-weight:700;--sc-heading-3-font-size:26px;--sc-heading-3-line-height:28px;--sc-heading-3-font-weight:700;--sc-heading-4-font-size:23px;--sc-heading-4-line-height:24px;--sc-heading-4-font-weight:700;--sc-heading-5-font-size:20px;--sc-heading-5-line-height:24px;--sc-heading-5-font-weight:700;--sc-heading-6-font-size:10px;--sc-heading-6-line-height:12px;--sc-heading-6-font-weight:700;--sc-body-bold-font-size:16px;--sc-body-bold-line-height:20px;--sc-body-bold-font-weight:700;--sc-body-font-size:16px;--sc-body-line-height:20px;--sc-body-font-weight:400;--sc-body-small-bold-font-size:12px;--sc-body-small-bold-line-height:16px;--sc-body-small-bold-font-weight:700;--sc-body-small-font-size:12px;--sc-body-small-line-height:16px;--sc-body-small-font-weight:400}:root{--sc-breakpoint-sm:576px;--sc-breakpoint-md:768px;--sc-breakpoint-lg:992px}.searchcraft-toggle-button-container{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.searchcraft-toggle-button-label{font-family:var(--sc-font-family);-webkit-font-smoothing:antialiased;font-size:var(--sc-body-font-size);font-weight:var(--sc-body-font-weight);line-height:var(--sc-body-line-height);margin:0;color:var(--sc-content-neutral-primary)}.searchcraft-toggle-button-sub-label{font-family:var(--sc-font-family);-webkit-font-smoothing:antialiased;font-size:var(--sc-body-small-font-size);font-weight:var(--sc-body-small-font-weight);line-height:var(--sc-body-small-line-height);margin:0;color:var(--sc-content-neutral-secondary)}.searchcraft-toggle-button-background{transition:background-color 0.2s;background:var(--sc-surface-disabled);border:none;border-radius:16px;cursor:pointer;height:26px;position:relative;width:44px;flex-shrink:0}.searchcraft-toggle-button-background.active{background:var(--sc-surface-brand-primary);box-shadow:0px 0px 0px 1px rgba(0, 0, 0, 0.05)}.searchcraft-toggle-button-handle{background:var(--sc-surface-neutral-light);border-radius:50%;height:18px;left:4px;position:absolute;top:calc(50% - 9px);transition:transform 0.3s ease;width:18px}.searchcraft-toggle-button-handle.active{transform:translateX(16px)}";
-const SearchcraftToggleButtonStyle0 = searchcraftToggleButtonModuleCss;
 
 const SearchcraftToggleButton = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.toggleUpdated = index.createEvent(this, "toggleUpdated", 7);
-        /**
-         * The label.
-         */
-        this.label = 'Toggle';
-        this.isActive = false;
-        this.handleToggle = async () => {
-            this.isActive = !this.isActive;
-            this.toggleUpdated.emit(this.isActive);
-        };
     }
+    /**
+     * The label.
+     */
+    label = 'Toggle';
+    /**
+     * The secondary label displayed below the main label.
+     */
+    subLabel;
+    /**
+     * When the toggle element is changed.
+     */
+    toggleUpdated;
+    isActive = false;
+    unsubscribe;
+    lastQuery;
+    handleToggle = async () => {
+        this.isActive = !this.isActive;
+        this.toggleUpdated?.emit(this.isActive);
+    };
     connectedCallback() {
         /** When the query changes, sets toggle button state back to inactive. */
         this.unsubscribe = store.useSearchcraftStore.subscribe((state) => {
@@ -350,18 +374,16 @@ const SearchcraftToggleButton = class {
         });
     }
     disconnectedCallback() {
-        var _a;
-        (_a = this.unsubscribe) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.unsubscribe?.();
     }
     render() {
-        return (index.h("div", { key: '607bbc1adc109ec918effb25c6b91052227a2f7b', class: 'searchcraft-toggle-button-container' }, index.h("div", { key: 'b452e1690c617020866f6bf3e591f62cc3fce111' }, index.h("p", { key: '1bd8fa345516e412ea57bdbeac37dc8e26f2feaa', class: 'searchcraft-toggle-button-label' }, this.label), this.subLabel && (index.h("p", { key: 'fce324a14721bab5f6173838f677ecb290200c8f', class: 'searchcraft-toggle-button-sub-label' }, this.subLabel))), index.h("button", { key: '7b293a3ef64da88f463e5e6e303dabcbc63589bd', class: index$1.classNames('searchcraft-toggle-button-background', {
+        return (index.h("div", { key: '8967ffc9328e0e6822f558d04ab31bc7b7f5c871', class: 'searchcraft-toggle-button-container' }, index.h("div", { key: 'd46d8ad6aff1bb012bea8e4b10cec03a12da8d64' }, index.h("p", { key: 'f9fd16a0da58bd66697d13df34a93cd70a6148c6', class: 'searchcraft-toggle-button-label' }, this.label), this.subLabel && (index.h("p", { key: 'ba7a0c309ca4cc0faa891ad9e270ac16f1d1d4cc', class: 'searchcraft-toggle-button-sub-label' }, this.subLabel))), index.h("button", { key: '3b406713d41f055bbaf32d231188faba0dfa48fb', class: index$1.classNames('searchcraft-toggle-button-background', {
                 active: this.isActive,
-            }), onClick: this.handleToggle, type: 'button' }, index.h("div", { key: '6afd68afeea5bb15ce1bde486ac59f7a958f6752', class: index$1.classNames('searchcraft-toggle-button-handle', {
+            }), onClick: this.handleToggle, type: 'button' }, index.h("div", { key: '7dab3166e027e4efad18a3db9b541c1a4ba7da5f', class: index$1.classNames('searchcraft-toggle-button-handle', {
                 active: this.isActive,
             }) }))));
     }
 };
-SearchcraftToggleButton.style = SearchcraftToggleButtonStyle0;
 
 exports.searchcraft_facet_list = SearchcraftFacetList;
 exports.searchcraft_slider = SearchcraftSlider;