site-search.tsx

export interface SearchSpecialTools {
  url: string;
  label: string;
}

import {Component, Prop, h, Watch, State, Listen, Host, Event, EventEmitter, Element} from '@stencil/core';
import {ComponentLabels} from '../site-header';
import {ColorVariant} from '../../../utils/utils';

@Component({
  tag: 'hy-site-search',
  styleUrl: 'site-search.scss',
  shadow: true,
})
export class SiteSearch {
  @Element() el: HTMLElement;

  @Prop() color: ColorVariant = ColorVariant.black;
  @Prop() isAlternative: boolean = false;
  @Prop() labels?: ComponentLabels[] | string;
  @Prop() showLabel: boolean = false;
  @Prop() size: number;
  @Prop() dataSearchSpecialTools: string;
  private _dataSearchSpecialTools: SearchSpecialTools[];

  @State() isSearchPanelOpen: boolean = false;
  @Event() searchPanelToggled: EventEmitter;

  private _labels: ComponentLabels[];

  @Watch('labels') labelsWatcher(data: ComponentLabels[] | string) {
    this._labels = typeof data === 'string' ? JSON.parse(data) : data;
  }

  componentWillLoad() {
    if (this.dataSearchSpecialTools) {
      this._dataSearchSpecialTools = JSON.parse(this.dataSearchSpecialTools);
    }
  }

  componentWillRender() {
    this.labelsWatcher(this.labels);
  }

  // CLose the search panel if user opens the desktop menu panel.
  @Listen('menuDesktopToggled', {target: 'document'})
  desktopMenuToggled() {
    this.isSearchPanelOpen = false;
  }

  // CLose the search panel if user opens the language menu.
  @Listen('menuLanguageToggled', {target: 'document'})
  menuLanguageToggled() {
    this.isSearchPanelOpen = false;
  }

  handleSearchPanelToggle(event) {
    this.isSearchPanelOpen = !this.isSearchPanelOpen;

    if (this.isSearchPanelOpen) {
      //const searchPanelSelector = this.el as HTMLElement;

      // Close desktop menu panel and lang menu panel if they are open.
      this.searchPanelToggled.emit();

      let hyHeader = this.el.closest('.hy-site-header') as HTMLElement;
      let rectHeader = hyHeader.getBoundingClientRect();

      const headerHeight = `${rectHeader.bottom}px`;
      const searchPanel = this.el.shadowRoot.querySelectorAll(`.site-search__panel`)[0] as HTMLElement;
      searchPanel.style.top = headerHeight;

      // @todo add blinking effect.
      const searchInput = this.el.shadowRoot.querySelector('input#search') as HTMLElement;
      searchInput.focus();
    }
    event.stopPropagation();
  }

  handleSearchPanelClose() {
    this.isSearchPanelOpen = false;
  }

  render() {
    return (
      <Host
        class={{
          'site-search': true,
          'site-search__is-open': this.isSearchPanelOpen,
        }}
      >
        <button
          aria-label={this._labels['open']}
          class={{
            'button--search': true,
            'is-open--menu': this.isAlternative,
            'is-open': this.isSearchPanelOpen,
          }}
          onClick={(e) => this.handleSearchPanelToggle(e)}
        >
          {this.showLabel ? <span class={'button--search__label'}>{this._labels['label']}</span> : ''}
          <hy-icon icon={'hy-icon-search'} size={this.size} fill={this.color} />
        </button>
        <div
          class={{
            'site-search__panel': true,
            'site-search__panel__is-open': this.isSearchPanelOpen,
          }}
        >
          <div class="site-search__panel__wrapper">
            <div class="site-search__panel__title">
              <div class="site-search__panel__title__group">
                <h1>Search</h1>
                <div class="description">web pages, study options, people, research groups, etc…</div>
              </div>
              <button
                onClick={() => this.handleSearchPanelClose()}
                class={{
                  'site-search__panel__panel-toggle': true,
                }}
                aria-label="Exit Search"
              >
                <span class="site-search__panel__panel-toggle__label">
                  <span class="site-search__panel__panel-toggle__label__title">Exit Search</span>
                  <hy-icon icon={'hy-icon-remove'} size={16} fill={ColorVariant.black} />
                </span>
              </button>
            </div>
            <div class="site-search__panel__input">
              <hy-search-field input-id="search" />
            </div>
            <div class="site-search__panel__results">
              <div class="filters"></div>
              <div class="results"></div>
            </div>
            {this.dataSearchSpecialTools && this._dataSearchSpecialTools.length > 0 && (
              <div class="site-search__panel__tools">
                <div>Special Search tools</div>
                {this._dataSearchSpecialTools.map((i) => {
                  return (
                    <a class={'search-special-tool'} href={i.url}>
                      <hy-icon icon={'hy-icon-arrow-to-right'} size={14} fill={ColorVariant.black} />
                      <span class={'search-special-tool__label'}>{i.label}</span>
                    </a>
                  );
                })}
              </div>
            )}
          </div>
        </div>
      </Host>
    );
  }
}