@progress/kendo-react-common/unstyled/dateinputs.mjs

React Common package delivers common utilities that can be used with the KendoReact UI components. KendoReact Common Utilities package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { getClassByName as d } from "./interfaces/common.mjs";
import { base as e, dateInputs as n, elements as b, containers as o, states as s, orientationMap as B, actions as y, components as v, inputPrefix as p, sizeMap as h, fillModeMap as z, roundedMap as k, calendarPrefix as c, cssUtils as I, directionMap as P, inputs as W } from "./json-classes.mjs";
const x = {
  footer: {
    main: `${e.prefix}-${n.time}-${b.footer}`,
    actions: `${e.prefix}-${o.actions}`,
    stretched: `${e.prefix}-${o.actions}-${s.stretched}`,
    horizontal: `${e.prefix}-${o.actions}-${B.horizontal}`
  },
  cancel: `${e.prefix}-${n.time}-${y.cancel}`,
  accept: `${e.prefix}-${n.time}-${y.accept}`,
  part: {
    main: `${e.prefix}-${n.time}-${o.part}`,
    disabled: `${e.prefix}-${s.disabled}`
  },
  header: `${e.prefix}-${n.time}-${b.header}`,
  now: `${e.prefix}-${n.time}-${n.now}`,
  listContainer: `${e.prefix}-${n.time}-${o.list}-${o.container}`,
  highlight: `${e.prefix}-${n.time}-${s.highlight}`,
  listWrapper: {
    main: `${e.prefix}-${n.time}-${o.list}-${o.wrapper}`,
    focused: `${e.prefix}-${s.focus}`
  },
  list: `${e.prefix}-${n.time}-${o.list}`,
  container: {
    main: `${e.prefix}-${n.time}-${o.container}`,
    scrollable: `${e.prefix}-${s.scrollable}`,
    content: `${e.prefix}-${o.content}`
  },
  containerSelector: `${e.prefix}-${n.time}-${o.container}`,
  separator: `${e.prefix}-${n.time}-${o.separator}`,
  ul: `${e.prefix}-${e.reset}`,
  li: `${e.prefix}-${o.item}`,
  title: `${e.prefix}-${b.title}`,
  scrollablePlaceholder: `${e.prefix}-${s.scrollable}-${o.placeholder}`
}, R = {
  footer: (t) => {
    const { c: a = x } = t, r = a.footer;
    return {
      [r.main]: !0,
      [r.actions]: !0,
      [r.stretched]: !0,
      [r.horizontal]: !0
    };
  },
  cancel: d(x, "cancel"),
  accept: d(x, "accept"),
  part: (t) => {
    const { c: a = x, mobileMode: r, disabled: i } = t, l = a.part;
    return {
      [l.main]: r,
      [l.disabled]: i
    };
  },
  header: d(x, "header"),
  now: d(x, "now"),
  listContainer: d(x, "listContainer"),
  highlight: d(x, "highlight"),
  listWrapper: (t) => {
    const { c: a = x, focused: r } = t, i = a.listWrapper;
    return {
      [i.main]: !0,
      [i.focused]: r
    };
  },
  list: d(x, "list"),
  container: (t) => {
    const { c: a = x, content: r, scrollable: i } = t, l = a.container;
    return {
      [l.main]: !0,
      [l.content]: r,
      [l.scrollable]: i
    };
  },
  containerSelector: d(x, "containerSelector"),
  separator: d(x, "separator"),
  ul: d(x, "ul"),
  li: d(x, "li"),
  title: d(x, "title"),
  scrollablePlaceholder: d(x, "scrollablePlaceholder")
}, q = {
  wrapper: {
    main: `${e.prefix}-${v.timepicker}`,
    input: `${p}`,
    size: {
      small: `${p}-${h.small}`,
      medium: `${p}-${h.medium}`,
      large: `${p}-${h.large}`
    },
    fillMode: {
      solid: `${p}-${z.solid}`,
      outline: `${p}-${z.outline}`,
      flat: `${p}-${z.flat}`
    },
    rounded: {
      small: `${e.prefix}-${e.rounded}-${k.small}`,
      medium: `${e.prefix}-${e.rounded}-${k.medium}`,
      large: `${e.prefix}-${e.rounded}-${k.large}`
    },
    disabled: `${e.prefix}-${s.disabled}`,
    required: `${e.prefix}-${s.required}`,
    invalid: `${e.prefix}-${s.invalid}`
  },
  inputButton: `${p}-${b.button}`,
  popup: {
    main: `${e.prefix}-${v.timepicker}-${o.popup}`,
    container: `${e.prefix}-${o.list}-${o.container}`
  },
  timeSelector: {
    main: `${e.prefix}-${n.timeselector}`,
    size: {
      medium: `${e.prefix}-${n.timeselector}-${h.medium}`,
      large: `${e.prefix}-${n.timeselector}-${h.large}`
    },
    disabled: `${e.prefix}-${s.disabled}`,
    reset: `${e.prefix}-${e.reset}`
  }
}, U = {
  wrapper: (t) => {
    const { c: a = q, size: r, fillMode: i, rounded: l, disabled: m, required: g, invalid: M } = t, $ = a.wrapper;
    return {
      [$.main]: !0,
      [$.input]: !0,
      [$.size[r]]: $.size[r],
      [`${p}-${r}`]: r && !$.size[r],
      [$.fillMode[i]]: $.fillMode[i],
      [$.rounded[l]]: $.rounded[l],
      [`${e.prefix}-${e.rounded}-${l}`]: l && !$.rounded[l],
      [$.disabled]: m,
      [$.invalid]: M,
      [$.required]: g
    };
  },
  inputButton: d(q, "inputButton"),
  popup: (t) => {
    const { c: a = q } = t, r = a.popup;
    return {
      [r.main]: !0,
      [r.container]: !0
    };
  },
  timeSelector: (t) => {
    const { c: a = q, disabled: r, mobileMode: i } = t, l = a.timeSelector;
    return {
      [l.main]: !0,
      [l.size.large]: i,
      [l.reset]: i,
      [l.size.medium]: !i,
      [l.disabled]: r
    };
  }
}, u = {
  wrapper: {
    main: `${c}`,
    infinite: `${c}-${e.infinite}`,
    disabled: `${e.prefix}-${s.disabled}`,
    weekNumber: `${e.prefix}-${n.week}-${n.number}`,
    size: {
      medium: `${c}-${h.medium}`,
      large: `${c}-${h.large}`
    }
  },
  view: {
    main: `${c}-${o.view}`,
    vertical: `${e.prefix}-${I.vstack}`,
    month: `${c}-${n.month}${o.view}`,
    year: `${c}-${n.year}${o.view}`,
    decade: `${c}-${n.decade}${o.view}`,
    century: `${c}-${n.century}${o.view}`
  },
  navigation: `${c}-${n.navigation}`,
  navigationHighlight: `${c}-${n.navigation}-${s.highlight}`,
  table: {
    main: `${c}-${b.table}`,
    weekdays: `${c}-${n.weekdays}`
  },
  thead: `${c}-${b.thead}`,
  tr: `${c}-${b.tr}`,
  th: `${c}-${b.th}`,
  caption: `${c}-${b.caption}`,
  tbody: `${c}-${b.tbody}`,
  ul: `${e.prefix}-${e.reset}`,
  li: "",
  td: {
    main: `${c}-${b.td}`,
    rangeStart: `${e.prefix}-${n.range}-${P.start}`,
    rangeEnd: `${e.prefix}-${n.range}-${P.end}`,
    rangeMid: `${e.prefix}-${n.range}-${P.mid}`,
    rangeSplitEnd: `${e.prefix}-${n.range}-${y.split}-${P.end}`,
    rangeSplitStart: `${e.prefix}-${n.range}-${y.split}-${P.start}`,
    active: `${e.prefix}-${s.active}`,
    focused: `${e.prefix}-${e.state}-${s.pending}-${s.focus}`,
    selected: `${e.prefix}-${s.selected}`,
    today: `${e.prefix}-${n.today}`,
    weekend: `${e.prefix}-${n.weekend}`,
    disabled: `${e.prefix}-${s.disabled}`,
    isOtherMonth: `${e.prefix}-${n.other}-${n.month}`,
    isEmpty: `${e.prefix}-${s.empty}`,
    isWeek: `${e.prefix}-${s.alt}`
  },
  title: `${c}-${b.title}`,
  header: {
    main: `${c}-${b.header}`,
    vertical: `${e.prefix}-${I.hstack}`
  },
  spacer: `${e.prefix}-${o.spacer}`,
  nav: `${c}-${o.nav}`,
  today: {
    main: `${c}-${o.nav}-${n.today}`,
    disabled: `${e.prefix}-${s.disabled}`
  },
  scrollable: {
    main: `${e.prefix}-${s.scrollable}`,
    content: `${e.prefix}-${o.content}`,
    horizontal: `${e.prefix}-${s.scrollable}-${B.horizontal}`
  },
  scrollableSelector: `${e.prefix}-${s.scrollable}`,
  scrollablePlaceholder: {
    main: `${e.prefix}-${s.scrollable}-${o.placeholder}`,
    horizontal: `${e.prefix}-${s.scrollable}-${B.horizontal}-${o.placeholder}`
  },
  link: `${e.prefix}-${b.link}`,
  navigationMarker: `${c}-${n.navigation}-${n.marker}`
}, j = {
  wrapper: (t) => {
    const { c: a = u, disabled: r, weekNumber: i, mobileMode: l } = t, m = a.wrapper;
    return {
      [m.main]: !0,
      [m.infinite]: !0,
      [m.disabled]: r,
      [m.weekNumber]: i,
      [m.size.large]: l,
      [m.size.medium]: !l
    };
  },
  view: (t) => {
    const { c: a = u, month: r, year: i, decade: l, century: m } = t, g = a.view;
    return {
      [g.main]: !0,
      [g.vertical]: !0,
      [g.month]: r,
      [g.year]: i,
      [g.decade]: l,
      [g.century]: m
    };
  },
  navigation: d(u, "navigation"),
  navigationHighlight: d(u, "navigationHighlight"),
  table: (t) => {
    const { c: a = u, weekdays: r } = t, i = a.table;
    return {
      [i.main]: !0,
      [i.weekdays]: r
    };
  },
  thead: d(u, "thead"),
  tr: d(u, "tr"),
  th: d(u, "th"),
  tbody: d(u, "tbody"),
  title: d(u, "title"),
  header: (t) => {
    const { c: a = u, vertical: r } = t, i = a.header;
    return {
      [i.main]: !0,
      [i.vertical]: r
    };
  },
  today: (t) => {
    const { c: a = u, disabled: r } = t, i = a.today;
    return {
      [i.main]: !0,
      [i.disabled]: r
    };
  },
  spacer: d(u, "spacer"),
  nav: d(u, "nav"),
  caption: d(u, "caption"),
  ul: d(u, "ul"),
  li: d(u, "li"),
  td: (t) => {
    const {
      c: a = u,
      rangeStart: r,
      rangeEnd: i,
      rangeMid: l,
      rangeSplitEnd: m,
      rangeSplitStart: g,
      active: M,
      focused: $,
      selected: D,
      today: F,
      weekend: N,
      disabled: T,
      isOtherMonth: G,
      isEmpty: C,
      isWeek: E
    } = t, f = a.td;
    return E ? {
      [f.main]: !0,
      [f.isWeek]: E
    } : C ? {
      [f.main]: !0,
      [f.isEmpty]: C
    } : {
      [f.main]: !0,
      [f.rangeStart]: r,
      [f.rangeEnd]: i,
      [f.rangeMid]: l,
      [f.rangeSplitEnd]: m,
      [f.rangeSplitStart]: g,
      [f.active]: M,
      [f.focused]: $,
      [f.selected]: D,
      [f.today]: F,
      [f.weekend]: N,
      [f.disabled]: T,
      [f.isOtherMonth]: G
    };
  },
  scrollable: (t) => {
    const { c: a = u, horizontal: r } = t, i = a.scrollable;
    return {
      [i.main]: !0,
      [i.content]: !0,
      [i.horizontal]: r
    };
  },
  scrollableSelector: d(u, "scrollableSelector"),
  scrollablePlaceholder: (t) => {
    const { c: a = u, horizontal: r } = t, i = a.scrollablePlaceholder;
    return {
      [i.main]: !0,
      [i.horizontal]: r
    };
  },
  link: d(u, "link"),
  navigationMarker: (t) => {
    const { c: a = u, isRangeStart: r } = t;
    return {
      [a.navigationMarker]: r
    };
  }
}, S = {
  wrapper: {
    main: `${e.prefix}-${v.dateinput}`,
    input: `${p}`,
    size: {
      small: `${p}-${h.small}`,
      medium: `${p}-${h.medium}`,
      large: `${p}-${h.large}`
    },
    fillMode: {
      solid: `${p}-${z.solid}`,
      outline: `${p}-${z.outline}`,
      flat: `${p}-${z.flat}`
    },
    rounded: {
      small: `${e.prefix}-${e.rounded}-${k.small}`,
      medium: `${e.prefix}-${e.rounded}-${k.medium}`,
      large: `${e.prefix}-${e.rounded}-${k.large}`
    },
    disabled: `${e.prefix}-${s.disabled}`,
    required: `${e.prefix}-${s.required}`,
    invalid: `${e.prefix}-${s.invalid}`
  },
  inputInner: `${p}-${W.inner}`,
  inputSpinner: {
    main: `${p}-${W.spinner}`,
    button: `${e.prefix}-${W.spin}-${b.button}`
  },
  spinnerIncrease: `${e.prefix}-${W.spinner}-${y.increase}`,
  spinnerDecrease: `${e.prefix}-${W.spinner}-${y.decrease}`,
  clearButton: `${e.prefix}-${e.clear}-${e.value}`
}, A = {
  wrapper: (t) => {
    const { c: a = S, size: r, fillMode: i, rounded: l, disabled: m, required: g, invalid: M } = t, $ = a.wrapper;
    return {
      [$.main]: !0,
      [$.input]: !0,
      [$.size[r]]: $.size[r],
      [`${p}-${r}`]: r && !$.size[r],
      [$.fillMode[i]]: $.fillMode[i],
      [$.rounded[l]]: $.rounded[l],
      [`${e.prefix}-${e.rounded}-${l}`]: l && !$.rounded[l],
      [$.disabled]: m,
      [$.invalid]: M,
      [$.required]: g
    };
  },
  inputInner: d(S, "inputInner"),
  inputSpinner: (t) => {
    const { c: a = S } = t, r = a.inputSpinner;
    return {
      [r.main]: !0,
      [r.button]: !0
    };
  },
  spinnerIncrease: d(S, "spinnerIncrease"),
  spinnerDecrease: d(S, "spinnerDecrease"),
  clearButton: d(S, "clearButton")
}, w = {
  wrapper: {
    main: `${e.prefix}-${v.datetimepicker}`,
    input: `${p}`,
    size: {
      small: `${p}-${h.small}`,
      medium: `${p}-${h.medium}`,
      large: `${p}-${h.large}`
    },
    fillMode: {
      solid: `${p}-${z.solid}`,
      outline: `${p}-${z.outline}`,
      flat: `${p}-${z.flat}`
    },
    rounded: {
      small: `${e.prefix}-${e.rounded}-${k.small}`,
      medium: `${e.prefix}-${e.rounded}-${k.medium}`,
      large: `${e.prefix}-${e.rounded}-${k.large}`
    },
    disabled: `${e.prefix}-${s.disabled}`,
    required: `${e.prefix}-${s.required}`,
    invalid: `${e.prefix}-${s.invalid}`
  },
  inputButton: `${p}-${b.button}`,
  popup: {
    main: `${e.prefix}-${v.datetime}-${o.container}`,
    reset: `${e.prefix}-${e.reset}`
  },
  wrap: {
    main: `${e.prefix}-${v.datetime}-${o.wrap}`,
    date: `${e.prefix}-${n.date}-${o.tab}`,
    time: `${e.prefix}-${n.time}-${o.tab}`,
    disabled: `${e.prefix}-${s.disabled}`
  },
  timeFooter: {
    main: `${e.prefix}-${v.datetime}-${b.footer}`,
    actions: `${e.prefix}-${o.actions}`,
    stretched: `${e.prefix}-${o.actions}-${s.stretched}`
  },
  buttonGroup: `${e.prefix}-${v.datetime}-${v.buttongroup}`,
  selector: `${e.prefix}-${v.datetime}-${n.selector}`,
  calendarWrap: `${e.prefix}-${v.datetime}-${c}-${o.wrap}`,
  timeWrap: `${e.prefix}-${v.datetime}-${n.time}-${o.wrap}`,
  timeSelector: {
    main: `${e.prefix}-${n.timeselector}`,
    size: {
      medium: `${e.prefix}-${n.timeselector}-${h.medium}`,
      large: `${e.prefix}-${n.timeselector}-${h.large}`
    },
    disabled: `${e.prefix}-${s.disabled}`,
    reset: `${e.prefix}-${e.reset}`
  }
}, J = {
  wrapper: (t) => {
    const { c: a = w, size: r, fillMode: i, rounded: l, disabled: m, required: g, invalid: M } = t, $ = a.wrapper;
    return {
      [$.main]: !0,
      [$.input]: !0,
      [$.size[r]]: $.size[r],
      [`${p}-${r}`]: r && !$.size[r],
      [$.fillMode[i]]: $.fillMode[i],
      [$.rounded[l]]: $.rounded[l],
      [`${e.prefix}-${e.rounded}-${l}`]: l && !$.rounded[l],
      [$.disabled]: m,
      [$.invalid]: M,
      [$.required]: g
    };
  },
  inputButton: d(w, "inputButton"),
  popup: (t) => {
    const { c: a = w } = t, r = a.popup;
    return {
      [r.main]: !0,
      [r.reset]: !0
    };
  },
  wrap: (t) => {
    const { c: a = w, disabled: r, date: i, time: l } = t, m = a.wrap;
    return {
      [m.main]: !0,
      [m.time]: l,
      [m.date]: i,
      [m.disabled]: r
    };
  },
  timeFooter: (t) => {
    const { c: a = w } = t, r = a.timeFooter;
    return {
      [r.main]: !0,
      [r.actions]: !0,
      [r.stretched]: !0
    };
  },
  buttonGroup: d(w, "buttonGroup"),
  selector: d(w, "selector"),
  calendarWrap: d(w, "calendarWrap"),
  timeWrap: d(w, "timeWrap"),
  timeSelector: (t) => {
    const { c: a = w, mobileMode: r } = t, i = a.timeSelector;
    return {
      [i.main]: r,
      [i.size.large]: r,
      [i.reset]: r
    };
  }
};
export {
  j as uCalendar,
  A as uDateInput,
  J as uDateTimePicker,
  R as uTime,
  U as uTimePicker
};