From 39ffc9aba027ac42f7b3f06ddfa03fbb00fafed8 Mon Sep 17 00:00:00 2001
From: Daniel Imfeld <daniel@imfeld.dev>
Date: Tue, 9 Jan 2024 17:52:20 -1000
Subject: [PATCH 1/2] make DateField format and mask reactive to locale changes

---
 .../svelte-ux/src/lib/components/DateField.svelte   | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/svelte-ux/src/lib/components/DateField.svelte b/packages/svelte-ux/src/lib/components/DateField.svelte
index 33c54be47..91b34adff 100644
--- a/packages/svelte-ux/src/lib/components/DateField.svelte
+++ b/packages/svelte-ux/src/lib/components/DateField.svelte
@@ -13,11 +13,14 @@
   const { format: format_ux } = getSettings();
 
   export let value: Date | null = null;
-  export let format = $format_ux.settings.formats.dates.baseParsing ?? 'MM/dd/yyyy';
-  export let mask = format.toLowerCase();
+  export let format: string | undefined = undefined;
+  export let mask: string | undefined = undefined;
   export let replace = 'dmyh';
   export let picker = false;
 
+  $: actualFormat = format ?? $format_ux.settings.formats.dates.baseParsing ?? 'MM/dd/yyyy';
+  $: actualMask = mask ?? actualFormat.toLowerCase();
+
   // Field props
   export let label = '';
   export let error = '';
@@ -38,7 +41,7 @@
   function onInputChange(e: any) {
     inputValue = e.detail.value;
     const lastValue = value;
-    const parsedValue = parseDate(inputValue ?? '', format, new Date());
+    const parsedValue = parseDate(inputValue ?? '', actualFormat, new Date());
     value = isNaN(parsedValue.valueOf()) ? null : parsedValue;
     if (value != lastValue) {
       dispatch('change', { value });
@@ -65,8 +68,8 @@
   let:id
 >
   <Input
-    value={value ? $format_ux(value, PeriodType.Day, { custom: format }) : inputValue}
-    {mask}
+    value={value ? $format_ux(value, PeriodType.Day, { custom: actualFormat }) : inputValue}
+    mask={actualMask}
     {replace}
     {id}
     on:change={onInputChange}

From 95c91ea75904437c3758e65b549e4683e778d8c9 Mon Sep 17 00:00:00 2001
From: Daniel Imfeld <daniel@imfeld.dev>
Date: Wed, 10 Jan 2024 09:51:01 -1000
Subject: [PATCH 2/2] Make Input component reactive to changes in mask

---
 packages/svelte-ux/src/lib/components/Input.svelte | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/svelte-ux/src/lib/components/Input.svelte b/packages/svelte-ux/src/lib/components/Input.svelte
index 044a57b7c..868586081 100644
--- a/packages/svelte-ux/src/lib/components/Input.svelte
+++ b/packages/svelte-ux/src/lib/components/Input.svelte
@@ -24,9 +24,12 @@
   export let mask = '';
   export let replace = '_';
   export let accept: string | RegExp = '\\d';
-  export let placeholder = mask;
+  let placeholderProp: string | undefined = undefined;
+  export { placeholderProp as placeholder };
   export let disabled = false;
 
+  $: placeholder = placeholderProp ?? mask;
+
   const settingsClasses = getComponentClasses('Input');
 
   let isFocused = false;
@@ -61,7 +64,11 @@
 
   function onInput(e: Event & { currentTarget: HTMLInputElement }) {
     const el = e.currentTarget;
+    applyMask(el, mask);
+    dispatch('change', { value });
+  }
 
+  function applyMask(el: HTMLInputElement, mask: string) {
     if (mask) {
       // For selection (including just cursor position), ...
       const [i, j] = [el.selectionStart, el.selectionEnd].map((i) => {
@@ -73,10 +80,10 @@
       el.setSelectionRange(i, j);
       backspace = false;
     }
-
-    dispatch('change', { value });
   }
 
+  $: if (inputEl) applyMask(inputEl, mask);
+
   onMount(() => {
     // Format on initial to handle partial values as well as different (but compatible) formats (ex. phone numbers)
     if (mask) {