@siemens/ix 0.0.0-20240419081748

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

@@ -0,0 +1,171 @@
+/*
+ * 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 { test } from "../../../tests/utils/test/index";
+import { DateTime } from "luxon";
+const DATE_DROPDOWN_SELECTOR = 'ix-date-dropdown';
+test('renders', async ({ mount, page }) => {
+    await mount(`<ix-date-dropdown></ix-date-dropdown>`);
+    const dateDropdown = page.locator(DATE_DROPDOWN_SELECTOR);
+    await expect(dateDropdown).toHaveClass(/hydrated/);
+});
+test.describe('date dropdown tests', () => {
+    test.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',
+                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]);
+    });
+    test('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',
+        });
+    });
+    test('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/);
+    });
+    test('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',
+        });
+    });
+    test('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',
+        });
+    });
+});
+test('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/);
+});
+//# 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 { test } from '@utils/test';\nimport { DateTime } from 'luxon';\nimport { DateDropdownOption } from '../date-dropdown';\n\nconst DATE_DROPDOWN_SELECTOR = 'ix-date-dropdown';\n\ntest('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\ntest.describe('date dropdown tests', () => {\n  test.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        from: undefined,\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  test('select different date interval and get date', 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  test('select custom date interval and get time', 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  test('check if dateRangeChange event is fired', 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  test('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\ntest('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"]}

package/dist/collection/components/date-picker/date-picker.css

@@ -0,0 +1,295 @@
+/*
+ * 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.
+ */
+/*
+ * SPDX-FileCopyrightText: 2024 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.
+ */
+/* Dimensions */
+/* Font sizes */
+/* Line heights */
+/* Animation timings */
+/*
+ * SPDX-FileCopyrightText: 2024 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.
+ */
+/*
+ * SPDX-FileCopyrightText: 2024 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.
+ */
+:host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+  display: block;
+  position: relative;
+  width: 22rem;
+}
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
+:host ::-webkit-scrollbar-button {
+  display: none;
+}
+:host ::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host ::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host ::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host ::-webkit-scrollbar-corner {
+  display: none;
+}
+:host .header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+:host .disabled-item {
+  pointer-events: none;
+  background-color: var(--theme-datepicker-day--background--disabled);
+  color: var(--theme-datepicker-day--color--disabled);
+  cursor: default;
+}
+:host .selector {
+  flex-basis: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem 1rem;
+}
+:host .selector .dropdown {
+  color: var(--theme-menu-item--color);
+  font-size: 14px;
+  line-height: 20px;
+}
+:host .selector .fontSize {
+  font-size: 16px;
+}
+:host .selector .capitalize {
+  text-transform: capitalize;
+}
+:host .selector .month-dropdown-item {
+  margin-left: 4px;
+  margin-right: 4px;
+}
+:host .selector .month-dropdown-item:focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+:host .selector .arrowYear {
+  display: flex;
+  position: relative;
+  padding: 0.75rem 2rem;
+  align-items: center;
+  cursor: pointer;
+}
+:host .selector .arrowYear:hover {
+  background-color: var(--theme-select-list-item--background--hover);
+}
+:host .selector .arrowYear.selected {
+  background-color: var(--theme-select-list-item--background--selected);
+}
+:host .selector .arrowYear .arrowPosition {
+  position: absolute;
+  left: calc(1rem - 6px);
+  top: calc(50% - 6px);
+}
+:host .selector .arrowYear .checkPosition {
+  position: absolute;
+  left: calc(1rem - 6px);
+  top: calc(50% - 8px);
+}
+:host .selector .arrowYear .monthMargin {
+  margin-left: 10px;
+}
+:host .wrapper {
+  display: flex;
+}
+:host .wrapper .overflow {
+  overflow-y: scroll;
+  max-height: 250px;
+}
+:host .grid {
+  display: grid;
+  grid-template-columns: repeat(8, 40px);
+  grid-template-rows: repeat(7, 40px);
+  align-items: center;
+  justify-items: center;
+  justify-content: center;
+  color: var(--theme-datepicker-today--color);
+}
+:host .grid .calendar-item {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--theme-datepicker-day--background);
+  border: 1px solid var(--theme-datepicker-day--background);
+  width: 40px;
+  height: 40px;
+  cursor: pointer;
+}
+:host .grid .calendar-item:focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+:host .grid .calendar-item.today {
+  border: 1px solid var(--theme-datepicker-today--border-color);
+}
+:host .grid .calendar-item.today:hover {
+  background-color: var(--theme-datepicker-day--background--hover);
+}
+:host .grid .calendar-item.today:active {
+  background-color: var(--theme-datepicker-day--background--active);
+}
+:host .grid .calendar-item.today.selected {
+  box-shadow: inset 0 0 0 1px white;
+}
+:host .grid .calendar-item.today.selected:hover {
+  background-color: var(--theme-datepicker-day--background--selected-hover);
+}
+:host .grid .calendar-item.today.selected:active {
+  background-color: var(--theme-datepicker-day--background--selected-active);
+}
+:host .grid .calendar-item.today.selected.disabled {
+  pointer-events: none;
+  background-color: var(--theme-datepicker-day--background--selected-disabled);
+  border: 1px solid var(--theme-datepicker-day--background--selected-disabled);
+  color: var(--theme-datepicker-day--color--selected-disabled);
+}
+:host .grid .calendar-item.today.range {
+  background-color: var(--theme-datepicker-day--background--range);
+  color: var(--theme-datepicker-day--color--range);
+  border: 1px solid var(--theme-datepicker-today--border-color--range);
+  box-shadow: inset 0 0 0 1px white;
+}
+:host .grid .calendar-item.today.range:hover {
+  background-color: var(--theme-datepicker-day--background--range-hover);
+  border: 1px solid var(--theme-datepicker-today--border-color--range-hover);
+}
+:host .grid .calendar-item.today.range:active {
+  background-color: var(--theme-datepicker-day--background--range-active);
+  border: 1px solid var(--theme-datepicker-today--border-color--range-active);
+}
+:host .grid .calendar-item.today.range.disabled {
+  background-color: var(--theme-datepicker-day--background--range-disabled);
+  color: var(--theme-datepicker-day--color--range-disabled);
+  border: 1px solid var(--theme-datepicker-today--border-color--range-disabled);
+}
+:host .grid .calendar-item.today.disabled {
+  pointer-events: none;
+  background-color: var(--theme-datepicker-day--background--disabled);
+  color: var(--theme-datepicker-day--color--disabled);
+  cursor: default;
+}
+:host .grid .calendar-item:hover {
+  background-color: var(--theme-datepicker-day--background--hover);
+}
+:host .grid .calendar-item:active {
+  background-color: var(--theme-datepicker-day--background--active);
+}
+:host .grid .calendar-item.selected {
+  background-color: var(--theme-datepicker-day--background--selected);
+  color: var(--theme-datepicker-day--color--selected);
+  border: 1px solid var(--theme-datepicker-day--background--selected);
+}
+:host .grid .calendar-item.selected:hover {
+  background-color: var(--theme-datepicker-day--background--selected-hover);
+}
+:host .grid .calendar-item.selected:active {
+  background-color: var(--theme-datepicker-day--background--selected-active);
+}
+:host .grid .calendar-item.selected.disabled {
+  pointer-events: none;
+  background-color: var(--theme-datepicker-day--background--selected-disabled);
+  color: var(--theme-datepicker-day--color--selected-disabled);
+}
+:host .grid .calendar-item.range {
+  background-color: var(--theme-datepicker-day--background--range);
+  color: var(--theme-datepicker-day--color--range);
+}
+:host .grid .calendar-item.range:hover {
+  background-color: var(--theme-datepicker-day--background--range-hover);
+}
+:host .grid .calendar-item.range:active {
+  background-color: var(--theme-datepicker-day--background--range-active);
+}
+:host .grid .calendar-item.range.disabled {
+  pointer-events: none;
+  background-color: var(--theme-datepicker-day--background--range-disabled);
+  color: var(--theme-datepicker-day--color--range-disabled);
+}
+:host .grid .calendar-item.disabled {
+  pointer-events: none;
+  background-color: var(--theme-datepicker-day--background--disabled);
+  color: var(--theme-datepicker-day--color--disabled);
+}
+:host .grid .calendar-item.week-day {
+  color: var(--theme-datepicker-weekday--color);
+  font-size: 12px;
+  line-height: 20px;
+  border: none;
+  background: none;
+  cursor: initial;
+}
+:host .grid .calendar-item.empty-day {
+  border: none;
+  background: none;
+  cursor: initial;
+}
+:host .grid .calendar-item.week-number {
+  font-size: 10px;
+  line-height: 14px;
+  color: var(--theme-datepicker-weekday--color);
+  border: none;
+  background: none;
+  cursor: initial;
+}
+:host .grid .calendar-item:focus-visible {
+  background-color: var(--theme-datepicker-day--background--selected);
+  border: inset 1px solid var(--theme-datepicker-day--border-color--selected);
+  color: var(--theme-datepicker-day--color--selected);
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: 0;
+}
+:host .button {
+  display: flex;
+  justify-content: flex-end;
+}
+:host .hidden {
+  display: none;
+}