@verdocs/web-sdk 1.4.0 → 1.4.7

package/dist/cjs/{verdocs-view.cjs.entry.js → verdocs-dropdown_12.cjs.entry.js}

@@ -2,9 +2,3287 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index$1 = require('./index-a24f3b6a.js');
-const index = require('./index-c4be37e1.js');
-const bufferEs6 = require('./buffer-es6-b2c1c885.js');
+const index = require('./index-589f3be8.js');
+const popper = require('./popper-71bf3058.js');
+const bufferEs6 = require('./buffer-es6-bc8199b1.js');
+
+const SortDown = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#50BE80"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7 10l5 5 5-5H7z"/></svg>
+`;
+
+const verdocsDropdownCss = "verdocs-dropdown{font-family:\"Barlow\", sans-serif;display:block}verdocs-dropdown .arrow{width:32px;height:26px;background:#fff;cursor:pointer;border-radius:4px;-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;border:1px solid #cccccc;-ms-flex-pack:center;justify-content:center}verdocs-dropdown .arrow svg{fill:#55bc81;-webkit-transition:0.3s;transition:0.3s}verdocs-dropdown .items{width:200px;display:none;z-index:10000;border-radius:5px;background:#33354c;border:1px solid #654dcb}verdocs-dropdown .items[data-show]{display:block}verdocs-dropdown .option{width:100%;color:#fff;border:none;display:block;text-align:left;background:none;padding:10px 20px}verdocs-dropdown .option:hover{cursor:pointer;background:#55bc81}verdocs-dropdown .option[disabled]{color:#aaaaaa}verdocs-dropdown .option[disabled]:hover{color:#aaaaaa;cursor:inherit;background:transparent}verdocs-dropdown.open .items{display:block}verdocs-dropdown.open .arrow{background:#4c56cb;border:1px solid #707ae5}verdocs-dropdown.open .arrow svg{-webkit-transform:scaleY(-1);transform:scaleY(-1);fill:#fff}";
+
+const VerdocsDropdown = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.optionSelected = index.createEvent(this, "optionSelected", 7);
+    /**
+     * The menu options to display.
+     */
+    this.options = [];
+  }
+  componentWillLoad() {
+    this.isOpen = !!this.open;
+  }
+  componentDidLoad() {
+    this.popper = popper.createPopper(this.dropdownButton, this.dropdownMenu, { placement: 'bottom-start', modifiers: [{ name: 'offset', options: { offset: [0, 6] } }] });
+  }
+  handleSelectOption(option) {
+    this.isOpen = false;
+    this.optionSelected.emit(option);
+    this.hide();
+  }
+  // See https://popper.js.org/docs/v2/tutorial/
+  // What we're doing here is clearing event listeners when they aren't needed, to increase performance in lists
+  showDropdown() {
+    var _a, _b;
+    this.isOpen = true;
+    this.dropdownMenu.setAttribute('data-show', '');
+    this.dropdownMenu.removeAttribute('aria-hidden');
+    (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions(options => ({
+      ...options,
+      modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }],
+    }));
+    (_b = this.popper) === null || _b === void 0 ? void 0 : _b.update();
+  }
+  handleHideDropdown(e) {
+    var _a, _b;
+    if (((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.localName) === 'button' && ((_b = e === null || e === void 0 ? void 0 : e.target) === null || _b === void 0 ? void 0 : _b.className) === 'arrow') {
+      // This event is fired when a menu element is clicked because the button "loses focus" then too
+      return;
+    }
+    this.hide();
+  }
+  toggleDropdown() {
+    if (this.isOpen) {
+      this.hide();
+    }
+    else {
+      this.showDropdown();
+    }
+  }
+  hide() {
+    var _a;
+    this.isOpen = false;
+    this.dropdownMenu.removeAttribute('data-show');
+    this.dropdownMenu.setAttribute('aria-hidden', 'true');
+    (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions(options => ({
+      ...options,
+      modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }],
+    }));
+  }
+  render() {
+    var _a;
+    return (index.h(index.Host, { class: { storybook: !!(window === null || window === void 0 ? void 0 : window['STORYBOOK_ENV']), open: !!this.isOpen } }, index.h("button", { class: "arrow", innerHTML: SortDown, "aria-label": "Open Menu", onClick: () => this.toggleDropdown(), onBlur: e => this.handleHideDropdown(e), ref: el => (this.dropdownButton = el) }), index.h("div", { class: "items", "aria-hidden": !this.open, ref: el => (this.dropdownMenu = el) }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => (index.h("button", { onClick: () => this.handleSelectOption(option), class: "option", disabled: option.disabled }, option.label))))));
+  }
+};
+VerdocsDropdown.style = verdocsDropdownCss;
+
+const Paperclip = `<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
+</svg>
+`;
+
+const verdocsFieldAttachmentCss = "verdocs-field-attachment{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:24px;height:24px;display:block;font-size:11px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-attachment span{width:20px;cursor:pointer}verdocs-field-attachment.required span{border:1px solid #cc0000}verdocs-field-attachment.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
+
+const VerdocsFieldAttachment = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.fieldChange = index.createEvent(this, "fieldChange", 7);
+    /**
+     * Sets the tabIndex of the input element.
+     */
+    this.order = 1;
+    /**
+     * Sets the value of the input element.
+     */
+    this.value = '';
+    /**
+     * If true, the field will be marked required.
+     */
+    this.required = false;
+    /**
+     * Sets the disabled attribute of the input element.
+     */
+    this.disabled = false;
+  }
+  async focusField() {
+    this.handleShow();
+  }
+  handleShow() {
+    this.dialog = document.createElement('verdocs-upload-dialog');
+    this.dialog.open = true;
+    this.dialog.addEventListener('cancel', () => {
+      var _a;
+      console.log('cancel');
+      (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.remove();
+    });
+    document.addEventListener('done', e => {
+      var _a;
+      console.log('done', e);
+      (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.remove();
+    });
+    document.body.append(this.dialog);
+  }
+  render() {
+    return (index.h(index.Host, { class: { required: this.required } }, index.h("span", { innerHTML: Paperclip, onClick: () => this.handleShow() })));
+  }
+};
+VerdocsFieldAttachment.style = verdocsFieldAttachmentCss;
+
+const verdocsFieldCheckboxCss = "@charset \"UTF-8\";verdocs-field-checkbox{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;font-size:11px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-checkbox label>input[type=checkbox]{display:none}verdocs-field-checkbox label>input[type=checkbox]+*::before{content:\"\";display:block;vertical-align:bottom;width:14px;height:14px;border-radius:2px;border:1px solid rgba(0, 0, 0, 0.2);-ms-flex-negative:0;flex-shrink:0}verdocs-field-checkbox label>input[type=checkbox]:checked+*{color:var(--verdocs-primary-color)}verdocs-field-checkbox label>input[type=checkbox]:checked+*::before{content:\"✓\";color:white;text-align:center;background:var(--verdocs-primary-color);border-color:var(--verdocs-primary-color)}verdocs-field-checkbox.required label>input[type=checkbox]+*::before{border:1px solid var(--verdocs-required-color)}verdocs-field-checkbox.hide{display:none}verdocs-field-checkbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
+
+const VerdocsFieldCheckbox = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.fieldChange = index.createEvent(this, "fieldChange", 7);
+    /**
+     * Sets the tabIndex of the input element.
+     */
+    this.order = 1;
+    /**
+     * Sets the value of the input element.
+     */
+    this.value = false;
+    /**
+     * If true, the field will be marked required.
+     */
+    this.required = false;
+    /**
+     * Sets the disabled attribute of the input element.
+     */
+    this.disabled = false;
+  }
+  handleChange(e) {
+    this.fieldChange.emit(e.target.checked);
+  }
+  render() {
+    return (index.h(index.Host, { class: { required: this.required } }, index.h("label", null, index.h("input", { type: "checkbox", tabIndex: this.order, checked: this.value, disabled: this.disabled, required: this.required, onChange: e => this.handleChange(e) }), index.h("span", null))));
+  }
+};
+VerdocsFieldCheckbox.style = verdocsFieldCheckboxCss;
+
+function hasProperty(obj, prop) {
+  return Object.prototype.hasOwnProperty.call(obj, prop);
+}
+
+function lastItemOf(arr) {
+  return arr[arr.length - 1];
+}
+
+// push only the items not included in the array
+function pushUnique(arr, ...items) {
+  items.forEach((item) => {
+    if (arr.includes(item)) {
+      return;
+    }
+    arr.push(item);
+  });
+  return arr;
+}
+
+function stringToArray(str, separator) {
+  // convert empty string to an empty array
+  return str ? str.split(separator) : [];
+}
+
+function isInRange(testVal, min, max) {
+  const minOK = min === undefined || testVal >= min;
+  const maxOK = max === undefined || testVal <= max;
+  return minOK && maxOK;
+}
+
+function limitToRange(val, min, max) {
+  if (val < min) {
+    return min;
+  }
+  if (val > max) {
+    return max;
+  }
+  return val;
+}
+
+function createTagRepeat(tagName, repeat, attributes = {}, index = 0, html = '') {
+  const openTagSrc = Object.keys(attributes).reduce((src, attr) => {
+    let val = attributes[attr];
+    if (typeof val === 'function') {
+      val = val(index);
+    }
+    return `${src} ${attr}="${val}"`;
+  }, tagName);
+  html += `<${openTagSrc}></${tagName}>`;
+
+  const next = index + 1;
+  return next < repeat
+    ? createTagRepeat(tagName, repeat, attributes, next, html)
+    : html;
+}
+
+// Remove the spacing surrounding tags for HTML parser not to create text nodes
+// before/after elements
+function optimizeTemplateHTML(html) {
+  return html.replace(/>\s+/g, '>').replace(/\s+</, '<');
+}
+
+function stripTime(timeValue) {
+  return new Date(timeValue).setHours(0, 0, 0, 0);
+}
+
+function today() {
+  return new Date().setHours(0, 0, 0, 0);
+}
+
+// Get the time value of the start of given date or year, month and day
+function dateValue(...args) {
+  switch (args.length) {
+    case 0:
+      return today();
+    case 1:
+      return stripTime(args[0]);
+  }
+
+  // use setFullYear() to keep 2-digit year from being mapped to 1900-1999
+  const newDate = new Date(0);
+  newDate.setFullYear(...args);
+  return newDate.setHours(0, 0, 0, 0);
+}
+
+function addDays(date, amount) {
+  const newDate = new Date(date);
+  return newDate.setDate(newDate.getDate() + amount);
+}
+
+function addWeeks(date, amount) {
+  return addDays(date, amount * 7);
+}
+
+function addMonths(date, amount) {
+  // If the day of the date is not in the new month, the last day of the new
+  // month will be returned. e.g. Jan 31 + 1 month → Feb 28 (not Mar 03)
+  const newDate = new Date(date);
+  const monthsToSet = newDate.getMonth() + amount;
+  let expectedMonth = monthsToSet % 12;
+  if (expectedMonth < 0) {
+    expectedMonth += 12;
+  }
+
+  const time = newDate.setMonth(monthsToSet);
+  return newDate.getMonth() !== expectedMonth ? newDate.setDate(0) : time;
+}
+
+function addYears(date, amount) {
+  // If the date is Feb 29 and the new year is not a leap year, Feb 28 of the
+  // new year will be returned.
+  const newDate = new Date(date);
+  const expectedMonth = newDate.getMonth();
+  const time = newDate.setFullYear(newDate.getFullYear() + amount);
+  return expectedMonth === 1 && newDate.getMonth() === 2 ? newDate.setDate(0) : time;
+}
+
+// Calculate the distance bettwen 2 days of the week
+function dayDiff(day, from) {
+  return (day - from + 7) % 7;
+}
+
+// Get the date of the specified day of the week of given base date
+function dayOfTheWeekOf(baseDate, dayOfWeek, weekStart = 0) {
+  const baseDay = new Date(baseDate).getDay();
+  return addDays(baseDate, dayDiff(dayOfWeek, weekStart) - dayDiff(baseDay, weekStart));
+}
+
+// Get the ISO week of a date
+function getWeek(date) {
+  // start of ISO week is Monday
+  const thuOfTheWeek = dayOfTheWeekOf(date, 4, 1);
+  // 1st week == the week where the 4th of January is in
+  const firstThu = dayOfTheWeekOf(new Date(thuOfTheWeek).setMonth(0, 4), 4, 1);
+  return Math.round((thuOfTheWeek - firstThu) / 604800000) + 1;
+}
+
+// Get the start year of the period of years that includes given date
+// years: length of the year period
+function startOfYearPeriod(date, years) {
+  /* @see https://en.wikipedia.org/wiki/Year_zero#ISO_8601 */
+  const year = new Date(date).getFullYear();
+  return Math.floor(year / years) * years;
+}
+
+// Convert date to the first/last date of the month/year of the date
+function regularizeDate(date, timeSpan, useLastDate) {
+  if (timeSpan !== 1 && timeSpan !== 2) {
+    return date;
+  }
+  const newDate = new Date(date);
+  if (timeSpan === 1) {
+    useLastDate
+      ? newDate.setMonth(newDate.getMonth() + 1, 0)
+      : newDate.setDate(1);
+  } else {
+    useLastDate
+      ? newDate.setFullYear(newDate.getFullYear() + 1, 0, 0)
+      : newDate.setMonth(0, 1);
+  }
+  return newDate.setHours(0, 0, 0, 0);
+}
+
+// pattern for format parts
+const reFormatTokens = /dd?|DD?|mm?|MM?|yy?(?:yy)?/;
+// pattern for non date parts
+const reNonDateParts = /[\s!-/:-@[-`{-~年月日]+/;
+// cache for persed formats
+let knownFormats = {};
+// parse funtions for date parts
+const parseFns = {
+  y(date, year) {
+    return new Date(date).setFullYear(parseInt(year, 10));
+  },
+  m(date, month, locale) {
+    const newDate = new Date(date);
+    let monthIndex = parseInt(month, 10) - 1;
+
+    if (isNaN(monthIndex)) {
+      if (!month) {
+        return NaN;
+      }
+
+      const monthName = month.toLowerCase();
+      const compareNames = name => name.toLowerCase().startsWith(monthName);
+      // compare with both short and full names because some locales have periods
+      // in the short names (not equal to the first X letters of the full names)
+      monthIndex = locale.monthsShort.findIndex(compareNames);
+      if (monthIndex < 0) {
+        monthIndex = locale.months.findIndex(compareNames);
+      }
+      if (monthIndex < 0) {
+        return NaN;
+      }
+    }
+
+    newDate.setMonth(monthIndex);
+    return newDate.getMonth() !== normalizeMonth(monthIndex)
+      ? newDate.setDate(0)
+      : newDate.getTime();
+  },
+  d(date, day) {
+    return new Date(date).setDate(parseInt(day, 10));
+  },
+};
+// format functions for date parts
+const formatFns = {
+  d(date) {
+    return date.getDate();
+  },
+  dd(date) {
+    return padZero(date.getDate(), 2);
+  },
+  D(date, locale) {
+    return locale.daysShort[date.getDay()];
+  },
+  DD(date, locale) {
+    return locale.days[date.getDay()];
+  },
+  m(date) {
+    return date.getMonth() + 1;
+  },
+  mm(date) {
+    return padZero(date.getMonth() + 1, 2);
+  },
+  M(date, locale) {
+    return locale.monthsShort[date.getMonth()];
+  },
+  MM(date, locale) {
+    return locale.months[date.getMonth()];
+  },
+  y(date) {
+    return date.getFullYear();
+  },
+  yy(date) {
+    return padZero(date.getFullYear(), 2).slice(-2);
+  },
+  yyyy(date) {
+    return padZero(date.getFullYear(), 4);
+  },
+};
+
+// get month index in normal range (0 - 11) from any number
+function normalizeMonth(monthIndex) {
+  return monthIndex > -1 ? monthIndex % 12 : normalizeMonth(monthIndex + 12);
+}
+
+function padZero(num, length) {
+  return num.toString().padStart(length, '0');
+}
+
+function parseFormatString(format) {
+  if (typeof format !== 'string') {
+    throw new Error("Invalid date format.");
+  }
+  if (format in knownFormats) {
+    return knownFormats[format];
+  }
+
+  // sprit the format string into parts and seprators
+  const separators = format.split(reFormatTokens);
+  const parts = format.match(new RegExp(reFormatTokens, 'g'));
+  if (separators.length === 0 || !parts) {
+    throw new Error("Invalid date format.");
+  }
+
+  // collect format functions used in the format
+  const partFormatters = parts.map(token => formatFns[token]);
+
+  // collect parse function keys used in the format
+  // iterate over parseFns' keys in order to keep the order of the keys.
+  const partParserKeys = Object.keys(parseFns).reduce((keys, key) => {
+    const token = parts.find(part => part[0] !== 'D' && part[0].toLowerCase() === key);
+    if (token) {
+      keys.push(key);
+    }
+    return keys;
+  }, []);
+
+  return knownFormats[format] = {
+    parser(dateStr, locale) {
+      const dateParts = dateStr.split(reNonDateParts).reduce((dtParts, part, index) => {
+        if (part.length > 0 && parts[index]) {
+          const token = parts[index][0];
+          if (token === 'M') {
+            dtParts.m = part;
+          } else if (token !== 'D') {
+            dtParts[token] = part;
+          }
+        }
+        return dtParts;
+      }, {});
+
+      // iterate over partParserkeys so that the parsing is made in the oder
+      // of year, month and day to prevent the day parser from correcting last
+      // day of month wrongly
+      return partParserKeys.reduce((origDate, key) => {
+        const newDate = parseFns[key](origDate, dateParts[key], locale);
+        // ingnore the part failed to parse
+        return isNaN(newDate) ? origDate : newDate;
+      }, today());
+    },
+    formatter(date, locale) {
+      let dateStr = partFormatters.reduce((str, fn, index) => {
+        return str += `${separators[index]}${fn(date, locale)}`;
+      }, '');
+      // separators' length is always parts' length + 1,
+      return dateStr += lastItemOf(separators);
+    },
+  };
+}
+
+function parseDate(dateStr, format, locale) {
+  if (dateStr instanceof Date || typeof dateStr === 'number') {
+    const date = stripTime(dateStr);
+    return isNaN(date) ? undefined : date;
+  }
+  if (!dateStr) {
+    return undefined;
+  }
+  if (dateStr === 'today') {
+    return today();
+  }
+
+  if (format && format.toValue) {
+    const date = format.toValue(dateStr, format, locale);
+    return isNaN(date) ? undefined : stripTime(date);
+  }
+
+  return parseFormatString(format).parser(dateStr, locale);
+}
+
+function formatDate(date, format, locale) {
+  if (isNaN(date) || (!date && date !== 0)) {
+    return '';
+  }
+
+  const dateObj = typeof date === 'number' ? new Date(date) : date;
+
+  if (format.toDisplay) {
+    return format.toDisplay(dateObj, format, locale);
+  }
+
+  return parseFormatString(format).formatter(dateObj, locale);
+}
+
+const range = document.createRange();
+
+function parseHTML(html) {
+  return range.createContextualFragment(html);
+}
+
+function getParent(el) {
+  return el.parentElement
+    || (el.parentNode instanceof ShadowRoot ? el.parentNode.host : undefined);
+}
+
+function isActiveElement(el) {
+  return el.getRootNode().activeElement === el;
+}
+
+function hideElement(el) {
+  if (el.style.display === 'none') {
+    return;
+  }
+  // back up the existing display setting in data-style-display
+  if (el.style.display) {
+    el.dataset.styleDisplay = el.style.display;
+  }
+  el.style.display = 'none';
+}
+
+function showElement(el) {
+  if (el.style.display !== 'none') {
+    return;
+  }
+  if (el.dataset.styleDisplay) {
+    // restore backed-up dispay property
+    el.style.display = el.dataset.styleDisplay;
+    delete el.dataset.styleDisplay;
+  } else {
+    el.style.display = '';
+  }
+}
+
+function emptyChildNodes(el) {
+  if (el.firstChild) {
+    el.removeChild(el.firstChild);
+    emptyChildNodes(el);
+  }
+}
+
+function replaceChildNodes(el, newChildNodes) {
+  emptyChildNodes(el);
+  if (newChildNodes instanceof DocumentFragment) {
+    el.appendChild(newChildNodes);
+  } else if (typeof newChildNodes === 'string') {
+    el.appendChild(parseHTML(newChildNodes));
+  } else if (typeof newChildNodes.forEach === 'function') {
+    newChildNodes.forEach((node) => {
+      el.appendChild(node);
+    });
+  }
+}
+
+const listenerRegistry = new WeakMap();
+const {addEventListener, removeEventListener} = EventTarget.prototype;
+
+// Register event listeners to a key object
+// listeners: array of listener definitions;
+//   - each definition must be a flat array of event target and the arguments
+//     used to call addEventListener() on the target
+function registerListeners(keyObj, listeners) {
+  let registered = listenerRegistry.get(keyObj);
+  if (!registered) {
+    registered = [];
+    listenerRegistry.set(keyObj, registered);
+  }
+  listeners.forEach((listener) => {
+    addEventListener.call(...listener);
+    registered.push(listener);
+  });
+}
+
+function unregisterListeners(keyObj) {
+  let listeners = listenerRegistry.get(keyObj);
+  if (!listeners) {
+    return;
+  }
+  listeners.forEach((listener) => {
+    removeEventListener.call(...listener);
+  });
+  listenerRegistry.delete(keyObj);
+}
+
+// Event.composedPath() polyfill for Edge
+// based on https://gist.github.com/kleinfreund/e9787d73776c0e3750dcfcdc89f100ec
+if (!Event.prototype.composedPath) {
+  const getComposedPath = (node, path = []) => {
+    path.push(node);
+
+    let parent;
+    if (node.parentNode) {
+      parent = node.parentNode;
+    } else if (node.host) { // ShadowRoot
+      parent = node.host;
+    } else if (node.defaultView) {  // Document
+      parent = node.defaultView;
+    }
+    return parent ? getComposedPath(parent, path) : path;
+  };
+
+  Event.prototype.composedPath = function () {
+    return getComposedPath(this.target);
+  };
+}
+
+function findFromPath(path, criteria, currentTarget) {
+  const [node, ...rest] = path;
+  if (criteria(node)) {
+    return node;
+  }
+  if (node === currentTarget || node.tagName === 'HTML' || rest.length === 0) {
+    // stop when reaching currentTarget or <html>
+    return;
+  }
+  return findFromPath(rest, criteria, currentTarget);
+}
+
+// Search for the actual target of a delegated event
+function findElementInEventPath(ev, selector) {
+  const criteria = typeof selector === 'function'
+    ? selector
+    : el => el instanceof Element && el.matches(selector);
+  return findFromPath(ev.composedPath(), criteria, ev.currentTarget);
+}
+
+// default locales
+const locales = {
+  en: {
+    days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
+    daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+    daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
+    months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
+    monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+    today: "Today",
+    clear: "Clear",
+    titleFormat: "MM y"
+  }
+};
+
+// config options updatable by setOptions() and their default values
+const defaultOptions = {
+  autohide: false,
+  beforeShowDay: null,
+  beforeShowDecade: null,
+  beforeShowMonth: null,
+  beforeShowYear: null,
+  calendarWeeks: false,
+  clearBtn: false,
+  dateDelimiter: ',',
+  datesDisabled: [],
+  daysOfWeekDisabled: [],
+  daysOfWeekHighlighted: [],
+  defaultViewDate: undefined, // placeholder, defaults to today() by the program
+  disableTouchKeyboard: false,
+  format: 'mm/dd/yyyy',
+  language: 'en',
+  maxDate: null,
+  maxNumberOfDates: 1,
+  maxView: 3,
+  minDate: null,
+  nextArrow: '»',
+  orientation: 'auto',
+  pickLevel: 0,
+  prevArrow: '«',
+  showDaysOfWeek: true,
+  showOnClick: true,
+  showOnFocus: true,
+  startView: 0,
+  title: '',
+  todayBtn: false,
+  todayBtnMode: 0,
+  todayHighlight: false,
+  updateOnBlur: true,
+  weekStart: 0,
+};
+
+const {
+  language: defaultLang,
+  format: defaultFormat,
+  weekStart: defaultWeekStart,
+} = defaultOptions;
+
+// Reducer function to filter out invalid day-of-week from the input
+function sanitizeDOW(dow, day) {
+  return dow.length < 6 && day >= 0 && day < 7
+    ? pushUnique(dow, day)
+    : dow;
+}
+
+function calcEndOfWeek(startOfWeek) {
+  return (startOfWeek + 6) % 7;
+}
+
+// validate input date. if invalid, fallback to the original value
+function validateDate(value, format, locale, origValue) {
+  const date = parseDate(value, format, locale);
+  return date !== undefined ? date : origValue;
+}
+
+// Validate viewId. if invalid, fallback to the original value
+function validateViewId(value, origValue, max = 3) {
+  const viewId = parseInt(value, 10);
+  return viewId >= 0 && viewId <= max ? viewId : origValue;
+}
+
+// Create Datepicker configuration to set
+function processOptions(options, datepicker) {
+  const inOpts = Object.assign({}, options);
+  const config = {};
+  const locales = datepicker.constructor.locales;
+  const rangeSideIndex = datepicker.rangeSideIndex;
+  let {
+    format,
+    language,
+    locale,
+    maxDate,
+    maxView,
+    minDate,
+    pickLevel,
+    startView,
+    weekStart,
+  } = datepicker.config || {};
+
+  if (inOpts.language) {
+    let lang;
+    if (inOpts.language !== language) {
+      if (locales[inOpts.language]) {
+        lang = inOpts.language;
+      } else {
+        // Check if langauge + region tag can fallback to the one without
+        // region (e.g. fr-CA → fr)
+        lang = inOpts.language.split('-')[0];
+        if (locales[lang] === undefined) {
+          lang = false;
+        }
+      }
+    }
+    delete inOpts.language;
+    if (lang) {
+      language = config.language = lang;
+
+      // update locale as well when updating language
+      const origLocale = locale || locales[defaultLang];
+      // use default language's properties for the fallback
+      locale = Object.assign({
+        format: defaultFormat,
+        weekStart: defaultWeekStart
+      }, locales[defaultLang]);
+      if (language !== defaultLang) {
+        Object.assign(locale, locales[language]);
+      }
+      config.locale = locale;
+      // if format and/or weekStart are the same as old locale's defaults,
+      // update them to new locale's defaults
+      if (format === origLocale.format) {
+        format = config.format = locale.format;
+      }
+      if (weekStart === origLocale.weekStart) {
+        weekStart = config.weekStart = locale.weekStart;
+        config.weekEnd = calcEndOfWeek(locale.weekStart);
+      }
+    }
+  }
+
+  if (inOpts.format) {
+    const hasToDisplay = typeof inOpts.format.toDisplay === 'function';
+    const hasToValue = typeof inOpts.format.toValue === 'function';
+    const validFormatString = reFormatTokens.test(inOpts.format);
+    if ((hasToDisplay && hasToValue) || validFormatString) {
+      format = config.format = inOpts.format;
+    }
+    delete inOpts.format;
+  }
+
+  //*** pick level ***//
+  let newPickLevel = pickLevel;
+  if (inOpts.pickLevel !== undefined) {
+    newPickLevel = validateViewId(inOpts.pickLevel, 2);
+    delete inOpts.pickLevel;
+  }
+  if (newPickLevel !== pickLevel) {
+    if (newPickLevel > pickLevel) {
+      // complement current minDate/madDate so that the existing range will be
+      // expanded to fit the new level later
+      if (inOpts.minDate === undefined) {
+        inOpts.minDate = minDate;
+      }
+      if (inOpts.maxDate === undefined) {
+        inOpts.maxDate = maxDate;
+      }
+    }
+    // complement datesDisabled so that it will be reset later
+    if (!inOpts.datesDisabled) {
+      inOpts.datesDisabled = [];
+    }
+    pickLevel = config.pickLevel = newPickLevel;
+  }
+
+  //*** dates ***//
+  // while min and maxDate for "no limit" in the options are better to be null
+  // (especially when updating), the ones in the config have to be undefined
+  // because null is treated as 0 (= unix epoch) when comparing with time value
+  let minDt = minDate;
+  let maxDt = maxDate;
+  if (inOpts.minDate !== undefined) {
+    const defaultMinDt = dateValue(0, 0, 1);
+    minDt = inOpts.minDate === null
+      ? defaultMinDt  // set 0000-01-01 to prevent negative values for year
+      : validateDate(inOpts.minDate, format, locale, minDt);
+    if (minDt !== defaultMinDt) {
+      minDt = regularizeDate(minDt, pickLevel, false);
+    }
+    delete inOpts.minDate;
+  }
+  if (inOpts.maxDate !== undefined) {
+    maxDt = inOpts.maxDate === null
+      ? undefined
+      : validateDate(inOpts.maxDate, format, locale, maxDt);
+    if (maxDt !== undefined) {
+      maxDt = regularizeDate(maxDt, pickLevel, true);
+    }
+    delete inOpts.maxDate;
+  }
+  if (maxDt < minDt) {
+    minDate = config.minDate = maxDt;
+    maxDate = config.maxDate = minDt;
+  } else {
+    if (minDate !== minDt) {
+      minDate = config.minDate = minDt;
+    }
+    if (maxDate !== maxDt) {
+      maxDate = config.maxDate = maxDt;
+    }
+  }
+
+  if (inOpts.datesDisabled) {
+    config.datesDisabled = inOpts.datesDisabled.reduce((dates, dt) => {
+      const date = parseDate(dt, format, locale);
+      return date !== undefined
+        ? pushUnique(dates, regularizeDate(date, pickLevel, rangeSideIndex))
+        : dates;
+    }, []);
+    delete inOpts.datesDisabled;
+  }
+  if (inOpts.defaultViewDate !== undefined) {
+    const viewDate = parseDate(inOpts.defaultViewDate, format, locale);
+    if (viewDate !== undefined) {
+      config.defaultViewDate = viewDate;
+    }
+    delete inOpts.defaultViewDate;
+  }
+
+  //*** days of week ***//
+  if (inOpts.weekStart !== undefined) {
+    const wkStart = Number(inOpts.weekStart) % 7;
+    if (!isNaN(wkStart)) {
+      weekStart = config.weekStart = wkStart;
+      config.weekEnd = calcEndOfWeek(wkStart);
+    }
+    delete inOpts.weekStart;
+  }
+  if (inOpts.daysOfWeekDisabled) {
+    config.daysOfWeekDisabled = inOpts.daysOfWeekDisabled.reduce(sanitizeDOW, []);
+    delete inOpts.daysOfWeekDisabled;
+  }
+  if (inOpts.daysOfWeekHighlighted) {
+    config.daysOfWeekHighlighted = inOpts.daysOfWeekHighlighted.reduce(sanitizeDOW, []);
+    delete inOpts.daysOfWeekHighlighted;
+  }
+
+  //*** multi date ***//
+  if (inOpts.maxNumberOfDates !== undefined) {
+    const maxNumberOfDates = parseInt(inOpts.maxNumberOfDates, 10);
+    if (maxNumberOfDates >= 0) {
+      config.maxNumberOfDates = maxNumberOfDates;
+      config.multidate = maxNumberOfDates !== 1;
+    }
+    delete inOpts.maxNumberOfDates;
+  }
+  if (inOpts.dateDelimiter) {
+    config.dateDelimiter = String(inOpts.dateDelimiter);
+    delete inOpts.dateDelimiter;
+  }
+
+  //*** view ***//
+  let newMaxView = maxView;
+  if (inOpts.maxView !== undefined) {
+    newMaxView = validateViewId(inOpts.maxView, maxView);
+    delete inOpts.maxView;
+  }
+  // ensure max view >= pick level
+  newMaxView = pickLevel > newMaxView ? pickLevel : newMaxView;
+  if (newMaxView !== maxView) {
+    maxView = config.maxView = newMaxView;
+  }
+
+  let newStartView = startView;
+  if (inOpts.startView !== undefined) {
+    newStartView = validateViewId(inOpts.startView, newStartView);
+    delete inOpts.startView;
+  }
+  // ensure pick level <= start view <= max view
+  if (newStartView < pickLevel) {
+    newStartView = pickLevel;
+  } else if (newStartView > maxView) {
+    newStartView = maxView;
+  }
+  if (newStartView !== startView) {
+    config.startView = newStartView;
+  }
+
+  //*** template ***//
+  if (inOpts.prevArrow) {
+    const prevArrow = parseHTML(inOpts.prevArrow);
+    if (prevArrow.childNodes.length > 0) {
+      config.prevArrow = prevArrow.childNodes;
+    }
+    delete inOpts.prevArrow;
+  }
+  if (inOpts.nextArrow) {
+    const nextArrow = parseHTML(inOpts.nextArrow);
+    if (nextArrow.childNodes.length > 0) {
+      config.nextArrow = nextArrow.childNodes;
+    }
+    delete inOpts.nextArrow;
+  }
+
+  //*** misc ***//
+  if (inOpts.disableTouchKeyboard !== undefined) {
+    config.disableTouchKeyboard = 'ontouchstart' in document && !!inOpts.disableTouchKeyboard;
+    delete inOpts.disableTouchKeyboard;
+  }
+  if (inOpts.orientation) {
+    const orientation = inOpts.orientation.toLowerCase().split(/\s+/g);
+    config.orientation = {
+      x: orientation.find(x => (x === 'left' || x === 'right')) || 'auto',
+      y: orientation.find(y => (y === 'top' || y === 'bottom')) || 'auto',
+    };
+    delete inOpts.orientation;
+  }
+  if (inOpts.todayBtnMode !== undefined) {
+    switch(inOpts.todayBtnMode) {
+      case 0:
+      case 1:
+        config.todayBtnMode = inOpts.todayBtnMode;
+    }
+    delete inOpts.todayBtnMode;
+  }
+
+  //*** copy the rest ***//
+  Object.keys(inOpts).forEach((key) => {
+    if (inOpts[key] !== undefined && hasProperty(defaultOptions, key)) {
+      config[key] = inOpts[key];
+    }
+  });
+
+  return config;
+}
+
+const pickerTemplate = optimizeTemplateHTML(`<div class="datepicker">
+  <div class="datepicker-picker">
+    <div class="datepicker-header">
+      <div class="datepicker-title"></div>
+      <div class="datepicker-controls">
+        <button type="button" class="%buttonClass% prev-btn"></button>
+        <button type="button" class="%buttonClass% view-switch"></button>
+        <button type="button" class="%buttonClass% next-btn"></button>
+      </div>
+    </div>
+    <div class="datepicker-main"></div>
+    <div class="datepicker-footer">
+      <div class="datepicker-controls">
+        <button type="button" class="%buttonClass% today-btn"></button>
+        <button type="button" class="%buttonClass% clear-btn"></button>
+      </div>
+    </div>
+  </div>
+</div>`);
+
+const daysTemplate = optimizeTemplateHTML(`<div class="days">
+  <div class="days-of-week">${createTagRepeat('span', 7, {class: 'dow'})}</div>
+  <div class="datepicker-grid">${createTagRepeat('span', 42)}</div>
+</div>`);
+
+const calendarWeeksTemplate = optimizeTemplateHTML(`<div class="calendar-weeks">
+  <div class="days-of-week"><span class="dow"></span></div>
+  <div class="weeks">${createTagRepeat('span', 6, {class: 'week'})}</div>
+</div>`);
+
+// Base class of the view classes
+class View {
+  constructor(picker, config) {
+    Object.assign(this, config, {
+      picker,
+      element: parseHTML(`<div class="datepicker-view"></div>`).firstChild,
+      selected: [],
+    });
+    this.init(this.picker.datepicker.config);
+  }
+
+  init(options) {
+    if (options.pickLevel !== undefined) {
+      this.isMinView = this.id === options.pickLevel;
+    }
+    this.setOptions(options);
+    this.updateFocus();
+    this.updateSelection();
+  }
+
+  // Execute beforeShow() callback and apply the result to the element
+  // args:
+  // - current - current value on the iteration on view rendering
+  // - timeValue - time value of the date to pass to beforeShow()
+  performBeforeHook(el, current, timeValue) {
+    let result = this.beforeShow(new Date(timeValue));
+    switch (typeof result) {
+      case 'boolean':
+        result = {enabled: result};
+        break;
+      case 'string':
+        result = {classes: result};
+    }
+
+    if (result) {
+      if (result.enabled === false) {
+        el.classList.add('disabled');
+        pushUnique(this.disabled, current);
+      }
+      if (result.classes) {
+        const extraClasses = result.classes.split(/\s+/);
+        el.classList.add(...extraClasses);
+        if (extraClasses.includes('disabled')) {
+          pushUnique(this.disabled, current);
+        }
+      }
+      if (result.content) {
+        replaceChildNodes(el, result.content);
+      }
+    }
+  }
+}
+
+class DaysView extends View {
+  constructor(picker) {
+    super(picker, {
+      id: 0,
+      name: 'days',
+      cellClass: 'day',
+    });
+  }
+
+  init(options, onConstruction = true) {
+    if (onConstruction) {
+      const inner = parseHTML(daysTemplate).firstChild;
+      this.dow = inner.firstChild;
+      this.grid = inner.lastChild;
+      this.element.appendChild(inner);
+    }
+    super.init(options);
+  }
+
+  setOptions(options) {
+    let updateDOW;
+
+    if (hasProperty(options, 'minDate')) {
+      this.minDate = options.minDate;
+    }
+    if (hasProperty(options, 'maxDate')) {
+      this.maxDate = options.maxDate;
+    }
+    if (options.datesDisabled) {
+      this.datesDisabled = options.datesDisabled;
+    }
+    if (options.daysOfWeekDisabled) {
+      this.daysOfWeekDisabled = options.daysOfWeekDisabled;
+      updateDOW = true;
+    }
+    if (options.daysOfWeekHighlighted) {
+      this.daysOfWeekHighlighted = options.daysOfWeekHighlighted;
+    }
+    if (options.todayHighlight !== undefined) {
+      this.todayHighlight = options.todayHighlight;
+    }
+    if (options.weekStart !== undefined) {
+      this.weekStart = options.weekStart;
+      this.weekEnd = options.weekEnd;
+      updateDOW = true;
+    }
+    if (options.locale) {
+      const locale = this.locale = options.locale;
+      this.dayNames = locale.daysMin;
+      this.switchLabelFormat = locale.titleFormat;
+      updateDOW = true;
+    }
+    if (options.beforeShowDay !== undefined) {
+      this.beforeShow = typeof options.beforeShowDay === 'function'
+        ? options.beforeShowDay
+        : undefined;
+    }
+
+    if (options.calendarWeeks !== undefined) {
+      if (options.calendarWeeks && !this.calendarWeeks) {
+        const weeksElem = parseHTML(calendarWeeksTemplate).firstChild;
+        this.calendarWeeks = {
+          element: weeksElem,
+          dow: weeksElem.firstChild,
+          weeks: weeksElem.lastChild,
+        };
+        this.element.insertBefore(weeksElem, this.element.firstChild);
+      } else if (this.calendarWeeks && !options.calendarWeeks) {
+        this.element.removeChild(this.calendarWeeks.element);
+        this.calendarWeeks = null;
+      }
+    }
+    if (options.showDaysOfWeek !== undefined) {
+      if (options.showDaysOfWeek) {
+        showElement(this.dow);
+        if (this.calendarWeeks) {
+          showElement(this.calendarWeeks.dow);
+        }
+      } else {
+        hideElement(this.dow);
+        if (this.calendarWeeks) {
+          hideElement(this.calendarWeeks.dow);
+        }
+      }
+    }
+
+    // update days-of-week when locale, daysOfweekDisabled or weekStart is changed
+    if (updateDOW) {
+      Array.from(this.dow.children).forEach((el, index) => {
+        const dow = (this.weekStart + index) % 7;
+        el.textContent = this.dayNames[dow];
+        el.className = this.daysOfWeekDisabled.includes(dow) ? 'dow disabled' : 'dow';
+      });
+    }
+  }
+
+  // Apply update on the focused date to view's settings
+  updateFocus() {
+    const viewDate = new Date(this.picker.viewDate);
+    const viewYear = viewDate.getFullYear();
+    const viewMonth = viewDate.getMonth();
+    const firstOfMonth = dateValue(viewYear, viewMonth, 1);
+    const start = dayOfTheWeekOf(firstOfMonth, this.weekStart, this.weekStart);
+
+    this.first = firstOfMonth;
+    this.last = dateValue(viewYear, viewMonth + 1, 0);
+    this.start = start;
+    this.focused = this.picker.viewDate;
+  }
+
+  // Apply update on the selected dates to view's settings
+  updateSelection() {
+    const {dates, rangepicker} = this.picker.datepicker;
+    this.selected = dates;
+    if (rangepicker) {
+      this.range = rangepicker.dates;
+    }
+  }
+
+   // Update the entire view UI
+  render() {
+    // update today marker on ever render
+    this.today = this.todayHighlight ? today() : undefined;
+    // refresh disabled dates on every render in order to clear the ones added
+    // by beforeShow hook at previous render
+    this.disabled = [...this.datesDisabled];
+
+    const switchLabel = formatDate(this.focused, this.switchLabelFormat, this.locale);
+    this.picker.setViewSwitchLabel(switchLabel);
+    this.picker.setPrevBtnDisabled(this.first <= this.minDate);
+    this.picker.setNextBtnDisabled(this.last >= this.maxDate);
+
+    if (this.calendarWeeks) {
+      // start of the UTC week (Monday) of the 1st of the month
+      const startOfWeek = dayOfTheWeekOf(this.first, 1, 1);
+      Array.from(this.calendarWeeks.weeks.children).forEach((el, index) => {
+        el.textContent = getWeek(addWeeks(startOfWeek, index));
+      });
+    }
+    Array.from(this.grid.children).forEach((el, index) => {
+      const classList = el.classList;
+      const current = addDays(this.start, index);
+      const date = new Date(current);
+      const day = date.getDay();
+
+      el.className = `datepicker-cell ${this.cellClass}`;
+      el.dataset.date = current;
+      el.textContent = date.getDate();
+
+      if (current < this.first) {
+        classList.add('prev');
+      } else if (current > this.last) {
+        classList.add('next');
+      }
+      if (this.today === current) {
+        classList.add('today');
+      }
+      if (current < this.minDate || current > this.maxDate || this.disabled.includes(current)) {
+        classList.add('disabled');
+      }
+      if (this.daysOfWeekDisabled.includes(day)) {
+        classList.add('disabled');
+        pushUnique(this.disabled, current);
+      }
+      if (this.daysOfWeekHighlighted.includes(day)) {
+        classList.add('highlighted');
+      }
+      if (this.range) {
+        const [rangeStart, rangeEnd] = this.range;
+        if (current > rangeStart && current < rangeEnd) {
+          classList.add('range');
+        }
+        if (current === rangeStart) {
+          classList.add('range-start');
+        }
+        if (current === rangeEnd) {
+          classList.add('range-end');
+        }
+      }
+      if (this.selected.includes(current)) {
+        classList.add('selected');
+      }
+      if (current === this.focused) {
+        classList.add('focused');
+      }
+
+      if (this.beforeShow) {
+        this.performBeforeHook(el, current, current);
+      }
+    });
+  }
+
+  // Update the view UI by applying the changes of selected and focused items
+  refresh() {
+    const [rangeStart, rangeEnd] = this.range || [];
+    this.grid
+      .querySelectorAll('.range, .range-start, .range-end, .selected, .focused')
+      .forEach((el) => {
+        el.classList.remove('range', 'range-start', 'range-end', 'selected', 'focused');
+      });
+    Array.from(this.grid.children).forEach((el) => {
+      const current = Number(el.dataset.date);
+      const classList = el.classList;
+      if (current > rangeStart && current < rangeEnd) {
+        classList.add('range');
+      }
+      if (current === rangeStart) {
+        classList.add('range-start');
+      }
+      if (current === rangeEnd) {
+        classList.add('range-end');
+      }
+      if (this.selected.includes(current)) {
+        classList.add('selected');
+      }
+      if (current === this.focused) {
+        classList.add('focused');
+      }
+    });
+  }
+
+  // Update the view UI by applying the change of focused item
+  refreshFocus() {
+    const index = Math.round((this.focused - this.start) / 86400000);
+    this.grid.querySelectorAll('.focused').forEach((el) => {
+      el.classList.remove('focused');
+    });
+    this.grid.children[index].classList.add('focused');
+  }
+}
+
+function computeMonthRange(range, thisYear) {
+  if (!range || !range[0] || !range[1]) {
+    return;
+  }
+
+  const [[startY, startM], [endY, endM]] = range;
+  if (startY > thisYear || endY < thisYear) {
+    return;
+  }
+  return [
+    startY === thisYear ? startM : -1,
+    endY === thisYear ? endM : 12,
+  ];
+}
+
+class MonthsView extends View {
+  constructor(picker) {
+    super(picker, {
+      id: 1,
+      name: 'months',
+      cellClass: 'month',
+    });
+  }
+
+  init(options, onConstruction = true) {
+    if (onConstruction) {
+      this.grid = this.element;
+      this.element.classList.add('months', 'datepicker-grid');
+      this.grid.appendChild(parseHTML(createTagRepeat('span', 12, {'data-month': ix => ix})));
+    }
+    super.init(options);
+  }
+
+  setOptions(options) {
+    if (options.locale) {
+      this.monthNames = options.locale.monthsShort;
+    }
+    if (hasProperty(options, 'minDate')) {
+      if (options.minDate === undefined) {
+        this.minYear = this.minMonth = this.minDate = undefined;
+      } else {
+        const minDateObj = new Date(options.minDate);
+        this.minYear = minDateObj.getFullYear();
+        this.minMonth = minDateObj.getMonth();
+        this.minDate = minDateObj.setDate(1);
+      }
+    }
+    if (hasProperty(options, 'maxDate')) {
+      if (options.maxDate === undefined) {
+        this.maxYear = this.maxMonth = this.maxDate = undefined;
+      } else {
+        const maxDateObj = new Date(options.maxDate);
+        this.maxYear = maxDateObj.getFullYear();
+        this.maxMonth = maxDateObj.getMonth();
+        this.maxDate = dateValue(this.maxYear, this.maxMonth + 1, 0);
+      }
+    }
+    if (this.isMinView) {
+      if (options.datesDisabled) {
+        this.datesDisabled = options.datesDisabled;
+      }
+    } else {
+      this.datesDisabled = [];
+    }
+    if (options.beforeShowMonth !== undefined) {
+      this.beforeShow = typeof options.beforeShowMonth === 'function'
+        ? options.beforeShowMonth
+        : undefined;
+    }
+  }
+
+  // Update view's settings to reflect the viewDate set on the picker
+  updateFocus() {
+    const viewDate = new Date(this.picker.viewDate);
+    this.year = viewDate.getFullYear();
+    this.focused = viewDate.getMonth();
+  }
+
+  // Update view's settings to reflect the selected dates
+  updateSelection() {
+    const {dates, rangepicker} = this.picker.datepicker;
+    this.selected = dates.reduce((selected, timeValue) => {
+      const date = new Date(timeValue);
+      const year = date.getFullYear();
+      const month = date.getMonth();
+      if (selected[year] === undefined) {
+        selected[year] = [month];
+      } else {
+        pushUnique(selected[year], month);
+      }
+      return selected;
+    }, {});
+    if (rangepicker && rangepicker.dates) {
+      this.range = rangepicker.dates.map(timeValue => {
+        const date = new Date(timeValue);
+        return isNaN(date) ? undefined : [date.getFullYear(), date.getMonth()];
+      });
+    }
+  }
+
+  // Update the entire view UI
+  render() {
+    // refresh disabled months on every render in order to clear the ones added
+    // by beforeShow hook at previous render
+    // this.disabled = [...this.datesDisabled];
+    this.disabled = this.datesDisabled.reduce((arr, disabled) => {
+      const dt = new Date(disabled);
+      if (this.year === dt.getFullYear()) {
+        arr.push(dt.getMonth());
+      }
+      return arr;
+    }, []);
+
+    this.picker.setViewSwitchLabel(this.year);
+    this.picker.setPrevBtnDisabled(this.year <= this.minYear);
+    this.picker.setNextBtnDisabled(this.year >= this.maxYear);
+
+    const selected = this.selected[this.year] || [];
+    const yrOutOfRange = this.year < this.minYear || this.year > this.maxYear;
+    const isMinYear = this.year === this.minYear;
+    const isMaxYear = this.year === this.maxYear;
+    const range = computeMonthRange(this.range, this.year);
+
+    Array.from(this.grid.children).forEach((el, index) => {
+      const classList = el.classList;
+      const date = dateValue(this.year, index, 1);
+
+      el.className = `datepicker-cell ${this.cellClass}`;
+      if (this.isMinView) {
+        el.dataset.date = date;
+      }
+      // reset text on every render to clear the custom content set
+      // by beforeShow hook at previous render
+      el.textContent = this.monthNames[index];
+
+      if (
+        yrOutOfRange
+        || isMinYear && index < this.minMonth
+        || isMaxYear && index > this.maxMonth
+        || this.disabled.includes(index)
+      ) {
+        classList.add('disabled');
+      }
+      if (range) {
+        const [rangeStart, rangeEnd] = range;
+        if (index > rangeStart && index < rangeEnd) {
+          classList.add('range');
+        }
+        if (index === rangeStart) {
+          classList.add('range-start');
+        }
+        if (index === rangeEnd) {
+          classList.add('range-end');
+        }
+      }
+      if (selected.includes(index)) {
+        classList.add('selected');
+      }
+      if (index === this.focused) {
+        classList.add('focused');
+      }
+
+      if (this.beforeShow) {
+        this.performBeforeHook(el, index, date);
+      }
+    });
+  }
+
+  // Update the view UI by applying the changes of selected and focused items
+  refresh() {
+    const selected = this.selected[this.year] || [];
+    const [rangeStart, rangeEnd] = computeMonthRange(this.range, this.year) || [];
+    this.grid
+      .querySelectorAll('.range, .range-start, .range-end, .selected, .focused')
+      .forEach((el) => {
+        el.classList.remove('range', 'range-start', 'range-end', 'selected', 'focused');
+      });
+    Array.from(this.grid.children).forEach((el, index) => {
+      const classList = el.classList;
+      if (index > rangeStart && index < rangeEnd) {
+        classList.add('range');
+      }
+      if (index === rangeStart) {
+        classList.add('range-start');
+      }
+      if (index === rangeEnd) {
+        classList.add('range-end');
+      }
+      if (selected.includes(index)) {
+        classList.add('selected');
+      }
+      if (index === this.focused) {
+        classList.add('focused');
+      }
+    });
+  }
+
+  // Update the view UI by applying the change of focused item
+  refreshFocus() {
+    this.grid.querySelectorAll('.focused').forEach((el) => {
+      el.classList.remove('focused');
+    });
+    this.grid.children[this.focused].classList.add('focused');
+  }
+}
+
+function toTitleCase(word) {
+  return [...word].reduce((str, ch, ix) => str += ix ? ch : ch.toUpperCase(), '');
+}
+
+// Class representing the years and decades view elements
+class YearsView extends View {
+  constructor(picker, config) {
+    super(picker, config);
+  }
+
+  init(options, onConstruction = true) {
+    if (onConstruction) {
+      this.navStep = this.step * 10;
+      this.beforeShowOption = `beforeShow${toTitleCase(this.cellClass)}`;
+      this.grid = this.element;
+      this.element.classList.add(this.name, 'datepicker-grid');
+      this.grid.appendChild(parseHTML(createTagRepeat('span', 12)));
+    }
+    super.init(options);
+  }
+
+  setOptions(options) {
+    if (hasProperty(options, 'minDate')) {
+      if (options.minDate === undefined) {
+        this.minYear = this.minDate = undefined;
+      } else {
+        this.minYear = startOfYearPeriod(options.minDate, this.step);
+        this.minDate = dateValue(this.minYear, 0, 1);
+      }
+    }
+    if (hasProperty(options, 'maxDate')) {
+      if (options.maxDate === undefined) {
+        this.maxYear = this.maxDate = undefined;
+      } else {
+        this.maxYear = startOfYearPeriod(options.maxDate, this.step);
+        this.maxDate = dateValue(this.maxYear, 11, 31);
+      }
+    }
+    if (this.isMinView) {
+      if (options.datesDisabled) {
+        this.datesDisabled = options.datesDisabled;
+      }
+    } else {
+      this.datesDisabled = [];
+    }
+    if (options[this.beforeShowOption] !== undefined) {
+      const beforeShow = options[this.beforeShowOption];
+      this.beforeShow = typeof beforeShow === 'function' ? beforeShow : undefined;
+    }
+  }
+
+  // Update view's settings to reflect the viewDate set on the picker
+  updateFocus() {
+    const viewDate = new Date(this.picker.viewDate);
+    const first = startOfYearPeriod(viewDate, this.navStep);
+    const last = first + 9 * this.step;
+
+    this.first = first;
+    this.last = last;
+    this.start = first - this.step;
+    this.focused = startOfYearPeriod(viewDate, this.step);
+  }
+
+  // Update view's settings to reflect the selected dates
+  updateSelection() {
+    const {dates, rangepicker} = this.picker.datepicker;
+    this.selected = dates.reduce((years, timeValue) => {
+      return pushUnique(years, startOfYearPeriod(timeValue, this.step));
+    }, []);
+    if (rangepicker && rangepicker.dates) {
+      this.range = rangepicker.dates.map(timeValue => {
+        if (timeValue !== undefined) {
+          return startOfYearPeriod(timeValue, this.step);
+        }
+      });
+    }
+  }
+
+  // Update the entire view UI
+  render() {
+    // refresh disabled years on every render in order to clear the ones added
+    // by beforeShow hook at previous render
+    // this.disabled = [...this.datesDisabled];
+    this.disabled = this.datesDisabled.map(disabled => new Date(disabled).getFullYear());
+
+    this.picker.setViewSwitchLabel(`${this.first}-${this.last}`);
+    this.picker.setPrevBtnDisabled(this.first <= this.minYear);
+    this.picker.setNextBtnDisabled(this.last >= this.maxYear);
+
+    Array.from(this.grid.children).forEach((el, index) => {
+      const classList = el.classList;
+      const current = this.start + (index * this.step);
+      const date = dateValue(current, 0, 1);
+
+      el.className = `datepicker-cell ${this.cellClass}`;
+      if (this.isMinView) {
+        el.dataset.date = date;
+      }
+      el.textContent = el.dataset.year = current;
+
+      if (index === 0) {
+        classList.add('prev');
+      } else if (index === 11) {
+        classList.add('next');
+      }
+      if (current < this.minYear || current > this.maxYear || this.disabled.includes(current)) {
+        classList.add('disabled');
+      }
+      if (this.range) {
+        const [rangeStart, rangeEnd] = this.range;
+        if (current > rangeStart && current < rangeEnd) {
+          classList.add('range');
+        }
+        if (current === rangeStart) {
+          classList.add('range-start');
+        }
+        if (current === rangeEnd) {
+          classList.add('range-end');
+        }
+      }
+      if (this.selected.includes(current)) {
+        classList.add('selected');
+      }
+      if (current === this.focused) {
+        classList.add('focused');
+      }
+
+      if (this.beforeShow) {
+        this.performBeforeHook(el, current, date);
+      }
+    });
+  }
+
+  // Update the view UI by applying the changes of selected and focused items
+  refresh() {
+    const [rangeStart, rangeEnd] = this.range || [];
+    this.grid
+      .querySelectorAll('.range, .range-start, .range-end, .selected, .focused')
+      .forEach((el) => {
+        el.classList.remove('range', 'range-start', 'range-end', 'selected', 'focused');
+      });
+    Array.from(this.grid.children).forEach((el) => {
+      const current = Number(el.textContent);
+      const classList = el.classList;
+      if (current > rangeStart && current < rangeEnd) {
+        classList.add('range');
+      }
+      if (current === rangeStart) {
+        classList.add('range-start');
+      }
+      if (current === rangeEnd) {
+        classList.add('range-end');
+      }
+      if (this.selected.includes(current)) {
+        classList.add('selected');
+      }
+      if (current === this.focused) {
+        classList.add('focused');
+      }
+    });
+  }
+
+  // Update the view UI by applying the change of focused item
+  refreshFocus() {
+    const index = Math.round((this.focused - this.start) / this.step);
+    this.grid.querySelectorAll('.focused').forEach((el) => {
+      el.classList.remove('focused');
+    });
+    this.grid.children[index].classList.add('focused');
+  }
+}
+
+function triggerDatepickerEvent(datepicker, type) {
+  const detail = {
+    date: datepicker.getDate(),
+    viewDate: new Date(datepicker.picker.viewDate),
+    viewId: datepicker.picker.currentView.id,
+    datepicker,
+  };
+  datepicker.element.dispatchEvent(new CustomEvent(type, {detail}));
+}
+
+// direction: -1 (to previous), 1 (to next)
+function goToPrevOrNext(datepicker, direction) {
+  const {minDate, maxDate} = datepicker.config;
+  const {currentView, viewDate} = datepicker.picker;
+  let newViewDate;
+  switch (currentView.id) {
+    case 0:
+      newViewDate = addMonths(viewDate, direction);
+      break;
+    case 1:
+      newViewDate = addYears(viewDate, direction);
+      break;
+    default:
+      newViewDate = addYears(viewDate, direction * currentView.navStep);
+  }
+  newViewDate = limitToRange(newViewDate, minDate, maxDate);
+  datepicker.picker.changeFocus(newViewDate).render();
+}
+
+function switchView(datepicker) {
+  const viewId = datepicker.picker.currentView.id;
+  if (viewId === datepicker.config.maxView) {
+    return;
+  }
+  datepicker.picker.changeView(viewId + 1).render();
+}
+
+function unfocus(datepicker) {
+  if (datepicker.config.updateOnBlur) {
+    datepicker.update({revert: true});
+  } else {
+    datepicker.refresh('input');
+  }
+  datepicker.hide();
+}
+
+function goToSelectedMonthOrYear(datepicker, selection) {
+  const picker = datepicker.picker;
+  const viewDate = new Date(picker.viewDate);
+  const viewId = picker.currentView.id;
+  const newDate = viewId === 1
+    ? addMonths(viewDate, selection - viewDate.getMonth())
+    : addYears(viewDate, selection - viewDate.getFullYear());
+
+  picker.changeFocus(newDate).changeView(viewId - 1).render();
+}
+
+function onClickTodayBtn(datepicker) {
+  const picker = datepicker.picker;
+  const currentDate = today();
+  if (datepicker.config.todayBtnMode === 1) {
+    if (datepicker.config.autohide) {
+      datepicker.setDate(currentDate);
+      return;
+    }
+    datepicker.setDate(currentDate, {render: false});
+    picker.update();
+  }
+  if (picker.viewDate !== currentDate) {
+    picker.changeFocus(currentDate);
+  }
+  picker.changeView(0).render();
+}
+
+function onClickClearBtn(datepicker) {
+  datepicker.setDate({clear: true});
+}
+
+function onClickViewSwitch(datepicker) {
+  switchView(datepicker);
+}
+
+function onClickPrevBtn(datepicker) {
+  goToPrevOrNext(datepicker, -1);
+}
+
+function onClickNextBtn(datepicker) {
+  goToPrevOrNext(datepicker, 1);
+}
+
+// For the picker's main block to delegete the events from `datepicker-cell`s
+function onClickView(datepicker, ev) {
+  const target = findElementInEventPath(ev, '.datepicker-cell');
+  if (!target || target.classList.contains('disabled')) {
+    return;
+  }
+
+  const {id, isMinView} = datepicker.picker.currentView;
+  if (isMinView) {
+    datepicker.setDate(Number(target.dataset.date));
+  } else if (id === 1) {
+    goToSelectedMonthOrYear(datepicker, Number(target.dataset.month));
+  } else {
+    goToSelectedMonthOrYear(datepicker, Number(target.dataset.year));
+  }
+}
+
+function onMousedownPicker(ev) {
+  ev.preventDefault();
+}
+
+const orientClasses = ['left', 'top', 'right', 'bottom'].reduce((obj, key) => {
+  obj[key] = `datepicker-orient-${key}`;
+  return obj;
+}, {});
+const toPx = num => num ? `${num}px` : num;
+
+function processPickerOptions(picker, options) {
+  if (options.title !== undefined) {
+    if (options.title) {
+      picker.controls.title.textContent = options.title;
+      showElement(picker.controls.title);
+    } else {
+      picker.controls.title.textContent = '';
+      hideElement(picker.controls.title);
+    }
+  }
+  if (options.prevArrow) {
+    const prevBtn = picker.controls.prevBtn;
+    emptyChildNodes(prevBtn);
+    options.prevArrow.forEach((node) => {
+      prevBtn.appendChild(node.cloneNode(true));
+    });
+  }
+  if (options.nextArrow) {
+    const nextBtn = picker.controls.nextBtn;
+    emptyChildNodes(nextBtn);
+    options.nextArrow.forEach((node) => {
+      nextBtn.appendChild(node.cloneNode(true));
+    });
+  }
+  if (options.locale) {
+    picker.controls.todayBtn.textContent = options.locale.today;
+    picker.controls.clearBtn.textContent = options.locale.clear;
+  }
+  if (options.todayBtn !== undefined) {
+    if (options.todayBtn) {
+      showElement(picker.controls.todayBtn);
+    } else {
+      hideElement(picker.controls.todayBtn);
+    }
+  }
+  if (hasProperty(options, 'minDate') || hasProperty(options, 'maxDate')) {
+    const {minDate, maxDate} = picker.datepicker.config;
+    picker.controls.todayBtn.disabled = !isInRange(today(), minDate, maxDate);
+  }
+  if (options.clearBtn !== undefined) {
+    if (options.clearBtn) {
+      showElement(picker.controls.clearBtn);
+    } else {
+      hideElement(picker.controls.clearBtn);
+    }
+  }
+}
+
+// Compute view date to reset, which will be...
+// - the last item of the selected dates or defaultViewDate if no selection
+// - limitted to minDate or maxDate if it exceeds the range
+function computeResetViewDate(datepicker) {
+  const {dates, config} = datepicker;
+  const viewDate = dates.length > 0 ? lastItemOf(dates) : config.defaultViewDate;
+  return limitToRange(viewDate, config.minDate, config.maxDate);
+}
+
+// Change current view's view date
+function setViewDate(picker, newDate) {
+  const oldViewDate = new Date(picker.viewDate);
+  const newViewDate = new Date(newDate);
+  const {id, year, first, last} = picker.currentView;
+  const viewYear = newViewDate.getFullYear();
+
+  picker.viewDate = newDate;
+  if (viewYear !== oldViewDate.getFullYear()) {
+    triggerDatepickerEvent(picker.datepicker, 'changeYear');
+  }
+  if (newViewDate.getMonth() !== oldViewDate.getMonth()) {
+    triggerDatepickerEvent(picker.datepicker, 'changeMonth');
+  }
+
+  // return whether the new date is in different period on time from the one
+  // displayed in the current view
+  // when true, the view needs to be re-rendered on the next UI refresh.
+  switch (id) {
+    case 0:
+      return newDate < first || newDate > last;
+    case 1:
+      return viewYear !== year;
+    default:
+      return viewYear < first || viewYear > last;
+  }
+}
+
+function getTextDirection(el) {
+  return window.getComputedStyle(el).direction;
+}
+
+// find the closet scrollable ancestor elemnt under the body
+function findScrollParents(el) {
+  const parent = getParent(el);
+  if (parent === document.body || !parent) {
+    return;
+  }
+
+  // checking overflow only is enough because computed overflow cannot be
+  // visible or a combination of visible and other when either axis is set
+  // to other than visible.
+  // (Setting one axis to other than 'visible' while the other is 'visible'
+  // results in the other axis turning to 'auto')
+  return window.getComputedStyle(parent).overflow !== 'visible'
+    ? parent
+    : findScrollParents(parent);
+}
+
+// Class representing the picker UI
+class Picker {
+  constructor(datepicker) {
+    const {config} = this.datepicker = datepicker;
+
+    const template = pickerTemplate.replace(/%buttonClass%/g, config.buttonClass);
+    const element = this.element = parseHTML(template).firstChild;
+    const [header, main, footer] = element.firstChild.children;
+    const title = header.firstElementChild;
+    const [prevBtn, viewSwitch, nextBtn] = header.lastElementChild.children;
+    const [todayBtn, clearBtn] = footer.firstChild.children;
+    const controls = {
+      title,
+      prevBtn,
+      viewSwitch,
+      nextBtn,
+      todayBtn,
+      clearBtn,
+    };
+    this.main = main;
+    this.controls = controls;
+
+    const elementClass = datepicker.inline ? 'inline' : 'dropdown';
+    element.classList.add(`datepicker-${elementClass}`);
+
+    processPickerOptions(this, config);
+    this.viewDate = computeResetViewDate(datepicker);
+
+    // set up event listeners
+    registerListeners(datepicker, [
+      [element, 'mousedown', onMousedownPicker],
+      [main, 'click', onClickView.bind(null, datepicker)],
+      [controls.viewSwitch, 'click', onClickViewSwitch.bind(null, datepicker)],
+      [controls.prevBtn, 'click', onClickPrevBtn.bind(null, datepicker)],
+      [controls.nextBtn, 'click', onClickNextBtn.bind(null, datepicker)],
+      [controls.todayBtn, 'click', onClickTodayBtn.bind(null, datepicker)],
+      [controls.clearBtn, 'click', onClickClearBtn.bind(null, datepicker)],
+    ]);
+
+    // set up views
+    this.views = [
+      new DaysView(this),
+      new MonthsView(this),
+      new YearsView(this, {id: 2, name: 'years', cellClass: 'year', step: 1}),
+      new YearsView(this, {id: 3, name: 'decades', cellClass: 'decade', step: 10}),
+    ];
+    this.currentView = this.views[config.startView];
+
+    this.currentView.render();
+    this.main.appendChild(this.currentView.element);
+    if (config.container) {
+      config.container.appendChild(this.element);
+    } else {
+      datepicker.inputField.after(this.element);
+    }
+  }
+
+  setOptions(options) {
+    processPickerOptions(this, options);
+    this.views.forEach((view) => {
+      view.init(options, false);
+    });
+    this.currentView.render();
+  }
+
+  detach() {
+    this.element.remove();
+  }
+
+  show() {
+    if (this.active) {
+      return;
+    }
+
+    const {datepicker, element} = this;
+    if (datepicker.inline) {
+      element.classList.add('active');
+    } else {
+      // ensure picker's direction matches input's
+      const inputDirection = getTextDirection(datepicker.inputField);
+      if (inputDirection !== getTextDirection(getParent(element))) {
+        element.dir = inputDirection;
+      } else if (element.dir) {
+        element.removeAttribute('dir');
+      }
+
+      element.style.visiblity = 'hidden';
+      element.classList.add('active');
+      this.place();
+      element.style.visiblity = '';
+
+      if (datepicker.config.disableTouchKeyboard) {
+        datepicker.inputField.blur();
+      }
+    }
+    this.active = true;
+    triggerDatepickerEvent(datepicker, 'show');
+  }
+
+  hide() {
+    if (!this.active) {
+      return;
+    }
+    this.datepicker.exitEditMode();
+    this.element.classList.remove('active');
+    this.active = false;
+    triggerDatepickerEvent(this.datepicker, 'hide');
+  }
+
+  place() {
+    const {classList, offsetParent, style} = this.element;
+    const {config, inputField} = this.datepicker;
+    const {
+      width: calendarWidth,
+      height: calendarHeight,
+    } = this.element.getBoundingClientRect();
+    const {
+      left: inputLeft,
+      top: inputTop,
+      right: inputRight,
+      bottom: inputBottom,
+      width: inputWidth,
+      height: inputHeight
+    } = inputField.getBoundingClientRect();
+    let {x: orientX, y: orientY} = config.orientation;
+    let left = inputLeft;
+    let top = inputTop;
+
+    // caliculate offsetLeft/Top of inputField
+    if (offsetParent === document.body || !offsetParent) {
+      left += window.scrollX;
+      top += window.scrollY;
+    } else {
+      const offsetParentRect = offsetParent.getBoundingClientRect();
+      left -= offsetParentRect.left - offsetParent.scrollLeft;
+      top -= offsetParentRect.top - offsetParent.scrollTop;
+    }
+
+    // caliculate the boundaries of the visible area that contains inputField
+    const scrollParent = findScrollParents(inputField);
+    let scrollAreaLeft = 0;
+    let scrollAreaTop = 0;
+    let {
+      clientWidth: scrollAreaRight,
+      clientHeight: scrollAreaBottom,
+    } = document.documentElement;
+
+    if (scrollParent) {
+      const scrollParentRect = scrollParent.getBoundingClientRect();
+      if (scrollParentRect.top > 0) {
+        scrollAreaTop = scrollParentRect.top;
+      }
+      if (scrollParentRect.left > 0) {
+        scrollAreaLeft = scrollParentRect.left;
+      }
+      if (scrollParentRect.right < scrollAreaRight) {
+        scrollAreaRight = scrollParentRect.right;
+      }
+      if (scrollParentRect.bottom < scrollAreaBottom) {
+        scrollAreaBottom = scrollParentRect.bottom;
+      }
+    }
+
+    // determine the horizontal orientation and left position
+    let adjustment = 0;
+    if (orientX === 'auto') {
+      if (inputLeft < scrollAreaLeft) {
+        orientX = 'left';
+        adjustment = scrollAreaLeft - inputLeft;
+      } else if (inputLeft + calendarWidth > scrollAreaRight) {
+        orientX = 'right';
+        if (scrollAreaRight < inputRight) {
+          adjustment = scrollAreaRight - inputRight;
+        }
+      } else if (getTextDirection(inputField) === 'rtl') {
+        orientX = inputRight - calendarWidth < scrollAreaLeft ? 'left' : 'right';
+      } else {
+        orientX = 'left';
+      }
+    }
+    if (orientX === 'right') {
+      left += inputWidth - calendarWidth;
+    }
+    left += adjustment;
+
+    // determine the vertical orientation and top position
+    if (orientY === 'auto') {
+      if (inputTop - calendarHeight > scrollAreaTop) {
+        orientY = inputBottom + calendarHeight > scrollAreaBottom ? 'top' : 'bottom';
+      } else {
+        orientY = 'bottom';
+      }
+    }
+    if (orientY === 'top') {
+      top -= calendarHeight;
+    } else {
+      top += inputHeight;
+    }
+
+    classList.remove(...Object.values(orientClasses));
+    classList.add(orientClasses[orientX], orientClasses[orientY]);
+
+    style.left = toPx(left);
+    style.top = toPx(top);
+  }
+
+  setViewSwitchLabel(labelText) {
+    this.controls.viewSwitch.textContent = labelText;
+  }
+
+  setPrevBtnDisabled(disabled) {
+    this.controls.prevBtn.disabled = disabled;
+  }
+
+  setNextBtnDisabled(disabled) {
+    this.controls.nextBtn.disabled = disabled;
+  }
+
+  changeView(viewId) {
+    const oldView = this.currentView;
+    const newView =  this.views[viewId];
+    if (newView.id !== oldView.id) {
+      this.currentView = newView;
+      this._renderMethod = 'render';
+      triggerDatepickerEvent(this.datepicker, 'changeView');
+      this.main.replaceChild(newView.element, oldView.element);
+    }
+    return this;
+  }
+
+  // Change the focused date (view date)
+  changeFocus(newViewDate) {
+    this._renderMethod = setViewDate(this, newViewDate) ? 'render' : 'refreshFocus';
+    this.views.forEach((view) => {
+      view.updateFocus();
+    });
+    return this;
+  }
+
+  // Apply the change of the selected dates
+  update() {
+    const newViewDate = computeResetViewDate(this.datepicker);
+    this._renderMethod = setViewDate(this, newViewDate) ? 'render' : 'refresh';
+    this.views.forEach((view) => {
+      view.updateFocus();
+      view.updateSelection();
+    });
+    return this;
+  }
+
+  // Refresh the picker UI
+  render(quickRender = true) {
+    const renderMethod = (quickRender && this._renderMethod) || 'render';
+    delete this._renderMethod;
+
+    this.currentView[renderMethod]();
+  }
+}
+
+// Find the closest date that doesn't meet the condition for unavailable date
+// Returns undefined if no available date is found
+// addFn: function to calculate the next date
+//   - args: time value, amount
+// increase: amount to pass to addFn
+// testFn: function to test the unavailablity of the date
+//   - args: time value; retun: true if unavailable
+function findNextAvailableOne(date, addFn, increase, testFn, min, max) {
+  if (!isInRange(date, min, max)) {
+    return;
+  }
+  if (testFn(date)) {
+    const newDate = addFn(date, increase);
+    return findNextAvailableOne(newDate, addFn, increase, testFn, min, max);
+  }
+  return date;
+}
+
+// direction: -1 (left/up), 1 (right/down)
+// vertical: true for up/down, false for left/right
+function moveByArrowKey(datepicker, ev, direction, vertical) {
+  const picker = datepicker.picker;
+  const currentView = picker.currentView;
+  const step = currentView.step || 1;
+  let viewDate = picker.viewDate;
+  let addFn;
+  let testFn;
+  switch (currentView.id) {
+    case 0:
+      if (vertical) {
+        viewDate = addDays(viewDate, direction * 7);
+      } else if (ev.ctrlKey || ev.metaKey) {
+        viewDate = addYears(viewDate, direction);
+      } else {
+        viewDate = addDays(viewDate, direction);
+      }
+      addFn = addDays;
+      testFn = (date) => currentView.disabled.includes(date);
+      break;
+    case 1:
+      viewDate = addMonths(viewDate, vertical ? direction * 4 : direction);
+      addFn = addMonths;
+      testFn = (date) => {
+        const dt = new Date(date);
+        const {year, disabled} = currentView;
+        return dt.getFullYear() === year && disabled.includes(dt.getMonth());
+      };
+      break;
+    default:
+      viewDate = addYears(viewDate, direction * (vertical ? 4 : 1) * step);
+      addFn = addYears;
+      testFn = date => currentView.disabled.includes(startOfYearPeriod(date, step));
+  }
+  viewDate = findNextAvailableOne(
+    viewDate,
+    addFn,
+    direction < 0 ? -step : step,
+    testFn,
+    currentView.minDate,
+    currentView.maxDate
+  );
+  if (viewDate !== undefined) {
+    picker.changeFocus(viewDate).render();
+  }
+}
+
+function onKeydown(datepicker, ev) {
+  const key = ev.key;
+  if (key === 'Tab') {
+    unfocus(datepicker);
+    return;
+  }
+
+  const picker = datepicker.picker;
+  const {id, isMinView} = picker.currentView;
+  if (!picker.active) {
+    if (key === 'ArrowDown') {
+      picker.show();
+    } else {
+      if (key === 'Enter') {
+        datepicker.update();
+      } else if (key === 'Escape') {
+        picker.show();
+      }
+      return;
+    }
+  } else if (datepicker.editMode) {
+    if (key === 'Enter') {
+      datepicker.exitEditMode({update: true, autohide: datepicker.config.autohide});
+    } else if (key === 'Escape') {
+      picker.hide();
+    }
+    return;
+  } else {
+    if (key === 'ArrowLeft') {
+      if (ev.ctrlKey || ev.metaKey) {
+        goToPrevOrNext(datepicker, -1);
+      } else if (ev.shiftKey) {
+        datepicker.enterEditMode();
+        return;
+      } else {
+        moveByArrowKey(datepicker, ev, -1, false);
+      }
+    } else if (key === 'ArrowRight') {
+      if (ev.ctrlKey || ev.metaKey) {
+        goToPrevOrNext(datepicker, 1);
+      } else if (ev.shiftKey) {
+        datepicker.enterEditMode();
+        return;
+      } else {
+        moveByArrowKey(datepicker, ev, 1, false);
+      }
+    } else if (key === 'ArrowUp') {
+      if (ev.ctrlKey || ev.metaKey) {
+        switchView(datepicker);
+      } else if (ev.shiftKey) {
+        datepicker.enterEditMode();
+        return;
+      } else {
+        moveByArrowKey(datepicker, ev, -1, true);
+      }
+    } else if (key === 'ArrowDown') {
+      if (ev.shiftKey && !ev.ctrlKey && !ev.metaKey) {
+        datepicker.enterEditMode();
+        return;
+      }
+      moveByArrowKey(datepicker, ev, 1, true);
+    } else if (key === 'Enter') {
+      if (isMinView) {
+        datepicker.setDate(picker.viewDate);
+        return;
+      }
+      picker.changeView(id - 1).render();
+    } else {
+      if (key === 'Escape') {
+        picker.hide();
+      } else if (
+        key === 'Backspace'
+        || key === 'Delete'
+        || (key.length === 1 && !ev.ctrlKey && !ev.metaKey)
+      ) {
+        datepicker.enterEditMode();
+      }
+      return;
+    }
+  }
+  ev.preventDefault();
+}
+
+function onFocus(datepicker) {
+  if (datepicker.config.showOnFocus && !datepicker._showing) {
+    datepicker.show();
+  }
+}
+
+// for the prevention for entering edit mode while getting focus on click
+function onMousedown(datepicker, ev) {
+  const el = ev.target;
+  if (datepicker.picker.active || datepicker.config.showOnClick) {
+    el._active = isActiveElement(el);
+    el._clicking = setTimeout(() => {
+      delete el._active;
+      delete el._clicking;
+    }, 2000);
+  }
+}
+
+function onClickInput(datepicker, ev) {
+  const el = ev.target;
+  if (!el._clicking) {
+    return;
+  }
+  clearTimeout(el._clicking);
+  delete el._clicking;
+
+  if (el._active) {
+    datepicker.enterEditMode();
+  }
+  delete el._active;
+
+  if (datepicker.config.showOnClick) {
+    datepicker.show();
+  }
+}
+
+function onPaste(datepicker, ev) {
+  if (ev.clipboardData.types.includes('text/plain')) {
+    datepicker.enterEditMode();
+  }
+}
+
+// for the `document` to delegate the events from outside the picker/input field
+function onClickOutside(datepicker, ev) {
+  const {element, picker} = datepicker;
+  // check both picker's and input's activeness to make updateOnBlur work in
+  // the cases where...
+  // - picker is hidden by ESC key press → input stays focused
+  // - input is unfocused by closing mobile keyboard → piker is kept shown
+  if (!picker.active && !isActiveElement(element)) {
+    return;
+  }
+  const pickerElem = picker.element;
+  if (findElementInEventPath(ev, el => el === element || el === pickerElem)) {
+    return;
+  }
+  unfocus(datepicker);
+}
+
+function stringifyDates(dates, config) {
+  return dates
+    .map(dt => formatDate(dt, config.format, config.locale))
+    .join(config.dateDelimiter);
+}
+
+// parse input dates and create an array of time values for selection
+// returns undefined if there are no valid dates in inputDates
+// when origDates (current selection) is passed, the function works to mix
+// the input dates into the current selection
+function processInputDates(datepicker, inputDates, clear = false) {
+  // const {config, dates: origDates, rangepicker} = datepicker;
+  const {config, dates: origDates, rangeSideIndex} = datepicker;
+  if (inputDates.length === 0) {
+    // empty input is considered valid unless origiDates is passed
+    return clear ? [] : undefined;
+  }
+
+  // const rangeEnd = rangepicker && datepicker === rangepicker.datepickers[1];
+  let newDates = inputDates.reduce((dates, dt) => {
+    let date = parseDate(dt, config.format, config.locale);
+    if (date === undefined) {
+      return dates;
+    }
+    // adjust to 1st of the month/Jan 1st of the year
+    // or to the last day of the monh/Dec 31st of the year if the datepicker
+    // is the range-end picker of a rangepicker
+    date = regularizeDate(date, config.pickLevel, rangeSideIndex);
+    if (
+      isInRange(date, config.minDate, config.maxDate)
+      && !dates.includes(date)
+      && !config.datesDisabled.includes(date)
+      && (config.pickLevel > 0 || !config.daysOfWeekDisabled.includes(new Date(date).getDay()))
+    ) {
+      dates.push(date);
+    }
+    return dates;
+  }, []);
+  if (newDates.length === 0) {
+    return;
+  }
+  if (config.multidate && !clear) {
+    // get the synmetric difference between origDates and newDates
+    newDates = newDates.reduce((dates, date) => {
+      if (!origDates.includes(date)) {
+        dates.push(date);
+      }
+      return dates;
+    }, origDates.filter(date => !newDates.includes(date)));
+  }
+  // do length check always because user can input multiple dates regardless of the mode
+  return config.maxNumberOfDates && newDates.length > config.maxNumberOfDates
+    ? newDates.slice(config.maxNumberOfDates * -1)
+    : newDates;
+}
+
+// refresh the UI elements
+// modes: 1: input only, 2, picker only, 3 both
+function refreshUI(datepicker, mode = 3, quickRender = true) {
+  const {config, picker, inputField} = datepicker;
+  if (mode & 2) {
+    const newView = picker.active ? config.pickLevel : config.startView;
+    picker.update().changeView(newView).render(quickRender);
+  }
+  if (mode & 1 && inputField) {
+    inputField.value = stringifyDates(datepicker.dates, config);
+  }
+}
+
+function setDate(datepicker, inputDates, options) {
+  let {clear, render, autohide, revert} = options;
+  if (render === undefined) {
+    render = true;
+  }
+  if (!render) {
+    autohide = false;
+  } else if (autohide === undefined) {
+    autohide = datepicker.config.autohide;
+  }
+
+  const newDates = processInputDates(datepicker, inputDates, clear);
+  if (!newDates && !revert) {
+    return;
+  }
+  if (newDates && newDates.toString() !== datepicker.dates.toString()) {
+    datepicker.dates = newDates;
+    refreshUI(datepicker, render ? 3 : 1);
+    triggerDatepickerEvent(datepicker, 'changeDate');
+  } else {
+    refreshUI(datepicker, 1);
+  }
+
+  if (autohide) {
+    datepicker.hide();
+  }
+}
+
+/**
+ * Class representing a date picker
+ */
+class Datepicker {
+  /**
+   * Create a date picker
+   * @param  {Element} element - element to bind a date picker
+   * @param  {Object} [options] - config options
+   * @param  {DateRangePicker} [rangepicker] - DateRangePicker instance the
+   * date picker belongs to. Use this only when creating date picker as a part
+   * of date range picker
+   */
+  constructor(element, options = {}, rangepicker = undefined) {
+    element.datepicker = this;
+    this.element = element;
+
+    const config = this.config = Object.assign({
+      buttonClass: (options.buttonClass && String(options.buttonClass)) || 'button',
+      container: null,
+      defaultViewDate: today(),
+      maxDate: undefined,
+      minDate: undefined,
+    }, processOptions(defaultOptions, this));
+    // configure by type
+    const inline = this.inline = element.tagName !== 'INPUT';
+    let inputField;
+    if (inline) {
+      config.container = element;
+    } else {
+      if (options.container) {
+        // omit string type check because it doesn't guarantee to avoid errors
+        // (invalid selector string causes abend with sytax error)
+        config.container = options.container instanceof HTMLElement
+          ? options.container
+          : document.querySelector(options.container);
+      }
+      inputField = this.inputField = element;
+      inputField.classList.add('datepicker-input');
+    }
+    if (rangepicker) {
+      // check validiry
+      const index = rangepicker.inputs.indexOf(inputField);
+      const datepickers = rangepicker.datepickers;
+      if (index < 0 || index > 1 || !Array.isArray(datepickers)) {
+        throw Error('Invalid rangepicker object.');
+      }
+      // attach itaelf to the rangepicker here so that processInputDates() can
+      // determine if this is the range-end picker of the rangepicker while
+      // setting inital values when pickLevel > 0
+      datepickers[index] = this;
+      // add getter for rangepicker
+      Object.defineProperty(this, 'rangepicker', {
+        get() {
+          return rangepicker;
+        },
+      });
+      Object.defineProperty(this, 'rangeSideIndex', {
+        get() {
+          return index;
+        },
+      });
+    }
+
+    // set up config
+    this._options = options;
+    Object.assign(config, processOptions(options, this));
+
+    // set initial dates
+    let initialDates;
+    if (inline) {
+      initialDates = stringToArray(element.dataset.date, config.dateDelimiter);
+      delete element.dataset.date;
+    } else {
+      initialDates = stringToArray(inputField.value, config.dateDelimiter);
+    }
+    this.dates = [];
+    // process initial value
+    const inputDateValues = processInputDates(this, initialDates);
+    if (inputDateValues && inputDateValues.length > 0) {
+      this.dates = inputDateValues;
+    }
+    if (inputField) {
+      inputField.value = stringifyDates(this.dates, config);
+    }
+
+    const picker = this.picker = new Picker(this);
+
+    if (inline) {
+      this.show();
+    } else {
+      // set up event listeners in other modes
+      const onMousedownDocument = onClickOutside.bind(null, this);
+      const listeners = [
+        [inputField, 'keydown', onKeydown.bind(null, this)],
+        [inputField, 'focus', onFocus.bind(null, this)],
+        [inputField, 'mousedown', onMousedown.bind(null, this)],
+        [inputField, 'click', onClickInput.bind(null, this)],
+        [inputField, 'paste', onPaste.bind(null, this)],
+        [document, 'mousedown', onMousedownDocument],
+        [document, 'touchstart', onMousedownDocument],
+        [window, 'resize', picker.place.bind(picker)]
+      ];
+      registerListeners(this, listeners);
+    }
+  }
+
+  /**
+   * Format Date object or time value in given format and language
+   * @param  {Date|Number} date - date or time value to format
+   * @param  {String|Object} format - format string or object that contains
+   * toDisplay() custom formatter, whose signature is
+   * - args:
+   *   - date: {Date} - Date instance of the date passed to the method
+   *   - format: {Object} - the format object passed to the method
+   *   - locale: {Object} - locale for the language specified by `lang`
+   * - return:
+   *     {String} formatted date
+   * @param  {String} [lang=en] - language code for the locale to use
+   * @return {String} formatted date
+   */
+  static formatDate(date, format, lang) {
+    return formatDate(date, format, lang && locales[lang] || locales.en);
+  }
+
+  /**
+   * Parse date string
+   * @param  {String|Date|Number} dateStr - date string, Date object or time
+   * value to parse
+   * @param  {String|Object} format - format string or object that contains
+   * toValue() custom parser, whose signature is
+   * - args:
+   *   - dateStr: {String|Date|Number} - the dateStr passed to the method
+   *   - format: {Object} - the format object passed to the method
+   *   - locale: {Object} - locale for the language specified by `lang`
+   * - return:
+   *     {Date|Number} parsed date or its time value
+   * @param  {String} [lang=en] - language code for the locale to use
+   * @return {Number} time value of parsed date
+   */
+  static parseDate(dateStr, format, lang) {
+    return parseDate(dateStr, format, lang && locales[lang] || locales.en);
+  }
+
+  /**
+   * @type {Object} - Installed locales in `[languageCode]: localeObject` format
+   * en`:_English (US)_ is pre-installed.
+   */
+  static get locales() {
+    return locales;
+  }
+
+  /**
+   * @type {Boolean} - Whether the picker element is shown. `true` whne shown
+   */
+  get active() {
+    return !!(this.picker && this.picker.active);
+  }
+
+  /**
+   * @type {HTMLDivElement} - DOM object of picker element
+   */
+  get pickerElement() {
+    return this.picker ? this.picker.element : undefined;
+  }
+
+  /**
+   * Set new values to the config options
+   * @param {Object} options - config options to update
+   */
+  setOptions(options) {
+    const picker = this.picker;
+    const newOptions = processOptions(options, this);
+    Object.assign(this._options, options);
+    Object.assign(this.config, newOptions);
+    picker.setOptions(newOptions);
+
+    refreshUI(this, 3);
+  }
+
+  /**
+   * Show the picker element
+   */
+  show() {
+    if (this.inputField) {
+      if (this.inputField.disabled) {
+        return;
+      }
+      if (!isActiveElement(this.inputField) && !this.config.disableTouchKeyboard) {
+        this._showing = true;
+        this.inputField.focus();
+        delete this._showing;
+      }
+    }
+    this.picker.show();
+  }
+
+  /**
+   * Hide the picker element
+   * Not available on inline picker
+   */
+  hide() {
+    if (this.inline) {
+      return;
+    }
+    this.picker.hide();
+    this.picker.update().changeView(this.config.startView).render();
+  }
+
+  /**
+   * Destroy the Datepicker instance
+   * @return {Detepicker} - the instance destroyed
+   */
+  destroy() {
+    this.hide();
+    unregisterListeners(this);
+    this.picker.detach();
+    if (!this.inline) {
+      this.inputField.classList.remove('datepicker-input');
+    }
+    delete this.element.datepicker;
+    return this;
+  }
+
+  /**
+   * Get the selected date(s)
+   *
+   * The method returns a Date object of selected date by default, and returns
+   * an array of selected dates in multidate mode. If format string is passed,
+   * it returns date string(s) formatted in given format.
+   *
+   * @param  {String} [format] - Format string to stringify the date(s)
+   * @return {Date|String|Date[]|String[]} - selected date(s), or if none is
+   * selected, empty array in multidate mode and untitled in sigledate mode
+   */
+  getDate(format = undefined) {
+    const callback = format
+      ? date => formatDate(date, format, this.config.locale)
+      : date => new Date(date);
+
+    if (this.config.multidate) {
+      return this.dates.map(callback);
+    }
+    if (this.dates.length > 0) {
+      return callback(this.dates[0]);
+    }
+  }
+
+  /**
+   * Set selected date(s)
+   *
+   * In multidate mode, you can pass multiple dates as a series of arguments
+   * or an array. (Since each date is parsed individually, the type of the
+   * dates doesn't have to be the same.)
+   * The given dates are used to toggle the select status of each date. The
+   * number of selected dates is kept from exceeding the length set to
+   * maxNumberOfDates.
+   *
+   * With clear: true option, the method can be used to clear the selection
+   * and to replace the selection instead of toggling in multidate mode.
+   * If the option is passed with no date arguments or an empty dates array,
+   * it works as "clear" (clear the selection then set nothing), and if the
+   * option is passed with new dates to select, it works as "replace" (clear
+   * the selection then set the given dates)
+   *
+   * When render: false option is used, the method omits re-rendering the
+   * picker element. In this case, you need to call refresh() method later in
+   * order for the picker element to reflect the changes. The input field is
+   * refreshed always regardless of this option.
+   *
+   * When invalid (unparsable, repeated, disabled or out-of-range) dates are
+   * passed, the method ignores them and applies only valid ones. In the case
+   * that all the given dates are invalid, which is distinguished from passing
+   * no dates, the method considers it as an error and leaves the selection
+   * untouched. (The input field also remains untouched unless revert: true
+   * option is used.)
+   *
+   * @param {...(Date|Number|String)|Array} [dates] - Date strings, Date
+   * objects, time values or mix of those for new selection
+   * @param {Object} [options] - function options
+   * - clear: {boolean} - Whether to clear the existing selection
+   *     defualt: false
+   * - render: {boolean} - Whether to re-render the picker element
+   *     default: true
+   * - autohide: {boolean} - Whether to hide the picker element after re-render
+   *     Ignored when used with render: false
+   *     default: config.autohide
+   * - revert: {boolean} - Whether to refresh the input field when all the
+   *     passed dates are invalid
+   *     default: false
+   */
+  setDate(...args) {
+    const dates = [...args];
+    const opts = {};
+    const lastArg = lastItemOf(args);
+    if (
+      typeof lastArg === 'object'
+      && !Array.isArray(lastArg)
+      && !(lastArg instanceof Date)
+      && lastArg
+    ) {
+      Object.assign(opts, dates.pop());
+    }
+
+    const inputDates = Array.isArray(dates[0]) ? dates[0] : dates;
+    setDate(this, inputDates, opts);
+  }
+
+  /**
+   * Update the selected date(s) with input field's value
+   * Not available on inline picker
+   *
+   * The input field will be refreshed with properly formatted date string.
+   *
+   * In the case that all the entered dates are invalid (unparsable, repeated,
+   * disabled or out-of-range), whixh is distinguished from empty input field,
+   * the method leaves the input field untouched as well as the selection by
+   * default. If revert: true option is used in this case, the input field is
+   * refreshed with the existing selection.
+   *
+   * @param  {Object} [options] - function options
+   * - autohide: {boolean} - whether to hide the picker element after refresh
+   *     default: false
+   * - revert: {boolean} - Whether to refresh the input field when all the
+   *     passed dates are invalid
+   *     default: false
+   */
+  update(options = undefined) {
+    if (this.inline) {
+      return;
+    }
+
+    const opts = Object.assign(options || {}, {clear: true, render: true});
+    const inputDates = stringToArray(this.inputField.value, this.config.dateDelimiter);
+    setDate(this, inputDates, opts);
+  }
+
+  /**
+   * Refresh the picker element and the associated input field
+   * @param {String} [target] - target item when refreshing one item only
+   * 'picker' or 'input'
+   * @param {Boolean} [forceRender] - whether to re-render the picker element
+   * regardless of its state instead of optimized refresh
+   */
+  refresh(target = undefined, forceRender = false) {
+    if (target && typeof target !== 'string') {
+      forceRender = target;
+      target = undefined;
+    }
+
+    let mode;
+    if (target === 'picker') {
+      mode = 2;
+    } else if (target === 'input') {
+      mode = 1;
+    } else {
+      mode = 3;
+    }
+    refreshUI(this, mode, !forceRender);
+  }
+
+  /**
+   * Enter edit mode
+   * Not available on inline picker or when the picker element is hidden
+   */
+  enterEditMode() {
+    if (this.inline || !this.picker.active || this.editMode) {
+      return;
+    }
+    this.editMode = true;
+    this.inputField.classList.add('in-edit');
+  }
+
+  /**
+   * Exit from edit mode
+   * Not available on inline picker
+   * @param  {Object} [options] - function options
+   * - update: {boolean} - whether to call update() after exiting
+   *     If false, input field is revert to the existing selection
+   *     default: false
+   */
+  exitEditMode(options = undefined) {
+    if (this.inline || !this.editMode) {
+      return;
+    }
+    const opts = Object.assign({update: false}, options);
+    delete this.editMode;
+    this.inputField.classList.remove('in-edit');
+    if (opts.update) {
+      this.update(opts);
+    }
+  }
+}
+
+const verdocsFieldDateCss = ".datepicker{display:none}.datepicker.active{display:block}.datepicker-dropdown{position:absolute;top:0;left:0;z-index:20;padding-top:4px}.datepicker-dropdown.datepicker-orient-top{padding-top:0;padding-bottom:4px}.datepicker-picker{display:inline-block;border-radius:4px;background-color:white}.datepicker-dropdown .datepicker-picker{-webkit-box-shadow:0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);box-shadow:0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1)}.datepicker-picker span{display:block;-ms-flex:1;flex:1;border:0;border-radius:4px;cursor:default;text-align:center;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.datepicker-main{padding:2px}.datepicker-footer{-webkit-box-shadow:inset 0 1px 1px rgba(10, 10, 10, 0.1);box-shadow:inset 0 1px 1px rgba(10, 10, 10, 0.1);background-color:whitesmoke}.datepicker-grid,.datepicker-view .days-of-week,.datepicker-view,.datepicker-controls{display:-ms-flexbox;display:flex}.datepicker-grid{-ms-flex-wrap:wrap;flex-wrap:wrap}.datepicker-view .days .datepicker-cell,.datepicker-view .dow{-ms-flex-preferred-size:14.2857142857%;flex-basis:14.2857142857%}.datepicker-view.datepicker-grid .datepicker-cell{-ms-flex-preferred-size:25%;flex-basis:25%}.datepicker-cell,.datepicker-view .week{height:2.25rem;line-height:2.25rem}.datepicker-title{-webkit-box-shadow:inset 0 -1px 1px rgba(10, 10, 10, 0.1);box-shadow:inset 0 -1px 1px rgba(10, 10, 10, 0.1);background-color:whitesmoke;padding:0.375rem 0.75rem;text-align:center;font-weight:700}.datepicker-header .datepicker-controls{padding:2px 2px 0}.datepicker-controls .button{display:-ms-inline-flexbox;display:inline-flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;margin:0;border:1px solid #dbdbdb;border-radius:4px;-webkit-box-shadow:none;box-shadow:none;background-color:white;cursor:pointer;padding:calc(0.375em - 1px) 0.75em;height:2.25em;vertical-align:top;text-align:center;line-height:1.5;white-space:nowrap;color:#363636;font-size:1rem}.datepicker-controls .button:focus,.datepicker-controls .button:active{outline:none}.datepicker-controls .button:hover{border-color:#b5b5b5;color:#363636}.datepicker-controls .button:focus{border-color:#3273dc;color:#363636}.datepicker-controls .button:focus:not(:active){-webkit-box-shadow:0 0 0 0.125em rgba(50, 115, 220, 0.25);box-shadow:0 0 0 0.125em rgba(50, 115, 220, 0.25)}.datepicker-controls .button:active{border-color:#4a4a4a;color:#363636}.datepicker-controls .button[disabled]{cursor:not-allowed}.datepicker-header .datepicker-controls .button{border-color:transparent;font-weight:bold}.datepicker-header .datepicker-controls .button:hover{background-color:#f9f9f9}.datepicker-header .datepicker-controls .button:focus:not(:active){-webkit-box-shadow:0 0 0 0.125em rgba(255, 255, 255, 0.25);box-shadow:0 0 0 0.125em rgba(255, 255, 255, 0.25)}.datepicker-header .datepicker-controls .button:active{background-color:#f2f2f2}.datepicker-header .datepicker-controls .button[disabled]{-webkit-box-shadow:none;box-shadow:none}.datepicker-footer .datepicker-controls .button{margin:calc(0.375rem - 1px) 0.375rem;border-radius:2px;width:100%;font-size:0.75rem}.datepicker-controls .view-switch{-ms-flex:auto;flex:auto}.datepicker-controls .prev-btn,.datepicker-controls .next-btn{padding-right:0.375rem;padding-left:0.375rem;width:2.25rem}.datepicker-controls .prev-btn.disabled,.datepicker-controls .next-btn.disabled{visibility:hidden}.datepicker-view .dow{height:1.5rem;line-height:1.5rem;font-size:0.875rem;font-weight:700}.datepicker-view .week{width:2.25rem;color:#b5b5b5;font-size:0.75rem}@media (max-width: 22.5rem){.datepicker-view .week{width:1.96875rem}}.datepicker-grid{width:15.75rem}@media (max-width: 22.5rem){.calendar-weeks+.days .datepicker-grid{width:13.78125rem}}.datepicker-cell:not(.disabled):hover{background-color:#f9f9f9;cursor:pointer}.datepicker-cell.focused:not(.selected){background-color:#e8e8e8}.datepicker-cell.selected,.datepicker-cell.selected:hover{background-color:#3273dc;color:#fff;font-weight:600}.datepicker-cell.disabled{color:#dbdbdb}.datepicker-cell.prev:not(.disabled),.datepicker-cell.next:not(.disabled){color:#7a7a7a}.datepicker-cell.prev.selected,.datepicker-cell.next.selected{color:#e6e6e6}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today){border-radius:0;background-color:whitesmoke}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(.disabled):hover{background-color:#eeeeee}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused{background-color:#e8e8e8}.datepicker-cell.today:not(.selected){background-color:#00d1b2}.datepicker-cell.today:not(.selected):not(.disabled){color:#fff}.datepicker-cell.today.focused:not(.selected){background-color:#00c4a7}.datepicker-cell.range-end:not(.selected),.datepicker-cell.range-start:not(.selected){background-color:#b5b5b5;color:#fff}.datepicker-cell.range-end.focused:not(.selected),.datepicker-cell.range-start.focused:not(.selected){background-color:#afafaf}.datepicker-cell.range-start{border-radius:4px 0 0 4px}.datepicker-cell.range-end{border-radius:0 4px 4px 0}.datepicker-cell.range{border-radius:0;background-color:#dbdbdb}.datepicker-cell.range:not(.disabled):not(.focused):not(.today):hover{background-color:#d5d5d5}.datepicker-cell.range.disabled{color:#c2c2c2}.datepicker-cell.range.focused{background-color:#cfcfcf}.datepicker-view.datepicker-grid .datepicker-cell{height:4.5rem;line-height:4.5rem}.datepicker-input.in-edit{border-color:#2366d1}.datepicker-input.in-edit:focus,.datepicker-input.in-edit:active{-webkit-box-shadow:0 0 0.25em 0.25em rgba(35, 102, 209, 0.2);box-shadow:0 0 0.25em 0.25em rgba(35, 102, 209, 0.2)}verdocs-field-date{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:64px;height:15px;display:block;font-size:11px;position:relative;letter-spacing:0.3px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-date input{-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px;border:1px solid #ccc;-webkit-appearance:none;-moz-appearance:none;appearance:none}verdocs-field-date input.hide{display:none}verdocs-field-date.required input{border:1px solid var(--verdocs-required-color)}verdocs-field-date.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
+
+const VerdocsFieldDate = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.fieldFocus = index.createEvent(this, "fieldFocus", 7);
+    this.fieldBlur = index.createEvent(this, "fieldBlur", 7);
+    this.fieldChange = index.createEvent(this, "fieldChange", 7);
+    this.fieldInput = index.createEvent(this, "fieldInput", 7);
+    /**
+     * A placeholder to assist the user in completing the field.
+     */
+    this.placeholder = 'Select Date';
+    /**
+     * Sets the tabIndex of the input element.
+     */
+    this.order = 1;
+    /**
+     * Sets the value of the input element.
+     */
+    this.value = '';
+    /**
+     * If true, the field will be marked required.
+     */
+    this.required = false;
+    /**
+     * Sets the disabled attribute of the input element.
+     */
+    this.disabled = false;
+    this.focused = false;
+  }
+  async focusField() {
+    this.focused = true;
+    this.el.focus();
+    this.fieldFocus.emit(true);
+  }
+  componentDidLoad() {
+    new Datepicker(this.el, {
+      autohide: true,
+      todayHighlight: true,
+    });
+    this.el.addEventListener('changeDate', (e) => {
+      console.log('changeDate', e.detail.date.toISOString());
+    });
+  }
+  handleBlur() {
+    this.focused = false;
+    this.fieldBlur.emit(true);
+  }
+  handleFocus() {
+    this.focused = true;
+    this.fieldFocus.emit(true);
+  }
+  handleChange(e) {
+    this.fieldChange.emit(e.target.value);
+  }
+  handleInput(e) {
+    this.fieldInput.emit(e.target.value);
+  }
+  // NOTE: We don't use a "date" field here because browsers vary widely in their formatting of it.
+  render() {
+    return (index.h(index.Host, { class: { focused: this.focused, required: this.required, storybook: !!(window === null || window === void 0 ? void 0 : window['STORYBOOK_ENV']) } }, index.h("input", { type: "text", value: "", placeholder: this.placeholder, required: this.required, ref: el => (this.el = el), onBlur: () => this.handleBlur(), onFocus: () => this.handleFocus(), onChange: e => this.handleChange(e), onInput: e => this.handleInput(e) })));
+  }
+};
+VerdocsFieldDate.style = verdocsFieldDateCss;
+
+const verdocsFieldDropdownCss = "verdocs-field-dropdown{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:85px;height:20px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-dropdown select{position:absolute;background:linear-gradient(55deg, transparent 50%, #333 50%), linear-gradient(125deg, #333 50%, transparent 50%), linear-gradient(to right, transparent, transparent);background-position:calc(100% - 7px) 4px, calc(100% - 3px) 4px, 100% 0;background-size:5px 5px, 5px 5px, 2.5em 2.5em;background-repeat:no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;font-size:11px;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-dropdown select:focus{outline:none}verdocs-field-dropdown select.hide{display:none}verdocs-field-dropdown.required select{border:1px solid var(--verdocs-required-color)}verdocs-field-dropdown.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
+
+const VerdocsFieldDropdown = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.fieldFocus = index.createEvent(this, "fieldFocus", 7);
+    this.fieldBlur = index.createEvent(this, "fieldBlur", 7);
+    this.fieldChange = index.createEvent(this, "fieldChange", 7);
+    /**
+     * The optoins to choose from.
+     */
+    this.options = [];
+    /**
+     * If true, the field will be marked required.
+     */
+    this.required = false;
+    /**
+     * Sets the tabIndex of the input element.
+     */
+    this.order = 1;
+    /**
+     * Sets the disabled attribute of the input element.
+     */
+    this.disabled = false;
+    /**
+     * The currently selected value.
+     */
+    this.value = '';
+    this.focused = false;
+  }
+  async focusField() {
+    this.focused = true;
+    this.el.focus();
+    this.fieldFocus.emit(true);
+  }
+  handleBlur() {
+    this.focused = false;
+    this.fieldBlur.emit(true);
+  }
+  handleFocus() {
+    this.focused = true;
+    this.fieldFocus.emit(true);
+  }
+  handleChange(e) {
+    this.fieldChange.emit(e.target.value);
+  }
+  render() {
+    return (index.h(index.Host, { class: { focused: this.focused, required: this.required } }, index.h("select", { tabIndex: this.order, disabled: this.disabled, ref: el => (this.el = el), onChange: e => this.handleChange(e), onBlur: () => this.handleBlur(), onFocus: () => this.handleFocus() }, index.h("option", { value: "" }, "Select..."), this.options.map(option => (index.h("option", { value: option.id, selected: option.value === this.value }, option.value))))));
+  }
+};
+VerdocsFieldDropdown.style = verdocsFieldDropdownCss;
+
+const verdocsFieldInitialCss = "verdocs-field-initial{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:83px;height:36px;display:block;font-size:11px;letter-spacing:0.3px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-initial img{display:block;max-width:100%;max-height:100%}verdocs-field-initial button{-webkit-box-sizing:border-box;box-sizing:border-box;border:none;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px}verdocs-field-initial button.hide{display:none}verdocs-field-initial.required{border:1px solid var(--verdocs-required-color)}verdocs-field-initial.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
+
+const VerdocsFieldInitial = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.adopt = index.createEvent(this, "adopt", 7);
+    this.cancel = index.createEvent(this, "cancel", 7);
+    /**
+     * Whether the field is required.
+     */
+    this.required = false;
+    /**
+     * The user's full name.
+     */
+    this.fullName = '';
+    /**
+     * The base64 signature value.
+     */
+    this.value = '';
+  }
+  async focusField() {
+    this.handleShow();
+  }
+  handleShow() {
+    this.dialog = document.createElement('verdocs-initial-dialog');
+    this.dialog.open = true;
+    this.dialog.fullName = this.fullName;
+    this.dialog.addEventListener('cancel', () => {
+      var _a;
+      console.log('cancel');
+      (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.remove();
+    });
+    document.addEventListener('adopt', e => {
+      var _a;
+      console.log('adopt', e);
+      (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.remove();
+    });
+    document.body.append(this.dialog);
+  }
+  render() {
+    return (index.h(index.Host, { class: { required: this.required } }, this.value !== '' ? (index.h("img", { src: this.value, alt: "Initials" })) : (index.h("button", { class: {}, onClick: () => this.handleShow() }, "Initial"))));
+  }
+};
+VerdocsFieldInitial.style = verdocsFieldInitialCss;
+
+const verdocsFieldPaymentCss = "verdocs-field-payment{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:24px;height:24px;display:block;font-size:11px;position:relative;border:1px solid #cfa;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-payment button,verdocs-field-payment div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-field-payment button{color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px}verdocs-field-payment button.hide{display:none}verdocs-field-payment input{float:left;font-family:Arial, sans-serif}verdocs-field-payment select{position:absolute;font-family:Arial, sans-serif;background:linear-gradient(55deg, transparent 50%, #333 50%), linear-gradient(125deg, #333 50%, transparent 50%), linear-gradient(to right, transparent, transparent);background-position:calc(100% - 7px) 4px, calc(100% - 3px) 4px, 100% 0;background-size:5px 5px, 5px 5px, 2.5em 2.5em;background-repeat:no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none}verdocs-field-payment .frame{width:100%;height:100%;background-size:contain;text-align:left}verdocs-field-payment .frame img{position:absolute;height:auto;width:100%}verdocs-field-payment.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
+
+const VerdocsFieldPayment = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.signatureComplete = index.createEvent(this, "signatureComplete", 7);
+    this.initialComplete = index.createEvent(this, "initialComplete", 7);
+    this.focused = false;
+    this.signed = false;
+    this.signatureUrl = '';
+    this._fields = [];
+    // envelopeFieldsFormGroup: FormGroup;
+    this.signatureFile = null;
+    this.initialFile = null;
+    this.focusOrderNumber = -1;
+    this.focusFieldName = '';
+    this.activeElement = null;
+    this.showError = {
+      pageNum: -1,
+      fieldIndex: -1,
+      type: null,
+    };
+    this.dialogOpened = false;
+    this.closeAllErrors = false;
+    this.fieldsMap = {};
+    this.fieldsForCurrentSigner = [];
+    this.fontSize = 11;
+    this.averageFontWidth = 5;
+    this.requiredFields = [];
+  }
+  componentWillLoad() {
+    // Load validators
+    // Load fields
+    // Get role names
+    console.log('sign field', this.field);
+    if (this.recipients && this.recipients.length > 0) {
+      const preparer = this.recipients.find(r => r.type === 'preparer');
+      console.log('Found preparer', preparer);
+      if (preparer) {
+        this.preparedMessage = `Prepared by ${preparer['full_name']}`;
+      }
+    }
+  }
+  // [tabIndex]="field.role !== roleName ? -1 : 1"
+  // [ngStyle]="field.element_style"
+  // [value]="field.value"
+  // (click)="initiateSign(field)"
+  // (blur)="validateChanges(field)"
+  // [disabled]="field.role!==roleName"
+  // [id]="field.key"
+  // <button _ngcontent-app-root-c342="" class="envelope__field" tabindex="1" ng-reflect-ng-style="[object Object]"
+  // ng-reflect-ng-class="[object Object]" value="" id="signatureP5-1"
+  // style="height: 100%; width: 100%; background: none; font-size: 11px; border: 1px solid rgb(204, 0, 0);"> Signature </button>
+  //     bottom: 229.333
+  // px
+  // ;
+  //     left: 169.333
+  // px
+  // ;
+  //     height: 41
+  // px
+  // ;
+  //     width: 82
+  // px
+  // ;
+  //     background-color: rgba(156, 39, 176, 0.4);
+  //     transform: scale(1.33333, 1.33333);
+  // }
+  // <style>
+  // .envelope__item[_ngcontent-app-root-c342] {
+  //     position: absolute;
+  //     transform-origin: bottom left;
+  //     opacity: 1;
+  render() {
+    return (index.h(index.Host, { class: { focused: this.focused, storybook: !!(window === null || window === void 0 ? void 0 : window['STORYBOOK_ENV']) } }, index.h("button", { class: { hide: this.signed } }, "Payment"), this.signed ? index.h("div", { class: "frame" }) : index.h("div", { style: { display: 'none' } }), index.h("img", { width: "100%", height: "100%", src: this.signatureUrl })));
+  }
+};
+VerdocsFieldPayment.style = verdocsFieldPaymentCss;
+
+const verdocsFieldRadioButtonCss = "verdocs-field-radio-button{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:14px;height:14px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border-radius:100%}verdocs-field-radio-button input[type=radio]{position:absolute;opacity:0}verdocs-field-radio-button input[type=radio]+label:before{content:\"\";background:#f4f4f4;border-radius:100%;border:1px solid rgba(0, 0, 0, 0.2);display:inline-block;width:13px;height:13px;position:relative;top:2px;margin-right:2px;vertical-align:top;cursor:pointer;text-align:center;-webkit-transition:all 250ms ease;transition:all 250ms ease}verdocs-field-radio-button input[type=radio]:checked+label:before{background-color:#55bc81;-webkit-box-shadow:inset 0 0 0 2px #f4f4f4;box-shadow:inset 0 0 0 2px #f4f4f4}verdocs-field-radio-button input[type=radio]:focus+label:before{outline:none;border-color:#55bc81}verdocs-field-radio-button input[type=radio]:disabled+label:before{-webkit-box-shadow:inset 0 0 0 4px #f4f4f4;box-shadow:inset 0 0 0 4px #f4f4f4;border-color:#b4b4b4;background:#b4b4b4}verdocs-field-radio-button input[type=radio]+label:empty:before{margin-right:0}verdocs-field-radio-button.required input[type=radio]+label:before{border:1px solid var(--verdocs-required-color)}verdocs-field-radio-button.hide{display:none}verdocs-field-radio-button.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
+
+const VerdocsFieldRadioButton = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.fieldChange = index.createEvent(this, "fieldChange", 7);
+    /**
+     * Sets the tabIndex of the input element.
+     */
+    this.order = 1;
+    /**
+     * Sets the value of the input element.
+     */
+    this.checked = false;
+    /**
+     * Sets the value of the input element.
+     */
+    this.value = '';
+    /**
+     * Sets the name of the input element.
+     */
+    this.name = '';
+    /**
+     * If true, the field will be marked required.
+     */
+    this.required = false;
+    /**
+     * Sets the disabled attribute of the input element.
+     */
+    this.disabled = false;
+  }
+  handleChange(e) {
+    console.log('changed', e);
+    this.fieldChange.emit(e.target.checked);
+  }
+  render() {
+    return (index.h(index.Host, { class: { required: this.required, storybook: !!(window === null || window === void 0 ? void 0 : window['STORYBOOK_ENV']) } }, index.h("input", { type: "radio", tabIndex: this.order, value: this.value, name: this.name, id: `${this.name}=${this.value}`, checked: this.checked, disabled: this.disabled, required: this.required, onChange: e => this.handleChange(e) }), index.h("label", { htmlFor: `${this.name}=${this.value}` })));
+  }
+};
+VerdocsFieldRadioButton.style = verdocsFieldRadioButtonCss;
+
+const verdocsFieldSignatureCss = "verdocs-field-signature{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:83px;height:36px;display:block;font-size:11px;position:relative;letter-spacing:0.3px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-signature img{display:block;max-width:100%;max-height:100%}verdocs-field-signature button{-webkit-box-sizing:border-box;box-sizing:border-box;border:none;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px}verdocs-field-signature button.hide{display:none}verdocs-field-signature.required{border:1px solid var(--verdocs-required-color)}verdocs-field-signature.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
+
+const VerdocsFieldSignature = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.adopt = index.createEvent(this, "adopt", 7);
+    this.cancel = index.createEvent(this, "cancel", 7);
+    /**
+     * Whether the field is required.
+     */
+    this.required = false;
+    /**
+     * The user's full name.
+     */
+    this.fullName = '';
+    /**
+     * The base64 signature value.
+     */
+    this.value = '';
+  }
+  async focusField() {
+    this.handleShow();
+  }
+  handleShow() {
+    this.dialog = document.createElement('verdocs-signature-dialog');
+    this.dialog.open = true;
+    this.dialog.fullName = this.fullName;
+    this.dialog.addEventListener('cancel', () => {
+      var _a;
+      console.log('cancel');
+      (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.remove();
+    });
+    document.addEventListener('adopt', e => {
+      var _a;
+      console.log('adopt', e);
+      (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.remove();
+    });
+    document.body.append(this.dialog);
+  }
+  render() {
+    return (index.h(index.Host, { class: { required: this.required } }, this.value !== '' ? (index.h("img", { src: this.value, alt: "Signature" })) : (index.h("button", { class: {}, onClick: () => this.handleShow() }, "Signature"))));
+  }
+};
+VerdocsFieldSignature.style = verdocsFieldSignatureCss;
+
+const verdocsFieldTextareaCss = "verdocs-field-textarea{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:150px;height:15px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-textarea textarea{-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-textarea textarea.hide{display:none}verdocs-field-textarea.required{border:1px solid var(--verdocs-required-color)}verdocs-field-textarea.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
+
+const VerdocsFieldTextarea = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.fieldFocus = index.createEvent(this, "fieldFocus", 7);
+    this.fieldBlur = index.createEvent(this, "fieldBlur", 7);
+    this.fieldChange = index.createEvent(this, "fieldChange", 7);
+    this.fieldInput = index.createEvent(this, "fieldInput", 7);
+    /**
+     * A placeholder to assist the user in completing the field.
+     */
+    this.placeholder = '';
+    /**
+     * Sets the tabIndex of the input element.
+     */
+    this.order = 1;
+    /**
+     * Sets the value of the input element.
+     */
+    this.value = '';
+    /**
+     * If true, the field will be marked required.
+     */
+    this.required = false;
+    /**
+     * Sets the disabled attribute of the input element.
+     */
+    this.disabled = false;
+    this.focused = false;
+  }
+  async focusField() {
+    this.focused = true;
+    this.el.focus();
+    this.fieldFocus.emit(true);
+  }
+  handleBlur() {
+    this.focused = false;
+    this.fieldBlur.emit(true);
+  }
+  handleFocus() {
+    this.focused = true;
+    this.fieldFocus.emit(true);
+  }
+  handleChange(e) {
+    this.fieldChange.emit(e.target.value);
+  }
+  handleInput(e) {
+    this.fieldInput.emit(e.target.value);
+  }
+  render() {
+    return (index.h(index.Host, { class: { focused: this.focused, required: this.required, storybook: !!(window === null || window === void 0 ? void 0 : window['STORYBOOK_ENV']) } }, index.h("textarea", { placeholder: this.placeholder || '', tabIndex: this.order, value: this.value, disabled: this.disabled, required: this.required, ref: el => (this.el = el), onBlur: () => this.handleBlur(), onFocus: () => this.handleFocus(), onChange: e => this.handleChange(e), onInput: e => this.handleInput(e) })));
+  }
+};
+VerdocsFieldTextarea.style = verdocsFieldTextareaCss;
+
+const verdocsFieldTextboxCss = "verdocs-field-textbox{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:150px;height:15px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-textbox input{-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-textbox input.hide{display:none}verdocs-field-textbox.required{border:1px solid var(--verdocs-required-color)}verdocs-field-textbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
+
+const VerdocsFieldTextbox = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.fieldFocus = index.createEvent(this, "fieldFocus", 7);
+    this.fieldBlur = index.createEvent(this, "fieldBlur", 7);
+    this.fieldChange = index.createEvent(this, "fieldChange", 7);
+    this.fieldInput = index.createEvent(this, "fieldInput", 7);
+    /**
+     * A placeholder to assist the user in completing the field.
+     */
+    this.placeholder = '';
+    /**
+     * Sets the tabIndex of the input element.
+     */
+    this.order = 1;
+    /**
+     * Sets the value of the input element.
+     */
+    this.value = '';
+    /**
+     * If true, the field will be marked required.
+     */
+    this.required = false;
+    /**
+     * Sets the disabled attribute of the input element.
+     */
+    this.disabled = false;
+    this.focused = false;
+  }
+  async focusField() {
+    this.focused = true;
+    this.el.focus();
+    this.fieldFocus.emit(true);
+  }
+  handleBlur() {
+    this.focused = false;
+    this.fieldBlur.emit(true);
+  }
+  handleFocus() {
+    this.focused = true;
+    this.fieldFocus.emit(true);
+  }
+  handleChange(e) {
+    this.fieldChange.emit(e.target.value);
+  }
+  handleInput(e) {
+    this.fieldInput.emit(e.target.value);
+  }
+  render() {
+    return (index.h(index.Host, { class: { focused: this.focused, required: this.required } }, index.h("input", { type: "text", placeholder: this.placeholder || '', tabIndex: this.order, value: this.value, disabled: this.disabled, required: this.required, ref: el => (this.el = el), onBlur: () => this.handleBlur(), onFocus: () => this.handleFocus(), onChange: e => this.handleChange(e), onInput: e => this.handleInput(e) })));
+  }
+};
+VerdocsFieldTextbox.style = verdocsFieldTextboxCss;
 
 const _nodeResolve_empty = {};
 
