@siemens/ix 2.4.1 → 2.6.0

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 {\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 { MakeRef, makeRef } from '../utils/make-ref';\nimport {\n  ClassMutationObserver,\n  HookValidationLifecycle,\n  IxInputFieldComponent,\n  ValidationResults,\n  createClassMutationObserver,\n} from '../utils/input';\nimport { SlotEnd, SlotStart } from '../input/input.fc';\nimport { adjustPaddingForStartAndEnd } from '../input/input.util';\nimport { iconCalendar } from '@siemens/ix-icons/icons';\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 */\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> {\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   * Input change event.\n   */\n  @Event({ cancelable: false }) valueChange!: EventEmitter<string>;\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\n  updateFormInternalValue(value: string): 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\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  componentDidRender(): void {\n    this.updatePaddings();\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    if (this.classObserver) {\n      this.classObserver.destroy();\n    }\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) {\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={() => this.ixBlur.emit()}\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  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 as unknown as MakeRef<HTMLElement>}\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          ></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,114 @@
+/*
+ * 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, test } 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;
+};
+test('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/);
+});
+test('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');
+});
+test('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/);
+});
+test('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');
+});
+test('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');
+});
+test('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!');
+});
+test('required', async ({ mount, page }) => {
+    await mount(`<ix-date-input required label="MyLabel"></ix-date-input>`);
+    const dateInputElement = page.locator('ix-date-input');
+    await expect(dateInputElement).toHaveAttribute('required');
+    await expect(dateInputElement.locator('ix-field-label')).toHaveText('MyLabel *');
+    await expect(dateInputElement).toHaveClass(/ix-invalid--required/);
+});
+test(`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');
+});
+test(`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 { getFormValue, preventFormSubmission, test } 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\ntest('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\ntest('select date by open calendar trigger', 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\ntest('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\ntest('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\ntest('select date by input with invalid date', 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\ntest('select date by input with invalid date - i18n', async ({\n  mount,\n  page,\n}) => {\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\ntest('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  await expect(dateInputElement).toHaveAttribute('required');\n\n  await expect(dateInputElement.locator('ix-field-label')).toHaveText(\n    'MyLabel *'\n  );\n\n  await expect(dateInputElement).toHaveClass(/ix-invalid--required/);\n});\n\ntest(`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\ntest(`form-ready - ix-date-input initial value`, 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"]}

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   * Annotae with @Prop() decorator\n   */\n  range: boolean;\n\n  /**\n   * Annotae with @Prop() decorator\n   */\n  corners: DateTimeCardCorners;\n\n  /**\n   * Annotae with @Prop() decorator\n   */\n  from?: string;\n\n  /**\n   * Annotae with @Prop() decorator\n   */\n  to?: string;\n\n  /**\n   * Annotae with @Prop() decorator\n   */\n  minDate?: string;\n\n  /**\n   * Annotae with @Prop() decorator\n   */\n  maxDate?: string;\n\n  /**\n   * Annotate with @Prop({ attribute: 'i18n-done' }) decorator\n   */\n  i18nDone: string;\n\n  /**\n   * Annotae with @Prop() decorator\n   */\n  weekStartIndex: number;\n\n  /**\n   * Annotae with @Prop() decorator\n   */\n  locale?: string;\n}\n"]}

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

@@ -34,6 +34,14 @@
  * 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 */
@@ -41,7 +49,7 @@
   /* Handle on hover */
   display: block;
   position: relative;
-  width: 22rem;
+  width: 21rem;
 }
 :host *,
 :host *::after,
@@ -150,7 +158,7 @@
 }
 :host .grid {
   display: grid;
-  grid-template-columns: repeat(8, 40px);
+  grid-template-columns: 24px repeat(7, 40px);
   grid-template-rows: repeat(7, 40px);
   align-items: center;
   justify-items: center;
@@ -168,9 +176,18 @@
   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);
@@ -271,6 +288,11 @@
   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;
@@ -283,18 +305,12 @@
   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;
