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

package/components/datepicker/demo/api.js

@@ -1,37 +0,0 @@
-import { alertValueExample } from './../apiExamples/alert-value';
-import { errorExample } from './../apiExamples/error';
-import { focusExample } from './../apiExamples/focus';
-import { populateSlotContentExample } from './../apiExamples/dynamic-slot';
-import { updateMaxDateExample } from './../apiExamples/update-max-date';
-import { updateMinDateExample } from './../apiExamples/update-min-date';
-import { validityExample } from './../apiExamples/validity';
-import { inDialogExample } from '../apiExamples/in-dialog';
-import { inDrawerExample } from '../apiExamples/in-drawer';
-import { localizationExample } from '../apiExamples/localization';
-import { resetStateExample } from '../apiExamples/reset-state';
-import '../src/registered.js';
-
-export function initExamples(initCount) {
-  initCount = initCount || 0;
-
-  try {
-    alertValueExample();
-    errorExample();
-    focusExample();
-    populateSlotContentExample();
-    updateMaxDateExample();
-    updateMinDateExample();
-    validityExample();
-    inDialogExample();
-    inDrawerExample();
-    localizationExample();
-    resetStateExample();
-  } catch (error) {
-    if (initCount <= 20) {
-      // setTimeout handles issue where content is sometimes loaded after the functions get called
-      setTimeout(() => {
-        initExamples(initCount + 1);
-      }, 100);
-    }
-  }
-}

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

@@ -1,300 +0,0 @@
-import { A as AuroDatePicker } from './auro-datepicker.min.js';
-
-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}`);
-  });
-}
-
-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');
-  });
-}
-
-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');
-  });
-}
-
-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();
-  });
-}
-
-function formatDateString$1(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}`;
-}
-
-function updateMaxDateExample() {
-  const maxDateExample = document.getElementById('maxDateExample');
-  const changeMaxDateButton = document.getElementById('maxDateChange');
-  const resetButton = document.getElementById('resetMaxDate');
-
-  const today = formatDateString$1(new Date());
-
-  let nextWeek = new Date();
-  let addOneWeek = nextWeek.getDate() + 7;
-
-  nextWeek.setDate(addOneWeek);
-  nextWeek = formatDateString$1(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);
-  });
-}
-
-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}`;
-}
-
-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);
-  });
-
-}
-
-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}`);
-  });
-}
-
-function inDialogExample() {
-  document.querySelector("#datepicker-dialog-opener").addEventListener("click", () => {
-    const dialog = document.querySelector("#datepicker-dialog");
-    dialog.open = true;
-  });
-}
-
-function inDrawerExample() {
-  document.querySelector("#datepicker-drawer-opener").addEventListener("click", () => {
-    const drawer = document.querySelector("#datepicker-drawer");
-    if (drawer.hasAttribute('open')) {
-      drawer.removeAttribute('open');
-    } else {
-      drawer.setAttribute('open', true);
-    }
-  });
-}
-
-function localizationExample() {
-  const localizedDatepicker = document.querySelector("#localizationExample");
-
-  localizedDatepicker.monthNames = ['일월', '이월', '삼월', '사월', '오월', '유월', '칠월', '팔월', '구월', '시월', '십일월', '십이월'];
-}
-
-function resetStateExample() {
-  const elem = document.querySelector('#resetStateExample');
-
-  document.querySelector('#resetStateBtn').addEventListener('click', () => {
-    elem.reset();
-  });
-}
-
-AuroDatePicker.register();
-
-function initExamples(initCount) {
-  initCount = initCount || 0;
-
-  try {
-    alertValueExample();
-    errorExample();
-    focusExample();
-    populateSlotContentExample();
-    updateMaxDateExample();
-    updateMinDateExample();
-    validityExample();
-    inDialogExample();
-    inDrawerExample();
-    localizationExample();
-    resetStateExample();
-  } catch (error) {
-    if (initCount <= 20) {
-      // setTimeout handles issue where content is sometimes loaded after the functions get called
-      setTimeout(() => {
-        initExamples(initCount + 1);
-      }, 100);
-    }
-  }
-}
-
-export { initExamples };