dap-design-system 0.63.0 → 0.63.1

package/dist/components/timepicker/timepicker.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"timepicker.component.js","sources":["../../../src/components/timepicker/timepicker.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport dayjs, { Dayjs } from 'dayjs'\nimport { nothing, PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport {\n  CommonFormElementSize,\n  FloatingStrategy,\n  PopupPlacement,\n  TimePreset,\n  TimeSelection,\n} from '@/common/types'\nimport { getValidityStateObject } from '@/common/utils'\nimport { GenericFormElement } from '@/internal/mixin/genericFormElement'\nimport { formLabelTemplate } from '@/internal/templates/formLabel'\nimport { i18next, t } from '@/localization/localization'\n\nimport DapDSFeedback from '../feedback/feedback.component'\nimport DapDSFormLabel from '../form/form-label/form-label.component'\nimport DapDSIcon from '../icon/icon.component'\nimport DapDSIconButton from '../icon-button/icon-button.component'\nimport SystemLoadingSpinner from '../icons/system/system-loading-spinner/system-loading-spinner.component'\nimport SystemTimeLine from '../icons/system/system-time-line/system-time-line.component'\nimport DapDSPopup from '../popup/popup.component'\nimport DapDSTooltip from '../tooltip/tooltip.component'\nimport DapDSTypography from '../typography/typography.component'\nimport DapDSTimeGrid from './time-grid.component'\nimport styles from './timepicker.scss?inline'\n\n/**\n * `dap-ds-timepicker`\n * @summary A timepicker is a graphical user interface widget that allows the user to select a time from a time range.\n * @element dap-ds-timepicker\n * @title - Timepicker\n *\n * @property {Dayjs | string} value - The value of the timepicker. Can be a Dayjs object or a string in 'HH:mm' format.\n * @property {string} label - The label of the timepicker.\n * @property {boolean} hideLabel - Visually hides the label while keeping it available to assistive technology. (default: false)\n * @property {string} description - The description of the timepicker.\n * @property {'xs' | 'sm' | 'lg'} size - The size of the timepicker.\n * @property {boolean} disabled - The disabled state of the timepicker.\n * @property {boolean} required - The required state of the timepicker.\n * @property {boolean} readonly - The readonly state of the timepicker.\n * @property {boolean} autofocus - The autofocus state of the timepicker.\n * @property {string} tooltip - The tooltip of the timepicker.\n * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the timepicker.\n * @property {string} feedback - The feedback of the timepicker.\n * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the timepicker.\n * @property {boolean} optional - The optional state of the timepicker.\n * @property {string} optionalLabel - The optional label of the timepicker.\n * @property {string} requiredLabel - The required indicator of the timepicker. (default: '*')\n * @property {boolean} subtle - The weight of the label. Default is `false`\n * @property {string} autocomplete - The autocomplete of the timepicker.\n * @property {string} placeholder - The placeholder of the timepicker.\n * @property {boolean} loading - The loading state of the timepicker.\n * @property {string} format - The format of the timepicker. Defaults to 'HH:mm'.\n * @property {string} minTime - The minimum time of the timepicker. Format: 'HH:mm'.\n * @property {string} maxTime - The maximum time of the timepicker. Format: 'HH:mm'.\n * @property {number} step - The step interval in minutes. Defaults to 15.\n * @property {boolean} openTimeOnInput - Whether the time picker should open on typing.\n * @property {boolean} sendEmptyEventOnInput - Whether the time picker should send an empty event on typing.\n * @property {string} clearButton - Whether the clear button should be shown. Defaults to 'true'.\n * @property {string} clearButtonAriaLabel - The aria label of the clear button.\n * @property {string} placement - The placement of the dropdown of the timepicker.\n * @property {FloatingStrategy} floatingStrategy - The floating strategy of the timepicker.\n * @property {string} locale - The locale of the timepicker.\n * @property {boolean} closeOnSelection - Whether the dropdown should close when a time is selected.\n * @property {boolean} showSeconds - Whether to show the seconds column in the time picker.\n * @property {number} secondsStep - The step interval in seconds. Defaults to 1.\n * @property {function} disabledTime - Callback to determine if a time should be disabled.\n * @property {boolean} hideDisabledTimes - Whether to hide disabled times or show them as disabled.\n * @property {TimePreset[]} presets - Array of preset time slots for quick selection.\n *\n * @event {{ value: Dayjs | string, hour: number, minute: number, second?: number }} dds-change - Fired when the timepicker value changes.\n * @event {{ value: string }} dds-input - Fired when the timepicker input value changes.\n * @event {{ value: Dayjs | string, hour: number, minute: number, second?: number }} dds-valid-time - Fired when the timepicker input value is valid. Happens on manual input typing.\n * @event {{ value: Dayjs | string, hour: number, minute: number, second?: number, type: 'invalid' | 'out-of-range' }} dds-invalid-time - Fired when the timepicker input value is invalid. Happens on manual input typing.\n * @event {{ void }} dds-clear - Fired when the timepicker is cleared.\n * @event {{ void }} dds-focus - Emitted when the timepicker gains focus.\n * @event {{ void }} dds-blur - Emitted when the timepicker loses focus.\n *\n * @csspart base - The main timepicker container.\n * @csspart trigger - The trigger button of the timepicker.\n * @csspart label - The label of the timepicker.\n * @csspart description - The description of the timepicker.\n * @csspart feedback - The feedback of the timepicker.\n * @csspart tooltip - The tooltip of the timepicker.\n * @csspart input - The input of the timepicker.\n * @csspart clear-button - The clear button of the timepicker.\n * @csspart time-button - The clock icon button of the timepicker.\n * @csspart time-grid - The time grid of the timepicker.\n * @csspart label-base - The base of the label.\n * @csspart label-required - The required indicator of the label.\n * @csspart label-optional - The optional indicator of the label.\n *\n * @cssproperty --dds-timepicker-background - The background color of the timepicker. (default: var(--dds-fields-background-default))\n * @cssproperty --dds-timepicker-border-color - The border color of the timepicker. (default: var(--dds-border-neutral-base))\n * @cssproperty --dds-timepicker-border-width - The border width of the timepicker. (default: var(--dds-border-width-base, 1px))\n * @cssproperty --dds-timepicker-border-radius - The border radius of the timepicker. (default: var(--dds-radius-base))\n * @cssproperty --dds-timepicker-text-color - The text color of the timepicker. (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-timepicker-placeholder-color - The placeholder text color. (default: var(--dds-text-neutral-subtle))\n * @cssproperty --dds-timepicker-disabled-background - The background color when disabled. (default: var(--dds-background-neutral-stronger))\n * @cssproperty --dds-timepicker-disabled-text - The text color when disabled. (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-timepicker-error-border - The border color for error state. (default: var(--dds-border-negative-base))\n * @cssproperty --dds-timepicker-success-border - The border color for success state. (default: var(--dds-border-positive-base))\n * @cssproperty --dds-timepicker-icon-color - The color of the icons. (default: var(--dds-text-icon-neutral-subtle))\n * @cssproperty --dds-timepicker-clear-icon-color - The color of the clear icon. (default: var(--dds-button-subtle-icon-neutral-enabled))\n * @cssproperty --dds-timepicker-popup-background - The background color of the popup. (default: var(--dds-background-neutral-subtle))\n * @cssproperty --dds-timepicker-popup-shadow - The box shadow of the popup. (default: 0 4px 6px -1px rgb(0 0 0 / 8%), 0 2px 4px -1px rgb(0 0 0 / 6%))\n *\n * @cssproperty --dds-timepicker-padding-xs - The padding for extra small size. (default: var(--dds-spacing-200))\n * @cssproperty --dds-timepicker-padding-sm - The padding for small size. (default: var(--dds-spacing-200))\n * @cssproperty --dds-timepicker-padding-lg - The padding for large size. (default: var(--dds-spacing-300))\n * @cssproperty --dds-timepicker-padding-horizontal - The horizontal padding. (default: var(--dds-spacing-300))\n * @cssproperty --dds-timepicker-padding-vertical - The vertical padding. (default: var(--dds-spacing-200))\n * @cssproperty --dds-timepicker-gap - The gap between elements. (default: var(--dds-spacing-100))\n * @cssproperty --dds-timepicker-icon-gap - The gap between icons. (default: var(--dds-spacing-200))\n * @cssproperty --dds-timepicker-action-gap - The gap between action elements. (default: var(--dds-spacing-200))\n * @cssproperty --dds-timepicker-action-padding - The padding for action elements. (default: var(--dds-spacing-300))\n * @cssproperty --dds-timepicker-clear-icon-width - The width of the clear icon. (default: var(--dds-spacing-800))\n * @cssproperty --dds-timepicker-dropdown-icon-right - The right position of the dropdown icon. (default: var(--dds-spacing-600))\n * @cssproperty --dds-timepicker-min-width - The minimum width of the timepicker. (default: 7.5rem)\n *\n */\nexport default class DapDSTimePicker extends GenericFormElement {\n  static tagName = 'dap-ds-timepicker'\n\n  static dependencies = {\n    'dap-ds-form-label': DapDSFormLabel,\n    'dap-ds-tooltip': DapDSTooltip,\n    'dap-ds-icon-button': DapDSIconButton,\n    'dap-ds-icon': DapDSIcon,\n    'dap-ds-typography': DapDSTypography,\n    'dap-ds-popup': DapDSPopup,\n    'dap-ds-icon-loading-spinner': SystemLoadingSpinner,\n    'dap-ds-icon-time-line': SystemTimeLine,\n    'dap-ds-time-grid': DapDSTimeGrid,\n    'dap-ds-feedback': DapDSFeedback,\n  }\n\n  private static nextId = 0\n\n  private readonly inputId: string\n  private readonly labelId: string\n  private readonly descriptionId: string\n\n  @query('.combobox__input') private readonly triggerInput!: HTMLInputElement\n  @query('#time-grid') private readonly timeGrid!: DapDSTimeGrid\n\n  /** The value of the timepicker (selected time).\n   * @type {Dayjs | string | Date | number}\n   */\n  @property({ attribute: true })\n  override value?: Dayjs | string | Date | number\n\n  // Internal storage for the Dayjs time value\n  private _timeValue?: Dayjs\n\n  // The selected time value (Dayjs object) - internal use only\n  private get timeValue(): Dayjs | undefined {\n    return this._timeValue\n  }\n\n  private set timeValue(value: Dayjs | undefined) {\n    this._timeValue = value\n  }\n\n  /** The minimum time of the timepicker. This time will be the minimum selectable time.\n   * @type {string}\n   * @default '00:00'\n   */\n  @property({ type: String }) minTime = '00:00'\n\n  /** The maximum time of the timepicker. This time will be the maximum selectable time.\n   * @type {string}\n   * @default '23:59'\n   */\n  @property({ type: String }) maxTime = '23:59'\n\n  /** The step interval in minutes for the time input.\n   * @type {number}\n   * @default 5\n   */\n  @property({ type: Number }) step = 5\n\n  /** The placement of the dropdown of the timepicker.\n   * @type {'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end'}\n   */\n  @property({ reflect: true }) placement: PopupPlacement = 'bottom-start'\n\n  /** The open state of the timepicker. */\n  @property({ type: Boolean, reflect: true }) opened = false\n\n  /** Whether the time picker should open on typing. */\n  @property({ type: Boolean }) openTimeOnInput = false\n\n  /** Whether the time picker should send an empty event on typing. */\n  @property({ type: Boolean }) sendEmptyEventOnInput = false\n\n  /** The placeholder of the timepicker. */\n  @property() placeholder: string | null\n\n  /** The loading state of the timepicker. */\n  @property({ type: Boolean }) loading?: boolean = false\n\n  /** The format of the timepicker. This is the time format used for display and validation.\n   * @type {string}\n   * @default 'HH:mm'\n   */\n  @property({ type: String }) format = 'HH:mm'\n\n  /** Whether the clear button should be shown. */\n  @property({ type: String }) clearButton?: string = 'true'\n\n  /** The aria label of the clear button. */\n  @property({ type: String }) clearButtonAriaLabel?: string\n\n  /** `data-testid` for the clear button. */\n  @property() clearButtonTestId = 'timepicker-clear-button'\n\n  /** `data-testid` for the time indicator button that opens the grid. */\n  @property() timeButtonTestId = 'timepicker-time-button'\n\n  /** The floating strategy of the timepicker. */\n  @property({ type: String }) floatingStrategy: FloatingStrategy = 'fixed'\n\n  /** Whether to keep popup open when trigger leaves viewport. */\n  @property({ type: Boolean }) disableViewportAutoClose: boolean = false\n\n  /** The locale of the timepicker. By default it uses the global locale from dayjs.\n   * @type {'hu' | 'en' | 'de'}\n   */\n  @property({ type: String }) locale: string = dayjs.locale()\n\n  /** Whether the dropdown should close when a time is selected. */\n  @property({ type: Boolean }) closeOnSelection = false\n\n  /** Whether to show the seconds column in the time picker. */\n  @property({ type: Boolean }) showSeconds = false\n\n  /** The step interval in seconds for the time input.\n   * @type {number}\n   * @default 1\n   */\n  @property({ type: Number }) secondsStep = 1\n\n  /** Callback function to determine if a specific time should be disabled.\n   * @param {number} hour - The hour to check (0-23)\n   * @param {number} minute - The minute to check (0-59)\n   * @param {number} second - The second to check (0-59, optional)\n   * @returns {boolean} True if the time should be disabled\n   */\n  @property({ attribute: false }) disabledTime?: (\n    hour: number,\n    minute: number,\n    second?: number,\n  ) => boolean\n\n  /** Whether to hide disabled times from the grid or show them as disabled.\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean }) hideDisabledTimes = false\n\n  /** Array of preset time slots for quick selection.\n   * @type {TimePreset[]}\n   */\n  @property({ type: Array, attribute: false }) presets?: TimePreset[]\n\n  @state() private setValueState: boolean = true\n\n  static readonly styles = unsafeCSS(styles)\n\n  private languageChangeHandler = () => {\n    // Update locale when language changes, but only if locale wasn't explicitly set via attribute\n    if (!this.hasAttribute('locale')) {\n      const newLocale = i18next.language || dayjs.locale()\n      if (this.locale !== newLocale) {\n        this.locale = newLocale\n        dayjs.locale(newLocale)\n        this.requestUpdate()\n      }\n    }\n  }\n\n  constructor() {\n    super()\n    DapDSTimePicker.nextId++\n    const uniqueSuffix =\n      typeof crypto !== 'undefined' && crypto.randomUUID\n        ? crypto.randomUUID().slice(0, 8)\n        : Date.now().toString(36)\n    this.inputId = `input-${DapDSTimePicker.nextId}-${uniqueSuffix}`\n    this.labelId = `label-${DapDSTimePicker.nextId}-${uniqueSuffix}`\n    this.descriptionId = `description-${DapDSTimePicker.nextId}-${uniqueSuffix}`\n    // Initialize the feedbackId from FeedbackMixin\n    this.feedbackId = `feedback-${DapDSTimePicker.nextId}-${uniqueSuffix}`\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    // Listen for language changes to update the locale\n    i18next.on('languageChanged', this.languageChangeHandler)\n    // Initialize locale from current i18next language if not explicitly set via attribute\n    if (!this.hasAttribute('locale')) {\n      const currentLang = i18next.language || dayjs.locale()\n      if (this.locale !== currentLang) {\n        this.locale = currentLang\n        dayjs.locale(currentLang)\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    // Clean up language change listener\n    i18next.off('languageChanged', this.languageChangeHandler)\n  }\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n\n    // Sync internal timeValue with public value\n    this.syncTimeValue()\n\n    if (this.timeValue) {\n      this.triggerInput.value = this.getFormattedValue()\n      this.updateTimeGridSelection()\n    }\n  }\n\n  // Override attributeChangedCallback to sync internal state when value changes\n  attributeChangedCallback(name: string, oldValue: any, newValue: any) {\n    super.attributeChangedCallback(name, oldValue, newValue)\n\n    if (name === 'value' && newValue !== oldValue) {\n      this.syncTimeValue()\n      this.requestUpdate()\n    }\n  }\n\n  /**\n   * Normalizes a time value to a Dayjs object.\n   * Handles Dayjs objects, Date objects, strings (HH:mm or HH:mm:ss format, or date strings), and undefined/null.\n   */\n  private normalizeTime(\n    value: Dayjs | string | Date | number | undefined | null,\n  ): Dayjs | undefined {\n    if (value === undefined || value === null) {\n      return undefined\n    }\n\n    // If it's already a Dayjs object, return it\n    if (dayjs.isDayjs(value)) {\n      return value\n    }\n\n    // If it's a Date object, convert it to Dayjs\n    if (value instanceof Date) {\n      return dayjs(value)\n    }\n\n    // If it's a number (timestamp), convert it\n    if (typeof value === 'number') {\n      return dayjs(value)\n    }\n\n    // If it's a string, try to parse it\n    if (typeof value === 'string') {\n      const trimmed = value.trim()\n\n      // First, check if it's a time format (HH:mm or HH:mm:ss)\n      const timeRegex = /^([0-1]?[0-9]|2[0-3]):[0-5][0-9](:[0-5][0-9])?$/\n      if (timeRegex.test(trimmed)) {\n        // It's a time string, parse it with a dummy date\n        return dayjs(`2000-01-01 ${trimmed}`)\n      }\n\n      // Check if it's a numeric timestamp string\n      if (/^\\d+$/.test(trimmed)) {\n        const numValue = Number(trimmed)\n        // Check if it's seconds (typically 10 digits, less than 10000000000)\n        if (numValue > 0 && numValue < 10000000000) {\n          return dayjs(numValue * 1000)\n        }\n        // Check if it's a valid timestamp (milliseconds since epoch)\n        if (numValue >= 0 && numValue <= 4102444800000) {\n          return dayjs(numValue)\n        }\n      }\n\n      // Try to parse it as a date string (dayjs will handle various formats)\n      const parsed = dayjs(trimmed)\n      if (parsed.isValid()) {\n        return parsed\n      }\n\n      // If all else fails, return undefined\n      return undefined\n    }\n\n    return undefined\n  }\n\n  // Sync internal _timeValue with public value property\n  private syncTimeValue() {\n    const normalized = this.normalizeTime(this.value)\n    this._timeValue = normalized\n    // Update the value to be a Dayjs object if it was normalized from a string/Date/number\n    // This ensures the value is always in the correct format\n    if (normalized) {\n      // Only update if the current value is not already the same Dayjs object\n      if (\n        !dayjs.isDayjs(this.value) ||\n        !normalized.isSame(this.value, 'minute')\n      ) {\n        this.value = normalized\n      }\n    } else if (this.value !== undefined && this.value !== null) {\n      // Clear the value if normalization failed\n      this.value = undefined\n    }\n  }\n\n  protected updated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.updated(_changedProperties)\n\n    if (_changedProperties.has('value')) {\n      const normalized = this.normalizeTime(this.value)\n      if (normalized) {\n        this._timeValue = normalized\n        // Update the internal value to be a Dayjs object\n        // Only update if it's different to prevent unnecessary updates\n        if (!dayjs.isDayjs(this.value) || !normalized.isSame(this.value)) {\n          this.value = normalized\n        }\n      } else {\n        this._timeValue = undefined\n        // Only clear if there's actually a value to clear\n        if (this.value !== undefined && this.value !== null) {\n          this.value = undefined\n        }\n      }\n      if (this.setValueState) {\n        this.triggerInput.value = this.getFormattedValue()\n        this.updateTimeGridSelection()\n      }\n      this.setValidity()\n    }\n\n    if (_changedProperties.has('step') && this.timeGrid) {\n      this.timeGrid.step = this.step\n    }\n\n    if (_changedProperties.has('minTime') && this.timeGrid) {\n      this.timeGrid.minTime = this.minTime\n    }\n\n    if (_changedProperties.has('maxTime') && this.timeGrid) {\n      this.timeGrid.maxTime = this.maxTime\n    }\n\n    if (_changedProperties.has('locale') && this.timeGrid) {\n      this.timeGrid.locale = this.locale\n    }\n\n    if (_changedProperties.has('showSeconds') && this.timeGrid) {\n      this.timeGrid.showSeconds = this.showSeconds\n    }\n\n    if (_changedProperties.has('secondsStep') && this.timeGrid) {\n      this.timeGrid.secondsStep = this.secondsStep\n    }\n\n    if (_changedProperties.has('disabledTime') && this.timeGrid) {\n      this.timeGrid.disabledTime = this.disabledTime\n    }\n\n    if (_changedProperties.has('hideDisabledTimes') && this.timeGrid) {\n      this.timeGrid.hideDisabledTimes = this.hideDisabledTimes\n    }\n\n    if (_changedProperties.has('presets') && this.timeGrid) {\n      this.timeGrid.presets = this.presets\n    }\n  }\n\n  private updateTimeGridSelection() {\n    if (this.timeValue && this.timeGrid) {\n      this.timeGrid.selectedHour = this.timeValue.hour()\n      this.timeGrid.selectedMinute = this.timeValue.minute()\n      if (this.showSeconds) {\n        this.timeGrid.selectedSecond = this.timeValue.second()\n      }\n    }\n  }\n\n  private getHourValue(): number {\n    return this.timeValue ? this.timeValue.hour() : 12\n  }\n\n  private getMinuteValue(): number {\n    return this.timeValue ? this.timeValue.minute() : 0\n  }\n\n  private getSecondValue(): number {\n    return this.timeValue ? this.timeValue.second() : 0\n  }\n\n  getFormattedValue() {\n    if (!this.timeValue) {\n      return ''\n    }\n\n    return dayjs(this.timeValue).format(this.format)\n  }\n\n  isValidTime(value: string) {\n    if (!value) {\n      return false\n    }\n\n    // Check if the time format is valid (supports both HH:mm and HH:mm:ss)\n    const timeRegex = this.showSeconds\n      ? /^([0-1]?[0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]$/\n      : /^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$/\n\n    if (!timeRegex.test(value)) {\n      return false\n    }\n\n    // Check if time is within min/max range\n    const inputTime = dayjs(`2000-01-01 ${value}`)\n    const minTime = dayjs(`2000-01-01 ${this.minTime}`)\n    const maxTime = dayjs(`2000-01-01 ${this.maxTime}`)\n\n    const isInRange =\n      inputTime.isSame(minTime) ||\n      (inputTime.isAfter(minTime) && inputTime.isBefore(maxTime)) ||\n      inputTime.isSame(maxTime)\n\n    if (!isInRange) {\n      return false\n    }\n\n    // Check if time is disabled via callback\n    if (this.disabledTime) {\n      const hour = inputTime.hour()\n      const minute = inputTime.minute()\n      const second = this.showSeconds ? inputTime.second() : undefined\n      return !this.disabledTime(hour, minute, second)\n    }\n\n    return true\n  }\n\n  isValueValid() {\n    if (!this.timeValue) {\n      return true\n    }\n\n    return this.isInputValid()\n  }\n\n  isInputValid() {\n    return this.isValidTime(this.triggerInput.value)\n  }\n\n  setValue(\n    value?: Dayjs,\n    setInputValue: boolean = true,\n    sendEmptyEventOnInput: boolean = true,\n  ) {\n    this._timeValue = value\n    this.value = value\n\n    if (setInputValue) {\n      this.setValueState = true\n      this.triggerInput.value = this.getFormattedValue()\n      this.updateTimeGridSelection()\n    } else {\n      this.setValueState = false\n    }\n\n    // Update form value for form participation\n    if (this.internals) {\n      this.internals.setFormValue(\n        this.value\n          ? this.showSeconds\n            ? this.value.format('HH:mm:ss')\n            : this.value.format('HH:mm')\n          : this.defaultValue,\n      )\n    }\n\n    this.setValidity()\n\n    if (this.closeOnSelection) {\n      this.hideTimePicker()\n    }\n\n    if (sendEmptyEventOnInput) {\n      const eventData = {\n        value: this.timeValue,\n        hour: this.timeValue?.hour(),\n        minute: this.timeValue?.minute(),\n        ...(this.showSeconds && { second: this.timeValue?.second() }),\n      }\n\n      this.emit('dds-change', eventData)\n      this.emit('dds-valid-time', {\n        value: this.triggerInput.value,\n        hour: this.timeValue?.hour(),\n        minute: this.timeValue?.minute(),\n        ...(this.showSeconds && { second: this.timeValue?.second() }),\n      })\n    }\n  }\n\n  async clearSelection() {\n    this.setValue(undefined, true, true)\n  }\n\n  private readonly handleDocumentMouseDown = (event: MouseEvent) => {\n    const path = event.composedPath()\n    if (this && !path.includes(this)) {\n      this.hideTimePicker()\n    }\n  }\n\n  private readonly handlePopupAutoClose = () => {\n    this.hideTimePicker({ skipFocus: true })\n  }\n\n  private readonly handleInput = (event: InputEvent) => {\n    const input = event.target as HTMLInputElement\n\n    if (!input.value) {\n      this.setValue(undefined, false, true)\n    } else {\n      if (this.isInputValid()) {\n        const time = dayjs(`2000-01-01 ${input.value}`)\n        this.setValue(time, false)\n        this.emit('dds-valid-time', {\n          value: input.value,\n          type: 'valid',\n          minute: time.minute(),\n          hour: time.hour(),\n        })\n      } else {\n        this.setValue(undefined, false, this.sendEmptyEventOnInput)\n        this.emit('dds-invalid-time', {\n          value: input.value,\n          type: 'invalid',\n          hour: input.value.split(':')[0],\n          minute: input.value.split(':')[1],\n        })\n      }\n    }\n\n    if (this.openTimeOnInput && !this.opened) {\n      this.showTimePicker()\n    }\n\n    this.emit('dds-input', { value: input.value })\n  }\n\n  private readonly handleKeyDown = async (event: KeyboardEvent) => {\n    if (event.key === 'Tab') {\n      return\n    }\n\n    if (\n      event.key === 'Enter' ||\n      event.key === 'ArrowDown' ||\n      event.key === 'ArrowUp'\n    ) {\n      event.preventDefault()\n      event.stopPropagation()\n\n      if (!this.opened) {\n        this.showTimePicker()\n      } else {\n        this.hideTimePicker()\n      }\n    }\n  }\n\n  public get focusElement() {\n    return this.triggerInput\n  }\n\n  private readonly handleClick = () => {\n    if (!this.opened) {\n      this.showTimePicker()\n    } else {\n      this.hideTimePicker()\n    }\n  }\n\n  private readonly handleClearClick = () => {\n    if (!this.disabled) {\n      this.clearSelection()\n\n      this.triggerInput.focus()\n      this.setValidity()\n\n      this.hideTimePicker()\n\n      this.emit('dds-clear')\n    }\n  }\n\n  private readonly handleTimeChange = (event: CustomEvent<TimeSelection>) => {\n    const { hour, minute, second } = event.detail\n    const time = dayjs()\n      .hour(hour)\n      .minute(minute)\n      .second(second ?? 0)\n      .millisecond(0)\n    this.setValue(time, true, true)\n  }\n\n  async showTimePicker() {\n    if (this.disabled || this.readonly || this.opened) {\n      return\n    }\n\n    this.opened = true\n\n    document.addEventListener('mousedown', this.handleDocumentMouseDown)\n  }\n\n  async hideTimePicker(options?: { skipFocus?: boolean }) {\n    if (!this.opened) {\n      return\n    }\n\n    this.opened = false\n\n    document.removeEventListener('mousedown', this.handleDocumentMouseDown)\n\n    await this.updateComplete\n    if (!options?.skipFocus) {\n      this.focus()\n    }\n  }\n\n  private readonly handleFocus = () => {\n    this.emit('dds-focus')\n  }\n\n  private readonly handleBlur = () => {\n    this.emit('dds-blur')\n  }\n\n  private readonly handlePopupOpened = () => {\n    // When popup opens, scroll to selected time in the grid\n    if (this.timeGrid) {\n      // Use requestAnimationFrame to ensure the popup is fully visible\n      requestAnimationFrame(() => {\n        this.timeGrid.scrollToSelectedTime()\n      })\n    }\n  }\n\n  // custom validation\n  getValidity() {\n    return !!this.value\n  }\n\n  get validity(): ValidityState {\n    if (this.internals.validity) {\n      return this.internals.validity\n    } else {\n      return getValidityStateObject({\n        valueMissing: this.required && !this.getValidity(),\n        patternMismatch: !this.isValueValid(),\n      })\n    }\n  }\n\n  checkValidity() {\n    return this.required && this.getValidity() && this.isValueValid()\n  }\n\n  reportValidity() {\n    return this.required && this.getValidity() && this.isValueValid()\n  }\n\n  setValidity() {\n    if (!this.checkValidity()) {\n      this.internals.setValidity(\n        {\n          valueMissing: this.required && !this.getValidity(),\n          patternMismatch: !this.isValueValid(),\n        },\n        this.validationMessage,\n        this.triggerInput,\n      )\n    } else {\n      this.internals.setValidity({})\n    }\n  }\n\n  handleInvalid(event: Event) {\n    event.preventDefault()\n  }\n\n  render() {\n    return html` <div class=\"label-container\">\n        ${formLabelTemplate({\n          label: this.label,\n          id: this.labelId,\n          htmlFor: this.inputId,\n          size: this.size,\n          required: this.required,\n          requiredLabel: this.requiredLabel,\n          optional: this.optional,\n          optionalLabel: this.optionalLabel,\n          disabled: this.disabled,\n          subtle: this.subtle,\n          noMargin: !!this.description,\n          hideLabel: this.hideLabel,\n        })}\n        ${this.tooltip &&\n        html` <dap-ds-tooltip\n          part=\"tooltip\"\n          content=${this.tooltip}\n          mode=\"toggle\"\n          placement=${this.tooltipPlacement}>\n          <dap-ds-icon-button\n            slot=\"trigger\"\n            size=${this.size as 'xs' | 'sm' | 'md' | 'lg'}\n            iconSize=${this.size === 'xs' ? '16' : '22'}\n            clean>\n            <dap-ds-icon\n              name=\"information-line\"\n              aria-label=${this.tooltipAriaLabel}\n              class=\"info-button\"></dap-ds-icon>\n          </dap-ds-icon-button>\n        </dap-ds-tooltip>`}\n      </div>\n      ${this.description &&\n      html`\n        <dap-ds-typography\n          part=\"description\"\n          variant=\"description\"\n          class=${clsx('input-description')}\n          size=${ifDefined(this.size as CommonFormElementSize)}\n          id=${this.descriptionId}>\n          ${this.description}\n        </dap-ds-typography>\n      `}\n      <div>\n        <dap-ds-popup\n          part=\"base\"\n          class=\"select-popup\"\n          overflow\n          ?opened=${this.opened}\n          ?hasArrow=${false}\n          placement=${this.placement}\n          floatingStrategy=${this.floatingStrategy}\n          maxHeight=\"auto\"\n          offset=\"4\"\n          ?disableViewportAutoClose=${this.disableViewportAutoClose}\n          @dds-close=${this.handlePopupAutoClose}\n          @dds-opened=${this.handlePopupOpened}>\n          <div\n            slot=\"trigger\"\n            part=\"trigger\"\n            class=\"${clsx('select', `select--${this.size}`, {\n              'select--disabled': this.disabled,\n              'select--readonly': this.readonly,\n              'select--opened': this.opened,\n              'select--loading': this.loading,\n              'select--success': this.status === 'success',\n              'select--error': this.status === 'error',\n            })}\">\n            <input\n              part=\"input\"\n              role=\"combobox\"\n              class=\"${clsx('combobox__input', 'input', `input--${this.size}`, {\n                'input--disabled': this.disabled,\n                'input--readonly': this.readonly,\n              })}\"\n              id=${this.inputId}\n              value=${this.getFormattedValue()}\n              aria-expanded=${this.opened}\n              aria-haspopup=\"dialog\"\n              aria-labelledby=${ifDefined(this.label ? this.labelId : nothing)}\n              aria-describedby=\"${ifDefined(\n                this.description ? this.descriptionId : nothing,\n              )} ${ifDefined(this.feedback ? this.feedbackId : nothing)}\"\n              aria-disabled=${this.disabled}\n              aria-controls=\"time-grid\"\n              aria-autocomplete=\"none\"\n              ?required=${this.required}\n              ?readonly=${this.readonly}\n              ?autofocus=${this.autofocus}\n              ?disabled=${this.disabled}\n              autocomplete=${this.autocomplete as any}\n              placeholder=${ifDefined(this.placeholder ?? '')}\n              @blur=${this.handleBlur}\n              @focus=${this.handleFocus}\n              @input=${this.handleInput}\n              @keydown=${this.handleKeyDown}\n              @invalid=${this.handleInvalid}\n              @click=${this.handleClick} />\n            <div\n              class=\"${clsx('select-action', `select-action--${this.size}`, {\n                'select-action--disabled': this.disabled,\n                'select-action--readonly': this.readonly,\n                'select-action--opened': this.opened,\n              })}\">\n              ${this.clearButton === 'true' && !this.readonly\n                ? html`<div class=\"${clsx('clear-icon')}\">\n                    <dap-ds-icon-button\n                      icon=\"close-line\"\n                      part=\"clear-button\"\n                      data-testid=${this.clearButtonTestId}\n                      aria-label=${ifDefined(\n                        this.clearButtonAriaLabel ??\n                          t('clear', { lng: this.locale }),\n                      )}\n                      ?disabled=${this.disabled}\n                      @click=${this.handleClearClick}></dap-ds-icon-button>\n                  </div>`\n                : nothing}\n              <div\n                class=\"${clsx('indicator-icon', {\n                  'indicator-icon--loading': this.loading,\n                })}\">\n                ${this.loading\n                  ? html`<dap-ds-icon-loading-spinner></dap-ds-icon-loading-spinner>`\n                  : html`<dap-ds-icon-time-line\n                      aria-hidden=\"true\"\n                      part=\"time-button\"\n                      data-testid=${this.timeButtonTestId}\n                      class=${clsx('time-icon')}\n                      @click=${this.handleClick}></dap-ds-icon-time-line>`}\n              </div>\n            </div>\n          </div>\n          <dap-ds-time-grid\n            id=\"time-grid\"\n            part=\"time-grid\"\n            .selectedHour=${this.getHourValue()}\n            .selectedMinute=${this.getMinuteValue()}\n            .selectedSecond=${this.getSecondValue()}\n            .minTime=${this.minTime}\n            .maxTime=${this.maxTime}\n            .step=${this.step}\n            .locale=${this.locale}\n            .showSeconds=${this.showSeconds}\n            .secondsStep=${this.secondsStep}\n            .disabledTime=${this.disabledTime}\n            .hideDisabledTimes=${this.hideDisabledTimes}\n            .presets=${this.presets}\n            @dds-change=${(event: CustomEvent<TimeSelection>) => {\n              event.stopPropagation()\n              event.preventDefault()\n              this.handleTimeChange(event)\n            }}>\n          </dap-ds-time-grid>\n        </dap-ds-popup>\n        ${this.feedback &&\n        html`<dap-ds-feedback\n          part=\"feedback\"\n          feedbackType=${ifDefined(this.feedbackType)}\n          feedbackSize=\"${ifDefined(this.size as 'lg' | 'sm' | 'xs')}\"\n          id=\"feedback\">\n          ${this.feedback}\n        </dap-ds-feedback>`}\n      </div>`\n  }\n}\n"],"names":["_DapDSTimePicker","_a","GenericFormElement","dayjs","newLocale","i18next","event","path","input","time","__async","hour","minute","second","uniqueSuffix","value","currentLang","_changedProperties","name","oldValue","newValue","trimmed","numValue","parsed","normalized","inputTime","minTime","maxTime","setInputValue","sendEmptyEventOnInput","eventData","__spreadValues","_b","_c","_d","_e","_f","options","getValidityStateObject","html","formLabelTemplate","clsx","ifDefined","nothing","t","DapDSFormLabel","DapDSTooltip","DapDSIconButton","DapDSIcon","DapDSTypography","DapDSPopup","SystemLoadingSpinner","SystemTimeLine","DapDSTimeGrid","DapDSFeedback","unsafeCSS","styles","__decorateClass","query","property","state","DapDSTimePicker"],"mappings":"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"}
+{"version":3,"file":"timepicker.component.js","sources":["../../../src/components/timepicker/timepicker.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport dayjs, { Dayjs } from 'dayjs'\nimport { nothing, PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport {\n  CommonFormElementSize,\n  FloatingStrategy,\n  PopupPlacement,\n  TimePreset,\n  TimeSelection,\n} from '@/common/types'\nimport { getValidityStateObject } from '@/common/utils'\nimport { GenericFormElement } from '@/internal/mixin/genericFormElement'\nimport { formLabelTemplate } from '@/internal/templates/formLabel'\nimport { i18next, t } from '@/localization/localization'\n\nimport DapDSFeedback from '../feedback/feedback.component'\nimport DapDSFormLabel from '../form/form-label/form-label.component'\nimport DapDSIcon from '../icon/icon.component'\nimport DapDSIconButton from '../icon-button/icon-button.component'\nimport SystemLoadingSpinner from '../icons/system/system-loading-spinner/system-loading-spinner.component'\nimport SystemTimeLine from '../icons/system/system-time-line/system-time-line.component'\nimport DapDSPopup from '../popup/popup.component'\nimport DapDSTooltip from '../tooltip/tooltip.component'\nimport DapDSTypography from '../typography/typography.component'\nimport DapDSTimeGrid from './time-grid.component'\nimport styles from './timepicker.scss?inline'\n\n/**\n * `dap-ds-timepicker`\n * @summary A timepicker is a graphical user interface widget that allows the user to select a time from a time range.\n * @element dap-ds-timepicker\n * @title - Timepicker\n *\n * @property {Dayjs | string} value - The value of the timepicker. Can be a Dayjs object or a string in 'HH:mm' format.\n * @property {string} label - The label of the timepicker.\n * @property {boolean} hideLabel - Visually hides the label while keeping it available to assistive technology. (default: false)\n * @property {string} description - The description of the timepicker.\n * @property {'xs' | 'sm' | 'lg'} size - The size of the timepicker.\n * @property {boolean} disabled - The disabled state of the timepicker.\n * @property {boolean} required - The required state of the timepicker.\n * @property {boolean} readonly - The readonly state of the timepicker.\n * @property {boolean} autofocus - The autofocus state of the timepicker.\n * @property {string} tooltip - The tooltip of the timepicker.\n * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the timepicker.\n * @property {string} feedback - The feedback of the timepicker.\n * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the timepicker.\n * @property {boolean} optional - The optional state of the timepicker.\n * @property {string} optionalLabel - The optional label of the timepicker.\n * @property {string} requiredLabel - The required indicator of the timepicker. (default: '*')\n * @property {boolean} subtle - The weight of the label. Default is `false`\n * @property {string} autocomplete - The autocomplete of the timepicker.\n * @property {string} placeholder - The placeholder of the timepicker.\n * @property {boolean} loading - The loading state of the timepicker.\n * @property {string} format - The format of the timepicker. Defaults to 'HH:mm'.\n * @property {string} minTime - The minimum time of the timepicker. Format: 'HH:mm'.\n * @property {string} maxTime - The maximum time of the timepicker. Format: 'HH:mm'.\n * @property {number} step - The step interval in minutes. Defaults to 15.\n * @property {boolean} openTimeOnInput - Whether the time picker should open on typing.\n * @property {boolean} sendEmptyEventOnInput - Whether the time picker should send an empty event on typing.\n * @property {string} clearButton - Whether the clear button should be shown. Defaults to 'true'.\n * @property {string} clearButtonAriaLabel - The aria label of the clear button.\n * @property {string} placement - The placement of the dropdown of the timepicker.\n * @property {FloatingStrategy} floatingStrategy - The floating strategy of the timepicker.\n * @property {string} locale - The locale of the timepicker.\n * @property {boolean} closeOnSelection - Whether the dropdown should close when a time is selected.\n * @property {boolean} showSeconds - Whether to show the seconds column in the time picker.\n * @property {number} secondsStep - The step interval in seconds. Defaults to 1.\n * @property {function} disabledTime - Callback to determine if a time should be disabled.\n * @property {boolean} hideDisabledTimes - Whether to hide disabled times or show them as disabled.\n * @property {TimePreset[]} presets - Array of preset time slots for quick selection.\n *\n * @event {{ value: Dayjs | string, hour: number, minute: number, second?: number }} dds-change - Fired when the timepicker value changes.\n * @event {{ value: string }} dds-input - Fired when the timepicker input value changes.\n * @event {{ value: Dayjs | string, hour: number, minute: number, second?: number }} dds-valid-time - Fired when the timepicker input value is valid. Happens on manual input typing.\n * @event {{ value: Dayjs | string, hour: number, minute: number, second?: number, type: 'invalid' | 'out-of-range' }} dds-invalid-time - Fired when the timepicker input value is invalid. Happens on manual input typing.\n * @event {{ void }} dds-clear - Fired when the timepicker is cleared.\n * @event {{ void }} dds-focus - Emitted when the timepicker gains focus.\n * @event {{ void }} dds-blur - Emitted when the timepicker loses focus.\n *\n * @csspart base - The main timepicker container.\n * @csspart trigger - The trigger button of the timepicker.\n * @csspart label - The label of the timepicker.\n * @csspart description - The description of the timepicker.\n * @csspart feedback - The feedback of the timepicker.\n * @csspart tooltip - The tooltip of the timepicker.\n * @csspart input - The input of the timepicker.\n * @csspart clear-button - The clear button of the timepicker.\n * @csspart time-button - The clock icon button of the timepicker.\n * @csspart time-grid - The time grid of the timepicker.\n * @csspart label-base - The base of the label.\n * @csspart label-required - The required indicator of the label.\n * @csspart label-optional - The optional indicator of the label.\n *\n * @cssproperty --dds-timepicker-background - The background color of the timepicker. (default: var(--dds-fields-background-default))\n * @cssproperty --dds-timepicker-border-color - The border color of the timepicker. (default: var(--dds-border-neutral-base))\n * @cssproperty --dds-timepicker-border-width - The border width of the timepicker. (default: var(--dds-border-width-base, 1px))\n * @cssproperty --dds-timepicker-border-radius - The border radius of the timepicker. (default: var(--dds-radius-base))\n * @cssproperty --dds-timepicker-text-color - The text color of the timepicker. (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-timepicker-placeholder-color - The placeholder text color. (default: var(--dds-text-neutral-subtle))\n * @cssproperty --dds-timepicker-disabled-background - The background color when disabled. (default: var(--dds-background-neutral-stronger))\n * @cssproperty --dds-timepicker-disabled-text - The text color when disabled. (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-timepicker-error-border - The border color for error state. (default: var(--dds-border-negative-base))\n * @cssproperty --dds-timepicker-success-border - The border color for success state. (default: var(--dds-border-positive-base))\n * @cssproperty --dds-timepicker-icon-color - The color of the icons. (default: var(--dds-text-icon-neutral-subtle))\n * @cssproperty --dds-timepicker-clear-icon-color - The color of the clear icon. (default: var(--dds-button-subtle-icon-neutral-enabled))\n * @cssproperty --dds-timepicker-popup-background - The background color of the popup. (default: var(--dds-background-neutral-subtle))\n * @cssproperty --dds-timepicker-popup-shadow - The box shadow of the popup. (default: 0 4px 6px -1px rgb(0 0 0 / 8%), 0 2px 4px -1px rgb(0 0 0 / 6%))\n *\n * @cssproperty --dds-timepicker-padding-xs - The padding for extra small size. (default: var(--dds-spacing-200))\n * @cssproperty --dds-timepicker-padding-sm - The padding for small size. (default: var(--dds-spacing-200))\n * @cssproperty --dds-timepicker-padding-lg - The padding for large size. (default: var(--dds-spacing-300))\n * @cssproperty --dds-timepicker-padding-horizontal - The horizontal padding. (default: var(--dds-spacing-300))\n * @cssproperty --dds-timepicker-padding-vertical - The vertical padding. (default: var(--dds-spacing-200))\n * @cssproperty --dds-timepicker-gap - The gap between elements. (default: var(--dds-spacing-100))\n * @cssproperty --dds-timepicker-icon-gap - The gap between icons. (default: var(--dds-spacing-200))\n * @cssproperty --dds-timepicker-action-gap - The gap between action elements. (default: var(--dds-spacing-200))\n * @cssproperty --dds-timepicker-action-padding - The padding for action elements. (default: var(--dds-spacing-300))\n * @cssproperty --dds-timepicker-clear-icon-width - The width of the clear icon. (default: var(--dds-spacing-800))\n * @cssproperty --dds-timepicker-dropdown-icon-right - The right position of the dropdown icon. (default: var(--dds-spacing-600))\n * @cssproperty --dds-timepicker-min-width - The minimum width of the timepicker. (default: 7.5rem)\n *\n */\nexport default class DapDSTimePicker extends GenericFormElement {\n  static tagName = 'dap-ds-timepicker'\n\n  static dependencies = {\n    'dap-ds-form-label': DapDSFormLabel,\n    'dap-ds-tooltip': DapDSTooltip,\n    'dap-ds-icon-button': DapDSIconButton,\n    'dap-ds-icon': DapDSIcon,\n    'dap-ds-typography': DapDSTypography,\n    'dap-ds-popup': DapDSPopup,\n    'dap-ds-icon-loading-spinner': SystemLoadingSpinner,\n    'dap-ds-icon-time-line': SystemTimeLine,\n    'dap-ds-time-grid': DapDSTimeGrid,\n    'dap-ds-feedback': DapDSFeedback,\n  }\n\n  private static nextId = 0\n\n  private readonly inputId: string\n  private readonly labelId: string\n  private readonly descriptionId: string\n\n  @query('.combobox__input') private readonly triggerInput!: HTMLInputElement\n  @query('#time-grid') private readonly timeGrid!: DapDSTimeGrid\n\n  /** The value of the timepicker (selected time).\n   * @type {Dayjs | string | Date | number}\n   */\n  @property({ attribute: true })\n  override value?: Dayjs | string | Date | number\n\n  // Internal storage for the Dayjs time value\n  private _timeValue?: Dayjs\n\n  // The selected time value (Dayjs object) - internal use only\n  private get timeValue(): Dayjs | undefined {\n    return this._timeValue\n  }\n\n  private set timeValue(value: Dayjs | undefined) {\n    this._timeValue = value\n  }\n\n  /** The minimum time of the timepicker. This time will be the minimum selectable time.\n   * @type {string}\n   * @default '00:00'\n   */\n  @property({ type: String }) minTime = '00:00'\n\n  /** The maximum time of the timepicker. This time will be the maximum selectable time.\n   * @type {string}\n   * @default '23:59'\n   */\n  @property({ type: String }) maxTime = '23:59'\n\n  /** The step interval in minutes for the time input.\n   * @type {number}\n   * @default 5\n   */\n  @property({ type: Number }) step = 5\n\n  /** The placement of the dropdown of the timepicker.\n   * @type {'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end'}\n   */\n  @property({ reflect: true }) placement: PopupPlacement = 'bottom-start'\n\n  /** The open state of the timepicker. */\n  @property({ type: Boolean, reflect: true }) opened = false\n\n  /** Whether the time picker should open on typing. */\n  @property({ type: Boolean }) openTimeOnInput = false\n\n  /** Whether the time picker should send an empty event on typing. */\n  @property({ type: Boolean }) sendEmptyEventOnInput = false\n\n  /** The placeholder of the timepicker. */\n  @property() placeholder: string | null\n\n  /** The loading state of the timepicker. */\n  @property({ type: Boolean }) loading?: boolean = false\n\n  /** The format of the timepicker. This is the time format used for display and validation.\n   * @type {string}\n   * @default 'HH:mm'\n   */\n  @property({ type: String }) format = 'HH:mm'\n\n  /** Whether the clear button should be shown. */\n  @property({ type: String }) clearButton?: string = 'true'\n\n  /** The aria label of the clear button. */\n  @property({ type: String }) clearButtonAriaLabel?: string\n\n  /** `data-testid` for the clear button. */\n  @property() clearButtonTestId = 'timepicker-clear-button'\n\n  /** `data-testid` for the time indicator button that opens the grid. */\n  @property() timeButtonTestId = 'timepicker-time-button'\n\n  /** The floating strategy of the timepicker. */\n  @property({ type: String }) floatingStrategy: FloatingStrategy = 'fixed'\n\n  /** Whether to keep popup open when trigger leaves viewport. */\n  @property({ type: Boolean }) disableViewportAutoClose: boolean = false\n\n  /** The locale of the timepicker. By default it uses the global locale from dayjs.\n   * @type {'hu' | 'en' | 'de'}\n   */\n  @property({ type: String }) locale: string = dayjs.locale()\n\n  /** Whether the dropdown should close when a time is selected. */\n  @property({ type: Boolean }) closeOnSelection = false\n\n  /** Whether to show the seconds column in the time picker. */\n  @property({ type: Boolean }) showSeconds = false\n\n  /** The step interval in seconds for the time input.\n   * @type {number}\n   * @default 1\n   */\n  @property({ type: Number }) secondsStep = 1\n\n  /** Callback function to determine if a specific time should be disabled.\n   * @param {number} hour - The hour to check (0-23)\n   * @param {number} minute - The minute to check (0-59)\n   * @param {number} second - The second to check (0-59, optional)\n   * @returns {boolean} True if the time should be disabled\n   */\n  @property({ attribute: false }) disabledTime?: (\n    hour: number,\n    minute: number,\n    second?: number,\n  ) => boolean\n\n  /** Whether to hide disabled times from the grid or show them as disabled.\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean }) hideDisabledTimes = false\n\n  /** Array of preset time slots for quick selection.\n   * @type {TimePreset[]}\n   */\n  @property({ type: Array, attribute: false }) presets?: TimePreset[]\n\n  @state() private setValueState: boolean = true\n  // The value last written from the user's typing. Any other incoming `value` is an\n  // external write (e.g. a framework form reset), which must resync the input text.\n  private inputDrivenValue?: Dayjs | null\n\n  static readonly styles = unsafeCSS(styles)\n\n  private languageChangeHandler = () => {\n    // Update locale when language changes, but only if locale wasn't explicitly set via attribute\n    if (!this.hasAttribute('locale')) {\n      const newLocale = i18next.language || dayjs.locale()\n      if (this.locale !== newLocale) {\n        this.locale = newLocale\n        dayjs.locale(newLocale)\n        this.requestUpdate()\n      }\n    }\n  }\n\n  constructor() {\n    super()\n    DapDSTimePicker.nextId++\n    const uniqueSuffix =\n      typeof crypto !== 'undefined' && crypto.randomUUID\n        ? crypto.randomUUID().slice(0, 8)\n        : Date.now().toString(36)\n    this.inputId = `input-${DapDSTimePicker.nextId}-${uniqueSuffix}`\n    this.labelId = `label-${DapDSTimePicker.nextId}-${uniqueSuffix}`\n    this.descriptionId = `description-${DapDSTimePicker.nextId}-${uniqueSuffix}`\n    // Initialize the feedbackId from FeedbackMixin\n    this.feedbackId = `feedback-${DapDSTimePicker.nextId}-${uniqueSuffix}`\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    // Listen for language changes to update the locale\n    i18next.on('languageChanged', this.languageChangeHandler)\n    // Initialize locale from current i18next language if not explicitly set via attribute\n    if (!this.hasAttribute('locale')) {\n      const currentLang = i18next.language || dayjs.locale()\n      if (this.locale !== currentLang) {\n        this.locale = currentLang\n        dayjs.locale(currentLang)\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    // Clean up language change listener\n    i18next.off('languageChanged', this.languageChangeHandler)\n  }\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n\n    // Sync internal timeValue with public value\n    this.syncTimeValue()\n\n    if (this.timeValue) {\n      this.triggerInput.value = this.getFormattedValue()\n      this.updateTimeGridSelection()\n    }\n  }\n\n  // Override attributeChangedCallback to sync internal state when value changes\n  attributeChangedCallback(name: string, oldValue: any, newValue: any) {\n    super.attributeChangedCallback(name, oldValue, newValue)\n\n    if (name === 'value' && newValue !== oldValue) {\n      this.syncTimeValue()\n      this.requestUpdate()\n    }\n  }\n\n  /**\n   * Normalizes a time value to a Dayjs object.\n   * Handles Dayjs objects, Date objects, strings (HH:mm or HH:mm:ss format, or date strings), and undefined/null.\n   */\n  private normalizeTime(\n    value: Dayjs | string | Date | number | undefined | null,\n  ): Dayjs | undefined {\n    if (value === undefined || value === null) {\n      return undefined\n    }\n\n    // If it's already a Dayjs object, return it\n    if (dayjs.isDayjs(value)) {\n      return value\n    }\n\n    // If it's a Date object, convert it to Dayjs\n    if (value instanceof Date) {\n      return dayjs(value)\n    }\n\n    // If it's a number (timestamp), convert it\n    if (typeof value === 'number') {\n      return dayjs(value)\n    }\n\n    // If it's a string, try to parse it\n    if (typeof value === 'string') {\n      const trimmed = value.trim()\n\n      // First, check if it's a time format (HH:mm or HH:mm:ss)\n      const timeRegex = /^([0-1]?[0-9]|2[0-3]):[0-5][0-9](:[0-5][0-9])?$/\n      if (timeRegex.test(trimmed)) {\n        // It's a time string, parse it with a dummy date\n        return dayjs(`2000-01-01 ${trimmed}`)\n      }\n\n      // Check if it's a numeric timestamp string\n      if (/^\\d+$/.test(trimmed)) {\n        const numValue = Number(trimmed)\n        // Check if it's seconds (typically 10 digits, less than 10000000000)\n        if (numValue > 0 && numValue < 10000000000) {\n          return dayjs(numValue * 1000)\n        }\n        // Check if it's a valid timestamp (milliseconds since epoch)\n        if (numValue >= 0 && numValue <= 4102444800000) {\n          return dayjs(numValue)\n        }\n      }\n\n      // Try to parse it as a date string (dayjs will handle various formats)\n      const parsed = dayjs(trimmed)\n      if (parsed.isValid()) {\n        return parsed\n      }\n\n      // If all else fails, return undefined\n      return undefined\n    }\n\n    return undefined\n  }\n\n  // Sync internal _timeValue with public value property\n  private syncTimeValue() {\n    const normalized = this.normalizeTime(this.value)\n    this._timeValue = normalized\n    // Update the value to be a Dayjs object if it was normalized from a string/Date/number\n    // This ensures the value is always in the correct format\n    if (normalized) {\n      // Only update if the current value is not already the same Dayjs object\n      if (\n        !dayjs.isDayjs(this.value) ||\n        !normalized.isSame(this.value, 'minute')\n      ) {\n        this.value = normalized\n      }\n    } else if (this.value !== undefined && this.value !== null) {\n      // Clear the value if normalization failed\n      this.value = undefined\n    }\n  }\n\n  protected willUpdate(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.willUpdate(_changedProperties)\n\n    if (\n      _changedProperties.has('value') &&\n      this.value !== this.inputDrivenValue\n    ) {\n      this.setValueState = true\n      this.inputDrivenValue = undefined\n    }\n  }\n\n  protected updated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.updated(_changedProperties)\n\n    if (_changedProperties.has('value')) {\n      const normalized = this.normalizeTime(this.value)\n      if (normalized) {\n        this._timeValue = normalized\n        // Update the internal value to be a Dayjs object\n        // Only update if it's different to prevent unnecessary updates\n        if (!dayjs.isDayjs(this.value) || !normalized.isSame(this.value)) {\n          this.value = normalized\n        }\n      } else {\n        this._timeValue = undefined\n        // Only clear if there's actually a value to clear\n        if (this.value !== undefined && this.value !== null) {\n          this.value = undefined\n        }\n      }\n      if (this.setValueState) {\n        this.triggerInput.value = this.getFormattedValue()\n        this.updateTimeGridSelection()\n      }\n      this.setValidity()\n    }\n\n    if (_changedProperties.has('step') && this.timeGrid) {\n      this.timeGrid.step = this.step\n    }\n\n    if (_changedProperties.has('minTime') && this.timeGrid) {\n      this.timeGrid.minTime = this.minTime\n    }\n\n    if (_changedProperties.has('maxTime') && this.timeGrid) {\n      this.timeGrid.maxTime = this.maxTime\n    }\n\n    if (_changedProperties.has('locale') && this.timeGrid) {\n      this.timeGrid.locale = this.locale\n    }\n\n    if (_changedProperties.has('showSeconds') && this.timeGrid) {\n      this.timeGrid.showSeconds = this.showSeconds\n    }\n\n    if (_changedProperties.has('secondsStep') && this.timeGrid) {\n      this.timeGrid.secondsStep = this.secondsStep\n    }\n\n    if (_changedProperties.has('disabledTime') && this.timeGrid) {\n      this.timeGrid.disabledTime = this.disabledTime\n    }\n\n    if (_changedProperties.has('hideDisabledTimes') && this.timeGrid) {\n      this.timeGrid.hideDisabledTimes = this.hideDisabledTimes\n    }\n\n    if (_changedProperties.has('presets') && this.timeGrid) {\n      this.timeGrid.presets = this.presets\n    }\n  }\n\n  private updateTimeGridSelection() {\n    if (this.timeValue && this.timeGrid) {\n      this.timeGrid.selectedHour = this.timeValue.hour()\n      this.timeGrid.selectedMinute = this.timeValue.minute()\n      if (this.showSeconds) {\n        this.timeGrid.selectedSecond = this.timeValue.second()\n      }\n    }\n  }\n\n  private getHourValue(): number {\n    return this.timeValue ? this.timeValue.hour() : 12\n  }\n\n  private getMinuteValue(): number {\n    return this.timeValue ? this.timeValue.minute() : 0\n  }\n\n  private getSecondValue(): number {\n    return this.timeValue ? this.timeValue.second() : 0\n  }\n\n  getFormattedValue() {\n    if (!this.timeValue) {\n      return ''\n    }\n\n    return dayjs(this.timeValue).format(this.format)\n  }\n\n  isValidTime(value: string) {\n    if (!value) {\n      return false\n    }\n\n    // Check if the time format is valid (supports both HH:mm and HH:mm:ss)\n    const timeRegex = this.showSeconds\n      ? /^([0-1]?[0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]$/\n      : /^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$/\n\n    if (!timeRegex.test(value)) {\n      return false\n    }\n\n    // Check if time is within min/max range\n    const inputTime = dayjs(`2000-01-01 ${value}`)\n    const minTime = dayjs(`2000-01-01 ${this.minTime}`)\n    const maxTime = dayjs(`2000-01-01 ${this.maxTime}`)\n\n    const isInRange =\n      inputTime.isSame(minTime) ||\n      (inputTime.isAfter(minTime) && inputTime.isBefore(maxTime)) ||\n      inputTime.isSame(maxTime)\n\n    if (!isInRange) {\n      return false\n    }\n\n    // Check if time is disabled via callback\n    if (this.disabledTime) {\n      const hour = inputTime.hour()\n      const minute = inputTime.minute()\n      const second = this.showSeconds ? inputTime.second() : undefined\n      return !this.disabledTime(hour, minute, second)\n    }\n\n    return true\n  }\n\n  isValueValid() {\n    if (!this.timeValue) {\n      return true\n    }\n\n    return this.isInputValid()\n  }\n\n  isInputValid() {\n    return this.isValidTime(this.triggerInput.value)\n  }\n\n  setValue(\n    value?: Dayjs,\n    setInputValue: boolean = true,\n    sendEmptyEventOnInput: boolean = true,\n  ) {\n    this._timeValue = value\n    this.value = value\n\n    if (setInputValue) {\n      this.setValueState = true\n      this.triggerInput.value = this.getFormattedValue()\n      this.updateTimeGridSelection()\n    } else {\n      this.setValueState = false\n      this.inputDrivenValue = value\n    }\n\n    // Update form value for form participation\n    if (this.internals) {\n      this.internals.setFormValue(\n        this.value\n          ? this.showSeconds\n            ? this.value.format('HH:mm:ss')\n            : this.value.format('HH:mm')\n          : this.defaultValue,\n      )\n    }\n\n    this.setValidity()\n\n    if (this.closeOnSelection) {\n      this.hideTimePicker()\n    }\n\n    if (sendEmptyEventOnInput) {\n      const eventData = {\n        value: this.timeValue,\n        hour: this.timeValue?.hour(),\n        minute: this.timeValue?.minute(),\n        ...(this.showSeconds && { second: this.timeValue?.second() }),\n      }\n\n      this.emit('dds-change', eventData)\n      this.emit('dds-valid-time', {\n        value: this.triggerInput.value,\n        hour: this.timeValue?.hour(),\n        minute: this.timeValue?.minute(),\n        ...(this.showSeconds && { second: this.timeValue?.second() }),\n      })\n    }\n  }\n\n  async clearSelection() {\n    this.setValue(undefined, true, true)\n  }\n\n  private readonly handleDocumentMouseDown = (event: MouseEvent) => {\n    const path = event.composedPath()\n    if (this && !path.includes(this)) {\n      this.hideTimePicker()\n    }\n  }\n\n  private readonly handlePopupAutoClose = () => {\n    this.hideTimePicker({ skipFocus: true })\n  }\n\n  private readonly handleInput = (event: InputEvent) => {\n    const input = event.target as HTMLInputElement\n\n    if (!input.value) {\n      this.setValue(undefined, false, true)\n    } else {\n      if (this.isInputValid()) {\n        const time = dayjs(`2000-01-01 ${input.value}`)\n        this.setValue(time, false)\n        this.emit('dds-valid-time', {\n          value: input.value,\n          type: 'valid',\n          minute: time.minute(),\n          hour: time.hour(),\n        })\n      } else {\n        this.setValue(undefined, false, this.sendEmptyEventOnInput)\n        this.emit('dds-invalid-time', {\n          value: input.value,\n          type: 'invalid',\n          hour: input.value.split(':')[0],\n          minute: input.value.split(':')[1],\n        })\n      }\n    }\n\n    if (this.openTimeOnInput && !this.opened) {\n      this.showTimePicker()\n    }\n\n    this.emit('dds-input', { value: input.value })\n  }\n\n  private readonly handleKeyDown = async (event: KeyboardEvent) => {\n    if (event.key === 'Tab') {\n      return\n    }\n\n    if (\n      event.key === 'Enter' ||\n      event.key === 'ArrowDown' ||\n      event.key === 'ArrowUp'\n    ) {\n      event.preventDefault()\n      event.stopPropagation()\n\n      if (!this.opened) {\n        this.showTimePicker()\n      } else {\n        this.hideTimePicker()\n      }\n    }\n  }\n\n  public get focusElement() {\n    return this.triggerInput\n  }\n\n  private readonly handleClick = () => {\n    if (!this.opened) {\n      this.showTimePicker()\n    } else {\n      this.hideTimePicker()\n    }\n  }\n\n  private readonly handleClearClick = () => {\n    if (!this.disabled) {\n      this.clearSelection()\n\n      this.triggerInput.focus()\n      this.setValidity()\n\n      this.hideTimePicker()\n\n      this.emit('dds-clear')\n    }\n  }\n\n  private readonly handleTimeChange = (event: CustomEvent<TimeSelection>) => {\n    const { hour, minute, second } = event.detail\n    const time = dayjs()\n      .hour(hour)\n      .minute(minute)\n      .second(second ?? 0)\n      .millisecond(0)\n    this.setValue(time, true, true)\n  }\n\n  async showTimePicker() {\n    if (this.disabled || this.readonly || this.opened) {\n      return\n    }\n\n    this.opened = true\n\n    document.addEventListener('mousedown', this.handleDocumentMouseDown)\n  }\n\n  async hideTimePicker(options?: { skipFocus?: boolean }) {\n    if (!this.opened) {\n      return\n    }\n\n    this.opened = false\n\n    document.removeEventListener('mousedown', this.handleDocumentMouseDown)\n\n    await this.updateComplete\n    if (!options?.skipFocus) {\n      this.focus()\n    }\n  }\n\n  private readonly handleFocus = () => {\n    this.emit('dds-focus')\n  }\n\n  private readonly handleBlur = () => {\n    this.emit('dds-blur')\n  }\n\n  private readonly handlePopupOpened = () => {\n    // When popup opens, scroll to selected time in the grid\n    if (this.timeGrid) {\n      // Use requestAnimationFrame to ensure the popup is fully visible\n      requestAnimationFrame(() => {\n        this.timeGrid.scrollToSelectedTime()\n      })\n    }\n  }\n\n  // custom validation\n  getValidity() {\n    return !!this.value\n  }\n\n  get validity(): ValidityState {\n    if (this.internals.validity) {\n      return this.internals.validity\n    } else {\n      return getValidityStateObject({\n        valueMissing: this.required && !this.getValidity(),\n        patternMismatch: !this.isValueValid(),\n      })\n    }\n  }\n\n  checkValidity() {\n    return this.required && this.getValidity() && this.isValueValid()\n  }\n\n  reportValidity() {\n    return this.required && this.getValidity() && this.isValueValid()\n  }\n\n  setValidity() {\n    if (!this.checkValidity()) {\n      this.internals.setValidity(\n        {\n          valueMissing: this.required && !this.getValidity(),\n          patternMismatch: !this.isValueValid(),\n        },\n        this.validationMessage,\n        this.triggerInput,\n      )\n    } else {\n      this.internals.setValidity({})\n    }\n  }\n\n  handleInvalid(event: Event) {\n    event.preventDefault()\n  }\n\n  render() {\n    return html` <div class=\"label-container\">\n        ${formLabelTemplate({\n          label: this.label,\n          id: this.labelId,\n          htmlFor: this.inputId,\n          size: this.size,\n          required: this.required,\n          requiredLabel: this.requiredLabel,\n          optional: this.optional,\n          optionalLabel: this.optionalLabel,\n          disabled: this.disabled,\n          subtle: this.subtle,\n          noMargin: !!this.description,\n          hideLabel: this.hideLabel,\n        })}\n        ${this.tooltip &&\n        html` <dap-ds-tooltip\n          part=\"tooltip\"\n          content=${this.tooltip}\n          mode=\"toggle\"\n          placement=${this.tooltipPlacement}>\n          <dap-ds-icon-button\n            slot=\"trigger\"\n            size=${this.size as 'xs' | 'sm' | 'md' | 'lg'}\n            iconSize=${this.size === 'xs' ? '16' : '22'}\n            clean>\n            <dap-ds-icon\n              name=\"information-line\"\n              aria-label=${this.tooltipAriaLabel}\n              class=\"info-button\"></dap-ds-icon>\n          </dap-ds-icon-button>\n        </dap-ds-tooltip>`}\n      </div>\n      ${this.description &&\n      html`\n        <dap-ds-typography\n          part=\"description\"\n          variant=\"description\"\n          class=${clsx('input-description')}\n          size=${ifDefined(this.size as CommonFormElementSize)}\n          id=${this.descriptionId}>\n          ${this.description}\n        </dap-ds-typography>\n      `}\n      <div>\n        <dap-ds-popup\n          part=\"base\"\n          class=\"select-popup\"\n          overflow\n          ?opened=${this.opened}\n          ?hasArrow=${false}\n          placement=${this.placement}\n          floatingStrategy=${this.floatingStrategy}\n          maxHeight=\"auto\"\n          offset=\"4\"\n          ?disableViewportAutoClose=${this.disableViewportAutoClose}\n          @dds-close=${this.handlePopupAutoClose}\n          @dds-opened=${this.handlePopupOpened}>\n          <div\n            slot=\"trigger\"\n            part=\"trigger\"\n            class=\"${clsx('select', `select--${this.size}`, {\n              'select--disabled': this.disabled,\n              'select--readonly': this.readonly,\n              'select--opened': this.opened,\n              'select--loading': this.loading,\n              'select--success': this.status === 'success',\n              'select--error': this.status === 'error',\n            })}\">\n            <input\n              part=\"input\"\n              role=\"combobox\"\n              class=\"${clsx('combobox__input', 'input', `input--${this.size}`, {\n                'input--disabled': this.disabled,\n                'input--readonly': this.readonly,\n              })}\"\n              id=${this.inputId}\n              value=${this.getFormattedValue()}\n              aria-expanded=${this.opened}\n              aria-haspopup=\"dialog\"\n              aria-labelledby=${ifDefined(this.label ? this.labelId : nothing)}\n              aria-describedby=\"${ifDefined(\n                this.description ? this.descriptionId : nothing,\n              )} ${ifDefined(this.feedback ? this.feedbackId : nothing)}\"\n              aria-disabled=${this.disabled}\n              aria-controls=\"time-grid\"\n              aria-autocomplete=\"none\"\n              ?required=${this.required}\n              ?readonly=${this.readonly}\n              ?autofocus=${this.autofocus}\n              ?disabled=${this.disabled}\n              autocomplete=${this.autocomplete as any}\n              placeholder=${ifDefined(this.placeholder ?? '')}\n              @blur=${this.handleBlur}\n              @focus=${this.handleFocus}\n              @input=${this.handleInput}\n              @keydown=${this.handleKeyDown}\n              @invalid=${this.handleInvalid}\n              @click=${this.handleClick} />\n            <div\n              class=\"${clsx('select-action', `select-action--${this.size}`, {\n                'select-action--disabled': this.disabled,\n                'select-action--readonly': this.readonly,\n                'select-action--opened': this.opened,\n              })}\">\n              ${this.clearButton === 'true' && !this.readonly\n                ? html`<div class=\"${clsx('clear-icon')}\">\n                    <dap-ds-icon-button\n                      icon=\"close-line\"\n                      part=\"clear-button\"\n                      data-testid=${this.clearButtonTestId}\n                      aria-label=${ifDefined(\n                        this.clearButtonAriaLabel ??\n                          t('clear', { lng: this.locale }),\n                      )}\n                      ?disabled=${this.disabled}\n                      @click=${this.handleClearClick}></dap-ds-icon-button>\n                  </div>`\n                : nothing}\n              <div\n                class=\"${clsx('indicator-icon', {\n                  'indicator-icon--loading': this.loading,\n                })}\">\n                ${this.loading\n                  ? html`<dap-ds-icon-loading-spinner></dap-ds-icon-loading-spinner>`\n                  : html`<dap-ds-icon-time-line\n                      aria-hidden=\"true\"\n                      part=\"time-button\"\n                      data-testid=${this.timeButtonTestId}\n                      class=${clsx('time-icon')}\n                      @click=${this.handleClick}></dap-ds-icon-time-line>`}\n              </div>\n            </div>\n          </div>\n          <dap-ds-time-grid\n            id=\"time-grid\"\n            part=\"time-grid\"\n            .selectedHour=${this.getHourValue()}\n            .selectedMinute=${this.getMinuteValue()}\n            .selectedSecond=${this.getSecondValue()}\n            .minTime=${this.minTime}\n            .maxTime=${this.maxTime}\n            .step=${this.step}\n            .locale=${this.locale}\n            .showSeconds=${this.showSeconds}\n            .secondsStep=${this.secondsStep}\n            .disabledTime=${this.disabledTime}\n            .hideDisabledTimes=${this.hideDisabledTimes}\n            .presets=${this.presets}\n            @dds-change=${(event: CustomEvent<TimeSelection>) => {\n              event.stopPropagation()\n              event.preventDefault()\n              this.handleTimeChange(event)\n            }}>\n          </dap-ds-time-grid>\n        </dap-ds-popup>\n        ${this.feedback &&\n        html`<dap-ds-feedback\n          part=\"feedback\"\n          feedbackType=${ifDefined(this.feedbackType)}\n          feedbackSize=\"${ifDefined(this.size as 'lg' | 'sm' | 'xs')}\"\n          id=\"feedback\">\n          ${this.feedback}\n        </dap-ds-feedback>`}\n      </div>`\n  }\n}\n"],"names":["_DapDSTimePicker","_a","GenericFormElement","dayjs","newLocale","i18next","event","path","input","time","__async","hour","minute","second","uniqueSuffix","value","currentLang","_changedProperties","name","oldValue","newValue","trimmed","numValue","parsed","normalized","inputTime","minTime","maxTime","setInputValue","sendEmptyEventOnInput","eventData","__spreadValues","_b","_c","_d","_e","_f","options","getValidityStateObject","html","formLabelTemplate","clsx","ifDefined","nothing","t","DapDSFormLabel","DapDSTooltip","DapDSIconButton","DapDSIcon","DapDSTypography","DapDSPopup","SystemLoadingSpinner","SystemTimeLine","DapDSTimeGrid","DapDSFeedback","unsafeCSS","styles","__decorateClass","query","property","state","DapDSTimePicker"],"mappings":"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"}

