Replace paper progress with mwc-linear-progess (#10339)

package.json

@@ -73,14 +73,11 @@
     "@polymer/iron-flex-layout": "^3.0.1",
     "@polymer/iron-icon": "^3.0.1",
     "@polymer/iron-input": "^3.0.1",
-    "@polymer/iron-overlay-behavior": "^3.0.3",
     "@polymer/iron-resizable-behavior": "^3.0.1",
     "@polymer/paper-dropdown-menu": "^3.2.0",
     "@polymer/paper-input": "^3.2.1",
     "@polymer/paper-item": "^3.0.1",
     "@polymer/paper-listbox": "^3.0.1",
-    "@polymer/paper-menu-button": "^3.1.0",
-    "@polymer/paper-progress": "^3.0.1",
     "@polymer/paper-ripple": "^3.0.2",
     "@polymer/paper-slider": "^3.0.1",
     "@polymer/paper-styles": "^3.0.1",

src/components/ha-form/ha-form-multi_select.ts

@@ -43,7 +43,7 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement {
 
   @state() private _opened = false;
 
-  @query("paper-menu-button", true) private _input?: HTMLElement;
+  @query("ha-button-menu") private _input?: HTMLElement;
 
   public focus(): void {
     if (this._input) {

src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-heal-node.ts

@@ -1,6 +1,5 @@
 import "../../../../../components/ha-circular-progress";
 import "@material/mwc-button/mwc-button";
-import "@material/mwc-linear-progress/mwc-linear-progress";
 import { mdiStethoscope, mdiCheckCircle, mdiCloseCircle } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";

src/panels/lovelace/cards/hui-media-control-card.ts

@@ -1,6 +1,6 @@
+import "@material/mwc-linear-progress/mwc-linear-progress";
+import type { LinearProgress } from "@material/mwc-linear-progress/mwc-linear-progress";
 import { mdiDotsVertical, mdiPlayBoxMultiple } from "@mdi/js";
-import "@polymer/paper-progress/paper-progress";
-import type { PaperProgressElement } from "@polymer/paper-progress/paper-progress";
 import {
   css,
   CSSResultGroup,
@@ -9,7 +9,7 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit";
-import { customElement, property, state, query } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
@@ -19,8 +19,8 @@ import { supportsFeature } from "../../../common/entity/supports-feature";
 import { extractColors } from "../../../common/image/extract_color";
 import { debounce } from "../../../common/util/debounce";
 import "../../../components/ha-card";
-import "../../../components/ha-state-icon";
 import "../../../components/ha-icon-button";
+import "../../../components/ha-state-icon";
 import { showMediaBrowserDialog } from "../../../components/media-player/show-media-browser-dialog";
 import { UNAVAILABLE_STATES } from "../../../data/entity";
 import {
@@ -81,7 +81,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
 
   @state() private _cardHeight = 0;
 
-  @query("paper-progress") private _progressBar?: PaperProgressElement;
+  @query("mwc-linear-progress") private _progressBar?: LinearProgress;
 
   @state() private _marqueeActive = false;
 
@@ -296,17 +296,18 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
                   ${!this._showProgressBar
                     ? ""
                     : html`
-                        <paper-progress
+                        <mwc-linear-progress
-                          .max=${stateObj.attributes.media_duration}
+                          determinate
                           style=${styleMap({
-                            "--paper-progress-active-color":
+                            "--mdc-theme-primary":
                               this._foregroundColor || "var(--accent-color)",
                             cursor: supportsFeature(stateObj, SUPPORT_SEEK)
                               ? "pointer"
                               : "initial",
                           })}
                           @click=${this._handleSeek}
-                        ></paper-progress>
+                        >
+                        </mwc-linear-progress>
                       `}
                 </div>
               `
@@ -508,8 +509,10 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
   }
 
   private _updateProgressBar(): void {
-    if (this._progressBar) {
+    if (this._progressBar && this._stateObj?.attributes.media_duration) {
-      this._progressBar.value = getCurrentProgress(this._stateObj!);
+      this._progressBar.progress =
+        getCurrentProgress(this._stateObj) /
+        this._stateObj!.attributes.media_duration;
     }
   }
 
@@ -524,12 +527,10 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
       return;
     }
 
-    const progressWidth = (
+    const progressWidth = (this._progressBar as HTMLElement).offsetWidth;
-      this.shadowRoot!.querySelector("paper-progress") as HTMLElement
-    ).offsetWidth;
 
     const percent = e.offsetX / progressWidth;
-    const position = (e.currentTarget! as any).max * percent;
+    const position = this._stateObj!.attributes.media_duration! * percent;
 
     this.hass!.callService("media_player", "media_seek", {
       entity_id: this._config!.entity,
@@ -730,12 +731,10 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
         padding-top: 16px;
       }
 
-      paper-progress {
+      mwc-linear-progress {
         width: 100%;
-        height: var(--paper-progress-height, 4px);
         margin-top: 4px;
-        border-radius: calc(var(--paper-progress-height, 4px) / 2);
+        --mdc-linear-progress-buffer-color: rgba(200, 200, 200, 0.5);
-        --paper-progress-container-color: rgba(200, 200, 200, 0.5);
       }
 
       .no-image .controls {

yarn.lock

@@ -3165,7 +3165,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polymer/iron-overlay-behavior@npm:^3.0.0-pre.27, @polymer/iron-overlay-behavior@npm:^3.0.3":
+"@polymer/iron-overlay-behavior@npm:^3.0.0-pre.27":
   version: 3.0.3
   resolution: "@polymer/iron-overlay-behavior@npm:3.0.3"
   dependencies:
@@ -3331,7 +3331,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polymer/paper-progress@npm:^3.0.0-pre.26, @polymer/paper-progress@npm:^3.0.1":
+"@polymer/paper-progress@npm:^3.0.0-pre.26":
   version: 3.0.1
   resolution: "@polymer/paper-progress@npm:3.0.1"
   dependencies:
@@ -9033,14 +9033,11 @@ fsevents@^1.2.7:
     "@polymer/iron-flex-layout": ^3.0.1
     "@polymer/iron-icon": ^3.0.1
     "@polymer/iron-input": ^3.0.1
-    "@polymer/iron-overlay-behavior": ^3.0.3
     "@polymer/iron-resizable-behavior": ^3.0.1
     "@polymer/paper-dropdown-menu": ^3.2.0
     "@polymer/paper-input": ^3.2.1
     "@polymer/paper-item": ^3.0.1
     "@polymer/paper-listbox": ^3.0.1
-    "@polymer/paper-menu-button": ^3.1.0
-    "@polymer/paper-progress": ^3.0.1
     "@polymer/paper-ripple": ^3.0.2
     "@polymer/paper-slider": ^3.0.1
     "@polymer/paper-styles": ^3.0.1