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

#5416)

* feat: add built-in translations

* add bundles

* remove obsolete folder

* add type generator

* rename type's file

* delete non-t9n file

* commit lock file

* rename type generating script and tidy up

* regenerate interface files

* update color-picker file

* add missing value-list entries

* inline common strings until we have common bundle wired up

* revert unnecessary tsconfig changes

* update interface files

* add util to fetchbundles and supported locale

* feedback changes

* more cleanup

* remove intl default value validation in e2e

* sync en.json with en-US.json bundle

* rename script

* refactor script file

* remove console.log

* refactor & add back types to intl props in colorpicker

* add util method for string over rides

* tidy up

* simplify t9n pattern

* fix issue caused by type + interface TS shape confusion

* support nb&no for norwegian locale

* add cache for stringBundle fetch

* tidy up

* drop intl from string bundle keys

* update scripts to use messages as string bundle name

* rename bundles

* rename interface props

* add t9ntest util methods

* restore intlProp watching to pattern

* use extended mutation observer to simplify unobserving

* add intl prop watcher doc

* add support for cascading lang

* tidy up

* update conventions doc with pattern info

* update doc

* drop and ignore generated d.ts files and tweak messages type names

* wire up interface generation before build

* merge w other

* refactor localized components pattern

* refactor t9n pattern to work w/ localized component

* tidy up

* fix utils depending on defined locale and not placeholder one

* consolidate t9n tests and make intl prop merging happen at run time

* Updated Pseudo i18n - @jian9413

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

* ensure connectLocale happens before code that depends on locale

* convert effectiveLocale to internla prop

* cherry pick lang inheritance changes

* update doc

* tidy up

* make lang lookup more robust

* update doc

* tidy up

* fix test errors

* add comments

* remove intl resources

* fix typo

* clean up

* forward intlProps

Co-authored-by: JC Franco <[email protected]>
Co-authored-by: Ben Elan <[email protected]>
Co-authored-by: jona7150 <[email protected]>

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,6 +618,7 @@ export class InputTimePicker
           triggerDisabled={true}
         >
           <calcite-time-picker
+            //t9n props are used here to forward the messages only.
             intlHour={this.intlHour}
             intlHourDown={this.intlHourDown}
             intlHourUp={this.intlHourUp}
@@ -575,6 +632,7 @@ export class InputTimePicker
             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>"));
 });