@pine-ds/core 5.0.0-mercury.0 → 5.0.0

package/dist/collection/components/pds-datepicker/calendar-portal.js

@@ -0,0 +1,99 @@
+import { closest } from "../../utils/closest";
+import { findPortalTarget } from "../../utils/portal-target";
+/**
+ * Where the open calendar lives: a `div` in `document.body`, or in the nearest `<dialog>` so it
+ * shares a modal's top layer, outside any `overflow: hidden` or transformed ancestor that would
+ * clip or misplace a fixed-position popup. The portal has its own shadow root carrying the
+ * datepicker's styles, so the calendar looks the same there without any global CSS.
+ */
+export class CalendarPortal {
+    constructor(datepicker) {
+        this.datepicker = datepicker;
+        /** The custom properties copyContext set on the host, cleared before it copies again. */
+        this.copiedProperties = [];
+        this.host = document.createElement('div');
+        this.host.className = CalendarPortal.className;
+        // So an overlay can tell whether a click in this calendar belongs to a datepicker inside it.
+        this.host.pdsDatepicker = datepicker;
+        // The shared stylesheet's `:host` rules match this div too; keep it out of layout, so it never
+        // adds a line to the page, while it still passes `dir`, `lang` and the theme down.
+        this.host.style.display = 'contents';
+        this.root = this.host.attachShadow({ mode: 'open' });
+    }
+    /**
+     * Moves the calendar into the portal, mounting the portal first. Context is copied when the portal
+     * is attached or the locale changes, not on every render while it's open (in range mode, every
+     * hovered day). A theme set on an ancestor while the calendar is open applies when it next opens.
+     */
+    mount(calendar, locale) {
+        if (!this.host.isConnected) {
+            findPortalTarget(this.datepicker).appendChild(this.host);
+            this.copyContext(locale);
+        }
+        else if (locale !== this.locale) {
+            this.copyContext(locale);
+        }
+        if (calendar.parentNode !== this.root)
+            this.root.appendChild(calendar);
+    }
+    remove() {
+        this.host.remove();
+    }
+    /** Whether a node is the portal or inside it, as a focus or pointer target. */
+    contains(node) {
+        return !!node && (node === this.host || this.root.contains(node));
+    }
+    /**
+     * Carries over what the calendar would otherwise inherit from the datepicker: its styles, the
+     * reading direction and language, a theme set on an ancestor, and size overrides.
+     */
+    copyContext(locale) {
+        var _a, _b;
+        this.locale = locale;
+        const source = this.datepicker.shadowRoot;
+        if (source) {
+            if ((_a = source.adoptedStyleSheets) === null || _a === void 0 ? void 0 : _a.length) {
+                this.root.adoptedStyleSheets = source.adoptedStyleSheets;
+            }
+            else if (!this.root.querySelector('style')) {
+                source.querySelectorAll('style').forEach((style) => this.root.appendChild(style.cloneNode(true)));
+            }
+        }
+        const computed = getComputedStyle(this.datepicker);
+        this.host.dir = computed.direction || 'ltr';
+        // So assistive tech reads the month and day names in the calendar's own language.
+        this.host.lang = locale;
+        this.copyCustomProperties(computed);
+        // Across shadow boundaries: a theme set above an enclosing component still applies.
+        const theme = (_b = (closest('[data-theme]', this.datepicker) || null)) === null || _b === void 0 ? void 0 : _b.getAttribute('data-theme');
+        if (theme) {
+            this.host.setAttribute('data-theme', theme);
+        }
+        else {
+            this.host.removeAttribute('data-theme');
+        }
+    }
+    /**
+     * Custom properties set on an ancestor of the datepicker that isn't an ancestor of the portal,
+     * as a token override on a card or panel, or the datepicker's own size properties: each one whose
+     * value at the datepicker differs from where the portal mounts is set on the portal host.
+     */
+    copyCustomProperties(computed) {
+        for (const property of this.copiedProperties)
+            this.host.style.removeProperty(property);
+        this.copiedProperties = [];
+        const parent = this.host.parentElement;
+        const outside = parent ? getComputedStyle(parent) : null;
+        for (let i = 0; i < computed.length; i++) {
+            const property = computed[i];
+            if (!property.startsWith('--'))
+                continue;
+            const value = computed.getPropertyValue(property);
+            if (outside && value === outside.getPropertyValue(property))
+                continue;
+            this.host.style.setProperty(property, value.trim());
+            this.copiedProperties.push(property);
+        }
+    }
+}
+CalendarPortal.className = 'pds-datepicker-calendar-portal';

