fix(core/datetime-picker): responsiveness, strict typing, spacing

.changeset/twenty-mangos-grin.md

@@ -0,0 +1,5 @@
+---
+'@siemens/ix': patch
+---
+
+fix(core/date-time-picker): responsiveness and spacing, strict typing

packages/core/component-doc.json

@@ -4423,7 +4423,7 @@
           "name": "from",
           "type": "string",
           "complexType": {
-            "original": "string | undefined",
+            "original": "string",
             "resolved": "string",
             "references": {}
           },
@@ -4442,7 +4442,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -4496,7 +4496,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -4522,7 +4522,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -4548,7 +4548,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -4641,10 +4641,10 @@
         },
         {
           "name": "showTimeReference",
-          "type": "any",
+          "type": "boolean",
           "complexType": {
-            "original": "any",
-            "resolved": "any",
+            "original": "boolean",
+            "resolved": "boolean",
             "references": {}
           },
           "mutable": false,
@@ -4661,13 +4661,12 @@
               "text": "1.1.0"
             }
           ],
-          "default": "undefined",
           "values": [
             {
-              "type": "any"
+              "type": "boolean"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -4698,7 +4697,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -4724,7 +4723,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -4777,14 +4776,14 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
           "name": "to",
           "type": "string",
           "complexType": {
-            "original": "string | undefined",
+            "original": "string",
             "resolved": "string",
             "references": {}
           },
@@ -4803,7 +4802,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {

packages/core/src/components.d.ts

@@ -702,7 +702,7 @@ export namespace Components {
           * The selected starting date. If the picker is not in range mode this is the selected date. Format has to match the `format` property.
           * @since 1.1.0
          */
-        "from": string | undefined;
+        "from"?: string;
         /**
           * Text of date select button
           * @since 2.1.0
@@ -712,17 +712,17 @@ export namespace Components {
           * Format of time string See {@link "https://moment.github.io/luxon/#/formatting?id=table-of-tokens"} for all available tokens.
           * @since 2.1.0
          */
-        "locale": string;
+        "locale"?: string;
         /**
           * The latest date that can be selected by the date picker. If not set there will be no restriction.
           * @since 1.1.0
          */
-        "maxDate": string;
+        "maxDate"?: string;
         /**
           * The earliest date that can be selected by the date picker. If not set there will be no restriction.
           * @since 1.1.0
          */
-        "minDate": string;
+        "minDate"?: string;
         /**
           * If true a date-range can be selected (from/to).
          */
@@ -744,18 +744,18 @@ export namespace Components {
           * @see { this.timeFormat}
           * @since 1.1.0
          */
-        "showTimeReference": any;
+        "showTimeReference"?: boolean;
         /**
           * Text of date select button
           * @since 1.1.0
           * @deprecated since 2.1.0. Use `i18nDone`
          */
-        "textSelectDate": string;
+        "textSelectDate"?: string;
         /**
           * Select time with format string
           * @since 1.1.0
          */
-        "time": string;
+        "time"?: string;
         /**
           * Time format string. See {@link "https://moment.github.io/luxon/#/formatting?id=table-of-tokens"} for all available tokens.
           * @since 1.1.0
@@ -764,12 +764,12 @@ export namespace Components {
         /**
           * Set time reference
          */
-        "timeReference": 'AM' | 'PM';
+        "timeReference"?: 'AM' | 'PM';
         /**
           * The selected end date. If the the picker is not in range mode this property has no impact. Format has to match the `format` property.
           * @since 1.1.0
          */
-        "to": string | undefined;
+        "to"?: 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.1.0
@@ -4825,7 +4825,7 @@ declare namespace LocalJSX {
           * The selected starting date. If the picker is not in range mode this is the selected date. Format has to match the `format` property.
           * @since 1.1.0
          */
-        "from"?: string | undefined;
+        "from"?: string;
         /**
           * Text of date select button
           * @since 2.1.0
@@ -4887,7 +4887,7 @@ declare namespace LocalJSX {
           * @see { this.timeFormat}
           * @since 1.1.0
          */
-        "showTimeReference"?: any;
+        "showTimeReference"?: boolean;
         /**
           * Text of date select button
           * @since 1.1.0
@@ -4912,7 +4912,7 @@ declare namespace LocalJSX {
           * The selected end date. If the the picker is not in range mode this property has no impact. Format has to match the `format` property.
           * @since 1.1.0
          */
-        "to"?: string | undefined;
+        "to"?: 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.1.0

packages/core/src/components/date-dropdown/date-dropdown.scss

@@ -42,6 +42,5 @@
 
   .pull-right {
     float: right;
-    padding: $tiny-space $default-space;
-  }
+    padding: 0 $default-space $medium-space $default-space;  }
 }

packages/core/src/components/date-picker/date-picker-component.ts

@@ -38,12 +38,12 @@ export interface IxDatePickerComponent {
   /**
    * Annotae with @Prop() decorator
    */
-  minDate: string;
+  minDate?: string;
 
   /**
    * Annotae with @Prop() decorator
    */
-  maxDate: string;
+  maxDate?: string;
 
   /**
    * Annotate with @Prop({ attribute: 'i18n-done' }) decorator

packages/core/src/components/date-picker/date-picker.scss

@@ -105,7 +105,7 @@
 
   .grid {
     display: grid;
-    grid-template-columns: repeat(8, 40px);
+    grid-template-columns: 24px repeat(7, 40px);
     grid-template-rows: repeat(7, 40px);
     align-items: center;
     justify-items: center;
@@ -126,6 +126,13 @@
       &:focus-visible {
         outline: 1px solid var(--theme-color-focus-bdr);
         outline-offset: var(--theme-btn--focus--outline-offset);
+
+        background-color: var(--theme-datepicker-day--background--selected);
+        border: inset 1px solid var(--theme-datepicker-day--border-color--selected);
+        color: var(--theme-datepicker-day--color--selected);
+        font-size: 14px;
+        line-height: 20px;
+        letter-spacing: 0;
       }
 
       &.today {
@@ -144,23 +151,22 @@
 
           &:hover {
             background-color: var(
-              --theme-datepicker-day--background--selected-hover
+                --theme-datepicker-day--background--selected-hover
             );
           }
 
           &:active {
             background-color: var(
-              --theme-datepicker-day--background--selected-active
+                --theme-datepicker-day--background--selected-active
             );
           }
 
           &.disabled {
             pointer-events: none;
             background-color: var(
-              --theme-datepicker-day--background--selected-disabled
+                --theme-datepicker-day--background--selected-disabled
             );
-            border: 1px solid
-              var(--theme-datepicker-day--background--selected-disabled);
+            border: 1px solid var(--theme-datepicker-day--background--selected-disabled);
             color: var(--theme-datepicker-day--color--selected-disabled);
           }
         }
@@ -173,27 +179,24 @@
 
           &:hover {
             background-color: var(
-              --theme-datepicker-day--background--range-hover
+                --theme-datepicker-day--background--range-hover
             );
-            border: 1px solid
-              var(--theme-datepicker-today--border-color--range-hover);
+            border: 1px solid var(--theme-datepicker-today--border-color--range-hover);
           }
 
           &:active {
             background-color: var(
-              --theme-datepicker-day--background--range-active
+                --theme-datepicker-day--background--range-active
             );
-            border: 1px solid
-              var(--theme-datepicker-today--border-color--range-active);
+            border: 1px solid var(--theme-datepicker-today--border-color--range-active);
           }
 
           &.disabled {
             background-color: var(
-              --theme-datepicker-day--background--range-disabled
+                --theme-datepicker-day--background--range-disabled
             );
             color: var(--theme-datepicker-day--color--range-disabled);
-            border: 1px solid
-              var(--theme-datepicker-today--border-color--range-disabled);
+            border: 1px solid var(--theme-datepicker-today--border-color--range-disabled);
           }
         }
 
@@ -220,20 +223,20 @@
 
         &:hover {
           background-color: var(
-            --theme-datepicker-day--background--selected-hover
+              --theme-datepicker-day--background--selected-hover
           );
         }
 
         &:active {
           background-color: var(
-            --theme-datepicker-day--background--selected-active
+              --theme-datepicker-day--background--selected-active
           );
         }
 
         &.disabled {
           pointer-events: none;
           background-color: var(
-            --theme-datepicker-day--background--selected-disabled
+              --theme-datepicker-day--background--selected-disabled
           );
           color: var(--theme-datepicker-day--color--selected-disabled);
         }
@@ -245,20 +248,20 @@
 
         &:hover {
           background-color: var(
-            --theme-datepicker-day--background--range-hover
+              --theme-datepicker-day--background--range-hover
           );
         }
 
         &:active {
           background-color: var(
-            --theme-datepicker-day--background--range-active
+              --theme-datepicker-day--background--range-active
           );
         }
 
         &.disabled {
           pointer-events: none;
           background-color: var(
-            --theme-datepicker-day--background--range-disabled
+              --theme-datepicker-day--background--range-disabled
           );
           color: var(--theme-datepicker-day--color--range-disabled);
         }
@@ -296,16 +299,7 @@
         border: none;
         background: none;
         cursor: initial;
-      }
-
-      &:focus-visible {
-        background-color: var(--theme-datepicker-day--background--selected);
-        border: inset 1px solid
-          var(--theme-datepicker-day--border-color--selected);
-        color: var(--theme-datepicker-day--color--selected);
-        font-size: 14px;
-        line-height: 20px;
-        letter-spacing: 0;
+        width: 1.5rem;
       }
     }
   }