@siemens/ix 0.0.0-pr-2155-20250924075220 → 0.0.0-pr-2166-20251001083917

package/dist/cjs/ix-date-dropdown.entry.cjs.js.map

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

package/dist/cjs/ix-date-input.cjs.entry.js

@@ -253,10 +253,10 @@ const DateInput = class {
                 readonly: this.readonly,
             } }, index.h("ix-field-wrapper", { key: '73aa5675f617a35479465eacc2959391f57e78e9', label: this.label, helperText: this.helperText, isInvalid: this.isInvalid, invalidText: invalidText, infoText: this.infoText, isInfo: this.isInfo, isWarning: this.isWarning, warningText: this.warningText, isValid: this.isValid, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, required: this.required, controlRef: this.inputElementRef }, this.renderInput()), index.h("ix-dropdown", { key: '6b219ac0027370f8c140feb9c438750259f93ef8', "data-testid": "date-dropdown", trigger: this.inputElementRef.waitForCurrent(), ref: this.dropdownElementRef, closeBehavior: "outside", suppressOverflowBehavior: true, show: this.show, onShowChanged: (event) => {
                 this.show = event.detail;
-            } }, index.h("ix-date-picker", { key: '91dc533bd42ce5f118c73f0ea8641dd7098e082d', ref: this.datepickerRef, format: this.format, locale: this.locale, range: false, from: (_a = this.from) !== null && _a !== void 0 ? _a : '', minDate: this.minDate, maxDate: this.maxDate, onDateChange: (event) => {
+            } }, index.h("ix-date-picker", { key: '17919c46d19510dbf091683c3d5de81f0bbbb591', ref: this.datepickerRef, format: this.format, locale: this.locale, singleSelection: true, from: (_a = this.from) !== null && _a !== void 0 ? _a : '', minDate: this.minDate, maxDate: this.maxDate, onDateChange: (event) => {
                 const { from } = event.detail;
                 this.onInput(from);
-            }, showWeekNumbers: this.showWeekNumbers, ariaLabelNextMonthButton: this.ariaLabelNextMonthButton, ariaLabelPreviousMonthButton: this.ariaLabelPreviousMonthButton, standaloneAppearance: false }))));
+            }, showWeekNumbers: this.showWeekNumbers, ariaLabelNextMonthButton: this.ariaLabelNextMonthButton, ariaLabelPreviousMonthButton: this.ariaLabelPreviousMonthButton, embedded: true }))));
     }
     static get formAssociated() { return true; }
     get hostElement() { return index.getElement(this); }

