@siemens/ix 1.0.0 → 1.1.0-beta.1

package/dist/types/components.d.ts

@@ -9,7 +9,10 @@ import { Buttons } from "./components/utils/button-variants";
 import { FilterState } from "./components/category-filter/filter-state";
 import { InputState } from "./components/category-filter/input-state";
 import { DateTimeCardCorners } from "./components/date-time-card/date-time-card";
+import { DateChangeEvent, LegacyDateChangeEvent } from "./components/date-picker/events";
+import { DateTime } from "luxon";
 import { DateTimeCardCorners as DateTimeCardCorners1 } from "./components/date-time-card/date-time-card";
+import { DateTimeSelectEvent } from "./components/datetime-picker/event";
 import { Placement, PositioningStrategy } from "@popperjs/core";
 import { FlipTileState } from "./components/flip-tile/flip-tile-state";
 import { NotificationColor } from "./components/utils/notification-color";
@@ -250,21 +253,55 @@ export namespace Components {
     }
     interface IxDatePicker {
         /**
-          * Set corners style
+          * Corner style
          */
         "corners": DateTimeCardCorners;
         /**
-          * output date format
+          * Default behavior of the done event is to join the two events (date and time) into one combined string output. This combination can be configured over the delimiter
+          * @since 1.1.0
+         */
+        "eventDelimiter": string;
+        /**
+          * Date format string. See {@link https ://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
          */
         "format": string;
         /**
-          * set styles
+          * Picker date. If the picker is in range mode this property is the start date.  Format is based on `format`
+          * @since 1.1.0
+         */
+        "from": string;
+        /**
+          * Get the current DateTime
+         */
+        "getCurrentDate": () => Promise<{ start: DateTime; end: DateTime; }>;
+        /**
+          * @deprecated - will get removed with next major release
          */
         "individual": boolean;
         /**
-          * Set range size
+          * 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;
+        /**
+          * 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;
+        /**
+          * If true a range of dates can be selected.
          */
         "range": boolean;
+        /**
+          * Text of date select button
+          * @since 1.1.0
+         */
+        "textSelectDate": string;
+        /**
+          * Picker date. If the picker is in range mode this property is the end date. If the picker is not in range mode leave this value `null`  Format is based on `format`
+          * @since 1.1.0
+         */
+        "to": string | null;
     }
     interface IxDateTimeCard {
         /**
@@ -277,26 +314,76 @@ export namespace Components {
         "individual": boolean;
     }
     interface IxDatetimePicker {
+        /**
+          * Date format string. See {@link https ://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
+          * @since 1.1.0
+         */
+        "dateFormat": string;
+        /**
+          * Default behavior of the done event is to join the two events (date and time) into one combined string output. This combination can be configured over the delimiter
+          * @since 1.1.0
+         */
+        "eventDelimiter": string;
+        /**
+          * Picker date. If the picker is in range mode this property is the start date.  Format is based on `format`
+          * @since 1.1.0
+         */
+        "from": 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;
+        /**
+          * 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;
         /**
           * Set range size
          */
         "range": boolean;
         /**
-          * Show Hour Input
+          * Show hour input
          */
         "showHour": boolean;
         /**
-          * Show Minutes Input
+          * Show minutes input
          */
         "showMinutes": boolean;
         /**
-          * Show Seconds Input
+          * Show seconds input
          */
         "showSeconds": boolean;
         /**
-          * Show Time Reference Input
+          * Show time reference input
+          * @since 1.1.0 time reference is default aligned with formt tt
          */
-        "showTimeReference": boolean;
+        "showTimeReference": any;
+        /**
+          * Text of date select button
+          * @since 1.1.0
+         */
+        "textSelectDate": string;
+        /**
+          * Select time with format string
+          * @since 1.1.0
+         */
+        "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
+         */
+        "timeFormat": string;
+        /**
+          * Set time reference
+         */
+        "timeReference": 'AM' | 'PM';
+        /**
+          * Picker date. If the picker is in range mode this property is the end date. If the picker is not in range mode leave this value `null`  Format is based on `format`
+          * @since 1.1.0
+         */
+        "to": string | null;
     }
     interface IxDrawer {
         /**
@@ -720,7 +807,6 @@ export namespace Components {
           * Active tab
          */
         "activeTabLabel": string;
-        "i18nImprintLabel": string;
         /**
           * Label of first tab
          */
@@ -1132,29 +1218,53 @@ export namespace Components {
     }
     interface IxTimePicker {
         /**
-          * Set corners style
+          * Corner style
          */
         "corners": DateTimeCardCorners;
         /**
-          * set styles
+          * Format of time string
+          * @since 1.1.0
+         */
+        "format": string;
+        /**
+          * Get current time
+         */
+        "getCurrentTime": () => Promise<DateTime>;
+        /**
+          * @deprecated - will get removed with next major release
          */
         "individual": boolean;
         /**
-          * Show Hour Input
+          * Show hour input
          */
         "showHour": boolean;
         /**
-          * Show Minutes Input
+          * Show minutes input
          */
         "showMinutes": boolean;
         /**
-          * Show Seconds Input
+          * Show seconds input
          */
         "showSeconds": boolean;
         /**
-          * Show Time Reference Input
+          * Show time reference input
+          * @since 1.1.0 time reference is default aligned with formt tt
+         */
+        "showTimeReference": any;
+        /**
+          * Text of date select button
+          * @since 1.1.0
          */
-        "showTimeReference": boolean;
+        "textSelectTime": string;
+        /**
+          * Select time with format string
+          * @since 1.1.0
+         */
+        "time": string;
+        /**
+          * Set time reference
+         */
+        "timeReference": 'AM' | 'PM';
     }
     interface IxToast {
         /**
@@ -2092,29 +2202,71 @@ declare namespace LocalJSX {
     }
     interface IxDatePicker {
         /**
-          * Set corners style
+          * Corner style
          */
         "corners"?: DateTimeCardCorners;
         /**
-          * output date format
+          * Default behavior of the done event is to join the two events (date and time) into one combined string output. This combination can be configured over the delimiter
+          * @since 1.1.0
+         */
+        "eventDelimiter"?: string;
+        /**
+          * Date format string. See {@link https ://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
          */
         "format"?: string;
         /**
-          * set styles
+          * Picker date. If the picker is in range mode this property is the start date.  Format is based on `format`
+          * @since 1.1.0
+         */
+        "from"?: string;
+        /**
+          * @deprecated - will get removed with next major release
          */
         "individual"?: boolean;
         /**
-          * Time change event
+          * 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;
+        /**
+          * 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;
+        /**
+          * Date change event  If datepicker is in range mode the event detail will be sperated with a `-` e.g. `2022/10/22 - 2022/10/24` (start and end). If range mode is choosen consider to use `dateRangeChange`.
+          * @depracted String output will be removed. Set ´doneEventDelimiter´ to undefined or null to get date change object instead of a string
+         */
+        "onDateChange"?: (event: CustomEvent<LegacyDateChangeEvent>) => void;
+        /**
+          * Date range change. Only triggered if datepicker is in range mode
+          * @since 1.1.0
+         */
+        "onDateRangeChange"?: (event: CustomEvent<DateChangeEvent>) => void;
+        /**
+          * Date selection confirmed via button action
+          * @since 1.1.0
          */
-        "onDateChange"?: (event: CustomEvent<string>) => void;
+        "onDateSelect"?: (event: CustomEvent<DateChangeEvent>) => void;
         /**
-          * done event
+          * Date selection confirmed via button action
+          * @deprecated Use `dateSelect`
          */
         "onDone"?: (event: CustomEvent<string>) => void;
         /**
-          * Set range size
+          * If true a range of dates can be selected.
          */
         "range"?: boolean;
+        /**
+          * Text of date select button
+          * @since 1.1.0
+         */
+        "textSelectDate"?: string;
+        /**
+          * Picker date. If the picker is in range mode this property is the end date. If the picker is not in range mode leave this value `null`  Format is based on `format`
+          * @since 1.1.0
+         */
+        "to"?: string | null;
     }
     interface IxDateTimeCard {
         /**
@@ -2128,29 +2280,94 @@ declare namespace LocalJSX {
     }
     interface IxDatetimePicker {
         /**
-          * Time event
+          * Date format string. See {@link https ://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
+          * @since 1.1.0
+         */
+        "dateFormat"?: string;
+        /**
+          * Default behavior of the done event is to join the two events (date and time) into one combined string output. This combination can be configured over the delimiter
+          * @since 1.1.0
+         */
+        "eventDelimiter"?: string;
+        /**
+          * Picker date. If the picker is in range mode this property is the start date.  Format is based on `format`
+          * @since 1.1.0
+         */
+        "from"?: 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;
+        /**
+          * 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;
+        /**
+          * Date change
+          * @since 1.1.0
+         */
+        "onDateChange"?: (event: CustomEvent<string | Omit<DateTimeSelectEvent, 'time'>>) => void;
+        /**
+          * Date selection event is fired after confirm button is pressend
+          * @since 1.1.0
+         */
+        "onDateSelect"?: (event: CustomEvent<DateTimeSelectEvent>) => void;
+        /**
+          * Done event  Set `doneEventDelimiter` to null or undefine to get the typed event
          */
         "onDone"?: (event: CustomEvent<string>) => void;
+        /**
+          * Time change
+          * @since 1.1.0
+         */
+        "onTimeChange"?: (event: CustomEvent<string>) => void;
         /**
           * Set range size
          */
         "range"?: boolean;
         /**
-          * Show Hour Input
+          * Show hour input
          */
         "showHour"?: boolean;
         /**
-          * Show Minutes Input
+          * Show minutes input
          */
         "showMinutes"?: boolean;
         /**
-          * Show Seconds Input
+          * Show seconds input
          */
         "showSeconds"?: boolean;
         /**
-          * Show Time Reference Input
+          * Show time reference input
+          * @since 1.1.0 time reference is default aligned with formt tt
+         */
+        "showTimeReference"?: any;
+        /**
+          * Text of date select button
+          * @since 1.1.0
+         */
+        "textSelectDate"?: string;
+        /**
+          * Select time with format string
+          * @since 1.1.0
+         */
+        "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
+         */
+        "timeFormat"?: string;
+        /**
+          * Set time reference
          */
-        "showTimeReference"?: boolean;
+        "timeReference"?: 'AM' | 'PM';
+        /**
+          * Picker date. If the picker is in range mode this property is the end date. If the picker is not in range mode leave this value `null`  Format is based on `format`
+          * @since 1.1.0
+         */
+        "to"?: string | null;
     }
     interface IxDrawer {
         /**
@@ -2593,7 +2810,6 @@ declare namespace LocalJSX {
           * Active tab
          */
         "activeTabLabel"?: string;
-        "i18nImprintLabel"?: string;
         /**
           * Label of first tab
          */
@@ -3041,11 +3257,16 @@ declare namespace LocalJSX {
     }
     interface IxTimePicker {
         /**
-          * Set corners style
+          * Corner style
          */
         "corners"?: DateTimeCardCorners;
         /**
-          * set styles
+          * Format of time string
+          * @since 1.1.0
+         */
+        "format"?: string;
+        /**
+          * @deprecated - will get removed with next major release
          */
         "individual"?: boolean;
         /**
@@ -3057,21 +3278,36 @@ declare namespace LocalJSX {
          */
         "onTimeChange"?: (event: CustomEvent<string>) => void;
         /**
-          * Show Hour Input
+          * Show hour input
          */
         "showHour"?: boolean;
         /**
-          * Show Minutes Input
+          * Show minutes input
          */
         "showMinutes"?: boolean;
         /**
-          * Show Seconds Input
+          * Show seconds input
          */
         "showSeconds"?: boolean;
         /**
-          * Show Time Reference Input
+          * Show time reference input
+          * @since 1.1.0 time reference is default aligned with formt tt
+         */
+        "showTimeReference"?: any;
+        /**
+          * Text of date select button
+          * @since 1.1.0
+         */
+        "textSelectTime"?: string;
+        /**
+          * Select time with format string
+          * @since 1.1.0
+         */
+        "time"?: string;
+        /**
+          * Set time reference
          */
-        "showTimeReference"?: boolean;
+        "timeReference"?: 'AM' | 'PM';
     }
     interface IxToast {
         /**

package/dist/types/exports.d.ts

@@ -1,3 +1,5 @@
+export * from './components/date-picker/events';
+export * from './components/datetime-picker/event';
 export * from './components/modal/modal-utils';
 export * from './components/toast/toast-utils';
 export * from './components/tree-item/default-tree-item';

package/package.json

@@ -1,6 +1,13 @@
 {
   "name": "@siemens/ix",
-  "version": "1.0.0",
+  "homepage": "https://ix.siemens.io",
+  "bugs": "https://github.com/siemens/ix/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/siemens/ix",
+    "directory": "packages/core"
+  },
+  "version": "1.1.0-beta.1",
   "license": "MIT",
   "description": "Siemens iX Web Components",
   "main": "dist/index.cjs.js",
@@ -12,6 +19,8 @@
   "collection:main": "dist/collection/index.js",
   "unpkg": "dist/siemens-ix/siemens-ix.esm.js",
   "files": [
+    "LICENSE",
+    "README.md",
     "dist/",
     "loader/",
     "src/**/*.md",

package/scss/components/_buttons.scss

@@ -31,7 +31,7 @@
     font-weight: $font-weight-normal;
   }
 
-  &:focus,
+  &:focus-visible,
   &.focus {
     box-shadow: none;
   }
@@ -47,7 +47,6 @@ $button-categories: (primary, secondary);
 
     &,
     &.focus,
-    &:focus,
     &:focus-visible {
       background-color: var(--theme-btn-#{$name}--background);
       color: var(--theme-btn-#{$name}--color);
@@ -73,6 +72,7 @@ $button-categories: (primary, secondary);
       @if $enable-border {
         border-color: var(--theme-btn-#{$name}--border-color--hover) !important;
       }
+
       background-color: var(--theme-btn-#{$name}--background--hover) !important;
       color: var(--theme-btn-#{$name}--color--hover) !important;
     }
@@ -89,9 +89,14 @@ $button-categories: (primary, secondary);
     &:not(:disabled):not(.disabled).active,
     .show > &.dropdown-toggle {
       @if $enable-border {
-        border-color: var(--theme-btn-#{$name}--border-color--active) !important;
+        border-color: var(
+          --theme-btn-#{$name}--border-color--active
+        ) !important;
       }
-      background-color: var(--theme-btn-#{$name}--background--active) !important;
+
+      background-color: var(
+        --theme-btn-#{$name}--background--active
+      ) !important;
       color: var(--theme-btn-#{$name}--color--active) !important;
     }
 
@@ -99,7 +104,9 @@ $button-categories: (primary, secondary);
       &:not(:disabled):not(.disabled):active,
       &:not(:disabled):not(.disabled).active,
       .show > &.dropdown-toggle {
-        background-color: var(--theme-btn-#{$name}--background--selected-active);
+        background-color: var(
+          --theme-btn-#{$name}--background--selected-active
+        );
         color: var(--theme-btn-#{$name}--color--selected-active);
       }
     }
@@ -107,9 +114,11 @@ $button-categories: (primary, secondary);
     &.disabled,
     &:disabled {
       cursor: initial;
+
       @if $enable-border {
         border-color: var(--theme-btn-#{$name}--border-color--disabled);
       }
+
       background-color: var(--theme-btn-#{$name}--background--disabled);
       color: var(--theme-btn-#{$name}--color--disabled);
       opacity: 1;
@@ -127,6 +136,7 @@ $button-categories: (primary, secondary);
 .btn-icon {
   min-width: $x-large-space;
   width: $x-large-space;
+
   .glyph {
     margin-right: 0;
   }

package/scss/components/_checkboxes.scss

@@ -50,14 +50,14 @@
     background-size: contain;
   }
 
-  [type='checkbox'] + label:focus {
+  [type='checkbox'] + label:focus-visible {
     &:before {
       outline: 1px solid var(--focus--border-color);
       outline-offset: var(--theme-checkbox--focus--outline-offset);
     }
   }
 
-  [type='checkbox']:focus + label {
+  [type='checkbox']:focus-visible + label {
     &:before {
       outline: 1px solid var(--focus--border-color);
       outline-offset: var(--theme-checkbox--focus--outline-offset);
@@ -67,29 +67,34 @@
   [type='checkbox']:not(:checked) {
     & + label:before {
       background-color: var(--theme-checkbox-unchecked--background);
-      border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color);
+      border: var(--theme-checkbox--border-thickness) solid
+        var(--theme-checkbox-unchecked--border-color);
     }
 
     &:hover + label:before {
       background-color: var(--theme-checkbox-unchecked--background--hover);
-      border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover);
+      border: var(--theme-checkbox--border-thickness) solid
+        var(--theme-checkbox-unchecked--border-color--hover);
     }
 
     &:active + label:before {
       background-color: var(--theme-checkbox-unchecked--background--active);
-      border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active);
+      border: var(--theme-checkbox--border-thickness) solid
+        var(--theme-checkbox-unchecked--border-color--active);
     }
 
     &:disabled + label::before {
       background-color: var(--theme-checkbox-unchecked--background--disabled);
-      border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled);
+      border: var(--theme-checkbox--border-thickness) solid
+        var(--theme-checkbox-unchecked--border-color--disabled);
     }
   }
 
   [type='checkbox']:checked {
     & + label:before {
       background-color: var(--theme-checkbox-checked--background);
-      border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color);
+      border: var(--theme-checkbox--border-thickness) solid
+        var(--theme-checkbox-checked--border-color);
     }
 
     & + label:after {
@@ -109,17 +114,20 @@
 
     &:hover + label:before {
       background-color: var(--theme-checkbox-checked--background--hover);
-      border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover);
+      border: var(--theme-checkbox--border-thickness) solid
+        var(--theme-checkbox-checked--border-color--hover);
     }
 
     &:active + label:before {
       background-color: var(--theme-checkbox-checked--background--active);
-      border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active);
+      border: var(--theme-checkbox--border-thickness) solid
+        var(--theme-checkbox-checked--border-color--active);
     }
 
     &:disabled + label:before {
       background-color: var(--theme-checkbox-checked--background--disabled);
-      border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled);
+      border: var(--theme-checkbox--border-thickness) solid
+        var(--theme-checkbox-checked--border-color--disabled);
     }
 
     &:disabled + label::after {
@@ -146,22 +154,26 @@
 
     & + label:before {
       background-color: var(--theme-checkbox-mixed--background);
-      border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-mixed--border-color);
+      border: var(--theme-checkbox--border-thickness) solid
+        var(--theme-checkbox-mixed--border-color);
     }
 
     &:hover + label:before {
       background-color: var(--theme-checkbox-mixed--background--hover);
-      border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-mixed--border-color--hover);
+      border: var(--theme-checkbox--border-thickness) solid
+        var(--theme-checkbox-mixed--border-color--hover);
     }
 
     &:active + label:before {
       background-color: var(--theme-checkbox-mixed--background--active);
-      border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-mixed--border-color--active);
+      border: var(--theme-checkbox--border-thickness) solid
+        var(--theme-checkbox-mixed--border-color--active);
     }
 
     &:disabled + label::before {
       background-color: var(--theme-checkbox-mixed--background--disabled);
-      border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-mixed--border-color--disabled);
+      border: var(--theme-checkbox--border-thickness) solid
+        var(--theme-checkbox-mixed--border-color--disabled);
     }
 
     &:disabled + label::after {