@m3e/web 2.5.15 → 2.6.0

package/dist/timepicker.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timepicker.min.js","sources":["../../src/timepicker/TimepickerInputElementBase.ts","../../src/timepicker/TimepickerDialElement.ts","../../src/timepicker/TimepickerInputPeriodToggleElement.ts","../../src/timepicker/TimepickerInputElement.ts","../../src/timepicker/TimepickerElement.ts","../../src/timepicker/TimepickerToggleElement.ts"],"sourcesContent":["import { LitElement, PropertyValues } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport { TimepickerFormat } from \"./TimepickerFormat\";\r\nimport { TimepickerView } from \"./TimepickerView\";\r\nimport { TimepickerPeriod } from \"./TimepickerPeriod\";\r\nimport { timeConverter, TimeParts } from \"../core\";\r\n\r\n/** A base implementation for an element used to input time. This class must be inherited. */\r\nexport class TimepickerInputElementBase extends LitElement {\r\n  /** @private */ #hour: number | null = null;\r\n  /** @private */ #minute: number | null = null;\r\n  /** @private */ #format: Exclude<TimepickerFormat, \"auto\"> = \"12\";\r\n\r\n  /**\r\n   * The hour, in 24-hour time, from 0..23.\r\n   * @default null\r\n   */\r\n  @property({ type: Number }) get hour(): number | null {\r\n    return this.#hour;\r\n  }\r\n  set hour(value: number | null) {\r\n    this.#hour = value === null ? null : Math.max(0, Math.min(value, 23));\r\n  }\r\n\r\n  /**\r\n   * The minute, from 0..59.\r\n   * @default null\r\n   */\r\n  @property({ type: Number }) get minute(): number | null {\r\n    return this.#minute;\r\n  }\r\n  set minute(value: number | null) {\r\n    this.#minute = value === null ? null : Math.max(0, Math.min(value, 59));\r\n  }\r\n\r\n  /**\r\n   * Whether to use a 12‑hour or 24‑hour clock.\r\n   * @default \"12\"\r\n   */\r\n  @property() format: TimepickerFormat = \"12\";\r\n\r\n  /**\r\n   * The view used to input time.\r\n   * @default \"hour\"\r\n   */\r\n  @property() view: TimepickerView = \"hour\";\r\n\r\n  /**\r\n   * The 12-hour time period.\r\n   * @default \"am\"\r\n   */\r\n  @property() period: TimepickerPeriod = \"am\";\r\n\r\n  /**\r\n   * The minimum time that can be selected.\r\n   * @default null\r\n   */\r\n  @property({ attribute: \"min-time\", converter: timeConverter }) minTime: TimeParts | null = null;\r\n\r\n  /**\r\n   * The maximum time that can be selected.\r\n   * @default null\r\n   */\r\n  @property({ attribute: \"max-time\", converter: timeConverter }) maxTime: TimeParts | null = null;\r\n\r\n  /** A function used to determine whether a time cannot be selected. */\r\n  @property() blackoutTimes?: (time: TimeParts) => boolean;\r\n\r\n  /** The hour in 12‑hour time from 1..12. */\r\n  get hourOfPeriod(): number | null {\r\n    if (this.hour === null) return null;\r\n    const h = this.hour % 12;\r\n    return h === 0 ? 12 : h;\r\n  }\r\n  set hourOfPeriod(value: number | null) {\r\n    if (value === null) {\r\n      this.hour = null;\r\n    } else {\r\n      const h = Math.max(1, Math.min(value, 12));\r\n      this.hour = this.period === \"am\" ? (h === 12 ? 0 : h) : h === 12 ? 12 : h + 12;\r\n    }\r\n  }\r\n\r\n  /** The current time format. */\r\n  get currentFormat(): Exclude<TimepickerFormat, \"auto\"> {\r\n    return this.#format;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override willUpdate(_changedProperties: PropertyValues<this>): void {\r\n    super.willUpdate(_changedProperties);\r\n\r\n    if (_changedProperties.has(\"format\")) {\r\n      this.#format =\r\n        this.format !== \"auto\"\r\n          ? this.format\r\n          : new Intl.DateTimeFormat(undefined, { hour: \"numeric\" }).resolvedOptions().hour12\r\n            ? \"12\"\r\n            : \"24\";\r\n    }\r\n\r\n    // If the hour changes, ensure the correct period; otherwise, if period changes, adjust hour.\r\n    if (_changedProperties.has(\"hour\")) {\r\n      this.period = this.hour !== null && this.hour >= 12 ? \"pm\" : \"am\";\r\n    } else if (_changedProperties.has(\"period\")) {\r\n      if (this.hour !== null) {\r\n        const h = this.hour % 12 || 12;\r\n        this.hour = this.period === \"am\" ? (h === 12 ? 0 : h) : h === 12 ? 12 : h + 12;\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Determines whether the given hour is disabled.\r\n   * @param {number} hour The hour to test.\r\n   * @returns Whether `hour` is disabled.\r\n   */\r\n  isHourDisabled(hour: number): boolean {\r\n    if ((this.minTime && hour < this.minTime.hour) || (this.maxTime && hour > this.maxTime.hour)) {\r\n      return true;\r\n    }\r\n    if (this.blackoutTimes) {\r\n      for (let minute = 0; minute < 60; minute++) {\r\n        if (!this.blackoutTimes({ hour, minute })) {\r\n          return false;\r\n        }\r\n      }\r\n      return true;\r\n    }\r\n    return false;\r\n  }\r\n\r\n  /**\r\n   * Determines whether the given minute of an hour is disabled.\r\n   * @param {number} hour The hour to test.\r\n   * @param {number} minute The minute to test.\r\n   * @returns Whether `minute` is disabled for `hour`.\r\n   */\r\n  isMinuteDisabled(hour: number, minute: number): boolean {\r\n    if (this.minTime) {\r\n      if (hour < this.minTime.hour || (hour === this.minTime.hour && minute < this.minTime.minute)) {\r\n        return true;\r\n      }\r\n    }\r\n\r\n    if (this.maxTime) {\r\n      if (hour > this.maxTime.hour || (hour === this.maxTime.hour && minute > this.maxTime.minute)) {\r\n        return true;\r\n      }\r\n    }\r\n\r\n    if (this.blackoutTimes?.({ hour, minute })) {\r\n      return true;\r\n    }\r\n\r\n    return false;\r\n  }\r\n}\r\n","/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { css, CSSResultGroup, html, nothing, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { classMap } from \"lit/directives/class-map.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  computeCssSize,\r\n  customElement,\r\n  DesignToken,\r\n  Role,\r\n  safeStyleMap,\r\n  SuppressInitialAnimation,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { TimepickerInputElementBase } from \"./TimepickerInputElementBase\";\r\n\r\n/**\r\n * A clock‑face surface for selecting hours and minutes using a movable hand.\r\n * @description\r\n * The `m3e-timepicker-dial` component provides a clock-face experience\r\n * for selecting hours and minutes. It supports both 12- and 24-hour formats,\r\n * and exposes view changes through accessible events.\r\n *\r\n * @tag m3e-timepicker-dial\r\n *\r\n * @attr format - Whether to use a 12‑hour or 24‑hour clock.\r\n * @attr hour - The hour, in 24-hour time, from 0..23.\r\n * @attr max-time - The maximum time that can be selected.\r\n * @attr min-time - The minimum time that can be selected.\r\n * @attr minute - The minute, from 0..59.\r\n * @attr period - The 12-hour time period.\r\n * @attr view - The view used to input time.\r\n *\r\n * @fires change - Dispatched when the selected time changes.\r\n * @fires view-change - Dispatched when the view changes.\r\n *\r\n * @cssprop --m3e-timepicker-dial-container-size - Size of the dial container.\r\n * @cssprop --m3e-timepicker-dial-container-shape - Corner radius of the dial container.\r\n * @cssprop --m3e-timepicker-dial-container-color - Background color of the dial container.\r\n * @cssprop --m3e-timepicker-dial-inset - Inset offset applied to the dial surface.\r\n * @cssprop --m3e-timepicker-dial-center-size - Size of the dial center.\r\n * @cssprop --m3e-timepicker-dial-handle-color - Color of the active handle.\r\n * @cssprop --m3e-timepicker-dial-handle-size - Size of the handle.\r\n * @cssprop --m3e-timepicker-dial-handle-disabled-color - Color of a disabled handle.\r\n * @cssprop --m3e-timepicker-dial-handle-disabled-opacity - Opacity of a disabled handle.\r\n * @cssprop --m3e-timepicker-dial-dial-inset - Inset applied to the handle area.\r\n * @cssprop --m3e-timepicker-dial-numeral-size - Size of the dial numerals.\r\n * @cssprop --m3e-timepicker-dial-numeral-color - Text color of inactive numerals.\r\n * @cssprop --m3e-timepicker-dial-numeral-shape - Corner radius of the numerals.\r\n * @cssprop --m3e-timepicker-dial-numeral-font-size - Font size of the outer numerals.\r\n * @cssprop --m3e-timepicker-dial-numeral-font-weight - Font weight of the outer numerals.\r\n * @cssprop --m3e-timepicker-dial-numeral-line-height - Line height of the outer numerals.\r\n * @cssprop --m3e-timepicker-dial-numeral-tracking - Letter spacing of the outer numerals.\r\n * @cssprop --m3e-timepicker-dial-inner-numeral-font-size - Font size of the inner numerals.\r\n * @cssprop --m3e-timepicker-dial-inner-numeral-font-weight - Font weight of the inner numerals.\r\n * @cssprop --m3e-timepicker-dial-inner-numeral-line-height - Line height of the inner numerals.\r\n * @cssprop --m3e-timepicker-dial-inner-numeral-tracking - Letter spacing of the inner numerals.\r\n * @cssprop --m3e-timepicker-dial-numeral-active-color - Color of active numerals.\r\n * @cssprop --m3e-timepicker-dial-numeral-disabled-color - Color of disabled numerals.\r\n * @cssprop --m3e-timepicker-dial-numeral-disabled-opacity - Opacity of disabled numerals.\r\n * @cssprop --m3e-timepicker-dial-handle-center-size - Size of the handle center indicator.\r\n */\r\n@customElement(\"m3e-timepicker-dial\")\r\nexport class M3eTimepickerDialElement extends SuppressInitialAnimation(\r\n  AttachInternals(Role(TimepickerInputElementBase, \"none\")),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n      width: var(--m3e-timepicker-dial-container-size, 16rem);\r\n      aspect-ratio: 1 / 1;\r\n    }\r\n    .base {\r\n      contain: layout style paint;\r\n      position: relative;\r\n      width: 100%;\r\n      height: 100%;\r\n      touch-action: none;\r\n      border-radius: var(--m3e-timepicker-dial-container-shape, ${DesignToken.shape.corner.full});\r\n      background-color: var(--m3e-timepicker-dial-container-color, ${DesignToken.color.surfaceContainerHighest});\r\n    }\r\n    .base:not(.dragging) {\r\n      cursor: grab;\r\n    }\r\n    .base.dragging {\r\n      cursor: grabbing;\r\n    }\r\n    .dial {\r\n      position: absolute;\r\n      inset: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      touch-action: inherit;\r\n      pointer-events: none;\r\n      border-radius: inherit;\r\n\r\n      --_numeral-radius: calc(\r\n        calc(var(--m3e-timepicker-dial-container-size, 16rem) / 2) - calc(\r\n            var(--m3e-timepicker-dial-numeral-size, 2.5rem) / 2\r\n          ) - var(--m3e-timepicker-dial-inset, 4px)\r\n      );\r\n    }\r\n    :host(:not(:is(:state(--no-animate), :--no-animate))) .dial {\r\n      transition: ${unsafeCSS(`opacity ${DesignToken.motion.duration.medium1} ${DesignToken.motion.easing.standard},\r\n        transform ${DesignToken.motion.duration.medium1} ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    .dial:not(.hidden) {\r\n      opacity: 1;\r\n      transform: scale(1);\r\n    }\r\n    .dial.hidden {\r\n      opacity: 0;\r\n    }\r\n    .dial.hour.hidden {\r\n      transform: scale(1.2);\r\n    }\r\n    .dial.minute.hidden {\r\n      transform: scale(0.8);\r\n    }\r\n    .center {\r\n      position: absolute;\r\n      box-sizing: border-box;\r\n      bottom: calc(50% - calc(var(--m3e-timepicker-dial-center-size, 8px) / 2));\r\n      left: calc(50% - calc(var(--m3e-timepicker-dial-center-size, 8px) / 2));\r\n      width: var(--m3e-timepicker-dial-center-size, 8px);\r\n      height: var(--m3e-timepicker-dial-center-size, 8px);\r\n      touch-action: inherit;\r\n      pointer-events: none;\r\n      border-radius: 50%;\r\n    }\r\n    .center::before,\r\n    .center::after {\r\n      content: \"\";\r\n      position: absolute;\r\n      inset: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      border-radius: inherit;\r\n    }\r\n    .center::before {\r\n      background-color: var(--m3e-timepicker-dial-container-color, ${DesignToken.color.surfaceContainerHighest});\r\n    }\r\n    .center:not(.disabled)::after {\r\n      background-color: var(--m3e-timepicker-dial-handle-color, ${DesignToken.color.primary});\r\n    }\r\n    .center.disabled::after {\r\n      background-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-timepicker-dial-handle-disabled-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-timepicker-dial-handle-disabled-opacity, 10%),\r\n        transparent\r\n      );\r\n    }\r\n    .handle {\r\n      position: absolute;\r\n      touch-action: inherit;\r\n      left: calc(50% - calc(var(--m3e-timepicker-dial-handle-size, 2px) / 2));\r\n      width: var(--m3e-timepicker-dial-handle-size, 2px);\r\n      transform: rotate(calc(var(--_hand-angle, 0) * 1deg));\r\n      transform-origin: bottom;\r\n    }\r\n    .handle:not(.disabled) {\r\n      background-color: var(--m3e-timepicker-dial-handle-color, ${DesignToken.color.primary});\r\n    }\r\n    .handle.disabled {\r\n      background-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-timepicker-dial-handle-disabled-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-timepicker-dial-handle-disabled-opacity, 10%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:not(:is(:state(--no-animate), :--no-animate))) .base:not(.dragging) .handle {\r\n      transition: ${unsafeCSS(\r\n        `transform ${DesignToken.motion.duration.medium1} ${DesignToken.motion.easing.standard}`,\r\n      )};\r\n    }\r\n    .handle:not(.inner) {\r\n      top: calc(var(--m3e-timepicker-dial-dial-inset, 4px) + var(--m3e-timepicker-dial-numeral-size, 2.5rem));\r\n      height: calc(50% - var(--m3e-timepicker-dial-dial-inset, 4px) - var(--m3e-timepicker-dial-numeral-size, 2.5rem));\r\n    }\r\n    .handle.inner {\r\n      top: calc(\r\n        var(--m3e-timepicker-dial-numeral-size, 2.5rem) + var(--m3e-timepicker-dial-dial-inset, 4px) +\r\n          var(--m3e-timepicker-dial-numeral-size, 2.5rem)\r\n      );\r\n      height: calc(\r\n        50% - calc(\r\n            var(--m3e-timepicker-dial-numeral-size, 2.5rem) + var(--m3e-timepicker-dial-dial-inset, 4px) +\r\n              var(--m3e-timepicker-dial-numeral-size, 2.5rem)\r\n          )\r\n      );\r\n    }\r\n    .handle::before {\r\n      content: \"\";\r\n      position: absolute;\r\n      touch-action: inherit;\r\n      width: var(--m3e-timepicker-dial-numeral-size, 2.5rem);\r\n      height: var(--m3e-timepicker-dial-numeral-size, 2.5rem);\r\n      top: calc(0px - var(--m3e-timepicker-dial-numeral-size, 2.5rem));\r\n      left: calc(\r\n        0px - calc(var(--m3e-timepicker-dial-numeral-size, 2.5rem) / 2) +\r\n          calc(var(--m3e-timepicker-dial-handle-size, 2px) / 2)\r\n      );\r\n      border-radius: 50%;\r\n      box-sizing: border-box;\r\n    }\r\n    .handle:not(.disabled)::before {\r\n      background-color: var(--m3e-timepicker-dial-handle-color, ${DesignToken.color.primary});\r\n    }\r\n    .handle.disabled::before {\r\n      background-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-timepicker-dial-handle-disabled-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-timepicker-dial-handle-disabled-opacity, 10%),\r\n        transparent\r\n      );\r\n    }\r\n    .handle:not(.active)::after {\r\n      content: \"\";\r\n      position: absolute;\r\n      touch-action: inherit;\r\n      width: var(--m3e-timepicker-dial-handle-center-size, 4px);\r\n      height: var(--m3e-timepicker-dial-handle-center-size, 4px);\r\n      top: calc(\r\n        0px - calc(var(--m3e-timepicker-dial-numeral-size, 2.5rem) / 2) - calc(\r\n            var(--m3e-timepicker-dial-handle-center-size, 4px) / 2\r\n          )\r\n      );\r\n      left: calc(50% - calc(var(--m3e-timepicker-dial-handle-center-size, 4px) / 2));\r\n      border-radius: 50%;\r\n      box-sizing: border-box;\r\n    }\r\n    .handle:not(.active):not(.disabled)::after {\r\n      background-color: var(--m3e-timepicker-dial-numeral-active-color, ${DesignToken.color.onPrimary});\r\n    }\r\n    .handle:not(.active).disabled::after {\r\n      background-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-timepicker-dial-numeral-disabled-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-timepicker-dial-numeral-disabled-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    .numeral {\r\n      user-select: none;\r\n      touch-action: inherit;\r\n      position: absolute;\r\n      inset: 50%;\r\n      translate: -50% -50%;\r\n      width: var(--m3e-timepicker-dial-numeral-size, 2.5rem);\r\n      aspect-ratio: 1 / 1;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      border-radius: var(--m3e-timepicker-dial-numeral-shape, ${DesignToken.shape.corner.full});\r\n    }\r\n    :host(:not(:is(:state(--no-animate), :--no-animate))) .numeral.active {\r\n      transition-delay: ${DesignToken.motion.duration.medium1};\r\n      transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short1} ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    .numeral:not(.active):not(.disabled) {\r\n      color: var(--m3e-timepicker-dial-numeral-color, ${DesignToken.color.onSurface});\r\n    }\r\n    .numeral.active:not(.disabled) {\r\n      color: var(--m3e-timepicker-dial-numeral-active-color, ${DesignToken.color.onPrimary});\r\n    }\r\n    .numeral.disabled {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-timepicker-dial-numeral-disabled-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-timepicker-dial-numeral-disabled-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    .numeral:not(.inner) {\r\n      transform: rotate(var(--_numeral-angle)) translateY(calc(-1 * var(--_numeral-radius)))\r\n        rotate(calc(-1 * var(--_numeral-angle)));\r\n      font-size: var(--m3e-timepicker-dial-numeral-font-size, ${DesignToken.typescale.standard.body.large.fontSize});\r\n      font-weight: var(\r\n        --m3e-timepicker-dial-numeral-font-weight,\r\n        ${DesignToken.typescale.standard.body.large.fontWeight}\r\n      );\r\n      line-height: var(\r\n        --m3e-timepicker-dial-numeral-line-height,\r\n        ${DesignToken.typescale.standard.body.large.lineHeight}\r\n      );\r\n      letter-spacing: var(\r\n        --m3e-timepicker-dial-numeral-tracking,\r\n        ${DesignToken.typescale.standard.body.large.tracking}\r\n      );\r\n    }\r\n    .numeral.inner {\r\n      transform: rotate(var(--_numeral-angle))\r\n        translateY(calc(calc(-1 * var(--_numeral-radius)) + var(--m3e-timepicker-dial-numeral-size, 2.5rem)))\r\n        rotate(calc(-1 * var(--_numeral-angle)));\r\n      font-size: var(\r\n        --m3e-timepicker-dial-inner-numeral-font-size,\r\n        ${DesignToken.typescale.standard.body.small.fontSize}\r\n      );\r\n      font-weight: var(\r\n        --m3e-timepicker-dial-inner-numeral-font-weight,\r\n        ${DesignToken.typescale.standard.body.small.fontWeight}\r\n      );\r\n      line-height: var(\r\n        --m3e-timepicker-dial-inner-numeral-line-height,\r\n        ${DesignToken.typescale.standard.body.small.lineHeight}\r\n      );\r\n      letter-spacing: var(\r\n        --m3e-timepicker-dial-inner-numeral-tracking,\r\n        ${DesignToken.typescale.standard.body.small.tracking}\r\n      );\r\n    }\r\n    @media (forced-colors: active) {\r\n      .base,\r\n      .center::before {\r\n        background-color: Canvas;\r\n      }\r\n      .numeral:not(.active):not(.disabled) {\r\n        color: CanvasText;\r\n      }\r\n      .center:not(.disabled)::after,\r\n      .handle:not(.disabled) {\r\n        background-color: Highlight;\r\n      }\r\n      .handle:not(.disabled)::before {\r\n        background-color: unset;\r\n        outline: var(--m3e-timepicker-dial-handle-size, 2px) solid Highlight;\r\n      }\r\n      .handle:not(.active):not(.disabled)::after {\r\n        background-color: Highlight;\r\n      }\r\n      .numeral.active:not(.disabled) {\r\n        color: Highlight;\r\n      }\r\n      .center.disabled::after,\r\n      .handle:not(.active).disabled::after,\r\n      .handle.disabled {\r\n        background-color: GrayText;\r\n      }\r\n      .handle.disabled::before {\r\n        background-color: unset;\r\n        outline: var(--m3e-timepicker-dial-handle-size, 2px) solid GrayText;\r\n      }\r\n      .numeral.disabled:not(.active),\r\n      .numeral.disabled.active {\r\n        color: GrayText;\r\n      }\r\n      .numeral {\r\n        forced-color-adjust: none;\r\n        background-color: transparent;\r\n      }\r\n      .base {\r\n        outline: 1px solid CanvasText;\r\n      }\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      :host(:not(:is(:state(--no-animate), :--no-animate))) .dial,\r\n      :host(:not(:is(:state(--no-animate), :--no-animate))) .base:not(.dragging) .handle,\r\n      :host(:not(:is(:state(--no-animate), :--no-animate))) .numeral.active {\r\n        transition: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ #dragState?: { cachedRect: DOMRect; cachedInnerInset: number; timeChanged: boolean };\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    this.ariaHidden = \"true\";\r\n    super.connectedCallback();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override updated(_changedProperties: PropertyValues<this>): void {\r\n    super.updated(_changedProperties);\r\n\r\n    if (\r\n      _changedProperties.has(\"hour\") ||\r\n      _changedProperties.has(\"minute\") ||\r\n      _changedProperties.has(\"view\") ||\r\n      _changedProperties.has(\"period\") ||\r\n      _changedProperties.has(\"minTime\") ||\r\n      _changedProperties.has(\"maxTime\") ||\r\n      _changedProperties.has(\"blackoutTimes\")\r\n    ) {\r\n      this.#updateHand();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div\r\n      class=\"base\"\r\n      @pointerdown=\"${this.#handlePointerDown}\"\r\n      @pointermove=\"${this.#handlePointerMove}\"\r\n      @pointerup=\"${this.#handlePointerUp}\"\r\n    >\r\n      ${this.#renderHandle()} ${this.#renderHourFace()} ${this.#renderMinuteFace()}\r\n      <div class=\"center\"></div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderHandle(): unknown {\r\n    const showHand = (this.view === \"hour\" && this.hour !== null) || (this.view === \"minute\" && this.minute !== null);\r\n    return showHand ? html`<div class=\"handle\"></div>` : nothing;\r\n  }\r\n\r\n  /** @private */\r\n  #renderHourFace(): unknown {\r\n    const use24 = this.currentFormat === \"24\";\r\n    const step = 30;\r\n    const outer = Array.from({ length: 12 }, (_, i) => {\r\n      const hour = i === 0 ? 12 : i;\r\n      const angle = i * step;\r\n      const active =\r\n        this.hour === null\r\n          ? false\r\n          : !use24\r\n            ? this.hour % 12 === i\r\n            : this.hour < 13 && this.hour > 0 && this.hour % 12 === i;\r\n      const disabled = this.isHourDisabled(use24 ? hour : this.period === \"pm\" ? (hour % 12) + 12 : hour % 12);\r\n      return this.#renderNumeral(`${hour}`, angle, active, disabled);\r\n    });\r\n\r\n    const inner = !use24\r\n      ? nothing\r\n      : Array.from({ length: 12 }, (_, i) => {\r\n          const hour = i + 13;\r\n          const angle = (i + 1) * step;\r\n          const active = (this.hour === 0 && hour === 24) || this.hour === hour;\r\n          const disabled = this.isHourDisabled(hour === 24 ? 0 : hour);\r\n          return this.#renderNumeral(hour == 24 ? \"00\" : `${hour}`, angle, active, disabled, true);\r\n        });\r\n\r\n    return html`<div class=\"${classMap({ dial: true, hour: true, hidden: this.view !== \"hour\" })}\">\r\n      ${outer}${inner}\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderMinuteFace(): unknown {\r\n    return html`<div class=\"${classMap({ dial: true, minute: true, hidden: this.view !== \"minute\" })}\">\r\n      ${Array.from({ length: 60 }, (_, i) => {\r\n        if (i % 5 !== 0) return;\r\n        const angle = i * 6;\r\n        const label = i % 5 === 0 ? i.toString().padStart(2, \"0\") : \"\";\r\n        const active = i === this.minute;\r\n        const disabled = this.hour !== null && this.isMinuteDisabled(this.hour, i);\r\n        return this.#renderNumeral(label, angle, active, disabled);\r\n      })}\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderNumeral(label: string, angle: number, active: boolean, disabled: boolean, inner: boolean = false): unknown {\r\n    return html`<div\r\n      class=\"${classMap({ numeral: true, inner, active, disabled })}\"\r\n      style=\"${safeStyleMap({ \"--_numeral-angle\": `${angle}deg` })}\"\r\n    >\r\n      ${label}\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #updateHand(): void {\r\n    const hand = this.shadowRoot?.querySelector<HTMLElement>(\".handle\");\r\n    const center = this.shadowRoot?.querySelector<HTMLElement>(\".center\");\r\n    if (!hand || !center) return;\r\n\r\n    let active = false;\r\n    let inner = false;\r\n    let angle: number | null = null;\r\n    let disabled = false;\r\n\r\n    switch (this.view) {\r\n      case \"hour\":\r\n        if (this.hour !== null) {\r\n          active = true;\r\n          angle = (this.hour % 12) * 30;\r\n          inner = this.currentFormat === \"24\" && (this.hour < 1 || this.hour > 12);\r\n          disabled = this.isHourDisabled(this.hour);\r\n        }\r\n        break;\r\n\r\n      case \"minute\":\r\n        if (this.minute !== null) {\r\n          angle = this.minute * 6;\r\n          active = this.minute % 5 === 0;\r\n          disabled = this.hour !== null && this.isMinuteDisabled(this.hour, this.minute);\r\n        }\r\n        break;\r\n    }\r\n\r\n    hand.classList.toggle(\"active\", active);\r\n    hand.classList.toggle(\"inner\", inner);\r\n    hand.classList.toggle(\"disabled\", disabled);\r\n    center.classList.toggle(\"disabled\", disabled);\r\n\r\n    if (angle != null) {\r\n      hand.style.setProperty(\"--_hand-angle\", `${angle}`);\r\n    } else {\r\n      hand.style.removeProperty(\"--_hand-angle\");\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handlePointerDown(e: PointerEvent): void {\r\n    if ((e.pointerType === \"mouse\" && e.button > 1) || !(e.currentTarget instanceof HTMLElement)) return;\r\n    e.currentTarget.setPointerCapture(e.pointerId);\r\n    e.currentTarget.classList.add(\"dragging\");\r\n\r\n    this.#dragState = {\r\n      timeChanged: false,\r\n      cachedRect: e.currentTarget.getBoundingClientRect(),\r\n      cachedInnerInset:\r\n        this.view === \"hour\" && this.currentFormat === \"24\"\r\n          ? computeCssSize(\r\n              e.currentTarget,\r\n              \"calc(var(--m3e-timepicker-dial-numeral-size, 2.5rem) + var(--m3e-timepicker-dial-inset, 4px))\",\r\n            )\r\n          : 0,\r\n    };\r\n\r\n    this.#dragState.timeChanged =\r\n      this.view === \"hour\"\r\n        ? this.#changeHour(\r\n            this.#hourFromAngle(\r\n              this.#angleFromPointer(e, this.#dragState),\r\n              this.#isPointerInsideInnerRing(e, this.#dragState),\r\n            ),\r\n          )\r\n        : this.#changeMinute(this.#minuteFromAngle(this.#angleFromPointer(e, this.#dragState)));\r\n  }\r\n\r\n  /** @private */\r\n  #handlePointerMove(e: PointerEvent): void {\r\n    if (\r\n      !(e.currentTarget instanceof HTMLElement) ||\r\n      !e.currentTarget.hasPointerCapture(e.pointerId) ||\r\n      !this.#dragState\r\n    )\r\n      return;\r\n\r\n    this.#dragState.timeChanged =\r\n      (this.view === \"hour\"\r\n        ? this.#changeHour(\r\n            this.#hourFromAngle(\r\n              this.#angleFromPointer(e, this.#dragState),\r\n              this.#isPointerInsideInnerRing(e, this.#dragState),\r\n            ),\r\n          )\r\n        : this.#changeMinute(this.#minuteFromAngle(this.#angleFromPointer(e, this.#dragState)))) ||\r\n      this.#dragState.timeChanged;\r\n  }\r\n\r\n  /** @private */\r\n  #handlePointerUp(e: PointerEvent): void {\r\n    if (\r\n      !(e.currentTarget instanceof HTMLElement) ||\r\n      !e.currentTarget.hasPointerCapture(e.pointerId) ||\r\n      !this.#dragState\r\n    )\r\n      return;\r\n\r\n    e.currentTarget.releasePointerCapture(e.pointerId);\r\n    e.currentTarget.classList.remove(\"dragging\");\r\n\r\n    if (this.#dragState.timeChanged) {\r\n      this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n    }\r\n\r\n    if (\r\n      this.view === \"hour\" &&\r\n      (this.#dragState.timeChanged ||\r\n        this.isHourDisabled(\r\n          this.#hourFromAngle(\r\n            this.#angleFromPointer(e, this.#dragState),\r\n            this.#isPointerInsideInnerRing(e, this.#dragState),\r\n          ),\r\n        ) !== true)\r\n    ) {\r\n      this.view = \"minute\";\r\n      this.dispatchEvent(new CustomEvent(\"view-change\"));\r\n    }\r\n\r\n    this.#dragState = undefined;\r\n  }\r\n\r\n  /** @private */\r\n  #angleFromPointer(e: PointerEvent, state: { cachedRect: DOMRect }): number {\r\n    const cx = state.cachedRect.left + state.cachedRect.width / 2;\r\n    const cy = state.cachedRect.top + state.cachedRect.height / 2;\r\n    return ((Math.atan2(e.clientY - cy, e.clientX - cx) * 180) / Math.PI + 450) % 360;\r\n  }\r\n\r\n  /** @private */\r\n  #radiusFromPointer(e: PointerEvent, state: { cachedRect: DOMRect }): number {\r\n    const cx = state.cachedRect.left + state.cachedRect.width / 2;\r\n    const cy = state.cachedRect.top + state.cachedRect.height / 2;\r\n    const dx = e.clientX - cx;\r\n    const dy = e.clientY - cy;\r\n    return Math.sqrt(dx * dx + dy * dy);\r\n  }\r\n\r\n  /** @private */\r\n  #isPointerInsideInnerRing(e: PointerEvent, state: { cachedRect: DOMRect; cachedInnerInset: number }): boolean {\r\n    if (state.cachedInnerInset <= 0) return false;\r\n    return this.#radiusFromPointer(e, state) < state.cachedRect.width / 2 - state.cachedInnerInset;\r\n  }\r\n\r\n  /** @private */\r\n  #hourFromAngle(angle: number, inner: boolean): number {\r\n    const index = Math.round(angle / 30) % 12;\r\n    const hour = inner ? (index === 0 ? 0 : index + 12) : index === 0 ? 12 : index;\r\n    return this.currentFormat === \"24\" ? hour : this.period === \"pm\" ? (hour % 12) + 12 : hour % 12;\r\n  }\r\n\r\n  /** @private */\r\n  #minuteFromAngle(angle: number): number {\r\n    return Math.round(angle / 6) % 60;\r\n  }\r\n\r\n  /** @private */\r\n  #changeHour(hour: number): boolean {\r\n    if (this.hour !== hour && !this.isHourDisabled(hour)) {\r\n      this.hour = hour;\r\n      return true;\r\n    }\r\n    return false;\r\n  }\r\n\r\n  /** @private */\r\n  #changeMinute(minute: number): boolean {\r\n    if (this.hour !== null && this.isMinuteDisabled(this.hour, minute)) return false;\r\n    if (this.minute !== minute) {\r\n      this.minute = minute;\r\n      return true;\r\n    }\r\n    return false;\r\n  }\r\n}\r\n\r\ninterface M3eTimepickerDialElementEventMap extends HTMLElementEventMap {\r\n  \"view-change\": CustomEvent;\r\n}\r\n\r\nexport interface M3eTimepickerDialElement {\r\n  addEventListener<K extends keyof M3eTimepickerDialElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eTimepickerDialElement, ev: M3eTimepickerDialElementEventMap[K]) => void,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  addEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener<K extends keyof M3eTimepickerDialElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eTimepickerDialElement, ev: M3eTimepickerDialElementEventMap[K]) => void,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-timepicker-dial\": M3eTimepickerDialElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, unsafeCSS } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport { customElement, DesignToken, Role } from \"@m3e/web/core\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport { TimepickerOrientation } from \"./TimepickerOrientation\";\r\nimport { TimepickerPeriod } from \"./TimepickerPeriod\";\r\n\r\n/** @internal An internal element responsible for selecting a time period (AM/PM). */\r\n@customElement(\"m3e-timepicker-input-period-toggle\")\r\nexport class M3eTimepickerInputPeriodToggleElement extends Role(LitElement, \"radiogroup\") {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n    }\r\n    .base {\r\n      contain: layout style;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      box-sizing: border-box;\r\n      width: 100%;\r\n      height: 100%;\r\n      border-radius: var(--m3e-timepicker-input-period-toggle-shape, ${DesignToken.shape.corner.small});\r\n      border: var(--m3e-timepicker-input-period-toggle-outline-thickness, 1px) solid\r\n        var(--m3e-timepicker-input-period-toggle-outline-color, ${DesignToken.color.outline});\r\n    }\r\n    :host([orientation=\"vertical\"]) {\r\n      height: var(--m3e-timepicker-input-period-toggle-vertical-height, 5rem);\r\n      width: var(--m3e-timepicker-input-period-toggle-vertical-width, 3.25rem);\r\n    }\r\n    :host([orientation=\"vertical\"]) .base {\r\n      flex-direction: column;\r\n    }\r\n    :host([orientation=\"horizontal\"]) {\r\n      height: var(--m3e-timepicker-input-period-toggle-horizontal-height, 2.375rem);\r\n      width: var(--m3e-timepicker-input-period-toggle-horizontal-width, 13.5rem);\r\n    }\r\n    .period-button {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      outline: none;\r\n      user-select: none;\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n      cursor: pointer;\r\n      position: relative;\r\n      transition: ${unsafeCSS(\r\n        `background-color color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard},\r\n        color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`,\r\n      )};\r\n      font-size: var(\r\n        --m3e-timepicker-input-period-toggle-label-font-size,\r\n        ${DesignToken.typescale.standard.title.medium.fontSize}\r\n      );\r\n      font-weight: var(\r\n        --m3e-timepicker-input-period-toggle-label-font-weight,\r\n        ${DesignToken.typescale.standard.title.medium.fontWeight}\r\n      );\r\n      line-height: var(\r\n        --m3e-timepicker-input-period-toggle-label-line-height,\r\n        ${DesignToken.typescale.standard.title.medium.lineHeight}\r\n      );\r\n      letter-spacing: var(\r\n        --m3e-timepicker-input-period-toggle-label-tracking,\r\n        ${DesignToken.typescale.standard.title.medium.tracking}\r\n      );\r\n    }\r\n    :host([orientation=\"vertical\"]) .period-button {\r\n      height: 50%;\r\n      width: 100%;\r\n    }\r\n    :host([orientation=\"horizontal\"]) .period-button {\r\n      height: 100%;\r\n      width: 50%;\r\n    }\r\n    :host([orientation=\"vertical\"]) .period-button:first-child {\r\n      border-start-start-radius: inherit;\r\n      border-start-end-radius: inherit;\r\n    }\r\n    :host([orientation=\"horizontal\"]) .period-button:first-child {\r\n      border-start-start-radius: inherit;\r\n      border-end-start-radius: inherit;\r\n    }\r\n    .divider {\r\n      flex: none;\r\n    }\r\n    :host([orientation=\"vertical\"]) .divider {\r\n      width: 100%;\r\n      border-bottom: var(--m3e-timepicker-input-period-toggle-outline-thickness, 1px) solid\r\n        var(--m3e-timepicker-input-period-toggle-outline-color, ${DesignToken.color.outline});\r\n    }\r\n    :host([orientation=\"horizontal\"]) .divider {\r\n      height: 100%;\r\n      border-inline-end: var(--m3e-timepicker-input-period-toggle-outline-thickness, 1px) solid\r\n        var(--m3e-timepicker-input-period-toggle-outline-color, ${DesignToken.color.outline});\r\n    }\r\n    :host([orientation=\"vertical\"]) .period-button:last-child {\r\n      border-end-start-radius: inherit;\r\n      border-end-end-radius: inherit;\r\n    }\r\n    :host([orientation=\"horizontal\"]) .period-button:last-child {\r\n      border-start-end-radius: inherit;\r\n      border-end-end-radius: inherit;\r\n    }\r\n    .period-button[aria-checked=\"true\"] {\r\n      background-color: var(\r\n        --m3e-timepicker-input-period-toggle-selected-container-color,\r\n        ${DesignToken.color.tertiaryContainer}\r\n      );\r\n      color: var(--m3e-timepicker-input-period-toggle-selected-label-color, ${DesignToken.color.onTertiaryContainer});\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-timepicker-input-period-toggle-selected-hover-state-layer-color,\r\n        ${DesignToken.color.onTertiaryContainer}\r\n      );\r\n      --m3e-state-layer-focus-color: var(\r\n        --m3e-timepicker-input-period-toggle-selected-focus-state-layer-color,\r\n        ${DesignToken.color.onTertiaryContainer}\r\n      );\r\n      --m3e-ripple-color: var(\r\n        --m3e-timepicker-input-period-toggle-selected-pressed-state-layer-color,\r\n        ${DesignToken.color.onTertiaryContainer}\r\n      );\r\n    }\r\n    .period-button[aria-checked=\"false\"] {\r\n      color: var(--m3e-timepicker-input-period-toggle-unselected-label-color, ${DesignToken.color.onSurfaceVariant});\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-timepicker-input-period-toggle-unselected-hover-state-layer-color,\r\n        ${DesignToken.color.onSurfaceVariant}\r\n      );\r\n      --m3e-state-layer-focus-color: var(\r\n        --m3e-timepicker-input-period-toggle-unselected-focus-state-layer-color,\r\n        ${DesignToken.color.onSurfaceVariant}\r\n      );\r\n      --m3e-ripple-color: var(\r\n        --m3e-timepicker-input-period-toggle-unselected-pressed-state-layer-color,\r\n        ${DesignToken.color.onSurfaceVariant}\r\n      );\r\n    }\r\n  `;\r\n\r\n  /** The 12-hour time period. */\r\n  @property() period: TimepickerPeriod = \"am\";\r\n\r\n  /** The orientation of the toggle. */\r\n  @property({ reflect: true }) orientation: Exclude<TimepickerOrientation, \"auto\"> = \"vertical\";\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    const format = new Intl.DateTimeFormat(navigator.language, { hour: \"numeric\", hour12: true });\r\n\r\n    return html`<div class=\"base\" tabindex=\"-1\" @keydown=\"${this.#handleKeyDown}\">\r\n      <div\r\n        id=\"am\"\r\n        class=\"period-button\"\r\n        role=\"radio\"\r\n        aria-checked=\"${this.period === \"am\" ? \"true\" : \"false\"}\"\r\n        tabindex=\"${this.period === \"am\" ? \"0\" : \"-1\"}\"\r\n        @click=\"${this.#handleClick}\"\r\n      >\r\n        <m3e-focus-ring class=\"focus-ring\" for=\"am\"></m3e-focus-ring>\r\n        <m3e-state-layer class=\"state-layer\" for=\"am\"></m3e-state-layer>\r\n        <m3e-ripple class=\"ripple\" centered for=\"am\"></m3e-ripple>\r\n        ${format.formatToParts(new Date(2020, 0, 1, 9)).find((p) => p.type === \"dayPeriod\")?.value ?? \"AM\"}\r\n      </div>\r\n      <div class=\"divider\" aria-hidden=\"true\"></div>\r\n      <div\r\n        id=\"pm\"\r\n        class=\"period-button\"\r\n        role=\"radio\"\r\n        aria-checked=\"${this.period === \"pm\" ? \"true\" : \"false\"}\"\r\n        tabindex=\"${this.period === \"pm\" ? \"0\" : \"-1\"}\"\r\n        @click=\"${this.#handleClick}\"\r\n      >\r\n        <m3e-focus-ring class=\"focus-ring\" for=\"pm\"></m3e-focus-ring>\r\n        <m3e-state-layer class=\"state-layer\" for=\"pm\"></m3e-state-layer>\r\n        <m3e-ripple class=\"ripple\" centered for=\"pm\"></m3e-ripple>\r\n        ${format.formatToParts(new Date(2020, 0, 1, 21)).find((p) => p.type === \"dayPeriod\")?.value ?? \"PM\"}\r\n      </div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    if (e.defaultPrevented) return;\r\n\r\n    const changePeriod = (prev: TimepickerPeriod, next: TimepickerPeriod) => {\r\n      if (this.period === prev) {\r\n        this.period = next;\r\n        this.shadowRoot?.querySelector<HTMLElement>(`#${this.period}`)?.focus();\r\n        this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n      }\r\n    };\r\n\r\n    switch (e.key) {\r\n      case \"Left\":\r\n      case \"ArrowLeft\":\r\n        e.preventDefault();\r\n        if (this.orientation === \"horizontal\") {\r\n          if (M3eDirectionality.current === \"rtl\") {\r\n            changePeriod(\"am\", \"pm\");\r\n          } else {\r\n            changePeriod(\"pm\", \"am\");\r\n          }\r\n        }\r\n        break;\r\n\r\n      case \"Right\":\r\n      case \"ArrowRight\":\r\n        e.preventDefault();\r\n        if (this.orientation === \"horizontal\") {\r\n          if (M3eDirectionality.current === \"rtl\") {\r\n            changePeriod(\"pm\", \"am\");\r\n          } else {\r\n            changePeriod(\"am\", \"pm\");\r\n          }\r\n        }\r\n        break;\r\n\r\n      case \"Up\":\r\n      case \"ArrowUp\":\r\n        e.preventDefault();\r\n        if (this.orientation === \"vertical\") {\r\n          changePeriod(\"pm\", \"am\");\r\n        }\r\n\r\n        break;\r\n\r\n      case \"Down\":\r\n      case \"ArrowDown\":\r\n        e.preventDefault();\r\n        if (this.orientation === \"vertical\") {\r\n          changePeriod(\"am\", \"pm\");\r\n        }\r\n        break;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    const period = <TimepickerPeriod>(<HTMLElement>e.currentTarget).id;\r\n    if (period !== this.period) {\r\n      this.period = period;\r\n      this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n    }\r\n  }\r\n}\r\n","/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { css, CSSResultGroup, html, nothing, PropertyValues } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\nimport { classMap } from \"lit/directives/class-map.js\";\r\nimport { ifDefined } from \"lit/directives/if-defined.js\";\r\n\r\nimport { customElement, DesignToken, HtmlFor } from \"@m3e/web/core\";\r\n\r\nimport { TimepickerOrientation } from \"./TimepickerOrientation\";\r\nimport { M3eTimepickerDialElement } from \"./TimepickerDialElement\";\r\nimport { M3eTimepickerInputPeriodToggleElement } from \"./TimepickerInputPeriodToggleElement\";\r\nimport { TimepickerInputElementBase } from \"./TimepickerInputElementBase\";\r\nimport { TimepickerView } from \"./TimepickerView\";\r\n\r\nimport \"./TimepickerInputPeriodToggleElement\";\r\n\r\n/**\r\n * A keyboard‑based time surface for choosing hours and minutes.\r\n * @description\r\n * The `m3e-timepicker-input` component provides a keyboard-focused time\r\n * entry surface, allowing users to type or navigate hour and minute fields,\r\n * toggle AM/PM, and receive accessible validation feedback.\r\n *\r\n * @tag m3e-timepicker-input\r\n *\r\n * @attr format - Whether to use a 12‑hour or 24‑hour clock.\r\n * @attr hide-labels - Whether to hide field labels.\r\n * @attr hour - The hour, in 24-hour time, from 0..23.\r\n * @attr max-time - The maximum time that can be selected.\r\n * @attr min-time - The minimum time that can be selected.\r\n * @attr minute - The minute, from 0..59.\r\n * @attr orientation - The orientation of the input.\r\n * @attr period - The 12-hour time period.\r\n * @attr view - The view used to input time.\r\n * @attr hour-label - The label for the hour field.\r\n * @attr minute-label - The label for the minute field.\r\n * @attr period-toggle-label - The accessible label given to the period toggle.\r\n *\r\n * @fires change - Dispatched when the selected time changes.\r\n * @fires view-change - Dispatched when the view changes.\r\n *\r\n * @cssprop --m3e-timepicker-input-field-container-width - Width of the input field container.\r\n * @cssprop --m3e-timepicker-input-field-height - Height of the input fields.\r\n * @cssprop --m3e-timepicker-input-field-container-shape - Corner radius of the input field container.\r\n * @cssprop --m3e-timepicker-input-field-font-size - Font size of the input field text.\r\n * @cssprop --m3e-timepicker-input-field-font-weight - Font weight of the input field text.\r\n * @cssprop --m3e-timepicker-input-field-line-height - Line height of the input field text.\r\n * @cssprop --m3e-timepicker-input-field-tracking - Letter spacing of the input field text.\r\n * @cssprop --m3e-timepicker-input-field-label-unselected-color - Text color of unselected input field labels.\r\n * @cssprop --m3e-timepicker-input-field-unselected-container-color - Background color of unselected input fields.\r\n * @cssprop --m3e-timepicker-input-field-label-selected-color - Text color of selected input field labels.\r\n * @cssprop --m3e-timepicker-input-field-selected-container-color - Background color of selected input fields.\r\n * @cssprop --m3e-timepicker-input-field-label-invalid-color - Text color of invalid input field labels.\r\n * @cssprop --m3e-timepicker-input-field-invalid-container-color - Background color of invalid input fields.\r\n * @cssprop --m3e-timepicker-input-field-supporting-text-color - Text color of supporting labels.\r\n * @cssprop --m3e-timepicker-input-field-supporting-text-font-size - Font size of supporting labels.\r\n * @cssprop --m3e-timepicker-input-field-supporting-text-font-weight - Font weight of supporting labels.\r\n * @cssprop --m3e-timepicker-input-field-supporting-text-line-height - Line height of supporting labels.\r\n * @cssprop --m3e-timepicker-input-field-supporting-text-tracking - Letter spacing of supporting labels.\r\n * @cssprop --m3e-timepicker-input-field-separator-width - Width of the field separator.\r\n * @cssprop --m3e-timepicker-input-field-separator-color - Color of the field separator.\r\n * @cssprop --m3e-timepicker-input-field-separator-font-size - Font size of the field separator.\r\n * @cssprop --m3e-timepicker-input-field-separator-font-weight - Font weight of the field separator.\r\n * @cssprop --m3e-timepicker-input-field-separator-tracking - Letter spacing of the field separator.\r\n * @cssprop --m3e-timepicker-input-horizontal-period-toggle-space - Space between the fields and period toggle in horizontal orientation.\r\n * @cssprop --m3e-timepicker-input-vertical-period-toggle-space - Space between the fields and period toggle in vertical orientation.\r\n */\r\n@customElement(\"m3e-timepicker-input\")\r\nexport class M3eTimepickerInputElement extends HtmlFor(TimepickerInputElementBase) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n    }\r\n    .base {\r\n      display: flex;\r\n      align-items: flex-start;\r\n      height: 100%;\r\n    }\r\n    .field-wrapper {\r\n      display: flex;\r\n      flex-direction: column;\r\n      justify-content: stretch;\r\n      position: relative;\r\n    }\r\n    .field,\r\n    .focus-ring {\r\n      width: var(--m3e-timepicker-input-field-container-width, 6rem);\r\n      height: var(--m3e-timepicker-input-field-height, 5rem);\r\n      border-radius: var(--m3e-timepicker-input-field-container-shape, ${DesignToken.shape.corner.small});\r\n    }\r\n    .field {\r\n      display: block;\r\n      text-align: center;\r\n      cursor: text;\r\n      outline: none;\r\n      border: unset;\r\n      box-shadow: none;\r\n      padding: unset;\r\n\r\n      font-size: var(--m3e-timepicker-input-field-font-size, ${DesignToken.typescale.standard.display.medium.fontSize});\r\n      font-weight: var(\r\n        --m3e-timepicker-input-field-font-weight,\r\n        ${DesignToken.typescale.standard.display.medium.fontWeight}\r\n      );\r\n      line-height: var(\r\n        --m3e-timepicker-input-field-line-height,\r\n        ${DesignToken.typescale.standard.display.medium.lineHeight}\r\n      );\r\n      letter-spacing: var(\r\n        --m3e-timepicker-input-field-tracking,\r\n        ${DesignToken.typescale.standard.display.medium.tracking}\r\n      );\r\n    }\r\n    .field:not(.selected):not(.invalid) {\r\n      color: var(--m3e-timepicker-input-field-label-unselected-color, ${DesignToken.color.onSurface});\r\n      background-color: var(\r\n        --m3e-timepicker-input-field-unselected-container-color,\r\n        ${DesignToken.color.surfaceContainerHighest}\r\n      );\r\n    }\r\n    .field.selected:not(.invalid) {\r\n      color: var(--m3e-timepicker-input-field-label-selected-color, ${DesignToken.color.onPrimaryContainer});\r\n      background-color: var(\r\n        --m3e-timepicker-input-field-selected-container-color,\r\n        ${DesignToken.color.primaryContainer}\r\n      );\r\n    }\r\n    .field.invalid {\r\n      color: var(--m3e-timepicker-input-field-label-invalid-color, ${DesignToken.color.onErrorContainer});\r\n      background-color: var(--m3e-timepicker-input-field-invalid-container-color, ${DesignToken.color.errorContainer});\r\n    }\r\n    .field::placeholder {\r\n      user-select: none;\r\n      color: currentColor;\r\n      transition: opacity ${DesignToken.motion.duration.short4};\r\n    }\r\n    .field:focus::placeholder {\r\n      opacity: 0;\r\n    }\r\n    .label {\r\n      user-select: none;\r\n      margin-top: 0.25rem;\r\n      color: var(--m3e-timepicker-input-field-supporting-text-color, ${DesignToken.color.onSurfaceVariant});\r\n      font-size: var(\r\n        --m3e-timepicker-input-field-supporting-text-font-size,\r\n        ${DesignToken.typescale.standard.body.small.fontSize}\r\n      );\r\n      font-weight: var(\r\n        --m3e-timepicker-input-field-supporting-text-font-weight,\r\n        ${DesignToken.typescale.standard.body.small.fontWeight}\r\n      );\r\n      line-height: var(\r\n        --m3e-timepicker-input-field-supporting-text-line-height,\r\n        ${DesignToken.typescale.standard.body.small.lineHeight}\r\n      );\r\n      letter-spacing: var(\r\n        --m3e-timepicker-input-field-supporting-text-tracking,\r\n        ${DesignToken.typescale.standard.body.small.tracking}\r\n      );\r\n    }\r\n    .field-separator {\r\n      user-select: none;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      width: var(--m3e-timepicker-input-field-separator-width, 1.5rem);\r\n      height: var(--m3e-timepicker-input-field-height, 5rem);\r\n      color: var(--m3e-timepicker-input-field-separator-color, ${DesignToken.color.onSurface});\r\n      font-size: var(\r\n        --m3e-timepicker-input-field-separator-font-size,\r\n        ${DesignToken.typescale.standard.display.large.fontSize}\r\n      );\r\n      font-weight: var(\r\n        --m3e-timepicker-input-field-separator-font-weight,\r\n        ${DesignToken.typescale.standard.display.large.fontWeight}\r\n      );\r\n      letter-spacing: var(\r\n        --m3e-timepicker-input-field-separator-tracking,\r\n        ${DesignToken.typescale.standard.display.large.tracking}\r\n      );\r\n    }\r\n    :host([orientation=\"horizontal\"]) .period-toggle {\r\n      margin-inline-start: var(--m3e-timepicker-input-horizontal-period-toggle-space, 0.75rem);\r\n    }\r\n    :host([orientation=\"vertical\"]) .period-toggle {\r\n      margin-block-start: var(--m3e-timepicker-input-vertical-period-toggle-space, 1rem);\r\n    }\r\n  `;\r\n\r\n  /** @private */ readonly #clockChangeHandler = () => this.#handleClockChange();\r\n  /** @private */ readonly #clockViewChangeHandler = () => this.#handleClockViewChange();\r\n\r\n  /**\r\n   * The orientation of the input.\r\n   * @default \"horizontal\"\r\n   */\r\n  @property({ reflect: true }) orientation: Exclude<TimepickerOrientation, \"auto\"> = \"horizontal\";\r\n\r\n  /**\r\n   * Whether to hide field labels.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"hide-labels\", type: Boolean }) hideLabels = false;\r\n\r\n  /**\r\n   * The label for the hour field.\r\n   * @default \"Hour\"\r\n   */\r\n  @property({ attribute: \"hour-label\" }) hourLabel = \"Hour\";\r\n\r\n  /**\r\n   * The label for the minute field.\r\n   * @default \"Minute\"\r\n   */\r\n  @property({ attribute: \"minute-label\" }) minuteLabel = \"Minute\";\r\n\r\n  /**\r\n   * The accessible label given to the period toggle.\r\n   * @default \"AM or PM\"\r\n   */\r\n  @property({ attribute: \"period-toggle-label\" }) periodToggleLabel = \"AM or PM\";\r\n\r\n  /** @inheritdoc */\r\n  override attach(control: HTMLElement): void {\r\n    super.attach(control);\r\n\r\n    if (this.control instanceof M3eTimepickerDialElement) {\r\n      this.#syncControl();\r\n      this.control.addEventListener(\"change\", this.#clockChangeHandler);\r\n      this.control.addEventListener(\"view-change\", this.#clockViewChangeHandler);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override detach(): void {\r\n    if (this.control instanceof M3eTimepickerDialElement) {\r\n      this.control.removeEventListener(\"change\", this.#clockChangeHandler);\r\n      this.control.removeEventListener(\"view-change\", this.#clockViewChangeHandler);\r\n    }\r\n    super.detach();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override willUpdate(_changedProperties: PropertyValues<this>): void {\r\n    super.willUpdate(_changedProperties);\r\n\r\n    if (\r\n      _changedProperties.has(\"hour\") ||\r\n      _changedProperties.has(\"minute\") ||\r\n      _changedProperties.has(\"view\") ||\r\n      _changedProperties.has(\"period\") ||\r\n      _changedProperties.has(\"format\") ||\r\n      _changedProperties.has(\"minTime\") ||\r\n      _changedProperties.has(\"maxTime\") ||\r\n      _changedProperties.has(\"blackoutTimes\")\r\n    ) {\r\n      this.#syncControl();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #syncControl(): void {\r\n    if (this.control instanceof M3eTimepickerDialElement) {\r\n      this.control.view = this.view;\r\n      this.control.format = this.currentFormat;\r\n      this.control.hour = this.hour;\r\n      this.control.minute = this.minute;\r\n      this.control.minTime = this.minTime;\r\n      this.control.maxTime = this.maxTime;\r\n      this.control.blackoutTimes = this.blackoutTimes;\r\n      this.control.period = this.period;\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n        ${this.#renderField(\"hour\")}\r\n        <div class=\"field-separator\">:</div>\r\n        ${this.#renderField(\"minute\")}\r\n        ${this.currentFormat === \"12\" && this.orientation === \"horizontal\"\r\n          ? html`<m3e-timepicker-input-period-toggle\r\n              class=\"period-toggle\"\r\n              period=\"${this.period}\"\r\n              orientation=\"vertical\"\r\n              aria-label=\"${this.periodToggleLabel}\"\r\n              @change=\"${this.#handlePeriodChange}\"\r\n            ></m3e-timepicker-input-period-toggle>`\r\n          : nothing}\r\n      </div>\r\n      ${this.currentFormat === \"12\" && this.orientation === \"vertical\"\r\n        ? html`<m3e-timepicker-input-period-toggle\r\n            class=\"period-toggle\"\r\n            period=\"${this.period}\"\r\n            orientation=\"horizontal\"\r\n            @change=\"${this.#handlePeriodChange}\"\r\n          ></m3e-timepicker-input-period-toggle>`\r\n        : nothing}`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderField(view: TimepickerView): unknown {\r\n    const pad = (n: number | null) => (n === null ? \"\" : n < 10 ? \"0\" + n : String(n));\r\n    const label = view === \"hour\" ? this.hourLabel : this.minuteLabel;\r\n    const invalid = this.#isDisabled(this[view], view);\r\n\r\n    let valueText: string | undefined;\r\n\r\n    if (this[view] !== null) {\r\n      const date = new Date();\r\n      date.setHours(this.hour ?? 0, this.minute ?? 0, 0, 0);\r\n\r\n      valueText = new Intl.DateTimeFormat(\r\n        navigator.language,\r\n        view === \"hour\" ? { hour: \"numeric\", hour12: this.currentFormat === \"12\" } : { minute: \"2-digit\" },\r\n      ).format(date);\r\n    }\r\n\r\n    return html`<div class=\"field-wrapper\">\r\n      <input\r\n        id=\"${view}\"\r\n        class=\"${classMap({\r\n          field: true,\r\n          selected: this.view === view,\r\n          invalid,\r\n        })}\"\r\n        role=\"spinbutton\"\r\n        placeholder=\"––\"\r\n        inputmode=\"numeric\"\r\n        autocomplete=\"off\"\r\n        aria-label=\"${label}\"\r\n        aria-valuemin=\"0\"\r\n        aria-valuemax=\"${view === \"hour\" ? 23 : 59}\"\r\n        aria-valuenow=\"${ifDefined(valueText ? pad(this[view]) : undefined)}\"\r\n        aria-valuetext=\"${ifDefined(valueText)}\"\r\n        @focus=\"${this.#handleFieldFocus}\"\r\n        @keydown=\"${this.#handleFieldKeyDown}\"\r\n        @input=\"${this.#handleFieldInput}\"\r\n        .value=\"${pad(view === \"hour\" ? (this.currentFormat === \"12\" ? this.hourOfPeriod : this.hour) : this.minute)}\"\r\n      />\r\n      <m3e-collapsible aria-hidden=\"true\" ?open=\"${!this.hideLabels}\">\r\n        <span class=\"label\">${label}</span>\r\n      </m3e-collapsible>\r\n      <m3e-focus-ring class=\"focus-ring\" for=\"${view}\"></m3e-focus-ring>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleFieldFocus(e: Event): void {\r\n    const input = <HTMLInputElement>e.target;\r\n    const view = <TimepickerView>input.id;\r\n    if (this.view !== view) {\r\n      this.view = view;\r\n      this.dispatchEvent(new CustomEvent(\"view-change\"));\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleFieldKeyDown(e: KeyboardEvent): void {\r\n    const input = <HTMLInputElement>e.target;\r\n    const view = <TimepickerView>input.id;\r\n\r\n    switch (e.key) {\r\n      case \"Up\":\r\n      case \"ArrowUp\":\r\n        e.preventDefault();\r\n        this.#increment(view, 1, true);\r\n        this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n        return;\r\n\r\n      case \"PageUp\":\r\n        e.preventDefault();\r\n        this.#increment(view, view === \"hour\" ? 1 : 5);\r\n        this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n        return;\r\n\r\n      case \"Down\":\r\n      case \"ArrowDown\":\r\n        e.preventDefault();\r\n        this.#increment(view, -1, true);\r\n        this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n        return;\r\n\r\n      case \"PageDown\":\r\n        e.preventDefault();\r\n        this.#increment(view, view === \"hour\" ? -1 : -5);\r\n        this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n        return;\r\n\r\n      case \"Backspace\":\r\n      case \"Delete\":\r\n        e.preventDefault();\r\n        this[view] = null;\r\n        input.value = \"\";\r\n        this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n        break;\r\n\r\n      case \"Tab\":\r\n      case \"ArrowLeft\":\r\n      case \"Left\":\r\n      case \"ArrowRight\":\r\n      case \"Right\":\r\n        return;\r\n    }\r\n\r\n    if (e.ctrlKey || e.metaKey) {\r\n      return;\r\n    }\r\n\r\n    if (!/^\\d$/.test(e.key)) {\r\n      e.preventDefault();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleFieldInput(e: InputEvent): void {\r\n    if (e.isComposing) return;\r\n\r\n    const input = e.target as HTMLInputElement;\r\n    const view = input.id as TimepickerView;\r\n\r\n    const raw = input.value.replace(/\\D/g, \"\");\r\n    if (raw.length === 0) {\r\n      this[view] = null;\r\n      input.value = \"\";\r\n      this.requestUpdate();\r\n      this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n      return;\r\n    }\r\n\r\n    const isValid = (v: number) =>\r\n      view === \"hour\" ? (this.currentFormat === \"12\" ? v >= 1 && v <= 12 : v >= 0 && v <= 23) : v >= 0 && v <= 59;\r\n\r\n    const cursor = input.selectionStart ?? input.value.length;\r\n    const atEnd = cursor === input.value.length;\r\n\r\n    // Typed digit (only valid for insertText)\r\n    const typedDigit = typeof e.data === \"string\" && /^\\d$/.test(e.data) ? Number(e.data) : null;\r\n\r\n    let value: number;\r\n\r\n    if (typedDigit !== null && !atEnd) {\r\n      // Cursor not at end, always treat as fresh single-digit overwrite\r\n      value = typedDigit;\r\n    } else if (raw.length >= 2 && atEnd && raw.startsWith(\"0\")) {\r\n      // Natural 2-digit typing or paste\r\n      const candidate = parseInt(raw.slice(-2));\r\n      value = isValid(candidate) ? candidate : Number(raw.slice(-1));\r\n    } else {\r\n      // Single-digit typing or fallback\r\n      value = typedDigit !== null ? typedDigit : Number(raw.slice(-1));\r\n    }\r\n\r\n    // 12-hour correction\r\n    if (view === \"hour\" && this.currentFormat === \"12\" && value === 0) {\r\n      value = 12;\r\n    }\r\n\r\n    input.value = value < 10 ? `0${value}` : String(value);\r\n\r\n    try {\r\n      input.setSelectionRange(input.value.length, input.value.length);\r\n    } catch {\r\n      // ignore\r\n    }\r\n\r\n    if (view === \"hour\" && this.currentFormat === \"12\") {\r\n      this.hourOfPeriod = value;\r\n    } else {\r\n      this[view] = value;\r\n    }\r\n\r\n    this.requestUpdate();\r\n    this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n  }\r\n\r\n  /** @private */\r\n  #increment(view: TimepickerView, by: number, wrap: boolean = false): void {\r\n    const max = view === \"hour\" ? 24 : 60;\r\n\r\n    const step = Math.sign(by);\r\n    let candidate = this[view] ?? 0;\r\n    let remaining = Math.abs(by);\r\n\r\n    while (remaining > 0) {\r\n      candidate += step;\r\n\r\n      if (!wrap) {\r\n        if (candidate < 0) {\r\n          candidate = 0;\r\n          break;\r\n        }\r\n        if (candidate >= max) {\r\n          candidate = max - 1;\r\n          break;\r\n        }\r\n      }\r\n\r\n      candidate = ((candidate % max) + max) % max;\r\n      remaining--;\r\n    }\r\n\r\n    let skipStep = step;\r\n\r\n    if (!wrap) {\r\n      if (candidate === 0) skipStep = +1;\r\n      else if (candidate === max - 1) skipStep = -1;\r\n    }\r\n\r\n    if (this.#isDisabled(candidate, view)) {\r\n      let attempts = 0;\r\n\r\n      while (this.#isDisabled(candidate, view)) {\r\n        candidate += skipStep;\r\n        if (!wrap) {\r\n          if (candidate < 0 || candidate >= max) return;\r\n        }\r\n\r\n        candidate = ((candidate % max) + max) % max;\r\n        if (++attempts > max) return;\r\n      }\r\n    }\r\n\r\n    this[view] = candidate;\r\n  }\r\n\r\n  /** @private */\r\n  #handlePeriodChange(e: Event): void {\r\n    e.stopPropagation();\r\n    this.period = (<M3eTimepickerInputPeriodToggleElement>e.currentTarget).period;\r\n    if (this.hour !== null) {\r\n      const h = this.hour % 12 || 12;\r\n      this.hour = this.period === \"am\" ? (h === 12 ? 0 : h) : h === 12 ? 12 : h + 12;\r\n      this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleClockChange(): void {\r\n    if (!this.control) return;\r\n    this.hour = (<M3eTimepickerDialElement>this.control).hour;\r\n    this.minute = (<M3eTimepickerDialElement>this.control).minute;\r\n    this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n  }\r\n\r\n  /** @private */\r\n  #handleClockViewChange(): void {\r\n    if (!this.control) return;\r\n    this.view = (<M3eTimepickerDialElement>this.control).view;\r\n    this.dispatchEvent(new CustomEvent(\"view-change\"));\r\n  }\r\n\r\n  /** @private */\r\n  #isDisabled(value: number | null, view: TimepickerView): boolean {\r\n    if (value === null) return false;\r\n    switch (view) {\r\n      case \"hour\":\r\n        return this.isHourDisabled(value);\r\n      case \"minute\":\r\n        return this.hour != null && this.isMinuteDisabled(this.hour, value);\r\n    }\r\n  }\r\n}\r\n\r\ninterface M3eTimepickerInputElementEventMap extends HTMLElementEventMap {\r\n  \"view-change\": CustomEvent;\r\n}\r\n\r\nexport interface M3eTimepickerInputElement {\r\n  addEventListener<K extends keyof M3eTimepickerInputElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eTimepickerInputElement, ev: M3eTimepickerInputElementEventMap[K]) => void,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  addEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener<K extends keyof M3eTimepickerInputElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eTimepickerInputElement, ev: M3eTimepickerInputElementEventMap[K]) => void,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-timepicker-input\": M3eTimepickerInputElement;\r\n  }\r\n}\r\n","/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { css, CSSResultGroup, html, LitElement, nothing, PropertyValues, svg, unsafeCSS } from \"lit\";\r\nimport { property, query, state } from \"lit/decorators.js\";\r\nimport { ifDefined } from \"lit/directives/if-defined.js\";\r\n\r\nimport {\r\n  addCustomState,\r\n  customElement,\r\n  AttachInternals,\r\n  dateConverter,\r\n  deleteCustomState,\r\n  DesignToken,\r\n  Role,\r\n  ScrollLockController,\r\n  setCustomState,\r\n  SuppressInitialAnimation,\r\n  InertController,\r\n  ReconnectedCallback,\r\n  prefersReducedMotion,\r\n  timeConverter,\r\n  TimeParts,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { positionAnchor } from \"@m3e/web/core/anchoring\";\r\nimport { Direction, M3eDirectionality } from \"@m3e/web/core/bidi\";\r\nimport { Breakpoint, M3eBreakpointObserver } from \"@m3e/web/core/layout\";\r\n\r\nimport \"@m3e/web/core/a11y\";\r\nimport \"@m3e/web/button\";\r\nimport \"@m3e/web/icon-button\";\r\n\r\nimport { M3eTimepickerInputElement } from \"./TimepickerInputElement\";\r\nimport { TimepickerVariant } from \"./TimepickerVariant\";\r\nimport { TimepickerMode } from \"./TimepickerMode\";\r\nimport { TimepickerOrientation } from \"./TimepickerOrientation\";\r\nimport { TimepickerFormat } from \"./TimepickerFormat\";\r\n\r\nimport \"./TimepickerDialElement\";\r\nimport \"./TimepickerInputElement\";\r\n\r\n/**\r\n * Presents a time picker on a temporary surface.\r\n * @description\r\n * The `m3e-timepicker` component provides a time-selection experience consistent\r\n * with Material 3 guidance for layout, motion, and accessibility. It displays a\r\n * temporary surface that allows users to choose a time using both keyboard-based\r\n * input and clock-face dial controls.\r\n *\r\n * While open, the picker ensures users can review their selection and complete\r\n * the interaction through confirm, dismiss, or toggle actions, making updates\r\n * intentional and accessible.\r\n *\r\n * It accepts and emits plain `Date` values, allowing applications to apply their\r\n * own formatting, parsing, and localization.\r\n *\r\n * @tag m3e-timepicker\r\n *\r\n * @attr variant - The appearance variant of the picker.\r\n * @attr mode - The mode in which to select time.\r\n * @attr orientation - The orientation of the picker.\r\n * @attr date - The selected date.\r\n * @attr format - Whether to use a 12‑hour or 24‑hour clock.\r\n * @attr max-time - The maximum time that can be selected.\r\n * @attr min-time - The minimum time that can be selected.\r\n * @attr confirm-label - Label given to the button used apply the selected date and close the picker.\r\n * @attr dismiss-label - Label given to the button used discard the selected date and close the picker.\r\n * @attr dial-label - Label given to the the picker when in dial mode.\r\n * @attr input-label - Label given to the the picker when in input mode.\r\n * @attr hour-label - Label for the hour field.\r\n * @attr minute-label - Label for the minute field.\r\n * @attr mode-toggle-label - The accessible label given to the mode toggle button.\r\n * @attr hide-mode-toggle - Whether to hide the mode toggle button.\r\n * @attr period-toggle-label - The accessible label given to the period toggle.\r\n *\r\n * @fires change - Dispatched when the selected time is confirmed.\r\n * @fires beforetoggle - Dispatched before the picker toggles.\r\n * @fires toggle - Dispatched when the picker toggles.\r\n *\r\n * @cssprop --m3e-timepicker-container-padding-block - Block padding inside the picker container.\r\n * @cssprop --m3e-timepicker-container-padding-inline - Inline padding inside the picker container.\r\n * @cssprop --m3e-timepicker-container-color - Background color of the picker container.\r\n * @cssprop --m3e-timepicker-container-elevation - Box shadow / elevation of the picker container.\r\n * @cssprop --m3e-timepicker-docked-container-color - Background color of the docked picker container.\r\n * @cssprop --m3e-timepicker-docked-container-shape - Border radius of the docked picker container.\r\n * @cssprop --m3e-timepicker-modal-container-color - Background color of the modal picker container.\r\n * @cssprop --m3e-timepicker-modal-container-shape - Border radius of the modal picker container.\r\n * @cssprop --m3e-timepicker-headline-color - Color of the headline.\r\n * @cssprop --m3e-timepicker-headline-font-size - Font size of the headline.\r\n * @cssprop --m3e-timepicker-headline-font-weight - Font weight of the headline.\r\n * @cssprop --m3e-timepicker-headline-line-height - Line height of the headline.\r\n * @cssprop --m3e-timepicker-headline-tracking - Letter spacing of the headline.\r\n * @cssprop --m3e-timepicker-headline-top-space - Top margin above the headline.\r\n * @cssprop --m3e-timepicker-actions-space - Space above the action buttons.\r\n * @cssprop --m3e-timepicker-label-input-space - Space between Label and the input.\r\n * @cssprop --m3e-timepicker-vertical-input-dial-space - Space between the input and dial in vertical orientation.\r\n * @cssprop --m3e-timepicker-horizontal-input-dial-space - Space between the input and dial in horizontal orientation.\r\n * @cssprop --m3e-timepicker-input-field-container-width - Width of the input field container.\r\n * @cssprop --m3e-timepicker-input-field-height - Height of the input fields.\r\n * @cssprop --m3e-timepicker-input-field-container-shape - Corner radius of the input field container.\r\n * @cssprop --m3e-timepicker-input-field-font-size - Font size of the input field text.\r\n * @cssprop --m3e-timepicker-input-field-font-weight - Font weight of the input field text.\r\n * @cssprop --m3e-timepicker-input-field-line-height - Line height of the input field text.\r\n * @cssprop --m3e-timepicker-input-field-tracking - Letter spacing of the input field text.\r\n * @cssprop --m3e-timepicker-input-field-label-unselected-color - Text color of unselected input field labels.\r\n * @cssprop --m3e-timepicker-input-field-unselected-container-color - Background color of unselected input fields.\r\n * @cssprop --m3e-timepicker-input-field-label-selected-color - Text color of selected input field labels.\r\n * @cssprop --m3e-timepicker-input-field-selected-container-color - Background color of selected input fields.\r\n * @cssprop --m3e-timepicker-input-field-label-invalid-color - Text color of invalid input field labels.\r\n * @cssprop --m3e-timepicker-input-field-invalid-container-color - Background color of invalid input fields.\r\n * @cssprop --m3e-timepicker-input-field-supporting-text-color - Text color of supporting labels.\r\n * @cssprop --m3e-timepicker-input-field-supporting-text-font-size - Font size of supporting labels.\r\n * @cssprop --m3e-timepicker-input-field-supporting-text-font-weight - Font weight of supporting labels.\r\n * @cssprop --m3e-timepicker-input-field-supporting-text-line-height - Line height of supporting labels.\r\n * @cssprop --m3e-timepicker-input-field-supporting-text-tracking - Letter spacing of supporting labels.\r\n * @cssprop --m3e-timepicker-input-field-separator-width - Width of the field separator.\r\n * @cssprop --m3e-timepicker-input-field-separator-color - Color of the field separator.\r\n * @cssprop --m3e-timepicker-input-field-separator-font-size - Font size of the field separator.\r\n * @cssprop --m3e-timepicker-input-field-separator-font-weight - Font weight of the field separator.\r\n * @cssprop --m3e-timepicker-input-field-separator-tracking - Letter spacing of the field separator.\r\n * @cssprop --m3e-timepicker-input-horizontal-period-toggle-space - Space between the fields and period toggle in horizontal orientation.\r\n * @cssprop --m3e-timepicker-input-vertical-period-toggle-space - Space between the fields and period toggle in vertical orientation.\r\n * @cssprop --m3e-timepicker-dial-container-size - Size of the dial container.\r\n * @cssprop --m3e-timepicker-dial-container-shape - Corner radius of the dial container.\r\n * @cssprop --m3e-timepicker-dial-container-color - Background color of the dial container.\r\n * @cssprop --m3e-timepicker-dial-inset - Inset offset applied to the dial surface.\r\n * @cssprop --m3e-timepicker-dial-center-size - Size of the dial center.\r\n * @cssprop --m3e-timepicker-dial-handle-color - Color of the active handle.\r\n * @cssprop --m3e-timepicker-dial-handle-size - Size of the handle.\r\n * @cssprop --m3e-timepicker-dial-handle-disabled-color - Color of a disabled handle.\r\n * @cssprop --m3e-timepicker-dial-handle-disabled-opacity - Opacity of a disabled handle.\r\n * @cssprop --m3e-timepicker-dial-dial-inset - Inset applied to the handle area.\r\n * @cssprop --m3e-timepicker-dial-numeral-size - Size of the dial numerals.\r\n * @cssprop --m3e-timepicker-dial-numeral-color - Text color of inactive numerals.\r\n * @cssprop --m3e-timepicker-dial-numeral-shape - Corner radius of the numerals.\r\n * @cssprop --m3e-timepicker-dial-numeral-font-size - Font size of the outer numerals.\r\n * @cssprop --m3e-timepicker-dial-numeral-font-weight - Font weight of the outer numerals.\r\n * @cssprop --m3e-timepicker-dial-numeral-line-height - Line height of the outer numerals.\r\n * @cssprop --m3e-timepicker-dial-numeral-tracking - Letter spacing of the outer numerals.\r\n * @cssprop --m3e-timepicker-dial-inner-numeral-font-size - Font size of the inner numerals.\r\n * @cssprop --m3e-timepicker-dial-inner-numeral-font-weight - Font weight of the inner numerals.\r\n * @cssprop --m3e-timepicker-dial-inner-numeral-line-height - Line height of the inner numerals.\r\n * @cssprop --m3e-timepicker-dial-inner-numeral-tracking - Letter spacing of the inner numerals.\r\n * @cssprop --m3e-timepicker-dial-numeral-active-color - Color of active numerals.\r\n * @cssprop --m3e-timepicker-dial-numeral-disabled-color - Color of disabled numerals.\r\n * @cssprop --m3e-timepicker-dial-numeral-disabled-opacity - Opacity of disabled numerals.\r\n * @cssprop --m3e-timepicker-dial-handle-center-size - Size of the handle center indicator.\r\n */\r\n@customElement(\"m3e-timepicker\")\r\nexport class M3eTimepickerElement extends SuppressInitialAnimation(\r\n  ReconnectedCallback(AttachInternals(Role(LitElement, \"dialog\"))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      flex-direction: column;\r\n      margin: unset;\r\n      border: unset;\r\n      padding-block: var(--m3e-timepicker-container-padding-block, 0.75rem);\r\n      padding-inline: var(--m3e-timepicker-container-padding-inline, 1.75rem);\r\n      background-color: var(--m3e-timepicker-container-color, ${DesignToken.color.surfaceContainer});\r\n      box-shadow: var(--m3e-timepicker-container-elevation, ${DesignToken.elevation.level3});\r\n      opacity: 0;\r\n      display: none;\r\n    }\r\n    .headline {\r\n      color: var(--m3e-timepicker-headline-color, ${DesignToken.color.onSurfaceVariant});\r\n      font-size: var(--m3e-timepicker-headline-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(--m3e-timepicker-headline-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});\r\n      line-height: var(--m3e-timepicker-headline-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});\r\n      letter-spacing: var(--m3e-timepicker-headline-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n      margin-block-start: var(--m3e-timepicker-headline-top-space, 1rem);\r\n    }\r\n    .actions {\r\n      margin-block-start: var(--m3e-timepicker-actions-space, 1.5rem);\r\n      display: flex;\r\n      align-items: center;\r\n      column-gap: 0.5rem;\r\n    }\r\n    .spacer {\r\n      flex: 1 1 auto;\r\n    }\r\n    :host(:is(:state(--docked), :--docked)) {\r\n      position: absolute;\r\n      background-color: var(--m3e-timepicker-docked-container-color, ${DesignToken.color.surfaceContainer});\r\n      border-radius: var(--m3e-timepicker-docked-container-shape, ${DesignToken.shape.corner.large});\r\n    }\r\n    :host(:is(:state(--modal), :--modal)) {\r\n      position: fixed;\r\n      inset: 0;\r\n      margin: auto;\r\n      transform-origin: top;\r\n      background-color: var(--m3e-timepicker-modal-container-color, ${DesignToken.color.surfaceContainerHigh});\r\n      border-radius: var(--m3e-timepicker-modal-container-shape, ${DesignToken.shape.corner.extraLarge});\r\n    }\r\n    :host(:not(:is(:state(--no-animate), :--no-animate))) {\r\n      transition: ${unsafeCSS(\r\n        `opacity ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}, \r\n        transform ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard},\r\n        overlay ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete,\r\n        display ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n      )};\r\n    }\r\n    :host {\r\n      transform: scaleY(0.8);\r\n    }\r\n    :host(:popover-open) {\r\n      transform: scaleY(1);\r\n      display: inline-flex;\r\n      opacity: 1;\r\n    }\r\n    :host(:is(:state(--docked), :--docked))::backdrop {\r\n      background-color: transparent;\r\n    }\r\n    :host(:is(:state(--modal), :--modal))::backdrop {\r\n      background-color: color-mix(in srgb, var(--m3e-dialog-scrim-color, ${DesignToken.color.scrim}) 0%, transparent);\r\n      margin-inline-end: -20px;\r\n    }\r\n    :host(:is(:state(--modal), :--modal):not(:popover-open))::backdrop {\r\n      transition: ${unsafeCSS(\r\n        `background-color ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, \r\n        overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete,\r\n        visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n      )};\r\n    }\r\n    :host(:is(:state(--modal), :--modal):popover-open)::backdrop {\r\n      background-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-dialog-scrim-color, ${DesignToken.color.scrim}) var(--m3e-dialog-scrim-opacity, 32%),\r\n        transparent\r\n      );\r\n      transition: ${unsafeCSS(\r\n        `background-color ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard}, \r\n        overlay ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard} allow-discrete,\r\n        visibility ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n      )};\r\n    }\r\n    :host(:is(:state(--bottom), :--bottom)) {\r\n      transform-origin: top;\r\n    }\r\n    :host(:is(:state(--top), :--top)) {\r\n      transform-origin: bottom;\r\n    }\r\n    @starting-style {\r\n      :host(:popover-open) {\r\n        transform: scaleY(0.8);\r\n      }\r\n      :host(:is(:state(--modal), :--modal):popover-open)::backdrop {\r\n        background-color: color-mix(in srgb, var(--m3e-dialog-scrim-color, ${DesignToken.color.scrim}) 0%, transparent);\r\n      }\r\n    }\r\n    .base {\r\n      width: 100%;\r\n      height: 100%;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n    }\r\n    :host(:not(:is(:state(--horizontal), :--horizontal))) .base {\r\n      flex-direction: column;\r\n    }\r\n    .input {\r\n      margin-top: var(--m3e-timepicker-label-input-space, 1.25rem);\r\n    }\r\n    .dial-wrapper {\r\n      display: flex;\r\n      transition: ${unsafeCSS(\r\n        `opacity var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1}) ${DesignToken.motion.easing.standard}`,\r\n      )};\r\n    }\r\n    .dial-spacer,\r\n    .dial {\r\n      flex: none;\r\n    }\r\n    :host(:not([mode=\"dial\"])) .dial-wrapper {\r\n      opacity: 0;\r\n    }\r\n    :host([mode=\"dial\"]) .dial-wrapper {\r\n      opacity: 1;\r\n    }\r\n    :host(:not(:is(:state(--horizontal), :--horizontal))) .dial-wrapper {\r\n      flex-direction: column;\r\n    }\r\n    :host(:not(:is(:state(--horizontal), :--horizontal))) .dial-spacer {\r\n      height: var(--m3e-timepicker-vertical-input-dial-space, 2.25rem);\r\n    }\r\n    :host(:is(:state(--horizontal), :--horizontal)) .dial-spacer {\r\n      width: var(--m3e-timepicker-horizontal-input-dial-space, 3.25rem);\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      :host(:not(:is(:state(--no-animate), :--no-animate))) {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host {\r\n        background-color: Menu;\r\n        color: MenuText;\r\n        border: 1px solid CanvasText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ #closeTimeout = -1;\r\n  /** @private */ #date?: Date | null;\r\n\r\n  /** @private */ @state() private _open = false;\r\n\r\n  /** @private */ @query(\"m3e-timepicker-input\") private readonly _input!: M3eTimepickerInputElement;\r\n  /** @private */ @state() _invalid = false;\r\n  /** @private */ @state() private _variant?: Exclude<TimepickerVariant, \"auto\">;\r\n  /** @private */ @state() private _orientation?: Exclude<TimepickerOrientation, \"auto\">;\r\n  /** @private */ @state() private _mode?: TimepickerMode;\r\n\r\n  /** @private */ #breakpointUnobserve?: () => void;\r\n\r\n  /** @private */ #trigger?: HTMLElement;\r\n  /** @private */ #anchor?: HTMLElement;\r\n  /** @private */ #anchorCleanup?: () => void;\r\n  /** @private */ #anchorLastPosition?: { x: number; y: number; dir: Direction };\r\n\r\n  /** @private */ readonly #scrollLockController = new ScrollLockController(this);\r\n  /** @private */ readonly #inertController = new InertController(this);\r\n  /** @private */ readonly #documentClickHandler = (e: MouseEvent) => this.#handleDocumentClick(e);\r\n  /** @private */ readonly #documentKeyDownHandler = (e: KeyboardEvent) => this.#handleDocumentKeyDown(e);\r\n  /** @private */ readonly #toggleHandler = (e: ToggleEvent) => this.#handleToggle(e);\r\n\r\n  /**\r\n   * The appearance variant of the picker.\r\n   * @default \"docked\"\r\n   */\r\n  @property() variant: TimepickerVariant = \"docked\";\r\n\r\n  /**\r\n   * The mode in which to select time.\r\n   * @default \"dial\"\r\n   */\r\n  @property({ reflect: true }) mode: TimepickerMode = \"dial\";\r\n\r\n  /**\r\n   * The orientation of the picker.\r\n   * @default \"vertical\"\r\n   */\r\n  @property({ reflect: true }) orientation: TimepickerOrientation = \"vertical\";\r\n\r\n  /**\r\n   * The selected date.\r\n   * @default null\r\n   */\r\n  @property({ converter: dateConverter }) date: Date | null = null;\r\n\r\n  /**\r\n   * Whether to use a 12‑hour or 24‑hour clock.\r\n   * @default \"12\"\r\n   */\r\n  @property() format: TimepickerFormat = \"12\";\r\n\r\n  /**\r\n   * The minimum time that can be selected.\r\n   * @default null\r\n   */\r\n  @property({ attribute: \"min-time\", converter: timeConverter }) minTime: TimeParts | null = null;\r\n\r\n  /**\r\n   * The maximum time that can be selected.\r\n   * @default null\r\n   */\r\n  @property({ attribute: \"max-time\", converter: timeConverter }) maxTime: TimeParts | null = null;\r\n\r\n  /** A function used to determine whether a time cannot be selected. */\r\n  @property() blackoutTimes?: (time: TimeParts) => boolean;\r\n\r\n  /**\r\n   * Whether to hide the mode toggle button.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"hide-mode-toggle\", type: Boolean }) hideModeToggle = false;\r\n\r\n  /**\r\n   * Label given to the button used apply the selected date and close the picker.\r\n   * @default \"OK\"\r\n   */\r\n  @property({ attribute: \"confirm-label\" }) confirmLabel = \"OK\";\r\n\r\n  /**\r\n   * Label given to the button used discard the selected date and close the picker.\r\n   * @default \"Cancel\"\r\n   */\r\n  @property({ attribute: \"dismiss-label\" }) dismissLabel = \"Cancel\";\r\n\r\n  /**\r\n   * Label given to the the picker when in dial mode.\r\n   * @default \"Select time\"\r\n   */\r\n  @property({ attribute: \"dial-label\" }) dialLabel = \"Select time\";\r\n\r\n  /**\r\n   * Label given to the the picker when in input mode.\r\n   * @default \"Edit time\"\r\n   */\r\n  @property({ attribute: \"input-label\" }) inputLabel = \"Edit time\";\r\n\r\n  /**\r\n   * Label for the hour field.\r\n   * @default \"Hour\"\r\n   */\r\n  @property({ attribute: \"hour-label\" }) hourLabel = \"Hour\";\r\n\r\n  /**\r\n   * Label for the minute field.\r\n   * @default \"Minute\"\r\n   */\r\n  @property({ attribute: \"minute-label\" }) minuteLabel = \"Minute\";\r\n\r\n  /**\r\n   * The accessible label given to the mode toggle button.\r\n   * @default \"Toggle input picker\"\r\n   */\r\n  @property({ attribute: \"mode-toggle-label\" }) modeToggleLabel = \"Toggle input picker\";\r\n\r\n  /**\r\n   * The accessible label given to the period toggle.\r\n   * @default \"AM or PM\"\r\n   */\r\n  @property({ attribute: \"period-toggle-label\" }) periodToggleLabel = \"AM or PM\";\r\n\r\n  /** Whether the picker is open. */\r\n  get isOpen() {\r\n    return this.#trigger !== undefined;\r\n  }\r\n\r\n  /** The current variant applied to the picker. */\r\n  get currentVariant(): Exclude<TimepickerVariant, \"auto\"> {\r\n    return this._variant ?? (this.variant !== \"modal\" ? \"docked\" : \"modal\");\r\n  }\r\n\r\n  /** The current orientation applied to the picker. */\r\n  get currentOrientation(): Exclude<TimepickerOrientation, \"auto\"> {\r\n    return this._orientation ?? (this.orientation !== \"horizontal\" ? \"vertical\" : \"horizontal\");\r\n  }\r\n\r\n  /** The current input mode applied to the picker. */\r\n  get currentMode(): Exclude<TimepickerMode, \"auto\"> {\r\n    return this._mode ?? this.mode;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.setAttribute(\"popover\", \"manual\");\r\n    this.addEventListener(\"toggle\", this.#toggleHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this._variant = undefined;\r\n    this.#breakpointUnobserve?.();\r\n\r\n    this.#clearAnchoring();\r\n\r\n    deleteCustomState(this, \"--docked\");\r\n    deleteCustomState(this, \"--modal\");\r\n\r\n    this.removeEventListener(\"toggle\", this.#toggleHandler);\r\n    document.removeEventListener(\"click\", this.#documentClickHandler);\r\n    document.removeEventListener(\"keydown\", this.#documentKeyDownHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override reconnectedCallback(): void {\r\n    super.reconnectedCallback();\r\n\r\n    if (this.variant === \"auto\" || this.orientation === \"auto\") {\r\n      this.#initBreakpointMonitoring();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Opens the picker.\r\n   * @param {HTMLElement} trigger The element that triggered the picker.\r\n   * @param {HTMLElement | undefined} anchor The element used to position the picker.\r\n   * @returns {Promise<void>} A `Promise` that resolves when the picker is opened.\r\n   */\r\n  async show(trigger: HTMLElement, anchor?: HTMLElement): Promise<void> {\r\n    if (this.#trigger && this.#trigger !== trigger) {\r\n      this.hide();\r\n    }\r\n\r\n    clearTimeout(this.#closeTimeout);\r\n\r\n    if (this.currentVariant === \"modal\") {\r\n      this.#scrollLockController.lock();\r\n      this.#inertController.lock();\r\n    }\r\n\r\n    // Validate the current value prior to opening\r\n    this.#validate();\r\n\r\n    // The picker is rendered on demand\r\n    this._open = true;\r\n\r\n    // Wait for the picker to render\r\n    if (this.isUpdatePending) {\r\n      await this.updateComplete;\r\n    }\r\n\r\n    const input = this._input;\r\n    input.hour = this.date?.getHours() ?? null;\r\n    input.minute = this.date?.getMinutes() ?? null;\r\n    input.minTime = this.minTime;\r\n    input.maxTime = this.maxTime;\r\n    input.blackoutTimes = this.blackoutTimes;\r\n\r\n    if (input.isUpdatePending) {\r\n      await input.updateComplete;\r\n    }\r\n\r\n    this.#date = undefined;\r\n    this.#trigger = trigger;\r\n    this.#trigger.ariaExpanded = \"true\";\r\n    this.#anchor = anchor;\r\n\r\n    await this.#updatePosition();\r\n    this.showPopover();\r\n\r\n    document.addEventListener(\"click\", this.#documentClickHandler);\r\n    document.addEventListener(\"keydown\", this.#documentKeyDownHandler);\r\n  }\r\n\r\n  /**\r\n   * Hides the picker.\r\n   * @param {boolean} [restoreFocus=false] Whether to restore focus to the picker's trigger.\r\n   */\r\n  hide(restoreFocus: boolean = false): void {\r\n    if (!this.isOpen) return;\r\n\r\n    document.removeEventListener(\"click\", this.#documentClickHandler);\r\n    document.removeEventListener(\"keydown\", this.#documentKeyDownHandler);\r\n\r\n    if (this.currentVariant === \"modal\") {\r\n      this.#scrollLockController.unlock();\r\n      this.#inertController.unlock();\r\n    }\r\n\r\n    this.hidePopover();\r\n\r\n    if (this.#trigger) {\r\n      this.#trigger.ariaExpanded = \"false\";\r\n      if (restoreFocus) {\r\n        this.#trigger.focus();\r\n      }\r\n      this.#trigger = undefined;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Toggles the picker.\r\n   * @param {HTMLElement} trigger The element that triggered the picker.\r\n   * @param {HTMLElement | undefined} anchor The element used to position the picker.\r\n   * @returns {Promise<void>} A `Promise` that resolves when the picker is opened or closed.\r\n   */\r\n  async toggle(trigger: HTMLElement, anchor?: HTMLElement): Promise<void> {\r\n    if (this.#trigger) {\r\n      this.hide();\r\n    } else {\r\n      await this.show(trigger, anchor);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<m3e-focus-trap ?disabled=\"${!this._open}\">\r\n      ${this.#renderHeader()}${this.#renderPicker()}${this.#renderActions()}\r\n    </m3e-focus-trap>`;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  #renderHeader(): unknown {\r\n    return html`<div class=\"headline\">${this.currentMode === \"dial\" ? this.dialLabel : this.inputLabel}</div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderPicker(): unknown {\r\n    // Picker is rendered only when open\r\n    return this._open\r\n      ? html`<div class=\"base\">\r\n          <m3e-timepicker-input\r\n            class=\"input\"\r\n            for=\"${ifDefined(this.currentMode === \"input\" ? undefined : \"dial\")}\"\r\n            ?hide-labels=\"${this.currentMode === \"dial\"}\"\r\n            period-toggle-label=\"${this.periodToggleLabel}\"\r\n            hour-label=\"${this.hourLabel}\"\r\n            minute-label=\"${this.minuteLabel}\"\r\n            orientation=\"${this.currentOrientation === \"vertical\" ? \"horizontal\" : \"vertical\"}\"\r\n            format=\"${this.format}\"\r\n            @change=\"${this.#handleInputChange}\"\r\n          ></m3e-timepicker-input>\r\n\r\n          <m3e-collapsible\r\n            orientation=\"${this.currentOrientation === \"horizontal\" ? \"both\" : \"vertical\"}\"\r\n            ?open=\"${this.currentMode === \"dial\"}\"\r\n          >\r\n            <div class=\"dial-wrapper\">\r\n              <div class=\"dial-spacer\"></div>\r\n              <m3e-timepicker-dial id=\"dial\" class=\"dial\"></m3e-timepicker-dial>\r\n            </div>\r\n          </m3e-collapsible>\r\n        </div>`\r\n      : nothing;\r\n  }\r\n\r\n  /** @private */\r\n  #renderActions(): unknown {\r\n    return html`<div class=\"actions\">\r\n      ${this.#renderModeToggleButton()}\r\n      <div class=\"spacer\" aria-hidden=\"true\"></div>\r\n      <m3e-button @click=\"${this.#handleDismissClick}\">${this.dismissLabel}</m3e-button>\r\n      <m3e-button ?disabled=\"${this._invalid}\" @click=\"${this.#handleConfirmClick}\">${this.confirmLabel}</m3e-button>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderModeToggleButton(): unknown {\r\n    if (this.hideModeToggle) return nothing;\r\n    return html`<m3e-icon-button\r\n      aria-label=\"${this.modeToggleLabel}\"\r\n      aria-expanded=\"${this.currentMode === \"dial\"}\"\r\n      aria-controls=\"dial\"\r\n      @click=\"${this.#handleModeClick}\"\r\n    >\r\n      ${this.currentMode === \"dial\"\r\n        ? svg`<svg viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path\r\n                d=\"M160-200q-33 0-56.5-23.5T80-280v-400q0-33 23.5-56.5T160-760h640q33 0 56.5 23.5T880-680v400q0 33-23.5 56.5T800-200H160Zm0-80h640v-400H160v400Zm160-40h320v-80H320v80ZM200-440h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80ZM200-560h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80ZM160-280v-400 400Z\"\r\n              />\r\n            </svg>`\r\n        : svg`<svg viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path\r\n                d=\"m612-292 56-56-148-148v-184h-80v216l172 172ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-400Zm0 320q133 0 226.5-93.5T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160Z\"\r\n              />\r\n            </svg>`}\r\n    </m3e-icon-button>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleModeClick(): void {\r\n    this._mode = this.currentMode === \"dial\" ? \"input\" : \"dial\";\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override willUpdate(changedProperties: PropertyValues<this>): void {\r\n    super.willUpdate(changedProperties);\r\n\r\n    if (changedProperties.has(\"date\")) {\r\n      this.#clearSelectionState();\r\n    }\r\n    if (changedProperties.has(\"variant\") || changedProperties.has(\"orientation\")) {\r\n      this.#breakpointUnobserve?.();\r\n\r\n      if (this.variant !== \"auto\") {\r\n        this._variant = undefined;\r\n        this.#updateVariant();\r\n      }\r\n      if (this.orientation !== \"auto\") {\r\n        this._orientation = undefined;\r\n        this.#updateOrientation();\r\n      }\r\n\r\n      if (this.variant === \"auto\" || this.orientation === \"auto\") {\r\n        this.#initBreakpointMonitoring();\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleDocumentClick(e: MouseEvent): void {\r\n    if (this.isOpen && !e.composedPath().some((x) => x === this || x === this.#trigger)) {\r\n      this.hide();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleInputChange(e: Event): void {\r\n    const input = <M3eTimepickerInputElement>e.target;\r\n\r\n    if (input.hour === null || input.minute === null) {\r\n      this.#date = null;\r\n    } else {\r\n      this.#date = new Date(this.date ?? Date.now());\r\n      this.#date.setHours(input.hour);\r\n      this.#date.setMinutes(input.minute);\r\n    }\r\n\r\n    this.#validate();\r\n  }\r\n\r\n  /** @private */\r\n  #handleDismissClick(): void {\r\n    this.hide(true);\r\n  }\r\n\r\n  /** @private */\r\n  #handleConfirmClick(): void {\r\n    if (this.#date !== undefined) {\r\n      this.date = this.#date;\r\n    }\r\n\r\n    this.hide(true);\r\n    this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n  }\r\n\r\n  /** @private */\r\n  #handleDocumentKeyDown(e: KeyboardEvent): void {\r\n    if (this.isOpen && this.currentVariant === \"modal\" && e.key === \"Escape\" && !e.shiftKey && !e.ctrlKey) {\r\n      e.preventDefault();\r\n      this.hide(true);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleToggle(e: ToggleEvent): void {\r\n    if (e.newState === \"closed\") {\r\n      this.#clearSelectionState();\r\n      this.#anchorCleanup?.();\r\n      this.#anchorCleanup = undefined;\r\n      this.#anchorLastPosition = undefined;\r\n\r\n      clearTimeout(this.#closeTimeout);\r\n\r\n      if (!prefersReducedMotion()) {\r\n        this.#closeTimeout = setTimeout(() => (this._open = false), 100);\r\n      } else {\r\n        this._open = false;\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #initBreakpointMonitoring(): void {\r\n    this.#breakpointUnobserve = M3eBreakpointObserver.observe([Breakpoint.XSmall, Breakpoint.Small], (matches) => {\r\n      if (this.variant === \"auto\") {\r\n        this._variant = matches.get(Breakpoint.XSmall) || matches.get(Breakpoint.Small) ? \"modal\" : \"docked\";\r\n        this.#updateVariant();\r\n      }\r\n      if (this.orientation === \"auto\") {\r\n        this._orientation = matches.get(Breakpoint.Small) ? \"horizontal\" : \"vertical\";\r\n        this.#updateOrientation();\r\n      }\r\n    });\r\n  }\r\n\r\n  /** @private */\r\n  #updateVariant(): void {\r\n    switch (this.currentVariant) {\r\n      case \"docked\":\r\n        this.ariaModal = null;\r\n        deleteCustomState(this, \"--modal\");\r\n        addCustomState(this, \"--docked\");\r\n        this.#scrollLockController.unlock();\r\n        this.#inertController.unlock();\r\n        break;\r\n\r\n      case \"modal\":\r\n        this.ariaModal = \"true\";\r\n        deleteCustomState(this, \"--docked\");\r\n        addCustomState(this, \"--modal\");\r\n        if (this.isOpen) {\r\n          this.#scrollLockController.lock();\r\n          this.#inertController.lock();\r\n        }\r\n\r\n        break;\r\n    }\r\n\r\n    if (this.isOpen) {\r\n      this.#updatePosition();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #updateOrientation(): void {\r\n    switch (this.currentOrientation) {\r\n      case \"horizontal\":\r\n        addCustomState(this, \"--horizontal\");\r\n        break;\r\n\r\n      case \"vertical\":\r\n        deleteCustomState(this, \"--horizontal\");\r\n        break;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  async #updatePosition(): Promise<void> {\r\n    if (this.currentVariant === \"docked\" && this.#trigger) {\r\n      this.#anchorCleanup?.();\r\n      this.#anchorLastPosition = undefined;\r\n      this.#anchorCleanup = await positionAnchor(\r\n        this,\r\n        this.#anchor ?? this.#trigger,\r\n        {\r\n          position: \"bottom-start\",\r\n          inline: true,\r\n          flip: true,\r\n          shift: \"both\",\r\n        },\r\n        (x, y, position) => {\r\n          setCustomState(this, \"--top\", position.includes(\"top\"));\r\n          setCustomState(this, \"--bottom\", position.includes(\"bottom\"));\r\n\r\n          if (this.#anchorLastPosition?.dir !== M3eDirectionality.current || this.#anchorLastPosition?.x !== x) {\r\n            if (M3eDirectionality.current === \"rtl\") {\r\n              this.style.right = `${window.innerWidth - x - this.clientWidth}px`;\r\n              this.style.left = \"\";\r\n            } else {\r\n              this.style.left = `${x}px`;\r\n              this.style.right = \"\";\r\n            }\r\n          }\r\n\r\n          if (this.#anchorLastPosition?.y !== y) {\r\n            this.style.top = `${y}px`;\r\n          }\r\n\r\n          this.#anchorLastPosition = { x, y, dir: M3eDirectionality.current };\r\n        },\r\n      );\r\n    } else {\r\n      this.#clearAnchoring();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #clearAnchoring(): void {\r\n    this.#anchorCleanup?.();\r\n    this.#anchorCleanup = undefined;\r\n    this.#anchorLastPosition = undefined;\r\n    this.style.left = \"\";\r\n    this.style.right = \"\";\r\n    this.style.top = \"\";\r\n  }\r\n\r\n  /** @private */\r\n  #clearSelectionState(): void {\r\n    this.#date = undefined;\r\n  }\r\n\r\n  /** @private */\r\n  #validate(): void {\r\n    if (this.#date === undefined && this.date) {\r\n      // There is a value, but the value didn't change\r\n      this._invalid = false;\r\n      return;\r\n    }\r\n\r\n    if (this.#date === null || this.#date === undefined) {\r\n      this._invalid = true;\r\n      return;\r\n    }\r\n\r\n    const hour = this.#date.getHours();\r\n    const minute = this.#date.getMinutes();\r\n\r\n    if (this.minTime) {\r\n      if (hour < this.minTime.hour || (hour === this.minTime.hour && minute < this.minTime.minute)) {\r\n        this._invalid = true;\r\n        return;\r\n      }\r\n    }\r\n\r\n    if (this.maxTime) {\r\n      if (hour > this.maxTime.hour || (hour === this.maxTime.hour && minute > this.maxTime.minute)) {\r\n        this._invalid = true;\r\n        return;\r\n      }\r\n    }\r\n\r\n    if (this.blackoutTimes?.({ hour, minute })) {\r\n      this._invalid = true;\r\n      return;\r\n    }\r\n\r\n    this._invalid = false;\r\n  }\r\n}\r\n\r\ninterface M3eTimepickerElementEventMap extends HTMLElementEventMap {\r\n  beforetoggle: ToggleEvent;\r\n  toggle: ToggleEvent;\r\n}\r\n\r\nexport interface M3eTimepickerElement {\r\n  addEventListener<K extends keyof M3eTimepickerElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eTimepickerElement, ev: M3eTimepickerElementEventMap[K]) => void,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  addEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener<K extends keyof M3eTimepickerElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eTimepickerElement, ev: M3eTimepickerElementEventMap[K]) => void,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-timepicker\": M3eTimepickerElement;\r\n  }\r\n}\r\n","import { customElement, ActionElementBase, HtmlFor } from \"@m3e/web/core\";\r\nimport type { M3eFormFieldElement } from \"@m3e/web/form-field\";\r\n\r\nimport { M3eTimepickerElement } from \"./TimepickerElement\";\r\n\r\n/**\r\n * An element, nested within a clickable element, used to toggle a timepicker.\r\n * @tag m3e-timepicker-toggle\r\n */\r\n@customElement(\"m3e-timepicker-toggle\")\r\nexport class M3eTimepickerToggleElement extends HtmlFor(ActionElementBase) {\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    if (this.parentElement) {\r\n      this.parentElement.ariaHasPopup = \"dialog\";\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    if (this.parentElement) {\r\n      this.parentElement.ariaHasPopup = null;\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override _onClick(): void {\r\n    if (this.control instanceof M3eTimepickerElement && this.parentElement) {\r\n      this.control.toggle(this.parentElement, this.closest<M3eFormFieldElement>(\"m3e-form-field\") ?? undefined);\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-timepicker-toggle\": M3eTimepickerToggleElement;\r\n  }\r\n}\r\n"],"names":["TimepickerInputElementBase","LitElement","constructor","_TimepickerInputElementBase_hour","set","this","_TimepickerInputElementBase_minute","_TimepickerInputElementBase_format","format","view","period","minTime","maxTime","hour","__classPrivateFieldGet","value","__classPrivateFieldSet","Math","max","min","minute","hourOfPeriod","h","currentFormat","willUpdate","_changedProperties","super","has","Intl","DateTimeFormat","undefined","resolvedOptions","hour12","isHourDisabled","blackoutTimes","isMinuteDisabled","__decorate","property","type","Number","prototype","attribute","converter","timeConverter","M3eTimepickerDialElement","SuppressInitialAnimation","AttachInternals","Role","_M3eTimepickerDialElement_dragState","connectedCallback","ariaHidden","updated","_M3eTimepickerDialElement_instances","_M3eTimepickerDialElement_updateHand","call","render","html","_M3eTimepickerDialElement_handlePointerDown","_M3eTimepickerDialElement_handlePointerMove","_M3eTimepickerDialElement_handlePointerUp","_M3eTimepickerDialElement_renderHandle","_M3eTimepickerDialElement_renderHourFace","_M3eTimepickerDialElement_renderMinuteFace","nothing","use24","outer","Array","from","length","_","i","angle","active","disabled","_M3eTimepickerDialElement_renderNumeral","inner","classMap","dial","hidden","label","toString","padStart","numeral","safeStyleMap","hand","shadowRoot","querySelector","center","classList","toggle","style","setProperty","removeProperty","e","pointerType","button","currentTarget","HTMLElement","setPointerCapture","pointerId","add","timeChanged","cachedRect","getBoundingClientRect","cachedInnerInset","computeCssSize","_M3eTimepickerDialElement_changeHour","_M3eTimepickerDialElement_hourFromAngle","_M3eTimepickerDialElement_angleFromPointer","_M3eTimepickerDialElement_isPointerInsideInnerRing","_M3eTimepickerDialElement_changeMinute","_M3eTimepickerDialElement_minuteFromAngle","hasPointerCapture","releasePointerCapture","remove","dispatchEvent","Event","bubbles","CustomEvent","state","cx","left","width","cy","top","height","atan2","clientY","clientX","PI","_M3eTimepickerDialElement_radiusFromPointer","dx","dy","sqrt","index","round","styles","css","DesignToken","shape","corner","full","color","surfaceContainerHighest","unsafeCSS","motion","duration","medium1","easing","standard","primary","onSurface","onPrimary","short1","typescale","body","large","fontSize","fontWeight","lineHeight","tracking","small","customElement","M3eTimepickerInputPeriodToggleElement","orientation","navigator","language","_M3eTimepickerInputPeriodToggleElement_instances","_M3eTimepickerInputPeriodToggleElement_handleKeyDown","_M3eTimepickerInputPeriodToggleElement_handleClick","formatToParts","Date","find","p","defaultPrevented","changePeriod","prev","next","focus","key","preventDefault","M3eDirectionality","current","id","outline","short4","title","medium","tertiaryContainer","onTertiaryContainer","onSurfaceVariant","reflect","M3eTimepickerInputElement","HtmlFor","_M3eTimepickerInputElement_clockChangeHandler","_M3eTimepickerInputElement_instances","_M3eTimepickerInputElement_handleClockChange","_M3eTimepickerInputElement_clockViewChangeHandler","_M3eTimepickerInputElement_handleClockViewChange","hideLabels","hourLabel","minuteLabel","periodToggleLabel","attach","control","_M3eTimepickerInputElement_syncControl","addEventListener","detach","removeEventListener","_M3eTimepickerInputElement_renderField","_M3eTimepickerInputElement_handlePeriodChange","pad","n","String","invalid","valueText","date","setHours","field","selected","ifDefined","_M3eTimepickerInputElement_handleFieldFocus","_M3eTimepickerInputElement_handleFieldKeyDown","_M3eTimepickerInputElement_handleFieldInput","target","input","_M3eTimepickerInputElement_increment","ctrlKey","metaKey","test","isComposing","raw","replace","requestUpdate","isValid","v","atEnd","selectionStart","typedDigit","data","startsWith","candidate","parseInt","slice","setSelectionRange","by","wrap","step","sign","remaining","abs","skipStep","_M3eTimepickerInputElement_isDisabled","attempts","stopPropagation","display","onPrimaryContainer","primaryContainer","onErrorContainer","errorContainer","Boolean","M3eTimepickerElement","ReconnectedCallback","_M3eTimepickerElement_closeTimeout","_M3eTimepickerElement_date","_open","_invalid","_M3eTimepickerElement_breakpointUnobserve","_M3eTimepickerElement_trigger","_M3eTimepickerElement_anchor","_M3eTimepickerElement_anchorCleanup","_M3eTimepickerElement_anchorLastPosition","_M3eTimepickerElement_scrollLockController","ScrollLockController","_M3eTimepickerElement_inertController","InertController","_M3eTimepickerElement_documentClickHandler","_M3eTimepickerElement_documentKeyDownHandler","_M3eTimepickerElement_toggleHandler","variant","mode","hideModeToggle","confirmLabel","dismissLabel","dialLabel","inputLabel","modeToggleLabel","isOpen","currentVariant","_variant","currentOrientation","_orientation","currentMode","_mode","setAttribute","disconnectedCallback","_M3eTimepickerElement_instances","_M3eTimepickerElement_clearAnchoring","deleteCustomState","document","reconnectedCallback","_M3eTimepickerElement_initBreakpointMonitoring","show","trigger","anchor","hide","clearTimeout","lock","_M3eTimepickerElement_validate","isUpdatePending","updateComplete","_input","getHours","getMinutes","ariaExpanded","_M3eTimepickerElement_updatePosition","showPopover","restoreFocus","unlock","hidePopover","_M3eTimepickerElement_renderHeader","_M3eTimepickerElement_renderPicker","_M3eTimepickerElement_renderActions","changedProperties","_M3eTimepickerElement_clearSelectionState","_M3eTimepickerElement_updateVariant","_M3eTimepickerElement_updateOrientation","_M3eTimepickerElement_handleInputChange","_M3eTimepickerElement_renderModeToggleButton","_M3eTimepickerElement_handleDismissClick","_M3eTimepickerElement_handleConfirmClick","_M3eTimepickerElement_handleModeClick","svg","composedPath","some","x","now","setMinutes","shiftKey","newState","prefersReducedMotion","setTimeout","M3eBreakpointObserver","observe","Breakpoint","XSmall","Small","matches","get","ariaModal","addCustomState","async","positionAnchor","position","inline","flip","shift","y","setCustomState","includes","dir","right","window","innerWidth","clientWidth","surfaceContainer","elevation","level3","surfaceContainerHigh","extraLarge","short2","scrim","short3","long2","query","dateConverter","M3eTimepickerToggleElement","ActionElementBase","parentElement","ariaHasPopup","_onClick","closest"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m3e/web",
-  "version": "2.5.15",
+  "version": "2.6.0",
   "description": "Platform-native Web Components for M3E",
   "author": "matraic <matraic@yahoo.com>",
   "license": "MIT",
@@ -61,6 +61,7 @@
     "tabs",
     "textarea-autosize",
     "theme",
+    "timepicker",
     "toc",
     "toolbar",
     "tooltip",
@@ -288,6 +289,10 @@
       "types": "./dist/src/theme/index.d.ts",
       "default": "./dist/theme.js"
     },
+    "./timepicker": {
+      "types": "./dist/src/timepicker/index.d.ts",
+      "default": "./dist/timepicker.js"
+    },
     "./toc": {
       "types": "./dist/src/toc/index.d.ts",
       "default": "./dist/toc.js"