feat: add auro-datepicker@3.2.0

components/datepicker/apiExamples/alertValue.html

@@ -0,0 +1,3 @@
+<auro-datepicker id="datePickerValueAlert">
+  <span slot="fromLabel">Choose a date</span>
+</auro-datepicker>

components/datepicker/apiExamples/alertValue.js

@@ -0,0 +1,8 @@
+export function alertValueExample() {
+  const valueAlertExample = document.querySelector('#datePickerValueAlert');
+
+  valueAlertExample.addEventListener('auroDatePicker-valueSet', () => {
+    console.warn('Select value changed to:', valueAlertExample.value);
+    alert(`Select value changed to: ${valueAlertExample.value}`);
+  })
+}

components/datepicker/apiExamples/basic.html

@@ -0,0 +1,4 @@
+<auro-datepicker>
+  <span slot="fromLabel">Choose a date</span>
+  <span slot="mobileDateLabel">Choose a date</span>
+</auro-datepicker>

components/datepicker/apiExamples/basicRange.html

@@ -0,0 +1,5 @@
+<auro-datepicker range>
+  <span slot="fromLabel">Departure</span>
+  <span slot="toLabel">Return</span>
+  <span slot="mobileDateLabel">Roundtrip</span>
+</auro-datepicker>

components/datepicker/apiExamples/calendarFocusDate.html

@@ -0,0 +1,4 @@
+<auro-datepicker calendarStartDate="01/01/2022" calendarEndDate="12/01/2023" calendarFocusDate="11/01/2022">
+  <span slot="fromLabel">Choose a date</span>
+  <span slot="mobileDateLabel">Choose a date</span>
+</auro-datepicker>

components/datepicker/apiExamples/calendarStartAndEndDate.html

@@ -0,0 +1,4 @@
+<auro-datepicker calendarStartDate="01/01/2022" calendarEndDate="06/01/2022">
+  <span slot="fromLabel">Choose a date</span>
+  <span slot="mobileDateLabel">Choose a date</span>
+</auro-datepicker>

components/datepicker/apiExamples/centralDate.html

@@ -0,0 +1,3 @@
+<auro-datepicker centralDate="06/16/1980">
+  <span slot="label">Choose a date</span>
+</auro-datepicker>

components/datepicker/apiExamples/custom.html

@@ -0,0 +1,4 @@
+<custom-datepicker selectedDate="06/16/2022">
+    <span slot="fromLabel">Choose a date</span>
+    <span slot="mobileDateLabel">Choose a date</span>
+</custom-datepicker>

components/datepicker/apiExamples/dateSlot.html

@@ -0,0 +1,11 @@
+<auro-datepicker centralDate="12/03/2023" minDate="12/04/2023" maxDate="12/09/2023">
+  <span slot="fromLabel">Choose a date</span>
+  <span slot="mobileDateLabel">Choose a date</span>
+  <span slot="date_12_03_2023">Sold</span>
+  <span highlight slot="date_12_04_2023">$89</span>
+  <span slot="date_12_05_2023">$100</span>
+  <span slot="date_12_06_2023">$2345</span>
+  <span highlight slot="date_12_07_2023">$149</span>
+  <span highlight slot="date_12_08_2023">$382</span>
+  <span slot="date_12_09_2023">$560</span>
+</auro-datepicker>

components/datepicker/apiExamples/disabled.html

@@ -0,0 +1,3 @@
+<auro-datepicker disabled>
+  <span slot="label">Choose a date</span>
+</auro-datepicker>

components/datepicker/apiExamples/dynamicSlot.html

@@ -0,0 +1,4 @@
+<auro-datepicker id="slotContentExample" centralDate="12/13/2023" minDate="12/13/2023" maxDate="01/18/2024" range>
+  <span slot="fromLabel">Choose a date</span>
+  <span slot="mobileDateLabel">Choose a date</span>
+</auro-datepicker>

components/datepicker/apiExamples/dynamicSlot.js

