@aurodesignsystem/auro-formkit 2.0.0-beta.46 → 2.0.0-beta.47

package/components/datepicker/dist/utilities.d.ts

@@ -3,9 +3,34 @@ export class AuroDatepickerUtilities {
      * Returns true if value passed in is a valid date.
      * @private
      * @param {String} date - Date to validate.
+     * @param {String} format - Date format to validate against.
      * @returns {Boolean}
      */
     private validDateStr;
+    /**
+     * Converts a date string to a North American date format.
+     * @private
+     * @param {String} dateStr - Date to validate.
+     * @param {String} format - Date format to validate against.
+     * @returns {Boolean}
+     */
+    private toNorthAmericanFormat;
+    /**
+     * Parses a date string into its components.
+     * @private
+     * @param {string} dateStr - Date string to parse.
+     * @param {string} format - Date format to parse.
+     * @returns {void}
+     */
+    private parseDate;
+    /**
+     * Converts a date string to a custom date format.
+     * @private
+     * @param {string} dateStr - Date string to parse.
+     * @param {string} format - Date format to parse.
+     * @returns {void}
+     */
+    private toCustomFormat;
     /**
      * Converts any date object to a date object representing the first day of the month.
      * @param {Object} date - Date to convert to the first day of the month.

package/components/datepicker/dist/utilitiesCalendar.d.ts

@@ -4,9 +4,10 @@ export class CalendarUtilities {
      * Scroll the calendar month list to a given valid date if in mobile view.
      * @param {Object} elem - The calendar element.
      * @param {String} date - The date to scroll into view.
+     * @param {String} format - The format of the date.
      * @returns {void}
      */
-    scrollMonthIntoView(elem: any, date: string): void;
+    scrollMonthIntoView(elem: any, date: string, format: string): void;
     /**
      * Sends an event requesting the dropdown bib be closed.
      * @private

package/components/dropdown/README.md

@@ -97,7 +97,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.13.0/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-dropdown@2.0.0-beta.45/dist/auro-dropdown__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-dropdown@2.0.0-beta.46/dist/auro-dropdown__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-dropdown use cases

package/components/form/README.md

@@ -98,7 +98,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.13.0/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-form@2.0.0-beta.45/dist/auro-form__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-form@2.0.0-beta.46/dist/auro-form__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-form use cases

package/components/input/README.md

@@ -89,7 +89,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.13.0/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-input@2.0.0-beta.45/dist/auro-input__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-input@2.0.0-beta.46/dist/auro-input__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-input use cases

package/components/input/demo/api.md

@@ -17,13 +17,14 @@ Generate unique names for dependency components.
 | Property                          | Attribute                         | Type      | Default     | Description                                      |
 |-----------------------------------|-----------------------------------|-----------|-------------|--------------------------------------------------|
 | [activeLabel](#activeLabel)                     | `activeLabel`                     | `boolean` | false       | If set, the label will remain fixed in the active position. |
-| [autocapitalize](#autocapitalize)                  | `autocapitalize`                  | `string`  |             | An enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user. [off/none, on/sentences, words, characters] |
+| [autocapitalize](#autocapitalize)                  | `autocapitalize`                  | `string`  |             | An enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user. [off/none, on/sentences, words, characters]. |
 | [autocomplete](#autocomplete)                    | `autocomplete`                    | `string`  |             | An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported. |
 | [autocorrect](#autocorrect)                     | `autocorrect`                     | `string`  |             | When set to `off`, stops iOS from auto-correcting words when typed into a text box. |
 | [customValidityTypeEmail](#customValidityTypeEmail)         | `customValidityTypeEmail`         | `string`  |             | Custom help text message for email type validity. |
 | [disabled](#disabled)                        | `disabled`                        | `boolean` | false       | If set, disables the input.                      |
-| [error](#error)                           | `error`                           | `string`  |             |                                                  |
+| [error](#error)                           | `error`                           | `string`  |             | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
 | [errorMessage](#errorMessage)                    | `errorMessage`                    | `string`  |             | Contains the help text message for the current validity error. |
+| [format](#format)                          | `format`                          | `string`  |             | Specifies the input mask format.                 |
 | [icon](#icon)                            | `icon`                            | `boolean` | false       | If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format. |
 | [id](#id)                              | `id`                              | `string`  |             | Sets the unique ID of the element.               |
 | [lang](#lang)                            | `lang`                            | `string`  |             | Defines the language of an element.              |
@@ -47,18 +48,17 @@ Generate unique names for dependency components.
 | [setCustomValidityTooShort](#setCustomValidityTooShort)       | `setCustomValidityTooShort`       | `string`  |             | Custom help text message to display when validity = `tooShort`. |
 | [setCustomValidityValueMissing](#setCustomValidityValueMissing)   | `setCustomValidityValueMissing`   | `string`  |             | Custom help text message to display when validity = `valueMissing`. |
 | [spellcheck](#spellcheck)                      | `spellcheck`                      | `string`  |             | An enumerated attribute defines whether the element may be checked for spelling errors. [true, false]. When set to `false` the attribute `autocorrect` is set to `off` and `autocapitalize` is set to `none`. |
-| [type](#type)                            | `type`                            | `string`  |             | Populates the `type` attribute on the input. Allowed values are `password`, `email`, `credit-card`, `month-day-year`, `month-year`, `year-month-day` or `text`. If given value is not allowed or set, defaults to `text`. |
+| [type](#type)                            | `type`                            | `string`  |             | Populates the `type` attribute on the input. Allowed values are `password`, `email`, `credit-card`, `date`, `tel` or `text`. If given value is not allowed or set, defaults to `text`. |
 | [validateOnInput](#validateOnInput)                 | `validateOnInput`                 | `boolean` |             | Sets validation mode to re-eval with each input. |
 | [validity](#validity)                        | `validity`                        | `string`  |             | Specifies the `validityState` this element is in. |
 | [value](#value)                           | `value`                           | `string`  |             | Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input. |
 
 ## Methods
 
-| Method       | Type                                   | Description                                      |
-|--------------|----------------------------------------|--------------------------------------------------|
-| [isDateType](#isDateType) | `(): boolean`                          |                                                  |
-| [reset](#reset)      | `(): void`                             | Resets component to initial state.               |
-| [validate](#validate)   | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
+| Method     | Type                                   | Description                                      |
+|------------|----------------------------------------|--------------------------------------------------|
+| [reset](#reset)    | `(): void`                             | Resets component to initial state.               |
+| [validate](#validate) | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
 
 ## Events
 
@@ -127,7 +127,7 @@ Use the `disable` attribute to prevent the user from interacting with the input.
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/disabled.html) -->
   <!-- The below content is automatically added from ../apiExamples/disabled.html -->
-  <auro-input disabled bordered type="month-day-year">
+  <auro-input disabled bordered type="date">
     <slot slot="label">Arrival date</slot>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
@@ -138,7 +138,7 @@ Use the `disable` attribute to prevent the user from interacting with the input.
 <!-- The below code snippet is automatically added from ../apiExamples/disabled.html -->
 
 ```html
-<auro-input disabled bordered type="month-day-year">
+<auro-input disabled bordered type="date">
   <slot slot="label">Arrival date</slot>
 </auro-input>
 ```
@@ -261,7 +261,7 @@ The `setCustomValidityRangeOverflow` attribute may optionally be used in combina
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/maxDate.html) -->
   <!-- The below content is automatically added from ../apiExamples/maxDate.html -->
-  <auro-input type="month-day-year" max="03/25/2023" setCustomValidityRangeOverflow="The selected date is past the defined maximum date." bordered>
+  <auro-input type="date" max="03/25/2023" setCustomValidityRangeOverflow="The selected date is past the defined maximum date." bordered>
     <span slot="label">Choose a date</span>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
@@ -272,7 +272,7 @@ The `setCustomValidityRangeOverflow` attribute may optionally be used in combina
 <!-- The below code snippet is automatically added from ../apiExamples/maxDate.html -->
 
 ```html
-<auro-input type="month-day-year" max="03/25/2023" setCustomValidityRangeOverflow="The selected date is past the defined maximum date." bordered>
+<auro-input type="date" max="03/25/2023" setCustomValidityRangeOverflow="The selected date is past the defined maximum date." bordered>
   <span slot="label">Choose a date</span>
 </auro-input>
 ```
@@ -312,7 +312,7 @@ The `setCustomValidityRangeUnderflow` attribute may optionally be used in combin
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/minDate.html) -->
   <!-- The below content is automatically added from ../apiExamples/minDate.html -->
-  <auro-input type="month-day-year" min="03/25/2023" setCustomValidityRangeUnderflow="The selected date is before the defined minimum date." bordered>
+  <auro-input type="date" min="03/25/2023" setCustomValidityRangeUnderflow="The selected date is before the defined minimum date." bordered>
     <span slot="label">Choose a date</span>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
@@ -323,7 +323,7 @@ The `setCustomValidityRangeUnderflow` attribute may optionally be used in combin
 <!-- The below code snippet is automatically added from ../apiExamples/minDate.html -->
 
 ```html
-<auro-input type="month-day-year" min="03/25/2023" setCustomValidityRangeUnderflow="The selected date is before the defined minimum date." bordered>
+<auro-input type="date" min="03/25/2023" setCustomValidityRangeUnderflow="The selected date is before the defined minimum date." bordered>
   <span slot="label">Choose a date</span>
 </auro-input>
 ```
@@ -541,6 +541,33 @@ For use cases where the field is `required`, but live validation is not wanted,
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+### Format <a name="format"></a>
+Use the `format` attribute to set the format of the IMask. 
+
+Default masking definitions:
+- 0 : number
+- a : letter
+- \* : any character
+
+See [IMask](https://imask.js.org/) for more information on how to configure a mask.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/format.html) -->
+  <!-- The below content is automatically added from ../apiExamples/format.html -->
+  <auro-input bordered format="47440000"></auro-input>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/format.html) -->
+<!-- The below code snippet is automatically added from ../apiExamples/format.html -->
+
+```html
+<auro-input bordered format="47440000"></auro-input>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ## Error support and HTML5 Validity
 
 The `<auro-input>` component follows the HTML5 input `validity` and `validityState` [specification](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#client-side_validation).
@@ -826,80 +853,81 @@ Use the `type="credit-card"` and `icon` attributes for a credit card formatted i
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-### Date Format
+### Phone Number
 
-Use the `type="month-day-year"` attribute for a date formatted input.
+Use the `type="tel"` attribute for a phone number formatted input. The default format is `+1 (000) 000-0000`.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/monthDayYear.html) -->
-  <!-- The below content is automatically added from ../apiExamples/monthDayYear.html -->
-  <auro-input type="month-day-year" bordered>
-    <slot slot="label">Arrival date</slot>
-  </auro-input>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/tel.html) -->
+  <!-- The below content is automatically added from ../apiExamples/tel.html -->
+  <auro-input type="tel" bordered></auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/monthDayYear.html) -->
-<!-- The below code snippet is automatically added from ../apiExamples/monthDayYear.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/tel.html) -->
+<!-- The below code snippet is automatically added from ../apiExamples/tel.html -->
 
 ```html
-<auro-input type="month-day-year" bordered>
-  <slot slot="label">Arrival date</slot>
-</auro-input>
+<auro-input type="tel" bordered></auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
-Use the `type="month-year"` attribute for a date formatted input.
+
+#### Formatting
+
+Use the `format` attribute to set a custom phone number format.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/monthYear.html) -->
-  <!-- The below content is automatically added from ../apiExamples/monthYear.html -->
-  <auro-input type="month-year" bordered>
-    <slot slot="label">Arrival date</slot>
-  </auro-input>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/telFormat.html) -->
+  <!-- The below content is automatically added from ../apiExamples/telFormat.html -->
+  <auro-input type="tel" format="+22 999 99 9999" bordered></auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/monthYear.html) -->
-<!-- The below code snippet is automatically added from ../apiExamples/monthYear.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/telFormat.html) -->
+<!-- The below code snippet is automatically added from ../apiExamples/telFormat.html -->
 
 ```html
-<auro-input type="month-year" bordered>
-  <slot slot="label">Arrival date</slot>
-</auro-input>
+<auro-input type="tel" format="+22 999 99 9999" bordered></auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
-Use the `type="month-fullYear"` attribute for a date formatted input.
+
+### Date
+
+Use the `type="date"` attribute for a date formatted input. The default date format is `mm/dd/yyyy`.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/monthFullYear.html) -->
-  <!-- The below content is automatically added from ../apiExamples/monthFullYear.html -->
-  <auro-input type="month-fullYear" bordered>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/monthDayYear.html) -->
+  <!-- The below content is automatically added from ../apiExamples/monthDayYear.html -->
+  <auro-input type="date" bordered>
     <slot slot="label">Arrival date</slot>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/monthFullYear.html) -->
-<!-- The below code snippet is automatically added from ../apiExamples/monthFullYear.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/monthDayYear.html) -->
+<!-- The below code snippet is automatically added from ../apiExamples/monthDayYear.html -->
 
 ```html
-<auro-input type="month-fullYear" bordered>
+<auro-input type="date" bordered>
   <slot slot="label">Arrival date</slot>
 </auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
-Use the `type="year-month-day"` attribute for a date formatted input.
+
+#### Formatting
+
+Use the `format` attribute to put together any combination of `mm`, `dd`, & `yyyy` or `yy`.
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/yearMonthDay.html) -->
   <!-- The below content is automatically added from ../apiExamples/yearMonthDay.html -->
-  <auro-input type="year-month-day" bordered>
+  <auro-input type="date" format="yyyy/mm/dd" bordered>
     <slot slot="label">Arrival date</slot>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
@@ -910,74 +938,48 @@ Use the `type="year-month-day"` attribute for a date formatted input.
 <!-- The below code snippet is automatically added from ../apiExamples/yearMonthDay.html -->
 
 ```html
-<auro-input type="year-month-day" bordered>
+<auro-input type="date" format="yyyy/mm/dd" bordered>
   <slot slot="label">Arrival date</slot>
 </auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
-Use the `type="month"` attribute for a date formatted input.
-
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/month.html) -->
-  <!-- The below content is automatically added from ../apiExamples/month.html -->
-  <auro-input type="month" bordered>
-    <slot slot="label">Month</slot>
-  </auro-input>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/month.html) -->
-<!-- The below code snippet is automatically added from ../apiExamples/month.html -->
-
-```html
-<auro-input type="month" bordered>
-  <slot slot="label">Month</slot>
-</auro-input>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-Use the `type="year"` attribute for a date formatted input.
-
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/year.html) -->
-  <!-- The below content is automatically added from ../apiExamples/year.html -->
-  <auro-input type="year" bordered>
-    <slot slot="label">Year</slot>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/monthYear.html) -->
+  <!-- The below content is automatically added from ../apiExamples/monthYear.html -->
+  <auro-input type="date" format="mm/yy" bordered>
+    <slot slot="label">Expiration date</slot>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/year.html) -->
-<!-- The below code snippet is automatically added from ../apiExamples/year.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/monthYear.html) -->
+<!-- The below code snippet is automatically added from ../apiExamples/monthYear.html -->
 
 ```html
-<auro-input type="year" bordered>
-  <slot slot="label">Year</slot>
+<auro-input type="date" format="mm/yy" bordered>
+  <slot slot="label">Expiration date</slot>
 </auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
-Use the `type="fullYear"` attribute for a date formatted input.
-
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/fullYear.html) -->
-  <!-- The below content is automatically added from ../apiExamples/fullYear.html -->
-  <auro-input type="fullYear" bordered>
-    <slot slot="label">Full Year</slot>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/day.html) -->
+  <!-- The below content is automatically added from ../apiExamples/day.html -->
+  <auro-input type="date" format="dd" bordered>
+    <slot slot="label">Day</slot>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/fullYear.html) -->
-<!-- The below code snippet is automatically added from ../apiExamples/fullYear.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/day.html) -->
+<!-- The below code snippet is automatically added from ../apiExamples/day.html -->
 
 ```html
-<auro-input type="fullYear" bordered>
-  <slot slot="label">Full Year</slot>
+<auro-input type="date" format="dd" bordered>
+  <slot slot="label">Day</slot>
 </auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->