@aurodesignsystem-dev/auro-formkit 0.0.0-pr785.3 → 0.0.0-pr788.0

package/components/datepicker/demo/readme.md

@@ -83,7 +83,8 @@ This configuration enables proper module resolution for the component's TypeScri
 <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
 
 ```html
-<auro-datepicker>
+<auro-datepicker required="">
+  <span slot="ariaLabel.close">Close Calendar</span>
   <span slot="bib.fullscreen.headline">Datepicker Headline</span>
   <span slot="fromLabel">Choose a date</span>
   <span slot="bib.fullscreen.dateLabel">Choose a date</span>

package/components/datepicker/dist/auro-datepicker.d.ts

@@ -1,5 +1,6 @@
 /**
  * @slot helpText - Defines the content of the helpText.
+ * @slot ariaLabel.close - Sets aria-label on close button in fullscreen bib
  * @slot bib.fullscreen.headline - Defines the headline to display above bib.fullscreen.dateLabels in the mobile layout.
  * @slot bib.fullscreen.dateLabel - Defines the content to display above selected dates in the mobile layout.
  * @slot toLabel - Defines the label content for the second input when the `range` attribute is used.
@@ -379,7 +380,7 @@ export class AuroDatePicker extends AuroElement {
      * @param {String} focusInput - Pass in `endDate` to focus on the return input. No parameter is needed to focus on the depart input.
      * @returns {void}
      */
-    focus(focusInput: string): void;
+    focus(focusInput?: string): void;
     /**
      * Converts valid time number to format used by wc-date-range API.
      * @private
@@ -448,6 +449,17 @@ export class AuroDatePicker extends AuroElement {
      * @returns {void}
      */
     private configureDatepicker;
+    hasFocus: boolean;
+    /**
+     * Hides the dropdown bib if its open.
+     * @returns {void}
+     */
+    hideBib(): void;
+    /**
+     * Shows the dropdown bib if there are options to show.
+     * @returns {void}
+     */
+    showBib(): void;
     /**
      * Sets the readonly attribute on the inputs based on the window width.
      * @private
@@ -490,18 +502,26 @@ export class AuroDatePicker extends AuroElement {
      * @returns {void}
      */
     reset(): void;
+    /**
+     * Clears the current value(s) of the datepicker.
+     * @returns {void}
+     */
+    clear(): void;
     /**
      * Validates value.
      * @param {boolean} [force=false] - Whether to force validation.
      */
     validate(force?: boolean): void;
-    setHasFocus(): void;
-    hasFocus: boolean;
-    setHasValue(): void;
+    /**
+     * Private method for interacting with the `hasValue` property.
+     * @private
+     */
+    private setHasValue;
     hasValue: boolean;
     get hasError(): boolean;
     updated(changedProperties: any): void;
     monthFirst: boolean;
+    previousTabIndex: string;
     formattedFocusDate: boolean;
     formattedEndDate: boolean;
     formattedValue: boolean;
@@ -525,7 +545,15 @@ export class AuroDatePicker extends AuroElement {
      */
     private renderSnowflakeLayout;
     /**
+     * Renders the snowflake layout for the datepicker.
      * @private
+     * @returns {import("lit").TemplateResult}
+     */
+    private renderClassicLayout;
+    /**
+     * Renders the layout based on the `layout` attribute.
+     * @private
+     * @returns {import('lit').TemplateResult}
      */
     private renderLayoutFromAttributes;
     /**
@@ -533,26 +561,52 @@ export class AuroDatePicker extends AuroElement {
      * Returns formatted date like Apr 21 or Dec 25.
      * @private
      * @param {string} date - Date format should be in a format Date constructor accepts, like '2023-04-21' or '2023/04/21'.
-     * @return {string}
+     * @returns {string}
      */
     private formatShortDate;
     /**
      * Format and render the provided date value.
      * @private
-     * @param dateValue
-     * @return {TemplateResult}
+     * @param {string} dateValue - The date value to format and render.
+     * @returns {import('lit').TemplateResult}
      */
     private renderDisplayTextDate;
-    renderHtmlInputs(): import("lit-html").TemplateResult;
-    renderHtmlActionClear(): import("lit-html").TemplateResult;
-    renderHtmlIconError(): import("lit-html").TemplateResult;
-    renderHtmlIconCalendar(): import("lit-html").TemplateResult;
+    /**
+     * Renders the HTML inputs for the datepicker.
+     * @private
+     * @returns {import('lit').TemplateResult}
+     */
+    private renderHtmlInputs;
+    /**
+     * Renders the clear action button.
+     * @private
+     * @returns {import('lit').TemplateResult}
+     */
+    private renderHtmlActionClear;
+    /**
+     * Renders the error icon.
+     * @private
+     * @returns {import('lit').TemplateResult}
+     */
+    private renderHtmlIconError;
+    /**
+     * Renders the calendar icon.
+     * @private
+     * @returns {import('lit').TemplateResult}
+     */
+    private renderHtmlIconCalendar;
     /**
      * Returns HTML for the help text and error message.
      * @private
-     * @returns {html} - Returns HTML for the help text and error message.
+     * @returns {import('lit').TemplateResult} - Returns HTML for the help text and error message.
      */
     private renderHtmlHelpText;
+    /**
+     * Separate method for rendering the calendar.
+     * @private
+     * @returns {import('lit').TemplateResult}
+     */
+    private renderCalendar;
     render(): import("lit-html").TemplateResult;
 }
 import { AuroElement } from "@aurodesignsystem/auro-layout-element";