@searchcraft/javascript-sdk 0.5.3 → 0.7.0

package/dist/components/searchcraft-popover-form.js

@@ -1,37 +1,284 @@
-import { p as proxyCustomElement, H, h } from './p-e4846fa2.js';
-import { d as defineCustomElement$2 } from './p-672354c0.js';
+import { p as proxyCustomElement, H, h } from './p-6cafd48d.js';
+import { c as classNames } from './p-5cdc6210.js';
+import { u as useSearchcraftStore } from './p-01dc5b3b.js';
+import { d as defineCustomElement$7 } from './p-cf096782.js';
+import { d as defineCustomElement$6 } from './p-f5a06210.js';
+import { d as defineCustomElement$5 } from './p-da5b92ef.js';
+import { d as defineCustomElement$4 } from './p-c273e43d.js';
+import { d as defineCustomElement$3 } from './p-1ae87308.js';
+import { d as defineCustomElement$2 } from './p-e1cf5f9d.js';
 
-const searchcraftPopoverFormModuleCss = "";
+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 SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class SearchcraftPopoverForm extends H {
     constructor() {
         super();
         this.__registerHost();
-        this.config = undefined;
+        /**
+         * 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.
+         */
         this.type = 'inline';
-        this.popoverResultMappings = undefined;
+        /**
+         * The hotkey that activates the popover.
+         */
+        this.hotkey = 'k';
+        /**
+         * The hotkey modifier that activates the popover. Used together with the `hotkey` prop.
+         */
+        this.hotkeyModifier = 'meta';
+        this.isPopoverVisibleInState = false;
+        this.isFocused = false;
+        this.breakpointSm = 576;
+        this.breakpointMd = 768;
+        this.breakpointLg = 992;
+        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':
+                    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();
+        };
+    }
+    componentDidLoad() {
+        // Loads the breakpoint values into state
+        const computedStyle = getComputedStyle(document.documentElement);
+        this.breakpointSm = Number.parseFloat(computedStyle.getPropertyValue('--sc-breakpoint-sm').trim());
+        this.breakpointMd = Number.parseFloat(computedStyle.getPropertyValue('--sc-breakpoint-md').trim());
+        this.breakpointLg = Number.parseFloat(computedStyle.getPropertyValue('--sc-breakpoint-lg').trim());
+        // Set popover visiblity in state
+        this.isPopoverVisibleInState =
+            useSearchcraftStore.getState().isPopoverVisible;
+        // Add event listeners
+        document.addEventListener('click', this.handleDocumentClick);
+        document.addEventListener('keydown', this.handleDocumentKeyDown);
+        // Subscribe to state events
+        this.unsubscribe = useSearchcraftStore.subscribe((state) => {
+            if (this.isPopoverVisibleInState !== state.isPopoverVisible) {
+                this.handlePopoverVisibilityChange(state.isPopoverVisible);
+            }
+            this.searchResults = Object.assign({}, state.searchResults);
+            this.searchTerm = state.query;
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.unsubscribe) === null || _a === void 0 ? void 0 : _a.call(this);
+        document.removeEventListener('click', this.handleDocumentClick);
+        document.removeEventListener('keydown', this.handleDocumentKeyDown);
+    }
+    /**
+     * Handles when popover visibility is changed in state
+     */
+    handlePopoverVisibilityChange(isVisible) {
+        this.isPopoverVisibleInState = isVisible;
+        document.body.style.overflow = isVisible ? 'hidden' : 'auto';
+    }
+    /**
+     * 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.
+     */
+    handleInputFocus() {
+        this.isFocused = true;
+        if (this.type === 'inline' &&
+            window.visualViewport.width < this.breakpointSm) {
+            useSearchcraftStore.getState().setPopoverVisibility(true);
+            // Appends a popover form of type=`modal` to the body
+            if (!this.modalElement) {
+                this.modalElement = document.createElement('searchcraft-popover-form');
+                this.modalElement.config = this.config;
+                this.modalElement.popoverResultMappings = this.popoverResultMappings;
+                this.modalElement.setAttribute('type', 'fullscreen');
+                document.body.appendChild(this.modalElement);
+            }
+        }
+    }
+    handleModalBackdropClick(_event) {
+        useSearchcraftStore.getState().setPopoverVisibility(false);
+    }
+    /**
+     * When a hotkey is pressed, tests if the modifiers also match.
+     * If modifiers match, toggles visibility of the popover modal.
+     */
+    handleHotkeyPressed(event) {
+        if ((event.ctrlKey && this.hotkeyModifier === 'ctrl') ||
+            (event.altKey && this.hotkeyModifier === 'alt') ||
+            (event.metaKey && this.hotkeyModifier === 'meta')) {
+            event.preventDefault();
+            if (this.type === 'inline' && !this.isPopoverVisibleInState) {
+                const hostElementInput = this.hostElement.querySelector('.searchcraft-input');
+                hostElementInput === null || hostElementInput === void 0 ? void 0 : hostElementInput.focus();
+            }
+            else {
+                useSearchcraftStore
+                    .getState()
+                    .setPopoverVisibility(!this.isPopoverVisibleInState);
+            }
+        }
+    }
+    handleCancelButtonClick() {
+        useSearchcraftStore.getState().setPopoverVisibility(false);
+    }
+    /**
+     * Moves focus to the next/previous list item in the list view. If you are at the top
+     * of the list view, it moves focus back to the input.
+     *
+     * @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();
+        }
+        else if (direction === 'ArrowUp') {
+            if (currentIndex >= 1) {
+                (_b = listItems[currentIndex - 1]) === null || _b === void 0 ? void 0 : _b.focus();
+            }
+            else {
+                const input = document.querySelector('.searchcraft-input');
+                if (input) {
+                    input.focus();
+                    requestAnimationFrame(() => {
+                        input.selectionEnd = input.value.length;
+                        input.selectionStart = input.value.length;
+                    });
+                }
+            }
+        }
+    }
+    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);
+    }
+    renderInlinePopover(documents) {
+        const isListViewVisible = this.hasResultsToShow && this.isFocused;
+        const popoverFormClassNames = classNames('searchcraft-popover-form searchcraft-popover-form-inline', {
+            'searchcraft-popover-form-active': isListViewVisible,
+        });
+        return (h("div", { class: popoverFormClassNames }, h("searchcraft-input-form", { config: this.config, onInputFocus: this.handleInputFocus.bind(this) }), isListViewVisible && (h("div", { class: 'searchcraft-popover-inline-wrapper-outer' }, h("div", { class: 'searchcraft-popover-inline-wrapper-inner' }, h("searchcraft-popover-list-view", { popoverResultMappings: this.popoverResultMappings, documents: documents }))))));
+    }
+    renderModalPopover(documents) {
+        if (this.isPopoverVisibleInState) {
+            const popoverFormClassNames = classNames('searchcraft-popover-form', {
+                'searchcraft-popover-form-active': this.hasResultsToShow,
+            });
+            return (h("div", { class: 'searchcraft-popover-form-modal' }, h("div", { class: 'searchcraft-popover-form-modal-backdrop', onClick: this.handleModalBackdropClick }), h("div", { class: 'searchcraft-popover-form-modal-inner' }, h("div", { class: popoverFormClassNames }, h("div", { class: 'searchcraft-popover-form-input-wrapper' }, h("searchcraft-input-form", { config: this.config, onInputFocus: this.handleInputFocus.bind(this), onInputInit: this.handleInputInit.bind(this) }), h("button", { type: 'button', class: 'searchcraft-popover-form-cancel-button', onClick: this.handleCancelButtonClick.bind(this) }, "Cancel")), this.hasResultsToShow && (h("searchcraft-popover-list-view", { popoverResultMappings: this.popoverResultMappings, documents: documents }))))));
+        }
+    }
+    renderFullscreenPopover(documents) {
+        if (this.isPopoverVisibleInState) {
+            return (h("div", { class: 'searchcraft-popover-form-fullscreen' }, h("div", { class: 'searchcraft-popover-form' }, h("div", { class: 'searchcraft-popover-form-input-wrapper' }, h("searchcraft-input-form", { config: this.config, onInputFocus: this.handleInputFocus.bind(this), onInputInit: this.handleInputInit.bind(this) }), h("button", { type: 'button', class: 'searchcraft-popover-form-cancel-button', onClick: this.handleCancelButtonClick.bind(this) }, "Cancel")), this.hasResultsToShow && (h("searchcraft-popover-list-view", { popoverResultMappings: this.popoverResultMappings, documents: documents })))));
+        }
     }
     render() {
-        return (h("div", { key: 'a0a5602203dc33f66fd950187e8f9761a13e5bdc', style: { display: 'flex', flexDirection: 'column', flex: '1' } }, h("searchcraft-input", { key: 'b8f9b0d86e66a17f8ddd9966e577e16c4834d1cb', onInputFocus: () => console.log('focused'), onInputBlur: () => console.log('blurred') }), h("searchcraft-popover-list-view", { key: 'a6f5bf1118cd759f28e634e3dadbe64fe3470b6b', popoverResultMappings: this.popoverResultMappings })));
+        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 { doc: result } = data;
+            return result;
+        });
+        switch (this.type) {
+            case 'inline':
+                return this.renderInlinePopover(documents);
+            case 'modal':
+                return this.renderModalPopover(documents);
+            case 'fullscreen':
+                return this.renderFullscreenPopover(documents);
+        }
     }
+    get hostElement() { return this; }
     static get style() { return SearchcraftPopoverFormStyle0; }
 }, [0, "searchcraft-popover-form", {
         "config": [16],
         "type": [1],
-        "popoverResultMappings": [16]
+        "popoverResultMappings": [16],
+        "hotkey": [1],
+        "hotkeyModifier": [1, "hotkey-modifier"],
+        "isPopoverVisibleInState": [32],
+        "unsubscribe": [32],
+        "searchResults": [32],
+        "searchTerm": [32],
+        "isFocused": [32],
+        "breakpointSm": [32],
+        "breakpointMd": [32],
+        "breakpointLg": [32],
+        "modalElement": [32]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["searchcraft-popover-form", "searchcraft-popover-list-view"];
+    const components = ["searchcraft-popover-form", "searchcraft-button", "searchcraft-error-message", "searchcraft-input-form", "searchcraft-input-label", "searchcraft-popover-form", "searchcraft-popover-list-item", "searchcraft-popover-list-view"];
     components.forEach(tagName => { switch (tagName) {
         case "searchcraft-popover-form":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, SearchcraftPopoverForm$1);
             }
             break;
+        case "searchcraft-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "searchcraft-error-message":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "searchcraft-input-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "searchcraft-input-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "searchcraft-popover-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+        case "searchcraft-popover-list-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
         case "searchcraft-popover-list-view":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();

package/dist/components/searchcraft-popover-form.js.map

@@ -1 +1 @@
-{"file":"searchcraft-popover-form.js","mappings":";;;AAAA,MAAM,+BAA+B,GAAG,EAAE,CAAC;AAC3C,qCAAe,+BAA+B;;MCUjCA,wBAAsB;;;;;oBAEiB,QAAQ;;;IAG1D,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,EAAE,IACjE,0EACE,YAAY,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,EAC1C,WAAW,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,GACzC,EACF,sFACE,qBAAqB,EAAE,IAAI,CAAC,qBAAqB,GACjD,CACE,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SearchcraftPopoverForm"],"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":["","import { Component, Prop, h } from '@stencil/core';\n\nimport type { SearchcraftConfig } from '@searchcraft/core';\n\nimport type { PopoverResultMappings } from 'types';\n\n@Component({\n  tag: 'searchcraft-popover-form',\n  styleUrl: 'searchcraft-popover-form.module.scss',\n  shadow: false,\n})\nexport class SearchcraftPopoverForm {\n  @Prop() config: SearchcraftConfig | undefined;\n  @Prop() type: 'inline' | 'fullscreen' | 'modal' = 'inline';\n  @Prop() popoverResultMappings: PopoverResultMappings | undefined;\n\n  render() {\n    return (\n      <div style={{ display: 'flex', flexDirection: 'column', flex: '1' }}>\n        <searchcraft-input\n          onInputFocus={() => console.log('focused')}\n          onInputBlur={() => console.log('blurred')}\n        />\n        <searchcraft-popover-list-view\n          popoverResultMappings={this.popoverResultMappings}\n        />\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"searchcraft-popover-form.js","mappings":"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","names":["SearchcraftPopoverForm"],"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}

package/dist/components/searchcraft-popover-list-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SearchcraftPopoverListItem extends Components.SearchcraftPopoverListItem, HTMLElement {}
+export const SearchcraftPopoverListItem: {
+    prototype: SearchcraftPopoverListItem;
+    new (): SearchcraftPopoverListItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/searchcraft-popover-list-item.js

@@ -0,0 +1,8 @@
+import { S as SearchcraftPopoverListItem$1, d as defineCustomElement$1 } from './p-1ae87308.js';
+
+const SearchcraftPopoverListItem = SearchcraftPopoverListItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SearchcraftPopoverListItem, defineCustomElement };
+
+//# sourceMappingURL=searchcraft-popover-list-item.js.map

package/dist/components/searchcraft-popover-list-item.js.map

@@ -0,0 +1 @@
+{"file":"searchcraft-popover-list-item.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/searchcraft-popover-list-view.js

@@ -1,4 +1,4 @@
-import { S as SearchcraftPopoverListView$1, d as defineCustomElement$1 } from './p-672354c0.js';
+import { S as SearchcraftPopoverListView$1, d as defineCustomElement$1 } from './p-e1cf5f9d.js';
 
 const SearchcraftPopoverListView = SearchcraftPopoverListView$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/searchcraft-results-info.js

@@ -1,8 +1,8 @@
-import { p as proxyCustomElement, H, h } from './p-e4846fa2.js';
-import { u as useSearchcraftStore } from './p-ad4ebde0.js';
-import { f as formatNumberWithCommas } from './p-f308d05d.js';
+import { p as proxyCustomElement, H, h } from './p-6cafd48d.js';
+import { u as useSearchcraftStore } from './p-01dc5b3b.js';
+import { f as formatNumberWithCommas } from './p-755f491b.js';
 
-const searchcraftResultsInfoModuleCss = ":root{--sc-spinner-size:20px;--sc-input-border-radius:8px;--sc-input-search-icon-size:20px;--sc-input-clear-icon-size:20px;--sc-input-padding-left:44px;--sc-input-padding-right:44px;--sc-image-border-radius:8px}:root{--sc-surface-disabled:#D9D9D9;--sc-surface-neutral-primary:#FFFFFF;--sc-surface-neutral-secondary:#F3F3F3;--sc-surface-neutral-light:#FFFFFF;--sc-surface-neutral-primary-hover:#FAFAFA;--sc-surface-neutral-primary-active:#F7F7F7;--sc-surface-neutral-secondary-hover:#EDEDED;--sc-surface-neutral-secondary-active:#E6E6E6;--sc-surface-brand-primary:#000000;--sc-surface-brand-secondary:#E6E6E6;--sc-surface-brand-primary-hover:#2E2E2E;--sc-surface-brand-primary-active:#292929;--sc-surface-brand-secondary-hover:#EBEBEB;--sc-surface-brand-secondary-active:#E0E0E0;--sc-surface-success-primary:#008000;--sc-surface-success-secondary:#CCFFCC;--sc-surface-success-primary-hover:#009900;--sc-surface-success-primary-active:#006600;--sc-surface-success-secondary-hover:#E6FFE6;--sc-surface-success-secondary-active:#E6FFE6;--sc-surface-caution-primary:#CC6600;--sc-surface-caution-secondary:#FFD9B3;--sc-surface-caution-primary-hover:#E57300;--sc-surface-caution-primary-active:#B25A00;--sc-surface-caution-secondary-hover:#FFE5CC;--sc-surface-caution-secondary-active:#FFCC99;--sc-surface-danger-primary:#CC0000;--sc-surface-danger-secondary:#FFCCCC;--sc-surface-danger-primary-hover:#E50000;--sc-surface-danger-primary-active:#B30000;--sc-surface-danger-secondary-hover:#FFE7E7;--sc-surface-danger-secondary-active:#FFB3B3;--sc-content-brand:#000000;--sc-content-success:#008000;--sc-content-caution:#994D00;--sc-content-danger:#990000;--sc-content-disabled:#737373;--sc-content-neutral-primary:#292929;--sc-content-neutral-secondary:#404040;--sc-content-brand-on-primary:#FFFFFF;--sc-content-success-on-primary:#FFFFFF;--sc-content-caution-on-primary:#FFFFFF;--sc-content-danger-on-primary:#FFFFFF;--sc-content-disabled-on-disabled:#737373;--sc-border-neutral:rgba(0,0,0, 0.1);--sc-border-brand:#000000;--sc-border-success:#008000;--sc-border-caution:#CC6600;--sc-border-danger:#CC0000;--sc-border-disabled:#737373}:root{--sc-font-family:sans-serif;--sc-heading-1-font-size:32px;--sc-heading-1-line-height:36px;--sc-heading-1-font-weight:700;--sc-heading-2-font-size:29px;--sc-heading-2-line-height:32px;--sc-heading-2-font-weight:700;--sc-heading-3-font-size:26px;--sc-heading-3-line-height:28px;--sc-heading-3-font-weight:700;--sc-heading-4-font-size:23px;--sc-heading-4-line-height:24px;--sc-heading-4-font-weight:700;--sc-heading-5-font-size:20px;--sc-heading-5-line-height:24px;--sc-heading-5-font-weight:700;--sc-heading-6-font-size:10px;--sc-heading-6-line-height:12px;--sc-heading-6-font-weight:700;--sc-body-bold-font-size:16px;--sc-body-bold-line-height:20px;--sc-body-bold-font-weight:700;--sc-body-font-size:16px;--sc-body-line-height:20px;--sc-body-font-weight:400;--sc-body-small-bold-font-size:12px;--sc-body-small-bold-line-height:16px;--sc-body-small-bold-font-weight:700;--sc-body-small-font-size:12px;--sc-body-small-line-height:16px;--sc-body-small-font-weight:400}.searchcraft-results-info-container{border-bottom:1px solid var(--sc-surface-disabled);display:flex;justify-content:flex-start}.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: 900px){.searchcraft-results-info-content{margin:0;margin-bottom:8px}}";
+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$1 = /*@__PURE__*/ proxyCustomElement(class SearchcraftResultsInfo extends H {

package/dist/components/searchcraft-results-info.js.map

@@ -1 +1 @@
-{"file":"searchcraft-results-info.js","mappings":";;;;AAAA,MAAM,+BAA+B,GAAG,u5GAAu5G,CAAC;AACh8G,qCAAe,+BAA+B;;MCUjCA,wBAAsB;;;;4BACT,KAAK;4BACL,CAAC;4BACD,EAAE;qBACT,EAAE;;IAInB,iBAAiB;QACf,IAAI,CAAC,WAAW,GAAG,mBAAmB,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,GAAG,sBAAsB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACnE,QACE,WAAK,KAAK,EAAC,oCAAoC,IAC7C,SAAG,KAAK,EAAC,kCAAkC,IACxC,gBAAgB,wBAAoB,IAAI,CAAC,YAAY,OACpD,CACA,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SearchcraftResultsInfo"],"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: 900px) {\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/utils';\n\n@Component({\n  tag: 'searchcraft-results-info',\n  styleUrl: 'searchcraft-results-info.module.scss',\n  shadow: false,\n})\nexport class SearchcraftResultsInfo {\n  @State() isRequesting = false;\n  @State() resultsCount = 0;\n  @State() responseTime = '';\n  @State() query = '';\n\n  unsubscribe: () => void;\n\n  connectedCallback() {\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      this.isRequesting = state.isRequesting;\n      this.resultsCount = state.searchResults?.data?.count || 0;\n      this.responseTime = (\n        (state.searchResults?.data?.time_taken || 0) * 1000\n      ).toFixed(2);\n      this.query = state.query || '';\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribe) {\n      this.unsubscribe();\n    }\n  }\n\n  render() {\n    if (!this.query || this.resultsCount === 0) {\n      return null;\n    }\n    const formattedResults = formatNumberWithCommas(this.resultsCount);\n    return (\n      <div 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.js","mappings":";;;;AAAA,MAAM,+BAA+B,GAAG,6rHAA6rH,CAAC;AACtuH,qCAAe,+BAA+B;;MCoBjCA,wBAAsB;IALnC;;;QAMW,iBAAY,GAAG,KAAK,CAAC;QACrB,iBAAY,GAAG,CAAC,CAAC;QACjB,iBAAY,GAAG,EAAE,CAAC;QAClB,UAAK,GAAG,EAAE,CAAC;KAkCrB;IA9BC,iBAAiB;QACf,IAAI,CAAC,WAAW,GAAG,mBAAmB,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,GAAG,sBAAsB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACnE,QACE,WAAK,KAAK,EAAC,oCAAoC,IAC7C,SAAG,KAAK,EAAC,kCAAkC,IACxC,gBAAgB,wBAAoB,IAAI,CAAC,YAAY,OACpD,CACA,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SearchcraftResultsInfo"],"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}

package/dist/components/searchcraft-slider.js

@@ -1,4 +1,4 @@
-import { S as SearchcraftSlider$1, d as defineCustomElement$1 } from './p-5380505b.js';
+import { S as SearchcraftSlider$1, d as defineCustomElement$1 } from './p-cc9f8c61.js';
 
 const SearchcraftSlider = SearchcraftSlider$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/searchcraft-toggle-button.js

@@ -1,4 +1,4 @@
-import { S as SearchcraftToggleButton$1, d as defineCustomElement$1 } from './p-a23d2994.js';
+import { S as SearchcraftToggleButton$1, d as defineCustomElement$1 } from './p-662cb490.js';
 
 const SearchcraftToggleButton = SearchcraftToggleButton$1;
 const defineCustomElement = defineCustomElement$1;