package/dist/cjs/ix-date-input.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ix-date-input.entry.cjs.js","sources":["src/components/date-input/date-input.scss?tag=ix-date-input&encapsulation=shadow","src/components/date-input/date-input.tsx"],"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@use 'mixins/shadow-dom/component';\n@use 'mixins/input';\n@use './../input/input.mixins.scss' as input-mixins;\n\n@include input-mixins.input-field;\n\n:host {\n  display: inline-block;\n  position: relative;\n\n  @include component.ix-component;\n\n  input {\n    width: 100%;\n    height: 100%;\n  }\n\n  .calendar-hidden {\n    display: none;\n  }\n}\n\n:host(.readonly) {\n  input {\n    pointer-events: none;\n  }\n}\n","/*\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 { 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';\nimport type { DateInputValidityState } from './date-input.types';\nimport {\n  closeDropdown as closeDropdownUtil,\n  createValidityState,\n  handleIconClick,\n  openDropdown as openDropdownUtil,\n} from '../utils/input/picker-input.util';\n\n/**\n * @form-ready\n *\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  @Watch('value') watchValuePropHandler(newValue: string) {\n    this.onInput(newValue);\n  }\n\n  /**\n   * The earliest date that can be selected by the date input/picker.\n   * If not set there will be no restriction.\n   */\n  @Prop() minDate = '';\n\n  /**\n   * The latest date that can be selected by the date input/picker.\n   * If not set there will be no restriction.\n   */\n  @Prop() maxDate = '';\n\n  /**\n   * Locale identifier (e.g. 'en' or 'de').\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   * ARIA label for the calendar icon button\n   * Will be set as aria-label on the nested HTML button element\n   *\n   * @since 3.2.0\n   */\n  @Prop() ariaLabelCalendarButton?: 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   * The index of which day to start the week on, based on the Locale#weekdays array.\n   * E.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on monday.\n   */\n  @Prop() weekStartIndex = 0;\n\n  /**\n   * ARIA label for the previous month icon button\n   * Will be set as aria-label on the nested HTML button element\n   */\n  @Prop() ariaLabelPreviousMonthButton?: string;\n\n  /**\n   * ARIA label for the next month icon button\n   * Will be set as aria-label on the nested HTML button element\n   */\n  @Prop() ariaLabelNextMonthButton?: string;\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    if (value) {\n      this.formInternals.setFormValue(value);\n    } else {\n      this.formInternals.setFormValue(null);\n    }\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    const minDate = DateTime.fromFormat(this.minDate, this.format);\n    const maxDate = DateTime.fromFormat(this.maxDate, this.format);\n\n    this.isInputInvalid = !date.isValid || date < minDate || date > maxDate;\n\n    if (this.isInputInvalid) {\n      this.invalidReason = date.invalidReason || undefined;\n      this.from = undefined;\n    } else {\n      this.updateFormInternalValue(value);\n      this.closeDropdown();\n    }\n\n    this.valueChange.emit(value);\n  }\n\n  onCalenderClick(event: Event) {\n    handleIconClick(\n      event,\n      this.show,\n      () => this.openDropdown(),\n      this.inputElementRef\n    );\n  }\n\n  async openDropdown() {\n    return openDropdownUtil(this.dropdownElementRef);\n  }\n\n  async closeDropdown() {\n    return closeDropdownUtil(this.dropdownElementRef);\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          placeholder={this.placeholder}\n          name={this.name}\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            variant=\"subtle-tertiary\"\n            icon={iconCalendar}\n            onClick={(event) => this.onCalenderClick(event)}\n            aria-label={this.ariaLabelCalendarButton}\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      createValidityState(this.isInputInvalid, !!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            minDate={this.minDate}\n            maxDate={this.maxDate}\n            onDateChange={(event) => {\n              const { from } = event.detail;\n              this.onInput(from);\n            }}\n            showWeekNumbers={this.showWeekNumbers}\n            ariaLabelNextMonthButton={this.ariaLabelNextMonthButton}\n            ariaLabelPreviousMonthButton={this.ariaLabelPreviousMonthButton}\n            standaloneAppearance={false}\n          ></ix-date-picker>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"names":["makeRef","createClassMutationObserver","addDisposableChangesAndVisibilityObservers","adjustPaddingForStartAndEnd","DateTime","handleIconClick","openDropdownUtil","closeDropdownUtil","h","SlotStart","SlotEnd","iconCalendar","createValidityState","Host","HookValidationLifecycle"],"mappings":"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"}
+{"version":3,"file":"ix-date-input.entry.cjs.js","sources":["src/components/date-input/date-input.scss?tag=ix-date-input&encapsulation=shadow","src/components/date-input/date-input.tsx"],"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@use 'mixins/shadow-dom/component';\n@use 'mixins/input';\n@use './../input/input.mixins.scss' as input-mixins;\n\n@include input-mixins.input-field;\n\n:host {\n  display: inline-block;\n  position: relative;\n\n  @include component.ix-component;\n\n  input {\n    width: 100%;\n    height: 100%;\n  }\n\n  .calendar-hidden {\n    display: none;\n  }\n}\n\n:host(.readonly) {\n  input {\n    pointer-events: none;\n  }\n}\n","/*\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 { 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';\nimport type { DateInputValidityState } from './date-input.types';\nimport {\n  closeDropdown as closeDropdownUtil,\n  createValidityState,\n  handleIconClick,\n  openDropdown as openDropdownUtil,\n} from '../utils/input/picker-input.util';\n\n/**\n * @form-ready\n *\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  @Watch('value') watchValuePropHandler(newValue: string) {\n    this.onInput(newValue);\n  }\n\n  /**\n   * The earliest date that can be selected by the date input/picker.\n   * If not set there will be no restriction.\n   */\n  @Prop() minDate = '';\n\n  /**\n   * The latest date that can be selected by the date input/picker.\n   * If not set there will be no restriction.\n   */\n  @Prop() maxDate = '';\n\n  /**\n   * Locale identifier (e.g. 'en' or 'de').\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   * ARIA label for the calendar icon button\n   * Will be set as aria-label on the nested HTML button element\n   *\n   * @since 3.2.0\n   */\n  @Prop() ariaLabelCalendarButton?: 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   * The index of which day to start the week on, based on the Locale#weekdays array.\n   * E.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on monday.\n   */\n  @Prop() weekStartIndex = 0;\n\n  /**\n   * ARIA label for the previous month icon button\n   * Will be set as aria-label on the nested HTML button element\n   */\n  @Prop() ariaLabelPreviousMonthButton?: string;\n\n  /**\n   * ARIA label for the next month icon button\n   * Will be set as aria-label on the nested HTML button element\n   */\n  @Prop() ariaLabelNextMonthButton?: string;\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    if (value) {\n      this.formInternals.setFormValue(value);\n    } else {\n      this.formInternals.setFormValue(null);\n    }\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    const minDate = DateTime.fromFormat(this.minDate, this.format);\n    const maxDate = DateTime.fromFormat(this.maxDate, this.format);\n\n    this.isInputInvalid = !date.isValid || date < minDate || date > maxDate;\n\n    if (this.isInputInvalid) {\n      this.invalidReason = date.invalidReason || undefined;\n      this.from = undefined;\n    } else {\n      this.updateFormInternalValue(value);\n      this.closeDropdown();\n    }\n\n    this.valueChange.emit(value);\n  }\n\n  onCalenderClick(event: Event) {\n    handleIconClick(\n      event,\n      this.show,\n      () => this.openDropdown(),\n      this.inputElementRef\n    );\n  }\n\n  async openDropdown() {\n    return openDropdownUtil(this.dropdownElementRef);\n  }\n\n  async closeDropdown() {\n    return closeDropdownUtil(this.dropdownElementRef);\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          placeholder={this.placeholder}\n          name={this.name}\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            variant=\"subtle-tertiary\"\n            icon={iconCalendar}\n            onClick={(event) => this.onCalenderClick(event)}\n            aria-label={this.ariaLabelCalendarButton}\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      createValidityState(this.isInputInvalid, !!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            singleSelection\n            from={this.from ?? ''}\n            minDate={this.minDate}\n            maxDate={this.maxDate}\n            onDateChange={(event) => {\n              const { from } = event.detail;\n              this.onInput(from);\n            }}\n            showWeekNumbers={this.showWeekNumbers}\n            ariaLabelNextMonthButton={this.ariaLabelNextMonthButton}\n            ariaLabelPreviousMonthButton={this.ariaLabelPreviousMonthButton}\n            embedded\n          ></ix-date-picker>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"names":["makeRef","createClassMutationObserver","addDisposableChangesAndVisibilityObservers","adjustPaddingForStartAndEnd","DateTime","handleIconClick","openDropdownUtil","closeDropdownUtil","h","SlotStart","SlotEnd","iconCalendar","createValidityState","Host","HookValidationLifecycle"],"mappings":"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"}

package/dist/cjs/ix-date-time-card.cjs.entry.js

@@ -17,20 +17,15 @@ const DateTimeCard = class {
          * Display footer
          */
         this.hasFooter = false;
-        /**
-         * set styles
-         */
-        this.individual = true;
         /**
          * Set corners style
          */
         this.corners = 'rounded';
     }
     cardClasses() {
-        var _a;
         return {
             card: true,
-            standaloneAppearance: (_a = this.standaloneAppearance) !== null && _a !== void 0 ? _a : this.individual,
+            standaloneAppearance: this.embedded === false,
             rounded: this.corners === 'rounded',
             left: this.corners === 'left',
             right: this.corners === 'right',
@@ -38,10 +33,10 @@ const DateTimeCard = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '1917611940e9015bd69c54a4d727490e32c6296a' }, index.h("div", { key: 'd962cf1ab891fb257bdef627c19bf5265ac7ad06', class: this.cardClasses() }, !this.hideHeader && (index.h("div", { key: '97ede2ac6f96e0802cd47deaa2ac19a6ffbb5d9c', class: "header-container" }, index.h("div", { key: '14dc85b4c1141543db4069245981712e4ddc6632', class: "header" }, index.h("slot", { key: '2f1656c886787682ed7b6c6cc340476664f61cee', name: "header" })), index.h("div", { key: '6e5931822bd606f3c5851528ba2a61dde147eabc', class: "separator" }))), index.h("div", { key: '1c90b793333c65471f03a8201206968b7f9e754c', class: {
+        return (index.h(index.Host, { key: '0429648eb4c31bde407975b519809a5a6fd8043a' }, index.h("div", { key: '21434d00d886949b32554468fdca445b2b5cf76f', class: this.cardClasses() }, !this.hideHeader && (index.h("div", { key: '7ef2b75a31b0e75646010e7f02a8dc338117d627', class: "header-container" }, index.h("div", { key: 'bb3e80cbc6b1c9b5c9171638726074122cd91908', class: "header" }, index.h("slot", { key: '6ae65febb1ee7862df7dcc781fa68286bd0b7d5e', name: "header" })), index.h("div", { key: 'd4d63d904222fbc638a04ee16e11ceea03f03e0e', class: "separator" }))), index.h("div", { key: '0f299d9c0743f2b9e0c9f7a0e2504e51471d4475', class: {
                 content: true,
                 'content--time-picker': this.timePickerAppearance,
-            } }, index.h("slot", { key: '9048c1df91da871f53bc050a83c50ccdc94cbaf4' })), this.hasFooter && (index.h("div", { key: 'e3dcb1d1dc3aaaef5e7fca2456dd8fa84d0d5b05', class: "footer-container" }, index.h("div", { key: '6f1433df5e0a8fcc4ecc5b49312e84ace6c25a2c', class: "separator" }), index.h("div", { key: 'fa7fd4952aeb197504dd660857846c7d50146ebe', class: "footer" }, index.h("slot", { key: '0493e93bf1fc30281bfe9e1e0fdc051d68edba61', name: "footer" })))))));
+            } }, index.h("slot", { key: '6c955414005a3d9e004f1f69ded181f60f59dee5' })), this.hasFooter && (index.h("div", { key: '09348617c1986599e342b209518727bd65976078', class: "footer-container" }, index.h("div", { key: 'c3b84578c1acf0f8c9f01dcf8b9ec30364408a89', class: "separator" }), index.h("div", { key: '2cd97f773f26fb1e48fa4f5bf459c3531379b22b', class: "footer" }, index.h("slot", { key: 'f079e60d93d18c34030ff23f0d8f2043b9a2d85e', name: "footer" })))))));
     }
 };
 DateTimeCard.style = dateTimeCardCss;

