Fixes for brightness automation action (#5003)

* Fixes for brightness

* Add checbox before optional range integer

* Console

* Comments

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

@@ -5,6 +5,8 @@ import {
   property,
   TemplateResult,
   query,
+  CSSResult,
+  css,
 } from "lit-element";
 import {
   HaFormElement,
@@ -19,13 +21,14 @@ import "@polymer/paper-input/paper-input";
 // tslint:disable-next-line
 import { PaperInputElement } from "@polymer/paper-input/paper-input";
 import { PaperSliderElement } from "@polymer/paper-slider/paper-slider";
+import { HaCheckbox } from "../ha-checkbox";
 
 @customElement("ha-form-integer")
 export class HaFormInteger extends LitElement implements HaFormElement {
   @property() public schema!: HaFormIntegerSchema;
-  @property() public data!: HaFormIntegerData;
+  @property() public data?: HaFormIntegerData;
-  @property() public label!: string;
+  @property() public label?: string;
-  @property() public suffix!: string;
+  @property() public suffix?: string;
   @query("paper-input ha-paper-slider") private _input?: HTMLElement;
 
   public focus() {
@@ -39,20 +42,31 @@ export class HaFormInteger extends LitElement implements HaFormElement {
       ? html`
           <div>
             ${this.label}
-            <ha-paper-slider
+            <div class="flex">
-              pin=""
+              ${this.schema.optional && this.schema.default === undefined
-              .value=${this._value}
+                ? html`
-              .min=${this.schema.valueMin}
+                    <ha-checkbox
-              .max=${this.schema.valueMax}
+                      @change=${this._handleCheckboxChange}
-              @value-changed=${this._valueChanged}
+                      .checked=${this.data !== undefined}
-            ></ha-paper-slider>
+                    ></ha-checkbox>
+                  `
+                : ""}
+              <ha-paper-slider
+                pin=""
+                .value=${this._value}
+                .min=${this.schema.valueMin}
+                .max=${this.schema.valueMax}
+                .disabled=${this.data === undefined}
+                @value-changed=${this._valueChanged}
+              ></ha-paper-slider>
+            </div>
           </div>
         `
       : html`
           <paper-input
             type="number"
             .label=${this.label}
-            .value=${this.data}
+            .value=${this._value}
             .required=${this.schema.required}
             .autoValidate=${this.schema.required}
             @value-changed=${this._valueChanged}
@@ -61,7 +75,14 @@ export class HaFormInteger extends LitElement implements HaFormElement {
   }
 
   private get _value() {
-    return this.data || 0;
+    return this.data || this.schema.default || 0;
+  }
+
+  private _handleCheckboxChange(ev: Event) {
+    const checked = (ev.target as HaCheckbox).checked;
+    fireEvent(this, "value-changed", {
+      value: checked ? this._value : undefined,
+    });
   }
 
   private _valueChanged(ev: Event) {
@@ -75,6 +96,14 @@ export class HaFormInteger extends LitElement implements HaFormElement {
       value,
     });
   }
+
+  static get styles(): CSSResult {
+    return css`
+      .flex {
+        display: flex;
+      }
+    `;
+  }
 }
 
 declare global {

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

@@ -95,7 +95,7 @@ export interface HaFormTimeData {
 
 export interface HaFormElement extends LitElement {
   schema: HaFormSchema;
-  data: HaFormDataContainer | HaFormData;
+  data?: HaFormDataContainer | HaFormData;
   label?: string;
   suffix?: string;
 }

src/components/ha-paper-slider.js

@@ -18,6 +18,11 @@ class HaPaperSlider extends PaperSliderClass {
         line-height: normal;
       }
 
+      .disabled.ring > .slider-knob > .slider-knob-inner {
+        background-color: var(--paper-slider-disabled-knob-color, var(--paper-grey-400));
+        border: 2px solid var(--paper-slider-disabled-knob-color, var(--paper-grey-400));
+      }
+
       .pin > .slider-knob > .slider-knob-inner::before {
         top: unset;
         margin-left: unset;

src/data/device_automation.ts

@@ -66,7 +66,7 @@ export const fetchDeviceTriggerCapabilities = (
     trigger,
   });
 
-const whitelist = ["above", "below", "code", "for"];
+const whitelist = ["above", "below", "brightness", "code", "for"];
 
 export const deviceAutomationsEqual = (
   a: DeviceAutomation,

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

@@ -10,6 +10,7 @@ import {
 import { LitElement, customElement, property, html } from "lit-element";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { HomeAssistant } from "../../../../../types";
+import memoizeOne from "memoize-one";
 
 @customElement("ha-automation-action-device_id")
 export class HaDeviceAction extends LitElement {
@@ -27,14 +28,20 @@ export class HaDeviceAction extends LitElement {
     };
   }
 
+  private _extraFieldsData = memoizeOne((capabilities, action: DeviceAction) =>
+    capabilities && capabilities.extra_fields
+      ? capabilities.extra_fields.map((item) => {
+          return { [item.name]: action[item.name] };
+        })
+      : undefined
+  );
+
   protected render() {
     const deviceId = this._deviceId || this.action.device_id;
-    const extraFieldsData =
+    const extraFieldsData = this._extraFieldsData(
-      this._capabilities && this._capabilities.extra_fields
+      this._capabilities,
-        ? this._capabilities.extra_fields.map((item) => {
+      this.action
-            return { [item.name]: this.action[item.name] };
+    );
-          })
-        : undefined;
 
     return html`
       <ha-device-picker
@@ -82,10 +89,8 @@ export class HaDeviceAction extends LitElement {
   }
 
   private async _getCapabilities() {
-    const action = this.action;
+    this._capabilities = this.action.domain
-
+      ? await fetchDeviceActionCapabilities(this.hass, this.action)
-    this._capabilities = action.domain
-      ? await fetchDeviceActionCapabilities(this.hass, action)
       : null;
   }