import{LitElement as t,html as e,css as r}from"../../../lit/index.js";import{autorun as s,toJS as a}from"../../../mobx/dist/mobx.esm.js";import{store as o}from"../../haxcms-elements/lib/core/haxcms-site-store.js";class BootstrapSearch extends t{constructor(){super();let t=this.getBasePath(decodeURIComponent(import.meta.url));this._bootstrapPath=t+"bootstrap/dist/css/bootstrap.min.css",this.searchText=""}static get tag(){return"bootstrap-search"}static get properties(){return{colorTheme:{type:String,reflect:!0,attribute:"color-theme"},searchText:{type:String}}}static get styles(){return[r`
        :host {
          float: right;
        }
        input {
          max-width: var(--bootstrap-search-max-width, 300px);
          width: var(--bootstrap-search-width, 300px);
        }
      `]}render(){return e`
      <link rel="stylesheet" href="${this._bootstrapPath}" />
      <form class="d-flex">
        <input
          class="form-control me-2"
          type="search"
          placeholder="Type to search"
          aria-label="Search"
          @input=${this.inputChanged}
        />
      </form>
    `}inputChanged(t){this.searchText=t.target.value,this.dispatchEvent(new CustomEvent("search-changed",{bubbles:!0,composed:!0,detail:this}))}getBasePath(t){return t.substring(0,t.lastIndexOf("/@haxtheweb/")+1)}}customElements.define(BootstrapSearch.tag,BootstrapSearch);export{BootstrapSearch};