@feezal/feezal-element 3.0.4 → 3.0.8

package/feezal-element.js

@@ -106,6 +106,14 @@ export class FeezalElement extends LitElement {
     connectedCallback() {
         super.connectedCallback();
         this.classList.add('feezal-element');
+        // N37: an element stamped into an ALREADY-PAUSED view must not
+        // subscribe — pause state is a precondition, not only an event. The
+        // visibility controller resumes it via a reconnect cycle later.
+        if (window.feezal?.visibility?.isPaused?.(this)) {
+            this.__n37Paused = true;
+            return;
+        }
+        this.__n37Paused = false;
         if (this.visible || !this.dynamicSubscriptions) {
             this._subscribe();
             this._conditions.connect();
@@ -117,6 +125,37 @@ export class FeezalElement extends LitElement {
         this._subscribeAvailability();
     }
 
+    /**
+     * N37 — pause this element's MQTT traffic while its view is hidden.
+     * Teardown is uniform for EVERY element: all primary subscriptions live
+     * in `_subscriptions` (addSubscription), availability in the N31 arrays,
+     * conditions in the engine — regardless of how the element wired them.
+     */
+    pauseSubscriptions() {
+        if (this.__n37Paused) return;
+        this.__n37Paused = true;
+        this._unsubscribe();
+        this._unsubscribeAvailability();
+        this._conditions.disconnect();
+    }
+
+    /**
+     * N37 — resume by re-running the element's OWN wiring exactly as a fresh
+     * mount would: a detach/re-attach cycle runs disconnected/connectedCallback,
+     * the one path every element (including manual wirers like the device
+     * cards) implements correctly. Retained values repaint instantly from the
+     * B40 cache replay.
+     */
+    resumeSubscriptions() {
+        if (!this.__n37Paused) return;
+        this.__n37Paused = false;
+        const parent = this.parentNode;
+        if (!parent) return;
+        const next = this.nextSibling;
+        this.remove();
+        parent.insertBefore(this, next);
+    }
+
     disconnectedCallback() {
         super.disconnectedCallback();
         this._unsubscribe();
@@ -239,6 +278,11 @@ export class FeezalElement extends LitElement {
 
     /** Subscribe to a single topic — convenience wrapper for subclasses. */
     addSubscription(topic, callback) {
+        // N37: wiring attempted while the element's view is paused is dropped
+        // — device cards wire in their own connectedCallback AFTER the base
+        // guard returned, so the gate must live here to be universal. The
+        // resume reconnect cycle re-runs the wiring when the view returns.
+        if (this.__n37Paused) return;
         this._subscriptions.push(feezal.connection.sub(topic, callback));
     }
 
@@ -414,6 +458,34 @@ export function availabilityBadge(available) {
     return available ? '' : html`<span class="feezal-unavail-badge" title="Device unavailable">⚠</span>`;
 }
 
+// E124: shared low-battery badge — a crisp, self-drawn tiny horizontal battery
+// showing a single low charge bar (far more recognizable at small sizes than the
+// Material `battery_alert` ligature, and no exclamation clutter). Bottom-right by
+// default; families whose bottom-right corner is taken override via
+// `--feezal-battery-*` (or plain right/left).
+export const feezalBatteryStyles = css`
+    .feezal-batt-badge {
+        position: absolute;
+        bottom: var(--feezal-battery-bottom, 6px);
+        right: var(--feezal-battery-right, 6px);
+        width: var(--feezal-battery-size, 20px);
+        height: var(--feezal-battery-size, 20px);
+        color: var(--feezal-battery-color, var(--warning-color, #f59e0b));
+        opacity: 0.95; pointer-events: none; z-index: 2;
+    }
+    .feezal-batt-badge svg { width: 100%; height: 100%; display: block; }
+`;
+
+/** Low-battery badge template partial: renders nothing unless the battery is low.
+ *  A tiny battery outline + terminal with one short bar of charge remaining. */
+export function batteryLowBadge(low) {
+    return low ? html`<span class="feezal-batt-badge" title="Battery low"><svg viewBox="0 0 24 24" aria-hidden="true">
+        <rect x="2.5" y="8.5" width="15" height="7" rx="1.8" fill="none" stroke="currentColor" stroke-width="1.6"/>
+        <rect x="18.6" y="10.6" width="2.1" height="2.8" rx="0.7" fill="currentColor"/>
+        <rect x="4.3" y="10.3" width="3" height="3.4" rx="0.6" fill="currentColor"/>
+    </svg></span>` : '';
+}
+
 /**
  * E117: shared descriptor for the `publish-local` attribute — spread into an
  * element's `feezal.attributes` right after `publish` so the label and help
@@ -430,5 +502,40 @@ export const publishLocalAttribute = {
     help: 'Publish page-locally instead of to the broker: the payload reaches only subscribers in THIS browser tab (dialog triggers, view switches, wiring elements together). Nothing is sent over MQTT, nothing is retained, and it works while disconnected.'
 };
 
+/**
+ * E137 — payload comparison, cross-controller shared machinery: string
+ * coercion (case-insensitive) plus boolean true/false matching the HA/z2m
+ * ON/OFF conventions. Single source — the copies in feezal-glass and the
+ * contact card consolidated here (feezal-glass re-exports for back-compat).
+ */
+export function payloadMatch(value, configured) {
+    if (String(value).toLowerCase() === String(configured).toLowerCase()) return true;
+    if (value === true && /^(on|true|1|yes)$/i.test(String(configured))) return true;
+    if (value === false && /^(off|false|0|no)$/i.test(String(configured))) return true;
+    return false;
+}
+
+/**
+ * Boolean-attribute converter for DEFAULT-TRUE booleans.
+ *
+ * Lit's built-in Boolean is *present = true / absent = false*, which cannot
+ * represent an explicit "false" for an attribute that defaults to true: the
+ * inspector removes the attribute on "off", it serialises as absent via
+ * outerHTML, and the viewer's fresh element re-reads its constructor default
+ * (true) — so the "off" choice is silently lost on save/deploy.
+ *
+ * This converter reads the literal "false" / "0" as false (any other present
+ * value → true; absent → the constructor default stands), and reflects the
+ * value as an explicit "true" / "false" so an OFF state persists. Pair it with
+ * the inspector's default-aware boolean write. Apply to any boolean whose
+ * descriptor `default` is true:
+ *
+ *   loop: {type: Boolean, reflect: true, converter: feezalBoolean, attribute: 'loop'}
+ */
+export const feezalBoolean = {
+    fromAttribute: v => v !== null && v !== 'false' && v !== '0',
+    toAttribute:   v => (v ? 'true' : 'false')
+};
+
 // Re-export so element files can do a single import.
 export {html, css};

package/package.json

@@ -35,5 +35,5 @@
         "url": "git+https://github.com/feezal/feezal.git",
         "directory": "www/packages/@feezal/feezal-element"
     },
-    "version": "3.0.4"
+    "version": "3.0.8"
 }