dap-design-system 0.62.3 → 0.63.0

package/dist/components/timeline/timeline-item.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeline-item.component.js","sources":["../../../src/components/timeline/timeline-item.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { html } from 'lit/static-html.js'\n\nimport { DdsElement } from '@/internal/dds-hu-element'\n\nimport styles from './timeline-item.scss?inline'\n\n/**\n * `dap-ds-timeline-item`\n * @summary A timeline is a graphical representation of a series of events.\n * @element dap-ds-timeline-item\n * @title - Timeline item\n * @group timeline\n *\n * @slot - The default slot for the item content.\n *\n * @csspart base - The main timeline item container.\n * @csspart connector - The connector element between two timeline items.\n * @csspart content - The content of the timeline item.\n *\n * @cssproperty --dds-timeline-position - Position of the timeline dot (default: 28px)\n * @cssproperty --dds-timeline-connector-width - Width of the timeline connector line (default: 1px)\n * @cssproperty --dds-timeline-connector-left-position - Left position of the timeline connector (default: 5.5px)\n * @cssproperty --dds-timeline-dot-size - Size of the timeline dot (default: var(--dds-spacing-300))\n * @cssproperty --dds-timeline-item-margin-bottom - Bottom margin of timeline items (default: var(--dds-spacing-200))\n * @cssproperty --dds-timeline-item-padding-left - Left padding of timeline items (default: var(--dds-spacing-400))\n */\nexport default class DapDSTimelineItem extends DdsElement {\n  static tagName = 'dap-ds-timeline-item'\n\n  static readonly styles = unsafeCSS(styles)\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${clsx('timeline-item', {\n          'timeline-item--first': this.hasAttribute('first'),\n          'timeline-item--last': this.hasAttribute('last'),\n          'timeline-item--middle': this.hasAttribute('middle'),\n        })}>\n        <div part=\"connector\" class=\"timeline-connector\"></div>\n        <div part=\"content\" class=\"timeline-content\">\n          <slot></slot>\n        </div>\n      </div>\n    `\n  }\n}\n"],"names":["_DapDSTimelineItem","DdsElement","html","clsx","unsafeCSS","styles","DapDSTimelineItem"],"mappings":";;;;;;;;AA4BA,MAAqBA,IAArB,MAAqBA,UAA0BC,EAAW;AAAA,EAKxD,SAAS;AACA,WAAAC;AAAAA;AAAAA;AAAAA,gBAGKC,EAAK,iBAAiB;AAAA,MAC5B,wBAAwB,KAAK,aAAa,OAAO;AAAA,MACjD,uBAAuB,KAAK,aAAa,MAAM;AAAA,MAC/C,yBAAyB,KAAK,aAAa,QAAQ;AAAA,IAAA,CACpD,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAQV;AApBEH,EAAO,UAAU,wBAEDA,EAAA,SAASI,EAAUC,CAAM;AAH3C,IAAqBC,IAArBN;"}
+{"version":3,"file":"timeline-item.component.js","sources":["../../../src/components/timeline/timeline-item.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { html } from 'lit/static-html.js'\n\nimport { DdsElement } from '@/internal/dds-hu-element'\n\nimport styles from './timeline-item.scss?inline'\n\n/**\n * `dap-ds-timeline-item`\n * @summary A timeline is a graphical representation of a series of events.\n * @element dap-ds-timeline-item\n * @title - Timeline item\n * @group timeline\n *\n * @slot - The default slot for the item content.\n *\n * @csspart base - The main timeline item container.\n * @csspart connector - The connector element between two timeline items.\n * @csspart content - The content of the timeline item.\n *\n * @cssproperty --dds-timeline-position - Position of the timeline dot (default: 28px)\n * @cssproperty --dds-timeline-connector-width - Width of the timeline connector line (default: 1px)\n * @cssproperty --dds-timeline-connector-left-position - Left position of the timeline connector (default: 5.5px)\n * @cssproperty --dds-timeline-dot-size - Size of the timeline dot (default: var(--dds-spacing-300))\n * @cssproperty --dds-timeline-item-margin-bottom - Bottom margin of timeline items (default: var(--dds-spacing-200))\n * @cssproperty --dds-timeline-item-padding-left - Left padding of timeline items (default: var(--dds-spacing-400))\n */\nexport default class DapDSTimelineItem extends DdsElement {\n  static tagName = 'dap-ds-timeline-item'\n\n  static readonly styles = unsafeCSS(styles)\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${clsx('timeline-item', {\n          'timeline-item--first': this.hasAttribute('first'),\n          'timeline-item--last': this.hasAttribute('last'),\n          'timeline-item--middle': this.hasAttribute('middle'),\n        })}>\n        <div part=\"connector\" class=\"timeline-connector\"></div>\n        <div part=\"content\" class=\"timeline-content\">\n          <slot></slot>\n        </div>\n      </div>\n    `\n  }\n}\n"],"names":["_DapDSTimelineItem","DdsElement","html","clsx","unsafeCSS","styles","DapDSTimelineItem"],"mappings":";;;;;AA4BA,MAAqBA,IAArB,MAAqBA,UAA0BC,EAAW;AAAA,EAKxD,SAAS;AACA,WAAAC;AAAA;AAAA;AAAA,gBAGKC,EAAK,iBAAiB;AAAA,MAC5B,wBAAwB,KAAK,aAAa,OAAO;AAAA,MACjD,uBAAuB,KAAK,aAAa,MAAM;AAAA,MAC/C,yBAAyB,KAAK,aAAa,QAAQ;AAAA,IAAA,CACpD,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAQV;AApBEH,EAAO,UAAU,wBAEDA,EAAA,SAASI,EAAUC,CAAM;AAH3C,IAAqBC,IAArBN;"}

package/dist/components/timeline/timeline.component.js

@@ -1,10 +1,7 @@
-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 { html as l } from "../../node_modules/lit-html/static.js";
+import { unsafeCSS as l } from "lit";
+import { html as a } from "lit/static-html.js";
 import { DdsElement as m } from "../../internal/dds-hu-element.js";