package/dist/collection/components/pds-datepicker/date-utils.js

@@ -0,0 +1,174 @@
+/**
+ * Date-only helpers for pds-datepicker. Dates are `YYYY-MM-DD` strings and all arithmetic runs in
+ * UTC, so a date never shifts by a day with the viewer's time zone or a daylight-saving change.
+ */
+const ISO_DATE = /^(\d{4})-(\d{2})-(\d{2})$/;
+/** Parses a `YYYY-MM-DD` string to a UTC `Date`, or `null` when it isn't a real calendar date. */
+export function parseIsoDate(value) {
+    const match = ISO_DATE.exec((value !== null && value !== void 0 ? value : '').trim());
+    if (!match)
+        return null;
+    const [, year, month, day] = match.map(Number);
+    const date = new Date(Date.UTC(year, month - 1, day));
+    // Rejects dates like 2026-02-30, which Date.UTC would roll into March.
+    return date.getUTCFullYear() === year && date.getUTCMonth() === month - 1 && date.getUTCDate() === day ? date : null;
+}
+export function toIsoDate(date) {
+    return date.toISOString().slice(0, 10);
+}
+/** Today in the viewer's time zone, as a UTC date. */
+export function today() {
+    const now = new Date();
+    return new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate()));
+}
+export function addDays(date, days) {
+    return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate() + days));
+}
+/** Moves by whole months, keeping the day where it exists (Jan 31 + 1 month is Feb 28 or 29). */
+export function addMonths(date, months) {
+    const first = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + months, 1));
+    const lastDay = daysInMonth(first.getUTCFullYear(), first.getUTCMonth());
+    return new Date(Date.UTC(first.getUTCFullYear(), first.getUTCMonth(), Math.min(date.getUTCDate(), lastDay)));
+}
+export function daysInMonth(year, month) {
+    return new Date(Date.UTC(year, month + 1, 0)).getUTCDate();
+}
+export function isSameDay(a, b) {
+    return !!a && !!b && a.getTime() === b.getTime();
+}
+/** Clamps a date into the `[min, max]` range; either bound may be missing. */
+export function clampDate(date, min, max) {
+    if (min && date < min)
+        return min;
+    if (max && date > max)
+        return max;
+    return date;
+}
+export function isOutOfRange(date, min, max) {
+    return (!!min && date < min) || (!!max && date > max);
+}
+/** The column (0–6) a date falls in, for a week starting on `firstDayOfWeek` (0 = Sunday). */
+export function weekdayColumn(date, firstDayOfWeek) {
+    return (date.getUTCDay() - firstDayOfWeek + 7) % 7;
+}
+/**
+ * The month's weeks, each seven cells long. Days from the neighbouring months are `null`, so the
+ * grid only offers dates in the month on view.
+ */
+export function monthWeeks(year, month, firstDayOfWeek) {
+    const first = new Date(Date.UTC(year, month, 1));
+    const cells = Array(weekdayColumn(first, firstDayOfWeek)).fill(null);
+    for (let day = 1; day <= daysInMonth(year, month); day++) {
+        cells.push(new Date(Date.UTC(year, month, day)));
+    }
+    while (cells.length % 7 !== 0)
+        cells.push(null);
+    const weeks = [];
+    for (let i = 0; i < cells.length; i += 7)
+        weeks.push(cells.slice(i, i + 7));
+    return weeks;
+}
+/**
+ * The locale's first day of the week (0 = Sunday), from `Intl.Locale` week info where the browser
+ * has it. Falls back to Sunday.
+ */
+export function localeFirstDayOfWeek(locale) {
+    var _a, _b, _c;
+    // Intl.Locale is newer than the library's ES2017 typings.
+    const IntlLocale = Intl.Locale;
+    if (!IntlLocale)
+        return 0;
+    try {
+        const intlLocale = new IntlLocale(locale);
+        const firstDay = (_b = (_a = intlLocale.getWeekInfo) === null || _a === void 0 ? void 0 : _a.call(intlLocale).firstDay) !== null && _b !== void 0 ? _b : (_c = intlLocale.weekInfo) === null || _c === void 0 ? void 0 : _c.firstDay;
+        // Intl numbers the days 1 (Monday) to 7 (Sunday).
+        return typeof firstDay === 'number' ? firstDay % 7 : 0;
+    }
+    catch (_d) {
+        return 0;
+    }
+}
+/**
+ * Weekday names, starting from `firstDayOfWeek`: a short form for the column heading and the long
+ * form for assistive tech. Latin-script names shorten to two letters (Su Mo, lu ma, Mo Di), as the
+ * admin date picker does, while the seven stay distinct; other scripts keep the locale's short form,
+ * which is already compact.
+ */
+export function weekdayNames(locale, firstDayOfWeek) {
+    const shortFormat = dateFormatter(locale, { weekday: 'short' });
+    const longFormat = dateFormatter(locale, { weekday: 'long' });
+    // 2023-01-01 was a Sunday.
+    const days = Array.from({ length: 7 }, (_, i) => new Date(Date.UTC(2023, 0, 1 + ((firstDayOfWeek + i) % 7))));
+    const shorts = days.map((date) => shortFormat.format(date).replace(/\.$/, ''));
+    const latin = shorts.every((name) => /^[A-Za-z\u00C0-\u024F]+$/.test(name));
+    const twoLetters = shorts.map((name) => name.slice(0, 2));
+    const useTwoLetters = latin && new Set(twoLetters.map((name) => name.toLowerCase())).size === 7;
+    return days.map((date, i) => ({
+        short: useTwoLetters ? twoLetters[i] : shortFormat.format(date),
+        long: longFormat.format(date),
+    }));
+}
+/** The locale if the browser supports it, otherwise `en-US`, so a bad tag never throws while rendering. */
+export function supportedLocale(locale) {
+    var _a;
+    try {
+        return (_a = Intl.DateTimeFormat.supportedLocalesOf(locale || [])[0]) !== null && _a !== void 0 ? _a : 'en-US';
+    }
+    catch (_b) {
+        return 'en-US';
+    }
+}
+/**
+ * A formatter for the UTC dates these helpers return. Build it once per render, not per day.
+ * Always on the Gregorian calendar the grid is laid out in, while keeping the locale's language and
+ * digits: some locales default to another calendar (Persian for `fa`, Buddhist for `th`).
+ */
+export function dateFormatter(locale, options) {
+    // `calendar` is newer than the library's ES2017 typings.
+    return new Intl.DateTimeFormat(locale, Object.assign(Object.assign({}, options), { timeZone: 'UTC', calendar: 'gregory' }));
+}
+export function formatDate(date, locale, options) {
+    return dateFormatter(locale, options).format(date);
+}
+/**
+ * Month-day mode's year. A leap year, so February has its 29th; every date the mode holds is in it,
+ * and the value drops it (`--MM-DD`).
+ */
+export const MONTH_DAY_YEAR = 2000;
+const MONTH_DAY = /^--(\d{2})-(\d{2})$/;
+/** The same month and day in month-day mode's year. */
+export function inMonthDayYear(date) {
+    return new Date(Date.UTC(MONTH_DAY_YEAR, date.getUTCMonth(), date.getUTCDate()));
+}
+/**
+ * Parses a month and day, `--MM-DD` (ISO 8601 without a year), to a date in month-day mode's year.
+ * A full `YYYY-MM-DD` reads as its month and day. `null` when it isn't a real month and day.
+ */
+export function parseMonthDay(value) {
+    const text = (value !== null && value !== void 0 ? value : '').trim();
+    const match = MONTH_DAY.exec(text);
+    if (match)
+        return parseIsoDate(`${MONTH_DAY_YEAR}-${match[1]}-${match[2]}`);
+    const date = parseIsoDate(text);
+    return date && inMonthDayYear(date);
+}
+/** A date's month and day as `--MM-DD`. */
+export function toMonthDay(date) {
+    return `-${toIsoDate(date).slice(4)}`;
+}
+/**
+ * A month's days for month-day mode, which has no weekdays: rows of seven from the 1st, with the
+ * last row filled out with `null`.
+ */
+export function monthDayRows(month) {
+    const cells = [];
+    for (let day = 1; day <= daysInMonth(MONTH_DAY_YEAR, month); day++) {
+        cells.push(new Date(Date.UTC(MONTH_DAY_YEAR, month, day)));
+    }
+    while (cells.length % 7 !== 0)
+        cells.push(null);
+    const rows = [];
+    for (let i = 0; i < cells.length; i += 7)
+        rows.push(cells.slice(i, i + 7));
+    return rows;
+}

package/dist/collection/components/pds-datepicker/datepicker-interface.js

@@ -0,0 +1 @@
+export {};