feat(core/date-picker-refactor): refactored internal components to av…

…oid breaking changes

packages/angular/src/components.ts

@@ -438,38 +438,46 @@ export declare interface IxContentHeader extends Components.IxContentHeader {
 
 
 @ProxyCmp({
-  inputs: ['corners', 'format', 'from', 'maxDate', 'minDate', 'range', 'textSelectDate', 'to', 'weekStartIndex'],
+  inputs: ['corners', 'eventDelimiter', 'format', 'from', 'individual', 'maxDate', 'minDate', 'range', 'textSelectDate', 'to'],
   methods: ['getCurrentDate']
 })
 @Component({
   selector: 'ix-date-picker',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['corners', 'format', 'from', 'maxDate', 'minDate', 'range', 'textSelectDate', 'to', 'weekStartIndex'],
+  inputs: ['corners', 'eventDelimiter', 'format', 'from', 'individual', 'maxDate', 'minDate', 'range', 'textSelectDate', 'to'],
 })
 export class IxDatePicker {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['dateChange', 'dateRangeChange', 'dateSelect']);
+    proxyOutputs(this, this.el, ['dateChange', 'dateRangeChange', 'done', 'dateSelect']);
   }
 }
 
 
+import type { LegacyDateChangeEvent as IIxDatePickerLegacyDateChangeEvent } from '@siemens/ix';
 import type { DateChangeEvent as IIxDatePickerDateChangeEvent } from '@siemens/ix';
 
 export declare interface IxDatePicker extends Components.IxDatePicker {
   /**
-   * Triggers if the date selection changes. @since 2.0.0
+   * 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 chosen consider to use `dateRangeChange`. @deprecated String output will be removed. Set ´doneEventDelimiter´ to undefined or null to get date change object instead of a string
    */
-  dateChange: EventEmitter<CustomEvent<IIxDatePickerDateChangeEvent>>;
+  dateChange: EventEmitter<CustomEvent<IIxDatePickerLegacyDateChangeEvent>>;
   /**
-   * Triggers if the date selection changes.
-Only triggered if date-picker is in range mode. @since 1.1.0,@deprecated Use `dateChange` (triggers on both modes)
+   * Date range change.
+Only triggered if datepicker is in range mode @since 1.1.0
    */
   dateRangeChange: EventEmitter<CustomEvent<IIxDatePickerDateChangeEvent>>;
+  /**
+   * Date selection confirmed via button action @deprecated Will be removed in 2.0.0. Use `dateSelect`
+   */
+  done: EventEmitter<CustomEvent<string>>;
   /**
    * Date selection confirmed via button action @since 1.1.0
    */
@@ -478,21 +486,21 @@ Only triggered if date-picker is in range mode. @since 1.1.0,@deprecated Use `da
 
 
 @ProxyCmp({
-  inputs: ['dateFormat', 'from', 'maxDate', 'minDate', 'range', 'showHour', 'showMinutes', 'showSeconds', 'showTimeReference', 'textSelectDate', 'time', 'timeFormat', 'timeReference', 'to', 'weekStartIndex']
+  inputs: ['dateFormat', 'eventDelimiter', 'from', 'maxDate', 'minDate', 'range', 'showHour', 'showMinutes', 'showSeconds', 'showTimeReference', 'textSelectDate', 'time', 'timeFormat', 'timeReference', 'to']
 })
 @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', 'from', 'maxDate', 'minDate', 'range', 'showHour', 'showMinutes', 'showSeconds', 'showTimeReference', 'textSelectDate', 'time', 'timeFormat', 'timeReference', 'to', 'weekStartIndex'],
+  inputs: ['dateFormat', 'eventDelimiter', 'from', 'maxDate', 'minDate', 'range', 'showHour', 'showMinutes', 'showSeconds', 'showTimeReference', 'textSelectDate', 'time', 'timeFormat', 'timeReference', 'to'],
 })
 export class IxDatetimePicker {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['timeChange', 'dateChange', 'dateSelect']);
+    proxyOutputs(this, this.el, ['done', 'timeChange', 'dateChange', 'dateSelect']);
   }
 }
 
@@ -501,6 +509,12 @@ import type { DateTimeDateChangeEvent as IIxDatetimePickerDateTimeDateChangeEven
 import type { DateTimeSelectEvent as IIxDatetimePickerDateTimeSelectEvent } from '@siemens/ix';
 
 export declare interface IxDatetimePicker extends Components.IxDatetimePicker {
+  /**
+   * Done event
+
+Set `doneEventDelimiter` to null or undefine to get the typed event
+   */
+  done: EventEmitter<CustomEvent<string>>;
   /**
    * Time change @since 1.1.0
    */
@@ -510,12 +524,51 @@ export declare interface IxDatetimePicker extends Components.IxDatetimePicker {
    */
   dateChange: EventEmitter<CustomEvent<IIxDatetimePickerDateTimeDateChangeEvent>>;
   /**
-   * Datetime selection event is fired after confirm button is pressed @since 1.1.0
+   * Date selection event is fired after confirm button is pressend @since 1.1.0
    */
   dateSelect: EventEmitter<CustomEvent<IIxDatetimePickerDateTimeSelectEvent>>;
 }
 
 
+@ProxyCmp({
+  inputs: ['dateFormat', 'from', 'maxDate', 'minDate', 'range', 'showHour', 'showMinutes', 'showSeconds', 'showTimeReference', 'textSelectDate', 'time', 'timeFormat', 'timeReference', 'to', 'weekStartIndex']
+})
+@Component({
+  selector: 'ix-datetime-picker-rework',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['dateFormat', 'from', 'maxDate', 'minDate', 'range', 'showHour', 'showMinutes', 'showSeconds', 'showTimeReference', 'textSelectDate', 'time', 'timeFormat', 'timeReference', 'to', 'weekStartIndex'],
+})
+export class IxDatetimePickerRework {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['timeChange', 'dateChange', 'dateSelect']);
+  }
+}
+
+
+import type { DateTimeDateChangeEvent as IIxDatetimePickerReworkDateTimeDateChangeEvent } from '@siemens/ix';
+import type { DateTimeSelectEvent as IIxDatetimePickerReworkDateTimeSelectEvent } from '@siemens/ix';
+
+export declare interface IxDatetimePickerRework extends Components.IxDatetimePickerRework {
+  /**
+   * Time change @since 1.1.0
+   */
+  timeChange: EventEmitter<CustomEvent<string>>;
+  /**
+   * Date change @since 1.1.0
+   */
+  dateChange: EventEmitter<CustomEvent<IIxDatetimePickerReworkDateTimeDateChangeEvent>>;
+  /**
+   * Datetime selection event is fired after confirm button is pressed @since 1.1.0
+   */
+  dateSelect: EventEmitter<CustomEvent<IIxDatetimePickerReworkDateTimeSelectEvent>>;
+}
+
+
 @ProxyCmp({
 })
 @Component({
@@ -1980,15 +2033,15 @@ export declare interface IxTile extends Components.IxTile {}
 
 
 @ProxyCmp({
-  inputs: ['corners', 'format', 'showHour', 'showMinutes', 'showSeconds', 'standaloneAppearance', 'textSelectTime', 'time', 'timeReference'],
+  inputs: ['corners', 'format', 'individual', 'showHour', 'showMinutes', 'showSeconds', 'showTimeReference', 'textSelectTime', 'time', 'timeReference'],
   methods: ['getCurrentTime']
 })
 @Component({
   selector: 'ix-time-picker',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['corners', 'format', 'showHour', 'showMinutes', 'showSeconds', 'standaloneAppearance', 'textSelectTime', 'time', 'timeReference'],
+  inputs: ['corners', 'format', 'individual', 'showHour', 'showMinutes', 'showSeconds', 'showTimeReference', 'textSelectTime', 'time', 'timeReference'],
 })
 export class IxTimePicker {
   protected el: HTMLElement;

packages/angular/src/declare-components.ts

@@ -21,6 +21,7 @@ export const DIRECTIVES = [
   d.IxContentHeader,
   d.IxDatePicker,
   d.IxDatetimePicker,
+  d.IxDatetimePickerRework,
   d.IxDivider,
   d.IxDrawer,
   d.IxDropdown,