q2-tecton-elements 1.71.4 → 1.73.0

package/dist/collection/utils/date-picker/date-picker-helpers.js

@@ -0,0 +1,239 @@
+import { addDays, format as formatDate, formatISO, isAfter, isBefore, isSameDay, isValid as isValidDate, } from "date-fns";
+import { loc } from "../index";
+const defaultDisplayFormat = 'MM/DD/YYYY';
+const supportedDisplayFormats = [
+    defaultDisplayFormat,
+    'DD/MM/YYYY',
+    'MM-DD-YYYY',
+    'DD-MM-YYYY',
+    'YYYY-MM-DD',
+];
+const defaultDatePickerStringKeys = {
+    'Choose a date': 'tecton.element.datePicker.calendarLabel',
+    'Dates are shown in your local time zone.': 'tecton.element.datePicker.disclaimer.localTimeZone',
+};
+const isoDatePattern = /^\d{4}-\d{2}-\d{2}$/;
+const isoLikeDatePattern = /^(\d{4})-(\d{1,2})-(\d{1,2})(?:T.*)?$/;
+const slashDatePattern = /^(\d{1,2})\/(\d{1,2})\/(\d{2}|\d{4})$/;
+/** Determines a year for a month and day when typeable input omits the year. */
+export function buildInputDate(input, assume) {
+    const [month, day, year] = input.split('/');
+    if (!month)
+        return;
+    if (!day)
+        return new Date(new Date().getFullYear(), Number(month) - 1, 1);
+    if (Number(day) <= 0)
+        return;
+    const selectedYear = (year === null || year === void 0 ? void 0 : year.length) === 4 ? Number(year) : Number(assumeYear(month, day, assume));
+    const date = new Date(selectedYear, Number(month) - 1, Number(day));
+    return isValidDate(date) ? date : undefined;
+}
+/** Formats a valid date as an ISO calendar date. */
+export function formatDateISO(value) {
+    if (!isValidDate(value))
+        return;
+    return formatISO(value, { representation: 'date' });
+}
+/** Formats a date for an accessible day label. */
+export function formatDateFull(value) {
+    if (!isValidDate(value))
+        return;
+    return new Intl.DateTimeFormat('en-US', {
+        month: 'long',
+        day: 'numeric',
+        year: 'numeric',
+        weekday: 'long',
+        timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+    }).format(value);
+}
+/** Returns localized abbreviated day names beginning with Sunday. */
+export function getDays() {
+    return [
+        loc('tecton.element.calendar.days.short.Sunday'),
+        loc('tecton.element.calendar.days.short.Monday'),
+        loc('tecton.element.calendar.days.short.Tuesday'),
+        loc('tecton.element.calendar.days.short.Wednesday'),
+        loc('tecton.element.calendar.days.short.Thursday'),
+        loc('tecton.element.calendar.days.short.Friday'),
+        loc('tecton.element.calendar.days.short.Saturday'),
+    ];
+}
+/** Returns localized full day names beginning with Sunday. */
+export function getDaysOfWeek() {
+    return [
+        loc('tecton.element.calendar.days.Sunday'),
+        loc('tecton.element.calendar.days.Monday'),
+        loc('tecton.element.calendar.days.Tuesday'),
+        loc('tecton.element.calendar.days.Wednesday'),
+        loc('tecton.element.calendar.days.Thursday'),
+        loc('tecton.element.calendar.days.Friday'),
+        loc('tecton.element.calendar.days.Saturday'),
+    ];
+}
+/** Parses the date picker's public ISO-only value contract. */
+export function parseDatePickerValue(value) {
+    if (!value || !isoDatePattern.test(value))
+        return;
+    const [year, month, day] = value.split('-').map(Number);
+    return dateFromParts(year, month, day);
+}
+/** Normalizes a legacy string or Moment-like value for the date picker's ISO-only calendar. */
+export function normalizeDatePickerValue(value) {
+    if (!value)
+        return;
+    let date;
+    if (value instanceof Date) {
+        date = value;
+    }
+    else if (isMomentLike(value)) {
+        try {
+            date = value.toDate();
+        }
+        catch (_a) {
+            return;
+        }
+    }
+    else {
+        const input = value.trim();
+        if (!input)
+            return;
+        date = parseDatePickerValue(input);
+        if (!date) {
+            const isoLikeParts = input.match(isoLikeDatePattern);
+            const slashParts = input.match(slashDatePattern);
+            if (isoLikeParts) {
+                date = dateFromParts(Number(isoLikeParts[1]), Number(isoLikeParts[2]), Number(isoLikeParts[3]));
+            }
+            else if (slashParts) {
+                const parsedYear = Number(slashParts[3]);
+                const year = parsedYear < 100 ? (parsedYear >= 69 ? 1900 : 2000) + parsedYear : parsedYear;
+                date = dateFromParts(year, Number(slashParts[1]), Number(slashParts[2]));
+            }
+            else {
+                const parsedDate = new Date(input);
+                date = isValidDate(parsedDate)
+                    ? dateFromParts(parsedDate.getFullYear(), parsedDate.getMonth() + 1, parsedDate.getDate())
+                    : undefined;
+            }
+        }
+    }
+    return formatDateISO(date);
+}
+/** Returns the month and year used to initialize the date picker grid. */
+export function setupMonthYear(value = new Date()) {
+    return {
+        monthIndex: value.getMonth(),
+        selectedYear: value.getFullYear(),
+    };
+}
+/** Returns the enabled day indexes represented by a calendar checksum. */
+export function getValidDaysOfWeek(checksum = 127) {
+    const validDays = [];
+    for (let day = 0; day < 7; day++) {
+        if (checksum & (1 << day))
+            validDays.push(day);
+    }
+    return checksum > 0 ? validDays : [];
+}
+/** Determines whether a date satisfies the configured bounds and cutoff. */
+export function baseValidation(dateValidators, now, newDate) {
+    const isNewDateBeforeStartDate = isAfter(dateValidators === null || dateValidators === void 0 ? void 0 : dateValidators.startDate, newDate);
+    const isNewDateAfterEndDate = isBefore(dateValidators === null || dateValidators === void 0 ? void 0 : dateValidators.endDate, newDate);
+    const isNowAfterCutoffTime = isSameDay(now, newDate) && isAfter(now, dateValidators === null || dateValidators === void 0 ? void 0 : dateValidators.cutOffTime);
+    return !(isNewDateBeforeStartDate || isNowAfterCutoffTime || isNewDateAfterEndDate);
+}
+/** Determines whether a date's weekday is enabled. */
+export function validateAgainstChecksum(validDaysOfWeek, date) {
+    return validDaysOfWeek.includes(date.getDay());
+}
+/** Determines whether a date is absent from a blacklist. */
+export function validateAgainstBlacklist(invalidDates, date) {
+    return !validateAgainstWhitelist(invalidDates, date);
+}
+/** Determines whether a date is present in a whitelist. */
+export function validateAgainstWhitelist(validDates, date) {
+    return validDates.some(validDate => isSameDay(validDate, date));
+}
+function assumeYear(month, day, assume) {
+    const monthDay = `${month.padStart(2, '0')}/${day.padStart(2, '0')}`;
+    const now = new Date();
+    const currentMonthDay = `${now.getMonth() + 1}`.padStart(2, '0') + `/${now.getDate()}`.padStart(2, '0');
+    let year = now.getFullYear();
+    if (assume === 'future' && currentMonthDay > monthDay)
+        year++;
+    if (assume === 'past' && currentMonthDay < monthDay)
+        year--;
+    return `${year}`;
+}
+function parseDatePickerValues(values) {
+    return (values || []).map(parseDatePickerValue).filter((date) => !!date);
+}
+function dateFromParts(year, month, day) {
+    const date = new Date(0);
+    date.setFullYear(year, month - 1, day);
+    date.setHours(0, 0, 0, 0);
+    if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day)
+        return;
+    return date;
+}
+function isMomentLike(value) {
+    return typeof value !== 'string' && typeof (value === null || value === void 0 ? void 0 : value.toDate) === 'function';
+}
+/** Formats a date using one of the date picker's supported numeric display formats. */
+export function formatDisplayDate(date, displayFormat) {
+    const separator = displayFormat.includes('-') ? '-' : '/';
+    const month = `${date.getMonth() + 1}`.padStart(2, '0');
+    const day = `${date.getDate()}`.padStart(2, '0');
+    const year = `${date.getFullYear()}`;
+    const dateParts = displayFormat.startsWith('YYYY')
+        ? [year, month, day]
+        : displayFormat.startsWith('DD')
+            ? [day, month, year]
+            : [month, day, year];
+    return dateParts.join(separator);
+}
+/** Formats a date using the legacy Moment-style tokens accepted by q2-calendar. */
+export function formatLegacyDisplayDate(date, displayFormat) {
+    const dateFnsFormat = displayFormat
+        .replace(/[d]/g, 'E')
+        .replace(/[D]/g, 'd')
+        .replace(/[Y]/g, 'y')
+        .replace(/[l]/g, 'P')
+        .replace(/[W]/g, 'I');
+    return formatDate(date, dateFnsFormat);
+}
+/** Determines whether a date satisfies every configured selection constraint. */
+export function isDateSelectable(date, constraints) {
+    const cutoffTime = new Date(constraints.cutoffTime || '');
+    const withinBounds = baseValidation({
+        startDate: parseDatePickerValue(constraints.startDate),
+        endDate: parseDatePickerValue(constraints.endDate),
+        cutOffTime: isValidDate(cutoffTime) ? cutoffTime : undefined,
+    }, new Date(), date);
+    const validDates = parseDatePickerValues(constraints.validDates);
+    const matchesAllowedDates = (validDates === null || validDates === void 0 ? void 0 : validDates.length)
+        ? validateAgainstWhitelist(validDates, date)
+        : validateAgainstChecksum(getValidDaysOfWeek(constraints.daysOfWeekChecksum), date);
+    return (withinBounds &&
+        matchesAllowedDates &&
+        validateAgainstBlacklist(parseDatePickerValues(constraints.invalidDates), date));
+}
+/** Determines whether every date in an inclusive range is selectable. */
+export function isRangeSelectable(start, end, constraints) {
+    for (let date = start; date.getTime() <= end.getTime(); date = addDays(date, 1)) {
+        if (!isDateSelectable(date, constraints))
+            return false;
+    }
+    return true;
+}
+/** Resolves a date-picker localization key or mapped default string. */
+export function localizeDatePickerString(value, substitutions = {}) {
+    if (!value)
+        return '';
+    return loc(defaultDatePickerStringKeys[value] || value, substitutions);
+}
+/** Returns a supported display format, falling back to the date-picker default. */
+export function normalizeDisplayFormat(displayFormat) {
+    const normalizedFormat = displayFormat === null || displayFormat === void 0 ? void 0 : displayFormat.toUpperCase();
+    return supportedDisplayFormats.includes(normalizedFormat) ? normalizedFormat : defaultDisplayFormat;
+}

