@searchcraft/javascript-sdk 0.6.0 → 0.7.1

package/dist/cjs/searchcraft-popover-form.cjs.entry.js

@@ -2,66 +2,48 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b3b77ea2.js');
+const index = require('./index-a81df4f0.js');
 const index$1 = require('./index-5b0b9d4c.js');
-const store = require('./store-d7ebcf7a.js');
-
-const searchcraftPopoverFormModuleCss = ":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-popover-form{display:flex;flex-direction:column;flex:1}.searchcraft-popover-form .searchcraft-popover-form-input-wrapper{padding:12px;background-color:var(--sc-surface-neutral-secondary);display:flex;flex-direction:row;gap:4px}.searchcraft-popover-form .searchcraft-popover-form-input-wrapper>searchcraft-input-form{flex:1}.searchcraft-popover-form .searchcraft-popover-form-cancel-button{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);border:0;outline:0;padding:0;flex-shrink:0;background:none;cursor:pointer;padding-left:12px;padding-right:12px;border-radius:calc(var(--sc-popover-form-border-radius) * 0.8)}.searchcraft-popover-form .searchcraft-popover-form-cancel-button:hover{background-color:var(--sc-surface-brand-secondary-hover)}.searchcraft-popover-form .searchcraft-popover-form-cancel-button:focus{background-color:var(--sc-surface-brand-secondary-active)}.searchcraft-popover-form-inline .searchcraft-input{border-top-left-radius:var(--sc-popover-form-border-radius);border-top-right-radius:var(--sc-popover-form-border-radius);border-bottom-left-radius:var(--sc-popover-form-border-radius);border-bottom-right-radius:var(--sc-popover-form-border-radius);border:none;outline:none}.searchcraft-popover-form-inline.searchcraft-popover-form-active .searchcraft-input{border-top-left-radius:var(--sc-popover-form-border-radius);border-top-right-radius:var(--sc-popover-form-border-radius);border-bottom-left-radius:0;border-bottom-right-radius:0}.searchcraft-popover-form-inline .searchcraft-popover-inline-wrapper-outer{position:relative}.searchcraft-popover-form-inline .searchcraft-popover-inline-wrapper-inner{position:absolute;height:var(--sc-popover-list-view-height);z-index:1000;width:100%}.searchcraft-popover-form-inline .searchcraft-popover-list-view{display:flex;flex-direction:column;overflow:auto;background-color:var(--sc-surface-neutral-secondary);border-bottom-left-radius:var(--sc-popover-form-border-radius);border-bottom-right-radius:var(--sc-popover-form-border-radius);max-height:var(--sc-popover-list-view-height)}.searchcraft-popover-form-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-start;justify-content:center;padding:0;background-color:var(--sc-surface-neutral-secondary)}@media (min-width: 576px){.searchcraft-popover-form-modal{padding:16px;background-color:transparent}}.searchcraft-popover-form-modal .searchcraft-input{border-radius:calc(var(--sc-popover-form-border-radius) * 0.8);outline-width:1px;outline-color:var(--sc-border-neutral)}.searchcraft-popover-form-modal .searchcraft-popover-form-modal-backdrop{position:absolute;inset:0;background-color:rgba(0, 0, 0, 0.5);display:none}@media (min-width: 576px){.searchcraft-popover-form-modal .searchcraft-popover-form-modal-backdrop{display:block}}.searchcraft-popover-form-modal .searchcraft-popover-form-modal-inner{position:absolute;inset:0;z-index:1002;margin-top:0px;display:flex;border-radius:var(--sc-popover-form-border-radius);overflow:hidden}@media (min-width: 576px){.searchcraft-popover-form-modal .searchcraft-popover-form-modal-inner{inset:auto;position:relative;width:100%;margin-top:100px;max-width:var(--sc-popover-modal-max-width)}}.searchcraft-popover-form-modal .searchcraft-popover-list-view{display:flex;flex-direction:column;overflow:auto;background-color:var(--sc-surface-neutral-secondary);border-bottom-left-radius:0;border-bottom-right-radius:0}@media (min-width: 576px){.searchcraft-popover-form-modal .searchcraft-popover-list-view{max-height:var(--sc-popover-list-view-height)}}.searchcraft-popover-form-modal searchcraft-popover-list-view{overflow:scroll}@media (min-width: 576px){.searchcraft-popover-form-modal searchcraft-popover-list-view{overflow:auto}}.searchcraft-popover-form-fullscreen{position:fixed;inset:0;z-index:1000;background-color:var(--sc-surface-neutral-secondary)}.searchcraft-popover-form-fullscreen .searchcraft-popover-form{position:absolute;inset:0}.searchcraft-popover-form-fullscreen .searchcraft-input{border-radius:calc(var(--sc-popover-form-border-radius) * 0.8);outline-width:1px;outline-color:var(--sc-border-neutral)}.searchcraft-popover-form-fullscreen searchcraft-popover-list-view{overflow:scroll}";
-const SearchcraftPopoverFormStyle0 = searchcraftPopoverFormModuleCss;
+const store = require('./store-f6ba3dfb.js');
 
 const SearchcraftPopoverForm = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.handleDocumentClick = (event) => {
-            if (!this.hostElement.contains(event.target)) {
-                this.isFocused = false;
-            }
-        };
-        /**
-         * Actions to perform when various keys are pressed within the popover form.
-         */
-        this.handleDocumentKeyDown = (event) => {
-            // Document-scoped actions
-            if (event.key === this.hotkey) {
-                this.handleHotkeyPressed(event);
-            }
-            // Document-scoped -> Popover-scoped keyboard event boundary
-            if (!this.hostElement.contains(document.activeElement)) {
-                return;
-            }
-            // Popover-scoped actions
-            switch (event.key) {
-                case 'ArrowDown':
-                case 'ArrowUp':
-                    event.preventDefault();
-                    this.focusOnNextListItem(event.key);
-                    break;
-                case 'Escape':
-                    store.useSearchcraftStore.getState().setPopoverVisibility(false);
-                    break;
-                default:
-                    return;
-            }
-        };
-        this.handleInputInit = () => {
-            const input = this.hostElement.querySelector('.searchcraft-input');
-            input === null || input === void 0 ? void 0 : input.focus();
-        };
-        this.config = undefined;
-        this.type = 'inline';
-        this.popoverResultMappings = undefined;
-        this.hotkey = 'k';
-        this.hotkeyModifier = 'meta';
-        this.isPopoverVisibleInState = false;
-        this.unsubscribe = undefined;
-        this.searchResults = undefined;
-        this.searchTerm = undefined;
-        this.isFocused = false;
-        this.breakpointSm = 576;
-        this.breakpointMd = 768;
-        this.breakpointLg = 992;
-        this.modalElement = undefined;
     }
+    /**
+     * The Searchcraft config object.
+     */
+    config;
+    /**
+     * The type of popover form to render.
+     *
+     * - `inline` - Renders inline with the rest of the content on the page. The search results pop over the page content.
+     * - `fullscreen` - Renders in fullscreen view. Used together with the `searchcraft-popover-button` component.
+     * - `modal` - Renders in a modal view. Used together with the `searchcraft-popover-button` component.
+     */
+    type = 'inline';
+    /**
+     * Formats the content rendered for each result.
+     */
+    popoverResultMappings;
+    /**
+     * The hotkey that activates the popover.
+     */
+    hotkey = 'k';
+    /**
+     * The hotkey modifier that activates the popover. Used together with the `hotkey` prop.
+     */
+    hotkeyModifier = 'meta';
+    isPopoverVisibleInState = false;
+    unsubscribe;
+    searchResults;
+    searchTerm;
+    isFocused = false;
+    breakpointSm = 576;
+    breakpointMd = 768;
+    breakpointLg = 992;
+    modalElement;
+    get hostElement() { return index.getElement(this); }
     componentDidLoad() {
         // Loads the breakpoint values into state
         const computedStyle = getComputedStyle(document.documentElement);
@@ -79,16 +61,20 @@ const SearchcraftPopoverForm = class {
             if (this.isPopoverVisibleInState !== state.isPopoverVisible) {
                 this.handlePopoverVisibilityChange(state.isPopoverVisible);
             }
-            this.searchResults = Object.assign({}, state.searchResults);
+            this.searchResults = { ...state.searchResults };
             this.searchTerm = state.query;
         });
     }
     disconnectedCallback() {
-        var _a;
-        (_a = this.unsubscribe) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.unsubscribe?.();
         document.removeEventListener('click', this.handleDocumentClick);
         document.removeEventListener('keydown', this.handleDocumentKeyDown);
     }
+    handleDocumentClick = (event) => {
+        if (!this.hostElement.contains(event.target)) {
+            this.isFocused = false;
+        }
+    };
     /**
      * Handles when popover visibility is changed in state
      */
@@ -96,6 +82,36 @@ const SearchcraftPopoverForm = class {
         this.isPopoverVisibleInState = isVisible;
         document.body.style.overflow = isVisible ? 'hidden' : 'auto';
     }
