@abgov/jsonforms-components 2.75.1 → 2.75.2

package/index.esm.js

@@ -3902,6 +3902,38 @@ $$x({ target: 'Iterator', proto: true, real: true, forced: IS_PURE$2 }, {
   map: map
 });
 
+const sinTitle = 'Social insurance number';
+const invalidSin = 'Social insurance number is invalid';
+const DEFAULT_MAX_ITEMS = 50;
+const REQUIRED_PROPERTY_ERROR = 'is a required property';
+const ADDRESS_LOOKUP_LABELS = {
+  addressLine1: 'Address line 1',
+  addressLine2: 'Address line 2',
+  municipality: 'City',
+  postalCode: 'Postal code',
+  subdivisionCode: 'Province',
+  country: 'Country'
+};
+const VALIDATION_KEYWORDS = {
+  REQUIRED: 'required',
+  MIN_LENGTH: 'minLength',
+  MAX_LENGTH: 'maxLength',
+  FORMAT: 'format',
+  MINIMUM: 'minimum',
+  MAXIMUM: 'maximum',
+  TYPE: 'type',
+  ERROR_MESSAGE: 'errorMessage'
+};
+var StepStatus;
+(function (StepStatus) {
+  StepStatus["NOT_STARTED"] = "NotStarted";
+  StepStatus["IN_PROGRESS"] = "InProgress";
+  StepStatus["COMPLETED"] = "Completed";
+})(StepStatus || (StepStatus = {}));
+const getAddressLookupFieldLabel = fieldName => {
+  return ADDRESS_LOOKUP_LABELS[fieldName] || fieldName;
+};
+
 var classof$5 = classofRaw$2;
 
 // `IsArray` abstract operation
@@ -4558,6 +4590,222 @@ const isRequiredBySchema = (rootSchema, rootData, path, options = {}) => {
   return reqSet.has(dotPath);
 };
 
