From fc041a342e0a3edd9601489367265da7a3b1eee9 Mon Sep 17 00:00:00 2001
From: silvester-pari <silvester.pari@eox.at>
Date: Thu, 19 Dec 2024 12:43:03 +0100
Subject: [PATCH] fix!: align play button property with others (`disablePlay`->
 `play`)

---
 elements/layercontrol/src/components/layer-datetime.js |  4 ++--
 elements/layercontrol/src/enums/stories/index.js       |  2 +-
 elements/layercontrol/stories/layercontrol.stories.js  |  2 +-
 elements/timecontrol/src/enums/stories.js              |  2 ++
 elements/timecontrol/src/main.js                       |  6 +++---
 .../{disabled-play-button.js => disabled-buttons.js}   | 10 ++++++----
 elements/timecontrol/stories/format.js                 |  7 +++++--
 elements/timecontrol/stories/index.js                  |  2 +-
 elements/timecontrol/stories/no-map.js                 |  5 +++--
 elements/timecontrol/stories/primary.js                |  2 ++
 .../timecontrol/stories/programmatic-time-selection.js |  4 ++++
 elements/timecontrol/stories/slider.js                 |  4 ++++
 elements/timecontrol/stories/timecontrol.stories.js    |  4 ++--
 13 files changed, 36 insertions(+), 18 deletions(-)
 rename elements/timecontrol/stories/{disabled-play-button.js => disabled-buttons.js} (78%)

