@esri/calcite-components/dist/components/calcite-date-picker/customElement.d.ts

Web Components for Esri's Calcite Design System.

/// <reference path="../../index.d.ts" />
import type { PublicLitElement as LitElement } from "@arcgis/lumina";
import type { NumberingSystem } from "../../utils/locale.js";
import type { HeadingLevel } from "../functional/Heading.js";

/**
 * @cssproperty [--calcite-date-picker-border-color] - Specifies the component's border color.
 * @cssproperty [--calcite-date-picker-corner-radius] - Specifies the component's border radius.
 * @cssproperty [--calcite-date-picker-range-calendar-divider-color] - When `range` is `true`, specifies the divider color between the component's calendars.
 * @cssproperty [--calcite-date-picker-week-header-text-color] - Specifies the text color of the component's week header.
 * @cssproperty [--calcite-date-picker-header-action-background-color] - Specifies the background color of component`s header actions.
 * @cssproperty [--calcite-date-picker-header-action-background-color-hover] - Specifies the background color of component`s header actions when hovered.
 * @cssproperty [--calcite-date-picker-header-action-background-color-press] - Specifies the background color of component`s header actions when pressed.
 * @cssproperty [--calcite-date-picker-header-action-text-color] - Specifies the text color of the component's header actions.
 * @cssproperty [--calcite-date-picker-header-action-text-color-press] - Specifies the text color of the component's header actions when pressed.
 * @cssproperty [--calcite-date-picker-year-text-color] - Specifies the text color of the component's year and suffix.
 * @cssproperty [--calcite-date-picker-month-select-font-size] - Specifies the font size of the component's month selector.
 * @cssproperty [--calcite-date-picker-month-select-text-color] - Specifies the text color of the component's month selector.
 * @cssproperty [--calcite-date-picker-month-select-icon-color] - Specifies the icon color of the component's month selector.
 * @cssproperty [--calcite-date-picker-month-select-icon-color-hover] - Specifies the icon color of the component's month selector when hovered.
 * @cssproperty [--calcite-date-picker-day-background-color] - Specifies the background color of the component's day elements.
 * @cssproperty [--calcite-date-picker-day-background-color-hover] - Specifies the background color of the component's day elements when hovered.
 * @cssproperty [--calcite-date-picker-day-text-color] - Specifies the text color of the component's day elements.
 * @cssproperty [--calcite-date-picker-day-text-color-hover] - Specifies the text color of the component's day elements when hovered.
 * @cssproperty [--calcite-date-picker-current-day-text-color] - Specifies the text color of the component's current day.
 * @cssproperty [--calcite-date-picker-day-background-color-selected] - Specifies the background color of the component's selected day.
 * @cssproperty [--calcite-date-picker-day-text-color-selected] - Specifies the text color of the component's selected day elements.
 * @cssproperty [--calcite-date-picker-day-range-text-color] - Specifies the text color of component's selected day range.
 * @cssproperty [--calcite-date-picker-day-range-background-color] - Specifies the background color the component's selected day range.
 * @cssproperty [--calcite-date-picker-day-outside-range-background-color-hover] - Specifies the background color of the component's day elements outside the current range when hovered.
 * @cssproperty [--calcite-date-picker-day-outside-range-text-color-hover] - Specifies the text color of the component's day elements outside the current range when hovered.
 */
export abstract class DatePicker extends LitElement {
  /** Specifies the component's active date. */
  accessor activeDate: Date;
  /** When `range` is `true`, specifies the active `range`. Where `"start"` specifies the starting range date and `"end"` the ending range date. */
  accessor activeRange: "start" | "end";
  /**
   * When `range` is `true`, specifies the number of calendars displayed.
   *
   * @default 2
   */
  accessor calendars: 1 | 2;
  /** Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling. */
  accessor headingLevel: HeadingLevel;
  /**
   * Defines the component's layout.
   *
   * @default "horizontal"
   */
  accessor layout: "horizontal" | "vertical";
  /**
   * When the component resides in a form,
   * specifies the latest allowed date (`"yyyy-mm-dd"`).
   */
  accessor max: string;
  /** Specifies the latest allowed date as a full date object (`new Date("yyyy-mm-dd")`). */
  accessor maxAsDate: Date;
  /** Overrides individual strings used by the component. */
  accessor messageOverrides: {
      nextMonth?: string;
      prevMonth?: string;
      monthMenu?: string;
      yearMenu?: string;
      year?: string;
  };
  /**
   * When the component resides in a form,
   * specifies the earliest allowed date (`"yyyy-mm-dd"`).
   */
  accessor min: string;
  /** Specifies the earliest allowed date as a full date object (`new Date("yyyy-mm-dd")`). */
  accessor minAsDate: Date;
  /**
   * Specifies the component's month style.
   *
   * @default "wide"
   */
  accessor monthStyle: "abbreviated" | "wide";
  /** Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed. */
  accessor numberingSystem: NumberingSystem;
  /**
   * When `true`, disables the default behavior on the third click of narrowing or extending the range and instead starts a new range.
   *
   * @default false
   */
  accessor proximitySelectionDisabled: boolean;
  /**
   * When `true`, activates the component's range mode to allow a start and end date.
   *
   * @default false
   */
  accessor range: boolean;
  /**
   * Specifies the size of the component.
   *
   * @default "m"
   */
  accessor scale: "s" | "m" | "l";
  /** Specifies the selected date as a string (`"yyyy-mm-dd"`), or an array of strings for `range` values (`["yyyy-mm-dd", "yyyy-mm-dd"]`). */
  accessor value: string | string[];
  /** Specifies the selected date as a full date object (`new Date("yyyy-mm-dd")`), or an array containing full date objects (`[new Date("yyyy-mm-dd"), new Date("yyyy-mm-dd")]`). */
  accessor valueAsDate: Date | Date[];
  /**
   * Sets focus on the component's first focusable element.
   *
   * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
   */
  setFocus(options?: FocusOptions): Promise<void>;
  /** Fires when a user changes the component's date. For `range` events, use `calciteDatePickerRangeChange`. */
  readonly calciteDatePickerChange: import("@arcgis/lumina").TargetedEvent<this, void>;
  /** Fires when a user changes the component's date `range`. For components without `range` use `calciteDatePickerChange`. */
  readonly calciteDatePickerRangeChange: import("@arcgis/lumina").TargetedEvent<this, void>;
  readonly "@eventTypes": {
    calciteDatePickerChange: DatePicker["calciteDatePickerChange"]["detail"];
    calciteDatePickerRangeChange: DatePicker["calciteDatePickerRangeChange"]["detail"];
  };
}