@searchcraft/javascript-sdk 0.1.0 → 0.1.2

package/dist/searchcraft-javascript-sdk/p-9545c59a.entry.js

@@ -1,7 +0,0 @@
-import{r as t,c as i,h as n,F as o}from"./p-8e9ba2cf.js";import{u as e,a as r,g as a}from"./p-6f0eaec6.js";import{S as s}from"./p-94c68cce.js";const l=".formLTR{font-family:Helvetica, Arial, sans-serif;text-align:left}.formRTL{font-family:Helvetica, Arial, sans-serif;text-align:right}.searchContainer{align-items:center;display:flex}";const h=l;const c=class{constructor(n){t(this,n);this.clearInput=i(this,"clearInput",7);this.clearInput=()=>{};this.searchStore=e.getState();this.themeStore=r.getState();this.componentDidLoad=()=>{const t=new a(this.config);this.searchStore.initialize(t,true)};this.handleFormSubmit=async t=>{t.preventDefault();if(this.query.trim()===""){this.error=true}else{this.error=false;this.searchStore.setQuery(this.query);await this.searchStore.search();this.searchResults=JSON.stringify(this.searchStore.searchResults)}};this.handleSearchInputChange=t=>{this.query=t.detail};this.handleClearInput=()=>{this.query="";this===null||this===void 0?void 0:this.clearInput()};this.toggleTheme=()=>{this.themeStore.toggleTheme()};this.config={apiKey:"",endpointURL:"",index:[]};this.errorMessage="Search was unsuccessful";this.labelForInput="Search";this.rightToLeftOrientation=false;this.error=false;this.query="";this.searchResults=null}render(){return n("form",{key:"2f128025b9caa2ab8a888d461da9b162bbc30d2f",class:this.rightToLeftOrientation?"formRTL":"formLTR",onSubmit:this.handleFormSubmit},n("sc-input-label",{key:"110f30f0bbd27a0a512d9461a141198b738cc945",label:this.labelForInput}),n("div",{key:"5ec54632aeb5595f76a769d99801c8b92745bb05",class:"searchContainer"},this.rightToLeftOrientation&&n("sc-button",{key:"753746e7c6bab72006e5a866609934e4738cb096"}),n("sc-input",{key:"823cda15577d253db0f1c30e3c8aa64fc19520ff",onClearInput:this.handleClearInput,rightToLeftOrientation:this.rightToLeftOrientation,onSearchInputChange:this.handleSearchInputChange,query:this.query}),!this.rightToLeftOrientation&&n("sc-button",{key:"99474f1a9fe35c18de0d6cc8ba9e70a4f1471c55",onButtonClick:this.handleFormSubmit})),this.error&&n("sc-error-message",{key:"03da10c2d3c51da69db971a0bfdbc7edbe218e1c",errorMessage:this.errorMessage}))}};c.style=h;const p=()=>n("svg",{width:"22",height:"22",viewBox:"0 0 22 22",fill:"none"},n("title",null,"Searchcraft Clear Input Icon Light"),n("path",{d:"M14 8L8 14M8 8L14 14M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z",stroke:"black","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"}));const d=()=>n("svg",{width:"22",height:"22",viewBox:"0 0 22 22",fill:"none",xmlns:"http://www.w3.org/2000/svg"},n("title",null,"Searchcraft Clear Input Icon Dark"),n("path",{d:"M14 8L8 14M8 8L14 14M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z",stroke:"white","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"}));const u=()=>n("svg",{width:"20",height:"21",viewBox:"0 0 20 21",fill:"none"},n("title",null,"Searchcraft Arrow Right Icon Light"),n("path",{d:"M7.5 15.0444L12.5 10.0444L7.5 5.04443",stroke:"#737373","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"}));const f=()=>n("svg",{width:"8",height:"12",viewBox:"0 0 8 12",fill:"none",xmlns:"http://www.w3.org/2000/svg"},n("title",null,"Searchcraft Arrow Right Icon Dark"),n("path",{d:"M1.5 11L6.5 6L1.5 1",stroke:"#BFBFBF","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"}));const g=":root{--font-stack:Helvetica, Arial, sans-serif}.interactiveResultContainerLight{background-color:#FAFAFA;align-items:flex-start;border-radius:16px;display:flex;position:relative;flex-direction:column;gap:16px;padding:8px}@media (min-width: 600px){.interactiveResultContainerLight{flex-direction:row}}.interactiveResultContainerDark{background-color:#2E2E2E;align-items:flex-start;border-radius:16px;display:flex;position:relative;flex-direction:column;gap:16px;padding:8px}@media (min-width: 600px){.interactiveResultContainerDark{flex-direction:row}}.resultContainer{align-items:flex-start;display:flex;flex-direction:column;gap:16px}@media (min-width: 600px){.resultContainer{flex-direction:row}}.interactiveIconLarge{display:inline-block;position:absolute;right:5px;top:8px}@media (max-width: 600px){.interactiveIconLarge{display:none}}.interactiveIconSmall{position:absolute;right:5px;top:-2px;display:inline-block}@media (min-width: 600px){.interactiveIconSmall{display:none}}.imageContainer{max-height:540px;max-width:100%}@media (min-width: 600px){.imageContainer{max-height:100%;max-width:50%}}.contentContainer{max-height:100%;max-width:100%}@media (min-width: 600px){.contentContainer{max-width:50%}}.imageLight{aspect-ratio:2/1;border-radius:8px;max-height:100%;max-width:100%;border:1px solid #D9D9D9}.imageDark{aspect-ratio:2/1;border-radius:8px;max-height:100%;max-width:100%;border:1px solid #333}.headingLight{font-family:var(--font-stack);font-size:16px;font-weight:700;line-height:20px;margin-bottom:4px;margin-top:0px;position:relative;color:#292929}.headingDark{font-family:var(--font-stack);font-size:16px;font-weight:700;line-height:20px;margin-bottom:4px;margin-top:0px;position:relative;color:#FFF}.subheadingLight{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-bottom:4px;margin-top:0px;color:#737373}.subheadingDark{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-bottom:4px;margin-top:0px;color:#BFBFBF}.bodyContentLight{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#404040}.bodyContentDark{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#E6E6E6}";const x=g;const b=class{constructor(i){t(this,i);this.handleButtonClick=()=>{this.buttonCallbackFn()};this.handleContainerClick=()=>{if(this.interactiveResult){this.callbackFn()}};this.buttonCallbackFn=()=>{};this.buttonLabel="";this.callbackFn=()=>{};this.imageAltText="";this.imageSrc="";this.interactiveResult=false;this.keyDownCallbackFn=()=>{};this.resultBodyContent="";this.resultHeading="";this.resultSubheading="";this.theme="light"}render(){const t=this.theme==="light";return n("div",{key:"ee89d0d997c1616d4534cae4ee9685f6ce040099",class:this.interactiveResult?t?"interactiveResultContainerLight":"interactiveResultContainerDark":"resultContainer",id:"searchcraft-item",onClick:this.handleContainerClick,onKeyDown:this.keyDownCallbackFn,tabindex:"0"},this.interactiveResult&&n("div",{key:"fe1174e8a72f4b73a076c5be015e44a4b1ef8215",class:"interactiveIconLarge"},t?n(u,null):n(f,null)),n("div",{key:"c8c68d1beb4b57d9b6a7a860d754f2d8577a73fb",class:"imageContainer"},n("img",{key:"e102470ecc13a71620004ed148a81d9af9984976",alt:this.imageAltText,class:t?"imageLight":"imageDark",src:this.imageSrc})),n("div",{key:"07dbf514b64cb063c690ed42ec6ae04b1afbaf9a",class:"contentContainer"},n("h2",{key:"fb6dfe3c58667cab4319f82e49ab90145904671c",class:t?"headingLight":"headingDark"},this.resultHeading,this.interactiveResult&&n("div",{key:"378b93a681888fc5709c627631284fd34b375b02",class:"interactiveIconSmall"},t?n(u,null):n(f,null))),n("h3",{key:"9fc6e4d8d9a55489996492fbbb482eeabb69fde1",class:t?"subheadingLight":"subheadingDark"},this.resultSubheading),n("p",{key:"66810ac7427abe83a88237471cdc30c9cd2fa84b",class:t?"bodyContentLight":"bodyContentDark"},this.resultBodyContent),n("button",{key:"1df164311052868adde2dc41b8c769834622a10f",onClick:this.handleButtonClick,type:"button"},this.buttonLabel)))}};b.style=x;const k=":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 m=k;const L=class{constructor(i){t(this,i);this.query="";this.searchResults=null}componentDidLoad(){this.unsubscribe=e.subscribe((t=>{console.log("Store updated:",t);this.searchResults=Object.assign({},t.searchResults);this.query=t.query}));const{searchResults:t,query:i}=e.getState();console.log("Initial state:",t,i);this.searchResults=t;this.query=i}disconnectedCallback(){if(this.unsubscribe){this.unsubscribe()}}render(){var t,i,o,e,r,a,s;if(!((t=this.searchResults)===null||t===void 0?void 0:t.data)){console.warn("No search results data available");return n("div",null,"No results to display.")}return n("div",{class:"resultsContainer"},(e=(o=(i=this.searchResults)===null||i===void 0?void 0:i.data)===null||o===void 0?void 0:o.hits)===null||e===void 0?void 0:e.map(((t,i)=>{const{doc:o}=t;return n("sc-base-search-result",{key:`${o===null||o===void 0?void 0:o.id}-${i}`,"button-label":"View More","callback-fn":()=>console.log("interactive element"),"button-callback-fn":()=>console.log("button callback"),"interactive-result":true,"image-src":o===null||o===void 0?void 0:o.poster,"result-body-content":o===null||o===void 0?void 0:o.overview,"result-heading":o===null||o===void 0?void 0:o.title,"result-subheading":o===null||o===void 0?void 0:o.release_date})})),this.query.length>0&&((s=(a=(r=this.searchResults)===null||r===void 0?void 0:r.data)===null||a===void 0?void 0:a.hits)===null||s===void 0?void 0:s.length)===0&&n("sc-error-message",{"error-message":`No search results found for "${this.query}" query`}))}};L.style=m;var v={exports:{}};
-/*!
-	Copyright (c) 2018 Jed Watson.
-	Licensed under the MIT License (MIT), see
-	http://jedwatson.github.io/classnames
-*/(function(t){(function(){var i={}.hasOwnProperty;function n(){var t="";for(var i=0;i<arguments.length;i++){var n=arguments[i];if(n){t=e(t,o(n))}}return t}function o(t){if(typeof t==="string"||typeof t==="number"){return t}if(typeof t!=="object"){return""}if(Array.isArray(t)){return n.apply(null,t)}if(t.toString!==Object.prototype.toString&&!t.toString.toString().includes("[native code]")){return t.toString()}var o="";for(var r in t){if(i.call(t,r)&&t[r]){o=e(o,r)}}return o}function e(t,i){if(!i){return t}if(t){return t+" "+i}return t+i}if(t.exports){n.default=n;t.exports=n}else{window.classNames=n}})()})(v);const y=v.exports;const C=":root{--font-stack:Helvetica, Arial, sans-serif}.buttonLight{border-radius:8px;display:flex;font-family:var(--font-stack);font-size:16px;font-weight:700;line-height:20px;padding:11px 20px;position:relative;background-color:#000;border:1px solid #E6E6E6;color:#FFF}.buttonLight:hover{cursor:pointer}.buttonLight:hover{background-color:#2E2E2E}.buttonLight:focus{outline:2px solid #000000}.buttonDark{border-radius:8px;display:flex;font-family:var(--font-stack);font-size:16px;font-weight:700;line-height:20px;padding:11px 20px;position:relative;background-color:#FFF;border:1px solid #404040;color:#292929}.buttonDark:hover{cursor:pointer}.buttonDark:hover{background-color:#FAFAFA}.buttonDark:focus{outline:2px solid #404040}.spinnerMarginRight{left:4px;margin-right:4px;position:absolute}.spinnerMarginLeft{left:4px;margin-left:4px;position:absolute}.buttonLabel{animation:right-and-back 0.2s;margin-left:4px;position:relative}@keyframes right-and-back{0%{right:-6px}50%{right:-12px}75%{right:-6px}100%{right:0px}}";const w=C;const R=class{constructor(n){t(this,n);this.buttonClick=i(this,"buttonClick",7);this.handleClick=()=>{this.buttonClick.emit()};this.iconElement=undefined;this.iconOnly=false;this.iconPosition="left";this.label="Search";this.isRequesting=false;this.theme="light"}getButtonStyle(){return this.theme==="light"?"buttonLight":"buttonDark"}render(){const t=this.getButtonStyle();return n(o,{key:"1786fa90c9eff082b58b6b45dda5d64cc1da9c8a"},this.iconOnly?n("button",{class:y(t,"searchcraft-button"),onClick:this.handleClick,type:"submit"},this.isRequesting?n("sc-spinner-dark",null):this.iconElement):n("button",{class:y(t,"searchcraft-button"),onClick:this.handleClick,type:"submit"},this.iconPosition==="left"&&this.isRequesting?n("div",{class:"spinner-margin-right"},n("sc-spinner-dark",null)):this.iconElement,n("span",{class:y(this.isRequesting&&"button-label","searchcraft-button-label")},this.label)))}};R.style=w;const T=".spinnerContainer{background-color:transparent;height:20px;width:20px}.spinnerDark{height:100%;width:100%;background:conic-gradient(#000 50%, #FFFFFF);clip-path:circle(50%);mask-image:radial-gradient(circle at center, rgba(0, 0, 0, 0) 6.6666666667px, rgb(0, 0, 0) 6.6666666667px);animation:spinning 1s linear infinite}.spinnerLight{height:100%;width:100%;background:conic-gradient(#737373 50%, #FFFFFF);clip-path:circle(50%);mask-image:radial-gradient(circle at center, rgba(0, 0, 0, 0) 6.6666666667px, rgb(0, 0, 0) 6.6666666667px);animation:spinning 1s linear infinite}@keyframes spinning{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}";const F=T;const D=class{constructor(i){t(this,i)}render(){return n("div",{key:"201b6ffa04c9ad69cb169dd385e25289bae6f98d",class:"spinnerContainer"},n("div",{key:"e20614e8266fe57882f0ada0c210bb0b05e0fe99",class:"spinnerDark"}))}};D.style=F;const E=":root{--font-stack:Helvetica, Arial, sans-serif}.inputClearButtonLTR{align-items:center;background:none;border:none;display:flex;height:20px;justify-content:center;padding:0;position:absolute;right:25px;top:11px;width:20px}.inputClearButtonRTL{align-items:center;background:none;border:none;display:flex;height:20px;justify-content:center;left:25px;padding:0;position:absolute;top:11px;width:20px}";const B=E;const I=class{constructor(n){t(this,n);this.clearInput=i(this,"clearInput",7);this.handleClearClick=t=>{t.preventDefault();this.clearInput.emit()};this.isRequesting=false;this.rightToLeftOrientation=false;this.theme="light"}isLightTheme(){return this.theme==="light"}render(){return this.rightToLeftOrientation?n("button",{class:y("inputClearButtonRTL",".sc-clear-input-button-rtl"),onClick:this.handleClearClick,type:"button"},this.isRequesting?this.isLightTheme?n(s,null):n(D,null):this.isLightTheme?n(p,null):n(d,null)):n("button",{class:y("inputClearButtonLTR",".sc-clear-input-button-ltr"),onClick:this.handleClearClick,type:"button"},this.isRequesting?this.isLightTheme?n(s,null):n(D,null):this.isLightTheme?n(p,null):n(d,null))}};I.style=B;const A=":root{--font-stack:Helvetica, Arial, sans-serif}.errorMessageLight{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-top:4px;color:#990000}.errorMessageDark{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-top:4px;color:#FFB3B3}";const z=A;const S=class{constructor(i){t(this,i);this.errorMessage=undefined;this.theme="light"}render(){const t=this.theme==="light"?"errorMessageLight":"errorMessageDark";return n("p",{key:"485fcb74212005ebf4f2d63576bca05d4b9a9867",class:y(t)},this.errorMessage||"Search term is required.")}};S.style=z;const M=":root{--font-stack:Helvetica, Arial, sans-serif}.inputContainerLTR{position:relative}.inputContainerRTL{position:relative;margin-left:8px}.inputLightLTR{border:none;border-radius:8px;font-family:var(--font-stack);outline:none;padding-bottom:15px;padding-top:15px;background-color:#EDEDED;color:#292929;margin-right:8px;padding-left:36px;padding-right:16px}.inputLightLTR::placeholder{font-family:var(--font-stack);font-size:16px}.inputLightLTR::placeholder{color:#737373}.inputLightLTR:focus{outline:2px solid #000}.inputDarkLTR{border:none;border-radius:8px;font-family:var(--font-stack);outline:none;padding-bottom:15px;padding-top:15px;background-color:#1A1A1A;color:#FFF;margin-right:8px;padding-left:36px;padding-right:16px}.inputDarkLTR::placeholder{font-family:var(--font-stack);font-size:16px}.inputDarkLTR::placeholder{color:#BFBFBF}.inputDarkLTR:focus{outline:2px solid #FFF}.inputErrorLightLTR{border:none;border-radius:8px;font-family:var(--font-stack);outline:none;padding-bottom:15px;padding-top:15px;background-color:#EDEDED;color:#292929;outline:2px solid #c00;margin-right:8px;padding-left:36px;padding-right:16px}.inputErrorLightLTR::placeholder{font-family:var(--font-stack);font-size:16px}.inputErrorLightLTR::placeholder{color:#737373}.inputErrorLightLTR:focus{outline:2px solid #000}.inputErrorLightLTR:focus-visible{outline:2px solid #c00}.inputErrorDarkLTR{border:none;border-radius:8px;font-family:var(--font-stack);outline:none;padding-bottom:15px;padding-top:15px;background-color:#1A1A1A;color:#FFF;outline:2px solid #FFB3B3;margin-right:8px;padding-left:36px;padding-right:16px}.inputErrorDarkLTR::placeholder{font-family:var(--font-stack);font-size:16px}.inputErrorDarkLTR::placeholder{color:#BFBFBF}.inputErrorDarkLTR:focus{outline:2px solid #FFF}.inputErrorDarkLTR:focus-visible{outline:2px solid #FFB3B3}.inputLightRTL{border:none;border-radius:8px;font-family:var(--font-stack);outline:none;padding-bottom:15px;padding-top:15px;background-color:#EDEDED;color:#292929;margin-left:8px;padding-left:16px;padding-right:36px;text-align:right}.inputLightRTL::placeholder{font-family:var(--font-stack);font-size:16px}.inputLightRTL::placeholder{color:#737373}.inputLightRTL:focus{outline:2px solid #000}.inputDarkRTL{border:none;border-radius:8px;font-family:var(--font-stack);outline:none;padding-bottom:15px;padding-top:15px;background-color:#1A1A1A;color:#FFF;margin-left:8px;padding-left:16px;padding-right:36px;text-align:right}.inputDarkRTL::placeholder{font-family:var(--font-stack);font-size:16px}.inputDarkRTL::placeholder{color:#BFBFBF}.inputDarkRTL:focus{outline:2px solid #FFF}.inputErrorLightRTL{border:none;border-radius:8px;font-family:var(--font-stack);outline:none;padding-bottom:15px;padding-top:15px;background-color:#EDEDED;color:#292929;outline:2px solid #c00;margin-left:8px;padding-left:16px;padding-right:36px;text-align:right}.inputErrorLightRTL::placeholder{font-family:var(--font-stack);font-size:16px}.inputErrorLightRTL::placeholder{color:#737373}.inputErrorLightRTL:focus{outline:2px solid #000}.inputErrorLightRTL:focus-visible{outline:2px solid #c00}.inputErrorDarkRTL{border:none;border-radius:8px;font-family:var(--font-stack);outline:none;padding-bottom:15px;padding-top:15px;background-color:#1A1A1A;color:#FFF;outline:2px solid #FFB3B3;margin-left:8px;padding-left:16px;padding-right:36px;text-align:right}.inputErrorDarkRTL::placeholder{font-family:var(--font-stack);font-size:16px}.inputErrorDarkRTL::placeholder{color:#BFBFBF}.inputErrorDarkRTL:focus{outline:2px solid #FFF}.inputErrorDarkRTL:focus-visible{outline:2px solid #FFB3B3}";const _=M;const j=class{constructor(n){t(this,n);this.searchInputChange=i(this,"searchInputChange",7);this.clearInput=i(this,"clearInput",7);this.error=false;this.formClassName="";this.inputCaptionClassName="";this.inputCaptionValue="";this.inputClassName="";this.placeholderValue="Enter Search";this.rightToLeftOrientation=false;this.query="";this.theme="light"}get isLightTheme(){return this.theme==="light"}handleInputChange(t){const i=t.target;this.searchInputChange.emit(i.value)}handleClearInput(){if(this.clearInput){this.clearInput.emit()}}render(){const t=this.rightToLeftOrientation?"inputContainerRTL":"inputContainerLTR";const i=y(this.error?this.isLightTheme?"inputErrorLightRTL":"inputErrorDarkRTL":this.isLightTheme?"inputLightLTR":"inputDarkLTR","searchcraft-input");return n("div",{key:"0257fcbab8d8f78439506f609784ef089f9b2784",class:y(t,this.formClassName,"searchcraft-input-form")},this.rightToLeftOrientation?n(o,null,n("input",{class:y(this.error?this.isLightTheme?"inputErrorLightRTL":"inputErrorDarkRTL":this.isLightTheme?"inputLightRTL":"inputDarkRTL",i,"searchcraft-input"),id:"searchcraft-input-id",onChange:this.handleInputChange.bind(this),placeholder:this.placeholderValue,type:"text",value:this.query}),this.inputCaptionValue&&n("sc-input-caption",{inputCaptionClassName:this.inputCaptionClassName,inputCaptionValue:this.inputCaptionValue,rightToLeftOrientation:this.rightToLeftOrientation}),this.query.length>0&&n("sc-clear-input-button",{onClearInput:this.handleClearInput,rightToLeftOrientation:this.rightToLeftOrientation}),n("sc-input-icon",{error:this.error,rightToLeftOrientation:this.rightToLeftOrientation})):n(o,null,n("input",{class:y(this.error?this.isLightTheme?"inputErrorLightLTR":"inputErrorDarkLTR":this.isLightTheme?"inputLightLTR":"inputDarkLTR",i,"searchcraft-input"),id:"searchcraft-input-id",onChange:this.handleInputChange.bind(this),placeholder:this.placeholderValue,type:"text",value:this.query}),this.inputCaptionValue&&n("sc-input-caption",{inputCaptionClassName:this.inputCaptionClassName,inputCaptionValue:this.inputCaptionValue,rightToLeftOrientation:this.rightToLeftOrientation}),this.query.length>0&&n("sc-clear-input-button",{onClearInput:this.handleClearInput,rightToLeftOrientation:this.rightToLeftOrientation})))}};j.style=_;const H=":root{--font-stack:Helvetica, Arial, sans-serif}.inputCaptionLightLTR{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-top:4px;color:#404040}.inputCaptionDarkLTR{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-top:4px;color:#E6E6E6}.inputCaptionErrorLightLTR{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-top:4px;color:#990000}.inputCaptionErrorDarkLTR{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-top:4px;color:#FFB3B3}.inputCaptionLightRTL{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-top:4px;color:#404040;text-align:right}.inputCaptionDarkRTL{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-top:4px;color:#E6E6E6;text-align:right}.inputCaptionErrorLightRTL{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-top:4px;color:#990000;text-align:right}.inputCaptionErrorDarkRTL{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-top:4px;color:#FFB3B3;text-align:right}";const O=H;const N=class{constructor(i){t(this,i);this.error=undefined;this.inputCaptionClassName="";this.inputCaptionValue="Enter Search";this.rightToLeftOrientation=false;this.theme="light"}isLightTheme(){return this.theme==="light"}render(){return this.rightToLeftOrientation?n("p",{class:y(this.error?this.isLightTheme?"inputCaptionErrorLightRTL":"inputCaptionErrorDarkRTL":this.isLightTheme?"inputCaptionLightRTL":"inputCaptionDarkRTL",this.inputCaptionClassName,".searchcraft-input-caption")},this.inputCaptionValue):n("p",{class:y(this.error?this.isLightTheme?"inputCaptionErrorLightLTR":"inputCaptionErrorDarkLTR":this.isLightTheme?"inputCaptionLightLTR":"inputCaptionDarkLTR",this.inputCaptionClassName,".searchcraft-input-caption")},this.inputCaptionValue)}};N.style=O;const Z=()=>n("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none"},n("title",null,"Searchcraft Search Icon Light"),n("path",{d:"M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z",stroke:"#404040","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"}));const q=()=>n("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",xmlns:"http://www.w3.org/2000/svg"},n("title",null,"Searchcraft Search Icon Dark"),n("path",{d:"M16.5 16.5L12.875 12.875M14.8333 8.16667C14.8333 11.8486 11.8486 14.8333 8.16667 14.8333C4.48477 14.8333 1.5 11.8486 1.5 8.16667C1.5 4.48477 4.48477 1.5 8.16667 1.5C11.8486 1.5 14.8333 4.48477 14.8333 8.16667Z",stroke:"#E6E6E6","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"}));const V=()=>n("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none"},n("title",null,"Searchcraft Error Search Icon Light"),n("path",{d:"M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z",stroke:"#737373","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"}));const $=()=>n("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",xmlns:"http://www.w3.org/2000/svg"},n("title",null,"Searchcraft Error Search Icon Dark"),n("path",{d:"M16.5 16.5L12.875 12.875M14.8333 8.16667C14.8333 11.8486 11.8486 14.8333 8.16667 14.8333C4.48477 14.8333 1.5 11.8486 1.5 8.16667C1.5 4.48477 4.48477 1.5 8.16667 1.5C11.8486 1.5 14.8333 4.48477 14.8333 8.16667Z",stroke:"#BFBFBF","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"}));const K=":root{--font-stack:Helvetica, Arial, sans-serif}.inputIconLTR{height:20px;left:10px;position:absolute;top:11px;width:20px}.inputIconRTL{height:20px;position:absolute;right:10px;top:11px;width:20px}";const J=K;const U=class{constructor(i){t(this,i);this.error=undefined;this.rightToLeftOrientation=false;this.theme="light"}isLightTheme(){return this.theme==="light"}render(){return this.error?n("div",{class:this.rightToLeftOrientation?"inputIconRTL":"inputIconLTR"},this.isLightTheme?n(V,null):n($,null)):n("div",{class:this.rightToLeftOrientation?"inputIconRTL":"inputIconLTR"},this.isLightTheme?n(Z,null):n(q,null))}};U.style=J;const G=":root{--font-stack:Helvetica, Arial, sans-serif}.labelLight{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-top:4px;color:#292929}.labelDark{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-top:4px;color:#FFF}";const P=G;const Q=class{constructor(i){t(this,i);this.inputLabelClassName="";this.label="Enter Search";this.theme="light"}isLightTheme(){return this.theme==="light"}render(){const t=this.isLightTheme?"labelLight":"labelDark";return n("label",{key:"d6f4e489c05903a0b27266df9a22b5fe5ecd57f3",class:y(t,this.inputLabelClassName),htmlFor:"searchcraft-input-id"},this.label)}};Q.style=P;export{c as sc_base_search_form,b as sc_base_search_result,L as sc_base_search_results,R as sc_button,I as sc_clear_input_button,S as sc_error_message,j as sc_input,N as sc_input_caption,U as sc_input_icon,Q as sc_input_label,D as sc_spinner_dark};
-//# sourceMappingURL=p-9545c59a.entry.js.map

