refactor: integrate datepicker with the internal dropdown

components/combobox/demo/api.md

@@ -675,7 +675,7 @@ Sets the help text displayed below the trigger. The `helpText` slot can be used
 
 #### in Dialog
 
-The focus method will apply focus state to the datepicker's input field.
+The component can be in a dialog
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inDialog.html) -->

components/combobox/demo/api.min.js

@@ -3246,6 +3246,7 @@ class AuroDropdown extends r$5 {
    * to the `bibContent` element. If a callback function `onSlotChange` is defined, it is invoked to
    * notify about the slot change.
    *
+   * @private
    * @method handleDefaultSlot
    * @param {Event} event - The event object representing the slot change.
    * @fires Function#onSlotChange - Optional callback invoked when the slot content changes.

components/combobox/demo/index.min.js

@@ -3150,6 +3150,7 @@ class AuroDropdown extends r$5 {
    * to the `bibContent` element. If a callback function `onSlotChange` is defined, it is invoked to
    * notify about the slot change.
    *
+   * @private
    * @method handleDefaultSlot
    * @param {Event} event - The event object representing the slot change.
    * @fires Function#onSlotChange - Optional callback invoked when the slot content changes.

components/combobox/docs/partials/api.md

@@ -227,7 +227,7 @@ Sets the help text displayed below the trigger. The `helpText` slot can be used
 
 #### in Dialog
 
-The focus method will apply focus state to the datepicker's input field.
+The component can be in a dialog
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inDialog.html) -->

components/datepicker/demo/api.md

@@ -1088,7 +1088,7 @@ export function alertValueExample() {
 
 #### in Dialog
 
-The focus method will apply focus state to the datepicker's input field.
+The component can be in a dialog
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inDialog.html) -->

components/datepicker/demo/api.min.js

@@ -10373,6 +10373,7 @@ class CalendarUtilities {
  * @prop {Date | undefined} selectedDate - The selected date, usually synchronized with datepicker-input.
  * Not to be confused with the focused date (therefore not necessarily in active month view).
  * @prop {string} weekdayHeaderNotation - Weekday header notation, based on Intl DatetimeFormat:
+ * @prop {Boolean} visible - Flag indicating if the calendar is visible.
  * - 'short' (e.g., Thu)
  * - 'narrow' (e.g., T).
  * Default is 'short'.
@@ -10424,10 +10425,7 @@ class AuroCalendar extends RangeDatepicker {
     this.numCalendars = undefined;
 
 
-    /**
-     * @private
-     */
-    this.isVisible = false;
+    this.visible = false;
 
 
     /**
@@ -10475,6 +10473,10 @@ class AuroCalendar extends RangeDatepicker {
         type: String,
         reflect: true
       },
+      visible: {
+        type: Boolean,
+        reflect: false
+      }
     };
   }
 
@@ -10503,7 +10505,7 @@ class AuroCalendar extends RangeDatepicker {
    */
   renderAllCalendars() {
     let renderedHtml = undefined;
-    if (this.isVisible) {
+    if (this.visible) {
       this.utilCalRender.setFirstRenderableMonthDate(this);
 
       const dropdown = AuroLibraryRuntimeUtils$2.prototype.closestElement('auro-dropdown, [auro-dropdown]', this);
@@ -10609,13 +10611,6 @@ class AuroCalendar extends RangeDatepicker {
     });
   }
 
-  toggleVisibility(visibility) {
-    this.isVisible = visibility;
-
-    // wait for dropdownbib's fullscreen attribute
-    setTimeout(() => this.requestUpdate());
-  }
-
   injectSlot(slotName, nodes) {
     this.slots[slotName] = nodes;
   }
@@ -10636,6 +10631,10 @@ class AuroCalendar extends RangeDatepicker {
     if (changedProperties.has('centralDate')) {
       this.utilCal.centralDateChanged(this);
     }
+
+    if (changedProperties.has('visible')) {
+      setTimeout(() => this.requestUpdate());
+    }
   }
 
   render() {
@@ -13426,6 +13425,7 @@ class AuroDropdown extends r$5 {
    * to the `bibContent` element. If a callback function `onSlotChange` is defined, it is invoked to
    * notify about the slot change.
    *
+   * @private
    * @method handleDefaultSlot
    * @param {Event} event - The event object representing the slot change.
    * @fires Function#onSlotChange - Optional callback invoked when the slot content changes.
@@ -17676,7 +17676,7 @@ class AuroDatePicker extends r$7 {
       this.setAttribute('aria-expanded', this.dropdown.isPopoverVisible);
       this.notifyDatepickerToggled();
 
-      this.calendar.toggleVisibility(this.dropdown.isPopoverVisible);
+      this.calendar.visible = this.dropdown.isPopoverVisible;
 
       if (this.dropdown.getAttribute('data-show')) {
         if (this.forceScrollOnNextMobileCalendarRender) {
@@ -17898,6 +17898,7 @@ class AuroDatePicker extends r$7 {
 
   /**
    * Emits an event to notify the calendar cells to fetch their slot content.
+   * @private
    * @returns {void}
    */
   pushSlotContent() {
@@ -18074,6 +18075,14 @@ class AuroDatePicker extends r$7 {
     }
   }
 
+  /**
+   * Handles the transfer of content between slots in the component.
+   *
+   * @private
+   * @method handleSlotToSlot
+   * @param {Event} event - The event object containing information about the slot transfer.
+   * @throws {Error} Throws an error if the slot cannot be found or injected.
+   */
   handleSlotToSlot(event) {
     const slot = this.querySelector(`[slot='${event.target.name}']`);
     this.calendar.injectSlot(event.target.name, slot.cloneNode(true));

components/datepicker/demo/index.min.js

@@ -10121,6 +10121,7 @@ class CalendarUtilities {
  * @prop {Date | undefined} selectedDate - The selected date, usually synchronized with datepicker-input.
  * Not to be confused with the focused date (therefore not necessarily in active month view).
  * @prop {string} weekdayHeaderNotation - Weekday header notation, based on Intl DatetimeFormat:
+ * @prop {Boolean} visible - Flag indicating if the calendar is visible.
  * - 'short' (e.g., Thu)
  * - 'narrow' (e.g., T).
  * Default is 'short'.
@@ -10172,10 +10173,7 @@ class AuroCalendar extends RangeDatepicker {
     this.numCalendars = undefined;
 
 
-    /**
-     * @private
-     */
-    this.isVisible = false;
+    this.visible = false;
 
 
     /**
@@ -10223,6 +10221,10 @@ class AuroCalendar extends RangeDatepicker {
         type: String,
         reflect: true
       },
+      visible: {
+        type: Boolean,
+        reflect: false
+      }
     };
   }
 
@@ -10251,7 +10253,7 @@ class AuroCalendar extends RangeDatepicker {
    */
   renderAllCalendars() {
     let renderedHtml = undefined;
-    if (this.isVisible) {
+    if (this.visible) {
       this.utilCalRender.setFirstRenderableMonthDate(this);
 
       const dropdown = AuroLibraryRuntimeUtils$2.prototype.closestElement('auro-dropdown, [auro-dropdown]', this);
@@ -10357,13 +10359,6 @@ class AuroCalendar extends RangeDatepicker {
     });
   }
 
-  toggleVisibility(visibility) {
-    this.isVisible = visibility;
-
-    // wait for dropdownbib's fullscreen attribute
-    setTimeout(() => this.requestUpdate());
-  }
-
   injectSlot(slotName, nodes) {
     this.slots[slotName] = nodes;
   }
@@ -10384,6 +10379,10 @@ class AuroCalendar extends RangeDatepicker {
     if (changedProperties.has('centralDate')) {
       this.utilCal.centralDateChanged(this);
     }
+
+    if (changedProperties.has('visible')) {
+      setTimeout(() => this.requestUpdate());
+    }
   }
 
   render() {
@@ -13174,6 +13173,7 @@ class AuroDropdown extends r$5 {
    * to the `bibContent` element. If a callback function `onSlotChange` is defined, it is invoked to
    * notify about the slot change.
    *
+   * @private
    * @method handleDefaultSlot
    * @param {Event} event - The event object representing the slot change.
    * @fires Function#onSlotChange - Optional callback invoked when the slot content changes.
@@ -17424,7 +17424,7 @@ class AuroDatePicker extends r$7 {
       this.setAttribute('aria-expanded', this.dropdown.isPopoverVisible);
       this.notifyDatepickerToggled();
 
-      this.calendar.toggleVisibility(this.dropdown.isPopoverVisible);
+      this.calendar.visible = this.dropdown.isPopoverVisible;
 
       if (this.dropdown.getAttribute('data-show')) {
         if (this.forceScrollOnNextMobileCalendarRender) {
@@ -17646,6 +17646,7 @@ class AuroDatePicker extends r$7 {
 
   /**
    * Emits an event to notify the calendar cells to fetch their slot content.
+   * @private
    * @returns {void}
    */
   pushSlotContent() {
@@ -17822,6 +17823,14 @@ class AuroDatePicker extends r$7 {
     }
   }
 
+  /**
+   * Handles the transfer of content between slots in the component.
+   *
+   * @private
+   * @method handleSlotToSlot
+   * @param {Event} event - The event object containing information about the slot transfer.
+   * @throws {Error} Throws an error if the slot cannot be found or injected.
+   */
   handleSlotToSlot(event) {
     const slot = this.querySelector(`[slot='${event.target.name}']`);
     this.calendar.injectSlot(event.target.name, slot.cloneNode(true));

components/datepicker/docs/partials/api.md

@@ -464,7 +464,7 @@ The following example listens for the `auroDatePicker-valueSet` event. Once trig
 
 #### in Dialog
 
-The focus method will apply focus state to the datepicker's input field.
+The component can be in a dialog
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inDialog.html) -->

components/datepicker/src/auro-calendar.js

@@ -26,6 +26,7 @@ import { UtilitiesCalendarRender } from './utilitiesCalendarRender.js';
  * @prop {Date | undefined} selectedDate - The selected date, usually synchronized with datepicker-input.
  * Not to be confused with the focused date (therefore not necessarily in active month view).
  * @prop {string} weekdayHeaderNotation - Weekday header notation, based on Intl DatetimeFormat:
+ * @prop {Boolean} visible - Flag indicating if the calendar is visible.
  * - 'short' (e.g., Thu)
  * - 'narrow' (e.g., T).
  * Default is 'short'.
@@ -77,10 +78,7 @@ export class AuroCalendar extends RangeDatepicker {
     this.numCalendars = undefined;
 
 
-    /**
-     * @private
-     */
-    this.isVisible = false;
+    this.visible = false;
 
 
     /**
@@ -128,6 +126,10 @@ export class AuroCalendar extends RangeDatepicker {
         type: String,
         reflect: true
       },
+      visible: {
+        type: Boolean,
+        reflect: false
+      }
     };
   }
 
@@ -156,7 +158,7 @@ export class AuroCalendar extends RangeDatepicker {
    */
   renderAllCalendars() {
     let renderedHtml = undefined;
-    if (this.isVisible) {
+    if (this.visible) {
       this.utilCalRender.setFirstRenderableMonthDate(this);
 
       const dropdown = AuroLibraryRuntimeUtils.prototype.closestElement('auro-dropdown, [auro-dropdown]', this);
@@ -262,13 +264,6 @@ export class AuroCalendar extends RangeDatepicker {
     });
   }
 
-  toggleVisibility(visibility) {
-    this.isVisible = visibility;
-
-    // wait for dropdownbib's fullscreen attribute
-    setTimeout(() => this.requestUpdate());
-  }
-
   injectSlot(slotName, nodes) {
     this.slots[slotName] = nodes;
   }
@@ -289,6 +284,10 @@ export class AuroCalendar extends RangeDatepicker {
     if (changedProperties.has('centralDate')) {
       this.utilCal.centralDateChanged(this);
     }
+
+    if (changedProperties.has('visible')) {
+      setTimeout(() => this.requestUpdate());
+    }
   }
 
   render() {

components/datepicker/src/auro-datepicker.js

@@ -460,7 +460,7 @@ export class AuroDatePicker extends LitElement {
       this.setAttribute('aria-expanded', this.dropdown.isPopoverVisible);
       this.notifyDatepickerToggled();
 
-      this.calendar.toggleVisibility(this.dropdown.isPopoverVisible);
+      this.calendar.visible = this.dropdown.isPopoverVisible;
 
       if (this.dropdown.getAttribute('data-show')) {
         if (this.forceScrollOnNextMobileCalendarRender) {

components/dropdown/demo/api.md

@@ -31,11 +31,10 @@
 
 ## Methods
 
-| Method              | Type                   | Description                                      |
-|---------------------|------------------------|--------------------------------------------------|
-| [handleDefaultSlot](#handleDefaultSlot) | `(event: Event): void` | Handles the default slot change event and updates the content.<br /><br />This method retrieves all nodes assigned to the default slot of the event target and appends them<br />to the `bibContent` element. If a callback function `onSlotChange` is defined, it is invoked to<br />notify about the slot change.<br /><br />**event**: The event object representing the slot change. |
-| [hide](#hide)              | `(): void`             | Public method to hide the dropdown.              |
-| [show](#show)              | `(): void`             | Public method to show the dropdown.              |
+| Method | Type       | Description                         |
+|--------|------------|-------------------------------------|
+| [hide](#hide) | `(): void` | Public method to hide the dropdown. |
+| [show](#show) | `(): void` | Public method to show the dropdown. |
 
 ## Events
 
@@ -1066,7 +1065,7 @@ This example demonstrations collapsing the dropdown by clicking a button within
 
 #### in Dialog
 
-The focus method will apply focus state to the datepicker's input field.
+The component can be in a dialog
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inDialog.html) -->

components/dropdown/demo/api.min.js

@@ -2774,6 +2774,7 @@ class AuroDropdown extends r {
    * to the `bibContent` element. If a callback function `onSlotChange` is defined, it is invoked to
    * notify about the slot change.
    *
+   * @private
    * @method handleDefaultSlot
    * @param {Event} event - The event object representing the slot change.
    * @fires Function#onSlotChange - Optional callback invoked when the slot content changes.

components/dropdown/demo/index.min.js

@@ -2749,6 +2749,7 @@ class AuroDropdown extends r {
    * to the `bibContent` element. If a callback function `onSlotChange` is defined, it is invoked to
    * notify about the slot change.
    *
+   * @private
    * @method handleDefaultSlot
    * @param {Event} event - The event object representing the slot change.
    * @fires Function#onSlotChange - Optional callback invoked when the slot content changes.

components/dropdown/docs/api.md

@@ -28,11 +28,10 @@
 
 ## Methods
 
-| Method              | Type                   | Description                                      |
-|---------------------|------------------------|--------------------------------------------------|
-| `handleDefaultSlot` | `(event: Event): void` | Handles the default slot change event and updates the content.<br /><br />This method retrieves all nodes assigned to the default slot of the event target and appends them<br />to the `bibContent` element. If a callback function `onSlotChange` is defined, it is invoked to<br />notify about the slot change.<br /><br />**event**: The event object representing the slot change. |
-| `hide`              | `(): void`             | Public method to hide the dropdown.              |
-| `show`              | `(): void`             | Public method to show the dropdown.              |
+| Method | Type       | Description                         |
+|--------|------------|-------------------------------------|
+| `hide` | `(): void` | Public method to hide the dropdown. |
+| `show` | `(): void` | Public method to show the dropdown. |
 
 ## Events