refactor: reformat and sort imports

info.md

@@ -1,8 +1,9 @@
 This is a complete rewrite of the original [`button-entity-row`](https://github.com/custom-cards/button-entity-row) plugin, that is more consistent with Home Assistant's [button card](https://www.home-assistant.io/lovelace/button/), it uses **actions** including `tap_action`, `double_tap_action` and `hold_action` allowing for greater customisation of the buttons behaviour. It also retains the ability to style the button based on state, but adds the ability to style the icon, text, and ripple effect separately. There is a new option for **icon alignment** and the buttons have haptic feedback.
 
-Check out the [documentation](https://github.com/jcwillox/lovelace-paper-buttons-row) for the configuration options and examples. 
+Check out the [documentation](https://github.com/jcwillox/lovelace-paper-buttons-row) for the configuration options and examples.
 
 ## Images
+
 <img src="https://github.com/jcwillox/lovelace-paper-buttons-row/blob/master/examples/example-5.gif?raw=true" width="400px">
 <img src="https://github.com/jcwillox/lovelace-paper-buttons-row/blob/master/examples/example-3.png?raw=true" width="400px">
 <img src="https://github.com/jcwillox/lovelace-paper-buttons-row/blob/master/examples/example-1.gif?raw=true" width="400px">
@@ -14,12 +15,13 @@ Check out the [documentation](https://github.com/jcwillox/lovelace-paper-buttons
 More example images than you could poke a stick at, I know...
 
 ## Features
-* Create icon, text, or icon-text buttons.
-* Add css styling to each button per state!
-* Style the icon, name, state, and ripple effect separately.
-* Change the icon alignment and layout of the icon, name and state.
-* Add actions for `tap_action`, `double_tap_action` and `hold_action`.
-* Create multiple rows of buttons.
-* Embed buttons in other entity rows.
-* Tooltip support, configure custom tooltips.
-* Templating support.
+
+- Create icon, text, or icon-text buttons.
+- Add css styling to each button per state!
+- Style the icon, name, state, and ripple effect separately.
+- Change the icon alignment and layout of the icon, name and state.
+- Add actions for `tap_action`, `double_tap_action` and `hold_action`.
+- Create multiple rows of buttons.
+- Embed buttons in other entity rows.
+- Tooltip support, configure custom tooltips.
+- Templating support.

src/action-handler.ts

@@ -1,16 +1,16 @@
+import {
+  ActionHandlerDetail,
+  ActionHandlerOptions,
+  fireEvent,
+} from "custom-card-helpers";
 import { noChange } from "lit";
-import { deepEqual } from "./deep-equal";
 import {
   AttributePart,
   Directive,
+  DirectiveParameters,
   directive,
-  DirectiveParameters
 } from "lit/directive.js";
-import {
-  ActionHandlerDetail,
-  ActionHandlerOptions,
-  fireEvent
-} from "custom-card-helpers";
+import { deepEqual } from "./deep-equal";
 
 const isTouch =
   "ontouchstart" in window ||
@@ -86,7 +86,7 @@ class ActionHandler extends HTMLElement implements IActionHandler {
       height: isTouch ? "100px" : "50px",
       transform: "translate(-50%, -50%)",
       pointerEvents: "none",
-      zIndex: "999"
+      zIndex: "999",
     });
 
     this.appendChild(this.ripple);
@@ -99,7 +99,7 @@ class ActionHandler extends HTMLElement implements IActionHandler {
       "touchmove",
       "mousewheel",
       "wheel",
-      "scroll"
+      "scroll",
     ].forEach(ev => {
       document.addEventListener(
         ev,
@@ -246,13 +246,13 @@ class ActionHandler extends HTMLElement implements IActionHandler {
     };
 
     element.addEventListener("touchstart", element.actionHandler.start, {
-      passive: true
+      passive: true,
     });
     element.addEventListener("touchend", element.actionHandler.end);
     element.addEventListener("touchcancel", element.actionHandler.end);
 
     element.addEventListener("mousedown", element.actionHandler.start, {
-      passive: true
+      passive: true,
     });
     element.addEventListener("click", element.actionHandler.end);
 
@@ -263,7 +263,7 @@ class ActionHandler extends HTMLElement implements IActionHandler {
     Object.assign(this.style, {
       left: `${x}px`,
       top: `${y}px`,
-      display: null
+      display: null,
     });
     this.ripple.disabled = false;
     this.ripple.startPress();

src/action.ts

@@ -1,9 +1,9 @@
 import {
+  HomeAssistant,
   fireEvent,
   forwardHaptic,
-  HomeAssistant,
   navigate,
-  toggleEntity
+  toggleEntity,
 } from "custom-card-helpers";
 import { ButtonActionConfig, ButtonConfig } from "./types";
 import { showToast } from "./utils";
@@ -35,7 +35,7 @@ export function handleActionConfig(
 ) {
   if (!actionConfig) {
     actionConfig = {
-      action: "more-info"
+      action: "more-info",
     };
   }
 
@@ -67,7 +67,7 @@ export function handleActionConfig(
         showToast(node, {
           message: hass.localize(
             "ui.panel.lovelace.cards.actions.no_entity_more_info"
-          )
+          ),
         });
         forwardHaptic("failure");
       }
@@ -78,7 +78,7 @@ export function handleActionConfig(
         showToast(node, {
           message: hass.localize(
             "ui.panel.lovelace.cards.actions.no_navigation_path"
-          )
+          ),
         });
         forwardHaptic("failure");
         return;
@@ -89,7 +89,7 @@ export function handleActionConfig(
     case "url":
       if (!actionConfig.url_path) {
         showToast(node, {
-          message: hass.localize("ui.panel.lovelace.cards.actions.no_url")
+          message: hass.localize("ui.panel.lovelace.cards.actions.no_url"),
         });
         forwardHaptic("failure");
         return;
@@ -102,7 +102,7 @@ export function handleActionConfig(
         showToast(node, {
           message: hass.localize(
             "ui.panel.lovelace.cards.actions.no_entity_toggle"
-          )
+          ),
         });
         forwardHaptic("failure");
         return;
@@ -113,7 +113,7 @@ export function handleActionConfig(
     case "call-service": {
       if (!actionConfig.service) {
         showToast(node, {
-          message: hass.localize("ui.panel.lovelace.cards.actions.no_service")
+          message: hass.localize("ui.panel.lovelace.cards.actions.no_service"),
         });
         forwardHaptic("failure");
         return;
@@ -131,7 +131,7 @@ export function handleActionConfig(
     case "fire-event": {
       if (!actionConfig.event_type) {
         showToast(node, {
-          message: "No event to call specified"
+          message: "No event to call specified",
         });
         forwardHaptic("failure");
         return;

src/const.ts

@@ -8,7 +8,7 @@ export const DOMAINS_TOGGLE = new Set([
   "cover",
   "script",
   "vacuum",
-  "lock"
+  "lock",
 ]);
 
 export const STATES_ON = new Set(["open", "unlocked", "on"]);

src/entity-row.ts

@@ -1,6 +1,6 @@
-import { createEntityRow } from "card-tools/src/lovelace-element";
 import { provideHass } from "card-tools/src/hass";
-import { fireEvent, HomeAssistant } from "custom-card-helpers";
+import { createEntityRow } from "card-tools/src/lovelace-element";
+import { HomeAssistant, fireEvent } from "custom-card-helpers";
 import { LitElement, PropertyValues } from "lit";
 import { ExternalPaperButtonRowConfig } from "./types";
 
@@ -36,7 +36,7 @@ createModule("hui-generic-entity-row", function () {
 
     const paperButtons = createEntityRow({
       type: "custom:paper-buttons-row",
-      ...pbConfig
+      ...pbConfig,
     });
 
     provideHass(paperButtons);

src/entity.ts

@@ -1,4 +1,4 @@
-import { computeEntity, HomeAssistant } from "custom-card-helpers";
+import { HomeAssistant, computeEntity } from "custom-card-helpers";
 import { ButtonConfig } from "./types";
 
 export const computeStateName = stateObj => {

src/main.ts

@@ -1,41 +1,40 @@
-import { html, LitElement, PropertyValues, unsafeCSS } from "lit";
+import "./entity-row";
+import { hass } from "card-tools/src/hass";
+import {
+  ActionHandlerEvent,
+  HomeAssistant,
+  computeDomain,
+  stateIcon,
+} from "custom-card-helpers";
+import deepmerge from "deepmerge";
+import { HassEntity } from "home-assistant-js-websocket";
+import { LitElement, PropertyValues, html, unsafeCSS } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { StyleInfo, styleMap } from "lit/directives/style-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { StyleInfo, styleMap } from "lit/directives/style-map.js";
 import { handleAction, hasAction } from "./action";
-import { hass } from "card-tools/src/hass";
+import { actionHandler } from "./action-handler";
 import {
   DOMAINS_TOGGLE,
+  STATES_ON,
   STATE_OFF,
   STATE_ON,
   STATE_UNAVAILABLE,
-  STATES_ON,
-  TEMPLATE_OPTIONS
+  TEMPLATE_OPTIONS,
 } from "./const";
 import { computeStateName, computeTooltip } from "./entity";
-import deepmerge from "deepmerge";
-import { actionHandler } from "./action-handler";
-import "./entity-row";
+import { handleButtonPreset } from "./presets";
+import styles from "./styles.css?inline";
 import { renderTemplateObjects, subscribeTemplate } from "./template";
-import {
-  ActionHandlerEvent,
-  computeDomain,
-  HomeAssistant,
-  stateIcon
-} from "custom-card-helpers";
 import {
   ButtonConfig,
   ExternalButtonConfig,
   ExternalButtonType,
   ExternalPaperButtonRowConfig,
   PaperButtonRowConfig,
   StyleConfig,
-  Template
 } from "./types";
-import { HassEntity } from "home-assistant-js-websocket";
-import styles from "./styles.css?inline";
 import { arrayToObject } from "./utils";
-import { handleButtonPreset } from "./presets";
 
 console.groupCollapsed(
   `%c ${__NAME__} %c ${__VERSION__} `,
@@ -244,7 +243,7 @@ export class PaperButtonsRow extends LitElement {
               const styles = this._getStyles(config);
               const buttonStyles = {
                 ...this._getStateStyles(domain, stateObj),
-                ...(styles.button || {})
+                ...(styles.button || {}),
               } as StyleInfo;
 
               const activeStates = config.active
@@ -258,7 +257,7 @@ export class PaperButtonsRow extends LitElement {
                   .actionHandler="${actionHandler({
                     hasHold: hasAction(config.hold_action),
                     hasDoubleClick: hasAction(config.double_tap_action),
-                    repeat: config.hold_action?.repeat
+                    repeat: config.hold_action?.repeat,
                   })}"
                   style="${styleMap(buttonStyles)}"
                   class="${this._getClass(
@@ -379,13 +378,13 @@ export class PaperButtonsRow extends LitElement {
 
     if (stateObj.attributes.rgb_color) {
       return {
-        "--pbs-button-rgb-state-color": stateObj.attributes.rgb_color
+        "--pbs-button-rgb-state-color": stateObj.attributes.rgb_color,
       };
     } else {
       const rgb = this._getStateColor(stateObj, domain);
       if (rgb) {
         return {
-          "--pbs-button-rgb-state-color": rgb.join(", ")
+          "--pbs-button-rgb-state-color": rgb.join(", "),
         };
       }
     }
@@ -489,8 +488,8 @@ export class PaperButtonsRow extends LitElement {
             action: "call-service",
             service: "scene.turn_on",
             service_data: {
-              entity_id: bConfig.entity
-            }
+              entity_id: bConfig.entity,
+            },
           };
         } else {
           bConfig.tap_action = { action: "more-info" };

src/presets.ts

@@ -1,6 +1,6 @@
-import { ButtonConfig, PaperButtonRowConfig } from "./types";
-import deepmerge from "deepmerge";
 import { getLovelace } from "custom-card-helpers";
+import deepmerge from "deepmerge";
+import { ButtonConfig, PaperButtonRowConfig } from "./types";
 
 let lovelace = getLovelace();
 
@@ -14,7 +14,7 @@ export function handleButtonPreset(
   return preset
     ? deepmerge(
         {
-          mushroom: presetMushroom
+          mushroom: presetMushroom,
         }[preset] ||
           userPresets[preset] ||
           {},
@@ -38,7 +38,7 @@ const presetMushroom: ButtonConfig = {
       "--pbs-button-rgb-bg-color": "var(--pbs-button-rgb-color)",
       "--pbs-button-rgb-bg-active-color": "var(--pbs-button-rgb-active-color)",
       "--pbs-button-rgb-bg-opacity": "0.05",
-      "--pbs-button-rgb-bg-active-opacity": "0.2"
-    }
-  }
+      "--pbs-button-rgb-bg-active-opacity": "0.2",
+    },
+  },
 };

src/template.ts

@@ -48,7 +48,7 @@ export function subscribeTemplate(this: PaperButtonsRow, config, object, key) {
 
     this._templates?.push({
       template: option,
-      callback: res => res && (object[key] = res)
+      callback: res => res && (object[key] = res),
     });
   } else if (hasTemplate(option)) {
     subscribeRenderTemplate(
@@ -59,7 +59,7 @@ export function subscribeTemplate(this: PaperButtonsRow, config, object, key) {
       },
       {
         template: option,
-        variables: { config: config }
+        variables: { config: config },
       }
     );
     object[key] = "";

vite.config.ts

@@ -1,6 +1,6 @@
 // https://vitejs.dev/config/
-import { defineConfig } from "vite";
 import { execSync } from "child_process";
+import { defineConfig } from "vite";
 import pkg from "./package.json";
 
 const quoteCommand = command => {
@@ -18,18 +18,18 @@ export default defineConfig({
   build: {
     lib: {
       entry: "src/main.ts",
-      formats: ["es"]
-    }
+      formats: ["es"],
+    },
   },
   esbuild: {
-    legalComments: "none"
+    legalComments: "none",
   },
   define: {
     __NAME__: JSON.stringify(pkg.name.toUpperCase()),
     __BRANCH__: quoteCommand("git rev-parse --abbrev-ref HEAD"),
     __COMMIT__: quoteCommandOrEnv("git rev-parse HEAD", "GITHUB_SHA"),
     __VERSION__: quoteCommand("git describe --tags --dirty --always"),
     __REPO_URL__: quoteCommand("git remote get-url origin").replace(".git", ""),
-    __BUILD_TIME__: JSON.stringify(new Date().toISOString())
-  }
+    __BUILD_TIME__: JSON.stringify(new Date().toISOString()),
+  },
 });