package/dist/searchcraft-javascript-sdk/p-9545c59a.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["scBaseSearchFormModuleCss","ScBaseSearchFormStyle0","ScBaseSearchForm","this","clearInput","searchStore","useSearchcraftStore","getState","themeStore","useThemeStore","componentDidLoad","searchcraft","SearchcraftCore","config","initialize","handleFormSubmit","async","event","preventDefault","query","trim","error","setQuery","search","searchResults","JSON","stringify","handleSearchInputChange","detail","handleClearInput","toggleTheme","apiKey","endpointURL","index","render","h","key","class","rightToLeftOrientation","onSubmit","label","labelForInput","onClearInput","onSearchInputChange","onButtonClick","errorMessage","ClearInputIconLight","width","height","viewBox","fill","d","stroke","ClearInputIconDark","xmlns","ArrowRightIconLight","ArrowRightIconDark","scBaseSearchResultModuleCss","ScBaseSearchResultStyle0","ScBaseSearchResult","handleButtonClick","buttonCallbackFn","handleContainerClick","interactiveResult","callbackFn","isLightTheme","theme","id","onClick","onKeyDown","keyDownCallbackFn","tabindex","alt","imageAltText","src","imageSrc","resultHeading","resultSubheading","resultBodyContent","type","buttonLabel","scBaseSearchResultsModuleCss","ScBaseSearchResultsStyle0","ScBaseSearchResults","unsubscribe","subscribe","state","console","log","Object","assign","disconnectedCallback","_a","data","warn","_d","_c","_b","hits","map","document","doc","result","poster","overview","title","release_date","length","_g","_f","_e","hasOwn","hasOwnProperty","classNames","classes","i","arguments","arg","appendClass","parseValue","Array","isArray","apply","toString","prototype","includes","call","value","newClass","module","exports","default","window","scButtonModuleCss","ScButtonStyle0","ScButton","handleClick","buttonClick","emit","getButtonStyle","buttonStyle","Fragment","iconOnly","isRequesting","iconElement","iconPosition","scSpinnerDarkModuleCss","ScSpinnerDarkStyle0","ScSpinnerDark","scClearInputButtonModuleCss","ScClearInputButtonStyle0","ScClearInputButton","handleClearClick","ScSpinnerLight","scErrorMessageModuleCss","ScErrorMessageStyle0","ScErrorMessage","errorMessageStyle","scInputModuleCss","ScInputStyle0","ScInput","handleInputChange","input","target","searchInputChange","containerClassName","inputClassName","formClassName","onChange","bind","placeholder","placeholderValue","inputCaptionValue","inputCaptionClassName","scInputCaptionModuleCss","ScInputCaptionStyle0","ScInputCaption","SearchIconLight","SearchIconDark","SearchIconLightError","SearchIconDarkError","scInputIconModuleCss","ScInputIconStyle0","ScInputIcon","scInputLabelModuleCss","ScInputLabelStyle0","ScInputLabel","labelStyle","inputLabelClassName","htmlFor"],"sources":["src/components/sc-base-search-form/sc-base-search-form.module.scss?tag=sc-base-search-form&encapsulation=shadow","src/components/sc-base-search-form/sc-base-search-form.tsx","src/assets/ClearInputIcon.tsx","src/components/sc-base-search-result/sc-base-search-result.module.scss?tag=sc-base-search-result&encapsulation=shadow","src/components/sc-base-search-result/sc-base-search-result.tsx","src/components/sc-base-search-results/sc-base-search-results.module.scss?tag=sc-base-search-results&encapsulation=shadow","src/components/sc-base-search-results/sc-base-search-results.tsx","../../node_modules/classnames/index.js","src/components/sc-button/sc-button.module.scss?tag=sc-button&encapsulation=shadow","src/components/sc-button/sc-button.tsx","src/components/sc-spinner-dark/sc-spinner-dark.module.scss?tag=sc-spinner-dark&encapsulation=shadow","src/components/sc-spinner-dark/sc-spinner-dark.tsx","src/components/sc-clear-input-button/sc-clear-input-button.module.scss?tag=sc-clear-input-button&encapsulation=shadow","src/components/sc-clear-input-button/sc-clear-input-button.tsx","src/components/sc-error-message/sc-error-message.module.scss?tag=sc-error-message&encapsulation=shadow","src/components/sc-error-message/sc-error-message.tsx","src/components/sc-input/sc-input.module.scss?tag=sc-input&encapsulation=shadow","src/components/sc-input/sc-input.tsx","src/components/sc-input-caption/sc-input-caption.module.scss?tag=sc-input-caption&encapsulation=shadow","src/components/sc-input-caption/sc-input-caption.tsx","src/assets/SearchIcons.tsx","src/components/sc-input-icon/sc-input-icon.module.scss?tag=sc-input-icon&encapsulation=shadow","src/components/sc-input-icon/sc-input-icon.tsx","src/components/sc-input-label/sc-input-label.module.scss?tag=sc-input-label&encapsulation=shadow","src/components/sc-input-label/sc-input-label.tsx"],"sourcesContent":[".formLTR {\n  font-family: Helvetica, Arial, sans-serif;\n  text-align: left;\n}\n\n.formRTL {\n  font-family: Helvetica, Arial, sans-serif;\n  text-align: right;\n}\n\n.searchContainer {\n  align-items: center;\n  display: flex;\n}","import { Component, h, Event, Prop, State } from '@stencil/core';\nimport {\n  type CoreConfigSDK,\n  CoreSDK as SearchcraftCore,\n} from '@searchcraft/core';\n\nimport { useSearchcraftStore, useThemeStore } from '@provider/store';\n\nimport type { ScInputCustomEvent } from '@components/sc-input/sc-input';\n\n@Component({\n  tag: 'sc-base-search-form',\n  styleUrl: 'sc-base-search-form.module.scss',\n  shadow: true,\n})\nexport class ScBaseSearchForm {\n  @Prop() config: CoreConfigSDK = {\n    apiKey: '',\n    endpointURL: '',\n    index: [],\n  };\n  @Prop() errorMessage = 'Search was unsuccessful';\n  @Prop() labelForInput = 'Search';\n  @Prop() rightToLeftOrientation = false;\n\n  @Event() clearInput = () => {};\n\n  @State() error = false;\n  @State() query = '';\n  @State() searchResults: string | null = null;\n\n  private searchStore = useSearchcraftStore.getState();\n  private themeStore = useThemeStore.getState();\n\n  componentDidLoad = () => {\n    const searchcraft = new SearchcraftCore(this.config);\n    this.searchStore.initialize(searchcraft, true);\n  };\n\n  handleFormSubmit = async (event) => {\n    event.preventDefault();\n    if (this.query.trim() === '') {\n      this.error = true;\n    } else {\n      this.error = false;\n      this.searchStore.setQuery(this.query);\n      await this.searchStore.search();\n      this.searchResults = JSON.stringify(this.searchStore.searchResults);\n    }\n  };\n\n  handleSearchInputChange = (event: ScInputCustomEvent<string>) => {\n    this.query = event.detail;\n  };\n\n  handleClearInput = () => {\n    this.query = '';\n    this?.clearInput();\n  };\n\n  toggleTheme = () => {\n    this.themeStore.toggleTheme();\n  };\n\n  render() {\n    return (\n      <form\n        class={this.rightToLeftOrientation ? 'formRTL' : 'formLTR'}\n        onSubmit={this.handleFormSubmit}\n      >\n        <sc-input-label label={this.labelForInput} />\n        <div class='searchContainer'>\n          {this.rightToLeftOrientation && <sc-button />}\n          <sc-input\n            onClearInput={this.handleClearInput}\n            rightToLeftOrientation={this.rightToLeftOrientation}\n            onSearchInputChange={this.handleSearchInputChange}\n            query={this.query}\n          />\n          {!this.rightToLeftOrientation && (\n            <sc-button onButtonClick={this.handleFormSubmit} />\n          )}\n        </div>\n        {this.error && <sc-error-message errorMessage={this.errorMessage} />}\n      </form>\n    );\n  }\n}\n","import { h } from '@stencil/core';\n\nexport const ClearInputIconLight = () => (\n  <svg width='22' height='22' viewBox='0 0 22 22' fill='none'>\n    <title>Searchcraft Clear Input Icon Light</title>\n    <path\n      d='M14 8L8 14M8 8L14 14M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z'\n      stroke='black'\n      stroke-width='1.5'\n      stroke-linecap='round'\n      stroke-linejoin='round'\n    />\n  </svg>\n);\n\nexport const ClearInputIconDark = () => (\n  <svg\n    width='22'\n    height='22'\n    viewBox='0 0 22 22'\n    fill='none'\n    xmlns='http://www.w3.org/2000/svg'\n  >\n    <title>Searchcraft Clear Input Icon Dark</title>\n    <path\n      d='M14 8L8 14M8 8L14 14M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z'\n      stroke='white'\n      stroke-width='1.5'\n      stroke-linecap='round'\n      stroke-linejoin='round'\n    />\n  </svg>\n);\n\nexport const ArrowRightIconLight = () => (\n  <svg width='20' height='21' viewBox='0 0 20 21' fill='none'>\n    <title>Searchcraft Arrow Right Icon Light</title>\n    <path\n      d='M7.5 15.0444L12.5 10.0444L7.5 5.04443'\n      stroke='#737373'\n      stroke-width='1.5'\n      stroke-linecap='round'\n      stroke-linejoin='round'\n    />\n  </svg>\n);\n\nexport const ArrowRightIconDark = () => (\n  <svg\n    width='8'\n    height='12'\n    viewBox='0 0 8 12'\n    fill='none'\n    xmlns='http://www.w3.org/2000/svg'\n  >\n    <title>Searchcraft Arrow Right Icon Dark</title>\n    <path\n      d='M1.5 11L6.5 6L1.5 1'\n      stroke='#BFBFBF'\n      stroke-width='1.5'\n      stroke-linecap='round'\n      stroke-linejoin='round'\n    />\n  </svg>\n);\n","@import '../../utils/theme';\n\n:root {\n  --font-stack: Helvetica, Arial, sans-serif;\n}\n\n@mixin interactive-result-container-base {\n  align-items: flex-start;\n  border-radius: 16px;\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  gap: 16px;\n  padding: 8px;\n\n  @media (min-width: 600px) {\n    flex-direction: row;\n  }\n}\n\n.interactiveResultContainerLight {\n  background-color: $light-search-result-container-background;\n  @include interactive-result-container-base;\n}\n\n.interactiveResultContainerDark {\n  background-color: $dark-search-result-container-background;\n  @include interactive-result-container-base;\n}\n\n.resultContainer {\n  align-items: flex-start;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n\n  @media (min-width: 600px) {\n    flex-direction: row;\n  }\n}\n\n.interactiveIconLarge {\n  display: inline-block;\n  position: absolute;\n  right: 5px;\n  top: 8px;\n\n\n  @media (max-width: 600px) {\n   display: none;\n  }\n}\n\n.interactiveIconSmall {\n  position: absolute;\n  right: 5px;\n  top: -2px;\n  display: inline-block;\n\n\n  @media (min-width: 600px) {\n   display: none;\n  }\n}\n\n.imageContainer {\n  max-height: 540px;\n  max-width: 100%;\n\n  @media (min-width: 600px) {\n    max-height: 100%;\n    max-width: 50%;\n  }\n}\n\n.contentContainer {\n  max-height: 100%;\n  max-width: 100%;\n\n  @media (min-width: 600px) {\n    max-width: 50%;\n  }\n}\n\n@mixin image-base {\n  aspect-ratio: 2 / 1;\n  border-radius: 8px;\n  max-height: 100%;\n  max-width: 100%;\n}\n\n.imageLight {\n  @include image-base;\n  border: 1px solid $light-search-result-image-border;\n}\n\n.imageDark {\n  @include image-base;\n  border: 1px solid $dark-search-result-image-border;\n}\n\n@mixin heading-base {\n  font-family: var(--font-stack);\n  font-size: 16px;\n  font-weight: 700;\n  line-height: 20px;\n  margin-bottom: 4px;\n  margin-top: 0px;\n  position: relative;\n}\n\n.headingLight {\n  @include heading-base;\n  color: $light-search-result-heading-color;\n}\n\n.headingDark {\n  @include heading-base;\n  color: $dark-search-result-heading-color;\n}\n\n@mixin subheading-base {\n  font-family: var(--font-stack);\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 16px;\n  margin-bottom: 4px;\n  margin-top: 0px;\n}\n\n.subheadingLight {\n  @include subheading-base;\n  color: $light-search-result-subheading-color;\n}\n\n.subheadingDark {\n  @include subheading-base;\n  color: $dark-search-result-subheading-color\n}\n\n@mixin body-content-base {\n  font-family: var(--font-stack);\n  font-size: 16px;\n  font-weight: 400;\n  line-height: 20px;\n  margin-bottom: 4px;\n  margin-top: 0px;\n}\n\n.bodyContentLight {\n  @include body-content-base;\n  color: $light-search-result-body-content-color;\n}\n\n.bodyContentDark {\n  @include body-content-base;\n  color: $dark-search-result-body-content-color;\n}","import { Component, h, Prop } from '@stencil/core';\n\nimport {\n  ArrowRightIconLight,\n  ArrowRightIconDark,\n} from '@assets/ClearInputIcon';\n\n@Component({\n  tag: 'sc-base-search-result',\n  styleUrl: 'sc-base-search-result.module.scss',\n  shadow: true,\n})\nexport class ScBaseSearchResult {\n  @Prop() buttonCallbackFn: () => void = () => {};\n  @Prop() buttonLabel = '';\n  @Prop() callbackFn: () => void = () => {};\n  @Prop() imageAltText = '';\n  @Prop() imageSrc = '';\n  @Prop() interactiveResult = false;\n  @Prop() keyDownCallbackFn: () => void = () => {};\n  @Prop() resultBodyContent = '';\n  @Prop() resultHeading = '';\n  @Prop() resultSubheading = '';\n  @Prop() theme: 'light' | 'dark' = 'light'; // Simulating theme context.\n\n  private handleButtonClick = () => {\n    this.buttonCallbackFn();\n  };\n\n  private handleContainerClick = () => {\n    if (this.interactiveResult) {\n      this.callbackFn();\n    }\n  };\n\n  render() {\n    const isLightTheme = this.theme === 'light';\n\n    return (\n      <div\n        class={\n          this.interactiveResult\n            ? isLightTheme\n              ? 'interactiveResultContainerLight'\n              : 'interactiveResultContainerDark'\n            : 'resultContainer'\n        }\n        id='searchcraft-item'\n        onClick={this.handleContainerClick}\n        onKeyDown={this.keyDownCallbackFn}\n        tabindex='0'\n      >\n        {this.interactiveResult && (\n          <div class='interactiveIconLarge'>\n            {isLightTheme ? <ArrowRightIconLight /> : <ArrowRightIconDark />}\n          </div>\n        )}\n        <div class='imageContainer'>\n          <img\n            alt={this.imageAltText}\n            class={isLightTheme ? 'imageLight' : 'imageDark'}\n            src={this.imageSrc}\n          />\n        </div>\n        <div class='contentContainer'>\n          <h2 class={isLightTheme ? 'headingLight' : 'headingDark'}>\n            {this.resultHeading}\n            {this.interactiveResult && (\n              <div class='interactiveIconSmall'>\n                {isLightTheme ? (\n                  <ArrowRightIconLight />\n                ) : (\n                  <ArrowRightIconDark />\n                )}\n              </div>\n            )}\n          </h2>\n          <h3 class={isLightTheme ? 'subheadingLight' : 'subheadingDark'}>\n            {this.resultSubheading}\n          </h3>\n          <p class={isLightTheme ? 'bodyContentLight' : 'bodyContentDark'}>\n            {this.resultBodyContent}\n          </p>\n          <button onClick={this.handleButtonClick} type='button'>\n            {this.buttonLabel}\n          </button>\n        </div>\n      </div>\n    );\n  }\n}\n",":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, State } from '@stencil/core';\nimport type { SearchResult } from '@searchcraft/core';\n\nimport { useSearchcraftStore } from '@provider/store';\n\n@Component({\n  tag: 'sc-base-search-results',\n  styleUrl: 'sc-base-search-results.module.scss',\n  shadow: true,\n})\nexport class ScBaseSearchResults {\n  @State() query = '';\n  @State() searchResults: SearchResult | null = null;\n  private unsubscribe: () => void;\n\n  componentDidLoad() {\n    // Subscribe to state changes\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      console.log('Store updated:', state);\n      this.searchResults = { ...state.searchResults };\n      this.query = state.query;\n    });\n\n    // Fetch initial state\n    const { searchResults, query } = useSearchcraftStore.getState();\n    console.log('Initial state:', searchResults, query);\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    return (\n      <div class='resultsContainer'>\n        {this.searchResults?.data?.hits?.map((document, index) => {\n          const { doc: result } = document;\n          return (\n            <sc-base-search-result\n              key={`${result?.id}-${index}`}\n              button-label='View More'\n              callback-fn={() => console.log('interactive element')}\n              button-callback-fn={() => console.log('button callback')}\n              interactive-result={true}\n              image-src={result?.poster}\n              result-body-content={result?.overview}\n              result-heading={result?.title}\n              result-subheading={result?.release_date}\n            />\n          );\n        })}\n        {this.query.length > 0 &&\n          this.searchResults?.data?.hits?.length === 0 && (\n            <sc-error-message\n              error-message={`No search results found for \"${this.query}\" query`}\n            />\n          )}\n      </div>\n    );\n  }\n}\n","/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue(arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(null, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","@import '../../utils/theme';\n\n:root {\n  --font-stack: Helvetica, Arial, sans-serif;\n}\n\n@mixin button-base {\n  border-radius: 8px;\n  display: flex;\n  font-family: var(--font-stack);\n  font-size: 16px;\n  font-weight: 700;\n  line-height: 20px;\n  padding: 11px 20px;\n  position: relative;\n\n  &:hover {\n    cursor: pointer;\n  }\n}\n\n.buttonLight {\n  @include button-base;\n  background-color: $light-background;\n  border: 1px solid $light-button-border;\n  color: $light-button-color;\n\n  &:hover {\n    background-color: $light-button-hover;\n  }\n\n  &:focus {\n    outline: 2px solid $light-button-outline-focus;\n  }\n}\n\n.buttonDark {\n  @include button-base;\n  background-color: $dark-background;\n  border: 1px solid $dark-button-border;\n  color: $dark-button-color;\n\n  &:hover {\n    background-color: $dark-button-hover;\n  }\n\n  &:focus {\n    outline: 2px solid $dark-button-outline-focus;\n  }\n}\n\n.spinnerMarginRight {\n  left: 4px;\n  margin-right: 4px;\n  position: absolute;\n}\n\n.spinnerMarginLeft {\n  left: 4px;\n  margin-left: 4px;\n  position: absolute;\n}\n\n.buttonLabel {\n  animation: right-and-back .2s;\n  margin-left: 4px;\n  position: relative;\n}\n\n@keyframes right-and-back {\n  0% { right: -6px; }\n  50% { right: -12px; }\n  75% { right: -6px; }\n  100% {right: 0px; }\n}","import {\n  Component,\n  Event,\n  type EventEmitter,\n  Prop,\n  h,\n  State,\n  Fragment,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\n@Component({\n  tag: 'sc-button',\n  styleUrl: 'sc-button.module.scss',\n  shadow: true,\n})\nexport class ScButton {\n  @Prop() iconElement?: Element;\n  @Prop() iconOnly = false;\n  @Prop() iconPosition = 'left';\n  @Prop() label = 'Search';\n\n  @Event() buttonClick!: EventEmitter<void>;\n\n  @State() isRequesting = false;\n  @State() theme = 'light';\n\n  private getButtonStyle() {\n    return this.theme === 'light' ? 'buttonLight' : 'buttonDark';\n  }\n\n  private handleClick = () => {\n    this.buttonClick.emit(); // Emit the event instead of calling a function\n  };\n\n  render() {\n    const buttonStyle = this.getButtonStyle();\n\n    return (\n      <Fragment>\n        {this.iconOnly ? (\n          <button\n            class={classNames(buttonStyle, 'searchcraft-button')}\n            onClick={this.handleClick}\n            type='submit'\n          >\n            {this.isRequesting ? <sc-spinner-dark /> : this.iconElement}\n          </button>\n        ) : (\n          <button\n            class={classNames(buttonStyle, 'searchcraft-button')}\n            onClick={this.handleClick}\n            type='submit'\n          >\n            {this.iconPosition === 'left' && this.isRequesting ? (\n              <div class='spinner-margin-right'>\n                <sc-spinner-dark />\n              </div>\n            ) : (\n              this.iconElement\n            )}\n            <span\n              class={classNames(\n                this.isRequesting && 'button-label',\n                'searchcraft-button-label',\n              )}\n            >\n              {this.label}\n            </span>\n          </button>\n        )}\n      </Fragment>\n    );\n  }\n}\n","$spinner-size: 20px;\n\n.spinnerContainer {\n  background-color: transparent;\n  height: $spinner-size;\n  width: $spinner-size;\n}\n\n.spinnerDark {\n  height: 100%;\n  width: 100%;\n  background: conic-gradient(#000 50%, #FFFFFF);\n  clip-path: circle(50%);\n  mask-image: radial-gradient(circle at center, rgba(0,0,0,0) calc($spinner-size/3), rgba(0,0,0,1) calc($spinner-size/3));\n  animation: spinning 1s linear infinite;\n}\n\n.spinnerLight {\n  height: 100%;\n  width: 100%;\n  background: conic-gradient(#737373 50%, #FFFFFF);\n  clip-path: circle(50%);\n  mask-image: radial-gradient(circle at center, rgba(0,0,0,0) calc($spinner-size/3), rgba(0,0,0,1) calc($spinner-size/3));\n  animation: spinning 1s linear infinite;\n}\n\n@keyframes spinning {\n  0% { transform: rotate(0deg); }\n  50% {transform: rotate(180deg);}\n  100% { transform: rotate(360deg); }\n}","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'sc-spinner-dark',\n  styleUrl: 'sc-spinner-dark.module.scss',\n  shadow: true,\n})\nexport class ScSpinnerDark {\n  render() {\n    return (\n      <div class='spinnerContainer'>\n        <div class='spinnerDark' />\n      </div>\n    );\n  }\n}\n",":root {\n  --font-stack: Helvetica, Arial, sans-serif;\n}\n\n.inputClearButtonLTR {\n  align-items: center;\n  background: none;\n  border: none;\n  display: flex;\n  height: 20px;\n  justify-content: center;\n  padding: 0;\n  position: absolute;\n  right: 25px;\n  top: 11px;\n  width: 20px;\n}\n\n.inputClearButtonRTL {\n  align-items: center;\n  background: none;\n  border: none;\n  display: flex;\n  height: 20px;\n  justify-content: center;\n  left: 25px;\n  padding: 0;\n  position: absolute;\n  top: 11px;\n  width: 20px;\n}","import {\n  Component,\n  Event,\n  type EventEmitter,\n  Prop,\n  h,\n  State,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\nimport {\n  ClearInputIconLight,\n  ClearInputIconDark,\n} from '@assets/ClearInputIcon';\n\nimport { ScSpinnerDark } from '@components/sc-spinner-dark/sc-spinner-dark';\nimport { ScSpinnerLight } from '@components/sc-spinner-light/sc-spinner-light';\n\n@Component({\n  tag: 'sc-clear-input-button',\n  styleUrl: 'sc-clear-input-button.module.scss',\n  shadow: true,\n})\nexport class ScClearInputButton {\n  @Prop() isRequesting? = false;\n  @Prop() rightToLeftOrientation = false;\n\n  // Updated `clearInput` to an EventEmitter\n  @Event() clearInput: EventEmitter<void>;\n\n  @State() theme = 'light';\n\n  private isLightTheme() {\n    return this.theme === 'light';\n  }\n\n  // Added a click handler to emit the event\n  private handleClearClick = (event: MouseEvent) => {\n    event.preventDefault(); // Prevent default if necessary\n    this.clearInput.emit(); // Emit the event\n  };\n\n  render() {\n    return this.rightToLeftOrientation ? (\n      <button\n        class={classNames('inputClearButtonRTL', '.sc-clear-input-button-rtl')}\n        onClick={this.handleClearClick} // Use the handler\n        type='button'\n      >\n        {this.isRequesting ? (\n          this.isLightTheme ? (\n            <ScSpinnerLight />\n          ) : (\n            <ScSpinnerDark />\n          )\n        ) : this.isLightTheme ? (\n          <ClearInputIconLight />\n        ) : (\n          <ClearInputIconDark />\n        )}\n      </button>\n    ) : (\n      <button\n        class={classNames('inputClearButtonLTR', '.sc-clear-input-button-ltr')}\n        onClick={this.handleClearClick} // Use the handler\n        type='button'\n      >\n        {this.isRequesting ? (\n          this.isLightTheme ? (\n            <ScSpinnerLight />\n          ) : (\n            <ScSpinnerDark />\n          )\n        ) : this.isLightTheme ? (\n          <ClearInputIconLight />\n        ) : (\n          <ClearInputIconDark />\n        )}\n      </button>\n    );\n  }\n}\n","@import '../../utils/theme';\n\n:root {\n  --font-stack: Helvetica, Arial, sans-serif;\n}\n\n@mixin error-message-base {\n  font-family: var(--font-stack);\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 16px;\n  margin-top: 4px;\n}\n\n.errorMessageLight {\n  @include error-message-base;\n  color: $light-input-caption-color-error;\n}\n\n.errorMessageDark {\n  @include error-message-base;\n  color: $dark-input-caption-color-error;\n}","import { Component, Prop, h } from '@stencil/core';\nimport classNames from 'classnames';\n\n@Component({\n  tag: 'sc-error-message',\n  styleUrl: 'sc-error-message.module.scss',\n  shadow: true, // Enable shadow DOM if desired\n})\nexport class ScErrorMessage {\n  /**\n   * The error message to display. Defaults to a standard message if not provided.\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * The theme, which determines the style (light or dark).\n   */\n  @Prop() theme: 'light' | 'dark' = 'light';\n\n  render() {\n    const errorMessageStyle =\n      this.theme === 'light' ? 'errorMessageLight' : 'errorMessageDark';\n\n    return (\n      <p class={classNames(errorMessageStyle)}>\n        {this.errorMessage || 'Search term is required.'}\n      </p>\n    );\n  }\n}\n","@import '../../utils/theme';\n\n:root {\n  --font-stack: Helvetica, Arial, sans-serif;\n}\n\n@mixin input-container-base {\n  position: relative;\n}\n\n@mixin input-base {\n  border: none;\n  border-radius: 8px;\n  font-family: var(--font-stack);\n  outline: none;\n  padding-bottom: 15px;\n  padding-top: 15px;\n\n  &::placeholder {\n    font-family: var(--font-stack);\n    font-size: 16px;\n  }\n}\n\n@mixin input-base-light {\n  @include input-base;\n  background-color: $light-input-background-color;\n  color: $light-input-label-color;\n\n  &::placeholder {\n    color: $light-input-placeholder-color;\n  }\n\n  &:focus {\n    outline: 2px solid $light-input-outline-focus;\n  }\n}\n\n@mixin input-base-dark {\n  @include input-base;\n  background-color: $dark-input-background-color;\n  color: $dark-input-label-color;\n\n  &::placeholder {\n    color: $dark-input-placeholder-color;\n  }\n\n  &:focus {\n    outline: 2px solid $dark-input-outline-focus;\n  }\n}\n\n@mixin input-error-base-light {\n  @include input-base-light;\n  outline: 2px solid $light-input-error-outline;\n\n  &:focus-visible {\n    outline: 2px solid $light-input-error-outline,\n  }\n}\n\n@mixin input-error-base-dark {\n  @include input-base-dark;\n  outline: 2px solid $dark-input-error-outline;\n\n  &:focus-visible {\n    outline: 2px solid $dark-input-error-outline;\n  }\n}\n\n.inputContainerLTR {\n  @include input-container-base;\n}\n\n.inputContainerRTL {\n  @include input-container-base;\n  margin-left: 8px;\n}\n\n@mixin align-LTR {\n  margin-right: 8px;\n  padding-left: 36px;\n  padding-right: 16px;\n}\n\n.inputLightLTR {\n  @include input-base-light;\n  @include align-LTR;\n}\n\n.inputDarkLTR {\n  @include input-base-dark;\n  @include align-LTR;\n}\n\n.inputErrorLightLTR {\n  @include input-error-base-light;\n  @include align-LTR;\n}\n\n.inputErrorDarkLTR {\n  @include input-error-base-dark;\n  @include align-LTR;\n}\n\n@mixin align-RTL {\n  margin-left: 8px;\n  padding-left: 16px;\n  padding-right: 36px;\n  text-align: right;\n}\n\n.inputLightRTL {\n  @include input-base-light;\n  @include align-RTL;\n}\n\n.inputDarkRTL {\n  @include input-base-dark;\n  @include align-RTL;\n}\n\n.inputErrorLightRTL {\n  @include input-error-base-light;\n  @include align-RTL;\n}\n\n.inputErrorDarkRTL {\n  @include input-error-base-dark;\n  @include align-RTL;\n}\n","import {\n  Component,\n  h,\n  Prop,\n  State,\n  Event,\n  Fragment,\n  type EventEmitter,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\nexport interface ScInputCustomEvent<T> extends CustomEvent<T> {\n  detail: T;\n  target: HTMLScInputElement;\n}\n\n@Component({\n  tag: 'sc-input',\n  styleUrl: 'sc-input.module.scss',\n  shadow: true,\n})\nexport class ScInput {\n  @Prop() error = false;\n  @Prop() formClassName = '';\n  @Prop() inputCaptionClassName = '';\n  @Prop() inputCaptionValue = '';\n  @Prop() inputClassName = '';\n  @Prop() placeholderValue = 'Enter Search';\n  @Prop() rightToLeftOrientation = false;\n  @Prop() query = '';\n\n  @Event() searchInputChange: EventEmitter<string>;\n  @Event() clearInput: EventEmitter<void>;\n\n  @State() theme = 'light';\n\n  private get isLightTheme() {\n    return this.theme === 'light';\n  }\n\n  handleInputChange(event: Event) {\n    const input = event.target as HTMLInputElement;\n    this.searchInputChange.emit(input.value);\n  }\n\n  handleClearInput() {\n    if (this.clearInput) {\n      this.clearInput.emit();\n    }\n  }\n\n  render() {\n    const containerClassName = this.rightToLeftOrientation\n      ? 'inputContainerRTL'\n      : 'inputContainerLTR';\n\n    const inputClassName = classNames(\n      this.error\n        ? this.isLightTheme\n          ? 'inputErrorLightRTL'\n          : 'inputErrorDarkRTL'\n        : this.isLightTheme\n          ? 'inputLightLTR'\n          : 'inputDarkLTR',\n      'searchcraft-input',\n    );\n\n    return (\n      <div\n        class={classNames(\n          containerClassName,\n          this.formClassName,\n          'searchcraft-input-form',\n        )}\n      >\n        {this.rightToLeftOrientation ? (\n          <Fragment>\n            <input\n              class={classNames(\n                this.error\n                  ? this.isLightTheme\n                    ? 'inputErrorLightRTL'\n                    : 'inputErrorDarkRTL'\n                  : this.isLightTheme\n                    ? 'inputLightRTL'\n                    : 'inputDarkRTL',\n                inputClassName,\n                'searchcraft-input',\n              )}\n              id='searchcraft-input-id'\n              onChange={this.handleInputChange.bind(this)}\n              placeholder={this.placeholderValue}\n              type='text'\n              value={this.query}\n            />\n            {this.inputCaptionValue && (\n              <sc-input-caption\n                inputCaptionClassName={this.inputCaptionClassName}\n                inputCaptionValue={this.inputCaptionValue}\n                rightToLeftOrientation={this.rightToLeftOrientation}\n              />\n            )}\n            {this.query.length > 0 && (\n              <sc-clear-input-button\n                onClearInput={this.handleClearInput}\n                rightToLeftOrientation={this.rightToLeftOrientation}\n              />\n            )}\n            <sc-input-icon\n              error={this.error}\n              rightToLeftOrientation={this.rightToLeftOrientation}\n            />\n          </Fragment>\n        ) : (\n          <Fragment>\n            <input\n              class={classNames(\n                this.error\n                  ? this.isLightTheme\n                    ? 'inputErrorLightLTR'\n                    : 'inputErrorDarkLTR'\n                  : this.isLightTheme\n                    ? 'inputLightLTR'\n                    : 'inputDarkLTR',\n                inputClassName,\n                'searchcraft-input',\n              )}\n              id='searchcraft-input-id'\n              onChange={this.handleInputChange.bind(this)}\n              placeholder={this.placeholderValue}\n              type='text'\n              value={this.query}\n            />\n            {this.inputCaptionValue && (\n              <sc-input-caption\n                inputCaptionClassName={this.inputCaptionClassName}\n                inputCaptionValue={this.inputCaptionValue}\n                rightToLeftOrientation={this.rightToLeftOrientation}\n              />\n            )}\n            {this.query.length > 0 && (\n              <sc-clear-input-button\n                onClearInput={this.handleClearInput}\n                rightToLeftOrientation={this.rightToLeftOrientation}\n              />\n            )}\n          </Fragment>\n        )}\n      </div>\n    );\n  }\n}\n","@import '../../utils/theme';\n\n:root {\n  --font-stack: Helvetica, Arial, sans-serif;\n}\n\n@mixin input-caption-base {\n  font-family: var(--font-stack);\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 16px;\n  margin-top: 4px;\n}\n\n@mixin input-caption-base-light {\n  @include input-caption-base;\n  color: $light-input-caption-color;\n}\n\n@mixin input-caption-base-dark {\n  @include input-caption-base;\n  color: $dark-input-caption-color;\n}\n\n.inputCaptionLightLTR {\n  @include input-caption-base-light;\n}\n\n.inputCaptionDarkLTR {\n  @include input-caption-base-dark;\n}\n\n.inputCaptionErrorLightLTR {\n  @include input-caption-base;\n  color: $light-input-caption-color-error;\n}\n\n.inputCaptionErrorDarkLTR {\n  @include input-caption-base;\n  color: $dark-input-caption-color-error;\n}\n\n.inputCaptionLightRTL {\n  @include input-caption-base-light;\n  text-align: right;\n}\n\n.inputCaptionDarkRTL {\n  @include input-caption-base-dark;\n  text-align: right;\n}\n\n.inputCaptionErrorLightRTL {\n  @include input-caption-base;\n  color: $light-input-caption-color-error;\n  text-align: right;\n}\n\n.inputCaptionErrorDarkRTL {\n  @include input-caption-base;\n  color: $dark-input-caption-color-error;\n  text-align: right;\n}","import { Component, Prop, h, State } from '@stencil/core';\nimport classNames from 'classnames';\n\n@Component({\n  tag: 'sc-input-caption',\n  styleUrl: 'sc-input-caption.module.scss',\n  shadow: true,\n})\nexport class ScInputCaption {\n  @Prop() error?: boolean;\n  @Prop() inputCaptionClassName? = '';\n  @Prop() inputCaptionValue = 'Enter Search';\n  @Prop() rightToLeftOrientation = false;\n  @State() theme = 'light';\n\n  private isLightTheme() {\n    return this.theme === 'light';\n  }\n\n  render() {\n    return this.rightToLeftOrientation ? (\n      <p\n        class={classNames(\n          this.error\n            ? this.isLightTheme\n              ? 'inputCaptionErrorLightRTL'\n              : 'inputCaptionErrorDarkRTL'\n            : this.isLightTheme\n              ? 'inputCaptionLightRTL'\n              : 'inputCaptionDarkRTL',\n          this.inputCaptionClassName,\n          '.searchcraft-input-caption',\n        )}\n      >\n        {this.inputCaptionValue}\n      </p>\n    ) : (\n      <p\n        class={classNames(\n          this.error\n            ? this.isLightTheme\n              ? 'inputCaptionErrorLightLTR'\n              : 'inputCaptionErrorDarkLTR'\n            : this.isLightTheme\n              ? 'inputCaptionLightLTR'\n              : 'inputCaptionDarkLTR',\n          this.inputCaptionClassName,\n          '.searchcraft-input-caption',\n        )}\n      >\n        {this.inputCaptionValue}\n      </p>\n    );\n  }\n}\n","import { h } from '@stencil/core';\n\nexport const SearchIconLight = () => (\n  <svg width='20' height='20' viewBox='0 0 20 20' fill='none'>\n    <title>Searchcraft Search Icon Light</title>\n    <path\n      d='M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z'\n      stroke='#404040'\n      stroke-width='1.5'\n      stroke-linecap='round'\n      stroke-linejoin='round'\n    />\n  </svg>\n);\n\nexport const SearchIconDark = () => (\n  <svg\n    width='18'\n    height='18'\n    viewBox='0 0 18 18'\n    fill='none'\n    xmlns='http://www.w3.org/2000/svg'\n  >\n    <title>Searchcraft Search Icon Dark</title>\n    <path\n      d='M16.5 16.5L12.875 12.875M14.8333 8.16667C14.8333 11.8486 11.8486 14.8333 8.16667 14.8333C4.48477 14.8333 1.5 11.8486 1.5 8.16667C1.5 4.48477 4.48477 1.5 8.16667 1.5C11.8486 1.5 14.8333 4.48477 14.8333 8.16667Z'\n      stroke='#E6E6E6'\n      stroke-width='1.5'\n      stroke-linecap='round'\n      stroke-linejoin='round'\n    />\n  </svg>\n);\n\nexport const SearchIconLightError = () => (\n  <svg width='20' height='20' viewBox='0 0 20 20' fill='none'>\n    <title>Searchcraft Error Search Icon Light</title>\n    <path\n      d='M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z'\n      stroke='#737373'\n      stroke-width='1.5'\n      stroke-linecap='round'\n      stroke-linejoin='round'\n    />\n  </svg>\n);\n\nexport const SearchIconDarkError = () => (\n  <svg\n    width='18'\n    height='18'\n    viewBox='0 0 18 18'\n    fill='none'\n    xmlns='http://www.w3.org/2000/svg'\n  >\n    <title>Searchcraft Error Search Icon Dark</title>\n    <path\n      d='M16.5 16.5L12.875 12.875M14.8333 8.16667C14.8333 11.8486 11.8486 14.8333 8.16667 14.8333C4.48477 14.8333 1.5 11.8486 1.5 8.16667C1.5 4.48477 4.48477 1.5 8.16667 1.5C11.8486 1.5 14.8333 4.48477 14.8333 8.16667Z'\n      stroke='#BFBFBF'\n      stroke-width='1.5'\n      stroke-linecap='round'\n      stroke-linejoin='round'\n    />\n  </svg>\n);\n",":root {\n  --font-stack: Helvetica, Arial, sans-serif;\n}\n\n.inputIconLTR {\n  height: 20px;\n  left: 10px;\n  position: absolute;\n  top: 11px;\n  width: 20px;\n}\n\n.inputIconRTL {\n  height: 20px;\n  position: absolute;\n  right: 10px;\n  top: 11px;\n  width: 20px;\n}","import { Component, Prop, h, State } from '@stencil/core';\n\nimport {\n  SearchIconLight,\n  SearchIconDark,\n  SearchIconLightError,\n  SearchIconDarkError,\n} from '@assets/SearchIcons';\n\n@Component({\n  tag: 'sc-input-icon',\n  styleUrl: 'sc-input-icon.module.scss',\n  shadow: true,\n})\nexport class ScInputIcon {\n  @Prop() error?: boolean;\n  @Prop() rightToLeftOrientation = false;\n  @State() theme = 'light';\n\n  private isLightTheme() {\n    return this.theme === 'light';\n  }\n\n  render() {\n    return this.error ? (\n      <div\n        class={this.rightToLeftOrientation ? 'inputIconRTL' : 'inputIconLTR'}\n      >\n        {this.isLightTheme ? <SearchIconLightError /> : <SearchIconDarkError />}\n      </div>\n    ) : (\n      <div\n        class={this.rightToLeftOrientation ? 'inputIconRTL' : 'inputIconLTR'}\n      >\n        {this.isLightTheme ? <SearchIconLight /> : <SearchIconDark />}\n      </div>\n    );\n  }\n}\n","@import '../../utils/theme';\n\n:root {\n  --font-stack: Helvetica, Arial, sans-serif;\n}\n\n@mixin input-label-base {\n  font-family: var(--font-stack);\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 16px;\n  margin-top: 4px;\n}\n\n.labelLight {\n  @include input-label-base;\n  color: $light-input-label-color;\n}\n\n.labelDark {\n  @include input-label-base;\n  color: $dark-input-label-color;\n}","import { Component, Prop, h, State } from '@stencil/core';\nimport classNames from 'classnames';\n\n@Component({\n  tag: 'sc-input-label',\n  styleUrl: 'sc-input-label.module.scss',\n  shadow: true,\n})\nexport class ScInputLabel {\n  @Prop() inputLabelClassName? = '';\n  @Prop() label = 'Enter Search';\n  @State() theme = 'light';\n\n  private isLightTheme() {\n    return this.theme === 'light';\n  }\n\n  render() {\n    const labelStyle = this.isLightTheme ? 'labelLight' : 'labelDark';\n    return (\n      <label\n        class={classNames(labelStyle, this.inputLabelClassName)}\n        htmlFor='searchcraft-input-id'\n      >\n        {this.label}\n      </label>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/searchcraft-javascript-sdk/p-c632f66c.entry.js

@@ -1,2 +0,0 @@
-export{S as sc_spinner_light}from"./p-94c68cce.js";import"./p-8e9ba2cf.js";
-//# sourceMappingURL=p-c632f66c.entry.js.map

package/dist/searchcraft-javascript-sdk/p-c632f66c.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sources":[],"mappings":"","ignoreList":[]}

package/dist/searchcraft-javascript-sdk/p-f7dbb9a8.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as s,h as i}from"./p-8e9ba2cf.js";import{g as e,u as h}from"./p-6f0eaec6.js";const a=":root{--font-stack:Helvetica, Arial, sans-serif}.formLTR{text-align:left}.formRTL{text-align:right}.searchContainer{align-items:center;display:flex}";const c=a;const r=class{constructor(i){t(this,i);this.querySubmit=s(this,"querySubmit",7);this.debounceTimeout=null;this.debounceDelay=300;this.componentDidLoad=()=>{const t=new e(this.config);this.searchStore.initialize(t,true)};this.searchStore=h.getState();this.handleInputChange=t=>{console.log(t);this.query=t.detail;if(this.debounceTimeout){clearTimeout(this.debounceTimeout)}this.querySubmit.emit(this.query);this.debounceTimeout=setTimeout((()=>{this.runSearch()}),this.debounceDelay)};this.handleClearInput=()=>{this.query="";if(typeof this.clearInput==="function"){this.clearInput()}if(this.debounceTimeout){clearTimeout(this.debounceTimeout)}this.error=false;this.searchResults=""};this.runSearch=async()=>{if(this.query.trim()===""){this.error=true;this.searchResults=""}else{this.error=false;this.searchStore.setQuery(this.query);await this.searchStore.search();this.searchResults=JSON.stringify(this.searchStore.searchResults)}};this.handleFormSubmit=async t=>{t.preventDefault();await this.runSearch()};this.autoSearchFormClass="";this.clearInput=()=>{};this.config={apiKey:"",endpointURL:"",index:[]};this.inputCaptionValue="";this.labelForInput="Search";this.placeholderValue="Search here";this.rightToLeftOrientation=false;this.searchContainerClass="";this.error=false;this.query="";this.searchResults=""}render(){const t=this.rightToLeftOrientation?"formRTL":"formLTR";return i("form",{key:"9c467f62b6464d5976a6cdbb17071777829fcd65",class:`${t}`,onSubmit:this.handleFormSubmit},i("label",{key:"0740487a130c5427a2e7c7c7bf9b112fdd2038f7"},this.labelForInput),i("div",{key:"1b1816b4c1fa472f1227110d480fc3014782383b",class:"searchContainer"},i("sc-input",{key:"2e8bd731c91b75db17f0c177c4e57e04268cb0dd","placeholder-value":this.placeholderValue,query:this.query,"input-caption-value":this.inputCaptionValue,"right-to-left-orientation":this.rightToLeftOrientation,onSearchInputChange:this.handleInputChange,onClearInput:this.handleClearInput})),this.error&&i("p",{key:"82aa93fa1e009d49adf7ba4e6568298686b9b3ec",class:"error"},"Please enter a search query."),this.searchResults&&i("pre",{key:"3c7e024e7d961418d2330d1ce9d117e2a7f24051",class:"results"},this.searchResults))}};r.style=c;export{r as sc_auto_search_form};
-//# sourceMappingURL=p-f7dbb9a8.entry.js.map