+// Default formats keyed by type; the mask can be overridden per field via UI schema options.
+const DEFAULT_PATTERNS = {
+  phone: {
+    mask: '(###) ###-####',
+    pattern: /^\(?\d{3}\)?[- ]?\d{3}[- ]?\d{4}$/,
+    error: 'Must be a valid 10-digit phone number in format (000) 000-0000',
+    allowedKeys: /[0-9]/
+  },
+  sin: {
+    mask: '### ### ###',
+    pattern: /^\d{3} \d{3} \d{3}$/,
+    error: 'Must be a valid social insurance number in format 000 000 000',
+    allowedKeys: /[0-9]/
+  },
+  postalCode: {
+    mask: '### ###',
+    pattern: /^[A-Za-z]\d[A-Za-z] \d[A-Za-z]\d$/,
+    error: 'Must be in A0A 0A0 capital letters and numbers format',
+    allowedKeys: /[A-Za-z0-9]/
+  },
+  driverId: {
+    // Alberta driver's licence: six digits, a dash, then three digits.
+    mask: '######-###',
+    pattern: /^\d{6}-\d{3}$/,
+    error: "Must be a valid driver's licence number in format 000000-000",
+    allowedKeys: /[0-9]/
+  },
+  mvid: {
+    // Motor vehicle ID: four digits, a dash, then five digits.
+    mask: '####-#####',
+    pattern: /^\d{4}-\d{5}$/,
+    error: 'Must be a valid motor vehicle ID in format 0000-00000',
+    allowedKeys: /[0-9]/
+  }
+};
+// Resolve the mask format for a field: schema.format must match a DEFAULT_PATTERNS key.
+const resolveFormatConfig = schema => {
+  if (!schema) {
+    return undefined;
+  }
+  if (schema.format && schema.format in DEFAULT_PATTERNS) {
+    return DEFAULT_PATTERNS[schema.format];
+  }
+  return schema.title === sinTitle ? DEFAULT_PATTERNS.sin : undefined;
+};
+const getSchemaErrorMessage = errorMessage => {
+  if (typeof errorMessage === 'string' && errorMessage.trim() !== '') {
+    return errorMessage;
+  }
+  if (errorMessage && typeof errorMessage === 'object') {
+    const configured = errorMessage.pattern || errorMessage.format;
+    if (typeof configured === 'string' && configured.trim() !== '') {
+      return configured;
+    }
+  }
+  return undefined;
+};
+// Prefer a schema or format-config error; callers fall back to AJV when this is empty.
+const getConfiguredFormatError = schema => {
+  var _resolveFormatConfig;
+  return getSchemaErrorMessage(schema == null ? void 0 : schema.errorMessage) || ((_resolveFormatConfig = resolveFormatConfig(schema)) == null ? void 0 : _resolveFormatConfig.error);
+};
+// Mask placeholder characters; each consumes one input character. Any other mask character is treated as a literal.
+const MASK_PLACEHOLDERS = new Set(['#', '*', '_']);
+const isPlaceholder = char => MASK_PLACEHOLDERS.has(char);
+// Navigation/editing keys that keystroke filtering must always let through.
+const MASK_CONTROL_KEYS = new Set(['Backspace', 'Delete', 'Tab', 'Enter', 'Escape', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End']);
+// A single-character key should be blocked when the format restricts input and the key isn't allowed.
+const shouldBlockKey = (key, allowedKeys) => !!allowedKeys && key.length === 1 && !MASK_CONTROL_KEYS.has(key) && !allowedKeys.test(key);
+// Removes characters the format doesn't allow (e.g. letters from a digit-only field), for paste/programmatic input.
+const filterAllowedKeys = (value, allowedKeys) => allowedKeys ? [...(value != null ? value : '')].filter(char => allowedKeys.test(char)).join('') : value != null ? value : '';
+// A mask slot holds one content character (letter or digit); everything else in the value is a separator.
+const NON_CONTENT = /[^a-zA-Z0-9]/g;
+const IS_CONTENT = /[a-zA-Z0-9]/;
+// Number of fill slots in a mask (its placeholder characters).
+const maskDigitCount = mask => [...mask].filter(isPlaceholder).length;
+// Formats a value into a placeholder mask (e.g. '(###) ###-####'), filling only the content entered so far.
+// Placeholder characters consume one content character each; every other mask character is a literal.
+const formatWithPattern = (value, mask) => {
+  const maxContent = maskDigitCount(mask);
+  const content = (value != null ? value : '').replace(NON_CONTENT, '').slice(0, maxContent);
+  let index = 0;
+  let formatted = '';
+  for (const maskChar of mask) {
+    if (index >= content.length) {
+      break;
+    }
+    formatted += isPlaceholder(maskChar) ? content[index++] : maskChar;
+  }
+  return formatted;
+};
+// Fills the mask with the value's content, leaving the placeholder character for positions not yet entered.
+const toMaskTemplate = (value, mask) => {
+  const maxContent = maskDigitCount(mask);
+  const content = (value != null ? value : '').replace(NON_CONTENT, '').slice(0, maxContent);
+  let index = 0;
+  let display = '';
+  for (const maskChar of mask) {
+    display += isPlaceholder(maskChar) ? index < content.length ? content[index++] : maskChar : maskChar;
+  }
+  return display;
+};
+// Caret position just after the Nth content character within a rendered mask, so in-place edits keep the cursor in place.
+const caretAfterDigits = (display, digitCount) => {
+  if (digitCount <= 0) {
+    return 0;
+  }
+  let seen = 0;
+  for (let i = 0; i < display.length; i++) {
+    if (IS_CONTENT.test(display[i])) {
+      seen += 1;
+      if (seen === digitCount) {
+        return i + 1;
+      }
+    }
+  }
+  return display.length;
+};
+// Computes an in-place masked edit from the raw input and caret index: what to show, what to store, where to put the caret.
+const computeMaskEdit = (rawValue, caretIndex, mask) => {
+  const digitsBeforeCaret = rawValue.slice(0, caretIndex).replace(NON_CONTENT, '').length;
+  const display = toMaskTemplate(rawValue, mask);
+  const stored = formatWithPattern(rawValue, mask);
+  const caret = caretAfterDigits(display, Math.min(digitsBeforeCaret, maskDigitCount(mask)));
+  return {
+    display,
+    stored,
+    caret
+  };
+};
+// True once the value has as many content characters as the mask has fill slots.
+const isMaskFilled = (value, mask) => value.replace(NON_CONTENT, '').length >= maskDigitCount(mask);
+// A human placeholder for a mask, e.g. '(###) ###-####' -> '(000) 000-0000'.
+const maskPlaceholder = mask => [...mask].map(char => isPlaceholder(char) ? '0' : char).join('');
+// GoA retargets composed events to the host, so prefer the inner native input from the composed path.
+const getMaskInputTarget = detail => {
+  var _target$shadowRoot$qu, _target$shadowRoot;
+  const event = detail.event;
+  if (!event) {
+    return undefined;
+  }
+  const path = typeof event.composedPath === 'function' ? event.composedPath() : [];
+  const fromPath = path.find(node => node instanceof HTMLInputElement);
+  if (fromPath) {
+    return fromPath;
+  }
+  const target = event.target;
+  if (target instanceof HTMLInputElement) {
+    return target;
+  }
+  return (_target$shadowRoot$qu = target == null || (_target$shadowRoot = target.shadowRoot) == null ? void 0 : _target$shadowRoot.querySelector('input')) != null ? _target$shadowRoot$qu : undefined;
+};
+const applyMaskValue = (target, edit) => {
+  target.value = edit.display;
+  target.setSelectionRange == null || target.setSelectionRange(edit.caret, edit.caret);
+};
+// Applies an in-place edit to the inner input and re-applies after the web component paints.
+const applyInPlaceEdit = (target, edit) => {
+  if (!target) {
+    return;
+  }
+  applyMaskValue(target, edit);
+  requestAnimationFrame(() => applyMaskValue(target, edit));
+};
+// When the template is already filled, extra content characters must be rejected rather than shifting the value.
+const overflowMaskEdit = (previousDisplay, rawValue, caretIndex, mask) => {
+  if (!isMaskFilled(previousDisplay, mask)) {
+    return undefined;
+  }
+  if ((rawValue != null ? rawValue : '').replace(NON_CONTENT, '').length <= maskDigitCount(mask)) {
+    return undefined;
+  }
+  return {
+    display: previousDisplay,
+    stored: formatWithPattern(previousDisplay, mask),
+    caret: Math.min(Math.max(caretIndex, 0), previousDisplay.length)
+  };
+};
+/**
+ * Applies a mask template to a value, e.g. mask "(###) ###-####" turns "7801234567" into "(780) 123-4567".
+ * '#' consumes one content character from the input; every other character is a literal inserted into the output.
+ * The mask's literal characters are stripped from the input first so an already formatted value re-formats cleanly.
+ * Returns the original value unchanged when the mask is empty or no content characters remain.
+ * @param value - The raw input value
+ * @param mask - The mask template string
+ * @returns The masked value
+ */
+const applyFormatPattern = (value, mask) => {
+  if (!mask || !value) {
+    return value;
+  }
+  const literals = new Set(mask.split('').filter(char => !isPlaceholder(char)));
+  const content = value.split('').filter(char => !literals.has(char));
+  if (content.length === 0) {
+    return value;
+  }
+  let contentIndex = 0;
+  let result = '';
+  for (const maskChar of mask) {
+    if (contentIndex >= content.length) {
+      break;
+    }
+    if (isPlaceholder(maskChar)) {
+      result += content[contentIndex];
+      contentIndex += 1;
+    } else {
+      result += maskChar;
+    }
+  }
+  // Append any remaining content characters that did not fit the mask.
+  if (contentIndex < content.length) {
+    result += content.slice(contentIndex).join('');
+  }
+  return result;
+};
+
 /**
  * Sets the first word to be capitalized so that it is sentence cased.
  * @param words
@@ -4755,7 +5003,10 @@ const checkFieldValidity = (props, rootData) => {
   if (isRegisterBackedEnum) {
     return '';
   }
-  return ajvErrors;
+  if (!ajvErrors || ajvErrors === invalidSin) {
+    return ajvErrors;
+  }
+  return getConfiguredFormatError(schema) || ajvErrors;
 };
 /**
  * Check if the date is a valid date/time
@@ -4821,195 +5072,6 @@ const UTCToFullLocalTime = (fullTime, useUTC = false) => {
   }).replace('p.m.', 'PM').replace('a.m.', 'AM');
 };
 
-// Default formats keyed by type; the mask can be overridden per field via UI schema options.
-const DEFAULT_PATTERNS = {
-  phone: {
-    mask: '(###) ###-####',
-    pattern: /^\(?\d{3}\)?[- ]?\d{3}[- ]?\d{4}$/,
-    error: 'Must be a valid 10-digit phone number in format (000) 000-0000',
-    allowedKeys: /[0-9]/
-  },
-  sin: {
-    mask: '### ### ###',
-    pattern: /^\d{3} \d{3} \d{3}$/,
-    error: 'Must be three groups of three digits.',
-    allowedKeys: /[0-9]/
-  },
-  postalCode: {
-    mask: '### ###',
-    pattern: /^[A-Za-z]\d[A-Za-z] \d[A-Za-z]\d$/,
-    error: 'Must be in A0A 0A0 capital letters and numbers format',
-    allowedKeys: /[A-Za-z0-9]/
-  },
-  driverId: {
-    // Alberta driver's licence: six digits, a dash, then three digits.
-    mask: '######-###',
-    pattern: /^\d{6}-\d{3}$/,
-    error: "Must be a valid driver's licence number in format 000000-000",
-    allowedKeys: /[0-9]/
-  },
-  mvid: {
-    // Motor vehicle ID: four digits, a dash, then five digits.
-    mask: '####-#####',
-    pattern: /^\d{4}-\d{5}$/,
-    error: 'Must be a valid motor vehicle ID in format 0000-00000',
-    allowedKeys: /[0-9]/
-  }
-};
-// Mask placeholder characters; each consumes one input character. Any other mask character is treated as a literal.
-const MASK_PLACEHOLDERS = new Set(['#', '*', '_']);
-const isPlaceholder = char => MASK_PLACEHOLDERS.has(char);
-// Navigation/editing keys that keystroke filtering must always let through.
-const MASK_CONTROL_KEYS = new Set(['Backspace', 'Delete', 'Tab', 'Enter', 'Escape', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End']);
-// A single-character key should be blocked when the format restricts input and the key isn't allowed.
-const shouldBlockKey = (key, allowedKeys) => !!allowedKeys && key.length === 1 && !MASK_CONTROL_KEYS.has(key) && !allowedKeys.test(key);
-// Removes characters the format doesn't allow (e.g. letters from a digit-only field), for paste/programmatic input.
-const filterAllowedKeys = (value, allowedKeys) => allowedKeys ? [...(value != null ? value : '')].filter(char => allowedKeys.test(char)).join('') : value != null ? value : '';
-// A mask slot holds one content character (letter or digit); everything else in the value is a separator.
-const NON_CONTENT = /[^a-zA-Z0-9]/g;
-const IS_CONTENT = /[a-zA-Z0-9]/;
-// Number of fill slots in a mask (its placeholder characters).
-const maskDigitCount = mask => [...mask].filter(isPlaceholder).length;
-// Formats a value into a placeholder mask (e.g. '(###) ###-####'), filling only the content entered so far.
-// Placeholder characters consume one content character each; every other mask character is a literal.
-const formatWithPattern = (value, mask) => {
-  const maxContent = maskDigitCount(mask);
-  const content = (value != null ? value : '').replace(NON_CONTENT, '').slice(0, maxContent);
-  let index = 0;
-  let formatted = '';
-  for (const maskChar of mask) {
-    if (index >= content.length) {
-      break;
-    }
-    formatted += isPlaceholder(maskChar) ? content[index++] : maskChar;
-  }
-  return formatted;
-};
-// Fills the mask with the value's content, leaving the placeholder character for positions not yet entered.
-const toMaskTemplate = (value, mask) => {
-  const maxContent = maskDigitCount(mask);
-  const content = (value != null ? value : '').replace(NON_CONTENT, '').slice(0, maxContent);
-  let index = 0;
-  let display = '';
-  for (const maskChar of mask) {
-    display += isPlaceholder(maskChar) ? index < content.length ? content[index++] : maskChar : maskChar;
-  }
-  return display;
-};
-// Caret position just after the Nth content character within a rendered mask, so in-place edits keep the cursor in place.
-const caretAfterDigits = (display, digitCount) => {
-  if (digitCount <= 0) {
-    return 0;
-  }
-  let seen = 0;
-  for (let i = 0; i < display.length; i++) {
-    if (IS_CONTENT.test(display[i])) {
-      seen += 1;
-      if (seen === digitCount) {
-        return i + 1;
-      }
-    }
-  }
-  return display.length;
-};
-// Computes an in-place masked edit from the raw input and caret index: what to show, what to store, where to put the caret.
-const computeMaskEdit = (rawValue, caretIndex, mask) => {
-  const digitsBeforeCaret = rawValue.slice(0, caretIndex).replace(NON_CONTENT, '').length;
-  const display = toMaskTemplate(rawValue, mask);
-  const stored = formatWithPattern(rawValue, mask);
-  const caret = caretAfterDigits(display, Math.min(digitsBeforeCaret, maskDigitCount(mask)));
-  return {
-    display,
-    stored,
-    caret
-  };
-};
-// True once the value has as many content characters as the mask has fill slots.
-const isMaskFilled = (value, mask) => value.replace(NON_CONTENT, '').length >= maskDigitCount(mask);
-// A human placeholder for a mask, e.g. '(###) ###-####' -> '(000) 000-0000'.
-const maskPlaceholder = mask => [...mask].map(char => isPlaceholder(char) ? '0' : char).join('');
-// GoA retargets composed events to the host, so prefer the inner native input from the composed path.
-const getMaskInputTarget = detail => {
-  var _target$shadowRoot$qu, _target$shadowRoot;
-  const event = detail.event;
-  if (!event) {
-    return undefined;
-  }
-  const path = typeof event.composedPath === 'function' ? event.composedPath() : [];
-  const fromPath = path.find(node => node instanceof HTMLInputElement);
-  if (fromPath) {
-    return fromPath;
-  }
-  const target = event.target;
-  if (target instanceof HTMLInputElement) {
-    return target;
-  }
-  return (_target$shadowRoot$qu = target == null || (_target$shadowRoot = target.shadowRoot) == null ? void 0 : _target$shadowRoot.querySelector('input')) != null ? _target$shadowRoot$qu : undefined;
-};
-const applyMaskValue = (target, edit) => {
-  target.value = edit.display;
-  target.setSelectionRange == null || target.setSelectionRange(edit.caret, edit.caret);
-};
-// Applies an in-place edit to the inner input and re-applies after the web component paints.
-const applyInPlaceEdit = (target, edit) => {
-  if (!target) {
-    return;
-  }
-  applyMaskValue(target, edit);
-  requestAnimationFrame(() => applyMaskValue(target, edit));
-};
-// When the template is already filled, extra content characters must be rejected rather than shifting the value.
-const overflowMaskEdit = (previousDisplay, rawValue, caretIndex, mask) => {
-  if (!isMaskFilled(previousDisplay, mask)) {
-    return undefined;
-  }
-  if ((rawValue != null ? rawValue : '').replace(NON_CONTENT, '').length <= maskDigitCount(mask)) {
-    return undefined;
-  }
-  return {
-    display: previousDisplay,
-    stored: formatWithPattern(previousDisplay, mask),
-    caret: Math.min(Math.max(caretIndex, 0), previousDisplay.length)
-  };
-};
-/**
- * Applies a mask template to a value, e.g. mask "(###) ###-####" turns "7801234567" into "(780) 123-4567".
- * '#' consumes one content character from the input; every other character is a literal inserted into the output.
- * The mask's literal characters are stripped from the input first so an already formatted value re-formats cleanly.
- * Returns the original value unchanged when the mask is empty or no content characters remain.
- * @param value - The raw input value
- * @param mask - The mask template string
- * @returns The masked value
- */
-const applyFormatPattern = (value, mask) => {
-  if (!mask || !value) {
-    return value;
-  }
-  const literals = new Set(mask.split('').filter(char => !isPlaceholder(char)));
-  const content = value.split('').filter(char => !literals.has(char));
-  if (content.length === 0) {
-    return value;
-  }
-  let contentIndex = 0;
-  let result = '';
-  for (const maskChar of mask) {
-    if (contentIndex >= content.length) {
-      break;
-    }
-    if (isPlaceholder(maskChar)) {
-      result += content[contentIndex];
-      contentIndex += 1;
-    } else {
-      result += maskChar;
-    }
-  }
-  // Append any remaining content characters that did not fit the mask.
-  if (contentIndex < content.length) {
-    result += content.slice(contentIndex).join('');
-  }
-  return result;
-};
-
 /**
  * Checks input controls data value to determine is required and has any data.
  * @param props - The JsonForm control props
@@ -7602,38 +7664,6 @@ function buildConditionalDeps(rootSchema) {
   return out;
 }
 
-const sinTitle = 'Social insurance number';
-const invalidSin = 'Social insurance number is invalid';
-const DEFAULT_MAX_ITEMS = 50;
-const REQUIRED_PROPERTY_ERROR = 'is a required property';
-const ADDRESS_LOOKUP_LABELS = {
-  addressLine1: 'Address line 1',
-  addressLine2: 'Address line 2',
-  municipality: 'City',
-  postalCode: 'Postal code',
-  subdivisionCode: 'Province',
-  country: 'Country'
-};
-const VALIDATION_KEYWORDS = {
-  REQUIRED: 'required',
-  MIN_LENGTH: 'minLength',
-  MAX_LENGTH: 'maxLength',
-  FORMAT: 'format',
-  MINIMUM: 'minimum',
-  MAXIMUM: 'maximum',
-  TYPE: 'type',
-  ERROR_MESSAGE: 'errorMessage'
-};
-var StepStatus;
-(function (StepStatus) {
-  StepStatus["NOT_STARTED"] = "NotStarted";
-  StepStatus["IN_PROGRESS"] = "InProgress";
-  StepStatus["COMPLETED"] = "Completed";
-})(StepStatus || (StepStatus = {}));
-const getAddressLookupFieldLabel = fieldName => {
-  return ADDRESS_LOOKUP_LABELS[fieldName] || fieldName;
-};
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function hasMeaningfulValue(val) {
   if (val === undefined || val === null) return false;
@@ -10036,13 +10066,6 @@ const resetInputValue = (detail, value) => {
     target.value = value;
   }
 };
-// Resolve the mask format for a field: schema.format must match a DEFAULT_PATTERNS key.
-const resolveFormatConfig = schema => {
-  if (schema.format && schema.format in DEFAULT_PATTERNS) {
-    return DEFAULT_PATTERNS[schema.format];
-  }
-  return schema.title === sinTitle ? DEFAULT_PATTERNS.sin : undefined;
-};
 const GoAInputText = props => {
   return jsxs(JsonFormRegisterProvider, {
     defaultRegisters: undefined,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.75.1",
+  "version": "2.75.2",
   "license": "Apache-2.0",
   "description": "Government of Alberta - React renderers for JSON Forms based on the design system.",
   "repository": "https://github.com/GovAlta/adsp-monorepo",

package/renderer-catalog.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "1.0.0",
-  "generatedAt": "2026-09-08T16:38:31.930Z",
-  "sourceCommit": "769e0871a07d4049577cd0a6f97d1dc56258481b",
+  "generatedAt": "2026-09-09T19:26:19.202Z",
+  "sourceCommit": "7fb9064678498d4c0d4a0cc3926968d141a9f242",
   "sourcePath": "libs/jsonforms-components/src/index.ts",
   "rendererCount": 33,
   "renderers": [

package/src/lib/util/patternForm.d.ts

@@ -5,6 +5,20 @@ export interface MaskPattern {
     allowedKeys?: RegExp;
 }
 export declare const DEFAULT_PATTERNS: Record<string, MaskPattern>;
+export declare const resolveFormatConfig: (schema?: {
+    format?: string;
+    title?: string;
+}) => MaskPattern | undefined;
+type SchemaErrorMessage = string | {
+    pattern?: string;
+    format?: string;
+};
+type FormatSchema = {
+    format?: string;
+    title?: string;
+    errorMessage?: SchemaErrorMessage;
+};
+export declare const getConfiguredFormatError: (schema?: FormatSchema) => string | undefined;
 export declare const MASK_PLACEHOLDERS: Set<string>;
 export declare const MASK_CONTROL_KEYS: Set<string>;
 export declare const shouldBlockKey: (key: string, allowedKeys?: RegExp) => boolean;