route-search-component/dist/route-search-component.cjs

A lightweight, framework-agnostic web component for searchable route navigation with keyboard shortcuts

'use strict';Object.defineProperty(exports,'__esModule',{value:true});var o=class extends HTMLElement{constructor(){super();this.routes=[];this.isOpen=false;this.filteredRoutes=[];this.selectedIndex=-1;this.searchQuery="";this.config={};this.baseUrl=window.location.origin,this.handleKeydown=this.handleKeydown.bind(this),this.handleClickOutside=this.handleClickOutside.bind(this),this.filterRoutes=this.filterRoutes.bind(this),this.navigateToRoute=this.navigateToRoute.bind(this),this.render=this.render.bind(this),this.attachShadow({mode:"open"});}static get observedAttributes(){return ["routes","config"]}connectedCallback(){let e=this.getAttribute("routes");if(e)try{this.routes=JSON.parse(e),this.filteredRoutes=[...this.routes];}catch(t){console.error("Invalid routes data:",t),this.routes=[],this.filteredRoutes=[];}let s=this.getAttribute("config");if(s)try{this.config=JSON.parse(s),this.config.baseUrl&&(this.baseUrl=this.config.baseUrl);}catch(t){console.error("Invalid config data:",t);}this.render(),this.attachEventListeners();}disconnectedCallback(){this.removeEventListeners();}attributeChangedCallback(e,s,t){if(e==="routes"&&s!==t&&t)try{this.routes=JSON.parse(t),this.filteredRoutes=[...this.routes];}catch(i){console.error("Invalid routes data:",i),this.routes=[],this.filteredRoutes=[];}if(e==="config"&&s!==t&&t)try{this.config=JSON.parse(t),this.config.baseUrl&&(this.baseUrl=this.config.baseUrl);}catch(i){console.error("Invalid config data:",i);}}attachEventListeners(){document.addEventListener("keydown",this.handleKeydown),document.addEventListener("click",this.handleClickOutside);}removeEventListeners(){document.removeEventListener("keydown",this.handleKeydown),document.removeEventListener("click",this.handleClickOutside);}handleKeydown(e){if((e.metaKey||e.ctrlKey)&&e.code==="KeyK"&&(e.preventDefault(),this.toggleDialog()),!!this.isOpen)switch(e.code){case "Escape":this.closeDialog();break;case "ArrowDown":e.preventDefault(),this.selectNext();break;case "ArrowUp":e.preventDefault(),this.selectPrevious();break;case "Enter":e.preventDefault(),this.selectedIndex>=0&&this.filteredRoutes[this.selectedIndex]&&this.navigateToRoute(this.filteredRoutes[this.selectedIndex]);break}}handleClickOutside(e){var s;this.isOpen&&!((s=this.shadowRoot)!=null&&s.contains(e.target))&&this.closeDialog();}toggleDialog(){this.isOpen?this.closeDialog():this.openDialog();}openDialog(){this.isOpen=true,this.selectedIndex=-1,this.searchQuery="",this.filteredRoutes=[...this.routes],this.render(),setTimeout(()=>{this.focusSearchInput();},100);}closeDialog(){this.isOpen=false,this.selectedIndex=-1,this.filteredRoutes=[],this.searchQuery="",this.render();}focusSearchInput(){var s;let e=(s=this.shadowRoot)==null?void 0:s.querySelector(".search-input");e&&e.focus();}selectNext(){this.filteredRoutes.length!==0&&(this.selectedIndex=(this.selectedIndex+1)%this.filteredRoutes.length,this.updateSelectionHighlight());}selectPrevious(){this.filteredRoutes.length!==0&&(this.selectedIndex=this.selectedIndex<=0?this.filteredRoutes.length-1:this.selectedIndex-1,this.updateSelectionHighlight());}filterRoutes(e){let t=e.target.value;this.searchQuery=t,t.trim()?this.filteredRoutes=this.routes.filter(i=>i.label.toLowerCase().includes(t.toLowerCase())||i.path.toLowerCase().includes(t.toLowerCase())):this.filteredRoutes=[...this.routes],this.selectedIndex=-1,this.updateResultsOnly(),this.updateSelectionHighlight();}updateSelectionHighlight(){var s;let e=(s=this.shadowRoot)==null?void 0:s.querySelectorAll(".route-item");e&&e.forEach((t,i)=>{i===this.selectedIndex?t.classList.add("selected"):t.classList.remove("selected");});}navigateToRoute(e){let s=`${this.baseUrl}/${e.path}`;window.location.href=s,this.closeDialog();}updateResultsOnly(){var t,i;let e=(t=this.shadowRoot)==null?void 0:t.querySelector(".route-search-results");e&&(e.innerHTML=this.filteredRoutes.length===0?'<div class="no-results">No routes found</div>':this.filteredRoutes.map((r,a)=>`
          <div class="route-item ${a===this.selectedIndex?"selected":""}" 
               data-index="${a}">
            <div class="route-label">${r.label}</div>
            <div class="route-path">${r.path}</div>
          </div>
        `).join(""),this.attachResultsEventListeners());let s=(i=this.shadowRoot)==null?void 0:i.querySelector(".search-input");s&&(s.value=this.searchQuery);}attachResultsEventListeners(){var s;let e=(s=this.shadowRoot)==null?void 0:s.querySelectorAll(".route-item");e&&e.forEach((t,i)=>{t.addEventListener("click",r=>{r.stopPropagation(),this.navigateToRoute(this.filteredRoutes[i]);});});}render(){let s=`
      <style>${`
      .route-search-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: ${this.isOpen?"flex":"none"};
        align-items: flex-start;
        justify-content: center;
        z-index: 10000;
        padding-top: 100px;
      }

      .route-search-dialog {
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        width: 90%;
        max-width: 600px;
        max-height: 500px;
        overflow: hidden;
        animation: slideDown 0.2s ease-out;
        border: 1px solid #e5e7eb;
      }

      @keyframes slideDown {
        from {
          opacity: 0;
          transform: translateY(-20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .route-search-header {
        padding: 24px 24px 20px;
        border-bottom: 1px solid #f3f4f6;
        background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
      }

      .route-search-title {
        font-size: 20px;
        font-weight: 700;
        color: #1f2937;
        margin: 0 0 8px 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      }

      .route-search-subtitle {
        font-size: 14px;
        color: #6b7280;
        margin: 0;
        line-height: 1.5;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      }

      .route-search-input-container {
        padding: 20px 24px;
        position: relative;
        background: #ffffff;
      }

      .search-input {
        width: 100%;
        padding: 14px 16px;
        padding-right: 96px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        font-size: 16px;
        outline: none;
        transition: all 0.2s ease;
        box-sizing: border-box;
        background: #ffffff;
        color: #1f2937;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      }

      .search-input:focus {
        border-color: #7B42F6;
        box-shadow: 0 0 0 3px rgba(123, 66, 246, 0.1);
      }

      .search-input::placeholder {
        color: #9ca3af;
      }

      .route-search-results {
        max-height: 300px;
        overflow-y: auto;
        background: #ffffff;
      }

      .route-item {
        padding: 16px 24px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        transition: all 0.2s ease;
        border-bottom: 1px solid #f3f4f6;
        margin: 0 8px;
        border-radius: 8px;
        margin-bottom: 4px;
      }

      .route-item:hover {
        background-color: #f8fafc;
        transform: translateX(4px);
      }

      .route-item.selected {
        background-color: #f0e6ff;
        border-left: 3px solid #7B42F6;
      }

      .route-item.selected .route-label {
        color: #7B42F6;
      }

      .route-item.selected .route-path {
        color: #7B42F6;
      }

      .route-label {
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 6px;
        font-size: 15px;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      }

      .route-path {
        font-size: 13px;
        color: #6b7280;
        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
        background: #f8fafc;
        padding: 4px 8px;
        border-radius: 4px;
        display: inline-block;
        width: fit-content;
      }

      .no-results {
        padding: 32px 24px;
        text-align: center;
        color: #6b7280;
        font-style: italic;
        background: #fafafa;
        margin: 8px;
        border-radius: 8px;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      }

      .shortcut-hint {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        background: #f3f4f6;
        padding: 6px 10px;
        border-radius: 6px;
        font-size: 12px;
        color: #6b7280;
        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
        font-weight: 500;
        border: 1px solid #e5e7eb;
        pointer-events: none;
        max-width: 64px;
        white-space: nowrap;
      }

      @media (max-width: 480px) {
        .shortcut-hint { display: none; }
      }

      .route-search-results::-webkit-scrollbar {
        width: 6px;
      }

      .route-search-results::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 3px;
      }

      .route-search-results::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 3px;
      }

      .route-search-results::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
      }
    `}</style>
      <div class="route-search-overlay">
        <div class="route-search-dialog">
          <div class="route-search-header">
            <h3 class="route-search-title">${this.config.title||"\u{1F680} Quick Navigation"}</h3>
            <p class="route-search-subtitle">${this.config.subtitle||"Search and jump to any route in your application"}</p>
          </div>
          
          <div class="route-search-input-container">
            <input 
              type="text" 
              class="search-input" 
              placeholder="${this.config.placeholder||"Type to search routes..."}"
              value="${this.searchQuery}"
            >
            <div class="shortcut-hint">\u2318+K</div>
          </div>
          
          <div class="route-search-results">
            ${this.filteredRoutes.length===0?'<div class="no-results">No routes found</div>':this.filteredRoutes.map((t,i)=>`
                <div class="route-item ${i===this.selectedIndex?"selected":""}" 
                     data-index="${i}">
                  <div class="route-label">${t.label}</div>
                  <div class="route-path">${t.path}</div>
                </div>
              `).join("")}
          </div>
        </div>
      </div>
    `;if(this.shadowRoot){this.shadowRoot.innerHTML=s;let t=this.shadowRoot.querySelector(".search-input");t&&t.addEventListener("input",this.filterRoutes),this.attachResultsEventListeners();}}openDialogPublic(){this.openDialog();}closeDialogPublic(){this.closeDialog();}updateRoutes(e){this.routes=[...e],this.filteredRoutes=[...e],this.render();}getRoutes(){return [...this.routes]}isDialogOpen(){return this.isOpen}};customElements.get("global-route-search")||customElements.define("global-route-search",o);customElements.get("route-search")||customElements.define("route-search",o);var d=o;exports.RouteSearchComponent=o;exports.default=d;//# sourceMappingURL=route-search-component.cjs.map
//# sourceMappingURL=route-search-component.cjs.map