feat(core/date-dropdown): new date-dropdown component (#797)

Co-authored-by: lzeiml <[email protected]> Co-authored-by: Daniel Leroux <[email protected]> Co-authored-by: Lukas Maurer <[email protected]>
siemens · Nov 20, 2023 · 3d8d804 · 3d8d804
1 parent 0b619b9
commit 3d8d804
Show file tree

Hide file tree

Showing 30 changed files with 41,073 additions and 121 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/angular-test-app/src/app/app-routing.module.ts b/packages/angular-test-app/src/app/app-routing.module.ts
@@ -30,6 +30,8 @@ import CheckboxIndeterminate from 'src/preview-examples/checkbox-indeterminate';
 import Chip from 'src/preview-examples/chip';
 import PageHeader from 'src/preview-examples/content-header';
 import PageHeaderNoBack from 'src/preview-examples/content-header-no-back';
+import DateDropdown from 'src/preview-examples/date-dropdown';
+import DateDropdownUserRange from 'src/preview-examples/date-dropdown-user-range';
 import Datepicker from 'src/preview-examples/datepicker';
 import DatepickerRange from 'src/preview-examples/datepicker-range';
 import Datetimepicker from 'src/preview-examples/datetimepicker';
@@ -232,6 +234,14 @@ const routes: Routes = [
         path: 'chip',
         component: Chip,
       },
+      {
+        path: 'date-dropdown',
+        component: DateDropdown,
+      },
+      {
+        path: 'date-dropdown-user-range',
+        component: DateDropdownUserRange,
+      },
       {
         path: 'datepicker',
         component: Datepicker,

diff --git a/packages/angular-test-app/src/app/app.module.ts b/packages/angular-test-app/src/app/app.module.ts
@@ -36,6 +36,8 @@ import CheckboxIndeterminate from 'src/preview-examples/checkbox-indeterminate';
 import Chip from 'src/preview-examples/chip';
 import ContentHeader from 'src/preview-examples/content-header';
 import ContentHeaderNoBack from 'src/preview-examples/content-header-no-back';
+import DateDropdown from 'src/preview-examples/date-dropdown';
+import DateDropdownUserRange from 'src/preview-examples/date-dropdown-user-range';
 import Datepicker from 'src/preview-examples/datepicker';
 import DatepickerRange from 'src/preview-examples/datepicker-range';
 import Datetimepicker from 'src/preview-examples/datetimepicker';
@@ -161,6 +163,8 @@ import { NavigationTestComponent } from './components/navigation-test.component'
     CheckboxIndeterminate,
     Checkbox,
     Chip,
+    DateDropdown,
+    DateDropdownUserRange,
     Datepicker,
     Datetimepicker,
     DrawerFullHeight,

diff --git a/packages/angular-test-app/src/preview-examples/date-dropdown-user-range.ts b/packages/angular-test-app/src/preview-examples/date-dropdown-user-range.ts
@@ -0,0 +1,50 @@
+/*
+ * 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';
+import {DateDropdownOption} from "@siemens/ix";
+import dayjs from "dayjs";
+
+@Component({
+  selector: 'app-example',
+  template: `
+      <ix-date-dropdown
+        [dateRangeOptions]="dateDropdownOptions"
+      >
+      </ix-date-dropdown>
+  `,
+})
+export default class DateDropdownUserRange {
+  dateDropdownOptions: DateDropdownOption[] = [
+    {
+      label: 'No time limit',
+      getValue: () => {
+        const today = dayjs();
+        return { from: undefined, to: today };
+      },
+    },
+    {
+      label: 'Today',
+      getValue: () => {
+        const today = dayjs();
+        return { from: today, to: today };
+      },
+    },
+    {
+      label: 'Last 7 days',
+      getValue: () => {
+        const today = dayjs();
+        return {
+          from: today.subtract(7, 'day') as dayjs.Dayjs,
+          to: today,
+        };
+      },
+    },
+  ];
+}
diff --git a/packages/angular-test-app/src/preview-examples/date-dropdown.ts b/packages/angular-test-app/src/preview-examples/date-dropdown.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-dropdown></ix-date-dropdown>`,
+})
+export default class DateDropdownUserRange {}
diff --git a/packages/angular-test-app/tsconfig.json b/packages/angular-test-app/tsconfig.json
@@ -5,6 +5,7 @@
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,
+    "allowSyntheticDefaultImports": true,
     "strict": true,
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,

diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts
@@ -438,6 +438,40 @@ export declare interface IxContentHeader extends Components.IxContentHeader {
 }
 
 
+@ProxyCmp({
+  inputs: ['customRangeAllowed', 'dateRangeOptions', 'format', 'from', 'initialSelectedDateRangeName', 'maxDate', 'minDate', 'range', 'to'],
+  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', 'dateRangeOptions', 'format', 'from', 'initialSelectedDateRangeName', 'maxDate', 'minDate', 'range', 'to'],
+})
+export class IxDateDropdown {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['dateRangeChange']);
+  }
+}
+
+
+import type { DateRangeChangeEvent as IIxDateDropdownDateRangeChangeEvent } from '@siemens/ix';
+
+export declare interface IxDateDropdown extends Components.IxDateDropdown {
+  /**
+   * EventEmitter for date range change events.
+
+This event is emitted when the date range changes within the component.
+The event payload contains information about the selected date range. @event undefined,@private undefined
+   */
+  dateRangeChange: EventEmitter<CustomEvent<IIxDateDropdownDateRangeChangeEvent>>;
+}
+
+
 @ProxyCmp({
   inputs: ['corners', 'eventDelimiter', 'format', 'from', 'individual', 'maxDate', 'minDate', 'range', 'textSelectDate', 'to'],
   methods: ['getCurrentDate']

diff --git a/packages/angular/src/declare-components.ts b/packages/angular/src/declare-components.ts
@@ -19,6 +19,7 @@ export const DIRECTIVES = [
   d.IxChip,
   d.IxCol,
   d.IxContentHeader,
+  d.IxDateDropdown,
   d.IxDatePicker,
   d.IxDatetimePicker,
   d.IxDivider,