fix(input-time-picker, time-picker): fixing direct value setting issue where the minutes and seconds weren't respected when a default value is supplied

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

@@ -161,6 +161,37 @@ describe("calcite-input-time-picker", () => {
     expect(inputTimePickerValue).toBe(expectedValue);
   });
 
+  it("value displays correctly in the input when it is programmatically changed for a 12-hour language when a default value is present", async () => {
+    const lang = "en";
+    const page = await newE2EPage({
+      html: `<calcite-input-time-picker step="1" value="11:00:00"></calcite-input-time-picker>`
+    });
+
+    const inputTimePicker = await page.find("calcite-input-time-picker");
+    const input = await page.find("calcite-input-time-picker >>> calcite-input");
+
+    expect(await input.getProperty("value")).toBe("11:00:00 AM");
+    expect(await inputTimePicker.getProperty("value")).toBe("11:00:00");
+
+    const date = new Date(0);
+    date.setHours(13);
+    date.setMinutes(59);
+    date.setSeconds(59);
+
+    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");
+
+    expect(inputValue).toBe(expectedDisplayValue);
+    expect(inputTimePickerValue).toBe(expectedValue);
+  });
+
   it("appropriately triggers calciteInputTimePickerChange event when the user types a value", async () => {
     const page = await newE2EPage();
     await page.setContent(`<calcite-input-time-picker step="1"></calcite-input-time-picker>`);

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

@@ -53,6 +53,35 @@ describe("calcite-time-picker", () => {
       shadowFocusTargetSelector: `.${CSS.hour}`
     }));
 
+  it("value displays correctly when value is programmatically changed", async () => {
+    const originalValue = "11:00:00";
+    const newValue = "14:30:40";
+    const page = await newE2EPage({
+      html: `<calcite-time-picker step="1" value="${originalValue}"></calcite-time-picker>`
+    });
+
+    const timePicker = await page.find("calcite-time-picker");
+    const hourEl = await page.find(`calcite-time-picker >>> .${CSS.hour}`);
+    const minuteEl = await page.find(`calcite-time-picker >>> .${CSS.minute}`);
+    const secondEl = await page.find(`calcite-time-picker >>> .${CSS.second}`);
+    const meridiemEl = await page.find(`calcite-time-picker >>> .${CSS.meridiem}`);
+
+    expect(await timePicker.getProperty("value")).toBe(originalValue);
+    expect(hourEl.textContent).toBe("11");
+    expect(minuteEl.textContent).toBe("00");
+    expect(secondEl.textContent).toBe("00");
+    expect(meridiemEl.textContent).toBe("AM");
+
+    timePicker.setProperty("value", newValue);
+    await page.waitForChanges();
+
+    expect(await timePicker.getProperty("value")).toBe(newValue);
+    expect(hourEl.textContent).toBe("02");
+    expect(minuteEl.textContent).toBe("30");
+    expect(secondEl.textContent).toBe("40");
+    expect(meridiemEl.textContent).toBe("PM");
+  });
+
   describe("keyboard accessibility", () => {
     it("tabbing focuses each input in the correct sequence", async () => {
       const page = await newE2EPage({

src/components/time-picker/time-picker.tsx

@@ -169,13 +169,6 @@ export class TimePicker {
 
   @State() hour: string;
 
-  @Watch("hour")
-  hourChanged(newHour: string): void {
-    if (this.meridiem && isValidNumber(newHour)) {
-      this.setValuePart("meridiem", getMeridiem(newHour));
-    }
-  }
-
   @State() hourCycle: HourCycle;
 
   @State() localizedHour: string;