@esri/calcite-components 3.2.0-next.9 → 3.2.0

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

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.2.0-next.9 */
+v3.2.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { ref } from "lit-html/directives/ref.js";
 import { keyed } from "lit-html/directives/keyed.js";
@@ -25,9 +25,8 @@ const CSS = {
 const styles = css`:host([hidden]){display:none}[hidden]{display:none}.calendar-container{display:flex;inline-size:100%}:host([range][layout=vertical]) .calendar-container{flex-direction:column}.calendar{inline-size:100%}.week-header-container{display:flex;block-size:16px;padding-inline:var(--calcite-spacing-sm);padding-block:var(--calcite-spacing-md)}.week-header{display:flex;align-items:center;justify-content:center;text-align:center;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-bold);inline-size:14.2857142857%;color:var(--calcite-date-picker-week-header-text-color, var(--calcite-color-text-3))}.day-container{display:flex;inline-size:100%;min-inline-size:0px;justify-content:center}.day-container calcite-date-picker-day{inline-size:100%}.week-days{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:1fr;padding-inline:var(--calcite-spacing-sm);padding-block-end:var(--calcite-spacing-sm)}.month-header{display:flex;inline-size:100%;justify-content:space-between}.month{display:flex;inline-size:100%;flex-direction:column;justify-content:space-between}.day{font-size:var(--calcite-font-size)}:host([scale=s]) .week-days{padding-inline:var(--calcite-spacing-xs);padding-block-end:var(--calcite-spacing-xs)}:host([scale=s]) .week-header-container{padding-inline:var(--calcite-spacing-xs);padding-block:var(--calcite-spacing-sm)}:host([scale=s]) .day{font-size:var(--calcite-font-size-sm)}:host([scale=l]) .week-header{font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]) .week-days{padding-inline:var(--calcite-spacing-md);padding-block-end:var(--calcite-spacing-md)}:host([scale=l]) .week-header-container{padding-inline:var(--calcite-spacing-md);padding-block:var(--calcite-spacing-md-plus)}:host([scale=l]) .day{font-size:var(--calcite-font-size-md)}.calendar--start{border-width:0px;border-style:solid;border-color:var(--calcite-date-picker-range-calendar-divider-color, var(--calcite-color-border-1))}:host([range][layout=horizontal]) .calendar--start{border-inline-end-width:var(--calcite-border-width-sm)}:host([range][layout=vertical]) .calendar--start{border-block-end-width:var(--calcite-border-width-sm)}.noncurrent{pointer-events:none;opacity:0}`;
 const DAYS_PER_WEEK = 7;
 const DAYS_MAXIMUM_INDEX = 6;
+const NUM_DAYS_TO_DISPLAY = 42;
 class DatePickerMonth extends LitElement {
-  // #endregion
-  // #region Lifecycle
   constructor() {
     super();
     this.activeDate = /* @__PURE__ */ new Date();
@@ -41,7 +40,7 @@ class DatePickerMonth extends LitElement {
     this.listen("focusout", this.disableActiveFocus);
   }
   static {
-    this.properties = { focusedDate: [16, { state: true }], activeDate: [0, { attribute: false }], dateTimeFormat: [0, { attribute: false }], endDate: [0, { attribute: false }], headingLevel: [11, { type: Number, reflect: true }], hoverRange: [0, { attribute: false }], layout: [3, { reflect: true }], localeData: [0, { attribute: false }], max: [0, { attribute: false }], messages: [0, { attribute: false }], min: [0, { attribute: false }], monthStyle: 1, range: [7, { reflect: true, type: Boolean }], scale: [3, { reflect: true }], selectedDate: [0, { attribute: false }], startDate: [0, { attribute: false }] };
+    this.properties = { focusedDate: [16, {}, { state: true }], activeDate: [0, {}, { attribute: false }], dateTimeFormat: [0, {}, { attribute: false }], endDate: [0, {}, { attribute: false }], headingLevel: [11, {}, { type: Number, reflect: true }], hoverRange: [0, {}, { attribute: false }], layout: [3, {}, { reflect: true }], localeData: [0, {}, { attribute: false }], max: [0, {}, { attribute: false }], messages: [0, {}, { attribute: false }], min: [0, {}, { attribute: false }], monthStyle: 1, range: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], selectedDate: [0, {}, { attribute: false }], startDate: [0, {}, { attribute: false }] };
   }
   static {
     this.styles = styles;
@@ -57,8 +56,6 @@ class DatePickerMonth extends LitElement {
       this.focusedDate = this.selectedDate;
     }
   }
-  // #endregion
-  // #region Private Methods
   updateFocusedDateWithActive(newActiveDate) {
     if (!this.selectedDate) {
       this.focusedDate = inRange(newActiveDate, this.min, this.max) ? newActiveDate : dateFromRange(newActiveDate, this.min, this.max);
@@ -113,22 +110,12 @@ class DatePickerMonth extends LitElement {
         this.activeFocus = false;
     }
   }
-  /**
-   * Once user is not interacting via keyboard,
-   * disable auto focusing of active date
-   */
   disableActiveFocus() {
     this.activeFocus = false;
   }
   pointerOutHandler() {
     this.calciteInternalDatePickerMonthMouseOut.emit();
   }
-  /**
-   * Add n months to the current month
-   *
-   * @param step
-   * @param targetDate
-   */
   addMonths(step, targetDate) {
     const nextDate = new Date(targetDate);
     nextDate.setMonth(targetDate.getMonth() + step);
@@ -137,12 +124,6 @@ class DatePickerMonth extends LitElement {
     this.activeFocus = true;
     this.calciteInternalDatePickerDayHover.emit(nextDate);
   }
-  /**
-   * Add n days to the current date
-   *
-   * @param step
-   * @param targetDate
-   */
   addDays(step = 0, targetDate) {
     const nextDate = new Date(targetDate);
     nextDate.setDate(targetDate.getDate() + step);
@@ -151,13 +132,6 @@ class DatePickerMonth extends LitElement {
     this.activeFocus = true;
     this.calciteInternalDatePickerDayHover.emit(nextDate);
   }
-  /**
-   * Get dates for last days of the previous month
-   *
-   * @param month
-   * @param year
-   * @param startOfWeek
-   */
   getPreviousMonthDays(month, year, startOfWeek) {
     const lastDate = new Date(year, month, 0);
     const date = lastDate.getDate();
@@ -174,12 +148,6 @@ class DatePickerMonth extends LitElement {
     }
     return days;
   }
-  /**
-   * Get dates for the current month
-   *
-   * @param month
-   * @param year
-   */
   getCurrentMonthDays(month, year) {
     const num = new Date(year, month + 1, 0).getDate();
     const days = [];
@@ -188,13 +156,6 @@ class DatePickerMonth extends LitElement {
     }
     return days;
   }
-  /**
-   * Get dates for first days of the next month
-   *
-   * @param month
-   * @param year
-   * @param startOfWeek
-   */
   getNextMonthDays(month, year, startOfWeek) {
     const endDay = new Date(year, month + 1, 0).getDay();
     const days = [];
@@ -206,27 +167,12 @@ class DatePickerMonth extends LitElement {
     }
     return days;
   }
-  /**
-   * Determine if the date is in between the start and end dates
-   *
-   * @param date
-   */
   betweenSelectedRange(date) {
     return !!(this.startDate && this.endDate && date > this.startDate && date < this.endDate && !this.isRangeHover(date));
   }
-  /**
-   * Determine if the date should be in selected state
-   *
-   * @param date
-   */
   isSelected(date) {
     return !!(sameDate(date, this.selectedDate) || this.startDate && sameDate(date, this.startDate) || this.endDate && sameDate(date, this.endDate));
   }
-  /**
-   * Determine if the date is the start of the date range
-   *
-   * @param date
-   */
   isStartOfRange(date) {
     return !!(this.startDate && !sameDate(this.startDate, this.endDate) && sameDate(this.startDate, date) && !this.isEndOfRange(date));
   }
@@ -353,8 +299,6 @@ class DatePickerMonth extends LitElement {
   getFirstValidDateOfMonth(date) {
     return date.getDate() === 1 ? date : getFirstValidDateInMonth(date, this.min, this.max);
   }
-  // #endregion
-  // #region Rendering
   render() {
     const month = this.activeDate.getMonth();
     const year = this.activeDate.getFullYear();
@@ -365,6 +309,13 @@ class DatePickerMonth extends LitElement {
     const curMonDays = this.getCurrentMonthDays(month, year);
     const prevMonDays = this.getPreviousMonthDays(month, year, startOfWeek);
     const nextMonDays = this.getNextMonthDays(month, year, startOfWeek);
+    const numDaysDisplayed = curMonDays.length + prevMonDays.length + nextMonDays.length;
+    if (numDaysDisplayed < NUM_DAYS_TO_DISPLAY) {
+      const initialDay = nextMonDays.length ? nextMonDays[nextMonDays.length - 1] : 0;
+      for (let i = 1; i <= NUM_DAYS_TO_DISPLAY - numDaysDisplayed; i++) {
+        nextMonDays.push(initialDay + i);
+      }
+    }
     const nextMonth2 = month + 1;
     const endCalendarPrevMonDays = this.getPreviousMonthDays(nextMonth2, year, startOfWeek);
     const endCalendarCurrMonDays = this.getCurrentMonthDays(nextMonth2, year);
@@ -373,24 +324,6 @@ class DatePickerMonth extends LitElement {
     const nextMonthDays = this.getDays(endCalendarPrevMonDays, endCalendarCurrMonDays, endCalendarNextMonDays, "end");
     return html`<div class=${safeClassMap({ [CSS.calendarContainer]: true })} role=grid>${this.renderCalendar(adjustedWeekDays, days)}${this.range && this.renderCalendar(adjustedWeekDays, nextMonthDays, true) || ""}</div>`;
   }
-  /**
-   * Render calcite-date-picker-day
-   *
-   * @param active.active
-   * @param active
-   * @param day
-   * @param dayInWeek
-   * @param date
-   * @param currentMonth
-   * @param ref
-   * @param active.currentMonth
-   * @param active.date
-   * @param active.day
-   * @param active.dayInWeek
-   * @param active.ref
-   * @param key
-   * @param active.currentDay
-   */
   renderDateDay({ active, currentMonth, currentDay, date, day, dayInWeek, ref: ref$1 }, key) {
     const isDateInRange = inRange(date, this.min, this.max);
     return keyed(key, html`<div class=${safeClassMap({ [CSS.dayContainer]: true })} role=gridcell><calcite-date-picker-day .active=${active} class=${safeClassMap({

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

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.2.0-next.9 */
+v3.2.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { live } from "lit-html/directives/live.js";
 import { e as calciteSpacingXxs, f as calciteSpacingBase, g as calciteSpacingSm } from "../../chunks/global.js";
@@ -8,7 +8,7 @@ import { html, nothing } from "lit";
 import { createRef, ref } from "lit-html/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 { k as closestElementCrossShadowBoundary, A as getTextWidth } from "../../chunks/dom.js";
+import { l as closestElementCrossShadowBoundary, A as getTextWidth } from "../../chunks/dom.js";
 import { i as isActivationKey } from "../../chunks/key.js";
 import { n as numberStringFormatter } from "../../chunks/locale.js";
 import { css } from "@lit/reactive-element/css-tag.js";
@@ -36,13 +36,11 @@ class DatePickerMonthHeader extends LitElement {
     this.calciteInternalDatePickerMonthHeaderSelectChange = createEvent({ cancelable: false });
   }
   static {
-    this.properties = { nextMonthDate: [16, { state: true }], prevMonthDate: [16, { state: true }], activeDate: [0, { attribute: false }], headingLevel: [9, { type: Number }], localeData: [0, { attribute: false }], max: [0, { attribute: false }], messages: [0, { attribute: false }], min: [0, { attribute: false }], monthStyle: 1, position: 1, scale: [3, { reflect: true }], selectedDate: [0, { attribute: false }] };
+    this.properties = { nextMonthDate: [16, {}, { state: true }], prevMonthDate: [16, {}, { state: true }], activeDate: [0, {}, { attribute: false }], headingLevel: [9, {}, { type: Number }], localeData: [0, {}, { attribute: false }], max: [0, {}, { attribute: false }], messages: [0, {}, { attribute: false }], min: [0, {}, { attribute: false }], monthStyle: 1, position: 1, scale: [3, {}, { reflect: true }], selectedDate: [0, {}, { attribute: false }] };
   }
   static {
     this.styles = styles;
   }
-  // #endregion
-  // #region Lifecycle
   connectedCallback() {
     super.connectedCallback();
     this.setNextPrevMonthDates();
@@ -64,8 +62,6 @@ class DatePickerMonthHeader extends LitElement {
   loaded() {
     this.setYearSelectWidthOffset();
   }
-  // #endregion
-  // #region Private Methods
   setNextPrevMonthDates() {
     if (!this.activeDate) {
       return;
@@ -73,11 +69,6 @@ class DatePickerMonthHeader extends LitElement {
     this.nextMonthDate = dateFromRange(nextMonth(this.activeDate), this.min, this.max);
     this.prevMonthDate = dateFromRange(prevMonth(this.activeDate), this.min, this.max);
   }
-  /**
-   * Increment year on UP/DOWN keys
-   *
-   * @param event
-   */
   onYearKey(event) {
     const localizedYear = this.parseCalendarYear(event.target.value);
     switch (event.key) {
@@ -153,15 +144,6 @@ class DatePickerMonthHeader extends LitElement {
       return dateFromRange(nextDate, min, max);
     }
   }
-  /**
-   * Parse localized year string from input,
-   * set to active if in range
-   *
-   * @param root0
-   * @param root0.localizedYear
-   * @param root0.commit
-   * @param root0.offset
-   */
   setYear({ localizedYear, commit = true, offset = 0 }) {
     const { yearInputEl: { value: yearInputEl }, activeDate } = this;
     const inRangeDate = this.getInRangeDate({ localizedYear, offset });
@@ -242,8 +224,6 @@ class DatePickerMonthHeader extends LitElement {
     }
     return this.getPx(padding);
   }
-  // #endregion
-  // #region Rendering
   render() {
     return html`<div class=${safeClassMap(CSS.header)}>${this.renderContent()}</div>`;
   }

package/dist/components/calcite-dialog/customElement.d.ts

@@ -9,30 +9,38 @@ import { FocusTrapOptions } from '../../controllers/useFocusTrap';
 import { DialogPlacement } from './interfaces';
 
 /**
- * @slot - A slot for adding content.
- * @slot content - [Deprecated] Use `custom-content` slot instead.
- * @slot custom-content - A slot for displaying custom content. Will prevent the rendering of any default Dialog UI, except for `box-shadow` and `corner-radius`.
- * @slot action-bar - A slot for adding a `calcite-action-bar` to the component.
- * @slot alerts - A slot for adding `calcite-alert`s to the component.
- * @slot content-bottom - A slot for adding content below the unnamed (default) slot and - if populated - the `footer` slot.
- * @slot content-top - A slot for adding content above the unnamed (default) slot and - if populated - below the `action-bar` slot.
- * @slot header-actions-start - A slot for adding actions or content to the starting side of the component's header.
- * @slot header-actions-end - A slot for adding actions or content to the ending side of the component's header.
- * @slot header-content - A slot for adding custom content to the component's header.
- * @slot header-menu-actions - A slot for adding an overflow menu with actions inside a `calcite-dropdown`.
- * @slot fab - A slot for adding a `calcite-fab` (floating action button) to perform an action.
- * @slot footer - A slot for adding custom content to the component's footer. Should not be used with the `"footer-start"` or `"footer-end"` slots.
- * @slot footer-end - A slot for adding a trailing footer custom content. Should not be used with the `"footer"` slot.
- * @slot footer-start - A slot for adding a leading footer custom content. Should not be used with the `"footer"` slot.
+ * @slot  - A slot for adding content.
+ * @slot [content] - [Deprecated] Use `custom-content` slot instead.
+ * @slot [custom-content] - A slot for displaying custom content. Will prevent the rendering of any default Dialog UI, except for `box-shadow` and `corner-radius`.
+ * @slot [action-bar] - A slot for adding a `calcite-action-bar` to the component.
+ * @slot [alerts] - A slot for adding `calcite-alert`s to the component.
+ * @slot [content-bottom] - A slot for adding content below the unnamed (default) slot and - if populated - the `footer` slot.
+ * @slot [content-top] - A slot for adding content above the unnamed (default) slot and - if populated - below the `action-bar` slot.
+ * @slot [header-actions-start] - A slot for adding actions or content to the starting side of the component's header.
+ * @slot [header-actions-end] - A slot for adding actions or content to the ending side of the component's header.
+ * @slot [header-content] - A slot for adding custom content to the component's header.
+ * @slot [header-menu-actions] - A slot for adding an overflow menu with actions inside a `calcite-dropdown`.
+ * @slot [fab] - A slot for adding a `calcite-fab` (floating action button) to perform an action.
+ * @slot [footer] - A slot for adding custom content to the component's footer. Should not be used with the `"footer-start"` or `"footer-end"` slots.
+ * @slot [footer-end] - A slot for adding a trailing footer custom content. Should not be used with the `"footer"` slot.
+ * @slot [footer-start] - A slot for adding a leading footer custom content. Should not be used with the `"footer"` slot.
  */
 export declare class Dialog extends LitElement {
     /** Passes a function to run before the component closes. */
     beforeClose: () => Promise<void>;
-    /** When `true`, disables the component's close button. */
+    /**
+     * When `true`, disables the component's close button.
+     *
+     * @default false
+     */
     closeDisabled: boolean;
     /** A description for the component. */
     description: string;
-    /** When `true`, the component is draggable. */
+    /**
+     * When `true`, the component is draggable.
+     *
+     * @default false
+     */
     dragEnabled: boolean;
     /**
      * When `true`, disables the default close on escape behavior.
@@ -40,6 +48,7 @@ export declare class Dialog extends LitElement {
      * By default, an open dialog can be dismissed by pressing the Esc key.
      *
      * @see [Dialog Accessibility](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#accessibility).
+     * @default false
      */
     escapeDisabled: boolean;
     /**
@@ -57,34 +66,44 @@ export declare class Dialog extends LitElement {
     headingLevel: HeadingLevel;
     /** Specifies the kind of the component, which will style the top border. */
     kind: Extract<"brand" | "danger" | "info" | "success" | "warning", Kind>;
-    /** When `true`, a busy indicator is displayed. */
+    /**
+     * When `true`, a busy indicator is displayed.
+     *
+     * @default false
+     */
     loading: boolean;
-    /** When `true`, the action menu items in the `header-menu-actions` slot are open. */
+    /**
+     * When `true`, the action menu items in the `header-menu-actions` slot are open.
+     *
+     * @default false
+     */
     menuOpen: boolean;
     /** Use this property to override individual strings used by the component. */
     messageOverrides?: typeof this.messages._overrides;
     /**
-     * Made into a prop for testing purposes only
+     * When `true`, displays a scrim blocking interaction underneath the component.
      *
-     * @private
+     * @default false
      */
-    private messages: Partial<{
-        close: string;
-        resizeEnabled: string;
-        dragEnabled: string;
-    }> & import('@arcgis/components-controllers').T9nMeta<{
-        close: string;
-        resizeEnabled: string;
-        dragEnabled: string;
-    }>;
-    /** When `true`, displays a scrim blocking interaction underneath the component. */
     modal: boolean;
-    /** When `true` and `modal` is `false`, prevents focus trapping. */
+    /**
+     * When `true` and `modal` is `false`, prevents focus trapping.
+     *
+     * @default false
+     */
     focusTrapDisabled: boolean;
-    /** When `true`, displays and positions the component. */
+    /**
+     * When `true`, displays and positions the component.
+     *
+     * @default false
+     */
     get open(): boolean;
     set open(open: boolean);
-    /** When `true`, disables the closing of the component when clicked outside. */
+    /**
+     * When `true`, disables the closing of the component when clicked outside.
+     *
+     * @default false
+     */
     outsideCloseDisabled: boolean;
     /**
      * Determines the type of positioning to use for the overlaid content.
@@ -92,18 +111,33 @@ export declare class Dialog extends LitElement {
      * 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 dialog. */
+    /**
+     * Specifies the placement of the dialog.
+     *
+     * @default "center"
+     */
     placement: DialogPlacement;
-    /** When `true`, the component is resizable. */
+    /**
+     * When `true`, the component is resizable.
+     *
+     * @default false
+     */
     resizable: boolean;
-    /** Specifies the size of the component. */
+    /**
+     * Specifies the size of the component.
+     *
+     * @default "m"
+     */
     scale: Scale;
     /**
      * Specifies the width of the component.
      *
      * @deprecated Use the `width` property instead.
+     * @default "m"
      */
     widthScale: Scale;
     /** Specifies the width of the component. */
@@ -124,7 +158,7 @@ export declare class Dialog extends LitElement {
     /**
      * Sets focus on the component's "close" button (the first focusable item).
      *
-     * @returns {Promise<void>} - A promise that is resolved when the operation has completed.
+     * @returns - A promise that is resolved when the operation has completed.
      */
     setFocus(): Promise<void>;
     /**
@@ -134,13 +168,22 @@ export declare class Dialog extends LitElement {
      */
     updateFocusTrapElements(extraContainers?: FocusTrapOptions["extraContainers"]): Promise<void>;
     /** Fires when the component is requested to be closed and before the closing transition begins. */
-    readonly calciteDialogBeforeClose: TargetedEvent<this, undefined>;
+    readonly calciteDialogBeforeClose: TargetedEvent<this, void>;
     /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
-    readonly calciteDialogBeforeOpen: TargetedEvent<this, undefined>;
+    readonly calciteDialogBeforeOpen: TargetedEvent<this, void>;
     /** Fires when the component is closed and animation is complete. */
-    readonly calciteDialogClose: TargetedEvent<this, undefined>;
+    readonly calciteDialogClose: TargetedEvent<this, void>;
     /** Fires when the component is open and animation is complete. */
-    readonly calciteDialogOpen: TargetedEvent<this, undefined>;
+    readonly calciteDialogOpen: TargetedEvent<this, void>;
     /** Fires when the content is scrolled. */
-    readonly calciteDialogScroll: TargetedEvent<this, undefined>;
+    readonly calciteDialogScroll: TargetedEvent<this, void>;
+    private messages: Partial<{
+        close: string;
+        resizeEnabled: string;
+        dragEnabled: string;
+    }> & import('@arcgis/lumina/controllers').T9nMeta<{
+        close: string;
+        resizeEnabled: string;
+        dragEnabled: string;
+    }>;
 }