ABC automation types + use MWC (#10287)

src/panels/config/automation/action/ha-automation-action-row.ts

@@ -1,15 +1,16 @@
 import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import "@material/mwc-list/mwc-list-item";
 import { mdiArrowDown, mdiArrowUp, mdiDotsVertical } from "@mdi/js";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
-import type { PaperListboxElement } from "@polymer/paper-listbox/paper-listbox";
+import "@material/mwc-select";
+import type { Select } from "@material/mwc-select";
 import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import { dynamicElement } from "../../../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import { stringCompare } from "../../../../common/string/compare";
 import { handleStructError } from "../../../../common/structs/handle-errors";
+import { LocalizeFunc } from "../../../../common/translations/localize";
 import "../../../../components/ha-button-menu";
 import "../../../../components/ha-card";
 import "../../../../components/ha-alert";
@@ -99,6 +100,19 @@ export default class HaAutomationActionRow extends LitElement {
 
   @query("ha-yaml-editor") private _yamlEditor?: HaYamlEditor;
 
+  private _processedTypes = memoizeOne(
+    (localize: LocalizeFunc): [string, string][] =>
+      OPTIONS.map(
+        (action) =>
+          [
+            action,
+            localize(
+              `ui.panel.config.automation.editor.actions.type.${action}.label`
+            ),
+          ] as [string, string]
+      ).sort((a, b) => stringCompare(a[1], b[1]))
+  );
+
   protected updated(changedProperties: PropertyValues) {
     if (!changedProperties.has("action")) {
       return;
@@ -211,28 +225,20 @@ export default class HaAutomationActionRow extends LitElement {
                 ></ha-yaml-editor>
               `
             : html`
-                <paper-dropdown-menu-light
+                <mwc-select
                   .label=${this.hass.localize(
                     "ui.panel.config.automation.editor.actions.type_select"
                   )}
-                  no-animations
+                  .value=${getType(this.action)}
+                  @selected=${this._typeChanged}
                 >
-                  <paper-listbox
-                    slot="dropdown-content"
-                    .selected=${selected}
-                    @iron-select=${this._typeChanged}
-                  >
-                    ${OPTIONS.map(
-                      (opt) => html`
-                        <paper-item .action=${opt}>
-                          ${this.hass.localize(
-                            `ui.panel.config.automation.editor.actions.type.${opt}.label`
-                          )}
-                        </paper-item>
-                      `
-                    )}
-                  </paper-listbox>
-                </paper-dropdown-menu-light>
+                  ${this._processedTypes(this.hass.localize).map(
+                    ([opt, label]) => html`
+                      <mwc-list-item .value=${opt}>${label}</mwc-list-item>
+                    `
+                  )}
+                </mwc-select>
+
                 <div @ui-mode-not-available=${this._handleUiModeNotAvailable}>
                   ${dynamicElement(`ha-automation-action-${type}`, {
                     hass: this.hass,
@@ -292,8 +298,7 @@ export default class HaAutomationActionRow extends LitElement {
   }
 
   private _typeChanged(ev: CustomEvent) {
-    const type = ((ev.target as PaperListboxElement)?.selectedItem as any)
-      ?.action;
+    const type = (ev.target as Select).value;
 
     if (!type) {
       return;

src/panels/config/automation/action/types/ha-automation-action-delay.ts

@@ -40,6 +40,9 @@ export class HaDelayAction extends LitElement implements ActionElement {
 
   protected render() {
     return html`<ha-duration-input
+      .label=${this.hass.localize(
+        `ui.panel.config.automation.editor.actions.type.delay.delay`
+      )}
       .data=${this._timeData}
       enableMillisecond
       @value-changed=${this._valueChanged}

src/panels/config/automation/condition/ha-automation-condition-editor.ts

@@ -1,11 +1,12 @@
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
-import type { PaperListboxElement } from "@polymer/paper-listbox/paper-listbox";
 import { CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
+import "@material/mwc-select";
+import type { Select } from "@material/mwc-select";
+import memoizeOne from "memoize-one";
 import { dynamicElement } from "../../../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import { stringCompare } from "../../../../common/string/compare";
+import { LocalizeFunc } from "../../../../common/translations/localize";
 import "../../../../components/ha-card";
 import "../../../../components/ha-yaml-editor";
 import type { Condition } from "../../../../data/automation";
@@ -45,6 +46,19 @@ export default class HaAutomationConditionEditor extends LitElement {
 
   @property() public yamlMode = false;
 
+  private _processedTypes = memoizeOne(
+    (localize: LocalizeFunc): [string, string][] =>
+      OPTIONS.map(
+        (condition) =>
+          [
+            condition,
+            localize(
+              `ui.panel.config.automation.editor.conditions.type.${condition}.label`
+            ),
+          ] as [string, string]
+      ).sort((a, b) => stringCompare(a[1], b[1]))
+  );
+
   protected render() {
     const selected = OPTIONS.indexOf(this.condition.condition);
     const yamlMode = this.yamlMode || selected === -1;
@@ -71,28 +85,20 @@ export default class HaAutomationConditionEditor extends LitElement {
             ></ha-yaml-editor>
           `
         : html`
-            <paper-dropdown-menu-light
+            <mwc-select
               .label=${this.hass.localize(
                 "ui.panel.config.automation.editor.conditions.type_select"
               )}
-              no-animations
+              .value=${this.condition.condition}
+              @selected=${this._typeChanged}
             >
-              <paper-listbox
-                slot="dropdown-content"
-                .selected=${selected}
-                @iron-select=${this._typeChanged}
-              >
-                ${OPTIONS.map(
-                  (opt) => html`
-                    <paper-item .condition=${opt}>
-                      ${this.hass.localize(
-                        `ui.panel.config.automation.editor.conditions.type.${opt}.label`
-                      )}
-                    </paper-item>
-                  `
-                )}
-              </paper-listbox>
-            </paper-dropdown-menu-light>
+              ${this._processedTypes(this.hass.localize).map(
+                ([opt, label]) => html`
+                  <mwc-list-item .value=${opt}>${label}</mwc-list-item>
+                `
+              )}
+            </mwc-select>
+
             <div>
               ${dynamicElement(
                 `ha-automation-condition-${this.condition.condition}`,
@@ -104,8 +110,7 @@ export default class HaAutomationConditionEditor extends LitElement {
   }
 
   private _typeChanged(ev: CustomEvent) {
-    const type = ((ev.target as PaperListboxElement)?.selectedItem as any)
-      ?.condition;
+    const type = (ev.target as Select).value;
 
     if (!type) {
       return;

src/panels/config/automation/trigger/ha-automation-trigger-row.ts

@@ -1,15 +1,16 @@
 import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import "@material/mwc-list/mwc-list-item";
 import { mdiDotsVertical } from "@mdi/js";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
-import type { PaperListboxElement } from "@polymer/paper-listbox/paper-listbox";
+import "@material/mwc-select";
+import type { Select } from "@material/mwc-select";
 import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import { dynamicElement } from "../../../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import { stringCompare } from "../../../../common/string/compare";
 import { handleStructError } from "../../../../common/structs/handle-errors";
+import { LocalizeFunc } from "../../../../common/translations/localize";
 import "../../../../components/ha-button-menu";
 import "../../../../components/ha-card";
 import "../../../../components/ha-alert";
@@ -86,6 +87,19 @@ export default class HaAutomationTriggerRow extends LitElement {
 
   @state() private _yamlMode = false;
 
+  private _processedTypes = memoizeOne(
+    (localize: LocalizeFunc): [string, string][] =>
+      OPTIONS.map(
+        (action) =>
+          [
+            action,
+            localize(
+              `ui.panel.config.automation.editor.triggers.type.${action}.label`
+            ),
+          ] as [string, string]
+      ).sort((a, b) => stringCompare(a[1], b[1]))
+  );
+
   protected render() {
     const selected = OPTIONS.indexOf(this.trigger.platform);
     const yamlMode = this._yamlMode || selected === -1;
@@ -160,28 +174,20 @@ export default class HaAutomationTriggerRow extends LitElement {
                 ></ha-yaml-editor>
               `
             : html`
-                <paper-dropdown-menu-light
+                <mwc-select
                   .label=${this.hass.localize(
                     "ui.panel.config.automation.editor.triggers.type_select"
                   )}
-                  no-animations
+                  .value=${this.trigger.platform}
+                  @selected=${this._typeChanged}
                 >
-                  <paper-listbox
-                    slot="dropdown-content"
-                    .selected=${selected}
-                    @iron-select=${this._typeChanged}
-                  >
-                    ${OPTIONS.map(
-                      (opt) => html`
-                        <paper-item .platform=${opt}>
-                          ${this.hass.localize(
-                            `ui.panel.config.automation.editor.triggers.type.${opt}.label`
-                          )}
-                        </paper-item>
-                      `
-                    )}
-                  </paper-listbox>
-                </paper-dropdown-menu-light>
+                  ${this._processedTypes(this.hass.localize).map(
+                    ([opt, label]) => html`
+                      <mwc-list-item .value=${opt}>${label}</mwc-list-item>
+                    `
+                  )}
+                </mwc-select>
+
                 <paper-input
                   .label=${this.hass.localize(
                     "ui.panel.config.automation.editor.triggers.id"
@@ -237,8 +243,7 @@ export default class HaAutomationTriggerRow extends LitElement {
   }
 
   private _typeChanged(ev: CustomEvent) {
-    const type = ((ev.target as PaperListboxElement)?.selectedItem as any)
-      ?.platform;
+    const type = (ev.target as Select).value;
 
     if (!type) {
       return;