Fix Lit helper resolution and threshold thresholding

Author: pacemaker82

README.md

@@ -101,7 +101,7 @@ Common keys for `pv`, `grid`, `home`, `battery`. The following settings are poss
 | ------------------- | ----------------------- | ------------------------------------------------------------------------------- |
 | Entity              | `entity`                | Sensor/entity id used for values.                                               |
 | Color               | `color`                 | Overrides line/icon/text color for that entity.                                 |
-| Threshold           | `threshold`             | Values below this are zeroed (per `threshold_mode`) and dimmed.                 |
+| Threshold           | `threshold`             | Values below this are zeroed (per `threshold_mode`) and dimmed. A threshold of `0` suppresses `0` and negative values.                 |
 | Decimals            | `decimal_places`        | Number of decimals to display (defaults to card-level `decimal_places`, or 1).                                      |
 | Unit override       | `unit` / `unit_of_measurement` | Converts `W` to `kW` if set to `kW`         |
 | Invert state values | `invert_state_values`   | Flip positive/negative for the grid/battery readings      |
@@ -214,7 +214,7 @@ Devices are power feeds within your home that you want to show in the card. By d
 | Name Label            | `name`                  | Show a label for each device. Can use either a string or entity ID. Only works with card set to 4 or more rows in height in the sections UI. [See here](https://github.com/pacemaker82/Compact-Power-Card#managing-the-size-of-the-card) for more                                              |
 | Icon             | `icon`                  | Optional icon for the device badge.                                              |
 | Color            | `color`                 | Optional color override for that device.                                         |
-| Threshold        | `threshold`             | Dims/zeros device below threshold (in watts) (per `threshold_mode`).                        |
+| Threshold        | `threshold`             | Dims/zeros device below threshold (in watts) (per `threshold_mode`). A threshold of `0` suppresses `0` and negative values.                        |
 | Subtract from home | `subtract_from_home` | `true` or `false` - Overrides card-level `subtract_devices_from_home` for this device. |
 | Force hide under threshold | `force_hide_under_threshold` | If true, hides the device entirely when under threshold. Will hide at 0 W if no threshold set. |
 | Decimals         | `decimal_places`        | Decimal places for that device (defaults to card-level `decimal_places`).                                                  |

compact-power-card.js

@@ -1,5 +1,31 @@
-class CompactPowerCard extends (window.LitElement ||
-  Object.getPrototypeOf(customElements.get("ha-panel-lovelace"))) {
+const compactPowerCardPanel =
+  customElements.get("ha-panel-lovelace") || customElements.get("hui-masonry-view");
+
+const CompactPowerCardBase =
+  (compactPowerCardPanel && Object.getPrototypeOf(compactPowerCardPanel)) ||
+  window.LitElement;
+
+const compactPowerCardHtml =
+  (typeof window.html === "function" && window.html) ||
+  (typeof CompactPowerCardBase?.prototype?.html === "function" &&
+    CompactPowerCardBase.prototype.html) ||
+  (typeof window.LitElement?.prototype?.html === "function" &&
+    window.LitElement.prototype.html);
+
+const compactPowerCardCss =
+  (typeof window.css === "function" && window.css) ||
+  (typeof CompactPowerCardBase?.prototype?.css === "function" &&
+    CompactPowerCardBase.prototype.css) ||
+  (typeof window.LitElement?.prototype?.css === "function" &&
+    window.LitElement.prototype.css);
+
+if (!CompactPowerCardBase || !compactPowerCardHtml || !compactPowerCardCss) {
+  throw new Error(
+    "compact-power-card: Failed to resolve Lit html/css helpers from the Home Assistant frontend."
+  );
+}
+
+class CompactPowerCard extends CompactPowerCardBase {
 
   static get properties() {
     return {
@@ -9,8 +35,7 @@ class CompactPowerCard extends (window.LitElement ||
   }
 
   get html() {
-    return (window.LitElement ||
-      Object.getPrototypeOf(customElements.get("ha-panel-lovelace"))).prototype.html;
+    return compactPowerCardHtml;
   }
 
   static getConfigForm() {
@@ -561,10 +586,7 @@ class CompactPowerCard extends (window.LitElement ||
   }
 
   static get styles() {
-    const css =
-      (window.LitElement ||
-        Object.getPrototypeOf(customElements.get("ha-panel-lovelace"))).prototype.css;
-    return css`
+    return compactPowerCardCss`
       :host {
         --cpc-scale: 1;
         --cpc-text-scale: 1;
@@ -2107,15 +2129,19 @@ class CompactPowerCard extends (window.LitElement ||
     if (!Number.isFinite(value)) return 1;
     if (value === 0) return 0.4;
     if (threshold == null) return 1;
-    return Math.abs(value) < threshold ? 0.4 : 1;
+    return this._isThresholdSuppressed(value, threshold) ? 0.4 : 1;
   }
 
-  _isBelowThreshold(value, threshold) {
-    if (!Number.isFinite(value)) return false;
-    if (!Number.isFinite(threshold) || threshold <= 0) return false;
+  _isThresholdSuppressed(value, threshold) {
+    if (!Number.isFinite(value) || !Number.isFinite(threshold)) return false;
+    if (threshold <= 0) return value <= threshold;
     return Math.abs(value) < threshold;
   }
 
+  _isBelowThreshold(value, threshold) {
+    return this._isThresholdSuppressed(value, threshold);
+  }
+
   _getNumeric(entityId, attribute = null) {
     if (!this.hass || !entityId) return 0;
     const st = this.hass.states[entityId];
@@ -2410,7 +2436,7 @@ class CompactPowerCard extends (window.LitElement ||
 
     const applyThreshold = (value, threshold) => {
       if (threshold == null) return value;
-      return Math.abs(value) < threshold ? 0 : value;
+      return this._isThresholdSuppressed(value, threshold) ? 0 : value;
     };
 
     const pvThreshold = this._toWatts(this._parseThreshold(pvCfg.threshold), "W", true);
@@ -3137,7 +3163,11 @@ class CompactPowerCard extends (window.LitElement ||
       batteryNode,
       homeNode,
     } = layout;
-    const deviceYOffset = this._shouldUseExternalHeight() && rowCount < 3 ? 20 : 0;
+    const deviceYOffset =
+      (this._shouldUseExternalHeight() && rowCount < 3) ||
+      (!this._shouldUseExternalHeight() && (!hasPv || !hasBattery))
+        ? 20
+        : 0;
     const labelBonus = !hasPv || !hasBattery ? (rowCount >= 4 ? 2 : 1) : 0;
     const gridBatteryBonus =
       hasPv && hasBattery && pvLabels.length <= 4
@@ -3222,7 +3252,7 @@ class CompactPowerCard extends (window.LitElement ||
     const useThresholdForCalc = thresholdMode === "calculations";
     const applyThreshold = (value, threshold) => {
       if (threshold == null) return value;
-      return Math.abs(value) < threshold ? 0 : value;
+      return this._isThresholdSuppressed(value, threshold) ? 0 : value;
     };
 
     const pvDisplayUnit = "W";