diff --git a/src/components/buttons/ha-progress-button.ts b/src/components/buttons/ha-progress-button.ts index 3208f37e88..a0c535316b 100644 --- a/src/components/buttons/ha-progress-button.ts +++ b/src/components/buttons/ha-progress-button.ts @@ -1,13 +1,15 @@ -import "@material/mwc-button"; import { mdiAlertOctagram, mdiCheckBold } from "@mdi/js"; import type { TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; +import "../ha-button"; import "../ha-spinner"; import "../ha-svg-icon"; @customElement("ha-progress-button") export class HaProgressButton extends LitElement { + @property() public label?: string; + @property({ type: Boolean }) public disabled = false; @property({ type: Boolean }) public progress = false; @@ -21,14 +23,16 @@ export class HaProgressButton extends LitElement { public render(): TemplateResult { const overlay = this._result || this.progress; return html` - + - + ${!overlay ? nothing : html` @@ -68,12 +72,12 @@ export class HaProgressButton extends LitElement { pointer-events: none; } - mwc-button { + ha-button { transition: all 1s; pointer-events: initial; } - mwc-button.success { + ha-button.success { --mdc-theme-primary: white; background-color: var(--success-color); transition: none; @@ -81,13 +85,13 @@ export class HaProgressButton extends LitElement { pointer-events: none; } - mwc-button[unelevated].success, - mwc-button[raised].success { + ha-button[unelevated].success, + ha-button[raised].success { --mdc-theme-primary: var(--success-color); --mdc-theme-on-primary: white; } - mwc-button.error { + ha-button.error { --mdc-theme-primary: white; background-color: var(--error-color); transition: none; @@ -95,8 +99,8 @@ export class HaProgressButton extends LitElement { pointer-events: none; } - mwc-button[unelevated].error, - mwc-button[raised].error { + ha-button[unelevated].error, + ha-button[raised].error { --mdc-theme-primary: var(--error-color); --mdc-theme-on-primary: white; } @@ -113,8 +117,8 @@ export class HaProgressButton extends LitElement { color: white; } - mwc-button.success slot, - mwc-button.error slot { + ha-button.success slot, + ha-button.error slot { visibility: hidden; } :host([destructive]) { diff --git a/src/dialogs/tts-try/dialog-tts-try.ts b/src/dialogs/tts-try/dialog-tts-try.ts index b89077a636..6fc474b616 100644 --- a/src/dialogs/tts-try/dialog-tts-try.ts +++ b/src/dialogs/tts-try/dialog-tts-try.ts @@ -3,7 +3,6 @@ import { css, html, LitElement, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import { storage } from "../../common/decorators/storage"; import { fireEvent } from "../../common/dom/fire_event"; -import "../../components/ha-button"; import { createCloseHeading } from "../../components/ha-dialog"; import "../../components/ha-textarea"; import type { HaTextArea } from "../../components/ha-textarea"; @@ -11,7 +10,7 @@ import { convertTextToSpeech } from "../../data/tts"; import type { HomeAssistant } from "../../types"; import { showAlertDialog } from "../generic/show-dialog-box"; import type { TTSTryDialogParams } from "./show-dialog-tts-try"; -import "../../components/ha-spinner"; +import "../../components/buttons/ha-progress-button"; @customElement("dialog-tts-try") export class TTSTryDialog extends LitElement { @@ -81,28 +80,17 @@ export class TTSTryDialog extends LitElement { ?dialogInitialFocus=${!this._defaultMessage} > - ${this._loadingExample - ? html` - - ` - : html` - - - - `} + + + + `; }