@searchcraft/javascript-sdk 0.1.2 → 0.1.4

package/dist/components/searchcraft-base-search-results.js

@@ -1,9 +1,8 @@
-import { p as proxyCustomElement, H, h } from './p-066c8210.js';
+import { p as proxyCustomElement, H, h } from './p-c69651f6.js';
 import { u as useSearchcraftStore } from './p-36c95064.js';
-import { a as parseSearchKeys, p as parseCustomStyles, e as extractDynamicProperties } from './p-5e3152c4.js';
-import { d as defineCustomElement$4 } from './p-1912bbbd.js';
-import { d as defineCustomElement$3 } from './p-d446eda4.js';
-import { d as defineCustomElement$2 } from './p-6f2a72d3.js';
+import { a as parseSearchKeys, s as serializeStyles, e as extractDynamicProperties } from './p-17c94ac1.js';
+import { d as defineCustomElement$3 } from './p-4f201f41.js';
+import { d as defineCustomElement$2 } from './p-0c25e95d.js';
 
 const searchcraftBaseSearchResultsModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.resultsContainer{display:flex;flex-direction:column;justify-content:center;margin:100px 20px}.resultsContainer>p{align-self:center}.resultsContainer>div{margin-bottom:20px}.resultsContainer>div img{height:300px;width:200px}";
 const SearchcraftBaseSearchResultsStyle0 = searchcraftBaseSearchResultsModuleCss;