@@ -0,0 +1,119 @@
+export function populateSlotContentExample() {
+  const populateSlotContentExample = document.querySelector('#slotContentExample');
+
+  // Insert slot content when the datepicker has been opened
+  populateSlotContentExample.addEventListener('auroDatePicker-toggled', (event) => {
+    if (event.detail.expanded) {
+      // Array of object(s) containing key, value pairs defining what slot content to render
+      const data = [
+        {slot: 'date', month: 12, day: 1, year: 2023, content: 'Sold'},
+        {slot: 'date', month: 12, day: 2, year: 2023, content: 'Sold'},
+        {slot: 'date', month: 12, day: 3, year: 2023, content: 'Sold'},
+        {slot: 'date', month: 12, day: 4, year: 2023, content: 'Sold'},
+        {slot: 'date', month: 12, day: 5, year: 2023, content: 'Sold'},
+        {slot: 'date', month: 12, day: 6, year: 2023, content: 'Sold'},
+        {slot: 'date', month: 12, day: 7, year: 2023, content: 'Sold'},
+        {slot: 'date', month: 12, day: 8, year: 2023, content: 'Sold'},
+        {slot: 'date', month: 12, day: 9, year: 2023, content: 'Sold'},
+        {slot: 'date', month: 12, day: 10, year: 2023, content: 'Sold'},
+        {slot: 'date', month: 12, day: 11, year: 2023, content: 'Sold'},
+        {slot: 'date', month: 12, day: 12, year: 2023, content: 'Sold'},
+        {slot: 'date', month: 12, day: 13, year: 2023, content: '$560'},
+        {slot: 'date', month: 12, day: 14, year: 2023, content: '$89', highlight: true},
+        {slot: 'date', month: 12, day: 15, year: 2023, content: '$100'},
+        {slot: 'date', month: 12, day: 16, year: 2023, content: '$2345'},
+        {slot: 'date', month: 12, day: 17, year: 2023, content: '$2345'},
+        {slot: 'date', month: 12, day: 18, year: 2023, content: '$2345'},
+        {slot: 'date', month: 12, day: 19, year: 2023, content: '$2345'},
+        {slot: 'date', month: 12, day: 20, year: 2023, content: '$2345'},
+        {slot: 'date', month: 12, day: 21, year: 2023, content: '$2345'},
+        {slot: 'date', month: 12, day: 22, year: 2023, content: '$2345'},
+        {slot: 'date', month: 12, day: 23, year: 2023, content: '$2345'},
+        {slot: 'date', month: 12, day: 24, year: 2023, content: '$2345'},
+        {slot: 'date', month: 12, day: 25, year: 2023, content: '$2345'},
+        {slot: 'date', month: 12, day: 26, year: 2023, content: '$2345'},
+        {slot: 'date', month: 12, day: 27, year: 2023, content: '$2345'},
+        {slot: 'date', month: 12, day: 28, year: 2023, content: '$2345'},
+        {slot: 'date', month: 12, day: 29, year: 2023, content: '$2345'},
+        {slot: 'date', month: 12, day: 30, year: 2023, content: '$2345'},
+        {slot: 'date', month: 12, day: 31, year: 2023, content: '$2345'},
+        {slot: 'date', month: 1, day: 14, year: 2024, content: '$83', highlight: true},
+        {slot: 'date', month: 1, day: 15, year: 2024, content: '$203'},
+        {slot: 'date', month: 1, day: 16, year: 2024, content: '$4444'},
+        {slot: 'date', month: 1, day: 17, year: 2024, content: '$83', highlight: true},
+        {slot: 'date', month: 1, day: 18, year: 2024, content: '$96', highlight: true},
+        {slot: 'date', month: 1, day: 19, year: 2024, content: 'Sold'},
+        {slot: 'date', month: 1, day: 20, year: 2024, content: 'Sold'},
+        {slot: 'popover', month: 12, day: 1, year: 2023, content: 'Tickets for this date are sold out'},
+        {slot: 'popover', month: 12, day: 2, year: 2023, content: 'Tickets for this date are sold out'},
+        {slot: 'popover', month: 12, day: 3, year: 2023, content: 'Tickets for this date are sold out'},
+        {slot: 'popover', month: 12, day: 4, year: 2023, content: 'Tickets for this date are sold out'},
+        {slot: 'popover', month: 12, day: 5, year: 2023, content: 'Tickets for this date are sold out'},
+        {slot: 'popover', month: 12, day: 6, year: 2023, content: 'Tickets for this date are sold out'},
+        {slot: 'popover', month: 12, day: 7, year: 2023, content: 'Tickets for this date are sold out'},
+        {slot: 'popover', month: 12, day: 8, year: 2023, content: 'Tickets for this date are sold out'},
+        {slot: 'popover', month: 12, day: 9, year: 2023, content: 'Tickets for this date are sold out'},
+        {slot: 'popover', month: 12, day: 10, year: 2023, content: 'Tickets for this date are sold out'},
+        {slot: 'popover', month: 12, day: 11, year: 2023, content: 'Tickets for this date are sold out'},
+        {slot: 'popover', month: 12, day: 12, year: 2023, content: 'Tickets for this date are sold out'},
+        {slot: 'popover', month: 12, day: 13, year: 2023, content: 'Tickets for this date are $560'},
+        {slot: 'popover', month: 12, day: 14, year: 2023, content: 'Tickets for this date are $89'},
+        {slot: 'popover', month: 12, day: 15, year: 2023, content: 'Tickets for this date are $100'},
+        {slot: 'popover', month: 12, day: 16, year: 2023, content: 'Tickets for this date are $2345'},
+        {slot: 'popover', month: 12, day: 17, year: 2023, content: 'Tickets for this date are $2345'},
+        {slot: 'popover', month: 12, day: 18, year: 2023, content: 'Tickets for this date are $2345'},
+        {slot: 'popover', month: 12, day: 19, year: 2023, content: 'Tickets for this date are $2345'},
+        {slot: 'popover', month: 12, day: 20, year: 2023, content: 'Tickets for this date are $2345'},
+        {slot: 'popover', month: 12, day: 21, year: 2023, content: 'Tickets for this date are $2345'},
+        {slot: 'popover', month: 12, day: 22, year: 2023, content: 'Tickets for this date are $2345'},
+        {slot: 'popover', month: 12, day: 23, year: 2023, content: 'Tickets for this date are $2345'},
+        {slot: 'popover', month: 12, day: 24, year: 2023, content: 'Tickets for this date are $2345'},
+        {slot: 'popover', month: 12, day: 25, year: 2023, content: 'Tickets for this date are $2345'},
+        {slot: 'popover', month: 12, day: 26, year: 2023, content: 'Tickets for this date are $2345'},
+        {slot: 'popover', month: 12, day: 27, year: 2023, content: 'Tickets for this date are $2345'},
+        {slot: 'popover', month: 12, day: 28, year: 2023, content: 'Tickets for this date are $2345'},
+        {slot: 'popover', month: 12, day: 29, year: 2023, content: 'Tickets for this date are $2345'},
+        {slot: 'popover', month: 12, day: 30, year: 2023, content: 'Tickets for this date are $2345'},
+        {slot: 'popover', month: 12, day: 31, year: 2023, content: 'Tickets for this date are $2345'},
+        {slot: 'popover', month: 1, day: 14, year: 2024, content: 'Tickets for this date are $83'},
+        {slot: 'popover', month: 1, day: 15, year: 2024, content: 'Tickets for this date are $203'},
+        {slot: 'popover', month: 1, day: 16, year: 2024, content: 'Tickets for this date are $4444'},
+        {slot: 'popover', month: 1, day: 17, year: 2024, content: 'Tickets for this date are $83'},
+        {slot: 'popover', month: 1, day: 18, year: 2024, content: 'Tickets for this date are $96'},
+        {slot: 'popover', month: 1, day: 19, year: 2024, content: 'Tickets for this date are sold out'},
+        {slot: 'popover', month: 1, day: 20, year: 2024, content: 'Tickets for this date are sold out'}
+      ];
+
+      // For each item in the array, parse the keys into an HTML element and insert it into the DOM
+      data.forEach((item) => {
+        // Create the new element for the slot content
+        const slotElement = document.createElement('span');
+
+        if (item.month.toString().length === 1) {
+          item.month = `0` + item.month;
+        }
+
+        if (item.day.toString().length === 1) {
+          item.day = `0` + item.day;
+        }
+
+        // Create the slot name from the item's keys
+        const slotName = `${item.slot}_${item.month}_${item.day}_${item.year}`;
+
+        // Set the slot name and content
+        slotElement.setAttribute('slot', slotName);
+        slotElement.textContent = item.content;
+
+        // Set the 'highlight' attribute on date slot content
+        if (item.slot === 'date' && item.highlight) {
+          slotElement.setAttribute('highlight', item.highlight);
+        }
+
+        // Append the new element to the DOM
+        populateSlotContentExample.appendChild(slotElement);
+      });
+    }
+
+    populateSlotContentExample.pushSlotContent();
+  });
+}