package/dist/collection/utils/date-picker/date-picker-types.js

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

package/dist/collection/utils/index.js

@@ -244,7 +244,7 @@ export function renderLabel(target) {
     return (h("label", { htmlFor: target.inputId, class: labelClasses.join(' ') }, h("slot", { name: "label" }, label ? loc(label) : undefined, helpText)));
 }
 export function hasSlotContent(target, slotName) {
-    return target.querySelector(`[slot="${slotName}"]`) !== null;
+    return Array.from(target.children).some(child => child.getAttribute('slot') === slotName);
 }
 export function handleAriaLabel(target) {
     const { ariaLabel } = target;
@@ -336,7 +336,7 @@ export const resizeIframe = () => {
 // Handling color attribute (deprecated)
 export const handleColor = (target) => {
     if (!target.intent && ['primary', 'secondary'].includes(target.color)) {
-        target.intent = `workflow-${target.color}`;
+        target.intent = target.color;
         target.color = undefined;
     }
 };

package/dist/collection/utils/test/vr-helpers.js

@@ -40,6 +40,7 @@ const getDefaultEnStrings = () => {
 const BASE_THEME_CSS_CONTENT = readFileSync(join(__dirname, '../../../', BASE_THEME_CSS), 'utf8');
 const UTILITIES_CSS_CONTENT = readFileSync(join(__dirname, '../../../', UTILITIES_CSS), 'utf8');
 export const setupPage = async (page, content, options = {}) => {
+    var _a;
     // Bootstrap localization BEFORE setContent so that any Stencil class-field initializers
     // that call loc() (e.g., q2-select's `listLabel: string = loc('tecton.element.select.listLabel')`)
     // see the shim during hydration. addInitScript runs on every new document before any page script.
@@ -92,15 +93,24 @@ export const setupPage = async (page, content, options = {}) => {
             };
         }, mergedStrings);
     }
-    await page.setContent(content);
+    // Inject --t-prefers-motion before any element is parsed so the @container style()
+    // query in host.scss matches from the very first component render, preventing the
+    // race where Stencil's microtask-scheduled render fires before the CSS variable is
+    // set and 0.4s transitions start at full speed.
+    const motion = (_a = options.motion) !== null && _a !== void 0 ? _a : 'reduced';
+    await page.setContent(`<style>body{--t-prefers-motion:"${motion}"!important}</style>${content}`);
     // `data-tecton-module` gates the rules in q2-tecton-utilities.css (focus rings,
     // normalize, etc.). Match the preview page's <body data-tecton-module>.
-    await page.evaluate(() => document.body.setAttribute('data-tecton-module', ''));
+    await page.evaluate(() => {
+        document.body.setAttribute('data-tecton-module', '');
+    });
     // Mirror q2-tecton-sdk's insertDefaultThemeTag: prepend theme + utilities to
     // <head> so they sit BEFORE the component-injected <style> tags Stencil emits.
     // addStyleTag would append, placing utilities last in the cascade — its
     // [data-tecton-module] *:focus-visible rule ties on specificity with component
     // focus rules, so document order decides, and appending makes utilities win.
+    // These arrive after Stencil's first render (evaluate runs in a new browser task),
+    // but the re-render is fast and the cascade position is what matters.
     await page.evaluate(({ baseTheme, utilities }) => {
         const head = document.head;
         const firstChild = head.firstChild;
@@ -121,4 +131,8 @@ export const setupPage = async (page, content, options = {}) => {
         });
     }
     await page.locator('[stencil-hydrated]').first().waitFor();
+    // Two rAFs after hydration: frame 1 lets microtask-batched nested renders finish
+    // (q2-btn inside q2-input/q2-calendar, q2-pill inside q2-list); frame 2 ensures
+    // the layout from those nested renders is committed before the screenshot.
+    await page.evaluate(() => new Promise(r => requestAnimationFrame(() => requestAnimationFrame(() => r()))));
 };