@@ -13,9 +3291,9 @@ const _nodeResolve_empty$1 = /*#__PURE__*/Object.freeze({
   'default': _nodeResolve_empty
 });
 
-const require$$5 = /*@__PURE__*/index.getAugmentedNamespace(_nodeResolve_empty$1);
+const require$$5 = /*@__PURE__*/bufferEs6.getAugmentedNamespace(_nodeResolve_empty$1);
 
-var pdf = index.createCommonjsModule(function (module, exports) {
+var pdf = bufferEs6.createCommonjsModule(function (module, exports) {
 /**
  * @licstart The following is the entire license notice for the
  * Javascript code in this page
@@ -39,17 +3317,9 @@ var pdf = index.createCommonjsModule(function (module, exports) {
  */
 
 (function webpackUniversalModuleDefinition(root, factory) {
-	if('object' === 'object' && 'object' === 'object')
-		module.exports = factory();
-	else if(typeof undefined === 'function' && undefined.amd)
-		undefined("pdfjs-dist/build/pdf", [], factory);
-	else if('object' === 'object')
-		exports["pdfjs-dist/build/pdf"] = factory();
-	else
-		root["pdfjs-dist/build/pdf"] = root.pdfjsLib = factory();
-})(index.commonjsGlobal, function() {
+	module.exports = factory();
+})(bufferEs6.commonjsGlobal, function() {
 return /******/ (() => { // webpackBootstrap
-/******/ 	"use strict";
 /******/ 	var __webpack_modules__ = ([
 /* 0 */,
 /* 1 */
@@ -1607,9 +4877,7 @@ function createObjectURL(data, contentType = "", forceDataSchema = false) {
 
 
 
-var _is_node = __w_pdfjs_require__(4);
-
-;
+__w_pdfjs_require__(4);
 
 /***/ }),
 /* 4 */
@@ -1621,7 +4889,7 @@ Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
 exports.isNodeJS = void 0;
-const isNodeJS = typeof index.process_1 === "object" && index.process_1 + "" === "[object process]" && !index.process_1.versions.nw && !(index.process_1.versions.electron && index.process_1.type && index.process_1.type !== "browser");
+const isNodeJS = typeof bufferEs6.process_1 === "object" && bufferEs6.process_1 + "" === "[object process]" && !bufferEs6.process_1.versions.nw && !(bufferEs6.process_1.versions.electron && bufferEs6.process_1.type && bufferEs6.process_1.type !== "browser");
 exports.isNodeJS = isNodeJS;
 
 /***/ }),
@@ -3045,7 +6313,7 @@ const PDFWorkerUtil = {
   fakeWorkerId: 0
 };
 {
-  if (_is_node.isNodeJS && typeof index.commonjsRequire === "function") {
+  if (_is_node.isNodeJS && typeof bufferEs6.commonjsRequire === "function") {
     PDFWorkerUtil.isWorkerDisabled = true;
     PDFWorkerUtil.fallbackWorkerSrc = "./pdf.worker.js";
   } else if (typeof document === "object") {
@@ -3304,7 +6572,7 @@ class PDFWorker {
         return mainWorkerMessageHandler;
       }
 
-      if (_is_node.isNodeJS && typeof index.commonjsRequire === "function") {
+      if (_is_node.isNodeJS && typeof bufferEs6.commonjsRequire === "function") {
         const worker = eval("require")(this.workerSrc);
         return worker.WorkerMessageHandler;
       }
@@ -4850,7 +8118,6 @@ const MAX_FONT_SIZE = 100;
 const MAX_GROUP_SIZE = 4096;
 const EXECUTION_TIME = 15;
 const EXECUTION_STEPS = 10;
-const COMPILE_TYPE3_GLYPHS = true;
 const MAX_SIZE_TO_COMPILE = 1000;
 const FULL_CHUNK_HEIGHT = 16;
 const LINEWIDTH_SCALE_FACTOR = 1.000001;
@@ -7193,7 +10460,7 @@ class CanvasGraphics {
           height = img.height;
     const glyph = this.processingType3;
 
-    if (COMPILE_TYPE3_GLYPHS && glyph && glyph.compiled === undefined) {
+    if (glyph && glyph.compiled === undefined) {
       if (width <= MAX_SIZE_TO_COMPILE && height <= MAX_SIZE_TO_COMPILE) {
         glyph.compiled = compileType3Glyph({
           data: img.data,
@@ -9462,9 +12729,6 @@ class AnnotationElement {
         case _util.AnnotationBorderStyleType.UNDERLINE:
           container.style.borderBottomStyle = "solid";
           break;
-
-        default:
-          break;
       }
 
       const borderColor = data.borderColor || data.color || null;
@@ -12662,7 +15926,7 @@ exports.SVGGraphics = SVGGraphics;
       try {
         let input;
 
-        if (parseInt(index.process_1.versions.node) >= 8) {
+        if (parseInt(bufferEs6.process_1.versions.node) >= 8) {
           input = literals;
         } else {
           input = bufferEs6.Buffer.from(literals);
@@ -13328,7 +16592,7 @@ exports.SVGGraphics = SVGGraphics;
           }
 
           current.tspan.textContent += character;
-        } else {}
+        }
 
         let charWidth;
 
@@ -14100,8 +17364,6 @@ var _util = __w_pdfjs_require__(2);
 
 var _network_utils = __w_pdfjs_require__(24);
 
-;
-
 const fs = require$$5;
 
 const http = require$$5;
@@ -14845,8 +18107,6 @@ exports.PDFNetworkStream = void 0;
 var _util = __w_pdfjs_require__(2);
 
 var _network_utils = __w_pdfjs_require__(24);
-
-;
 const OK_RESPONSE = 200;
 const PARTIAL_CONTENT_RESPONSE = 206;
 
@@ -15387,8 +18647,6 @@ var _util = __w_pdfjs_require__(2);
 
 var _network_utils = __w_pdfjs_require__(24);
 
-;
-
 function createFetchOptions(headers, withCredentials, abortController) {
   return {
     method: "GET",
@@ -15934,9 +19192,6 @@ var _text_layer = __w_pdfjs_require__(21);
 var _svg = __w_pdfjs_require__(22);
 
 var _xfa_layer = __w_pdfjs_require__(20);
-
-const pdfjsVersion = '2.12.313';
-const pdfjsBuild = 'a2ae56f39';
 {
   if (_is_node.isNodeJS) {
     const {
@@ -15973,16 +19228,13 @@ const pdfjsBuild = 'a2ae56f39';
 //# sourceMappingURL=pdf.js.map
 });
 
-const pdf$1 = /*@__PURE__*/index.getDefaultExportFromCjs(pdf);
+const pdf$1 = /*@__PURE__*/bufferEs6.getDefaultExportFromCjs(pdf);
 
-function format(first, middle, last) {
-  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
-}
 const integerSequence = (start, count) => Array(count)
   .fill(1)
   .map((_, index) => index + start);
 
-const verdocsViewCss = "verdocs-view{font-family:\"Barlow\", sans-serif;display:-ms-flexbox;display:flex;background:#ccc;min-height:600px;position:relative;padding:0 0 20px 0;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-view div,verdocs-view canvas{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-view .container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column}verdocs-view button.test{color:#fff;cursor:pointer;padding:5px 10px;border-radius:4px;background:#5a5767;border:1px solid #ccc}verdocs-view .load-progress{position:absolute;top:0;left:0;right:0;height:6px;z-index:2000;background:#000}verdocs-view .load-progress .bar{height:6px;background:#50be80}#verdocs-pdf-viewer-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column}#verdocs-pdf-viewer-container canvas{background:white;max-width:100%;margin:15px 0 0 0}";
+const verdocsViewCss = "verdocs-view{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:-ms-flexbox;display:flex;background:#ccc;min-height:600px;position:relative;padding:0 0 20px 0;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-view div,verdocs-view canvas{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-view .container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column}verdocs-view button.test{color:#fff;cursor:pointer;padding:5px 10px;border-radius:4px;background:#5a5767;border:1px solid #ccc}verdocs-view .load-progress{position:absolute;top:0;left:0;right:0;height:6px;z-index:2000;background:#000}verdocs-view .load-progress .bar{height:6px;background:#50be80}#verdocs-pdf-viewer-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column}#verdocs-pdf-viewer-container canvas{background:white;max-width:100%;margin:15px 0 0 0}";
 
 const CANVAS_MARGIN = 15;
 const PDF_WORKER_URL = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdf.version}/pdf.worker.min.js`;
@@ -15993,13 +19245,13 @@ console.log('[VIEW] Loading PDF-JS', { PDF_WORKER_URL, CMAPS_URL });
 pdf$1.GlobalWorkerOptions.workerSrc = PDF_WORKER_URL;
 const VerdocsView = class {
   constructor(hostRef) {
-    index$1.registerInstance(this, hostRef);
-    this.pageRendered = index$1.createEvent(this, "pageRendered", 7);
-    this.pageLoaded = index$1.createEvent(this, "pageLoaded", 7);
-    this.pageChange = index$1.createEvent(this, "pageChange", 7);
-    this.pageInit = index$1.createEvent(this, "pageInit", 7);
-    this.scaleChange = index$1.createEvent(this, "scaleChange", 7);
-    this.documentRendered = index$1.createEvent(this, "documentRendered", 7);
+    index.registerInstance(this, hostRef);
+    this.pageRendered = index.createEvent(this, "pageRendered", 7);
+    this.pageLoaded = index.createEvent(this, "pageLoaded", 7);
+    this.pageChange = index.createEvent(this, "pageChange", 7);
+    this.pageInit = index.createEvent(this, "pageInit", 7);
+    this.scaleChange = index.createEvent(this, "scaleChange", 7);
+    this.documentRendered = index.createEvent(this, "documentRendered", 7);
     this.numPages = 1;
     this.fingerprint = null;
     /**
@@ -16110,13 +19362,24 @@ const VerdocsView = class {
     });
   }
   render() {
-    return (index$1.h("div", { class: "container" }, this.loadProgress < 100 ? index$1.h("verdocs-loader", null) : index$1.h("div", { style: { display: 'none' } }), index$1.h("div", { id: "verdocs-pdf-viewer-container" })));
+    return (index.h("div", { class: "container" }, this.loadProgress < 100 ? index.h("verdocs-loader", null) : index.h("div", { style: { display: 'none' } }), index.h("div", { id: "verdocs-pdf-viewer-container" })));
   }
-  get component() { return index$1.getElement(this); }
+  get component() { return index.getElement(this); }
   static get watchers() { return {
     "source": ["doSrc"]
   }; }
 };
 VerdocsView.style = verdocsViewCss;
 
+exports.verdocs_dropdown = VerdocsDropdown;
+exports.verdocs_field_attachment = VerdocsFieldAttachment;
+exports.verdocs_field_checkbox = VerdocsFieldCheckbox;
+exports.verdocs_field_date = VerdocsFieldDate;
+exports.verdocs_field_dropdown = VerdocsFieldDropdown;
+exports.verdocs_field_initial = VerdocsFieldInitial;
+exports.verdocs_field_payment = VerdocsFieldPayment;
+exports.verdocs_field_radio_button = VerdocsFieldRadioButton;
+exports.verdocs_field_signature = VerdocsFieldSignature;
+exports.verdocs_field_textarea = VerdocsFieldTextarea;
+exports.verdocs_field_textbox = VerdocsFieldTextbox;
 exports.verdocs_view = VerdocsView;