-import a from "./timeline.scss.js";
-import { unsafeCSS as f } from "../../node_modules/@lit/reactive-element/css-tag.js";
+import f from "./timeline.scss.js";
 const e = class e extends m {
   firstUpdated(o) {
     super.firstUpdated(o), this.setAttribute("role", "list");
@@ -14,14 +11,14 @@ const e = class e extends m {
     });
   }
   render() {
-    return l`
+    return a`
       <div part="base" class="timeline">
         <slot></slot>
       </div>
     `;
   }
 };
-e.tagName = "dap-ds-timeline", e.styles = f(a);
+e.tagName = "dap-ds-timeline", e.styles = l(f);
 let i = e;
 export {
   i as default

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

@@ -1 +1 @@
-{"version":3,"file":"timeline.component.js","sources":["../../../src/components/timeline/timeline.component.ts"],"sourcesContent":["import { PropertyValueMap, unsafeCSS } from 'lit'\nimport { html } from 'lit/static-html.js'\n\nimport { DdsElement } from '@/internal/dds-hu-element'\n\nimport styles from './timeline.scss?inline'\n\n/**\n * `dap-ds-timeline`\n * @summary A timeline is a graphical representation of a series of events.\n * @element dap-ds-timeline\n * @title - Timeline\n *\n * @slot - The default slot for the timeline items.\n *\n * @csspart base - The main timeline container.\n */\nexport default class DapDSTimeline extends DdsElement {\n  static tagName = 'dap-ds-timeline'\n\n  static readonly styles = unsafeCSS(styles)\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n    this.setAttribute('role', 'list')\n\n    const children = Array.from(this.children)\n\n    children.forEach((child, index) => {\n      child.setAttribute('role', 'listitem')\n      if (index === 0) {\n        child.toggleAttribute('first')\n      } else if (index === children.length - 1) {\n        child.toggleAttribute('last')\n      } else {\n        child.removeAttribute('first')\n        child.removeAttribute('last')\n        child.toggleAttribute('middle')\n      }\n    })\n  }\n\n  render() {\n    return html`\n      <div part=\"base\" class=\"timeline\">\n        <slot></slot>\n      </div>\n    `\n  }\n}\n"],"names":["_DapDSTimeline","DdsElement","_changedProperties","children","child","index","html","unsafeCSS","styles","DapDSTimeline"],"mappings":";;;;;;;AAiBA,MAAqBA,IAArB,MAAqBA,UAAsBC,EAAW;AAAA,EAK1C,aACRC,GACM;AACN,UAAM,aAAaA,CAAkB,GAChC,KAAA,aAAa,QAAQ,MAAM;AAEhC,UAAMC,IAAW,MAAM,KAAK,KAAK,QAAQ;AAEhC,IAAAA,EAAA,QAAQ,CAACC,GAAOC,MAAU;AAC3B,MAAAD,EAAA,aAAa,QAAQ,UAAU,GACjCC,MAAU,IACZD,EAAM,gBAAgB,OAAO,IACpBC,MAAUF,EAAS,SAAS,IACrCC,EAAM,gBAAgB,MAAM,KAE5BA,EAAM,gBAAgB,OAAO,GAC7BA,EAAM,gBAAgB,MAAM,GAC5BA,EAAM,gBAAgB,QAAQ;AAAA,IAChC,CACD;AAAA,EAAA;AAAA,EAGH,SAAS;AACA,WAAAE;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,EAAA;AAMX;AAjCEN,EAAO,UAAU,mBAEDA,EAAA,SAASO,EAAUC,CAAM;AAH3C,IAAqBC,IAArBT;"}
+{"version":3,"file":"timeline.component.js","sources":["../../../src/components/timeline/timeline.component.ts"],"sourcesContent":["import { PropertyValueMap, unsafeCSS } from 'lit'\nimport { html } from 'lit/static-html.js'\n\nimport { DdsElement } from '@/internal/dds-hu-element'\n\nimport styles from './timeline.scss?inline'\n\n/**\n * `dap-ds-timeline`\n * @summary A timeline is a graphical representation of a series of events.\n * @element dap-ds-timeline\n * @title - Timeline\n *\n * @slot - The default slot for the timeline items.\n *\n * @csspart base - The main timeline container.\n */\nexport default class DapDSTimeline extends DdsElement {\n  static tagName = 'dap-ds-timeline'\n\n  static readonly styles = unsafeCSS(styles)\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n    this.setAttribute('role', 'list')\n\n    const children = Array.from(this.children)\n\n    children.forEach((child, index) => {\n      child.setAttribute('role', 'listitem')\n      if (index === 0) {\n        child.toggleAttribute('first')\n      } else if (index === children.length - 1) {\n        child.toggleAttribute('last')\n      } else {\n        child.removeAttribute('first')\n        child.removeAttribute('last')\n        child.toggleAttribute('middle')\n      }\n    })\n  }\n\n  render() {\n    return html`\n      <div part=\"base\" class=\"timeline\">\n        <slot></slot>\n      </div>\n    `\n  }\n}\n"],"names":["_DapDSTimeline","DdsElement","_changedProperties","children","child","index","html","unsafeCSS","styles","DapDSTimeline"],"mappings":";;;;AAiBA,MAAqBA,IAArB,MAAqBA,UAAsBC,EAAW;AAAA,EAK1C,aACRC,GACM;AACN,UAAM,aAAaA,CAAkB,GAChC,KAAA,aAAa,QAAQ,MAAM;AAEhC,UAAMC,IAAW,MAAM,KAAK,KAAK,QAAQ;AAEhC,IAAAA,EAAA,QAAQ,CAACC,GAAOC,MAAU;AAC3B,MAAAD,EAAA,aAAa,QAAQ,UAAU,GACjCC,MAAU,IACZD,EAAM,gBAAgB,OAAO,IACpBC,MAAUF,EAAS,SAAS,IACrCC,EAAM,gBAAgB,MAAM,KAE5BA,EAAM,gBAAgB,OAAO,GAC7BA,EAAM,gBAAgB,MAAM,GAC5BA,EAAM,gBAAgB,QAAQ;AAAA,IAChC,CACD;AAAA,EAAA;AAAA,EAGH,SAAS;AACA,WAAAE;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAMX;AAjCEN,EAAO,UAAU,mBAEDA,EAAA,SAASO,EAAUC,CAAM;AAH3C,IAAqBC,IAArBT;"}

package/dist/components/timepicker/time-grid.component.d.ts

@@ -29,6 +29,9 @@ import { default as DapDSDivider } from '../divider/divider.component';
  * @csspart section-header-title - The title of the section header.
  * @csspart section-header-divider - The divider between the section header and the time buttons.
  * @csspart time-column - The time column container.
+ * @csspart presets-section - The presets section.
+ * @csspart preset-button - Individual preset buttons.
+ * @csspart second-section - The second selection section.
  *
  * @cssprop --dds-time-grid-gap - The gap between time sections (default: var(--dds-spacing-400)).
  * @cssprop --dds-time-grid-padding - The padding around the time grid (default: var(--dds-spacing-0)).

package/dist/components/timepicker/time-grid.component.js

