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

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

@@ -0,0 +1 @@
+{"version":3,"file":"date-input.js","sourceRoot":"","sources":["../../../src/components/date-input/date-input.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 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 { iconCalendar } from '@siemens/ix-icons/icons';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n} from '@stencil/core';\nimport { DateTime } from 'luxon';\nimport { dropdownController } from '../dropdown/dropdown-controller';\nimport { SlotEnd, SlotStart } from '../input/input.fc';\nimport {\n  DisposableChangesAndVisibilityObservers,\n  addDisposableChangesAndVisibilityObservers,\n  adjustPaddingForStartAndEnd,\n} from '../input/input.util';\nimport {\n  ClassMutationObserver,\n  HookValidationLifecycle,\n  IxInputFieldComponent,\n  ValidationResults,\n  createClassMutationObserver,\n} from '../utils/input';\nimport { makeRef } from '../utils/make-ref';\n\nexport type DateInputValidityState = {\n  patternMismatch: boolean;\n  invalidReason?: string;\n};\n\n/**\n * @since 2.6.0\n * @form-ready 2.6.0\n * @slot start - Element will be displayed at the start of the input\n * @slot end - Element will be displayed at the end of the input\n */\n@Component({\n  tag: 'ix-date-input',\n  styleUrl: 'date-input.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DateInput implements IxInputFieldComponent<string | undefined> {\n  @Element() hostElement!: HTMLIxDateInputElement;\n  @AttachInternals() formInternals!: ElementInternals;\n\n  /**\n   * name of the input element\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * placeholder of the input element\n   */\n  @Prop({ reflect: true }) placeholder?: string;\n\n  /**\n   * value of the input element\n   */\n  @Prop({ reflect: true, mutable: true }) value?: string = '';\n\n  /**\n   * Locale identifier (e.g. 'en' or 'de').\n   *\n   * @since 2.6.0\n   */\n  @Prop() locale?: string;\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: string = 'yyyy/LL/dd';\n\n  /**\n   * required attribute\n   */\n  @Prop() required?: boolean;\n\n  /**\n   * helper text below the input field\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * label of the input field\n   */\n  @Prop() label?: string;\n\n  /**\n   * error text below the input field\n   */\n  @Prop({ reflect: true }) invalidText?: string;\n\n  /**\n   * readonly attribute\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * disabled attribute\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * info text below the input field\n   */\n  @Prop() infoText?: string;\n\n  /**\n   * warning text below the input field\n   */\n  @Prop() warningText?: string;\n\n  /**\n   * valid text below the input field\n   */\n  @Prop() validText?: string;\n\n  /**\n   * show text as tooltip\n   */\n  @Prop() showTextAsTooltip?: boolean;\n\n  /**\n   * i18n string for the error message when the date is not parsable\n   */\n  @Prop({ attribute: 'i18n-error-date-unparsable' }) i18nErrorDateUnparsable =\n    'Date is not valid';\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  /**\n   * Input change event.\n   */\n  @Event({ cancelable: false }) valueChange!: EventEmitter<string | undefined>;\n\n  /**\n   * Validation state change event.\n   */\n  @Event() validityStateChange!: EventEmitter<DateInputValidityState>;\n\n  /** @internal */\n  @Event() ixFocus!: EventEmitter<void>;\n\n  /** @internal */\n  @Event() ixBlur!: EventEmitter<void>;\n\n  @State() show = false;\n  @State() from: string | null = null;\n  @State() isInputInvalid = false;\n  @State() isInvalid = false;\n  @State() isValid = false;\n  @State() isInfo = false;\n  @State() isWarning = false;\n  @State() focus = false;\n\n  private readonly slotStartRef = makeRef<HTMLDivElement>();\n  private readonly slotEndRef = makeRef<HTMLDivElement>();\n\n  private readonly datepickerRef = makeRef<HTMLIxDatePickerElement>();\n\n  private readonly inputElementRef = makeRef<HTMLInputElement>();\n  private readonly dropdownElementRef = makeRef<HTMLIxDropdownElement>();\n  private classObserver?: ClassMutationObserver;\n  private invalidReason?: string;\n  private touched = false;\n\n  private disposableChangesAndVisibilityObservers?: DisposableChangesAndVisibilityObservers;\n\n  updateFormInternalValue(value: string | undefined): void {\n    this.formInternals.setFormValue(value);\n    this.value = value;\n  }\n\n  connectedCallback(): void {\n    this.classObserver = createClassMutationObserver(this.hostElement, () =>\n      this.checkClassList()\n    );\n\n    this.disposableChangesAndVisibilityObservers =\n      addDisposableChangesAndVisibilityObservers(\n        this.hostElement,\n        this.updatePaddings.bind(this)\n      );\n  }\n\n  componentWillLoad(): void {\n    this.onInput(this.value);\n    if (this.isInputInvalid) {\n      this.from = null;\n    } else {\n      this.watchValue();\n    }\n\n    this.checkClassList();\n    this.updateFormInternalValue(this.value);\n  }\n\n  private updatePaddings() {\n    adjustPaddingForStartAndEnd(\n      this.slotStartRef.current,\n      this.slotEndRef.current,\n      this.inputElementRef.current\n    );\n  }\n\n  disconnectedCallback(): void {\n    this.classObserver?.destroy();\n    this.disposableChangesAndVisibilityObservers?.();\n  }\n\n  @Watch('value')\n  watchValue() {\n    this.from = this.value;\n  }\n\n  /** @internal */\n  @Method()\n  hasValidValue(): Promise<boolean> {\n    return Promise.resolve(!!this.value);\n  }\n\n  /** @internal */\n  @Method()\n  getAssociatedFormElement(): Promise<HTMLFormElement | null> {\n    return Promise.resolve(this.formInternals.form);\n  }\n\n  async onInput(value: string | undefined) {\n    this.value = value;\n    if (!value) {\n      this.valueChange.emit(value);\n      return;\n    }\n\n    if (!this.format) {\n      return;\n    }\n\n    const date = DateTime.fromFormat(value, this.format);\n    if (date.isValid) {\n      this.isInputInvalid = false;\n\n      this.updateFormInternalValue(value);\n      this.closeDropdown();\n    } else {\n      this.isInputInvalid = true;\n      this.invalidReason = date.invalidReason;\n    }\n\n    this.valueChange.emit(value);\n  }\n\n  onCalenderClick(event: Event) {\n    if (!this.show) {\n      event.stopPropagation();\n      event.preventDefault();\n      this.openDropdown();\n    }\n\n    if (this.inputElementRef.current) {\n      this.inputElementRef.current.focus();\n    }\n  }\n\n  async openDropdown() {\n    const dropdownElement = await this.dropdownElementRef.waitForCurrent();\n    const id = dropdownElement.getAttribute('data-ix-dropdown');\n\n    dropdownController.dismissAll();\n    if (!id) {\n      return;\n    }\n\n    const dropdown = dropdownController.getDropdownById(id);\n    if (!dropdown) {\n      return;\n    }\n    dropdownController.present(dropdown);\n  }\n\n  async closeDropdown() {\n    const dropdownElement = await this.dropdownElementRef.waitForCurrent();\n    const id = dropdownElement.getAttribute('data-ix-dropdown');\n\n    if (!id) {\n      return;\n    }\n\n    const dropdown = dropdownController.getDropdownById(id);\n    if (!dropdown) {\n      return;\n    }\n    dropdownController.dismiss(dropdown);\n  }\n\n  private checkClassList() {\n    this.isInvalid = this.hostElement.classList.contains('ix-invalid');\n  }\n\n  private renderInput() {\n    return (\n      <div class=\"input-wrapper\">\n        <SlotStart\n          slotStartRef={this.slotStartRef}\n          onSlotChange={() => this.updatePaddings()}\n        ></SlotStart>\n        <input\n          autoComplete=\"off\"\n          class={{\n            'is-invalid': this.isInputInvalid,\n          }}\n          disabled={this.disabled}\n          readOnly={this.readonly}\n          readonly={this.readonly}\n          required={this.required}\n          ref={this.inputElementRef}\n          type=\"text\"\n          value={this.value ?? ''}\n          onInput={(event) => {\n            const target = event.target as HTMLInputElement;\n            this.onInput(target.value);\n          }}\n          onClick={(event) => {\n            if (this.show) {\n              event.stopPropagation();\n              event.preventDefault();\n            }\n          }}\n          onFocus={async () => {\n            this.openDropdown();\n            this.ixFocus.emit();\n          }}\n          onBlur={() => {\n            this.ixBlur.emit();\n            this.touched = true;\n          }}\n        ></input>\n        <SlotEnd\n          slotEndRef={this.slotEndRef}\n          onSlotChange={() => this.updatePaddings()}\n        >\n          <ix-icon-button\n            data-testid=\"open-calendar\"\n            class={{ 'calendar-hidden': this.disabled || this.readonly }}\n            ghost\n            icon={iconCalendar}\n            onClick={(event) => this.onCalenderClick(event)}\n          ></ix-icon-button>\n        </SlotEnd>\n      </div>\n    );\n  }\n\n  @HookValidationLifecycle()\n  hookValidationLifecycle({\n    isInfo,\n    isInvalid,\n    isInvalidByRequired,\n    isValid,\n    isWarning,\n  }: ValidationResults) {\n    this.isInvalid = isInvalid || isInvalidByRequired || this.isInputInvalid;\n    this.isInfo = isInfo;\n    this.isValid = isValid;\n    this.isWarning = isWarning;\n  }\n\n  @Watch('isInputInvalid')\n  async onInputValidationChange() {\n    const state = await this.getValidityState();\n    this.validityStateChange.emit({\n      patternMismatch: state.patternMismatch,\n      invalidReason: this.invalidReason,\n    });\n  }\n\n  /** @internal */\n  @Method()\n  getValidityState(): Promise<ValidityState> {\n    return Promise.resolve({\n      badInput: false,\n      customError: false,\n      patternMismatch: this.isInputInvalid,\n      rangeOverflow: false,\n      rangeUnderflow: false,\n      stepMismatch: false,\n      tooLong: false,\n      tooShort: false,\n      typeMismatch: false,\n      valid: !this.isInputInvalid,\n      valueMissing: !!this.required && !this.value,\n    });\n  }\n\n  /**\n   * Get the native input element\n   */\n  @Method()\n  getNativeInputElement(): Promise<HTMLInputElement> {\n    return this.inputElementRef.waitForCurrent();\n  }\n\n  /**\n   * Focuses the input field\n   */\n  @Method()\n  async focusInput(): Promise<void> {\n    return (await this.getNativeInputElement()).focus();\n  }\n\n  /**\n   * Returns whether the text field has been touched.\n   * @internal\n   */\n  @Method()\n  isTouched(): Promise<boolean> {\n    return Promise.resolve(this.touched);\n  }\n\n  render() {\n    const invalidText = this.isInputInvalid\n      ? this.i18nErrorDateUnparsable\n      : this.invalidText;\n\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n          readonly: this.readonly,\n        }}\n      >\n        <ix-field-wrapper\n          label={this.label}\n          helperText={this.helperText}\n          isInvalid={this.isInvalid}\n          invalidText={invalidText}\n          infoText={this.infoText}\n          isInfo={this.isInfo}\n          isWarning={this.isWarning}\n          warningText={this.warningText}\n          isValid={this.isValid}\n          validText={this.validText}\n          showTextAsTooltip={this.showTextAsTooltip}\n          required={this.required}\n          controlRef={this.inputElementRef}\n        >\n          {this.renderInput()}\n        </ix-field-wrapper>\n        <ix-dropdown\n          data-testid=\"date-dropdown\"\n          trigger={this.inputElementRef.waitForCurrent()}\n          ref={this.dropdownElementRef}\n          closeBehavior=\"outside\"\n          suppressOverflowBehavior={true}\n          show={this.show}\n          onShowChanged={(event) => {\n            this.show = event.detail;\n          }}\n        >\n          <ix-date-picker\n            ref={this.datepickerRef}\n            format={this.format}\n            locale={this.locale}\n            range={false}\n            from={this.from ?? ''}\n            onDateChange={(event) => {\n              const { from } = event.detail;\n              this.onInput(from);\n            }}\n            showWeekNumbers={this.showWeekNumbers}\n          ></ix-date-picker>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/date-input/tests/date-input.ct.js

@@ -0,0 +1,117 @@
+/*
+ * 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.
+ */
+import { expect } from "@playwright/test";
+import { getFormValue, preventFormSubmission, regressionTest, } from "../../../tests/utils/test/index";
+const createDateInputAccessor = async (dateInput) => {
+    const handle = {
+        openByCalender: async () => {
+            const trigger = dateInput.getByTestId('open-calendar');
+            await trigger.click();
+        },
+        selectDay: async (day) => {
+            const dayButton = dateInput
+                .locator('ix-dropdown')
+                .filter({ hasText: day.toString() })
+                .getByText(day.toString());
+            await dayButton.click();
+        },
+    };
+    return handle;
+};
+regressionTest('renders', async ({ mount, page }) => {
+    await mount(`<ix-date-input value="2024/05/05"></ix-date-input>`);
+    const dateInputElement = page.locator('ix-date-input');
+    await expect(dateInputElement).toHaveClass(/hydrated/);
+});
+regressionTest('select date by open calendar trigger', async ({ mount, page }) => {
+    await mount(`<ix-date-input value="2024/05/05"></ix-date-input>`);
+    const dateInputElement = page.locator('ix-date-input');
+    await expect(dateInputElement).toHaveClass(/hydrated/);
+    const dateInput = await createDateInputAccessor(dateInputElement);
+    await dateInput.openByCalender();
+    await dateInput.selectDay(10);
+    await expect(dateInputElement).toHaveAttribute('value', '2024/05/10');
+});
+regressionTest('select date by focus', async ({ mount, page }) => {
+    await mount(`<ix-date-input value="2024/05/05"></ix-date-input>`);
+    const dateInputElement = page.locator('ix-date-input');
+    await expect(dateInputElement).toHaveClass(/hydrated/);
+    const dateInput = await createDateInputAccessor(dateInputElement);
+    await dateInputElement.locator('input').focus();
+    await dateInput.selectDay(10);
+    await expect(dateInputElement).toHaveAttribute('value', '2024/05/10');
+    await expect(dateInputElement.getByTestId('date-dropdown')).not.toHaveClass(/show/);
+});
+regressionTest('select date by input', async ({ mount, page }) => {
+    await mount(`<ix-date-input value="2024/05/05"></ix-date-input>`);
+    const dateInputElement = page.locator('ix-date-input');
+    await expect(dateInputElement).toHaveClass(/hydrated/);
+    const dateInput = await createDateInputAccessor(dateInputElement);
+    await dateInputElement.locator('input').focus();
+    await expect(dateInputElement.getByTestId('date-dropdown')).toHaveClass(/show/);
+    await dateInputElement.locator('input').fill('2025/10/10');
+    await expect(dateInputElement.getByTestId('date-dropdown')).not.toHaveClass(/show/);
+    await expect(dateInputElement).toHaveAttribute('value', '2025/10/10');
+    await dateInput.openByCalender();
+    await expect(dateInputElement.locator('.calendar-item.selected')).toHaveText('10');
+});
+regressionTest('select date by input with invalid date', async ({ mount, page }) => {
+    await mount(`<ix-date-input value="2024/05/05"></ix-date-input>`);
+    const dateInputElement = page.locator('ix-date-input');
+    await expect(dateInputElement).toHaveClass(/hydrated/);
+    const dateInput = await createDateInputAccessor(dateInputElement);
+    await dateInputElement.locator('input').fill('2025/10/10/10');
+    await dateInput.openByCalender();
+    await expect(dateInputElement).toHaveAttribute('value', '2025/10/10/10');
+    await expect(dateInputElement
+        .locator('ix-field-wrapper')
+        .locator('ix-typography')
+        .filter({ hasText: 'Date is not valid' })).toHaveText('Date is not valid');
+});
+regressionTest('select date by input with invalid date - i18n', async ({ mount, page }) => {
+    await mount(`<ix-date-input value="2024/05/05" i18n-error-date-unparsable="Datum nicht korrekt!"></ix-date-input>`);
+    const dateInputElement = page.locator('ix-date-input');
+    await expect(dateInputElement).toHaveClass(/hydrated/);
+    const dateInput = await createDateInputAccessor(dateInputElement);
+    await dateInputElement.locator('input').fill('2025/10/10/10');
+    await dateInput.openByCalender();
+    await expect(dateInputElement).toHaveAttribute('value', '2025/10/10/10');
+    await expect(dateInputElement
+        .locator('ix-field-wrapper')
+        .locator('ix-typography')
+        .filter({ hasText: 'Datum nicht korrekt!' })).toHaveText('Datum nicht korrekt!');
+});
+regressionTest('required', async ({ mount, page }) => {
+    await mount(`<ix-date-input required label="MyLabel"></ix-date-input>`);
+    const dateInputElement = page.locator('ix-date-input');
+    const input = dateInputElement.locator('input');
+    await expect(dateInputElement).toHaveAttribute('required');
+    await expect(dateInputElement.locator('ix-field-label')).toHaveText('MyLabel *');
+    await input.focus();
+    await input.blur();
+    await expect(dateInputElement).toHaveClass(/ix-invalid--required/);
+});
+regressionTest(`form-ready - ix-date-input`, async ({ mount, page }) => {
+    await mount(`<form><ix-date-input name="my-field-name"></ix-date-input></form>`);
+    const formElement = page.locator('form');
+    preventFormSubmission(formElement);
+    const input = page.locator('ix-date-input').locator('input');
+    await input.fill('2024/05/05');
+    await input.blur();
+    const formData = await getFormValue(formElement, 'my-field-name', page);
+    expect(formData).toBe('2024/05/05');
+});
+regressionTest(`form-ready - ix-date-input initial value`, async ({ mount, page }) => {
+    await mount(`<form><ix-date-input name="my-field-name" value="2024/12/12"></ix-date-input></form>`);
+    const formElement = page.locator('form');
+    preventFormSubmission(formElement);
+    const formData = await getFormValue(formElement, 'my-field-name', page);
+    expect(formData).toBe('2024/12/12');
+});
+//# sourceMappingURL=date-input.ct.js.map

package/dist/collection/components/date-input/tests/date-input.ct.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-input.ct.js","sourceRoot":"","sources":["../../../../src/components/date-input/tests/date-input.ct.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 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 { Locator, expect } from '@playwright/test';\nimport {\n  getFormValue,\n  preventFormSubmission,\n  regressionTest,\n} from '@utils/test';\n\nconst createDateInputAccessor = async (dateInput: Locator) => {\n  const handle = {\n    openByCalender: async () => {\n      const trigger = dateInput.getByTestId('open-calendar');\n      await trigger.click();\n    },\n    selectDay: async (day: number) => {\n      const dayButton = dateInput\n        .locator('ix-dropdown')\n        .filter({ hasText: day.toString() })\n        .getByText(day.toString());\n      await dayButton.click();\n    },\n  };\n\n  return handle;\n};\n\nregressionTest('renders', async ({ mount, page }) => {\n  await mount(`<ix-date-input value=\"2024/05/05\"></ix-date-input>`);\n  const dateInputElement = page.locator('ix-date-input');\n  await expect(dateInputElement).toHaveClass(/hydrated/);\n});\n\nregressionTest(\n  'select date by open calendar trigger',\n  async ({ mount, page }) => {\n    await mount(`<ix-date-input value=\"2024/05/05\"></ix-date-input>`);\n    const dateInputElement = page.locator('ix-date-input');\n    await expect(dateInputElement).toHaveClass(/hydrated/);\n\n    const dateInput = await createDateInputAccessor(dateInputElement);\n    await dateInput.openByCalender();\n\n    await dateInput.selectDay(10);\n    await expect(dateInputElement).toHaveAttribute('value', '2024/05/10');\n  }\n);\n\nregressionTest('select date by focus', async ({ mount, page }) => {\n  await mount(`<ix-date-input value=\"2024/05/05\"></ix-date-input>`);\n  const dateInputElement = page.locator('ix-date-input');\n  await expect(dateInputElement).toHaveClass(/hydrated/);\n\n  const dateInput = await createDateInputAccessor(dateInputElement);\n  await dateInputElement.locator('input').focus();\n\n  await dateInput.selectDay(10);\n  await expect(dateInputElement).toHaveAttribute('value', '2024/05/10');\n  await expect(dateInputElement.getByTestId('date-dropdown')).not.toHaveClass(\n    /show/\n  );\n});\n\nregressionTest('select date by input', async ({ mount, page }) => {\n  await mount(`<ix-date-input value=\"2024/05/05\"></ix-date-input>`);\n  const dateInputElement = page.locator('ix-date-input');\n  await expect(dateInputElement).toHaveClass(/hydrated/);\n\n  const dateInput = await createDateInputAccessor(dateInputElement);\n  await dateInputElement.locator('input').focus();\n  await expect(dateInputElement.getByTestId('date-dropdown')).toHaveClass(\n    /show/\n  );\n  await dateInputElement.locator('input').fill('2025/10/10');\n\n  await expect(dateInputElement.getByTestId('date-dropdown')).not.toHaveClass(\n    /show/\n  );\n  await expect(dateInputElement).toHaveAttribute('value', '2025/10/10');\n\n  await dateInput.openByCalender();\n\n  await expect(dateInputElement.locator('.calendar-item.selected')).toHaveText(\n    '10'\n  );\n});\n\nregressionTest(\n  'select date by input with invalid date',\n  async ({ mount, page }) => {\n    await mount(`<ix-date-input value=\"2024/05/05\"></ix-date-input>`);\n    const dateInputElement = page.locator('ix-date-input');\n    await expect(dateInputElement).toHaveClass(/hydrated/);\n\n    const dateInput = await createDateInputAccessor(dateInputElement);\n    await dateInputElement.locator('input').fill('2025/10/10/10');\n    await dateInput.openByCalender();\n    await expect(dateInputElement).toHaveAttribute('value', '2025/10/10/10');\n\n    await expect(\n      dateInputElement\n        .locator('ix-field-wrapper')\n        .locator('ix-typography')\n        .filter({ hasText: 'Date is not valid' })\n    ).toHaveText('Date is not valid');\n  }\n);\n\nregressionTest(\n  'select date by input with invalid date - i18n',\n  async ({ mount, page }) => {\n    await mount(\n      `<ix-date-input value=\"2024/05/05\" i18n-error-date-unparsable=\"Datum nicht korrekt!\"></ix-date-input>`\n    );\n    const dateInputElement = page.locator('ix-date-input');\n    await expect(dateInputElement).toHaveClass(/hydrated/);\n\n    const dateInput = await createDateInputAccessor(dateInputElement);\n    await dateInputElement.locator('input').fill('2025/10/10/10');\n    await dateInput.openByCalender();\n    await expect(dateInputElement).toHaveAttribute('value', '2025/10/10/10');\n\n    await expect(\n      dateInputElement\n        .locator('ix-field-wrapper')\n        .locator('ix-typography')\n        .filter({ hasText: 'Datum nicht korrekt!' })\n    ).toHaveText('Datum nicht korrekt!');\n  }\n);\n\nregressionTest('required', async ({ mount, page }) => {\n  await mount(`<ix-date-input required label=\"MyLabel\"></ix-date-input>`);\n  const dateInputElement = page.locator('ix-date-input');\n  const input = dateInputElement.locator('input');\n  await expect(dateInputElement).toHaveAttribute('required');\n\n  await expect(dateInputElement.locator('ix-field-label')).toHaveText(\n    'MyLabel *'\n  );\n\n  await input.focus();\n  await input.blur();\n\n  await expect(dateInputElement).toHaveClass(/ix-invalid--required/);\n});\n\nregressionTest(`form-ready - ix-date-input`, async ({ mount, page }) => {\n  await mount(\n    `<form><ix-date-input name=\"my-field-name\"></ix-date-input></form>`\n  );\n\n  const formElement = page.locator('form');\n  preventFormSubmission(formElement);\n  const input = page.locator('ix-date-input').locator('input');\n  await input.fill('2024/05/05');\n  await input.blur();\n\n  const formData = await getFormValue(formElement, 'my-field-name', page);\n  expect(formData).toBe('2024/05/05');\n});\n\nregressionTest(\n  `form-ready - ix-date-input initial value`,\n  async ({ mount, page }) => {\n    await mount(\n      `<form><ix-date-input name=\"my-field-name\" value=\"2024/12/12\"></ix-date-input></form>`\n    );\n\n    const formElement = page.locator('form');\n    preventFormSubmission(formElement);\n    const formData = await getFormValue(formElement, 'my-field-name', page);\n    expect(formData).toBe('2024/12/12');\n  }\n);\n"]}

package/dist/collection/components/date-picker/date-picker-component.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=date-picker-component.js.map

package/dist/collection/components/date-picker/date-picker-component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker-component.js","sourceRoot":"","sources":["../../../src/components/date-picker/date-picker-component.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 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 { DateTimeCardCorners } from '../date-time-card/date-time-card';\n\nexport interface IxDatePickerComponent {\n  /**\n   * Annotate with @Prop() decorator\n   */\n  format: string;\n\n  /**\n   * Annotate with @Prop() decorator\n   */\n  range: boolean;\n\n  /**\n   * Annotate with @Prop() decorator\n   */\n  corners: DateTimeCardCorners;\n\n  /**\n   * Annotate with @Prop() decorator\n   */\n  from?: string;\n\n  /**\n   * Annotate with @Prop() decorator\n   */\n  to?: string;\n\n  /**\n   * Annotate with @Prop() decorator\n   */\n  minDate?: string;\n\n  /**\n   * Annotate with @Prop() decorator\n   */\n  maxDate?: string;\n\n  /**\n   * Annotate with @Prop({ attribute: 'i18n-done' }) decorator\n   */\n  i18nDone: string;\n\n  /**\n   * Annotate with @Prop() decorator\n   */\n  weekStartIndex: number;\n\n  /**\n   * Annotate with @Prop() decorator\n   */\n  locale?: string;\n\n  /**\n   * Annotate with @Prop() decorator\n   */\n  showWeekNumbers: boolean;\n}\n"]}

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

@@ -0,0 +1,320 @@
+/*
+ * 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.
+ */
+/*
+ * 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: 21rem;
+}
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
+:host ::-webkit-scrollbar-button {
+  display: none;
+}
+@-moz-document url-prefix() {
+  :host * {
+    scrollbar-color: var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);
+    scrollbar-width: thin;
+  }
+}
+: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(7, 40px);
+  grid-template-rows: repeat(7, 40px);
+  align-items: center;
+  justify-items: center;
+  justify-content: center;
+  color: var(--theme-datepicker-today--color);
+}
+:host .grid--show-week-numbers {
+  grid-template-columns: 24px repeat(7, 40px);
+}
+: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:first-child {
+  width: 24px;
+}
+:host .grid .calendar-item:focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+  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 .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.week-day .overflow {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+: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;
+  width: 1.5rem;
+}
+:host .button {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 1rem;
+}
+:host .hidden {
+  display: none;
+}