@@ -19,17 +18,14 @@ const SearchcraftBaseSearchResults$1 = /*@__PURE__*/ proxyCustomElement(class Se
         this.customStylesForResults = {};
     }
     componentDidLoad() {
-        // Initialize searchKeys if not provided
         if (!this.searchKeys || this.searchKeys.length === 0) {
             console.warn('No searchKeys provided; using empty keys array.');
-            this.searchKeys = ''; // Ensure it's explicitly set as an empty array
+            this.searchKeys = '';
         }
-        // Subscribe to state changes
         this.unsubscribe = useSearchcraftStore.subscribe((state) => {
             this.searchResults = Object.assign({}, state.searchResults);
             this.query = state.query;
         });
-        // Fetch initial state
         const { searchResults, query } = useSearchcraftStore.getState();
         this.searchResults = searchResults;
         this.query = query;
@@ -46,26 +42,17 @@ const SearchcraftBaseSearchResults$1 = /*@__PURE__*/ proxyCustomElement(class Se
             return h("div", null, "No results to display.");
         }
         const parsedSearchKeys = parseSearchKeys(this.searchKeys);
-        const parsedCustomStyles = parseCustomStyles(this.customStylesForResults);
+        const serializedStyles = typeof this.customStylesForResults === 'string'
+            ? this.customStylesForResults
+            : serializeStyles(this.customStylesForResults);
         return (h("div", { class: 'resultsContainer' }, (_d = (_c = (_b = this.searchResults) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.hits) === null || _d === void 0 ? void 0 :
             _d.map((document, index) => {
                 const { doc: result } = document;
                 const dynamicProperties = extractDynamicProperties(result, parsedSearchKeys);
-                // Render the custom element if present, otherwise fallback to default
-                const customElement = this.hostElement.querySelector('[slot="result-template"]');
-                if (customElement) {
-                    // Clone the custom element and pass data to it
-                    const customElementClone = customElement.cloneNode(true);
-                    customElementClone.removeAttribute('slot'); // Remove the slot attribute
-                    customElementClone.setAttribute('data-result', JSON.stringify(result));
-                    return (h("div", { key: `${dynamicProperties.id}-${index}` }, customElementClone.outerHTML));
-                }
-                // Fallback to the default element
-                return (h("searchcraft-base-search-result", { key: `${dynamicProperties.id}-${index}`, "button-callback": () => console.log('button callback'), "result-callback": () => console.log('interactive element'), "keydown-callback": () => console.log('keydown'), "is-interactive": true, "heading-text": dynamicProperties[parsedSearchKeys[0]], "subheading-text": dynamicProperties[parsedSearchKeys[1]], "primary-content": dynamicProperties[parsedSearchKeys[2]], "secondary-content": dynamicProperties[parsedSearchKeys[3]], "tertiary-content": dynamicProperties[parsedSearchKeys[4]], "image-source": dynamicProperties[parsedSearchKeys[parsedSearchKeys.length - 1]], customStyles: parsedCustomStyles }));
+                return (h("searchcraft-base-search-result", { key: `${dynamicProperties.id}-${index}`, "button-callback": () => console.log('button callback'), "result-callback": () => console.log('interactive element'), "keydown-callback": () => console.log('keydown'), "is-interactive": true, "heading-text": dynamicProperties[parsedSearchKeys[0]], "subheading-text": dynamicProperties[parsedSearchKeys[1]], "primary-content": dynamicProperties[parsedSearchKeys[2]], "secondary-content": dynamicProperties[parsedSearchKeys[3]], "tertiary-content": dynamicProperties[parsedSearchKeys[4]], "image-source": dynamicProperties[parsedSearchKeys[parsedSearchKeys.length - 1]], "custom-styles": serializedStyles }));
             }), this.query.length > 0 &&
-            ((_g = (_f = (_e = this.searchResults) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.hits) === null || _g === void 0 ? void 0 : _g.length) === 0 && (h("searchcraft-error-message", { "error-message": `No search results found for "${this.query}" query` })), h("slot", { name: 'result-template' })));
+            ((_g = (_f = (_e = this.searchResults) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.hits) === null || _g === void 0 ? void 0 : _g.length) === 0 && (h("searchcraft-error-message", { "error-message": `No search results found for "${this.query}" query` }))));
     }
-    get hostElement() { return this; }
     static get style() { return SearchcraftBaseSearchResultsStyle0; }
 }, [1, "searchcraft-base-search-results", {
         "searchKeys": [1, "search-keys"],
@@ -77,7 +64,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["searchcraft-base-search-results", "searchcraft-base-search-result", "searchcraft-clear-icon-set", "searchcraft-error-message"];
+    const components = ["searchcraft-base-search-results", "searchcraft-base-search-result", "searchcraft-error-message"];
     components.forEach(tagName => { switch (tagName) {
         case "searchcraft-base-search-results":
             if (!customElements.get(tagName)) {
@@ -85,11 +72,6 @@ function defineCustomElement$1() {
             }
             break;
         case "searchcraft-base-search-result":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "searchcraft-clear-icon-set":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }

package/dist/components/searchcraft-base-search-results.js.map

@@ -1 +1 @@
-{"file":"searchcraft-base-search-results.js","mappings":"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","names":["SearchcraftBaseSearchResults"],"sources":["src/components/searchcraft-base-search-results/searchcraft-base-search-results.module.scss?tag=searchcraft-base-search-results&encapsulation=shadow","src/components/searchcraft-base-search-results/searchcraft-base-search-results.tsx"],"sourcesContent":[":root {\n  --font-stack: Helvetica, Arial, sans-serif;\n}\n\n.resultsContainer {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  margin: 100px 20px;\n\n  & > p {\n    align-self: center;\n  }\n\n  & > div {\n    margin-bottom: 20px;\n    img {\n      height: 300px;\n      width: 200px;\n    }\n  }\n}\n","import { Component, h, Prop, State, Element } from '@stencil/core';\nimport type { SearchcraftResponse } from '@searchcraft/core';\n\nimport { useSearchcraftStore } from '@provider/store';\nimport {\n  extractDynamicProperties,\n  parseCustomStyles,\n  parseSearchKeys,\n} from '@utils/utils';\n\n@Component({\n  tag: 'searchcraft-base-search-results',\n  styleUrl: 'searchcraft-base-search-results.module.scss',\n  shadow: true,\n})\nexport class SearchcraftBaseSearchResults {\n  @State() query = '';\n  @State() searchResults: SearchcraftResponse | null = null;\n\n  /**\n   * Array of keys to dynamically extract properties from each document.\n   * Must be explicitly set by the parent component.\n   */\n  @Prop() searchKeys = '';\n\n  /**\n   * Custom styles to apply to search results.\n   * Expected format: JSON string, e.g., '{\"borderRadius\": \"10px\", \"padding\": \"16px\"}'\n   */\n  @Prop() customStylesForResults: string | Record<string, string> = {};\n\n  @Element() hostElement: HTMLElement; // Reference to the host element\n\n  private unsubscribe: () => void;\n\n  componentDidLoad() {\n    // Initialize searchKeys if not provided\n    if (!this.searchKeys || this.searchKeys.length === 0) {\n      console.warn('No searchKeys provided; using empty keys array.');\n      this.searchKeys = ''; // Ensure it's explicitly set as an empty array\n    }\n\n    // Subscribe to state changes\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      this.searchResults = { ...state.searchResults };\n      this.query = state.query;\n    });\n\n    // Fetch initial state\n    const { searchResults, query } = useSearchcraftStore.getState();\n    this.searchResults = searchResults;\n    this.query = query;\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribe) {\n      this.unsubscribe();\n    }\n  }\n\n  render() {\n    if (!this.searchResults?.data) {\n      console.warn('No search results data available');\n      return <div>No results to display.</div>;\n    }\n\n    const parsedSearchKeys = parseSearchKeys(this.searchKeys);\n    const parsedCustomStyles = parseCustomStyles(this.customStylesForResults);\n    return (\n      <div class='resultsContainer'>\n        {this.searchResults?.data?.hits?.map((document, index) => {\n          const { doc: result } = document;\n          const dynamicProperties = extractDynamicProperties(\n            result,\n            parsedSearchKeys,\n          );\n\n          // Render the custom element if present, otherwise fallback to default\n          const customElement = this.hostElement.querySelector(\n            '[slot=\"result-template\"]',\n          );\n          if (customElement) {\n            // Clone the custom element and pass data to it\n            const customElementClone = customElement.cloneNode(\n              true,\n            ) as HTMLElement;\n            customElementClone.removeAttribute('slot'); // Remove the slot attribute\n            customElementClone.setAttribute(\n              'data-result',\n              JSON.stringify(result),\n            );\n            return (\n              <div key={`${dynamicProperties.id}-${index}`}>\n                {customElementClone.outerHTML}\n              </div>\n            );\n          }\n          // Fallback to the default element\n          return (\n            <searchcraft-base-search-result\n              key={`${dynamicProperties.id}-${index}`}\n              button-callback={() => console.log('button callback')}\n              result-callback={() => console.log('interactive element')}\n              keydown-callback={() => console.log('keydown')}\n              is-interactive={true}\n              heading-text={dynamicProperties[parsedSearchKeys[0]]}\n              subheading-text={dynamicProperties[parsedSearchKeys[1]]}\n              primary-content={dynamicProperties[parsedSearchKeys[2]]}\n              secondary-content={dynamicProperties[parsedSearchKeys[3]]}\n              tertiary-content={dynamicProperties[parsedSearchKeys[4]]}\n              image-source={\n                dynamicProperties[parsedSearchKeys[parsedSearchKeys.length - 1]]\n              }\n              customStyles={parsedCustomStyles}\n            />\n          );\n        })}\n\n        {this.query.length > 0 &&\n          this.searchResults?.data?.hits?.length === 0 && (\n            <searchcraft-error-message\n              error-message={`No search results found for \"${this.query}\" query`}\n            />\n          )}\n\n        {/* Slot for custom element */}\n        <slot name='result-template' />\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"searchcraft-base-search-results.js","mappings":"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","names":["SearchcraftBaseSearchResults"],"sources":["src/components/searchcraft-base-search-results/searchcraft-base-search-results.module.scss?tag=searchcraft-base-search-results&encapsulation=shadow","src/components/searchcraft-base-search-results/searchcraft-base-search-results.tsx"],"sourcesContent":[":root {\n  --font-stack: Helvetica, Arial, sans-serif;\n}\n\n.resultsContainer {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  margin: 100px 20px;\n\n  & > p {\n    align-self: center;\n  }\n\n  & > div {\n    margin-bottom: 20px;\n    img {\n      height: 300px;\n      width: 200px;\n    }\n  }\n}\n","import { Component, h, Prop, State } from '@stencil/core';\nimport type { SearchcraftResponse } from '@searchcraft/core';\n\nimport { useSearchcraftStore } from '@provider/store';\nimport {\n  extractDynamicProperties,\n  parseSearchKeys,\n  serializeStyles,\n} from '@utils/utils';\n\n@Component({\n  tag: 'searchcraft-base-search-results',\n  styleUrl: 'searchcraft-base-search-results.module.scss',\n  shadow: true,\n})\nexport class SearchcraftBaseSearchResults {\n  @State() query = '';\n  @State() searchResults: SearchcraftResponse | null = null;\n\n  /**\n   * Array of keys to dynamically extract properties from each document.\n   * Must be explicitly set by the parent component.\n   */\n  @Prop() searchKeys = '';\n  /**\n   * Custom styles to apply to search results.\n   * Expected format: JSON string, e.g., '{\"borderRadius\": \"10px\", \"padding\": \"16px\"}'\n   */\n  @Prop() customStylesForResults:\n    | string\n    | Record<string, Record<string, string>> = {};\n\n  private unsubscribe: () => void;\n\n  componentDidLoad() {\n    if (!this.searchKeys || this.searchKeys.length === 0) {\n      console.warn('No searchKeys provided; using empty keys array.');\n      this.searchKeys = '';\n    }\n\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      this.searchResults = { ...state.searchResults };\n      this.query = state.query;\n    });\n\n    const { searchResults, query } = useSearchcraftStore.getState();\n    this.searchResults = searchResults;\n    this.query = query;\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribe) {\n      this.unsubscribe();\n    }\n  }\n\n  render() {\n    if (!this.searchResults?.data) {\n      console.warn('No search results data available');\n      return <div>No results to display.</div>;\n    }\n\n    const parsedSearchKeys = parseSearchKeys(this.searchKeys);\n    const serializedStyles =\n      typeof this.customStylesForResults === 'string'\n        ? this.customStylesForResults\n        : serializeStyles(this.customStylesForResults);\n\n    return (\n      <div class='resultsContainer'>\n        {this.searchResults?.data?.hits?.map((document, index) => {\n          const { doc: result } = document;\n          const dynamicProperties = extractDynamicProperties(\n            result,\n            parsedSearchKeys,\n          );\n\n          return (\n            <searchcraft-base-search-result\n              key={`${dynamicProperties.id}-${index}`}\n              button-callback={() => console.log('button callback')}\n              result-callback={() => console.log('interactive element')}\n              keydown-callback={() => console.log('keydown')}\n              is-interactive={true}\n              heading-text={dynamicProperties[parsedSearchKeys[0]]}\n              subheading-text={dynamicProperties[parsedSearchKeys[1]]}\n              primary-content={dynamicProperties[parsedSearchKeys[2]]}\n              secondary-content={dynamicProperties[parsedSearchKeys[3]]}\n              tertiary-content={dynamicProperties[parsedSearchKeys[4]]}\n              image-source={\n                dynamicProperties[parsedSearchKeys[parsedSearchKeys.length - 1]]\n              }\n              custom-styles={serializedStyles}\n            />\n          );\n        })}\n        {this.query.length > 0 &&\n          this.searchResults?.data?.hits?.length === 0 && (\n            <searchcraft-error-message\n              error-message={`No search results found for \"${this.query}\" query`}\n            />\n          )}\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-066c8210.js';
+import { p as proxyCustomElement, H, h } from './p-c69651f6.js';
 
 const SearchcraftButtonIcon$1 = /*@__PURE__*/ proxyCustomElement(class SearchcraftButtonIcon extends H {
     constructor() {

package/dist/components/searchcraft-button.js

@@ -1,4 +1,4 @@
-import { S as SearchcraftButton$1, d as defineCustomElement$1 } from './p-c3838435.js';
+import { S as SearchcraftButton$1, d as defineCustomElement$1 } from './p-f83f2b59.js';
 
 const SearchcraftButton = SearchcraftButton$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/searchcraft-clear-icon-set.js

@@ -1,4 +1,4 @@
-import { S as SearchcraftClearIconSet$1, d as defineCustomElement$1 } from './p-d446eda4.js';
+import { S as SearchcraftClearIconSet$1, d as defineCustomElement$1 } from './p-155f7a59.js';
 
 const SearchcraftClearIconSet = SearchcraftClearIconSet$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/searchcraft-clear-input-button.js

@@ -1,4 +1,4 @@
-import { S as SearchcraftClearInputButton$1, d as defineCustomElement$1 } from './p-b1ff2296.js';
+import { S as SearchcraftClearInputButton$1, d as defineCustomElement$1 } from './p-2cc8c074.js';
 
 const SearchcraftClearInputButton = SearchcraftClearInputButton$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/searchcraft-error-message.js

@@ -1,4 +1,4 @@
-import { S as SearchcraftErrorMessage$1, d as defineCustomElement$1 } from './p-6f2a72d3.js';
+import { S as SearchcraftErrorMessage$1, d as defineCustomElement$1 } from './p-0c25e95d.js';
 
 const SearchcraftErrorMessage = SearchcraftErrorMessage$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/searchcraft-input-caption.js

@@ -1,4 +1,4 @@
-import { S as SearchcraftInputCaption$1, d as defineCustomElement$1 } from './p-cb75ba7a.js';
+import { S as SearchcraftInputCaption$1, d as defineCustomElement$1 } from './p-199065b5.js';
 
 const SearchcraftInputCaption = SearchcraftInputCaption$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/searchcraft-input-icon.js

@@ -1,4 +1,4 @@
-import { S as SearchcraftInputIcon$1, d as defineCustomElement$1 } from './p-63035c6a.js';
+import { S as SearchcraftInputIcon$1, d as defineCustomElement$1 } from './p-a7ab9d65.js';
 
 const SearchcraftInputIcon = SearchcraftInputIcon$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/searchcraft-input-label.js

@@ -1,4 +1,4 @@
-import { S as SearchcraftInputLabel$1, d as defineCustomElement$1 } from './p-d54bca75.js';
+import { S as SearchcraftInputLabel$1, d as defineCustomElement$1 } from './p-9283a3c2.js';
 
 const SearchcraftInputLabel = SearchcraftInputLabel$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/searchcraft-input.js

@@ -1,4 +1,4 @@
-import { S as SearchcraftInput$1, d as defineCustomElement$1 } from './p-1bd04bac.js';
+import { S as SearchcraftInput$1, d as defineCustomElement$1 } from './p-4244171c.js';
 
 const SearchcraftInput = SearchcraftInput$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/searchcraft-search-icon-set.js

@@ -1,4 +1,4 @@
-import { S as SearchcraftSearchIconSet$1, d as defineCustomElement$1 } from './p-d0edf961.js';
+import { S as SearchcraftSearchIconSet$1, d as defineCustomElement$1 } from './p-04e7305e.js';
 
 const SearchcraftSearchIconSet = SearchcraftSearchIconSet$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/searchcraft-spinner-dark.js

@@ -1,4 +1,4 @@
-import { S as SearchcraftSpinnerDark$1, d as defineCustomElement$1 } from './p-d6616aa5.js';
+import { S as SearchcraftSpinnerDark$1, d as defineCustomElement$1 } from './p-16a533e3.js';
 
 const SearchcraftSpinnerDark = SearchcraftSpinnerDark$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/searchcraft-spinner-light.js

@@ -1,4 +1,4 @@
-import { S as SearchcraftSpinnerLight$1, d as defineCustomElement$1 } from './p-8d9551ce.js';
+import { S as SearchcraftSpinnerLight$1, d as defineCustomElement$1 } from './p-e8e40447.js';
 
 const SearchcraftSpinnerLight = SearchcraftSpinnerLight$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/esm/{index-eace3343.js → index-0d9f850d.js}

@@ -1,5 +1,5 @@
 const NAMESPACE = 'searchcraft-javascript-sdk';
-const BUILD = /* searchcraft-javascript-sdk */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: false, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: false, propString: true, reflect: false, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: false, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: false };
+const BUILD = /* searchcraft-javascript-sdk */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: false, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: false, propString: true, reflect: false, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: false, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: false };
 
 /*
  Stencil Client Platform v4.22.3 | MIT Licensed | https://stenciljs.com
@@ -717,7 +717,7 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
       isSvgMode = tag === "svg" ? true : tag === "foreignObject" ? false : isSvgMode;
     }
     {
-      if (tag === "slot" && !useNativeShadowDom) ; else {
+      {
         updateElement(oldVNode, newVNode2, isSvgMode);
       }
     }
@@ -1237,6 +1237,6 @@ var Fragment = (_, children) => children;
 // src/runtime/nonce.ts
 var setNonce = (nonce) => plt.$nonce$ = nonce;
 
-export { Fragment as F, bootstrapLazy as b, createEvent as c, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
+export { Fragment as F, bootstrapLazy as b, createEvent as c, h, promiseResolve as p, registerInstance as r, setNonce as s };
 
-//# sourceMappingURL=index-eace3343.js.map
+//# sourceMappingURL=index-0d9f850d.js.map