feat(core/date-dropdown): expose locale of nested date-picker (#1549)

Co-authored-by: matthiashader <[email protected]> Co-authored-by: AndreasBerliner <[email protected]> Co-authored-by: Daniel Leroux <[email protected]>
siemens · Nov 18, 2024 · a5e2172 · a5e2172
1 parent dc59d67
commit a5e2172
Show file tree

Hide file tree

Showing 14 changed files with 254 additions and 43 deletions.
diff --git a/.changeset/clever-weeks-grin.md b/.changeset/clever-weeks-grin.md
@@ -0,0 +1,7 @@
+---
+"@siemens/ix-angular": minor
+"@siemens/ix": minor
+"@siemens/ix-vue": minor
+---
+
+feat(core/date-dropdown|date-picker|datetime-picker): add missing properties to picker components
diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts
@@ -488,15 +488,15 @@ export declare interface IxContentHeader extends Components.IxContentHeader {
 
 
 @ProxyCmp({
-  inputs: ['customRangeAllowed', 'dateRangeId', 'dateRangeOptions', 'disabled', 'format', 'from', 'i18nCustomItem', 'i18nDone', 'i18nNoRange', 'maxDate', 'minDate', 'range', 'to'],
+  inputs: ['customRangeAllowed', 'dateRangeId', 'dateRangeOptions', 'disabled', 'format', 'from', 'i18nCustomItem', 'i18nDone', 'i18nNoRange', 'locale', 'maxDate', 'minDate', 'range', 'to', 'weekStartIndex'],
   methods: ['getDateRange']
 })
 @Component({
   selector: 'ix-date-dropdown',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['customRangeAllowed', 'dateRangeId', 'dateRangeOptions', 'disabled', 'format', 'from', 'i18nCustomItem', 'i18nDone', 'i18nNoRange', 'maxDate', 'minDate', 'range', 'to'],
+  inputs: ['customRangeAllowed', 'dateRangeId', 'dateRangeOptions', 'disabled', 'format', 'from', 'i18nCustomItem', 'i18nDone', 'i18nNoRange', 'locale', 'maxDate', 'minDate', 'range', 'to', 'weekStartIndex'],
 })
 export class IxDateDropdown {
   protected el: HTMLElement;

diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
@@ -3579,6 +3579,32 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "locale",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "locale",
+          "reflectToAttr": false,
+          "docs": "Locale identifier (e.g. 'en' or 'de').",
+          "docsTags": [
+            {
+              "name": "since",
+              "text": "2.6.0"
+            }
+          ],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "maxDate",
           "type": "string",
@@ -3666,6 +3692,33 @@
           ],
           "optional": false,
           "required": false
+        },
+        {
+          "name": "weekStartIndex",
+          "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "week-start-index",
+          "reflectToAttr": false,
+          "docs": "The index of which day to start the week on, based on the Locale#weekdays array.\nE.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on monday.",
+          "docsTags": [
+            {
+              "name": "since",
+              "text": "2.6.0"
+            }
+          ],
+          "default": "0",
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false
         }
       ],
       "methods": [
@@ -3954,7 +4007,7 @@
           "mutable": false,
           "attr": "locale",
           "reflectToAttr": false,
-          "docs": "Format of time string\nSee {@link \"https://moment.github.io/luxon/#/formatting?id=table-of-tokens\"} for all available tokens.",
+          "docs": "Locale identifier (e.g. 'en' or 'de').",
           "docsTags": [
             {
               "name": "since",
@@ -17749,6 +17802,11 @@
       "docstring": "",
       "path": "src/components/css-grid/css-grid.tsx"
     },
+    "src/components/date-time-card/date-time-card.tsx::DateTimeCardCorners": {
+      "declaration": "export type DateTimeCardCorners = 'rounded' | 'left' | 'right' | 'straight';",
+      "docstring": "",
+      "path": "src/components/date-time-card/date-time-card.tsx"
+    },
     "src/components/date-dropdown/date-dropdown.tsx::DateDropdownOption": {
       "declaration": "{\n  id: string;\n  label: string;\n  from: string;\n  to: string;\n}",
       "docstring": "",
@@ -17759,11 +17817,6 @@
       "docstring": "",
       "path": "src/components/date-dropdown/date-dropdown.tsx"
     },
-    "src/components/date-time-card/date-time-card.tsx::DateTimeCardCorners": {
-      "declaration": "export type DateTimeCardCorners = 'rounded' | 'left' | 'right' | 'straight';",
-      "docstring": "",
-      "path": "src/components/date-time-card/date-time-card.tsx"
-    },
     "src/components/date-picker/date-picker.tsx::DateChangeEvent": {
       "declaration": "{\n  from: string;\n  to: string;\n}",
       "docstring": "",
@@ -17785,7 +17838,7 @@
       "path": "src/components/dropdown-button/dropdown-button.tsx"
     },
     "src/components/dropdown/placement.ts::AlignedPlacement": {
-      "declaration": "\"bottom-start\" | \"top-start\" | \"top-end\" | \"right-start\" | \"right-end\" | \"bottom-end\" | \"left-start\" | \"left-end\"",
+      "declaration": "\"bottom-start\" | \"left-start\" | \"left-end\" | \"right-start\" | \"right-end\" | \"top-start\" | \"top-end\" | \"bottom-end\"",
       "docstring": "",
       "path": "src/components/dropdown/placement.ts"
     },

diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -576,6 +576,11 @@ export namespace Components {
           * Text for the done button. Will be used for translation.
          */
         "i18nNoRange": string;
+        /**
+          * Locale identifier (e.g. 'en' or 'de').
+          * @since 2.6.0
+         */
+        "locale"?: string;
         /**
           * The latest date that can be selected by the date picker. If not set there will be no restriction.
          */
@@ -593,6 +598,11 @@ export namespace Components {
          */
         "to": string;
         "today": string;
+        /**
+          * 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.
+          * @since 2.6.0
+         */
+        "weekStartIndex": number;
     }
     interface IxDatePicker {
         /**
@@ -628,7 +638,7 @@ export namespace Components {
          */
         "individual": boolean;
         /**
-          * Format of time string See {@link "https://moment.github.io/luxon/#/formatting?id=table-of-tokens"} for all available tokens.
+          * Locale identifier (e.g. 'en' or 'de').
           * @since 2.1.0
          */
         "locale"?: string;
@@ -4669,6 +4679,11 @@ declare namespace LocalJSX {
           * Text for the done button. Will be used for translation.
          */
         "i18nNoRange"?: string;
+        /**
+          * Locale identifier (e.g. 'en' or 'de').
+          * @since 2.6.0
+         */
+        "locale"?: string;
         /**
           * The latest date that can be selected by the date picker. If not set there will be no restriction.
          */
@@ -4690,6 +4705,11 @@ declare namespace LocalJSX {
          */
         "to"?: string;
         "today"?: string;
+        /**
+          * 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.
+          * @since 2.6.0
+         */
+        "weekStartIndex"?: number;
     }
     interface IxDatePicker {
         /**
@@ -4721,7 +4741,7 @@ declare namespace LocalJSX {
          */
         "individual"?: boolean;
         /**
-          * Format of time string See {@link "https://moment.github.io/luxon/#/formatting?id=table-of-tokens"} for all available tokens.
+          * Locale identifier (e.g. 'en' or 'de').
           * @since 2.1.0
          */
         "locale"?: string;

diff --git a/packages/core/src/components/date-dropdown/date-dropdown.tsx b/packages/core/src/components/date-dropdown/date-dropdown.tsx
@@ -21,6 +21,7 @@ import {
   Watch,
 } from '@stencil/core';
 import { DateTime } from 'luxon';
+import { IxDatePickerComponent } from '../date-picker/date-picker-component';
 import { makeRef } from '../utils/make-ref';
 
 export type DateDropdownOption = {
@@ -44,7 +45,7 @@ export type DateRangeChangeEvent = {
   styleUrl: 'date-dropdown.scss',
   shadow: true,
 })
-export class DateDropdown {
+export class DateDropdown implements Omit<IxDatePickerComponent, 'corners'> {
   @Element() hostElement!: HTMLIxDateDropdownElement;
 
   /**
@@ -144,6 +145,21 @@ export class DateDropdown {
     this.onDateRangeIdChange();
   }
 
+  /**
+   * Locale identifier (e.g. 'en' or 'de').
+   *
+   * @since 2.6.0
+   */
+  @Prop() locale?: string;
+
+  /**
+   * 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.
+   *
+   * @since 2.6.0
+   */
+  @Prop() weekStartIndex = 0;
+
   /**
    * Text for custom dropdown item. Will be used for translation.
    */
@@ -365,6 +381,7 @@ export class DateDropdown {
                   <Fragment>
                     <ix-date-picker
                       standaloneAppearance={false}
+                      locale={this.locale}
                       onDateChange={(e) => {
                         e.stopPropagation();
                         this.currentRangeValue = {
@@ -381,6 +398,7 @@ export class DateDropdown {
                       minDate={this.minDate}
                       maxDate={this.maxDate}
                       today={this.today}
+                      weekStartIndex={this.weekStartIndex}
                     ></ix-date-picker>
                     <div class="pull-right">
                       <ix-button

diff --git a/packages/core/src/components/date-picker/date-picker-component.ts b/packages/core/src/components/date-picker/date-picker-component.ts
@@ -0,0 +1,62 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { DateTimeCardCorners } from '../date-time-card/date-time-card';
+
+export interface IxDatePickerComponent {
+  /**
+   * Annotate with @Prop() decorator
+   */
+  format: string;
+
+  /**
+   * Annotae with @Prop() decorator
+   */
+  range: boolean;
+
+  /**
+   * Annotae with @Prop() decorator
+   */
+  corners: DateTimeCardCorners;
+
+  /**
+   * Annotae with @Prop() decorator
+   */
+  from?: string;
+
+  /**
+   * Annotae with @Prop() decorator
+   */
+  to?: string;
+
+  /**
+   * Annotae with @Prop() decorator
+   */
+  minDate: string;
+
+  /**
+   * Annotae with @Prop() decorator
+   */
+  maxDate: string;
+
+  /**
+   * Annotate with @Prop({ attribute: 'i18n-done' }) decorator
+   */
+  i18nDone: string;
+
+  /**
+   * Annotae with @Prop() decorator
+   */
+  weekStartIndex: number;
+
+  /**
+   * Annotae with @Prop() decorator
+   */
+  locale?: string;
+}