chromium/ash/webui/common/resources/sea_pen/sea_pen_toast_element.ts

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

/**
 * @fileoverview This component displays toast notifications to the user.
 */

import 'chrome://resources/ash/common/cr_elements/cr_button/cr_button.js';

import {dismissSeaPenErrorAction} from './sea_pen_actions.js';
import {WithSeaPenStore} from './sea_pen_store.js';
import {getTemplate} from './sea_pen_toast_element.html.js';

// Shows an error notification toast in SeaPen UI.
// TODO(b/333764915) merge with personalization toast.
export class SeaPenToastElement extends WithSeaPenStore {
  static get is() {
    return 'sea-pen-toast';
  }

  static get template() {
    return getTemplate();
  }

  static get properties() {
    return {
      error_: String,

      isLoading_: Boolean,

      showError_: {
        type: Boolean,
        computed: 'computeShowError_(error_, isLoading_)',
      },
    };
  }

  private error_: string|null;
  private isLoading_: boolean;
  private showError_: boolean;

  override connectedCallback() {
    super.connectedCallback();
    this.watch('error_', state => state.error);
    this.watch(
        'isLoading_',
        state => state.loading.setImage > 0 || state.loading.currentSelected);
  }

  private onDismissed_() {
    this.dispatch(dismissSeaPenErrorAction());
  }

  private computeShowError_(error: string|null, isLoading: boolean): boolean {
    return typeof error === 'string' && !isLoading;
  }
}

customElements.define(SeaPenToastElement.is, SeaPenToastElement);