@esri/calcite-components/dist/components/calcite-input-time-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 { LogicalPlacement, OverlayPositioning } from "../../utils/floating-ui.js";
import type { MutableValidityState } from "../../utils/form.js";
import type { NumberingSystem } from "../../utils/locale.js";
import type { HourFormat } from "../../utils/time.js";
import type { Scale, Status } from "../interfaces.js";
import type { IconName } from "../calcite-icon/interfaces.js";
import type { TimePicker } from "../calcite-time-picker/customElement.js";

/**
 * @cssproperty [--calcite-input-time-picker-background-color] - Specifies the component's background color.
 * @cssproperty [--calcite-input-time-picker-border-color] - Specifies the component's border color.
 * @cssproperty [--calcite-input-time-picker-icon-color] - Specifies the component's icon color.
 * @cssproperty [--calcite-input-time-picker-icon-color-hover] - Specifies the component's icon color when hovered.
 * @cssproperty [--calcite-input-time-picker-shadow] - Specifies the component's shadow.
 * @cssproperty [--calcite-input-time-picker-corner-radius] - Specifies the component's border radius.
 * @cssproperty [--calcite-input-time-picker-input-background-color] - Specifies the component's input background color.
 * @cssproperty [--calcite-input-time-picker-input-text-color] - Specifies the component's input text color.
 * @cssproperty [--calcite-input-time-picker-input-shadow] - Specifies the component's input shadow.
 * @cssproperty [--calcite-input-time-picker-input-corner-radius] - Specifies the component's input border radius.
 * @cssproperty [--calcite-input-time-picker-input-border-color] - Specifies the component's input border color.
 * @cssproperty [--calcite-input-time-picker-digit-text-color] - Specifies the component's digit text color.
 * @cssproperty [--calcite-input-time-picker-digit-icon-color] - Specifies the component's digit icon color.
 * @cssproperty [--calcite-input-time-picker-digit-border-color-press] - Specifies the component's digit border color when pressed.
 * @cssproperty [--calcite-input-time-picker-digit-border-color-hover] - Specifies the component's digit border color when hovered.
 * @cssproperty [--calcite-input-time-picker-action-background-color-hover] - Specifies the background color of the component's actions when hovered.
 * @cssproperty [--calcite-input-time-picker-action-background-color-press] - Specifies the background color of the component's actions when active.
 * @slot [label-content] - A slot for rendering content next to the component's `labelText`.
 */
export abstract class InputTimePicker extends LitElement {
  /**
   * When `true`, prevents interaction and decreases the component's opacity.
   *
   * @default false
   */
  accessor disabled: boolean;
  /**
   * When `true`, prevents focus trapping.
   *
   * @default false
   */
  accessor focusTrapDisabled: boolean;
  /**
   * Specifies the `id` of the component's associated form.
   *
   * When not set, the component is associated with its ancestor form element, if one exists.
   */
  accessor form: string;
  /**
   * Specifies the component's hour format, where:
   *
   * `"user"` displays the user's locale format,
   * `"12"` displays a 12-hour format, and
   * `"24"` displays a 24-hour format.
   *
   * @default "user"
   */
  accessor hourFormat: HourFormat;
  /** Specifies an accessible label for the component. */
  accessor label: string;
  /** Specifies the component's label text. */
  accessor labelText: string;
  /**
   * When the component resides in a form,
   * specifies the maximum `value`.
   *
   * @mdn [max](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time#max)
   */
  accessor max: string;
  /** Overrides individual strings used by the component. */
  accessor messageOverrides: {
      chooseTime?: string;
      fractionalSecond?: string;
      fractionalSecondDown?: string;
      fractionalSecondUp?: string;
      hour?: string;
      hourDown?: string;
      hourUp?: string;
      meridiem?: string;
      meridiemDown?: string;
      meridiemUp?: string;
      minute?: string;
      minuteDown?: string;
      minuteUp?: string;
      required?: string;
      second?: string;
      secondDown?: string;
      secondUp?: string;
  } & TimePicker["messageOverrides"];
  /**
   * When the component resides in a form,
   * specifies the minimum `value`.
   *
   * @mdn [min](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time#min)
   */
  accessor min: string;
  /** Specifies the name of the component. Required to pass the component's `value` on form submission. */
  accessor name: string;
  /** Specifies the Unicode numeral system used by the component for localization. */
  accessor numberingSystem: NumberingSystem;
  /**
   * When `true`, displays the `calcite-time-picker` component.
   *
   * @default false
   */
  accessor open: boolean;
  /**
   * Specifies the type of positioning to use for overlaid content, where:
   *
   * `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and
   *
   * `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
   *
   * @default "absolute"
   */
  accessor overlayPositioning: OverlayPositioning;
  /**
   * Determines the `calcite-time-picker`'s position relative to the input.
   *
   * @default "auto"
   */
  accessor placement: LogicalPlacement;
  /**
   * When `true`, the component's `value` can be read, but controls are not accessible and the `value` cannot be modified.
   *
   * @default false
   * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
   */
  accessor readOnly: boolean;
  /**
   * When `true` and the component resides in a form,
   * the component must have a `value` in order for the form to submit.
   *
   * @default false
   */
  accessor required: boolean;
  /**
   * Specifies the size of the component.
   *
   * @default "m"
   */
  accessor scale: Scale;
  /**
   * Specifies the input field's status, which determines message and icons.
   *
   * @default "idle"
   */
  accessor status: Status;
  /**
   * Specifies the granularity the component's `value` must adhere to (in seconds).
   *
   * @default 60
   */
  accessor step: number;
  /** Specifies the validation icon to display under the component. */
  accessor validationIcon: IconName | boolean;
  /** Specifies the validation message to display under the component. */
  accessor validationMessage: string;
  /**
   * The component's current validation state.
   *
   * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)
   */
  get validity(): MutableValidityState;
  /** The time value in ISO (24-hour) format. */
  accessor value: string;
  /**
   * Updates the component's position.
   *
   * @param delayed - If true, delay the repositioning.
   */
  reposition(delayed?: boolean): Promise<void>;
  /**
   * Sets focus on the component.
   *
   * @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 the component is requested to be closed and before the closing transition begins. */
  readonly calciteInputTimePickerBeforeClose: import("@arcgis/lumina").TargetedEvent<this, void>;
  /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
  readonly calciteInputTimePickerBeforeOpen: import("@arcgis/lumina").TargetedEvent<this, void>;
  /** Fires when the component's `value` is modified by the user. */
  readonly calciteInputTimePickerChange: import("@arcgis/lumina").TargetedEvent<this, void>;
  /** Fires when the component is closed and animation is complete. */
  readonly calciteInputTimePickerClose: import("@arcgis/lumina").TargetedEvent<this, void>;
  /** Fires when the component is opened and animation is complete. */
  readonly calciteInputTimePickerOpen: import("@arcgis/lumina").TargetedEvent<this, void>;
  readonly "@eventTypes": {
    calciteInputTimePickerBeforeClose: InputTimePicker["calciteInputTimePickerBeforeClose"]["detail"];
    calciteInputTimePickerBeforeOpen: InputTimePicker["calciteInputTimePickerBeforeOpen"]["detail"];
    calciteInputTimePickerChange: InputTimePicker["calciteInputTimePickerChange"]["detail"];
    calciteInputTimePickerClose: InputTimePicker["calciteInputTimePickerClose"]["detail"];
    calciteInputTimePickerOpen: InputTimePicker["calciteInputTimePickerOpen"]["detail"];
  };
}