@mmlogic/components 0.5.3 → 0.5.5

package/dist/collection/components/layout/mrd-layout-section/field-value.js

@@ -3,6 +3,7 @@ import { ClientLayoutItemFieldDataType } from "../../../types/client-layout";
 import { CellRenderer } from "../../../utils/cell-renderer";
 import { t } from "../../../utils/i18n";
 import { formatDate } from "../../../utils/format";
+import { showsEmpty } from "./layout-helpers";
 /** FILE and IMAGE cells share the same download button. */
 function downloadLink(ctx, href, fileName, label) {
     return (h("button", { class: "mrd-layout-section__download-link", onClick: () => href && ctx.on.download({ href, fileName }) }, h("svg", { class: "mrd-layout-section__file-icon", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { fill: "currentColor", d: "M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm-1 7V3.5L18.5 9H13zm-3 8l-3-3 1.41-1.41L10 14.17l4.59-4.58L16 11l-6 6z" })), label));
@@ -106,10 +107,11 @@ export function renderField(ctx, item) {
     if (item.header) {
         return (h("h1", { class: "mrd-layout-section__field-header", key: item.name }, typeof renderedValue === 'string' ? renderedValue : rawValue != null ? String(rawValue) : item.label));
     }
-    if (renderedValue == null)
+    const isEmpty = renderedValue == null;
+    if (isEmpty && !showsEmpty(item))
         return null;
     const isBlock = item.dataType === ClientLayoutItemFieldDataType.TEXTBLOCK
         || item.dataType === ClientLayoutItemFieldDataType.LONGTEXT
         || item.dataType === ClientLayoutItemFieldDataType.JSON;
-    return (h("div", { class: `mrd-layout-section__field${isBlock ? ' mrd-layout-section__field--block' : ''}`, key: item.name }, h("span", { class: "mrd-layout-section__field-label" }, item.label), h("span", { class: "mrd-layout-section__field-value" }, renderedValue, renderHistoryBadge(ctx, item, raw))));
+    return (h("div", { class: `mrd-layout-section__field${isBlock ? ' mrd-layout-section__field--block' : ''}${isEmpty ? ' mrd-layout-section__field--empty' : ''}`, key: item.name }, h("span", { class: "mrd-layout-section__field-label" }, item.label), h("span", { class: "mrd-layout-section__field-value" }, isEmpty ? t('value_empty', ctx.locale) : renderedValue, renderHistoryBadge(ctx, item, raw))));
 }

package/dist/collection/components/layout/mrd-layout-section/layout-helpers.js

@@ -6,6 +6,12 @@ export function viewKeyFor(item) {
         return (_b = (_a = item.relatedClass) !== null && _a !== void 0 ? _a : item.name) !== null && _b !== void 0 ? _b : '';
     return (_d = (_c = item.dataClass) !== null && _c !== void 0 ? _c : item.name) !== null && _d !== void 0 ? _d : '';
 }
+/** Whether a FIELD/RELATION item stays visible on an OBJECT_DASHBOARD when it
+ *  has no value. Reads the flat API flag, falling back to the nested wrappers. */
+export function showsEmpty(item) {
+    var _a, _b, _c, _d, _e;
+    return (_e = (_c = (_a = item.showEmpty) !== null && _a !== void 0 ? _a : (_b = item.field) === null || _b === void 0 ? void 0 : _b.showEmpty) !== null && _c !== void 0 ? _c : (_d = item.relation) === null || _d === void 0 ? void 0 : _d.showEmpty) !== null && _e !== void 0 ? _e : false;
+}
 /** Depth-first flatten of the SECTION/GROUP tree. */
 export function flattenItems(items) {
     const result = [];

package/dist/collection/components/layout/mrd-layout-section/mrd-layout-section.css

@@ -33,6 +33,10 @@
   align-items: center;
   gap: var(--mrd-space-1);
 }
+.mrd-layout-section__field--empty .mrd-layout-section__field-value {
+  color: var(--mrd-color-neutral-400);
+  font-weight: var(--mrd-font-weight-normal);
+}
 .mrd-layout-section__history-wrap {
   position: relative;
   display: inline-flex;

package/dist/collection/components/layout/mrd-layout-section/mrd-layout-section.js

@@ -1,6 +1,7 @@
 import { Host, h } from "@stencil/core";
 import { ClientLayoutItemType, ClientLayoutItemFieldDataType, ClientLayoutNavigateBehaviour, resolveArchetype, ARCHETYPE_DOCUMENT, ARCHETYPE_INVOICE, ARCHETYPE_EMAIL, ARCHETYPE_INVOICE_LINE, } from "../../../types/client-layout";
-import { viewKeyFor, flattenItems, buildContainerHref } from "./layout-helpers";
+import { t } from "../../../utils/i18n";
+import { viewKeyFor, flattenItems, buildContainerHref, showsEmpty } from "./layout-helpers";
 import { renderField } from "./field-value";
 export class MrdLayoutSection {
     constructor() {
@@ -173,19 +174,18 @@ export class MrdLayoutSection {
             return null;
         const links = ((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a._links) !== null && _b !== void 0 ? _b : {});
         const link = links[item.name];
-        if (!link)
-            return null;
         const makeBtn = (href, name) => (h("button", { key: href, class: "mrd-layout-section__relation-link", onClick: () => this.mrdNavigate.emit({ href, label: name }) }, name));
         let valueContent;
-        if ((_c = link.values) === null || _c === void 0 ? void 0 : _c.length) {
+        if ((_c = link === null || link === void 0 ? void 0 : link.values) === null || _c === void 0 ? void 0 : _c.length) {
             valueContent = link.values.map(v => makeBtn(v.href, v.name));
         }
-        else if (link.name) {
+        else if (link === null || link === void 0 ? void 0 : link.name) {
             valueContent = makeBtn(link.href, link.name);
         }
-        if (!valueContent)
+        const isEmpty = !valueContent;
+        if (isEmpty && !showsEmpty(item))
             return null;
-        return (h("div", { class: "mrd-layout-section__field", key: item.name }, h("span", { class: "mrd-layout-section__field-label" }, item.label), h("span", { class: "mrd-layout-section__field-value" }, valueContent)));
+        return (h("div", { class: `mrd-layout-section__field${isEmpty ? ' mrd-layout-section__field--empty' : ''}`, key: item.name }, h("span", { class: "mrd-layout-section__field-label" }, item.label), h("span", { class: "mrd-layout-section__field-value" }, isEmpty ? t('value_empty', this.locale) : valueContent)));
     }
     renderSearch(item) {
         var _a, _b, _c;
@@ -359,7 +359,7 @@ export class MrdLayoutSection {
         const docArchetype = resolveArchetype(this.archetypes, ARCHETYPE_DOCUMENT);
         const invoiceArchetype = !docArchetype ? resolveArchetype(this.archetypes, ARCHETYPE_INVOICE) : undefined;
         const emailArchetype = !docArchetype && !invoiceArchetype ? resolveArchetype(this.archetypes, ARCHETYPE_EMAIL) : undefined;
-        return (h(Host, { key: '0078764a136e7ca9561632718c1b527ec3bc01c5' }, h("div", { key: '0c1428ce20bd7d2bbce467a36b6c25ffa0e6367e', class: "mrd-layout-section" }, docArchetype && this.renderDocumentObject(docArchetype), invoiceArchetype && this.renderInvoiceObject(invoiceArchetype), emailArchetype && this.renderEmailObject(emailArchetype), !docArchetype && !invoiceArchetype && !emailArchetype && this.items.map(item => this.renderItem(item))), this.renderImageModal()));
+        return (h(Host, { key: '8c4e0a0e71d777295010702584b4aa8f7817cafb' }, h("div", { key: 'fe021021eba48acad3d52ee4849ebe355e83c348', class: "mrd-layout-section" }, docArchetype && this.renderDocumentObject(docArchetype), invoiceArchetype && this.renderInvoiceObject(invoiceArchetype), emailArchetype && this.renderEmailObject(emailArchetype), !docArchetype && !invoiceArchetype && !emailArchetype && this.items.map(item => this.renderItem(item))), this.renderImageModal()));
     }
     static get is() { return "mrd-layout-section"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/merge/mrd-merge-view/mrd-merge-view.js

@@ -121,14 +121,14 @@ export class MrdMergeView {
         var _a, _b;
         let stepContent;
         if (this.step === 'search') {
-            stepContent = (h(MergeSearchStep, { key: '3adb36fb46aa7260641a46a2cf27cc0ef320876f', locale: this.locale, searchQuery: this.searchQuery, searchResults: this.searchResults, isLoading: this.isLoading, onSearchInput: this.handleSearchInput, onSelect: this.handleSelect }));
+            stepContent = (h(MergeSearchStep, { key: 'b965c21176faf7844e58cb156958fa1305d07cdc', locale: this.locale, searchQuery: this.searchQuery, searchResults: this.searchResults, isLoading: this.isLoading, onSearchInput: this.handleSearchInput, onSelect: this.handleSelect }));
         }
         else {
             const diff = diffFields(this.fields, this.currentRecord, this.candidate);
             const bLabel = candidateLabel(this.candidate);
             stepContent = this.step === 'compare' ? (h(MergeCompareStep, { locale: this.locale, currentLabel: this.currentLabel, candidateLabel: bLabel, conflicts: diff.conflicts, autoFilled: diff.autoFilled, recordA: this.currentRecord, recordB: (_a = this.candidate) !== null && _a !== void 0 ? _a : {}, resolutions: this.resolutions, openHistoryKey: this.openHistoryKey, onResolve: this.handleResolve, onToggleHistory: this.handleToggleHistory, onChangeCandidate: this.handleChangeCandidate, onContinue: this.handleContinue })) : (h(MergeConfirmStep, { locale: this.locale, candidateLabel: bLabel, conflicts: diff.conflicts, autoFilled: diff.autoFilled, resolutions: this.resolutions, recordB: (_b = this.candidate) !== null && _b !== void 0 ? _b : {}, openHistoryKey: this.openHistoryKey, onToggleHistory: this.handleToggleHistory, onBack: this.handleBack, onConfirm: this.handleConfirm }));
         }
-        return (h(Host, { key: 'e33a6d66a220b28cc9533da78dc274e2d7ec5c4a' }, h("div", { key: 'b5fb1390d86192f9f6f15e3ccb89e2d21d9c7c8b', class: "mrd-merge-view" }, stepContent)));
+        return (h(Host, { key: 'e9cffda6c5cff51f802b044f3d8e417df83b7846' }, h("div", { key: '26690ef2db7489cbf7994191ad19491a0fdd7002', class: "mrd-merge-view" }, stepContent)));
     }
     static get is() { return "mrd-merge-view"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/dev/app.js

@@ -134,7 +134,7 @@ async function initDetailViewTab() {
   table.item          = window.EXAMPLE_COMPANY_VIEW_ITEM;
   table.totalElements = window.EXAMPLE_COMPANIES.length;
   table.pageSize      = 20;
-  table.locale        = 'nl-NL';
+  table.locale        = _locale;
 
   // Register before init(): init() emits mrdLoadPage for page 0 itself.
   table.addEventListener('mrdLoadPage', async (e) => {
@@ -174,7 +174,7 @@ function showCompanyDetail(row) {
     const section = document.createElement('mrd-layout-section');
     section.items = layout.items;
     section.data  = company;
-    section.locale = 'nl-NL';
+    section.locale = _locale;
 
     section.addEventListener('mrdNavigate', (e) => {
       logEvent('mrdNavigate', e.detail);
@@ -1136,16 +1136,57 @@ customElements.whenDefined('mrd-form').then(() => {
   form.addEventListener('mrdFetchAll', (e) => { console.log('[mrdFetchAll]', e.detail); logEvent('mrdFetchAll', e.detail); });
 });
 
-document.getElementById('locale-select').addEventListener('change', (e) => {
-  _locale = e.target.value;
-  const demoForm = document.getElementById('demo-form');
-  if (demoForm) demoForm.locale = _locale;
-  const liveForm = document.getElementById('live-form');
-  if (liveForm) liveForm.locale = _locale;
-  // Update actieve section als aanwezig
-  const section = document.querySelector('#sections-container mrd-layout-section');
-  if (section) section.locale = _locale;
-});
+/* =====================================================================
+   LOCALE CONTROL
+   ===================================================================== */
+
+/** Every component that takes a `locale` prop — the control drives all of them. */
+const LOCALE_HOSTS = [
+  'mrd-form', 'mrd-layout-section', 'mrd-table', 'mrd-merge-view',
+  'mrd-document-container', 'mrd-document-list', 'mrd-document-view',
+  'mrd-invoice-view', 'mrd-email-view',
+].join(', ');
+
+/** Single source of truth: push the selected locale into everything on the page. */
+function applyLocale(locale) {
+  _locale = locale;
+  document.querySelectorAll(LOCALE_HOSTS).forEach((el) => { el.locale = locale; });
+  renderLocaleHint();
+}
+
+/**
+ * Shows what the selected locale does next to what the browser would do on its
+ * own. Those two differ exactly where the `locale` prop earns its keep — the
+ * date fields format by prop, a native date input would follow the browser.
+ */
+function renderLocaleHint() {
+  const hint = document.getElementById('locale-hint');
+  if (!hint) return;
+  const sample = new Date(2026, 6, 6, 14, 30); // 6 July — day > 12 keeps d/m order readable
+  const format = (loc) => new Intl.DateTimeFormat(loc, {
+    year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit',
+  }).format(sample);
+
+  hint.innerHTML =
+    `<span>prop <code>${escHtml(_locale)}</code> → <b>${escHtml(format(_locale))}</b></span>` +
+    `<span>browser <code>${escHtml(navigator.language)}</code> → <b>${escHtml(format(navigator.language))}</b></span>`;
+}
+
+function initLocaleControl() {
+  const select = document.getElementById('locale-select');
+  // The browser locale is worth testing too, even when it is not in the list.
+  if (![...select.options].some((o) => o.value === _locale)) {
+    const option = document.createElement('option');
+    option.value = _locale;
+    option.textContent = `🖥️ Browser (${_locale})`;
+    select.insertBefore(option, select.firstChild);
+  }
+  select.value = _locale;
+  select.addEventListener('change', (e) => applyLocale(e.target.value));
+  applyLocale(_locale);
+}
+
+initLocaleControl();
 
 document.getElementById('btn-inject-results').addEventListener('click', () => {
   const relationField = document.querySelector('mrd-relation-field');
@@ -1170,7 +1211,7 @@ document.addEventListener('DOMContentLoaded', async () => {
   const ftSection = document.getElementById('field-types-section');
   ftSection.items = window.EXAMPLE_FIELD_TYPES_ITEMS;
   ftSection.data  = window.EXAMPLE_FIELD_TYPES_DATA;
-  ftSection.locale = 'nl-NL';
+  ftSection.locale = _locale;
 
   // Simulate host resolving a signed URL for IMAGE fields (thumbnail on load).
   ftSection.addEventListener('mrdLoadImage', (e) => {
@@ -1197,6 +1238,10 @@ document.addEventListener('DOMContentLoaded', async () => {
     ftSection.setSearchResults(mock, dataClass);
   });
 
+  // Re-apply once the whole page is parsed, so components mounted in markup
+  // (and any upgraded after the control ran) all agree on the locale.
+  applyLocale(_locale);
+
   authRestoreSession();
   await authHandleCallback();
 

package/dist/collection/dev/example-data.js

@@ -223,7 +223,9 @@ window.EXAMPLE_COMPANY_METADATA = {
         { type: 'FIELD', label: 'legal form extended', name: 'legalFormExtended', dataType: 'TEXT', required: false },
         { type: 'FIELD', label: 'rsin', name: 'rsin', dataType: 'TEXT', required: false },
         { type: 'FIELD', label: 'start date', name: 'startDate', dataType: 'DATE', required: false },
-        { type: 'FIELD', label: 'end date', name: 'endDate', dataType: 'DATE', required: false },
+        // showEmpty demo (TASK-0231): endDate is null on EXAMPLE_COMPANY, so it
+        // stays visible with a placeholder instead of being hidden.
+        { type: 'FIELD', label: 'end date', name: 'endDate', dataType: 'DATE', required: false, showEmpty: true },
         { type: 'FIELD', label: 'primary activity description', name: 'primaryActivityDescription', dataType: 'TEXT', required: false },
         { type: 'FIELD', label: 'primary activity code', name: 'primaryActivityCode', dataType: 'TEXT', required: false },
         { type: 'FIELD', label: 'total employees', name: 'totalEmployees', dataType: 'INTEGER', required: false },
@@ -243,6 +245,9 @@ window.EXAMPLE_COMPANY_METADATA = {
         { type: 'FIELD', label: 'mailing postal code', name: 'mailingPostalCode', dataType: 'TEXT', required: false },
         { type: 'FIELD', label: 'mailing city', name: 'mailingCity', dataType: 'TEXT', required: false },
         { type: 'RELATION', label: 'country', name: 'country', relatedClass: 'commons.country', mostSignificantClass: 'countries', required: false },
+        // showEmpty demo (TASK-0231): no `parentCompany` link on EXAMPLE_COMPANY,
+        // so the relation still renders with a placeholder value.
+        { type: 'RELATION', label: 'parent company', name: 'parentCompany', relatedClass: 'commons.company', mostSignificantClass: 'companies', required: false, showEmpty: true },
       ],
     },
     {

package/dist/collection/utils/format.js

@@ -53,6 +53,166 @@ export function formatTime(value, locale) {
     date.setHours(hours, minutes, 0, 0);
     return new Intl.DateTimeFormat(locale, { hour: '2-digit', minute: '2-digit' }).format(date);
 }
+/**
+ * Locale-aware date input support.
+ *
+ * A native <input type="date"> always displays in the browser/OS locale, so the
+ * date fields render a plain text input instead and use these helpers to format
+ * and parse the value in the locale the host passed down — the same approach
+ * mrd-number-field takes with formatNumber / parseLocalizedNumber.
+ */
+/** 31 December 2026, 13:45 — day > 12 so day/month order is unambiguous. */
+const PATTERN_SAMPLE = new Date(2026, 11, 31, 13, 45, 0);
+function dateTimeParts(locale, withTime) {
+    const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
+    if (withTime) {
+        options.hour = '2-digit';
+        options.minute = '2-digit';
+    }
+    return new Intl.DateTimeFormat(locale, options).formatToParts(PATTERN_SAMPLE);
+}
+/** Order in which day/month/year appear for a locale, e.g. ['day','month','year'] for nl-NL. */
+function datePartOrder(locale) {
+    const order = dateTimeParts(locale, false)
+        .filter(p => p.type === 'day' || p.type === 'month' || p.type === 'year')
+        .map(p => p.type);
+    return order.length === 3 ? order : ['day', 'month', 'year'];
+}
+/** The locale's am/pm markers, so 12-hour input can be parsed back. */
+function dayPeriodMarkers(locale) {
+    const marker = (hour) => {
+        var _a, _b;
+        return (_b = (_a = new Intl.DateTimeFormat(locale, { hour: 'numeric', hour12: true })
+            .formatToParts(new Date(2026, 0, 1, hour))
+            .find(p => p.type === 'dayPeriod')) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
+    };
+    return { am: marker(9), pm: marker(21) };
+}
+/** Arabic-Indic and extended Arabic-Indic digits → ASCII, so typed input parses everywhere. */
+function toLatinDigits(str) {
+    return str.replace(/[٠-٩۰-۹]/g, d => {
+        const code = d.charCodeAt(0);
+        return String(code >= 0x06f0 ? code - 0x06f0 : code - 0x0660);
+    });
+}
+function pad(n, size = 2) {
+    return String(n).padStart(size, '0');
+}
+/** Two-digit years: < 70 → 20xx, otherwise 19xx. */
+function expandYear(value, digits) {
+    if (digits > 2)
+        return value;
+    return value < 70 ? 2000 + value : 1900 + value;
+}
+function isValidYmd(year, month, day) {
+    if (year < 1 || month < 1 || month > 12 || day < 1)
+        return false;
+    return day <= new Date(year, month, 0).getDate();
+}
+/**
+ * Placeholder showing the locale's date order, e.g. 'dd-mm-jjjj' (nl-NL) or
+ * 'mm/dd/yyyy' (en-US). Pass `hour`/`minute` tokens to include the time part.
+ */
+export function localeDatePattern(locale, tokens) {
+    const withTime = !!(tokens.hour && tokens.minute);
+    return dateTimeParts(locale, withTime)
+        .map(part => {
+        var _a, _b;
+        switch (part.type) {
+            case 'day': return tokens.day;
+            case 'month': return tokens.month;
+            case 'year': return tokens.year;
+            case 'hour': return (_a = tokens.hour) !== null && _a !== void 0 ? _a : '';
+            case 'minute': return (_b = tokens.minute) !== null && _b !== void 0 ? _b : '';
+            case 'dayPeriod': return 'AM';
+            case 'literal': return part.value;
+            default: return '';
+        }
+    })
+        .join('')
+        .trim();
+}
+/** Pulls day/month/year out of the number groups a user typed, per locale order. */
+function ymdFromGroups(groups, locale) {
+    const order = datePartOrder(locale);
+    const values = {};
+    order.forEach((type, i) => (values[type] = groups[i]));
+    const year = expandYear(Number(values.year), values.year.length);
+    const month = Number(values.month);
+    const day = Number(values.day);
+    return isValidYmd(year, month, day) ? { year, month, day } : null;
+}
+/**
+ * Parses a date the user typed in their own locale format → 'YYYY-MM-DD'.
+ * Accepts any separator, one- or two-digit day/month, two-digit years, and
+ * plain ISO input (pasted values). Returns null when it is not a valid date.
+ */
+export function parseLocalizedDate(input, locale) {
+    const raw = toLatinDigits(String(input !== null && input !== void 0 ? input : '')).trim();
+    if (!raw)
+        return null;
+    const groups = raw.match(/\d+/g);
+    if (!groups || groups.length < 3)
+        return null;
+    const iso = /^(\d{4})-(\d{1,2})-(\d{1,2})$/.exec(raw);
+    const parsed = iso
+        ? (isValidYmd(+iso[1], +iso[2], +iso[3]) ? { year: +iso[1], month: +iso[2], day: +iso[3] } : null)
+        : ymdFromGroups(groups.slice(0, 3), locale);
+    if (!parsed)
+        return null;
+    return `${pad(parsed.year, 4)}-${pad(parsed.month)}-${pad(parsed.day)}`;
+}
+/**
+ * Parses a date+time the user typed in their own locale format →
+ * 'YYYY-MM-DDTHH:mm' in local time (the shape mrd-datetime-field converts to
+ * UTC before emitting). A missing time defaults to 00:00; am/pm is recognised
+ * both in English and in the locale's own markers.
+ */
+export function parseLocalizedDateTime(input, locale) {
+    const raw = toLatinDigits(String(input !== null && input !== void 0 ? input : '')).trim();
+    if (!raw)
+        return null;
+    const groups = raw.match(/\d+/g);
+    if (!groups || groups.length < 3)
+        return null;
+    const iso = /^(\d{4})-(\d{1,2})-(\d{1,2})(?:[T ]|$)/.exec(raw);
+    const date = iso
+        ? (isValidYmd(+iso[1], +iso[2], +iso[3]) ? { year: +iso[1], month: +iso[2], day: +iso[3] } : null)
+        : ymdFromGroups(groups.slice(0, 3), locale);
+    if (!date)
+        return null;
+    let hour = groups.length > 3 ? Number(groups[3]) : 0;
+    const minute = groups.length > 4 ? Number(groups[4]) : 0;
+    const lower = raw.toLowerCase();
+    const { am, pm } = dayPeriodMarkers(locale);
+    const isPm = /p\.?\s?m\.?/.test(lower) || (!!pm && lower.includes(pm.toLowerCase()));
+    const isAm = /a\.?\s?m\.?/.test(lower) || (!!am && lower.includes(am.toLowerCase()));
+    if (isPm && hour < 12)
+        hour += 12;
+    if (isAm && hour === 12)
+        hour = 0;
+    if (hour > 23 || minute > 59)
+        return null;
+    return `${pad(date.year, 4)}-${pad(date.month)}-${pad(date.day)}T${pad(hour)}:${pad(minute)}`;
+}
+/**
+ * 'YYYY-MM-DD' → localized display string. Parsed as a *local* date, unlike
+ * formatDate(), which would read a date-only string as UTC midnight and shift
+ * the day in negative-offset timezones.
+ */
+export function formatIsoDate(iso, locale) {
+    const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(String(iso !== null && iso !== void 0 ? iso : ''));
+    if (!m)
+        return '';
+    return formatDate(new Date(+m[1], +m[2] - 1, +m[3]), locale);
+}
+/** 'YYYY-MM-DDTHH:mm' in local time → localized display string. */
+export function formatLocalDateTime(local, locale) {
+    const m = /^(\d{4})-(\d{2})-(\d{2})[T ](\d{2}):(\d{2})/.exec(String(local !== null && local !== void 0 ? local : ''));
+    if (!m)
+        return '';
+    return formatDateTime(new Date(+m[1], +m[2] - 1, +m[3], +m[4], +m[5]), locale);
+}
 export function parseLocalizedNumber(str, locale) {
     var _a, _b, _c, _d;
     if (!str || !str.trim())