@luzmo/lucero 1.0.1-alpha.17 → 1.0.1-alpha.19

package/components/date-time-picker/index.cjs

@@ -15,944 +15,31 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const date = require("@internationalized/date");
-const number = require("@internationalized/number");
-const lit = require("lit");
-const decorators_js = require("lit/decorators.js");
-const classMap_js = require("lit/directives/class-map.js");
-const ifDefined_js = require("lit/directives/if-defined.js");
-const styleMap_js = require("lit/directives/style-map.js");
-const when_js = require("lit/directives/when.js");
-const focusable = require("../focusable-BPrTcZPd.cjs");
-const sizedMixin = require("../sized-mixin-UaTVa-AE.cjs");
-const icons = require("@luzmo/icons");
-require("../calendar/index.cjs");
-require("../icon/index.cjs");
-require("../overlay/index.cjs");
-require("../picker-button/index.cjs");
-require("../popover/index.cjs");
-const manageHelpText = require("../manage-help-text-BYx84zZR.cjs");
-const textField_module = require("../text-field.module-DIJdV_sA.cjs");
-const SegmentTypes = {
-  Year: "year",
-  Month: "month",
-  Day: "day",
-  Hour: "hour",
-  Minute: "minute",
-  Second: "second",
-  Millisecond: "fractionalSecond",
-  DayPeriod: "dayPeriod",
-  Literal: "literal"
-};
-const SegmentPlaceholders = {
-  [SegmentTypes.Year]: "––––",
-  [SegmentTypes.Month]: "––",
-  [SegmentTypes.Day]: "––",
-  [SegmentTypes.Hour]: "––",
-  [SegmentTypes.Minute]: "––",
-  [SegmentTypes.Second]: "––",
-  [SegmentTypes.Millisecond]: "–––",
-  [SegmentTypes.DayPeriod]: "––"
-};
-const Precisions = {
-  Day: "day",
-  Hour: "hour",
-  Minute: "minute",
-  Second: "second",
-  Millisecond: "millisecond"
-};
-const AM = 0;
-const PM = 12;
-const DEFAULT_LEAP_YEAR = 2e3;
-const MAX_DAYS_PER_MONTH = 31;
-function isNumber(value) {
-  return typeof value === "number";
-}
-function isZonedDateTime(date$1) {
-  return date$1 instanceof date.ZonedDateTime;
-}
-function isCalendarDateTime(date$1) {
-  return date$1 instanceof date.CalendarDateTime;
-}
-function isCalendarDate(date$1) {
-  return date$1 instanceof date.CalendarDate;
-}
-function convertHourTo24hFormat(hour, dayPeriod) {
-  return hour = hour % PM + dayPeriod;
-}
-function getDayPeriodModifier(hour) {
-  return hour >= PM ? PM : AM;
-}
-function equalSegmentValues(a, b) {
-  return a.length === b.length && a.every((value, index) => value === b[index]);
-}
-function dateValueToDate(dateValue) {
-  if (isCalendarDate(dateValue)) {
-    return new Date(dateValue.year, dateValue.month - 1, dateValue.day);
-  }
-  return new Date(
-    dateValue.year,
-    dateValue.month - 1,
-    dateValue.day,
-    dateValue.hour,
-    dateValue.minute,
-    dateValue.second,
-    dateValue.millisecond
-  );
-}
-class EditableSegment {
-  constructor(type, formatted, label) {
-    this.type = type;
-    this.formatted = formatted;
-    this.label = label;
-    this.placeholder = SegmentPlaceholders[type];
-  }
-  increment(_value) {
-    if (this.value === void 0) this.value = this.minValue;
-    else {
-      this.value = this.value + 1;
-      if (this.value > this.maxValue) this.value = this.minValue;
-    }
-  }
-  decrement(_value) {
-    if (this.value === void 0) this.value = this.maxValue;
-    else {
-      this.value = this.value - 1;
-      if (this.value < this.minValue) this.value = this.maxValue;
-    }
-  }
-  setValueFromDate(currentDate) {
-    if (this.type === "fractionalSecond") {
-      this.value = currentDate.millisecond;
-    } else if (this.type !== SegmentTypes.DayPeriod) {
-      this.value = currentDate[this.type];
-    }
-  }
-  clear() {
-    this.value = void 0;
-  }
-  handleInput(eventData, numberParser) {
-    const typedValue = numberParser.parse(eventData);
-    if (Number.isNaN(typedValue)) return;
-    const newValue = numberParser.parse(
-      `${this.value ?? ""}${typedValue}`
-    );
-    if (this.isInputValueCompliant(newValue)) {
-      this.value = newValue;
-      return;
-    }
-    if (this.isInputValueCompliant(typedValue)) this.value = typedValue;
-  }
-  isInputValueCompliant(value) {
-    const { minValue, maxValue } = this.inputValidationLimits;
-    return value >= minValue && value <= maxValue;
-  }
-  get inputValidationLimits() {
-    return {
-      minValue: this.minValue,
-      maxValue: this.maxValue
-    };
-  }
-  updateValueToLimits() {
-    if (this.value === void 0) return;
-    if (this.value < this.minValue) this.value = this.minValue;
-    if (this.value > this.maxValue) this.value = this.maxValue;
-  }
-}
-class YearSegment extends EditableSegment {
-  constructor(formatted, label) {
-    super(SegmentTypes.Year, formatted, label);
-    this.minValue = 1;
-    this.maxValue = 9999;
-  }
-  setLimits(currentDate) {
-    this.minValue = 1;
-    this.maxValue = currentDate.calendar.getYearsInEra(currentDate);
-    this.updateValueToLimits();
-  }
-  increment(currentDate) {
-    if (this.value === void 0) this.value = currentDate.year;
-    else super.increment();
-  }
-  decrement(currentDate) {
-    if (this.value === void 0) this.value = currentDate.year;
-    else super.decrement();
-  }
-  clear() {
-    if (this.value === void 0) return;
-    const newValue = Math.floor(this.value / 10);
-    this.value = newValue > 0 ? newValue : void 0;
-  }
-}
-class DateTimeSegments {
-  constructor(segments) {
-    this.segments = segments;
-  }
-  get all() {
-    return this.segments;
-  }
-  get editableValues() {
-    return this.all.filter((segment) => segment instanceof EditableSegment).map((segment) => segment.value);
-  }
-  get year() {
-    const yearSegment = this.getByType(SegmentTypes.Year);
-    if (yearSegment && yearSegment instanceof YearSegment) return yearSegment;
-    return void 0;
-  }
-  get month() {
-    const monthSegment = this.getByType(SegmentTypes.Month);
-    if (monthSegment) return monthSegment;
-    return;
-  }
-  get day() {
-    const daySegment = this.getByType(SegmentTypes.Day);
-    if (daySegment) return daySegment;
-    return;
-  }
-  get hour() {
-    const hourSegment = this.getByType(SegmentTypes.Hour);
-    if (hourSegment) return hourSegment;
-    return;
-  }
-  get minute() {
-    const minuteSegment = this.getByType(SegmentTypes.Minute);
-    if (minuteSegment) return minuteSegment;
-    return;
-  }
-  get second() {
-    const secondSegment = this.getByType(SegmentTypes.Second);
-    if (secondSegment) return secondSegment;
-    return;
-  }
-  get millisecond() {
-    const millisecondSegment = this.getByType(SegmentTypes.Millisecond);
-    if (millisecondSegment) return millisecondSegment;
-    return;
-  }
-  get dayPeriod() {
-    const dayPeriodSegment = this.getByType(SegmentTypes.DayPeriod);
-    if (dayPeriodSegment) return dayPeriodSegment;
-    return;
-  }
-  getByType(type) {
-    return this.segments.find(
-      (segment) => segment.type === type
-    );
-  }
-  /**
-   * Returns a `CalendarDate` object with the year, month and day values of the segments if they are all defined. The time values
-   * are checked and included based on the precision provided, returning a `CalendarDateTime` instead.
-   *
-   * @param precision - The precision to use when creating the date object
-   */
-  getFormattedDate(precision = Precisions.Day) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    const year = (_a = this.year) == null ? void 0 : _a.value;
-    const month = (_b = this.month) == null ? void 0 : _b.value;
-    const day = (_c = this.day) == null ? void 0 : _c.value;
-    if (!isNumber(year) || !isNumber(month) || !isNumber(day)) return;
-    if (precision === Precisions.Day) return new date.CalendarDate(year, month, day);
-    let hour = (_d = this.hour) == null ? void 0 : _d.value;
-    if (!isNumber(hour)) return;
-    if (this.dayPeriod) {
-      const dayPeriod = this.dayPeriod.value;
-      if (!isNumber(dayPeriod)) return;
-      hour = convertHourTo24hFormat(hour, dayPeriod);
-    }
-    if (precision === Precisions.Hour)
-      return new date.CalendarDateTime(year, month, day, hour);
-    const minute = (_e = this.minute) == null ? void 0 : _e.value;
-    if (!isNumber(minute)) return;
-    if (precision === Precisions.Minute)
-      return new date.CalendarDateTime(year, month, day, hour, minute);
-    const second = (_f = this.second) == null ? void 0 : _f.value;
-    if (!isNumber(second)) return;
-    if (precision === Precisions.Second)
-      return new date.CalendarDateTime(year, month, day, hour, minute, second);
-    const millisecond = (_g = this.millisecond) == null ? void 0 : _g.value;
-    if (!isNumber(millisecond)) return;
-    return new date.CalendarDateTime(
-      year,
-      month,
-      day,
-      hour,
-      minute,
-      second,
-      millisecond
-    );
-  }
-}
-class SegmentsFormatter {
-  constructor(dateFormatter, currentDate) {
-    this.dateFormatter = dateFormatter;
-    this.currentDate = currentDate;
-    this.numberFormatter = new number.NumberFormatter(
-      this.dateFormatter.resolvedOptions().locale,
-      { useGrouping: false }
-    );
-  }
-  /**
-   * Formats all the `DateTimeSegments` to have the formatted property based on the value property, according to the date formatter.
-   * @param segments - `DateTimeSegments` to format
-   * @returns Formatted DateTimeSegments
-   */
-  format(segments) {
-    if (!segments.year || !segments.month || !segments.day) return segments;
-    const dateInfo = this.getDateInfoWithDefaults(segments);
-    if (!dateInfo) return segments;
-    this.setSegmentsFormatted(segments, dateInfo);
-    this.padSegmentsFormatted(segments);
-    return segments;
-  }
-  setSegmentsFormatted(segments, dateInfo) {
-    var _a;
-    segments = new DateTimeSegments(segments.all);
-    const { year, month, day, hour, minute, second, millisecond } = dateInfo;
-    const date2 = new Date(
-      year,
-      month - 1,
-      day,
-      hour,
-      minute,
-      second,
-      millisecond
-    );
-    if (!segments.year) return;
-    segments.year.formatted = this.numberFormatter.format(year);
-    const segmentTypesToFormat = [
-      SegmentTypes.Month,
-      SegmentTypes.Day,
-      SegmentTypes.Hour,
-      SegmentTypes.Minute,
-      SegmentTypes.Second,
-      SegmentTypes.DayPeriod
-    ];
-    const formattedDateParts = this.dateFormatter.formatToParts(date2);
-    for (const segmentType of segmentTypesToFormat) {
-      const segment = segments[segmentType];
-      if (!segment) continue;
-      const formattedPart = (_a = formattedDateParts.find(
-        (part) => part.type === segmentType
-      )) == null ? void 0 : _a.value;
-      if (!formattedPart) continue;
-      segment.formatted = formattedPart;
-    }
-  }
-  padSegmentsFormatted(segments) {
-    if (!segments.hour) return;
-    const segmentTypesToPad = [
-      SegmentTypes.Month,
-      SegmentTypes.Day,
-      SegmentTypes.Hour,
-      SegmentTypes.Minute,
-      SegmentTypes.Second
-    ];
-    for (const segmentType of segmentTypesToPad) {
-      const segment = segments[segmentType];
-      if (!segment) continue;
-      segment.formatted = segment.formatted.padStart(
-        2,
-        this.numberFormatter.format(0)
-      );
-    }
-  }
-  getDateInfoWithDefaults(segments) {
-    var _a, _b, _c, _d, _e;
-    if (!segments.year || !segments.month || !segments.day) return;
-    const day = segments.day.value ?? date.getMinimumDayInMonth(this.currentDate);
-    const month = segments.month.value ?? date.getMinimumMonthInYear(this.currentDate);
-    const year = segments.year.value ?? DEFAULT_LEAP_YEAR;
-    const dayPeriod = (_a = segments.dayPeriod) == null ? void 0 : _a.value;
-    let hour = (_b = segments.hour) == null ? void 0 : _b.value;
-    if (!isNumber(hour)) {
-      hour = isNumber(dayPeriod) ? dayPeriod : this.currentDate.hour;
-    } else if (isNumber(dayPeriod)) {
-      hour = convertHourTo24hFormat(hour, dayPeriod);
-    }
-    const minute = ((_c = segments.minute) == null ? void 0 : _c.value) ?? this.currentDate.minute;
-    const second = ((_d = segments.second) == null ? void 0 : _d.value) ?? this.currentDate.second;
-    const millisecond = ((_e = segments.millisecond) == null ? void 0 : _e.value) ?? this.currentDate.millisecond;
-    return { year, month, day, hour, minute, second, millisecond };
-  }
-}
-class SegmentsModifier {
-  constructor(params) {
-    const { dateFormatter, segments, currentDate } = params;
-    this.segments = new DateTimeSegments(segments.all);
-    this.dateFormatter = dateFormatter;
-    this.currentDate = currentDate;
-  }
-  modify(segmentType) {
-    const segment = this.segments.getByType(segmentType);
-    if (!segment) return this.segments;
-    this.modifySegment(segment);
-    this.updateSegmentsLimits(segmentType);
-    const segmentsFormatter = new SegmentsFormatter(
-      this.dateFormatter,
-      this.currentDate
-    );
-    this.segments = segmentsFormatter.format(this.segments);
-    return this.segments;
-  }
-  updateSegmentsLimits(modifiedSegmentType) {
-    const changedYear = modifiedSegmentType === SegmentTypes.Year;
-    const changedMonth = modifiedSegmentType === SegmentTypes.Month;
-    const year = this.segments.year;
-    const month = this.segments.month;
-    const day = this.segments.day;
-    if (changedYear) {
-      month == null ? void 0 : month.setLimits(this.currentDate);
-      day == null ? void 0 : day.setLimits(this.currentDate, month == null ? void 0 : month.value, year == null ? void 0 : year.value);
-    }
-    if (changedMonth)
-      day == null ? void 0 : day.setLimits(this.currentDate, month == null ? void 0 : month.value, year == null ? void 0 : year.value);
-  }
-}
-class ClearModifier extends SegmentsModifier {
-  modifySegment(segment) {
-    segment.clear();
-  }
-}
-class DecrementModifier extends SegmentsModifier {
-  modifySegment(segment) {
-    segment.decrement(this.currentDate);
-  }
-}
-class IncrementModifier extends SegmentsModifier {
-  modifySegment(segment) {
-    segment.increment(this.currentDate);
-  }
-}
-class InputModifier extends SegmentsModifier {
-  constructor(params) {
-    const { dateFormatter, segments, currentDate } = params;
-    super({ dateFormatter, segments, currentDate });
-    this.eventData = params.eventData;
-    this.numberParser = params.numberParser;
-  }
-  modifySegment(segment) {
-    if (this.eventData === null) return;
-    segment.handleInput(this.eventData, this.numberParser);
-  }
-}
-class DaySegment extends EditableSegment {
-  constructor(formatted, label) {
-    super(SegmentTypes.Day, formatted, label);
-    this.minValue = 1;
-    this.maxValue = 31;
-  }
-  setLimits(currentDate, month, year) {
-    if (!isNumber(month)) {
-      this.minValue = 1;
-      this.maxValue = MAX_DAYS_PER_MONTH;
-      return;
-    }
-    if (!isNumber(year)) year = DEFAULT_LEAP_YEAR;
-    const dateToUse = new date.CalendarDate(year, month, 1);
-    this.maxValue = currentDate.calendar.getDaysInMonth(dateToUse);
-    this.minValue = date.getMinimumDayInMonth(dateToUse);
-    this.updateValueToLimits();
-  }
-}
-class MonthSegment extends EditableSegment {
-  constructor(formatted, label) {
-    super(SegmentTypes.Month, formatted, label);
-    this.minValue = 1;
-    this.maxValue = 12;
-  }
-  setLimits(currentDate) {
-    this.minValue = date.getMinimumMonthInYear(currentDate);
-    this.maxValue = currentDate.calendar.getMonthsInYear(currentDate);
-    this.updateValueToLimits();
-  }
-}
-class LiteralSegment {
-  constructor(formatted) {
-    this.formatted = formatted;
-    this.type = SegmentTypes.Literal;
-  }
-}
-class DayPeriodSegment extends EditableSegment {
-  constructor(formatted, label) {
-    super(SegmentTypes.DayPeriod, formatted, label);
-    this.minValue = AM;
-    this.maxValue = PM;
-    this.localizedMinValue = "AM";
-    this.localizedMaxValue = "PM";
-  }
-  toggleAmPm() {
-    this.value = this.value === AM ? PM : AM;
-  }
-  increment() {
-    if (this.value === void 0) this.value = this.minValue;
-    else this.toggleAmPm();
-  }
-  decrement() {
-    if (this.value === void 0) this.value = this.maxValue;
-    else this.toggleAmPm();
-  }
-  setValueFromDate(currentDate) {
-    this.value = getDayPeriodModifier(currentDate.hour);
-  }
-  handleInput(eventData) {
-    const charTypedIn = eventData.toLowerCase();
-    const isCharFromAM = this.localizedMinValue.toLowerCase().includes(charTypedIn);
-    const isCharFromPM = this.localizedMaxValue.toLowerCase().includes(charTypedIn);
-    if (isCharFromAM && isCharFromPM) return;
-    if (isCharFromAM) this.value = AM;
-    if (isCharFromPM) this.value = PM;
-    return;
-  }
-  setLocalizedLimits(dateFormatter) {
-    const amDate = new Date(0, 0, 0, this.minValue, 0);
-    const pmDate = new Date(0, 0, 0, this.maxValue, 0);
-    const [am, pm] = [amDate, pmDate].map(
-      this.getDayPeriodFromDate.bind(this, dateFormatter)
-    );
-    if (am) this.localizedMinValue = am;
-    if (pm) this.localizedMaxValue = pm;
-  }
-  getDayPeriodFromDate(dateFormatter, date2) {
-    var _a;
-    return (_a = dateFormatter.formatToParts(date2).find((part) => part.type === this.type)) == null ? void 0 : _a.value;
-  }
-}
-class HourSegment extends EditableSegment {
-  constructor(formatted, label) {
-    super(SegmentTypes.Hour, formatted, label);
-    this.minValue = 0;
-    this.maxValue = 23;
-  }
-  setLimits(is12HourClock) {
-    this.minValue = 0;
-    this.maxValue = 23;
-    if (is12HourClock) {
-      this.minValue = 0;
-      this.maxValue = 11;
-    }
-    this.updateValueToLimits();
-  }
-  setValueFromDate(currentDate, is12HourClock) {
-    if (is12HourClock)
-      this.value = currentDate.hour - getDayPeriodModifier(currentDate.hour);
-    else super.setValueFromDate(currentDate);
-  }
-  /**
-   * Returns the limits used to validate a user typed-in value.
-   *
-   * Different limits are needed when the user is typing in the hour segment and the clock is in 12-hour format due to the fact that
-   * the hour value of 0 should be displayed as 12. Therefore, in the 12h format, the user should be able to type in "12" but not "00",
-   * for the 00 time, which is represented by the value of 0 of the hour segment.
-   */
-  get inputValidationLimits() {
-    const isAmPm = this.maxValue === 11;
-    return {
-      minValue: isAmPm ? 1 : 0,
-      maxValue: isAmPm ? 12 : 23
-    };
-  }
-}
-class MillisecondSegment extends EditableSegment {
-  constructor(formatted, label) {
-    super(SegmentTypes.Millisecond, formatted, label);
-    this.minValue = 0;
-    this.maxValue = 999;
-  }
-}
-class MinuteSegment extends EditableSegment {
-  constructor(formatted, label) {
-    super(SegmentTypes.Minute, formatted, label);
-    this.minValue = 0;
-    this.maxValue = 59;
-  }
-}
-class SecondSegment extends EditableSegment {
-  constructor(formatted, label) {
-    super(SegmentTypes.Second, formatted, label);
-    this.minValue = 0;
-    this.maxValue = 59;
-  }
-}
-class SegmentsFactory {
-  constructor(dateFormatter) {
-    this.dateFormatter = dateFormatter;
-    const locale = this.dateFormatter.resolvedOptions().locale;
-    this.numberFormatter = new number.NumberFormatter(locale, {
-      useGrouping: false
-    });
-    this.dateTimeFieldDisplayNames = new Intl.DisplayNames([locale], {
-      type: "dateTimeField"
-    });
-  }
-  /**
-   * Creates the `DateTimeSegments` needed for the DateTimePicker
-   * @param currentDate - The date to create the segments from. This is used to set the limits and values of the segments.
-   * @param setValues - If true, the segments will have their values set from the currentDate. If false, the segments will have no values.
-   */
-  createSegments(currentDate, setValues = false) {
-    const date2 = dateValueToDate(currentDate);
-    const createdSegments = this.dateFormatter.formatToParts(date2).map((part) => {
-      const type = part.type;
-      let formatted = part.value;
-      if (type === "year")
-        formatted = this.numberFormatter.format(currentDate.year);
-      return this.createSegment(type, formatted);
-    });
-    const segments = new DateTimeSegments(createdSegments);
-    const year = segments.year;
-    const month = segments.month;
-    const day = segments.day;
-    year.setLimits(currentDate);
-    month.setLimits(currentDate);
-    if (setValues) {
-      year.setValueFromDate(currentDate);
-      month.setValueFromDate(currentDate);
-    }
-    day.setLimits(currentDate, month.value, year.value);
-    if (setValues) day.setValueFromDate(currentDate);
-    const hour = segments.hour;
-    const minute = segments.minute;
-    const second = segments.second;
-    const millisecond = segments.millisecond;
-    const dayPeriod = segments.dayPeriod;
-    if (dayPeriod) dayPeriod.setLocalizedLimits(this.dateFormatter);
-    if (!hour) return segments;
-    const is12HourFormat = Boolean(dayPeriod);
-    hour.setLimits(is12HourFormat);
-    if (setValues) {
-      hour.setValueFromDate(currentDate, is12HourFormat);
-      if (is12HourFormat) {
-        const dayPeriodSegment = segments.dayPeriod;
-        dayPeriodSegment.setValueFromDate(currentDate);
-      }
-      if (!minute) return segments;
-      minute.setValueFromDate(currentDate);
-      if (!second) return segments;
-      second.setValueFromDate(currentDate);
-      if (!millisecond) return segments;
-      millisecond.setValueFromDate(currentDate);
-    }
-    return segments;
-  }
-  createSegment(type, formatted) {
-    if (type === SegmentTypes.Literal) return new LiteralSegment(formatted);
-    const label = this.displayNameOfType(type);
-    switch (type) {
-      case SegmentTypes.Year: {
-        return new YearSegment(formatted, label);
-      }
-      case SegmentTypes.Month: {
-        return new MonthSegment(formatted, label);
-      }
-      case SegmentTypes.Day: {
-        return new DaySegment(formatted, label);
-      }
-      case SegmentTypes.Hour: {
-        return new HourSegment(formatted, label);
-      }
-      case SegmentTypes.Minute: {
-        return new MinuteSegment(formatted, label);
-      }
-      case SegmentTypes.Second: {
-        return new SecondSegment(formatted, label);
-      }
-      case SegmentTypes.Millisecond: {
-        return new MillisecondSegment(formatted, label);
-      }
-      case SegmentTypes.DayPeriod: {
-        return new DayPeriodSegment(formatted, label);
-      }
-    }
-  }
-  displayNameOfType(type) {
-    const label = type === "fractionalSecond" ? "millisecond" : this.dateTimeFieldDisplayNames.of(type);
-    if (!label) return "";
-    return label.charAt(0).toUpperCase() + label.slice(1);
-  }
-}
-const dateTimePickerStyles = '@charset "UTF-8";:host{font-family:var(--luzmo-font-family);--date-time-picker-border-radius: var( --luzmo-date-time-picker-border-radius, var(--luzmo-border-radius) );--date-time-picker-border-radius-quiet: var( --luzmo-date-time-picker-border-radius-quiet, 0 );--date-time-picker-border-width: var(--luzmo-border-width);--date-time-picker-button-border-color: var( --highcontrast-datepicker-pickerbutton-border-color, var( --luzmo-date-time-picker-pickerbutton-border-color, var(--luzmo-border-color) ) );--date-time-picker-button-border-color-focus: var( --highcontrast-datepicker-pickerbutton-border-color, var( --luzmo-date-time-picker-pickerbutton-border-color-focus, var(--luzmo-primary) ) );--date-time-picker-button-border-color-invalid: var( --highcontrast-datepicker-pickerbutton-border-color, var( --luzmo-date-time-picker-pickerbutton-border-color-invalid, var(--luzmo-negative-color) ) );--date-time-picker-button-width: calc( var(--date-time-picker-edge-to-disclosure-icon) * 2 + var(--date-time-picker-icon-size) );--date-time-picker-quiet-button-offset: var( --luzmo-date-time-picker-quiet-button-offset, var(--date-time-picker-text-to-visual) );--date-time-picker-icon-to-text: var(--date-time-picker-edge-to-text);--date-time-picker-button-width-quiet: calc( var(--date-time-picker-button-width) - var( --date-time-picker-quiet-button-offset ) );--date-time-picker-focus-ring-gap: var( --luzmo-date-time-picker-focus-ring-gap, var(--luzmo-indicator-gap) );--date-time-picker-focus-thickness: var( --luzmo-date-time-picker-focus-thickness, var(--luzmo-indicator-width) );--date-time-picker-focus-animation: var( --luzmo-date-time-picker-focus-animation, var(--luzmo-animation-duration) );--date-time-picker-focus-ring-width: var( --luzmo-date-time-picker-focus-ring-width, var(--luzmo-border-width) );--date-time-picker-focus-ring-color: var( --highcontrast-datepicker-focus-ring-color, var(--luzmo-date-time-picker-focus-ring-color, var(--luzmo-indicator-color)) );--date-time-picker-focus-line-gap: var( --luzmo-date-time-picker-focus-line-gap, var(--luzmo-spacing-2) );--date-time-picker-invalid-quiet-color: var( --luzmo-date-time-picker-invalid-quiet-color, var(--luzmo-negative-color) );--date-time-picker-quiet-border-color-hover: var( --luzmo-date-time-picker-quiet-border-color-hover, var(--luzmo-border-color-hover) );--date-time-picker-border-color-disabled: var( --luzmo-date-time-picker-border-color-disabled, var(--luzmo-border-color-disabled) );--date-time-picker-dash-font-size: var( --luzmo-date-time-picker-dash-font-size, var(--date-time-picker-dash-font-size) );--date-time-picker-dash-color: var( --highcontrast-datepicker-dash-color, var(--luzmo-date-time-picker-dash-color, var(--luzmo-font-color)) );--date-time-picker-range-dash-padding-top: var( --luzmo-date-time-picker-range-dash-padding-top, 0 );--date-time-picker-range-dash-margin-inline-start: var( --luzmo-date-time-picker-range-dash-margin-left, calc(var(--date-time-picker-dash-font-size) * -.5) );--date-time-picker-range-input-width-first: var( --luzmo-date-time-picker-range-input-width-first, calc( var(--date-time-picker-initial-width) - var( --date-time-picker-generic-padding ) * 2 ) );--date-time-picker-input-width-base: calc( var(--date-time-picker-range-input-width-first) + var(--date-time-picker-icon-size) );--date-time-picker-input-width: var( --luzmo-date-time-picker-input-width, calc( var(--date-time-picker-input-width-base) + var(--date-time-picker-initial-height) ) );--date-time-picker-range-input-width-quiet-first: var( --luzmo-date-time-picker-range-input-width-quiet-first, calc( var(--date-time-picker-width-quiet-first) + var(--date-time-picker-width-quiet-second) ) );--date-time-picker-input-width-quiet: var( --luzmo-date-time-picker-input-width-quiet, calc( var(--date-time-picker-range-input-width-quiet-first) + var(--date-time-picker-icon-size) + var(--date-time-picker-initial-height) ) );--date-time-picker-datetime-input-width-first: var( --luzmo-date-time-picker-datetime-input-width-first, calc( var(--date-time-picker-input-width-base) + var(--date-time-picker-datetime-width-first) ) );--date-time-picker-datetime-input-width: var( --luzmo-date-time-picker-datetime-input-width, calc( var(--date-time-picker-datetime-input-width-first) + var(--date-time-picker-icon-size) + var(--date-time-picker-initial-height) ) );--date-time-picker-datetime-quiet-input-width-first: var( --luzmo-date-time-picker-datetime-quiet-input-width-first, calc( var(--date-time-picker-input-width-base) + var(--date-time-picker-input-datetime-width) ) );--date-time-picker-datetime-quiet-input-width: var( --luzmo-date-time-picker-datetime-quiet-input-width, calc( var(--date-time-picker-datetime-quiet-input-width-first) + var(--date-time-picker-icon-size) + var(--date-time-picker-initial-height) ) );--date-time-picker-padding-inline-end: var( --luzmo-date-time-picker-padding-inline, calc( var(--date-time-picker-button-width) + var(--date-time-picker-edge-to-text) - var( --date-time-picker-border-width ) * 2 ) );--date-time-picker-padding-inline-end-quiet: var( --luzmo-date-time-picker-padding-inline-quiet, calc( var(--date-time-picker-button-width) + var(--date-time-picker-edge-to-text) - var( --date-time-picker-quiet-button-offset ) ) );--date-time-picker-padding-inline-end-invalid-quiet: var( --luzmo-date-time-picker-padding-inline-end-invalid-quiet, calc( var(--date-time-picker-button-width-quiet) + var(--date-time-picker-icon-size) + var(--date-time-picker-icon-to-text) ) );min-inline-size:var(--luzmo-date-time-picker-min-width, var(--date-time-picker-min-width));border-radius:var(--date-time-picker-border-radius);flex-flow:row;display:inline-flex;position:relative}:host([disabled]) luzmo-picker-button{cursor:default}:host([disabled]){--luzmo-date-time-picker-dash-color: var( --luzmo-date-time-picker-dash-color-disabled, var(--disabled-content-color) );--luzmo-text-field-border-color-disabled: transparent}:host([invalid]),:host([invalid]) #text-field .icon{--luzmo-text-field-icon-spacing-inline-end-invalid: calc( var(--date-time-picker-button-width) + var(--date-time-picker-invalid-icon-to-button) );--luzmo-text-field-icon-spacing-inline-end-quiet-invalid: calc( var(--date-time-picker-button-width-quiet) + var(--date-time-picker-invalid-icon-to-button-quiet) )}:host(:not([quiet])){inline-size:var(--luzmo-date-time-picker-width, var(--date-time-picker-width))}:host([quiet]){inline-size:var(--luzmo-date-time-picker-width-quiet, var(--date-time-picker-width-quiet, var(--date-time-picker-width)))}:host(:not([quiet],[disabled])){--luzmo-picker-button-border-color: var( --date-time-picker-button-border-color )}:host([focused]),:host([focused]:not([quiet],[disabled])){--luzmo-picker-button-border-color: var( --date-time-picker-button-border-color-focus )}:host([invalid]:not([quiet],[disabled])){--luzmo-picker-button-border-color: var( --date-time-picker-button-border-color-invalid )}.input{inline-size:100%;flex:1;padding-inline-end:var(--date-time-picker-padding-inline-end);border-color:var(--luzmo-date-time-picker-border-color, var(--datepicker-border-color))}:host .input:read-only{border-color:var(--luzmo-date-time-picker-border-color, var(--datepicker-border-color))}.input.luzmo-DatePicker-startField{border-inline-end:0;border-start-end-radius:0;border-end-end-radius:0;padding-inline-end:var(--luzmo-date-time-picker-generic-padding, var(--date-time-picker-generic-padding))}.input.luzmo-DatePicker-endField{border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0;padding-inline-start:var(--luzmo-date-time-picker-generic-padding, var(--date-time-picker-generic-padding))}luzmo-picker-button{cursor:pointer;position:absolute;inset-inline-end:0}.luzmo-DatePicker-rangeDash{color:var(--date-time-picker-dash-color);line-height:var(--luzmo-date-time-picker-dash-line-height, var(--date-time-picker-dash-line-height));flex:initial;inline-size:0;z-index:1;padding-block-start:var(--date-time-picker-range-dash-padding-top)}.luzmo-DatePicker-rangeDash:before{content:"–";margin-block:0;margin-inline:var(--date-time-picker-range-dash-margin-inline-start);text-align:center;vertical-align:middle;inline-size:var(--date-time-picker-dash-font-size);display:inline-block;overflow:hidden}:host([quiet]){--luzmo-date-time-picker-border-radius: var( --date-time-picker-border-radius-quiet );--luzmo-date-time-picker-padding-inline: var( --date-time-picker-padding-inline-end-quiet );--luzmo-picker-button-border-color-disabled: var( --date-time-picker-border-color-disabled );--luzmo-picker-button-background-color-hover-disabled: var( --date-time-picker-border-color-disabled )}:host([quiet][disabled]){--luzmo-text-field-border-color-disabled: var( --date-time-picker-border-color-disabled )}:host([quiet][invalid]) .input:not(.luzmo-DatePicker-startField){padding-inline-end:var(--date-time-picker-padding-inline-end-invalid-quiet)}@media (hover: hover){:host(:hover):not([focused],[disabled],[invalid]){--luzmo-picker-button-border-color: var( --date-time-picker-quiet-border-color-hover )}}:host([quiet][invalid]){--luzmo-picker-button-border-color: var( --date-time-picker-invalid-quiet-color )}:host([quiet]) luzmo-picker-button{inline-size:auto;inset-inline-end:calc(var(--date-time-picker-quiet-button-offset) * -1)}:host([quiet]) luzmo-picker-button:not(.is-open){--luzmo-picker-button-border-color-disabled: transparent}:host([quiet]) luzmo-picker-button:not(:disabled,.is-open){--luzmo-picker-button-background-color: transparent}.luzmo-DatePicker--range{--luzmo-date-time-picker-border-radius: var(--date-time-picker-border-radius)}.luzmo-DatePicker--range:after{pointer-events:none;content:"";margin:calc(var(--date-time-picker-focus-ring-gap) * -1);border-radius:calc(var(--date-time-picker-border-radius) + var(--date-time-picker-focus-ring-gap));transition:box-shadow var(--date-time-picker-focus-animation) ease-in-out,border-color var(--date-time-picker-focus-animation) ease-in-out;border-color:#0000;position:absolute;top:0;right:0;bottom:0;left:0}:host([focused]) .luzmo-DatePicker--range:not(.luzmo-DatePicker--quiet):after{box-shadow:0 0 0 var(--date-time-picker-focus-ring-width) var(--date-time-picker-focus-ring-color)}:host([focused]) .luzmo-DatePicker--range:not(.luzmo-DatePicker--quiet) #text-field:after{display:none}:host([quiet]) .luzmo-DatePicker--range{--luzmo-date-time-picker-border-radius: var( --date-time-picker-border-radius-quiet )}:host([quiet][focused]) .luzmo-DatePicker--range:after{box-shadow:none;border-block-end:var(--date-time-picker-focus-thickness) solid var(--date-time-picker-focus-ring-color);border-radius:0;margin:0;inset-block-end:calc(var(--date-time-picker-focus-line-gap) * -1)}:host([quiet]) .luzmo-DatePicker--range #text-field{min-inline-size:0;inline-size:var(--date-time-picker-input-width-quiet)}:host([quiet]) .luzmo-DatePicker--range #text-field:first-of-type{inline-size:var(--date-time-picker-range-input-width-quiet-first)}.luzmo-DatePicker--range.luzmo-DatePicker--datetimeRange #text-field{inline-size:var(--date-time-picker-datetime-input-width);min-inline-size:0}.luzmo-DatePicker--range.luzmo-DatePicker--datetimeRange #text-field:first-of-type{inline-size:var(--date-time-picker-datetime-input-width-first)}:host([quiet]) .luzmo-DatePicker--range.luzmo-DatePicker--datetimeRange #text-field{inline-size:var(--date-time-picker-datetime-quiet-input-width)}:host([quiet]) .luzmo-DatePicker--range.luzmo-DatePicker--datetimeRange #text-field:first-of-type{inline-size:var(--date-time-picker-datetime-quiet-input-width-first)}.luzmo-DatePicker--range #text-field{flex:initial;min-inline-size:0;inline-size:var(--date-time-picker-input-width)}.luzmo-DatePicker--range #text-field:first-of-type{inline-size:var(--date-time-picker-range-input-width-first)}@media (forced-colors: active){:host{--highcontrast-datepicker-dash-color: CanvasText;--highcontrast-datepicker-focus-ring-color: Highlight;--highcontrast-datepicker-pickerbutton-border-color: Highlight}:host([disabled]){--highcontrast-datepicker-dash-color: GrayText}:host([quiet][invalid]){--highcontrast-datepicker-pickerbutton-border-color: Highlight}}:host{--date-time-picker-width: auto;--date-time-picker-initial-height: var(--system-date-picker-initial-height);--date-time-picker-font-color-default: var(--luzmo-font-color);--datepicker-border-color: var(--luzmo-border-color);--date-time-picker-button-indicator-color: var(--luzmo-indicator-color);--text-field-focus-indicator-color: var(--luzmo-background-color-highlight);--date-time-picker-initial-width: 120px;--date-time-picker-min-width: 160px;--date-time-picker-calendar-padding: var(--luzmo-spacing-4);--date-time-picker-icon-size: 18px;--date-time-picker-dash-font-size: var(--luzmo-font-size);--date-time-picker-text-to-visual: var(--luzmo-spacing-3);--date-time-picker-edge-to-disclosure-icon: var(--luzmo-spacing-3);--date-time-picker-edge-to-text: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--date-time-picker-icon-to-text: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--date-time-picker-invalid-icon-to-button: var(--luzmo-spacing-3);--date-time-picker-generic-padding: var(--luzmo-spacing-4)}:host([size=s]){--date-time-picker-min-width: 140px;--date-time-picker-calendar-padding: var(--luzmo-spacing-3);--date-time-picker-icon-size: 16px;--date-time-picker-dash-font-size: var(--luzmo-font-size-s);--date-time-picker-text-to-visual: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--date-time-picker-edge-to-disclosure-icon: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--date-time-picker-edge-to-text: var(--luzmo-spacing-3);--date-time-picker-invalid-icon-to-button: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--date-time-picker-icon-to-text: var(--luzmo-spacing-3)}:host([invalid][size=s]){--text-field-icon-spacing-block-invalid: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) )}:host([size=m]){--date-time-picker-min-width: 160px;--date-time-picker-calendar-padding: var(--luzmo-spacing-4);--date-time-picker-icon-size: 18px;--date-time-picker-dash-font-size: var(--luzmo-font-size-m);--date-time-picker-text-to-visual: var(--luzmo-spacing-3);--date-time-picker-edge-to-disclosure-icon: var(--luzmo-spacing-3);--date-time-picker-edge-to-text: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--date-time-picker-invalid-icon-to-button: var(--luzmo-spacing-3);--date-time-picker-icon-to-text: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host([size=l]){--date-time-picker-min-width: 180px;--date-time-picker-calendar-padding: var(--luzmo-spacing-5);--date-time-picker-icon-size: 20px;--date-time-picker-dash-font-size: var(--luzmo-font-size-l);--date-time-picker-text-to-visual: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--date-time-picker-edge-to-disclosure-icon: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--date-time-picker-edge-to-text: var(--luzmo-spacing-4);--date-time-picker-invalid-icon-to-button: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--date-time-picker-icon-to-text: var(--luzmo-spacing-4)}:host([size=xl]){--date-time-picker-min-width: 200px;--date-time-picker-calendar-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--date-time-picker-icon-size: 22px;--date-time-picker-dash-font-size: var(--luzmo-font-size-xl);--date-time-picker-text-to-visual: var(--luzmo-spacing-4);--date-time-picker-edge-to-disclosure-icon: var(--luzmo-spacing-4);--date-time-picker-edge-to-text: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--date-time-picker-invalid-icon-to-button: var(--luzmo-spacing-4);--date-time-picker-icon-to-text: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) )}:host{--status-icon-size: var( --luzmo-text-field-icon-size-invalid, var(--text-field-icon-size-invalid) );--picker-button-size: var( --luzmo-text-field-height, var(--text-field-height) );--input-spacing: var( --luzmo-text-field-spacing-inline, var(--text-field-spacing-inline) );--input-border-width: var( --luzmo-text-field-border-width, var(--luzmo-border-width) );--text-to-icon: var( --luzmo-text-field-icon-spacing-inline-start-invalid, var(--text-field-icon-spacing-inline-start-invalid) );--date-time-picker-input-width: var(--date-time-picker-width);flex-wrap:wrap}:host #text-field{display:inline-block}:host #text-field .input,:host([quiet]) #text-field .input,:host([valid]) #text-field .input,:host([invalid]) #text-field .input{inline-size:100%}:host #text-field .input,:host([quiet]) #text-field .input{padding-inline-end:calc(var(--picker-button-size) + var(--input-spacing) - var(--input-border-width))}:host([valid]) #text-field .input,:host([invalid]) #text-field .input{inline-size:100%;padding-inline-end:calc(var(--status-icon-size) + var(--picker-button-size) + var(--input-spacing) - var(--input-border-width) + var(--text-to-icon))}@media (hover: hover){:host([invalid]) #text-field:hover .input,:host([focused][invalid]) .input:hover,:host([focused][invalid]) #text-field:hover .input{border-color:var(--highcontrast-text-field-border-color-invalid-default, var(--luzmo-text-field-border-color-invalid-default, var(--luzmo-negative-color-hover)))}}luzmo-picker-button:focus-visible{outline:none}luzmo-popover{overflow-y:auto}luzmo-popover .popover-content{padding:var(--luzmo-date-time-picker-calendar-padding, var(--date-time-picker-calendar-padding))}.input-content{display:flex;align-items:center;height:100%;overflow:auto hidden;scrollbar-width:none;line-height:normal}.input-content::-webkit-scrollbar{display:none;width:0;height:0}.literal-segment,.editable-segment{display:inline-block;color:var(--luzmo-date-time-picker-font-color-default, var(--date-time-picker-font-color-default))}.editable-segment{padding:0 .15em;font-variant-numeric:tabular-nums;text-align:end;white-space:nowrap;caret-color:transparent;outline:none}[dir=ltr] .editable-segment{text-align:start}.literal-segment{white-space:pre;user-select:none;-webkit-user-select:none}.is-placeholder,.is-placeholder+.literal-segment{color:var(--luzmo-font-color-disabled)}.editable-segment:focus-visible{color:var(--white);background-color:var(--highcontrast-text-field-focus-indicator-color, var(--luzmo-text-field-focus-indicator-color, var(--text-field-focus-indicator-color)))}.editable-segment::selection{background-color:transparent}';
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-class LuzmoDateTimePicker extends manageHelpText.ManageHelpText(
-  sizedMixin.SizedMixin(focusable.Focusable, {
-    validSizes: Object.values(sizedMixin.ElementSizes)
-  })
-) {
-  constructor() {
-    super();
-    this._precision = Precisions.Minute;
-    this.isUserSetPrecision = false;
-    this.invalid = false;
-    this.readonly = false;
-    this.quiet = false;
-    this.placement = "bottom";
-    this.language = "en";
-    this.labels = {
-      previous: "Previous",
-      next: "Next",
-      today: "Today",
-      selected: "Selected",
-      empty: "Empty",
-      calendar: "Calendar"
-    };
-    this.focused = false;
-    this.segments = new DateTimeSegments([]);
-    this.isCalendarOpen = false;
-    this._timeZone = this.timeZone ?? date.getLocalTimeZone();
-    this.cachedLocalTime = date.now(this._timeZone);
-    this.setNumberParser();
-    this.setDateFormatter();
-    this.setAriaDateFormatter();
-    this.addEventListener(
-      "focusin",
-      () => this.previousCommitedValue = this._value
-    );
-    this.addEventListener("focusout", () => this.commitValue());
-  }
-  /**
-   * The styles of the calendar
-   * @internal
-   */
-  static get styles() {
-    return [lit.unsafeCSS(dateTimePickerStyles), lit.unsafeCSS(textField_module.textFieldStyles)];
-  }
-  get precision() {
-    return this._precision;
-  }
-  set precision(value) {
-    this.isUserSetPrecision = true;
-    const oldValue = this._precision;
-    if (value === oldValue) return;
-    this._precision = value;
-    this.requestUpdate("precision", oldValue);
-  }
-  /**
-   * The language used to format the dates and weekdays.
-   * @internal
-   */
-  get _language() {
-    try {
-      if (this.language) {
-        const locale = new Intl.Locale(this.language);
-        return locale.language;
-      }
-      return "en";
-    } catch {
-      return "en";
-    }
-  }
-  /**
-   * The focus element of the component
-   * @internal
-   */
-  get focusElement() {
-    return this.firstEditableSegment;
-  }
-  /**
-   * The current date of the component
-   * @internal
-   */
-  get currentDate() {
-    if (this._value) return date.toZoned(this._value, this._timeZone);
-    return this.cachedLocalTime;
-  }
-  /**
-   * @return Whether the component's precision includes time segments (hour, minute, second, millisecond)
-   * @internal
-   */
-  get includesTime() {
-    const timePrecisions = [
-      Precisions.Hour,
-      Precisions.Minute,
-      Precisions.Second,
-      Precisions.Millisecond
-    ];
-    return timePrecisions.includes(this.precision);
-  }
-  /**
-   * Resets the component's value and segments
-   */
-  clear() {
-    this._value = void 0;
-    this.setSegments();
-  }
-  willUpdate(changedProperties) {
-    const changesValue = changedProperties.has("value");
-    const changesTimeZone = changedProperties.has("timeZone");
-    const changesMin = changedProperties.has("min");
-    const changesMax = changedProperties.has("max");
-    const changesLocale = changedProperties.has("language");
-    const changesDateFormat = changedProperties.has("dateFormat");
-    const changesDateSeparator = changedProperties.has("dateSeparator");
-    const changesPrecision = changedProperties.has("precision");
-    const changesSegments = changedProperties.has("segments");
-    const changesDisabled = changedProperties.has("disabled");
-    if (changesLocale) this.setNumberParser();
-    if (changesLocale || changesPrecision) {
-      this.setDateFormatter();
-      this.setAriaDateFormatter();
-    }
-    if (changesValue || changesMin || changesMax || changesTimeZone) {
-      this._value = this.value ? date.parseAbsolute(new Date(this.value).toISOString(), "UTC") : void 0;
-      this._min = this.min ? date.parseAbsolute(new Date(this.min).toISOString(), "UTC") : void 0;
-      this._max = this.max ? date.parseAbsolute(new Date(this.max).toISOString(), "UTC") : void 0;
-      const mostSpecificDateValue = this.mostSpecificDateValue;
-      if (mostSpecificDateValue) {
-        this.convertDatePropsToMatch(mostSpecificDateValue);
-        this.checkDatePropsCompliance(changesMin || changesMax);
-        this.updateDateProps();
-        this.updateDefaultPrecision();
-      }
-    }
-    if (changesValue || changesLocale || changesPrecision || changesDateFormat || changesTimeZone || changesDateSeparator)
-      this.setSegments();
-    if (changesSegments) this.setValueFromSegments();
-    if (changesDisabled && this.isCalendarOpen) this.isCalendarOpen = false;
-    const selectedDateLabel = this._value && this.labels.selected + ": " + this.ariaDateFormatter.format(dateValueToDate(this._value));
-    this.setAttribute("aria-label", selectedDateLabel ?? this.labels.empty);
-  }
-  /**
-   * Computes the component's most precise date property (min, max or value) or undefined if none is defined.
-   * The order of precedence is: ZonedDateTime, CalendarDateTime, CalendarDate.
-   * @internal
-   */
-  get mostSpecificDateValue() {
-    const dateValuesDefined = [this._value, this._min, this._max].filter(
-      (date2) => date2 !== void 0
-    );
-    if (dateValuesDefined.length === 0) return;
-    const zonedDateTimes = dateValuesDefined.filter((d) => isZonedDateTime(d));
-    if (zonedDateTimes.length > 0) return zonedDateTimes[0];
-    const dateTimes = dateValuesDefined.filter((d) => isCalendarDateTime(d));
-    if (dateTimes.length > 0) return dateTimes[0];
-    const mostSpecificDate = dateValuesDefined.find((d) => isCalendarDate(d));
-    return mostSpecificDate;
-  }
-  /**
-   * Converts the DateTimePicker's date properties (min, max and value) to match the provided date's type.
-   *
-   * @param dateValue - The date value to be used as a reference for the conversion
-   */
-  convertDatePropsToMatch(dateValue) {
-    if (isZonedDateTime(dateValue)) {
-      this._timeZone = this.timeZone ?? dateValue.timeZone;
-      this._value = this._value && date.toZoned(this._value, this._timeZone);
-      this._min = this._min && date.toZoned(this._min, this._timeZone);
-      this._max = this._max && date.toZoned(this._max, this._timeZone);
-      return;
-    }
-    this._timeZone = this.timeZone ?? date.getLocalTimeZone();
-    if (isCalendarDateTime(dateValue)) {
-      this._value = this._value && date.toCalendarDateTime(this._value);
-      this._min = this._min && date.toCalendarDateTime(this._min);
-      this._max = this._max && date.toCalendarDateTime(this._max);
-      return;
-    }
-    this._value = this._value && date.toCalendarDate(this._value);
-    this._min = this._min && date.toCalendarDate(this._min);
-    this._max = this._max && date.toCalendarDate(this._max);
-  }
-  /**
-   * Validates the component's date properties (min, max and value) compliance with one another.
-   * If the [min, max] constraint interval is invalid, both properties are reset.
-   * If the value is not within the [min, max] (valid) interval, it is reset.
-   *
-   * @param checkInterval - Whether to check the [min, max] interval
-   */
-  checkDatePropsCompliance(checkInterval) {
-    if (checkInterval && this._min && this._max) {
-      const isValidInterval = this._min.compare(this._max) < 0;
-      if (!isValidInterval) {
-        console.warn(
-          this,
-          `<${this.localName}> expects the 'min' to be less than 'max'. Please ensure that 'min' property's date is earlier than 'max' property's date.`
-        );
-        this._min = void 0;
-        this._max = void 0;
-      }
-    }
-    if (this.isNonCompliantValue()) {
-      console.warn(
-        this,
-        `<${this.localName}> expects the preselected value to comply with the min and max constraints. Please ensure that 'value' property's date is in between the dates for the 'min' and 'max' properties.`
-      );
-      this._value = void 0;
-    }
-    if (!this._min && !this._max && !this._value)
-      this._timeZone = date.getLocalTimeZone();
-  }
-  isNonCompliantValue() {
-    if (this._value === void 0) return false;
-    return Boolean(
-      this._min && this._value.compare(this._min) < 0 || this._max && this._value.compare(this._max) > 0
-    );
-  }
-  /**
-   * Update the component's date properties' types to include the provided precision.
-   */
-  updateDateProps() {
-    const mostSpecificDateValue = this.mostSpecificDateValue;
-    if (!mostSpecificDateValue || !this.isUserSetPrecision) return;
-    const shouldConvertToDateTime = this.includesTime && isCalendarDate(mostSpecificDateValue);
-    if (shouldConvertToDateTime)
-      this.convertDatePropsToMatch(date.toCalendarDateTime(mostSpecificDateValue));
-  }
-  /**
-   * Changes the component's default precision according to the most specific date property (min, max or value).
-   */
-  updateDefaultPrecision() {
-    if (this.isUserSetPrecision) return;
-    const mostSpecificDateValue = this.mostSpecificDateValue;
-    if (!mostSpecificDateValue) return;
-    this._precision = isCalendarDate(mostSpecificDateValue) ? Precisions.Day : Precisions.Minute;
-  }
-  render() {
-    return lit.html`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../index-hqVbNKYy.cjs"),R=require("../NumberParser-Dik4a0h-.cjs"),u=require("../base-Cy0MQrPT.cjs"),P=require("../state-vf0PJN3_.cjs"),A=require("../query-BL-TJj7K.cjs"),j=require("../class-map-D-Y-hsN5.cjs"),S=require("../if-defined-DaXWqfzc.cjs"),W=require("../style-map-DuMd5xlY.cjs"),L=require("../when-CDZyJPvd.cjs"),G=require("../focusable-B_KwfEec.cjs"),I=require("../sized-mixin-WPHH0a_D.cjs"),O=require("../luzmo-icons-CtA-TJPd.cjs");require("../icon/index.cjs");require("../overlay/index.cjs");require("../picker-button/index.cjs");require("../popover/index.cjs");const K=require("../manage-help-text-DNqdEkTA.cjs"),B=require("../NumberFormatter-DewVDY5w.cjs"),X=require("../text-field.module-DXhFA9G-.cjs"),o={Year:"year",Month:"month",Day:"day",Hour:"hour",Minute:"minute",Second:"second",Millisecond:"fractionalSecond",DayPeriod:"dayPeriod",Literal:"literal"},J={[o.Year]:"––––",[o.Month]:"––",[o.Day]:"––",[o.Hour]:"––",[o.Minute]:"––",[o.Second]:"––",[o.Millisecond]:"–––",[o.DayPeriod]:"––"},v={Day:"day",Hour:"hour",Minute:"minute",Second:"second",Millisecond:"millisecond"},V=0,D=12,H=2e3,Q=31;function x(n){return typeof n=="number"}function _(n){return n instanceof c.$35ea8db9cb2ccb90$export$d3b7288e7994edea}function C(n){return n instanceof c.$35ea8db9cb2ccb90$export$ca871e8dbb80966f}function F(n){return n instanceof c.$35ea8db9cb2ccb90$export$99faa760c7908e4f}function N(n,e){return n=n%D+e}function Z(n){return n>=D?D:V}function E(n,e){return n.length===e.length&&n.every((t,i)=>t===e[i])}function U(n){return F(n)?new Date(n.year,n.month-1,n.day):new Date(n.year,n.month-1,n.day,n.hour,n.minute,n.second,n.millisecond)}class ${constructor(e,t,i){this.type=e,this.formatted=t,this.label=i,this.placeholder=J[e]}increment(e){this.value===void 0?this.value=this.minValue:(this.value=this.value+1,this.value>this.maxValue&&(this.value=this.minValue))}decrement(e){this.value===void 0?this.value=this.maxValue:(this.value=this.value-1,this.value<this.minValue&&(this.value=this.maxValue))}setValueFromDate(e){this.type==="fractionalSecond"?this.value=e.millisecond:this.type!==o.DayPeriod&&(this.value=e[this.type])}clear(){this.value=void 0}handleInput(e,t){const i=t.parse(e);if(Number.isNaN(i))return;const a=t.parse(`${this.value??""}${i}`);if(this.isInputValueCompliant(a)){this.value=a;return}this.isInputValueCompliant(i)&&(this.value=i)}isInputValueCompliant(e){const{minValue:t,maxValue:i}=this.inputValidationLimits;return e>=t&&e<=i}get inputValidationLimits(){return{minValue:this.minValue,maxValue:this.maxValue}}updateValueToLimits(){this.value!==void 0&&(this.value<this.minValue&&(this.value=this.minValue),this.value>this.maxValue&&(this.value=this.maxValue))}}class Y extends ${constructor(e,t){super(o.Year,e,t),this.minValue=1,this.maxValue=9999}setLimits(e){this.minValue=1,this.maxValue=e.calendar.getYearsInEra(e),this.updateValueToLimits()}increment(e){this.value===void 0?this.value=e.year:super.increment()}decrement(e){this.value===void 0?this.value=e.year:super.decrement()}clear(){if(this.value===void 0)return;const e=Math.floor(this.value/10);this.value=e>0?e:void 0}}class M{constructor(e){this.segments=e}get all(){return this.segments}get editableValues(){return this.all.filter(e=>e instanceof $).map(e=>e.value)}get year(){const e=this.getByType(o.Year);if(e&&e instanceof Y)return e}get month(){const e=this.getByType(o.Month);if(e)return e}get day(){const e=this.getByType(o.Day);if(e)return e}get hour(){const e=this.getByType(o.Hour);if(e)return e}get minute(){const e=this.getByType(o.Minute);if(e)return e}get second(){const e=this.getByType(o.Second);if(e)return e}get millisecond(){const e=this.getByType(o.Millisecond);if(e)return e}get dayPeriod(){const e=this.getByType(o.DayPeriod);if(e)return e}getByType(e){return this.segments.find(t=>t.type===e)}getFormattedDate(e=v.Day){var d,g,b,k,f,z,y;const t=(d=this.year)==null?void 0:d.value,i=(g=this.month)==null?void 0:g.value,a=(b=this.day)==null?void 0:b.value;if(!x(t)||!x(i)||!x(a))return;if(e===v.Day)return new c.$35ea8db9cb2ccb90$export$99faa760c7908e4f(t,i,a);let r=(k=this.hour)==null?void 0:k.value;if(!x(r))return;if(this.dayPeriod){const w=this.dayPeriod.value;if(!x(w))return;r=N(r,w)}if(e===v.Hour)return new c.$35ea8db9cb2ccb90$export$ca871e8dbb80966f(t,i,a,r);const s=(f=this.minute)==null?void 0:f.value;if(!x(s))return;if(e===v.Minute)return new c.$35ea8db9cb2ccb90$export$ca871e8dbb80966f(t,i,a,r,s);const l=(z=this.second)==null?void 0:z.value;if(!x(l))return;if(e===v.Second)return new c.$35ea8db9cb2ccb90$export$ca871e8dbb80966f(t,i,a,r,s,l);const h=(y=this.millisecond)==null?void 0:y.value;if(x(h))return new c.$35ea8db9cb2ccb90$export$ca871e8dbb80966f(t,i,a,r,s,l,h)}}class ee{constructor(e,t){this.dateFormatter=e,this.currentDate=t,this.numberFormatter=new B.$488c6ddbf4ef74c2$export$cc77c4ff7e8673c5(this.dateFormatter.resolvedOptions().locale,{useGrouping:!1})}format(e){if(!e.year||!e.month||!e.day)return e;const t=this.getDateInfoWithDefaults(e);return t&&(this.setSegmentsFormatted(e,t),this.padSegmentsFormatted(e)),e}setSegmentsFormatted(e,t){var f;e=new M(e.all);const{year:i,month:a,day:r,hour:s,minute:l,second:h,millisecond:d}=t,g=new Date(i,a-1,r,s,l,h,d);if(!e.year)return;e.year.formatted=this.numberFormatter.format(i);const b=[o.Month,o.Day,o.Hour,o.Minute,o.Second,o.DayPeriod],k=this.dateFormatter.formatToParts(g);for(const z of b){const y=e[z];if(!y)continue;const w=(f=k.find(q=>q.type===z))==null?void 0:f.value;w&&(y.formatted=w)}}padSegmentsFormatted(e){if(!e.hour)return;const t=[o.Month,o.Day,o.Hour,o.Minute,o.Second];for(const i of t){const a=e[i];a&&(a.formatted=a.formatted.padStart(2,this.numberFormatter.format(0)))}}getDateInfoWithDefaults(e){var g,b,k,f,z;if(!e.year||!e.month||!e.day)return;const t=e.day.value??c.$14e0f24ef4ac5c92$export$b2f4953d301981d5(this.currentDate),i=e.month.value??c.$14e0f24ef4ac5c92$export$5412ac11713b72ad(this.currentDate),a=e.year.value??H,r=(g=e.dayPeriod)==null?void 0:g.value;let s=(b=e.hour)==null?void 0:b.value;x(s)?x(r)&&(s=N(s,r)):s=x(r)?r:this.currentDate.hour;const l=((k=e.minute)==null?void 0:k.value)??this.currentDate.minute,h=((f=e.second)==null?void 0:f.value)??this.currentDate.second,d=((z=e.millisecond)==null?void 0:z.value)??this.currentDate.millisecond;return{year:a,month:i,day:t,hour:s,minute:l,second:h,millisecond:d}}}class T{constructor(e){const{dateFormatter:t,segments:i,currentDate:a}=e;this.segments=new M(i.all),this.dateFormatter=t,this.currentDate=a}modify(e){const t=this.segments.getByType(e);if(!t)return this.segments;this.modifySegment(t),this.updateSegmentsLimits(e);const i=new ee(this.dateFormatter,this.currentDate);return this.segments=i.format(this.segments),this.segments}updateSegmentsLimits(e){const t=e===o.Year,i=e===o.Month,a=this.segments.year,r=this.segments.month,s=this.segments.day;t&&(r==null||r.setLimits(this.currentDate),s==null||s.setLimits(this.currentDate,r==null?void 0:r.value,a==null?void 0:a.value)),i&&(s==null||s.setLimits(this.currentDate,r==null?void 0:r.value,a==null?void 0:a.value))}}class te extends T{modifySegment(e){e.clear()}}class ie extends T{modifySegment(e){e.decrement(this.currentDate)}}class ae extends T{modifySegment(e){e.increment(this.currentDate)}}class re extends T{constructor(e){const{dateFormatter:t,segments:i,currentDate:a}=e;super({dateFormatter:t,segments:i,currentDate:a}),this.eventData=e.eventData,this.numberParser=e.numberParser}modifySegment(e){this.eventData!==null&&e.handleInput(this.eventData,this.numberParser)}}class oe extends ${constructor(e,t){super(o.Day,e,t),this.minValue=1,this.maxValue=31}setLimits(e,t,i){if(!x(t)){this.minValue=1,this.maxValue=Q;return}x(i)||(i=H);const a=new c.$35ea8db9cb2ccb90$export$99faa760c7908e4f(i,t,1);this.maxValue=e.calendar.getDaysInMonth(a),this.minValue=c.$14e0f24ef4ac5c92$export$b2f4953d301981d5(a),this.updateValueToLimits()}}class ne extends ${constructor(e,t){super(o.Month,e,t),this.minValue=1,this.maxValue=12}setLimits(e){this.minValue=c.$14e0f24ef4ac5c92$export$5412ac11713b72ad(e),this.maxValue=e.calendar.getMonthsInYear(e),this.updateValueToLimits()}}class se{constructor(e){this.formatted=e,this.type=o.Literal}}class ce extends ${constructor(e,t){super(o.DayPeriod,e,t),this.minValue=V,this.maxValue=D,this.localizedMinValue="AM",this.localizedMaxValue="PM"}toggleAmPm(){this.value=this.value===V?D:V}increment(){this.value===void 0?this.value=this.minValue:this.toggleAmPm()}decrement(){this.value===void 0?this.value=this.maxValue:this.toggleAmPm()}setValueFromDate(e){this.value=Z(e.hour)}handleInput(e){const t=e.toLowerCase(),i=this.localizedMinValue.toLowerCase().includes(t),a=this.localizedMaxValue.toLowerCase().includes(t);i&&a||(i&&(this.value=V),a&&(this.value=D))}setLocalizedLimits(e){const t=new Date(0,0,0,this.minValue,0),i=new Date(0,0,0,this.maxValue,0),[a,r]=[t,i].map(this.getDayPeriodFromDate.bind(this,e));a&&(this.localizedMinValue=a),r&&(this.localizedMaxValue=r)}getDayPeriodFromDate(e,t){var i;return(i=e.formatToParts(t).find(a=>a.type===this.type))==null?void 0:i.value}}class le extends ${constructor(e,t){super(o.Hour,e,t),this.minValue=0,this.maxValue=23}setLimits(e){this.minValue=0,this.maxValue=23,e&&(this.minValue=0,this.maxValue=11),this.updateValueToLimits()}setValueFromDate(e,t){t?this.value=e.hour-Z(e.hour):super.setValueFromDate(e)}get inputValidationLimits(){const e=this.maxValue===11;return{minValue:e?1:0,maxValue:e?12:23}}}class de extends ${constructor(e,t){super(o.Millisecond,e,t),this.minValue=0,this.maxValue=999}}class ue extends ${constructor(e,t){super(o.Minute,e,t),this.minValue=0,this.maxValue=59}}class me extends ${constructor(e,t){super(o.Second,e,t),this.minValue=0,this.maxValue=59}}class he{constructor(e){this.dateFormatter=e;const t=this.dateFormatter.resolvedOptions().locale;this.numberFormatter=new B.$488c6ddbf4ef74c2$export$cc77c4ff7e8673c5(t,{useGrouping:!1}),this.dateTimeFieldDisplayNames=new Intl.DisplayNames([t],{type:"dateTimeField"})}createSegments(e,t=!1){const i=U(e),a=this.dateFormatter.formatToParts(i).map(y=>{const w=y.type;let q=y.value;return w==="year"&&(q=this.numberFormatter.format(e.year)),this.createSegment(w,q)}),r=new M(a),s=r.year,l=r.month,h=r.day;s.setLimits(e),l.setLimits(e),t&&(s.setValueFromDate(e),l.setValueFromDate(e)),h.setLimits(e,l.value,s.value),t&&h.setValueFromDate(e);const d=r.hour,g=r.minute,b=r.second,k=r.millisecond,f=r.dayPeriod;if(f&&f.setLocalizedLimits(this.dateFormatter),!d)return r;const z=!!f;if(d.setLimits(z),t){if(d.setValueFromDate(e,z),z&&r.dayPeriod.setValueFromDate(e),!g||(g.setValueFromDate(e),!b)||(b.setValueFromDate(e),!k))return r;k.setValueFromDate(e)}return r}createSegment(e,t){if(e===o.Literal)return new se(t);const i=this.displayNameOfType(e);switch(e){case o.Year:return new Y(t,i);case o.Month:return new ne(t,i);case o.Day:return new oe(t,i);case o.Hour:return new le(t,i);case o.Minute:return new ue(t,i);case o.Second:return new me(t,i);case o.Millisecond:return new de(t,i);case o.DayPeriod:return new ce(t,i)}}displayNameOfType(e){const t=e==="fractionalSecond"?"millisecond":this.dateTimeFieldDisplayNames.of(e);return t?t.charAt(0).toUpperCase()+t.slice(1):""}}const pe='@charset "UTF-8";:host{font-family:var(--luzmo-font-family);--date-time-picker-border-radius: var( --luzmo-date-time-picker-border-radius, var(--luzmo-border-radius) );--date-time-picker-border-radius-quiet: var( --luzmo-date-time-picker-border-radius-quiet, 0 );--date-time-picker-border-width: var(--luzmo-border-width);--date-time-picker-button-border-color: var( --highcontrast-datepicker-pickerbutton-border-color, var( --luzmo-date-time-picker-pickerbutton-border-color, var(--luzmo-border-color) ) );--date-time-picker-button-border-color-focus: var( --highcontrast-datepicker-pickerbutton-border-color, var( --luzmo-date-time-picker-pickerbutton-border-color-focus, var(--luzmo-primary) ) );--date-time-picker-button-border-color-invalid: var( --highcontrast-datepicker-pickerbutton-border-color, var( --luzmo-date-time-picker-pickerbutton-border-color-invalid, var(--luzmo-negative-color) ) );--date-time-picker-button-width: calc( var(--date-time-picker-edge-to-disclosure-icon) * 2 + var(--date-time-picker-icon-size) );--date-time-picker-quiet-button-offset: var( --luzmo-date-time-picker-quiet-button-offset, var(--date-time-picker-text-to-visual) );--date-time-picker-icon-to-text: var(--date-time-picker-edge-to-text);--date-time-picker-button-width-quiet: calc( var(--date-time-picker-button-width) - var( --date-time-picker-quiet-button-offset ) );--date-time-picker-focus-ring-gap: var( --luzmo-date-time-picker-focus-ring-gap, var(--luzmo-indicator-gap) );--date-time-picker-focus-thickness: var( --luzmo-date-time-picker-focus-thickness, var(--luzmo-indicator-width) );--date-time-picker-focus-animation: var( --luzmo-date-time-picker-focus-animation, var(--luzmo-animation-duration) );--date-time-picker-focus-ring-width: var( --luzmo-date-time-picker-focus-ring-width, var(--luzmo-border-width) );--date-time-picker-focus-ring-color: var( --highcontrast-datepicker-focus-ring-color, var(--luzmo-date-time-picker-focus-ring-color, var(--luzmo-indicator-color)) );--date-time-picker-focus-line-gap: var( --luzmo-date-time-picker-focus-line-gap, var(--luzmo-spacing-2) );--date-time-picker-invalid-quiet-color: var( --luzmo-date-time-picker-invalid-quiet-color, var(--luzmo-negative-color) );--date-time-picker-quiet-border-color-hover: var( --luzmo-date-time-picker-quiet-border-color-hover, var(--luzmo-border-color-hover) );--date-time-picker-border-color-disabled: var( --luzmo-date-time-picker-border-color-disabled, var(--luzmo-border-color-disabled) );--date-time-picker-dash-font-size: var( --luzmo-date-time-picker-dash-font-size, var(--date-time-picker-dash-font-size) );--date-time-picker-dash-color: var( --highcontrast-datepicker-dash-color, var(--luzmo-date-time-picker-dash-color, var(--luzmo-font-color)) );--date-time-picker-range-dash-padding-top: var( --luzmo-date-time-picker-range-dash-padding-top, 0 );--date-time-picker-range-dash-margin-inline-start: var( --luzmo-date-time-picker-range-dash-margin-left, calc(var(--date-time-picker-dash-font-size) * -.5) );--date-time-picker-range-input-width-first: var( --luzmo-date-time-picker-range-input-width-first, calc( var(--date-time-picker-initial-width) - var( --date-time-picker-generic-padding ) * 2 ) );--date-time-picker-input-width-base: calc( var(--date-time-picker-range-input-width-first) + var(--date-time-picker-icon-size) );--date-time-picker-input-width: var( --luzmo-date-time-picker-input-width, calc( var(--date-time-picker-input-width-base) + var(--date-time-picker-initial-height) ) );--date-time-picker-range-input-width-quiet-first: var( --luzmo-date-time-picker-range-input-width-quiet-first, calc( var(--date-time-picker-width-quiet-first) + var(--date-time-picker-width-quiet-second) ) );--date-time-picker-input-width-quiet: var( --luzmo-date-time-picker-input-width-quiet, calc( var(--date-time-picker-range-input-width-quiet-first) + var(--date-time-picker-icon-size) + var(--date-time-picker-initial-height) ) );--date-time-picker-datetime-input-width-first: var( --luzmo-date-time-picker-datetime-input-width-first, calc( var(--date-time-picker-input-width-base) + var(--date-time-picker-datetime-width-first) ) );--date-time-picker-datetime-input-width: var( --luzmo-date-time-picker-datetime-input-width, calc( var(--date-time-picker-datetime-input-width-first) + var(--date-time-picker-icon-size) + var(--date-time-picker-initial-height) ) );--date-time-picker-datetime-quiet-input-width-first: var( --luzmo-date-time-picker-datetime-quiet-input-width-first, calc( var(--date-time-picker-input-width-base) + var(--date-time-picker-input-datetime-width) ) );--date-time-picker-datetime-quiet-input-width: var( --luzmo-date-time-picker-datetime-quiet-input-width, calc( var(--date-time-picker-datetime-quiet-input-width-first) + var(--date-time-picker-icon-size) + var(--date-time-picker-initial-height) ) );--date-time-picker-padding-inline-end: var( --luzmo-date-time-picker-padding-inline, calc( var(--date-time-picker-button-width) + var(--date-time-picker-edge-to-text) - var( --date-time-picker-border-width ) * 2 ) );--date-time-picker-padding-inline-end-quiet: var( --luzmo-date-time-picker-padding-inline-quiet, calc( var(--date-time-picker-button-width) + var(--date-time-picker-edge-to-text) - var( --date-time-picker-quiet-button-offset ) ) );--date-time-picker-padding-inline-end-invalid-quiet: var( --luzmo-date-time-picker-padding-inline-end-invalid-quiet, calc( var(--date-time-picker-button-width-quiet) + var(--date-time-picker-icon-size) + var(--date-time-picker-icon-to-text) ) );min-inline-size:var(--luzmo-date-time-picker-min-width, var(--date-time-picker-min-width));border-radius:var(--date-time-picker-border-radius);flex-flow:row;display:inline-flex;position:relative}:host([disabled]) luzmo-picker-button{cursor:default}:host([disabled]){--luzmo-date-time-picker-dash-color: var( --luzmo-date-time-picker-dash-color-disabled, var(--disabled-content-color) );--luzmo-text-field-border-color-disabled: transparent}:host([invalid]),:host([invalid]) #text-field .icon{--luzmo-text-field-icon-spacing-inline-end-invalid: calc( var(--date-time-picker-button-width) + var(--date-time-picker-invalid-icon-to-button) );--luzmo-text-field-icon-spacing-inline-end-quiet-invalid: calc( var(--date-time-picker-button-width-quiet) + var(--date-time-picker-invalid-icon-to-button-quiet) )}:host(:not([quiet])){inline-size:var(--luzmo-date-time-picker-width, var(--date-time-picker-width))}:host([quiet]){inline-size:var(--luzmo-date-time-picker-width-quiet, var(--date-time-picker-width-quiet, var(--date-time-picker-width)))}:host(:not([quiet],[disabled])){--luzmo-picker-button-border-color: var( --date-time-picker-button-border-color )}:host([focused]),:host([focused]:not([quiet],[disabled])){--luzmo-picker-button-border-color: var( --date-time-picker-button-border-color-focus )}:host([invalid]:not([quiet],[disabled])){--luzmo-picker-button-border-color: var( --date-time-picker-button-border-color-invalid )}.input{inline-size:100%;flex:1;padding-inline-end:var(--date-time-picker-padding-inline-end);border-color:var(--luzmo-date-time-picker-border-color, var(--datepicker-border-color))}:host .input:read-only{border-color:var(--luzmo-date-time-picker-border-color, var(--datepicker-border-color))}.input.luzmo-DatePicker-startField{border-inline-end:0;border-start-end-radius:0;border-end-end-radius:0;padding-inline-end:var(--luzmo-date-time-picker-generic-padding, var(--date-time-picker-generic-padding))}.input.luzmo-DatePicker-endField{border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0;padding-inline-start:var(--luzmo-date-time-picker-generic-padding, var(--date-time-picker-generic-padding))}luzmo-picker-button{cursor:pointer;position:absolute;inset-inline-end:0}.luzmo-DatePicker-rangeDash{color:var(--date-time-picker-dash-color);line-height:var(--luzmo-date-time-picker-dash-line-height, var(--date-time-picker-dash-line-height));flex:initial;inline-size:0;z-index:1;padding-block-start:var(--date-time-picker-range-dash-padding-top)}.luzmo-DatePicker-rangeDash:before{content:"–";margin-block:0;margin-inline:var(--date-time-picker-range-dash-margin-inline-start);text-align:center;vertical-align:middle;inline-size:var(--date-time-picker-dash-font-size);display:inline-block;overflow:hidden}:host([quiet]){--luzmo-date-time-picker-border-radius: var( --date-time-picker-border-radius-quiet );--luzmo-date-time-picker-padding-inline: var( --date-time-picker-padding-inline-end-quiet );--luzmo-picker-button-border-color-disabled: var( --date-time-picker-border-color-disabled );--luzmo-picker-button-background-color-hover-disabled: var( --date-time-picker-border-color-disabled )}:host([quiet][disabled]){--luzmo-text-field-border-color-disabled: var( --date-time-picker-border-color-disabled )}:host([quiet][invalid]) .input:not(.luzmo-DatePicker-startField){padding-inline-end:var(--date-time-picker-padding-inline-end-invalid-quiet)}@media (hover: hover){:host(:hover):not([focused],[disabled],[invalid]){--luzmo-picker-button-border-color: var( --date-time-picker-quiet-border-color-hover )}}:host([quiet][invalid]){--luzmo-picker-button-border-color: var( --date-time-picker-invalid-quiet-color )}:host([quiet]) luzmo-picker-button{inline-size:auto;inset-inline-end:calc(var(--date-time-picker-quiet-button-offset) * -1)}:host([quiet]) luzmo-picker-button:not(.is-open){--luzmo-picker-button-border-color-disabled: transparent}:host([quiet]) luzmo-picker-button:not(:disabled,.is-open){--luzmo-picker-button-background-color: transparent}.luzmo-DatePicker--range{--luzmo-date-time-picker-border-radius: var(--date-time-picker-border-radius)}.luzmo-DatePicker--range:after{pointer-events:none;content:"";margin:calc(var(--date-time-picker-focus-ring-gap) * -1);border-radius:calc(var(--date-time-picker-border-radius) + var(--date-time-picker-focus-ring-gap));transition:box-shadow var(--date-time-picker-focus-animation) ease-in-out,border-color var(--date-time-picker-focus-animation) ease-in-out;border-color:#0000;position:absolute;top:0;right:0;bottom:0;left:0}:host([focused]) .luzmo-DatePicker--range:not(.luzmo-DatePicker--quiet):after{box-shadow:0 0 0 var(--date-time-picker-focus-ring-width) var(--date-time-picker-focus-ring-color)}:host([focused]) .luzmo-DatePicker--range:not(.luzmo-DatePicker--quiet) #text-field:after{display:none}:host([quiet]) .luzmo-DatePicker--range{--luzmo-date-time-picker-border-radius: var( --date-time-picker-border-radius-quiet )}:host([quiet][focused]) .luzmo-DatePicker--range:after{box-shadow:none;border-block-end:var(--date-time-picker-focus-thickness) solid var(--date-time-picker-focus-ring-color);border-radius:0;margin:0;inset-block-end:calc(var(--date-time-picker-focus-line-gap) * -1)}:host([quiet]) .luzmo-DatePicker--range #text-field{min-inline-size:0;inline-size:var(--date-time-picker-input-width-quiet)}:host([quiet]) .luzmo-DatePicker--range #text-field:first-of-type{inline-size:var(--date-time-picker-range-input-width-quiet-first)}.luzmo-DatePicker--range.luzmo-DatePicker--datetimeRange #text-field{inline-size:var(--date-time-picker-datetime-input-width);min-inline-size:0}.luzmo-DatePicker--range.luzmo-DatePicker--datetimeRange #text-field:first-of-type{inline-size:var(--date-time-picker-datetime-input-width-first)}:host([quiet]) .luzmo-DatePicker--range.luzmo-DatePicker--datetimeRange #text-field{inline-size:var(--date-time-picker-datetime-quiet-input-width)}:host([quiet]) .luzmo-DatePicker--range.luzmo-DatePicker--datetimeRange #text-field:first-of-type{inline-size:var(--date-time-picker-datetime-quiet-input-width-first)}.luzmo-DatePicker--range #text-field{flex:initial;min-inline-size:0;inline-size:var(--date-time-picker-input-width)}.luzmo-DatePicker--range #text-field:first-of-type{inline-size:var(--date-time-picker-range-input-width-first)}@media (forced-colors: active){:host{--highcontrast-datepicker-dash-color: CanvasText;--highcontrast-datepicker-focus-ring-color: Highlight;--highcontrast-datepicker-pickerbutton-border-color: Highlight}:host([disabled]){--highcontrast-datepicker-dash-color: GrayText}:host([quiet][invalid]){--highcontrast-datepicker-pickerbutton-border-color: Highlight}}:host{--date-time-picker-width: auto;--date-time-picker-initial-height: var(--system-date-picker-initial-height);--date-time-picker-font-color-default: var(--luzmo-font-color);--datepicker-border-color: var(--luzmo-border-color);--date-time-picker-button-indicator-color: var(--luzmo-indicator-color);--text-field-focus-indicator-color: var(--luzmo-background-color-highlight);--date-time-picker-initial-width: 120px;--date-time-picker-min-width: 160px;--date-time-picker-calendar-padding: var(--luzmo-spacing-4);--date-time-picker-icon-size: 18px;--date-time-picker-dash-font-size: var(--luzmo-font-size);--date-time-picker-text-to-visual: var(--luzmo-spacing-3);--date-time-picker-edge-to-disclosure-icon: var(--luzmo-spacing-3);--date-time-picker-edge-to-text: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--date-time-picker-icon-to-text: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--date-time-picker-invalid-icon-to-button: var(--luzmo-spacing-3);--date-time-picker-generic-padding: var(--luzmo-spacing-4)}:host([size=s]){--date-time-picker-min-width: 140px;--date-time-picker-calendar-padding: var(--luzmo-spacing-3);--date-time-picker-icon-size: 16px;--date-time-picker-dash-font-size: var(--luzmo-font-size-s);--date-time-picker-text-to-visual: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--date-time-picker-edge-to-disclosure-icon: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--date-time-picker-edge-to-text: var(--luzmo-spacing-3);--date-time-picker-invalid-icon-to-button: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--date-time-picker-icon-to-text: var(--luzmo-spacing-3)}:host([invalid][size=s]){--text-field-icon-spacing-block-invalid: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) )}:host([size=m]){--date-time-picker-min-width: 160px;--date-time-picker-calendar-padding: var(--luzmo-spacing-4);--date-time-picker-icon-size: 18px;--date-time-picker-dash-font-size: var(--luzmo-font-size-m);--date-time-picker-text-to-visual: var(--luzmo-spacing-3);--date-time-picker-edge-to-disclosure-icon: var(--luzmo-spacing-3);--date-time-picker-edge-to-text: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--date-time-picker-invalid-icon-to-button: var(--luzmo-spacing-3);--date-time-picker-icon-to-text: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host([size=l]){--date-time-picker-min-width: 180px;--date-time-picker-calendar-padding: var(--luzmo-spacing-5);--date-time-picker-icon-size: 20px;--date-time-picker-dash-font-size: var(--luzmo-font-size-l);--date-time-picker-text-to-visual: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--date-time-picker-edge-to-disclosure-icon: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--date-time-picker-edge-to-text: var(--luzmo-spacing-4);--date-time-picker-invalid-icon-to-button: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--date-time-picker-icon-to-text: var(--luzmo-spacing-4)}:host([size=xl]){--date-time-picker-min-width: 200px;--date-time-picker-calendar-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--date-time-picker-icon-size: 22px;--date-time-picker-dash-font-size: var(--luzmo-font-size-xl);--date-time-picker-text-to-visual: var(--luzmo-spacing-4);--date-time-picker-edge-to-disclosure-icon: var(--luzmo-spacing-4);--date-time-picker-edge-to-text: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--date-time-picker-invalid-icon-to-button: var(--luzmo-spacing-4);--date-time-picker-icon-to-text: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) )}:host{--status-icon-size: var( --luzmo-text-field-icon-size-invalid, var(--text-field-icon-size-invalid) );--picker-button-size: var( --luzmo-text-field-height, var(--text-field-height) );--input-spacing: var( --luzmo-text-field-spacing-inline, var(--text-field-spacing-inline) );--input-border-width: var( --luzmo-text-field-border-width, var(--luzmo-border-width) );--text-to-icon: var( --luzmo-text-field-icon-spacing-inline-start-invalid, var(--text-field-icon-spacing-inline-start-invalid) );--date-time-picker-input-width: var(--date-time-picker-width);flex-wrap:wrap}:host #text-field{display:inline-block}:host #text-field .input,:host([quiet]) #text-field .input,:host([valid]) #text-field .input,:host([invalid]) #text-field .input{inline-size:100%}:host #text-field .input,:host([quiet]) #text-field .input{padding-inline-end:calc(var(--picker-button-size) + var(--input-spacing) - var(--input-border-width))}:host([valid]) #text-field .input,:host([invalid]) #text-field .input{inline-size:100%;padding-inline-end:calc(var(--status-icon-size) + var(--picker-button-size) + var(--input-spacing) - var(--input-border-width) + var(--text-to-icon))}@media (hover: hover){:host([invalid]) #text-field:hover .input,:host([focused][invalid]) .input:hover,:host([focused][invalid]) #text-field:hover .input{border-color:var(--highcontrast-text-field-border-color-invalid-default, var(--luzmo-text-field-border-color-invalid-default, var(--luzmo-negative-color-hover)))}}luzmo-picker-button:focus-visible{outline:none}luzmo-popover{overflow-y:auto}luzmo-popover .popover-content{padding:var(--luzmo-date-time-picker-calendar-padding, var(--date-time-picker-calendar-padding))}.input-content{display:flex;align-items:center;height:100%;overflow:auto hidden;scrollbar-width:none;line-height:normal}.input-content::-webkit-scrollbar{display:none;width:0;height:0}.literal-segment,.editable-segment{display:inline-block;color:var(--luzmo-date-time-picker-font-color-default, var(--date-time-picker-font-color-default))}.editable-segment{padding:0 .15em;font-variant-numeric:tabular-nums;text-align:end;white-space:nowrap;caret-color:transparent;outline:none}[dir=ltr] .editable-segment{text-align:start}.literal-segment{white-space:pre;user-select:none;-webkit-user-select:none}.is-placeholder,.is-placeholder+.literal-segment{color:var(--luzmo-font-color-disabled)}.editable-segment:focus-visible{color:var(--white);background-color:var(--highcontrast-text-field-focus-indicator-color, var(--luzmo-text-field-focus-indicator-color, var(--text-field-focus-indicator-color)))}.editable-segment::selection{background-color:transparent}';var fe=Object.defineProperty,ve=Object.getOwnPropertyDescriptor,p=(n,e,t,i)=>{for(var a=i>1?void 0:i?ve(e,t):e,r=n.length-1,s;r>=0;r--)(s=n[r])&&(a=(i?s(e,t,a):s(a))||a);return i&&a&&fe(e,t,a),a};class m extends K.ManageHelpText(I.SizedMixin(G.Focusable,{validSizes:Object.values(I.ElementSizes)})){constructor(){super(),this._precision=v.Minute,this.isUserSetPrecision=!1,this.invalid=!1,this.readonly=!1,this.quiet=!1,this.placement="bottom",this.language="en",this.labels={previous:"Previous",next:"Next",today:"Today",selected:"Selected",empty:"Empty",calendar:"Calendar"},this.focused=!1,this.segments=new M([]),this.isCalendarOpen=!1,this._timeZone=this.timeZone??c.$14e0f24ef4ac5c92$export$aa8b41735afcabd2(),this.cachedLocalTime=c.$14e0f24ef4ac5c92$export$461939dd4422153(this._timeZone),this.setNumberParser(),this.setDateFormatter(),this.setAriaDateFormatter(),this.addEventListener("focusin",()=>this.previousCommitedValue=this._value),this.addEventListener("focusout",()=>this.commitValue())}static get styles(){return[u.r(pe),u.r(X.textFieldStyles)]}get precision(){return this._precision}set precision(e){this.isUserSetPrecision=!0;const t=this._precision;e!==t&&(this._precision=e,this.requestUpdate("precision",t))}get _language(){try{return this.language?new Intl.Locale(this.language).language:"en"}catch{return"en"}}get focusElement(){return this.firstEditableSegment}get currentDate(){return this._value?c.$11d87f3f76e88657$export$84c95a83c799e074(this._value,this._timeZone):this.cachedLocalTime}get includesTime(){return[v.Hour,v.Minute,v.Second,v.Millisecond].includes(this.precision)}clear(){this._value=void 0,this.setSegments()}willUpdate(e){const t=e.has("value"),i=e.has("timeZone"),a=e.has("min"),r=e.has("max"),s=e.has("language"),l=e.has("dateFormat"),h=e.has("dateSeparator"),d=e.has("precision"),g=e.has("segments"),b=e.has("disabled");if(s&&this.setNumberParser(),(s||d)&&(this.setDateFormatter(),this.setAriaDateFormatter()),t||a||r||i){this._value=this.value?c.$fae977aafc393c5c$export$5adfdab05168c219(new Date(this.value).toISOString(),"UTC"):void 0,this._min=this.min?c.$fae977aafc393c5c$export$5adfdab05168c219(new Date(this.min).toISOString(),"UTC"):void 0,this._max=this.max?c.$fae977aafc393c5c$export$5adfdab05168c219(new Date(this.max).toISOString(),"UTC"):void 0;const f=this.mostSpecificDateValue;f&&(this.convertDatePropsToMatch(f),this.checkDatePropsCompliance(a||r),this.updateDateProps(),this.updateDefaultPrecision())}(t||s||d||l||i||h)&&this.setSegments(),g&&this.setValueFromSegments(),b&&this.isCalendarOpen&&(this.isCalendarOpen=!1);const k=this._value&&this.labels.selected+": "+this.ariaDateFormatter.format(U(this._value));this.setAttribute("aria-label",k??this.labels.empty)}get mostSpecificDateValue(){const e=[this._value,this._min,this._max].filter(r=>r!==void 0);if(e.length===0)return;const t=e.filter(r=>_(r));if(t.length>0)return t[0];const i=e.filter(r=>C(r));return i.length>0?i[0]:e.find(r=>F(r))}convertDatePropsToMatch(e){if(_(e)){this._timeZone=this.timeZone??e.timeZone,this._value=this._value&&c.$11d87f3f76e88657$export$84c95a83c799e074(this._value,this._timeZone),this._min=this._min&&c.$11d87f3f76e88657$export$84c95a83c799e074(this._min,this._timeZone),this._max=this._max&&c.$11d87f3f76e88657$export$84c95a83c799e074(this._max,this._timeZone);return}if(this._timeZone=this.timeZone??c.$14e0f24ef4ac5c92$export$aa8b41735afcabd2(),C(e)){this._value=this._value&&c.$11d87f3f76e88657$export$b21e0b124e224484(this._value),this._min=this._min&&c.$11d87f3f76e88657$export$b21e0b124e224484(this._min),this._max=this._max&&c.$11d87f3f76e88657$export$b21e0b124e224484(this._max);return}this._value=this._value&&c.$11d87f3f76e88657$export$93522d1a439f3617(this._value),this._min=this._min&&c.$11d87f3f76e88657$export$93522d1a439f3617(this._min),this._max=this._max&&c.$11d87f3f76e88657$export$93522d1a439f3617(this._max)}checkDatePropsCompliance(e){e&&this._min&&this._max&&(this._min.compare(this._max)<0||(console.warn(this,`<${this.localName}> expects the 'min' to be less than 'max'. Please ensure that 'min' property's date is earlier than 'max' property's date.`),this._min=void 0,this._max=void 0)),this.isNonCompliantValue()&&(console.warn(this,`<${this.localName}> expects the preselected value to comply with the min and max constraints. Please ensure that 'value' property's date is in between the dates for the 'min' and 'max' properties.`),this._value=void 0),!this._min&&!this._max&&!this._value&&(this._timeZone=c.$14e0f24ef4ac5c92$export$aa8b41735afcabd2())}isNonCompliantValue(){return this._value===void 0?!1:!!(this._min&&this._value.compare(this._min)<0||this._max&&this._value.compare(this._max)>0)}updateDateProps(){const e=this.mostSpecificDateValue;if(!e||!this.isUserSetPrecision)return;this.includesTime&&F(e)&&this.convertDatePropsToMatch(c.$11d87f3f76e88657$export$b21e0b124e224484(e))}updateDefaultPrecision(){if(this.isUserSetPrecision)return;const e=this.mostSpecificDateValue;e&&(this._precision=F(e)?v.Day:v.Minute)}render(){return u.x`
       <div id="text-field">
         ${this.renderStateIcons()} ${this.renderInputContent()}
       </div>
       ${this.renderHelpText(this.invalid)}${this.renderPicker()}
-    `;
-  }
-  renderStateIcons() {
-    if (this.invalid)
-      return lit.html`
+    `}renderStateIcons(){return this.invalid?u.x`
         <luzmo-icon
-          .icon=${icons.luzmoAlert}
+          .icon=${O.$}
           .size=${this.size}
           id="invalid"
           class="icon"
         ></luzmo-icon>
-      `;
-    return lit.nothing;
-  }
-  renderPicker() {
-    if (this.readonly) return lit.nothing;
-    const closeCalendar = () => this.isCalendarOpen = false;
-    const openCalendar = () => this.isCalendarOpen = true;
-    return lit.html`
+      `:u.E}renderPicker(){if(this.readonly)return u.E;const e=()=>this.isCalendarOpen=!1,t=()=>this.isCalendarOpen=!0;return u.x`
       <luzmo-picker-button
         ?open=${this.isCalendarOpen}
         ?quiet=${this.quiet}
         ?invalid=${this.invalid}
         ?disabled=${this.disabled}
         .size=${this.size}
-        @click=${openCalendar}
+        @click=${t}
         label=${this.labels.calendar}
       >
         <slot name="calendar-icon" slot="icon">
           <luzmo-icon
-            .icon=${icons.luzmoCalendar}
+            .icon=${O.o0}
             .size=${this.size}
             block
           ></luzmo-icon>
@@ -962,20 +49,17 @@ class LuzmoDateTimePicker extends manageHelpText.ManageHelpText(
       <luzmo-overlay
         .triggerElement=${this.input}
         type="modal"
-        placement=${this.placement ?? "bottom"}
+        placement=${this.placement??"bottom"}
         offset="0"
         ?open=${this.isCalendarOpen}
-        @luzmo-closed=${closeCalendar}
+        @luzmo-closed=${e}
       >
         <luzmo-popover>
           <div class="popover-content">
             <luzmo-calendar
-              .value=${this._value ? (
-      // TODO: check if this is the correct way to handle the value with TZ
-      this._value.toString().slice(0, 10)
-    ) : void 0}
-              .min=${this._min ? this._min.toString() : void 0}
-              .max=${this._max ? this._max.toString() : void 0}
+              .value=${this._value?this._value.toString().slice(0,10):void 0}
+              .min=${this._min?this._min.toString():void 0}
+              .max=${this._max?this._max.toString():void 0}
               .labels=${this.labels}
               .size=${this.size}
               .language=${this.language}
@@ -984,448 +68,38 @@ class LuzmoDateTimePicker extends manageHelpText.ManageHelpText(
           </div>
         </luzmo-popover>
       </luzmo-overlay>
-    `;
-  }
-  handleChange(event) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    event.stopPropagation();
-    this.isCalendarOpen = false;
-    if ((_a = event.target) == null ? void 0 : _a.value) {
-      this.value = (_b = event.target) == null ? void 0 : _b.value;
-    }
-    const calendarValue = date.parseDate(
-      ((_c = event.target) == null ? void 0 : _c.value) ?? ""
-    );
-    if (this.includesTime) {
-      const hour = ((_d = this.segments.hour) == null ? void 0 : _d.value) ?? 0;
-      const minute = ((_e = this.segments.minute) == null ? void 0 : _e.value) ?? 0;
-      const second = ((_f = this.segments.second) == null ? void 0 : _f.value) ?? 0;
-      const millisecond = ((_g = this.segments.millisecond) == null ? void 0 : _g.value) ?? 0;
-      const time = new date.Time(hour, minute, second, millisecond);
-      const mostSpecificDateValue = this.mostSpecificDateValue;
-      this._value = date.toCalendarDateTime(calendarValue, time);
-      if (mostSpecificDateValue && isZonedDateTime(mostSpecificDateValue))
-        this._value = date.toZoned(this._value, this._timeZone);
-    } else {
-      this._value = calendarValue;
-    }
-    this.commitValue();
-  }
-  renderInputContent() {
-    const focusIn = () => this.focused = !this.readonly;
-    const focusOut = () => this.focused = false;
-    return lit.html`
+    `}handleChange(e){var i,a,r,s,l,h,d;e.stopPropagation(),this.isCalendarOpen=!1,(i=e.target)!=null&&i.value&&(this.value=(a=e.target)==null?void 0:a.value);const t=c.$fae977aafc393c5c$export$6b862160d295c8e(((r=e.target)==null?void 0:r.value)??"");if(this.includesTime){const g=((s=this.segments.hour)==null?void 0:s.value)??0,b=((l=this.segments.minute)==null?void 0:l.value)??0,k=((h=this.segments.second)==null?void 0:h.value)??0,f=((d=this.segments.millisecond)==null?void 0:d.value)??0,z=new c.$35ea8db9cb2ccb90$export$680ea196effce5f(g,b,k,f),y=this.mostSpecificDateValue;this._value=c.$11d87f3f76e88657$export$b21e0b124e224484(t,z),y&&_(y)&&(this._value=c.$11d87f3f76e88657$export$84c95a83c799e074(this._value,this._timeZone))}else this._value=t;this.commitValue()}renderInputContent(){const e=()=>this.focused=!this.readonly,t=()=>this.focused=!1;return u.x`
       <div class="input">
         <span
           class="input-content"
-          @focusin=${focusIn}
-          @focusout=${focusOut}
+          @focusin=${e}
+          @focusout=${t}
           @keydown=${this.handleKeydown}
           @input=${this.handleInput}
         >
           ${this.renderSegments()}
         </span>
       </div>
-    `;
-  }
-  renderSegments() {
-    return this.segments.all.map(
-      (segment) => when_js.when(
-        segment.type === SegmentTypes.Literal,
-        () => this.renderLiteralSegment(segment),
-        () => this.renderEditableSegment(segment)
-      )
-    );
-  }
-  renderLiteralSegment(segment) {
-    return lit.html`
+    `}renderSegments(){return this.segments.all.map(e=>L.n(e.type===o.Literal,()=>this.renderLiteralSegment(e),()=>this.renderEditableSegment(e)))}renderLiteralSegment(e){return u.x`
         <span
             class="literal-segment"
-            data-test-id=${segment.type}
+            data-test-id=${e.type}
             aria-hidden="true"
-        >${segment.formatted}</span>
-    `;
-  }
-  renderEditableSegment(segment) {
-    const isActive = !this.disabled && !this.readonly;
-    const usePlaceholder = segment.value === void 0;
-    const inputMode = segment.type === SegmentTypes.DayPeriod ? "text" : "numeric";
-    const segmentClasses = {
-      "editable-segment": true,
-      "is-placeholder": usePlaceholder
-    };
-    const minWidth = segment.type !== SegmentTypes.Year && String(segment.maxValue).length > 0;
-    const segmentStyles = {
-      minWidth: minWidth ? `${minWidth}ch` : void 0
-    };
-    return lit.html`
+        >${e.formatted}</span>
+    `}renderEditableSegment(e){const t=!this.disabled&&!this.readonly,i=e.value===void 0,a=e.type===o.DayPeriod?"text":"numeric",r={"editable-segment":!0,"is-placeholder":i},s=e.type!==o.Year&&String(e.maxValue).length>0,l={minWidth:s?`${s}ch`:void 0};return u.x`
       <div
         role="spinbutton"
-        aria-valuenow=${ifDefined_js.ifDefined(segment.value)}
-        aria-valuemin=${segment.minValue}
-        aria-valuemax=${segment.maxValue}
-        aria-label=${segment.label}
-        aria-valuetext=${ifDefined_js.ifDefined(
-      segment.value === void 0 ? this.labels.empty : segment.formatted
-    )}
-        contenteditable=${ifDefined_js.ifDefined(isActive ? true : void 0)}
-        inputmode=${ifDefined_js.ifDefined(isActive ? inputMode : void 0)}
-        tabindex=${ifDefined_js.ifDefined(isActive ? "0" : void 0)}
-        class=${classMap_js.classMap(segmentClasses)}
-        style=${styleMap_js.styleMap(segmentStyles)}
-        data-type=${segment.type}
-        .innerText=${this.renderSegmentText(segment)}
+        aria-valuenow=${S.o(e.value)}
+        aria-valuemin=${e.minValue}
+        aria-valuemax=${e.maxValue}
+        aria-label=${e.label}
+        aria-valuetext=${S.o(e.value===void 0?this.labels.empty:e.formatted)}
+        contenteditable=${S.o(t?!0:void 0)}
+        inputmode=${S.o(t?a:void 0)}
+        tabindex=${S.o(t?"0":void 0)}
+        class=${j.e(r)}
+        style=${W.o(l)}
+        data-type=${e.type}
+        .innerText=${this.renderSegmentText(e)}
       ></div>
-    `;
-  }
-  renderSegmentText(segment) {
-    const usePlaceholder = segment.value === void 0;
-    return when_js.when(
-      usePlaceholder,
-      () => segment.placeholder ?? "",
-      () => segment.formatted ?? ""
-    );
-  }
-  handleKeydown(event) {
-    var _a;
-    const segmentElement = event.target;
-    const segmentType = segmentElement.dataset.type;
-    if (!segmentType) return;
-    switch (event.code) {
-      case "ArrowUp": {
-        this.incrementValue(segmentType);
-        break;
-      }
-      case "ArrowDown": {
-        this.decrementValue(segmentType);
-        break;
-      }
-      case "ArrowRight": {
-        this.focusSegment(segmentElement, "next");
-        break;
-      }
-      case "ArrowLeft": {
-        this.focusSegment(segmentElement, "previous");
-        break;
-      }
-      case "Enter":
-      case "Space": {
-        this.commitValue();
-        break;
-      }
-      case "Backspace":
-      case "Delete": {
-        event.preventDefault();
-        if (((_a = this.segments.getByType(segmentType)) == null ? void 0 : _a.value) === void 0)
-          this.focusSegment(segmentElement, "previous");
-        else this.clearSegmentContent(segmentType);
-        break;
-      }
-    }
-  }
-  /**
-   * The modifier parameters of the component
-   * @internal
-   */
-  get modifierParams() {
-    return {
-      dateFormatter: this.dateFormatter,
-      segments: this.segments,
-      currentDate: this.currentDate
-    };
-  }
-  incrementValue(segmentType) {
-    const incrementModifier = new IncrementModifier(this.modifierParams);
-    this.segments = incrementModifier.modify(segmentType);
-    this.dispatchInput();
-  }
-  decrementValue(segmentType) {
-    const decrementModifier = new DecrementModifier(this.modifierParams);
-    this.segments = decrementModifier.modify(segmentType);
-    this.dispatchInput();
-  }
-  /**
-   * Focuses the segment according to the direction, if there is one to focus on
-   *
-   * @param segment - Segment on which the event was triggered (the segment being changed)
-   * @param elementToFocus - Defines which element will be focused: is it the previous one or the next one?
-   */
-  focusSegment(segment, elementToFocus) {
-    let segmentFound = false;
-    let currentSegment = segment;
-    while (!segmentFound) {
-      const siblingSegment = elementToFocus === "previous" ? currentSegment.previousElementSibling : currentSegment.nextElementSibling;
-      if (!siblingSegment) {
-        break;
-      }
-      if (siblingSegment.getAttribute("contenteditable")) {
-        siblingSegment.focus();
-        segmentFound = true;
-      }
-      currentSegment = siblingSegment;
-    }
-  }
-  /**
-   * Mark the user intent to commit the selected value. If the current value
-   * is different from the previous commited value, dispatch a change event.
-   */
-  commitValue() {
-    if (this._value && this.previousCommitedValue && this._value.compare(this.previousCommitedValue) === 0)
-      return;
-    if (this._value === void 0 && this.previousCommitedValue === void 0) {
-      const allSegmentsEmpty = this.segments.editableValues.every(
-        (value) => value === void 0
-      );
-      this.invalid = allSegmentsEmpty ? false : true;
-      return;
-    }
-    this.invalid = this._value === void 0 || this.isNonCompliantValue() ? true : false;
-    this.previousCommitedValue = this._value;
-    this.dispatchChange();
-  }
-  clearSegmentContent(segmentType) {
-    const valuesBefore = this.segments.editableValues;
-    const clearModifier = new ClearModifier(this.modifierParams);
-    this.segments = clearModifier.modify(segmentType);
-    const valuesAfter = this.segments.editableValues;
-    if (!equalSegmentValues(valuesBefore, valuesAfter)) this.dispatchInput();
-  }
-  handleInput(event) {
-    event.stopPropagation();
-    const segmentType = event.target.dataset.type;
-    const valuesBefore = this.segments.editableValues;
-    const inputModifier = new InputModifier({
-      ...this.modifierParams,
-      eventData: event.data,
-      numberParser: this.numberParser
-    });
-    this.segments = inputModifier.modify(segmentType);
-    this.updateSegmentContent(
-      this.segments.getByType(segmentType),
-      event.target
-    );
-    const valuesAfter = this.segments.editableValues;
-    if (!equalSegmentValues(valuesBefore, valuesAfter)) this.dispatchInput();
-  }
-  /**
-   * Updates the content of the segments by binding it to the `.innerText` property of the element,
-   * instead of using string interpolation. This allows to not show user typed characters, but
-   * only the formatted content of the segment, needed for the 'contenteditable' elements.
-   *
-   * @param segment - Segment on which the event was triggered (the segment being changed)
-   * @param event - Triggered event details
-   */
-  updateSegmentContent(segment, segmentElement) {
-    segmentElement.textContent = segment.value === void 0 ? segment.placeholder : segment.formatted;
-  }
-  createOutputString(value) {
-    if (value) {
-      if (isZonedDateTime(value))
-        return this._value.toAbsoluteString();
-      return new Date(this._value.toString()).toISOString();
-    }
-    return "";
-  }
-  dispatchChange() {
-    const value = this.createOutputString(this._value);
-    this.dispatchEvent(
-      new CustomEvent("change", {
-        bubbles: true,
-        composed: true,
-        cancelable: true,
-        detail: {
-          value
-        }
-      })
-    );
-  }
-  dispatchInput() {
-    const value = this.createOutputString(this._value);
-    this.dispatchEvent(
-      new CustomEvent("input", {
-        bubbles: true,
-        composed: true,
-        cancelable: true,
-        detail: {
-          value
-        }
-      })
-    );
-  }
-  setValueFromSegments() {
-    const formattedDate = this.segments.getFormattedDate(this.precision);
-    if (!formattedDate) {
-      if (this._value) this.dispatchChange();
-      this._value = void 0;
-      return;
-    }
-    if (this._value === void 0) this.dispatchChange();
-    const mostSpecificDateValue = this.mostSpecificDateValue;
-    if (mostSpecificDateValue) {
-      if (isZonedDateTime(mostSpecificDateValue))
-        this._value = date.toZoned(formattedDate, this._timeZone);
-      else if (isCalendarDateTime(mostSpecificDateValue))
-        this._value = date.toCalendarDateTime(formattedDate);
-      else this._value = date.toCalendarDate(formattedDate);
-    } else {
-      this._value = formattedDate;
-    }
-  }
-  setSegments() {
-    var _a, _b, _c, _d;
-    const segmentsFactory = new SegmentsFactory(this.dateFormatter);
-    const segments = segmentsFactory.createSegments(
-      this.currentDate,
-      this._value !== void 0
-    );
-    if (this.dateFormat) {
-      const monthIndex = segments.all.findIndex(
-        (d) => d.type === SegmentTypes.Month
-      );
-      const dayIndex = segments.all.findIndex(
-        (d) => d.type === SegmentTypes.Day
-      );
-      if (monthIndex !== -1 && dayIndex !== -1) {
-        if (this.dateFormat === "mmdd" && monthIndex > dayIndex) {
-          const temp = segments.all[monthIndex];
-          segments.all[monthIndex] = segments.all[dayIndex];
-          segments.all[dayIndex] = temp;
-        } else if (this.dateFormat === "ddmm" && dayIndex > monthIndex) {
-          const temp = segments.all[dayIndex];
-          segments.all[dayIndex] = segments.all[monthIndex];
-          segments.all[monthIndex] = temp;
-        }
-      }
-    }
-    if (typeof this.dateSeparator === "string" && this.dateSeparator) {
-      if (((_b = (_a = segments.all) == null ? void 0 : _a[1]) == null ? void 0 : _b.type) === SegmentTypes.Literal) {
-        segments.all[1].formatted = this.dateSeparator;
-      }
-      if (((_d = (_c = segments.all) == null ? void 0 : _c[3]) == null ? void 0 : _d.type) === SegmentTypes.Literal) {
-        segments.all[3].formatted = this.dateSeparator;
-      }
-    }
-    this.segments = segments;
-  }
-  setNumberParser() {
-    this.numberParser = new number.NumberParser(this._language, {
-      maximumFractionDigits: 0
-    });
-  }
-  setDateFormatter() {
-    this.dateFormatter = new date.DateFormatter(this._language, {
-      day: "2-digit",
-      month: "2-digit",
-      year: "numeric",
-      ...this.getTimeOptions("2-digit")
-    });
-  }
-  setAriaDateFormatter() {
-    this.ariaDateFormatter = new date.DateFormatter(this._language, {
-      day: "numeric",
-      month: "long",
-      year: "numeric",
-      ...this.getTimeOptions("numeric")
-    });
-  }
-  getTimeOptions(digitType) {
-    switch (this.precision) {
-      case Precisions.Millisecond: {
-        return {
-          hour: digitType,
-          minute: digitType,
-          second: digitType,
-          fractionalSecondDigits: 3
-        };
-      }
-      case Precisions.Second: {
-        return {
-          hour: digitType,
-          minute: digitType,
-          second: digitType
-        };
-      }
-      case Precisions.Minute: {
-        return {
-          hour: digitType,
-          minute: digitType
-        };
-      }
-      case Precisions.Hour: {
-        return {
-          hour: digitType
-        };
-      }
-      default: {
-        return {};
-      }
-    }
-  }
-}
-__decorateClass([
-  decorators_js.property({ type: String, reflect: true })
-], LuzmoDateTimePicker.prototype, "value", 2);
-__decorateClass([
-  decorators_js.property({ type: String, reflect: true })
-], LuzmoDateTimePicker.prototype, "min", 2);
-__decorateClass([
-  decorators_js.property({ type: String, reflect: true })
-], LuzmoDateTimePicker.prototype, "max", 2);
-__decorateClass([
-  decorators_js.property({ type: String, attribute: "date-format", reflect: true })
-], LuzmoDateTimePicker.prototype, "dateFormat", 2);
-__decorateClass([
-  decorators_js.property({ type: String, attribute: "date-separator", reflect: true })
-], LuzmoDateTimePicker.prototype, "dateSeparator", 2);
-__decorateClass([
-  decorators_js.property({ type: String, reflect: true })
-], LuzmoDateTimePicker.prototype, "precision", 1);
-__decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
-], LuzmoDateTimePicker.prototype, "invalid", 2);
-__decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
-], LuzmoDateTimePicker.prototype, "readonly", 2);
-__decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
-], LuzmoDateTimePicker.prototype, "quiet", 2);
-__decorateClass([
-  decorators_js.property({ type: String, reflect: true })
-], LuzmoDateTimePicker.prototype, "placement", 2);
-__decorateClass([
-  decorators_js.property({ type: String, attribute: "time-zone", reflect: true })
-], LuzmoDateTimePicker.prototype, "timeZone", 2);
-__decorateClass([
-  decorators_js.property({ type: String, reflect: true })
-], LuzmoDateTimePicker.prototype, "language", 2);
-__decorateClass([
-  decorators_js.property({ attribute: false })
-], LuzmoDateTimePicker.prototype, "labels", 2);
-__decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
-], LuzmoDateTimePicker.prototype, "focused", 2);
-__decorateClass([
-  decorators_js.state()
-], LuzmoDateTimePicker.prototype, "_value", 2);
-__decorateClass([
-  decorators_js.state()
-], LuzmoDateTimePicker.prototype, "_min", 2);
-__decorateClass([
-  decorators_js.state()
-], LuzmoDateTimePicker.prototype, "_max", 2);
-__decorateClass([
-  decorators_js.state()
-], LuzmoDateTimePicker.prototype, "segments", 2);
-__decorateClass([
-  decorators_js.state()
-], LuzmoDateTimePicker.prototype, "isCalendarOpen", 2);
-__decorateClass([
-  decorators_js.query(".editable-segment")
-], LuzmoDateTimePicker.prototype, "firstEditableSegment", 2);
-__decorateClass([
-  decorators_js.query(".input")
-], LuzmoDateTimePicker.prototype, "input", 2);
-if (!customElements.get("luzmo-date-time-picker")) {
-  customElements.define("luzmo-date-time-picker", LuzmoDateTimePicker);
-}
-exports.LuzmoDateTimePicker = LuzmoDateTimePicker;
+    `}renderSegmentText(e){const t=e.value===void 0;return L.n(t,()=>e.placeholder??"",()=>e.formatted??"")}handleKeydown(e){var a;const t=e.target,i=t.dataset.type;if(i)switch(e.code){case"ArrowUp":{this.incrementValue(i);break}case"ArrowDown":{this.decrementValue(i);break}case"ArrowRight":{this.focusSegment(t,"next");break}case"ArrowLeft":{this.focusSegment(t,"previous");break}case"Enter":case"Space":{this.commitValue();break}case"Backspace":case"Delete":{e.preventDefault(),((a=this.segments.getByType(i))==null?void 0:a.value)===void 0?this.focusSegment(t,"previous"):this.clearSegmentContent(i);break}}}get modifierParams(){return{dateFormatter:this.dateFormatter,segments:this.segments,currentDate:this.currentDate}}incrementValue(e){const t=new ae(this.modifierParams);this.segments=t.modify(e),this.dispatchInput()}decrementValue(e){const t=new ie(this.modifierParams);this.segments=t.modify(e),this.dispatchInput()}focusSegment(e,t){let i=!1,a=e;for(;!i;){const r=t==="previous"?a.previousElementSibling:a.nextElementSibling;if(!r)break;r.getAttribute("contenteditable")&&(r.focus(),i=!0),a=r}}commitValue(){if(!(this._value&&this.previousCommitedValue&&this._value.compare(this.previousCommitedValue)===0)){if(this._value===void 0&&this.previousCommitedValue===void 0){const e=this.segments.editableValues.every(t=>t===void 0);this.invalid=!e;return}this.invalid=!!(this._value===void 0||this.isNonCompliantValue()),this.previousCommitedValue=this._value,this.dispatchChange()}}clearSegmentContent(e){const t=this.segments.editableValues,i=new te(this.modifierParams);this.segments=i.modify(e);const a=this.segments.editableValues;E(t,a)||this.dispatchInput()}handleInput(e){e.stopPropagation();const t=e.target.dataset.type,i=this.segments.editableValues,a=new re({...this.modifierParams,eventData:e.data,numberParser:this.numberParser});this.segments=a.modify(t),this.updateSegmentContent(this.segments.getByType(t),e.target);const r=this.segments.editableValues;E(i,r)||this.dispatchInput()}updateSegmentContent(e,t){t.textContent=e.value===void 0?e.placeholder:e.formatted}createOutputString(e){return e?_(e)?this._value.toAbsoluteString():new Date(this._value.toString()).toISOString():""}dispatchChange(){const e=this.createOutputString(this._value);this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,cancelable:!0,detail:{value:e}}))}dispatchInput(){const e=this.createOutputString(this._value);this.dispatchEvent(new CustomEvent("input",{bubbles:!0,composed:!0,cancelable:!0,detail:{value:e}}))}setValueFromSegments(){const e=this.segments.getFormattedDate(this.precision);if(!e){this._value&&this.dispatchChange(),this._value=void 0;return}this._value===void 0&&this.dispatchChange();const t=this.mostSpecificDateValue;t?_(t)?this._value=c.$11d87f3f76e88657$export$84c95a83c799e074(e,this._timeZone):C(t)?this._value=c.$11d87f3f76e88657$export$b21e0b124e224484(e):this._value=c.$11d87f3f76e88657$export$93522d1a439f3617(e):this._value=e}setSegments(){var i,a,r,s;const t=new he(this.dateFormatter).createSegments(this.currentDate,this._value!==void 0);if(this.dateFormat){const l=t.all.findIndex(d=>d.type===o.Month),h=t.all.findIndex(d=>d.type===o.Day);if(l!==-1&&h!==-1){if(this.dateFormat==="mmdd"&&l>h){const d=t.all[l];t.all[l]=t.all[h],t.all[h]=d}else if(this.dateFormat==="ddmm"&&h>l){const d=t.all[h];t.all[h]=t.all[l],t.all[l]=d}}}typeof this.dateSeparator=="string"&&this.dateSeparator&&(((a=(i=t.all)==null?void 0:i[1])==null?void 0:a.type)===o.Literal&&(t.all[1].formatted=this.dateSeparator),((s=(r=t.all)==null?void 0:r[3])==null?void 0:s.type)===o.Literal&&(t.all[3].formatted=this.dateSeparator)),this.segments=t}setNumberParser(){this.numberParser=new R.$6c7bd7858deea686$export$cd11ab140839f11d(this._language,{maximumFractionDigits:0})}setDateFormatter(){this.dateFormatter=new c.$fb18d541ea1ad717$export$ad991b66133851cf(this._language,{day:"2-digit",month:"2-digit",year:"numeric",...this.getTimeOptions("2-digit")})}setAriaDateFormatter(){this.ariaDateFormatter=new c.$fb18d541ea1ad717$export$ad991b66133851cf(this._language,{day:"numeric",month:"long",year:"numeric",...this.getTimeOptions("numeric")})}getTimeOptions(e){switch(this.precision){case v.Millisecond:return{hour:e,minute:e,second:e,fractionalSecondDigits:3};case v.Second:return{hour:e,minute:e,second:e};case v.Minute:return{hour:e,minute:e};case v.Hour:return{hour:e};default:return{}}}}p([u.n({type:String,reflect:!0})],m.prototype,"value",2);p([u.n({type:String,reflect:!0})],m.prototype,"min",2);p([u.n({type:String,reflect:!0})],m.prototype,"max",2);p([u.n({type:String,attribute:"date-format",reflect:!0})],m.prototype,"dateFormat",2);p([u.n({type:String,attribute:"date-separator",reflect:!0})],m.prototype,"dateSeparator",2);p([u.n({type:String,reflect:!0})],m.prototype,"precision",1);p([u.n({type:Boolean,reflect:!0})],m.prototype,"invalid",2);p([u.n({type:Boolean,reflect:!0})],m.prototype,"readonly",2);p([u.n({type:Boolean,reflect:!0})],m.prototype,"quiet",2);p([u.n({type:String,reflect:!0})],m.prototype,"placement",2);p([u.n({type:String,attribute:"time-zone",reflect:!0})],m.prototype,"timeZone",2);p([u.n({type:String,reflect:!0})],m.prototype,"language",2);p([u.n({attribute:!1})],m.prototype,"labels",2);p([u.n({type:Boolean,reflect:!0})],m.prototype,"focused",2);p([P.r()],m.prototype,"_value",2);p([P.r()],m.prototype,"_min",2);p([P.r()],m.prototype,"_max",2);p([P.r()],m.prototype,"segments",2);p([P.r()],m.prototype,"isCalendarOpen",2);p([A.e(".editable-segment")],m.prototype,"firstEditableSegment",2);p([A.e(".input")],m.prototype,"input",2);customElements.get("luzmo-date-time-picker")||customElements.define("luzmo-date-time-picker",m);exports.LuzmoDateTimePicker=m;