feat(input-time-picker)!: localization support for input-time-picker

src/components/calcite-input-time-picker/calcite-input-time-picker.e2e.ts

@@ -1,6 +1,6 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { accessible, defaults, focusable, labelable, reflects, renders } from "../../tests/commonTests";
-import { formatTimePart, getMeridiem } from "../../utils/time";
+import { localizeTimeString } from "../../utils/time";
 
 describe("calcite-input-time-picker", () => {
   it("renders", async () => renders("calcite-input-time-picker", { display: "inline-block" }));
@@ -58,210 +58,96 @@ describe("calcite-input-time-picker", () => {
     expect(await popover.getProperty("open")).toBe(true);
   });
 
-  it("changing hour, minute and second values reflects in the input, input-time-picker and time-picker for 24-hour display format", async () => {
+  it("programmatically changing the value reflects in the input for fr lang (24-hour)", async () => {
+    const lang = "fr";
     const page = await newE2EPage({
-      html: `<calcite-input-time-picker hour-display-format="24" step="1"></calcite-input-time-picker>`
+      html: `<calcite-input-time-picker lang="${lang}"" step="1"></calcite-input-time-picker>`
     });
 
     const inputTimePicker = await page.find("calcite-input-time-picker");
     const input = await page.find("calcite-input-time-picker >>> calcite-input");
-    const timePicker = await page.find("calcite-input-time-picker >>> calcite-time-picker");
 
     for (let second = 0; second < 10; second++) {
       const date = new Date(0);
       date.setSeconds(second);
 
       const expectedValue = date.toISOString().substr(11, 8);
-      const expectedHour = expectedValue.substr(0, 2);
-      const expectedMinute = expectedValue.substr(3, 2);
-      const expectedSecond = expectedValue.substr(6, 2);
+      const expectedInputValue = localizeTimeString(expectedValue, lang);
 
       inputTimePicker.setProperty("value", expectedValue);
 
       await page.waitForChanges();
 
       const inputValue = await input.getProperty("value");
       const inputTimePickerValue = await inputTimePicker.getProperty("value");
-      const timePickerHourValue = await timePicker.getProperty("hour");
-      const timePickerMinuteValue = await timePicker.getProperty("minute");
-      const timePickerSecondValue = await timePicker.getProperty("second");
 
-      expect(inputValue).toBe(expectedValue);
+      expect(inputValue).toBe(expectedInputValue);
       expect(inputTimePickerValue).toBe(expectedValue);
-      expect(timePickerHourValue).toBe(expectedHour);
-      expect(timePickerMinuteValue).toBe(expectedMinute);
-      expect(timePickerSecondValue).toBe(expectedSecond);
     }
 
     for (let minute = 0; minute < 10; minute++) {
       const date = new Date(0);
       date.setMinutes(minute);
 
       const expectedValue = date.toISOString().substr(11, 8);
-      const expectedHour = expectedValue.substr(0, 2);
-      const expectedMinute = expectedValue.substr(3, 2);
-      const expectedSecond = expectedValue.substr(6, 2);
+      const expectedInputValue = localizeTimeString(expectedValue, lang);
 
       inputTimePicker.setProperty("value", expectedValue);
 
       await page.waitForChanges();
 
       const inputValue = await input.getProperty("value");
       const inputTimePickerValue = await inputTimePicker.getProperty("value");
-      const timePickerHourValue = await timePicker.getProperty("hour");
-      const timePickerMinuteValue = await timePicker.getProperty("minute");
-      const timePickerSecondValue = await timePicker.getProperty("second");
 
-      expect(inputValue).toBe(expectedValue);
+      expect(inputValue).toBe(expectedInputValue);
       expect(inputTimePickerValue).toBe(expectedValue);
-      expect(timePickerHourValue).toBe(expectedHour);
-      expect(timePickerMinuteValue).toBe(expectedMinute);
-      expect(timePickerSecondValue).toBe(expectedSecond);
     }
 
     for (let hour = 0; hour < 10; hour++) {
       const date = new Date(0);
       date.setHours(hour);
 
       const expectedValue = date.toISOString().substr(11, 8);
-      const expectedHour = expectedValue.substr(0, 2);
-      const expectedMinute = expectedValue.substr(3, 2);
-      const expectedSecond = expectedValue.substr(6, 2);
+      const expectedInputValue = localizeTimeString(expectedValue, lang);
 
       inputTimePicker.setProperty("value", expectedValue);
 
       await page.waitForChanges();
 
       const inputValue = await input.getProperty("value");
       const inputTimePickerValue = await inputTimePicker.getProperty("value");
-      const timePickerHourValue = await timePicker.getProperty("hour");
-      const timePickerMinuteValue = await timePicker.getProperty("minute");
-      const timePickerSecondValue = await timePicker.getProperty("second");
 
-      expect(inputValue).toBe(expectedValue);
+      expect(inputValue).toBe(expectedInputValue);
       expect(inputTimePickerValue).toBe(expectedValue);
-      expect(timePickerHourValue).toBe(expectedHour);
-      expect(timePickerMinuteValue).toBe(expectedMinute);
-      expect(timePickerSecondValue).toBe(expectedSecond);
     }
   });
 
-  it("changing hour, minute and second values reflects in the input, input-time-picker and time-picker for 12-hour display format", async () => {
+  it("programmatically changing the value reflects in the input for en lang (12-hour)", async () => {
+    const lang = "en";
     const page = await newE2EPage({
-      html: `<calcite-input-time-picker hour-display-format="12" step="1"></calcite-input-time-picker>`
+      html: `<calcite-input-time-picker step="1"></calcite-input-time-picker>`
     });
 
     const inputTimePicker = await page.find("calcite-input-time-picker");
     const input = await page.find("calcite-input-time-picker >>> calcite-input");
-    const timePicker = await page.find("calcite-input-time-picker >>> calcite-time-picker");
 
-    for (let second = 0; second < 10; second++) {
-      const date = new Date(0);
-      date.setSeconds(second);
+    const date = new Date(0);
+    date.setHours(13);
+    date.setMinutes(59);
+    date.setSeconds(59);
 
-      const expectedValue = date.toISOString().substr(11, 8);
-      const expectedHour = expectedValue.substr(0, 2);
-      const expectedHourAsNumber = parseInt(expectedValue.substr(0, 2));
-      const expectedMinute = expectedValue.substr(3, 2);
-      const expectedSecond = expectedValue.substr(6, 2);
-      const expectedDisplayHour =
-        expectedHourAsNumber > 12
-          ? formatTimePart(expectedHourAsNumber - 12)
-          : expectedHourAsNumber === 0
-          ? "12"
-          : formatTimePart(expectedHourAsNumber);
-      const expectedDisplayValue = `${expectedDisplayHour}:${expectedMinute}:${expectedSecond} ${getMeridiem(
-        expectedHour
-      )}`;
+    const expectedValue = date.toISOString().substr(11, 8);
+    const expectedDisplayValue = localizeTimeString(expectedValue, lang);
 
-      inputTimePicker.setProperty("value", expectedValue);
-
-      await page.waitForChanges();
-
-      const inputValue = await input.getProperty("value");
-      const inputTimePickerValue = await inputTimePicker.getProperty("value");
-      const timePickerHourValue = await timePicker.getProperty("hour");
-      const timePickerMinuteValue = await timePicker.getProperty("minute");
-      const timePickerSecondValue = await timePicker.getProperty("second");
-
-      expect(inputValue).toBe(expectedDisplayValue);
-      expect(inputTimePickerValue).toBe(expectedValue);
-      expect(timePickerHourValue).toBe(expectedHour);
-      expect(timePickerMinuteValue).toBe(expectedMinute);
-      expect(timePickerSecondValue).toBe(expectedSecond);
-    }
+    inputTimePicker.setProperty("value", expectedValue);
 
-    for (let minute = 0; minute < 10; minute++) {
-      const date = new Date(0);
-      date.setMinutes(minute);
-
-      const expectedValue = date.toISOString().substr(11, 8);
-      const expectedHour = expectedValue.substr(0, 2);
-      const expectedHourAsNumber = parseInt(expectedValue.substr(0, 2));
-      const expectedMinute = expectedValue.substr(3, 2);
-      const expectedSecond = expectedValue.substr(6, 2);
-      const expectedDisplayHour =
-        expectedHourAsNumber > 12
-          ? formatTimePart(expectedHourAsNumber - 12)
-          : expectedHourAsNumber === 0
-          ? "12"
-          : formatTimePart(expectedHourAsNumber);
-      const expectedDisplayValue = `${expectedDisplayHour}:${expectedMinute}:${expectedSecond} ${getMeridiem(
-        expectedHour
-      )}`;
-
-      inputTimePicker.setProperty("value", expectedValue);
-
-      await page.waitForChanges();
-
-      const inputValue = await input.getProperty("value");
-      const inputTimePickerValue = await inputTimePicker.getProperty("value");
-      const timePickerHourValue = await timePicker.getProperty("hour");
-      const timePickerMinuteValue = await timePicker.getProperty("minute");
-      const timePickerSecondValue = await timePicker.getProperty("second");
-
-      expect(inputValue).toBe(expectedDisplayValue);
-      expect(inputTimePickerValue).toBe(expectedValue);
-      expect(timePickerHourValue).toBe(expectedHour);
-      expect(timePickerMinuteValue).toBe(expectedMinute);
-      expect(timePickerSecondValue).toBe(expectedSecond);
-    }
-
-    for (let hour = 0; hour < 10; hour++) {
-      const date = new Date(0);
-      date.setHours(hour);
-
-      const expectedValue = date.toISOString().substr(11, 8);
-      const expectedHour = expectedValue.substr(0, 2);
-      const expectedHourAsNumber = parseInt(expectedValue.substr(0, 2));
-      const expectedMinute = expectedValue.substr(3, 2);
-      const expectedSecond = expectedValue.substr(6, 2);
-      const expectedDisplayHour =
-        expectedHourAsNumber > 12
-          ? formatTimePart(expectedHourAsNumber - 12)
-          : expectedHourAsNumber === 0
-          ? "12"
-          : formatTimePart(expectedHourAsNumber);
-      const expectedDisplayValue = `${expectedDisplayHour}:${expectedMinute}:${expectedSecond} ${getMeridiem(
-        expectedHour
-      )}`;
-
-      inputTimePicker.setProperty("value", expectedValue);
-
-      await page.waitForChanges();
+    await page.waitForChanges();
 
-      const inputValue = await input.getProperty("value");
-      const inputTimePickerValue = await inputTimePicker.getProperty("value");
-      const timePickerHourValue = await timePicker.getProperty("hour");
-      const timePickerMinuteValue = await timePicker.getProperty("minute");
-      const timePickerSecondValue = await timePicker.getProperty("second");
+    const inputValue = await input.getProperty("value");
+    const inputTimePickerValue = await inputTimePicker.getProperty("value");
 
-      expect(inputValue).toBe(expectedDisplayValue);
-      expect(inputTimePickerValue).toBe(expectedValue);
-      expect(timePickerHourValue).toBe(expectedHour);
-      expect(timePickerMinuteValue).toBe(expectedMinute);
-      expect(timePickerSecondValue).toBe(expectedSecond);
-    }
+    expect(inputValue).toBe(expectedDisplayValue);
+    expect(inputTimePickerValue).toBe(expectedValue);
   });
 
   it("appropriately triggers calciteInputTimePickerChange event when the user types a value", async () => {
@@ -326,4 +212,13 @@ describe("calcite-input-time-picker", () => {
 
     expect(await inputTimePicker.getProperty("value")).toBe("14:59");
   });
+
+  it("sets initial value to undefined when it is not a valid time value", async () => {
+    const page = await newE2EPage({
+      html: `<calcite-input-time-picker value="invalid"></calcite-input-time-picker>`
+    });
+    const inputTimePicker = await page.find("calcite-input-time-picker");
+
+    expect(await inputTimePicker.getProperty("value")).toBeUndefined();
+  });
 });

src/components/calcite-input-time-picker/calcite-input-time-picker.stories.ts

@@ -16,7 +16,6 @@ export const LightTheme = (): string => html`
   <calcite-input-time-picker
     ${boolean("disabled", false)}
     ${boolean("hidden", false)}
-    hour-display-format="${select("hour-display-format", ["12", "24"], "12")}"
     name="${text("name", "light")}"
     scale="${select("scale", ["s", "m", "l"], "m")}"
     step="${number("step", 1)}"
@@ -30,7 +29,6 @@ export const DarkTheme = (): string => html`
     ${boolean("disabled", false)}
     ${boolean("hidden", false)}
     class="calcite-theme-dark"
-    hour-display-format="${select("hour-display-format", ["12", "24"], "12")}"
     name="${text("name", "dark")}"
     scale="${select("scale", ["s", "m", "l"], "m")}"
     step="${number("step", 1)}"