package/dist/internal/mixin/formElementMixin.d.ts

@@ -24,6 +24,7 @@ export interface FormElementInterface {
     setValidity(): void;
     checkValidity(): boolean;
     reportValidity(): boolean;
+    formResetCallback(): void;
     onInput(event?: InputEvent): void;
     onKeydown(event?: KeyboardEvent): void;
     onBlur(): void;

package/dist/internal/mixin/formElementMixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"formElementMixin.js","sources":["../../../src/internal/mixin/formElementMixin.ts"],"sourcesContent":["import { PropertyValueMap } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { InputStatus } from '@/common/types'\n\nimport { DdsElement } from '../dds-hu-element'\n\nconst CheckedAttributes = [\n  'value',\n  'checked',\n  'selected',\n  'disabled',\n  'readonly',\n]\n\ntype Constructor<T = Record<string, unknown>> = {\n  new (...args: any[]): T\n  prototype: T\n}\n\nexport interface FormElementInterface {\n  name: string\n  defaultValue?: any\n  form?: string\n  formElement?: HTMLFormElement | null\n  disabled: boolean\n  required: boolean\n  readonly: boolean\n  invalid: boolean\n  value?: any\n  status?: InputStatus\n  internals: ElementInternals\n  validity: ValidityState\n  validationMessage: string\n  willValidate: boolean\n  innerInput: HTMLElement\n  autocomplete: string\n  setValidity(): void\n  checkValidity(): boolean\n  reportValidity(): boolean\n  onInput(event?: InputEvent): void\n  onKeydown(event?: KeyboardEvent): void\n  onBlur(): void\n  onFocus(): void\n  onChange(event?: InputEvent): void\n  handleInvalid(event: Event): void\n}\n\nexport function FormElementMixin<T extends Constructor<DdsElement>>(\n  constructor: T,\n): T & Constructor<FormElementInterface> {\n  class FormElement extends constructor {\n    $input!: HTMLInputElement\n    @property({ reflect: true }) name?: string\n    @property() defaultValue?: any\n    @property({ reflect: true }) form?: string\n    @property({ type: Boolean, reflect: true }) disabled = false\n    @property({ type: Boolean, reflect: true, attribute: true }) required =\n      false\n    @property({ type: Boolean, reflect: true }) readonly = false\n    @property({ type: Boolean }) silent = true\n    @property({ type: Boolean, reflect: true }) invalid = false\n    @property({ reflect: true }) status?: InputStatus\n    @property() autocomplete = 'off'\n\n    @property({ attribute: true, reflect: true }) value?: any\n\n    @property({ attribute: false }) internals!: ElementInternals\n    public formElement: HTMLFormElement | null | undefined = null\n\n    public get innerInput() {\n      // Use the component's input property if available (from @query decorator)\n      // Otherwise fall back to $input\n      return (this as any).input || this.$input\n    }\n\n    static get formAssociated() {\n      return true\n    }\n\n    constructor(...args: any[]) {\n      super(...args)\n      this.internals = this.attachInternals()\n    }\n\n    connectedCallback() {\n      super.connectedCallback()\n      this.formElement = this.closest('form')\n      if (!this.defaultValue) {\n        this.defaultValue = this.value\n      }\n    }\n\n    attributeChangedCallback(name: string, oldValue: any, newValue: any) {\n      super.attributeChangedCallback(name, oldValue, newValue)\n      if (CheckedAttributes.includes(name) && newValue !== oldValue) {\n        switch (name) {\n          case 'value':\n            if (this.nodeName !== 'DAP-DS-BUTTON') {\n              this.internals.setFormValue(newValue)\n            }\n            break\n          case 'checked':\n            this.internals.setFormValue(newValue !== null ? 'on' : null)\n        }\n      }\n    }\n\n    formResetCallback() {\n      this.internals.setValidity({})\n      this.internals.setFormValue(this.defaultValue)\n    }\n\n    onInput() {\n      this.emit('dds-input', { value: this.innerInput.value })\n    }\n\n    onBlur() {\n      this.emit('dds-blur')\n    }\n\n    onFocus() {\n      this.emit('dds-focus')\n    }\n\n    onChange() {\n      this.emit('dds-change', { value: this.innerInput.value })\n    }\n\n    onKeydown(event: KeyboardEvent) {\n      this.emit('dds-keydown', { value: this.innerInput.value, event })\n    }\n\n    handleInvalid(event: Event) {\n      if (this.silent) {\n        event.preventDefault()\n      }\n    }\n\n    protected async firstUpdated(\n      _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n    ) {\n      this.$input = this.shadowRoot?.getElementById('input') as HTMLInputElement\n\n      if (this.nodeName !== 'DAP-DS-BUTTON') {\n        this.internals.setFormValue(this.value)\n        this.setValidity()\n      }\n    }\n\n    setValidity() {\n      if (this.innerInput) {\n        if (!this.innerInput.checkValidity()) {\n          this.internals.setValidity(\n            this.innerInput.validity,\n            this.validationMessage,\n            this.innerInput,\n          )\n        } else {\n          this.internals.setValidity({})\n        }\n      }\n    }\n\n    public get validity() {\n      return this.innerInput.validity\n    }\n\n    public get validationMessage() {\n      return ' '\n    }\n\n    public get willValidate() {\n      return this.innerInput.willValidate\n    }\n\n    public checkValidity() {\n      return this.innerInput.checkValidity()\n    }\n\n    public reportValidity() {\n      return this.innerInput.reportValidity()\n    }\n  }\n\n  return FormElement as Constructor<FormElementInterface> & T\n}\n"],"names":["CheckedAttributes","FormElementMixin","constructor","FormElement","args","name","oldValue","newValue","event","_changedProperties","__async","_a","__decorateClass","property"],"mappings":"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"}
+{"version":3,"file":"formElementMixin.js","sources":["../../../src/internal/mixin/formElementMixin.ts"],"sourcesContent":["import { PropertyValueMap } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { InputStatus } from '@/common/types'\n\nimport { DdsElement } from '../dds-hu-element'\n\nconst CheckedAttributes = [\n  'value',\n  'checked',\n  'selected',\n  'disabled',\n  'readonly',\n]\n\ntype Constructor<T = Record<string, unknown>> = {\n  new (...args: any[]): T\n  prototype: T\n}\n\nexport interface FormElementInterface {\n  name: string\n  defaultValue?: any\n  form?: string\n  formElement?: HTMLFormElement | null\n  disabled: boolean\n  required: boolean\n  readonly: boolean\n  invalid: boolean\n  value?: any\n  status?: InputStatus\n  internals: ElementInternals\n  validity: ValidityState\n  validationMessage: string\n  willValidate: boolean\n  innerInput: HTMLElement\n  autocomplete: string\n  setValidity(): void\n  checkValidity(): boolean\n  reportValidity(): boolean\n  formResetCallback(): void\n  onInput(event?: InputEvent): void\n  onKeydown(event?: KeyboardEvent): void\n  onBlur(): void\n  onFocus(): void\n  onChange(event?: InputEvent): void\n  handleInvalid(event: Event): void\n}\n\nexport function FormElementMixin<T extends Constructor<DdsElement>>(\n  constructor: T,\n): T & Constructor<FormElementInterface> {\n  class FormElement extends constructor {\n    $input!: HTMLInputElement\n    @property({ reflect: true }) name?: string\n    @property() defaultValue?: any\n    @property({ reflect: true }) form?: string\n    @property({ type: Boolean, reflect: true }) disabled = false\n    @property({ type: Boolean, reflect: true, attribute: true }) required =\n      false\n    @property({ type: Boolean, reflect: true }) readonly = false\n    @property({ type: Boolean }) silent = true\n    @property({ type: Boolean, reflect: true }) invalid = false\n    @property({ reflect: true }) status?: InputStatus\n    @property() autocomplete = 'off'\n\n    @property({ attribute: true, reflect: true }) value?: any\n\n    @property({ attribute: false }) internals!: ElementInternals\n    public formElement: HTMLFormElement | null | undefined = null\n\n    public get innerInput() {\n      // Use the component's input property if available (from @query decorator)\n      // Otherwise fall back to $input\n      return (this as any).input || this.$input\n    }\n\n    static get formAssociated() {\n      return true\n    }\n\n    constructor(...args: any[]) {\n      super(...args)\n      this.internals = this.attachInternals()\n    }\n\n    connectedCallback() {\n      super.connectedCallback()\n      this.formElement = this.closest('form')\n      if (!this.defaultValue) {\n        this.defaultValue = this.value\n      }\n    }\n\n    attributeChangedCallback(name: string, oldValue: any, newValue: any) {\n      super.attributeChangedCallback(name, oldValue, newValue)\n      if (CheckedAttributes.includes(name) && newValue !== oldValue) {\n        switch (name) {\n          case 'value':\n            if (this.nodeName !== 'DAP-DS-BUTTON') {\n              this.internals.setFormValue(newValue)\n            }\n            break\n          case 'checked':\n            this.internals.setFormValue(newValue !== null ? 'on' : null)\n        }\n      }\n    }\n\n    formResetCallback() {\n      this.internals.setValidity({})\n      this.internals.setFormValue(this.defaultValue)\n    }\n\n    onInput() {\n      this.emit('dds-input', { value: this.innerInput.value })\n    }\n\n    onBlur() {\n      this.emit('dds-blur')\n    }\n\n    onFocus() {\n      this.emit('dds-focus')\n    }\n\n    onChange() {\n      this.emit('dds-change', { value: this.innerInput.value })\n    }\n\n    onKeydown(event: KeyboardEvent) {\n      this.emit('dds-keydown', { value: this.innerInput.value, event })\n    }\n\n    handleInvalid(event: Event) {\n      if (this.silent) {\n        event.preventDefault()\n      }\n    }\n\n    protected async firstUpdated(\n      _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n    ) {\n      this.$input = this.shadowRoot?.getElementById('input') as HTMLInputElement\n\n      if (this.nodeName !== 'DAP-DS-BUTTON') {\n        this.internals.setFormValue(this.value)\n        this.setValidity()\n      }\n    }\n\n    setValidity() {\n      if (this.innerInput) {\n        if (!this.innerInput.checkValidity()) {\n          this.internals.setValidity(\n            this.innerInput.validity,\n            this.validationMessage,\n            this.innerInput,\n          )\n        } else {\n          this.internals.setValidity({})\n        }\n      }\n    }\n\n    public get validity() {\n      return this.innerInput.validity\n    }\n\n    public get validationMessage() {\n      return ' '\n    }\n\n    public get willValidate() {\n      return this.innerInput.willValidate\n    }\n\n    public checkValidity() {\n      return this.innerInput.checkValidity()\n    }\n\n    public reportValidity() {\n      return this.innerInput.reportValidity()\n    }\n  }\n\n  return FormElement as Constructor<FormElementInterface> & T\n}\n"],"names":["CheckedAttributes","FormElementMixin","constructor","FormElement","args","name","oldValue","newValue","event","_changedProperties","__async","_a","__decorateClass","property"],"mappings":"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"}