+  width: 1.5rem;
 }
 :host .button {
   display: flex;
   justify-content: flex-end;
+  margin-top: 1rem;
 }
 :host .hidden {
   display: none;

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

@@ -19,17 +19,25 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { Fragment, h, Host, } from "@stencil/core";
 import { DateTime, Info } from "luxon";
 import { OnListener } from "../utils/listener";
+import { makeRef } from "../utils/make-ref";
+import { iconChevronLeftSmall, iconChevronRightSmall, iconSingleCheck, } from "@siemens/ix-icons/icons";
 export class DatePicker {
     constructor() {
+        this.dropdownButtonRef = makeRef();
+        this.yearContainerRef = makeRef();
+        this.firstMonthRef = makeRef();
+        this.isDayFocus = false;
+        this.monthChangedFromFocus = false;
         this.DAYS_IN_WEEK = 7;
+        this.calendar = [];
         this.format = 'yyyy/LL/dd';
         this.range = true;
         this.corners = 'rounded';
         this.from = undefined;
         this.to = undefined;
-        this.minDate = undefined;
-        this.maxDate = undefined;
-        this.textSelectDate = undefined;
+        this.minDate = '';
+        this.maxDate = '';
+        this.textSelectDate = '';
         this.i18nDone = 'Done';
         this.weekStartIndex = 0;
         this.locale = undefined;
@@ -39,19 +47,15 @@ export class DatePicker {
         this.today = DateTime.now().toISO();
         this.currFromDate = undefined;
         this.currToDate = undefined;
-        this.selectedYear = undefined;
-        this.tempYear = undefined;
-        this.startYear = undefined;
-        this.endYear = undefined;
-        this.selectedMonth = undefined;
-        this.tempMonth = undefined;
-        this.dropdownButtonRef = undefined;
-        this.yearContainerRef = undefined;
+        this.selectedYear = 0;
+        this.tempYear = 0;
+        this.startYear = 0;
+        this.endYear = 0;
+        this.selectedMonth = 0;
+        this.tempMonth = 0;
         this.dayNames = undefined;
         this.monthNames = undefined;
-        this.firstMonthRef = undefined;
         this.focusedDay = 1;
-        this.focusedDayElem = undefined;
     }
     watchFromPropHandler(newValue) {
         var _a;
@@ -132,7 +136,7 @@ export class DatePicker {
         this.focusedDay = _focusedDay;
     }
     getDaysInCurrentMonth() {
-        return DateTime.utc(this.selectedYear, this.selectedMonth + 1).daysInMonth;
+        return (DateTime.utc(this.selectedYear, this.selectedMonth + 1).daysInMonth || 0);
     }
     getDateTimeNow() {
         return DateTime.fromISO(this.today);
@@ -195,6 +199,7 @@ export class DatePicker {
     }
     async onDone() {
         const date = await this.getCurrentDate();
+        // TODO (IX-1870): refactor event signatures to match internal logic with undefined values
         this.dateSelect.emit(date);
     }
     calculateCalendar() {
@@ -271,33 +276,41 @@ export class DatePicker {
         this.tempYear = year;
     }
     focusMonth() {
-        this.firstMonthRef.focus();
+        var _a;
+        (_a = this.firstMonthRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }
     infiniteScrollYears() {
-        const scroll = this.yearContainerRef.scrollTop;
-        const maxScroll = this.yearContainerRef.scrollHeight;
+        const yearContainer = this.yearContainerRef.current;
+        if (!yearContainer) {
+            return;
+        }
+        const scroll = yearContainer.scrollTop;
+        const maxScroll = yearContainer.scrollHeight;
         const atTop = scroll === 0;
-        const atBottom = Math.round(scroll + this.yearContainerRef.offsetHeight) >= maxScroll;
+        const atBottom = Math.round(scroll + yearContainer.offsetHeight) >= maxScroll;
         const limit = 200;
         if (this.endYear - this.startYear > limit)
             return;
         if (atTop) {
-            const first = this.yearContainerRef.firstElementChild;
+            const first = yearContainer.firstElementChild;
             this.startYear -= 5;
-            this.yearContainerRef.scrollTo(0, first.offsetTop);
+            yearContainer.scrollTo(0, first.offsetTop);
             return;
         }
         if (atBottom) {
-            const last = this.yearContainerRef.lastElementChild;
+            const last = yearContainer.lastElementChild;
             this.endYear += 5;
-            this.yearContainerRef.scrollTo(0, last.offsetTop);
+            yearContainer.scrollTo(0, last.offsetTop);
         }
     }
     selectMonth(month) {
         this.selectedMonth = month;
         this.selectedYear = this.tempYear;
         this.tempMonth = month;
-        this.hostElement.shadowRoot.querySelector('ix-dropdown').show = false;
+        const dropdown = this.hostElement.shadowRoot.querySelector('ix-dropdown');
+        if (dropdown) {
+            dropdown.show = false;
+        }
     }
     changeToAdjacentMonth(number) {
         if (this.selectedMonth + number < 0) {
@@ -312,7 +325,10 @@ export class DatePicker {
             this.selectedMonth += number;
         }
     }
-    selectDay(selectedDay) {
+    selectDay(selectedDay, target) {
+        if (target.classList.contains('disabled')) {
+            return;
+        }
         const date = DateTime.fromJSDate(new Date(this.selectedYear, this.selectedMonth, selectedDay));
         if (!this.range || this.currFromDate === undefined) {
             this.currFromDate = date;
@@ -339,17 +355,16 @@ export class DatePicker {
     }
     onDateChange() {
         this.getCurrentDate().then((date) => {
+            // TODO (IX-1870): refactor event signatures to match internal logic with undefined values
             this.dateChange.emit(date);
             if (this.range) {
+                // TODO (IX-1870): refactor event signatures to match internal logic with undefined values
                 this.dateRangeChange.emit(date);
             }
         });
     }
     getDayClasses(day) {
-        var _a, _b, _c, _d;
-        if (!day) {
-            return;
-        }
+        var _a, _b, _c;
         const todayObj = this.getDateTimeNow();
         const selectedDayObj = DateTime.fromJSDate(new Date(this.selectedYear, this.selectedMonth, day));
         return {
@@ -358,9 +373,10 @@ export class DatePicker {
             today: todayObj.hasSame(selectedDayObj, 'day'),
             selected: ((_a = this.currFromDate) === null || _a === void 0 ? void 0 : _a.hasSame(selectedDayObj, 'day')) ||
                 ((_b = this.currToDate) === null || _b === void 0 ? void 0 : _b.hasSame(selectedDayObj, 'day')),
-            range: selectedDayObj.startOf('day') > ((_c = this.currFromDate) === null || _c === void 0 ? void 0 : _c.startOf('day')) &&
+            range: this.currFromDate &&
+                selectedDayObj.startOf('day') > this.currFromDate.startOf('day') &&
                 this.currToDate !== undefined &&
-                selectedDayObj.startOf('day') < ((_d = this.currToDate) === null || _d === void 0 ? void 0 : _d.startOf('day')),
+                selectedDayObj.startOf('day') < ((_c = this.currToDate) === null || _c === void 0 ? void 0 : _c.startOf('day')),
             disabled: !this.isWithinMinMaxDate(selectedDayObj),
         };
     }
@@ -416,20 +432,20 @@ export class DatePicker {
                     'disabled-item': !this.isWithinMinMaxYear(year),
                 }, onClick: (event) => this.selectTempYear(event, year), onKeyUp: (event) => {
                     if (event.key === 'Enter') {
-                        this.selectTempYear(null, year);
+                        this.tempYear = year;
                         this.focusMonth();
                     }
                 }, tabIndex: 0 }, h("ix-icon", { class: {
                     hidden: this.tempYear !== year,
                     arrowPosition: true,
-                }, name: "chevron-right", size: "12" }), h("div", { style: { 'min-width': 'max-content' } }, `${year}`)));
+                }, name: iconChevronRightSmall, size: "12" }), h("div", { style: { 'min-width': 'max-content' } }, `${year}`)));
         }
         return rows;
     }
     render() {
-        return (h(Host, { key: '559881c8673da97e842398f4bcfe67ef5ff27794' }, h("ix-date-time-card", { key: '4550d5f5a242be0ff07110cc400ef12795475c5c', corners: this.corners, standaloneAppearance: this.standaloneAppearance }, h("div", { key: 'f10ccab02142ae7461ac4b4ba4e8a8eb57123438', class: "header", slot: "header" }, h("ix-icon-button", { key: '52b171c5e04a5bbcb0832f0e6033947735521601', onClick: () => this.changeToAdjacentMonth(-1), ghost: true, icon: "chevron-left", variant: "primary", class: "arrows" }), h("div", { key: 'c48d51b3f22c9862c8006520530559ed44d16372', class: "selector" }, h("ix-button", { key: '8c155fcbafb7c3f32dab3c9ebc912153813ce207', ghost: true, ref: (ref) => (this.dropdownButtonRef = ref), "data-testid": "year-month-button" }, h("span", { key: '74c9634e13886d26238b4ee2262314914b1e8cf8', class: "fontSize capitalize" }, this.monthNames[this.selectedMonth], " ", this.selectedYear)), h("ix-dropdown", { key: 'ba249019d78a59e65f3a479a3ea8315b5990bcac', "data-testid": "year-month-dropdown", class: "dropdown", trigger: this.dropdownButtonRef, ignoreRelatedSubmenu: true, placement: "bottom-start" }, h("div", { key: '39365087bbb4c4dd4e0329828f61a90a1247b744', class: "wrapper" }, h("div", { key: '017d16a032a473b0e791c8dc342b5e62481212e3', "data-testid": "year-container", class: "overflow", onScroll: () => this.infiniteScrollYears(), ref: (ref) => (this.yearContainerRef = ref) }, this.renderYears()), h("div", { key: '1bef58292da8545924f53fdbeddbc864936a56ef', class: "overflow", "data-testid": "month-container" }, this.monthNames.map((month, index) => (h("div", { key: month, ref: (ref) => {
+        return (h(Host, { key: '238c08c47cda55cd5719af6bb0dd88b15cdd6a0b' }, h("ix-date-time-card", { key: 'ce2cf5f01d5b97cffbf56be5034f1b28f65be31e', corners: this.corners, standaloneAppearance: this.standaloneAppearance }, h("div", { key: 'cdfd57fae1b96face3d41ec167fca76a94ad639d', class: "header", slot: "header" }, h("ix-icon-button", { key: '2f0fe29c971d7b25259d91aadbeec9bfa12128bb', onClick: () => this.changeToAdjacentMonth(-1), ghost: true, icon: iconChevronLeftSmall, variant: "primary", class: "arrows" }), h("div", { key: '19e2fd6622c3079f8830ab364847342fe22fe534', class: "selector" }, h("ix-button", { key: 'b967de770c789884c84c166dce0a33cb68490807', ghost: true, ref: this.dropdownButtonRef, "data-testid": "year-month-button" }, h("span", { key: '2e137239fa8b48396a2f77753b07c4dd821784e7', class: "fontSize capitalize" }, this.monthNames[this.selectedMonth], " ", this.selectedYear)), h("ix-dropdown", { key: '4e41ef26fe89e2436746b887b4c4a3637235fb1e', "data-testid": "year-month-dropdown", class: "dropdown", trigger: this.dropdownButtonRef.waitForCurrent(), ignoreRelatedSubmenu: true, placement: "bottom-start" }, h("div", { key: 'd22832a957d2c144734204426f82f96c633d2c3c', class: "wrapper" }, h("div", { key: '8f5b66c3951b6adf1171cf504a71278a71abfb75', "data-testid": "year-container", class: "overflow", onScroll: () => this.infiniteScrollYears(), ref: this.yearContainerRef }, this.renderYears()), h("div", { key: '3de4460f49c49cfeadf92436928cfce5865ec524', class: "overflow", "data-testid": "month-container" }, this.monthNames.map((month, index) => (h("div", { key: month, ref: (ref) => {
                 if (month === this.monthNames[0]) {
-                    this.firstMonthRef = ref;
+                    this.firstMonthRef(ref);
                 }
             }, class: {
                 arrowYear: true,
@@ -441,12 +457,22 @@ export class DatePicker {
                 hidden: this.tempYear !== this.selectedYear ||
                     this.tempMonth !== index,
                 checkPosition: true,
-            }, name: "single-check", size: "16" }), h("div", null, h("span", { class: "capitalize monthMargin" }, `${month} ${this.tempYear}`))))))))), h("ix-icon-button", { key: 'f414faea937a05dd2690e82d01daf1f444fbce25', onClick: () => this.changeToAdjacentMonth(1), ghost: true, icon: "chevron-right", variant: "primary", class: "arrows" })), h("div", { key: 'b79a961fbfc8c8dd821a83ab172dd7146acc5ade', class: "grid" }, h("div", { key: '7651643c6320b8598b52ffaa45dc70498854d1ad', class: "calendar-item week-day" }), this.dayNames.map((name) => (h("div", { key: name, class: "calendar-item week-day" }, name.slice(0, 3)))), this.calendar.map((week) => {
-            return (h(Fragment, null, h("div", { class: "calendar-item week-number" }, week.weekNumber), week.dayNumbers.map((day) => (h("div", { key: day, id: `day-cell-${day}`, "date-calender-day": true, class: this.getDayClasses(day), onClick: () => this.selectDay(day), onKeyUp: (e) => e.key === 'Enter' && this.selectDay(day), tabIndex: day === this.focusedDay ? 0 : -1, onFocus: () => this.onDayFocus(), onBlur: () => this.onDayBlur() }, day)))));
-        })), h("div", { key: '0e6b9845bfdb760777cbd0f2f8419aeb5b667799', class: {
+            }, name: iconSingleCheck, size: "16" }), h("div", null, h("span", { class: "capitalize monthMargin" }, `${month} ${this.tempYear}`))))))))), h("ix-icon-button", { key: 'e784d17edc322d7c9f3a08935b39310f03570f01', onClick: () => this.changeToAdjacentMonth(1), ghost: true, icon: iconChevronRightSmall, variant: "primary", class: "arrows" })), h("div", { key: '03e2298da73e89bad67385c3606bd9379ba6023e', class: "grid" }, h("div", { key: '92e401cc859da4ee6b48d003622f201337396e63', class: "calendar-item week-day" }), this.dayNames.map((name) => (h("div", { key: name, class: "calendar-item week-day" }, h("div", { class: "overflow" }, name.slice(0, 3))))), this.calendar.map((week) => {
+            return (h(Fragment, null, h("div", { class: "calendar-item week-number" }, week.weekNumber), week.dayNumbers.map((day) => {
+                return day ? (h("div", { key: day, id: `day-cell-${day}`, "date-calender-day": true, class: this.getDayClasses(day), onClick: (e) => {
+                        const target = e.currentTarget;
+                        this.selectDay(day, target);
+                    }, onKeyUp: (e) => {
+                        const target = e.currentTarget;
+                        if (e.key === 'Enter') {
+                            this.selectDay(day, target);
+                        }
+                    }, tabIndex: day === this.focusedDay ? 0 : -1, onFocus: () => this.onDayFocus(), onBlur: () => this.onDayBlur() }, day)) : (h("div", null));
+            })));
+        })), h("div", { key: '4a372c1b81f373bd7d7587f7bd3b9833331f5180', class: {
                 button: true,
                 hidden: !this.range || !this.standaloneAppearance,
-            } }, h("ix-button", { key: 'bb02236b3e41f3168aa2d5aad2c8e4aa9af90a49', onClick: () => this.onDone() }, this.textSelectDate || this.i18nDone)))));
+            } }, h("ix-button", { key: 'df8e87595933516e5348233dea8861f5a4da0541', onClick: () => this.onDone() }, this.textSelectDate || this.i18nDone)))));
     }
     static get is() { return "ix-date-picker"; }
     static get encapsulation() { return "shadow"; }
@@ -580,7 +606,8 @@ export class DatePicker {
                     "text": "The earliest date that can be selected by the date picker.\nIf not set there will be no restriction."
                 },
                 "attribute": "min-date",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "''"
             },
             "maxDate": {
                 "type": "string",
@@ -600,7 +627,8 @@ export class DatePicker {
                     "text": "The latest date that can be selected by the date picker.\nIf not set there will be no restriction."
                 },
                 "attribute": "max-date",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "''"
             },
             "textSelectDate": {
                 "type": "string",
@@ -623,7 +651,8 @@ export class DatePicker {
                     "text": "Text of the button that confirms date selection."
                 },
                 "attribute": "text-select-date",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "''"
             },
             "i18nDone": {
                 "type": "string",
@@ -676,17 +705,16 @@ export class DatePicker {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [{
                             "name": "since",
                             "text": "2.1.0"
                         }],
-                    "text": "Format of time string\nSee {@link \"https://moment.github.io/luxon/#/formatting?id=table-of-tokens\"} for all available tokens."
+                    "text": "Locale identifier (e.g. 'en' or 'de')."
                 },
                 "attribute": "locale",
-                "reflect": false,
-                "defaultValue": "undefined"
+                "reflect": false
             },
             "individual": {
                 "type": "boolean",
@@ -787,13 +815,9 @@ export class DatePicker {
             "endYear": {},
             "selectedMonth": {},
             "tempMonth": {},
-            "dropdownButtonRef": {},
-            "yearContainerRef": {},
             "dayNames": {},
             "monthNames": {},
-            "firstMonthRef": {},
-            "focusedDay": {},
-            "focusedDayElem": {}
+            "focusedDay": {}
         };
     }
     static get events() {