@nldd/design-system 0.8.69 → 0.8.70

package/dist/components/inputs/date-picker/date-picker.js

@@ -0,0 +1,748 @@
+/**
+ * NLDD Design System Datumkiezer Component (Lit + TypeScript)
+ *
+ * Een kalender waarin een datum of een periode wordt gekozen. Het component is
+ * zelfstandig bruikbaar - inline op een pagina, in een filterpaneel - en zit ook
+ * in de popover van nldd-date-field.
+ *
+ * Waarden zijn altijd ISO (jjjj-mm-dd). Met `range` kiest de gebruiker in twee
+ * stappen een begin- en einddatum.
+ *
+ * @element nldd-date-picker
+ *
+ * @attr {string}  value             - De gekozen datum als ISO (jjjj-mm-dd). Alleen zonder `range`.
+ * @attr {string}  start             - Begin van de periode als ISO. Alleen met `range`.
+ * @attr {string}  end               - Einde van de periode als ISO. Alleen met `range`.
+ * @attr {boolean} range             - Kies een periode in plaats van één datum.
+ * @attr {string}  min               - Vroegst toegestane datum: ISO, of `today` met een verschuiving (`today-18y`).
+ * @attr {string}  max               - Laatst toegestane datum: ISO, of `today` met een verschuiving (`today+1y`).
+ * @attr {number}  first-day-of-week - Eerste dag van de week, 0 is zondag. Standaard 1 (maandag).
+ * @attr {boolean} week-numbers     - Toont ISO-weeknummers in een kolom links.
+ * @attr {string}  accessible-label  - Toegankelijke naam van de kalender.
+ * @attr {object}  translations      - Vertalingen; niet opgegeven sleutels vallen terug op het Nederlands.
+ *
+ * @prop {(iso: string) => boolean} isDateUnavailable - Markeert losse datums als niet kiesbaar, bijvoorbeeld weekenden of feestdagen.
+ *
+ * @fires change - Wanneer een datum of een volledige periode is gekozen. detail: { value } of { start, end }.
+ * @fires input  - Ook bij de tussenstap van een periode, wanneer alleen de begindatum staat.
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { breakpoints } from '../../../assets/styles/breakpoints.js';
+import { isPointerMode } from '../../../utilities/input-modality.js';
+import { withTranslations } from '../../../utilities/with-translations.js';
+import { resolveDateBound, toIso } from '../../../utilities/resolve-date-bound.js';
+import { datePickerStyles } from './date-picker.styles.js';
+import { datePickerTemplate } from './date-picker.template.js';
+import { nlddDatePickerTranslations, MONTH_KEYS, WEEKDAY_KEYS } from './date-picker.i18n.js';
+import './../../actions/icon-button/icon-button.js';
+import './../../actions/button/button.js';
+/**
+ * All arithmetic runs on UTC-midnight Dates and ISO strings. UTC keeps a DST
+ * transition from swallowing or repeating a day, and ISO strings compare
+ * lexicographically, so a bounds check is a plain string comparison.
+ */
+function parseIso(iso) {
+    const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso);
+    if (!match)
+        return null;
+    const date = new Date(Date.UTC(Number(match[1]), Number(match[2]) - 1, Number(match[3])));
+    return Number.isNaN(date.getTime()) ? null : date;
+}
+function isoOf(date) {
+    return toIso(date.getUTCFullYear(), date.getUTCMonth() + 1, date.getUTCDate()) ?? '';
+}
+function addDays(iso, days) {
+    const date = parseIso(iso);
+    if (!date)
+        return iso;
+    date.setUTCDate(date.getUTCDate() + days);
+    return isoOf(date);
+}
+/** Clamped, like the bound resolver: 31 March plus a month is 30 April. */
+function addMonths(iso, months) {
+    const date = parseIso(iso);
+    if (!date)
+        return iso;
+    const day = date.getUTCDate();
+    const total = date.getUTCFullYear() * 12 + date.getUTCMonth() + months;
+    const year = Math.floor(total / 12);
+    const month = ((total % 12) + 12) % 12 + 1;
+    const lastDay = new Date(Date.UTC(year, month, 0)).getUTCDate();
+    return toIso(year, month, Math.min(day, lastDay)) ?? iso;
+}
+function todayIso() {
+    const now = new Date();
+    return toIso(now.getFullYear(), now.getMonth() + 1, now.getDate()) ?? '';
+}
+function firstOfMonth(iso) {
+    return `${iso.slice(0, 7)}-01`;
+}
+function lastOfMonth(iso) {
+    const date = parseIso(iso);
+    if (!date)
+        return iso;
+    return toIso(date.getUTCFullYear(), date.getUTCMonth() + 1, new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + 1, 0)).getUTCDate()) ?? iso;
+}
+function weekdayOf(iso) {
+    return parseIso(iso)?.getUTCDay() ?? 0;
+}
+function startOfWeek(iso, firstDayOfWeek) {
+    const offset = (weekdayOf(iso) - firstDayOfWeek + 7) % 7;
+    return addDays(iso, -offset);
+}
+/** Same month and day in another year, clamped: 29 February is not every year. */
+function withYear(iso, year) {
+    const month = Number(iso.slice(5, 7));
+    const day = Number(iso.slice(8, 10));
+    const lastDay = new Date(Date.UTC(year, month, 0)).getUTCDate();
+    return toIso(year, month, Math.min(day, lastDay)) ?? iso;
+}
+function clampIso(iso, min, max) {
+    if (min && iso < min)
+        return min;
+    if (max && iso > max)
+        return max;
+    return iso;
+}
+let NLDDDatePicker = class NLDDDatePicker extends withTranslations(LitElement, nlddDatePickerTranslations) {
+    constructor() {
+        super(...arguments);
+        this.value = '';
+        this.start = '';
+        this.end = '';
+        this.range = false;
+        this.min = '';
+        this.max = '';
+        this.firstDayOfWeek = 1;
+        this.weekNumbers = false;
+        this.accessibleLabel = '';
+        /** The date carrying the roving tabindex. */
+        this._focused = '';
+        /** First of the displayed month. */
+        this._view = '';
+        /** During a range selection: the date the user picked first. */
+        this._anchor = '';
+        /** Pointer preview of the range being drawn. Visual only - never announced. */
+        this._hover = '';
+        this._announcement = '';
+        this._yearMenuOpen = false;
+        /**
+         * Stacked layout: the paging controls move below the grid and grow to md. Not
+         * compact: everything gets roomier, tuned for fingers and narrow viewports.
+         * Driven from JS rather than a media query because the two layouts are not the
+         * same buttons in another place - side by side they are one bar, below they
+         * split into "Vandaag" on the left and the month arrows on the right, and CSS
+         * cannot regroup a component's children.
+         *
+         * Coarse pointers count too, not just narrow screens: a touch tablet has room
+         * for the wide layout but the same need for larger targets.
+         */
+        this._stacked = false;
+        this._handleStackedChange = () => {
+            this._stacked = Boolean(this._stackedQuery?.matches);
+        };
+        /** Set when the keyboard moved focus, so only then is focus pulled to a cell. */
+        this._restoreFocus = false;
+        /**
+         * A day focused by pointer should not show a ring. Browsers treat programmatic
+         * focus as focus-visible, and opening the calendar with the mouse focuses a day,
+         * so the ring would appear without anyone using the keyboard. Arrow keys switch
+         * the modality back, so navigating reveals it again.
+         *
+         * If this never runs the class is simply absent and the ring shows - the
+         * accessible outcome is the default.
+         */
+        /** Set by keyboard navigation; consumed by the focus it causes. */
+        this._focusFromKeyboard = false;
+        // — Dragging —————————————————————————————————————————————————————————————
+        /** Where the pointer went down; empty when no drag is in progress. */
+        this._dragOrigin = '';
+        /** Set once the pointer has actually moved to another day. */
+        this._dragged = false;
+        this._suppressClick = false;
+        this._onDocumentPointerUp = (e) => {
+            document.removeEventListener('pointerup', this._onDocumentPointerUp);
+            const origin = this._dragOrigin;
+            this._dragOrigin = '';
+            if (!this._dragged)
+                return;
+            this._dragged = false;
+            this._suppressClick = true;
+            const iso = this._dayUnderPointer(e);
+            // Released off the grid or on a blocked day: keep the start and wait for a
+            // second click rather than inventing an end date.
+            if (!iso || this._isUnavailable(iso))
+                return;
+            // Dragging backwards means the range runs the other way. That is not the
+            // ambiguous case the restart rule guards against - here the direction was
+            // spelled out by the gesture - so the ends are simply sorted.
+            this._commitRange(origin, iso);
+        };
+    }
+    async _handleYearMenuToggle(e) {
+        this._yearMenuOpen = e.newState === 'open';
+        if (!this._yearMenuOpen)
+            return;
+        // The menu sets its own focus after its update resolves, so waiting for that
+        // first is what keeps it from overwriting the line below.
+        const menu = this.shadowRoot?.querySelector('nldd-menu');
+        await menu?.updateComplete;
+        // The list runs to a hundred years or more, and the menu starts on its first
+        // item - so an arrow key walks a century back from the year you are actually
+        // looking at. Move to the year in view instead, and scroll it into sight.
+        const focusSelected = () => {
+            const selected = this.shadowRoot?.querySelector('nldd-menu-item[selected]');
+            if (!selected || this.shadowRoot?.activeElement === selected)
+                return;
+            // Both of these scroll every scrollable ancestor by default, and the page
+            // is one of them - opening the menu would shift what is behind it.
+            selected.scrollIntoView({ block: 'nearest' });
+            selected.focus({ preventScroll: true });
+        };
+        requestAnimationFrame(focusSelected);
+        // The menu finishes its own opening sequence after that frame and takes focus
+        // back, so that one hand-over is redirected rather than raced with a longer
+        // delay. Properly this belongs in nldd-menu: any menu with a current value
+        // should open on it.
+        menu?.addEventListener('focusin', (event) => {
+            if (event.target === menu)
+                focusSelected();
+        }, { once: true });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this._focused)
+            this._focused = this._initialFocus();
+        if (!this._view)
+            this._view = firstOfMonth(this._focused);
+        this._stackedQuery = window.matchMedia(`(max-width: ${breakpoints.smMax}), (pointer: coarse)`);
+        this._stacked = this._stackedQuery.matches;
+        this._stackedQuery.addEventListener('change', this._handleStackedChange);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('pointerup', this._onDocumentPointerUp);
+        this._stackedQuery?.removeEventListener('change', this._handleStackedChange);
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        // A consumer setting a value moves the calendar to it, but typing in a
+        // connected field should not yank the month away mid-selection, so the view
+        // only follows when the new value sits outside the month on screen.
+        if (changed.has('value') || changed.has('start') || changed.has('end')) {
+            const anchorDate = this.range ? (this.start || this.end) : this.value;
+            if (anchorDate && firstOfMonth(anchorDate) !== this._view) {
+                this._view = firstOfMonth(anchorDate);
+                this._focused = anchorDate;
+            }
+        }
+    }
+    updated() {
+        // Mirrored to an attribute so the host's own rules can key on it; consumers
+        // are not meant to set it.
+        this.toggleAttribute('stacked', this._stacked);
+        // Two associations the menu cannot make itself here. It resolves a string
+        // anchor with document.getElementById, which cannot see into a shadow root,
+        // so the element is handed over directly. And it leaves the native invoker
+        // link to the anchor component - nldd-button sets that up via `expandable` -
+        // which a plain button does not do, so without this the title never opens
+        // anything.
+        const menu = this.shadowRoot?.querySelector('nldd-menu');
+        const title = this.shadowRoot?.querySelector('.date-picker__title-button');
+        if (menu && title) {
+            if (menu.anchorElement !== title)
+                menu.anchorElement = title;
+            if (title.popoverTargetElement !== menu)
+                title.popoverTargetElement = menu;
+        }
+        if (!this._restoreFocus)
+            return;
+        this._restoreFocus = false;
+        this._focusedCell()?.focus();
+    }
+    _focusedCell() {
+        return this.shadowRoot?.querySelector('.date-picker__day[tabindex="0"]') ?? null;
+    }
+    /**
+     * Focus lands on the day carrying the roving tabindex - the chosen date, or
+     * today when there is none. Without this an overlay that focuses the calendar
+     * would land on its host, which forwards nowhere, leaving the arrow keys dead
+     * until the user has tabbed into the grid themselves.
+     */
+    focus(options) {
+        const cell = this._focusedCell();
+        if (cell)
+            cell.focus(options);
+        else
+            super.focus(options);
+    }
+    _initialFocus() {
+        const preferred = (this.range ? this.start : this.value) || todayIso();
+        return clampIso(preferred, this._min, this._max);
+    }
+    // — Bounds ———————————————————————————————————————————————————————————————
+    get _min() {
+        return resolveDateBound(this.min);
+    }
+    get _max() {
+        return resolveDateBound(this.max);
+    }
+    /** Out of bounds means unreachable; unavailable means visible but not selectable. */
+    _isOutOfBounds(iso) {
+        const min = this._min;
+        const max = this._max;
+        return Boolean((min && iso < min) || (max && iso > max));
+    }
+    _isUnavailable(iso) {
+        if (this._isOutOfBounds(iso))
+            return true;
+        return this.isDateUnavailable?.(iso) ?? false;
+    }
+    // — Grid —————————————————————————————————————————————————————————————————
+    /** Weekday numbers in display order, honouring first-day-of-week. */
+    get _weekdays() {
+        return Array.from({ length: 7 }, (_, i) => (this.firstDayOfWeek + i) % 7);
+    }
+    /**
+     * Six weeks of real dates, including the days either side of the month. Those
+     * neighbours are selectable and jump the calendar to their own month, which
+     * beats paging for a date a few days over the boundary. Every cell announces
+     * its full date, so a 1st from the next month can never be mistaken for this
+     * one.
+     *
+     * Always six rows: a month that needs five would otherwise resize the calendar
+     * as you page through it, which in a popover moves everything below it.
+     */
+    get _weeks() {
+        const lead = (weekdayOf(this._view) - this.firstDayOfWeek + 7) % 7;
+        const start = addDays(this._view, -lead);
+        return Array.from({ length: 6 }, (_, week) => Array.from({ length: 7 }, (_, day) => addDays(start, week * 7 + day)));
+    }
+    _isOutsideMonth(iso) {
+        return iso.slice(0, 7) !== this._view.slice(0, 7);
+    }
+    /**
+     * The ISO week of the row, taken from its Thursday. ISO weeks are anchored on
+     * Thursday, so reading it off any other day would give the wrong number for
+     * rows that do not start on Monday.
+     */
+    _weekNumber(week) {
+        const thursday = week.find((iso) => weekdayOf(iso) === 4) ?? week[0];
+        const date = parseIso(thursday);
+        if (!date)
+            return 0;
+        const firstThursday = new Date(Date.UTC(date.getUTCFullYear(), 0, 4));
+        firstThursday.setUTCDate(firstThursday.getUTCDate() - ((firstThursday.getUTCDay() + 6) % 7) + 3);
+        return 1 + Math.round((date.getTime() - firstThursday.getTime()) / (7 * 24 * 60 * 60 * 1000));
+    }
+    get _viewYear() {
+        return Number(this._view.slice(0, 4));
+    }
+    get _viewMonth() {
+        return Number(this._view.slice(5, 7));
+    }
+    /**
+     * Years offered in the title menu. Bounded by min and max where they are set,
+     * because those already say which years can be reached; without them a window
+     * wide enough for a birthdate on one side and for planning on the other.
+     */
+    get _years() {
+        const current = Number(todayIso().slice(0, 4));
+        let first = this._min ? Number(this._min.slice(0, 4)) : current - 120;
+        let last = this._max ? Number(this._max.slice(0, 4)) : current + 20;
+        // The year on screen must always be in the list, or the menu would show no
+        // selection at all after paging past the edge of the window.
+        first = Math.min(first, this._viewYear);
+        last = Math.max(last, this._viewYear);
+        return Array.from({ length: last - first + 1 }, (_, i) => first + i);
+    }
+    _handleYearSelect(year) {
+        this._view = firstOfMonth(clampIso(withYear(this._view, year), this._min, this._max));
+        this._focused = clampIso(withYear(this._focused, year), this._min, this._max);
+        this._restoreFocus = Boolean(this._focusedCell());
+        // Radio items keep their menu open, which is right when you are ticking
+        // several - but here one year is the whole answer.
+        const menu = this.shadowRoot?.querySelector('nldd-menu');
+        if (menu?.matches(':popover-open'))
+            menu.hidePopover?.();
+    }
+    /**
+     * Dutch writes month names in lower case, so the capital here is the ordinary
+     * sentence-initial one of a heading, not a proper noun. The translation itself
+     * stays lower case because it is reused mid-sentence in the day labels.
+     */
+    get _title() {
+        const month = this._t(`components.date-picker.${MONTH_KEYS[this._viewMonth - 1]}-capitalize`);
+        return `${month} ${this._viewYear}`;
+    }
+    // — Cell state ———————————————————————————————————————————————————————————
+    _isSelected(iso) {
+        if (!this.range)
+            return iso === this.value;
+        // Both ends of the preview, not just the committed ones: while drawing, the
+        // day under the pointer is the end date and has to look like it, or the band
+        // runs to a day that carries no mark at all.
+        const [from, to] = this._previewSpan();
+        if (from && to)
+            return iso === from || iso === to;
+        return iso === this.start || iso === this.end;
+    }
+    /**
+     * How the range band runs through this day. Derived from one span so the
+     * pointer preview and a committed period draw identically, and so the band
+     * stops at the middle of the first and last day instead of filling their whole
+     * cell - the fill marks the end, the band only connects the days between.
+     */
+    _bandFor(iso) {
+        if (!this.range)
+            return 'none';
+        const [from, to] = this._previewSpan();
+        if (!from || !to || from === to)
+            return 'none';
+        if (iso > from && iso < to)
+            return 'full';
+        if (iso === from)
+            return 'start';
+        if (iso === to)
+            return 'end';
+        return 'none';
+    }
+    /** Strictly between the ends, including the pointer preview while drawing. */
+    _isInRange(iso) {
+        return this._bandFor(iso) === 'full';
+    }
+    _previewSpan() {
+        if (this.start && this.end)
+            return [this.start, this.end];
+        if (this._anchor && this._hover) {
+            return this._anchor < this._hover ? [this._anchor, this._hover] : [this._hover, this._anchor];
+        }
+        return ['', ''];
+    }
+    _isToday(iso) {
+        return iso === todayIso();
+    }
+    /**
+     * Alleen de datum, zonder de aanduidingen die aan een cel hangen. De
+     * aankondigingen gebruiken deze: die van het hele cellabel maakte er
+     * "vrijdag 10 juli 2026, begin van de periode tot en met ..." van, waarin de
+     * celstatus midden in de zin belandt.
+     */
+    _dateText(iso) {
+        const date = parseIso(iso);
+        if (!date)
+            return '';
+        const weekday = this._t(`components.date-picker.${WEEKDAY_KEYS[date.getUTCDay()]}-lowercase`);
+        const month = this._t(`components.date-picker.${MONTH_KEYS[date.getUTCMonth()]}-lowercase`);
+        return this._t('components.date-picker.date-label', {
+            weekday,
+            day: date.getUTCDate(),
+            month,
+            year: date.getUTCFullYear(),
+        });
+    }
+    _dayLabel(iso) {
+        const date = parseIso(iso);
+        if (!date)
+            return '';
+        const parts = [this._dateText(iso)];
+        if (this._isToday(iso))
+            parts.push(this._t('components.date-picker.today-lowercase'));
+        const awaitingSecond = this.range && this._anchor !== '' && this.end === '';
+        if (awaitingSecond && iso === this._anchor) {
+            parts.push(this._t('components.date-picker.range-anchor-lowercase-label'));
+        }
+        else {
+            if (this.range && iso === this.start)
+                parts.push(this._t('components.date-picker.range-start-lowercase-label'));
+            if (this.range && iso === this.end)
+                parts.push(this._t('components.date-picker.range-end-lowercase-label'));
+        }
+        if (this._isInRange(iso))
+            parts.push(this._t('components.date-picker.in-range-lowercase-label'));
+        if (this._isUnavailable(iso))
+            parts.push(this._t('components.date-picker.unavailable-lowercase-label'));
+        return parts.join(', ');
+    }
+    // — Navigation ———————————————————————————————————————————————————————————
+    _shiftView(months) {
+        const next = addMonths(this._view, months);
+        this._view = next;
+        // Keep the roving tabindex on an equivalent day in the new month so the
+        // keyboard does not jump back to the 1st on every month change.
+        const day = Math.min(Number(this._focused.slice(8, 10)), Number(lastOfMonth(next).slice(8, 10)));
+        this._focused = clampIso(`${next.slice(0, 7)}-${String(day).padStart(2, '0')}`, this._min, this._max);
+        this._restoreFocus = Boolean(this._focusedCell());
+    }
+    _moveFocus(iso) {
+        const target = clampIso(iso, this._min, this._max);
+        this._focused = target;
+        if (firstOfMonth(target) !== this._view)
+            this._view = firstOfMonth(target);
+        // Only reached from the keydown handler, so the ring is certain here. Stated
+        // rather than asked of the modality module, which depends on that keydown
+        // having reached the document listener before focus moves - an ordering this
+        // component has no reason to rely on.
+        this._focusFromKeyboard = true;
+        this._restoreFocus = true;
+    }
+    _handleKeydown(e) {
+        const iso = this._focused;
+        let next = '';
+        switch (e.key) {
+            case 'ArrowLeft':
+                next = addDays(iso, -1);
+                break;
+            case 'ArrowRight':
+                next = addDays(iso, 1);
+                break;
+            case 'ArrowUp':
+                next = addDays(iso, -7);
+                break;
+            case 'ArrowDown':
+                next = addDays(iso, 7);
+                break;
+            case 'Home':
+                next = startOfWeek(iso, this.firstDayOfWeek);
+                break;
+            case 'End':
+                next = addDays(startOfWeek(iso, this.firstDayOfWeek), 6);
+                break;
+            case 'PageUp':
+                next = addMonths(iso, e.shiftKey ? -12 : -1);
+                break;
+            case 'PageDown':
+                next = addMonths(iso, e.shiftKey ? 12 : 1);
+                break;
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                this._select(iso);
+                return;
+            default:
+                return;
+        }
+        e.preventDefault();
+        this._moveFocus(next);
+    }
+    // — Selection ————————————————————————————————————————————————————————————
+    _handleDayClick(iso) {
+        // A drag ends with a click on the day it was released over; that day was
+        // already handled on pointerup, so this one would start a second range.
+        if (this._suppressClick) {
+            this._suppressClick = false;
+            return;
+        }
+        this._select(iso);
+    }
+    _handleDayHover(iso) {
+        if (this.range && this._anchor)
+            this._hover = iso;
+    }
+    _handleDayFocusIn(e) {
+        const fromPointer = this._focusFromKeyboard ? false : isPointerMode();
+        this._focusFromKeyboard = false;
+        e.target?.classList?.toggle('is-pointer-focus', fromPointer);
+    }
+    _handleDayFocusOut(e) {
+        e.target?.classList?.remove('is-pointer-focus');
+    }
+    _handleGridLeave() {
+        if (this._dragOrigin)
+            return;
+        this._hover = '';
+    }
+    /**
+     * Dragging is for pointer devices only. On touch a horizontal drag across a
+     * calendar is indistinguishable from scrolling the page, and taking the
+     * gesture would leave a sheet you cannot scroll. Tapping twice still works
+     * everywhere, so nothing is lost.
+     */
+    _handleDayPointerDown(iso, e) {
+        // Cleared here rather than trusting the click to consume it. After a drag the
+        // click fires on the nearest common ancestor of the day it started on and the
+        // day it ended on - the grid, not a day - so the day handler never runs and a
+        // leftover flag would swallow the next real click instead.
+        this._suppressClick = false;
+        if (!this.range || e.pointerType === 'touch')
+            return;
+        if (this._isUnavailable(iso))
+            return;
+        this._dragOrigin = iso;
+        this._dragged = false;
+        document.addEventListener('pointerup', this._onDocumentPointerUp);
+    }
+    _handleGridPointerMove(e) {
+        if (!this._dragOrigin)
+            return;
+        const iso = this._dayUnderPointer(e);
+        if (!iso || iso === this._dragOrigin)
+            return;
+        // The range only starts once the pointer has left the day it went down on,
+        // so a plain click still runs through the click handler untouched.
+        if (!this._dragged) {
+            this._dragged = true;
+            this._beginRange(this._dragOrigin);
+        }
+        this._hover = iso;
+    }
+    _dayUnderPointer(e) {
+        const element = this.shadowRoot?.elementFromPoint(e.clientX, e.clientY);
+        return element?.closest('.date-picker__day')?.getAttribute('data-date') ?? '';
+    }
+    _select(iso) {
+        if (this._isUnavailable(iso))
+            return;
+        this._focused = iso;
+        // Choosing a neighbouring month's day brings that month into view, so the
+        // selection stays visible instead of sitting on a day that scrolls away.
+        if (this._isOutsideMonth(iso))
+            this._view = firstOfMonth(iso);
+        if (!this.range) {
+            this.value = iso;
+            this._announce(this._t('components.date-picker.date-selected-text', { date: this._dateText(iso) }));
+            this._emit('change', { value: iso });
+            return;
+        }
+        // No anchor, or a finished range: this click starts a new one.
+        if (!this._anchor || (this.start && this.end)) {
+            this._beginRange(iso);
+            return;
+        }
+        // Picking before the anchor completes the period backwards rather than
+        // starting over. The hover preview already draws the band that way, and
+        // dragging backwards already reverses, so restarting here would be the one
+        // behaviour contradicting what the calendar just showed. Beginning again is
+        // still one click away, since a finished period restarts on the next click.
+        this._commitRange(this._anchor, iso);
+    }
+    /** Any blocked day between two ends, inclusive. The endpoints are checked
+     *  before we get here; this is the interior the endpoint checks miss. */
+    _rangeHasUnavailable(from, to) {
+        const [start, end] = from < to ? [from, to] : [to, from];
+        for (let day = start; day <= end; day = addDays(day, 1)) {
+            if (this._isUnavailable(day))
+                return true;
+        }
+        return false;
+    }
+    _commitRange(from, to) {
+        // A range may not span a blocked day. Both ends can be available while a
+        // booked day sits between them, and committing that would fire change with
+        // a period that visibly contains an unavailable date. Keep the anchor so
+        // the user can pick a different end.
+        if (this._rangeHasUnavailable(from, to)) {
+            this._announce(this._t('components.date-picker.range-blocked-text'));
+            return;
+        }
+        this.start = from < to ? from : to;
+        this.end = from < to ? to : from;
+        this._anchor = '';
+        this._hover = '';
+        this._announce(this._t('components.date-picker.range-selected-text', {
+            start: this._dateText(this.start),
+            end: this._dateText(this.end),
+        }));
+        this._emit('change', { start: this.start, end: this.end });
+    }
+    _beginRange(iso) {
+        this._anchor = iso;
+        this.start = iso;
+        this.end = '';
+        this._hover = '';
+        this._announce(this._t('components.date-picker.range-anchor-text', { date: this._dateText(iso) }));
+        this._emit('input', { start: iso, end: '' });
+    }
+    _announce(message) {
+        this._announcement = message;
+    }
+    _emit(type, detail) {
+        this.dispatchEvent(new CustomEvent(type, { detail, bubbles: true, composed: true }));
+    }
+    /**
+     * Whether today can be reached at all. Outside the bounds the button is a lie:
+     * it would clamp to the nearest allowed date, so on a birthdate calendar
+     * "Vandaag" would quietly jump eighteen years back.
+     */
+    get _todayReachable() {
+        return !this._isOutOfBounds(todayIso());
+    }
+    /**
+     * Jumps the calendar back to the current month without choosing anything.
+     * Navigation and selection are kept apart: someone who paged away to look
+     * around wants a way back, not a date they did not ask for.
+     */
+    _handleToday() {
+        const today = todayIso();
+        this._view = firstOfMonth(today);
+        this._focused = today;
+        this._restoreFocus = Boolean(this._focusedCell());
+    }
+    render() {
+        return datePickerTemplate(this);
+    }
+};
+NLDDDatePicker.styles = datePickerStyles;
+__decorate([
+    property({ type: String })
+], NLDDDatePicker.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], NLDDDatePicker.prototype, "start", void 0);
+__decorate([
+    property({ type: String })
+], NLDDDatePicker.prototype, "end", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDDatePicker.prototype, "range", void 0);
+__decorate([
+    property({ type: String })
+], NLDDDatePicker.prototype, "min", void 0);
+__decorate([
+    property({ type: String })
+], NLDDDatePicker.prototype, "max", void 0);
+__decorate([
+    property({ type: Number, attribute: 'first-day-of-week' })
+], NLDDDatePicker.prototype, "firstDayOfWeek", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'week-numbers' })
+], NLDDDatePicker.prototype, "weekNumbers", void 0);
+__decorate([
+    property({ type: String, attribute: 'accessible-label' })
+], NLDDDatePicker.prototype, "accessibleLabel", void 0);
+__decorate([
+    property({ attribute: false })
+], NLDDDatePicker.prototype, "isDateUnavailable", void 0);
+__decorate([
+    state()
+], NLDDDatePicker.prototype, "_focused", void 0);
+__decorate([
+    state()
+], NLDDDatePicker.prototype, "_view", void 0);
+__decorate([
+    state()
+], NLDDDatePicker.prototype, "_anchor", void 0);
+__decorate([
+    state()
+], NLDDDatePicker.prototype, "_hover", void 0);
+__decorate([
+    state()
+], NLDDDatePicker.prototype, "_announcement", void 0);
+__decorate([
+    state()
+], NLDDDatePicker.prototype, "_yearMenuOpen", void 0);
+__decorate([
+    state()
+], NLDDDatePicker.prototype, "_stacked", void 0);
+NLDDDatePicker = __decorate([
+    customElement('nldd-date-picker')
+], NLDDDatePicker);
+export { NLDDDatePicker };
+//# sourceMappingURL=date-picker.js.map