package/dist/searchcraft-javascript-sdk/p-f7dbb9a8.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["scAutoSearchFormModuleCss","ScAutoSearchFormStyle0","ScAutoSearchForm","this","debounceTimeout","debounceDelay","componentDidLoad","searchcraft","SearchcraftCore","config","searchStore","initialize","useSearchcraftStore","getState","handleInputChange","event","console","log","query","detail","clearTimeout","querySubmit","emit","setTimeout","runSearch","handleClearInput","clearInput","error","searchResults","async","trim","setQuery","search","JSON","stringify","handleFormSubmit","preventDefault","apiKey","endpointURL","index","render","formClass","rightToLeftOrientation","h","key","class","onSubmit","labelForInput","placeholderValue","inputCaptionValue","onSearchInputChange","onClearInput"],"sources":["src/components/sc-auto-search-form/sc-auto-search-form.module.scss?tag=sc-auto-search-form&encapsulation=shadow","src/components/sc-auto-search-form/sc-auto-search-form.tsx"],"sourcesContent":[":root {\n  --font-stack: Helvetica, Arial, sans-serif;\n}\n\n.formLTR {\n  text-align: left;\n}\n\n.formRTL {\n  text-align: right;\n}\n\n.searchContainer {\n  align-items: center;\n  display: flex;\n}","import {\n  Component,\n  Prop,\n  State,\n  Event,\n  type EventEmitter,\n  h,\n} from '@stencil/core';\nimport {\n  type CoreConfigSDK,\n  CoreSDK as SearchcraftCore,\n} from '@searchcraft/core';\n\nimport type { ScInputCustomEvent } from '@components/sc-input/sc-input';\nimport { useSearchcraftStore } from '@provider/store';\n\n@Component({\n  tag: 'sc-auto-search-form',\n  styleUrl: 'sc-auto-search-form.module.scss',\n  shadow: true,\n})\nexport class ScAutoSearchForm {\n  @Prop() autoSearchFormClass = '';\n  @Prop() clearInput: () => void = () => {}; // Default assignment ensures no undefined error\n  @Prop() config: CoreConfigSDK = {\n    apiKey: '',\n    endpointURL: '',\n    index: [],\n  };\n  @Prop() inputCaptionValue = '';\n  @Prop() labelForInput = 'Search';\n  @Prop() placeholderValue = 'Search here';\n  @Prop() rightToLeftOrientation = false;\n  @Prop() searchContainerClass = '';\n\n  /**\n   * Event emitted when the search query changes\n   */\n  @Event() querySubmit: EventEmitter<string>;\n\n  @State() error = false;\n  @State() query = '';\n  @State() searchResults = '';\n\n  private debounceTimeout: ReturnType<typeof setTimeout> | null = null;\n  private debounceDelay = 300; // 300ms debounce delay\n\n  componentDidLoad = () => {\n    const searchcraft = new SearchcraftCore(this.config);\n    this.searchStore.initialize(searchcraft, true);\n  };\n\n  // Initialize searchStore as a private field\n  private searchStore = useSearchcraftStore.getState();\n\n  /**\n   * Handles the input change event from sc-input\n   */\n  handleInputChange = (event: ScInputCustomEvent<string>) => {\n    console.log(event);\n    this.query = event.detail; // Update the query state with input value\n\n    if (this.debounceTimeout) {\n      clearTimeout(this.debounceTimeout); // Clear any existing timeout\n    }\n\n    // Emit querySubmit immediately for real-time updates\n    this.querySubmit.emit(this.query);\n\n    // Set a new debounce timeout to execute search after delay\n    this.debounceTimeout = setTimeout(() => {\n      this.runSearch(); // Execute search logic after typing stops\n    }, this.debounceDelay);\n  };\n\n  /**\n   * Handles the clear input event from sc-input\n   */\n  handleClearInput = () => {\n    this.query = '';\n    if (typeof this.clearInput === 'function') {\n      this.clearInput();\n    }\n\n    if (this.debounceTimeout) {\n      clearTimeout(this.debounceTimeout); // Clear the debounce timeout\n    }\n\n    // Reset error and search results\n    this.error = false;\n    this.searchResults = '';\n  };\n\n  /**\n   * Runs the search logic\n   */\n  private runSearch = async () => {\n    if (this.query.trim() === '') {\n      this.error = true;\n      this.searchResults = '';\n    } else {\n      this.error = false;\n      this.searchStore.setQuery(this.query); // Set the query in the searchStore\n      await this.searchStore.search(); // Perform the search\n      this.searchResults = JSON.stringify(this.searchStore.searchResults); // Store search results as JSON\n    }\n  };\n\n  /**\n   * Handles the form submission logic\n   */\n  handleFormSubmit = async (event: Event) => {\n    event.preventDefault();\n    await this.runSearch(); // Trigger search logic on form submit\n  };\n\n  render() {\n    const formClass = this.rightToLeftOrientation ? 'formRTL' : 'formLTR';\n\n    return (\n      <form class={`${formClass}`} onSubmit={this.handleFormSubmit}>\n        <label>{this.labelForInput}</label>\n        <div class='searchContainer'>\n          <sc-input\n            placeholder-value={this.placeholderValue}\n            query={this.query}\n            input-caption-value={this.inputCaptionValue}\n            right-to-left-orientation={this.rightToLeftOrientation}\n            onSearchInputChange={this.handleInputChange}\n            onClearInput={this.handleClearInput}\n          />\n        </div>\n        {this.error && <p class='error'>Please enter a search query.</p>}\n        {this.searchResults && <pre class='results'>{this.searchResults}</pre>}\n      </form>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAA4B,uJAClC,MAAAC,EAAeD,E,MCoBFE,EAAgB,M,kEAuBnBC,KAAAC,gBAAwD,KACxDD,KAAAE,cAAgB,IAExBF,KAAAG,iBAAmB,KACjB,MAAMC,EAAc,IAAIC,EAAgBL,KAAKM,QAC7CN,KAAKO,YAAYC,WAAWJ,EAAa,KAAK,EAIxCJ,KAAAO,YAAcE,EAAoBC,WAK1CV,KAAAW,kBAAqBC,IACnBC,QAAQC,IAAIF,GACZZ,KAAKe,MAAQH,EAAMI,OAEnB,GAAIhB,KAAKC,gBAAiB,CACxBgB,aAAajB,KAAKC,gB,CAIpBD,KAAKkB,YAAYC,KAAKnB,KAAKe,OAG3Bf,KAAKC,gBAAkBmB,YAAW,KAChCpB,KAAKqB,WAAW,GACfrB,KAAKE,cAAc,EAMxBF,KAAAsB,iBAAmB,KACjBtB,KAAKe,MAAQ,GACb,UAAWf,KAAKuB,aAAe,WAAY,CACzCvB,KAAKuB,Y,CAGP,GAAIvB,KAAKC,gBAAiB,CACxBgB,aAAajB,KAAKC,gB,CAIpBD,KAAKwB,MAAQ,MACbxB,KAAKyB,cAAgB,EAAE,EAMjBzB,KAAAqB,UAAYK,UAClB,GAAI1B,KAAKe,MAAMY,SAAW,GAAI,CAC5B3B,KAAKwB,MAAQ,KACbxB,KAAKyB,cAAgB,E,KAChB,CACLzB,KAAKwB,MAAQ,MACbxB,KAAKO,YAAYqB,SAAS5B,KAAKe,aACzBf,KAAKO,YAAYsB,SACvB7B,KAAKyB,cAAgBK,KAAKC,UAAU/B,KAAKO,YAAYkB,c,GAOzDzB,KAAAgC,iBAAmBN,MAAOd,IACxBA,EAAMqB,uBACAjC,KAAKqB,WAAW,E,yBA3FM,G,gBACG,O,YACD,CAC9Ba,OAAQ,GACRC,YAAa,GACbC,MAAO,I,uBAEmB,G,mBACJ,S,sBACG,c,4BACM,M,0BACF,G,WAOd,M,WACA,G,mBACQ,E,CA0EzB,MAAAC,GACE,MAAMC,EAAYtC,KAAKuC,uBAAyB,UAAY,UAE5D,OACEC,EAAA,QAAAC,IAAA,2CAAMC,MAAO,GAAGJ,IAAaK,SAAU3C,KAAKgC,kBAC1CQ,EAAA,SAAAC,IAAA,4CAAQzC,KAAK4C,eACbJ,EAAA,OAAAC,IAAA,2CAAKC,MAAM,mBACTF,EAAA,YAAAC,IAAA,+DACqBzC,KAAK6C,iBACxB9B,MAAOf,KAAKe,MAAK,sBACIf,KAAK8C,kBAAiB,4BAChB9C,KAAKuC,uBAChCQ,oBAAqB/C,KAAKW,kBAC1BqC,aAAchD,KAAKsB,oBAGtBtB,KAAKwB,OAASgB,EAAA,KAAAC,IAAA,2CAAGC,MAAM,SAAO,gCAC9B1C,KAAKyB,eAAiBe,EAAA,OAAAC,IAAA,2CAAKC,MAAM,WAAW1C,KAAKyB,e","ignoreList":[]}

