@esri/calcite-components 5.0.0-next.73 → 5.0.0-next.74

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

@@ -1,78 +1,77 @@
 /// <reference path="../../index.d.ts" />
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { Scale } from '../interfaces';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina/PublicLitElement";
+import type { Scale } from "../interfaces.js";
 
-export declare class DatePickerDay extends LitElement {
-    /**
-     * When `true`, the component is active.
-     *
-     * @default false
-     */
-    active: boolean;
-    /**
-     * Date is in the current month.
-     *
-     * @default false
-     */
-    currentMonth: boolean;
-    /**
-     * Day of the month to be shown.
-     *
-     * @required
-     */
-    day: number;
-    /**
-     * When `true`, interaction is prevented and the component is displayed with lower opacity.
-     *
-     * @default false
-     */
-    disabled: boolean;
-    /**
-     * Date is the end of date range.
-     *
-     * @default false
-     */
-    endOfRange: boolean;
-    /**
-     * Date is currently highlighted as part of the range,
-     *
-     * @default false
-     */
-    highlighted: boolean;
-    /**
-     * When `true`, activates the component's range mode to allow a start and end date.
-     *
-     * @default false
-     */
-    range: boolean;
-    /**
-     * Date is being hovered and within the set range.
-     *
-     * @default false
-     */
-    rangeHover: boolean;
-    /** Specifies the size of the component. */
-    scale: Scale;
-    /**
-     * When `true`, the component is selected.
-     *
-     * @default false
-     */
-    selected: boolean;
-    /**
-     * Date is the start of date range.
-     *
-     * @default false
-     */
-    startOfRange: boolean;
-    /** The component's value. */
-    value: Date;
-    /**
-     * Sets focus on the component.
-     *
-     * @param options
-     * @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>;
-}
+export abstract class DatePickerDay extends LitElement {
+  /**
+   * When `true`, the component is active.
+   *
+   * @default false
+   */
+  accessor active: boolean;
+  /**
+   * Date is in the current month.
+   *
+   * @default false
+   */
+  accessor currentMonth: boolean;
+  /**
+   * Day of the month to be shown.
+   *
+   * @required
+   */
+  accessor day: number;
+  /**
+   * When `true`, interaction is prevented and the component is displayed with lower opacity.
+   *
+   * @default false
+   */
+  accessor disabled: boolean;
+  /**
+   * Date is the end of date range.
+   *
+   * @default false
+   */
+  accessor endOfRange: boolean;
+  /**
+   * Date is currently highlighted as part of the range,
+   *
+   * @default false
+   */
+  accessor highlighted: boolean;
+  /**
+   * When `true`, activates the component's range mode to allow a start and end date.
+   *
+   * @default false
+   */
+  accessor range: boolean;
+  /**
+   * Date is being hovered and within the set range.
+   *
+   * @default false
+   */
+  accessor rangeHover: boolean;
+  /** Specifies the size of the component. */
+  accessor scale: Scale;
+  /**
+   * When `true`, the component is selected.
+   *
+   * @default false
+   */
+  accessor selected: boolean;
+  /**
+   * Date is the start of date range.
+   *
+   * @default false
+   */
+  accessor startOfRange: boolean;
+  /** The component's value. */
+  accessor value: Date;
+  /**
+   * 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>;
+}

package/dist/components/calcite-date-picker-day/customElement.js

@@ -1,11 +1,11 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.73 */
+v5.0.0-next.74 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, setAttribute, safeClassMap } from "@arcgis/lumina";
-import { c as dateToISO } from "../../chunks/date.js";
-import { o as closestElementCrossShadowBoundary, t as toAriaBoolean } from "../../chunks/dom.js";
+import { a as dateToISO } from "../../chunks/date.js";
+import { c as closestElementCrossShadowBoundary, t as toAriaBoolean } from "../../chunks/dom.js";
 import { i as isActivationKey } from "../../chunks/key.js";
 import { n as numberStringFormatter } from "../../chunks/locale.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";

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

@@ -1,43 +1,40 @@
 /// <reference path="../../index.d.ts" />
-import { PropertyValues } from 'lit';
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { HoverRange } from '../../utils/date';
-import { DateLocaleData } from '../calcite-date-picker/utils';
-import { Scale } from '../interfaces';
-import { HeadingLevel } from '../functional/Heading';
-import { DatePicker } from '../calcite-date-picker/customElement.js';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina/PublicLitElement";
+import type { HoverRange } from "../../utils/date.js";
+import type { Scale } from "../interfaces.js";
+import type { HeadingLevel } from "../functional/Heading.js";
 