package/dist/cjs/ix-date-time-card.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ix-date-time-card.entry.cjs.js","sources":["src/components/date-time-card/date-time-card.scss?tag=ix-date-time-card&encapsulation=shadow","src/components/date-time-card/date-time-card.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@use './common-variables' as vars;\n@use 'mixins/shadow-dom/component';\n\n:host {\n  @include component.ix-component;\n\n  .card {\n    background-color: var(--theme-menu--background);\n    width: 100%;\n    box-shadow: none;\n    border: none;\n    border-radius: unset;\n    display: flex;\n    flex-direction: column;\n\n    &.standaloneAppearance {\n      box-shadow: var(--theme-shadow-4);\n      border-radius: 0.25rem;\n    }\n\n    &.rounded {\n      border-radius: 4px;\n    }\n\n    &.left {\n      border-radius: 4px 0 0 4px;\n      height: 100%;\n    }\n\n    &.right {\n      border-radius: 0 4px 4px 0;\n      height: 100%;\n    }\n\n    &.straight {\n      border-radius: 0;\n    }\n\n    .header-container {\n      width: 100%;\n\n      .header {\n        padding: vars.$default-space;\n        flex: 0 1 auto;\n      }\n    }\n\n    .separator {\n      border: 1px solid var(--theme-datepicker-separator--background);\n      width: 100%;\n      flex: 0 1 auto;\n    }\n\n    .content {\n      padding: 0 vars.$default-space vars.$default-space vars.$default-space;\n      flex: 1 1 auto;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n\n      &--time-picker {\n        padding: 0 vars.$default-space;\n      }\n    }\n\n    .footer-container {\n      width: 100%;\n\n      .footer {\n        padding: vars.$default-space;\n      }\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\nimport type { DateTimeCardCorners } from './date-time-card.types';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'ix-date-time-card',\n  styleUrl: 'date-time-card.scss',\n  shadow: true,\n})\nexport class DateTimeCard {\n  /** @internal */\n  @Prop() standaloneAppearance?: boolean;\n\n  /** Timepicker specific styling */\n  @Prop() timePickerAppearance: boolean = false;\n\n  /**\n   * Hide header\n   */\n  @Prop() hideHeader: boolean = false;\n\n  /**\n   * Display footer\n   */\n  @Prop() hasFooter: boolean = false;\n\n  /**\n   * set styles\n   */\n  @Prop() individual: boolean = true;\n\n  /**\n   * Set corners style\n   */\n  @Prop() corners: DateTimeCardCorners = 'rounded';\n\n  private cardClasses() {\n    return {\n      card: true,\n      standaloneAppearance: this.standaloneAppearance ?? this.individual,\n      rounded: this.corners === 'rounded',\n      left: this.corners === 'left',\n      right: this.corners === 'right',\n      straight: this.corners === 'straight',\n    };\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.cardClasses()}>\n          {!this.hideHeader && (\n            <div class=\"header-container\">\n              <div class=\"header\">\n                <slot name=\"header\"></slot>\n              </div>\n              <div class=\"separator\"></div>\n            </div>\n          )}\n\n          <div\n            class={{\n              content: true,\n              'content--time-picker': this.timePickerAppearance,\n            }}\n          >\n            <slot></slot>\n          </div>\n\n          {this.hasFooter && (\n            <div class=\"footer-container\">\n              <div class=\"separator\"></div>\n              <div class=\"footer\">\n                <slot name=\"footer\"></slot>\n              </div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,eAAe,GAAG,6pDAA6pD;;MCoBxqD,YAAY,GAAA,MAAA;AALzB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAUU,QAAA,IAAoB,CAAA,oBAAA,GAAY,KAAK;AAE7C;;AAEG;AACK,QAAA,IAAU,CAAA,UAAA,GAAY,KAAK;AAEnC;;AAEG;AACK,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAElC;;AAEG;AACK,QAAA,IAAU,CAAA,UAAA,GAAY,IAAI;AAElC;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAwB,SAAS;AA+CjD;IA7CS,WAAW,GAAA;;QACjB,OAAO;AACL,YAAA,IAAI,EAAE,IAAI;YACV,oBAAoB,EAAE,MAAA,IAAI,CAAC,oBAAoB,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,IAAI,CAAC,UAAU;AAClE,YAAA,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;AACnC,YAAA,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;AAC7B,YAAA,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;AAC/B,YAAA,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;SACtC;;IAGH,MAAM,GAAA;QACJ,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,EAAA,EAC3B,CAAC,IAAI,CAAC,UAAU,KACfA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3BA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACjBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAQ,CACvB,EACNA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,CAAO,CACzB,CACP,EAEDA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,OAAO,EAAE,IAAI;gBACb,sBAAsB,EAAE,IAAI,CAAC,oBAAoB;AAClD,aAAA,EAAA,EAEDA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EAEL,IAAI,CAAC,SAAS,KACbA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3BA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAO,CAAA,EAC7BA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACjBA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAQ,CAAA,CACvB,CACF,CACP,CACG,CACD;;;;;;;"}
+{"version":3,"file":"ix-date-time-card.entry.cjs.js","sources":["src/components/date-time-card/date-time-card.scss?tag=ix-date-time-card&encapsulation=shadow","src/components/date-time-card/date-time-card.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@use './common-variables' as vars;\n@use 'mixins/shadow-dom/component';\n\n:host {\n  @include component.ix-component;\n\n  .card {\n    background-color: var(--theme-menu--background);\n    width: 100%;\n    box-shadow: none;\n    border: none;\n    border-radius: unset;\n    display: flex;\n    flex-direction: column;\n\n    &.standaloneAppearance {\n      box-shadow: var(--theme-shadow-4);\n      border-radius: 0.25rem;\n    }\n\n    &.rounded {\n      border-radius: 4px;\n    }\n\n    &.left {\n      border-radius: 4px 0 0 4px;\n      height: 100%;\n    }\n\n    &.right {\n      border-radius: 0 4px 4px 0;\n      height: 100%;\n    }\n\n    &.straight {\n      border-radius: 0;\n    }\n\n    .header-container {\n      width: 100%;\n\n      .header {\n        padding: vars.$default-space;\n        flex: 0 1 auto;\n      }\n    }\n\n    .separator {\n      border: 1px solid var(--theme-datepicker-separator--background);\n      width: 100%;\n      flex: 0 1 auto;\n    }\n\n    .content {\n      padding: 0 vars.$default-space vars.$default-space vars.$default-space;\n      flex: 1 1 auto;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n\n      &--time-picker {\n        padding: 0 vars.$default-space;\n      }\n    }\n\n    .footer-container {\n      width: 100%;\n\n      .footer {\n        padding: vars.$default-space;\n      }\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\nimport type { DateTimeCardCorners } from './date-time-card.types';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'ix-date-time-card',\n  styleUrl: 'date-time-card.scss',\n  shadow: true,\n})\nexport class DateTimeCard {\n  /** @internal */\n  @Prop() embedded?: boolean;\n\n  /** Timepicker specific styling */\n  @Prop() timePickerAppearance: boolean = false;\n\n  /**\n   * Hide header\n   */\n  @Prop() hideHeader: boolean = false;\n\n  /**\n   * Display footer\n   */\n  @Prop() hasFooter: boolean = false;\n\n  /**\n   * Set corners style\n   */\n  @Prop() corners: DateTimeCardCorners = 'rounded';\n\n  private cardClasses() {\n    return {\n      card: true,\n      standaloneAppearance: this.embedded === false,\n      rounded: this.corners === 'rounded',\n      left: this.corners === 'left',\n      right: this.corners === 'right',\n      straight: this.corners === 'straight',\n    };\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.cardClasses()}>\n          {!this.hideHeader && (\n            <div class=\"header-container\">\n              <div class=\"header\">\n                <slot name=\"header\"></slot>\n              </div>\n              <div class=\"separator\"></div>\n            </div>\n          )}\n\n          <div\n            class={{\n              content: true,\n              'content--time-picker': this.timePickerAppearance,\n            }}\n          >\n            <slot></slot>\n          </div>\n\n          {this.hasFooter && (\n            <div class=\"footer-container\">\n              <div class=\"separator\"></div>\n              <div class=\"footer\">\n                <slot name=\"footer\"></slot>\n              </div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,eAAe,GAAG,6pDAA6pD;;MCoBxqD,YAAY,GAAA,MAAA;AALzB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAUU,QAAA,IAAoB,CAAA,oBAAA,GAAY,KAAK;AAE7C;;AAEG;AACK,QAAA,IAAU,CAAA,UAAA,GAAY,KAAK;AAEnC;;AAEG;AACK,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAElC;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAwB,SAAS;AA+CjD;IA7CS,WAAW,GAAA;QACjB,OAAO;AACL,YAAA,IAAI,EAAE,IAAI;AACV,YAAA,oBAAoB,EAAE,IAAI,CAAC,QAAQ,KAAK,KAAK;AAC7C,YAAA,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;AACnC,YAAA,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;AAC7B,YAAA,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;AAC/B,YAAA,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;SACtC;;IAGH,MAAM,GAAA;QACJ,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,EAAA,EAC3B,CAAC,IAAI,CAAC,UAAU,KACfA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3BA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACjBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAQ,CACvB,EACNA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,CAAO,CACzB,CACP,EAEDA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,OAAO,EAAE,IAAI;gBACb,sBAAsB,EAAE,IAAI,CAAC,oBAAoB;AAClD,aAAA,EAAA,EAEDA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EAEL,IAAI,CAAC,SAAS,KACbA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3BA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAO,CAAA,EAC7BA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACjBA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAQ,CAAA,CACvB,CACF,CACP,CACG,CACD;;;;;;;"}

package/dist/cjs/ix-datetime-picker.cjs.entry.js

@@ -11,27 +11,9 @@ const DatetimePicker = class {
         this.dateChange = index.createEvent(this, "dateChange", 7);
         this.dateSelect = index.createEvent(this, "dateSelect", 7);
         /**
-         * If true a date-range can be selected (from/to).
+         * If true disables date range selection (from/to).
          */
-        this.range = true;
-        /**
-         * Show hour input
-         *
-         * @deprecated This is now determined by the format that is used. Will be removed in 4.0.0
-         */
-        this.showHour = true;
-        /**
-         * Show minutes input
-         *
-         * @deprecated This is now determined by the format that is used. Will be removed in 4.0.0
-         */
-        this.showMinutes = true;
-        /**
-         * Show seconds input
-         *
-         * @deprecated This is now determined by the format that is used. Will be removed in 4.0.0
-         */
-        this.showSeconds = true;
+        this.singleSelection = false;
         /**
          * Date format string.
          * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
@@ -92,7 +74,7 @@ const DatetimePicker = class {
         this.timeChange.emit(time);
     }
     render() {
-        return (index.h(index.Host, { key: '7408c851c631afa9301eb16a65d78bc53a77bf60' }, index.h("ix-layout-grid", { key: 'c86f1491187cbcc7c01b5aa842c72288c3bca231', class: "no-padding" }, index.h("ix-row", { key: '69afe640442edecb18c4cb8f2c524d71cab7307a' }, index.h("ix-col", { key: 'b1403ebfc5ef9a081298189c5187b0e2d0a6beec' }, index.h("ix-date-picker", { key: 'd786dbed61b5fbc870fc858999c261c78206052b', ref: (ref) => (this.datePickerElement = ref), corners: "left", range: this.range, onDateChange: (event) => this.onDateChange(event), from: this.from, to: this.to, format: this.dateFormat, minDate: this.minDate, maxDate: this.maxDate, weekStartIndex: this.weekStartIndex, standaloneAppearance: false, locale: this.locale, showWeekNumbers: this.showWeekNumbers, ariaLabelPreviousMonthButton: this.ariaLabelPreviousMonthButton, ariaLabelNextMonthButton: this.ariaLabelNextMonthButton })), index.h("ix-col", { key: '1037acf5b98929f1b5aa23b156768ecdab99cfb2' }, index.h("ix-time-picker", { key: '29860441f04f7d05b55dc66d8889a14344cec983', class: "min-width", ref: (ref) => (this.timePickerElement = ref), standaloneAppearance: false, dateTimePickerAppearance: true, onTimeChange: (event) => this.onTimeChange(event), format: this.timeFormat, textTime: this.i18nTime, time: this.time, showHour: this.showHour, showMinutes: this.showMinutes, showSeconds: this.showSeconds }), index.h("div", { key: 'f4b6a5bd10e72b8720f3336c33454bbc8d09811b', class: "btn-select-date-container" }, index.h("ix-button", { key: 'ba1f32bc4649a9d44fbe6323c174796937826ce9', class: "btn-select-date", onClick: () => this.onDone() }, this.i18nDone)))))));
+        return (index.h(index.Host, { key: '91fb1dbd40b48c37c207de3f173e19ed72f3b6c3' }, index.h("ix-layout-grid", { key: '0a9fc8ae63d59ba14185a12d3eb126351f4f67c4', class: "no-padding" }, index.h("ix-row", { key: '31e56d9e8a7ca4a6afd5754f0caf28eb494d68cd' }, index.h("ix-col", { key: '1df4729e7703d4f48d19233774a8fead11b74553' }, index.h("ix-date-picker", { key: '80923eee970fc1c163a94986c109e13f09d3a606', ref: (ref) => (this.datePickerElement = ref), corners: "left", singleSelection: this.singleSelection, onDateChange: (event) => this.onDateChange(event), from: this.from, to: this.to, format: this.dateFormat, minDate: this.minDate, maxDate: this.maxDate, weekStartIndex: this.weekStartIndex, embedded: true, locale: this.locale, showWeekNumbers: this.showWeekNumbers, ariaLabelPreviousMonthButton: this.ariaLabelPreviousMonthButton, ariaLabelNextMonthButton: this.ariaLabelNextMonthButton })), index.h("ix-col", { key: 'd081455e2f00a9917e11902a70cb882a84e23615' }, index.h("ix-time-picker", { key: '4602c3ca1b899ec283aa9469ce5fcdf4ba4a70fc', class: "min-width", ref: (ref) => (this.timePickerElement = ref), embedded: true, dateTimePickerAppearance: true, onTimeChange: (event) => this.onTimeChange(event), format: this.timeFormat, time: this.time }), index.h("div", { key: '1329ef1e1af1b22de5f4754ee02452a4d1aabb6b', class: "btn-select-date-container" }, index.h("ix-button", { key: '01efc3c5d4f72bd74a670a267a28e864c3e643fe', class: "btn-select-date", onClick: () => this.onDone() }, this.i18nDone)))))));
     }
 };
 DatetimePicker.style = datetimePickerCss;

package/dist/cjs/ix-datetime-picker.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ix-datetime-picker.entry.cjs.js","sources":["src/components/datetime-picker/datetime-picker.scss?tag=ix-datetime-picker&encapsulation=shadow","src/components/datetime-picker/datetime-picker.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@use './common-variables' as vars;\n@use 'mixins/shadow-dom/component';\n\n:host {\n  display: block;\n  background-color: var(--theme-menu--background);\n  border-radius: 4px;\n  position: relative;\n  width: min-content;\n\n  @include component.ix-component;\n\n  ix-layout-grid {\n    border-radius: 0.25rem;\n    box-shadow: var(--theme-shadow-4);\n  }\n\n  ix-time-picker {\n    width: 100%;\n  }\n\n  .no-padding {\n    padding: 0;\n  }\n\n  ix-col {\n    display: flex;\n    flex-direction: column;\n    padding: 0;\n  }\n\n  .flex {\n    display: flex;\n    justify-content: center;\n    flex-direction: column;\n  }\n\n  @media (min-width: 576px) {\n    min-width: max-content;\n\n    .btn-select-date-container {\n      display: inline-flex;\n      flex-grow: 1;\n\n      ix-button {\n        margin-left: auto;\n        margin-top: auto;\n      }\n    }\n\n    .min-width {\n      width: min-content;\n    }\n\n    ix-time-picker {\n      width: initial;\n    }\n  }\n\n  .individual {\n    box-shadow: none;\n    border: none;\n  }\n\n  .btn-select-date-container {\n    padding: 0 vars.$default-space vars.$default-space;\n\n    @media (max-width: 576px) {\n      & .btn-select-date {\n        width: 100%;\n      }\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport type { DateChangeEvent } from '../date-picker/date-picker.events';\nimport { IxDatePickerComponent } from '../date-picker/date-picker-component';\nimport type {\n  DateTimeDateChangeEvent,\n  DateTimeSelectEvent,\n} from './datetime-picker.types';\n\n@Component({\n  tag: 'ix-datetime-picker',\n  styleUrl: 'datetime-picker.scss',\n  shadow: true,\n})\nexport class DatetimePicker\n  implements Omit<IxDatePickerComponent, 'corners' | 'format'>\n{\n  /**\n   * If true a date-range can be selected (from/to).\n   */\n  @Prop() range = true;\n\n  /**\n   * Show hour input\n   *\n   * @deprecated This is now determined by the format that is used. Will be removed in 4.0.0\n   */\n  @Prop() showHour = true;\n\n  /**\n   * Show minutes input\n   *\n   * @deprecated This is now determined by the format that is used. Will be removed in 4.0.0\n   */\n  @Prop() showMinutes = true;\n\n  /**\n   * Show seconds input\n   *\n   * @deprecated This is now determined by the format that is used. Will be removed in 4.0.0\n   */\n  @Prop() showSeconds = true;\n\n  /**\n   * The earliest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   */\n  @Prop() minDate?: string;\n\n  /**\n   * The latest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   */\n  @Prop() maxDate?: 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() dateFormat: string = 'yyyy/LL/dd';\n\n  /**\n   * Time format string.\n   * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.\n   */\n  @Prop() timeFormat: string = 'HH:mm:ss';\n\n  /**\n   * The selected starting date. If the picker is not in range mode this is the selected date.\n   * Format has to match the `format` property.\n   */\n  @Prop() from?: string;\n\n  /**\n   * The selected end date. If the the picker is not in range mode this property has no impact.\n   * Format has to match the `format` property.\n   */\n  @Prop() to?: string;\n\n  /**\n   * Select time with format string\n   */\n  @Prop() time?: string;\n\n  /**\n   * Show time reference input\n   * Time reference is default aligned with @see {this.timeFormat}\n   */\n  @Prop() showTimeReference: boolean = false;\n\n  /**\n   * Set time reference\n   */\n  @Prop() timeReference?: 'AM' | 'PM';\n\n  /**\n   * Text of date select button\n   */\n  @Prop({ attribute: 'i18n-done' }) i18nDone: string = 'Done';\n\n  /**\n   * Top label of time picker\n   *\n   * @since 3.0.0\n   */\n  @Prop() i18nTime: string = 'Time';\n\n  /**\n   * ARIA label for the previous month icon button\n   * Will be set as aria-label on the nested HTML button element\n   */\n  @Prop() ariaLabelPreviousMonthButton?: string;\n\n  /**\n   * ARIA label for the next month icon button\n   * Will be set as aria-label on the nested HTML button element\n   */\n  @Prop() ariaLabelNextMonthButton?: string;\n\n  /**\n   * The index of which day to start the week on, based on the Locale#weekdays array.\n   * E.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on monday.\n   */\n  @Prop() weekStartIndex = 0;\n\n  /**\n   * Format of time string\n   * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.\n   */\n  @Prop() locale?: string;\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   * Time change\n   */\n  @Event() timeChange!: EventEmitter<string>;\n\n  /**\n   * Date change\n   */\n  @Event() dateChange!: EventEmitter<DateTimeDateChangeEvent>;\n\n  /**\n   * Datetime selection event is fired after confirm button is pressed\n   */\n  @Event() dateSelect!: EventEmitter<DateTimeSelectEvent>;\n\n  private datePickerElement?: HTMLIxDatePickerElement;\n  private timePickerElement?: HTMLIxTimePickerElement;\n\n  private async onDone() {\n    const date = await this.datePickerElement?.getCurrentDate();\n    const time = await this.timePickerElement?.getCurrentTime();\n\n    this.dateSelect.emit({\n      from: date?.from ?? '',\n      to: date?.to ?? '',\n      time: time ?? '',\n    });\n  }\n\n  private async onDateChange(event: CustomEvent<string | DateChangeEvent>) {\n    event.preventDefault();\n    event.stopPropagation();\n\n    const { detail: date } = event;\n    this.dateChange.emit(date);\n  }\n\n  private async onTimeChange(event: CustomEvent<string>) {\n    event.preventDefault();\n    event.stopPropagation();\n\n    const { detail: time } = event;\n    this.timeChange.emit(time);\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-layout-grid class=\"no-padding\">\n          <ix-row>\n            <ix-col>\n              <ix-date-picker\n                ref={(ref) => (this.datePickerElement = ref)}\n                corners=\"left\"\n                range={this.range}\n                onDateChange={(event) => this.onDateChange(event)}\n                from={this.from}\n                to={this.to}\n                format={this.dateFormat}\n                minDate={this.minDate}\n                maxDate={this.maxDate}\n                weekStartIndex={this.weekStartIndex}\n                standaloneAppearance={false}\n                locale={this.locale}\n                showWeekNumbers={this.showWeekNumbers}\n                ariaLabelPreviousMonthButton={this.ariaLabelPreviousMonthButton}\n                ariaLabelNextMonthButton={this.ariaLabelNextMonthButton}\n              ></ix-date-picker>\n            </ix-col>\n\n            <ix-col>\n              <ix-time-picker\n                class=\"min-width\"\n                ref={(ref) => (this.timePickerElement = ref)}\n                standaloneAppearance={false}\n                dateTimePickerAppearance={true}\n                onTimeChange={(event) => this.onTimeChange(event)}\n                format={this.timeFormat}\n                textTime={this.i18nTime}\n                time={this.time}\n                showHour={this.showHour}\n                showMinutes={this.showMinutes}\n                showSeconds={this.showSeconds}\n              ></ix-time-picker>\n              <div class=\"btn-select-date-container\">\n                <ix-button\n                  class=\"btn-select-date\"\n                  onClick={() => this.onDone()}\n                >\n                  {this.i18nDone}\n                </ix-button>\n              </div>\n            </ix-col>\n          </ix-row>\n        </ix-layout-grid>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,qqDAAqqD;;MCsBlrD,cAAc,GAAA,MAAA;AAL3B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;AAQE;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAG,IAAI;AAEpB;;;;AAIG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,IAAI;AAEvB;;;;AAIG;AACK,QAAA,IAAW,CAAA,WAAA,GAAG,IAAI;AAE1B;;;;AAIG;AACK,QAAA,IAAW,CAAA,WAAA,GAAG,IAAI;AAc1B;;;AAGG;AACK,QAAA,IAAU,CAAA,UAAA,GAAW,YAAY;AAEzC;;;AAGG;AACK,QAAA,IAAU,CAAA,UAAA,GAAW,UAAU;AAmBvC;;;AAGG;AACK,QAAA,IAAiB,CAAA,iBAAA,GAAY,KAAK;AAO1C;;AAEG;AAC+B,QAAA,IAAQ,CAAA,QAAA,GAAW,MAAM;AAE3D;;;;AAIG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAW,MAAM;AAcjC;;;AAGG;AACK,QAAA,IAAc,CAAA,cAAA,GAAG,CAAC;AAQ1B;;;;AAIG;AACK,QAAA,IAAe,CAAA,eAAA,GAAG,KAAK;AAoGhC;AAhFS,IAAA,MAAM,MAAM,GAAA;;AAClB,QAAA,MAAM,IAAI,GAAG,OAAM,CAAA,EAAA,GAAA,IAAI,CAAC,iBAAiB,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,cAAc,EAAE,CAAA;AAC3D,QAAA,MAAM,IAAI,GAAG,OAAM,CAAA,EAAA,GAAA,IAAI,CAAC,iBAAiB,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,cAAc,EAAE,CAAA;AAE3D,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;AACnB,YAAA,IAAI,EAAE,CAAA,EAAA,GAAA,IAAI,KAAJ,IAAA,IAAA,IAAI,uBAAJ,IAAI,CAAE,IAAI,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,EAAE;AACtB,YAAA,EAAE,EAAE,CAAA,EAAA,GAAA,IAAI,KAAJ,IAAA,IAAA,IAAI,uBAAJ,IAAI,CAAE,EAAE,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,EAAE;AAClB,YAAA,IAAI,EAAE,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAJ,MAAA,GAAA,IAAI,GAAI,EAAE;AACjB,SAAA,CAAC;;IAGI,MAAM,YAAY,CAAC,KAA4C,EAAA;QACrE,KAAK,CAAC,cAAc,EAAE;QACtB,KAAK,CAAC,eAAe,EAAE;AAEvB,QAAA,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK;AAC9B,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC;;IAGpB,MAAM,YAAY,CAAC,KAA0B,EAAA;QACnD,KAAK,CAAC,cAAc,EAAE;QACtB,KAAK,CAAC,eAAe,EAAE;AAEvB,QAAA,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK;AAC9B,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC;;IAG5B,MAAM,GAAA;AACJ,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAgB,CAAA,gBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EAChCA,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACEA,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACEA,OACE,CAAA,gBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,iBAAiB,GAAG,GAAG,CAAC,EAC5C,OAAO,EAAC,MAAM,EACd,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,YAAY,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EACjD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,oBAAoB,EAAE,KAAK,EAC3B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,4BAA4B,EAAE,IAAI,CAAC,4BAA4B,EAC/D,wBAAwB,EAAE,IAAI,CAAC,wBAAwB,EAAA,CACvC,CACX,EAETA,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACEA,OAAA,CAAA,gBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,WAAW,EACjB,GAAG,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,iBAAiB,GAAG,GAAG,CAAC,EAC5C,oBAAoB,EAAE,KAAK,EAC3B,wBAAwB,EAAE,IAAI,EAC9B,YAAY,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EACjD,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,WAAW,EAAE,IAAI,CAAC,WAAW,EACb,CAAA,EAClBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACpCA,OACE,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EACvB,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,EAE3B,EAAA,IAAI,CAAC,QAAQ,CACJ,CACR,CACC,CACF,CACM,CACZ;;;;;;;"}
+{"version":3,"file":"ix-datetime-picker.entry.cjs.js","sources":["src/components/datetime-picker/datetime-picker.scss?tag=ix-datetime-picker&encapsulation=shadow","src/components/datetime-picker/datetime-picker.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@use './common-variables' as vars;\n@use 'mixins/shadow-dom/component';\n\n:host {\n  display: block;\n  background-color: var(--theme-menu--background);\n  border-radius: 4px;\n  position: relative;\n  width: min-content;\n\n  @include component.ix-component;\n\n  ix-layout-grid {\n    border-radius: 0.25rem;\n    box-shadow: var(--theme-shadow-4);\n  }\n\n  ix-time-picker {\n    width: 100%;\n  }\n\n  .no-padding {\n    padding: 0;\n  }\n\n  ix-col {\n    display: flex;\n    flex-direction: column;\n    padding: 0;\n  }\n\n  .flex {\n    display: flex;\n    justify-content: center;\n    flex-direction: column;\n  }\n\n  @media (min-width: 576px) {\n    min-width: max-content;\n\n    .btn-select-date-container {\n      display: inline-flex;\n      flex-grow: 1;\n\n      ix-button {\n        margin-left: auto;\n        margin-top: auto;\n      }\n    }\n\n    .min-width {\n      width: min-content;\n    }\n\n    ix-time-picker {\n      width: initial;\n    }\n  }\n\n  .individual {\n    box-shadow: none;\n    border: none;\n  }\n\n  .btn-select-date-container {\n    padding: 0 vars.$default-space vars.$default-space;\n\n    @media (max-width: 576px) {\n      & .btn-select-date {\n        width: 100%;\n      }\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport type { DateChangeEvent } from '../date-picker/date-picker.events';\nimport { IxDatePickerComponent } from '../date-picker/date-picker-component';\nimport type {\n  DateTimeDateChangeEvent,\n  DateTimeSelectEvent,\n} from './datetime-picker.types';\n\n@Component({\n  tag: 'ix-datetime-picker',\n  styleUrl: 'datetime-picker.scss',\n  shadow: true,\n})\nexport class DatetimePicker\n  implements Omit<IxDatePickerComponent, 'corners' | 'format'>\n{\n  /**\n   * If true disables date range selection (from/to).\n   */\n  @Prop() singleSelection = false;\n\n  /**\n   * The earliest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   */\n  @Prop() minDate?: string;\n\n  /**\n   * The latest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   */\n  @Prop() maxDate?: 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() dateFormat: string = 'yyyy/LL/dd';\n\n  /**\n   * Time format string.\n   * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.\n   */\n  @Prop() timeFormat: string = 'HH:mm:ss';\n\n  /**\n   * The selected starting date. If the picker is not in range mode this is the selected date.\n   * Format has to match the `format` property.\n   */\n  @Prop() from?: string;\n\n  /**\n   * The selected end date. If the the picker is not in range mode this property has no impact.\n   * Format has to match the `format` property.\n   */\n  @Prop() to?: string;\n\n  /**\n   * Select time with format string\n   */\n  @Prop() time?: string;\n\n  /**\n   * Show time reference input\n   * Time reference is default aligned with @see {this.timeFormat}\n   */\n  @Prop() showTimeReference: boolean = false;\n\n  /**\n   * Set time reference\n   */\n  @Prop() timeReference?: 'AM' | 'PM';\n\n  /**\n   * Text of date select button\n   */\n  @Prop({ attribute: 'i18n-done' }) i18nDone: string = 'Done';\n\n  /**\n   * Top label of time picker\n   *\n   * @since 3.0.0\n   */\n  @Prop({ attribute: 'i18n-time' }) i18nTime: string = 'Time';\n\n  /**\n   * ARIA label for the previous month icon button\n   * Will be set as aria-label on the nested HTML button element\n   */\n  @Prop() ariaLabelPreviousMonthButton?: string;\n\n  /**\n   * ARIA label for the next month icon button\n   * Will be set as aria-label on the nested HTML button element\n   */\n  @Prop() ariaLabelNextMonthButton?: string;\n\n  /**\n   * The index of which day to start the week on, based on the Locale#weekdays array.\n   * E.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on monday.\n   */\n  @Prop() weekStartIndex = 0;\n\n  /**\n   * Format of time string\n   * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.\n   */\n  @Prop() locale?: string;\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   * Time change\n   */\n  @Event() timeChange!: EventEmitter<string>;\n\n  /**\n   * Date change\n   */\n  @Event() dateChange!: EventEmitter<DateTimeDateChangeEvent>;\n\n  /**\n   * Datetime selection event is fired after confirm button is pressed\n   */\n  @Event() dateSelect!: EventEmitter<DateTimeSelectEvent>;\n\n  private datePickerElement?: HTMLIxDatePickerElement;\n  private timePickerElement?: HTMLIxTimePickerElement;\n\n  private async onDone() {\n    const date = await this.datePickerElement?.getCurrentDate();\n    const time = await this.timePickerElement?.getCurrentTime();\n\n    this.dateSelect.emit({\n      from: date?.from ?? '',\n      to: date?.to ?? '',\n      time: time ?? '',\n    });\n  }\n\n  private async onDateChange(event: CustomEvent<string | DateChangeEvent>) {\n    event.preventDefault();\n    event.stopPropagation();\n\n    const { detail: date } = event;\n    this.dateChange.emit(date);\n  }\n\n  private async onTimeChange(event: CustomEvent<string>) {\n    event.preventDefault();\n    event.stopPropagation();\n\n    const { detail: time } = event;\n    this.timeChange.emit(time);\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-layout-grid class=\"no-padding\">\n          <ix-row>\n            <ix-col>\n              <ix-date-picker\n                ref={(ref) => (this.datePickerElement = ref)}\n                corners=\"left\"\n                singleSelection={this.singleSelection}\n                onDateChange={(event) => this.onDateChange(event)}\n                from={this.from}\n                to={this.to}\n                format={this.dateFormat}\n                minDate={this.minDate}\n                maxDate={this.maxDate}\n                weekStartIndex={this.weekStartIndex}\n                embedded\n                locale={this.locale}\n                showWeekNumbers={this.showWeekNumbers}\n                ariaLabelPreviousMonthButton={this.ariaLabelPreviousMonthButton}\n                ariaLabelNextMonthButton={this.ariaLabelNextMonthButton}\n              ></ix-date-picker>\n            </ix-col>\n\n            <ix-col>\n              <ix-time-picker\n                class=\"min-width\"\n                ref={(ref) => (this.timePickerElement = ref)}\n                embedded\n                dateTimePickerAppearance={true}\n                onTimeChange={(event) => this.onTimeChange(event)}\n                format={this.timeFormat}\n                time={this.time}\n              ></ix-time-picker>\n              <div class=\"btn-select-date-container\">\n                <ix-button\n                  class=\"btn-select-date\"\n                  onClick={() => this.onDone()}\n                >\n                  {this.i18nDone}\n                </ix-button>\n              </div>\n            </ix-col>\n          </ix-row>\n        </ix-layout-grid>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":"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"}

package/dist/cjs/ix-drawer.cjs.entry.js

@@ -19,6 +19,7 @@ const Drawer = class {
         /**
          * Fired in case of an outside click during drawer showed state
          */
+        // eslint-disable-next-line @stencil-community/ban-default-true
         this.closeOnClickOutside = true;
         /**
          * Render the drawer with maximum height
@@ -129,7 +130,7 @@ const Drawer = class {
         this.toggleDrawer(this.show);
     }
     render() {
-        return (index.h(index.Host, { key: '7be961a99e8e7ada4525260428b8cb05e9699813', class: {
+        return (index.h(index.Host, { key: '16521422bdb7a66912901a8d1d156772c31c588a', class: {
                 'drawer-container': true,
                 'display-none': true,
             }, style: {
@@ -137,15 +138,15 @@ const Drawer = class {
                 'max-width': `${this.maxWidth}rem`,
                 height: this.fullHeight ? '100%' : 'auto',
                 overflow: 'hidden',
-            }, ref: (el) => (this.divElement = el), "data-testid": "container", id: "div-container" }, index.h("div", { key: '5c2b3998afbfb0d0f01b2a2634c6e6d28077af27', style: {
+            }, ref: (el) => (this.divElement = el), "data-testid": "container", id: "div-container" }, index.h("div", { key: '8f1c103f6bb03c362a492031e2ad92bcf25d89cc', style: {
                 width: this.width === 'auto'
                     ? 'auto'
                     : `${this.getConstrainedWidth(this.width)}rem`,
-            } }, index.h("div", { key: 'b82cde6e8125ea023a8d553434ec399f681038a9', class: "header" }, index.h("div", { key: '5aa258a2f3cdcb742993993ea0ed9bca152c2db3', class: "header-content" }, index.h("slot", { key: 'ef89dbef6fbc0cad872effee17836f82be5dc219', name: "header" })), index.h("ix-icon-button", { key: '461b4ece5fb4933b84174f51ee25d7de19de3843', class: "close-button", style: {
+            } }, index.h("div", { key: '7ff4e51b1f93fb7f686db4915ee838f32f61ae86', class: "header" }, index.h("div", { key: '7c748e9f1e9c2b5468fd524844dfc761069572f2', class: "header-content" }, index.h("slot", { key: 'ea0ef18347626104852b149f3944165932f9d661', name: "header" })), index.h("ix-icon-button", { key: 'a446d3e8cb7648d320cd4ea31899d2b289afbabe', class: "close-button", style: {
                 display: this.showContent ? 'block' : 'none',
-            }, icon: index$1.iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => this.onCloseClicked(), "data-testid": "close-button", "aria-label": this.ariaLabelCloseButton })), index.h("div", { key: 'f1d1735e2ae9d8ee33771bd3d11459bb3ac84d65', class: "content", style: {
+            }, icon: index$1.iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => this.onCloseClicked(), "data-testid": "close-button", "aria-label": this.ariaLabelCloseButton })), index.h("div", { key: '87f799aa707aceefa145a0b547761f587593d8e2', class: "content", style: {
                 display: this.showContent ? 'block' : 'none',
-            } }, index.h("slot", { key: 'c1506217b6b73a685df75906356c3c1f29470d46' })))));
+            } }, index.h("slot", { key: 'aea1e984256bb60bcb6c6a6721988b86decdfca0' })))));
     }
     static get watchers() { return {
         "show": ["onShowChanged"]

package/dist/cjs/ix-drawer.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ix-drawer.entry.cjs.js","sources":["src/components/drawer/drawer.scss?tag=ix-drawer&encapsulation=shadow","src/components/drawer/drawer.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@use 'mixins/shadow-dom/component';\n@use 'mixins/shadows';\n@use './common-variables' as vars;\n\n:host {\n\n  top: 0;\n  right: 0;\n\n  display: block;\n  position: absolute;\n  justify-content: flex-start;\n  align-items: center;\n  opacity: 0;\n\n  max-height: 100vh;\n  min-height: vars.$large-space;\n  background-color: var(--theme-color-1);\n  border-radius: vars.$default-border-radius;\n\n  @include shadows.box-shadow(3);\n  @include component.ix-component;\n\n  .drawer-container {\n    z-index: 100;\n  }\n\n  .header {\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: flex-end;\n    padding: 0.5rem;\n    width: 100%;\n    order: 1;\n\n    .header-content {\n      flex-grow: 1;\n      margin-right: vars.$default-space;\n    }\n  }\n\n  .content {\n    position: relative;\n    flex: 1;\n    order: 2;\n    height: 100%;\n    width: 100%;\n    overflow-y: auto;\n  }\n}\n\n:host(.display-none) {\n  display: none;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { iconClose } from '@siemens/ix-icons/icons';\nimport {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { animate } from 'animejs';\nimport Animation from '../utils/animation';\n\n/**\n * @deprecated Will be removed with 5.0.0, use ix-pane as successor\n */\n@Component({\n  tag: 'ix-drawer',\n  styleUrl: 'drawer.scss',\n  shadow: true,\n})\nexport class Drawer {\n  /**\n   * Show or hide the drawer\n   */\n  @Prop({ mutable: true }) show = false;\n\n  /**\n   * Fired in case of an outside click during drawer showed state\n   */\n  @Prop() closeOnClickOutside = true;\n\n  /**\n   * Render the drawer with maximum height\n   */\n  @Prop() fullHeight = false;\n\n  /**\n   * Min width interpreted as REM\n   */\n  @Prop() minWidth = 16;\n\n  /**\n   * Max width interpreted as REM\n   */\n  @Prop() maxWidth = 28;\n\n  /**\n   * Width interpreted as REM if not set to 'auto'\n   */\n  @Prop() width: number | 'auto' = this.minWidth;\n\n  /**\n   * ARIA label for the close icon button\n   * Will be set as aria-label on the nested HTML button element\n   *\n   * @since 3.2.0\n   */\n  @Prop() ariaLabelCloseButton?: string;\n\n  /**\n   * Fire event after drawer is open\n   */\n  @Event() open!: EventEmitter;\n\n  /**\n   * Fire event after drawer is close\n   */\n  @Event() drawerClose!: EventEmitter;\n\n  toggle = false;\n\n  private callback = this.clickedOutside.bind(this);\n  private divElement?: HTMLElement;\n\n  @State() showContent = true;\n\n  @Watch('show')\n  onShowChanged(newValue: boolean, oldValue?: boolean) {\n    if (newValue === oldValue) {\n      return;\n    }\n\n    this.toggleDrawer(newValue);\n  }\n\n  /**\n   * Toggle or define show state of drawer\n   * @param show Overwrite toggle state with boolean\n   */\n  @Method()\n  async toggleDrawer(show?: boolean): Promise<void> {\n    show = show ?? !this.show;\n\n    if (show) {\n      const { defaultPrevented } = this.open.emit();\n\n      if (defaultPrevented) {\n        return;\n      }\n\n      this.show = true;\n      if (!this.toggle && this.divElement) {\n        this.slideInRight(this.divElement);\n        setTimeout(() => {\n          window.addEventListener('mousedown', this.callback);\n        }, Animation.mediumTime);\n      }\n    } else {\n      const { defaultPrevented } = this.drawerClose.emit();\n\n      if (defaultPrevented) {\n        return;\n      }\n\n      this.show = false;\n\n      if (this.toggle && this.divElement) {\n        this.slideOutRight(this.divElement);\n      }\n\n      window.removeEventListener('mousedown', this.callback);\n    }\n\n    this.toggle = this.show;\n\n    return Promise.resolve();\n  }\n\n  private onCloseClicked() {\n    this.toggleDrawer(false);\n  }\n\n  private clickedOutside(evt: any) {\n    if (!this.closeOnClickOutside) {\n      return;\n    }\n\n    const target = evt.target;\n    const closestElement = target.closest('#div-container');\n    const btn = target.closest('#drawer-btn');\n\n    if (\n      evt.target.type !== 'button' &&\n      closestElement !== this.divElement &&\n      target !== btn\n    ) {\n      this.show = false;\n    }\n  }\n\n  private getConstrainedWidth(width: number) {\n    return Math.min(Math.max(width, this.minWidth), this.maxWidth);\n  }\n\n  private slideOutRight(el: HTMLElement) {\n    const initialWidth = `${this.getConstrainedWidth(\n      this.width === 'auto' ? this.minWidth : this.width\n    )}rem`;\n\n    animate(el, {\n      duration: Animation.mediumTime,\n      width: [initialWidth, 0],\n      opacity: [1, 0],\n      easing: 'easeInSine',\n      onComplete: () => {\n        el.classList.add('display-none');\n      },\n    });\n  }\n\n  private slideInRight(el: HTMLElement) {\n    const targetWidth = `${this.getConstrainedWidth(\n      this.width === 'auto' ? this.minWidth : this.width\n    )}rem`;\n\n    animate(el, {\n      duration: Animation.mediumTime,\n      width: [0, targetWidth],\n      opacity: [0, 1],\n      easing: 'easeOutSine',\n      onBegin: () => {\n        el.classList.remove('display-none');\n      },\n      onComplete: () => {\n        this.showContent = true;\n      },\n    });\n  }\n\n  componentDidLoad() {\n    this.toggleDrawer(this.show);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'drawer-container': true,\n          'display-none': true,\n        }}\n        style={{\n          width: '0',\n          'max-width': `${this.maxWidth}rem`,\n          height: this.fullHeight ? '100%' : 'auto',\n          overflow: 'hidden',\n        }}\n        ref={(el) => (this.divElement = el as HTMLElement)}\n        data-testid=\"container\"\n        id=\"div-container\"\n      >\n        <div\n          style={{\n            width:\n              this.width === 'auto'\n                ? 'auto'\n                : `${this.getConstrainedWidth(this.width)}rem`,\n          }}\n        >\n          <div class=\"header\">\n            <div class=\"header-content\">\n              <slot name=\"header\"></slot>\n            </div>\n            <ix-icon-button\n              class=\"close-button\"\n              style={{\n                display: this.showContent ? 'block' : 'none',\n              }}\n              icon={iconClose}\n              iconColor=\"color-soft-text\"\n              size=\"24\"\n              variant=\"tertiary\"\n              onClick={() => this.onCloseClicked()}\n              data-testid=\"close-button\"\n              aria-label={this.ariaLabelCloseButton}\n            ></ix-icon-button>\n          </div>\n          <div\n            class=\"content\"\n            style={{\n              display: this.showContent ? 'block' : 'none',\n            }}\n          >\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["Animation","animate","h","Host","iconClose"],"mappings":"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"}
+{"version":3,"file":"ix-drawer.entry.cjs.js","sources":["src/components/drawer/drawer.scss?tag=ix-drawer&encapsulation=shadow","src/components/drawer/drawer.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@use 'mixins/shadow-dom/component';\n@use 'mixins/shadows';\n@use './common-variables' as vars;\n\n:host {\n\n  top: 0;\n  right: 0;\n\n  display: block;\n  position: absolute;\n  justify-content: flex-start;\n  align-items: center;\n  opacity: 0;\n\n  max-height: 100vh;\n  min-height: vars.$large-space;\n  background-color: var(--theme-color-1);\n  border-radius: vars.$default-border-radius;\n\n  @include shadows.box-shadow(3);\n  @include component.ix-component;\n\n  .drawer-container {\n    z-index: 100;\n  }\n\n  .header {\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: flex-end;\n    padding: 0.5rem;\n    width: 100%;\n    order: 1;\n\n    .header-content {\n      flex-grow: 1;\n      margin-right: vars.$default-space;\n    }\n  }\n\n  .content {\n    position: relative;\n    flex: 1;\n    order: 2;\n    height: 100%;\n    width: 100%;\n    overflow-y: auto;\n  }\n}\n\n:host(.display-none) {\n  display: none;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { iconClose } from '@siemens/ix-icons/icons';\nimport {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { animate } from 'animejs';\nimport Animation from '../utils/animation';\n\n/**\n * @deprecated Will be removed with 5.0.0, use ix-pane as successor\n */\n@Component({\n  tag: 'ix-drawer',\n  styleUrl: 'drawer.scss',\n  shadow: true,\n})\nexport class Drawer {\n  /**\n   * Show or hide the drawer\n   */\n  @Prop({ mutable: true }) show = false;\n\n  /**\n   * Fired in case of an outside click during drawer showed state\n   */\n  // eslint-disable-next-line @stencil-community/ban-default-true\n  @Prop() closeOnClickOutside = true;\n\n  /**\n   * Render the drawer with maximum height\n   */\n  @Prop() fullHeight = false;\n\n  /**\n   * Min width interpreted as REM\n   */\n  @Prop() minWidth = 16;\n\n  /**\n   * Max width interpreted as REM\n   */\n  @Prop() maxWidth = 28;\n\n  /**\n   * Width interpreted as REM if not set to 'auto'\n   */\n  @Prop() width: number | 'auto' = this.minWidth;\n\n  /**\n   * ARIA label for the close icon button\n   * Will be set as aria-label on the nested HTML button element\n   *\n   * @since 3.2.0\n   */\n  @Prop() ariaLabelCloseButton?: string;\n\n  /**\n   * Fire event after drawer is open\n   */\n  @Event() open!: EventEmitter;\n\n  /**\n   * Fire event after drawer is close\n   */\n  @Event() drawerClose!: EventEmitter;\n\n  toggle = false;\n\n  private callback = this.clickedOutside.bind(this);\n  private divElement?: HTMLElement;\n\n  @State() showContent = true;\n\n  @Watch('show')\n  onShowChanged(newValue: boolean, oldValue?: boolean) {\n    if (newValue === oldValue) {\n      return;\n    }\n\n    this.toggleDrawer(newValue);\n  }\n\n  /**\n   * Toggle or define show state of drawer\n   * @param show Overwrite toggle state with boolean\n   */\n  @Method()\n  async toggleDrawer(show?: boolean): Promise<void> {\n    show = show ?? !this.show;\n\n    if (show) {\n      const { defaultPrevented } = this.open.emit();\n\n      if (defaultPrevented) {\n        return;\n      }\n\n      this.show = true;\n      if (!this.toggle && this.divElement) {\n        this.slideInRight(this.divElement);\n        setTimeout(() => {\n          window.addEventListener('mousedown', this.callback);\n        }, Animation.mediumTime);\n      }\n    } else {\n      const { defaultPrevented } = this.drawerClose.emit();\n\n      if (defaultPrevented) {\n        return;\n      }\n\n      this.show = false;\n\n      if (this.toggle && this.divElement) {\n        this.slideOutRight(this.divElement);\n      }\n\n      window.removeEventListener('mousedown', this.callback);\n    }\n\n    this.toggle = this.show;\n\n    return Promise.resolve();\n  }\n\n  private onCloseClicked() {\n    this.toggleDrawer(false);\n  }\n\n  private clickedOutside(evt: any) {\n    if (!this.closeOnClickOutside) {\n      return;\n    }\n\n    const target = evt.target;\n    const closestElement = target.closest('#div-container');\n    const btn = target.closest('#drawer-btn');\n\n    if (\n      evt.target.type !== 'button' &&\n      closestElement !== this.divElement &&\n      target !== btn\n    ) {\n      this.show = false;\n    }\n  }\n\n  private getConstrainedWidth(width: number) {\n    return Math.min(Math.max(width, this.minWidth), this.maxWidth);\n  }\n\n  private slideOutRight(el: HTMLElement) {\n    const initialWidth = `${this.getConstrainedWidth(\n      this.width === 'auto' ? this.minWidth : this.width\n    )}rem`;\n\n    animate(el, {\n      duration: Animation.mediumTime,\n      width: [initialWidth, 0],\n      opacity: [1, 0],\n      easing: 'easeInSine',\n      onComplete: () => {\n        el.classList.add('display-none');\n      },\n    });\n  }\n\n  private slideInRight(el: HTMLElement) {\n    const targetWidth = `${this.getConstrainedWidth(\n      this.width === 'auto' ? this.minWidth : this.width\n    )}rem`;\n\n    animate(el, {\n      duration: Animation.mediumTime,\n      width: [0, targetWidth],\n      opacity: [0, 1],\n      easing: 'easeOutSine',\n      onBegin: () => {\n        el.classList.remove('display-none');\n      },\n      onComplete: () => {\n        this.showContent = true;\n      },\n    });\n  }\n\n  componentDidLoad() {\n    this.toggleDrawer(this.show);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'drawer-container': true,\n          'display-none': true,\n        }}\n        style={{\n          width: '0',\n          'max-width': `${this.maxWidth}rem`,\n          height: this.fullHeight ? '100%' : 'auto',\n          overflow: 'hidden',\n        }}\n        ref={(el) => (this.divElement = el as HTMLElement)}\n        data-testid=\"container\"\n        id=\"div-container\"\n      >\n        <div\n          style={{\n            width:\n              this.width === 'auto'\n                ? 'auto'\n                : `${this.getConstrainedWidth(this.width)}rem`,\n          }}\n        >\n          <div class=\"header\">\n            <div class=\"header-content\">\n              <slot name=\"header\"></slot>\n            </div>\n            <ix-icon-button\n              class=\"close-button\"\n              style={{\n                display: this.showContent ? 'block' : 'none',\n              }}\n              icon={iconClose}\n              iconColor=\"color-soft-text\"\n              size=\"24\"\n              variant=\"tertiary\"\n              onClick={() => this.onCloseClicked()}\n              data-testid=\"close-button\"\n              aria-label={this.ariaLabelCloseButton}\n            ></ix-icon-button>\n          </div>\n          <div\n            class=\"content\"\n            style={{\n              display: this.showContent ? 'block' : 'none',\n            }}\n          >\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["Animation","animate","h","Host","iconClose"],"mappings":"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"}

package/dist/cjs/ix-dropdown.cjs.entry.js

@@ -1,10 +1,9 @@
 'use strict';
 
 var index = require('./index-DuDLgBnw.js');
-var floatingUi_dom = require('./floating-ui.dom-CMzYsRR7.js');
+var findElement = require('./find-element-BNZJcvT8.js');
 var focus = require('./focus-Cl8_98b5.js');
 var dropdownController = require('./dropdown-controller-BLOjtc6w.js');
-var findElement = require('./find-element-D7yD1Ukn.js');
 var disposableEventListener = require('./disposable-event-listener-BALEIeXq.js');
 
 const dropdownCss = ":host{background-color:var(--theme-color-2);border-radius:var(--theme-default-border-radius);min-width:0px;z-index:var(--theme-z-index-dropdown);box-shadow:var(--theme-shadow-4);padding:0.25rem 0px}: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{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .dropdown-header{display:flex;align-items:center;height:2.5rem;color:var(--theme-menu-header--color);padding:0 1rem}:host(.overflow){max-height:calc(50vh - 3rem);overflow-y:auto}:host(:not(.show)){display:none}";
@@ -258,24 +257,24 @@ const Dropdown = class {
             middleware: [],
         };
         if (!this.suppressAutomaticPlacement) {
-            (_a = positionConfig.middleware) === null || _a === void 0 ? void 0 : _a.push(floatingUi_dom.flip({ fallbackStrategy: 'initialPlacement' }));
+            (_a = positionConfig.middleware) === null || _a === void 0 ? void 0 : _a.push(findElement.flip({ fallbackStrategy: 'initialPlacement' }));
         }
         positionConfig.placement = isSubmenu ? 'right-start' : this.placement;
         positionConfig.middleware = [
             ...(((_b = positionConfig.middleware) === null || _b === void 0 ? void 0 : _b.filter(Boolean)) || []),
-            floatingUi_dom.inline(),
-            floatingUi_dom.shift(),
+            findElement.inline(),
+            findElement.shift(),
         ];
         if (this.offset) {
-            positionConfig.middleware.push(floatingUi_dom.offset(this.offset));
+            positionConfig.middleware.push(findElement.offset(this.offset));
         }
         this.destroyAutoUpdate();
         if (!this.anchorElement) {
             return;
         }
-        this.autoUpdateCleanup = floatingUi_dom.autoUpdate(this.anchorElement, this.hostElement, async () => {
+        this.autoUpdateCleanup = findElement.autoUpdate(this.anchorElement, this.hostElement, async () => {
             if (this.anchorElement) {
-                const computeResponse = await floatingUi_dom.computePosition(this.anchorElement, this.hostElement, positionConfig);
+                const computeResponse = await findElement.computePosition(this.anchorElement, this.hostElement, positionConfig);
                 Object.assign(this.hostElement.style, {
                     top: '0',
                     left: '0',