feat(date-time-picker): add time label i18n

.changeset/witty-geese-swim.md

@@ -0,0 +1,7 @@
+---
+"@siemens/ix-angular": minor
+"@siemens/ix": minor
+"@siemens/ix-vue": minor
+---
+
+ __ix-datetime-picker__: Time selection headline can now be translated via property `i18nTime`.

packages/angular/src/components.ts

@@ -686,14 +686,14 @@ Only triggered if date-picker-rework is in range mode. @since 2.1.0
 
 
 @ProxyCmp({
-  inputs: ['dateFormat', 'eventDelimiter', 'from', 'i18nDone', 'locale', 'maxDate', 'minDate', 'range', 'showHour', 'showMinutes', 'showSeconds', 'showTimeReference', 'textSelectDate', 'time', 'timeFormat', 'timeReference', 'to', 'weekStartIndex']
+  inputs: ['dateFormat', 'eventDelimiter', 'from', 'i18nDone', 'i18nTime', 'locale', 'maxDate', 'minDate', 'range', 'showHour', 'showMinutes', 'showSeconds', 'showTimeReference', 'textSelectDate', 'time', 'timeFormat', 'timeReference', 'to', 'weekStartIndex']
 })
 @Component({
   selector: 'ix-datetime-picker',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['dateFormat', 'eventDelimiter', 'from', 'i18nDone', 'locale', 'maxDate', 'minDate', 'range', 'showHour', 'showMinutes', 'showSeconds', 'showTimeReference', 'textSelectDate', 'time', 'timeFormat', 'timeReference', 'to', 'weekStartIndex'],
+  inputs: ['dateFormat', 'eventDelimiter', 'from', 'i18nDone', 'i18nTime', 'locale', 'maxDate', 'minDate', 'range', 'showHour', 'showMinutes', 'showSeconds', 'showTimeReference', 'textSelectDate', 'time', 'timeFormat', 'timeReference', 'to', 'weekStartIndex'],
 })
 export class IxDatetimePicker {
   protected el: HTMLElement;

packages/core/component-doc.json

@@ -6031,6 +6031,33 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "i18nTime",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "i-1-8n-time",
+          "reflectToAttr": false,
+          "docs": "Top label of time picker",
+          "docsTags": [
+            {
+              "name": "since",
+              "text": "3.0.0"
+            }
+          ],
+          "default": "'Time'",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "locale",
           "type": "string | undefined",

packages/core/src/components.d.ts

@@ -932,6 +932,11 @@ export namespace Components {
           * @since 2.1.0
          */
         "i18nDone": string;
+        /**
+          * Top label of time picker
+          * @since 3.0.0
+         */
+        "i18nTime": string;
         /**
           * Format of time string See {@link "https://moment.github.io/luxon/#/formatting?id=table-of-tokens"} for all available tokens.
           * @since 2.1.0
@@ -6122,6 +6127,11 @@ declare namespace LocalJSX {
           * @since 2.1.0
          */
         "i18nDone"?: string;
+        /**
+          * Top label of time picker
+          * @since 3.0.0
+         */
+        "i18nTime"?: string;
         /**
           * Format of time string See {@link "https://moment.github.io/luxon/#/formatting?id=table-of-tokens"} for all available tokens.
           * @since 2.1.0

packages/core/src/components/datetime-picker/datetime-picker.tsx

@@ -132,6 +132,13 @@ export class DatetimePicker
    */
   @Prop({ attribute: 'i18n-done' }) i18nDone: string = 'Done';
 
+  /**
+   * Top label of time picker
+   *
+   * @since 3.0.0
+   */
+  @Prop() i18nTime: string = 'Time';
+
   /**
    * The index of which day to start the week on, based on the Locale#weekdays array.
    * E.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on monday.
@@ -252,6 +259,7 @@ export class DatetimePicker
                 showSeconds={this.showSeconds}
                 onTimeChange={(event) => this.onTimeChange(event)}
                 format={this.timeFormat}
+                textTime={this.i18nTime}
                 time={this.time}
               ></ix-time-picker>
               <div class="btn-select-date-container">

packages/vue/src/components.ts

@@ -414,6 +414,7 @@ export const IxDatetimePicker = /*@__PURE__*/ defineContainer<JSX.IxDatetimePick
   'timeReference',
   'textSelectDate',
   'i18nDone',
+  'i18nTime',
   'weekStartIndex',
   'locale',
   'eventDelimiter',