feat(core/date-/datetime-input): Add new components ix-date-input and ix-datetime-input

packages/angular-test-app/src/preview-examples/date-input-range.ts

@@ -0,0 +1,16 @@
+/*
+ * SPDX-FileCopyrightText: 2023 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 { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  template: ` <ix-date-input></ix-date-input> `,
+})
+export default class DateInput {}

packages/angular-test-app/src/preview-examples/date-input-validation.ts

@@ -0,0 +1,45 @@
+/*
+ * SPDX-FileCopyrightText: 2023 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 { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  template: ` 
+    <form
+      class="needs-validation"
+      [ngClass]="{ 'was-validated': wasValidated }"
+      no-validate
+      (submit)="onSubmit($event)"
+    >
+      <ix-layout-grid>
+        <ix-row>
+          <ix-col size="8">
+            <ix-date-input></ix-date-input>
+            <div class="valid-feedback">Looks good!</div>
+          </ix-col>
+        </ix-row>
+        <ix-row>
+          <ix-col>
+            <ix-button type="submit">Submit form</ix-button>
+          </ix-col>
+        </ix-row>
+      </ix-layout-grid>
+    </form> 
+  `,
+})
+export default class DateInput {
+  wasValidated = false;
+
+  onSubmit(event: SubmitEvent) {
+    event.preventDefault();
+
+    this.wasValidated = true;
+  }
+}

packages/angular-test-app/src/preview-examples/date-input.ts

@@ -0,0 +1,16 @@
+/*
+ * SPDX-FileCopyrightText: 2023 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 { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  template: ` <ix-date-input [range]="false"></ix-date-input> `,
+})
+export default class DateInput {}

packages/angular-test-app/src/preview-examples/datetime-input-range.ts

@@ -0,0 +1,16 @@
+/*
+ * SPDX-FileCopyrightText: 2023 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 { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  template: ` <ix-datetime-input></ix-datetime-input> `,
+})
+export default class DateInput {}

packages/angular-test-app/src/preview-examples/datetime-input-validation.ts

@@ -0,0 +1,45 @@
+/*
+ * SPDX-FileCopyrightText: 2023 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 { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  template: ` 
+    <form
+      class="needs-validation"
+      [ngClass]="{ 'was-validated': wasValidated }"
+      no-validate
+      (submit)="onSubmit($event)"
+    >
+      <ix-layout-grid>
+        <ix-row>
+          <ix-col size="10">
+            <ix-datetime-input></ix-datetime-input>
+            <div class="valid-feedback">Looks good!</div>
+          </ix-col>
+        </ix-row>
+        <ix-row>
+          <ix-col>
+            <ix-button type="submit">Submit form</ix-button>
+          </ix-col>
+        </ix-row>
+      </ix-layout-grid>
+    </form> 
+  `,
+})
+export default class DateInput {
+  wasValidated = false;
+
+  onSubmit(event: SubmitEvent) {
+    event.preventDefault();
+
+    this.wasValidated = true;
+  }
+}

packages/angular-test-app/src/preview-examples/datetime-input.ts

@@ -0,0 +1,16 @@
+/*
+ * SPDX-FileCopyrightText: 2023 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 { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  template: ` <ix-datetime-input [range]="false"></ix-datetime-input> `,
+})
+export default class DateInput {}

packages/angular/src/components.ts

@@ -515,6 +515,57 @@ The event payload contains information about the selected date range.
 }
 
 
+@ProxyCmp({
+  inputs: ['corners', 'disabled', 'format', 'from', 'i18nSelectDate', 'label', 'labelPosition', 'maxDate', 'minDate', 'range', 'suppressErrorMessage', 'to', 'validators', 'weekStartIndex'],
+  methods: ['getCurrentInput']
+})
+@Component({
+  selector: 'ix-date-input',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['corners', 'disabled', 'format', 'from', 'i18nSelectDate', 'label', 'labelPosition', 'maxDate', 'minDate', 'range', 'suppressErrorMessage', 'to', 'validators', 'weekStartIndex'],
+})
+export class IxDateInput {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['dateChange', 'dateSelect', 'ixChange', 'ixFocus', 'ixBlur', 'ixClear']);
+  }
+}
+
+
+import type { DateInputEvent as IIxDateInputDateInputEvent } from '@siemens/ix';
+
+export declare interface IxDateInput extends Components.IxDateInput {
+  /**
+   * Triggers if the date selection changes.
+   */
+  dateChange: EventEmitter<CustomEvent<DateChangeEventRework>>;
+  /**
+   * Date selection confirmed via button action
+   */
+  dateSelect: EventEmitter<CustomEvent<DateChangeEventRework>>;
+  /**
+   * Triggers if one of the inputs changes @emits DateInputEvent
+   */
+  ixChange: EventEmitter<CustomEvent<IIxDateInputDateInputEvent>>;
+  /**
+   * Triggers if one of the inputs gets focus @emits DateInputEvent
+   */
+  ixFocus: EventEmitter<CustomEvent<IIxDateInputDateInputEvent>>;
+  /**
+   * Triggers if one of the inputs loses focus @emits DateInputEvent
+   */
+  ixBlur: EventEmitter<CustomEvent<IIxDateInputDateInputEvent>>;
+  /**
+   * Triggers if the inputs get cleared by pressing the clear button @emits void
+   */
+  ixClear: EventEmitter<CustomEvent<void>>;
+}
+
+
 @ProxyCmp({
   inputs: ['corners', 'eventDelimiter', 'format', 'from', 'i18nDone', 'individual', 'locale', 'maxDate', 'minDate', 'range', 'textSelectDate', 'to', 'weekStartIndex'],
   methods: ['getCurrentDate']
@@ -560,6 +611,69 @@ Only triggered if date-picker-rework is in range mode. @since 2.1.0
 }
 
 
+@ProxyCmp({
+  inputs: ['dateFormat', 'disabled', 'fromDate', 'fromTime', 'i18nSelectDate', 'label', 'labelPosition', 'maxDate', 'minDate', 'range', 'showHour', 'showMinutes', 'showSeconds', 'showTimeReference', 'suppressErrorMessage', 'timeFormat', 'timeReference', 'toDate', 'toTime', 'validators', 'weekStartIndex'],
+  methods: ['getCurrentInput']
+})
+@Component({
+  selector: 'ix-datetime-input',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['dateFormat', 'disabled', 'fromDate', 'fromTime', 'i18nSelectDate', 'label', 'labelPosition', 'maxDate', 'minDate', 'range', 'showHour', 'showMinutes', 'showSeconds', 'showTimeReference', 'suppressErrorMessage', 'timeFormat', 'timeReference', 'toDate', 'toTime', 'validators', 'weekStartIndex'],
+})
+export class IxDatetimeInput {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['fromDateChange', 'toDateChange', 'fromTimeChange', 'toTimeChange', 'dateSelect', 'ixChange', 'ixFocus', 'ixBlur', 'ixClear']);
+  }
+}
+
+
+import type { DatetimeInputEvent as IIxDatetimeInputDatetimeInputEvent } from '@siemens/ix';
+
+export declare interface IxDatetimeInput extends Components.IxDatetimeInput {
+  /**
+   * Triggers if the first date selection changes. @emits string
+   */
+  fromDateChange: EventEmitter<CustomEvent<string>>;
+  /**
+   * Triggers if the second date selection changes. @emits string
+   */
+  toDateChange: EventEmitter<CustomEvent<string>>;
+  /**
+   * Triggers if the first time selection changes. @emits string
+   */
+  fromTimeChange: EventEmitter<CustomEvent<string>>;
+  /**
+   * Triggers if the second time selection changes. @emits string
+   */
+  toTimeChange: EventEmitter<CustomEvent<string>>;
+  /**
+   * Date selection confirmed via button action @emits DateTimeSelectEvent
+   */
+  dateSelect: EventEmitter<CustomEvent<DateTimeSelectEvent>>;
+  /**
+   * Triggers every time one of the inputs changes @emits DatetimeInputChangeEvent
+   */
+  ixChange: EventEmitter<CustomEvent<IIxDatetimeInputDatetimeInputEvent>>;
+  /**
+   * Triggers if one of the inputs gets focus @emits DatetimeInputEvent
+   */
+  ixFocus: EventEmitter<CustomEvent<IIxDatetimeInputDatetimeInputEvent>>;
+  /**
+   * Triggers if one of the inputs loses focus @emits DatetimeInputEvent
+   */
+  ixBlur: EventEmitter<CustomEvent<IIxDatetimeInputDatetimeInputEvent>>;
+  /**
+   * Triggers if the inputs get cleared by pressing the clear button @emits string with the name of the input that was cleared
+   */
+  ixClear: EventEmitter<CustomEvent<string>>;
+}
+
+
 @ProxyCmp({
   inputs: ['dateFormat', 'eventDelimiter', 'from', 'i18nDone', 'locale', 'maxDate', 'minDate', 'range', 'showHour', 'showMinutes', 'showSeconds', 'showTimeReference', 'textSelectDate', 'time', 'timeFormat', 'timeReference', 'to', 'weekStartIndex']
 })

packages/angular/src/declare-components.ts

@@ -22,7 +22,9 @@ export const DIRECTIVES = [
   d.IxContent,
   d.IxContentHeader,
   d.IxDateDropdown,
+  d.IxDateInput,
   d.IxDatePicker,
+  d.IxDatetimeInput,
   d.IxDatetimePicker,
   d.IxDivider,
   d.IxDrawer,