diff --git a/elements/layercontrol/src/components/layer-datetime.js b/elements/layercontrol/src/components/layer-datetime.js
index 8b859b2e4..94d963f19 100644
--- a/elements/layercontrol/src/components/layer-datetime.js
+++ b/elements/layercontrol/src/components/layer-datetime.js
@@ -39,7 +39,7 @@ export class EOxLayerControlLayerDatetime extends LitElement {
      * Layer config for eox-jsonform
      *
      * @type {{
-     *   disablePlay?: boolean;
+     *   play?: boolean;
      *   slider?: boolean;
      *   navigation?: boolean;
      *   currentStep: string|number;
@@ -110,7 +110,7 @@ export class EOxLayerControlLayerDatetime extends LitElement {
             .layer=${undefined}
             .navigation=${this.layerDatetime.navigation ?? false}
             .slider=${this.layerDatetime.slider ?? false}
-            .disablePlay=${this.layerDatetime.disablePlay ?? false}
+            .play=${this.layerDatetime.play ?? false}
             .controlValues=${this.layerDatetime.controlValues}
             .controlProperty=${undefined}
             current-step=${this.layerDatetime.currentStep}
diff --git a/elements/layercontrol/src/enums/stories/index.js b/elements/layercontrol/src/enums/stories/index.js
index 6c5085a38..c615c05cd 100644
--- a/elements/layercontrol/src/enums/stories/index.js
+++ b/elements/layercontrol/src/enums/stories/index.js
@@ -445,7 +445,7 @@ export const STORIES_LAYER_VESSEL_DENSITY_CARGO = {
       range: ["#C3EBDC", "#0ADC00", "#FEF500", "#F29300", "#800303"],
     },
     layerDatetime: {
-      disablePlay: true,
+      play: false,
       slider: true,
       currentStep: "2021-03-01",
       displayFormat: "DD.MM.YYYY",
diff --git a/elements/layercontrol/stories/layercontrol.stories.js b/elements/layercontrol/stories/layercontrol.stories.js
index 9f7472b63..a8e3a3862 100644
--- a/elements/layercontrol/stories/layercontrol.stories.js
+++ b/elements/layercontrol/stories/layercontrol.stories.js
@@ -70,7 +70,7 @@ export const LayerStylesConfig = LayerStylesConfigStory;
 /**
  * By adding "datetime" as tool, the time for a specific layer can be modified.
  * The `layerDatetime` property of the layer allows passing the following properties of eox-timecontrol:
- * `disablePlay`: allows disabling the timecontrol play button.
+ * `play`: allows disabling the timecontrol play button.
  * `slider`: show/hide timecontrol slider.
  * `currentStep`: current datetime string.
  * `controlValues`: The list of available values.
diff --git a/elements/timecontrol/src/enums/stories.js b/elements/timecontrol/src/enums/stories.js
index f4dc0e674..c897a6206 100644
--- a/elements/timecontrol/src/enums/stories.js
+++ b/elements/timecontrol/src/enums/stories.js
@@ -21,6 +21,8 @@ export const DEFAULT_ARGS = {
     "2023-04-17",
     "2023-04-24",
   ],
+  navigation: true,
+  play: true,
   // map
   layers: [
     {
diff --git a/elements/timecontrol/src/main.js b/elements/timecontrol/src/main.js
index 76fdea8e7..9aecaa96b 100644
--- a/elements/timecontrol/src/main.js
+++ b/elements/timecontrol/src/main.js
@@ -54,7 +54,7 @@ export class EOxTimeControl extends LitElement {
       /**
        * Hides the play button if set
        */
-      disablePlay: { type: Boolean, attribute: "disable-play" },
+      play: { type: Boolean, attribute: "play" },
 
       /**
        * Date format string for displaying the current step
@@ -82,7 +82,7 @@ export class EOxTimeControl extends LitElement {
     /** @type {boolean} */
     this.unstyled = false;
     /** @type {boolean} */
-    this.disablePlay = false;
+    this.play = false;
     /** @type {boolean} */
     this.navigation = true;
     /** @type {boolean} */
@@ -337,7 +337,7 @@ export class EOxTimeControl extends LitElement {
                 </button>
               `
             : nothing}
-          ${!this.disablePlay
+          ${this.play
             ? html`
                 <button
                   part="play"
diff --git a/elements/timecontrol/stories/disabled-play-button.js b/elements/timecontrol/stories/disabled-buttons.js
similarity index 78%
rename from elements/timecontrol/stories/disabled-play-button.js
rename to elements/timecontrol/stories/disabled-buttons.js
index b4ff15d29..733a6bf27 100644
--- a/elements/timecontrol/stories/disabled-play-button.js
+++ b/elements/timecontrol/stories/disabled-buttons.js
@@ -1,11 +1,12 @@
 import { html } from "lit";
 import { DEFAULT_ARGS } from "../src/enums/stories";
 
-export const DisabledPlayButton = {
+export const DisabledButtons = {
   args: {
     ...DEFAULT_ARGS,
     for: "eox-map#disabled-play",
-    disablePlay: true,
+    play: false,
+    navigation: false,
   },
   render: (args) => html`
     <eox-map
@@ -20,11 +21,12 @@ export const DisabledPlayButton = {
       .layer=${args.layer}
       .controlProperty=${args.controlProperty}
       .controlValues=${args.controlValues}
+      .navigation=${args.navigation}
       .slider=${args.slider}
-      .disablePlay=${args.disablePlay}
+      .play=${args.play}
       style="margin-top: 8px"
     ></eox-timecontrol>
   `,
 };
 
-export default DisabledPlayButton;
+export default DisabledButtons;
diff --git a/elements/timecontrol/stories/format.js b/elements/timecontrol/stories/format.js
index 9b508237c..bf75fd407 100644
--- a/elements/timecontrol/stories/format.js
+++ b/elements/timecontrol/stories/format.js
@@ -4,12 +4,13 @@ import { DEFAULT_ARGS } from "../src/enums/stories";
 export const Format = {
   args: {
     ...DEFAULT_ARGS,
-    for: "eox-map#primary",
+    for: "eox-map#format",
     displayFormat: "MMMM DD, YYYY",
+    play: false,
   },
   render: (args) => html`
     <eox-map
-      id="primary"
+      id="format"
       style="width: 1005; height: 300px;"
       .zoom=${args.zoom}
       .center=${args.center}
@@ -20,6 +21,8 @@ export const Format = {
       .layer=${args.layer}
       .controlProperty=${args.controlProperty}
       .controlValues=${args.controlValues}
+      .navigation=${args.navigation}
+      .play=${args.play}
       .slider=${args.slider}
       style="margin-top: 10px;"
       .displayFormat=${args.displayFormat}
diff --git a/elements/timecontrol/stories/index.js b/elements/timecontrol/stories/index.js
index d20c2fd0c..f486e9207 100644
--- a/elements/timecontrol/stories/index.js
+++ b/elements/timecontrol/stories/index.js
@@ -4,6 +4,6 @@
 export { default as PrimaryStory } from "./primary"; // Primary story
 export { default as SliderStory } from "./slider"; // Slider story
 export { default as ProgrammaticTimeSelectionStory } from "./programmatic-time-selection"; // Programmatic time selection story
-export { default as DisabledPlayButtonStory } from "./disabled-play-button"; // Disabled play button story
+export { default as DisabledButtonsStory } from "./disabled-buttons"; // Disabled play button story
 export { default as NoMapStory } from "./no-map"; // No map provided story
 export { default as FormatStory } from "./format"; // Date-Time Format story
diff --git a/elements/timecontrol/stories/no-map.js b/elements/timecontrol/stories/no-map.js
index 4ec43b595..816eb7e84 100644
--- a/elements/timecontrol/stories/no-map.js
+++ b/elements/timecontrol/stories/no-map.js
@@ -4,7 +4,7 @@ import { DEFAULT_ARGS } from "../src/enums/stories";
 const NoMap = {
   args: {
     ...DEFAULT_ARGS,
-    disablePlay: true,
+    play: true,
     layer: undefined,
     for: undefined,
     controlProperty: undefined,
@@ -19,8 +19,9 @@ const NoMap = {
       .layer=${args.layer}
       .controlProperty=${args.controlProperty}
       .controlValues=${args.controlValues}
+      .navigation=${args.navigation}
       .slider=${args.slider}
-      .disablePlay=${args.disablePlay}
+      .play=${args.play}
       @stepchange=${args.onStepChange}
     ></eox-timecontrol>
   `,
diff --git a/elements/timecontrol/stories/primary.js b/elements/timecontrol/stories/primary.js
index 1559c3451..364980601 100644
--- a/elements/timecontrol/stories/primary.js
+++ b/elements/timecontrol/stories/primary.js
@@ -19,6 +19,8 @@ export const Primary = {
       .layer=${args.layer}
       .controlProperty=${args.controlProperty}
       .controlValues=${args.controlValues}
+      .navigation=${args.navigation}
+      .play=${args.play}
       .slider=${args.slider}
       style="margin-top: 8px"
     ></eox-timecontrol>
diff --git a/elements/timecontrol/stories/programmatic-time-selection.js b/elements/timecontrol/stories/programmatic-time-selection.js
index 52774012c..7d06828da 100644
--- a/elements/timecontrol/stories/programmatic-time-selection.js
+++ b/elements/timecontrol/stories/programmatic-time-selection.js
@@ -6,6 +6,8 @@ export const ProgrammaticTimeSelection = {
     ...DEFAULT_ARGS,
     for: "eox-map#programmatic-time-selection",
     slider: true,
+    navigation: false,
+    play: false,
   },
   render: (args) => html`
     <eox-map
@@ -33,6 +35,8 @@ export const ProgrammaticTimeSelection = {
       .layer=${args.layer}
       .controlProperty=${args.controlProperty}
       .controlValues=${args.controlValues}
+      .navigation=${args.navigation}
+      .play=${args.play}
       .slider=${args.slider}
       style="margin-top: 8px"
     ></eox-timecontrol>
diff --git a/elements/timecontrol/stories/slider.js b/elements/timecontrol/stories/slider.js
index 60764e3a3..2722524b7 100644
--- a/elements/timecontrol/stories/slider.js
+++ b/elements/timecontrol/stories/slider.js
@@ -6,6 +6,8 @@ export const Slider = {
     ...DEFAULT_ARGS,
     for: "eox-map#slider",
     slider: true,
+    navigation: false,
+    play: false,
   },
   render: (args) => html`
     <eox-map
@@ -20,6 +22,8 @@ export const Slider = {
       .layer=${args.layer}
       .controlProperty=${args.controlProperty}
       .controlValues=${args.controlValues}
+      .navigation=${args.navigation}
+      .play=${args.play}
       .slider=${args.slider}
       style="margin-top: 8px"
     ></eox-timecontrol>
diff --git a/elements/timecontrol/stories/timecontrol.stories.js b/elements/timecontrol/stories/timecontrol.stories.js
index 555a04c69..c54681080 100644
--- a/elements/timecontrol/stories/timecontrol.stories.js
+++ b/elements/timecontrol/stories/timecontrol.stories.js
@@ -3,7 +3,7 @@ import {
   PrimaryStory,
   SliderStory,
   ProgrammaticTimeSelectionStory,
-  DisabledPlayButtonStory,
+  DisabledButtonsStory,
   NoMapStory,
   FormatStory,
 } from "./index";
@@ -20,7 +20,7 @@ export const Slider = SliderStory;
 
 export const ProgrammaticTimeSelection = ProgrammaticTimeSelectionStory;
 
-export const DisabledPlayButton = DisabledPlayButtonStory;
+export const DisabledButtons = DisabledButtonsStory;
 
 export const NoMap = NoMapStory;