@aurodesignsystem-dev/auro-formkit 0.0.0-pr1522.1 → 0.0.0-pr1522.3
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 +111 -9
- package/package.json +1 -1
|
@@ -402,8 +402,21 @@ let AuroFormValidation$1 = class AuroFormValidation {
|
|
|
402
402
|
return;
|
|
403
403
|
}
|
|
404
404
|
|
|
405
|
-
// Validate that the date passed was the correct format and is a valid date
|
|
405
|
+
// Validate that the date passed was the correct format and is a valid date.
|
|
406
|
+
// For partial date formats, valueObject is never populated; validate them directly.
|
|
406
407
|
if (elem.value && !elem.valueObject) {
|
|
408
|
+
const isPartialDateFormat = elem.util && !elem.util.isFullDateFormat(elem.type, elem.format);
|
|
409
|
+
|
|
410
|
+
if (isPartialDateFormat) {
|
|
411
|
+
if (!elem.util.isValidPartialDate(elem.value, elem.format)) {
|
|
412
|
+
elem.validity = 'patternMismatch';
|
|
413
|
+
elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || 'Invalid Date Format Entered';
|
|
414
|
+
}
|
|
415
|
+
// Partial date format — validate directly and skip max/min checks since valueObject is undefined.
|
|
416
|
+
return;
|
|
417
|
+
}
|
|
418
|
+
|
|
419
|
+
// Full date format with no valueObject means the value is not a valid calendar date.
|
|
407
420
|
elem.validity = 'patternMismatch';
|
|
408
421
|
elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || 'Invalid Date Format Entered';
|
|
409
422
|
return;
|
|
@@ -4881,7 +4894,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
|
|
|
4881
4894
|
}
|
|
4882
4895
|
};
|
|
4883
4896
|
|
|
4884
|
-
var formkitVersion$2 = '
|
|
4897
|
+
var formkitVersion$2 = '202607012103';
|
|
4885
4898
|
|
|
4886
4899
|
let AuroElement$2 = class AuroElement extends i$3 {
|
|
4887
4900
|
static get properties() {
|
|
@@ -5633,6 +5646,23 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
5633
5646
|
if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
|
|
5634
5647
|
this.trigger.focus();
|
|
5635
5648
|
}
|
|
5649
|
+
|
|
5650
|
+
|
|
5651
|
+
if (!this.isPopoverVisible) {
|
|
5652
|
+
// wait til the bib gets fully closed and rendered
|
|
5653
|
+
setTimeout(() => {
|
|
5654
|
+
// Skip if the bib re-opened, or if focus moved intentionally outside the dropdown (not to body).
|
|
5655
|
+
// Restore focus to trigger when focus is still inside the bib (:focus-within) or fell to body.
|
|
5656
|
+
if (this.isPopoverVisible ||
|
|
5657
|
+
// eslint-disable-next-line no-extra-parens
|
|
5658
|
+
(!this.bibContent?.matches(':focus-within') &&
|
|
5659
|
+
document.activeElement !== document.body)) {
|
|
5660
|
+
return;
|
|
5661
|
+
}
|
|
5662
|
+
// Restore focus to the trigger.
|
|
5663
|
+
this.trigger.focus();
|
|
5664
|
+
});
|
|
5665
|
+
}
|
|
5636
5666
|
}
|
|
5637
5667
|
|
|
5638
5668
|
firstUpdated() {
|
|
@@ -10565,8 +10595,21 @@ class AuroFormValidation {
|
|
|
10565
10595
|
return;
|
|
10566
10596
|
}
|
|
10567
10597
|
|
|
10568
|
-
// Validate that the date passed was the correct format and is a valid date
|
|
10598
|
+
// Validate that the date passed was the correct format and is a valid date.
|
|
10599
|
+
// For partial date formats, valueObject is never populated; validate them directly.
|
|
10569
10600
|
if (elem.value && !elem.valueObject) {
|
|
10601
|
+
const isPartialDateFormat = elem.util && !elem.util.isFullDateFormat(elem.type, elem.format);
|
|
10602
|
+
|
|
10603
|
+
if (isPartialDateFormat) {
|
|
10604
|
+
if (!elem.util.isValidPartialDate(elem.value, elem.format)) {
|
|
10605
|
+
elem.validity = 'patternMismatch';
|
|
10606
|
+
elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || 'Invalid Date Format Entered';
|
|
10607
|
+
}
|
|
10608
|
+
// Partial date format — validate directly and skip max/min checks since valueObject is undefined.
|
|
10609
|
+
return;
|
|
10610
|
+
}
|
|
10611
|
+
|
|
10612
|
+
// Full date format with no valueObject means the value is not a valid calendar date.
|
|
10570
10613
|
elem.validity = 'patternMismatch';
|
|
10571
10614
|
elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || 'Invalid Date Format Entered';
|
|
10572
10615
|
return;
|
|
@@ -16496,10 +16539,11 @@ class AuroInputUtilities {
|
|
|
16496
16539
|
const dateFormat = format$1 || this.overrideFormat || pattern || 'mm/dd/yyyy';
|
|
16497
16540
|
|
|
16498
16541
|
if (dateFormat === 'dd' || dateFormat === 'yy' || dateFormat === 'yyyy') {
|
|
16499
|
-
const
|
|
16542
|
+
const fromValue = dateFormat === 'yyyy' ? 1900 : (dateFormat === 'yy' ? 0 : 1);
|
|
16543
|
+
const maxValue = dateFormat === 'dd' ? 31 : (dateFormat === 'yy' ? 99 : 2100);
|
|
16500
16544
|
return {
|
|
16501
16545
|
mask: IMask.MaskedRange,
|
|
16502
|
-
from:
|
|
16546
|
+
from: fromValue,
|
|
16503
16547
|
to: maxValue,
|
|
16504
16548
|
lazy: true,
|
|
16505
16549
|
placeholderChar: '',
|
|
@@ -16507,7 +16551,8 @@ class AuroInputUtilities {
|
|
|
16507
16551
|
return value.toString().padStart(dateFormat.length, '0');
|
|
16508
16552
|
},
|
|
16509
16553
|
parse(str) {
|
|
16510
|
-
|
|
16554
|
+
const num = parseInt(str, 10);
|
|
16555
|
+
return isNaN(num) ? null : num;
|
|
16511
16556
|
}
|
|
16512
16557
|
};
|
|
16513
16558
|
}
|
|
@@ -16571,6 +16616,49 @@ class AuroInputUtilities {
|
|
|
16571
16616
|
return type === 'date' && normalizedFormat.includes('yy') && normalizedFormat.includes('mm') && normalizedFormat.includes('dd');
|
|
16572
16617
|
}
|
|
16573
16618
|
|
|
16619
|
+
/**
|
|
16620
|
+
* Validates a value against a partial date format (one that lacks yy/mm/dd all three).
|
|
16621
|
+
* Day- and year-only formats (dd/yy/yyyy) are checked as integer ranges; other partial formats use
|
|
16622
|
+
* a date-fns parse + round-trip to confirm both validity and exact formatting.
|
|
16623
|
+
* @param {string} value - The user-facing display value.
|
|
16624
|
+
* @param {string} format - The partial date format string (e.g. "mm/yyyy", "yyyy", "dd").
|
|
16625
|
+
* @returns {boolean}
|
|
16626
|
+
*/
|
|
16627
|
+
isValidPartialDate(value, format$1) {
|
|
16628
|
+
if (!value || !format$1) {
|
|
16629
|
+
return false;
|
|
16630
|
+
}
|
|
16631
|
+
const normalizedFormat = format$1.toLowerCase();
|
|
16632
|
+
|
|
16633
|
+
if (normalizedFormat === 'dd') {
|
|
16634
|
+
const num = Number(value);
|
|
16635
|
+
return (/^\d{2}$/u).test(value) && num >= 1 && num <= 31;
|
|
16636
|
+
}
|
|
16637
|
+
if (normalizedFormat === 'yy') {
|
|
16638
|
+
const num = Number(value);
|
|
16639
|
+
return (/^\d{2}$/u).test(value) && num >= 0 && num <= 99;
|
|
16640
|
+
}
|
|
16641
|
+
if (normalizedFormat === 'yyyy') {
|
|
16642
|
+
const num = Number(value);
|
|
16643
|
+
return (/^\d{4}$/u).test(value) && num >= 1900 && num <= 2100;
|
|
16644
|
+
}
|
|
16645
|
+
|
|
16646
|
+
const dateFnsMask = this.toDateFnsMask(normalizedFormat);
|
|
16647
|
+
// Use the 1st of the current month as the reference so that formats
|
|
16648
|
+
// omitting a day (e.g. MM/yyyy) never roll over on days 29–31.
|
|
16649
|
+
const referenceDate = new Date();
|
|
16650
|
+
referenceDate.setDate(1);
|
|
16651
|
+
const parsed = parse(value, dateFnsMask, referenceDate);
|
|
16652
|
+
if (!isValid(parsed) || format(parsed, dateFnsMask) !== value) {
|
|
16653
|
+
return false;
|
|
16654
|
+
}
|
|
16655
|
+
if (normalizedFormat.includes('yyyy')) {
|
|
16656
|
+
const year = parsed.getFullYear();
|
|
16657
|
+
return year >= 1900 && year <= 2100;
|
|
16658
|
+
}
|
|
16659
|
+
return true;
|
|
16660
|
+
}
|
|
16661
|
+
|
|
16574
16662
|
/**
|
|
16575
16663
|
* Converts a display string to its model value.
|
|
16576
16664
|
* For full date formats, converts the display string to an ISO date string.
|
|
@@ -17190,6 +17278,13 @@ class BaseInput extends AuroElement$1 {
|
|
|
17190
17278
|
type: String
|
|
17191
17279
|
},
|
|
17192
17280
|
|
|
17281
|
+
/**
|
|
17282
|
+
* Custom help text message to display when validity = `patternMismatch`.
|
|
17283
|
+
*/
|
|
17284
|
+
setCustomValidityPatternMismatch: {
|
|
17285
|
+
type: String
|
|
17286
|
+
},
|
|
17287
|
+
|
|
17193
17288
|
/**
|
|
17194
17289
|
* Custom help text message to display when validity = `rangeOverflow`.
|
|
17195
17290
|
*/
|
|
@@ -17260,7 +17355,7 @@ class BaseInput extends AuroElement$1 {
|
|
|
17260
17355
|
|
|
17261
17356
|
/**
|
|
17262
17357
|
* Populates the `type` attribute on the input.
|
|
17263
|
-
* @type {'text' | 'password' | 'email' | 'credit-card' | 'tel' | 'number'}
|
|
17358
|
+
* @type {'text' | 'password' | 'email' | 'credit-card' | 'tel' | 'number' | 'date'}
|
|
17264
17359
|
* @default 'text'
|
|
17265
17360
|
*/
|
|
17266
17361
|
type: {
|
|
@@ -17285,7 +17380,7 @@ class BaseInput extends AuroElement$1 {
|
|
|
17285
17380
|
|
|
17286
17381
|
/**
|
|
17287
17382
|
* Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input.
|
|
17288
|
-
*
|
|
17383
|
+
* 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.
|
|
17289
17384
|
*/
|
|
17290
17385
|
value: {
|
|
17291
17386
|
type: String
|
|
@@ -18408,7 +18503,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
|
|
|
18408
18503
|
}
|
|
18409
18504
|
};
|
|
18410
18505
|
|
|
18411
|
-
var formkitVersion$1 = '
|
|
18506
|
+
var formkitVersion$1 = '202607012103';
|
|
18412
18507
|
|
|
18413
18508
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
18414
18509
|
// See LICENSE in the project root for license information.
|
|
@@ -19534,7 +19629,7 @@ class AuroBibtemplate extends i$3 {
|
|
|
19534
19629
|
}
|
|
19535
19630
|
}
|
|
19536
19631
|
|
|
19537
|
-
var formkitVersion = '
|
|
19632
|
+
var formkitVersion = '202607012103';
|
|
19538
19633
|
|
|
19539
19634
|
var styleCss$3 = i$6`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
|
|
19540
19635
|
|
|
@@ -350,8 +350,21 @@ let AuroFormValidation$1 = class AuroFormValidation {
|
|
|
350
350
|
return;
|
|
351
351
|
}
|
|
352
352
|
|
|
353
|
-
// Validate that the date passed was the correct format and is a valid date
|
|
353
|
+
// Validate that the date passed was the correct format and is a valid date.
|
|
354
|
+
// For partial date formats, valueObject is never populated; validate them directly.
|
|
354
355
|
if (elem.value && !elem.valueObject) {
|
|
356
|
+
const isPartialDateFormat = elem.util && !elem.util.isFullDateFormat(elem.type, elem.format);
|
|
357
|
+
|
|
358
|
+
if (isPartialDateFormat) {
|
|
359
|
+
if (!elem.util.isValidPartialDate(elem.value, elem.format)) {
|
|
360
|
+
elem.validity = 'patternMismatch';
|
|
361
|
+
elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || 'Invalid Date Format Entered';
|
|
362
|
+
}
|
|
363
|
+
// Partial date format — validate directly and skip max/min checks since valueObject is undefined.
|
|
364
|
+
return;
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
// Full date format with no valueObject means the value is not a valid calendar date.
|
|
355
368
|
elem.validity = 'patternMismatch';
|
|
356
369
|
elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || 'Invalid Date Format Entered';
|
|
357
370
|
return;
|
|
@@ -4799,7 +4812,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
|
|
|
4799
4812
|
}
|
|
4800
4813
|
};
|
|
4801
4814
|
|
|
4802
|
-
var formkitVersion$2 = '
|
|
4815
|
+
var formkitVersion$2 = '202607012103';
|
|
4803
4816
|
|
|
4804
4817
|
let AuroElement$2 = class AuroElement extends LitElement {
|
|
4805
4818
|
static get properties() {
|
|
@@ -5551,6 +5564,23 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
5551
5564
|
if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
|
|
5552
5565
|
this.trigger.focus();
|
|
5553
5566
|
}
|
|
5567
|
+
|
|
5568
|
+
|
|
5569
|
+
if (!this.isPopoverVisible) {
|
|
5570
|
+
// wait til the bib gets fully closed and rendered
|
|
5571
|
+
setTimeout(() => {
|
|
5572
|
+
// Skip if the bib re-opened, or if focus moved intentionally outside the dropdown (not to body).
|
|
5573
|
+
// Restore focus to trigger when focus is still inside the bib (:focus-within) or fell to body.
|
|
5574
|
+
if (this.isPopoverVisible ||
|
|
5575
|
+
// eslint-disable-next-line no-extra-parens
|
|
5576
|
+
(!this.bibContent?.matches(':focus-within') &&
|
|
5577
|
+
document.activeElement !== document.body)) {
|
|
5578
|
+
return;
|
|
5579
|
+
}
|
|
5580
|
+
// Restore focus to the trigger.
|
|
5581
|
+
this.trigger.focus();
|
|
5582
|
+
});
|
|
5583
|
+
}
|
|
5554
5584
|
}
|
|
5555
5585
|
|
|
5556
5586
|
firstUpdated() {
|
|
@@ -10476,8 +10506,21 @@ class AuroFormValidation {
|
|
|
10476
10506
|
return;
|
|
10477
10507
|
}
|
|
10478
10508
|
|
|
10479
|
-
// Validate that the date passed was the correct format and is a valid date
|
|
10509
|
+
// Validate that the date passed was the correct format and is a valid date.
|
|
10510
|
+
// For partial date formats, valueObject is never populated; validate them directly.
|
|
10480
10511
|
if (elem.value && !elem.valueObject) {
|
|
10512
|
+
const isPartialDateFormat = elem.util && !elem.util.isFullDateFormat(elem.type, elem.format);
|
|
10513
|
+
|
|
10514
|
+
if (isPartialDateFormat) {
|
|
10515
|
+
if (!elem.util.isValidPartialDate(elem.value, elem.format)) {
|
|
10516
|
+
elem.validity = 'patternMismatch';
|
|
10517
|
+
elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || 'Invalid Date Format Entered';
|
|
10518
|
+
}
|
|
10519
|
+
// Partial date format — validate directly and skip max/min checks since valueObject is undefined.
|
|
10520
|
+
return;
|
|
10521
|
+
}
|
|
10522
|
+
|
|
10523
|
+
// Full date format with no valueObject means the value is not a valid calendar date.
|
|
10481
10524
|
elem.validity = 'patternMismatch';
|
|
10482
10525
|
elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || 'Invalid Date Format Entered';
|
|
10483
10526
|
return;
|
|
@@ -16407,10 +16450,11 @@ class AuroInputUtilities {
|
|
|
16407
16450
|
const dateFormat = format$1 || this.overrideFormat || pattern || 'mm/dd/yyyy';
|
|
16408
16451
|
|
|
16409
16452
|
if (dateFormat === 'dd' || dateFormat === 'yy' || dateFormat === 'yyyy') {
|
|
16410
|
-
const
|
|
16453
|
+
const fromValue = dateFormat === 'yyyy' ? 1900 : (dateFormat === 'yy' ? 0 : 1);
|
|
16454
|
+
const maxValue = dateFormat === 'dd' ? 31 : (dateFormat === 'yy' ? 99 : 2100);
|
|
16411
16455
|
return {
|
|
16412
16456
|
mask: IMask.MaskedRange,
|
|
16413
|
-
from:
|
|
16457
|
+
from: fromValue,
|
|
16414
16458
|
to: maxValue,
|
|
16415
16459
|
lazy: true,
|
|
16416
16460
|
placeholderChar: '',
|
|
@@ -16418,7 +16462,8 @@ class AuroInputUtilities {
|
|
|
16418
16462
|
return value.toString().padStart(dateFormat.length, '0');
|
|
16419
16463
|
},
|
|
16420
16464
|
parse(str) {
|
|
16421
|
-
|
|
16465
|
+
const num = parseInt(str, 10);
|
|
16466
|
+
return isNaN(num) ? null : num;
|
|
16422
16467
|
}
|
|
16423
16468
|
};
|
|
16424
16469
|
}
|
|
@@ -16482,6 +16527,49 @@ class AuroInputUtilities {
|
|
|
16482
16527
|
return type === 'date' && normalizedFormat.includes('yy') && normalizedFormat.includes('mm') && normalizedFormat.includes('dd');
|
|
16483
16528
|
}
|
|
16484
16529
|
|
|
16530
|
+
/**
|
|
16531
|
+
* Validates a value against a partial date format (one that lacks yy/mm/dd all three).
|
|
16532
|
+
* Day- and year-only formats (dd/yy/yyyy) are checked as integer ranges; other partial formats use
|
|
16533
|
+
* a date-fns parse + round-trip to confirm both validity and exact formatting.
|
|
16534
|
+
* @param {string} value - The user-facing display value.
|
|
16535
|
+
* @param {string} format - The partial date format string (e.g. "mm/yyyy", "yyyy", "dd").
|
|
16536
|
+
* @returns {boolean}
|
|
16537
|
+
*/
|
|
16538
|
+
isValidPartialDate(value, format$1) {
|
|
16539
|
+
if (!value || !format$1) {
|
|
16540
|
+
return false;
|
|
16541
|
+
}
|
|
16542
|
+
const normalizedFormat = format$1.toLowerCase();
|
|
16543
|
+
|
|
16544
|
+
if (normalizedFormat === 'dd') {
|
|
16545
|
+
const num = Number(value);
|
|
16546
|
+
return (/^\d{2}$/u).test(value) && num >= 1 && num <= 31;
|
|
16547
|
+
}
|
|
16548
|
+
if (normalizedFormat === 'yy') {
|
|
16549
|
+
const num = Number(value);
|
|
16550
|
+
return (/^\d{2}$/u).test(value) && num >= 0 && num <= 99;
|
|
16551
|
+
}
|
|
16552
|
+
if (normalizedFormat === 'yyyy') {
|
|
16553
|
+
const num = Number(value);
|
|
16554
|
+
return (/^\d{4}$/u).test(value) && num >= 1900 && num <= 2100;
|
|
16555
|
+
}
|
|
16556
|
+
|
|
16557
|
+
const dateFnsMask = this.toDateFnsMask(normalizedFormat);
|
|
16558
|
+
// Use the 1st of the current month as the reference so that formats
|
|
16559
|
+
// omitting a day (e.g. MM/yyyy) never roll over on days 29–31.
|
|
16560
|
+
const referenceDate = new Date();
|
|
16561
|
+
referenceDate.setDate(1);
|
|
16562
|
+
const parsed = parse(value, dateFnsMask, referenceDate);
|
|
16563
|
+
if (!isValid(parsed) || format(parsed, dateFnsMask) !== value) {
|
|
16564
|
+
return false;
|
|
16565
|
+
}
|
|
16566
|
+
if (normalizedFormat.includes('yyyy')) {
|
|
16567
|
+
const year = parsed.getFullYear();
|
|
16568
|
+
return year >= 1900 && year <= 2100;
|
|
16569
|
+
}
|
|
16570
|
+
return true;
|
|
16571
|
+
}
|
|
16572
|
+
|
|
16485
16573
|
/**
|
|
16486
16574
|
* Converts a display string to its model value.
|
|
16487
16575
|
* For full date formats, converts the display string to an ISO date string.
|
|
@@ -17101,6 +17189,13 @@ class BaseInput extends AuroElement$1 {
|
|
|
17101
17189
|
type: String
|
|
17102
17190
|
},
|
|
17103
17191
|
|
|
17192
|
+
/**
|
|
17193
|
+
* Custom help text message to display when validity = `patternMismatch`.
|
|
17194
|
+
*/
|
|
17195
|
+
setCustomValidityPatternMismatch: {
|
|
17196
|
+
type: String
|
|
17197
|
+
},
|
|
17198
|
+
|
|
17104
17199
|
/**
|
|
17105
17200
|
* Custom help text message to display when validity = `rangeOverflow`.
|
|
17106
17201
|
*/
|
|
@@ -17171,7 +17266,7 @@ class BaseInput extends AuroElement$1 {
|
|
|
17171
17266
|
|
|
17172
17267
|
/**
|
|
17173
17268
|
* Populates the `type` attribute on the input.
|
|
17174
|
-
* @type {'text' | 'password' | 'email' | 'credit-card' | 'tel' | 'number'}
|
|
17269
|
+
* @type {'text' | 'password' | 'email' | 'credit-card' | 'tel' | 'number' | 'date'}
|
|
17175
17270
|
* @default 'text'
|
|
17176
17271
|
*/
|
|
17177
17272
|
type: {
|
|
@@ -17196,7 +17291,7 @@ class BaseInput extends AuroElement$1 {
|
|
|
17196
17291
|
|
|
17197
17292
|
/**
|
|
17198
17293
|
* Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input.
|
|
17199
|
-
*
|
|
17294
|
+
* 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.
|
|
17200
17295
|
*/
|
|
17201
17296
|
value: {
|
|
17202
17297
|
type: String
|
|
@@ -18319,7 +18414,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
18319
18414
|
}
|
|
18320
18415
|
};
|
|
18321
18416
|
|
|
18322
|
-
var formkitVersion$1 = '
|
|
18417
|
+
var formkitVersion$1 = '202607012103';
|
|
18323
18418
|
|
|
18324
18419
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
18325
18420
|
// See LICENSE in the project root for license information.
|
|
@@ -19445,7 +19540,7 @@ class AuroBibtemplate extends LitElement {
|
|
|
19445
19540
|
}
|
|
19446
19541
|
}
|
|
19447
19542
|
|
|
19448
|
-
var formkitVersion = '
|
|
19543
|
+
var formkitVersion = '202607012103';
|
|
19449
19544
|
|
|
19450
19545
|
var styleCss$1 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
|
|
19451
19546
|
|
|
@@ -350,8 +350,21 @@ let AuroFormValidation$1 = class AuroFormValidation {
|
|
|
350
350
|
return;
|
|
351
351
|
}
|
|
352
352
|
|
|
353
|
-
// Validate that the date passed was the correct format and is a valid date
|
|
353
|
+
// Validate that the date passed was the correct format and is a valid date.
|
|
354
|
+
// For partial date formats, valueObject is never populated; validate them directly.
|
|
354
355
|
if (elem.value && !elem.valueObject) {
|
|
356
|
+
const isPartialDateFormat = elem.util && !elem.util.isFullDateFormat(elem.type, elem.format);
|
|
357
|
+
|
|
358
|
+
if (isPartialDateFormat) {
|
|
359
|
+
if (!elem.util.isValidPartialDate(elem.value, elem.format)) {
|
|
360
|
+
elem.validity = 'patternMismatch';
|
|
361
|
+
elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || 'Invalid Date Format Entered';
|
|
362
|
+
}
|
|
363
|
+
// Partial date format — validate directly and skip max/min checks since valueObject is undefined.
|
|
364
|
+
return;
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
// Full date format with no valueObject means the value is not a valid calendar date.
|
|
355
368
|
elem.validity = 'patternMismatch';
|
|
356
369
|
elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || 'Invalid Date Format Entered';
|
|
357
370
|
return;
|
|
@@ -4799,7 +4812,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
|
|
|
4799
4812
|
}
|
|
4800
4813
|
};
|
|
4801
4814
|
|
|
4802
|
-
var formkitVersion$2 = '
|
|
4815
|
+
var formkitVersion$2 = '202607012103';
|
|
4803
4816
|
|
|
4804
4817
|
let AuroElement$2 = class AuroElement extends LitElement {
|
|
4805
4818
|
static get properties() {
|
|
@@ -5551,6 +5564,23 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
5551
5564
|
if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
|
|
5552
5565
|
this.trigger.focus();
|
|
5553
5566
|
}
|
|
5567
|
+
|
|
5568
|
+
|
|
5569
|
+
if (!this.isPopoverVisible) {
|
|
5570
|
+
// wait til the bib gets fully closed and rendered
|
|
5571
|
+
setTimeout(() => {
|
|
5572
|
+
// Skip if the bib re-opened, or if focus moved intentionally outside the dropdown (not to body).
|
|
5573
|
+
// Restore focus to trigger when focus is still inside the bib (:focus-within) or fell to body.
|
|
5574
|
+
if (this.isPopoverVisible ||
|
|
5575
|
+
// eslint-disable-next-line no-extra-parens
|
|
5576
|
+
(!this.bibContent?.matches(':focus-within') &&
|
|
5577
|
+
document.activeElement !== document.body)) {
|
|
5578
|
+
return;
|
|
5579
|
+
}
|
|
5580
|
+
// Restore focus to the trigger.
|
|
5581
|
+
this.trigger.focus();
|
|
5582
|
+
});
|
|
5583
|
+
}
|
|
5554
5584
|
}
|
|
5555
5585
|
|
|
5556
5586
|
firstUpdated() {
|
|
@@ -10476,8 +10506,21 @@ class AuroFormValidation {
|
|
|
10476
10506
|
return;
|
|
10477
10507
|
}
|
|
10478
10508
|
|
|
10479
|
-
// Validate that the date passed was the correct format and is a valid date
|
|
10509
|
+
// Validate that the date passed was the correct format and is a valid date.
|
|
10510
|
+
// For partial date formats, valueObject is never populated; validate them directly.
|
|
10480
10511
|
if (elem.value && !elem.valueObject) {
|
|
10512
|
+
const isPartialDateFormat = elem.util && !elem.util.isFullDateFormat(elem.type, elem.format);
|
|
10513
|
+
|
|
10514
|
+
if (isPartialDateFormat) {
|
|
10515
|
+
if (!elem.util.isValidPartialDate(elem.value, elem.format)) {
|
|
10516
|
+
elem.validity = 'patternMismatch';
|
|
10517
|
+
elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || 'Invalid Date Format Entered';
|
|
10518
|
+
}
|
|
10519
|
+
// Partial date format — validate directly and skip max/min checks since valueObject is undefined.
|
|
10520
|
+
return;
|
|
10521
|
+
}
|
|
10522
|
+
|
|
10523
|
+
// Full date format with no valueObject means the value is not a valid calendar date.
|
|
10481
10524
|
elem.validity = 'patternMismatch';
|
|
10482
10525
|
elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || 'Invalid Date Format Entered';
|
|
10483
10526
|
return;
|
|
@@ -16407,10 +16450,11 @@ class AuroInputUtilities {
|
|
|
16407
16450
|
const dateFormat = format$1 || this.overrideFormat || pattern || 'mm/dd/yyyy';
|
|
16408
16451
|
|
|
16409
16452
|
if (dateFormat === 'dd' || dateFormat === 'yy' || dateFormat === 'yyyy') {
|
|
16410
|
-
const
|
|
16453
|
+
const fromValue = dateFormat === 'yyyy' ? 1900 : (dateFormat === 'yy' ? 0 : 1);
|
|
16454
|
+
const maxValue = dateFormat === 'dd' ? 31 : (dateFormat === 'yy' ? 99 : 2100);
|
|
16411
16455
|
return {
|
|
16412
16456
|
mask: IMask.MaskedRange,
|
|
16413
|
-
from:
|
|
16457
|
+
from: fromValue,
|
|
16414
16458
|
to: maxValue,
|
|
16415
16459
|
lazy: true,
|
|
16416
16460
|
placeholderChar: '',
|
|
@@ -16418,7 +16462,8 @@ class AuroInputUtilities {
|
|
|
16418
16462
|
return value.toString().padStart(dateFormat.length, '0');
|
|
16419
16463
|
},
|
|
16420
16464
|
parse(str) {
|
|
16421
|
-
|
|
16465
|
+
const num = parseInt(str, 10);
|
|
16466
|
+
return isNaN(num) ? null : num;
|
|
16422
16467
|
}
|
|
16423
16468
|
};
|
|
16424
16469
|
}
|
|
@@ -16482,6 +16527,49 @@ class AuroInputUtilities {
|
|
|
16482
16527
|
return type === 'date' && normalizedFormat.includes('yy') && normalizedFormat.includes('mm') && normalizedFormat.includes('dd');
|
|
16483
16528
|
}
|
|
16484
16529
|
|
|
16530
|
+
/**
|
|
16531
|
+
* Validates a value against a partial date format (one that lacks yy/mm/dd all three).
|
|
16532
|
+
* Day- and year-only formats (dd/yy/yyyy) are checked as integer ranges; other partial formats use
|
|
16533
|
+
* a date-fns parse + round-trip to confirm both validity and exact formatting.
|
|
16534
|
+
* @param {string} value - The user-facing display value.
|
|
16535
|
+
* @param {string} format - The partial date format string (e.g. "mm/yyyy", "yyyy", "dd").
|
|
16536
|
+
* @returns {boolean}
|
|
16537
|
+
*/
|
|
16538
|
+
isValidPartialDate(value, format$1) {
|
|
16539
|
+
if (!value || !format$1) {
|
|
16540
|
+
return false;
|
|
16541
|
+
}
|
|
16542
|
+
const normalizedFormat = format$1.toLowerCase();
|
|
16543
|
+
|
|
16544
|
+
if (normalizedFormat === 'dd') {
|
|
16545
|
+
const num = Number(value);
|
|
16546
|
+
return (/^\d{2}$/u).test(value) && num >= 1 && num <= 31;
|
|
16547
|
+
}
|
|
16548
|
+
if (normalizedFormat === 'yy') {
|
|
16549
|
+
const num = Number(value);
|
|
16550
|
+
return (/^\d{2}$/u).test(value) && num >= 0 && num <= 99;
|
|
16551
|
+
}
|
|
16552
|
+
if (normalizedFormat === 'yyyy') {
|
|
16553
|
+
const num = Number(value);
|
|
16554
|
+
return (/^\d{4}$/u).test(value) && num >= 1900 && num <= 2100;
|
|
16555
|
+
}
|
|
16556
|
+
|
|
16557
|
+
const dateFnsMask = this.toDateFnsMask(normalizedFormat);
|
|
16558
|
+
// Use the 1st of the current month as the reference so that formats
|
|
16559
|
+
// omitting a day (e.g. MM/yyyy) never roll over on days 29–31.
|
|
16560
|
+
const referenceDate = new Date();
|
|
16561
|
+
referenceDate.setDate(1);
|
|
16562
|
+
const parsed = parse(value, dateFnsMask, referenceDate);
|
|
16563
|
+
if (!isValid(parsed) || format(parsed, dateFnsMask) !== value) {
|
|
16564
|
+
return false;
|
|
16565
|
+
}
|
|
16566
|
+
if (normalizedFormat.includes('yyyy')) {
|
|
16567
|
+
const year = parsed.getFullYear();
|
|
16568
|
+
return year >= 1900 && year <= 2100;
|
|
16569
|
+
}
|
|
16570
|
+
return true;
|
|
16571
|
+
}
|
|
16572
|
+
|
|
16485
16573
|
/**
|
|
16486
16574
|
* Converts a display string to its model value.
|
|
16487
16575
|
* For full date formats, converts the display string to an ISO date string.
|
|
@@ -17101,6 +17189,13 @@ class BaseInput extends AuroElement$1 {
|
|
|
17101
17189
|
type: String
|
|
17102
17190
|
},
|
|
17103
17191
|
|
|
17192
|
+
/**
|
|
17193
|
+
* Custom help text message to display when validity = `patternMismatch`.
|
|
17194
|
+
*/
|
|
17195
|
+
setCustomValidityPatternMismatch: {
|
|
17196
|
+
type: String
|
|
17197
|
+
},
|
|
17198
|
+
|
|
17104
17199
|
/**
|
|
17105
17200
|
* Custom help text message to display when validity = `rangeOverflow`.
|
|
17106
17201
|
*/
|
|
@@ -17171,7 +17266,7 @@ class BaseInput extends AuroElement$1 {
|
|
|
17171
17266
|
|
|
17172
17267
|
/**
|
|
17173
17268
|
* Populates the `type` attribute on the input.
|
|
17174
|
-
* @type {'text' | 'password' | 'email' | 'credit-card' | 'tel' | 'number'}
|
|
17269
|
+
* @type {'text' | 'password' | 'email' | 'credit-card' | 'tel' | 'number' | 'date'}
|
|
17175
17270
|
* @default 'text'
|
|
17176
17271
|
*/
|
|
17177
17272
|
type: {
|
|
@@ -17196,7 +17291,7 @@ class BaseInput extends AuroElement$1 {
|
|
|
17196
17291
|
|
|
17197
17292
|
/**
|
|
17198
17293
|
* Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input.
|
|
17199
|
-
*
|
|
17294
|
+
* 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.
|
|
17200
17295
|
*/
|
|
17201
17296
|
value: {
|
|
17202
17297
|
type: String
|
|
@@ -18319,7 +18414,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
18319
18414
|
}
|
|
18320
18415
|
};
|
|
18321
18416
|
|
|
18322
|
-
var formkitVersion$1 = '
|
|
18417
|
+
var formkitVersion$1 = '202607012103';
|
|
18323
18418
|
|
|
18324
18419
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
18325
18420
|
// See LICENSE in the project root for license information.
|
|
@@ -19445,7 +19540,7 @@ class AuroBibtemplate extends LitElement {
|
|
|
19445
19540
|
}
|
|
19446
19541
|
}
|
|
19447
19542
|
|
|
19448
|
-
var formkitVersion = '
|
|
19543
|
+
var formkitVersion = '202607012103';
|
|
19449
19544
|
|
|
19450
19545
|
var styleCss$1 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
|
|
19451
19546
|
|
|
@@ -522,8 +522,21 @@ class AuroFormValidation {
|
|
|
522
522
|
return;
|
|
523
523
|
}
|
|
524
524
|
|
|
525
|
-
// Validate that the date passed was the correct format and is a valid date
|
|
525
|
+
// Validate that the date passed was the correct format and is a valid date.
|
|
526
|
+
// For partial date formats, valueObject is never populated; validate them directly.
|
|
526
527
|
if (elem.value && !elem.valueObject) {
|
|
528
|
+
const isPartialDateFormat = elem.util && !elem.util.isFullDateFormat(elem.type, elem.format);
|
|
529
|
+
|
|
530
|
+
if (isPartialDateFormat) {
|
|
531
|
+
if (!elem.util.isValidPartialDate(elem.value, elem.format)) {
|
|
532
|
+
elem.validity = 'patternMismatch';
|
|
533
|
+
elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || 'Invalid Date Format Entered';
|
|
534
|
+
}
|
|
535
|
+
// Partial date format — validate directly and skip max/min checks since valueObject is undefined.
|
|
536
|
+
return;
|
|
537
|
+
}
|
|
538
|
+
|
|
539
|
+
// Full date format with no valueObject means the value is not a valid calendar date.
|
|
527
540
|
elem.validity = 'patternMismatch';
|
|
528
541
|
elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || 'Invalid Date Format Entered';
|
|
529
542
|
return;
|
|
@@ -1101,7 +1114,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
|
|
|
1101
1114
|
}
|
|
1102
1115
|
};
|
|
1103
1116
|
|
|
1104
|
-
var formkitVersion$1 = '
|
|
1117
|
+
var formkitVersion$1 = '202607012103';
|
|
1105
1118
|
|
|
1106
1119
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1107
1120
|
// See LICENSE in the project root for license information.
|
|
@@ -5447,7 +5460,7 @@ class AuroHelpText extends i$2 {
|
|
|
5447
5460
|
}
|
|
5448
5461
|
}
|
|
5449
5462
|
|
|
5450
|
-
var formkitVersion = '
|
|
5463
|
+
var formkitVersion = '202607012103';
|
|
5451
5464
|
|
|
5452
5465
|
let AuroElement$1 = class AuroElement extends i$2 {
|
|
5453
5466
|
static get properties() {
|
|
@@ -6199,6 +6212,23 @@ class AuroDropdown extends AuroElement$1 {
|
|
|
6199
6212
|
if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
|
|
6200
6213
|
this.trigger.focus();
|
|
6201
6214
|
}
|
|
6215
|
+
|
|
6216
|
+
|
|
6217
|
+
if (!this.isPopoverVisible) {
|
|
6218
|
+
// wait til the bib gets fully closed and rendered
|
|
6219
|
+
setTimeout(() => {
|
|
6220
|
+
// Skip if the bib re-opened, or if focus moved intentionally outside the dropdown (not to body).
|
|
6221
|
+
// Restore focus to trigger when focus is still inside the bib (:focus-within) or fell to body.
|
|
6222
|
+
if (this.isPopoverVisible ||
|
|
6223
|
+
// eslint-disable-next-line no-extra-parens
|
|
6224
|
+
(!this.bibContent?.matches(':focus-within') &&
|
|
6225
|
+
document.activeElement !== document.body)) {
|
|
6226
|
+
return;
|
|
6227
|
+
}
|
|
6228
|
+
// Restore focus to the trigger.
|
|
6229
|
+
this.trigger.focus();
|
|
6230
|
+
});
|
|
6231
|
+
}
|
|
6202
6232
|
}
|
|
6203
6233
|
|
|
6204
6234
|
firstUpdated() {
|