@@ -9,23 +9,20 @@ var v = (h, t, e) => t in h ? y(h, t, { enumerable: !0, configurable: !0, writab
       $.call(t, e) && v(h, e, t[e]);
   return h;
 };
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { html as p } from "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as n } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { DdsElement as M } from "../../internal/dds-hu-element.js";
-import { getTimeFormatPreference as B } from "../../localization/localization.js";
-import H from "../button/button.component.js";
-import I from "../divider/divider.component.js";
-import D from "./time-grid.scss.js";
+import { unsafeCSS as M, html as p } from "lit";
+import { property as n } from "lit/decorators.js";
+import { DdsElement as B } from "../../internal/dds-hu-element.js";
+import { getTimeFormatPreference as H } from "../../localization/localization.js";
+import I from "../button/button.component.js";
+import D from "../divider/divider.component.js";
+import w from "./time-grid.scss.js";
 import { t as S } from "../../node_modules/i18next/dist/esm/i18next.js";
-import { unsafeCSS as w } from "../../node_modules/@lit/reactive-element/css-tag.js";
 var C = Object.defineProperty, d = (h, t, e, r) => {
   for (var i = void 0, a = h.length - 1, l; a >= 0; a--)
     (l = h[a]) && (i = l(t, e, i) || i);
   return i && C(t, e, i), i;
 };
-const m = class m extends M {
+const m = class m extends B {
   constructor() {
     super(...arguments), this.selectedHour = 12, this.selectedMinute = 0, this.selectedSecond = 0, this.minTime = "00:00", this.maxTime = "23:59", this.step = 5, this.locale = "en", this.showSeconds = !1, this.secondsStep = 1, this.hideDisabledTimes = !1, this.presetButtonTestId = "time-grid-preset-button", this.hourButtonTestId = "time-grid-hour-button", this.minuteButtonTestId = "time-grid-minute-button", this.secondButtonTestId = "time-grid-second-button";
   }
@@ -65,7 +62,7 @@ const m = class m extends M {
     this.emit("dds-change", t);
   }
   formatHour(t) {
-    return B(this.locale) === "24h" ? t.toString().padStart(2, "0") : t === 0 ? "12 AM" : t === 12 ? "12 PM" : t > 12 ? `${t - 12} PM` : `${t} AM`;
+    return H(this.locale) === "24h" ? t.toString().padStart(2, "0") : t === 0 ? "12 AM" : t === 12 ? "12 PM" : t > 12 ? `${t - 12} PM` : `${t} AM`;
   }
   formatMinute(t) {
     return t.toString().padStart(2, "0");
@@ -291,9 +288,9 @@ const m = class m extends M {
   }
 };
 m.tagName = "dap-ds-time-grid", m.dependencies = {
-  "dap-ds-button": H,
-  "dap-ds-divider": I
-}, m.styles = w(D);
+  "dap-ds-button": I,
+  "dap-ds-divider": D
+}, m.styles = M(w);
 let o = m;
 d([
   n({ type: Number })

package/dist/components/timepicker/time-grid.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-grid.component.js","sources":["../../../src/components/timepicker/time-grid.component.ts"],"sourcesContent":["import { html, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { TimePreset, TimeSelection } from '@/common/types'\nimport { DdsElement } from '@/internal/dds-hu-element'\nimport { getTimeFormatPreference, t } from '@/localization/localization'\n\nimport DapDSButton from '../button/button.component'\nimport DapDSDivider from '../divider/divider.component'\nimport styles from './time-grid.scss?inline'\n/**\n * `dap-ds-time-grid`\n * @summary A time grid component that allows users to select hours and minutes in two side-by-side scrollable columns.\n * @element dap-ds-time-grid\n * @title - Time grid\n * @group timepicker\n *\n * @property {number} selectedHour - The currently selected hour (0-23).\n * @property {number} selectedMinute - The currently selected minute (0-59).\n * @property {string} minTime - The minimum selectable time (format: 'HH:mm').\n * @property {string} maxTime - The maximum selectable time (format: 'HH:mm').\n * @property {number} step - The step interval in minutes.\n * @property {string} locale - The locale for time formatting.\n *\n * @event {{ detail: TimeSelection }} dds-change - Fired when time selection changes.\n * @event {{ void }} dds-close - Fired when the time grid should close.\n *\n * @csspart time-grid - The main time grid container.\n * @csspart hour-section - The hour selection section.\n * @csspart minute-section - The minute selection section.\n * @csspart time-button - Individual time selection buttons.\n * @csspart time-button-base - The base part of the time button.\n * @csspart time-button-content - The content part of the time button.\n * @csspart time-button-high-contrast - The high contrast part of the time button.\n * @csspart section-header-title - The title of the section header.\n * @csspart section-header-divider - The divider between the section header and the time buttons.\n * @csspart time-column - The time column container.\n *\n * @cssprop --dds-time-grid-gap - The gap between time sections (default: var(--dds-spacing-400)).\n * @cssprop --dds-time-grid-padding - The padding around the time grid (default: var(--dds-spacing-0)).\n * @cssprop --dds-time-grid-column-gap - The gap between time buttons in columns (default: var(--dds-spacing-200)).\n * @cssprop --dds-time-grid-border-radius - The border radius of the time grid (default: var(--dds-radius-base)).\n * @cssprop --dds-time-grid-background - The background color of the time grid (default: var(--dds-background-neutral-subtle)).\n * @cssprop --dds-time-grid-transition - The transition timing for the time grid (default: all 0.2s ease-in-out).\n * @cssprop --dds-time-grid-max-width - The maximum width of the time grid (default: 400px).\n * @cssprop --dds-time-grid-column-max-height - The maximum height of time columns (default: 240px).\n */\nexport default class DapDSTimeGrid extends DdsElement {\n  static tagName = 'dap-ds-time-grid'\n\n  static dependencies = {\n    'dap-ds-button': DapDSButton,\n    'dap-ds-divider': DapDSDivider,\n  }\n\n  @property({ type: Number }) selectedHour = 12\n  @property({ type: Number }) selectedMinute = 0\n  @property({ type: Number }) selectedSecond = 0\n  @property({ type: String }) minTime = '00:00'\n  @property({ type: String }) maxTime = '23:59'\n  @property({ type: Number }) step = 5\n  @property({ type: String }) locale = 'en'\n  @property({ type: Boolean }) showSeconds = false\n  @property({ type: Number }) secondsStep = 1\n  @property({ attribute: false }) disabledTime?: (\n    hour: number,\n    minute: number,\n    second?: number,\n  ) => boolean\n  @property({ type: Boolean }) hideDisabledTimes = false\n  @property({ type: Array }) presets?: TimePreset[]\n\n  /** `data-testid` base for the preset buttons (preset value appended). */\n  @property() presetButtonTestId = 'time-grid-preset-button'\n\n  /** `data-testid` base for the hour select buttons (hour value appended). */\n  @property() hourButtonTestId = 'time-grid-hour-button'\n\n  /** `data-testid` base for the minute select buttons (minute value appended). */\n  @property() minuteButtonTestId = 'time-grid-minute-button'\n\n  /** `data-testid` base for the second select buttons (second value appended). */\n  @property() secondButtonTestId = 'time-grid-second-button'\n\n  static readonly styles = unsafeCSS(styles)\n\n  private getHours(): number[] {\n    return Array.from({ length: 24 }, (_, i) => i)\n  }\n\n  private getMinutes(): number[] {\n    const minutes = []\n    for (let i = 0; i < 60; i += this.step) {\n      minutes.push(i)\n    }\n    return minutes\n  }\n\n  private getSeconds(): number[] {\n    const seconds = []\n    for (let i = 0; i < 60; i += this.secondsStep) {\n      seconds.push(i)\n    }\n    return seconds\n  }\n\n  private isTimeDisabled(\n    hour: number,\n    minute: number,\n    second?: number,\n  ): boolean {\n    // Check min/max time range\n    const timeStr = this.showSeconds\n      ? `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}:${(second ?? 0).toString().padStart(2, '0')}`\n      : `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`\n\n    const minTimeStr = this.minTime\n    const maxTimeStr = this.maxTime\n\n    const isOutOfRange = timeStr < minTimeStr || timeStr > maxTimeStr\n\n    // Check custom disabled callback\n    if (this.disabledTime) {\n      return isOutOfRange || this.disabledTime(hour, minute, second)\n    }\n\n    return isOutOfRange\n  }\n\n  private handleHourSelect(hour: number) {\n    this.selectedHour = hour\n    this.requestUpdate()\n    this.emitChange()\n  }\n\n  private handleMinuteSelect(minute: number) {\n    this.selectedMinute = minute\n    this.requestUpdate()\n    this.emitChange()\n  }\n\n  private handleSecondSelect(second: number) {\n    this.selectedSecond = second\n    this.requestUpdate()\n    this.emitChange()\n  }\n\n  private emitChange() {\n    const changeData: TimeSelection = {\n      hour: this.selectedHour,\n      minute: this.selectedMinute,\n      ...(this.showSeconds && { second: this.selectedSecond }),\n    }\n    this.emit('dds-change', changeData)\n  }\n\n  private formatHour(hour: number): string {\n    const timeFormat = getTimeFormatPreference(this.locale)\n\n    if (timeFormat === '24h') {\n      return hour.toString().padStart(2, '0')\n    }\n\n    // 12-hour format\n    if (hour === 0) return '12 AM'\n    if (hour === 12) return '12 PM'\n    if (hour > 12) return `${hour - 12} PM`\n    return `${hour} AM`\n  }\n\n  private formatMinute(minute: number): string {\n    return minute.toString().padStart(2, '0')\n  }\n\n  private formatSecond(second: number): string {\n    return second.toString().padStart(2, '0')\n  }\n\n  private handlePresetSelect(preset: TimePreset) {\n    // Parse the preset value and set the time\n    const timeParts = preset.value.split(':')\n    const hour = parseInt(timeParts[0], 10)\n    const minute = parseInt(timeParts[1], 10)\n    const second = timeParts[2] ? parseInt(timeParts[2], 10) : 0\n\n    this.selectedHour = hour\n    this.selectedMinute = minute\n    if (this.showSeconds) {\n      this.selectedSecond = second\n    }\n\n    this.requestUpdate()\n    this.emitChange()\n  }\n\n  private isPresetDisabled(preset: TimePreset): boolean {\n    const timeParts = preset.value.split(':')\n    const hour = parseInt(timeParts[0], 10)\n    const minute = parseInt(timeParts[1], 10)\n    const second = timeParts[2] ? parseInt(timeParts[2], 10) : undefined\n\n    return this.isTimeDisabled(hour, minute, second)\n  }\n\n  public scrollToSelectedTime() {\n    // Scroll to selected hour\n    const hourColumn = this.shadowRoot?.querySelector('#hour-column')\n    if (hourColumn) {\n      const hourButtons = hourColumn.querySelectorAll('dap-ds-button')\n      const selectedHourButton = Array.from(hourButtons).find(\n        button =>\n          button.textContent?.trim() === this.formatHour(this.selectedHour),\n      )\n\n      if (selectedHourButton) {\n        selectedHourButton.scrollIntoView({\n          behavior: 'smooth',\n          block: 'center',\n          inline: 'nearest',\n        })\n      }\n    }\n\n    // Scroll to selected minute\n    const minuteColumn = this.shadowRoot?.querySelector('#minute-column')\n    if (minuteColumn) {\n      const minuteButtons = minuteColumn.querySelectorAll('dap-ds-button')\n      const selectedMinuteButton = Array.from(minuteButtons).find(\n        button =>\n          button.textContent?.trim() === this.formatMinute(this.selectedMinute),\n      )\n\n      if (selectedMinuteButton) {\n        selectedMinuteButton.scrollIntoView({\n          behavior: 'smooth',\n          block: 'center',\n          inline: 'nearest',\n        })\n      }\n    }\n\n    // Scroll to selected second (if seconds are enabled)\n    if (this.showSeconds) {\n      const secondColumn = this.shadowRoot?.querySelector('#second-column')\n      if (secondColumn) {\n        const secondButtons = secondColumn.querySelectorAll('dap-ds-button')\n        const selectedSecondButton = Array.from(secondButtons).find(\n          button =>\n            button.textContent?.trim() ===\n            this.formatSecond(this.selectedSecond),\n        )\n\n        if (selectedSecondButton) {\n          selectedSecondButton.scrollIntoView({\n            behavior: 'smooth',\n            block: 'center',\n            inline: 'nearest',\n          })\n        }\n      }\n    }\n  }\n\n  override firstUpdated(changedProperties: Map<string, unknown>) {\n    super.firstUpdated(changedProperties)\n    // Scroll to selected time after first render\n    requestAnimationFrame(() => {\n      this.scrollToSelectedTime()\n    })\n  }\n\n  override updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties)\n\n    // Scroll to selected time when selection changes\n    if (\n      changedProperties.has('selectedHour') ||\n      changedProperties.has('selectedMinute') ||\n      changedProperties.has('selectedSecond')\n    ) {\n      requestAnimationFrame(() => {\n        this.scrollToSelectedTime()\n      })\n    }\n  }\n\n  render() {\n    const hours = this.getHours()\n    const minutes = this.getMinutes()\n    const seconds = this.showSeconds ? this.getSeconds() : []\n\n    // Filter hours, minutes, and seconds based on hideDisabledTimes\n    const filteredHours = this.hideDisabledTimes\n      ? hours.filter(\n          hour =>\n            !this.isTimeDisabled(\n              hour,\n              this.selectedMinute,\n              this.selectedSecond,\n            ),\n        )\n      : hours\n\n    const filteredMinutes = this.hideDisabledTimes\n      ? minutes.filter(\n          minute =>\n            !this.isTimeDisabled(\n              this.selectedHour,\n              minute,\n              this.selectedSecond,\n            ),\n        )\n      : minutes\n\n    const filteredSeconds = this.hideDisabledTimes\n      ? seconds.filter(\n          second =>\n            !this.isTimeDisabled(\n              this.selectedHour,\n              this.selectedMinute,\n              second,\n            ),\n        )\n      : seconds\n\n    return html`\n      <div part=\"time-grid\" class=\"time-grid\">\n        ${this.presets && this.presets.length > 0\n          ? html`\n              <div part=\"presets-section\" class=\"presets-section\">\n                ${this.presets.map(preset => {\n                  const isDisabled = this.isPresetDisabled(preset)\n                  return html`\n                    <dap-ds-button\n                      variant=\"outline\"\n                      size=\"xs\"\n                      part=\"preset-button\"\n                      data-testid=\"${this.presetButtonTestId}-${preset.value}\"\n                      ?disabled=${isDisabled}\n                      @click=${() => this.handlePresetSelect(preset)}>\n                      ${preset.label}\n                    </dap-ds-button>\n                  `\n                })}\n              </div>\n              <dap-ds-divider spacing=\"200\"></dap-ds-divider>\n            `\n          : ''}\n\n        <div class=\"time-columns\">\n          <div part=\"hour-section\" class=\"time-section\">\n            <div class=\"section-header\">\n              <span part=\"section-header-title\"\n                >${t('timepicker.hour', {\n                  lng: this.locale,\n                })}</span\n              >\n              <dap-ds-divider\n                part=\"section-header-divider\"\n                spacing=\"200\"></dap-ds-divider>\n            </div>\n            <div part=\"time-column\" class=\"time-column\" id=\"hour-column\">\n              ${filteredHours.map(hour => {\n                const isDisabled = this.isTimeDisabled(\n                  hour,\n                  this.selectedMinute,\n                  this.selectedSecond,\n                )\n                const isSelected = hour === this.selectedHour\n                return html`\n                  <dap-ds-button\n                    variant=\"subtle-menu\"\n                    ?active=${isSelected}\n                    part=\"time-button\"\n                    data-testid=\"${this.hourButtonTestId}-${hour}\"\n                    exportparts=\"base:time-button-base, content:time-button-content, high-contrast:time-button-high-contrast\"\n                    ?disabled=${isDisabled}\n                    @click=${() => this.handleHourSelect(hour)}>\n                    ${this.formatHour(hour)}\n                  </dap-ds-button>\n                `\n              })}\n            </div>\n          </div>\n\n          <div part=\"minute-section\" class=\"time-section\">\n            <div class=\"section-header\">\n              <span part=\"section-header-title\"\n                >${t('timepicker.minute', {\n                  lng: this.locale,\n                })}</span\n              >\n              <dap-ds-divider\n                part=\"section-header-divider\"\n                spacing=\"200\"></dap-ds-divider>\n            </div>\n            <div part=\"time-column\" class=\"time-column\" id=\"minute-column\">\n              ${filteredMinutes.map(minute => {\n                const isDisabled = this.isTimeDisabled(\n                  this.selectedHour,\n                  minute,\n                  this.selectedSecond,\n                )\n                const isSelected = minute === this.selectedMinute\n                return html`\n                  <dap-ds-button\n                    variant=\"subtle-menu\"\n                    ?active=${isSelected}\n                    part=\"time-button\"\n                    data-testid=\"${this.minuteButtonTestId}-${minute}\"\n                    ?disabled=${isDisabled}\n                    @click=${() => this.handleMinuteSelect(minute)}>\n                    ${this.formatMinute(minute)}\n                  </dap-ds-button>\n                `\n              })}\n            </div>\n          </div>\n\n          ${this.showSeconds\n            ? html`\n                <div part=\"second-section\" class=\"time-section\">\n                  <div class=\"section-header\">\n                    <span part=\"section-header-title\"\n                      >${t('timepicker.second', {\n                        lng: this.locale,\n                      })}</span\n                    >\n                    <dap-ds-divider\n                      part=\"section-header-divider\"\n                      spacing=\"200\"></dap-ds-divider>\n                  </div>\n                  <div\n                    part=\"time-column\"\n                    class=\"time-column\"\n                    id=\"second-column\">\n                    ${filteredSeconds.map(second => {\n                      const isDisabled = this.isTimeDisabled(\n                        this.selectedHour,\n                        this.selectedMinute,\n                        second,\n                      )\n                      const isSelected = second === this.selectedSecond\n                      return html`\n                        <dap-ds-button\n                          variant=\"subtle-menu\"\n                          ?active=${isSelected}\n                          part=\"time-button\"\n                          data-testid=\"${this.secondButtonTestId}-${second}\"\n                          ?disabled=${isDisabled}\n                          @click=${() => this.handleSecondSelect(second)}>\n                          ${this.formatSecond(second)}\n                        </dap-ds-button>\n                      `\n                    })}\n                  </div>\n                </div>\n              `\n            : ''}\n        </div>\n      </div>\n    `\n  }\n}\n"],"names":["_DapDSTimeGrid","DdsElement","_","i","minutes","seconds","hour","minute","second","timeStr","minTimeStr","maxTimeStr","isOutOfRange","changeData","__spreadValues","getTimeFormatPreference","preset","timeParts","hourColumn","_a","hourButtons","selectedHourButton","button","minuteColumn","_b","minuteButtons","selectedMinuteButton","secondColumn","_c","secondButtons","selectedSecondButton","changedProperties","hours","filteredHours","filteredMinutes","filteredSeconds","html","isDisabled","t","isSelected","DapDSButton","DapDSDivider","unsafeCSS","styles","DapDSTimeGrid","__decorateClass","property"],"mappings":"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"}
+{"version":3,"file":"time-grid.component.js","sources":["../../../src/components/timepicker/time-grid.component.ts"],"sourcesContent":["import { html, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { TimePreset, TimeSelection } from '@/common/types'\nimport { DdsElement } from '@/internal/dds-hu-element'\nimport { getTimeFormatPreference, t } from '@/localization/localization'\n\nimport DapDSButton from '../button/button.component'\nimport DapDSDivider from '../divider/divider.component'\nimport styles from './time-grid.scss?inline'\n/**\n * `dap-ds-time-grid`\n * @summary A time grid component that allows users to select hours and minutes in two side-by-side scrollable columns.\n * @element dap-ds-time-grid\n * @title - Time grid\n * @group timepicker\n *\n * @property {number} selectedHour - The currently selected hour (0-23).\n * @property {number} selectedMinute - The currently selected minute (0-59).\n * @property {string} minTime - The minimum selectable time (format: 'HH:mm').\n * @property {string} maxTime - The maximum selectable time (format: 'HH:mm').\n * @property {number} step - The step interval in minutes.\n * @property {string} locale - The locale for time formatting.\n *\n * @event {{ detail: TimeSelection }} dds-change - Fired when time selection changes.\n * @event {{ void }} dds-close - Fired when the time grid should close.\n *\n * @csspart time-grid - The main time grid container.\n * @csspart hour-section - The hour selection section.\n * @csspart minute-section - The minute selection section.\n * @csspart time-button - Individual time selection buttons.\n * @csspart time-button-base - The base part of the time button.\n * @csspart time-button-content - The content part of the time button.\n * @csspart time-button-high-contrast - The high contrast part of the time button.\n * @csspart section-header-title - The title of the section header.\n * @csspart section-header-divider - The divider between the section header and the time buttons.\n * @csspart time-column - The time column container.\n * @csspart presets-section - The presets section.\n * @csspart preset-button - Individual preset buttons.\n * @csspart second-section - The second selection section.\n *\n * @cssprop --dds-time-grid-gap - The gap between time sections (default: var(--dds-spacing-400)).\n * @cssprop --dds-time-grid-padding - The padding around the time grid (default: var(--dds-spacing-0)).\n * @cssprop --dds-time-grid-column-gap - The gap between time buttons in columns (default: var(--dds-spacing-200)).\n * @cssprop --dds-time-grid-border-radius - The border radius of the time grid (default: var(--dds-radius-base)).\n * @cssprop --dds-time-grid-background - The background color of the time grid (default: var(--dds-background-neutral-subtle)).\n * @cssprop --dds-time-grid-transition - The transition timing for the time grid (default: all 0.2s ease-in-out).\n * @cssprop --dds-time-grid-max-width - The maximum width of the time grid (default: 400px).\n * @cssprop --dds-time-grid-column-max-height - The maximum height of time columns (default: 240px).\n */\nexport default class DapDSTimeGrid extends DdsElement {\n  static tagName = 'dap-ds-time-grid'\n\n  static dependencies = {\n    'dap-ds-button': DapDSButton,\n    'dap-ds-divider': DapDSDivider,\n  }\n\n  @property({ type: Number }) selectedHour = 12\n  @property({ type: Number }) selectedMinute = 0\n  @property({ type: Number }) selectedSecond = 0\n  @property({ type: String }) minTime = '00:00'\n  @property({ type: String }) maxTime = '23:59'\n  @property({ type: Number }) step = 5\n  @property({ type: String }) locale = 'en'\n  @property({ type: Boolean }) showSeconds = false\n  @property({ type: Number }) secondsStep = 1\n  @property({ attribute: false }) disabledTime?: (\n    hour: number,\n    minute: number,\n    second?: number,\n  ) => boolean\n  @property({ type: Boolean }) hideDisabledTimes = false\n  @property({ type: Array }) presets?: TimePreset[]\n\n  /** `data-testid` base for the preset buttons (preset value appended). */\n  @property() presetButtonTestId = 'time-grid-preset-button'\n\n  /** `data-testid` base for the hour select buttons (hour value appended). */\n  @property() hourButtonTestId = 'time-grid-hour-button'\n\n  /** `data-testid` base for the minute select buttons (minute value appended). */\n  @property() minuteButtonTestId = 'time-grid-minute-button'\n\n  /** `data-testid` base for the second select buttons (second value appended). */\n  @property() secondButtonTestId = 'time-grid-second-button'\n\n  static readonly styles = unsafeCSS(styles)\n\n  private getHours(): number[] {\n    return Array.from({ length: 24 }, (_, i) => i)\n  }\n\n  private getMinutes(): number[] {\n    const minutes = []\n    for (let i = 0; i < 60; i += this.step) {\n      minutes.push(i)\n    }\n    return minutes\n  }\n\n  private getSeconds(): number[] {\n    const seconds = []\n    for (let i = 0; i < 60; i += this.secondsStep) {\n      seconds.push(i)\n    }\n    return seconds\n  }\n\n  private isTimeDisabled(\n    hour: number,\n    minute: number,\n    second?: number,\n  ): boolean {\n    // Check min/max time range\n    const timeStr = this.showSeconds\n      ? `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}:${(second ?? 0).toString().padStart(2, '0')}`\n      : `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`\n\n    const minTimeStr = this.minTime\n    const maxTimeStr = this.maxTime\n\n    const isOutOfRange = timeStr < minTimeStr || timeStr > maxTimeStr\n\n    // Check custom disabled callback\n    if (this.disabledTime) {\n      return isOutOfRange || this.disabledTime(hour, minute, second)\n    }\n\n    return isOutOfRange\n  }\n\n  private handleHourSelect(hour: number) {\n    this.selectedHour = hour\n    this.requestUpdate()\n    this.emitChange()\n  }\n\n  private handleMinuteSelect(minute: number) {\n    this.selectedMinute = minute\n    this.requestUpdate()\n    this.emitChange()\n  }\n\n  private handleSecondSelect(second: number) {\n    this.selectedSecond = second\n    this.requestUpdate()\n    this.emitChange()\n  }\n\n  private emitChange() {\n    const changeData: TimeSelection = {\n      hour: this.selectedHour,\n      minute: this.selectedMinute,\n      ...(this.showSeconds && { second: this.selectedSecond }),\n    }\n    this.emit('dds-change', changeData)\n  }\n\n  private formatHour(hour: number): string {\n    const timeFormat = getTimeFormatPreference(this.locale)\n\n    if (timeFormat === '24h') {\n      return hour.toString().padStart(2, '0')\n    }\n\n    // 12-hour format\n    if (hour === 0) return '12 AM'\n    if (hour === 12) return '12 PM'\n    if (hour > 12) return `${hour - 12} PM`\n    return `${hour} AM`\n  }\n\n  private formatMinute(minute: number): string {\n    return minute.toString().padStart(2, '0')\n  }\n\n  private formatSecond(second: number): string {\n    return second.toString().padStart(2, '0')\n  }\n\n  private handlePresetSelect(preset: TimePreset) {\n    // Parse the preset value and set the time\n    const timeParts = preset.value.split(':')\n    const hour = parseInt(timeParts[0], 10)\n    const minute = parseInt(timeParts[1], 10)\n    const second = timeParts[2] ? parseInt(timeParts[2], 10) : 0\n\n    this.selectedHour = hour\n    this.selectedMinute = minute\n    if (this.showSeconds) {\n      this.selectedSecond = second\n    }\n\n    this.requestUpdate()\n    this.emitChange()\n  }\n\n  private isPresetDisabled(preset: TimePreset): boolean {\n    const timeParts = preset.value.split(':')\n    const hour = parseInt(timeParts[0], 10)\n    const minute = parseInt(timeParts[1], 10)\n    const second = timeParts[2] ? parseInt(timeParts[2], 10) : undefined\n\n    return this.isTimeDisabled(hour, minute, second)\n  }\n\n  public scrollToSelectedTime() {\n    // Scroll to selected hour\n    const hourColumn = this.shadowRoot?.querySelector('#hour-column')\n    if (hourColumn) {\n      const hourButtons = hourColumn.querySelectorAll('dap-ds-button')\n      const selectedHourButton = Array.from(hourButtons).find(\n        button =>\n          button.textContent?.trim() === this.formatHour(this.selectedHour),\n      )\n\n      if (selectedHourButton) {\n        selectedHourButton.scrollIntoView({\n          behavior: 'smooth',\n          block: 'center',\n          inline: 'nearest',\n        })\n      }\n    }\n\n    // Scroll to selected minute\n    const minuteColumn = this.shadowRoot?.querySelector('#minute-column')\n    if (minuteColumn) {\n      const minuteButtons = minuteColumn.querySelectorAll('dap-ds-button')\n      const selectedMinuteButton = Array.from(minuteButtons).find(\n        button =>\n          button.textContent?.trim() === this.formatMinute(this.selectedMinute),\n      )\n\n      if (selectedMinuteButton) {\n        selectedMinuteButton.scrollIntoView({\n          behavior: 'smooth',\n          block: 'center',\n          inline: 'nearest',\n        })\n      }\n    }\n\n    // Scroll to selected second (if seconds are enabled)\n    if (this.showSeconds) {\n      const secondColumn = this.shadowRoot?.querySelector('#second-column')\n      if (secondColumn) {\n        const secondButtons = secondColumn.querySelectorAll('dap-ds-button')\n        const selectedSecondButton = Array.from(secondButtons).find(\n          button =>\n            button.textContent?.trim() ===\n            this.formatSecond(this.selectedSecond),\n        )\n\n        if (selectedSecondButton) {\n          selectedSecondButton.scrollIntoView({\n            behavior: 'smooth',\n            block: 'center',\n            inline: 'nearest',\n          })\n        }\n      }\n    }\n  }\n\n  override firstUpdated(changedProperties: Map<string, unknown>) {\n    super.firstUpdated(changedProperties)\n    // Scroll to selected time after first render\n    requestAnimationFrame(() => {\n      this.scrollToSelectedTime()\n    })\n  }\n\n  override updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties)\n\n    // Scroll to selected time when selection changes\n    if (\n      changedProperties.has('selectedHour') ||\n      changedProperties.has('selectedMinute') ||\n      changedProperties.has('selectedSecond')\n    ) {\n      requestAnimationFrame(() => {\n        this.scrollToSelectedTime()\n      })\n    }\n  }\n\n  render() {\n    const hours = this.getHours()\n    const minutes = this.getMinutes()\n    const seconds = this.showSeconds ? this.getSeconds() : []\n\n    // Filter hours, minutes, and seconds based on hideDisabledTimes\n    const filteredHours = this.hideDisabledTimes\n      ? hours.filter(\n          hour =>\n            !this.isTimeDisabled(\n              hour,\n              this.selectedMinute,\n              this.selectedSecond,\n            ),\n        )\n      : hours\n\n    const filteredMinutes = this.hideDisabledTimes\n      ? minutes.filter(\n          minute =>\n            !this.isTimeDisabled(\n              this.selectedHour,\n              minute,\n              this.selectedSecond,\n            ),\n        )\n      : minutes\n\n    const filteredSeconds = this.hideDisabledTimes\n      ? seconds.filter(\n          second =>\n            !this.isTimeDisabled(\n              this.selectedHour,\n              this.selectedMinute,\n              second,\n            ),\n        )\n      : seconds\n\n    return html`\n      <div part=\"time-grid\" class=\"time-grid\">\n        ${this.presets && this.presets.length > 0\n          ? html`\n              <div part=\"presets-section\" class=\"presets-section\">\n                ${this.presets.map(preset => {\n                  const isDisabled = this.isPresetDisabled(preset)\n                  return html`\n                    <dap-ds-button\n                      variant=\"outline\"\n                      size=\"xs\"\n                      part=\"preset-button\"\n                      data-testid=\"${this.presetButtonTestId}-${preset.value}\"\n                      ?disabled=${isDisabled}\n                      @click=${() => this.handlePresetSelect(preset)}>\n                      ${preset.label}\n                    </dap-ds-button>\n                  `\n                })}\n              </div>\n              <dap-ds-divider spacing=\"200\"></dap-ds-divider>\n            `\n          : ''}\n\n        <div class=\"time-columns\">\n          <div part=\"hour-section\" class=\"time-section\">\n            <div class=\"section-header\">\n              <span part=\"section-header-title\"\n                >${t('timepicker.hour', {\n                  lng: this.locale,\n                })}</span\n              >\n              <dap-ds-divider\n                part=\"section-header-divider\"\n                spacing=\"200\"></dap-ds-divider>\n            </div>\n            <div part=\"time-column\" class=\"time-column\" id=\"hour-column\">\n              ${filteredHours.map(hour => {\n                const isDisabled = this.isTimeDisabled(\n                  hour,\n                  this.selectedMinute,\n                  this.selectedSecond,\n                )\n                const isSelected = hour === this.selectedHour\n                return html`\n                  <dap-ds-button\n                    variant=\"subtle-menu\"\n                    ?active=${isSelected}\n                    part=\"time-button\"\n                    data-testid=\"${this.hourButtonTestId}-${hour}\"\n                    exportparts=\"base:time-button-base, content:time-button-content, high-contrast:time-button-high-contrast\"\n                    ?disabled=${isDisabled}\n                    @click=${() => this.handleHourSelect(hour)}>\n                    ${this.formatHour(hour)}\n                  </dap-ds-button>\n                `\n              })}\n            </div>\n          </div>\n\n          <div part=\"minute-section\" class=\"time-section\">\n            <div class=\"section-header\">\n              <span part=\"section-header-title\"\n                >${t('timepicker.minute', {\n                  lng: this.locale,\n                })}</span\n              >\n              <dap-ds-divider\n                part=\"section-header-divider\"\n                spacing=\"200\"></dap-ds-divider>\n            </div>\n            <div part=\"time-column\" class=\"time-column\" id=\"minute-column\">\n              ${filteredMinutes.map(minute => {\n                const isDisabled = this.isTimeDisabled(\n                  this.selectedHour,\n                  minute,\n                  this.selectedSecond,\n                )\n                const isSelected = minute === this.selectedMinute\n                return html`\n                  <dap-ds-button\n                    variant=\"subtle-menu\"\n                    ?active=${isSelected}\n                    part=\"time-button\"\n                    data-testid=\"${this.minuteButtonTestId}-${minute}\"\n                    ?disabled=${isDisabled}\n                    @click=${() => this.handleMinuteSelect(minute)}>\n                    ${this.formatMinute(minute)}\n                  </dap-ds-button>\n                `\n              })}\n            </div>\n          </div>\n\n          ${this.showSeconds\n            ? html`\n                <div part=\"second-section\" class=\"time-section\">\n                  <div class=\"section-header\">\n                    <span part=\"section-header-title\"\n                      >${t('timepicker.second', {\n                        lng: this.locale,\n                      })}</span\n                    >\n                    <dap-ds-divider\n                      part=\"section-header-divider\"\n                      spacing=\"200\"></dap-ds-divider>\n                  </div>\n                  <div\n                    part=\"time-column\"\n                    class=\"time-column\"\n                    id=\"second-column\">\n                    ${filteredSeconds.map(second => {\n                      const isDisabled = this.isTimeDisabled(\n                        this.selectedHour,\n                        this.selectedMinute,\n                        second,\n                      )\n                      const isSelected = second === this.selectedSecond\n                      return html`\n                        <dap-ds-button\n                          variant=\"subtle-menu\"\n                          ?active=${isSelected}\n                          part=\"time-button\"\n                          data-testid=\"${this.secondButtonTestId}-${second}\"\n                          ?disabled=${isDisabled}\n                          @click=${() => this.handleSecondSelect(second)}>\n                          ${this.formatSecond(second)}\n                        </dap-ds-button>\n                      `\n                    })}\n                  </div>\n                </div>\n              `\n            : ''}\n        </div>\n      </div>\n    `\n  }\n}\n"],"names":["_DapDSTimeGrid","DdsElement","_","i","minutes","seconds","hour","minute","second","timeStr","minTimeStr","maxTimeStr","isOutOfRange","changeData","__spreadValues","getTimeFormatPreference","preset","timeParts","hourColumn","_a","hourButtons","selectedHourButton","button","minuteColumn","_b","minuteButtons","selectedMinuteButton","secondColumn","_c","secondButtons","selectedSecondButton","changedProperties","hours","filteredHours","filteredMinutes","filteredSeconds","html","isDisabled","t","isSelected","DapDSButton","DapDSDivider","unsafeCSS","styles","DapDSTimeGrid","__decorateClass","property"],"mappings":"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"}

package/dist/components/timepicker/timepicker.component.d.ts

@@ -72,6 +72,11 @@ import { default as DapDSTimeGrid } from './time-grid.component';
  * @csspart tooltip - The tooltip of the timepicker.
  * @csspart input - The input of the timepicker.
  * @csspart clear-button - The clear button of the timepicker.
+ * @csspart time-button - The clock icon button of the timepicker.
+ * @csspart time-grid - The time grid of the timepicker.
+ * @csspart label-base - The base of the label.
+ * @csspart label-required - The required indicator of the label.
+ * @csspart label-optional - The optional indicator of the label.
  *
  * @cssproperty --dds-timepicker-background - The background color of the timepicker. (default: var(--dds-fields-background-default))
  * @cssproperty --dds-timepicker-border-color - The border color of the timepicker. (default: var(--dds-border-neutral-base))

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

@@ -9,58 +9,54 @@ var S = (h, e, t) => e in h ? D(h, e, { enumerable: !0, configurable: !0, writab
       C.call(e, t) && S(h, t, e[t]);
   return h;
 };
-var g = (h, e, t) => new Promise((i, o) => {
+var b = (h, e, t) => new Promise((i, o) => {
   var d = (u) => {
     try {
-      c(t.next(u));
-    } catch (f) {
-      o(f);
+      m(t.next(u));
+    } catch (c) {
+      o(c);
     }
   }, p = (u) => {
     try {
-      c(t.throw(u));
-    } catch (f) {
-      o(f);
+      m(t.throw(u));
+    } catch (c) {
+      o(c);
     }
-  }, c = (u) => u.done ? i(u.value) : Promise.resolve(u.value).then(d, p);
-  c((t = t.apply(h, e)).next());
+  }, m = (u) => u.done ? i(u.value) : Promise.resolve(u.value).then(d, p);
+  m((t = t.apply(h, e)).next());
 });
 import { clsx as y } from "../../node_modules/clsx/dist/clsx.js";
 import n from "../../_virtual/dayjs.min.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as $ } from "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as l } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { state as G } from "../../node_modules/@lit/reactive-element/decorators/state.js";
-import { query as k } from "../../node_modules/@lit/reactive-element/decorators/query.js";
-import { ifDefined as m } from "../../node_modules/lit-html/directives/if-defined.js";
-import { html as b } from "../../node_modules/lit-html/static.js";
-import { getValidityStateObject as x } from "../../common/utils.js";
-import { GenericFormElement as B } from "../../internal/mixin/genericFormElement.js";
+import { unsafeCSS as G, nothing as V } from "lit";
+import { query as k, property as l, state as x } from "lit/decorators.js";
+import { ifDefined as f } from "lit/directives/if-defined.js";
+import { html as g } from "lit/static-html.js";
+import { getValidityStateObject as B } from "../../common/utils.js";
+import { GenericFormElement as z } from "../../internal/mixin/genericFormElement.js";
+import { formLabelTemplate as A } from "../../internal/templates/formLabel.js";
 import "../../localization/localization.js";
-import z from "../feedback/feedback.component.js";
-import A from "../form/form-label/form-label.component.js";
-import L from "../icon/icon.component.js";
-import q from "../icon-button/icon-button.component.js";
-import F from "../icons/system/system-loading-spinner/system-loading-spinner.component.js";
-import H from "../icons/system/system-time-line/system-time-line.component.js";
-import M from "../popup/popup.component.js";
-import O from "../tooltip/tooltip.component.js";
-import E from "../typography/typography.component.js";
-import P from "./time-grid.component.js";
-import U from "./timepicker.scss.js";
-import V, { t as j } from "../../node_modules/i18next/dist/esm/i18next.js";
-import { unsafeCSS as R } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var N = Object.defineProperty, a = (h, e, t, i) => {
+import L from "../feedback/feedback.component.js";
+import q from "../form/form-label/form-label.component.js";
+import F from "../icon/icon.component.js";
+import H from "../icon-button/icon-button.component.js";
+import M from "../icons/system/system-loading-spinner/system-loading-spinner.component.js";
+import O from "../icons/system/system-time-line/system-time-line.component.js";
+import E from "../popup/popup.component.js";
+import P from "../tooltip/tooltip.component.js";
+import U from "../typography/typography.component.js";
+import j from "./time-grid.component.js";
+import R from "./timepicker.scss.js";
+import $, { t as N } from "../../node_modules/i18next/dist/esm/i18next.js";
+var K = Object.defineProperty, a = (h, e, t, i) => {
   for (var o = void 0, d = h.length - 1, p; d >= 0; d--)
     (p = h[d]) && (o = p(e, t, o) || o);
-  return o && N(e, t, o), o;
+  return o && K(e, t, o), o;
 }, r;
-const s = (r = class extends B {
+const s = (r = class extends z {
   constructor() {
     super(), this.minTime = "00:00", this.maxTime = "23:59", this.step = 5, this.placement = "bottom-start", this.opened = !1, this.openTimeOnInput = !1, this.sendEmptyEventOnInput = !1, this.loading = !1, this.format = "HH:mm", this.clearButton = "true", this.clearButtonTestId = "timepicker-clear-button", this.timeButtonTestId = "timepicker-time-button", this.floatingStrategy = "fixed", this.disableViewportAutoClose = !1, this.locale = n.locale(), this.closeOnSelection = !1, this.showSeconds = !1, this.secondsStep = 1, this.hideDisabledTimes = !1, this.setValueState = !0, this.languageChangeHandler = () => {
       if (!this.hasAttribute("locale")) {
-        const t = V.language || n.locale();
+        const t = $.language || n.locale();
         this.locale !== t && (this.locale = t, n.locale(t), this.requestUpdate());
       }
     }, this.handleDocumentMouseDown = (t) => {
@@ -88,7 +84,7 @@ const s = (r = class extends B {
           minute: i.value.split(":")[1]
         });
       this.openTimeOnInput && !this.opened && this.showTimePicker(), this.emit("dds-input", { value: i.value });
-    }, this.handleKeyDown = (t) => g(this, null, function* () {
+    }, this.handleKeyDown = (t) => b(this, null, function* () {
       t.key !== "Tab" && (t.key === "Enter" || t.key === "ArrowDown" || t.key === "ArrowUp") && (t.preventDefault(), t.stopPropagation(), this.opened ? this.hideTimePicker() : this.showTimePicker());
     }), this.handleClick = () => {
       this.opened ? this.hideTimePicker() : this.showTimePicker();
@@ -117,13 +113,13 @@ const s = (r = class extends B {
     this._timeValue = e;
   }
   connectedCallback() {
-    if (super.connectedCallback(), V.on("languageChanged", this.languageChangeHandler), !this.hasAttribute("locale")) {
-      const e = V.language || n.locale();
+    if (super.connectedCallback(), $.on("languageChanged", this.languageChangeHandler), !this.hasAttribute("locale")) {
+      const e = $.language || n.locale();
       this.locale !== e && (this.locale = e, n.locale(e));
     }
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), V.off("languageChanged", this.languageChangeHandler);
+    super.disconnectedCallback(), $.off("languageChanged", this.languageChangeHandler);
   }
   firstUpdated(e) {
     super.firstUpdated(e), this.syncTimeValue(), this.timeValue && (this.triggerInput.value = this.getFormattedValue(), this.updateTimeGridSelection());
@@ -194,8 +190,8 @@ const s = (r = class extends B {
     if (!(i.isSame(o) || i.isAfter(o) && i.isBefore(d) || i.isSame(d)))
       return !1;
     if (this.disabledTime) {
-      const c = i.hour(), u = i.minute(), f = this.showSeconds ? i.second() : void 0;
-      return !this.disabledTime(c, u, f);
+      const m = i.hour(), u = i.minute(), c = this.showSeconds ? i.second() : void 0;
+      return !this.disabledTime(m, u, c);
     }
     return !0;
   }
@@ -206,7 +202,7 @@ const s = (r = class extends B {
     return this.isValidTime(this.triggerInput.value);
   }
   setValue(e, t = !0, i = !0) {
-    var o, d, p, c, u, f;
+    var o, d, p, m, u, c;
     if (this._timeValue = e, this.value = e, t ? (this.setValueState = !0, this.triggerInput.value = this.getFormattedValue(), this.updateTimeGridSelection()) : this.setValueState = !1, this.internals && this.internals.setFormValue(
       this.value ? this.showSeconds ? this.value.format("HH:mm:ss") : this.value.format("HH:mm") : this.defaultValue
     ), this.setValidity(), this.closeOnSelection && this.hideTimePicker(), i) {
@@ -217,13 +213,13 @@ const s = (r = class extends B {
       }, this.showSeconds && { second: (p = this.timeValue) == null ? void 0 : p.second() });
       this.emit("dds-change", I), this.emit("dds-valid-time", v({
         value: this.triggerInput.value,
-        hour: (c = this.timeValue) == null ? void 0 : c.hour(),
+        hour: (m = this.timeValue) == null ? void 0 : m.hour(),
         minute: (u = this.timeValue) == null ? void 0 : u.minute()
-      }, this.showSeconds && { second: (f = this.timeValue) == null ? void 0 : f.second() }));
+      }, this.showSeconds && { second: (c = this.timeValue) == null ? void 0 : c.second() }));
     }
   }
   clearSelection() {
-    return g(this, null, function* () {
+    return b(this, null, function* () {
       this.setValue(void 0, !0, !0);
     });
   }
@@ -231,12 +227,12 @@ const s = (r = class extends B {
     return this.triggerInput;
   }
   showTimePicker() {
-    return g(this, null, function* () {
+    return b(this, null, function* () {
       this.disabled || this.readonly || this.opened || (this.opened = !0, document.addEventListener("mousedown", this.handleDocumentMouseDown));
     });
   }
   hideTimePicker(e) {
-    return g(this, null, function* () {
+    return b(this, null, function* () {
       this.opened && (this.opened = !1, document.removeEventListener("mousedown", this.handleDocumentMouseDown), yield this.updateComplete, e != null && e.skipFocus || this.focus());
     });
   }
@@ -245,7 +241,7 @@ const s = (r = class extends B {
     return !!this.value;
   }
   get validity() {
-    return this.internals.validity ? this.internals.validity : x({
+    return this.internals.validity ? this.internals.validity : B({
       valueMissing: this.required && !this.getValidity(),
       patternMismatch: !this.isValueValid()
     });
@@ -271,23 +267,22 @@ const s = (r = class extends B {
   }
   render() {
     var e, t;
-    return b` <div class="label-container">
-        ${this.label && b`<dap-ds-form-label
-          part="label"
-          id=${this.labelId}
-          .size=${this.size}
-          .required=${this.required}
-          .requiredLabel=${this.requiredLabel}
-          .optional=${this.optional}
-          .optionalLabel=${this.optionalLabel}
-          .disabled=${this.disabled}
-          class=${y("label")}
-          .noMargin=${!!this.description}
-          for=${this.inputId}
-          .hideLabel=${this.hideLabel}
-          label=${m(this.label)}>
-        </dap-ds-form-label>`}
-        ${this.tooltip && b` <dap-ds-tooltip
+    return g` <div class="label-container">
+        ${A({
+      label: this.label,
+      id: this.labelId,
+      htmlFor: this.inputId,
+      size: this.size,
+      required: this.required,
+      requiredLabel: this.requiredLabel,
+      optional: this.optional,
+      optionalLabel: this.optionalLabel,
+      disabled: this.disabled,
+      subtle: this.subtle,
+      noMargin: !!this.description,
+      hideLabel: this.hideLabel
+    })}
+        ${this.tooltip && g` <dap-ds-tooltip
           part="tooltip"
           content=${this.tooltip}
           mode="toggle"
@@ -304,12 +299,12 @@ const s = (r = class extends B {
           </dap-ds-icon-button>
         </dap-ds-tooltip>`}
       </div>
-      ${this.description && b`
+      ${this.description && g`
         <dap-ds-typography
           part="description"
           variant="description"
           class=${y("input-description")}
-          size=${m(this.size)}
+          size=${f(this.size)}
           id=${this.descriptionId}>
           ${this.description}
         </dap-ds-typography>
@@ -350,10 +345,10 @@ const s = (r = class extends B {
               value=${this.getFormattedValue()}
               aria-expanded=${this.opened}
               aria-haspopup="dialog"
-              aria-labelledby=${m(this.label ? this.labelId : $)}
-              aria-describedby="${m(
-      this.description ? this.descriptionId : $
-    )} ${m(this.feedback ? this.feedbackId : $)}"
+              aria-labelledby=${f(this.label ? this.labelId : V)}
+              aria-describedby="${f(
+      this.description ? this.descriptionId : V
+    )} ${f(this.feedback ? this.feedbackId : V)}"
               aria-disabled=${this.disabled}
               aria-controls="time-grid"
               aria-autocomplete="none"
@@ -362,7 +357,7 @@ const s = (r = class extends B {
               ?autofocus=${this.autofocus}
               ?disabled=${this.disabled}
               autocomplete=${this.autocomplete}
-              placeholder=${m((e = this.placeholder) != null ? e : "")}
+              placeholder=${f((e = this.placeholder) != null ? e : "")}
               @blur=${this.handleBlur}
               @focus=${this.handleFocus}
               @input=${this.handleInput}
@@ -375,22 +370,22 @@ const s = (r = class extends B {
       "select-action--readonly": this.readonly,
       "select-action--opened": this.opened
     })}">
-              ${this.clearButton === "true" && !this.readonly ? b`<div class="${y("clear-icon")}">
+              ${this.clearButton === "true" && !this.readonly ? g`<div class="${y("clear-icon")}">
                     <dap-ds-icon-button
                       icon="close-line"
                       part="clear-button"
                       data-testid=${this.clearButtonTestId}
-                      aria-label=${m(
-      (t = this.clearButtonAriaLabel) != null ? t : j("clear", { lng: this.locale })
+                      aria-label=${f(
+      (t = this.clearButtonAriaLabel) != null ? t : N("clear", { lng: this.locale })
     )}
                       ?disabled=${this.disabled}
                       @click=${this.handleClearClick}></dap-ds-icon-button>
-                  </div>` : $}
+                  </div>` : V}
               <div
                 class="${y("indicator-icon", {
       "indicator-icon--loading": this.loading
     })}">
-                ${this.loading ? b`<dap-ds-icon-loading-spinner></dap-ds-icon-loading-spinner>` : b`<dap-ds-icon-time-line
+                ${this.loading ? g`<dap-ds-icon-loading-spinner></dap-ds-icon-loading-spinner>` : g`<dap-ds-icon-time-line
                       aria-hidden="true"
                       part="time-button"
                       data-testid=${this.timeButtonTestId}
@@ -419,27 +414,27 @@ const s = (r = class extends B {
     }}>
           </dap-ds-time-grid>
         </dap-ds-popup>
-        ${this.feedback && b`<dap-ds-feedback
+        ${this.feedback && g`<dap-ds-feedback
           part="feedback"
-          feedbackType=${m(this.feedbackType)}
-          feedbackSize="${m(this.size)}"
+          feedbackType=${f(this.feedbackType)}
+          feedbackSize="${f(this.size)}"
           id="feedback">
           ${this.feedback}
         </dap-ds-feedback>`}
       </div>`;
   }
 }, r.tagName = "dap-ds-timepicker", r.dependencies = {
-  "dap-ds-form-label": A,
-  "dap-ds-tooltip": O,
-  "dap-ds-icon-button": q,
-  "dap-ds-icon": L,
-  "dap-ds-typography": E,
-  "dap-ds-popup": M,
-  "dap-ds-icon-loading-spinner": F,
-  "dap-ds-icon-time-line": H,
-  "dap-ds-time-grid": P,
-  "dap-ds-feedback": z
-}, r.nextId = 0, r.styles = R(U), r);
+  "dap-ds-form-label": q,
+  "dap-ds-tooltip": P,
+  "dap-ds-icon-button": H,
+  "dap-ds-icon": F,
+  "dap-ds-typography": U,
+  "dap-ds-popup": E,
+  "dap-ds-icon-loading-spinner": M,
+  "dap-ds-icon-time-line": O,
+  "dap-ds-time-grid": j,
+  "dap-ds-feedback": L
+}, r.nextId = 0, r.styles = G(R), r);
 a([
   k(".combobox__input")
 ], s.prototype, "triggerInput");
@@ -519,10 +514,10 @@ a([
   l({ type: Array, attribute: !1 })
 ], s.prototype, "presets");
 a([
-  G()
+  x()
 ], s.prototype, "setValueState");
-let $e = s;
+let ye = s;
 export {
-  $e as default
+  ye as default
 };
 //# sourceMappingURL=timepicker.component.js.map