components/datepicker/apiExamples/error.html

@@ -0,0 +1,6 @@
+<auro-datepicker error="Custom error message" id="errorExample">
+  <span slot="label">Choose a date</span>
+</auro-datepicker>
+<br/><br/>
+<auro-button id="undefinedValueExampleBtnAddError">Set Error</auro-button>
+<auro-button id="undefinedValueExampleBtnRemoveError">Remove Error</auro-button>

components/datepicker/apiExamples/error.js

@@ -0,0 +1,11 @@
+export function errorExample() {
+  const errorExample = document.querySelector('#errorExample');
+
+  document.querySelector('#undefinedValueExampleBtnAddError').addEventListener('click', () => {
+    errorExample.error = 'Custom New Error';
+  })
+
+  document.querySelector('#undefinedValueExampleBtnRemoveError').addEventListener('click', () => {
+    errorExample.removeAttribute('error');
+  })
+}

components/datepicker/apiExamples/focus.html

@@ -0,0 +1,6 @@
+<auro-button id="focusExampleBtn">Apply focus to datepicker</auro-button>
+<auro-button id="focusExampleBtnTwo">Apply focus to the second input in datepicker</auro-button>
+<br /><br />
+<auro-datepicker id="focusExampleElem" range>
+  <span slot="label">Choose a date</span>
+</auro-datepicker>

