@siemens/ix 3.0.0-alpha.0 → 3.0.0-alpha.1

package/dist/collection/components/date-dropdown/date-dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-dropdown.js","sourceRoot":"","sources":["../../../src/components/date-dropdown/date-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { DateTime } from 'luxon';\nimport { type LiteralStringUnion } from '../utils/type-helper';\nimport { IxDatePickerComponent } from '../date-picker/date-picker-component';\nimport { makeRef } from '../utils/make-ref';\nimport { ButtonVariant } from '../button/button';\nimport { IxButtonComponent } from '../button/button-component';\nimport { iconHistory } from '@siemens/ix-icons/icons';\n\nexport type DateDropdownOption = {\n  id: string;\n  label: string;\n  from?: string;\n  to?: string;\n};\n\nexport type DateRangeChangeEvent = {\n  id: string;\n  from?: string;\n  to?: string;\n};\n\n/**\n * @since 2.1.0\n */\n@Component({\n  tag: 'ix-date-dropdown',\n  styleUrl: 'date-dropdown.scss',\n  shadow: true,\n})\nexport class DateDropdown\n  implements\n    Omit<IxDatePickerComponent, 'corners'>,\n    Omit<IxButtonComponent, 'type' | 'icon'>\n{\n  @Element() hostElement!: HTMLIxDateDropdownElement;\n\n  /**\n   * Disable the button that opens the dropdown containing the date picker.\n   *\n   * @since 2.3.0\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Date format string.\n   * See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens.\n   */\n  @Prop() format = 'yyyy/LL/dd';\n\n  /**\n   * If true a range of dates can be selected.\n   */\n  @Prop() range = true;\n\n  /**\n   * Picker date. If the picker is in range mode this property is the start date.\n   * If set to `null` no default start date will be pre-selected.\n   *\n   * Format is based on `format`\n   */\n  @Prop() from = '';\n\n  /**\n   * Picker date. If the picker is in range mode this property is the end date.\n   * If the picker is not in range mode leave this value `null`\n   *\n   * Format is based on `format`\n   */\n  @Prop() to = '';\n\n  /**\n   * The earliest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   */\n  @Prop() minDate = '';\n\n  /**\n   * The latest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   */\n  @Prop() maxDate = '';\n\n  /**\n   * Used to set the initial select date range as well as the button name,\n   * if not set or no according date range label is found, nothing will be selected\n   */\n  @Prop() dateRangeId = 'custom';\n\n  /**\n   * Button variant\n   */\n  @Prop() variant: ButtonVariant = 'primary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Loading button\n   */\n  @Prop() loading: boolean = false;\n\n  /**\n   * Shows week numbers displayed on the left side of the date picker\n   *\n   * @since 3.0.0\n   */\n  @Prop() showWeekNumbers = false;\n\n  @Watch('dateRangeId')\n  @Watch('to')\n  @Watch('from')\n  onDateRangeIdChange() {\n    this.onRangeListSelect(this.dateRangeId);\n    this.updateCurrentDate();\n    this.setDateRangeSelection(this.dateRangeId);\n\n    if (!this.currentRangeValue) {\n      return;\n    }\n\n    this.onDateSelect({\n      from: this.currentRangeValue.from,\n      to: this.currentRangeValue.to,\n      id: this.currentRangeValue.id,\n    });\n  }\n\n  /**\n   * Controls whether the user is allowed to pick custom date ranges in the component.\n   * When set to 'true', the user can select a custom date range using the date picker.\n   * When set to 'false', only predefined time date ranges are available for selection.\n   */\n  @Prop() customRangeAllowed = true;\n\n  /**\n   * An array of predefined date range options for the date picker.\n   * Each option is an object with a label describing the range and a function\n   * that returns the start and end dates of the range as a DateRangeOption object.\n   *\n   * Example format:\n   *   {\n   *     id: 'some unique id',\n   *     label: 'Name of the range',\n   *     from: undefined, to: '2023/03/29'\n   *   },\n   *   // ... other predefined date range options ...\n   */\n  @Prop() dateRangeOptions: DateDropdownOption[] = [];\n\n  @Watch('dateRangeOptions')\n  onDateRangeOptionsChange() {\n    this.initialize();\n    this.onDateRangeIdChange();\n  }\n\n  /**\n   * Locale identifier (e.g. 'en' or 'de').\n   *\n   * @since 2.6.0\n   */\n  @Prop() locale?: string;\n\n  /**\n   * The index of which day to start the week on, based on the Locale#weekdays array.\n   * E.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on monday.\n   *\n   * @since 2.6.0\n   */\n  @Prop() weekStartIndex = 0;\n\n  /**\n   * Text for custom dropdown item. Will be used for translation.\n   */\n  @Prop({ attribute: 'i18n-custom-item' }) i18nCustomItem = 'Custom...';\n\n  /**\n   * Text for the done button. Will be used for translation.\n   */\n  @Prop({ attribute: 'i18n-done' }) i18nDone = 'Done';\n\n  /**\n   * Text for the done button. Will be used for translation.\n   */\n  @Prop({ attribute: 'i18n-no-range' }) i18nNoRange = 'No range set';\n\n  /** @internal */\n  @Prop() today = DateTime.now().toISO();\n\n  /**\n   * EventEmitter for date range change events.\n   *\n   * This event is emitted when the date range changes within the component.\n   * The event payload contains information about the selected date range.\n   */\n  @Event()\n  private readonly dateRangeChange!: EventEmitter<DateRangeChangeEvent>;\n\n  @State() private selectedDateRangeId: LiteralStringUnion<'custom'> = '';\n  @State() private currentRangeValue?: {\n    from?: string;\n    to?: string;\n    id: string;\n  };\n  private readonly triggerRef = makeRef<HTMLElement>();\n\n  @Watch('disabled')\n  onDisabledChange() {\n    if (this.disabled) {\n      this.closeDropdown();\n    }\n  }\n\n  private datePickerTouched = false;\n\n  componentWillLoad() {\n    this.initialize();\n    this.setDateRangeSelection(this.dateRangeId);\n  }\n\n  /**\n   * Retrieves the currently selected date range from the component.\n   * This method returns the selected date range as a `DateChangeEvent` object.\n   */\n  @Method()\n  public async getDateRange(): Promise<DateRangeChangeEvent> {\n    return this.currentRangeValue || { id: '', from: '', to: '' };\n  }\n\n  private initialize() {\n    const isCustomRange =\n      this.dateRangeId === 'custom' ||\n      (!this.dateRangeId && !!this.from && !!this.to);\n\n    if (isCustomRange && this.customRangeAllowed) {\n      this.selectedDateRangeId = 'custom';\n      this.updateCurrentDate();\n\n      return;\n    }\n    const isValidConfiguration = !isCustomRange && !this.from;\n    if (!isValidConfiguration) {\n      console.warn(\n        '\"from\" and \"range-date-id\" is provided this is an invalid combination. Using \"custom\".'\n      );\n\n      this.selectedDateRangeId = 'custom';\n      this.updateCurrentDate();\n\n      return;\n    }\n  }\n\n  private updateCurrentDate() {\n    this.currentRangeValue = {\n      id: this.selectedDateRangeId,\n      from: this.from,\n      to: this.to,\n    };\n  }\n\n  private onDateSelect(\n    rangeValue: { from?: string; to?: string; id: string },\n    preserveDropdown = true\n  ) {\n    this.dateRangeChange.emit(rangeValue);\n\n    if (preserveDropdown) {\n      this.closeDropdown();\n    }\n\n    this.datePickerTouched = false;\n  }\n\n  private onRangeListSelect(id: string) {\n    if (this.setDateRangeSelection(id) && this.currentRangeValue) {\n      this.onDateSelect(this.currentRangeValue);\n    }\n  }\n\n  private setDateRangeSelection(id: string) {\n    this.selectedDateRangeId = id;\n    const option = this.dateRangeOptions.find((range) => range.id === id);\n\n    if (option) {\n      this.currentRangeValue = option;\n    }\n\n    return option;\n  }\n\n  private closeDropdown() {\n    const dropdown = this.hostElement.shadowRoot!.querySelector('ix-dropdown');\n\n    if (dropdown) {\n      dropdown.show = false;\n    }\n  }\n\n  private getButtonLabel() {\n    if (this.selectedDateRangeId === 'custom' && this.currentRangeValue?.from) {\n      let range = this.currentRangeValue.from;\n\n      if (this.currentRangeValue.to) {\n        range += ` - ${this.currentRangeValue.to}`;\n      }\n\n      return range;\n    }\n\n    if (!this.selectedDateRangeId) {\n      return this.i18nNoRange;\n    }\n\n    if (!this.dateRangeOptions || this.dateRangeOptions?.length === 0) {\n      return this.i18nNoRange;\n    }\n\n    const option = this.dateRangeOptions.find(\n      (option) => option.id === this.selectedDateRangeId\n    );\n\n    if (!option) {\n      console.error(\n        `Cannot find range option with id ${this.selectedDateRangeId}`\n      );\n      return this.i18nNoRange;\n    }\n\n    return option.label;\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-button\n          data-testid=\"date-dropdown-trigger\"\n          data-date-dropdown-trigger\n          variant={this.variant}\n          ghost={this.ghost}\n          outline={this.outline}\n          loading={this.loading}\n          icon={iconHistory}\n          ref={this.triggerRef}\n          disabled={this.disabled}\n        >\n          {this.getButtonLabel()}\n        </ix-button>\n        <ix-dropdown\n          data-testid=\"date-dropdown\"\n          data-date-dropdown\n          class=\"min-width max-height\"\n          trigger={this.triggerRef.waitForCurrent()}\n          closeBehavior=\"outside\"\n          placement=\"bottom-start\"\n          onShowChanged={({ detail: show }) => {\n            if (\n              !show &&\n              this.selectedDateRangeId === 'custom' &&\n              this.datePickerTouched &&\n              this.currentRangeValue\n            ) {\n              this.onDateSelect(this.currentRangeValue);\n            }\n          }}\n        >\n          <ix-layout-grid noMargin>\n            <ix-row>\n              {this.dateRangeOptions?.length > 1 && (\n                <ix-col\n                  class={{\n                    'no-margin': true,\n                    'border-right': this.selectedDateRangeId === 'custom',\n                  }}\n                >\n                  {this.dateRangeOptions.map((dateRangeOption) => (\n                    <ix-dropdown-item\n                      label={dateRangeOption.label}\n                      onClick={() => this.onRangeListSelect(dateRangeOption.id)}\n                      checked={this.selectedDateRangeId === dateRangeOption.id}\n                    ></ix-dropdown-item>\n                  ))}\n                  <div hidden={!this.customRangeAllowed}>\n                    <ix-dropdown-item\n                      label={this.i18nCustomItem}\n                      checked={this.selectedDateRangeId === 'custom'}\n                      onClick={() => this.onRangeListSelect('custom')}\n                    ></ix-dropdown-item>\n                  </div>\n                </ix-col>\n              )}\n              <ix-col class=\"no-margin\">\n                {this.selectedDateRangeId === 'custom' && (\n                  <Fragment>\n                    <ix-date-picker\n                      standaloneAppearance={false}\n                      locale={this.locale}\n                      onDateChange={(e) => {\n                        e.stopPropagation();\n                        this.currentRangeValue = {\n                          ...e.detail,\n                          id: 'custom',\n                        };\n                        this.datePickerTouched = true;\n                      }}\n                      onDateRangeChange={(e) => e.stopPropagation()}\n                      format={this.format}\n                      range={this.range}\n                      from={this.from || this.currentRangeValue?.from}\n                      to={this.to || this.currentRangeValue?.to}\n                      minDate={this.minDate}\n                      maxDate={this.maxDate}\n                      today={this.today}\n                      weekStartIndex={this.weekStartIndex}\n                      showWeekNumbers={this.showWeekNumbers}\n                    ></ix-date-picker>\n                    <div class=\"pull-right\">\n                      <ix-button\n                        onClick={() => {\n                          if (this.currentRangeValue) {\n                            this.onDateSelect(this.currentRangeValue);\n                          }\n                        }}\n                      >\n                        {this.i18nDone}\n                      </ix-button>\n                    </div>\n                  </Fragment>\n                )}\n              </ix-col>\n            </ix-row>\n          </ix-layout-grid>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/date-dropdown/test/date-dropdown.ct.js

@@ -0,0 +1,215 @@
+/*
+ * 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 { expect } from "@playwright/test";
+import { regressionTest } from "../../../tests/utils/test/index";
+import { DateTime } from "luxon";
+const DATE_DROPDOWN_SELECTOR = 'ix-date-dropdown';
+regressionTest('renders', async ({ mount, page }) => {
+    await mount(`<ix-date-dropdown></ix-date-dropdown>`);
+    const dateDropdown = page.locator(DATE_DROPDOWN_SELECTOR);
+    await expect(dateDropdown).toHaveClass(/hydrated/);
+});
+regressionTest.describe('date dropdown tests', () => {
+    regressionTest.beforeEach(async ({ mount, page }) => {
+        await mount(`<ix-date-dropdown from="2023/11/01"></ix-date-dropdown>`);
+        const today = DateTime.now();
+        const format = 'yyyy/LL/dd';
+        const prevWeek = today.minus({
+            day: 7,
+        });
+        const dateDropdown = page.locator('ix-date-dropdown');
+        const rangeOptions = [
+            {
+                id: 'no-time',
+                label: 'No time limit',
+                // TODO (IX-1870): refactor event signatures to match internal logic with undefined values
+                from: undefined,
+                to: today.toFormat(format),
+            },
+            {
+                id: 'today',
+                label: 'Today',
+                from: today.toFormat(format),
+                to: today.toFormat(format),
+            },
+            {
+                id: 'last-7-days',
+                label: 'Last 7 days',
+                from: today
+                    .minus({
+                    day: 7,
+                })
+                    .toFormat(format),
+                to: today.toFormat(format),
+            },
+            {
+                id: 'last-week',
+                label: 'Last week',
+                from: prevWeek.startOf('week').toFormat(format),
+                to: prevWeek.endOf('week').toFormat(format),
+            },
+            {
+                id: 'current-month',
+                label: 'Current month',
+                from: today.startOf('month').toFormat(format),
+                to: today.endOf('month').toFormat(format),
+            },
+        ];
+        await dateDropdown.evaluate((el, [dateRangeOptions]) => {
+            const elementToTest = el;
+            elementToTest.dateRangeId = 'today';
+            elementToTest.customRangeAllowed = true;
+            elementToTest.dateRangeOptions = dateRangeOptions;
+        }, [rangeOptions]);
+    });
+    regressionTest('select different date interval and get date', async ({ page }) => {
+        const dateDropdown = page.locator('ix-date-dropdown');
+        await dateDropdown.click();
+        const intervalOptionsButton = dateDropdown.getByRole('button', {
+            name: 'Last 7 days',
+        });
+        await intervalOptionsButton.click();
+        const button = dateDropdown.locator('ix-button');
+        await expect(button).toContainText(/Last 7 days/);
+        const selectedDateRange = await dateDropdown.evaluate((el) => el.getDateRange());
+        const endDate = DateTime.now();
+        const startDate = endDate.minus({
+            day: 7,
+        });
+        expect(selectedDateRange).toStrictEqual({
+            from: startDate.toFormat('yyyy/LL/dd'),
+            to: endDate.toFormat('yyyy/LL/dd'),
+            id: 'last-7-days',
+            label: 'Last 7 days',
+        });
+    });
+    regressionTest('select custom date interval and get time', async ({ page }) => {
+        const dateDropDownButton = page.locator('ix-date-dropdown');
+        await dateDropDownButton.click();
+        const dropdown = dateDropDownButton.locator('ix-dropdown');
+        await expect(dropdown).toHaveClass(/show/);
+        const customItem = dateDropDownButton.getByText('Custom...');
+        await customItem.click();
+        const datepicker = dateDropDownButton.locator('ix-date-picker');
+        await expect(datepicker).toBeVisible();
+        const startDay = datepicker
+            .locator('[date-calender-day]')
+            .getByText('3', { exact: true });
+        const endDay = datepicker
+            .locator('[date-calender-day]')
+            .getByText('11', { exact: true });
+        await startDay.click();
+        await endDay.click();
+        const dateDoneButton = dateDropDownButton.getByRole('button', {
+            name: 'Done',
+        });
+        await dateDoneButton.click();
+        await expect(datepicker).not.toBeVisible();
+        const button = dateDropDownButton.locator('[data-date-dropdown-trigger]');
+        await expect(button).toHaveText(/2023\/11\/03 \- 2023\/11\/11/);
+    });
+    regressionTest('check if dateRangeChange event is fired', async ({ page }) => {
+        const today = DateTime.now();
+        const format = 'yyyy/LL/dd';
+        const dateDropdown = page.locator('ix-date-dropdown');
+        await expect(dateDropdown).toHaveClass(/hydrated/);
+        const eventPromise = dateDropdown.evaluate((e) => {
+            return new Promise((resolve) => {
+                e.addEventListener('dateRangeChange', (event) => 
+                // Using JSON.stringify to deserialize js object between chrome instance and test
+                resolve(JSON.stringify(event.detail)));
+            });
+        });
+        await dateDropdown.click();
+        const intervalOptionsButton = page.locator('ix-dropdown-item div.dropdown-item-text:has-text("Last 7 days")');
+        await intervalOptionsButton.click();
+        const dateRangeChangeEvent = await eventPromise;
+        expect(JSON.parse(dateRangeChangeEvent)).toStrictEqual({
+            from: today
+                .minus({
+                day: 7,
+            })
+                .toFormat(format),
+            to: today.toFormat(format),
+            id: 'last-7-days',
+            label: 'Last 7 days',
+        });
+    });
+    regressionTest('check initial date', async ({ page }) => {
+        const dateDropDownButton = page.locator(DATE_DROPDOWN_SELECTOR);
+        await expect(dateDropDownButton).toHaveClass(/hydrated/);
+        const initialSetDate = await dateDropDownButton.evaluate((el) => el.getDateRange());
+        const endDate = DateTime.now();
+        const startDate = endDate;
+        expect(initialSetDate).toEqual({
+            from: startDate.toFormat('yyyy/LL/dd'),
+            to: endDate.toFormat('yyyy/LL/dd'),
+            id: 'today',
+            label: 'Today',
+        });
+    });
+});
+regressionTest('set date from a button', async ({ mount, page }) => {
+    await mount(`<ix-date-dropdown from="2024/02/16"></ix-date-dropdown><ix-button id="set-tomorrow"></ix-button>`);
+    const dateDropdown = page.locator(DATE_DROPDOWN_SELECTOR);
+    const setButton = page.locator('#set-tomorrow');
+    await expect(dateDropdown).toHaveClass(/hydrated/);
+    await setButton.click();
+    await dateDropdown.evaluate((el) => {
+        el.from = '2024/02/17';
+        el.to = '2024/02/27';
+        return el.getDateRange();
+    });
+    const button = dateDropdown.locator('[data-date-dropdown-trigger]');
+    await expect(button).toHaveText(/2024\/02\/17 \- 2024\/02\/27/);
+});
+regressionTest('select different year', async ({ mount, page }) => {
+    await mount(`<ix-date-dropdown from="2024/02/16"></ix-date-dropdown>`);
+    const dateDropdown = page.locator(DATE_DROPDOWN_SELECTOR);
+    await expect(dateDropdown).toHaveClass(/hydrated/);
+    await expect(dateDropdown).toBeVisible();
+    const dateDropdownTrigger = dateDropdown.getByTestId('date-dropdown-trigger');
+    await dateDropdownTrigger.click();
+    await expect(dateDropdownTrigger).toBeVisible();
+    const datePickerDropdown = dateDropdown.getByTestId('date-dropdown');
+    await expect(datePickerDropdown).toBeVisible();
+    const datepicker = datePickerDropdown.locator('ix-date-picker');
+    const yearMonthButton = datepicker.getByTestId('year-month-button');
+    await yearMonthButton.click();
+    const yearMonthDropdown = datepicker.getByTestId('year-month-dropdown');
+    await expect(yearMonthDropdown).toBeVisible();
+    const yearContainer = yearMonthDropdown.getByTestId('year-container');
+    const year2020 = yearContainer.getByText('2020');
+    await year2020.click();
+    const monthContainer = yearMonthDropdown.getByTestId('month-container');
+    const march2020 = monthContainer.getByText('March 2020');
+    await march2020.click();
+    await expect(yearMonthDropdown).not.toBeVisible();
+    await expect(yearMonthButton).toHaveText('March 2020');
+});
+regressionTest('disable', async ({ mount, page }) => {
+    await mount(`<ix-date-dropdown disabled></ix-date-dropdown>`);
+    const dateDropdown = page.locator('ix-date-dropdown');
+    const trigger = page.locator('[data-date-dropdown-trigger]');
+    await expect(trigger).toHaveAttribute('disabled');
+    await dateDropdown.click();
+    const dropdown = dateDropdown.locator('[data-date-dropdown]');
+    await expect(dropdown).not.toBeVisible();
+});
+regressionTest('close dropdown after disabled property = true', async ({ mount, page }) => {
+    await mount(`<ix-date-dropdown></ix-date-dropdown>`);
+    const dateDropdown = page.locator('ix-date-dropdown');
+    await dateDropdown.click();
+    await dateDropdown.evaluate((dd) => {
+        dd.disabled = true;
+    });
+    const dropdown = dateDropdown.locator('[data-date-dropdown]');
+    await expect(dropdown).not.toBeVisible();
+});
+//# sourceMappingURL=date-dropdown.ct.js.map

package/dist/collection/components/date-dropdown/test/date-dropdown.ct.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-dropdown.ct.js","sourceRoot":"","sources":["../../../../src/components/date-dropdown/test/date-dropdown.ct.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { expect } from '@playwright/test';\nimport { regressionTest } from '@utils/test';\nimport { DateTime } from 'luxon';\nimport { DateDropdownOption } from '../date-dropdown';\n\nconst DATE_DROPDOWN_SELECTOR = 'ix-date-dropdown';\n\nregressionTest('renders', async ({ mount, page }) => {\n  await mount(`<ix-date-dropdown></ix-date-dropdown>`);\n  const dateDropdown = page.locator(DATE_DROPDOWN_SELECTOR);\n  await expect(dateDropdown).toHaveClass(/hydrated/);\n});\n\nregressionTest.describe('date dropdown tests', () => {\n  regressionTest.beforeEach(async ({ mount, page }) => {\n    await mount(`<ix-date-dropdown from=\"2023/11/01\"></ix-date-dropdown>`);\n\n    const today = DateTime.now();\n    const format = 'yyyy/LL/dd';\n    const prevWeek = today.minus({\n      day: 7,\n    });\n\n    const dateDropdown = page.locator('ix-date-dropdown');\n\n    const rangeOptions: DateDropdownOption[] = [\n      {\n        id: 'no-time',\n        label: 'No time limit',\n        // TODO (IX-1870): refactor event signatures to match internal logic with undefined values\n        from: undefined as any,\n        to: today.toFormat(format),\n      },\n      {\n        id: 'today',\n        label: 'Today',\n        from: today.toFormat(format),\n        to: today.toFormat(format),\n      },\n      {\n        id: 'last-7-days',\n        label: 'Last 7 days',\n        from: today\n          .minus({\n            day: 7,\n          })\n          .toFormat(format),\n        to: today.toFormat(format),\n      },\n      {\n        id: 'last-week',\n        label: 'Last week',\n        from: prevWeek.startOf('week').toFormat(format),\n        to: prevWeek.endOf('week').toFormat(format),\n      },\n      {\n        id: 'current-month',\n        label: 'Current month',\n        from: today.startOf('month').toFormat(format),\n        to: today.endOf('month').toFormat(format),\n      },\n    ];\n\n    await dateDropdown.evaluate(\n      (el, [dateRangeOptions]) => {\n        const elementToTest = el as HTMLIxDateDropdownElement;\n\n        elementToTest.dateRangeId = 'today';\n        elementToTest.customRangeAllowed = true;\n        elementToTest.dateRangeOptions = dateRangeOptions;\n      },\n      [rangeOptions]\n    );\n  });\n\n  regressionTest(\n    'select different date interval and get date',\n    async ({ page }) => {\n      const dateDropdown = page.locator('ix-date-dropdown');\n      await dateDropdown.click();\n\n      const intervalOptionsButton = dateDropdown.getByRole('button', {\n        name: 'Last 7 days',\n      });\n      await intervalOptionsButton.click();\n\n      const button = dateDropdown.locator('ix-button');\n      await expect(button).toContainText(/Last 7 days/);\n\n      const selectedDateRange = await dateDropdown.evaluate(\n        (el: HTMLIxDateDropdownElement) => el.getDateRange()\n      );\n      const endDate = DateTime.now();\n      const startDate = endDate.minus({\n        day: 7,\n      });\n\n      expect(selectedDateRange).toStrictEqual({\n        from: startDate.toFormat('yyyy/LL/dd'),\n        to: endDate.toFormat('yyyy/LL/dd'),\n        id: 'last-7-days',\n        label: 'Last 7 days',\n      });\n    }\n  );\n\n  regressionTest(\n    'select custom date interval and get time',\n    async ({ page }) => {\n      const dateDropDownButton = page.locator('ix-date-dropdown');\n      await dateDropDownButton.click();\n\n      const dropdown = dateDropDownButton.locator('ix-dropdown');\n      await expect(dropdown).toHaveClass(/show/);\n\n      const customItem = dateDropDownButton.getByText('Custom...');\n      await customItem.click();\n\n      const datepicker = dateDropDownButton.locator('ix-date-picker');\n      await expect(datepicker).toBeVisible();\n\n      const startDay = datepicker\n        .locator('[date-calender-day]')\n        .getByText('3', { exact: true });\n      const endDay = datepicker\n        .locator('[date-calender-day]')\n        .getByText('11', { exact: true });\n\n      await startDay.click();\n      await endDay.click();\n\n      const dateDoneButton = dateDropDownButton.getByRole('button', {\n        name: 'Done',\n      });\n\n      await dateDoneButton.click();\n      await expect(datepicker).not.toBeVisible();\n\n      const button = dateDropDownButton.locator('[data-date-dropdown-trigger]');\n      await expect(button).toHaveText(/2023\\/11\\/03 \\- 2023\\/11\\/11/);\n    }\n  );\n\n  regressionTest(\n    'check if dateRangeChange event is fired',\n    async ({ page }) => {\n      const today = DateTime.now();\n      const format = 'yyyy/LL/dd';\n\n      const dateDropdown = page.locator('ix-date-dropdown');\n      await expect(dateDropdown).toHaveClass(/hydrated/);\n\n      const eventPromise = dateDropdown.evaluate((e) => {\n        return new Promise<any>((resolve) => {\n          e.addEventListener('dateRangeChange', (event: any) =>\n            // Using JSON.stringify to deserialize js object between chrome instance and test\n            resolve(JSON.stringify(event.detail))\n          );\n        });\n      });\n\n      await dateDropdown.click();\n      const intervalOptionsButton = page.locator(\n        'ix-dropdown-item div.dropdown-item-text:has-text(\"Last 7 days\")'\n      );\n      await intervalOptionsButton.click();\n\n      const dateRangeChangeEvent = await eventPromise;\n      expect(JSON.parse(dateRangeChangeEvent)).toStrictEqual({\n        from: today\n          .minus({\n            day: 7,\n          })\n          .toFormat(format),\n        to: today.toFormat(format),\n        id: 'last-7-days',\n        label: 'Last 7 days',\n      });\n    }\n  );\n\n  regressionTest('check initial date', async ({ page }) => {\n    const dateDropDownButton = page.locator(DATE_DROPDOWN_SELECTOR);\n    await expect(dateDropDownButton).toHaveClass(/hydrated/);\n\n    const initialSetDate = await dateDropDownButton.evaluate(\n      (el: HTMLIxDateDropdownElement) => el.getDateRange()\n    );\n\n    const endDate = DateTime.now();\n    const startDate = endDate;\n\n    expect(initialSetDate).toEqual({\n      from: startDate.toFormat('yyyy/LL/dd'),\n      to: endDate.toFormat('yyyy/LL/dd'),\n      id: 'today',\n      label: 'Today',\n    });\n  });\n});\n\nregressionTest('set date from a button', async ({ mount, page }) => {\n  await mount(\n    `<ix-date-dropdown from=\"2024/02/16\"></ix-date-dropdown><ix-button id=\"set-tomorrow\"></ix-button>`\n  );\n  const dateDropdown = page.locator(DATE_DROPDOWN_SELECTOR);\n  const setButton = page.locator('#set-tomorrow');\n  await expect(dateDropdown).toHaveClass(/hydrated/);\n\n  await setButton.click();\n\n  await dateDropdown.evaluate((el: HTMLIxDateDropdownElement) => {\n    el.from = '2024/02/17';\n    el.to = '2024/02/27';\n    return el.getDateRange();\n  });\n  const button = dateDropdown.locator('[data-date-dropdown-trigger]');\n  await expect(button).toHaveText(/2024\\/02\\/17 \\- 2024\\/02\\/27/);\n});\n\nregressionTest('select different year', async ({ mount, page }) => {\n  await mount(`<ix-date-dropdown from=\"2024/02/16\"></ix-date-dropdown>`);\n  const dateDropdown = page.locator(DATE_DROPDOWN_SELECTOR);\n\n  await expect(dateDropdown).toHaveClass(/hydrated/);\n  await expect(dateDropdown).toBeVisible();\n\n  const dateDropdownTrigger = dateDropdown.getByTestId('date-dropdown-trigger');\n  await dateDropdownTrigger.click();\n  await expect(dateDropdownTrigger).toBeVisible();\n\n  const datePickerDropdown = dateDropdown.getByTestId('date-dropdown');\n  await expect(datePickerDropdown).toBeVisible();\n\n  const datepicker = datePickerDropdown.locator('ix-date-picker');\n  const yearMonthButton = datepicker.getByTestId('year-month-button');\n  await yearMonthButton.click();\n\n  const yearMonthDropdown = datepicker.getByTestId('year-month-dropdown');\n  await expect(yearMonthDropdown).toBeVisible();\n\n  const yearContainer = yearMonthDropdown.getByTestId('year-container');\n  const year2020 = yearContainer.getByText('2020');\n\n  await year2020.click();\n\n  const monthContainer = yearMonthDropdown.getByTestId('month-container');\n  const march2020 = monthContainer.getByText('March 2020');\n\n  await march2020.click();\n\n  await expect(yearMonthDropdown).not.toBeVisible();\n  await expect(yearMonthButton).toHaveText('March 2020');\n});\n\nregressionTest('disable', async ({ mount, page }) => {\n  await mount(`<ix-date-dropdown disabled></ix-date-dropdown>`);\n  const dateDropdown = page.locator('ix-date-dropdown');\n\n  const trigger = page.locator('[data-date-dropdown-trigger]');\n  await expect(trigger).toHaveAttribute('disabled');\n\n  await dateDropdown.click();\n\n  const dropdown = dateDropdown.locator('[data-date-dropdown]');\n  await expect(dropdown).not.toBeVisible();\n});\n\nregressionTest(\n  'close dropdown after disabled property = true',\n  async ({ mount, page }) => {\n    await mount(`<ix-date-dropdown></ix-date-dropdown>`);\n    const dateDropdown = page.locator('ix-date-dropdown');\n    await dateDropdown.click();\n    await dateDropdown.evaluate((dd: HTMLIxDateDropdownElement) => {\n      dd.disabled = true;\n    });\n    const dropdown = dateDropdown.locator('[data-date-dropdown]');\n    await expect(dropdown).not.toBeVisible();\n  }\n);\n"]}