Update dependency prettier to v3 (#17215)

* Update dependency prettier to v3

* Update config and remove .prettierignore

* Reformat

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Steve Repsher <steverep@users.noreply.github.com>

.prettierignore

@@ -1,9 +0,0 @@
-build
-translations/*
-node_modules/*
-hass_frontend/*
-pip-selfcheck.json
-
-# vscode
-.vscode/*
-!.vscode/extensions.json

gallery/src/pages/automation/editor-action.ts

@@ -85,8 +85,7 @@ class DemoHaAutomationEditorAction extends LitElement {
             .value=${this.data[sampleIdx]}
           >
             ${["light", "dark"].map(
-              (slot) =>
+              (slot) => html`
-                html`
                 <ha-automation-action
                   slot=${slot}
                   .hass=${this.hass}

gallery/src/pages/automation/editor-condition.ts

@@ -121,8 +121,7 @@ class DemoHaAutomationEditorCondition extends LitElement {
             .value=${this.data[sampleIdx]}
           >
             ${["light", "dark"].map(
-              (slot) =>
+              (slot) => html`
-                html`
                 <ha-automation-condition
                   slot=${slot}
                   .hass=${this.hass}

gallery/src/pages/automation/editor-trigger.ts

@@ -167,8 +167,7 @@ class DemoHaAutomationEditorTrigger extends LitElement {
             .value=${this.data[sampleIdx]}
           >
             ${["light", "dark"].map(
-              (slot) =>
+              (slot) => html`
-                html`
                 <ha-automation-trigger
                   slot=${slot}
                   .hass=${this.hass}

gallery/src/pages/components/ha-selector.ts

@@ -497,8 +497,7 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
           <demo-black-white-row .title=${info.name} .value=${this.data[idx]}>
             ${["light", "dark"].map((slot) =>
               Object.entries(info.input).map(
-                ([key, value]) =>
+                ([key, value]) => html`
-                  html`
                   <ha-settings-row narrow slot=${slot}>
                     <span slot="heading">${value?.name || key}</span>
                     <span slot="description">${value?.description}</span>

gallery/src/pages/components/ha-tip.ts

@@ -20,9 +20,8 @@ export class DemoHaTip extends LitElement {
           <ha-card header="ha-tip ${mode} demo">
             <div class="card-content">
               ${tips.map(
-                (tip) => html`<ha-tip .hass=${provideHass(this)}
+                (tip) =>
-                  >${tip}</ha-tip
+                  html`<ha-tip .hass=${provideHass(this)}>${tip}</ha-tip>`
-                >`
               )}
             </div>
           </ha-card>

hassio/src/addon-view/info/hassio-addon-info.ts

@@ -544,8 +544,7 @@ class HassioAddonInfo extends LitElement {
                       <code slot="description"> ${this.addon.hostname} </code>
                     </ha-settings-row>
                     ${metrics.map(
-                      (metric) =>
+                      (metric) => html`
-                        html`
                         <supervisor-metric
                           .description=${metric.description}
                           .value=${metric.value ?? 0}

hassio/src/components/supervisor-backup-content.ts

@@ -384,7 +384,8 @@ export class SupervisorBackupContent extends LitElement {
         : undefined;
     let checkedItems = 0;
     this[section].forEach((item) => {
-      templates.push(html`<ha-formfield
+      templates.push(
+        html`<ha-formfield
           .label=${html`<supervisor-formfield-label
             .label=${item.name}
             .iconPath=${section === "addons" ? mdiPuzzle : mdiFolder}
@@ -405,7 +406,8 @@ export class SupervisorBackupContent extends LitElement {
             @change=${this._updateSectionEntry}
           >
           </ha-checkbox>
-      </ha-formfield>`);
+        </ha-formfield>`
+      );
 
       if (item.checked) {
         checkedItems++;

hassio/src/dialogs/network/dialog-hassio-network.ts

@@ -168,8 +168,7 @@ export class DialogHassioNetwork
                         ${this._accessPoints.accesspoints
                           .filter((ap) => ap.ssid)
                           .map(
-                            (ap) =>
+                            (ap) => html`
-                              html`
                               <mwc-list-item
                                 twoline
                                 @click=${this._selectAP}

hassio/src/dialogs/registries/dialog-hassio-registries.ts

@@ -157,7 +157,8 @@ class HassioRegistriesDialog extends LitElement {
   }
 
   public focus(): void {
-    this.updateComplete.then(() =>
+    this.updateComplete.then(
+      () =>
         (
           this.shadowRoot?.querySelector("[dialogInitialFocus]") as HTMLElement
         )?.focus()

hassio/src/dialogs/repositories/dialog-hassio-repositories.ts

@@ -209,7 +209,8 @@ class HassioRepositoriesDialog extends LitElement {
   }
 
   public focus() {
-    this.updateComplete.then(() =>
+    this.updateComplete.then(
+      () =>
         (
           this.shadowRoot?.querySelector("[dialogInitialFocus]") as HTMLElement
         )?.focus()

hassio/src/system/hassio-core-info.ts

@@ -81,8 +81,7 @@ class HassioCoreInfo extends LitElement {
           </div>
           <div>
             ${metrics.map(
-              (metric) =>
+              (metric) => html`
-                html`
                 <supervisor-metric
                   .description=${metric.description}
                   .value=${metric.value ?? 0}

hassio/src/system/hassio-host-info.ts

@@ -154,8 +154,7 @@ class HassioHostInfo extends LitElement {
                 </ha-settings-row>`
               : ""}
             ${metrics.map(
-              (metric) =>
+              (metric) => html`
-                html`
                 <supervisor-metric
                   .description=${metric.description}
                   .value=${metric.value ?? 0}

hassio/src/system/hassio-supervisor-info.ts

@@ -178,8 +178,7 @@ class HassioSupervisorInfo extends LitElement {
           </div>
           <div class="metrics-block">
             ${metrics.map(
-              (metric) =>
+              (metric) => html`
-                html`
                 <supervisor-metric
                   .description=${metric.description}
                   .value=${metric.value ?? 0}

package.json

@@ -227,7 +227,7 @@
     "object-hash": "3.0.0",
     "open": "9.1.0",
     "pinst": "3.0.0",
-    "prettier": "2.8.8",
+    "prettier": "3.0.0",
     "rollup": "2.79.1",
     "rollup-plugin-string": "3.0.0",
     "rollup-plugin-terser": "7.0.2",
@@ -256,9 +256,5 @@
     "sortablejs@1.15.0": "patch:sortablejs@npm%3A1.15.0#./.yarn/patches/sortablejs-npm-1.15.0-f3a393abcc.patch",
     "leaflet-draw@1.0.4": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch"
   },
-  "prettier": {
-    "trailingComma": "es5",
-    "arrowParens": "always"
-  },
   "packageManager": "yarn@3.6.1"
 }

prettier.config.js

@@ -0,0 +1,3 @@
+export default {
+  trailingComma: "es5",
+};

src/common/translations/localize.ts

@@ -38,7 +38,7 @@ export type LocalizeKeys =
 // Tweaked from https://www.raygesualdo.com/posts/flattening-object-keys-with-typescript-types
 export type FlattenObjectKeys<
   T extends Record<string, any>,
-  Key extends keyof T = keyof T
+  Key extends keyof T = keyof T,
 > = Key extends string
   ? T[Key] extends Record<string, unknown>
     ? `${Key}.${FlattenObjectKeys<T[Key]>}`

src/components/chart/ha-chart-base.ts

@@ -108,7 +108,8 @@ export default class HaChartBase extends LitElement {
         ? html`<div class="chartLegend">
             <ul>
               ${this.data.datasets.map(
-                (dataset, index) => html`<li
+                (dataset, index) =>
+                  html`<li
                     .datasetIndex=${index}
                     @click=${this._legendClick}
                     class=${classMap({
@@ -156,7 +157,8 @@ export default class HaChartBase extends LitElement {
               <div>
                 <ul>
                   ${this._tooltip.body.map(
-                    (item, i) => html`<li>
+                    (item, i) =>
+                      html`<li>
                         <div
                           class="bullet"
                           style=${styleMap({

src/components/device/ha-area-devices-picker.ts

@@ -36,9 +36,8 @@ interface AreaDevices {
   devices: string[];
 }
 
-const rowRenderer: ComboBoxLitRenderer<AreaDevices> = (
+const rowRenderer: ComboBoxLitRenderer<AreaDevices> = (item) =>
-  item
+  html`<mwc-list-item twoline>
-) => html`<mwc-list-item twoline>
     <span>${item.name}</span>
     <span slot="secondary">${item.devices.length} devices</span>
   </mwc-list-item>`;

src/components/device/ha-device-automation-picker.ts

@@ -17,7 +17,7 @@ const NO_AUTOMATION_KEY = "NO_AUTOMATION";
 const UNKNOWN_AUTOMATION_KEY = "UNKNOWN_AUTOMATION";
 
 export abstract class HaDeviceAutomationPicker<
-  T extends DeviceAutomation
+  T extends DeviceAutomation,
 > extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 

src/components/device/ha-device-picker.ts

@@ -45,9 +45,8 @@ export type HaDevicePickerDeviceFilterFunc = (
 
 export type HaDevicePickerEntityFilterFunc = (entity: HassEntity) => boolean;
 
-const rowRenderer: ComboBoxLitRenderer<Device> = (item) => html`<mwc-list-item
+const rowRenderer: ComboBoxLitRenderer<Device> = (item) =>
-  .twoline=${!!item.area}
+  html`<mwc-list-item .twoline=${!!item.area}>
->
     <span>${item.name}</span>
     <span slot="secondary">${item.area}</span>
   </mwc-list-item>`;

src/components/entity/ha-statistic-picker.ts

@@ -87,11 +87,13 @@ export class HaStatisticPicker extends LitElement {
 
   private _statistics: StatisticItem[] = [];
 
-  private _rowRenderer: ComboBoxLitRenderer<StatisticItem> = (
+  private _rowRenderer: ComboBoxLitRenderer<StatisticItem> = (item) =>
-    item
+    html`<mwc-list-item graphic="avatar" twoline>
-  ) => html`<mwc-list-item graphic="avatar" twoline>
       ${item.state
-      ? html`<state-badge slot="graphic" .stateObj=${item.state}></state-badge>`
+        ? html`<state-badge
+            slot="graphic"
+            .stateObj=${item.state}
+          ></state-badge>`
         : ""}
       <span>${item.name}</span>
       <span slot="secondary"

src/components/entity/state-badge.ts

@@ -211,7 +211,9 @@ export class StateBadge extends LitElement {
           background: var(--divider-color);
         }
         ha-state-icon {
-          transition: color 0.3s ease-in-out, filter 0.3s ease-in-out;
+          transition:
+            color 0.3s ease-in-out,
+            filter 0.3s ease-in-out;
         }
         .missing {
           color: #fce588;

src/components/ha-addon-picker.ts

@@ -11,9 +11,8 @@ import "./ha-combo-box";
 import type { HaComboBox } from "./ha-combo-box";
 import "./ha-list-item";
 
-const rowRenderer: ComboBoxLitRenderer<HassioAddonInfo> = (
+const rowRenderer: ComboBoxLitRenderer<HassioAddonInfo> = (item) =>
-  item
+  html`<ha-list-item twoline graphic="icon">
-) => html`<ha-list-item twoline graphic="icon">
     <span>${item.name}</span>
     <span slot="secondary">${item.slug}</span>
     ${item.icon

src/components/ha-analytics.ts

@@ -53,8 +53,7 @@ export class HaAnalytics extends LitElement {
         </ha-switch>
       </ha-settings-row>
       ${ADDITIONAL_PREFERENCES.map(
-        (preference) =>
+        (preference) => html`
-          html`
           <ha-settings-row>
             <span slot="heading" data-for=${preference}>
               ${this.localize(

src/components/ha-area-picker.ts

@@ -34,9 +34,8 @@ import "./ha-svg-icon";
 
 type ScorableAreaRegistryEntry = ScorableTextItem & AreaRegistryEntry;
 
-const rowRenderer: ComboBoxLitRenderer<AreaRegistryEntry> = (
+const rowRenderer: ComboBoxLitRenderer<AreaRegistryEntry> = (item) =>
-  item
+  html`<mwc-list-item
-) => html`<mwc-list-item
     class=${classMap({ "add-new": item.area_id === "add_new" })}
   >
     ${item.name}

src/components/ha-button-toggle-group.ts

@@ -94,7 +94,9 @@ export class HaButtonToggleGroup extends LitElement {
         opacity: 0;
         pointer-events: none;
         content: "";
-        transition: opacity 15ms linear, background-color 15ms linear;
+        transition:
+          opacity 15ms linear,
+          background-color 15ms linear;
       }
       ha-icon-button[active]::before,
       mwc-button[active]::before {

src/components/ha-config-entry-picker.ts

@@ -47,9 +47,8 @@ class HaConfigEntryPicker extends LitElement {
     this._getConfigEntries();
   }
 
-  private _rowRenderer: ComboBoxLitRenderer<ConfigEntryExtended> = (
+  private _rowRenderer: ComboBoxLitRenderer<ConfigEntryExtended> = (item) =>
-    item
+    html`<mwc-list-item twoline graphic="icon">
-  ) => html`<mwc-list-item twoline graphic="icon">
       <span
         >${item.title ||
         this.hass.localize(

src/components/ha-control-button.ts

@@ -122,7 +122,8 @@ export class HaControlButton extends LitElement {
         height: 100%;
         width: 100%;
         background-color: var(--control-button-background-color);
-        transition: background-color 180ms ease-in-out,
+        transition:
+          background-color 180ms ease-in-out,
           opacity 180ms ease-in-out;
         opacity: var(--control-button-background-opacity);
       }

src/components/ha-control-circular-slider.ts

@@ -566,7 +566,9 @@ export class HaControlCircularSlider extends LitElement {
         fill: none;
         stroke: var(--control-circular-slider-background);
         opacity: var(--control-circular-slider-background-opacity);
-        transition: stroke 180ms ease-in-out, opacity 180ms ease-in-out;
+        transition:
+          stroke 180ms ease-in-out,
+          opacity 180ms ease-in-out;
         stroke-linecap: round;
         stroke-width: 24px;
       }
@@ -576,9 +578,11 @@ export class HaControlCircularSlider extends LitElement {
         fill: none;
         stroke-linecap: round;
         stroke-width: 24px;
-        transition: stroke-width 300ms ease-in-out,
+        transition:
+          stroke-width 300ms ease-in-out,
           stroke-dasharray 300ms ease-in-out,
-          stroke-dashoffset 300ms ease-in-out, stroke 180ms ease-in-out,
+          stroke-dashoffset 300ms ease-in-out,
+          stroke 180ms ease-in-out,
           opacity 180ms ease-in-out;
       }
 

src/components/ha-control-select.ts

@@ -283,7 +283,9 @@ export class HaControlSelect extends LitElement {
         width: 100%;
         background-color: var(--control-select-color);
         opacity: 0;
-        transition: background-color ease-in-out 180ms, opacity ease-in-out 80ms;
+        transition:
+          background-color ease-in-out 180ms,
+          opacity ease-in-out 80ms;
       }
       .option.focused::before,
       .option:hover::before {

src/components/ha-control-slider.ts

@@ -327,7 +327,8 @@ export class HaControlSlider extends LitElement {
         height: 100%;
         width: 100%;
         background-color: var(--control-slider-color);
-        transition: transform 180ms ease-in-out,
+        transition:
+          transform 180ms ease-in-out,
           background-color 180ms ease-in-out;
       }
       .slider .slider-track-bar.show-handle {
@@ -427,7 +428,9 @@ export class HaControlSlider extends LitElement {
         position: absolute;
         background-color: white;
         border-radius: var(--handle-size);
-        transition: left 180ms ease-in-out, bottom 180ms ease-in-out;
+        transition:
+          left 180ms ease-in-out,
+          bottom 180ms ease-in-out;
         top: 0;
         bottom: 0;
         left: calc(var(--value, 0) * (100% - var(--cursor-size)));

src/components/ha-control-switch.ts

@@ -208,7 +208,8 @@ export class HaControlSwitch extends LitElement {
         border-radius: calc(
           var(--control-switch-border-radius) - var(--control-switch-padding)
         );
-        transition: transform 180ms ease-in-out,
+        transition:
+          transform 180ms ease-in-out,
           background-color 180ms ease-in-out;
         background-color: var(--control-switch-off-color);
         color: white;

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

@@ -55,8 +55,7 @@ export class HaFormGrid extends LitElement implements HaFormElement {
   protected render(): TemplateResult {
     return html`
       ${this.schema.schema.map(
-        (item) =>
+        (item) => html`
-          html`
           <ha-form
             .hass=${this.hass}
             .data=${this.data}

src/components/ha-form/types.ts

@@ -98,7 +98,7 @@ export interface HaFormTimeSchema extends HaFormBaseSchema {
 // Type utility to unionize a schema array by flattening any grid schemas
 export type SchemaUnion<
   SchemaArray extends readonly HaFormSchema[],
-  Schema = SchemaArray[number]
+  Schema = SchemaArray[number],
 > = Schema extends HaFormGridSchema | HaFormExpandableSchema
   ? SchemaUnion<Schema["schema"]>
   : Schema;

src/components/ha-hs-color-picker.ts

@@ -406,7 +406,9 @@ class HaHsColorPicker extends LitElement {
         filter: url(#marker-shadow);
       }
       .container:not(.pressed) circle {
-        transition: transform 100ms ease-in-out, fill 100ms ease-in-out;
+        transition:
+          transform 100ms ease-in-out,
+          fill 100ms ease-in-out;
       }
       .container:not(.pressed) .cursor {
         transition: transform 200ms ease-in-out;

src/components/ha-mount-picker.ts

@@ -81,11 +81,8 @@ class HaMountPicker extends LitElement {
           ? dataDiskOption
           : nothing}
         ${this._filterMounts(this._mounts, this.usage).map(
-          (mount) => html`<ha-list-item
+          (mount) =>
-            twoline
+            html`<ha-list-item twoline graphic="icon" .value=${mount.name}>
-            graphic="icon"
-            .value=${mount.name}
-          >
               <span>${mount.name}</span>
               <span slot="secondary"
                 >${mount.server}${mount.port

src/components/ha-selector/ha-selector-select.ts

@@ -112,11 +112,10 @@ export class HaSelectSelector extends LitElement {
         ${value?.length
           ? html`<ha-chip-set>
               ${value.map(
-                (item, idx) =>
+                (item, idx) => html`
-                  html`
                   <ha-chip hasTrailingIcon>
-                      ${options.find((option) => option.value === item)
+                    ${options.find((option) => option.value === item)?.label ||
-                        ?.label || item}
+                    item}
                     <ha-svg-icon
                       slot="trailing-icon"
                       .path=${mdiClose}

src/components/ha-service-picker.ts

@@ -10,7 +10,8 @@ import "./ha-combo-box";
 
 const rowRenderer: ComboBoxLitRenderer<{ service: string; name: string }> = (
   item
-) => html`<mwc-list-item twoline>
+) =>
+  html`<mwc-list-item twoline>
     <span>${item.name}</span>
     <span slot="secondary"
       >${item.name === item.service ? "" : item.service}</span

src/components/ha-temp-color-picker.ts

@@ -418,7 +418,9 @@ class HaTempColorPicker extends LitElement {
         filter: url(#marker-shadow);
       }
       .container:not(.pressed) circle {
-        transition: transform 100ms ease-in-out, fill 100ms ease-in-out;
+        transition:
+          transform 100ms ease-in-out,
+          fill 100ms ease-in-out;
       }
       .container:not(.pressed) .cursor {
         transition: transform 200ms ease-in-out;

src/components/ha-tts-voice-picker.ts

@@ -62,7 +62,8 @@ export class HaTTSVoicePicker extends LitElement {
             </ha-list-item>`
           : nothing}
         ${this._voices.map(
-          (voice) => html`<ha-list-item .value=${voice.voice_id}>
+          (voice) =>
+            html`<ha-list-item .value=${voice.voice_id}>
               ${voice.name}
             </ha-list-item>`
         )}

src/components/media-player/ha-media-player-browse.ts

@@ -930,7 +930,9 @@ export class HaMediaPlayerBrowse extends LitElement {
           margin-right: 16px;
           background-size: cover;
           border-radius: 2px;
-          transition: width 0.4s, height 0.4s;
+          transition:
+            width 0.4s,
+            height 0.4s;
         }
         .header-info {
           display: flex;
@@ -977,7 +979,9 @@ export class HaMediaPlayerBrowse extends LitElement {
           overflow: hidden;
           text-overflow: ellipsis;
           margin-bottom: 0;
-          transition: height 0.5s, margin 0.5s;
+          transition:
+            height 0.5s,
+            margin 0.5s;
         }
 
         .not-shown {
@@ -1121,7 +1125,9 @@ export class HaMediaPlayerBrowse extends LitElement {
           top: auto;
           bottom: 0px;
           right: 8px;
-          transition: bottom 0.1s ease-out, opacity 0.1s ease-out;
+          transition:
+            bottom 0.1s ease-out,
+            opacity 0.1s ease-out;
         }
 
         .child .play:hover {
@@ -1220,7 +1226,10 @@ export class HaMediaPlayerBrowse extends LitElement {
           position: relative;
           background-position: center;
           border-radius: 0;
-          transition: width 0.4s, height 0.4s, padding-bottom 0.4s;
+          transition:
+            width 0.4s,
+            height 0.4s,
+            padding-bottom 0.4s;
         }
         ha-fab {
           position: absolute;

src/components/user/ha-users-picker.ts

@@ -40,7 +40,9 @@ class HaUsersPickerLight extends LitElement {
 
     const notSelectedUsers = this._notSelectedUsers(this.users, this.value);
     return html`
-      ${guard([notSelectedUsers], () =>
+      ${guard(
+        [notSelectedUsers],
+        () =>
           this.value?.map(
             (user_id, idx) => html`
               <div>

src/data/config.ts

@@ -13,7 +13,7 @@ interface InvalidConfig {
 type ValidKeys = "trigger" | "action" | "condition";
 
 export const validateConfig = <
-  T extends Partial<{ [key in ValidKeys]: unknown }>
+  T extends Partial<{ [key in ValidKeys]: unknown }>,
 >(
   hass: HomeAssistant,
   config: T

src/data/frontend.ts

@@ -14,7 +14,7 @@ declare global {
 export type ValidUserDataKey = keyof FrontendUserData;
 
 export const fetchFrontendUserData = async <
-  UserDataKey extends ValidUserDataKey
+  UserDataKey extends ValidUserDataKey,
 >(
   conn: Connection,
   key: UserDataKey
@@ -29,7 +29,7 @@ export const fetchFrontendUserData = async <
 };
 
 export const saveFrontendUserData = async <
-  UserDataKey extends ValidUserDataKey
+  UserDataKey extends ValidUserDataKey,
 >(
   conn: Connection,
   key: UserDataKey,
@@ -42,7 +42,7 @@ export const saveFrontendUserData = async <
   });
 
 export const getOptimisticFrontendUserDataCollection = <
-  UserDataKey extends ValidUserDataKey
+  UserDataKey extends ValidUserDataKey,
 >(
   conn: Connection,
   userDataKey: UserDataKey

src/data/selector.ts

@@ -145,8 +145,7 @@ export interface DeviceSelector {
 }
 
 export interface LegacyDeviceSelector {
-  device:
+  device: DeviceSelector["device"] & {
-    | DeviceSelector["device"] & {
     /**
      * @deprecated Use filter instead
      */
@@ -185,8 +184,7 @@ export interface EntitySelector {
 }
 
 export interface LegacyEntitySelector {
-  entity:
+  entity: EntitySelector["entity"] & {
-    | EntitySelector["entity"] & {
     /**
      * @deprecated Use filter instead
      */

src/dialogs/config-flow/step-flow-create-entry.ts

@@ -48,8 +48,7 @@ class StepFlowCreateEntry extends LitElement {
               </p>
               <div class="devices">
                 ${this.devices.map(
-                  (device) =>
+                  (device) => html`
-                    html`
                     <div class="device">
                       <div>
                         <b>${computeDeviceName(device, this.hass)}</b><br />

src/dialogs/more-info/components/lights/dialog-light-color-favorite.ts

@@ -150,8 +150,7 @@ class DialogLightColorFavorite extends LitElement {
             ? html`
                 <div class="modes">
                   ${this._modes.map(
-                    (value) =>
+                    (value) => html`
-                      html`
                       <ha-icon-button-toggle
                         border-only
                         .selected=${value === this._mode}

src/dialogs/more-info/components/lights/light-color-rgb-picker.ts

@@ -415,7 +415,7 @@ class LightRgbColorPicker extends LitElement {
         number,
         number,
         number,
-        number
+        number,
       ];
       this._applyColor({ rgbww_color });
     } else if (lightSupportsColorMode(this.stateObj!, LightColorMode.RGBW)) {
@@ -427,7 +427,7 @@ class LightRgbColorPicker extends LitElement {
         number,
         number,
         number,
-        number
+        number,
       ];
       this._applyColor({ rgbw_color });
     }

src/dialogs/more-info/controls/more-info-configurator.ts

@@ -36,7 +36,8 @@ export class MoreInfoConfigurator extends LitElement {
             </ha-alert>`
           : ""}
         ${this.stateObj.attributes.fields.map(
-          (field) => html`<ha-textfield
+          (field) =>
+            html`<ha-textfield
               .label=${field.name}
               .name=${field.id}
               .type=${field.type}

src/dialogs/more-info/controls/more-info-fan.ts

@@ -299,8 +299,7 @@ class MoreInfoFan extends LitElement {
                       ></ha-svg-icon>
                     </ha-outlined-button>
                     ${this.stateObj.attributes.preset_modes?.map(
-                      (mode) =>
+                      (mode) => html`
-                        html`
                         <ha-list-item
                           .value=${mode}
                           .activated=${this._presetMode === mode}

src/dialogs/more-info/controls/more-info-media_player.ts

@@ -156,8 +156,7 @@ class MoreInfoMediaPlayer extends LitElement {
                 @closed=${stopPropagation}
               >
                 ${stateObj.attributes.source_list!.map(
-                  (source) =>
+                  (source) => html`
-                    html`
                     <mwc-list-item .value=${source}
                       >${computeAttributeValueDisplay(
                         this.hass.localize,

src/dialogs/notifications/notification-drawer.ts

@@ -108,7 +108,8 @@ export class HuiNotificationDrawer extends LitElement {
         <div class="notifications">
           ${notifications.length
             ? html`${notifications.map(
-                (notification) => html`<div class="notification">
+                (notification) =>
+                  html`<div class="notification">
                     <notification-item
                       .hass=${this.hass}
                       .notification=${notification}

src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts

@@ -158,7 +158,8 @@ export class HaVoiceCommandDialog extends LitElement {
                 ></ha-svg-icon>
               </ha-button>
               ${this._pipelines?.map(
-                (pipeline) => html`<ha-list-item
+                (pipeline) =>
+                  html`<ha-list-item
                     ?selected=${pipeline.id === this._pipelineId ||
                     (!this._pipelineId &&
                       pipeline.id === this._preferredPipeline)}
@@ -168,7 +169,10 @@ export class HaVoiceCommandDialog extends LitElement {
                   >
                     ${pipeline.name}${pipeline.id === this._preferredPipeline
                       ? html`
-                        <ha-svg-icon slot="meta" .path=${mdiStar}></ha-svg-icon>
+                          <ha-svg-icon
+                            slot="meta"
+                            .path=${mdiStar}
+                          ></ha-svg-icon>
                         `
                       : nothing}
                   </ha-list-item>`

src/layouts/hass-tabs-subpage.ts

@@ -94,8 +94,7 @@ class HassTabsSubpage extends LitElement {
       }
 
       return shownTabs.map(
-        (page) =>
+        (page) => html`
-          html`
           <a href=${page.path}>
             <ha-tab
               .hass=${this.hass}

src/panels/calendar/ha-panel-calendar.ts

@@ -79,8 +79,7 @@ class PanelCalendar extends LitElement {
               ${this.hass.localize("ui.components.calendar.my_calendars")}
             </div>
             ${this._calendars.map(
-              (selCal) =>
+              (selCal) => html`
-                html`
                 <div>
                   <mwc-formfield .label=${selCal.name}>
                     <mwc-checkbox

src/panels/config/application_credentials/dialog-add-application-credential.ts

@@ -28,7 +28,8 @@ interface Domain {
   name: string;
 }
 
-const rowRenderer: ComboBoxLitRenderer<Domain> = (item) => html`<mwc-list-item>
+const rowRenderer: ComboBoxLitRenderer<Domain> = (item) =>
+  html`<mwc-list-item>
     <span>${item.name}</span>
   </mwc-list-item>`;
 

src/panels/config/areas/ha-config-area-page.ts

@@ -283,8 +283,7 @@ class HaConfigAreaPage extends SubscribeMixin(LitElement) {
               .header=${this.hass.localize("ui.panel.config.devices.caption")}
               >${devices.length
                 ? devices.map(
-                    (device) =>
+                    (device) => html`
-                      html`
                       <a href="/config/devices/device/${device.id}">
                         <paper-item>
                           <paper-item-body> ${device.name} </paper-item-body>

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

@@ -109,7 +109,8 @@ export class HaChooseAction extends LitElement implements ActionElement {
 
     return html`
       ${(action.choose ? ensureArray(action.choose) : []).map(
-        (option, idx) => html`<ha-card>
+        (option, idx) =>
+          html`<ha-card>
             <ha-expansion-panel
               leftChevron
               @expanded-changed=${this._expandedChanged}

src/panels/config/automation/ha-automation-picker.ts

@@ -212,8 +212,7 @@ class HaAutomationPicker extends LitElement {
         title: "",
         width: this.narrow ? undefined : "10%",
         type: "overflow-menu",
-        template: (_: string, automation: any) =>
+        template: (_: string, automation: any) => html`
-          html`
           <ha-icon-overflow-menu
             .hass=${this.hass}
             narrow

src/panels/config/automation/thingtalk/ha-thingtalk-placeholders.ts

@@ -133,8 +133,7 @@ export class ThingTalkPlaceholders extends SubscribeMixin(LitElement) {
         <div>
           ${this._error ? html` <div class="error">${this._error}</div> ` : ""}
           ${Object.entries(this.placeholders).map(
-            ([type, placeholders]) =>
+            ([type, placeholders]) => html`
-              html`
               <h3>
                 ${this.hass.localize(
                   `ui.panel.config.automation.editor.${type}s.name`
@@ -230,9 +229,7 @@ export class ThingTalkPlaceholders extends SubscribeMixin(LitElement) {
                       `ui.panel.config.automation.thingtalk.link_devices.unknown_placeholder`
                     )}<br />
                     ${placeholder.domains}<br />
-                      ${placeholder.fields.map(
+                    ${placeholder.fields.map((field) => html` ${field}<br /> `)}
-                        (field) => html` ${field}<br /> `
-                      )}
                   </div>
                 `;
               })}

src/panels/config/blueprint/ha-blueprint-overview.ts

@@ -125,8 +125,7 @@ class HaBlueprintOverview extends LitElement {
         direction: "asc",
         grows: true,
         template: narrow
-          ? (name, entity: any) =>
+          ? (name, entity: any) => html`
-              html`
               ${name}<br />
               <div class="secondary">${entity.path}</div>
             `

src/panels/config/core/ha-config-system-navigation.ts

@@ -181,9 +181,8 @@ class HaConfigSystemNavigation extends LitElement {
       const hardwareInfo: HardwareInfo = await this.hass.callWS({
         type: "hardware/info",
       });
-      this._boardName = hardwareInfo?.hardware.find(
+      this._boardName = hardwareInfo?.hardware.find((hw) => hw.board !== null)
-        (hw) => hw.board !== null
+        ?.name;
-      )?.name;
     } else if (isHassioLoaded) {
       const osData: HassioHassOSInfo = await fetchHassioHassOsInfo(this.hass);
       if (osData.board) {

src/panels/config/devices/device-detail/ha-device-automation-card.ts

@@ -20,7 +20,7 @@ declare global {
 }
 
 export abstract class HaDeviceAutomationCard<
-  T extends DeviceAutomation
+  T extends DeviceAutomation,
 > extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -76,8 +76,7 @@ export abstract class HaDeviceAutomationCard<
       <div class="content">
         <ha-chip-set>
           ${automations.map(
-            (automation, idx) =>
+            (automation, idx) => html`
-              html`
               <ha-chip
                 .index=${idx}
                 @click=${this._handleAutomationClicked}

src/panels/config/devices/ha-config-device-page.ts

@@ -376,8 +376,7 @@ export class HaConfigDevicePage extends LitElement {
     const firstDeviceAction = actions.shift();
 
     if (device.disabled_by) {
-      deviceInfo.push(
+      deviceInfo.push(html`
-        html`
         <ha-alert alert-type="warning">
           ${this.hass.localize(
             "ui.panel.config.devices.enabled_cause",
@@ -400,8 +399,7 @@ export class HaConfigDevicePage extends LitElement {
               </div>
             `
           : ""}
-        `
+      `);
-      );
     }
 
     this._renderIntegrationInfo(device, integrations, deviceInfo);
@@ -751,8 +749,7 @@ export class HaConfigDevicePage extends LitElement {
                   ? html`
                       <div>
                         ${this._deviceAlerts.map(
-                          (alert) =>
+                          (alert) => html`
-                            html`
                             <ha-alert .alertType=${alert.level}>
                               ${alert.text}
                             </ha-alert>

src/panels/config/energy/components/ha-energy-battery-settings.ts

@@ -76,8 +76,7 @@ export class EnergyBatterySettings extends LitElement {
             >
           </p>
           ${batteryValidation.map(
-            (result) =>
+            (result) => html`
-              html`
               <ha-energy-validation-result
                 .hass=${this.hass}
                 .issues=${result}

src/panels/config/energy/components/ha-energy-device-settings.ts

@@ -68,8 +68,7 @@ export class EnergyDeviceSettings extends LitElement {
             >
           </p>
           ${this.validationResult?.device_consumption.map(
-            (result) =>
+            (result) => html`
-              html`
               <ha-energy-validation-result
                 .hass=${this.hass}
                 .issues=${result}

src/panels/config/energy/components/ha-energy-gas-settings.ts

@@ -74,8 +74,7 @@ export class EnergyGasSettings extends LitElement {
             >
           </p>
           ${gasValidation.map(
-            (result) =>
+            (result) => html`
-              html`
               <ha-energy-validation-result
                 .hass=${this.hass}
                 .issues=${result}

src/panels/config/energy/components/ha-energy-solar-settings.ts

@@ -79,8 +79,7 @@ export class EnergySolarSettings extends LitElement {
             >
           </p>
           ${solarValidation.map(
-            (result) =>
+            (result) => html`
-              html`
               <ha-energy-validation-result
                 .hass=${this.hass}
                 .issues=${result}

src/panels/config/energy/components/ha-energy-water-settings.ts

@@ -75,8 +75,7 @@ export class EnergyWaterSettings extends LitElement {
             >
           </p>
           ${waterValidation.map(
-            (result) =>
+            (result) => html`
-              html`
               <ha-energy-validation-result
                 .hass=${this.hass}
                 .issues=${result}

src/panels/config/energy/dialogs/dialog-energy-solar-settings.ts

@@ -139,7 +139,8 @@ export class DialogEnergySolarSettings
         ${this._forecast
           ? html`<div class="forecast-options">
               ${this._configEntries?.map(
-                (entry) => html`<ha-formfield
+                (entry) =>
+                  html`<ha-formfield
                     .label=${html`<div
                       style="display: flex; align-items: center;"
                     >

src/panels/config/entities/entity-registry-settings-editor.ts

@@ -892,11 +892,9 @@ export class EntityRegistrySettingsEditor extends LitElement {
                   "ui.dialogs.entity_registry.editor.use_device_area"
                 )}
                 ${this.hass.devices[this.entry.device_id].area_id
-                  ? `(${
+                  ? `(${this.hass.areas[
-                      this.hass.areas[
                       this.hass.devices[this.entry.device_id].area_id!
-                      ]?.name
+                    ]?.name})`
-                    })`
                   : ""}</span
               >
               <span slot="description"

src/panels/config/entities/ha-config-entities.ts

@@ -201,8 +201,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
         direction: "asc",
         grows: true,
         template: narrow
-          ? (name, entity: EntityRow) =>
+          ? (name, entity: EntityRow) => html`
-              html`
               ${name}<br />
               <div class="secondary">
                 ${entity.entity_id} |

src/panels/config/hardware/dialog-hardware-available.ts

@@ -110,8 +110,7 @@ class DialogHardwareAvailable extends LitElement implements HassDialog {
           </search-input>
         </div>
         ${devices.map(
-          (device) =>
+          (device) => html`
-            html`
             <ha-expansion-panel
               .header=${device.name}
               .secondary=${device.by_id || undefined}

src/panels/config/helpers/forms/ha-counter-form.ts

@@ -53,7 +53,8 @@ class HaCounterForm extends LitElement {
   }
 
   public focus() {
-    this.updateComplete.then(() =>
+    this.updateComplete.then(
+      () =>
         (
           this.shadowRoot?.querySelector("[dialogInitialFocus]") as HTMLElement
         )?.focus()

src/panels/config/helpers/forms/ha-input_boolean-form.ts

@@ -31,7 +31,8 @@ class HaInputBooleanForm extends LitElement {
   }
 
   public focus() {
-    this.updateComplete.then(() =>
+    this.updateComplete.then(
+      () =>
         (
           this.shadowRoot?.querySelector("[dialogInitialFocus]") as HTMLElement
         )?.focus()

src/panels/config/helpers/forms/ha-input_button-form.ts

@@ -31,7 +31,8 @@ class HaInputButtonForm extends LitElement {
   }
 
   public focus() {
-    this.updateComplete.then(() =>
+    this.updateComplete.then(
+      () =>
         (
           this.shadowRoot?.querySelector("[dialogInitialFocus]") as HTMLElement
         )?.focus()

src/panels/config/helpers/forms/ha-input_datetime-form.ts

@@ -45,7 +45,8 @@ class HaInputDateTimeForm extends LitElement {
   }
 
   public focus() {
-    this.updateComplete.then(() =>
+    this.updateComplete.then(
+      () =>
         (
           this.shadowRoot?.querySelector("[dialogInitialFocus]") as HTMLElement
         )?.focus()

src/panels/config/helpers/forms/ha-input_number-form.ts

@@ -60,7 +60,8 @@ class HaInputNumberForm extends LitElement {
   }
 
   public focus() {
-    this.updateComplete.then(() =>
+    this.updateComplete.then(
+      () =>
         (
           this.shadowRoot?.querySelector("[dialogInitialFocus]") as HTMLElement
         )?.focus()

src/panels/config/helpers/forms/ha-input_select-form.ts

@@ -43,7 +43,8 @@ class HaInputSelectForm extends LitElement {
   }
 
   public focus() {
-    this.updateComplete.then(() =>
+    this.updateComplete.then(
+      () =>
         (
           this.shadowRoot?.querySelector("[dialogInitialFocus]") as HTMLElement
         )?.focus()

src/panels/config/helpers/forms/ha-input_text-form.ts

@@ -50,7 +50,8 @@ class HaInputTextForm extends LitElement {
   }
 
   public focus() {
-    this.updateComplete.then(() =>
+    this.updateComplete.then(
+      () =>
         (
           this.shadowRoot?.querySelector("[dialogInitialFocus]") as HTMLElement
         )?.focus()

src/panels/config/helpers/forms/ha-schedule-form.ts

@@ -98,7 +98,8 @@ class HaScheduleForm extends LitElement {
   }
 
   public focus() {
-    this.updateComplete.then(() =>
+    this.updateComplete.then(
+      () =>
         (
           this.shadowRoot?.querySelector("[dialogInitialFocus]") as HTMLElement
         )?.focus()

src/panels/config/helpers/forms/ha-timer-form.ts

@@ -39,7 +39,8 @@ class HaTimerForm extends LitElement {
   }
 
   public focus() {
-    this.updateComplete.then(() =>
+    this.updateComplete.then(
+      () =>
         (
           this.shadowRoot?.querySelector("[dialogInitialFocus]") as HTMLElement
         )?.focus()

src/panels/config/helpers/ha-config-helpers.ts

@@ -96,8 +96,7 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
           filterable: true,
           grows: true,
           direction: "asc",
-          template: (name, item: any) =>
+          template: (name, item: any) => html`
-            html`
             ${name}
             ${narrow
               ? html` <div class="secondary">${item.entity_id}</div> `

src/panels/config/integrations/ha-config-integration-page.ts

@@ -410,7 +410,8 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
                   </h1>
                   <mwc-list>
                     ${discoveryFlows.map(
-                      (flow) => html`<ha-list-item
+                      (flow) =>
+                        html`<ha-list-item
                           hasMeta
                           class="discovered"
                           noninteractive

src/panels/config/integrations/ha-config-integrations-dashboard.ts

@@ -150,7 +150,7 @@ class HaConfigIntegrationsDashboard extends SubscribeMixin(LitElement) {
     ): [
       [string, ConfigEntryExtended[]][],
       ConfigEntryExtended[],
-      ConfigEntryExtended[]
+      ConfigEntryExtended[],
     ] => {
       let filteredConfigEntries: ConfigEntryExtended[];
       const ignored: ConfigEntryExtended[] = [];

src/panels/config/integrations/ha-domain-integrations.ts

@@ -44,7 +44,8 @@ class HaDomainIntegrations extends LitElement {
               ${this.hass.localize("ui.panel.config.integrations.discovered")}
             </h3>
             ${this.flowsInProgress.map(
-              (flow) => html`<mwc-list-item
+              (flow) =>
+                html`<mwc-list-item
                   graphic="medium"
                   .flow=${flow}
                   @request-selected=${this._flowInProgressPicked}

src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts

@@ -223,7 +223,8 @@ class ZHAConfigDashboard extends LitElement {
         </ha-card>
         ${this._configuration
           ? Object.entries(this._configuration.schemas).map(
-              ([section, schema]) => html`<ha-card
+              ([section, schema]) =>
+                html`<ha-card
                   header=${this.hass.localize(
                     `component.zha.config_panel.${section}.title`
                   )}

src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts

@@ -94,8 +94,9 @@ export class ZHAGroupsDashboard extends LitElement {
               title: this.hass.localize("ui.panel.config.zha.groups.group_id"),
               type: "numeric",
               width: "15%",
-              template: (groupId: number) =>
+              template: (groupId: number) => html`
-                html` ${formatAsPaddedHex(groupId)} `,
+                ${formatAsPaddedHex(groupId)}
+              `,
               sortable: true,
             },
             members: {

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

@@ -228,7 +228,8 @@ class DialogZWaveJSAddNode extends LitElement {
                   .sort()
                   .reverse()
                   .map(
-                    (securityClass) => html`<ha-formfield
+                    (securityClass) =>
+                      html`<ha-formfield
                         .label=${html`<b
                             >${this.hass.localize(
                               `ui.panel.config.zwave_js.security_classes.${SecurityClass[securityClass]}.title`

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

@@ -364,7 +364,7 @@ class DialogZWaveJSNodeStatistics extends LitElement {
 
         const workingRoutesValueMap: [
           string,
-          WorkingRouteStatistics | null | undefined
+          WorkingRouteStatistics | null | undefined,
         ][] = [
           ["lwr", this._nodeStatistics?.lwr],
           ["nlwr", this._nodeStatistics?.nlwr],

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

@@ -179,7 +179,8 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
               item.endpoint.toString()
             )
           ).map(
-            ([endpoint, configParamEntries]) => html`<div class="content">
+            ([endpoint, configParamEntries]) =>
+              html`<div class="content">
                 <h3>
                   ${this.hass.localize(
                     "ui.panel.config.zwave_js.node_config.endpoint",
@@ -195,7 +196,8 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
                         : paramA.property_key! - paramB.property_key!
                     )
                     .map(
-                    ([id, item]) => html` <ha-settings-row
+                      ([id, item]) =>
+                        html` <ha-settings-row
                           class="config-item"
                           .configId=${id}
                           .narrow=${this.narrow}

src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts

@@ -123,8 +123,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
           sortable: true,
           filterable: true,
           width: "20%",
-          template: (mode) =>
+          template: (mode) => html`
-            html`
             ${this.hass.localize(
               `ui.panel.config.lovelace.dashboards.conf_mode.${mode}`
             ) || mode}

src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts

@@ -58,8 +58,7 @@ export class HaConfigLovelaceRescources extends LitElement {
         sortable: true,
         filterable: true,
         width: "30%",
-        template: (type) =>
+        template: (type) => html`
-          html`
           ${this.hass.localize(
             `ui.panel.config.lovelace.resources.types.${type}`
           ) || type}

src/panels/config/network/supervisor-network.ts

@@ -139,8 +139,7 @@ export class HassioNetwork extends LitElement {
                         ${this._accessPoints.accesspoints
                           .filter((ap) => ap.ssid)
                           .map(
-                            (ap) =>
+                            (ap) => html`
-                              html`
                               <mwc-list-item
                                 twoline
                                 @click=${this._selectAP}

src/panels/config/repairs/dialog-system-information.ts

@@ -305,13 +305,11 @@ class DialogSystemInformation extends LitElement {
     const sections: TemplateResult[] = [];
 
     if (!this._systemInfo) {
-      sections.push(
+      sections.push(html`
-        html`
         <div class="loading-container">
           <ha-circular-progress active></ha-circular-progress>
         </div>
-        `
+      `);
-      );
     } else {
       const domains = Object.keys(this._systemInfo).sort(sortKeys);
       for (const domain of domains) {
@@ -371,8 +369,7 @@ class DialogSystemInformation extends LitElement {
           `);
         }
         if (domain !== "homeassistant") {
-          sections.push(
+          sections.push(html`
-            html`
             <div class="card-header">
               <h3>${domainToName(this.hass.localize, domain)}</h3>
               ${!domainInfo.manage_url
@@ -387,8 +384,7 @@ class DialogSystemInformation extends LitElement {
                     </a>
                   `}
             </div>
-            `
+          `);
-          );
         }
         sections.push(html`
           <table>

src/panels/config/scene/ha-scene-dashboard.ts

@@ -90,8 +90,9 @@ class HaSceneDashboard extends LitElement {
             "ui.panel.config.scene.picker.headers.state"
           ),
           type: "icon",
-          template: (_, scene) =>
+          template: (_, scene) => html`
-            html` <ha-state-icon .state=${scene}></ha-state-icon> `,
+            <ha-state-icon .state=${scene}></ha-state-icon>
+          `,
         },
         name: {
           title: this.hass.localize(
@@ -151,8 +152,7 @@ class HaSceneDashboard extends LitElement {
         title: "",
         width: "72px",
         type: "overflow-menu",
-        template: (_: string, scene: any) =>
+        template: (_: string, scene: any) => html`
-          html`
           <ha-icon-overflow-menu
             .hass=${this.hass}
             narrow

src/panels/config/scene/ha-scene-editor.ts

@@ -324,8 +324,7 @@ export class HaSceneEditor extends SubscribeMixin(
                   </div>
 
                   ${devices.map(
-                    (device) =>
+                    (device) => html`
-                      html`
                       <ha-card outlined>
                         <h1 class="card-header">
                           ${device.name}

src/panels/config/script/ha-script-picker.ts

@@ -165,8 +165,7 @@ class HaScriptPicker extends LitElement {
       title: "",
       width: this.narrow ? undefined : "10%",
       type: "overflow-menu",
-      template: (_: string, script: any) =>
+      template: (_: string, script: any) => html`
-        html`
         <ha-icon-overflow-menu
           .hass=${this.hass}
           narrow
@@ -201,9 +200,7 @@ class HaScriptPicker extends LitElement {
               action: () => this._duplicate(script),
             },
             {
-                label: this.hass.localize(
+              label: this.hass.localize("ui.panel.config.script.picker.delete"),
-                  "ui.panel.config.script.picker.delete"
-                ),
               path: mdiDelete,
               action: () => this._deleteConfirm(script),
               warning: true,

src/panels/config/tags/ha-config-tags.ts

@@ -70,7 +70,8 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
           sortable: true,
           filterable: true,
           grows: true,
-          template: (name, tag: any) => html`${name}
+          template: (name, tag: any) =>
+            html`${name}
             ${narrow
               ? html`<div class="secondary">
                   ${tag.last_scanned_datetime
@@ -106,7 +107,8 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
           title: "",
           label: this.hass.localize("ui.panel.config.tag.headers.write"),
           type: "icon-button",
-          template: (_write, tag: any) => html` <ha-icon-button
+          template: (_write, tag: any) =>
+            html` <ha-icon-button
               .tag=${tag}
               @click=${this._handleWriteClick}
               .label=${this.hass.localize("ui.panel.config.tag.write")}
@@ -117,17 +119,21 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
       columns.automation = {
         title: "",
         type: "icon-button",
-        template: (_automation, tag: any) => html` <ha-icon-button
+        template: (_automation, tag: any) =>
+          html` <ha-icon-button
             .tag=${tag}
             @click=${this._handleAutomationClick}
-          .label=${this.hass.localize("ui.panel.config.tag.create_automation")}
+            .label=${this.hass.localize(
+              "ui.panel.config.tag.create_automation"
+            )}
             .path=${mdiRobot}
           ></ha-icon-button>`,
       };
       columns.edit = {
         title: "",
         type: "icon-button",
-        template: (_settings, tag: any) => html` <ha-icon-button
+        template: (_settings, tag: any) =>
+          html` <ha-icon-button
             .tag=${tag}
             @click=${this._handleEditClick}
             .label=${this.hass.localize("ui.panel.config.tag.edit")}