components/datepicker/apiExamples/focus.js

@@ -0,0 +1,13 @@
+export function focusExample() {
+  const focusExampleElem = document.querySelector('#focusExampleElem');
+  const focusExampleBtn = document.querySelector('#focusExampleBtn');
+  const focusExampleBtnTwo = document.querySelector('#focusExampleBtnTwo');
+
+  focusExampleBtn.addEventListener('click', () => {
+    focusExampleElem.focus();
+  });
+
+  focusExampleBtnTwo.addEventListener('click', () => {
+    focusExampleElem.focus('endDate');
+  });
+}

components/datepicker/apiExamples/helpText.html

@@ -0,0 +1,4 @@
+<auro-datepicker>
+  <span slot="label">Choose a date</span>
+  <span slot="helpText">Choose a date must be today or earlier.</span>
+</auro-datepicker>

components/datepicker/apiExamples/maxDate.html

@@ -0,0 +1,4 @@
+<auro-datepicker maxDate="03/25/2023" setCustomValidityRangeOverflow="Selected date is later than maximum date.">
+  <span slot="fromLabel">Choose a date</span>
+  <span slot="mobileDateLabel">Choose a date</span>
+</auro-datepicker>

components/datepicker/apiExamples/minDate.html

@@ -0,0 +1,4 @@
+<auro-datepicker minDate="03/25/2028" setCustomValidityRangeUnderflow="Selected date is earlier than the minimum date.">
+  <span slot="fromLabel">Choose a date</span>
+  <span slot="mobileDateLabel">Choose a date</span>
+</auro-datepicker>

