dap-design-system 0.60.2 → 0.61.0

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

@@ -0,0 +1,349 @@
+var y = Object.defineProperty;
+var f = Object.getOwnPropertySymbols;
+var T = Object.prototype.hasOwnProperty, $ = Object.prototype.propertyIsEnumerable;
+var v = (h, t, e) => t in h ? y(h, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : h[t] = e, g = (h, t) => {
+  for (var e in t || (t = {}))
+    T.call(t, e) && v(h, e, t[e]);
+  if (f)
+    for (var e of f(t))
+      $.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 { 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 {
+  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";
+  }
+  getHours() {
+    return Array.from({ length: 24 }, (t, e) => e);
+  }
+  getMinutes() {
+    const t = [];
+    for (let e = 0; e < 60; e += this.step)
+      t.push(e);
+    return t;
+  }
+  getSeconds() {
+    const t = [];
+    for (let e = 0; e < 60; e += this.secondsStep)
+      t.push(e);
+    return t;
+  }
+  isTimeDisabled(t, e, r) {
+    const i = this.showSeconds ? `${t.toString().padStart(2, "0")}:${e.toString().padStart(2, "0")}:${(r != null ? r : 0).toString().padStart(2, "0")}` : `${t.toString().padStart(2, "0")}:${e.toString().padStart(2, "0")}`, a = this.minTime, l = this.maxTime, s = i < a || i > l;
+    return this.disabledTime ? s || this.disabledTime(t, e, r) : s;
+  }
+  handleHourSelect(t) {
+    this.selectedHour = t, this.requestUpdate(), this.emitChange();
+  }
+  handleMinuteSelect(t) {
+    this.selectedMinute = t, this.requestUpdate(), this.emitChange();
+  }
+  handleSecondSelect(t) {
+    this.selectedSecond = t, this.requestUpdate(), this.emitChange();
+  }
+  emitChange() {
+    const t = g({
+      hour: this.selectedHour,
+      minute: this.selectedMinute
+    }, this.showSeconds && { second: this.selectedSecond });
+    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`;
+  }
+  formatMinute(t) {
+    return t.toString().padStart(2, "0");
+  }
+  formatSecond(t) {
+    return t.toString().padStart(2, "0");
+  }
+  handlePresetSelect(t) {
+    const e = t.value.split(":"), r = parseInt(e[0], 10), i = parseInt(e[1], 10), a = e[2] ? parseInt(e[2], 10) : 0;
+    this.selectedHour = r, this.selectedMinute = i, this.showSeconds && (this.selectedSecond = a), this.requestUpdate(), this.emitChange();
+  }
+  isPresetDisabled(t) {
+    const e = t.value.split(":"), r = parseInt(e[0], 10), i = parseInt(e[1], 10), a = e[2] ? parseInt(e[2], 10) : void 0;
+    return this.isTimeDisabled(r, i, a);
+  }
+  scrollToSelectedTime() {
+    var r, i, a;
+    const t = (r = this.shadowRoot) == null ? void 0 : r.querySelector("#hour-column");
+    if (t) {
+      const l = t.querySelectorAll("dap-ds-button"), s = Array.from(l).find(
+        (c) => {
+          var u;
+          return ((u = c.textContent) == null ? void 0 : u.trim()) === this.formatHour(this.selectedHour);
+        }
+      );
+      s && s.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+        inline: "nearest"
+      });
+    }
+    const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector("#minute-column");
+    if (e) {
+      const l = e.querySelectorAll("dap-ds-button"), s = Array.from(l).find(
+        (c) => {
+          var u;
+          return ((u = c.textContent) == null ? void 0 : u.trim()) === this.formatMinute(this.selectedMinute);
+        }
+      );
+      s && s.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+        inline: "nearest"
+      });
+    }
+    if (this.showSeconds) {
+      const l = (a = this.shadowRoot) == null ? void 0 : a.querySelector("#second-column");
+      if (l) {
+        const s = l.querySelectorAll("dap-ds-button"), c = Array.from(s).find(
+          (u) => {
+            var b;
+            return ((b = u.textContent) == null ? void 0 : b.trim()) === this.formatSecond(this.selectedSecond);
+          }
+        );
+        c && c.scrollIntoView({
+          behavior: "smooth",
+          block: "center",
+          inline: "nearest"
+        });
+      }
+    }
+  }
+  firstUpdated(t) {
+    super.firstUpdated(t), requestAnimationFrame(() => {
+      this.scrollToSelectedTime();
+    });
+  }
+  updated(t) {
+    super.updated(t), (t.has("selectedHour") || t.has("selectedMinute") || t.has("selectedSecond")) && requestAnimationFrame(() => {
+      this.scrollToSelectedTime();
+    });
+  }
+  render() {
+    const t = this.getHours(), e = this.getMinutes(), r = this.showSeconds ? this.getSeconds() : [], i = this.hideDisabledTimes ? t.filter(
+      (s) => !this.isTimeDisabled(
+        s,
+        this.selectedMinute,
+        this.selectedSecond
+      )
+    ) : t, a = this.hideDisabledTimes ? e.filter(
+      (s) => !this.isTimeDisabled(
+        this.selectedHour,
+        s,
+        this.selectedSecond
+      )
+    ) : e, l = this.hideDisabledTimes ? r.filter(
+      (s) => !this.isTimeDisabled(
+        this.selectedHour,
+        this.selectedMinute,
+        s
+      )
+    ) : r;
+    return p`
+      <div part="time-grid" class="time-grid">
+        ${this.presets && this.presets.length > 0 ? p`
+              <div part="presets-section" class="presets-section">
+                ${this.presets.map((s) => {
+      const c = this.isPresetDisabled(s);
+      return p`
+                    <dap-ds-button
+                      variant="outline"
+                      size="xs"
+                      part="preset-button"
+                      data-testid="${this.presetButtonTestId}-${s.value}"
+                      ?disabled=${c}
+                      @click=${() => this.handlePresetSelect(s)}>
+                      ${s.label}
+                    </dap-ds-button>
+                  `;
+    })}
+              </div>
+              <dap-ds-divider spacing="200"></dap-ds-divider>
+            ` : ""}
+
+        <div class="time-columns">
+          <div part="hour-section" class="time-section">
+            <div class="section-header">
+              <span part="section-header-title"
+                >${S("timepicker.hour", {
+      lng: this.locale
+    })}</span
+              >
+              <dap-ds-divider
+                part="section-header-divider"
+                spacing="200"></dap-ds-divider>
+            </div>
+            <div part="time-column" class="time-column" id="hour-column">
+              ${i.map((s) => {
+      const c = this.isTimeDisabled(
+        s,
+        this.selectedMinute,
+        this.selectedSecond
+      ), u = s === this.selectedHour;
+      return p`
+                  <dap-ds-button
+                    variant="subtle-menu"
+                    ?active=${u}
+                    part="time-button"
+                    data-testid="${this.hourButtonTestId}-${s}"
+                    exportparts="base:time-button-base, content:time-button-content, high-contrast:time-button-high-contrast"
+                    ?disabled=${c}
+                    @click=${() => this.handleHourSelect(s)}>
+                    ${this.formatHour(s)}
+                  </dap-ds-button>
+                `;
+    })}
+            </div>
+          </div>
+
+          <div part="minute-section" class="time-section">
+            <div class="section-header">
+              <span part="section-header-title"
+                >${S("timepicker.minute", {
+      lng: this.locale
+    })}</span
+              >
+              <dap-ds-divider
+                part="section-header-divider"
+                spacing="200"></dap-ds-divider>
+            </div>
+            <div part="time-column" class="time-column" id="minute-column">
+              ${a.map((s) => {
+      const c = this.isTimeDisabled(
+        this.selectedHour,
+        s,
+        this.selectedSecond
+      ), u = s === this.selectedMinute;
+      return p`
+                  <dap-ds-button
+                    variant="subtle-menu"
+                    ?active=${u}
+                    part="time-button"
+                    data-testid="${this.minuteButtonTestId}-${s}"
+                    ?disabled=${c}
+                    @click=${() => this.handleMinuteSelect(s)}>
+                    ${this.formatMinute(s)}
+                  </dap-ds-button>
+                `;
+    })}
+            </div>
+          </div>
+
+          ${this.showSeconds ? p`
+                <div part="second-section" class="time-section">
+                  <div class="section-header">
+                    <span part="section-header-title"
+                      >${S("timepicker.second", {
+      lng: this.locale
+    })}</span
+                    >
+                    <dap-ds-divider
+                      part="section-header-divider"
+                      spacing="200"></dap-ds-divider>
+                  </div>
+                  <div
+                    part="time-column"
+                    class="time-column"
+                    id="second-column">
+                    ${l.map((s) => {
+      const c = this.isTimeDisabled(
+        this.selectedHour,
+        this.selectedMinute,
+        s
+      ), u = s === this.selectedSecond;
+      return p`
+                        <dap-ds-button
+                          variant="subtle-menu"
+                          ?active=${u}
+                          part="time-button"
+                          data-testid="${this.secondButtonTestId}-${s}"
+                          ?disabled=${c}
+                          @click=${() => this.handleSecondSelect(s)}>
+                          ${this.formatSecond(s)}
+                        </dap-ds-button>
+                      `;
+    })}
+                  </div>
+                </div>
+              ` : ""}
+        </div>
+      </div>
+    `;
+  }
+};
+m.tagName = "dap-ds-time-grid", m.dependencies = {
+  "dap-ds-button": H,
+  "dap-ds-divider": I
+}, m.styles = w(D);
+let o = m;
+d([
+  n({ type: Number })
+], o.prototype, "selectedHour");
+d([
+  n({ type: Number })
+], o.prototype, "selectedMinute");
+d([
+  n({ type: Number })
+], o.prototype, "selectedSecond");
+d([
+  n({ type: String })
+], o.prototype, "minTime");
+d([
+  n({ type: String })
+], o.prototype, "maxTime");
+d([
+  n({ type: Number })
+], o.prototype, "step");
+d([
+  n({ type: String })
+], o.prototype, "locale");
+d([
+  n({ type: Boolean })
+], o.prototype, "showSeconds");
+d([
+  n({ type: Number })
+], o.prototype, "secondsStep");
+d([
+  n({ attribute: !1 })
+], o.prototype, "disabledTime");
+d([
+  n({ type: Boolean })
+], o.prototype, "hideDisabledTimes");
+d([
+  n({ type: Array })
+], o.prototype, "presets");
+d([
+  n()
+], o.prototype, "presetButtonTestId");
+d([
+  n()
+], o.prototype, "hourButtonTestId");
+d([
+  n()
+], o.prototype, "minuteButtonTestId");
+d([
+  n()
+], o.prototype, "secondButtonTestId");
+export {
+  o as default
+};
+//# sourceMappingURL=time-grid.component.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,8 @@
+import { default as DapDSTimeGrid } from './time-grid.component';
+export * from './time-grid.component';
+export default DapDSTimeGrid;
+declare global {
+    interface HTMLElementTagNameMap {
+        'dap-ds-time-grid': DapDSTimeGrid;
+    }
+}

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

@@ -0,0 +1,6 @@
+import e from "./time-grid.component.js";
+e.define();
+export {
+  e as default
+};
+//# sourceMappingURL=time-grid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"time-grid.js","sources":["../../../src/components/timepicker/time-grid.ts"],"sourcesContent":["import DapDSTimeGrid from './time-grid.component'\n\nexport * from './time-grid.component'\nexport default DapDSTimeGrid\n\nDapDSTimeGrid.define()\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'dap-ds-time-grid': DapDSTimeGrid\n  }\n}\n"],"names":["DapDSTimeGrid"],"mappings":";AAKAA,EAAc,OAAO;"}

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

@@ -0,0 +1,5 @@
+const i = "*,*: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}.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}.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}}:host{display:block;--dds-time-grid-gap: var(--dds-spacing-400);--dds-time-grid-padding: var(--dds-spacing-0);--dds-time-grid-column-gap: var(--dds-spacing-200);--dds-time-grid-border-radius: var(--dds-radius-base);--dds-time-grid-background: var(--dds-background-neutral-subtle);--dds-time-grid-transition: all .2s ease-in-out;--dds-time-grid-max-width: 400px;--dds-time-grid-column-max-height: 240px}.time-grid{display:flex;flex-direction:column;width:100%;max-width:var(--dds-time-grid-max-width);padding:var(--dds-time-grid-padding);transition:var(--dds-time-grid-transition);border-radius:var(--dds-time-grid-border-radius);background:var(--dds-time-grid-background);gap:var(--dds-spacing-300)}.time-columns{display:flex;gap:var(--dds-time-grid-gap);width:100%}.presets-section{display:flex;flex-wrap:wrap;padding:var(--dds-spacing-200);gap:var(--dds-spacing-200)}.time-section{display:flex;flex:1;flex-direction:column;min-width:0}.section-header{display:flex;flex-direction:column;align-items:center;justify-content:center}.time-column{display:flex;flex-direction:column;max-height:var(--dds-time-grid-column-max-height);padding:var(--dds-spacing-100);overflow-y:auto;gap:var(--dds-time-grid-column-gap)}.time-column::-webkit-scrollbar{width:6px}.time-column::-webkit-scrollbar-track{border-radius:3px;background:var(--dds-background-neutral-base)}.time-column::-webkit-scrollbar-thumb{border-radius:3px;background:var(--dds-border-neutral-strong)}.time-column::-webkit-scrollbar-thumb:hover{background:var(--dds-border-neutral-stronger)}@media (width <= 480px){.time-grid{max-width:320px;padding:var(--dds-spacing-300);gap:var(--dds-spacing-200)}.time-columns{gap:var(--dds-spacing-300)}.time-column{gap:var(--dds-spacing-150)}.time-button{min-width:50px;min-height:36px;padding:var(--dds-spacing-250);font-size:var(--dds-typography-body-xs-font-size)}.presets-section{padding:var(--dds-spacing-150);gap:var(--dds-spacing-150)}}";
+export {
+  i as default
+};
+//# sourceMappingURL=time-grid.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"time-grid.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

@@ -2,6 +2,16 @@ import { Dayjs } from 'dayjs';
 import { PropertyValueMap } from 'lit';
 import { FloatingStrategy, PopupPlacement, TimePreset } from '../../common/types';
 import { GenericFormElement } from '../../internal/mixin/genericFormElement';
+import { default as DapDSFeedback } from '../feedback/feedback.component';
+import { default as DapDSFormLabel } from '../form/form-label/form-label.component';
+import { default as DapDSIcon } from '../icon/icon.component';
+import { default as DapDSIconButton } from '../icon-button/icon-button.component';
+import { default as SystemLoadingSpinner } from '../icons/system/system-loading-spinner/system-loading-spinner.component';
+import { default as SystemTimeLine } from '../icons/system/system-time-line/system-time-line.component';
+import { default as DapDSPopup } from '../popup/popup.component';
+import { default as DapDSTooltip } from '../tooltip/tooltip.component';
+import { default as DapDSTypography } from '../typography/typography.component';
+import { default as DapDSTimeGrid } from './time-grid.component';
 /**
  * `dap-ds-timepicker`
  * @summary A timepicker is a graphical user interface widget that allows the user to select a time from a time range.
@@ -93,6 +103,19 @@ import { GenericFormElement } from '../../internal/mixin/genericFormElement';
  *
  */
 export default class DapDSTimePicker extends GenericFormElement {
+    static tagName: string;
+    static dependencies: {
+        'dap-ds-form-label': typeof DapDSFormLabel;
+        'dap-ds-tooltip': typeof DapDSTooltip;
+        'dap-ds-icon-button': typeof DapDSIconButton;
+        'dap-ds-icon': typeof DapDSIcon;
+        'dap-ds-typography': typeof DapDSTypography;
+        'dap-ds-popup': typeof DapDSPopup;
+        'dap-ds-icon-loading-spinner': typeof SystemLoadingSpinner;
+        'dap-ds-icon-time-line': typeof SystemTimeLine;
+        'dap-ds-time-grid': typeof DapDSTimeGrid;
+        'dap-ds-feedback': typeof DapDSFeedback;
+    };
     private static nextId;
     private readonly inputId;
     private readonly labelId;