-export declare class DatePickerMonth extends LitElement {
-    /** The currently active Date. */
-    activeDate: Date;
-    /**
-     * Specifies the number of calendars displayed when `range` is `true`.
-     *
-     * @default 2
-     */
-    calendars: 1 | 2;
-    /** End date currently active. */
-    endDate?: Date;
-    /** Specifies the number at which section headings should start. */
-    headingLevel: HeadingLevel;
-    /** The range of dates currently being hovered. */
-    hoverRange: HoverRange;
-    /** Specifies the latest allowed date (`"yyyy-mm-dd"`). */
-    max: Date;
-    /** Specifies the earliest allowed date (`"yyyy-mm-dd"`). */
-    min: Date;
-    /** Specifies the monthStyle used by the component. */
-    monthStyle: "abbreviated" | "wide";
-    /**
-     * When `true`, activates the component's range mode which renders two calendars for selecting ranges of dates.
-     *
-     * @default false
-     */
-    range: boolean;
-    /** Specifies the size of the component. */
-    scale: Scale;
-    /** Already selected date. */
-    selectedDate: Date;
-    /** Start date currently active. */
-    startDate?: Date;
-}
+export abstract class DatePickerMonth extends LitElement {
+  /** The currently active Date. */
+  accessor activeDate: Date;
+  /**
+   * Specifies the number of calendars displayed when `range` is `true`.
+   *
+   * @default 2
+   */
+  accessor calendars: 1 | 2;
+  /** End date currently active. */
+  accessor endDate: Date | undefined;
+  /** Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling. */
+  accessor headingLevel: HeadingLevel;
+  /** The range of dates currently being hovered. */
+  accessor hoverRange: HoverRange;
+  /** Specifies the latest allowed date (`"yyyy-mm-dd"`). */
+  accessor max: Date;
+  /** Specifies the earliest allowed date (`"yyyy-mm-dd"`). */
+  accessor min: Date;
+  /** Specifies the monthStyle used by the component. */
+  accessor monthStyle: "abbreviated" | "wide";
+  /**
+   * When `true`, activates the component's range mode which renders two calendars for selecting ranges of dates.
+   *
+   * @default false
+   */
+  accessor range: boolean;
+  /** Specifies the size of the component. */
+  accessor scale: Scale;
+  /** Already selected date. */
+  accessor selectedDate: Date;
+  /** Start date currently active. */
+  accessor startDate: Date | undefined;
+}

package/dist/components/calcite-date-picker-month/customElement.js

@@ -1,12 +1,12 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.73 */
+v5.0.0-next.74 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { ref } from "lit/directives/ref.js";
 import { keyed } from "lit/directives/keyed.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { b as dateFromRange, i as inRange, s as sameDate, k as hasSameMonthAndYear, m as getFirstValidDateInMonth, n as nextMonth } from "../../chunks/date.js";
