Fix energy dashboard date picker opening direction (#30090)

* Add Opening Direction to Date Picker Config

* Force date picker opening direction on energy dash

src/panels/energy/strategies/energy-overview-view-strategy.ts

@@ -25,6 +25,8 @@ export class EnergyOverviewViewStrategy extends ReactiveElement {
         card: {
           type: "energy-date-selection",
           collection_key: collectionKey,
+          opening_direction: "right",
+          vertical_opening_direction: "up",
         },
       },
     };

src/panels/energy/strategies/energy-view-strategy.ts

@@ -33,6 +33,8 @@ export class EnergyViewStrategy extends ReactiveElement {
         card: {
           type: "energy-date-selection",
           collection_key: collectionKey,
+          opening_direction: "right",
+          vertical_opening_direction: "up",
         },
       },
     };

src/panels/energy/strategies/gas-view-strategy.ts

@@ -24,6 +24,8 @@ export class GasViewStrategy extends ReactiveElement {
         card: {
           type: "energy-date-selection",
           collection_key: collectionKey,
+          opening_direction: "right",
+          vertical_opening_direction: "up",
         },
       },
     };

src/panels/energy/strategies/water-view-strategy.ts

@@ -25,6 +25,8 @@ export class WaterViewStrategy extends ReactiveElement {
         card: {
           type: "energy-date-selection",
           collection_key: collectionKey,
+          opening_direction: "right",
+          vertical_opening_direction: "up",
         },
       },
     };

src/panels/lovelace/cards/energy/hui-energy-date-selection-card.ts

@@ -6,7 +6,7 @@ import type { HomeAssistant } from "../../../../types";
 import { hasConfigChanged } from "../../common/has-changed";
 import "../../components/hui-energy-period-selector";
 import type { LovelaceCard, LovelaceGridOptions } from "../../types";
-import type { EnergyCardBaseConfig } from "../types";
+import type { EnergyDateSelectorCardConfig } from "../types";
 
 @customElement("hui-energy-date-selection-card")
 export class HuiEnergyDateSelectionCard
@@ -15,7 +15,7 @@ export class HuiEnergyDateSelectionCard
 {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @state() private _config?: EnergyCardBaseConfig;
+  @state() private _config?: EnergyDateSelectorCardConfig;
 
   public getCardSize(): Promise<number> | number {
     return 1;
@@ -28,7 +28,7 @@ export class HuiEnergyDateSelectionCard
     };
   }
 
-  public setConfig(config: EnergyCardBaseConfig): void {
+  public setConfig(config: EnergyDateSelectorCardConfig): void {
     this._config = config;
   }
 
@@ -45,12 +45,25 @@ export class HuiEnergyDateSelectionCard
       return nothing;
     }
 
+    const verticalOpeningDirection =
+      this._config.vertical_opening_direction === "auto"
+        ? undefined
+        : this._config.vertical_opening_direction;
+
+    const openingDirection =
+      this._config.opening_direction === "auto"
+        ? undefined
+        : this._config.opening_direction;
+
     return html`
       <ha-card>
         <div class="card-content">
           <hui-energy-period-selector
             .hass=${this.hass}
             .collectionKey=${this._config.collection_key}
+            .verticalOpeningDirection=${verticalOpeningDirection}
+            .openingDirection=${openingDirection}
+            .allowCompare=${!this._config.disable_compare}
           ></hui-energy-period-selector>
         </div>
       </ha-card>

src/panels/lovelace/cards/types.ts

@@ -169,6 +169,12 @@ export interface EnergyCardBaseConfig extends LovelaceCardConfig {
   collection_key?: string;
 }
 
+export interface EnergyDateSelectorCardConfig extends EnergyCardBaseConfig {
+  vertical_opening_direction?: "auto" | "up" | "down";
+  opening_direction?: "auto" | "right" | "left" | "center" | "inline";
+  disable_compare?: boolean;
+}
+
 export interface EnergyDistributionCardConfig extends EnergyCardBaseConfig {
   type: "energy-distribution";
   title?: string;