@esri/calcite-components 5.0.0-next.9 → 5.0.0-next.90

package/dist/components/calcite-input-date-picker/customElement.d.ts

@@ -1,201 +1,235 @@
 /// <reference path="../../index.d.ts" />
-import { PropertyValues } from 'lit';
-import { Ref } from 'lit-html/directives/ref.js';
-import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
-import { FlipPlacement, FloatingUIComponent, MenuPlacement, OverlayPositioning } from '../../utils/floating-ui';
-import { FormComponent, MutableValidityState } from '../../utils/form';
-import { InteractiveComponent } from '../../utils/interactive';
-import { LabelableComponent } from '../../utils/label';
-import { NumberingSystem } from '../../utils/locale';
-import { HeadingLevel } from '../functional/Heading';
-import { Status } from '../interfaces';
-import { IconName } from '../calcite-icon/interfaces';
-import { DatePicker } from '../calcite-date-picker/customElement.js';
-import { Label } from '../calcite-label/customElement.js';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { FlipPlacement, MenuPlacement, OverlayPositioning } from "../../utils/floating-ui.js";
+import type { MutableValidityState } from "../../utils/form.js";
+import type { NumberingSystem } from "../../utils/locale.js";
+import type { HeadingLevel } from "../functional/Heading.js";
+import type { Status } from "../interfaces.js";
+import type { IconName } from "../calcite-icon/interfaces.js";
+import type { DatePicker } from "../calcite-date-picker/customElement.js";
 