+import { b as dateFromRange, i as inRange, s as sameDate, h as hasSameMonthAndYear, c as getFirstValidDateInMonth, n as nextMonth } from "../../chunks/date.js";
 const CSS = {
   calendar: "calendar",
   calendarContainer: "calendar-container",

package/dist/components/calcite-date-picker-month/index.d.ts

@@ -1,3 +1 @@
-import "../calcite-date-picker-day/index.js";
-import "../calcite-date-picker-month-header/index.js";
 export * from "./customElement.js";

package/dist/components/calcite-date-picker-month-header/customElement.js

@@ -1,14 +1,14 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.73 */
+v5.0.0-next.74 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { live } from "lit/directives/live.js";
 import { h as calciteSpacingXxs, i as calciteSpacingBase, j as calciteSpacingSm } from "../../chunks/global.js";
 import { css, html, nothing } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { b as dateFromRange, n as nextMonth, p as prevMonth, g as formatCalendarYear, h as parseCalendarYear, j as getDateInMonth, i as inRange, k as hasSameMonthAndYear, l as getOrder } from "../../chunks/date.js";
-import { o as closestElementCrossShadowBoundary, A as getTextWidth } from "../../chunks/dom.js";
+import { b as dateFromRange, n as nextMonth, p as prevMonth, f as formatCalendarYear, e as parseCalendarYear, j as getDateInMonth, i as inRange, h as hasSameMonthAndYear, k as getOrder } from "../../chunks/date.js";
+import { c as closestElementCrossShadowBoundary, m as getTextWidth } from "../../chunks/dom.js";
 import { i as isActivationKey } from "../../chunks/key.js";
 import { n as numberStringFormatter } from "../../chunks/locale.js";
 const styles = css`:host{display:block}.header{display:flex;block-size:100%;align-items:center;justify-content:space-between}.chevron-container{display:flex;align-items:center}:host([scale=s]){block-size:24px;margin:var(--calcite-spacing-xs);margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .chevron-container,:host([scale=s]) .chevron{min-inline-size:24px;block-size:24px}:host([scale=m]){block-size:32px;margin:var(--calcite-spacing-sm);margin-inline-start:var(--calcite-spacing-sm-plus)}:host([scale=m]) .chevron-container,:host([scale=m]) .chevron{min-inline-size:32px;block-size:32px;--calcite-internal-action-padding-block: var(--calcite-spacing-xxs)}:host([scale=l]){block-size:44px;margin:var(--calcite-spacing-xs);margin-inline-start:var(--calcite-spacing-sm)}:host([scale=l]) .chevron-container,:host([scale=l]) .chevron{min-inline-size:44px;block-size:44px;--calcite-internal-action-padding-block: var(--calcite-spacing-sm-plus)}.chevron{box-sizing:content-box;display:flex;block-size:100%;inline-size:100%;flex-grow:0;cursor:pointer;align-items:center;justify-content:center;border-style:none;outline-color:transparent;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;--calcite-internal-action-padding-block: 0;--calcite-action-background-color: var(--calcite-date-picker-header-action-background-color);--calcite-action-background-color-hover: var(--calcite-date-picker-header-action-background-color-hover);--calcite-action-background-color-press: var(--calcite-date-picker-header-action-background-color-press);--calcite-action-text-color: var(--calcite-date-picker-header-action-text-color);--calcite-action-text-color-press: var(--calcite-date-picker-header-action-text-color-press)}.chevron:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.chevron[aria-disabled=true]{pointer-events:none}.month-year-container{display:flex;block-size:100%;inline-size:100%;flex:1 1 auto;align-items:center;justify-content:flex-start;text-align:center;line-height:1;gap:var(--calcite-spacing-xxs)}.month-year-container.range-calendar{justify-content:center}.year-container{position:relative;display:flex;block-size:100%}.suffix{display:flex;align-items:center}.year,.suffix{margin-inline:var(--calcite-spacing-xxs);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-date-picker-year-text-color, var(--calcite-color-text-1));font-size:var(--calcite-font-size-md);line-height:var(--calcite-font-line-height-fixed-lg)}.year{position:relative;display:inline-block;border-style:none;background-color:transparent;text-align:center;font-family:inherit;outline-color:transparent;inline-size:44px}.year:hover{transition-timing-function:cubic-bezier(.4,0,.2,1);transition-property:outline-color;outline:2px solid var(--calcite-color-border-2);outline-offset:-2px}.year:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.month-select{--calcite-select-internal-border-width: 0;--calcite-select-internal-icon-border-inline-end-width: 0;--calcite-select-spacing-inline: var(--calcite-spacing-xxs);--calcite-select-font-size: var(--calcite-date-picker-month-select-font-size, var(--calcite-font-size-md));--calcite-select-text-color: var(--calcite-date-picker-month-select-text-color, var(--calcite-color-text-1));--calcite-select-icon-color: var(--calcite-date-picker-month-select-icon-color);--calcite-select-icon-color-hover: var(--calcite-date-picker-month-select-icon-color-hover);--calcite-internal-select-spacing-block: var(--calcite-spacing-xxs);--calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-xxs);--calcite-internal-select-line-height: var(--calcite-font-line-height-fixed-lg);--calcite-internal-select-font-weight: var(--calcite-font-weight-medium)}:host([scale=s]) .month-year-container .month-select{--calcite-select-spacing-inline: var(--calcite-spacing-base);--calcite-select-font-size: var(--calcite-date-picker-month-select-font-size, var(--calcite-font-size));--calcite-internal-select-spacing-block: var(--calcite-spacing-base);--calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-base);--calcite-internal-select-block-size: 24px;--calcite-internal-select-line-height: var(--calcite-font-line-height-fixed-base)}:host([scale=s]) .month-year-container .year{inline-size:40px}:host([scale=s]) .month-year-container .year,:host([scale=s]) .month-year-container .suffix{font-size:var(--calcite-font-size);line-height:var(--calcite-font-line-height-fixed-base)}:host([scale=l]) .month-year-container .month-select{--calcite-select-spacing-inline: var(--calcite-spacing-sm);--calcite-select-font-size: var(--calcite-date-picker-month-select-font-size, var(--calcite-font-size-lg));--calcite-internal-select-spacing-block: var(--calcite-spacing-sm);--calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-sm);--calcite-internal-select-block-size: 44px;--calcite-internal-select-line-height: var(--calcite-font-line-height-fixed-xl)}:host([scale=l]) .month-year-container .year{inline-size:48px}:host([scale=l]) .month-year-container .year,:host([scale=l]) .month-year-container .suffix{font-size:var(--calcite-font-size-lg);line-height:var(--calcite-font-line-height-fixed-xl)}:host([hidden]){display:none}[hidden]{display:none}`;