npm - dap-design-system - Versions diffs - 0.62.3 → 0.63.0 - Mend

dap-design-system 0.62.3 → 0.63.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (663) hide show

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

	@@ -1 +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 { 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 \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 ${this.label &&\n html`<dap-ds-form-label\n part=\"label\"\n id=${this.labelId}\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 class=${clsx('label')}\n .noMargin=${!!this.description}\n for=${this.inputId}\n .hideLabel=${this.hideLabel}\n label=${ifDefined(this.label)}>\n </dap-ds-form-label>`}\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","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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"}
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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"}

package/dist/components/timepicker/timepicker.scss.js CHANGED Viewed

@@ -1,4 +1,4 @@
-const d = '*,*:before,*:after{box-sizing:border-box;outline:none}* :not(dap-ds-table-cell,dap-ds-table-header){margin:0;padding:0}html:focus-within{scroll-behavior:smooth}a:not([class]){text-decoration-skip-ink:auto}img,picture,svg,video,canvas{max-width:100%;height:auto;background-repeat:no-repeat;background-size:cover;font-style:italic;vertical-align:middle}input,button,textarea,select{font:inherit}[hidden]{display:none!important}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{transition:none;transition-duration:.01ms!important;transition-delay:1ms!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important}}body,html{height:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=number]{appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none}.input-description{display:block;margin-bottom:var(--dds-spacing-200)}@keyframes dds-spin{to{transform:rotate(360deg)}}@keyframes dds-fade{0%,to{opacity:.3}50%{opacity:1}}:root{--dds-form-label-font-weight: var(--dds-font-weight-bold);--dds-form-label-line-height: var(--dds-font-line-height-xlarge);--dds-form-label-color: var(--dds-text-neutral-base);--dds-form-label-disabled-color: var(--dds-text-neutral-disabled);--dds-form-label-required-color: var(--dds-text-negative-subtle);--dds-form-label-optional-color: var(--dds-text-neutral-subtle);--dds-form-label-margin-bottom: var(--dds-spacing-200)}dap-ds-form-label .dds-label{display:block;margin-bottom:var(--dds-form-label-margin-bottom);color:var(--dds-form-label-color);font-weight:var(--dds-form-label-font-weight);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label--no-margin{margin-bottom:0}dap-ds-form-label .dds-label--hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}dap-ds-form-label .dds-label--disabled{color:var(--dds-form-label-disabled-color)}dap-ds-form-label .dds-label--xs{font-size:var(--dds-font-sm)}dap-ds-form-label .dds-label--sm{font-size:var(--dds-font-base)}dap-ds-form-label .dds-label--lg{font-size:var(--dds-font-lg)}dap-ds-form-label .dds-label--subtle{font-weight:var(--dds-font-weight-medium)}dap-ds-form-label .dds-label .dds-label__required-indicator{order:2;color:var(--dds-form-label-required-color);font-weight:var(--dds-font-weight-bold);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label .dds-label__optional-indicator{order:3;color:var(--dds-form-label-optional-color);font-weight:var(--dds-font-weight-medium);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label .dds-label__optional-indicator--xs{font-size:var(--dds-font-sm)}dap-ds-form-label .dds-label .dds-label__optional-indicator--lg{font-size:var(--dds-font-lg)}.label-container{display:flex;align-items:center;justify-content:space-between}.label--has-description{margin-bottom:var(--dds-spacing-200)}dap-ds-form-label+dap-ds-typography{display:block}.info-button{fill:var(--dds-button-subtle-icon-neutral-enabled);color:var(--dds-button-subtle-icon-neutral-enabled)}:root{--font-family: "Inter", sans-serif}:host{--dds-text-color: var(--dds-text-neutral-base);--dds-text-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-heading-color: var(--dds-text-neutral-strong);--dds-text-heading-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-description-color: var(--dds-text-neutral-subtle);--dds-text-description-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-font-family: var(--font-family);--dds-text-font-weight-medium: var(--dds-font-weight-medium);--dds-text-font-weight-bold: var(--dds-font-weight-bold);--dds-text-font-size-h1: var(--dds-font-7xl);--dds-text-font-size-h2: var(--dds-font-4xl);--dds-text-font-size-h3: var(--dds-font-2xl);--dds-text-font-size-h4: var(--dds-font-xl);--dds-text-font-size-h5: var(--dds-font-lg);--dds-text-font-size-h6: var(--dds-font-base);--dds-text-font-size-body: var(--dds-font-base);--dds-text-font-size-caption: var(--dds-font-xs);--dds-text-font-size-description: var(--dds-font-base);--dds-text-font-size-description-lg: var(--dds-font-base);--dds-text-font-size-description-sm: var(--dds-font-sm);--dds-text-font-size-lg: var(--dds-font-lg);--dds-text-font-size-md: var(--dds-font-base);--dds-text-font-size-sm: var(--dds-font-sm);--dds-text-font-size-xs: var(--dds-font-xs)}:host([variant=h1]),:host([variant=h2]),:host([variant=h3]),:host([variant=h4]),:host([variant=h5]),:host([variant=h6]){color:var(--dds-text-heading-color)}:host([inverted]) :host([variant=h1]),:host([inverted]) :host([variant=h2]),:host([inverted]) :host([variant=h3]),:host([inverted]) :host([variant=h4]),:host([inverted]) :host([variant=h5]),:host([inverted]) :host([variant=h6]){color:var(--dds-text-heading-color-inverted)}:host([variant=description]){color:var(--dds-text-description-color)}:host([inverted]) :host([variant=description]){color:var(--dds-text-description-color-inverted)}:host([variant=body]){color:var(--dds-text-color)}:host([inverted]) :host([variant=body]){color:var(--dds-text-color-inverted)}:host([variant=caption]){color:var(--dds-text-description-color)}:host([inverted]) :host([variant=caption]){color:var(--dds-text-description-color-inverted)}.typography{margin:0;font-family:var(--dds-text-font-family);font-weight:var(--dds-text-font-weight-medium);letter-spacing:0}.heading{font-weight:var(--dds-text-font-weight-bold);line-height:var(--dds-font-line-height-large)}.typography-h1{font-size:var(--dds-text-font-size-h1);letter-spacing:-.72px}@media (width >= 768px){.typography-h1{font-size:var(--dds-text-font-size-h1);letter-spacing:-.8px;line-height:var(--dds-font-line-height-xlarge)}}.typography-h2{font-size:var(--dds-text-font-size-h2);letter-spacing:-.56px}.typography-h3{font-size:var(--dds-text-font-size-h3);letter-spacing:-.48px}.typography-h4{font-size:var(--dds-text-font-size-h4);letter-spacing:-.4px}.typography-h5{font-size:var(--dds-text-font-size-h5)}.typography-h6{font-size:var(--dds-text-font-size-h6)}.typography-body{font-size:var(--dds-text-font-size-body);line-height:var(--dds-font-line-height-xlarge)}.typography-caption{font-size:var(--dds-text-font-size-caption);line-height:var(--dds-font-line-height-xlarge)}.typography-description{font-size:var(--dds-text-font-size-description);line-height:var(--dds-font-line-height-xlarge)}.typography-description-lg{font-size:var(--dds-text-font-size-description-lg);line-height:var(--dds-font-line-height-xlarge)}.typography-description-sm{font-size:var(--dds-text-font-size-description-sm);line-height:var(--dds-font-line-height-xlarge)}.typography-size-lg{font-size:var(--dds-text-font-size-lg);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-md{font-size:var(--dds-text-font-size-md);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-sm{font-size:var(--dds-text-font-size-sm);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-xs{font-size:var(--dds-text-font-size-xs);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-inverted{color:var(--dds-text-color-inverted)}.typography-heading-inverted{color:var(--dds-text-heading-color-inverted)}.typography-description-inverted{color:var(--dds-text-description-color-inverted)}:host{--dds-combobox-background: var(--dds-fields-background-default);--dds-combobox-border-color: var(--dds-border-neutral-base);--dds-combobox-border-width: var(--dds-border-width-base, 1px);--dds-combobox-border-radius: var(--dds-radius-base);--dds-combobox-text-color: var(--dds-text-neutral-base);--dds-combobox-placeholder-color: var(--dds-text-neutral-subtle);--dds-combobox-disabled-background: var(--dds-background-neutral-stronger);--dds-combobox-disabled-text: var(--dds-text-neutral-disabled);--dds-combobox-error-border: var(--dds-border-negative-base);--dds-combobox-success-border: var(--dds-border-positive-base);--dds-combobox-icon-color: var(--dds-text-icon-neutral-base);--dds-combobox-clear-icon-color: var( --dds-button-subtle-icon-neutral-enabled );--dds-combobox-popup-background: var(--dds-background-neutral-subtle);--dds-combobox-popup-shadow: 0 4px 6px -1px rgb(0 0 0 / 8%), 0 2px 4px -1px rgb(0 0 0 / 6%);--dds-combobox-loading-spinner-color: var(--dds-icon-neutral-base);--dds-combobox-padding-xs: var(--dds-spacing-200);--dds-combobox-padding-sm: var(--dds-spacing-200);--dds-combobox-padding-lg: var(--dds-spacing-300);--dds-combobox-padding-horizontal: var(--dds-spacing-300);--dds-combobox-padding-vertical: var(--dds-spacing-200);--dds-combobox-gap: var(--dds-spacing-100);--dds-combobox-icon-gap: var(--dds-spacing-200);--dds-combobox-action-gap: var(--dds-spacing-200);--dds-combobox-action-padding: var(--dds-spacing-300);--dds-combobox-clear-icon-width: var(--dds-spacing-800);--dds-combobox-dropdown-icon-right: var(--dds-spacing-600);--dds-combobox-min-width: 7.5rem;--dds-combobox-icon-opened-transform: rotate(180deg);--dds-combobox-chips-gap: var(--dds-spacing-100);--dds-combobox-chips-padding: var(--dds-spacing-100);--dds-combobox-chips-max-height: 120px;--dds-input-height-xs: var(--dds-spacing-800);--dds-input-height-sm: var(--dds-spacing-1000);--dds-input-height-lg: var(--dds-spacing-1200);--dds-input-padding-xs: 0 var(--dds-spacing-200);--dds-input-padding-sm: 0 var(--dds-spacing-300);--dds-input-padding-lg: 0 var(--dds-spacing-400);--dds-input-font-size-xs: var(--dds-font-sm);--dds-input-font-size-sm: var(--dds-font-base);--dds-input-font-size-lg: var(--dds-font-lg);--dds-input-border: var(--dds-border-width-base) solid var(--dds-border-neutral-base);--dds-input-background: var(--dds-fields-background-default);--dds-input-text-color: var(--dds-text-neutral-base);--dds-input-border-radius: var(--dds-radius-base);--dds-input-disabled-border: 0 solid var(--dds-border-neutral-disabled);--dds-input-disabled-background: var(--dds-fields-background-disabled);--dds-input-disabled-text: var(--dds-text-neutral-disabled);--dds-input-readonly-border: 0 solid var(--dds-border-neutral-subtle);--dds-input-readonly-background: var(--dds-fields-background-read-only);--dds-input-readonly-text: var(--dds-text-neutral-subtle);--dds-input-success-border: var(--dds-border-width-base) solid var(--dds-border-positive-base);--dds-input-error-border: var(--dds-border-width-base) solid var(--dds-border-negative-base);--dds-input-addon-background: var(--dds-fields-background-default);--dds-input-addon-success-background: var(--dds-fields-background-default);--dds-input-addon-error-background: var(--dds-fields-background-default);--dds-input-addon-border-before: var(--dds-border-width-base) solid var(--dds-border-neutral-base);--dds-input-addon-border-after: var(--dds-border-width-base) solid var(--dds-border-neutral-base);--dds-input-addon-border-width-before: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base);--dds-input-addon-border-width-after: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0;--dds-input-addon-success-border: var(--dds-border-width-base) solid var(--dds-border-positive-base);--dds-input-addon-success-border-before: var(--dds-border-width-base) solid var(--dds-border-positive-base);--dds-input-addon-success-border-after: var(--dds-border-width-base) solid var(--dds-border-positive-base);--dds-input-addon-success-border-width-before: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base);--dds-input-addon-success-border-width-after: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0;--dds-input-addon-error-border-before: var(--dds-border-width-base) solid var(--dds-border-negative-base);--dds-input-addon-error-border-after: var(--dds-border-width-base) solid var(--dds-border-negative-base);--dds-input-addon-error-border-width-before: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base);--dds-input-addon-error-border-width-after: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0;--dds-form-label-font-weight: var(--dds-font-weight-bold);--dds-form-label-line-height: var(--dds-font-line-height-xlarge);--dds-form-label-color: var(--dds-text-neutral-base);--dds-form-label-disabled-color: var(--dds-text-neutral-disabled);--dds-form-label-required-color: var(--dds-text-negative-subtle);--dds-form-label-optional-color: var(--dds-text-neutral-subtle);--dds-form-label-margin-bottom: var(--dds-spacing-200)}.select{outline-color:var(--dds-focus-outer-ring);outline-offset:var(--dds-spacing-50);outline-width:var(--dds-border-width-large);transition-property:all;transition-duration:var(--dds-transition-fast);transition-timing-function:var(--dds-easing-ease-in-out);display:flex;flex-direction:row;align-items:center;width:100%;min-width:var(--dds-combobox-min-width);column-gap:var(--dds-combobox-gap);border:var(--dds-combobox-border-width) solid var(--dds-combobox-border-color);border-radius:var(--dds-combobox-border-radius);background-color:var(--dds-combobox-background)}.select:focus-within{outline-style:solid}.select:active{border-color:var(--dds-border-brand-medium)}.select--disabled{border-color:var(--dds-combobox-disabled-background);background-color:var(--dds-combobox-disabled-background);color:var(--dds-combobox-disabled-text);cursor:not-allowed}.select--readonly{border:var(--dds-input-readonly-border);background:var(--dds-input-readonly-background);color:var(--dds-input-readonly-text)}.select--error{border-color:var(--dds-combobox-error-border)}.select--success{border-color:var(--dds-combobox-success-border)}.select--xs{height:var(--dds-spacing-800)}.select--sm{height:var(--dds-spacing-1000)}.select--lg{height:var(--dds-spacing-1200)}.select--lg .icon{position:absolute;right:var(--dds-combobox-dropdown-icon-right);color:var(--dds-text-icon-neutral-subtle);pointer-events:none}.select--multiselect{flex-wrap:wrap;align-items:flex-start;height:auto;min-height:var(--dds-spacing-1000);padding:var(--dds-spacing-100)}.select--multiselect.select--xs{min-height:var(--dds-spacing-800)}.select--multiselect.select--lg{min-height:var(--dds-spacing-1200)}.select--opened:not(.select--no-animation) .indicator-icon{transform:var(--dds-combobox-icon-opened-transform)}.select .indicator-icon{outline-color:var(--dds-focus-outer-ring);outline-offset:var(--dds-spacing-50);outline-width:var(--dds-border-width-large);transition-property:all;transition-duration:var(--dds-transition-fast);transition-timing-function:var(--dds-easing-ease-in-out);display:flex;align-items:center;color:var(--dds-combobox-icon-color)}.select .indicator-icon--loading{animation:dds-spin 1s linear infinite;fill:var(--dds-combobox-loading-spinner-color);color:var(--dds-combobox-loading-spinner-color)}.select .clear-icon{outline-color:var(--dds-focus-outer-ring);outline-offset:var(--dds-spacing-50);outline-width:var(--dds-border-width-large);transition-property:all;transition-duration:var(--dds-transition-fast);transition-timing-function:var(--dds-easing-ease-in-out);display:flex;visibility:visible;align-items:center;justify-content:center;min-width:var(--dds-combobox-clear-icon-width);cursor:pointer}.select:has(input:placeholder-shown) .clear-icon{visibility:hidden}.select .clear-icon--hidden{visibility:hidden}.select .clear-icon dap-ds-icon-button::part(icon-base){fill:var(--dds-button-subtle-icon-neutral-enabled);color:var(--dds-button-subtle-icon-neutral-enabled)}.combobox__chips{display:flex;flex-wrap:wrap;align-items:center;max-height:var(--dds-combobox-chips-max-height);overflow:hidden auto;gap:var(--dds-combobox-chips-gap)}.input{width:100%;border-width:0;border-radius:var(--dds-combobox-border-radius);background-color:transparent;color:var(--dds-combobox-text-color);line-height:1;text-overflow:ellipsis}.input::placeholder{color:var(--dds-combobox-placeholder-color)}.input--xs{padding:var(--dds-combobox-padding-xs);font-size:var(--dds-font-sm)}.input--sm{padding:var(--dds-combobox-padding-sm)}.input--lg{padding:var(--dds-combobox-padding-lg);font-size:var(--dds-font-lg)}.input--disabled{cursor:not-allowed}.input::-webkit-search-cancel-button{display:none}.input--readonly{border:var(--dds-input-readonly-border);background:var(--dds-input-readonly-background);color:var(--dds-input-readonly-text)}.input--multiselect{flex:1;min-width:120px;padding:var(--dds-spacing-100)}.select-action{display:inline-flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:var(--dds-combobox-action-gap);padding:0 var(--dds-combobox-action-padding);color:var(--dds-combobox-icon-color)}.select-action--disabled{color:var(--dds-icon-neutral-disabled);cursor:not-allowed;pointer-events:none}.select-action--xs{min-width:90px}.select-action--sm{min-width:94px}.select-action--lg{min-width:98px}.select-action--multiselect{align-self:center}.select-popup::part(popup){background-color:var(--dds-combobox-popup-background);box-shadow:var(--dds-combobox-popup-shadow)}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}:host{--dds-timepicker-background: var(--dds-fields-background-default);--dds-timepicker-border-color: var(--dds-border-neutral-base);--dds-timepicker-border-width: var(--dds-border-width-base, 1px);--dds-timepicker-border-radius: var(--dds-radius-base);--dds-timepicker-text-color: var(--dds-text-neutral-base);--dds-timepicker-placeholder-color: var(--dds-text-neutral-subtle);--dds-timepicker-disabled-background: var(--dds-background-neutral-stronger);--dds-timepicker-disabled-text: var(--dds-text-neutral-disabled);--dds-timepicker-error-border: var(--dds-border-negative-base);--dds-timepicker-success-border: var(--dds-border-positive-base);--dds-timepicker-icon-color: var(--dds-text-icon-neutral-subtle);--dds-timepicker-clear-icon-color: var( --dds-button-subtle-icon-neutral-enabled );--dds-timepicker-popup-background: var(--dds-background-neutral-subtle);--dds-timepicker-popup-shadow: 0 4px 6px -1px rgb(0 0 0 / 8%), 0 2px 4px -1px rgb(0 0 0 / 6%);--dds-timepicker-padding-xs: var(--dds-spacing-200);--dds-timepicker-padding-sm: var(--dds-spacing-200);--dds-timepicker-padding-lg: var(--dds-spacing-300);--dds-timepicker-padding-horizontal: var(--dds-spacing-300);--dds-timepicker-padding-vertical: var(--dds-spacing-200);--dds-timepicker-gap: var(--dds-spacing-100);--dds-timepicker-icon-gap: var(--dds-spacing-200);--dds-timepicker-action-gap: var(--dds-spacing-200);--dds-timepicker-action-padding: var(--dds-spacing-300);--dds-timepicker-clear-icon-width: var(--dds-spacing-800);--dds-timepicker-dropdown-icon-right: var(--dds-spacing-600);--dds-timepicker-min-width: 7.5rem;--dds-combobox-background: var(--dds-timepicker-background);--dds-combobox-border-color: var(--dds-timepicker-border-color);--dds-combobox-border-width: var(--dds-timepicker-border-width);--dds-combobox-border-radius: var(--dds-timepicker-border-radius);--dds-combobox-text-color: var(--dds-timepicker-text-color);--dds-combobox-placeholder-color: var(--dds-timepicker-placeholder-color);--dds-combobox-disabled-background: var(--dds-timepicker-disabled-background);--dds-combobox-disabled-text: var(--dds-timepicker-disabled-text);--dds-combobox-error-border: var(--dds-timepicker-error-border);--dds-combobox-success-border: var(--dds-timepicker-success-border);--dds-combobox-icon-color: var(--dds-timepicker-icon-color);--dds-combobox-clear-icon-color: var(--dds-timepicker-clear-icon-color);--dds-combobox-popup-background: var(--dds-timepicker-popup-background);--dds-combobox-popup-shadow: var(--dds-timepicker-popup-shadow);--dds-combobox-padding-xs: var(--dds-timepicker-padding-xs);--dds-combobox-padding-sm: var(--dds-timepicker-padding-sm);--dds-combobox-padding-lg: var(--dds-timepicker-padding-lg);--dds-combobox-padding-horizontal: var(--dds-timepicker-padding-horizontal);--dds-combobox-padding-vertical: var(--dds-timepicker-padding-vertical);--dds-combobox-gap: var(--dds-timepicker-gap);--dds-combobox-icon-gap: var(--dds-timepicker-icon-gap);--dds-combobox-action-gap: var(--dds-timepicker-action-gap);--dds-combobox-action-padding: var(--dds-timepicker-action-padding);--dds-combobox-clear-icon-width: var(--dds-timepicker-clear-icon-width);--dds-combobox-dropdown-icon-right: var(--dds-timepicker-dropdown-icon-right);--dds-combobox-min-width: var(--dds-timepicker-min-width)}.time-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%;cursor:pointer}';
+const d = '*,*:before,*:after{box-sizing:border-box;outline:none}* :not(dap-ds-table-cell,dap-ds-table-header){margin:0;padding:0}html:focus-within{scroll-behavior:smooth}a:not([class]){text-decoration-skip-ink:auto}img,picture,svg,video,canvas{max-width:100%;height:auto;background-repeat:no-repeat;background-size:cover;font-style:italic;vertical-align:middle}input,button,textarea,select{font:inherit}[hidden]{display:none!important}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{transition:none;transition-duration:.01ms!important;transition-delay:1ms!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important}}body,html{height:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=number]{appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none}.input-description{display:block;margin-bottom:var(--dds-spacing-200)}@keyframes dds-spin{to{transform:rotate(360deg)}}@keyframes dds-fade{0%,to{opacity:.3}50%{opacity:1}}:root{--dds-form-label-font-weight: var(--dds-font-weight-bold);--dds-form-label-line-height: var(--dds-font-line-height-xlarge);--dds-form-label-color: var(--dds-text-neutral-base);--dds-form-label-disabled-color: var(--dds-text-neutral-disabled);--dds-form-label-required-color: var(--dds-text-negative-subtle);--dds-form-label-optional-color: var(--dds-text-neutral-subtle);--dds-form-label-margin-bottom: var(--dds-spacing-200)}dap-ds-form-label .dds-label{display:block;margin-bottom:var(--dds-form-label-margin-bottom);color:var(--dds-form-label-color);font-weight:var(--dds-form-label-font-weight);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label--no-margin{margin-bottom:0}dap-ds-form-label .dds-label--hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}dap-ds-form-label .dds-label--disabled{color:var(--dds-form-label-disabled-color)}dap-ds-form-label .dds-label--xs{font-size:var(--dds-font-sm)}dap-ds-form-label .dds-label--sm{font-size:var(--dds-font-base)}dap-ds-form-label .dds-label--lg{font-size:var(--dds-font-lg)}dap-ds-form-label .dds-label--subtle{font-weight:var(--dds-font-weight-medium)}dap-ds-form-label .dds-label .dds-label__required-indicator{order:2;color:var(--dds-form-label-required-color);font-weight:var(--dds-font-weight-bold);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label .dds-label__optional-indicator{order:3;color:var(--dds-form-label-optional-color);font-weight:var(--dds-font-weight-medium);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label .dds-label__optional-indicator--xs{font-size:var(--dds-font-sm)}dap-ds-form-label .dds-label .dds-label__optional-indicator--lg{font-size:var(--dds-font-lg)}.label-container{display:flex;align-items:center;justify-content:space-between}.label--has-description{margin-bottom:var(--dds-spacing-200)}dap-ds-form-label+dap-ds-typography{display:block}.info-button{fill:var(--dds-button-subtle-icon-neutral-enabled);color:var(--dds-button-subtle-icon-neutral-enabled)}:root{--font-family: "Inter", sans-serif}:host{--dds-text-color: var(--dds-text-neutral-base);--dds-text-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-heading-color: var(--dds-text-neutral-strong);--dds-text-heading-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-description-color: var(--dds-text-neutral-subtle);--dds-text-description-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-font-family: var(--font-family);--dds-text-font-weight-medium: var(--dds-font-weight-medium);--dds-text-font-weight-bold: var(--dds-font-weight-bold);--dds-text-font-size-h1: var(--dds-font-7xl);--dds-text-font-size-h2: var(--dds-font-4xl);--dds-text-font-size-h3: var(--dds-font-2xl);--dds-text-font-size-h4: var(--dds-font-xl);--dds-text-font-size-h5: var(--dds-font-lg);--dds-text-font-size-h6: var(--dds-font-base);--dds-text-font-size-body: var(--dds-font-base);--dds-text-font-size-caption: var(--dds-font-xs);--dds-text-font-size-description: var(--dds-font-base);--dds-text-font-size-description-lg: var(--dds-font-base);--dds-text-font-size-description-sm: var(--dds-font-sm);--dds-text-font-size-lg: var(--dds-font-lg);--dds-text-font-size-md: var(--dds-font-base);--dds-text-font-size-sm: var(--dds-font-sm);--dds-text-font-size-xs: var(--dds-font-xs)}:host([variant=h1]),:host([variant=h2]),:host([variant=h3]),:host([variant=h4]),:host([variant=h5]),:host([variant=h6]){color:var(--dds-text-heading-color)}:host([inverted]) :host([variant=h1]),:host([inverted]) :host([variant=h2]),:host([inverted]) :host([variant=h3]),:host([inverted]) :host([variant=h4]),:host([inverted]) :host([variant=h5]),:host([inverted]) :host([variant=h6]){color:var(--dds-text-heading-color-inverted)}:host([variant=description]){color:var(--dds-text-description-color)}:host([inverted]) :host([variant=description]){color:var(--dds-text-description-color-inverted)}:host([variant=body]){color:var(--dds-text-color)}:host([inverted]) :host([variant=body]){color:var(--dds-text-color-inverted)}:host([variant=caption]){color:var(--dds-text-description-color)}:host([inverted]) :host([variant=caption]){color:var(--dds-text-description-color-inverted)}.typography{margin:0;font-family:var(--dds-text-font-family);font-weight:var(--dds-text-font-weight-medium);letter-spacing:0}.heading{font-weight:var(--dds-text-font-weight-bold);line-height:var(--dds-font-line-height-large)}.typography-h1{font-size:var(--dds-text-font-size-h1);letter-spacing:-.72px}@media (width >= 768px){.typography-h1{font-size:var(--dds-text-font-size-h1);letter-spacing:-.8px;line-height:var(--dds-font-line-height-xlarge)}}.typography-h2{font-size:var(--dds-text-font-size-h2);letter-spacing:-.56px}.typography-h3{font-size:var(--dds-text-font-size-h3);letter-spacing:-.48px}.typography-h4{font-size:var(--dds-text-font-size-h4);letter-spacing:-.4px}.typography-h5{font-size:var(--dds-text-font-size-h5)}.typography-h6{font-size:var(--dds-text-font-size-h6)}.typography-body{font-size:var(--dds-text-font-size-body);line-height:var(--dds-font-line-height-xlarge)}.typography-caption{font-size:var(--dds-text-font-size-caption);line-height:var(--dds-font-line-height-xlarge)}.typography-description{font-size:var(--dds-text-font-size-description);line-height:var(--dds-font-line-height-xlarge)}.typography-description-lg{font-size:var(--dds-text-font-size-description-lg);line-height:var(--dds-font-line-height-xlarge)}.typography-description-sm{font-size:var(--dds-text-font-size-description-sm);line-height:var(--dds-font-line-height-xlarge)}.typography-size-lg{font-size:var(--dds-text-font-size-lg);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-md{font-size:var(--dds-text-font-size-md);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-sm{font-size:var(--dds-text-font-size-sm);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-xs{font-size:var(--dds-text-font-size-xs);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-inverted{color:var(--dds-text-color-inverted)}.typography-heading-inverted{color:var(--dds-text-heading-color-inverted)}.typography-description-inverted{color:var(--dds-text-description-color-inverted)}:host{--dds-combobox-background: var(--dds-fields-background-default);--dds-combobox-border-color: var(--dds-border-neutral-base);--dds-combobox-border-width: var(--dds-border-width-base, 1px);--dds-combobox-border-radius: var(--dds-radius-base);--dds-combobox-text-color: var(--dds-text-neutral-base);--dds-combobox-placeholder-color: var(--dds-text-neutral-subtle);--dds-combobox-disabled-background: var(--dds-background-neutral-stronger);--dds-combobox-disabled-text: var(--dds-text-neutral-disabled);--dds-combobox-error-border: var(--dds-border-negative-base);--dds-combobox-success-border: var(--dds-border-positive-base);--dds-combobox-icon-color: var(--dds-text-icon-neutral-base);--dds-combobox-clear-icon-color: var( --dds-button-subtle-icon-neutral-enabled );--dds-combobox-popup-background: var(--dds-background-neutral-subtle);--dds-combobox-popup-shadow: 0 4px 6px -1px rgb(0 0 0 / 8%), 0 2px 4px -1px rgb(0 0 0 / 6%);--dds-combobox-loading-spinner-color: var(--dds-icon-neutral-base);--dds-combobox-padding-xs: var(--dds-spacing-200);--dds-combobox-padding-sm: var(--dds-spacing-200);--dds-combobox-padding-lg: var(--dds-spacing-300);--dds-combobox-padding-horizontal: var(--dds-spacing-300);--dds-combobox-padding-vertical: var(--dds-spacing-200);--dds-combobox-gap: var(--dds-spacing-100);--dds-combobox-icon-gap: var(--dds-spacing-200);--dds-combobox-action-gap: var(--dds-spacing-200);--dds-combobox-action-padding: var(--dds-spacing-300);--dds-combobox-clear-icon-width: var(--dds-spacing-800);--dds-combobox-dropdown-icon-right: var(--dds-spacing-600);--dds-combobox-min-width: 7.5rem;--dds-combobox-icon-opened-transform: rotate(180deg);--dds-combobox-chips-gap: var(--dds-spacing-100);--dds-combobox-chips-padding: var(--dds-spacing-100);--dds-combobox-chips-max-height: 120px;--dds-input-height-xs: var(--dds-spacing-800);--dds-input-height-sm: var(--dds-spacing-1000);--dds-input-height-lg: var(--dds-spacing-1200);--dds-input-padding-xs: 0 var(--dds-spacing-200);--dds-input-padding-sm: 0 var(--dds-spacing-300);--dds-input-padding-lg: 0 var(--dds-spacing-400);--dds-input-font-size-xs: var(--dds-font-sm);--dds-input-font-size-sm: var(--dds-font-base);--dds-input-font-size-lg: var(--dds-font-lg);--dds-input-border: var(--dds-border-width-base) solid var(--dds-border-neutral-base);--dds-input-background: var(--dds-fields-background-default);--dds-input-text-color: var(--dds-text-neutral-base);--dds-input-border-radius: var(--dds-radius-base);--dds-input-disabled-border: 0 solid var(--dds-border-neutral-disabled);--dds-input-disabled-background: var(--dds-fields-background-disabled);--dds-input-disabled-text: var(--dds-text-neutral-disabled);--dds-input-readonly-border: 0 solid var(--dds-border-neutral-subtle);--dds-input-readonly-background: var(--dds-fields-background-read-only);--dds-input-readonly-text: var(--dds-text-neutral-subtle);--dds-input-success-border: var(--dds-border-width-base) solid var(--dds-border-positive-base);--dds-input-error-border: var(--dds-border-width-base) solid var(--dds-border-negative-base);--dds-input-addon-background: var(--dds-fields-background-default);--dds-input-addon-success-background: var(--dds-fields-background-default);--dds-input-addon-error-background: var(--dds-fields-background-default);--dds-input-addon-border-before: var(--dds-border-width-base) solid var(--dds-border-neutral-base);--dds-input-addon-border-after: var(--dds-border-width-base) solid var(--dds-border-neutral-base);--dds-input-addon-border-width-before: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base);--dds-input-addon-border-width-after: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0;--dds-input-addon-success-border: var(--dds-border-width-base) solid var(--dds-border-positive-base);--dds-input-addon-success-border-before: var(--dds-border-width-base) solid var(--dds-border-positive-base);--dds-input-addon-success-border-after: var(--dds-border-width-base) solid var(--dds-border-positive-base);--dds-input-addon-success-border-width-before: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base);--dds-input-addon-success-border-width-after: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0;--dds-input-addon-error-border-before: var(--dds-border-width-base) solid var(--dds-border-negative-base);--dds-input-addon-error-border-after: var(--dds-border-width-base) solid var(--dds-border-negative-base);--dds-input-addon-error-border-width-before: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base);--dds-input-addon-error-border-width-after: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0;--dds-form-label-font-weight: var(--dds-font-weight-bold);--dds-form-label-line-height: var(--dds-font-line-height-xlarge);--dds-form-label-color: var(--dds-text-neutral-base);--dds-form-label-disabled-color: var(--dds-text-neutral-disabled);--dds-form-label-required-color: var(--dds-text-negative-subtle);--dds-form-label-optional-color: var(--dds-text-neutral-subtle);--dds-form-label-margin-bottom: var(--dds-spacing-200)}.select{outline-color:var(--dds-focus-outer-ring);outline-offset:var(--dds-spacing-50);outline-width:var(--dds-border-width-large);transition-property:all;transition-duration:var(--dds-transition-fast);transition-timing-function:var(--dds-easing-ease-in-out);display:flex;flex-direction:row;align-items:center;width:100%;min-width:var(--dds-combobox-min-width);column-gap:var(--dds-combobox-gap);border:var(--dds-combobox-border-width) solid var(--dds-combobox-border-color);border-radius:var(--dds-combobox-border-radius);background-color:var(--dds-combobox-background)}.select:focus-within{outline-style:solid}.select:active{border-color:var(--dds-border-brand-medium)}.select--disabled{border-color:var(--dds-combobox-disabled-background);background-color:var(--dds-combobox-disabled-background);color:var(--dds-combobox-disabled-text);cursor:not-allowed}.select--readonly{border:var(--dds-input-readonly-border);background:var(--dds-input-readonly-background);color:var(--dds-input-readonly-text)}.select--error{border-color:var(--dds-combobox-error-border)}.select--success{border-color:var(--dds-combobox-success-border)}.select--xs{height:var(--dds-spacing-800)}.select--sm{height:var(--dds-spacing-1000)}.select--lg{height:var(--dds-spacing-1200)}.select--lg .icon{position:absolute;right:var(--dds-combobox-dropdown-icon-right);color:var(--dds-text-icon-neutral-subtle);pointer-events:none}.select--multiselect{flex-wrap:wrap;align-items:flex-start;height:auto;min-height:var(--dds-spacing-1000);padding:var(--dds-spacing-100)}.select--multiselect.select--xs{min-height:var(--dds-spacing-800)}.select--multiselect.select--lg{min-height:var(--dds-spacing-1200)}.select--opened:not(.select--no-animation) .indicator-icon{transform:var(--dds-combobox-icon-opened-transform)}.select .indicator-icon{outline-color:var(--dds-focus-outer-ring);outline-offset:var(--dds-spacing-50);outline-width:var(--dds-border-width-large);transition-property:all;transition-duration:var(--dds-transition-fast);transition-timing-function:var(--dds-easing-ease-in-out);display:flex;align-items:center;color:var(--dds-combobox-icon-color)}.select .indicator-icon--loading{animation:dds-spin 1s linear infinite;fill:var(--dds-combobox-loading-spinner-color);color:var(--dds-combobox-loading-spinner-color)}.select .clear-icon{outline-color:var(--dds-focus-outer-ring);outline-offset:var(--dds-spacing-50);outline-width:var(--dds-border-width-large);transition-property:all;transition-duration:var(--dds-transition-fast);transition-timing-function:var(--dds-easing-ease-in-out);display:flex;visibility:visible;align-items:center;justify-content:center;min-width:var(--dds-combobox-clear-icon-width);cursor:pointer}.select:has(input:placeholder-shown) .clear-icon{visibility:hidden}.select .clear-icon--hidden{visibility:hidden}.select .clear-icon dap-ds-icon-button::part(icon-base){fill:var(--dds-button-subtle-icon-neutral-enabled);color:var(--dds-button-subtle-icon-neutral-enabled)}.combobox__chips{display:flex;flex-wrap:wrap;align-items:center;max-height:var(--dds-combobox-chips-max-height);overflow:hidden auto;gap:var(--dds-combobox-chips-gap)}.input{width:100%;border-width:0;border-radius:var(--dds-combobox-border-radius);background-color:transparent;color:var(--dds-combobox-text-color);line-height:1;text-overflow:ellipsis}.input::placeholder{color:var(--dds-combobox-placeholder-color)}.input--xs{padding:var(--dds-combobox-padding-xs);font-size:var(--dds-font-sm)}.input--sm{padding:var(--dds-combobox-padding-sm)}.input--lg{padding:var(--dds-combobox-padding-lg);font-size:var(--dds-font-lg)}.input--disabled{cursor:not-allowed}.input::-webkit-search-cancel-button{display:none}.input--readonly{border:var(--dds-input-readonly-border);background:var(--dds-input-readonly-background);color:var(--dds-input-readonly-text)}.input--multiselect{flex:1;min-width:120px;padding:var(--dds-spacing-100)}.select-action{display:inline-flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:var(--dds-combobox-action-gap);padding:0 var(--dds-combobox-action-padding);color:var(--dds-combobox-icon-color)}.select-action--disabled{color:var(--dds-icon-neutral-disabled);cursor:not-allowed;pointer-events:none}.select-action--xs{min-width:90px}.select-action--sm{min-width:94px}.select-action--lg{min-width:98px}.select-action--multiselect{align-self:center}.select-popup::part(popup){background-color:var(--dds-combobox-popup-background);box-shadow:var(--dds-combobox-popup-shadow)}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}:host{--dds-form-label-font-weight: var(--dds-font-weight-bold);--dds-form-label-line-height: var(--dds-font-line-height-xlarge);--dds-form-label-color: var(--dds-text-neutral-base);--dds-form-label-disabled-color: var(--dds-text-neutral-disabled);--dds-form-label-required-color: var(--dds-text-negative-subtle);--dds-form-label-optional-color: var(--dds-text-neutral-subtle);--dds-form-label-margin-bottom: var(--dds-spacing-200)}.dds-label{display:block;margin-bottom:var(--dds-form-label-margin-bottom);color:var(--dds-form-label-color);font-weight:var(--dds-form-label-font-weight);line-height:var(--dds-form-label-line-height)}.dds-label--no-margin{margin-bottom:0}.dds-label--hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.dds-label--disabled{color:var(--dds-form-label-disabled-color)}.dds-label--xs{font-size:var(--dds-font-sm)}.dds-label--sm{font-size:var(--dds-font-base)}.dds-label--lg{font-size:var(--dds-font-lg)}.dds-label--subtle{font-weight:var(--dds-font-weight-medium)}.dds-label .dds-label__required-indicator{order:2;color:var(--dds-form-label-required-color);font-weight:var(--dds-font-weight-bold);line-height:var(--dds-form-label-line-height)}.dds-label .dds-label__optional-indicator{order:3;color:var(--dds-form-label-optional-color);font-weight:var(--dds-font-weight-medium);line-height:var(--dds-form-label-line-height)}.dds-label .dds-label__optional-indicator--xs{font-size:var(--dds-font-sm)}.dds-label .dds-label__optional-indicator--lg{font-size:var(--dds-font-lg)}:host{--dds-timepicker-background: var(--dds-fields-background-default);--dds-timepicker-border-color: var(--dds-border-neutral-base);--dds-timepicker-border-width: var(--dds-border-width-base, 1px);--dds-timepicker-border-radius: var(--dds-radius-base);--dds-timepicker-text-color: var(--dds-text-neutral-base);--dds-timepicker-placeholder-color: var(--dds-text-neutral-subtle);--dds-timepicker-disabled-background: var(--dds-background-neutral-stronger);--dds-timepicker-disabled-text: var(--dds-text-neutral-disabled);--dds-timepicker-error-border: var(--dds-border-negative-base);--dds-timepicker-success-border: var(--dds-border-positive-base);--dds-timepicker-icon-color: var(--dds-text-icon-neutral-subtle);--dds-timepicker-clear-icon-color: var( --dds-button-subtle-icon-neutral-enabled );--dds-timepicker-popup-background: var(--dds-background-neutral-subtle);--dds-timepicker-popup-shadow: 0 4px 6px -1px rgb(0 0 0 / 8%), 0 2px 4px -1px rgb(0 0 0 / 6%);--dds-timepicker-padding-xs: var(--dds-spacing-200);--dds-timepicker-padding-sm: var(--dds-spacing-200);--dds-timepicker-padding-lg: var(--dds-spacing-300);--dds-timepicker-padding-horizontal: var(--dds-spacing-300);--dds-timepicker-padding-vertical: var(--dds-spacing-200);--dds-timepicker-gap: var(--dds-spacing-100);--dds-timepicker-icon-gap: var(--dds-spacing-200);--dds-timepicker-action-gap: var(--dds-spacing-200);--dds-timepicker-action-padding: var(--dds-spacing-300);--dds-timepicker-clear-icon-width: var(--dds-spacing-800);--dds-timepicker-dropdown-icon-right: var(--dds-spacing-600);--dds-timepicker-min-width: 7.5rem;--dds-combobox-background: var(--dds-timepicker-background);--dds-combobox-border-color: var(--dds-timepicker-border-color);--dds-combobox-border-width: var(--dds-timepicker-border-width);--dds-combobox-border-radius: var(--dds-timepicker-border-radius);--dds-combobox-text-color: var(--dds-timepicker-text-color);--dds-combobox-placeholder-color: var(--dds-timepicker-placeholder-color);--dds-combobox-disabled-background: var(--dds-timepicker-disabled-background);--dds-combobox-disabled-text: var(--dds-timepicker-disabled-text);--dds-combobox-error-border: var(--dds-timepicker-error-border);--dds-combobox-success-border: var(--dds-timepicker-success-border);--dds-combobox-icon-color: var(--dds-timepicker-icon-color);--dds-combobox-clear-icon-color: var(--dds-timepicker-clear-icon-color);--dds-combobox-popup-background: var(--dds-timepicker-popup-background);--dds-combobox-popup-shadow: var(--dds-timepicker-popup-shadow);--dds-combobox-padding-xs: var(--dds-timepicker-padding-xs);--dds-combobox-padding-sm: var(--dds-timepicker-padding-sm);--dds-combobox-padding-lg: var(--dds-timepicker-padding-lg);--dds-combobox-padding-horizontal: var(--dds-timepicker-padding-horizontal);--dds-combobox-padding-vertical: var(--dds-timepicker-padding-vertical);--dds-combobox-gap: var(--dds-timepicker-gap);--dds-combobox-icon-gap: var(--dds-timepicker-icon-gap);--dds-combobox-action-gap: var(--dds-timepicker-action-gap);--dds-combobox-action-padding: var(--dds-timepicker-action-padding);--dds-combobox-clear-icon-width: var(--dds-timepicker-clear-icon-width);--dds-combobox-dropdown-icon-right: var(--dds-timepicker-dropdown-icon-right);--dds-combobox-min-width: var(--dds-timepicker-min-width)}.time-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%;cursor:pointer}';
 export {
   d as default
 };

package/dist/components/toc/toc.component.d.ts CHANGED Viewed

@@ -21,6 +21,8 @@ declare const DapDSTOC_base: typeof DdsElement & {
  * @event {{ selectedItem: HTMLAnchorElement, anchorElement: IntersectionObserverEntry | HTMLElement }} dds-anchor-change - Event that is triggered when the anchor changes.
  *
  * @csspart base - The main container of the toc.
+ * @csspart title - The title of the toc.
+ * @csspart nav - The navigation element holding the links.
  *
  * @cssproperty --dds-toc-border-width - Width of the TOC border. (default: var(--dds-border-width-base))
  * @cssproperty --dds-toc-border-color - Color of the TOC border. (default: var(--dds-border-neutral-divider))

package/dist/components/toc/toc.component.js CHANGED Viewed

@@ -1,76 +1,73 @@
 var $ = Object.defineProperty, L = Object.defineProperties;
 var H = Object.getOwnPropertyDescriptors;
-var b = Object.getOwnPropertySymbols, C = Object.getPrototypeOf, R = Object.prototype.hasOwnProperty, M = Object.prototype.propertyIsEnumerable, T = Reflect.get;
-var _ = (n, e, t) => e in n ? $(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, w = (n, e) => {
+var b = Object.getOwnPropertySymbols, C = Object.getPrototypeOf, M = Object.prototype.hasOwnProperty, R = Object.prototype.propertyIsEnumerable, T = Reflect.get;
+var _ = (a, e, t) => e in a ? $(a, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[e] = t, A = (a, e) => {
   for (var t in e || (e = {}))
-    R.call(e, t) && _(n, t, e[t]);
+    M.call(e, t) && _(a, t, e[t]);
   if (b)
     for (var t of b(e))
-      M.call(e, t) && _(n, t, e[t]);
-  return n;
-}, A = (n, e) => L(n, H(e));
-var f = (n, e, t) => T(C(n), t, e);
-var u = (n, e, t) => new Promise((s, i) => {
+      R.call(e, t) && _(a, t, e[t]);
+  return a;
+}, w = (a, e) => L(a, H(e));
+var f = (a, e, t) => T(C(a), t, e);
+var p = (a, e, t) => new Promise((s, i) => {
   var r = (h) => {
     try {
-      o(t.next(h));
+      n(t.next(h));
     } catch (l) {
       i(l);
     }
-  }, a = (h) => {
+  }, o = (h) => {
     try {
-      o(t.throw(h));
+      n(t.throw(h));
     } catch (l) {
       i(l);
     }
-  }, o = (h) => h.done ? s(h.value) : Promise.resolve(h.value).then(r, a);
-  o((t = t.apply(n, e)).next());
+  }, n = (h) => h.done ? s(h.value) : Promise.resolve(h.value).then(r, o);
+  n((t = t.apply(a, e)).next());
 });
 import { clsx as I } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as d } from "../../node_modules/@lit/reactive-element/decorators/property.js";
+import { unsafeCSS as E } from "lit";
+import { property as d } from "lit/decorators.js";
 import { anchorClass as y } from "../../common/const.js";
 import { DdsElement as k } from "../../internal/dds-hu-element.js";
-import { SizedMixin as E } from "../../internal/mixin/sizedMixin.js";
+import { SizedMixin as S } from "../../internal/mixin/sizedMixin.js";
 import "../../localization/localization.js";
-import S from "./toc.scss.js";
+import j from "./toc.scss.js";
 import { t as x } from "../../node_modules/i18next/dist/esm/i18next.js";
-import { unsafeCSS as j } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var N = Object.defineProperty, p = (n, e, t, s) => {
-  for (var i = void 0, r = n.length - 1, a; r >= 0; r--)
-    (a = n[r]) && (i = a(e, t, i) || i);
-  return i && N(e, t, i), i;
+var q = Object.defineProperty, u = (a, e, t, s) => {
+  for (var i = void 0, r = a.length - 1, o; r >= 0; r--)
+    (o = a[r]) && (i = o(e, t, i) || i);
+  return i && q(e, t, i), i;
 };
-const m = class m extends E(k) {
+const m = class m extends S(k) {
   constructor() {
     super(), this.root = "", this.rootMargin = "0px 0px -80% 0px", this.lastAnchorRootMargin = "0px 0px -50% 0px", this.threshold = [0, 0.1, 0.25, 0.5, 0.75, 1], this.minHeadingLevel = 2, this.maxHeadingLevel = 3, this.noIndent = !1, this._selectors = [], this._intersectionData = /* @__PURE__ */ new Map(), this._debounceTimer = null, this.onScroll = () => {
       if (this._anchors && this._anchors.length > 0 && Math.round(window.scrollY + window.innerHeight) === document.body.scrollHeight) {
         const e = this._anchors[this._anchors.length - 1], t = this.shadowRoot.querySelector(`[href="#${e.id}"`);
         t && this.setActiveAnchor(t, t);
       }
-    }, this.getHeaders = () => u(this, null, function* () {
+    }, this.getHeaders = () => p(this, null, function* () {
       const e = [];
-      return yield this._anchors.forEach((t, s) => u(this, null, function* () {
-        var o, h, l;
+      return yield this._anchors.forEach((t, s) => p(this, null, function* () {
+        var n, h, l;
         yield t.updateComplete;
-        const i = t.getAttribute("data-text") || ((o = t.innerText) == null ? void 0 : o.trim()) || ((h = t.textContent) == null ? void 0 : h.trim()) || "", r = t.id || ((l = t.innerText) == null ? void 0 : l.toLowerCase().split(" ").join("-")) || i.toLowerCase().split(" ").join("-");
+        const i = t.getAttribute("data-text") || ((n = t.innerText) == null ? void 0 : n.trim()) || ((h = t.textContent) == null ? void 0 : h.trim()) || "", r = t.id || ((l = t.innerText) == null ? void 0 : l.toLowerCase().split(" ").join("-")) || i.toLowerCase().split(" ").join("-");
         if (!t.id && r) {
           let v = 0;
           for (this._anchors.some((g) => g.id === r) && v++; this._anchors.some((g) => g.id === `${r}-${v}`); )
             v++;
           v === 0 ? t.setAttribute("id", r) : t.setAttribute("id", `${r}-${v}`);
         }
-        let a = this._selectors.indexOf(
+        let o = this._selectors.indexOf(
           `${t.tagName.toLowerCase()}.${y}`
         );
-        a === -1 && (a = this._selectors.indexOf(
+        o === -1 && (o = this._selectors.indexOf(
           `dap-ds-typography[variant=${t.getAttribute("variant")}][anchor]`
         )), e[s] = {
           id: r,
           text: i,
-          level: Math.floor(a / 2)
+          level: Math.floor(o / 2)
         };
       })), e;
     }), this._handleIntersect = (e) => {
@@ -88,9 +85,9 @@ const m = class m extends E(k) {
       let t = null, s = -1 / 0;
       if (this._intersectionData.forEach((i, r) => {
         if (!i.isIntersecting) return;
-        const a = Math.abs(
+        const o = Math.abs(
           i.boundingRect.top + i.boundingRect.height / 2 - e
-        ), h = i.intersectionRatio - a / window.innerHeight * 0.5;
+        ), h = i.intersectionRatio - o / window.innerHeight * 0.5;
         h > s && (s = h, t = r);
       }), t && t.id) {
         const i = this.shadowRoot.querySelector(
@@ -119,22 +116,22 @@ const m = class m extends E(k) {
       rootMargin: this.rootMargin,
       threshold: this.threshold
     };
-    this._observer = new IntersectionObserver(this._handleIntersect, e), this._lastAnchorObserver = new IntersectionObserver(this._handleIntersect, A(w({}, e), {
+    this._observer = new IntersectionObserver(this._handleIntersect, e), this._lastAnchorObserver = new IntersectionObserver(this._handleIntersect, w(A({}, e), {
       rootMargin: this.lastAnchorRootMargin
     })), window.addEventListener("scroll", this.onScroll);
   }
   firstUpdated(e) {
-    return u(this, null, function* () {
+    return p(this, null, function* () {
       f(m.prototype, this, "firstUpdated").call(this, e), yield this.renderTree();
     });
   }
   attributeChangedCallback(e, t, s) {
-    return u(this, null, function* () {
+    return p(this, null, function* () {
       f(m.prototype, this, "attributeChangedCallback").call(this, e, t, s), yield this.renderTree();
     });
   }
   updated(e) {
-    return u(this, null, function* () {
+    return p(this, null, function* () {
       f(m.prototype, this, "updated").call(this, e), yield this.renderTree();
     });
   }
@@ -143,23 +140,23 @@ const m = class m extends E(k) {
     super.disconnectedCallback(), this._observer && ((e = this._observer) == null || e.disconnect(), (t = this._lastAnchorObserver) == null || t.disconnect(), window.removeEventListener("scroll", this.onScroll));
   }
   renderTree() {
-    return u(this, null, function* () {
+    return p(this, null, function* () {
       var i, r;
       if (this._anchors = this.getAnchors(
         this.minHeadingLevel ? this.minHeadingLevel : 2,
         this.maxHeadingLevel ? this.maxHeadingLevel : 3
       ), this._anchors.length === 0 || !this._anchors)
         return;
-      this._anchors.forEach((a, o) => {
+      this._anchors.forEach((o, n) => {
         var h, l;
-        o === this._anchors.length - 1 ? (h = this._lastAnchorObserver) == null || h.observe(a) : (l = this._observer) == null || l.observe(a);
+        n === this._anchors.length - 1 ? (h = this._lastAnchorObserver) == null || h.observe(o) : (l = this._observer) == null || l.observe(o);
       }), this._items = yield this.getHeaders();
       const e = this.buildTree(this._items), t = document.createElement("div");
       t.setAttribute("part", "base"), t.classList.add("toc");
       const s = `
-        <span class="toc-title toc-title--${this.effectiveSize}">${(i = this.header) != null ? i : x("tocTitle")}</span>
-        <nav aria-label='${(r = this.header) != null ? r : x("tocTitle")}''>${e}</nav>`;
-      t.innerHTML = s, this.shadowRoot && (this.shadowRoot.removeChild(this.shadowRoot.childNodes[0]), this.shadowRoot.appendChild(t));
+        <span part="title" class="toc-title toc-title--${this.effectiveSize}">${(i = this.header) != null ? i : x("tocTitle")}</span>
+        <nav part="nav" aria-label='${(r = this.header) != null ? r : x("tocTitle")}'>${e}</nav>`;
+      t.innerHTML = s, this.shadowRoot && (this.shadowRoot.querySelectorAll(".toc").forEach((o) => o.remove()), this.shadowRoot.appendChild(t));
     });
   }
   getAnchors(e, t) {
@@ -183,47 +180,47 @@ const m = class m extends E(k) {
     const r = () => {
       s.length > 0 && (t[t.length - 1] += this.buildTree(s));
     };
-    e.forEach((o) => {
-      if (i !== -1 && i < o.level) {
-        s.push(o);
+    e.forEach((n) => {
+      if (i !== -1 && i < n.level) {
+        s.push(n);
         return;
       }
-      r(), i = o.level, t.push(
-        `<a href="#${o.id}" class="toc-link toc-link--${this.effectiveSize}">${o.text}<span class="toc-link__high-contrast"></span></a>`
+      r(), i = n.level, t.push(
+        `<a href="#${n.id}" class="toc-link toc-link--${this.effectiveSize}">${n.text}<span class="toc-link__high-contrast"></span></a>`
       ), s = [];
     }), r();
-    const a = t.map(
-      (o) => `<li class="toc-item ${"toc-item-level-" + i}">${o}</li>`
+    const o = t.map(
+      (n) => `<li class="toc-item ${"toc-item-level-" + i}">${n}</li>`
     ).join("");
     return `<ul class="${I({
       "toc--no-indent": this.noIndent
-    })}">${a}</ul>`;
+    })}">${o}</ul>`;
   }
 };
-m.tagName = "dap-ds-toc", m.styles = j(S);
+m.tagName = "dap-ds-toc", m.styles = E(j);
 let c = m;
-p([
+u([
   d()
 ], c.prototype, "root");
-p([
+u([
   d()
 ], c.prototype, "rootMargin");
-p([
+u([
   d()
 ], c.prototype, "lastAnchorRootMargin");
-p([
+u([
   d({ type: Array })
 ], c.prototype, "threshold");
-p([
+u([
   d({ type: Number })
 ], c.prototype, "minHeadingLevel");
-p([
+u([
   d({ type: Number })
 ], c.prototype, "maxHeadingLevel");
-p([
+u([
   d({ type: Boolean })
 ], c.prototype, "noIndent");
-p([
+u([
   d()
 ], c.prototype, "header");
 export {