@aurodesignsystem-dev/auro-formkit 0.0.0-pr647.2 → 0.0.0-pr647.4

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

@@ -34,6 +34,7 @@ export class AuroBibtemplate extends LitElement {
      * @returns {void}
      */
     exposeCssParts(): void;
+    firstUpdated(changedProperties: any): void;
     render(): import("lit-html").TemplateResult;
 }
 import { LitElement } from "lit";

package/components/bibtemplate/dist/index.js

@@ -816,6 +816,18 @@ class AuroBibtemplate extends LitElement {
     this.setAttribute('exportparts', 'bibtemplate:dropdownBibTemplate');
   }
 
+  firstUpdated(changedProperties) {
+    super.firstUpdated(changedProperties);
+
+    this.dispatchEvent(new CustomEvent("auro-bibtemplate-connected", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        element: this
+      }
+    }));
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     return html$1`

package/components/bibtemplate/dist/registered.js

@@ -816,6 +816,18 @@ class AuroBibtemplate extends LitElement {
     this.setAttribute('exportparts', 'bibtemplate:dropdownBibTemplate');
   }
 
+  firstUpdated(changedProperties) {
+    super.firstUpdated(changedProperties);
+
+    this.dispatchEvent(new CustomEvent("auro-bibtemplate-connected", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        element: this
+      }
+    }));
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     return html$1`

package/components/checkbox/demo/api.min.js