+    /**
+     * Actions to perform when various keys are pressed within the popover form.
+     */
+    handleDocumentKeyDown = (event) => {
+        // Document-scoped actions
+        if (event.key === this.hotkey) {
+            this.handleHotkeyPressed(event);
+        }
+        // Document-scoped -> Popover-scoped keyboard event boundary
+        if (!this.hostElement.contains(document.activeElement)) {
+            return;
+        }
+        // Popover-scoped actions
+        switch (event.key) {
+            case 'ArrowDown':
+            case 'ArrowUp':
+                event.preventDefault();
+                this.focusOnNextListItem(event.key);
+                break;
+            case 'Escape':
+                store.useSearchcraftStore.getState().setPopoverVisibility(false);
+                break;
+            default:
+                return;
+        }
+    };
+    handleInputInit = () => {
+        const input = this.hostElement.querySelector('.searchcraft-input');
+        input?.focus();
+    };
     /**
      * When popover is `inline` and the viewport is at the smallest breakpoint,
      * focusing on the input will open a modal version of the popover form.
@@ -103,6 +119,7 @@ const SearchcraftPopoverForm = class {
     handleInputFocus() {
         this.isFocused = true;
         if (this.type === 'inline' &&
+            window.visualViewport &&
             window.visualViewport.width < this.breakpointSm) {
             store.useSearchcraftStore.getState().setPopoverVisibility(true);
             // Appends a popover form of type=`modal` to the body
@@ -129,7 +146,7 @@ const SearchcraftPopoverForm = class {
             event.preventDefault();
             if (this.type === 'inline' && !this.isPopoverVisibleInState) {
                 const hostElementInput = this.hostElement.querySelector('.searchcraft-input');
-                hostElementInput === null || hostElementInput === void 0 ? void 0 : hostElementInput.focus();
+                hostElementInput?.focus();
             }
             else {
                 store.useSearchcraftStore
@@ -148,15 +165,14 @@ const SearchcraftPopoverForm = class {
      * @param direction
      */
     focusOnNextListItem(direction) {
-        var _a, _b;
         const listItems = Array.from(document.querySelectorAll('a.searchcraft-popover-list-item')).filter((el) => !el.hasAttribute('disabled') && el.offsetParent !== null);
         const currentIndex = listItems.indexOf(document.activeElement);
         if (direction === 'ArrowDown') {
-            (_a = listItems[(currentIndex + 1) % listItems.length]) === null || _a === void 0 ? void 0 : _a.focus();
+            listItems[(currentIndex + 1) % listItems.length]?.focus();
         }
         else if (direction === 'ArrowUp') {
             if (currentIndex >= 1) {
-                (_b = listItems[currentIndex - 1]) === null || _b === void 0 ? void 0 : _b.focus();
+                listItems[currentIndex - 1]?.focus();
             }
             else {
                 const input = document.querySelector('.searchcraft-input');
@@ -171,9 +187,9 @@ const SearchcraftPopoverForm = class {
         }
     }
     get hasResultsToShow() {
-        var _a, _b, _c, _d, _e;
-        return (((_b = (_a = this.searchTerm) === null || _a === void 0 ? void 0 : _a.trim()) === null || _b === void 0 ? void 0 : _b.length) > 0 &&
-            ((_e = (_d = (_c = this.searchResults) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.hits) === null || _e === void 0 ? void 0 : _e.length) > 0);
+        return (this.searchTerm &&
+            this.searchTerm?.trim()?.length > 0 &&
+            (this.searchResults?.data?.hits?.length || 0) > 0);
     }
     renderInlinePopover(documents) {
         const isListViewVisible = this.hasResultsToShow && this.isFocused;
@@ -196,8 +212,7 @@ const SearchcraftPopoverForm = class {
         }
     }
     render() {
-        var _a, _b, _c;
-        const documents = (_c = (_b = (_a = this.searchResults) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.hits) === null || _c === void 0 ? void 0 : _c.map((data, _index) => {
+        const documents = this.searchResults?.data?.hits?.map((data, _index) => {
             const { doc: result } = data;
             return result;
         });
@@ -210,9 +225,7 @@ const SearchcraftPopoverForm = class {
                 return this.renderFullscreenPopover(documents);
         }
     }
-    get hostElement() { return index.getElement(this); }
 };
-SearchcraftPopoverForm.style = SearchcraftPopoverFormStyle0;
 
 exports.searchcraft_popover_form = SearchcraftPopoverForm;
 

package/dist/cjs/searchcraft-popover-form.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"searchcraft-popover-form.entry.cjs.js","mappings":"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","names":["useSearchcraftStore","classNames","h"],"sources":["src/components/searchcraft-popover-form/searchcraft-popover-form.module.scss?tag=searchcraft-popover-form","src/components/searchcraft-popover-form/searchcraft-popover-form.tsx"],"sourcesContent":["/**\n * Styles applied to all popover form variants.\n */\n.searchcraft-popover-form {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n\n  & .searchcraft-popover-form-input-wrapper {\n    padding: 12px;\n    background-color: var(--sc-surface-neutral-secondary);\n    display: flex;\n    flex-direction: row;\n    gap: 4px;\n  }\n\n  & .searchcraft-popover-form-input-wrapper > searchcraft-input-form {\n    flex: 1;\n  }\n\n  & .searchcraft-popover-form-cancel-button {\n    @include body();\n    border: 0;\n    outline: 0;\n    padding: 0;\n    flex-shrink: 0;\n    background: none;\n    cursor: pointer;\n    padding-left: 12px;\n    padding-right: 12px;\n    border-radius: calc(var(--sc-popover-form-border-radius) * 0.8);\n\n    &:hover {\n      background-color: var(--sc-surface-brand-secondary-hover);\n    }\n\n    &:focus {\n      background-color: var(--sc-surface-brand-secondary-active);\n    }\n  }\n}\n\n/**\n * Styles applied to `inline` popover forms.\n */\n.searchcraft-popover-form-inline {\n  & .searchcraft-input {\n    border-top-left-radius: var(--sc-popover-form-border-radius);\n    border-top-right-radius: var(--sc-popover-form-border-radius);\n    border-bottom-left-radius: var(--sc-popover-form-border-radius);\n    border-bottom-right-radius: var(--sc-popover-form-border-radius);\n    border: none;\n    outline: none;\n  }\n\n  &.searchcraft-popover-form-active .searchcraft-input {\n    border-top-left-radius: var(--sc-popover-form-border-radius);\n    border-top-right-radius: var(--sc-popover-form-border-radius);\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n\n  & .searchcraft-popover-inline-wrapper-outer {\n    position: relative;\n  }\n\n  & .searchcraft-popover-inline-wrapper-inner {\n    position: absolute;\n    height: var(--sc-popover-list-view-height);\n    z-index: 1000;\n    width: 100%;\n  }\n\n  & .searchcraft-popover-list-view {\n    display: flex;\n    flex-direction: column;\n    overflow: auto;\n    background-color: var(--sc-surface-neutral-secondary);\n    border-bottom-left-radius: var(--sc-popover-form-border-radius);\n    border-bottom-right-radius: var(--sc-popover-form-border-radius);\n    max-height: var(--sc-popover-list-view-height)\n  }\n}\n\n/**\n * Styles applied to `modal` popover forms.\n */\n.searchcraft-popover-form-modal {\n  position: fixed;\n  inset: 0;\n  z-index: 1000;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  padding: 0;\n  background-color: var(--sc-surface-neutral-secondary);\n\n  @media (min-width: $breakpoint-sm) {\n    padding: 16px;\n    background-color: transparent;\n  }\n\n  & .searchcraft-input {\n    border-radius: calc(var(--sc-popover-form-border-radius) * 0.8);\n    outline-width: 1px;\n    outline-color: var(--sc-border-neutral);\n  }\n\n  & .searchcraft-popover-form-modal-backdrop {\n    position: absolute;\n    inset: 0;\n    background-color: rgba(0,0,0, 0.5);\n    display: none;\n\n    @media (min-width: $breakpoint-sm) {\n      display: block;\n    }\n  }\n\n  & .searchcraft-popover-form-modal-inner {\n    position: absolute;\n    inset: 0;\n    z-index: 1002;\n    margin-top: 0px;\n    display: flex;\n    border-radius: var(--sc-popover-form-border-radius);\n    overflow: hidden;\n\n    @media (min-width: $breakpoint-sm) {\n      inset: auto;\n      position: relative;\n      width: 100%;\n      margin-top: 100px;\n      max-width: var(--sc-popover-modal-max-width);\n    }\n  }\n\n  & .searchcraft-popover-list-view {\n    display: flex;\n    flex-direction: column;\n    overflow: auto;\n    background-color: var(--sc-surface-neutral-secondary);\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n\n    @media (min-width: $breakpoint-sm) {\n      max-height: var(--sc-popover-list-view-height)\n    }\n  }\n\n  & searchcraft-popover-list-view {\n    overflow: scroll;\n\n    @media (min-width: $breakpoint-sm) {\n      overflow: auto;\n    }\n  }\n}\n\n/**\n * Styles applied to `fullscreen` popover forms.\n */\n.searchcraft-popover-form-fullscreen {\n  position: fixed;\n  inset: 0;\n  z-index: 1000;\n  background-color: var(--sc-surface-neutral-secondary);\n\n  & .searchcraft-popover-form {\n    position: absolute;\n    inset: 0;\n  }\n\n  & .searchcraft-input {\n    border-radius: calc(var(--sc-popover-form-border-radius) * 0.8);\n    outline-width: 1px;\n    outline-color: var(--sc-border-neutral);\n  }\n\n  & searchcraft-popover-list-view {\n    overflow: scroll;\n  }\n}\n","import { Component, Element, Prop, State, h } from '@stencil/core';\nimport classNames from 'classnames';\nimport type { SearchcraftConfig, SearchcraftResponse } from '@searchcraft/core';\n\nimport { useSearchcraftStore } from '@provider/store';\nimport type { PopoverResultMappings } from 'types';\n\n/**\n * This web component is designed to display search results in a popover container that dynamically appears when the user interacts with a search input field.\n *\n * ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-popover-form type=\"fullscreen\" />\n * ```\n *\n * ```js\n * // index.js\n * const popoverForm = document.querySelector('searchcraft-popover-form');\n *\n * popoverForm.config = {\n *   index: [index_name_from_vektron],\n *   readKey: 'read_key_from_vektron',\n *   endpointUrl: 'enpoint_url_from_vektron',\n * };\n *\n * popoverForm.popoverResultMappings = {\n *  containerHref: {\n *   fieldNames: [\n *    {\n *      fieldName: 'canonical_link',\n *      dataType: 'text',\n *    },\n *  ],\n *  };\n * ```\n */\n@Component({\n  tag: 'searchcraft-popover-form',\n  styleUrl: 'searchcraft-popover-form.module.scss',\n  shadow: false,\n})\nexport class SearchcraftPopoverForm {\n  /**\n   * The Searchcraft config object.\n   */\n  @Prop() config: SearchcraftConfig | undefined;\n  /**\n   * The type of popover form to render.\n   *\n   * - `inline` - Renders inline with the rest of the content on the page. The search results pop over the page content.\n   * - `fullscreen` - Renders in fullscreen view. Used together with the `searchcraft-popover-button` component.\n   * - `modal` - Renders in a modal view. Used together with the `searchcraft-popover-button` component.\n   */\n  @Prop() type: 'inline' | 'fullscreen' | 'modal' = 'inline';\n  /**\n   * Formats the content rendered for each result.\n   */\n  @Prop() popoverResultMappings: PopoverResultMappings | undefined;\n  /**\n   * The hotkey that activates the popover.\n   */\n  @Prop() hotkey = 'k';\n  /**\n   * The hotkey modifier that activates the popover. Used together with the `hotkey` prop.\n   */\n  @Prop() hotkeyModifier: 'ctrl' | 'meta' | 'alt' | 'option' = 'meta';\n\n  @State() isPopoverVisibleInState = false;\n  @State() unsubscribe: (() => void) | undefined;\n  @State() searchResults: SearchcraftResponse | undefined;\n  @State() searchTerm: string | undefined;\n  @State() isFocused = false;\n  @State() breakpointSm = 576;\n  @State() breakpointMd = 768;\n  @State() breakpointLg = 992;\n\n  @State() modalElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  componentDidLoad() {\n    // Loads the breakpoint values into state\n    const computedStyle = getComputedStyle(document.documentElement);\n    this.breakpointSm = Number.parseFloat(\n      computedStyle.getPropertyValue('--sc-breakpoint-sm').trim(),\n    );\n    this.breakpointMd = Number.parseFloat(\n      computedStyle.getPropertyValue('--sc-breakpoint-md').trim(),\n    );\n    this.breakpointLg = Number.parseFloat(\n      computedStyle.getPropertyValue('--sc-breakpoint-lg').trim(),\n    );\n    // Set popover visiblity in state\n    this.isPopoverVisibleInState =\n      useSearchcraftStore.getState().isPopoverVisible;\n\n    // Add event listeners\n    document.addEventListener('click', this.handleDocumentClick);\n    document.addEventListener('keydown', this.handleDocumentKeyDown);\n\n    // Subscribe to state events\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      if (this.isPopoverVisibleInState !== state.isPopoverVisible) {\n        this.handlePopoverVisibilityChange(state.isPopoverVisible);\n      }\n\n      this.searchResults = { ...state.searchResults };\n      this.searchTerm = state.query;\n    });\n  }\n\n  disconnectedCallback() {\n    this.unsubscribe?.();\n    document.removeEventListener('click', this.handleDocumentClick);\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n  }\n\n  handleDocumentClick = (event: MouseEvent) => {\n    if (!this.hostElement.contains(event.target as Node)) {\n      this.isFocused = false;\n    }\n  };\n\n  /**\n   * Handles when popover visibility is changed in state\n   */\n  handlePopoverVisibilityChange(isVisible: boolean) {\n    this.isPopoverVisibleInState = isVisible;\n    document.body.style.overflow = isVisible ? 'hidden' : 'auto';\n  }\n\n  /**\n   * Actions to perform when various keys are pressed within the popover form.\n   */\n  handleDocumentKeyDown = (event: KeyboardEvent) => {\n    // Document-scoped actions\n    if (event.key === this.hotkey) {\n      this.handleHotkeyPressed(event);\n    }\n\n    // Document-scoped -> Popover-scoped keyboard event boundary\n    if (!this.hostElement.contains(document.activeElement)) {\n      return;\n    }\n\n    // Popover-scoped actions\n    switch (event.key) {\n      case 'ArrowDown':\n      case 'ArrowUp':\n        event.preventDefault();\n        this.focusOnNextListItem(event.key);\n        break;\n      case 'Escape':\n        useSearchcraftStore.getState().setPopoverVisibility(false);\n        break;\n      default:\n        return;\n    }\n  };\n\n  handleInputInit = () => {\n    const input = this.hostElement.querySelector('.searchcraft-input') as\n      | HTMLInputElement\n      | undefined;\n    input?.focus();\n  };\n\n  /**\n   * When popover is `inline` and the viewport is at the smallest breakpoint,\n   * focusing on the input will open a modal version of the popover form.\n   */\n  handleInputFocus() {\n    this.isFocused = true;\n\n    if (\n      this.type === 'inline' &&\n      window.visualViewport.width < this.breakpointSm\n    ) {\n      useSearchcraftStore.getState().setPopoverVisibility(true);\n\n      // Appends a popover form of type=`modal` to the body\n      if (!this.modalElement) {\n        this.modalElement = document.createElement('searchcraft-popover-form');\n        this.modalElement.config = this.config;\n        this.modalElement.popoverResultMappings = this.popoverResultMappings;\n        this.modalElement.setAttribute('type', 'fullscreen');\n        document.body.appendChild(this.modalElement);\n      }\n    }\n  }\n\n  handleModalBackdropClick(_event: MouseEvent) {\n    useSearchcraftStore.getState().setPopoverVisibility(false);\n  }\n\n  /**\n   * When a hotkey is pressed, tests if the modifiers also match.\n   * If modifiers match, toggles visibility of the popover modal.\n   */\n  handleHotkeyPressed(event: KeyboardEvent) {\n    if (\n      (event.ctrlKey && this.hotkeyModifier === 'ctrl') ||\n      (event.altKey && this.hotkeyModifier === 'alt') ||\n      (event.metaKey && this.hotkeyModifier === 'meta')\n    ) {\n      event.preventDefault();\n      if (this.type === 'inline' && !this.isPopoverVisibleInState) {\n        const hostElementInput = this.hostElement.querySelector(\n          '.searchcraft-input',\n        ) as HTMLInputElement | undefined;\n        hostElementInput?.focus();\n      } else {\n        useSearchcraftStore\n          .getState()\n          .setPopoverVisibility(!this.isPopoverVisibleInState);\n      }\n    }\n  }\n\n  handleCancelButtonClick() {\n    useSearchcraftStore.getState().setPopoverVisibility(false);\n  }\n\n  /**\n   * Moves focus to the next/previous list item in the list view. If you are at the top\n   * of the list view, it moves focus back to the input.\n   *\n   * @param direction\n   */\n  focusOnNextListItem(direction: 'ArrowDown' | 'ArrowUp') {\n    const listItems = Array.from(\n      document.querySelectorAll<HTMLAnchorElement>(\n        'a.searchcraft-popover-list-item',\n      ),\n    ).filter((el) => !el.hasAttribute('disabled') && el.offsetParent !== null);\n\n    const currentIndex = listItems.indexOf(\n      document.activeElement as HTMLAnchorElement,\n    );\n\n    if (direction === 'ArrowDown') {\n      listItems[(currentIndex + 1) % listItems.length]?.focus();\n    } else if (direction === 'ArrowUp') {\n      if (currentIndex >= 1) {\n        listItems[currentIndex - 1]?.focus();\n      } else {\n        const input = document.querySelector('.searchcraft-input') as\n          | HTMLInputElement\n          | undefined;\n\n        if (input) {\n          input.focus();\n          requestAnimationFrame(() => {\n            input.selectionEnd = input.value.length;\n            input.selectionStart = input.value.length;\n          });\n        }\n      }\n    }\n  }\n\n  get hasResultsToShow() {\n    return (\n      this.searchTerm?.trim()?.length > 0 &&\n      this.searchResults?.data?.hits?.length > 0\n    );\n  }\n\n  renderInlinePopover(documents: Record<string, unknown>[]) {\n    const isListViewVisible = this.hasResultsToShow && this.isFocused;\n\n    const popoverFormClassNames = classNames(\n      'searchcraft-popover-form searchcraft-popover-form-inline',\n      {\n        'searchcraft-popover-form-active': isListViewVisible,\n      },\n    );\n\n    return (\n      <div class={popoverFormClassNames}>\n        <searchcraft-input-form\n          config={this.config}\n          onInputFocus={this.handleInputFocus.bind(this)}\n        />\n        {isListViewVisible && (\n          <div class='searchcraft-popover-inline-wrapper-outer'>\n            <div class='searchcraft-popover-inline-wrapper-inner'>\n              <searchcraft-popover-list-view\n                popoverResultMappings={this.popoverResultMappings}\n                documents={documents}\n              />\n            </div>\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  renderModalPopover(documents: Record<string, unknown>[]) {\n    if (this.isPopoverVisibleInState) {\n      const popoverFormClassNames = classNames('searchcraft-popover-form', {\n        'searchcraft-popover-form-active': this.hasResultsToShow,\n      });\n\n      return (\n        <div class='searchcraft-popover-form-modal'>\n          {/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}\n          <div\n            class='searchcraft-popover-form-modal-backdrop'\n            onClick={this.handleModalBackdropClick}\n          />\n          <div class='searchcraft-popover-form-modal-inner'>\n            <div class={popoverFormClassNames}>\n              <div class='searchcraft-popover-form-input-wrapper'>\n                <searchcraft-input-form\n                  config={this.config}\n                  onInputFocus={this.handleInputFocus.bind(this)}\n                  onInputInit={this.handleInputInit.bind(this)}\n                />\n                <button\n                  type='button'\n                  class='searchcraft-popover-form-cancel-button'\n                  onClick={this.handleCancelButtonClick.bind(this)}\n                >\n                  Cancel\n                </button>\n              </div>\n              {this.hasResultsToShow && (\n                <searchcraft-popover-list-view\n                  popoverResultMappings={this.popoverResultMappings}\n                  documents={documents}\n                />\n              )}\n            </div>\n          </div>\n        </div>\n      );\n    }\n  }\n\n  renderFullscreenPopover(documents: Record<string, unknown>[]) {\n    if (this.isPopoverVisibleInState) {\n      return (\n        <div class='searchcraft-popover-form-fullscreen'>\n          <div class='searchcraft-popover-form'>\n            <div class='searchcraft-popover-form-input-wrapper'>\n              <searchcraft-input-form\n                config={this.config}\n                onInputFocus={this.handleInputFocus.bind(this)}\n                onInputInit={this.handleInputInit.bind(this)}\n              />\n              <button\n                type='button'\n                class='searchcraft-popover-form-cancel-button'\n                onClick={this.handleCancelButtonClick.bind(this)}\n              >\n                Cancel\n              </button>\n            </div>\n            {this.hasResultsToShow && (\n              <searchcraft-popover-list-view\n                popoverResultMappings={this.popoverResultMappings}\n                documents={documents}\n              />\n            )}\n          </div>\n        </div>\n      );\n    }\n  }\n\n  render() {\n    const documents: Record<string, unknown>[] =\n      this.searchResults?.data?.hits?.map((data, _index) => {\n        const { doc: result } = data;\n        return result;\n      });\n\n    switch (this.type) {\n      case 'inline':\n        return this.renderInlinePopover(documents);\n      case 'modal':\n        return this.renderModalPopover(documents);\n      case 'fullscreen':\n        return this.renderFullscreenPopover(documents);\n    }\n  }\n}\n"],"version":3}
+{"file":"searchcraft-popover-form.entry.cjs.js","mappings":"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","names":["useSearchcraftStore","classNames","h"],"sources":["src/components/searchcraft-popover-form/searchcraft-popover-form.tsx"],"sourcesContent":["import { Component, Element, Prop, State, h } from '@stencil/core';\nimport classNames from 'classnames';\nimport type { SearchcraftConfig, SearchcraftResponse } from '@searchcraft/core';\n\nimport { useSearchcraftStore } from '@provider/store';\nimport type { PopoverResultMappings } from 'types';\n\n/**\n * This web component is designed to display search results in a popover container that dynamically appears when the user interacts with a search input field.\n *\n * ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-popover-form type=\"fullscreen\" />\n * ```\n *\n * ```js\n * // index.js\n * const popoverForm = document.querySelector('searchcraft-popover-form');\n *\n * popoverForm.config = {\n *   index: [index_name_from_vektron],\n *   readKey: 'read_key_from_vektron',\n *   endpointUrl: 'enpoint_url_from_vektron',\n * };\n *\n * popoverForm.popoverResultMappings = {\n *  containerHref: {\n *   fieldNames: [\n *    {\n *      fieldName: 'canonical_link',\n *      dataType: 'text',\n *    },\n *  ],\n *  };\n * ```\n */\n@Component({\n  tag: 'searchcraft-popover-form',\n  shadow: false,\n})\nexport class SearchcraftPopoverForm {\n  /**\n   * The Searchcraft config object.\n   */\n  @Prop() config: SearchcraftConfig | undefined;\n  /**\n   * The type of popover form to render.\n   *\n   * - `inline` - Renders inline with the rest of the content on the page. The search results pop over the page content.\n   * - `fullscreen` - Renders in fullscreen view. Used together with the `searchcraft-popover-button` component.\n   * - `modal` - Renders in a modal view. Used together with the `searchcraft-popover-button` component.\n   */\n  @Prop() type: 'inline' | 'fullscreen' | 'modal' = 'inline';\n  /**\n   * Formats the content rendered for each result.\n   */\n  @Prop() popoverResultMappings: PopoverResultMappings | undefined;\n  /**\n   * The hotkey that activates the popover.\n   */\n  @Prop() hotkey = 'k';\n  /**\n   * The hotkey modifier that activates the popover. Used together with the `hotkey` prop.\n   */\n  @Prop() hotkeyModifier: 'ctrl' | 'meta' | 'alt' | 'option' = 'meta';\n\n  @State() isPopoverVisibleInState = false;\n  @State() unsubscribe: (() => void) | undefined;\n  @State() searchResults: SearchcraftResponse | undefined;\n  @State() searchTerm: string | undefined;\n  @State() isFocused = false;\n  @State() breakpointSm = 576;\n  @State() breakpointMd = 768;\n  @State() breakpointLg = 992;\n\n  @State() modalElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  componentDidLoad() {\n    // Loads the breakpoint values into state\n    const computedStyle = getComputedStyle(document.documentElement);\n    this.breakpointSm = Number.parseFloat(\n      computedStyle.getPropertyValue('--sc-breakpoint-sm').trim(),\n    );\n    this.breakpointMd = Number.parseFloat(\n      computedStyle.getPropertyValue('--sc-breakpoint-md').trim(),\n    );\n    this.breakpointLg = Number.parseFloat(\n      computedStyle.getPropertyValue('--sc-breakpoint-lg').trim(),\n    );\n    // Set popover visiblity in state\n    this.isPopoverVisibleInState =\n      useSearchcraftStore.getState().isPopoverVisible;\n\n    // Add event listeners\n    document.addEventListener('click', this.handleDocumentClick);\n    document.addEventListener('keydown', this.handleDocumentKeyDown);\n\n    // Subscribe to state events\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      if (this.isPopoverVisibleInState !== state.isPopoverVisible) {\n        this.handlePopoverVisibilityChange(state.isPopoverVisible);\n      }\n\n      this.searchResults = { ...state.searchResults } as SearchcraftResponse;\n      this.searchTerm = state.query;\n    });\n  }\n\n  disconnectedCallback() {\n    this.unsubscribe?.();\n    document.removeEventListener('click', this.handleDocumentClick);\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n  }\n\n  handleDocumentClick = (event: MouseEvent) => {\n    if (!this.hostElement.contains(event.target as Node)) {\n      this.isFocused = false;\n    }\n  };\n\n  /**\n   * Handles when popover visibility is changed in state\n   */\n  handlePopoverVisibilityChange(isVisible: boolean) {\n    this.isPopoverVisibleInState = isVisible;\n    document.body.style.overflow = isVisible ? 'hidden' : 'auto';\n  }\n\n  /**\n   * Actions to perform when various keys are pressed within the popover form.\n   */\n  handleDocumentKeyDown = (event: KeyboardEvent) => {\n    // Document-scoped actions\n    if (event.key === this.hotkey) {\n      this.handleHotkeyPressed(event);\n    }\n\n    // Document-scoped -> Popover-scoped keyboard event boundary\n    if (!this.hostElement.contains(document.activeElement)) {\n      return;\n    }\n\n    // Popover-scoped actions\n    switch (event.key) {\n      case 'ArrowDown':\n      case 'ArrowUp':\n        event.preventDefault();\n        this.focusOnNextListItem(event.key);\n        break;\n      case 'Escape':\n        useSearchcraftStore.getState().setPopoverVisibility(false);\n        break;\n      default:\n        return;\n    }\n  };\n\n  handleInputInit = () => {\n    const input = this.hostElement.querySelector('.searchcraft-input') as\n      | HTMLInputElement\n      | undefined;\n    input?.focus();\n  };\n\n  /**\n   * When popover is `inline` and the viewport is at the smallest breakpoint,\n   * focusing on the input will open a modal version of the popover form.\n   */\n  handleInputFocus() {\n    this.isFocused = true;\n\n    if (\n      this.type === 'inline' &&\n      window.visualViewport &&\n      window.visualViewport.width < this.breakpointSm\n    ) {\n      useSearchcraftStore.getState().setPopoverVisibility(true);\n\n      // Appends a popover form of type=`modal` to the body\n      if (!this.modalElement) {\n        this.modalElement = document.createElement('searchcraft-popover-form');\n        this.modalElement.config = this.config;\n        this.modalElement.popoverResultMappings = this.popoverResultMappings;\n        this.modalElement.setAttribute('type', 'fullscreen');\n        document.body.appendChild(this.modalElement);\n      }\n    }\n  }\n\n  handleModalBackdropClick(_event: MouseEvent) {\n    useSearchcraftStore.getState().setPopoverVisibility(false);\n  }\n\n  /**\n   * When a hotkey is pressed, tests if the modifiers also match.\n   * If modifiers match, toggles visibility of the popover modal.\n   */\n  handleHotkeyPressed(event: KeyboardEvent) {\n    if (\n      (event.ctrlKey && this.hotkeyModifier === 'ctrl') ||\n      (event.altKey && this.hotkeyModifier === 'alt') ||\n      (event.metaKey && this.hotkeyModifier === 'meta')\n    ) {\n      event.preventDefault();\n      if (this.type === 'inline' && !this.isPopoverVisibleInState) {\n        const hostElementInput = this.hostElement.querySelector(\n          '.searchcraft-input',\n        ) as HTMLInputElement | undefined;\n        hostElementInput?.focus();\n      } else {\n        useSearchcraftStore\n          .getState()\n          .setPopoverVisibility(!this.isPopoverVisibleInState);\n      }\n    }\n  }\n\n  handleCancelButtonClick() {\n    useSearchcraftStore.getState().setPopoverVisibility(false);\n  }\n\n  /**\n   * Moves focus to the next/previous list item in the list view. If you are at the top\n   * of the list view, it moves focus back to the input.\n   *\n   * @param direction\n   */\n  focusOnNextListItem(direction: 'ArrowDown' | 'ArrowUp') {\n    const listItems = Array.from(\n      document.querySelectorAll<HTMLAnchorElement>(\n        'a.searchcraft-popover-list-item',\n      ),\n    ).filter((el) => !el.hasAttribute('disabled') && el.offsetParent !== null);\n\n    const currentIndex = listItems.indexOf(\n      document.activeElement as HTMLAnchorElement,\n    );\n\n    if (direction === 'ArrowDown') {\n      listItems[(currentIndex + 1) % listItems.length]?.focus();\n    } else if (direction === 'ArrowUp') {\n      if (currentIndex >= 1) {\n        listItems[currentIndex - 1]?.focus();\n      } else {\n        const input = document.querySelector('.searchcraft-input') as\n          | HTMLInputElement\n          | undefined;\n\n        if (input) {\n          input.focus();\n          requestAnimationFrame(() => {\n            input.selectionEnd = input.value.length;\n            input.selectionStart = input.value.length;\n          });\n        }\n      }\n    }\n  }\n\n  get hasResultsToShow() {\n    return (\n      this.searchTerm &&\n      this.searchTerm?.trim()?.length > 0 &&\n      (this.searchResults?.data?.hits?.length || 0) > 0\n    );\n  }\n\n  renderInlinePopover(documents: Record<string, unknown>[]) {\n    const isListViewVisible = this.hasResultsToShow && this.isFocused;\n\n    const popoverFormClassNames = classNames(\n      'searchcraft-popover-form searchcraft-popover-form-inline',\n      {\n        'searchcraft-popover-form-active': isListViewVisible,\n      },\n    );\n\n    return (\n      <div class={popoverFormClassNames}>\n        <searchcraft-input-form\n          config={this.config}\n          onInputFocus={this.handleInputFocus.bind(this)}\n        />\n        {isListViewVisible && (\n          <div class='searchcraft-popover-inline-wrapper-outer'>\n            <div class='searchcraft-popover-inline-wrapper-inner'>\n              <searchcraft-popover-list-view\n                popoverResultMappings={this.popoverResultMappings}\n                documents={documents}\n              />\n            </div>\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  renderModalPopover(documents: Record<string, unknown>[]) {\n    if (this.isPopoverVisibleInState) {\n      const popoverFormClassNames = classNames('searchcraft-popover-form', {\n        'searchcraft-popover-form-active': this.hasResultsToShow,\n      });\n\n      return (\n        <div class='searchcraft-popover-form-modal'>\n          {/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}\n          <div\n            class='searchcraft-popover-form-modal-backdrop'\n            onClick={this.handleModalBackdropClick}\n          />\n          <div class='searchcraft-popover-form-modal-inner'>\n            <div class={popoverFormClassNames}>\n              <div class='searchcraft-popover-form-input-wrapper'>\n                <searchcraft-input-form\n                  config={this.config}\n                  onInputFocus={this.handleInputFocus.bind(this)}\n                  onInputInit={this.handleInputInit.bind(this)}\n                />\n                <button\n                  type='button'\n                  class='searchcraft-popover-form-cancel-button'\n                  onClick={this.handleCancelButtonClick.bind(this)}\n                >\n                  Cancel\n                </button>\n              </div>\n              {this.hasResultsToShow && (\n                <searchcraft-popover-list-view\n                  popoverResultMappings={this.popoverResultMappings}\n                  documents={documents}\n                />\n              )}\n            </div>\n          </div>\n        </div>\n      );\n    }\n  }\n\n  renderFullscreenPopover(documents: Record<string, unknown>[]) {\n    if (this.isPopoverVisibleInState) {\n      return (\n        <div class='searchcraft-popover-form-fullscreen'>\n          <div class='searchcraft-popover-form'>\n            <div class='searchcraft-popover-form-input-wrapper'>\n              <searchcraft-input-form\n                config={this.config}\n                onInputFocus={this.handleInputFocus.bind(this)}\n                onInputInit={this.handleInputInit.bind(this)}\n              />\n              <button\n                type='button'\n                class='searchcraft-popover-form-cancel-button'\n                onClick={this.handleCancelButtonClick.bind(this)}\n              >\n                Cancel\n              </button>\n            </div>\n            {this.hasResultsToShow && (\n              <searchcraft-popover-list-view\n                popoverResultMappings={this.popoverResultMappings}\n                documents={documents}\n              />\n            )}\n          </div>\n        </div>\n      );\n    }\n  }\n\n  render() {\n    const documents: Record<string, unknown>[] =\n      this.searchResults?.data?.hits?.map((data, _index) => {\n        const { doc: result } = data;\n        return result;\n      }) as Record<string, unknown>[];\n\n    switch (this.type) {\n      case 'inline':\n        return this.renderInlinePopover(documents);\n      case 'modal':\n        return this.renderModalPopover(documents);\n      case 'fullscreen':\n        return this.renderFullscreenPopover(documents);\n    }\n  }\n}\n"],"version":3}

package/dist/cjs/searchcraft-popover-list-item.cjs.entry.js

@@ -2,30 +2,47 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b3b77ea2.js');
-
-const searchcraftPopoverListItemModuleCss = ":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-popover-list-item{all:unset;display:flex;flex-direction:row;cursor:pointer;gap:8px;padding-right:var(--sc-popover-list-item-padding-horizontal);padding-left:var(--sc-popover-list-item-padding-horizontal);padding-top:var(--sc-popover-list-item-padding-vertical);padding-bottom:var(--sc-popover-list-item-padding-vertical)}.searchcraft-popover-list-item:focus{background-color:var(--sc-surface-neutral-secondary-active);color:var(--sc-content-neutral-secondary)}.searchcraft-popover-list-item:hover{background-color:var(--sc-surface-neutral-secondary-hover);color:var(--sc-content-neutral-secondary)}.searchcraft-popover-list-item-title{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:inherit}.searchcraft-popover-list-item-subtitle{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:inherit}.searchcraft-popover-list-item-image-wrapper{width:var(--sc-popover-list-item-image-size);height:var(--sc-popover-list-item-image-size);display:flex;align-items:center;justify-content:center;flex-shrink:0}.searchcraft-popover-list-item-image{max-width:var(--sc-popover-list-item-image-size);max-height:var(--sc-popover-list-item-image-size)}.searchcraft-popover-list-item-info-wrapper{display:flex;flex-direction:column;gap:8px;justify-content:center}";
-const SearchcraftPopoverListItemStyle0 = searchcraftPopoverListItemModuleCss;
+const index = require('./index-a81df4f0.js');
+const store = require('./store-f6ba3dfb.js');
 
 const SearchcraftPopoverListItem = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.titleContent = undefined;
-        this.subtitleContent = undefined;
-        this.imageSrc = undefined;
-        this.imageAlt = undefined;
-        this.href = undefined;
-        this.documentPosition = undefined;
     }
+    /** The result title */
+    titleContent;
+    /** The result subtitle */
+    subtitleContent;
+    /** The source of the image. If not included, no item will be rendered. */
+    imageSrc;
+    /** The image alt tag. */
+    imageAlt;
+    /** The link href */
+    href;
+    /** The document position relative to the search results (For Measure) */
+    documentPosition = 0;
     componentDidLoad() { }
     connectedCallback() { }
     disconnectedCallback() { }
     handleButtonClick() { }
+    handleLinkClick = () => {
+        const state = store.useSearchcraftStore.getState();
+        const searchcraft = state.getSearchcraftInstance();
+        if (searchcraft) {
+            const document_position = this.documentPosition;
+            const search_term = state.query;
+            const number_of_documents = state.searchResults?.data?.hits?.length || 0;
+            searchcraft.sendMeasureEvent('document_clicked', {
+                document_position,
+                number_of_documents,
+                search_term,
+            });
+        }
+    };
     render() {
-        return (index.h("a", { key: 'b7a590e92994869477825dd17545e8d4e05d1d07', class: 'searchcraft-popover-list-item', href: this.href }, this.imageSrc && (index.h("div", { key: '129525e50ec17dce052f503af318b56e06c900ef', class: 'searchcraft-popover-list-item-image-wrapper' }, index.h("img", { key: '4ba701f35cbf7e167e7edd63ba19e3576e620c26', alt: this.imageAlt, src: this.imageSrc, class: 'searchcraft-popover-list-item-image' }))), index.h("div", { key: '6a6ab09451f5d9d4e554dc1f1fcd57ec13adf2f2', class: 'searchcraft-popover-list-item-info-wrapper' }, index.h("p", { key: '476fdefff6cb35167fb00f24cdf03b9f8d826ba5', class: 'searchcraft-popover-list-item-title' }, this.titleContent), index.h("p", { key: 'b43fd584bfcc8efc7d50d7220b649fafc8bba244', class: 'searchcraft-popover-list-item-subtitle' }, this.subtitleContent))));
+        return (index.h("a", { key: 'b20aae2fc421323774a5129dde7d53d4ae3283fb', class: 'searchcraft-popover-list-item', href: this.href, onClick: this.handleLinkClick.bind(this) }, this.imageSrc && (index.h("div", { key: '79541d12ea3adafff2e141cb8946aa3feaea51df', class: 'searchcraft-popover-list-item-image-wrapper' }, index.h("img", { key: '3e6368a0f544a58ee0af9d1c15d0c909c6231842', alt: this.imageAlt, src: this.imageSrc, class: 'searchcraft-popover-list-item-image' }))), index.h("div", { key: '87e7a9dcc8b868af259b4456e9962af9d8dee498', class: 'searchcraft-popover-list-item-info-wrapper' }, index.h("p", { key: 'e5b63b4c2752573d0ee0ef52c2903b593a8b94a0', class: 'searchcraft-popover-list-item-title' }, this.titleContent), index.h("p", { key: 'c506d5d7e569ec20885eb65cdc6476dfb8895a13', class: 'searchcraft-popover-list-item-subtitle' }, this.subtitleContent))));
     }
 };
-SearchcraftPopoverListItem.style = SearchcraftPopoverListItemStyle0;
 
 exports.searchcraft_popover_list_item = SearchcraftPopoverListItem;
 

package/dist/cjs/searchcraft-popover-list-item.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"searchcraft-popover-list-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,mCAAmC,GAAG,g2JAAg2J,CAAC;AAC74J,yCAAe,mCAAmC;;MCSrC,0BAA0B;;;;;;;;;;IAcrC,gBAAgB,MAAK;IAErB,iBAAiB,MAAK;IAEtB,oBAAoB,MAAK;IAEzB,iBAAiB,MAAK;IAEtB,MAAM;QACJ,QACEA,gEAAG,KAAK,EAAC,+BAA+B,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IACrD,IAAI,CAAC,QAAQ,KACZA,kEAAK,KAAK,EAAC,6CAA6C,IACtDA,kEACE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAC,qCAAqC,GAC3C,CACE,CACP,EACDA,kEAAK,KAAK,EAAC,4CAA4C,IACrDA,gEAAG,KAAK,EAAC,qCAAqC,IAAE,IAAI,CAAC,YAAY,CAAK,EACtEA,gEAAG,KAAK,EAAC,wCAAwC,IAC9C,IAAI,CAAC,eAAe,CACnB,CACA,CACJ,EACJ;KACH;;;;;;","names":["h"],"sources":["src/components/searchcraft-popover-list-item/searchcraft-popover-list-item.module.scss?tag=searchcraft-popover-list-item","src/components/searchcraft-popover-list-item/searchcraft-popover-list-item.tsx"],"sourcesContent":[".searchcraft-popover-list-item {\n  all: unset;\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n  gap: 8px;\n  padding-right: var(--sc-popover-list-item-padding-horizontal);\n  padding-left: var(--sc-popover-list-item-padding-horizontal);\n  padding-top: var(--sc-popover-list-item-padding-vertical);\n  padding-bottom: var(--sc-popover-list-item-padding-vertical);\n\n  &:focus {\n    background-color: var(--sc-surface-neutral-secondary-active);\n    color: var(--sc-content-neutral-secondary);\n  }\n\n  &:hover {\n    background-color: var(--sc-surface-neutral-secondary-hover);\n    color: var(--sc-content-neutral-secondary);\n  }\n}\n\n.searchcraft-popover-list-item-title {\n  @include body();\n  margin: 0;\n  color: inherit;\n}\n\n.searchcraft-popover-list-item-subtitle {\n  @include body-small();\n  margin: 0;\n  color: inherit;\n}\n\n.searchcraft-popover-list-item-image-wrapper {\n  width: var(--sc-popover-list-item-image-size);\n  height: var(--sc-popover-list-item-image-size);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.searchcraft-popover-list-item-image {\n  max-width: var(--sc-popover-list-item-image-size);\n  max-height: var(--sc-popover-list-item-image-size);\n}\n\n.searchcraft-popover-list-item-info-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  justify-content: center;\n}","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * A single list item rendered in a searchcraft-popover-list-view.\n */\n@Component({\n  tag: 'searchcraft-popover-list-item',\n  styleUrl: 'searchcraft-popover-list-item.module.scss',\n  shadow: false,\n})\nexport class SearchcraftPopoverListItem {\n  /** The result title */\n  @Prop() titleContent: string | undefined;\n  /** The result subtitle */\n  @Prop() subtitleContent: string | undefined;\n  /** The source of the image. If not included, no item will be rendered. */\n  @Prop() imageSrc: string | undefined;\n  /** The image alt tag. */\n  @Prop() imageAlt: string | undefined;\n  /** The link href */\n  @Prop() href: string | undefined;\n  /** The document position relative to the search results (For Measure) */\n  @Prop() documentPosition: number;\n\n  componentDidLoad() {}\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  handleButtonClick() {}\n\n  render() {\n    return (\n      <a class='searchcraft-popover-list-item' href={this.href}>\n        {this.imageSrc && (\n          <div class='searchcraft-popover-list-item-image-wrapper'>\n            <img\n              alt={this.imageAlt}\n              src={this.imageSrc}\n              class='searchcraft-popover-list-item-image'\n            />\n          </div>\n        )}\n        <div class='searchcraft-popover-list-item-info-wrapper'>\n          <p class='searchcraft-popover-list-item-title'>{this.titleContent}</p>\n          <p class='searchcraft-popover-list-item-subtitle'>\n            {this.subtitleContent}\n          </p>\n        </div>\n      </a>\n    );\n  }\n}\n"],"version":3}
+{"file":"searchcraft-popover-list-item.entry.cjs.js","mappings":";;;;;;;MAUa,0BAA0B;;;;;IAE7B,YAAY,CAAqB;;IAEjC,eAAe,CAAqB;;IAEpC,QAAQ,CAAqB;;IAE7B,QAAQ,CAAqB;;IAE7B,IAAI,CAAqB;;IAEzB,gBAAgB,GAAG,CAAC,CAAC;IAE7B,gBAAgB,MAAK;IAErB,iBAAiB,MAAK;IAEtB,oBAAoB,MAAK;IAEzB,iBAAiB,MAAK;IAEtB,eAAe,GAAG;QAChB,MAAM,KAAK,GAAGA,yBAAmB,CAAC,QAAQ,EAAE,CAAC;QAC7C,MAAM,WAAW,GAAG,KAAK,CAAC,sBAAsB,EAAE,CAAC;QAEnD,IAAI,WAAW,EAAE;YACf,MAAM,iBAAiB,GAAG,IAAI,CAAC,gBAAgB,CAAC;YAChD,MAAM,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC;YAChC,MAAM,mBAAmB,GAAG,KAAK,CAAC,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,IAAI,CAAC,CAAC;YAEzE,WAAW,CAAC,gBAAgB,CAAC,kBAAkB,EAAE;gBAC/C,iBAAiB;gBACjB,mBAAmB;gBACnB,WAAW;aACZ,CAAC,CAAC;SACJ;KACF,CAAC;IAEF,MAAM;QACJ,QACEC,gEACE,KAAK,EAAC,+BAA+B,EACrC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,IAEvC,IAAI,CAAC,QAAQ,KACZA,kEAAK,KAAK,EAAC,6CAA6C,IACtDA,kEACE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAC,qCAAqC,GAC3C,CACE,CACP,EACDA,kEAAK,KAAK,EAAC,4CAA4C,IACrDA,gEAAG,KAAK,EAAC,qCAAqC,IAAE,IAAI,CAAC,YAAY,CAAK,EACtEA,gEAAG,KAAK,EAAC,wCAAwC,IAC9C,IAAI,CAAC,eAAe,CACnB,CACA,CACJ,EACJ;KACH;;;;;","names":["useSearchcraftStore","h"],"sources":["src/components/searchcraft-popover-list-item/searchcraft-popover-list-item.tsx"],"sourcesContent":["import { useSearchcraftStore } from '@provider/store';\nimport { Component, h, Prop } from '@stencil/core';\n\n/**\n * A single list item rendered in a searchcraft-popover-list-view.\n */\n@Component({\n  tag: 'searchcraft-popover-list-item',\n  shadow: false,\n})\nexport class SearchcraftPopoverListItem {\n  /** The result title */\n  @Prop() titleContent: string | undefined;\n  /** The result subtitle */\n  @Prop() subtitleContent: string | undefined;\n  /** The source of the image. If not included, no item will be rendered. */\n  @Prop() imageSrc: string | undefined;\n  /** The image alt tag. */\n  @Prop() imageAlt: string | undefined;\n  /** The link href */\n  @Prop() href: string | undefined;\n  /** The document position relative to the search results (For Measure) */\n  @Prop() documentPosition = 0;\n\n  componentDidLoad() {}\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  handleButtonClick() {}\n\n  handleLinkClick = () => {\n    const state = useSearchcraftStore.getState();\n    const searchcraft = state.getSearchcraftInstance();\n\n    if (searchcraft) {\n      const document_position = this.documentPosition;\n      const search_term = state.query;\n      const number_of_documents = state.searchResults?.data?.hits?.length || 0;\n\n      searchcraft.sendMeasureEvent('document_clicked', {\n        document_position,\n        number_of_documents,\n        search_term,\n      });\n    }\n  };\n\n  render() {\n    return (\n      <a\n        class='searchcraft-popover-list-item'\n        href={this.href}\n        onClick={this.handleLinkClick.bind(this)}\n      >\n        {this.imageSrc && (\n          <div class='searchcraft-popover-list-item-image-wrapper'>\n            <img\n              alt={this.imageAlt}\n              src={this.imageSrc}\n              class='searchcraft-popover-list-item-image'\n            />\n          </div>\n        )}\n        <div class='searchcraft-popover-list-item-info-wrapper'>\n          <p class='searchcraft-popover-list-item-title'>{this.titleContent}</p>\n          <p class='searchcraft-popover-list-item-subtitle'>\n            {this.subtitleContent}\n          </p>\n        </div>\n      </a>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/searchcraft-results-info.cjs.entry.js

@@ -2,27 +2,24 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b3b77ea2.js');
-const store = require('./store-d7ebcf7a.js');
+const index = require('./index-a81df4f0.js');
+const store = require('./store-f6ba3dfb.js');
 const units = require('./units-fe4d8083.js');
 
-const searchcraftResultsInfoModuleCss = ":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-results-info-container{border-bottom:1px solid var(--sc-surface-disabled);display:flex;justify-content:flex-start}.searchcraft-results-info-content{color:var(--sc-content-primary);font-family:var(--sc-font-family);font-size:18px;font-weight:600;line-height:20px;margin:0px 0 8px}@media (max-width: 768px){.searchcraft-results-info-content{margin:0;margin-bottom:8px}}";
-const SearchcraftResultsInfoStyle0 = searchcraftResultsInfoModuleCss;
-
 const SearchcraftResultsInfo = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.isRequesting = false;
-        this.resultsCount = 0;
-        this.responseTime = '';
-        this.query = '';
     }
+    isRequesting = false;
+    resultsCount = 0;
+    responseTime = '';
+    query = '';
+    unsubscribe = () => { };
     connectedCallback() {
         this.unsubscribe = store.useSearchcraftStore.subscribe((state) => {
-            var _a, _b, _c, _d;
             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.resultsCount = state.searchResults?.data?.count || 0;
+            this.responseTime = ((state.searchResults?.data?.time_taken || 0) * 1000).toFixed(2);
             this.query = state.query || '';
         });
     }
@@ -39,7 +36,6 @@ const SearchcraftResultsInfo = class {
         return (index.h("div", { class: 'searchcraft-results-info-container' }, index.h("p", { class: 'searchcraft-results-info-content' }, formattedResults, " results found in ", this.responseTime, "ms")));
     }
 };
-SearchcraftResultsInfo.style = SearchcraftResultsInfoStyle0;
 
 exports.searchcraft_results_info = SearchcraftResultsInfo;
 

package/dist/cjs/searchcraft-results-info.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"searchcraft-results-info.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,+BAA+B,GAAG,6rHAA6rH,CAAC;AACtuH,qCAAe,+BAA+B;;MCoBjC,sBAAsB;;;4BACT,KAAK;4BACL,CAAC;4BACD,EAAE;qBACT,EAAE;;IAInB,iBAAiB;QACf,IAAI,CAAC,WAAW,GAAGA,yBAAmB,CAAC,SAAS,CAAC,CAAC,KAAK;;YACrD,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,IAAI,IAAI,EACnD,OAAO,CAAC,CAAC,CAAC,CAAC;YACb,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;SAChC,CAAC,CAAC;KACJ;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB;KACF;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,YAAY,KAAK,CAAC,EAAE;YAC1C,OAAO,IAAI,CAAC;SACb;QACD,MAAM,gBAAgB,GAAGC,4BAAsB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACnE,QACEC,iBAAK,KAAK,EAAC,oCAAoC,IAC7CA,eAAG,KAAK,EAAC,kCAAkC,IACxC,gBAAgB,wBAAoB,IAAI,CAAC,YAAY,OACpD,CACA,EACN;KACH;;;;;;","names":["useSearchcraftStore","formatNumberWithCommas","h"],"sources":["src/components/searchcraft-results-info/searchcraft-results-info.module.scss?tag=searchcraft-results-info","src/components/searchcraft-results-info/searchcraft-results-info.tsx"],"sourcesContent":[".searchcraft-results-info-container {\n  border-bottom: 1px solid var(--sc-surface-disabled);\n  display: flex;\n  justify-content: flex-start;\n}\n\n.searchcraft-results-info-content {\n  color: var(--sc-content-primary);\n  font-family: var(--sc-font-family);\n  font-size: 18px;\n  font-weight: 600;\n  line-height: 20px;\n  margin: 0px 0 8px;\n\n  @media (max-width: $breakpoint-md) {\n    margin: 0;\n    margin-bottom: 8px;\n  }\n}","import { Component, h, State } from '@stencil/core';\n\nimport { useSearchcraftStore } from '@provider/store';\n\nimport { formatNumberWithCommas } from '@utils';\n\n/**\n * This web component is designed to display the number of results returned from a search query.\n * It provides users with real-time feedback on the scale of the results, such as the total number of items found.\n *\n * ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-results-info />\n * ```\n */\n@Component({\n  tag: 'searchcraft-results-info',\n  styleUrl: 'searchcraft-results-info.module.scss',\n  shadow: false,\n})\nexport class SearchcraftResultsInfo {\n  @State() isRequesting = false;\n  @State() resultsCount = 0;\n  @State() responseTime = '';\n  @State() query = '';\n\n  unsubscribe: () => void;\n\n  connectedCallback() {\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      this.isRequesting = state.isRequesting;\n      this.resultsCount = state.searchResults?.data?.count || 0;\n      this.responseTime = (\n        (state.searchResults?.data?.time_taken || 0) * 1000\n      ).toFixed(2);\n      this.query = state.query || '';\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribe) {\n      this.unsubscribe();\n    }\n  }\n\n  render() {\n    if (!this.query || this.resultsCount === 0) {\n      return null;\n    }\n    const formattedResults = formatNumberWithCommas(this.resultsCount);\n    return (\n      <div class='searchcraft-results-info-container'>\n        <p class='searchcraft-results-info-content'>\n          {formattedResults} results found in {this.responseTime}ms\n        </p>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"searchcraft-results-info.entry.cjs.js","mappings":";;;;;;;;MAoBa,sBAAsB;;;;IACxB,YAAY,GAAG,KAAK,CAAC;IACrB,YAAY,GAAG,CAAC,CAAC;IACjB,YAAY,GAAG,EAAE,CAAC;IAClB,KAAK,GAAG,EAAE,CAAC;IAEpB,WAAW,GAAe,SAAQ,CAAC;IAEnC,iBAAiB;QACf,IAAI,CAAC,WAAW,GAAGA,yBAAmB,CAAC,SAAS,CAAC,CAAC,KAAK;YACrD,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,YAAY,CAAC;YACvC,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,aAAa,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC,CAAC;YAC1D,IAAI,CAAC,YAAY,GAAG,CAClB,CAAC,KAAK,CAAC,aAAa,EAAE,IAAI,EAAE,UAAU,IAAI,CAAC,IAAI,IAAI,EACnD,OAAO,CAAC,CAAC,CAAC,CAAC;YACb,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;SAChC,CAAC,CAAC;KACJ;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB;KACF;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,YAAY,KAAK,CAAC,EAAE;YAC1C,OAAO,IAAI,CAAC;SACb;QACD,MAAM,gBAAgB,GAAGC,4BAAsB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACnE,QACEC,iBAAK,KAAK,EAAC,oCAAoC,IAC7CA,eAAG,KAAK,EAAC,kCAAkC,IACxC,gBAAgB,wBAAoB,IAAI,CAAC,YAAY,OACpD,CACA,EACN;KACH;;;;;","names":["useSearchcraftStore","formatNumberWithCommas","h"],"sources":["src/components/searchcraft-results-info/searchcraft-results-info.tsx"],"sourcesContent":["import { Component, h, State } from '@stencil/core';\n\nimport { useSearchcraftStore } from '@provider/store';\n\nimport { formatNumberWithCommas } from '@utils';\n\n/**\n * This web component is designed to display the number of results returned from a search query.\n * It provides users with real-time feedback on the scale of the results, such as the total number of items found.\n *\n * ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-results-info />\n * ```\n */\n@Component({\n  tag: 'searchcraft-results-info',\n  shadow: false,\n})\nexport class SearchcraftResultsInfo {\n  @State() isRequesting = false;\n  @State() resultsCount = 0;\n  @State() responseTime = '';\n  @State() query = '';\n\n  unsubscribe: () => void = () => {};\n\n  connectedCallback() {\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      this.isRequesting = state.isRequesting;\n      this.resultsCount = state.searchResults?.data?.count || 0;\n      this.responseTime = (\n        (state.searchResults?.data?.time_taken || 0) * 1000\n      ).toFixed(2);\n      this.query = state.query || '';\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribe) {\n      this.unsubscribe();\n    }\n  }\n\n  render() {\n    if (!this.query || this.resultsCount === 0) {\n      return null;\n    }\n    const formattedResults = formatNumberWithCommas(this.resultsCount);\n    return (\n      <div class='searchcraft-results-info-container'>\n        <p class='searchcraft-results-info-content'>\n          {formattedResults} results found in {this.responseTime}ms\n        </p>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-a81df4f0.js');
+
+const styles = `: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-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-breakpoint-sm: 576px;--sc-breakpoint-md: 768px;--sc-breakpoint-lg: 992px}: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}.searchcraft-search-result-container{all:unset;align-items:flex-start;border-radius:16px;display:flex;flex-direction:column;gap:16px;padding:8px;color:inherit;background-color:var(--sc-surface-neutral-primary)}@media(min-width: 768px){.searchcraft-search-result-container{flex-direction:row}}a.searchcraft-search-result-container{cursor:pointer;transition:background-color 100ms}.searchcraft-base-search-result-content-container{flex:1;display:flex;flex-direction:column;gap:8px}.searchcraft-search-result-image{border-radius:var(--sc-image-border-radius);width:100%}@media(min-width: 768px){.searchcraft-search-result-image{width:200px}}.searchcraft-base-search-result-title{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);margin:0;color:var(--sc-content-neutral-primary)}.searchcraft-base-search-result-subtitle{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-disabled)}.searchcraft-base-search-result-body-content{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-secondary)}.searchcraft-base-search-result-footer-content{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-disabled)}.searchcraft-search-results-container{display:flex;flex-direction:column;justify-content:center;gap:16px}.searchcraft-ad-section{align-items:center;background-color:#f1f1f1;border-radius:16px;display:flex;flex-direction:column;font-size:16px;justify-content:center;min-height:176px;text-align:center}.searchcraft-ad-section p{margin:0;color:var(--sc-content-disabled)}.searchcraft-search-results-empty-state-container{text-align:center}.searchcraft-search-results-error-message-container{text-align:center}.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}.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}.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}.searchcraft-filter-panel{display:flex;flex-direction:column;gap:16px}.searchcraft-filter-panel-section{display:flex;flex-direction:column;gap:8px}.searchcraft-filter-panel-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)}.searchcraft-input-grid{display:grid;gap:4px 8px}.searchcraft-input-grid-buttonLeft{grid-template-rows:repeat(3, auto);grid-template-columns:auto 1fr}.searchcraft-input-grid-buttonLeft .searchcraft-input-button-wrapper{grid-column:1/span 1;grid-row:2/span 1}.searchcraft-input-grid-buttonLeft .searchcraft-input-label-wrapper{grid-column:2/span 1;grid-row:1/span 1}.searchcraft-input-grid-buttonLeft .searchcraft-input-error-wrapper{grid-column:2/span 1;grid-row:3/span 1}.searchcraft-input-grid-buttonLeft .searchcraft-input-wrapper{grid-column:2/span 1;grid-row:2/span 1}.searchcraft-input-grid-buttonRight{grid-template-rows:repeat(3, auto);grid-template-columns:1fr auto}.searchcraft-input-grid-buttonRight .searchcraft-input-button-wrapper{grid-column:2/span 1;grid-row:2/span 1}.searchcraft-input-grid-buttonRight .searchcraft-input-label-wrapper{grid-column:1/span 1;grid-row:1/span 1}.searchcraft-input-grid-buttonRight .searchcraft-input-error-wrapper{grid-column:1/span 1;grid-row:3/span 1}.searchcraft-input-grid-buttonRight .searchcraft-input-wrapper{grid-column:1/span 1;grid-row:2/span 1}.searchcraft-input-grid-buttonNone{grid-template-rows:repeat(3, auto);grid-template-columns:auto}.searchcraft-input-grid-buttonNone .searchcraft-input-button-wrapper{display:none}.searchcraft-input-grid-buttonNone .searchcraft-input-label-wrapper{grid-column:1/span 1;grid-row:1/span 1}.searchcraft-input-grid-buttonNone .searchcraft-input-error-wrapper{grid-column:1/span 1;grid-row:3/span 1}.searchcraft-input-grid-buttonNone .searchcraft-input-wrapper{grid-column:1/span 1;grid-row:2/span 1}.searchcraft-input-wrapper{position:relative;display:flex}.searchcraft-input{font-family:var(--sc-font-family);-webkit-font-smoothing:antialiased;font-size:var(--sc-body-font-size);font-weight:var(--sc-body-font-weight);line-height:var(--sc-body-line-height);background-color:var(--sc-surface-neutral-secondary);border-radius:var(--sc-input-border-radius);border:none;color:var(--sc-content-neutral-primary);outline:none;padding-left:var(--sc-input-padding-left);padding-right:var(--sc-input-padding-right);padding-top:12px;padding-bottom:12px;flex:1}.searchcraft-input::placeholder{color:var(--sc-content-disabled)}.searchcraft-input:focus{outline:var(--sc-border-brand) solid 2px}.searchcraft-input:focus::placeholder{opacity:0}.searchcraft-input.error{color:var(--sc-content-danger);outline:var(--sc-border-danger) solid 2px}.searchcraft-input.error:focus{outline:var(--sc-border-danger) solid 2px}.searchcraft-input-search-icon-wrapper{align-items:center;justify-content:center;display:flex;position:absolute;pointer-events:none;bottom:0;left:0;top:0;width:var(--sc-input-padding-left)}.searchcraft-input-search-icon{pointer-events:none;width:var(--sc-input-search-icon-size);height:var(--sc-input-search-icon-size)}.searchcraft-input-clear-button{all:unset;align-items:center;justify-content:center;cursor:pointer;display:flex;position:absolute;border:none;outline:none;bottom:0;right:0;top:0;width:var(--sc-input-padding-right)}.searchcraft-input-clear-icon{width:var(--sc-input-clear-icon-size);height:var(--sc-input-clear-icon-size)}.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}.searchcraft-popover-form{display:flex;flex-direction:column;flex:1}.searchcraft-popover-form .searchcraft-popover-form-input-wrapper{padding:12px;background-color:var(--sc-surface-neutral-secondary);display:flex;flex-direction:row;gap:4px}.searchcraft-popover-form .searchcraft-popover-form-input-wrapper>searchcraft-input-form{flex:1}.searchcraft-popover-form .searchcraft-popover-form-cancel-button{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);border:0;outline:0;padding:0;flex-shrink:0;background:none;cursor:pointer;padding-left:12px;padding-right:12px;border-radius:calc(var(--sc-popover-form-border-radius)*.8)}.searchcraft-popover-form .searchcraft-popover-form-cancel-button:hover{background-color:var(--sc-surface-brand-secondary-hover)}.searchcraft-popover-form .searchcraft-popover-form-cancel-button:focus{background-color:var(--sc-surface-brand-secondary-active)}.searchcraft-popover-form-inline .searchcraft-input{border-top-left-radius:var(--sc-popover-form-border-radius);border-top-right-radius:var(--sc-popover-form-border-radius);border-bottom-left-radius:var(--sc-popover-form-border-radius);border-bottom-right-radius:var(--sc-popover-form-border-radius);border:none;outline:none}.searchcraft-popover-form-inline.searchcraft-popover-form-active .searchcraft-input{border-top-left-radius:var(--sc-popover-form-border-radius);border-top-right-radius:var(--sc-popover-form-border-radius);border-bottom-left-radius:0;border-bottom-right-radius:0}.searchcraft-popover-form-inline .searchcraft-popover-inline-wrapper-outer{position:relative}.searchcraft-popover-form-inline .searchcraft-popover-inline-wrapper-inner{position:absolute;height:var(--sc-popover-list-view-height);z-index:1000;width:100%}.searchcraft-popover-form-inline .searchcraft-popover-list-view{display:flex;flex-direction:column;overflow:auto;background-color:var(--sc-surface-neutral-secondary);border-bottom-left-radius:var(--sc-popover-form-border-radius);border-bottom-right-radius:var(--sc-popover-form-border-radius);max-height:var(--sc-popover-list-view-height)}.searchcraft-popover-form-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-start;justify-content:center;padding:0;background-color:var(--sc-surface-neutral-secondary)}@media(min-width: 576px){.searchcraft-popover-form-modal{padding:16px;background-color:rgba(0,0,0,0)}}.searchcraft-popover-form-modal .searchcraft-input{border-radius:calc(var(--sc-popover-form-border-radius)*.8);outline-width:1px;outline-color:var(--sc-border-neutral)}.searchcraft-popover-form-modal .searchcraft-popover-form-modal-backdrop{position:absolute;inset:0;background-color:rgba(0,0,0,.5);display:none}@media(min-width: 576px){.searchcraft-popover-form-modal .searchcraft-popover-form-modal-backdrop{display:block}}.searchcraft-popover-form-modal .searchcraft-popover-form-modal-inner{position:absolute;inset:0;z-index:1002;margin-top:0px;display:flex;border-radius:var(--sc-popover-form-border-radius);overflow:hidden}@media(min-width: 576px){.searchcraft-popover-form-modal .searchcraft-popover-form-modal-inner{inset:auto;position:relative;width:100%;margin-top:100px;max-width:var(--sc-popover-modal-max-width)}}.searchcraft-popover-form-modal .searchcraft-popover-list-view{display:flex;flex-direction:column;overflow:auto;background-color:var(--sc-surface-neutral-secondary);border-bottom-left-radius:0;border-bottom-right-radius:0}@media(min-width: 576px){.searchcraft-popover-form-modal .searchcraft-popover-list-view{max-height:var(--sc-popover-list-view-height)}}.searchcraft-popover-form-modal searchcraft-popover-list-view{overflow:scroll}@media(min-width: 576px){.searchcraft-popover-form-modal searchcraft-popover-list-view{overflow:auto}}.searchcraft-popover-form-fullscreen{position:fixed;inset:0;z-index:1000;background-color:var(--sc-surface-neutral-secondary)}.searchcraft-popover-form-fullscreen .searchcraft-popover-form{position:absolute;inset:0}.searchcraft-popover-form-fullscreen .searchcraft-input{border-radius:calc(var(--sc-popover-form-border-radius)*.8);outline-width:1px;outline-color:var(--sc-border-neutral)}.searchcraft-popover-form-fullscreen searchcraft-popover-list-view{overflow:scroll}.searchcraft-popover-list-item{all:unset;display:flex;flex-direction:row;cursor:pointer;gap:8px;padding-right:var(--sc-popover-list-item-padding-horizontal);padding-left:var(--sc-popover-list-item-padding-horizontal);padding-top:var(--sc-popover-list-item-padding-vertical);padding-bottom:var(--sc-popover-list-item-padding-vertical)}.searchcraft-popover-list-item:focus{background-color:var(--sc-surface-neutral-secondary-active);color:var(--sc-content-neutral-secondary)}.searchcraft-popover-list-item:hover{background-color:var(--sc-surface-neutral-secondary-hover);color:var(--sc-content-neutral-secondary)}.searchcraft-popover-list-item-title{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:inherit}.searchcraft-popover-list-item-subtitle{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:inherit}.searchcraft-popover-list-item-image-wrapper{width:var(--sc-popover-list-item-image-size);height:var(--sc-popover-list-item-image-size);display:flex;align-items:center;justify-content:center;flex-shrink:0}.searchcraft-popover-list-item-image{max-width:var(--sc-popover-list-item-image-size);max-height:var(--sc-popover-list-item-image-size)}.searchcraft-popover-list-item-info-wrapper{display:flex;flex-direction:column;gap:8px;justify-content:center}.searchcraft-results-info-container{border-bottom:1px solid var(--sc-surface-disabled);display:flex;justify-content:flex-start}.searchcraft-results-info-content{color:var(--sc-content-primary);font-family:var(--sc-font-family);font-size:18px;font-weight:600;line-height:20px;margin:0px 0 8px}@media(max-width: 768px){.searchcraft-results-info-content{margin:0;margin-bottom:8px}}.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:rgba(0,0,0,0);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}.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 .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,.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 .3s ease;width:18px}.searchcraft-toggle-button-handle.active{transform:translateX(16px)}/*# sourceMappingURL=hologram.css.map */
+`;
+
+const SearchcraftErrorMessage = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    componentDidLoad() {
+        console.log('Loading theme...');
+        console.log(styles);
+        const styleTag = document.querySelector('#searchcraft-theme') ||
+            document.createElement('style');
+        styleTag.innerHTML = styles;
+        styleTag.id = 'searchcraft-theme';
+        const head = document.head || document.getElementsByTagName('head')[0];
+        if (!head.contains(styleTag)) {
+            if (head.firstChild) {
+                head.insertBefore(styleTag, head.firstChild);
+            }
+            else {
+                head.appendChild(styleTag);
+            }
+        }
+    }
+    render() {
+        return;
+    }
+};
+
+exports.searchcraft_theme = SearchcraftErrorMessage;
+
+//# sourceMappingURL=searchcraft-theme.cjs.entry.js.map