/*!
 * Custom elements for Nanopore-Digital Web applications
 */
import { proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
import { h } from './renderer.js';
import { d as defineCustomElement$1 } from './icon.js';

const ISO_DATE_FORMAT = /^(\d{4})-(\d{2})-(\d{2})/;
var DaysOfWeek;
(function (DaysOfWeek) {
    DaysOfWeek[DaysOfWeek["Sunday"] = 0] = "Sunday";
    DaysOfWeek[DaysOfWeek["Monday"] = 1] = "Monday";
    DaysOfWeek[DaysOfWeek["Tuesday"] = 2] = "Tuesday";
    DaysOfWeek[DaysOfWeek["Wednesday"] = 3] = "Wednesday";
    DaysOfWeek[DaysOfWeek["Thursday"] = 4] = "Thursday";
    DaysOfWeek[DaysOfWeek["Friday"] = 5] = "Friday";
    DaysOfWeek[DaysOfWeek["Saturday"] = 6] = "Saturday";
})(DaysOfWeek || (DaysOfWeek = {}));
/**
 * @param year
 * @param month
 * @param day
 * @returns a new Date object
 */
function createDate(year, month, day) {
    const dayInt = parseInt(day, 10);
    const monthInt = parseInt(month, 10);
    const yearInt = parseInt(year, 10);
    const isValid = Number.isInteger(yearInt) && // all parts should be integers
        Number.isInteger(monthInt) &&
        Number.isInteger(dayInt) &&
        monthInt > 0 && // month must be 1-12
        monthInt <= 12 &&
        dayInt > 0 && // day must be 1-31
        dayInt <= 31 &&
        yearInt > 0;
    if (isValid) {
        return new Date(yearInt, monthInt - 1, dayInt);
    }
    return undefined;
}
/**
 * @param value date string in ISO format YYYY-MM-DD
 * @returns an ISO Date object
 */
function parseISODate(value) {
    if (!value)
        return undefined;
    const matches = value.match(ISO_DATE_FORMAT);
    if (matches) {
        return createDate(matches[1], matches[2], matches[3]);
    }
    return undefined;
}
/**
 * print date in format YYYY-MM-DD
 * @param date
 * @returns an iso date string
 */
function printISODate(date) {
    if (!date)
        return '';
    let d = date.getDate().toString(10);
    let m = (date.getMonth() + 1).toString(10);
    const y = date.getFullYear().toString(10);
    // days are not zero-indexed, so pad if less than 10
    if (date.getDate() < 10) {
        d = `0${d}`;
    }
    // months *are* zero-indexed, pad if less than 9!
    if (date.getMonth() < 9) {
        m = `0${m}`;
    }
    return `${y}-${m}-${d}`;
}
/**
 * Compare if two dates are equal in terms of day, month, and year
 * @param a date to compare
 * @param b date to compare
 * @returns boolean
 */
function isEqual(a, b) {
    if (a == null || b == null)
        return false;
    return (a.getFullYear() === b.getFullYear() &&
        a.getMonth() === b.getMonth() &&
        a.getDate() === b.getDate());
}
/**
 * Add days to a date
 * @param date
 * @param days
 * @returns a new Date
 */
function addDays(date, days) {
    const d = new Date(date);
    d.setDate(d.getDate() + days);
    return d;
}
/**
 * Takes a date and a day enum and finds the first day of that date's week
 * @param date
 * @param firstDayOfWeek
 * @returns the first day of a date's week
 */
function startOfWeek(date, firstDayOfWeek = DaysOfWeek.Monday) {
    /* eslint-disable @typescript-eslint/no-unsafe-enum-comparison */
    const d = new Date(date);
    const day = d.getDay();
    const diff = (day < firstDayOfWeek ? 7 : 0) + day - firstDayOfWeek;
    d.setDate(d.getDate() - diff);
    return d;
}
/**
 * Takes a date and a day enum and finds the last day of that date's week
 * @param date
 * @param firstDayOfWeek
 * @returns the last day of that date's week
 */
function endOfWeek(date, firstDayOfWeek = DaysOfWeek.Monday) {
    /* eslint-disable @typescript-eslint/no-unsafe-enum-comparison */
    const d = new Date(date);
    const day = d.getDay();
    const diff = (day < firstDayOfWeek ? -7 : 0) + 6 - (day - firstDayOfWeek);
    d.setDate(d.getDate() + diff);
    return d;
}
/**
 * Get the date of the start of the month
 * @param date
 * @returns start of the month Date
 */
function startOfMonth(date) {
    return new Date(date.getFullYear(), date.getMonth(), 1);
}
/**
 * Get the date of the end of the month
 * @param date
 * @returns end of the month Date
 */
function endOfMonth(date) {
    return new Date(date.getFullYear(), date.getMonth() + 1, 0);
}
/**
 * Changes a dates' month
 * @param date
 * @param month
 * @returns a new Date with the new month set
 */
function setMonth(date, month) {
    const d = new Date(date);
    d.setMonth(month);
    return d;
}
/**
 * Changes a dates' year
 * @param date
 * @param year
 * @returns a new Date with the new year set
 */
function setYear(date, year) {
    const d = new Date(date);
    d.setFullYear(year);
    return d;
}
/**
 * Check if date is within a min and max
 * @param date
 * @param min
 * @param max
 * @returns boolean
 */
function inRange(date, min, max) {
    return dateClamp(date, min, max) === date;
}
/**
 * Ensures date is within range, returns min or max if out of bounds
 * @param date
 * @param min
 * @param max
 * @returns the clamped date
 */
function dateClamp(date, min, max) {
    const time = date.getTime();
    if (min && min instanceof Date && time < min.getTime()) {
        return min;
    }
    if (max && max instanceof Date && time > max.getTime()) {
        return max;
    }
    return date;
}
/**
 * Given start and end date, return an (inclusive) array of all dates in between
 * @param start
 * @param end
 * @returns an array of Date objects in the range
 */
function getDaysInRange(start, end) {
    const days = [];
    let current = start;
    while (!isEqual(current, end)) {
        days.push(current);
        current = addDays(current, 1);
    }
    days.push(current);
    return days;
}
/**
 * Given a date, return an array of dates from a calendar perspective
 * @param date
 * @param firstDayOfWeek
 * @returns an array of Date objects in the month range
 */
function getViewOfMonth(date, firstDayOfWeek = DaysOfWeek.Monday) {
    const start = startOfWeek(startOfMonth(date), firstDayOfWeek);
    const end = endOfWeek(endOfMonth(date), firstDayOfWeek);
    return getDaysInRange(start, end);
}

const localization = {
    buttonLabel: 'Choose date',
    placeholder: 'YYYY-MM-DD',
    selectedDateMessage: 'Selected date is',
    prevMonthLabel: 'Previous month',
    nextMonthLabel: 'Next month',
    monthSelectLabel: 'Month',
    yearSelectLabel: 'Year',
    closeLabel: 'Close window',
    keyboardInstruction: 'You can use arrow keys to navigate dates',
    calendarHeading: 'Choose a date',
    dayNames: [
        'Sunday',
        'Monday',
        'Tuesday',
        'Wednesday',
        'Thursday',
        'Friday',
        'Saturday',
    ],
    monthNames: [
        'January',
        'February',
        'March',
        'April',
        'May',
        'June',
        'July',
        'August',
        'September',
        'October',
        'November',
        'December',
    ],
    monthNamesShort: [
        'Jan',
        'Feb',
        'Mar',
        'Apr',
        'May',
        'Jun',
        'Jul',
        'Aug',
        'Sep',
        'Oct',
        'Nov',
        'Dec',
    ],
};

const DatePickerDay = ({ focusedDay, today, day, onDaySelect, onKeyboardNavigation, focusedDayRef, inRange, disabled, isSelected, }) => {
    const isToday = isEqual(day, today);
    const isFocused = isEqual(day, focusedDay);
    const isDisabled = day.getMonth() !== focusedDay.getMonth() || disabled;
    const isOutsideRange = !inRange;
    function handleClick(e) {
        onDaySelect(e, day);
    }
    return (h("button", { class: {
            'duet-date__day': true,
            'is-outside': isOutsideRange,
            'is-disabled': isDisabled,
            'is-today': isToday,
        }, tabIndex: isFocused ? 0 : -1, onClick: handleClick, onKeyDown: onKeyboardNavigation, disabled: isOutsideRange, type: "button", "aria-pressed": isSelected ? 'true' : 'false', ref: (el) => {
            if (isFocused && el && focusedDayRef) {
                focusedDayRef(el);
            }
        } },
        h("span", { "aria-hidden": "true" }, day.getDate()),
        h("span", { class: "duet-date__vhidden" }, day.toLocaleDateString(undefined, { day: 'numeric', month: 'long' }))));
};

function chunk(array, chunkSize) {
    const result = [];
    for (let i = 0; i < array.length; i += chunkSize) {
        result.push(array.slice(i, i + chunkSize));
    }
    return result;
}
function mapWithOffset(array, startingOffset, mapFn) {
    return array.map((_, i) => {
        const adjustedIndex = (i + startingOffset) % array.length;
        return mapFn(array[adjustedIndex]);
    });
}
const DatePickerMonth = ({ selectedDate, focusedDate, labelledById, localization, firstDayOfWeek, min, max, onDateSelect, onKeyboardNavigation, focusedDayRef, onMouseDown, onFocusIn, isDateDisabled, }) => {
    const today = new Date();
    const days = getViewOfMonth(focusedDate, firstDayOfWeek);
    return (h("table", { class: "duet-date__table", role: "grid", "aria-labelledby": labelledById, onFocusin: onFocusIn, onMouseDown: onMouseDown },
        h("thead", null,
            h("tr", null, mapWithOffset(localization.dayNames, firstDayOfWeek, (dayName) => (h("th", { class: "duet-date__table-header", scope: "col" },
                h("span", { "aria-hidden": "true" }, dayName.substring(0, 2)),
                h("span", { class: "duet-date__vhidden" }, dayName)))))),
        h("tbody", null, chunk(days, 7).map((week) => (h("tr", { class: "duet-date__row" }, week.map((day) => (h("td", { class: "duet-date__cell", role: "gridcell", "aria-selected": isEqual(day, selectedDate) ? 'true' : undefined },
            h(DatePickerDay, { day: day, today: today, focusedDay: focusedDate, inRange: inRange(day, min, max), onDaySelect: onDateSelect, onKeyboardNavigation: onKeyboardNavigation, focusedDayRef: focusedDayRef, disabled: isDateDisabled(day), isSelected: isEqual(day, selectedDate) }))))))))));
};

const datePickerCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--active-color:var(--nano-color-primary-1000);--active-text-color:var(--nano-color-base-0);--inactive-color:var(--nano-color-neutral-300);display:block;font-size:16px;background:var(--nano-color-neutral-50)}.duet-date *,.duet-date *::before,.duet-date *::after{box-sizing:border-box;margin:0}.duet-date{box-sizing:border-box;color:currentcolor;display:block;margin:0;position:relative;text-align:start;inline-size:100%}.duet-date__dialog{display:flex;inset-block-start:100%;max-inline-size:100%;inline-size:100%}.duet-date__dialog.is-left{inset-inline:auto 0;inline-size:auto}.duet-date__dialog-content{min-inline-size:290px;padding:var(--nano-spacing-md);position:relative;transform:none;max-inline-size:100%;inline-size:100%}.duet-date__table{border-collapse:collapse;border-spacing:0;font-size:1em;line-height:1;text-align:center;inline-size:100%}.duet-date__table-header{font-size:0.75em;font-weight:600;letter-spacing:1px;line-height:1;padding-block-end:8px;text-decoration:none;text-transform:uppercase}.duet-date__cell{text-align:center;padding:0 0 3px}.duet-date__day{appearance:none;background:transparent;border:0;border-radius:50%;cursor:pointer;display:inline-block;font-size:0.875em;font-variant-numeric:tabular-nums;line-height:1;position:relative;text-align:center;vertical-align:middle;z-index:1;block-size:2.5em;inline-size:2.5em}.duet-date__day.is-today{box-shadow:0 0 0 1px var(--active-color);position:relative}.duet-date__day:hover::before,.duet-date__day.is-today::before{content:\"\";background:var(--active-color);border-radius:50%;opacity:0.16;position:absolute;inset:0}[aria-selected=true] .duet-date__day{background:var(--active-color) !important;color:var(--active-text-color);box-shadow:none;outline:0}.duet-date__day:not(.is-disabled):active{background:color-mix(in srgb, var(--active-color), black 20%);color:var(--active-text-color)}.duet-date__day:focus-visible{outline:var(--nano-focus-ring);outline-offset:-1px;z-index:2}.duet-date__day.is-disabled{background:transparent;box-shadow:none;cursor:default;opacity:0.5}.duet-date__day.is-disabled::before{display:none}.duet-date__day.is-outside{background:var(--inactive-color);box-shadow:none;cursor:default;opacity:0.8;pointer-events:none}.duet-date__day.is-outside::before{display:none}.duet-date__header{align-items:center;display:flex;justify-content:space-between;margin-block-end:var(--nano-spacing-md);inline-size:100%}.duet-date__nav{white-space:nowrap}.duet-date__prev,.duet-date__next{background:var(--inactive-color);align-items:center;appearance:none;border:0;border-radius:50%;cursor:pointer;display:inline-flex;justify-content:space-around;margin-inline-start:8px;padding:0;font-size:0.9em;block-size:2.2em;inline-size:2.2em}.duet-date__prev:focus-visible,.duet-date__next:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.duet-date__prev:active,.duet-date__next:active{background:color-mix(in srgb, var(--inactive-color), black 20%)}.duet-date__prev:disabled,.duet-date__next:disabled{cursor:default;opacity:0.7}.duet-date__prev .nano-icon,.duet-date__next .nano-icon{margin-block:0;margin-inline:auto}.duet-date__select{display:inline-flex;margin-block-start:4px;position:relative}.duet-date__select span{margin-inline-end:4px}.duet-date__select select{cursor:pointer;font-size:1em;block-size:100%;inset-inline-start:0;opacity:0;position:absolute;inset-block-start:0;inline-size:100%;z-index:2}.duet-date__select select:focus-visible:focus+.duet-date__select-label{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.duet-date__select-label{align-items:center;display:flex;font-size:1.25em;font-weight:600;line-height:1;padding-block:0;padding-inline:8px 4px;pointer-events:none;position:relative;inline-size:100%;z-index:1}.duet-date__select-label .nano-icon{font-size:0.55em}.duet-date__vhidden{border:0;clip:rect(1px, 1px, 1px, 1px);block-size:1px;overflow:hidden;padding:0;position:absolute;inset-block-start:0;inline-size:1px}";

function range(from, to) {
    const result = [];
    for (let i = from; i <= to; i++) {
        result.push(i);
    }
    return result;
}
let dateIds = 0;
const NanoDatePicker = /*@__PURE__*/ proxyCustomElement(class NanoDatePicker extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.nanoDatePicked = createEvent(this, "nanoDatePicked", 7);
    }
    dateId = `nano-datepicker-${dateIds++}`;
    monthSelectId = this.dateId + '-' + 'month';
    yearSelectId = this.dateId + '-' + 'year';
    dialogLabelId = this.dateId + '-' + 'dialog';
    firstFocusableElement;
    monthSelectNode;
    focusedDayNode;
    focusTimeoutId;
    initialTouchX = null;
    initialTouchY = null;
    get host() { return this; }
    activeFocus = false;
    focusedDay = new Date();
    // Public Property API
    _selectedDate = '';
    /** Selected Date. Must be in IS0-8601 format: YYYY-MM-DD. */
    get selectedDate() {
        return this._selectedDate;
    }
    set selectedDate(value) {
        if (typeof value !== 'string') {
            this._selectedDate = '';
            return;
        }
        value = value.split('T')[0]; // remove time part if present
        this._selectedDate = value;
    }
    /** Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
     * This setting can be used alone or together with the max property. */
    min = '';
    /** Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
     * This setting can be used alone or together with the min property. */
    max = '';
    /** Which day is considered first day of the week. `0` for Sunday, `1` for Monday, etc.
     * Default is Monday. */
    firstDayOfWeek = DaysOfWeek.Monday;
    /** Button labels, day names, month names, etc, used for localization.
     * Default is English. */
    localization = localization;
    /**
     * Controls which days are disabled and therefore disallowed.
     * For example, this can be used to disallow selection of weekends.
     * @returns `false` for not disabled and `true` for disabled
     */
    isDateDisabled = () => false;
    /** Controls whether the picker is within a modal control and will therefore keep focus within the control */
    isModal = false;
    /** @internal First focusable element. Relevant for keeping focus within the control */
    firstFocusEle;
    // Events
    /** Event emitted when a date is selected. */
    nanoDatePicked;
    // Public methods API
    /** Focus to the calendar
     * @param day - focus to the current selected day
     */
    async setFocus(day = false) {
        this.setFocusedDay(parseISODate(this.selectedDate) || new Date());
        if (day) {
            setTimeout((_) => this.focusedDayNode.focus({ preventScroll: true }), 20);
            return;
        }
        clearTimeout(this.focusTimeoutId);
        this.focusTimeoutId = setTimeout(() => {
            this.monthSelectNode.focus({ preventScroll: true });
        }, 20);
    }
    handleSelectedDateChange() {
        this.setFocus(true);
    }
    // Local methods.
    enableActiveFocus = () => {
        this.activeFocus = true;
    };
    disableActiveFocus = () => {
        this.activeFocus = false;
    };
    addDays(days) {
        this.setFocusedDay(addDays(this.focusedDay, days));
    }
    addMonths(months) {
        this.setMonth(this.focusedDay.getMonth() + months);
    }
    addYears(years) {
        this.setYear(this.focusedDay.getFullYear() + years);
    }
    startOfWeek() {
        this.setFocusedDay(startOfWeek(this.focusedDay, this.firstDayOfWeek));
    }
    endOfWeek() {
        this.setFocusedDay(endOfWeek(this.focusedDay, this.firstDayOfWeek));
    }
    setMonth(month) {
        const min = setMonth(startOfMonth(this.focusedDay), month);
        const max = endOfMonth(min);
        const date = setMonth(this.focusedDay, month);
        this.setFocusedDay(dateClamp(date, min, max));
    }
    setYear(year) {
        const min = setYear(startOfMonth(this.focusedDay), year);
        const max = endOfMonth(min);
        const date = setYear(this.focusedDay, year);
        this.setFocusedDay(dateClamp(date, min, max));
    }
    setFocusedDay(day) {
        this.focusedDay = dateClamp(day, parseISODate(this.min), parseISODate(this.max));
    }
    handleTouchStart = (event) => {
        const touch = event.changedTouches[0];
        this.initialTouchX = touch.pageX;
        this.initialTouchY = touch.pageY;
    };
    handleTouchMove = (event) => {
        event.preventDefault();
    };
    handleTouchEnd = (event) => {
        const touch = event.changedTouches[0];
        const distX = touch.pageX - this.initialTouchX; // get horizontal dist traveled
        const distY = touch.pageY - this.initialTouchY; // get vertical dist traveled
        const threshold = 70;
        const isHorizontalSwipe = Math.abs(distX) >= threshold && Math.abs(distY) <= threshold;
        if (isHorizontalSwipe) {
            this.addMonths(distX < 0 ? 1 : -1);
        }
        this.initialTouchY = null;
        this.initialTouchX = null;
    };
    handleNextMonthClick = (event) => {
        event.preventDefault();
        this.addMonths(1);
    };
    handlePreviousMonthClick = (event) => {
        event.preventDefault();
        this.addMonths(-1);
    };
    handleKeyboardNavigation = (event) => {
        // handle tab separately, since it needs to be treated
        // differently to other keyboard interactions
        if (event.key === 'Tab' && !event.shiftKey && this.isModal) {
            event.preventDefault();
            const ele = this.firstFocusEle || this.firstFocusableElement;
            if (ele['setFocus'])
                ele.setFocus();
            else
                ele.focus();
            return;
        }
        let handled = true;
        switch (event.key) {
            case 'ArrowRight':
                this.addDays(1);
                break;
            case 'ArrowLeft':
                this.addDays(-1);
                break;
            case 'ArrowDown':
                this.addDays(7);
                break;
            case 'ArrowUp':
                this.addDays(-7);
                break;
            case 'PageUp':
                if (event.shiftKey) {
                    this.addYears(-1);
                }
                else {
                    this.addMonths(-1);
                }
                break;
            case 'PageDown':
                if (event.shiftKey) {
                    this.addYears(1);
                }
                else {
                    this.addMonths(1);
                }
                break;
            case 'Home':
                this.startOfWeek();
                break;
            case 'End':
                this.endOfWeek();
                break;
            default:
                handled = false;
        }
        if (handled) {
            event.preventDefault();
            this.enableActiveFocus();
        }
    };
    handleDaySelect = (_event, day) => {
        const isAllowed = !this.isDateDisabled(day);
        const isInRange = inRange(day, parseISODate(this.min), parseISODate(this.max));
        if (!isInRange || !isAllowed) {
            return;
        }
        if (day.getMonth() === this.focusedDay.getMonth()) {
            this.setValue(day);
        }
        else {
            this.setFocusedDay(day);
        }
    };
    handleMonthSelect = (e) => {
        this.setMonth(parseInt(e.target.value, 10));
    };
    handleYearSelect = (e) => {
        this.setYear(parseInt(e.target.value, 10));
    };
    setValue(date) {
        this.selectedDate = printISODate(date);
        this.nanoDatePicked.emit({
            value: this.selectedDate,
            valueAsDate: date,
        });
    }
    processFocusedDayNode = (element) => {
        this.focusedDayNode = element;
        if (this.activeFocus) {
            setTimeout(() => element.focus({ preventScroll: true }), 0);
        }
    };
    componentWillLoad() {
        this.handleSelectedDateChange();
    }
    render() {
        const valueAsDate = parseISODate(this.selectedDate);
        const selectedYear = (valueAsDate || this.focusedDay).getFullYear();
        const focusedMonth = this.focusedDay.getMonth();
        const focusedYear = this.focusedDay.getFullYear();
        const minDate = parseISODate(this.min);
        const maxDate = parseISODate(this.max);
        const prevMonthDisabled = minDate != null &&
            minDate.getMonth() === focusedMonth &&
            minDate.getFullYear() === focusedYear;
        const nextMonthDisabled = maxDate != null &&
            maxDate.getMonth() === focusedMonth &&
            maxDate.getFullYear() === focusedYear;
        let minYear = selectedYear - 10;
        let maxYear = selectedYear + 10;
        if (minDate)
            minYear = minDate.getFullYear();
        if (maxDate)
            maxYear = maxDate.getFullYear();
        return (h(Host, { key: 'd3b992532815f40dbd9fcb7b0ddfaa27d703899b', class: "nano-date-picker" }, h("div", { key: 'c1be847528fac0224c54110aa77a7b471969c34d', class: "duet-date" }, h("div", { key: '8aa8dceea4d272bf171924bfbf59a4f645bed23d', class: {
                'duet-date__dialog': true,
                'is-active': true,
            }, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { key: '374d34c706b3972971ebfc05d32d4f2cfb8721de', class: "duet-date__dialog-content" }, h("div", { key: '4713d41d66ae2bc7057ec337080cd54700b51033', class: "duet-date__vhidden duet-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { key: 'b602d630814a176a066dab67645178fd15a7ca22', class: "duet-date__header", onFocusin: this.disableActiveFocus }, h("div", { key: '2cc00317d6468c2ea5c477249774eec83f5b94da' }, h("h2", { key: '0f420e58b51e50d6d973330665c508ca8167f3c3', id: this.dialogLabelId, class: "duet-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], ' ', this.focusedDay.getFullYear()), h("label", { key: '56192f5d51880678b86137cca89cb4a98515e03e', htmlFor: this.monthSelectId, class: "duet-date__vhidden" }, this.localization.monthSelectLabel), h("div", { key: '900c7995f2a3c51b5d22fee6176518940e7efc27', class: "duet-date__select" }, h("select", { key: '22bef19a74a42e7864d6cff32707adc7c0cc52b6', id: this.monthSelectId, class: "duet-date__select--month", ref: (element) => (this.firstFocusableElement = this.monthSelectNode =
                element), onChange: this.handleMonthSelect }, this.localization.monthNames.map((month, i) => (h("option", { key: month, value: i, selected: i === focusedMonth, disabled: !inRange(new Date(focusedYear, i, 1), minDate ? startOfMonth(minDate) : null, maxDate ? endOfMonth(maxDate) : null) }, month)))), h("div", { key: 'ba1108c781547bbaba8da184f07fd7d36b12cb4c', class: "duet-date__select-label", "aria-hidden": "true" }, h("span", { key: '8cd8018d9b68129e69219b9bffcd978a394269a5' }, this.localization.monthNamesShort[focusedMonth]), h("nano-icon", { key: 'e2b440b6adf599930d20e584c92c5f66d52564fd', name: "light/chevron-down" }))), h("label", { key: '043530523830f9c5a67682c47cfb6dc0464f3133', htmlFor: this.yearSelectId, class: "duet-date__vhidden" }, this.localization.yearSelectLabel), h("div", { key: 'e2e43ad2280255eb46cf06b9328af9bbefbe96a5', class: "duet-date__select" }, h("select", { key: 'eaaa7a64a034d1723c20b42cf14c8cea0f8c78b1', id: this.yearSelectId, class: "duet-date__select--year", onChange: this.handleYearSelect }, range(minYear, maxYear).map((year) => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { key: 'c6ce7ec0f073caad0bd6ab09d03f1e20f5433e97', class: "duet-date__select-label", "aria-hidden": "true" }, h("span", { key: '3f985ad9b631cb140f4e551ab2f20cbdef88da6a' }, this.focusedDay.getFullYear()), h("nano-icon", { key: '1b06f5e08b8b33bcc7d641abe122e3bb0fad05ba', name: "light/chevron-down" })))), h("div", { key: '4ea6d2f63406af47b4aba3b137c778aa9fed2524', class: "duet-date__nav" }, h("button", { key: '6cd94d90c91aa0ccbd74a9ba361b7d894ef9fccf', class: "duet-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("nano-icon", { key: '83d33e3779d7249634afbd8f1cd1c6476bad4697', name: "light/chevron-left" }), h("span", { key: '2318ef1d137f42a93240efc4caa15b376f079909', class: "duet-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { key: 'f8c400b9e644687ce1279a70e6fc5c0b1aec6aac', class: "duet-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("nano-icon", { key: 'a4ef19900fdfee3cc340ab6bba83dcf782e9b21a', name: "light/chevron-right" }), h("span", { key: 'da03dc579aeb3dc5a00b2c647f78b71186cc7d74', class: "duet-date__vhidden" }, this.localization.nextMonthLabel)))), h("div", { key: 'ec82cee96b94f0b4a36993d42bae2eb02a392522' }, h(DatePickerMonth, { key: 'e84697f87540abe1e8cfd47903655ac8b68ba08d', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate, isDateDisabled: this.isDateDisabled })))))));
    }
    static get watchers() { return {
        "selectedDate": ["handleSelectedDateChange"]
    }; }
    static get style() { return datePickerCss; }
}, [257, "nano-date-picker", {
        "selectedDate": [7169, "selected-date"],
        "min": [1],
        "max": [1],
        "firstDayOfWeek": [2, "first-day-of-week"],
        "localization": [16],
        "isDateDisabled": [16, "is-date-disabled"],
        "isModal": [4, "is-modal"],
        "firstFocusEle": [16, "first-focus-ele"],
        "activeFocus": [32],
        "focusedDay": [32],
        "setFocus": [64]
    }, undefined, {
        "selectedDate": ["handleSelectedDateChange"]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["nano-date-picker", "nano-icon"];
    components.forEach(tagName => { switch (tagName) {
        case "nano-date-picker":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, NanoDatePicker);
            }
            break;
        case "nano-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}

export { NanoDatePicker as N, printISODate as a, createDate as c, defineCustomElement as d, parseISODate as p };
