feat(time-picker,input-time-picker): add built-in translations support

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

@@ -319,7 +319,7 @@ describe("calcite-color-picker", () => {
   };
 
   function assertUnsupportedValueMessage(value: string | object | null, format: string): void {
-    expect(consoleSpy).toBeCalledTimes(1);
+    expect(consoleSpy).toHaveBeenCalledTimes(1);
     expect(consoleSpy).toHaveBeenCalledWith(
       expect.stringMatching(
         new RegExp(

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

@@ -33,6 +33,7 @@ import {
   numberStringFormatter,
   updateEffectiveLocale
 } from "../../utils/locale";
+import { Messages } from "../time-picker/assets/time-picker/t9n";
 import { numberKeys } from "../../utils/key";
 
 @Component({
@@ -107,42 +108,97 @@ export class InputTimePicker
     }
   }
 
-  /** Accessible name for the component's hour input. */
+  /**
+   * Accessible name for the component's hour input.
+   *
+   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
+   */
   @Prop() intlHour?: string;
 
-  /** Accessible name for the component's hour down button. */
+  /**
+   * Accessible name for the component's hour down button.
+   *
+   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
+   */
   @Prop() intlHourDown?: string;
 
-  /** Accessible name for the component's hour up button. */
+  /**
+   * Accessible name for the component's hour up button.
+   *
+   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
+   */
   @Prop() intlHourUp?: string;
 
-  /** Accessible name for the component's meridiem (am/pm) input. */
+  /**
+   * Accessible name for the component's meridiem (am/pm) input.
+   *
+   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
+   */
   @Prop() intlMeridiem?: string;
 
-  /** Accessible name for the component's meridiem (am/pm) down button. */
+  /**
+   * Accessible name for the component's meridiem (am/pm) down button.
+   *
+   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
+   */
   @Prop() intlMeridiemDown?: string;
 
-  /** Accessible name for the component's meridiem (am/pm) up button. */
+  /**
+   * Accessible name for the component's meridiem (am/pm) up button.
+   *
+   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
+   */
   @Prop() intlMeridiemUp?: string;
 
-  /** Accessible name for the component's minute input. */
+  /**
+   * Accessible name for the component's minute input.
+   *
+   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
+   */
   @Prop() intlMinute?: string;
 
-  /** Accessible name for the component's minute down button. */
+  /**
+   * Accessible name for the component's minute down button.
+   *
+   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
+   */
   @Prop() intlMinuteDown?: string;
 
-  /** Accessible name for the component's minute up button. */
+  /**
+   * Accessible name for the component's minute up button.
+   *
+   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
+   */
   @Prop() intlMinuteUp?: string;
 
-  /** Accessible name for the component's second input. */
+  /**
+   * Accessible name for the component's second input.
+   *
+   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
+   */
   @Prop() intlSecond?: string;
 
-  /** Accessible name for the component's second down button. */
+  /**
+   * Accessible name for the component's second down button.
+   *
+   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
+   */
   @Prop() intlSecondDown?: string;
 
-  /** Accessible name for the component's second up button. */
+  /**
+   * Accessible name for the component's second up button.
+   *
+   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
+   */
   @Prop() intlSecondUp?: string;
 
+  /**
+   * Use this property to override individual strings used by the component.
+   *
+   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
+   */
+  @Prop() messagesOverrides: Partial<Messages>;
+
   /**
    * BCP 47 language tag for desired language and country format.
    *
@@ -562,19 +618,8 @@ export class InputTimePicker
           triggerDisabled={true}
         >
           <calcite-time-picker
-            intlHour={this.intlHour}
-            intlHourDown={this.intlHourDown}
-            intlHourUp={this.intlHourUp}
-            intlMeridiem={this.intlMeridiem}
-            intlMeridiemDown={this.intlMeridiemDown}
-            intlMeridiemUp={this.intlMeridiemUp}
-            intlMinute={this.intlMinute}
-            intlMinuteDown={this.intlMinuteDown}
-            intlMinuteUp={this.intlMinuteUp}
-            intlSecond={this.intlSecond}
-            intlSecondDown={this.intlSecondDown}
-            intlSecondUp={this.intlSecondUp}
             lang={this.effectiveLocale}
+            messageOverrides={this.messagesOverrides}
             numberingSystem={this.numberingSystem}
             onCalciteInternalTimePickerChange={this.timePickerChangeHandler}
             ref={this.setCalciteTimePickerEl}

src/components/time-picker/resources.ts

@@ -27,18 +27,3 @@ export const CSS = {
   timePicker: "time-picker",
   meridiemStart: "meridiem--start"
 };
-
-export const TEXT = {
-  hour: "Hour",
-  hourDown: "Decrease hour",
-  hourUp: "Increase hour",
-  meridiem: "AM/PM",
-  meridiemDown: "Decrease AM/PM",
-  meridiemUp: "Increase AM/PM",
-  minute: "Minute",
-  minuteDown: "Decrease minute",
-  minuteUp: "Increase minute",
-  second: "Second",
-  secondDown: "Decrease second",
-  secondUp: "Increase second"
-};

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

@@ -1,5 +1,5 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, focusable, renders, hidden } from "../../tests/commonTests";
+import { accessible, defaults, focusable, renders, hidden, t9n } from "../../tests/commonTests";
 import { formatTimePart } from "../../utils/time";
 import { CSS } from "./resources";
 
@@ -1053,4 +1053,6 @@ describe("calcite-time-picker", () => {
       expect(meridiemStart).toBeTruthy();
     });
   });
+
+  it("suuports translation", () => t9n("<calcite-time-picker></calcite-time-picker>"));
 });