-/** @slot [label-content] - A slot for rendering content next to the component's `labelText`. */
-export declare class InputDatePicker extends LitElement {
-    /**
-     * Specifies the number of calendars displayed when `range` is `true`.
-     *
-     * @default 2
-     */
-    calendars: 1 | 2;
-    /**
-     * When `true`, interaction is prevented and the component is displayed with lower opacity.
-     *
-     * @default false
-     */
-    disabled: boolean;
-    /** Specifies the component's fallback `calcite-date-picker` `placement` when it's initial or specified `placement` has insufficient space available. */
-    flipPlacements: FlipPlacement[];
-    /**
-     * When `true`, prevents focus trapping.
-     *
-     * @default false
-     */
-    focusTrapDisabled: boolean;
-    /**
-     * The `id` of the form that will be associated with the component.
-     *
-     * When not set, the component will be associated with its ancestor form element, if any.
-     */
-    form: string;
-    /** Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling. */
-    headingLevel: HeadingLevel;
-    /** Accessible name for the component. */
-    label: string;
-    /** When provided, displays label text on the component. */
-    labelText: string;
-    /**
-     * Defines the layout of the component.
-     *
-     * @default "horizontal"
-     */
-    layout: "horizontal" | "vertical";
-    /**
-     * When the component resides in a form,
-     * specifies the latest allowed date ("yyyy-mm-dd").
-     */
-    max: string;
-    /** Specifies the latest allowed date as a full date object. */
-    maxAsDate: Date;
-    /** Use this property to override individual strings used by the component. */
-    messageOverrides?: typeof this.messages._overrides & DatePicker["messageOverrides"];
-    /**
-     * When the component resides in a form,
-     * specifies the earliest allowed date ("yyyy-mm-dd").
-     */
-    min: string;
-    /** Specifies the earliest allowed date as a full date object. */
-    minAsDate: Date;
-    /**
-     * Specifies the monthStyle used by the component.
-     *
-     * @default "wide"
-     */
-    monthStyle: "abbreviated" | "wide";
-    /**
-     * Specifies the name of the component.
-     *
-     * Required to pass the component's `value` on form submission.
-     */
-    name: string;
-    /** Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed. */
-    numberingSystem: NumberingSystem;
-    /**
-     * When `true`, displays the `calcite-date-picker` component.
-     *
-     * @default false
-     */
-    open: boolean;
-    /**
-     * Determines the type of positioning to use for the overlaid content.
-     *
-     * Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.
-     *
-     * `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
-     *
-     * @default "absolute"
-     */
-    overlayPositioning: OverlayPositioning;
-    /**
-     * Specifies the placement of the `calcite-date-picker` relative to the component.
-     *
-     * @default "bottom-start"
-     */
-    placement: MenuPlacement;
-    /**
-     * When `true`, disables the default behavior on the third click of narrowing or extending the range.
-     * Instead starts a new range.
-     *
-     * @default false
-     */
-    proximitySelectionDisabled: boolean;
-    /**
-     * When `true`, activates a range for the component.
-     *
-     * @default false
-     */
-    range: boolean;
-    /**
-     * When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified.
-     *
-     * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
-     * @default false
-     */
-    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
-     */
-    required: boolean;
-    /**
-     * Specifies the size of the component.
-     *
-     * @default "m"
-     */
-    scale: "s" | "m" | "l";
-    /**
-     * Specifies the status of the input field, which determines message and icons.
-     *
-     * @default "idle"
-     */
-    status: Status;
-    /** Specifies the validation icon to display under the component. */
-    validationIcon: IconName | boolean;
-    /** Specifies the validation message to display under the component. */
-    validationMessage: string;
-    /**
-     * The current validation state of the component.
-     *
-     * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)
-     */
-    readonly validity: MutableValidityState;
-    /** Selected date as a string in ISO format (`"yyyy-mm-dd"`). */
-    get value(): string | string[];
-    set value(value: string | string[]);
-    /** The component's value as a full date object. */
-    valueAsDate: Date | Date[];
-    /**
-     * Updates the position of the component.
-     *
-     * @param delayed If true, the repositioning is delayed.
-     * @returns void
-     */
-    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 calciteInputDatePickerBeforeClose: TargetedEvent<this, void>;
-    /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
-    readonly calciteInputDatePickerBeforeOpen: TargetedEvent<this, void>;
-    /** Fires when the component's `value` changes. */
-    readonly calciteInputDatePickerChange: TargetedEvent<this, void>;
-    /** Fires when the component is closed and animation is complete. */
-    readonly calciteInputDatePickerClose: TargetedEvent<this, void>;
-    /** Fires when the component is open and animation is complete. */
-    readonly calciteInputDatePickerOpen: TargetedEvent<this, void>;
-    private messages: {
-        chooseDate: string;
-        date: string;
-        dateFormat: string;
-        endDate: string;
-        required: string;
-        startDate: string;
-    } & import('@arcgis/lumina/controllers').T9nMeta<{
-        chooseDate: string;
-        date: string;
-        dateFormat: string;
-        endDate: string;
-        required: string;
-        startDate: string;
-    }>;
-}
+/**
+ * @cssproperty [--calcite-input-date-picker-actions-icon-color] - Specifies the component's actions icon color.
+ * @cssproperty [--calcite-input-date-picker-actions-icon-color-hover] - Specifies the component's actions icon color on hover.
+ * @cssproperty [--calcite-input-date-picker-background-color] - Specifies the component's input background color.
+ * @cssproperty [--calcite-input-date-picker-border-color] - Specifies the component's input border color.
+ * @cssproperty [--calcite-input-date-picker-calendar-actions-background-color] - Specifies the background color of the component's calendar actions.
+ * @cssproperty [--calcite-input-date-picker-calendar-actions-background-color-hover] - Specifies the background color of the component's calendar actions when hovered.
+ * @cssproperty [--calcite-input-date-picker-calendar-actions-background-color-press] - Specifies the background color of the component's calendar actions when pressed.
+ * @cssproperty [--calcite-input-date-picker-calendar-actions-text-color] - Specifies the text color of the component's calendar actions.
+ * @cssproperty [--calcite-input-date-picker-calendar-actions-text-color-press] - Specifies the text color of the component's calendar actions when pressed.
+ * @cssproperty [--calcite-input-date-picker-calendar-border-color] - Specifies the border color of the component's calendar.
+ * @cssproperty [--calcite-input-date-picker-calendar-corner-radius] - Specifies the corner radius of the component's calendar.
+ * @cssproperty [--calcite-input-date-picker-calendar-current-day-text-color] - Specifies the text color of the component's calendar current day element.
+ * @cssproperty [--calcite-input-date-picker-calendar-day-background-color] - Specifies the background color of the component's calendar day elements.
+ * @cssproperty [--calcite-input-date-picker-calendar-day-background-color-hover] - Specifies the background color of the component's calendar day elements when hovered.
+ * @cssproperty [--calcite-input-date-picker-calendar-day-current-text-color] - [Deprecated] Use `--calcite-input-date-picker-calendar-current-day-text-color`. Specifies the text color of current day of the component's date-picker.
+ * @cssproperty [--calcite-input-date-picker-calendar-day-range-text-color] - Specifies the text color of the component's calendar selected day range.
+ * @cssproperty [--calcite-input-date-picker-calendar-day-text-color-selected] - Specifies the text color of component's calendar selected day.
+ * @cssproperty [--calcite-input-date-picker-calendar-day-outside-range-background-color-hover] - Specifies the background color of the component's calendar day elements outside the current range when hovered.
+ * @cssproperty [--calcite-input-date-picker-calendar-day-outside-range-text-color-hover] - Specifies the text color of the component's calendar day elements outside the current range when hovered.
+ * @cssproperty [--calcite-input-date-picker-calendar-day-text-color] - Specifies the text color of the component's calendar day elements.
+ * @cssproperty [--calcite-input-date-picker-calendar-day-text-color-hover] - Specifies the text color of the component's calendar day elements when hovered.
+ * @cssproperty [--calcite-input-date-picker-calendar-selected-background-color] - Specifies the background color of the component's calendar selected day and day range.
+ * @cssproperty [--calcite-input-date-picker-calendar-shadow] - Specifies the component's calendar shadow.
+ * @cssproperty [--calcite-input-date-picker-calendar-icon-color] - Specifies the component's calendar icon color.
+ * @cssproperty [--calcite-input-date-picker-calendar-icon-color-hover] - Specifies the component's calendar icon color when hovered.
+ * @cssproperty [--calcite-input-date-picker-calendar-month-select-text-color] - Specifies the text color of the component's calendar selected month.
+ * @cssproperty [--calcite-input-date-picker-calendar-range-divider-color] - When `range` is `true`, specifies the divider color between the component's calendars.
+ * @cssproperty [--calcite-input-date-picker-calendar-text-color] - Specifies the text color of the component's calendar week, year & suffix.
+ * @cssproperty [--calcite-input-date-picker-corner-radius] - Specifies the component's input corner radius.
+ * @cssproperty [--calcite-input-date-picker-divider-color] - When `range` is `true`, specifies the component's divider color between two inputs.
+ * @cssproperty [--calcite-input-date-picker-icon-color] - Specifies the component's input icon color.
+ * @cssproperty [--calcite-input-date-picker-placeholder-text-color] - Specifies the component's input placeholder text color.
+ * @cssproperty [--calcite-input-date-picker-shadow] - Specifies the component's input shadow.
+ * @cssproperty [--calcite-input-date-picker-text-color] - Specifies the component's input text color.
+ * @slot [label-content] - A slot for rendering content next to the component's `labelText`.
+ */
+export abstract class InputDatePicker extends LitElement {
+  /**
+   * When `range` is `true`, specifies the number of calendars displayed.
+   *
+   * @default 2
+   */
+  accessor calendars: 1 | 2;
+  /**
+   * When `true`, prevents interaction and decreases the component's opacity.
+   *
+   * @default false
+   */
+  accessor disabled: boolean;
+  /** Specifies the component's fallback `placement` for slotted content when it's initial or specified `placement` has insufficient space available. */
+  accessor flipPlacements: FlipPlacement[];
+  /**
+   * 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 heading level number of the component's `heading` for proper document structure, without affecting visual styling. */
+  accessor headingLevel: HeadingLevel;
+  /** Specifies an accessible label for the component. */
+  accessor label: string;
+  /** Specifies the component's label text. */
+  accessor labelText: string;
+  /**
+   * 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. */
+  accessor maxAsDate: Date;
+  /** Overrides individual strings used by the component. */
+  accessor messageOverrides: {
+      chooseDate?: string;
+      date?: string;
+      dateFormat?: string;
+      endDate?: string;
+      required?: string;
+      startDate?: string;
+  } & DatePicker["messageOverrides"];
+  /**
+   * 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. */
+  accessor minAsDate: Date;
+  /**
+   * Specifies the component's month style.
+   *
+   * @default "wide"
+   */
+  accessor monthStyle: "abbreviated" | "wide";
+  /** 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. This property cannot be dynamically changed. */
+  accessor numberingSystem: NumberingSystem;
+  /**
+   * When `true`, displays the `calcite-date-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-date-picker`'s placement relative to the input.
+   *
+   * @default "bottom-start"
+   */
+  accessor placement: MenuPlacement;
+  /**
+   * When `true`, disables the default behavior on the third click of narrowing or extending the range.
+   * Instead starts a new range.
+   *
+   * @default false
+   */
+  accessor proximitySelectionDisabled: boolean;
+  /**
+   * When `true`, activates a range for the component.
+   *
+   * @default false
+   */
+  accessor range: boolean;
+  /**
+   * 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: "s" | "m" | "l";
+  /**
+   * Specifies the input field's status, which determines message and icons.
+   *
+   * @default "idle"
+   */
+  accessor status: Status;
+  /**
+   * When `true` and the component is `open`, disables top layer placement.
+   *
+   * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
+   *
+   * @default false
+   * @mdn [Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
+   */
+  accessor topLayerDisabled: boolean;
+  /** 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;
+  /** Selected date as a string in ISO format (`"yyyy-mm-dd"`). */
+  accessor value: string | string[];
+  /** The component's `value` as a full date object. */
+  accessor valueAsDate: Date | Date[];
+  /**
+   * Updates the component's position.
+   *
+   * @param delayed - If true, the repositioning is delayed.
+   * @returns void
+   */
+  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 calciteInputDatePickerBeforeClose: 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 calciteInputDatePickerBeforeOpen: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the component's `value` changes. */
+  readonly calciteInputDatePickerChange: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the component is closed and animation is complete. */
+  readonly calciteInputDatePickerClose: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the component is opened and animation is complete. */
+  readonly calciteInputDatePickerOpen: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    calciteInputDatePickerBeforeClose: InputDatePicker["calciteInputDatePickerBeforeClose"]["detail"];
+    calciteInputDatePickerBeforeOpen: InputDatePicker["calciteInputDatePickerBeforeOpen"]["detail"];
+    calciteInputDatePickerChange: InputDatePicker["calciteInputDatePickerChange"]["detail"];
+    calciteInputDatePickerClose: InputDatePicker["calciteInputDatePickerClose"]["detail"];
+    calciteInputDatePickerOpen: InputDatePicker["calciteInputDatePickerOpen"]["detail"];
+  };
+}