@nanoporetech-digital/components 1.15.6 → 2.1.0

package/dist/components/date-picker.js

@@ -0,0 +1,624 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { h, HTMLElement, createEvent, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { c as createColorClasses } from './theme.js';
+import { f as focusVisible } from './focus-visible.js';
+import { d as defineCustomElement$1 } from './icon.js';
+
+const ISO_DATE_FORMAT = /^(\d{4})-(\d{2})-(\d{2})$/;
+var DaysOfWeek$1;
+(function (DaysOfWeek) {
+  DaysOfWeek[DaysOfWeek["Sunday"] = 0] = "Sunday";
+  DaysOfWeek[DaysOfWeek["Monday"] = 1] = "Monday";
+  DaysOfWeek[DaysOfWeek["Tuesday"] = 2] = "Tuesday";
+  DaysOfWeek[DaysOfWeek["Wednesday"] = 3] = "Wednesday";
+  DaysOfWeek[DaysOfWeek["Thursday"] = 4] = "Thursday";
+  DaysOfWeek[DaysOfWeek["Friday"] = 5] = "Friday";
+  DaysOfWeek[DaysOfWeek["Saturday"] = 6] = "Saturday";
+})(DaysOfWeek$1 || (DaysOfWeek$1 = {}));
+function createDate(year, month, day) {
+  var dayInt = parseInt(day, 10);
+  var monthInt = parseInt(month, 10);
+  var yearInt = parseInt(year, 10);
+  const isValid = Number.isInteger(yearInt) && // all parts should be integers
+    Number.isInteger(monthInt) &&
+    Number.isInteger(dayInt) &&
+    monthInt > 0 && // month must be 1-12
+    monthInt <= 12 &&
+    dayInt > 0 && // day must be 1-31
+    dayInt <= 31 &&
+    yearInt > 0;
+  if (isValid) {
+    return new Date(yearInt, monthInt - 1, dayInt);
+  }
+}
+/**
+ * @param value date string in ISO format YYYY-MM-DD
+ */
+function parseISODate(value) {
+  if (!value) {
+    return;
+  }
+  const matches = value.match(ISO_DATE_FORMAT);
+  if (matches) {
+    return createDate(matches[1], matches[2], matches[3]);
+  }
+}
+/**
+ * print date in format YYYY-MM-DD
+ * @param date
+ */
+function printISODate(date) {
+  if (!date) {
+    return '';
+  }
+  var d = date.getDate().toString(10);
+  var m = (date.getMonth() + 1).toString(10);
+  var y = date.getFullYear().toString(10);
+  // days are not zero-indexed, so pad if less than 10
+  if (date.getDate() < 10) {
+    d = `0${d}`;
+  }
+  // months *are* zero-indexed, pad if less than 9!
+  if (date.getMonth() < 9) {
+    m = `0${m}`;
+  }
+  return `${y}-${m}-${d}`;
+}
+function addDays$1(date, days) {
+  var d = new Date(date);
+  d.setDate(d.getDate() + days);
+  return d;
+}
+function startOfWeek$1(date, firstDayOfWeek = DaysOfWeek$1.Monday) {
+  var d = new Date(date);
+  var day = d.getDay();
+  var diff = (day < firstDayOfWeek ? 7 : 0) + day - firstDayOfWeek;
+  d.setDate(d.getDate() - diff);
+  return d;
+}
+function endOfWeek$1(date, firstDayOfWeek = DaysOfWeek$1.Monday) {
+  var d = new Date(date);
+  var day = d.getDay();
+  var diff = (day < firstDayOfWeek ? -7 : 0) + 6 - (day - firstDayOfWeek);
+  d.setDate(d.getDate() + diff);
+  return d;
+}
+function startOfMonth$1(date) {
+  return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+function endOfMonth$1(date) {
+  return new Date(date.getFullYear(), date.getMonth() + 1, 0);
+}
+function setMonth(date, month) {
+  const d = new Date(date);
+  d.setMonth(month);
+  return d;
+}
+function setYear(date, year) {
+  const d = new Date(date);
+  d.setFullYear(year);
+  return d;
+}
+/**
+ * Check if date is within a min and max
+ */
+function inRange$1(date, min, max) {
+  return clamp$1(date, min, max) === date;
+}
+/**
+ * Ensures date is within range, returns min or max if out of bounds
+ */
+function clamp$1(date, min, max) {
+  const time = date.getTime();
+  if (min && min instanceof Date && time < min.getTime()) {
+    return min;
+  }
+  if (max && max instanceof Date && time > max.getTime()) {
+    return max;
+  }
+  return date;
+}
+/**
+ * Form random hash
+ */
+function chr4() {
+  return Math.random().toString(16).slice(-4);
+}
+/**
+ * Create random identifier with a prefix
+ * @param prefix
+ */
+function createIdentifier(prefix) {
+  return `${prefix}-${chr4()}${chr4()}-${chr4()}-${chr4()}-${chr4()}-${chr4()}${chr4()}${chr4()}`;
+}
+
+var DaysOfWeek;
+(function (DaysOfWeek) {
+  DaysOfWeek[DaysOfWeek["Sunday"] = 0] = "Sunday";
+  DaysOfWeek[DaysOfWeek["Monday"] = 1] = "Monday";
+  DaysOfWeek[DaysOfWeek["Tuesday"] = 2] = "Tuesday";
+  DaysOfWeek[DaysOfWeek["Wednesday"] = 3] = "Wednesday";
+  DaysOfWeek[DaysOfWeek["Thursday"] = 4] = "Thursday";
+  DaysOfWeek[DaysOfWeek["Friday"] = 5] = "Friday";
+  DaysOfWeek[DaysOfWeek["Saturday"] = 6] = "Saturday";
+})(DaysOfWeek || (DaysOfWeek = {}));
+/**
+ * Compare if two dates are equal in terms of day, month, and year
+ */
+function isEqual(a, b) {
+  if (a == null || b == null) {
+    return false;
+  }
+  return (a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate());
+}
+function addDays(date, days) {
+  var d = new Date(date);
+  d.setDate(d.getDate() + days);
+  return d;
+}
+function startOfWeek(date, firstDayOfWeek = DaysOfWeek.Monday) {
+  var d = new Date(date);
+  var day = d.getDay();
+  var diff = (day < firstDayOfWeek ? 7 : 0) + day - firstDayOfWeek;
+  d.setDate(d.getDate() - diff);
+  return d;
+}
+function endOfWeek(date, firstDayOfWeek = DaysOfWeek.Monday) {
+  var d = new Date(date);
+  var day = d.getDay();
+  var diff = (day < firstDayOfWeek ? -7 : 0) + 6 - (day - firstDayOfWeek);
+  d.setDate(d.getDate() + diff);
+  return d;
+}
+function startOfMonth(date) {
+  return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+function endOfMonth(date) {
+  return new Date(date.getFullYear(), date.getMonth() + 1, 0);
+}
+/**
+ * Check if date is within a min and max
+ */
+function inRange(date, min, max) {
+  return clamp(date, min, max) === date;
+}
+/**
+ * Ensures date is within range, returns min or max if out of bounds
+ */
+function clamp(date, min, max) {
+  const time = date.getTime();
+  if (min && min instanceof Date && time < min.getTime()) {
+    return min;
+  }
+  if (max && max instanceof Date && time > max.getTime()) {
+    return max;
+  }
+  return date;
+}
+/**
+ * given start and end date, return an (inclusive) array of all dates in between
+ * @param start
+ * @param end
+ */
+function getDaysInRange(start, end) {
+  const days = [];
+  let current = start;
+  while (!isEqual(current, end)) {
+    days.push(current);
+    current = addDays(current, 1);
+  }
+  days.push(current);
+  return days;
+}
+/**
+ * given a date, return an array of dates from a calendar perspective
+ * @param date
+ * @param firstDayOfWeek
+ */
+function getViewOfMonth(date, firstDayOfWeek = DaysOfWeek.Monday) {
+  const start = startOfWeek(startOfMonth(date), firstDayOfWeek);
+  const end = endOfWeek(endOfMonth(date), firstDayOfWeek);
+  return getDaysInRange(start, end);
+}
+
+const DatePickerDay = ({ focusedDay, today, day, onDaySelect, onKeyboardNavigation, focusedDayRef, inRange, disabled, isSelected, }) => {
+  const isToday = isEqual(day, today);
+  const isFocused = isEqual(day, focusedDay);
+  const isDisabled = day.getMonth() !== focusedDay.getMonth() || disabled;
+  const isOutsideRange = !inRange;
+  function handleClick(e) {
+    onDaySelect(e, day);
+  }
+  return (h("button", { class: {
+      'duet-date__day': true,
+      'is-outside': isOutsideRange,
+      'is-disabled': isDisabled,
+      'is-today': isToday,
+    }, tabIndex: isFocused ? 0 : -1, onClick: handleClick, onKeyDown: onKeyboardNavigation, disabled: isOutsideRange, type: "button", "aria-pressed": isSelected ? 'true' : 'false', ref: (el) => {
+      if (isFocused && el && focusedDayRef) {
+        focusedDayRef(el);
+      }
+    } },
+    h("span", { "aria-hidden": "true" }, day.getDate()),
+    h("span", { class: "duet-date__vhidden" }, day.toLocaleDateString(undefined, { day: 'numeric', month: 'long' }))));
+};
+
+function chunk(array, chunkSize) {
+  const result = [];
+  for (let i = 0; i < array.length; i += chunkSize) {
+    result.push(array.slice(i, i + chunkSize));
+  }
+  return result;
+}
+function mapWithOffset(array, startingOffset, mapFn) {
+  return array.map((_, i) => {
+    const adjustedIndex = (i + startingOffset) % array.length;
+    return mapFn(array[adjustedIndex]);
+  });
+}
+const DatePickerMonth = ({ selectedDate, focusedDate, labelledById, localization, firstDayOfWeek, min, max, onDateSelect, onKeyboardNavigation, focusedDayRef, onMouseDown, onFocusIn, isDateDisabled, }) => {
+  const today = new Date();
+  const days = getViewOfMonth(focusedDate, firstDayOfWeek);
+  return (h("table", { class: "duet-date__table", role: "grid", "aria-labelledby": labelledById, 
+    // @ts-ignore
+    onFocusin: onFocusIn, onMouseDown: onMouseDown },
+    h("thead", null,
+      h("tr", null, mapWithOffset(localization.dayNames, firstDayOfWeek, (dayName) => (h("th", { class: "duet-date__table-header", scope: "col" },
+        h("span", { "aria-hidden": "true" }, dayName.substr(0, 2)),
+        h("span", { class: "duet-date__vhidden" }, dayName)))))),
+    h("tbody", null, chunk(days, 7).map((week) => (h("tr", { class: "duet-date__row" }, week.map((day) => (h("td", { class: "duet-date__cell", role: "gridcell", "aria-selected": isEqual(day, selectedDate) ? 'true' : undefined },
+      h(DatePickerDay, { day: day, today: today, focusedDay: focusedDate, inRange: inRange(day, min, max), onDaySelect: onDateSelect, onKeyboardNavigation: onKeyboardNavigation, focusedDayRef: focusedDayRef, disabled: isDateDisabled(day), isSelected: isEqual(day, selectedDate) }))))))))));
+};
+
+const localization = {
+  buttonLabel: 'Choose date',
+  placeholder: 'YYYY-MM-DD',
+  selectedDateMessage: 'Selected date is',
+  prevMonthLabel: 'Previous month',
+  nextMonthLabel: 'Next month',
+  monthSelectLabel: 'Month',
+  yearSelectLabel: 'Year',
+  closeLabel: 'Close window',
+  keyboardInstruction: 'You can use arrow keys to navigate dates',
+  calendarHeading: 'Choose a date',
+  dayNames: [
+    'Sunday',
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday',
+  ],
+  monthNames: [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ],
+  monthNamesShort: [
+    'Jan',
+    'Feb',
+    'Mar',
+    'Apr',
+    'May',
+    'Jun',
+    'Jul',
+    'Aug',
+    'Sep',
+    'Oct',
+    'Nov',
+    'Dec',
+  ],
+};
+
+const datePickerCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--background:var(--nano-layer-bg, #fff);--active-color:var(--nano-color-base, var(--nano-color-primary, #007495));--active-text-color:var(\n      --nano-color-contrast,\n      var(--nano-color-primary-contrast, #fff)\n    );--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--inactive-color:var(--nano-button-color, #f0efed);display:block;font-size:16px}:host(.nano-color){--active-color:var(--nano-color-base, var(--nano-color-primary, #007495));--active-text-color:var(--nano-color-contrast);--focus-shadow:0 0 0 0.1875rem rgba(var(--nano-color-tint-rgb), 0.56)}.duet-date *,.duet-date *::before,.duet-date *::after{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0}.duet-date{-webkit-box-sizing:border-box;box-sizing:border-box;color:currentColor;display:block;margin:0;position:relative;text-align:left;width:100%}.duet-date__dialog{display:-webkit-box;display:-ms-flexbox;display:flex;top:100%;max-width:100%;width:100%}.duet-date__dialog.is-left{left:auto;right:0;width:auto}.duet-date__dialog-content{background:var(--background);min-width:290px;padding:16px 16px 20px;position:relative;-webkit-transform:none;transform:none;max-width:100%;width:100%}.duet-date__table{border-collapse:collapse;border-spacing:0;font-size:1em;line-height:1.25;text-align:center;width:100%}.duet-date__table-header{font-size:0.75em;font-weight:600;letter-spacing:1px;line-height:1.25;padding-bottom:8px;text-decoration:none;text-transform:uppercase}.duet-date__cell{text-align:center}.duet-date__day{-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;border-radius:50%;cursor:pointer;display:inline-block;font-size:0.875em;font-variant-numeric:tabular-nums;line-height:1.25;position:relative;text-align:center;vertical-align:middle;z-index:1;-webkit-transition:0.15s ease all;transition:0.15s ease all;height:2.5em;width:2.5em}.duet-date__day.is-today{-webkit-box-shadow:0 0 0 1px var(--active-color);box-shadow:0 0 0 1px var(--active-color);position:relative}.duet-date__day:hover::before,.duet-date__day.is-today::before{content:\"\";background:var(--active-color);border-radius:50%;bottom:0;left:0;opacity:0.16;position:absolute;right:0;top:0}[aria-selected=true] .duet-date__day{background:var(--active-color);color:var(--active-text-color);-webkit-box-shadow:none;box-shadow:none;outline:0}.duet-date__day:active{background:var(--active-color);-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow);color:var(--active-text-color)}.duet-date__day:focus{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow);outline:0}.duet-date__day.is-disabled{background:transparent;-webkit-box-shadow:none;box-shadow:none;cursor:default;opacity:0.5}.duet-date__day.is-disabled::before{display:none}.duet-date__day.is-outside{background:var(--inactive-color);-webkit-box-shadow:none;box-shadow:none;cursor:default;opacity:0.6;pointer-events:none}.duet-date__day.is-outside::before{display:none}.duet-date__header{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:16px;width:100%}.duet-date__nav{white-space:nowrap}.duet-date__prev,.duet-date__next{background:var(--inactive-color);-moz-appearance:none;-webkit-appearance:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;appearance:none;border:0;border-radius:50%;cursor:pointer;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:distribute;justify-content:space-around;margin-left:8px;padding:0;-webkit-transition:background-color 300ms ease;transition:background-color 300ms ease;font-size:0.9em;height:2.2em;width:2.2em}.duet-date__prev:focus,.duet-date__next:focus{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow);outline:0}.duet-date__prev:active:focus,.duet-date__next:active:focus{-webkit-box-shadow:none;box-shadow:none}.duet-date__prev:disabled,.duet-date__next:disabled{cursor:default;opacity:0.5}.duet-date__prev nano-icon,.duet-date__next nano-icon{margin:0 auto}.duet-date__select{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;margin-top:4px;position:relative}.duet-date__select span{margin-right:4px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.duet-date__select span{margin-right:unset;-webkit-margin-end:4px;margin-inline-end:4px}}.duet-date__select select{cursor:pointer;font-size:1em;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:2}.duet-date__select select.focus-visible:focus+.duet-date__select-label{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow)}.duet-date__select-label{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:4px;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:1.25em;font-weight:600;line-height:1.25;padding:0 4px 0 8px;pointer-events:none;position:relative;width:100%;z-index:1}.duet-date__select-label nano-icon{font-size:0.55em}.duet-date__vhidden{border:0;clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;padding:0;position:absolute;top:0;width:1px}";
+
+function range(from, to) {
+  var result = [];
+  for (var i = from; i <= to; i++) {
+    result.push(i);
+  }
+  return result;
+}
+let DatePicker = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.nanoDatePicked = createEvent(this, "nanoDatePicked", 7);
+    this.monthSelectId = createIdentifier('NanoDateMonth');
+    this.yearSelectId = createIdentifier('NanoDateYear');
+    this.dialogLabelId = createIdentifier('NanoDateLabel');
+    this.initialTouchX = null;
+    this.initialTouchY = null;
+    this.activeFocus = false;
+    this.focusedDay = new Date();
+    // Public Property API
+    /** Selected Date. Must be in IS0-8601 format: YYYY-MM-DD. */
+    this.selectedDate = '';
+    /** Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
+     * This setting can be used alone or together with the max property. */
+    this.min = '';
+    /** Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
+     * This setting can be used alone or together with the min property. */
+    this.max = '';
+    /** Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.
+     * Default is Monday. */
+    this.firstDayOfWeek = DaysOfWeek$1.Monday;
+    /** Button labels, day names, month names, etc, used for localization.
+     * Default is English. */
+    this.localization = localization;
+    /** Controls which days are disabled and therefore disallowed.
+     * For example, this can be used to disallow selection of weekends. */
+    this.isDateDisabled = () => false;
+    /** Controls whether the picker is a modal or dialog,
+     * popup control and will therefore keep focus within the control */
+    this.isModal = false;
+    // Local methods.
+    this.enableActiveFocus = () => {
+      this.activeFocus = true;
+    };
+    this.disableActiveFocus = () => {
+      this.activeFocus = false;
+    };
+    this.handleTouchStart = (event) => {
+      const touch = event.changedTouches[0];
+      this.initialTouchX = touch.pageX;
+      this.initialTouchY = touch.pageY;
+    };
+    this.handleTouchMove = (event) => {
+      event.preventDefault();
+    };
+    this.handleTouchEnd = (event) => {
+      const touch = event.changedTouches[0];
+      const distX = touch.pageX - this.initialTouchX; // get horizontal dist traveled
+      const distY = touch.pageY - this.initialTouchY; // get vertical dist traveled
+      const threshold = 70;
+      const isHorizontalSwipe = Math.abs(distX) >= threshold && Math.abs(distY) <= threshold;
+      if (isHorizontalSwipe) {
+        this.addMonths(distX < 0 ? 1 : -1);
+      }
+      this.initialTouchY = null;
+      this.initialTouchX = null;
+    };
+    this.handleNextMonthClick = (event) => {
+      event.preventDefault();
+      this.addMonths(1);
+    };
+    this.handlePreviousMonthClick = (event) => {
+      event.preventDefault();
+      this.addMonths(-1);
+    };
+    this.handleKeyboardNavigation = (event) => {
+      // handle tab separately, since it needs to be treated
+      // differently to other keyboard interactions
+      if (event.key === 'Tab' && !event.shiftKey && this.isModal) {
+        event.preventDefault();
+        let ele = this.firstFocusEle || this.firstFocusableElement;
+        ele.focus();
+        return;
+      }
+      var handled = true;
+      switch (event.key) {
+        case 'ArrowRight':
+          this.addDays(1);
+          break;
+        case 'ArrowLeft':
+          this.addDays(-1);
+          break;
+        case 'ArrowDown':
+          this.addDays(7);
+          break;
+        case 'ArrowUp':
+          this.addDays(-7);
+          break;
+        case 'PageUp':
+          if (event.shiftKey) {
+            this.addYears(-1);
+          }
+          else {
+            this.addMonths(-1);
+          }
+          break;
+        case 'PageDown':
+          if (event.shiftKey) {
+            this.addYears(1);
+          }
+          else {
+            this.addMonths(1);
+          }
+          break;
+        case 'Home':
+          this.startOfWeek();
+          break;
+        case 'End':
+          this.endOfWeek();
+          break;
+        default:
+          handled = false;
+      }
+      if (handled) {
+        event.preventDefault();
+        this.enableActiveFocus();
+      }
+    };
+    this.handleDaySelect = (_event, day) => {
+      const isAllowed = !this.isDateDisabled(day);
+      const isInRange = inRange$1(day, parseISODate(this.min), parseISODate(this.max));
+      if (!isInRange || !isAllowed) {
+        return;
+      }
+      if (day.getMonth() === this.focusedDay.getMonth()) {
+        this.setValue(day);
+      }
+      else {
+        this.setFocusedDay(day);
+      }
+    };
+    this.handleMonthSelect = (e) => {
+      this.setMonth(parseInt(e.target.value, 10));
+    };
+    this.handleYearSelect = (e) => {
+      this.setYear(parseInt(e.target.value, 10));
+    };
+    this.processFocusedDayNode = (element) => {
+      this.focusedDayNode = element;
+      if (this.activeFocus) {
+        setTimeout(() => element.focus(), 0);
+      }
+    };
+  }
+  // Public methods API
+  /** Focus to the calendar
+   * @param day - focus to the current selected day
+   * @param forceFocusVisible - force visible focus - required if opened via keyboad
+   */
+  async setFocus(day = false, forceFocusVisible = false) {
+    this.setFocusedDay(parseISODate(this.selectedDate) || new Date());
+    if (day) {
+      setTimeout((_) => this.focusedDayNode.focus(), 20);
+      return;
+    }
+    clearTimeout(this.focusTimeoutId);
+    this.focusTimeoutId = setTimeout(() => {
+      if (forceFocusVisible)
+        focusVisible.force(this.monthSelectNode);
+      this.monthSelectNode.focus();
+    }, 20);
+  }
+  handleSelectedDateChange() {
+    this.setFocus(true);
+  }
+  addDays(days) {
+    this.setFocusedDay(addDays$1(this.focusedDay, days));
+  }
+  addMonths(months) {
+    this.setMonth(this.focusedDay.getMonth() + months);
+  }
+  addYears(years) {
+    this.setYear(this.focusedDay.getFullYear() + years);
+  }
+  startOfWeek() {
+    this.setFocusedDay(startOfWeek$1(this.focusedDay, this.firstDayOfWeek));
+  }
+  endOfWeek() {
+    this.setFocusedDay(endOfWeek$1(this.focusedDay, this.firstDayOfWeek));
+  }
+  setMonth(month) {
+    const min = setMonth(startOfMonth$1(this.focusedDay), month);
+    const max = endOfMonth$1(min);
+    const date = setMonth(this.focusedDay, month);
+    this.setFocusedDay(clamp$1(date, min, max));
+  }
+  setYear(year) {
+    const min = setYear(startOfMonth$1(this.focusedDay), year);
+    const max = endOfMonth$1(min);
+    const date = setYear(this.focusedDay, year);
+    this.setFocusedDay(clamp$1(date, min, max));
+  }
+  setFocusedDay(day) {
+    this.focusedDay = clamp$1(day, parseISODate(this.min), parseISODate(this.max));
+  }
+  setValue(date) {
+    this.selectedDate = printISODate(date);
+    this.nanoDatePicked.emit({
+      value: this.selectedDate,
+      valueAsDate: date,
+    });
+  }
+  connectedCallback() {
+    if (this.yearSelectNode)
+      focusVisible.observe(this.yearSelectNode);
+    if (this.monthSelectNode)
+      focusVisible.observe(this.monthSelectNode);
+  }
+  componentWillLoad() {
+    this.handleSelectedDateChange();
+  }
+  componentDidLoad() {
+    this.connectedCallback();
+  }
+  disconnectedCallback() {
+    focusVisible.unobserve(this.yearSelectNode);
+    focusVisible.unobserve(this.monthSelectNode);
+  }
+  render() {
+    const valueAsDate = parseISODate(this.selectedDate);
+    const selectedYear = (valueAsDate || this.focusedDay).getFullYear();
+    const focusedMonth = this.focusedDay.getMonth();
+    const focusedYear = this.focusedDay.getFullYear();
+    const minDate = parseISODate(this.min);
+    const maxDate = parseISODate(this.max);
+    const prevMonthDisabled = minDate != null &&
+      minDate.getMonth() === focusedMonth &&
+      minDate.getFullYear() === focusedYear;
+    const nextMonthDisabled = maxDate != null &&
+      maxDate.getMonth() === focusedMonth &&
+      maxDate.getFullYear() === focusedYear;
+    let minYear = selectedYear - 10;
+    let maxYear = selectedYear + 10;
+    if (minDate)
+      minYear = minDate.getFullYear();
+    if (maxDate)
+      maxYear = maxDate.getFullYear();
+    return (h(Host, { class: Object.assign({}, createColorClasses(this.color)) }, h("div", { class: "duet-date" }, h("div", { class: {
+        'duet-date__dialog': true,
+        'is-active': true,
+      }, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { class: "duet-date__dialog-content" }, h("div", { class: "duet-date__vhidden duet-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { class: "duet-date__header", onFocusin: this.disableActiveFocus }, h("div", null, h("h2", { id: this.dialogLabelId, class: "duet-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], ' ', this.focusedDay.getFullYear()), h("label", { htmlFor: this.monthSelectId, class: "duet-date__vhidden" }, this.localization.monthSelectLabel), h("div", { class: "duet-date__select" }, h("select", { id: this.monthSelectId, class: "duet-date__select--month", ref: (element) => (this.firstFocusableElement = this.monthSelectNode =
+        element), onChange: this.handleMonthSelect }, this.localization.monthNames.map((month, i) => (h("option", { key: month, value: i, selected: i === focusedMonth, disabled: !inRange$1(new Date(focusedYear, i, 1), minDate ? startOfMonth$1(minDate) : null, maxDate ? endOfMonth$1(maxDate) : null) }, month)))), h("div", { class: "duet-date__select-label", "aria-hidden": "true" }, h("span", null, this.localization.monthNamesShort[focusedMonth]), h("nano-icon", { name: "light/chevron-down" }))), h("label", { htmlFor: this.yearSelectId, class: "duet-date__vhidden" }, this.localization.yearSelectLabel), h("div", { class: "duet-date__select" }, h("select", { id: this.yearSelectId, class: "duet-date__select--year", onChange: this.handleYearSelect, ref: (element) => (this.yearSelectNode = element) }, range(minYear, maxYear).map((year) => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { class: "duet-date__select-label", "aria-hidden": "true" }, h("span", null, this.focusedDay.getFullYear()), h("nano-icon", { name: "light/chevron-down" })))), h("div", { class: "duet-date__nav" }, h("button", { class: "duet-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("nano-icon", { name: "light/chevron-left" }), h("span", { class: "duet-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { class: "duet-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("nano-icon", { name: "light/chevron-right" }), h("span", { class: "duet-date__vhidden" }, this.localization.nextMonthLabel)))), h("div", null, h(DatePickerMonth, { selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate, isDateDisabled: this.isDateDisabled })))))));
+  }
+  get host() { return this; }
+  static get watchers() { return {
+    "selectedDate": ["handleSelectedDateChange"]
+  }; }
+  static get style() { return datePickerCss; }
+};
+DatePicker = /*@__PURE__*/ proxyCustomElement(DatePicker, [1, "nano-date-picker", {
+    "selectedDate": [1025, "selected-date"],
+    "min": [1],
+    "max": [1],
+    "firstDayOfWeek": [2, "first-day-of-week"],
+    "localization": [16],
+    "color": [1],
+    "isDateDisabled": [16],
+    "isModal": [4, "is-modal"],
+    "firstFocusEle": [16],
+    "activeFocus": [32],
+    "focusedDay": [32],
+    "setFocus": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["nano-date-picker", "nano-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "nano-date-picker":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DatePicker);
+      }
+      break;
+    case "nano-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { DatePicker as D, printISODate as a, createDate as c, defineCustomElement as d, parseISODate as p };
+
+//# sourceMappingURL=date-picker.js.map