feat(frontend): event duration component

packages/frontend/components/event-duration/index.js

@@ -0,0 +1,29 @@
+export const EventDurationComponent = class extends HTMLElement {
+  constructor() {
+    super();
+
+    this.allDayToggle = this.querySelector(`input[type="checkbox"]`);
+    this.dateTimeInputs = this.querySelectorAll(`input[type="datetime-local"]`);
+  }
+
+  connectedCallback() {
+    this.updateDateTimeInputs();
+  }
+
+  updateDateTimeInputs() {
+    for (const $dateInput of this.dateTimeInputs) {
+      $dateInput.type = this.allDayToggle.checked ? "date" : "datetime-local";
+
+      this.allDayToggle.addEventListener("click", () => {
+        const initialValue = $dateInput.value;
+        if (this.allDayToggle.checked) {
+          $dateInput.type = "date";
+          $dateInput.value = initialValue.split("T")[0];
+        } else {
+          $dateInput.type = "datetime-local";
+          $dateInput.value = `${initialValue}T12:30`;
+        }
+      });
+    }
+  }
+};

packages/frontend/components/event-duration/styles.css

@@ -0,0 +1,11 @@
+event-duration {
+  align-items: end;
+  column-gap: var(--space-xl);
+  display: flex;
+  flex-wrap: wrap;
+  margin-block-start: 0 !important;
+
+  & .field {
+    min-inline-size: 20ch;
+  }
+}

packages/frontend/scripts/app.js

@@ -1,6 +1,7 @@
 import { AddAnotherComponent } from "../components/add-another/index.js";
 import { CheckboxesFieldComponent } from "../components/checkboxes/index.js";
 import { ErrorSummaryComponent } from "../components/error-summary/index.js";
+import { EventDurationComponent } from "../components/event-duration/index.js";
 import { GeoInputFieldComponent } from "../components/geo-input/index.js";
 import { NotificationBannerComponent } from "../components/notification-banner/index.js";
 import { RadiosFieldComponent } from "../components/radios/index.js";
@@ -11,6 +12,7 @@ import { TextareaFieldComponent } from "../components/textarea/index.js";
 customElements.define("add-another", AddAnotherComponent);
 customElements.define("checkboxes-field", CheckboxesFieldComponent);
 customElements.define("error-summary", ErrorSummaryComponent);
+customElements.define("event-duration", EventDurationComponent);
 customElements.define("geo-input-field", GeoInputFieldComponent);
 customElements.define("notification-banner", NotificationBannerComponent);
 customElements.define("radios-field", RadiosFieldComponent);

packages/frontend/styles/app.css

@@ -29,6 +29,7 @@
 @import url("../components/details/styles.css");
 @import url("../components/error-message/styles.css");
 @import url("../components/error-summary/styles.css");
+@import url("../components/event-duration/styles.css");
 @import url("../components/field/styles.css");
 @import url("../components/fieldset/styles.css");
 @import url("../components/footer/styles.css");