@aurodesignsystem-dev/auro-formkit 0.0.0-pr1522.1 → 0.0.0-pr1522.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/checkbox/demo/customize.min.js +15 -2
- package/components/checkbox/demo/getting-started.min.js +15 -2
- package/components/checkbox/demo/index.min.js +15 -2
- package/components/checkbox/dist/index.js +15 -2
- package/components/checkbox/dist/registered.js +15 -2
- package/components/combobox/demo/customize.min.js +105 -10
- package/components/combobox/demo/getting-started.min.js +105 -10
- package/components/combobox/demo/index.min.js +105 -10
- package/components/combobox/dist/index.js +105 -10
- package/components/combobox/dist/registered.js +105 -10
- package/components/counter/demo/customize.min.js +33 -3
- package/components/counter/demo/index.min.js +33 -3
- package/components/counter/dist/index.js +33 -3
- package/components/counter/dist/registered.js +33 -3
- package/components/datepicker/demo/customize.min.js +257 -16
- package/components/datepicker/demo/index.min.js +257 -16
- package/components/datepicker/dist/auro-calendar-cell.d.ts +17 -0
- package/components/datepicker/dist/auro-calendar.d.ts +43 -3
- package/components/datepicker/dist/index.js +257 -16
- package/components/datepicker/dist/registered.js +257 -16
- package/components/dropdown/demo/customize.min.js +18 -1
- package/components/dropdown/demo/getting-started.min.js +18 -1
- package/components/dropdown/demo/index.min.js +18 -1
- package/components/dropdown/dist/index.js +18 -1
- package/components/dropdown/dist/registered.js +18 -1
- package/components/form/demo/customize.min.js +530 -43
- package/components/form/demo/getting-started.min.js +530 -43
- package/components/form/demo/index.min.js +530 -43
- package/components/form/demo/registerDemoDeps.min.js +530 -43
- package/components/input/demo/api.md +58 -57
- package/components/input/demo/customize.min.js +72 -7
- package/components/input/demo/getting-started.min.js +72 -7
- package/components/input/demo/index.min.js +72 -7
- package/components/input/dist/base-input.d.ts +9 -3
- package/components/input/dist/index.js +72 -7
- package/components/input/dist/registered.js +72 -7
- package/components/input/dist/utilities.d.ts +9 -0
- package/components/radio/demo/customize.min.js +15 -2
- package/components/radio/demo/getting-started.min.js +15 -2
- package/components/radio/demo/index.min.js +15 -2
- package/components/radio/dist/index.js +15 -2
- package/components/radio/dist/registered.js +15 -2
- package/components/select/demo/customize.md +6 -4
- package/components/select/demo/customize.min.js +33 -3
- package/components/select/demo/getting-started.min.js +33 -3
- package/components/select/demo/index.min.js +33 -3
- package/components/select/dist/index.js +33 -3
- package/components/select/dist/registered.js +33 -3
- package/custom-elements.json +1622 -1520
- package/package.json +1 -1
|
@@ -7,63 +7,64 @@ The `auro-input` element provides users a way to enter data into a text field.
|
|
|
7
7
|
|
|
8
8
|
## Properties
|
|
9
9
|
|
|
10
|
-
| Property
|
|
11
|
-
|
|
12
|
-
| `a11yActivedescendant`
|
|
13
|
-
| `a11yControls`
|
|
14
|
-
| `a11yExpanded`
|
|
15
|
-
| `a11yRole`
|
|
16
|
-
| `activeLabel`
|
|
17
|
-
| `appearance`
|
|
18
|
-
| `autocapitalize`
|
|
19
|
-
| `autocomplete`
|
|
20
|
-
| `autocorrect`
|
|
21
|
-
| `customValidityTypeEmail`
|
|
22
|
-
| `disabled`
|
|
23
|
-
| `dvInputOnly`
|
|
24
|
-
| `error`
|
|
25
|
-
| `errorMessage`
|
|
26
|
-
| `format`
|
|
27
|
-
| `hasFocus`
|
|
28
|
-
| `hasValue`
|
|
29
|
-
| `icon`
|
|
30
|
-
| `id`
|
|
31
|
-
| `inputmode`
|
|
32
|
-
| `lang`
|
|
33
|
-
| `layout`
|
|
34
|
-
| `locale`
|
|
35
|
-
| `max`
|
|
36
|
-
| `maxLength`
|
|
37
|
-
| `maxObject`
|
|
38
|
-
| `min`
|
|
39
|
-
| `minLength`
|
|
40
|
-
| `minObject`
|
|
41
|
-
| `name`
|
|
42
|
-
| `nested`
|
|
43
|
-
| `noValidate`
|
|
44
|
-
| `onDark`
|
|
45
|
-
| `pattern`
|
|
46
|
-
| `placeholder`
|
|
47
|
-
| `readonly`
|
|
48
|
-
| `required`
|
|
49
|
-
| `setCustomValidity`
|
|
50
|
-
| `setCustomValidityBadInput`
|
|
51
|
-
| `setCustomValidityCustomError`
|
|
52
|
-
| `setCustomValidityForType`
|
|
53
|
-
| `
|
|
54
|
-
| `
|
|
55
|
-
| `
|
|
56
|
-
| `
|
|
57
|
-
| `
|
|
58
|
-
| `
|
|
59
|
-
| `
|
|
60
|
-
| `
|
|
61
|
-
| `
|
|
62
|
-
| `
|
|
63
|
-
| `
|
|
64
|
-
| `
|
|
65
|
-
| `
|
|
66
|
-
| `
|
|
10
|
+
| Property | Attribute | Modifiers | Type | Default | Description |
|
|
11
|
+
|------------------------------------|------------------------------------|-----------|--------------------------------------------------|-------------|--------------------------------------------------|
|
|
12
|
+
| `a11yActivedescendant` | `a11yActivedescendant` | | `string` | | The value for the aria-activedescendant attribute.<br />Points to the ID of the currently active/highlighted option in a listbox. |
|
|
13
|
+
| `a11yControls` | `a11yControls` | | `string` | | The value for the aria-controls attribute. |
|
|
14
|
+
| `a11yExpanded` | `a11yExpanded` | | `boolean` | | The value for the aria-expanded attribute. |
|
|
15
|
+
| `a11yRole` | `a11yRole` | | `string` | | The value for the role attribute. |
|
|
16
|
+
| `activeLabel` | `activeLabel` | | `boolean` | false | If set, the label will remain fixed in the active position. |
|
|
17
|
+
| `appearance` | `appearance` | | `'default' \| 'inverse'` | "'default'" | Defines whether the component will be on lighter or darker backgrounds. |
|
|
18
|
+
| `autocapitalize` | `autocapitalize` | | `string` | | An enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user. [off/none, on/sentences, words, characters]. |
|
|
19
|
+
| `autocomplete` | `autocomplete` | | `string` | | An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported. |
|
|
20
|
+
| `autocorrect` | `autocorrect` | | `string` | | When set to `off`, stops iOS from auto-correcting words when typed into a text box. |
|
|
21
|
+
| `customValidityTypeEmail` | `customValidityTypeEmail` | | `string` | | Custom help text message for email type validity. |
|
|
22
|
+
| `disabled` | `disabled` | | `boolean` | false | If set, disables the input. |
|
|
23
|
+
| `dvInputOnly` | `dvInputOnly` | | `boolean` | false | If defined, the display value slot content will only mask the HTML5 input element. The input's label will not be masked. |
|
|
24
|
+
| `error` | `error` | | `string` | | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
|
|
25
|
+
| `errorMessage` | `errorMessage` | | `string` | | Contains the help text message for the current validity error. |
|
|
26
|
+
| `format` | `format` | | `string` | | Specifies the input mask format. |
|
|
27
|
+
| `hasFocus` | | | `boolean` | | Flag to indicate if the input currently has focus. |
|
|
28
|
+
| `hasValue` | | | `boolean` | false | Flag to indicate if the input currently has value. |
|
|
29
|
+
| `icon` | `icon` | | `boolean` | false | If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format. |
|
|
30
|
+
| `id` | `id` | | `string` | | The id global attribute defines an identifier (ID) which must be unique in the whole document. |
|
|
31
|
+
| `inputmode` | `inputmode` | | `string` | | Exposes inputmode attribute for input. |
|
|
32
|
+
| `lang` | `lang` | | `string` | | Defines the language of an element. |
|
|
33
|
+
| `layout` | | | `string` | "classic" | |
|
|
34
|
+
| `locale` | `locale` | | `string` | "en-US" | Defines the locale of an element.<br />Used for locale-specific formatting, such as date formats. |
|
|
35
|
+
| `max` | `max` | | `string` | "undefined" | The maximum value allowed. This only applies for inputs with a type of `number` and ISO format. |
|
|
36
|
+
| `maxLength` | `maxLength` | | `number` | "undefined" | The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher.<br />**Note**: This attribute is not intended to be used with a `type` or `format` that already has a defined length, such as credit-cards, dates or phone numbers. |
|
|
37
|
+
| `maxObject` | | readonly | `Date \| undefined` | | Read-only Date object representation of `max` for full date formats. |
|
|
38
|
+
| `min` | `min` | | `string` | "undefined" | The minimum value allowed. This only applies for inputs with a type of `number` and ISO date format. |
|
|
39
|
+
| `minLength` | `minLength` | | `number` | "undefined" | The minimum number of characters the user can enter into the text input. This must be a non-negative integer value smaller than or equal to the value specified by `maxlength`. |
|
|
40
|
+
| `minObject` | | readonly | `Date \| undefined` | | Read-only Date object representation of `min` for full date formats. |
|
|
41
|
+
| `name` | `name` | | `string` | | Populates the `name` attribute on the input. |
|
|
42
|
+
| `nested` | `nested` | | `boolean` | | Sets styles for nested operation - removes borders, hides help + error text, and<br />hides accents. |
|
|
43
|
+
| `noValidate` | `noValidate` | | `boolean` | false | If set, disables auto-validation on blur. |
|
|
44
|
+
| `onDark` | `onDark` | | `boolean` | false | DEPRECATED - use `appearance="inverse"` instead. |
|
|
45
|
+
| `pattern` | `pattern` | | `string` | | Specifies a regular expression the form control's value should match. |
|
|
46
|
+
| `placeholder` | `placeholder` | | `string` | | Define custom placeholder text. |
|
|
47
|
+
| `readonly` | `readonly` | | `boolean` | | Makes the input read-only, but can be set programmatically. |
|
|
48
|
+
| `required` | `required` | | `boolean` | false | Populates the `required` attribute on the input. Used for client-side validation. |
|
|
49
|
+
| `setCustomValidity` | `setCustomValidity` | | `string` | | Sets a custom help text message to display for all validityStates. |
|
|
50
|
+
| `setCustomValidityBadInput` | `setCustomValidityBadInput` | | `string` | | Custom help text message to display when validity = `badInput`. |
|
|
51
|
+
| `setCustomValidityCustomError` | `setCustomValidityCustomError` | | `string` | | Custom help text message to display when validity = `customError`. |
|
|
52
|
+
| `setCustomValidityForType` | `setCustomValidityForType` | | `string` | "undefined" | Custom help text message to display for the declared element `type` and type validity fails. |
|
|
53
|
+
| `setCustomValidityPatternMismatch` | `setCustomValidityPatternMismatch` | | `string` | | Custom help text message to display when validity = `patternMismatch`. |
|
|
54
|
+
| `setCustomValidityRangeOverflow` | `setCustomValidityRangeOverflow` | | `string` | | Custom help text message to display when validity = `rangeOverflow`. |
|
|
55
|
+
| `setCustomValidityRangeUnderflow` | `setCustomValidityRangeUnderflow` | | `string` | | Custom help text message to display when validity = `rangeUnderflow`. |
|
|
56
|
+
| `setCustomValidityTooLong` | `setCustomValidityTooLong` | | `string` | | Custom help text message to display when validity = `tooLong`. |
|
|
57
|
+
| `setCustomValidityTooShort` | `setCustomValidityTooShort` | | `string` | | Custom help text message to display when validity = `tooShort`. |
|
|
58
|
+
| `setCustomValidityValueMissing` | `setCustomValidityValueMissing` | | `string` | | Custom help text message to display when validity = `valueMissing`. |
|
|
59
|
+
| `shape` | | | `string` | "classic" | |
|
|
60
|
+
| `simple` | `simple` | | `boolean` | | Simple makes the input render without a border. |
|
|
61
|
+
| `size` | | | `string` | "lg" | |
|
|
62
|
+
| `spellcheck` | `spellcheck` | | `string` | | An enumerated attribute defines whether the element may be checked for spelling errors. [true, false]. When set to `false` the attribute `autocorrect` is set to `off` and `autocapitalize` is set to `none`. |
|
|
63
|
+
| `type` | `type` | | `'text' \| 'password' \| 'email' \| 'credit-card' \| 'tel' \| 'number' \| 'date'` | "'text'" | Populates the `type` attribute on the input. |
|
|
64
|
+
| `validateOnInput` | `validateOnInput` | | `boolean` | | Sets validation mode to re-eval with each input. |
|
|
65
|
+
| `validity` | `validity` | | `string` | | Specifies the `validityState` this element is in. |
|
|
66
|
+
| `value` | `value` | | `string` | "undefined" | Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input.<br />For `date` type inputs using a full date format (year/month/day), the `value` should be ISO (YYYY-MM-DD). Partial date formats use the display format. |
|
|
67
|
+
| `valueObject` | | readonly | `Date \| undefined` | | Read-only Date object representation of `value` for full date formats. |
|
|
67
68
|
|
|
68
69
|
## Methods
|
|
69
70
|
|
|
@@ -4343,8 +4343,21 @@ class AuroFormValidation {
|
|
|
4343
4343
|
return;
|
|
4344
4344
|
}
|
|
4345
4345
|
|
|
4346
|
-
// Validate that the date passed was the correct format and is a valid date
|
|
4346
|
+
// Validate that the date passed was the correct format and is a valid date.
|
|
4347
|
+
// For partial date formats, valueObject is never populated; validate them directly.
|
|
4347
4348
|
if (elem.value && !elem.valueObject) {
|
|
4349
|
+
const isPartialDateFormat = elem.util && !elem.util.isFullDateFormat(elem.type, elem.format);
|
|
4350
|
+
|
|
4351
|
+
if (isPartialDateFormat) {
|
|
4352
|
+
if (!elem.util.isValidPartialDate(elem.value, elem.format)) {
|
|
4353
|
+
elem.validity = 'patternMismatch';
|
|
4354
|
+
elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || 'Invalid Date Format Entered';
|
|
4355
|
+
}
|
|
4356
|
+
// Partial date format — validate directly and skip max/min checks since valueObject is undefined.
|
|
4357
|
+
return;
|
|
4358
|
+
}
|
|
4359
|
+
|
|
4360
|
+
// Full date format with no valueObject means the value is not a valid calendar date.
|
|
4348
4361
|
elem.validity = 'patternMismatch';
|
|
4349
4362
|
elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || 'Invalid Date Format Entered';
|
|
4350
4363
|
return;
|
|
@@ -10274,10 +10287,11 @@ class AuroInputUtilities {
|
|
|
10274
10287
|
const dateFormat = format$1 || this.overrideFormat || pattern || 'mm/dd/yyyy';
|
|
10275
10288
|
|
|
10276
10289
|
if (dateFormat === 'dd' || dateFormat === 'yy' || dateFormat === 'yyyy') {
|
|
10277
|
-
const
|
|
10290
|
+
const fromValue = dateFormat === 'yyyy' ? 1900 : (dateFormat === 'yy' ? 0 : 1);
|
|
10291
|
+
const maxValue = dateFormat === 'dd' ? 31 : (dateFormat === 'yy' ? 99 : 2100);
|
|
10278
10292
|
return {
|
|
10279
10293
|
mask: IMask.MaskedRange,
|
|
10280
|
-
from:
|
|
10294
|
+
from: fromValue,
|
|
10281
10295
|
to: maxValue,
|
|
10282
10296
|
lazy: true,
|
|
10283
10297
|
placeholderChar: '',
|
|
@@ -10285,7 +10299,8 @@ class AuroInputUtilities {
|
|
|
10285
10299
|
return value.toString().padStart(dateFormat.length, '0');
|
|
10286
10300
|
},
|
|
10287
10301
|
parse(str) {
|
|
10288
|
-
|
|
10302
|
+
const num = parseInt(str, 10);
|
|
10303
|
+
return isNaN(num) ? null : num;
|
|
10289
10304
|
}
|
|
10290
10305
|
};
|
|
10291
10306
|
}
|
|
@@ -10349,6 +10364,49 @@ class AuroInputUtilities {
|
|
|
10349
10364
|
return type === 'date' && normalizedFormat.includes('yy') && normalizedFormat.includes('mm') && normalizedFormat.includes('dd');
|
|
10350
10365
|
}
|
|
10351
10366
|
|
|
10367
|
+
/**
|
|
10368
|
+
* Validates a value against a partial date format (one that lacks yy/mm/dd all three).
|
|
10369
|
+
* Day- and year-only formats (dd/yy/yyyy) are checked as integer ranges; other partial formats use
|
|
10370
|
+
* a date-fns parse + round-trip to confirm both validity and exact formatting.
|
|
10371
|
+
* @param {string} value - The user-facing display value.
|
|
10372
|
+
* @param {string} format - The partial date format string (e.g. "mm/yyyy", "yyyy", "dd").
|
|
10373
|
+
* @returns {boolean}
|
|
10374
|
+
*/
|
|
10375
|
+
isValidPartialDate(value, format$1) {
|
|
10376
|
+
if (!value || !format$1) {
|
|
10377
|
+
return false;
|
|
10378
|
+
}
|
|
10379
|
+
const normalizedFormat = format$1.toLowerCase();
|
|
10380
|
+
|
|
10381
|
+
if (normalizedFormat === 'dd') {
|
|
10382
|
+
const num = Number(value);
|
|
10383
|
+
return (/^\d{2}$/u).test(value) && num >= 1 && num <= 31;
|
|
10384
|
+
}
|
|
10385
|
+
if (normalizedFormat === 'yy') {
|
|
10386
|
+
const num = Number(value);
|
|
10387
|
+
return (/^\d{2}$/u).test(value) && num >= 0 && num <= 99;
|
|
10388
|
+
}
|
|
10389
|
+
if (normalizedFormat === 'yyyy') {
|
|
10390
|
+
const num = Number(value);
|
|
10391
|
+
return (/^\d{4}$/u).test(value) && num >= 1900 && num <= 2100;
|
|
10392
|
+
}
|
|
10393
|
+
|
|
10394
|
+
const dateFnsMask = this.toDateFnsMask(normalizedFormat);
|
|
10395
|
+
// Use the 1st of the current month as the reference so that formats
|
|
10396
|
+
// omitting a day (e.g. MM/yyyy) never roll over on days 29–31.
|
|
10397
|
+
const referenceDate = new Date();
|
|
10398
|
+
referenceDate.setDate(1);
|
|
10399
|
+
const parsed = parse(value, dateFnsMask, referenceDate);
|
|
10400
|
+
if (!isValid(parsed) || format(parsed, dateFnsMask) !== value) {
|
|
10401
|
+
return false;
|
|
10402
|
+
}
|
|
10403
|
+
if (normalizedFormat.includes('yyyy')) {
|
|
10404
|
+
const year = parsed.getFullYear();
|
|
10405
|
+
return year >= 1900 && year <= 2100;
|
|
10406
|
+
}
|
|
10407
|
+
return true;
|
|
10408
|
+
}
|
|
10409
|
+
|
|
10352
10410
|
/**
|
|
10353
10411
|
* Converts a display string to its model value.
|
|
10354
10412
|
* For full date formats, converts the display string to an ISO date string.
|
|
@@ -10968,6 +11026,13 @@ class BaseInput extends AuroElement {
|
|
|
10968
11026
|
type: String
|
|
10969
11027
|
},
|
|
10970
11028
|
|
|
11029
|
+
/**
|
|
11030
|
+
* Custom help text message to display when validity = `patternMismatch`.
|
|
11031
|
+
*/
|
|
11032
|
+
setCustomValidityPatternMismatch: {
|
|
11033
|
+
type: String
|
|
11034
|
+
},
|
|
11035
|
+
|
|
10971
11036
|
/**
|
|
10972
11037
|
* Custom help text message to display when validity = `rangeOverflow`.
|
|
10973
11038
|
*/
|
|
@@ -11038,7 +11103,7 @@ class BaseInput extends AuroElement {
|
|
|
11038
11103
|
|
|
11039
11104
|
/**
|
|
11040
11105
|
* Populates the `type` attribute on the input.
|
|
11041
|
-
* @type {'text' | 'password' | 'email' | 'credit-card' | 'tel' | 'number'}
|
|
11106
|
+
* @type {'text' | 'password' | 'email' | 'credit-card' | 'tel' | 'number' | 'date'}
|
|
11042
11107
|
* @default 'text'
|
|
11043
11108
|
*/
|
|
11044
11109
|
type: {
|
|
@@ -11063,7 +11128,7 @@ class BaseInput extends AuroElement {
|
|
|
11063
11128
|
|
|
11064
11129
|
/**
|
|
11065
11130
|
* Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input.
|
|
11066
|
-
*
|
|
11131
|
+
* For `date` type inputs using a full date format (year/month/day), the `value` should be ISO (YYYY-MM-DD). Partial date formats use the display format.
|
|
11067
11132
|
*/
|
|
11068
11133
|
value: {
|
|
11069
11134
|
type: String
|
|
@@ -12186,7 +12251,7 @@ class AuroHelpText extends i$3 {
|
|
|
12186
12251
|
}
|
|
12187
12252
|
}
|
|
12188
12253
|
|
|
12189
|
-
var formkitVersion = '
|
|
12254
|
+
var formkitVersion = '202607012057';
|
|
12190
12255
|
|
|
12191
12256
|
/**
|
|
12192
12257
|
* @license
|
|
@@ -4343,8 +4343,21 @@ class AuroFormValidation {
|
|
|
4343
4343
|
return;
|
|
4344
4344
|
}
|
|
4345
4345
|
|
|
4346
|
-
// Validate that the date passed was the correct format and is a valid date
|
|
4346
|
+
// Validate that the date passed was the correct format and is a valid date.
|
|
4347
|
+
// For partial date formats, valueObject is never populated; validate them directly.
|
|
4347
4348
|
if (elem.value && !elem.valueObject) {
|
|
4349
|
+
const isPartialDateFormat = elem.util && !elem.util.isFullDateFormat(elem.type, elem.format);
|
|
4350
|
+
|
|
4351
|
+
if (isPartialDateFormat) {
|
|
4352
|
+
if (!elem.util.isValidPartialDate(elem.value, elem.format)) {
|
|
4353
|
+
elem.validity = 'patternMismatch';
|
|
4354
|
+
elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || 'Invalid Date Format Entered';
|
|
4355
|
+
}
|
|
4356
|
+
// Partial date format — validate directly and skip max/min checks since valueObject is undefined.
|
|
4357
|
+
return;
|
|
4358
|
+
}
|
|
4359
|
+
|
|
4360
|
+
// Full date format with no valueObject means the value is not a valid calendar date.
|
|
4348
4361
|
elem.validity = 'patternMismatch';
|
|
4349
4362
|
elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || 'Invalid Date Format Entered';
|
|
4350
4363
|
return;
|
|
@@ -10274,10 +10287,11 @@ class AuroInputUtilities {
|
|
|
10274
10287
|
const dateFormat = format$1 || this.overrideFormat || pattern || 'mm/dd/yyyy';
|
|
10275
10288
|
|
|
10276
10289
|
if (dateFormat === 'dd' || dateFormat === 'yy' || dateFormat === 'yyyy') {
|
|
10277
|
-
const
|
|
10290
|
+
const fromValue = dateFormat === 'yyyy' ? 1900 : (dateFormat === 'yy' ? 0 : 1);
|
|
10291
|
+
const maxValue = dateFormat === 'dd' ? 31 : (dateFormat === 'yy' ? 99 : 2100);
|
|
10278
10292
|
return {
|
|
10279
10293
|
mask: IMask.MaskedRange,
|
|
10280
|
-
from:
|
|
10294
|
+
from: fromValue,
|
|
10281
10295
|
to: maxValue,
|
|
10282
10296
|
lazy: true,
|
|
10283
10297
|
placeholderChar: '',
|
|
@@ -10285,7 +10299,8 @@ class AuroInputUtilities {
|
|
|
10285
10299
|
return value.toString().padStart(dateFormat.length, '0');
|
|
10286
10300
|
},
|
|
10287
10301
|
parse(str) {
|
|
10288
|
-
|
|
10302
|
+
const num = parseInt(str, 10);
|
|
10303
|
+
return isNaN(num) ? null : num;
|
|
10289
10304
|
}
|
|
10290
10305
|
};
|
|
10291
10306
|
}
|
|
@@ -10349,6 +10364,49 @@ class AuroInputUtilities {
|
|
|
10349
10364
|
return type === 'date' && normalizedFormat.includes('yy') && normalizedFormat.includes('mm') && normalizedFormat.includes('dd');
|
|
10350
10365
|
}
|
|
10351
10366
|
|
|
10367
|
+
/**
|
|
10368
|
+
* Validates a value against a partial date format (one that lacks yy/mm/dd all three).
|
|
10369
|
+
* Day- and year-only formats (dd/yy/yyyy) are checked as integer ranges; other partial formats use
|
|
10370
|
+
* a date-fns parse + round-trip to confirm both validity and exact formatting.
|
|
10371
|
+
* @param {string} value - The user-facing display value.
|
|
10372
|
+
* @param {string} format - The partial date format string (e.g. "mm/yyyy", "yyyy", "dd").
|
|
10373
|
+
* @returns {boolean}
|
|
10374
|
+
*/
|
|
10375
|
+
isValidPartialDate(value, format$1) {
|
|
10376
|
+
if (!value || !format$1) {
|
|
10377
|
+
return false;
|
|
10378
|
+
}
|
|
10379
|
+
const normalizedFormat = format$1.toLowerCase();
|
|
10380
|
+
|
|
10381
|
+
if (normalizedFormat === 'dd') {
|
|
10382
|
+
const num = Number(value);
|
|
10383
|
+
return (/^\d{2}$/u).test(value) && num >= 1 && num <= 31;
|
|
10384
|
+
}
|
|
10385
|
+
if (normalizedFormat === 'yy') {
|
|
10386
|
+
const num = Number(value);
|
|
10387
|
+
return (/^\d{2}$/u).test(value) && num >= 0 && num <= 99;
|
|
10388
|
+
}
|
|
10389
|
+
if (normalizedFormat === 'yyyy') {
|
|
10390
|
+
const num = Number(value);
|
|
10391
|
+
return (/^\d{4}$/u).test(value) && num >= 1900 && num <= 2100;
|
|
10392
|
+
}
|
|
10393
|
+
|
|
10394
|
+
const dateFnsMask = this.toDateFnsMask(normalizedFormat);
|
|
10395
|
+
// Use the 1st of the current month as the reference so that formats
|
|
10396
|
+
// omitting a day (e.g. MM/yyyy) never roll over on days 29–31.
|
|
10397
|
+
const referenceDate = new Date();
|
|
10398
|
+
referenceDate.setDate(1);
|
|
10399
|
+
const parsed = parse(value, dateFnsMask, referenceDate);
|
|
10400
|
+
if (!isValid(parsed) || format(parsed, dateFnsMask) !== value) {
|
|
10401
|
+
return false;
|
|
10402
|
+
}
|
|
10403
|
+
if (normalizedFormat.includes('yyyy')) {
|
|
10404
|
+
const year = parsed.getFullYear();
|
|
10405
|
+
return year >= 1900 && year <= 2100;
|
|
10406
|
+
}
|
|
10407
|
+
return true;
|
|
10408
|
+
}
|
|
10409
|
+
|
|
10352
10410
|
/**
|
|
10353
10411
|
* Converts a display string to its model value.
|
|
10354
10412
|
* For full date formats, converts the display string to an ISO date string.
|
|
@@ -10968,6 +11026,13 @@ class BaseInput extends AuroElement {
|
|
|
10968
11026
|
type: String
|
|
10969
11027
|
},
|
|
10970
11028
|
|
|
11029
|
+
/**
|
|
11030
|
+
* Custom help text message to display when validity = `patternMismatch`.
|
|
11031
|
+
*/
|
|
11032
|
+
setCustomValidityPatternMismatch: {
|
|
11033
|
+
type: String
|
|
11034
|
+
},
|
|
11035
|
+
|
|
10971
11036
|
/**
|
|
10972
11037
|
* Custom help text message to display when validity = `rangeOverflow`.
|
|
10973
11038
|
*/
|
|
@@ -11038,7 +11103,7 @@ class BaseInput extends AuroElement {
|
|
|
11038
11103
|
|
|
11039
11104
|
/**
|
|
11040
11105
|
* Populates the `type` attribute on the input.
|
|
11041
|
-
* @type {'text' | 'password' | 'email' | 'credit-card' | 'tel' | 'number'}
|
|
11106
|
+
* @type {'text' | 'password' | 'email' | 'credit-card' | 'tel' | 'number' | 'date'}
|
|
11042
11107
|
* @default 'text'
|
|
11043
11108
|
*/
|
|
11044
11109
|
type: {
|
|
@@ -11063,7 +11128,7 @@ class BaseInput extends AuroElement {
|
|
|
11063
11128
|
|
|
11064
11129
|
/**
|
|
11065
11130
|
* Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input.
|
|
11066
|
-
*
|
|
11131
|
+
* For `date` type inputs using a full date format (year/month/day), the `value` should be ISO (YYYY-MM-DD). Partial date formats use the display format.
|
|
11067
11132
|
*/
|
|
11068
11133
|
value: {
|
|
11069
11134
|
type: String
|
|
@@ -12186,7 +12251,7 @@ class AuroHelpText extends i$3 {
|
|
|
12186
12251
|
}
|
|
12187
12252
|
}
|
|
12188
12253
|
|
|
12189
|
-
var formkitVersion = '
|
|
12254
|
+
var formkitVersion = '202607012057';
|
|
12190
12255
|
|
|
12191
12256
|
/**
|
|
12192
12257
|
* @license
|
|
@@ -4343,8 +4343,21 @@ class AuroFormValidation {
|
|
|
4343
4343
|
return;
|
|
4344
4344
|
}
|
|
4345
4345
|
|
|
4346
|
-
// Validate that the date passed was the correct format and is a valid date
|
|
4346
|
+
// Validate that the date passed was the correct format and is a valid date.
|
|
4347
|
+
// For partial date formats, valueObject is never populated; validate them directly.
|
|
4347
4348
|
if (elem.value && !elem.valueObject) {
|
|
4349
|
+
const isPartialDateFormat = elem.util && !elem.util.isFullDateFormat(elem.type, elem.format);
|
|
4350
|
+
|
|
4351
|
+
if (isPartialDateFormat) {
|
|
4352
|
+
if (!elem.util.isValidPartialDate(elem.value, elem.format)) {
|
|
4353
|
+
elem.validity = 'patternMismatch';
|
|
4354
|
+
elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || 'Invalid Date Format Entered';
|
|
4355
|
+
}
|
|
4356
|
+
// Partial date format — validate directly and skip max/min checks since valueObject is undefined.
|
|
4357
|
+
return;
|
|
4358
|
+
}
|
|
4359
|
+
|
|
4360
|
+
// Full date format with no valueObject means the value is not a valid calendar date.
|
|
4348
4361
|
elem.validity = 'patternMismatch';
|
|
4349
4362
|
elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || 'Invalid Date Format Entered';
|
|
4350
4363
|
return;
|
|
@@ -10274,10 +10287,11 @@ class AuroInputUtilities {
|
|
|
10274
10287
|
const dateFormat = format$1 || this.overrideFormat || pattern || 'mm/dd/yyyy';
|
|
10275
10288
|
|
|
10276
10289
|
if (dateFormat === 'dd' || dateFormat === 'yy' || dateFormat === 'yyyy') {
|
|
10277
|
-
const
|
|
10290
|
+
const fromValue = dateFormat === 'yyyy' ? 1900 : (dateFormat === 'yy' ? 0 : 1);
|
|
10291
|
+
const maxValue = dateFormat === 'dd' ? 31 : (dateFormat === 'yy' ? 99 : 2100);
|
|
10278
10292
|
return {
|
|
10279
10293
|
mask: IMask.MaskedRange,
|
|
10280
|
-
from:
|
|
10294
|
+
from: fromValue,
|
|
10281
10295
|
to: maxValue,
|
|
10282
10296
|
lazy: true,
|
|
10283
10297
|
placeholderChar: '',
|
|
@@ -10285,7 +10299,8 @@ class AuroInputUtilities {
|
|
|
10285
10299
|
return value.toString().padStart(dateFormat.length, '0');
|
|
10286
10300
|
},
|
|
10287
10301
|
parse(str) {
|
|
10288
|
-
|
|
10302
|
+
const num = parseInt(str, 10);
|
|
10303
|
+
return isNaN(num) ? null : num;
|
|
10289
10304
|
}
|
|
10290
10305
|
};
|
|
10291
10306
|
}
|
|
@@ -10349,6 +10364,49 @@ class AuroInputUtilities {
|
|
|
10349
10364
|
return type === 'date' && normalizedFormat.includes('yy') && normalizedFormat.includes('mm') && normalizedFormat.includes('dd');
|
|
10350
10365
|
}
|
|
10351
10366
|
|
|
10367
|
+
/**
|
|
10368
|
+
* Validates a value against a partial date format (one that lacks yy/mm/dd all three).
|
|
10369
|
+
* Day- and year-only formats (dd/yy/yyyy) are checked as integer ranges; other partial formats use
|
|
10370
|
+
* a date-fns parse + round-trip to confirm both validity and exact formatting.
|
|
10371
|
+
* @param {string} value - The user-facing display value.
|
|
10372
|
+
* @param {string} format - The partial date format string (e.g. "mm/yyyy", "yyyy", "dd").
|
|
10373
|
+
* @returns {boolean}
|
|
10374
|
+
*/
|
|
10375
|
+
isValidPartialDate(value, format$1) {
|
|
10376
|
+
if (!value || !format$1) {
|
|
10377
|
+
return false;
|
|
10378
|
+
}
|
|
10379
|
+
const normalizedFormat = format$1.toLowerCase();
|
|
10380
|
+
|
|
10381
|
+
if (normalizedFormat === 'dd') {
|
|
10382
|
+
const num = Number(value);
|
|
10383
|
+
return (/^\d{2}$/u).test(value) && num >= 1 && num <= 31;
|
|
10384
|
+
}
|
|
10385
|
+
if (normalizedFormat === 'yy') {
|
|
10386
|
+
const num = Number(value);
|
|
10387
|
+
return (/^\d{2}$/u).test(value) && num >= 0 && num <= 99;
|
|
10388
|
+
}
|
|
10389
|
+
if (normalizedFormat === 'yyyy') {
|
|
10390
|
+
const num = Number(value);
|
|
10391
|
+
return (/^\d{4}$/u).test(value) && num >= 1900 && num <= 2100;
|
|
10392
|
+
}
|
|
10393
|
+
|
|
10394
|
+
const dateFnsMask = this.toDateFnsMask(normalizedFormat);
|
|
10395
|
+
// Use the 1st of the current month as the reference so that formats
|
|
10396
|
+
// omitting a day (e.g. MM/yyyy) never roll over on days 29–31.
|
|
10397
|
+
const referenceDate = new Date();
|
|
10398
|
+
referenceDate.setDate(1);
|
|
10399
|
+
const parsed = parse(value, dateFnsMask, referenceDate);
|
|
10400
|
+
if (!isValid(parsed) || format(parsed, dateFnsMask) !== value) {
|
|
10401
|
+
return false;
|
|
10402
|
+
}
|
|
10403
|
+
if (normalizedFormat.includes('yyyy')) {
|
|
10404
|
+
const year = parsed.getFullYear();
|
|
10405
|
+
return year >= 1900 && year <= 2100;
|
|
10406
|
+
}
|
|
10407
|
+
return true;
|
|
10408
|
+
}
|
|
10409
|
+
|
|
10352
10410
|
/**
|
|
10353
10411
|
* Converts a display string to its model value.
|
|
10354
10412
|
* For full date formats, converts the display string to an ISO date string.
|
|
@@ -10968,6 +11026,13 @@ class BaseInput extends AuroElement {
|
|
|
10968
11026
|
type: String
|
|
10969
11027
|
},
|
|
10970
11028
|
|
|
11029
|
+
/**
|
|
11030
|
+
* Custom help text message to display when validity = `patternMismatch`.
|
|
11031
|
+
*/
|
|
11032
|
+
setCustomValidityPatternMismatch: {
|
|
11033
|
+
type: String
|
|
11034
|
+
},
|
|
11035
|
+
|
|
10971
11036
|
/**
|
|
10972
11037
|
* Custom help text message to display when validity = `rangeOverflow`.
|
|
10973
11038
|
*/
|
|
@@ -11038,7 +11103,7 @@ class BaseInput extends AuroElement {
|
|
|
11038
11103
|
|
|
11039
11104
|
/**
|
|
11040
11105
|
* Populates the `type` attribute on the input.
|
|
11041
|
-
* @type {'text' | 'password' | 'email' | 'credit-card' | 'tel' | 'number'}
|
|
11106
|
+
* @type {'text' | 'password' | 'email' | 'credit-card' | 'tel' | 'number' | 'date'}
|
|
11042
11107
|
* @default 'text'
|
|
11043
11108
|
*/
|
|
11044
11109
|
type: {
|
|
@@ -11063,7 +11128,7 @@ class BaseInput extends AuroElement {
|
|
|
11063
11128
|
|
|
11064
11129
|
/**
|
|
11065
11130
|
* Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input.
|
|
11066
|
-
*
|
|
11131
|
+
* For `date` type inputs using a full date format (year/month/day), the `value` should be ISO (YYYY-MM-DD). Partial date formats use the display format.
|
|
11067
11132
|
*/
|
|
11068
11133
|
value: {
|
|
11069
11134
|
type: String
|
|
@@ -12186,7 +12251,7 @@ class AuroHelpText extends i$3 {
|
|
|
12186
12251
|
}
|
|
12187
12252
|
}
|
|
12188
12253
|
|
|
12189
|
-
var formkitVersion = '
|
|
12254
|
+
var formkitVersion = '202607012057';
|
|
12190
12255
|
|
|
12191
12256
|
/**
|
|
12192
12257
|
* @license
|
|
@@ -291,6 +291,12 @@ export default class BaseInput extends AuroElement {
|
|
|
291
291
|
setCustomValidityForType: {
|
|
292
292
|
type: StringConstructor;
|
|
293
293
|
};
|
|
294
|
+
/**
|
|
295
|
+
* Custom help text message to display when validity = `patternMismatch`.
|
|
296
|
+
*/
|
|
297
|
+
setCustomValidityPatternMismatch: {
|
|
298
|
+
type: StringConstructor;
|
|
299
|
+
};
|
|
294
300
|
/**
|
|
295
301
|
* Custom help text message to display when validity = `rangeOverflow`.
|
|
296
302
|
*/
|
|
@@ -352,10 +358,10 @@ export default class BaseInput extends AuroElement {
|
|
|
352
358
|
};
|
|
353
359
|
/**
|
|
354
360
|
* Populates the `type` attribute on the input.
|
|
355
|
-
* @type {'text' | 'password' | 'email' | 'credit-card' | 'tel' | 'number'}
|
|
361
|
+
* @type {'text' | 'password' | 'email' | 'credit-card' | 'tel' | 'number' | 'date'}
|
|
356
362
|
* @default 'text'
|
|
357
363
|
*/
|
|
358
|
-
type: "text" | "password" | "email" | "credit-card" | "tel" | "number";
|
|
364
|
+
type: "text" | "password" | "email" | "credit-card" | "tel" | "number" | "date";
|
|
359
365
|
/**
|
|
360
366
|
* Sets validation mode to re-eval with each input.
|
|
361
367
|
*/
|
|
@@ -371,7 +377,7 @@ export default class BaseInput extends AuroElement {
|
|
|
371
377
|
};
|
|
372
378
|
/**
|
|
373
379
|
* Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input.
|
|
374
|
-
*
|
|
380
|
+
* For `date` type inputs using a full date format (year/month/day), the `value` should be ISO (YYYY-MM-DD). Partial date formats use the display format.
|
|
375
381
|
*/
|
|
376
382
|
value: {
|
|
377
383
|
type: StringConstructor;
|