dees-catalog/ts_web/elements/dees-searchbar.ts

import {
  customElement,
  DeesElement,
  property,
  html,
  cssManager,
  unsafeCSS,
  css,
  type TemplateResult,
  domtools,
  query,
} from '@design.estate/dees-element';

import * as colors from './00colors.js';
import { demoFunc } from './dees-searchbar.demo.js';

declare global {
  interface HTMLElementTagNameMap {
    'dees-searchbar': DeesSearchbar;
  }
}

@customElement('dees-searchbar')
export class DeesSearchbar extends DeesElement {
  // DEMO
  public static demo = demoFunc;

  // STATIC
  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        padding: 40px;
        font-family: Dees Sans;
        display: block;
        background: ${cssManager.bdTheme('#eeeeeb', '#000000')};
      }

      .searchboxContainer {
        position: relative;
        margin: auto;
        max-width: 800px;
        background: ${cssManager.bdTheme('#00000015', '#ffffff15')};
        --boxHeight: 60px;
        height: var(--boxHeight);
        border-radius: var(--boxHeight);
        display: grid;
        grid-template-columns: 1fr 140px;
        justify-content: center;
        align-items: center;
        border-top: 1px solid ${cssManager.bdTheme('#00000015', '#ffffff20')};
      }

      input {
        height: 100%;
        width: 100%;
        border: none;
        background: none;
        color: ${cssManager.bdTheme('#000000', '#eeeeeb')};
        padding-left: 25px;
        margin-right: -8px;
        outline: none;
        font-size: 16px;
      }

      .searchButton {
        --buttonPadding: 8px;
        background: ${cssManager.bdTheme('#eeeeeb', '#000000')};
        color: ${cssManager.bdTheme('#000000', '#eeeeeb')};
        line-height: calc(var(--boxHeight) - (var(--buttonPadding) * 2));
        border-radius: var(--boxHeight);
        transform: scale(1) ;
        transform-origin: 50% 50%;
        text-align: center;
        
        transition: transform 0.1s, background 0.1s;
        margin-right: var(--buttonPadding);
        user-select: none;
      }

      .searchButton:hover {
        color: #fff;
        background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)};
      }

      .searchButton:active {
        color: #fff;
        background: ${cssManager.bdTheme(colors.bright.blueActive, colors.dark.blueActive)};
        transform: scale(0.98);
      }

      .filters {
        margin: auto;
        max-width: 800px;
      }
    `,
  ];

  // INSTANCE

  @property()
  public filters = [];


  @query('input')
  public searchInput!: HTMLInputElement;
  @query('.searchButton')
  public searchButton!: HTMLElement;

  constructor() {
    super();
  }

  public render(): TemplateResult {
    return html`
      <div class="searchboxContainer">
        <input type="text" placeholder="Your Skills (e.g. TypeScript, Rust, Projectmanagement)" />
        <div class="searchButton">Search -></div>
      </div>
      ${this.filters.length > 0 ? html`
        <div class="filters">
        <dees-heading level="hr-small">Filters</dees-heading>
        <dees-input-dropdown .label=${'location'}></dees-input-dropdown>
      </div>  
      ` : html``}
    `;
  }
  /**
   * Lifecycle: after first render, wire up events for input and submit actions
   */
  public firstUpdated(): void {
    // dispatch change on each input
    this.searchInput.addEventListener('input', () => {
      this.dispatchEvent(new CustomEvent('search-changed', {
        bubbles: true,
        composed: true,
        detail: { value: this.searchInput.value }
      }));
    });
    // submit on Enter key
    this.searchInput.addEventListener('keydown', (e: KeyboardEvent) => {
      if (e.key === 'Enter') {
        this._dispatchSubmit();
      }
    });
    // submit on button click
    this.searchButton.addEventListener('click', () => this._dispatchSubmit());
  }

  /**
   * Dispatch a submit event with the current search value
   */
  private _dispatchSubmit(): void {
    this.dispatchEvent(new CustomEvent('search-submit', {
      bubbles: true,
      composed: true,
      detail: { value: this.searchInput.value }
    }));
  }
}