components/datepicker/apiExamples/monthNames.html

@@ -0,0 +1,4 @@
+<auro-datepicker id="monthNamesExample">
+  <span slot="fromLabel">Choose a date</span>
+  <span slot="mobileDateLabel">Choose a date</span>
+</auro-datepicker>

components/datepicker/apiExamples/monthNames.js

@@ -0,0 +1,6 @@
+export function monthNamesExample() {
+  const monthNamesExample = document.querySelector('#monthNamesExample');
+  const spanishMonths = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];
+
+  monthNamesExample.monthNames = spanishMonths;
+}

components/datepicker/apiExamples/noValidate.html

@@ -0,0 +1,3 @@
+<auro-datepicker required noValidate>
+  <span slot="fromLabel">Choose a date</span>
+</auro-datepicker>

components/datepicker/apiExamples/popoverSlot.html

@@ -0,0 +1,11 @@
+<auro-datepicker centralDate="12/03/2023" minDate="12/04/2023" maxDate="12/09/2023">
+  <span slot="fromLabel">Choose a date</span>
+  <span slot="mobileDateLabel">Choose a date</span>
+  <span slot="popover_12_03_2023">Tickets for this day are sold out</span>
+  <span slot="popover_12_04_2023">Tickets for this day are $89</span>
+  <span slot="popover_12_05_2023">Tickets for this day are $100</span>
+  <span slot="popover_12_06_2023">Tickets for this day are $2345</span>
+  <span slot="popover_12_07_2023">Tickets for this day are $149</span>
+  <span slot="popover_12_08_2023">Tickets for this day are $382</span>
+  <span slot="popover_12_09_2023">Tickets for this day are $560</span>
+</auro-datepicker>

components/datepicker/apiExamples/required.html

@@ -0,0 +1,9 @@
+<auro-datepicker required setCustomValidityValueMissing="Custom value missing message.">
+  <span slot="fromLabel">Choose a date</span>
+  <span slot="mobileDateLabel">Choose a date</span>
+</auro-datepicker>
+<auro-datepicker required range setCustomValidityValueMissing="Custom value missing message.">
+  <span slot="fromLabel">Departure</span>
+  <span slot="toLabel">Return</span>
+  <span slot="mobileDateLabel">Roundtrip</span>
+</auro-datepicker>

components/datepicker/apiExamples/selectedDate.html

@@ -0,0 +1,3 @@
+<auro-datepicker selectedDate="06/16/2022">
+  <span slot="label">Choose a date</span>
+</auro-datepicker>

components/datepicker/apiExamples/updateMaxDate.html

@@ -0,0 +1,5 @@
+<auro-datepicker id="maxDateExample" setCustomValidityRangeOverflow="Selected date is later than maximum date.">
+  <span slot="label">Choose a date</span>
+</auro-datepicker>
+<auro-button id="maxDateChange">Change maxDate to Today's Date</auro-button>
+<auro-button id="resetMaxDate">Reset Datepicker to Initial Example</auro-button>

components/datepicker/apiExamples/updateMaxDate.js

