feat: datepicker array values

Refactor's the form datepicker value code into a more reusable fashion that lives inside of datepicker `get values()`.

components/datepicker/src/auro-datepicker.js

@@ -319,6 +319,28 @@ export class AuroDatePicker extends LitElement {
     AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroDatePicker);
   }
 
+  /**
+   * A convenience wrapper for `value` and `valueEnd`, uses the new Auro "array value pattern".
+   * @returns {string[]}
+   */
+  get values() {
+    // If range, and both populated, return both values in an array
+    // - NOTE: both are required here, so we don't have something like `['10/22/25', undefined]`
+    if (this.range && this.value && this.valueEnd) {
+      return [
+        this.value,
+        this.valueEnd
+      ];
+    }
+
+    // This if block catches instances where `value` is present, no matter if valueEnd is selected yet
+    if (this.value) {
+      return [this.value];
+    }
+
+    return [];
+  }
+
   /**
    * Force the calendar view to the focus date when it changes.
    * @private

components/datepicker/test/auro-datepicker.test.js

@@ -325,6 +325,9 @@ describe('auro-datepicker', () => {
     await elementUpdated(el);
 
     await expect(el.value).to.equal(dateSelected);
+    await expect(el.value).to.equal(dateSelected);
+    await expect(el.values).to.have.length(1);
+    await expect(el.values[0]).to.equal(dateSelected);
   });
 
   it('selecting a dateTo date by clicking on the calendar sets the correct value', async () => {
@@ -365,6 +368,9 @@ describe('auro-datepicker', () => {
     await elementUpdated(el);
 
     await expect(el.valueEnd).to.equal(dateToSelected);
+    await expect(el.values).to.have.length(2);
+    await expect(el.values[0]).to.equal(dateSelected);
+    await expect(el.values[1]).to.equal(dateFromSelected);
   });
 
   it('attempting to set the dateTo to a date earlier than dateFrom by clicking on the calendar does not set the valueFrom', async () => {

components/form/src/auro-form.js

@@ -352,15 +352,7 @@ export class AuroForm extends LitElement {
 
       // Check special input types and handle their edge cases
       if (this._isElementTag('auro-datepicker', event.target) && event.target.hasAttribute('range')) {
-        // Value is populated first, check for valueEnd after
-        this.formState[targetName].value = [event.target.value];
-
-        if (event.target.valueEnd) {
-          this.formState[targetName].value = [
-            event.target.value,
-            event.target.valueEnd
-          ];
-        }
+        this.formState[targetName].value = event.target.values;
 
         this.requestUpdate('formState');
       } else {