Initialize more boolean properties (#19452)

src/components/ha-area-picker.ts

@@ -54,7 +54,7 @@ export class HaAreaPicker extends LitElement {
   @property() public placeholder?: string;
 
   @property({ type: Boolean, attribute: "no-add" })
-  public noAdd?: boolean;
+  public noAdd = false;
 
   /**
    * Show only areas with entities from specific domains.

src/components/ha-areas-picker.ts

@@ -20,7 +20,7 @@ export class HaAreasPicker extends SubscribeMixin(LitElement) {
   @property() public placeholder?: string;
 
   @property({ type: Boolean, attribute: "no-add" })
-  public noAdd?: boolean;
+  public noAdd = false;
 
   /**
    * Show only areas with entities from specific domains.

src/components/ha-attribute-value.ts

@@ -13,8 +13,7 @@ class HaAttributeValue extends LitElement {
 
   @property() public attribute!: string;
 
-  @property({ type: Boolean, attribute: "hide-unit" })
+  @property({ type: Boolean, attribute: "hide-unit" }) public hideUnit = false;
-  public hideUnit?: boolean;
 
   protected render() {
     if (!this.stateObj) {

src/components/ha-combo-box.ts

@@ -101,8 +101,7 @@ export class HaComboBox extends LitElement {
 
   @property({ type: Boolean }) public required = false;
 
-  @property({ type: Boolean, reflect: true, attribute: "opened" })
+  @property({ type: Boolean, reflect: true }) public opened = false;
-  public opened?: boolean;
 
   @query("vaadin-combo-box-light", true) private _comboBox!: ComboBoxLight;
 

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

@@ -71,68 +71,49 @@ export type ControlCircularSliderMode = "start" | "end" | "full";
 
 @customElement("ha-control-circular-slider")
 export class HaControlCircularSlider extends LitElement {
-  @property({ type: Boolean, reflect: true })
+  @property({ type: Boolean, reflect: true }) public disabled = false;
-  public disabled = false;
 
-  @property({ type: Boolean, reflect: true })
+  @property({ type: Boolean, reflect: true }) public readonly = false;
-  public readonly = false;
 
-  @property({ type: Boolean })
+  @property({ type: Boolean }) public dual = false;
-  public dual?: boolean;
 
-  @property({ type: String })
+  @property({ type: String }) public mode?: ControlCircularSliderMode;
-  public mode?: ControlCircularSliderMode;
 
-  @property({ type: Boolean })
+  @property({ type: Boolean }) public inactive = false;
-  public inactive?: boolean;
 
-  @property({ type: String })
+  @property({ type: String }) public label?: string;
-  public label?: string;
 
-  @property({ type: String, attribute: "low-label" })
+  @property({ type: String, attribute: "low-label" }) public lowLabel?: string;
-  public lowLabel?: string;
 
   @property({ type: String, attribute: "high-label" })
   public highLabel?: string;
 
-  @property({ type: Number })
+  @property({ type: Number }) public value?: number;
-  public value?: number;
 
-  @property({ type: Number })
+  @property({ type: Number }) public low?: number;
-  public low?: number;
 
-  @property({ type: Number })
+  @property({ type: Number }) public high?: number;
-  public high?: number;
 
-  @property({ type: Number })
+  @property({ type: Number }) public current?: number;
-  public current?: number;
 
-  @property({ type: Number })
+  @property({ type: Number }) public step = 1;
-  public step = 1;
 
-  @property({ type: Number })
+  @property({ type: Number }) public min = 0;
-  public min = 0;
 
-  @property({ type: Number })
+  @property({ type: Number }) public max = 100;
-  public max = 100;
 
   @property({ type: Boolean, attribute: "prevent-interaction-on-scroll" })
-  public preventInteractionOnScroll?: boolean;
+  public preventInteractionOnScroll = false;
 
-  @state()
+  @state() public _localValue?: number = this.value;
-  public _localValue?: number = this.value;
 
-  @state()
+  @state() public _localLow?: number = this.low;
-  public _localLow?: number = this.low;
 
-  @state()
+  @state() public _localHigh?: number = this.high;
-  public _localHigh?: number = this.high;
 
-  @state()
+  @state() public _activeSlider?: ActiveSlider;
-  public _activeSlider?: ActiveSlider;
 
-  @state()
+  @state() public _lastSlider?: ActiveSlider;
-  public _lastSlider?: ActiveSlider;
 
   private _valueToPercentage(value: number) {
     return (
@@ -618,11 +599,11 @@ export class HaControlCircularSlider extends LitElement {
           targetCircle
             ? svg`
               <!-- Use circle instead of path for interaction (Safari doesn't support well pointer-events with stroke-dasharray) -->
-              <circle 
+              <circle
-                transform="rotate(${angle} 0 0)" 
+                transform="rotate(${angle} 0 0)"
-                ?data-interaction=${onlyDotInteraction} 
+                ?data-interaction=${onlyDotInteraction}
                 cx=${RADIUS}
-                cy="0" 
+                cy="0"
                 />
               <path
                 d=${path}

src/components/ha-control-select-menu.ts

@@ -27,10 +27,10 @@ export class HaControlSelectMenu extends SelectBase {
   @query(".select-anchor") protected anchorElement!: HTMLDivElement | null;
 
   @property({ type: Boolean, attribute: "show-arrow" })
-  public showArrow?: boolean;
+  public showArrow = false;
 
   @property({ type: Boolean, attribute: "hide-label" })
-  public hideLabel?: boolean;
+  public hideLabel = false;
 
   @queryAsync("mwc-ripple") private _ripple!: Promise<Ripple | null>;
 

src/components/ha-control-switch.ts

@@ -19,17 +19,13 @@ import "./ha-svg-icon";
 
 @customElement("ha-control-switch")
 export class HaControlSwitch extends LitElement {
-  @property({ type: Boolean, reflect: true })
+  @property({ type: Boolean, reflect: true }) public disabled = false;
-  public disabled = false;
 
-  @property({ type: Boolean })
+  @property({ type: Boolean }) public vertical = false;
-  public vertical = false;
 
-  @property({ type: Boolean })
+  @property({ type: Boolean }) public reversed = false;
-  public reversed = false;
 
-  @property({ type: Boolean, reflect: true })
+  @property({ type: Boolean, reflect: true }) public checked = false;
-  public checked?: boolean;
 
   // SVG icon path (if you need a non SVG icon instead, use the provided on icon slot to pass an <ha-icon slot="icon-on"> in)
   @property({ type: String }) pathOn?: string;

src/components/ha-multi-textfield.ts

@@ -32,7 +32,7 @@ class HaMultiTextField extends LitElement {
   @property() public removeLabel?: string;
 
   @property({ attribute: "item-index", type: Boolean })
-  public itemIndex?: boolean;
+  public itemIndex = false;
 
   protected render() {
     return html`

src/components/ha-service-control.ts

@@ -88,7 +88,7 @@ export class HaServiceControl extends ReorderModeMixin(LitElement) {
 
   @property({ type: Boolean }) public disabled = false;
 
-  @property({ reflect: true, type: Boolean }) public narrow!: boolean;
+  @property({ type: Boolean, reflect: true }) public narrow = false;
 
   @property({ type: Boolean }) public showAdvanced = false;
 

src/components/trace/hat-graph-branch.ts

@@ -17,7 +17,7 @@ interface BranchConfig {
  */
 @customElement("hat-graph-branch")
 export class HatGraphBranch extends LitElement {
-  @property({ reflect: true, type: Boolean }) disabled?: boolean;
+  @property({ type: Boolean, reflect: true }) disabled = false;
 
   @property({ type: Boolean }) selected = false;
 

src/components/trace/hat-graph-node.ts

@@ -17,11 +17,11 @@ import { NODE_SIZE, SPACING } from "./hat-graph-const";
 export class HatGraphNode extends LitElement {
   @property() iconPath?: string;
 
-  @property({ reflect: true, type: Boolean }) disabled?: boolean;
+  @property({ type: Boolean, reflect: true }) public disabled = false;
 
   @property({ reflect: true, type: Boolean }) notEnabled = false;
 
-  @property({ reflect: true, type: Boolean }) graphStart?: boolean;
+  @property({ reflect: true, type: Boolean }) graphStart = false;
 
   @property({ type: Boolean, attribute: "nofocus" }) noFocus = false;
 

src/components/trace/hat-graph-spacer.ts

@@ -8,7 +8,7 @@ import { SPACING, NODE_SIZE } from "./hat-graph-const";
  */
 @customElement("hat-graph-spacer")
 export class HatGraphSpacer extends LitElement {
-  @property({ reflect: true, type: Boolean }) disabled?: boolean;
+  @property({ reflect: true, type: Boolean }) public disabled = false;
 
   render() {
     return html`

src/onboarding/onboarding-welcome-link.ts

@@ -18,7 +18,7 @@ class OnboardingWelcomeLink extends LitElement {
 
   @property() public iconPath!: string;
 
-  @property({ attribute: true, type: Boolean }) public noninteractive?: boolean;
+  @property({ type: Boolean }) public noninteractive = false;
 
   @queryAsync("mwc-ripple") private _ripple!: Promise<Ripple | null>;
 

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

@@ -42,8 +42,7 @@ import "./ha-full-calendar";
 class PanelCalendar extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ type: Boolean, reflect: true })
+  @property({ type: Boolean, reflect: true }) public narrow = false;
-  public narrow!: boolean;
 
   @property({ type: Boolean, reflect: true }) public mobile = false;
 

src/panels/config/automation/blueprint-automation-editor.ts

@@ -30,7 +30,7 @@ export class HaBlueprintAutomationEditor extends ReorderModeMixin(LitElement) {
 
   @property({ type: Boolean }) public disabled = false;
 
-  @property({ reflect: true, type: Boolean }) public narrow!: boolean;
+  @property({ reflect: true, type: Boolean }) public narrow = false;
 
   @property() public config!: BlueprintAutomationConfig;
 

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

@@ -29,8 +29,7 @@ import { configSections } from "../ha-panel-config";
 class HaConfigSystemNavigation extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ type: Boolean, reflect: true })
+  @property({ type: Boolean, reflect: true }) public narrow = false;
-  public narrow!: boolean;
 
   @property({ type: Boolean }) public isWide = false;
 

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

@@ -114,8 +114,7 @@ const randomTip = (hass: HomeAssistant, narrow: boolean) => {
 class HaConfigDashboard extends SubscribeMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ type: Boolean, reflect: true })
+  @property({ type: Boolean, reflect: true }) public narrow = false;
-  public narrow!: boolean;
 
   @property({ type: Boolean }) public isWide = false;
 

src/panels/config/script/blueprint-script-editor.ts

@@ -26,7 +26,7 @@ export class HaBlueprintScriptEditor extends ReorderModeMixin(LitElement) {
 
   @property({ type: Boolean }) public isWide = false;
 
-  @property({ reflect: true, type: Boolean }) public narrow!: boolean;
+  @property({ reflect: true, type: Boolean }) public narrow = false;
 
   @property({ type: Boolean }) public disabled = false;
 

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

@@ -58,7 +58,7 @@ import { fileDownload } from "../../util/file_download";
 class HaPanelHistory extends SubscribeMixin(LitElement) {
   @property({ attribute: false }) hass!: HomeAssistant;
 
-  @property({ reflect: true, type: Boolean }) narrow!: boolean;
+  @property({ reflect: true, type: Boolean }) public narrow = false;
 
   @property({ reflect: true, type: Boolean }) rtl = false;
 

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

@@ -23,7 +23,7 @@ import "./ha-logbook";
 export class HaPanelLogbook extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ reflect: true, type: Boolean }) narrow!: boolean;
+  @property({ type: Boolean, reflect: true }) public narrow = false;
 
   @state() _time: { range: [Date, Date] };
 

src/panels/lovelace/editor/conditions/ha-card-conditions-editor.ts

@@ -46,7 +46,7 @@ export class HaCardConditionsEditor extends LitElement {
     | LegacyCondition
   )[];
 
-  @property({ attribute: true, type: Boolean }) public nested?: boolean;
+  @property({ type: Boolean }) public nested = false;
 
   private _focusLastConditionOnChange = false;
 

src/panels/media-browser/ha-bar-media-player.ts

@@ -70,8 +70,7 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
 
   @property({ attribute: false }) public entityId!: string;
 
-  @property({ type: Boolean, reflect: true })
+  @property({ type: Boolean, reflect: true }) public narrow = false;
-  public narrow!: boolean;
 
   @query("mwc-linear-progress") private _progressBar?: LinearProgress;
 

src/panels/media-browser/ha-panel-media-browser.ts

@@ -65,8 +65,7 @@ const createMediaPanelUrl = (entityId: string, items: MediaPlayerItemId[]) => {
 class PanelMediaBrowser extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ type: Boolean, reflect: true })
+  @property({ type: Boolean, reflect: true }) public narrow = false;
-  public narrow!: boolean;
 
   @property({ attribute: false }) public route!: Route;
 

src/state-control/climate/ha-state-control-climate-humidity.ts

@@ -27,10 +27,10 @@ export class HaStateControlClimateHumidity extends LitElement {
   @property({ attribute: false }) public stateObj!: ClimateEntity;
 
   @property({ attribute: "show-current", type: Boolean })
-  public showCurrent?: boolean;
+  public showCurrent = false;
 
   @property({ type: Boolean, attribute: "prevent-interaction-on-scroll" })
-  public preventInteractionOnScroll?: boolean;
+  public preventInteractionOnScroll = false;
 
   @state() private _targetHumidity?: number;
 

src/state-control/climate/ha-state-control-climate-temperature.ts

@@ -55,13 +55,13 @@ export class HaStateControlClimateTemperature extends LitElement {
   @property({ attribute: false }) public stateObj!: ClimateEntity;
 
   @property({ attribute: "show-secondary", type: Boolean })
-  public showSecondary?: boolean;
+  public showSecondary = false;
 
   @property({ attribute: "use-current-as-primary", type: Boolean })
-  public showCurrentAsPrimary?: boolean;
+  public showCurrentAsPrimary = false;
 
   @property({ type: Boolean, attribute: "prevent-interaction-on-scroll" })
-  public preventInteractionOnScroll?: boolean;
+  public preventInteractionOnScroll = false;
 
   @state() private _targetTemperature: Partial<Record<Target, number>> = {};
 

src/state-control/humidifier/ha-state-control-humidifier-humidity.ts

@@ -30,13 +30,13 @@ export class HaStateControlHumidifierHumidity extends LitElement {
   @property({ attribute: false }) public stateObj!: HumidifierEntity;
 
   @property({ attribute: "show-secondary", type: Boolean })
-  public showSecondary?: boolean;
+  public showSecondary = false;
 
   @property({ attribute: "use-current-as-primary", type: Boolean })
-  public showCurrentAsPrimary?: boolean;
+  public showCurrentAsPrimary = false;
 
   @property({ type: Boolean, attribute: "prevent-interaction-on-scroll" })
-  public preventInteractionOnScroll?: boolean;
+  public preventInteractionOnScroll = false;
 
   @state() private _targetHumidity?: number;
 

src/state-control/water_heater/ha-state-control-water_heater-temperature.ts

@@ -30,10 +30,10 @@ export class HaStateControlWaterHeaterTemperature extends LitElement {
   @property({ attribute: false }) public stateObj!: WaterHeaterEntity;
 
   @property({ attribute: "show-current", type: Boolean })
-  public showCurrent?: boolean;
+  public showCurrent = false;
 
   @property({ type: Boolean, attribute: "prevent-interaction-on-scroll" })
-  public preventInteractionOnScroll?: boolean;
+  public preventInteractionOnScroll = false;
 
   @state() private _targetTemperature?: number;