chrome/browser/resources/side_panel/customize_chrome/hover_button.ts

// Copyright 2022 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import './button_label.js';

import {CrLitElement} from 'chrome://resources/lit/v3_0/lit.rollup.js';

import {getCss} from './hover_button.css.js';
import {getHtml} from './hover_button.html.js';

export interface HoverButtonElement {
  $: {
    hoverButton: HTMLDivElement,
  };
}

export class HoverButtonElement extends CrLitElement {
  static get is() {
    return 'customize-chrome-hover-button';
  }

  static override get styles() {
    return getCss();
  }

  override render() {
    return getHtml.bind(this)();
  }

  static override get properties() {
    return {
      label: {type: String},
      labelDescription: {type: String},
    };
  }

  label: string = '';
  labelDescription: string|null = null;

  constructor() {
    super();
    this.addEventListener('keydown', this.onKeyDown_.bind(this));
  }

  override focus() {
    this.$.hoverButton.focus();
  }

  private onKeyDown_(e: KeyboardEvent) {
    if (e.key !== ' ' && e.key !== 'Enter') {
      return;
    }

    e.preventDefault();
    e.stopPropagation();
    this.click();
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'customize-chrome-hover-button': HoverButtonElement;
  }
}

customElements.define(HoverButtonElement.is, HoverButtonElement);