package/dist/types/assets/ButtonIcons.d.ts

@@ -1 +0,0 @@
-export declare const ButtonIcon: () => any;

package/dist/types/assets/ClearInputIcon.d.ts

@@ -1,4 +0,0 @@
-export declare const ClearInputIconLight: () => any;
-export declare const ClearInputIconDark: () => any;
-export declare const ArrowRightIconLight: () => any;
-export declare const ArrowRightIconDark: () => any;

package/dist/types/assets/SearchIcons.d.ts

@@ -1,4 +0,0 @@
-export declare const SearchIconLight: () => any;
-export declare const SearchIconDark: () => any;
-export declare const SearchIconLightError: () => any;
-export declare const SearchIconDarkError: () => any;

package/dist/types/components/sc-base-search-result/sc-base-search-result.d.ts

@@ -1,16 +0,0 @@
-export declare class ScBaseSearchResult {
-    buttonCallbackFn: () => void;
-    buttonLabel: string;
-    callbackFn: () => void;
-    imageAltText: string;
-    imageSrc: string;
-    interactiveResult: boolean;
-    keyDownCallbackFn: () => void;
-    resultBodyContent: string;
-    resultHeading: string;
-    resultSubheading: string;
-    theme: 'light' | 'dark';
-    private handleButtonClick;
-    private handleContainerClick;
-    render(): any;
-}

package/dist/types/components/sc-base-search-results/sc-base-search-results.d.ts

@@ -1,9 +0,0 @@
-import type { SearchResult } from '@searchcraft/core';
-export declare class ScBaseSearchResults {
-    query: string;
-    searchResults: SearchResult | null;
-    private unsubscribe;
-    componentDidLoad(): void;
-    disconnectedCallback(): void;
-    render(): any;
-}

package/dist/types/components/sc-spinner-dark/sc-spinner-dark.d.ts

@@ -1,3 +0,0 @@
-export declare class ScSpinnerDark {
-    render(): any;
-}

package/dist/types/components/sc-spinner-light/sc-spinner-light.d.ts

@@ -1,3 +0,0 @@
-export declare class ScSpinnerLight {
-    render(): any;
-}