@@ -449,9 +449,10 @@ class DateFormatter {
     /**
      * Convert a date object to string format.
      * @param {Object} date - Date to convert to string.
-     * @returns {Object} Returns the date as a string.
+     * @param {String} locale - Optional locale to use for the date string. Defaults to user's locale.
+     * @returns {String} Returns the date as a string.
      */
-    this.getDateAsString = (date) => date.toLocaleDateString(undefined, {
+    this.getDateAsString = (date, locale = undefined) => date.toLocaleDateString(locale, {
       year: "numeric",
       month: "2-digit",
       day: "2-digit",
@@ -643,7 +644,7 @@ class AuroDateUtilities extends AuroDateUtilitiesBase {
       const dateObj = new Date(this.getFourDigitYear(dateParts.year), dateParts.month - 1, dateParts.day || 1);
 
       // Get the date string of the date object we created from the string date
-      const actualDateStr = dateFormatter.getDateAsString(dateObj);
+      const actualDateStr = dateFormatter.getDateAsString(dateObj, "en-US");
 
       // Guard Clause: Generated date matches date string input
       if (expectedDateStr !== actualDateStr) {

package/components/checkbox/demo/index.min.js

@@ -441,9 +441,10 @@ class DateFormatter {
     /**
      * Convert a date object to string format.
      * @param {Object} date - Date to convert to string.
-     * @returns {Object} Returns the date as a string.
+     * @param {String} locale - Optional locale to use for the date string. Defaults to user's locale.
+     * @returns {String} Returns the date as a string.
      */
-    this.getDateAsString = (date) => date.toLocaleDateString(undefined, {
+    this.getDateAsString = (date, locale = undefined) => date.toLocaleDateString(locale, {
       year: "numeric",
       month: "2-digit",
       day: "2-digit",
@@ -635,7 +636,7 @@ class AuroDateUtilities extends AuroDateUtilitiesBase {
       const dateObj = new Date(this.getFourDigitYear(dateParts.year), dateParts.month - 1, dateParts.day || 1);
 
       // Get the date string of the date object we created from the string date
-      const actualDateStr = dateFormatter.getDateAsString(dateObj);
+      const actualDateStr = dateFormatter.getDateAsString(dateObj, "en-US");
 
       // Guard Clause: Generated date matches date string input
       if (expectedDateStr !== actualDateStr) {

package/components/checkbox/dist/index.js

@@ -394,9 +394,10 @@ class DateFormatter {
     /**
      * Convert a date object to string format.
      * @param {Object} date - Date to convert to string.
-     * @returns {Object} Returns the date as a string.
+     * @param {String} locale - Optional locale to use for the date string. Defaults to user's locale.
+     * @returns {String} Returns the date as a string.
      */
-    this.getDateAsString = (date) => date.toLocaleDateString(undefined, {
+    this.getDateAsString = (date, locale = undefined) => date.toLocaleDateString(locale, {
       year: "numeric",
       month: "2-digit",
       day: "2-digit",
@@ -588,7 +589,7 @@ class AuroDateUtilities extends AuroDateUtilitiesBase {
       const dateObj = new Date(this.getFourDigitYear(dateParts.year), dateParts.month - 1, dateParts.day || 1);
 
       // Get the date string of the date object we created from the string date
-      const actualDateStr = dateFormatter.getDateAsString(dateObj);
+      const actualDateStr = dateFormatter.getDateAsString(dateObj, "en-US");
 
       // Guard Clause: Generated date matches date string input
       if (expectedDateStr !== actualDateStr) {

package/components/checkbox/dist/registered.js

@@ -394,9 +394,10 @@ class DateFormatter {
     /**
      * Convert a date object to string format.
      * @param {Object} date - Date to convert to string.
-     * @returns {Object} Returns the date as a string.
+     * @param {String} locale - Optional locale to use for the date string. Defaults to user's locale.
+     * @returns {String} Returns the date as a string.
      */
-    this.getDateAsString = (date) => date.toLocaleDateString(undefined, {
+    this.getDateAsString = (date, locale = undefined) => date.toLocaleDateString(locale, {
       year: "numeric",
       month: "2-digit",
       day: "2-digit",
@@ -588,7 +589,7 @@ class AuroDateUtilities extends AuroDateUtilitiesBase {
       const dateObj = new Date(this.getFourDigitYear(dateParts.year), dateParts.month - 1, dateParts.day || 1);
 
       // Get the date string of the date object we created from the string date
-      const actualDateStr = dateFormatter.getDateAsString(dateObj);
+      const actualDateStr = dateFormatter.getDateAsString(dateObj, "en-US");
 
       // Guard Clause: Generated date matches date string input
       if (expectedDateStr !== actualDateStr) {

package/components/combobox/demo/api.md

@@ -5,31 +5,31 @@
 
 ## Properties
 
-| Property                        | Attribute                       | Type                   | Default        | Description                                      |
-|---------------------------------|---------------------------------|------------------------|----------------|--------------------------------------------------|
-| [autoPlacement](#autoPlacement)                 | `autoPlacement`                 | `boolean`              |                | If declared, bib's position will be automatically calculated where to appear. |
-| [autocomplete](#autocomplete)                  | `autocomplete`                  | `string`               | "false"        | An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported. |
-| [checkmark](#checkmark)                     | `checkmark`                     | `boolean`              |                | When attribute is present auro-menu will apply checkmarks to selected options. |
-| [disabled](#disabled)                      | `disabled`                      | `boolean`              |                | If set, disables the combobox.                   |
-| [error](#error)                         | `error`                         | `string`               |                | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
-| [fullscreenBreakpoint](#fullscreenBreakpoint)          | `fullscreenBreakpoint`          | `string`               | "sm"           | Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)<br />at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
-| [inputmode](#inputmode)                     | `inputmode`                     | `string`               |                | Exposes inputmode attribute for input.           |
-| [largeFullscreenHeadline](#largeFullscreenHeadline)       | `largeFullscreenHeadline`       | `boolean`              |                | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600 |
-| [noFilter](#noFilter)                      | `noFilter`                      | `boolean`              |                | If set, combobox will not filter menuoptions based in input. |
-| [noFlip](#noFlip)                        | `noFlip`                        | `boolean`              | "false"        | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
-| [noValidate](#noValidate)                    | `noValidate`                    | `boolean`              |                | If set, disables auto-validation on blur.        |
-| [offset](#offset)                        | `offset`                        | `number`               | "0"            | Gap between the trigger element and bib.         |
-| [onDark](#onDark)                        | `onDark`                        | `boolean`              |                | If declared, onDark styles will be applied to the trigger. |
-| [optionSelected](#optionSelected)                | `optionSelected`                | `object`               |                | Specifies the current selected option.           |
-| [placement](#placement)                     | `placement`                     | `string`               | "bottom-start" | Position where the bib should appear relative to the trigger.<br />Accepted values:<br />"top" \| "right" \| "bottom" \| "left" \|<br />"bottom-start" \| "top-start" \| "top-end" \|<br />"right-start" \| "right-end" \| "bottom-end" \|<br />"left-start" \| "left-end" |
-| [required](#required)                      | `required`                      | `boolean`              |                | Populates the `required` attribute on the input. Used for client-side validation. |
-| [setCustomValidity](#setCustomValidity)             | `setCustomValidity`             | `string`               |                | Sets a custom help text message to display for all validityStates. |
-| [setCustomValidityCustomError](#setCustomValidityCustomError)  | `setCustomValidityCustomError`  | `string`               |                | Custom help text message to display when validity = `customError`. |
-| [setCustomValidityValueMissing](#setCustomValidityValueMissing) | `setCustomValidityValueMissing` | `string`               |                | Custom help text message to display when validity = `valueMissing`. |
-| [triggerIcon](#triggerIcon)                   | `triggerIcon`                   | `boolean`              |                | If set, the `icon` attribute will be applied to the trigger `auro-input` element. |
-| [type](#type)                          | `type`                          | `string`               |                | Applies the defined value as the type attribute on auro-input. |
-| [validity](#validity)                      | `validity`                      | `string`               |                | Specifies the `validityState` this element is in. |
-| [value](#value)                         | `value`                         | `Array\|String<Array>` |                | Value selected for the dropdown menu.            |
+| Property                        | Attribute                       | Type          | Default        | Description                                      |
+|---------------------------------|---------------------------------|---------------|----------------|--------------------------------------------------|
+| [autoPlacement](#autoPlacement)                 | `autoPlacement`                 | `boolean`     |                | If declared, bib's position will be automatically calculated where to appear. |
+| [autocomplete](#autocomplete)                  | `autocomplete`                  | `string`      | "false"        | An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported. |
+| [checkmark](#checkmark)                     | `checkmark`                     | `boolean`     |                | When attribute is present auro-menu will apply checkmarks to selected options. |
+| [disabled](#disabled)                      | `disabled`                      | `boolean`     |                | If set, disables the combobox.                   |
+| [error](#error)                         | `error`                         | `string`      |                | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
+| [fullscreenBreakpoint](#fullscreenBreakpoint)          | `fullscreenBreakpoint`          | `string`      | "sm"           | Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)<br />at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
+| [inputmode](#inputmode)                     | `inputmode`                     | `string`      |                | Exposes inputmode attribute for input.           |
+| [largeFullscreenHeadline](#largeFullscreenHeadline)       | `largeFullscreenHeadline`       | `boolean`     |                | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600 |
+| [noFilter](#noFilter)                      | `noFilter`                      | `boolean`     |                | If set, combobox will not filter menuoptions based in input. |
+| [noFlip](#noFlip)                        | `noFlip`                        | `boolean`     | "false"        | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
+| [noValidate](#noValidate)                    | `noValidate`                    | `boolean`     |                | If set, disables auto-validation on blur.        |
+| [offset](#offset)                        | `offset`                        | `number`      | "0"            | Gap between the trigger element and bib.         |
+| [onDark](#onDark)                        | `onDark`                        | `boolean`     |                | If declared, onDark styles will be applied to the trigger. |
+| [optionSelected](#optionSelected)                | `optionSelected`                | `HTMLElement` |                | Specifies the current selected option.           |
+| [placement](#placement)                     | `placement`                     | `string`      | "bottom-start" | Position where the bib should appear relative to the trigger.<br />Accepted values:<br />"top" \| "right" \| "bottom" \| "left" \|<br />"bottom-start" \| "top-start" \| "top-end" \|<br />"right-start" \| "right-end" \| "bottom-end" \|<br />"left-start" \| "left-end" |
+| [required](#required)                      | `required`                      | `boolean`     |                | Populates the `required` attribute on the input. Used for client-side validation. |
+| [setCustomValidity](#setCustomValidity)             | `setCustomValidity`             | `string`      |                | Sets a custom help text message to display for all validityStates. |
+| [setCustomValidityCustomError](#setCustomValidityCustomError)  | `setCustomValidityCustomError`  | `string`      |                | Custom help text message to display when validity = `customError`. |
+| [setCustomValidityValueMissing](#setCustomValidityValueMissing) | `setCustomValidityValueMissing` | `string`      |                | Custom help text message to display when validity = `valueMissing`. |
+| [triggerIcon](#triggerIcon)                   | `triggerIcon`                   | `boolean`     |                | If set, the `icon` attribute will be applied to the trigger `auro-input` element. |
+| [type](#type)                          | `type`                          | `string`      |                | Applies the defined value as the type attribute on auro-input. |
+| [validity](#validity)                      | `validity`                      | `string`      |                | Specifies the `validityState` this element is in. |
+| [value](#value)                         | `value`                         | `string`      |                | Value selected for the dropdown menu.            |
 
 ## Methods
 
@@ -684,11 +684,11 @@ export function valueExample() {
   const valueExample = document.querySelector('#valueExample');
 
   document.querySelector('#valueValidExampleBtn').addEventListener('click', () => {
-    valueExample.value = ['Oranges'];
+    valueExample.value = 'Oranges';
   });
 
   document.querySelector('#valueInvalidExampleBtn').addEventListener('click', () => {
-    valueExample.value = ['Dragon Fruit'];
+    valueExample.value = 'Dragon Fruit';
   });
 
   document.querySelector('#valueUndefinedExampleBtn').addEventListener('click', () => {