@@ -0,0 +1,35 @@
+function formatDateString(date) {
+  /* eslint-disable prefer-template, no-magic-numbers */
+  const dd = String("0" + date.getDate()).slice(-2);
+  const mm = String("0" + (date.getMonth() + 1)).slice(-2);
+  /* eslint-enable prefer-template, no-magic-numbers */
+  const yyyy = date.getFullYear();
+
+  return `${mm}/${dd}/${yyyy}`;
+}
+
+export function updateMaxDateExample() {
+  const maxDateExample = document.getElementById('maxDateExample');
+  const changeMaxDateButton = document.getElementById('maxDateChange');
+  const resetButton = document.getElementById('resetMaxDate');
+
+  const today = formatDateString(new Date());
+
+  let nextWeek = new Date();
+  let addOneWeek = nextWeek.getDate() + 7;
+
+  nextWeek.setDate(addOneWeek);
+  nextWeek = formatDateString(nextWeek);
+
+  maxDateExample.setAttribute('value', nextWeek);
+  maxDateExample.setAttribute('maxDate', nextWeek);
+
+  changeMaxDateButton.addEventListener('click', () => {
+    maxDateExample.setAttribute('maxDate', today);
+  });
+
+  resetButton.addEventListener('click', () => {
+    maxDateExample.setAttribute('value', nextWeek);
+    maxDateExample.setAttribute('maxDate', nextWeek);
+  });
+}

components/datepicker/apiExamples/updateMinDate.html

@@ -0,0 +1,5 @@
+<auro-datepicker id="minDateExample" setCustomValidityRangeUnderflow="Selected date is earlier than the minimum date.">
+  <span slot="label">Choose a date</span>
+</auro-datepicker>
+<auro-button id="minDateChange">Change minDate to a week from Today</auro-button>
+<auro-button id="resetMinDate">Reset Datepicker to Initial Example</auro-button>

components/datepicker/apiExamples/updateMinDate.js

@@ -0,0 +1,37 @@
+function formatDateString(date) {
+  /* eslint-disable prefer-template, no-magic-numbers */
+  const dd = String("0" + date.getDate()).slice(-2);
+  const mm = String("0" + (date.getMonth() + 1)).slice(-2);
+  /* eslint-enable prefer-template, no-magic-numbers */
+  const yyyy = date.getFullYear();
+
+  return `${mm}/${dd}/${yyyy}`;
+}
+
+export function updateMinDateExample() {
+  const minDateExample = document.getElementById('minDateExample');
+  const changeMinDateButton = document.getElementById('minDateChange');
+  const resetButton = document.getElementById('resetMinDate');
+
+  const today = formatDateString(new Date());
+
+  let nextWeek = new Date();
+  let addOneWeek = nextWeek.getDate() + 7;
+
+  nextWeek.setDate(addOneWeek);
+  nextWeek = formatDateString(nextWeek);
+
+  minDateExample.setAttribute('value', today);
+  minDateExample.setAttribute('minDate', today);
+
+  changeMinDateButton.addEventListener('click', () => {
+    minDateExample.setAttribute('minDate', nextWeek);
+  });
+
+  resetButton.addEventListener('click', () => {
+    minDateExample.setAttribute('value', today);
+    minDateExample.setAttribute('minDate', today);
+  });
+
+}
+

components/datepicker/apiExamples/validity.html

@@ -0,0 +1,4 @@
+<auro-datepicker required id="validityExample">
+  <span slot="fromLabel">Choose a date</span>
+</auro-datepicker>
+<auro-button id="validityExampleBtn">Get validity</auro-button>

components/datepicker/apiExamples/validity.js

@@ -0,0 +1,9 @@
+export function validityExample() {
+  const validityExampleExample = document.querySelector('#validityExample');
+  const validityExampleExampleBtn = document.querySelector('#validityExampleBtn');
+
+  validityExampleExampleBtn.addEventListener('click', () => {
+    console.warn('Validity set to:', validityExampleExample.validity);
+    alert(`Validity set to: ${validityExampleExample.validity}`);
+  })
+}

components/datepicker/apiExamples/value.html

@@ -0,0 +1,3 @@
+<auro-datepicker id="valueExample" value="02/02/2022">
+  <span slot="label">Choose a date</span>
+</auro-datepicker>

components/datepicker/apiExamples/valueEnd.html

@@ -0,0 +1,3 @@
+<auro-datepicker id="valueEndExample" range valueEnd="03/03/2023">
+  <span slot="label">Choose a date</span>
+</auro-datepicker>