@aurodesignsystem-dev/auro-formkit 0.0.0-pr1515.0 → 0.0.0-pr1515.1
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 +1 -1
- package/components/checkbox/demo/getting-started.min.js +1 -1
- package/components/checkbox/demo/index.min.js +1 -1
- package/components/checkbox/dist/index.js +1 -1
- package/components/checkbox/dist/registered.js +1 -1
- package/components/combobox/demo/customize.min.js +119 -96
- package/components/combobox/demo/getting-started.min.js +119 -96
- package/components/combobox/demo/index.min.js +119 -96
- package/components/combobox/dist/index.js +118 -95
- package/components/combobox/dist/registered.js +118 -95
- package/components/counter/demo/customize.min.js +2 -2
- package/components/counter/demo/index.min.js +2 -2
- package/components/counter/dist/index.js +2 -2
- package/components/counter/dist/registered.js +2 -2
- package/components/datepicker/demo/customize.min.js +139 -97
- package/components/datepicker/demo/index.min.js +139 -97
- package/components/datepicker/dist/index.js +139 -97
- package/components/datepicker/dist/registered.js +139 -97
- package/components/dropdown/demo/customize.min.js +1 -1
- package/components/dropdown/demo/getting-started.min.js +1 -1
- package/components/dropdown/demo/index.min.js +1 -1
- package/components/dropdown/dist/index.js +1 -1
- package/components/dropdown/dist/registered.js +1 -1
- package/components/form/demo/customize.min.js +381 -293
- package/components/form/demo/getting-started.min.js +381 -293
- package/components/form/demo/index.min.js +381 -293
- package/components/form/demo/registerDemoDeps.min.js +381 -293
- package/components/input/demo/api.md +5 -5
- package/components/input/demo/customize.md +8 -8
- package/components/input/demo/customize.min.js +116 -93
- package/components/input/demo/getting-started.min.js +116 -93
- package/components/input/demo/index.min.js +116 -93
- package/components/input/dist/base-input.d.ts +33 -44
- package/components/input/dist/index.js +129 -94
- package/components/input/dist/registered.js +116 -93
- package/components/radio/demo/customize.min.js +1 -1
- package/components/radio/demo/getting-started.min.js +1 -1
- package/components/radio/demo/index.min.js +1 -1
- package/components/radio/dist/index.js +1 -1
- package/components/radio/dist/registered.js +1 -1
- package/components/select/demo/customize.md +1 -1
- package/components/select/demo/index.min.js +2 -2
- package/components/select/dist/index.js +2 -2
- package/components/select/dist/registered.js +2 -2
- package/custom-elements.json +453 -243
- package/package.json +1 -1
- package/components/select/demo/customize.min.js +0 -10170
- package/components/select/demo/demo-support.min.js +0 -55807
- package/components/select/demo/getting-started.min.js +0 -10214
|
@@ -1260,7 +1260,7 @@ class AuroHelpText extends i$2 {
|
|
|
1260
1260
|
}
|
|
1261
1261
|
}
|
|
1262
1262
|
|
|
1263
|
-
var formkitVersion = '
|
|
1263
|
+
var formkitVersion = '202606291801';
|
|
1264
1264
|
|
|
1265
1265
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1266
1266
|
// See LICENSE in the project root for license information.
|
|
@@ -1260,7 +1260,7 @@ class AuroHelpText extends i$2 {
|
|
|
1260
1260
|
}
|
|
1261
1261
|
}
|
|
1262
1262
|
|
|
1263
|
-
var formkitVersion = '
|
|
1263
|
+
var formkitVersion = '202606291801';
|
|
1264
1264
|
|
|
1265
1265
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1266
1266
|
// See LICENSE in the project root for license information.
|
|
@@ -1260,7 +1260,7 @@ class AuroHelpText extends i$2 {
|
|
|
1260
1260
|
}
|
|
1261
1261
|
}
|
|
1262
1262
|
|
|
1263
|
-
var formkitVersion = '
|
|
1263
|
+
var formkitVersion = '202606291801';
|
|
1264
1264
|
|
|
1265
1265
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1266
1266
|
// See LICENSE in the project root for license information.
|
|
@@ -1213,7 +1213,7 @@ class AuroHelpText extends LitElement {
|
|
|
1213
1213
|
}
|
|
1214
1214
|
}
|
|
1215
1215
|
|
|
1216
|
-
var formkitVersion = '
|
|
1216
|
+
var formkitVersion = '202606291801';
|
|
1217
1217
|
|
|
1218
1218
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1219
1219
|
// See LICENSE in the project root for license information.
|
|
@@ -1213,7 +1213,7 @@ class AuroHelpText extends LitElement {
|
|
|
1213
1213
|
}
|
|
1214
1214
|
}
|
|
1215
1215
|
|
|
1216
|
-
var formkitVersion = '
|
|
1216
|
+
var formkitVersion = '202606291801';
|
|
1217
1217
|
|
|
1218
1218
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1219
1219
|
// See LICENSE in the project root for license information.
|
|
@@ -4873,7 +4873,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
|
|
|
4873
4873
|
}
|
|
4874
4874
|
};
|
|
4875
4875
|
|
|
4876
|
-
var formkitVersion$2 = '
|
|
4876
|
+
var formkitVersion$2 = '202606291801';
|
|
4877
4877
|
|
|
4878
4878
|
let AuroElement$2 = class AuroElement extends i$3 {
|
|
4879
4879
|
static get properties() {
|
|
@@ -16599,6 +16599,13 @@ class AuroInputUtilities {
|
|
|
16599
16599
|
* @returns {string | undefined}
|
|
16600
16600
|
*/
|
|
16601
16601
|
toFormattedValue(valueObject, format) {
|
|
16602
|
+
// Exposed publicly via `AuroInputUtil.toFormattedValue`, so a missing
|
|
16603
|
+
// `format` argument has to fail gracefully rather than throw on
|
|
16604
|
+
// `format.toLowerCase()`. Treat any falsy value (undefined, null, '')
|
|
16605
|
+
// as "no format → no display value".
|
|
16606
|
+
if (!format) {
|
|
16607
|
+
return undefined;
|
|
16608
|
+
}
|
|
16602
16609
|
const normalizedFormat = format.toLowerCase();
|
|
16603
16610
|
const maskOptions = this.getMaskOptions('date', normalizedFormat);
|
|
16604
16611
|
|
|
@@ -16749,79 +16756,18 @@ class BaseInput extends AuroElement$1 {
|
|
|
16749
16756
|
constructor() {
|
|
16750
16757
|
super();
|
|
16751
16758
|
|
|
16752
|
-
|
|
16753
|
-
|
|
16754
|
-
|
|
16755
|
-
|
|
16756
|
-
|
|
16757
|
-
|
|
16758
|
-
|
|
16759
|
-
|
|
16760
|
-
|
|
16761
|
-
|
|
16762
|
-
this.required = false;
|
|
16763
|
-
this.onDark = false;
|
|
16764
|
-
this.setCustomValidityForType = undefined;
|
|
16765
|
-
this.size = 'lg';
|
|
16766
|
-
this.shape = 'classic';
|
|
16767
|
-
this.value = undefined;
|
|
16768
|
-
this._valueObject = undefined;
|
|
16769
|
-
|
|
16770
|
-
this._initializePrivateDefaults();
|
|
16771
|
-
}
|
|
16772
|
-
|
|
16773
|
-
/**
|
|
16774
|
-
* Internal Defaults.
|
|
16775
|
-
* @private
|
|
16776
|
-
* @returns {void}
|
|
16777
|
-
*/
|
|
16778
|
-
_initializePrivateDefaults() {
|
|
16759
|
+
// Single-source initialization. Alphabetized so duplicate or stale
|
|
16760
|
+
// defaults are immediately obvious on a diff. Every field is assigned
|
|
16761
|
+
// exactly once here (previously the constructor + the old
|
|
16762
|
+
// `_initializePrivateDefaults` overlapped — both wrote ~14 of the same
|
|
16763
|
+
// fields and double-allocated `util` and `validation`, discarding the
|
|
16764
|
+
// first instance). `validation` is now allocated exactly once; `util`
|
|
16765
|
+
// is seeded here with an en-US default and then rebuilt in
|
|
16766
|
+
// `connectedCallback` once the consumer-resolved locale is available,
|
|
16767
|
+
// so a parent (datepicker/combobox) calling `validate()` synchronously
|
|
16768
|
+
// during its own update cycle sees a populated util instance.
|
|
16779
16769
|
this.activeLabel = false;
|
|
16780
|
-
|
|
16781
|
-
this.icon = false;
|
|
16782
|
-
this.disabled = false;
|
|
16783
|
-
this.dvInputOnly = false;
|
|
16784
|
-
this.hideLabelVisually = false;
|
|
16785
|
-
this.max = undefined;
|
|
16786
|
-
this.maxLength = undefined;
|
|
16787
|
-
this.min = undefined;
|
|
16788
|
-
this.minLength = undefined;
|
|
16789
|
-
this.noValidate = false;
|
|
16790
|
-
this.onDark = false;
|
|
16791
|
-
this.required = false;
|
|
16792
|
-
this.setCustomValidityForType = undefined;
|
|
16793
|
-
|
|
16794
|
-
// Used for storing raw values returned from input mask.
|
|
16795
|
-
this._rawMaskValue = undefined;
|
|
16796
|
-
|
|
16797
|
-
/**
|
|
16798
|
-
* @private
|
|
16799
|
-
*/
|
|
16800
|
-
this.layout = 'classic';
|
|
16801
|
-
|
|
16802
|
-
/**
|
|
16803
|
-
* @private
|
|
16804
|
-
*/
|
|
16805
|
-
this.shape = 'classic';
|
|
16806
|
-
|
|
16807
|
-
/**
|
|
16808
|
-
* @private
|
|
16809
|
-
*/
|
|
16810
|
-
this.size = 'lg';
|
|
16811
|
-
|
|
16812
|
-
this.touched = false;
|
|
16813
|
-
this.util = new AuroInputUtilities({
|
|
16814
|
-
locale: "en-US",
|
|
16815
|
-
format: this.format
|
|
16816
|
-
});
|
|
16817
|
-
this.validation = new AuroFormValidation();
|
|
16818
|
-
this.inputIconName = undefined;
|
|
16819
|
-
this.showPassword = false;
|
|
16820
|
-
this.validationCCLength = undefined;
|
|
16821
|
-
this.hasValue = false;
|
|
16822
|
-
this.label = 'Input label is undefined';
|
|
16823
|
-
|
|
16824
|
-
|
|
16770
|
+
/** @private */
|
|
16825
16771
|
this.allowedInputTypes = [
|
|
16826
16772
|
"text",
|
|
16827
16773
|
"number",
|
|
@@ -16830,7 +16776,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
16830
16776
|
"credit-card",
|
|
16831
16777
|
"tel"
|
|
16832
16778
|
];
|
|
16833
|
-
this.
|
|
16779
|
+
this.appearance = "default";
|
|
16780
|
+
/** @private */
|
|
16834
16781
|
this.dateFormatMap = {
|
|
16835
16782
|
'mm/dd/yyyy': 'dateMMDDYYYY',
|
|
16836
16783
|
'dd/mm/yyyy': 'dateDDMMYYYY',
|
|
@@ -16847,27 +16794,57 @@ class BaseInput extends AuroElement$1 {
|
|
|
16847
16794
|
'dd/mm': 'dateDDMM',
|
|
16848
16795
|
'mm/dd': 'dateMMDD'
|
|
16849
16796
|
};
|
|
16797
|
+
this.disabled = false;
|
|
16798
|
+
/** @private */
|
|
16850
16799
|
this.domHandler = new DomHandler();
|
|
16851
16800
|
this.dvInputOnly = false;
|
|
16852
16801
|
this.hasValue = false;
|
|
16802
|
+
this.hideLabelVisually = false;
|
|
16803
|
+
this.icon = false;
|
|
16804
|
+
/** @private */
|
|
16853
16805
|
this.inputIconName = undefined;
|
|
16806
|
+
/** @private */
|
|
16854
16807
|
this.label = 'Input label is undefined';
|
|
16808
|
+
this.layout = 'classic';
|
|
16809
|
+
this.locale = 'en-US';
|
|
16810
|
+
this.max = undefined;
|
|
16811
|
+
this._maxObject = undefined;
|
|
16812
|
+
this.maxLength = undefined;
|
|
16813
|
+
this.min = undefined;
|
|
16814
|
+
this._minObject = undefined;
|
|
16815
|
+
this.minLength = undefined;
|
|
16855
16816
|
this.noValidate = false;
|
|
16856
|
-
this.
|
|
16817
|
+
this.onDark = false;
|
|
16818
|
+
// Raw values returned from the input mask before model normalization.
|
|
16819
|
+
this._rawMaskValue = undefined;
|
|
16820
|
+
this.required = false;
|
|
16821
|
+
this.setCustomValidityForType = undefined;
|
|
16822
|
+
// Credit Card is intentionally excluded — its mask manages the cursor
|
|
16823
|
+
// itself, and listing it here caused cursor placement issues in Safari.
|
|
16824
|
+
/** @private */
|
|
16857
16825
|
this.setSelectionInputTypes = [
|
|
16858
16826
|
"text",
|
|
16859
16827
|
"password",
|
|
16860
16828
|
"email"
|
|
16861
|
-
];
|
|
16829
|
+
];
|
|
16830
|
+
this.shape = 'classic';
|
|
16831
|
+
/** @private */
|
|
16862
16832
|
this.showPassword = false;
|
|
16833
|
+
this.size = 'lg';
|
|
16863
16834
|
this.touched = false;
|
|
16835
|
+
/** @private */
|
|
16864
16836
|
this.uniqueId = new UniqueId().create();
|
|
16837
|
+
/** @private */
|
|
16865
16838
|
this.util = new AuroInputUtilities({
|
|
16866
16839
|
locale: this.locale,
|
|
16867
16840
|
format: this.format
|
|
16868
16841
|
});
|
|
16842
|
+
/** @private */
|
|
16869
16843
|
this.validation = new AuroFormValidation();
|
|
16844
|
+
/** @private */
|
|
16870
16845
|
this.validationCCLength = undefined;
|
|
16846
|
+
this.value = undefined;
|
|
16847
|
+
this._valueObject = undefined;
|
|
16871
16848
|
}
|
|
16872
16849
|
|
|
16873
16850
|
// function to define props used within the scope of this component
|
|
@@ -17415,6 +17392,15 @@ class BaseInput extends AuroElement$1 {
|
|
|
17415
17392
|
|
|
17416
17393
|
this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
|
|
17417
17394
|
|
|
17395
|
+
// Normalize the format token to lowercase so case-mixed values supplied
|
|
17396
|
+
// via attribute (e.g. `format="MM/DD/YYYY"`) hit the `dateFormatMap`
|
|
17397
|
+
// lookup inside `setCustomHelpTextMessage`. Without this, an uppercase
|
|
17398
|
+
// format silently misses the map and leaves `setCustomValidityForType`
|
|
17399
|
+
// unset.
|
|
17400
|
+
if (this.format) {
|
|
17401
|
+
this.format = this.format.toLowerCase();
|
|
17402
|
+
}
|
|
17403
|
+
|
|
17418
17404
|
// use validity message override if declared when initializing the component
|
|
17419
17405
|
if (this.hasAttribute('setCustomValidity')) {
|
|
17420
17406
|
this.ValidityMessageOverride = this.setCustomValidity;
|
|
@@ -17848,6 +17834,38 @@ class BaseInput extends AuroElement$1 {
|
|
|
17848
17834
|
this.touched = true;
|
|
17849
17835
|
this.validation.validate(this);
|
|
17850
17836
|
}
|
|
17837
|
+
|
|
17838
|
+
// Prevents cursor jumping in Safari. Setting `this.value` triggers a Lit
|
|
17839
|
+
// update that can re-render the input and reset the native cursor; we
|
|
17840
|
+
// capture the caret position before that update commits and restore it
|
|
17841
|
+
// via `setSelectionRange` once the update has flushed. Gated on
|
|
17842
|
+
// `setSelectionInputTypes` so credit-card (and other masked types whose
|
|
17843
|
+
// formatter manages the cursor itself) doesn't get a competing write.
|
|
17844
|
+
// Capture the caret position INSIDE the gate — reading `selectionStart`
|
|
17845
|
+
// on input types that don't support text selection (number, email in
|
|
17846
|
+
// some browsers) throws InvalidStateError, which would crash all input
|
|
17847
|
+
// handling. Wrap the read in try/catch belt-and-suspenders even though
|
|
17848
|
+
// the gated types currently support it, since the list is a public
|
|
17849
|
+
// property a consumer could mutate.
|
|
17850
|
+
if (this.setSelectionInputTypes.includes(this.type)) {
|
|
17851
|
+
let selectionStart;
|
|
17852
|
+
try {
|
|
17853
|
+
selectionStart = this.inputElement.selectionStart;
|
|
17854
|
+
} catch (error) { // eslint-disable-line no-unused-vars
|
|
17855
|
+
return;
|
|
17856
|
+
}
|
|
17857
|
+
if (typeof selectionStart !== 'number') {
|
|
17858
|
+
return;
|
|
17859
|
+
}
|
|
17860
|
+
this.updateComplete.then(() => {
|
|
17861
|
+
try {
|
|
17862
|
+
this.inputElement.setSelectionRange(selectionStart, selectionStart);
|
|
17863
|
+
} catch (error) { // eslint-disable-line no-unused-vars
|
|
17864
|
+
// Some input types (number/email in certain UAs) throw on
|
|
17865
|
+
// setSelectionRange; swallow and let the native cursor stand.
|
|
17866
|
+
}
|
|
17867
|
+
});
|
|
17868
|
+
}
|
|
17851
17869
|
}
|
|
17852
17870
|
|
|
17853
17871
|
/**
|
|
@@ -18474,7 +18492,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
|
|
|
18474
18492
|
}
|
|
18475
18493
|
};
|
|
18476
18494
|
|
|
18477
|
-
var formkitVersion$1 = '
|
|
18495
|
+
var formkitVersion$1 = '202606291801';
|
|
18478
18496
|
|
|
18479
18497
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
18480
18498
|
// See LICENSE in the project root for license information.
|
|
@@ -18977,6 +18995,7 @@ class AuroInput extends BaseInput {
|
|
|
18977
18995
|
<${this.buttonTag}
|
|
18978
18996
|
@click="${this.handleClickShowPassword}"
|
|
18979
18997
|
appearance="${this.onDark ? 'inverse' : this.appearance}"
|
|
18998
|
+
aria-pressed="${this.showPassword ? 'true' : 'false'}"
|
|
18980
18999
|
class="notificationBtn passwordBtn"
|
|
18981
19000
|
shape="circle"
|
|
18982
19001
|
size="sm"
|
|
@@ -19050,25 +19069,29 @@ class AuroInput extends BaseInput {
|
|
|
19050
19069
|
* @returns {html} - Returns HTML for the help text and error message.
|
|
19051
19070
|
*/
|
|
19052
19071
|
renderHtmlHelpText() {
|
|
19072
|
+
// Single `<p>` with stable identity across validity transitions —
|
|
19073
|
+
// previously two distinct templates (valid vs invalid) caused Lit to
|
|
19074
|
+
// replace the node entirely on a flip, and VoiceOver wouldn't
|
|
19075
|
+
// re-announce because the live-region element it was watching had been
|
|
19076
|
+
// removed and a new one inserted. Keeping one node means the `role`,
|
|
19077
|
+
// `aria-live`, and text content all change in-place, which AT does
|
|
19078
|
+
// observe and announce.
|
|
19079
|
+
const isError = this.validity && this.validity !== 'valid';
|
|
19053
19080
|
return u$7`
|
|
19054
|
-
|
|
19055
|
-
?
|
|
19056
|
-
|
|
19057
|
-
|
|
19058
|
-
|
|
19059
|
-
|
|
19060
|
-
|
|
19061
|
-
|
|
19062
|
-
|
|
19063
|
-
|
|
19064
|
-
|
|
19065
|
-
|
|
19066
|
-
|
|
19067
|
-
|
|
19068
|
-
</p>
|
|
19069
|
-
</${this.helpTextTag}>
|
|
19070
|
-
`
|
|
19071
|
-
}
|
|
19081
|
+
<${this.helpTextTag}
|
|
19082
|
+
appearance="${this.onDark ? 'inverse' : this.appearance}"
|
|
19083
|
+
?error=${isError}>
|
|
19084
|
+
<p
|
|
19085
|
+
id="${this.uniqueId}"
|
|
19086
|
+
part="helpText"
|
|
19087
|
+
role="${o(isError ? 'alert' : undefined)}"
|
|
19088
|
+
aria-live="${o(isError ? 'assertive' : undefined)}">
|
|
19089
|
+
${isError
|
|
19090
|
+
? this.errorMessage
|
|
19091
|
+
: u$7`<slot name="helpText">${this.getHelpText()}</slot>`
|
|
19092
|
+
}
|
|
19093
|
+
</p>
|
|
19094
|
+
</${this.helpTextTag}>
|
|
19072
19095
|
`;
|
|
19073
19096
|
}
|
|
19074
19097
|
|
|
@@ -19595,7 +19618,7 @@ class AuroBibtemplate extends i$3 {
|
|
|
19595
19618
|
}
|
|
19596
19619
|
}
|
|
19597
19620
|
|
|
19598
|
-
var formkitVersion = '
|
|
19621
|
+
var formkitVersion = '202606291801';
|
|
19599
19622
|
|
|
19600
19623
|
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}`;
|
|
19601
19624
|
|
|
@@ -4873,7 +4873,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
|
|
|
4873
4873
|
}
|
|
4874
4874
|
};
|
|
4875
4875
|
|
|
4876
|
-
var formkitVersion$2 = '
|
|
4876
|
+
var formkitVersion$2 = '202606291801';
|
|
4877
4877
|
|
|
4878
4878
|
let AuroElement$2 = class AuroElement extends i$3 {
|
|
4879
4879
|
static get properties() {
|
|
@@ -16599,6 +16599,13 @@ class AuroInputUtilities {
|
|
|
16599
16599
|
* @returns {string | undefined}
|
|
16600
16600
|
*/
|
|
16601
16601
|
toFormattedValue(valueObject, format) {
|
|
16602
|
+
// Exposed publicly via `AuroInputUtil.toFormattedValue`, so a missing
|
|
16603
|
+
// `format` argument has to fail gracefully rather than throw on
|
|
16604
|
+
// `format.toLowerCase()`. Treat any falsy value (undefined, null, '')
|
|
16605
|
+
// as "no format → no display value".
|
|
16606
|
+
if (!format) {
|
|
16607
|
+
return undefined;
|
|
16608
|
+
}
|
|
16602
16609
|
const normalizedFormat = format.toLowerCase();
|
|
16603
16610
|
const maskOptions = this.getMaskOptions('date', normalizedFormat);
|
|
16604
16611
|
|
|
@@ -16749,79 +16756,18 @@ class BaseInput extends AuroElement$1 {
|
|
|
16749
16756
|
constructor() {
|
|
16750
16757
|
super();
|
|
16751
16758
|
|
|
16752
|
-
|
|
16753
|
-
|
|
16754
|
-
|
|
16755
|
-
|
|
16756
|
-
|
|
16757
|
-
|
|
16758
|
-
|
|
16759
|
-
|
|
16760
|
-
|
|
16761
|
-
|
|
16762
|
-
this.required = false;
|
|
16763
|
-
this.onDark = false;
|
|
16764
|
-
this.setCustomValidityForType = undefined;
|
|
16765
|
-
this.size = 'lg';
|
|
16766
|
-
this.shape = 'classic';
|
|
16767
|
-
this.value = undefined;
|
|
16768
|
-
this._valueObject = undefined;
|
|
16769
|
-
|
|
16770
|
-
this._initializePrivateDefaults();
|
|
16771
|
-
}
|
|
16772
|
-
|
|
16773
|
-
/**
|
|
16774
|
-
* Internal Defaults.
|
|
16775
|
-
* @private
|
|
16776
|
-
* @returns {void}
|
|
16777
|
-
*/
|
|
16778
|
-
_initializePrivateDefaults() {
|
|
16759
|
+
// Single-source initialization. Alphabetized so duplicate or stale
|
|
16760
|
+
// defaults are immediately obvious on a diff. Every field is assigned
|
|
16761
|
+
// exactly once here (previously the constructor + the old
|
|
16762
|
+
// `_initializePrivateDefaults` overlapped — both wrote ~14 of the same
|
|
16763
|
+
// fields and double-allocated `util` and `validation`, discarding the
|
|
16764
|
+
// first instance). `validation` is now allocated exactly once; `util`
|
|
16765
|
+
// is seeded here with an en-US default and then rebuilt in
|
|
16766
|
+
// `connectedCallback` once the consumer-resolved locale is available,
|
|
16767
|
+
// so a parent (datepicker/combobox) calling `validate()` synchronously
|
|
16768
|
+
// during its own update cycle sees a populated util instance.
|
|
16779
16769
|
this.activeLabel = false;
|
|
16780
|
-
|
|
16781
|
-
this.icon = false;
|
|
16782
|
-
this.disabled = false;
|
|
16783
|
-
this.dvInputOnly = false;
|
|
16784
|
-
this.hideLabelVisually = false;
|
|
16785
|
-
this.max = undefined;
|
|
16786
|
-
this.maxLength = undefined;
|
|
16787
|
-
this.min = undefined;
|
|
16788
|
-
this.minLength = undefined;
|
|
16789
|
-
this.noValidate = false;
|
|
16790
|
-
this.onDark = false;
|
|
16791
|
-
this.required = false;
|
|
16792
|
-
this.setCustomValidityForType = undefined;
|
|
16793
|
-
|
|
16794
|
-
// Used for storing raw values returned from input mask.
|
|
16795
|
-
this._rawMaskValue = undefined;
|
|
16796
|
-
|
|
16797
|
-
/**
|
|
16798
|
-
* @private
|
|
16799
|
-
*/
|
|
16800
|
-
this.layout = 'classic';
|
|
16801
|
-
|
|
16802
|
-
/**
|
|
16803
|
-
* @private
|
|
16804
|
-
*/
|
|
16805
|
-
this.shape = 'classic';
|
|
16806
|
-
|
|
16807
|
-
/**
|
|
16808
|
-
* @private
|
|
16809
|
-
*/
|
|
16810
|
-
this.size = 'lg';
|
|
16811
|
-
|
|
16812
|
-
this.touched = false;
|
|
16813
|
-
this.util = new AuroInputUtilities({
|
|
16814
|
-
locale: "en-US",
|
|
16815
|
-
format: this.format
|
|
16816
|
-
});
|
|
16817
|
-
this.validation = new AuroFormValidation();
|
|
16818
|
-
this.inputIconName = undefined;
|
|
16819
|
-
this.showPassword = false;
|
|
16820
|
-
this.validationCCLength = undefined;
|
|
16821
|
-
this.hasValue = false;
|
|
16822
|
-
this.label = 'Input label is undefined';
|
|
16823
|
-
|
|
16824
|
-
|
|
16770
|
+
/** @private */
|
|
16825
16771
|
this.allowedInputTypes = [
|
|
16826
16772
|
"text",
|
|
16827
16773
|
"number",
|
|
@@ -16830,7 +16776,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
16830
16776
|
"credit-card",
|
|
16831
16777
|
"tel"
|
|
16832
16778
|
];
|
|
16833
|
-
this.
|
|
16779
|
+
this.appearance = "default";
|
|
16780
|
+
/** @private */
|
|
16834
16781
|
this.dateFormatMap = {
|
|
16835
16782
|
'mm/dd/yyyy': 'dateMMDDYYYY',
|
|
16836
16783
|
'dd/mm/yyyy': 'dateDDMMYYYY',
|
|
@@ -16847,27 +16794,57 @@ class BaseInput extends AuroElement$1 {
|
|
|
16847
16794
|
'dd/mm': 'dateDDMM',
|
|
16848
16795
|
'mm/dd': 'dateMMDD'
|
|
16849
16796
|
};
|
|
16797
|
+
this.disabled = false;
|
|
16798
|
+
/** @private */
|
|
16850
16799
|
this.domHandler = new DomHandler();
|
|
16851
16800
|
this.dvInputOnly = false;
|
|
16852
16801
|
this.hasValue = false;
|
|
16802
|
+
this.hideLabelVisually = false;
|
|
16803
|
+
this.icon = false;
|
|
16804
|
+
/** @private */
|
|
16853
16805
|
this.inputIconName = undefined;
|
|
16806
|
+
/** @private */
|
|
16854
16807
|
this.label = 'Input label is undefined';
|
|
16808
|
+
this.layout = 'classic';
|
|
16809
|
+
this.locale = 'en-US';
|
|
16810
|
+
this.max = undefined;
|
|
16811
|
+
this._maxObject = undefined;
|
|
16812
|
+
this.maxLength = undefined;
|
|
16813
|
+
this.min = undefined;
|
|
16814
|
+
this._minObject = undefined;
|
|
16815
|
+
this.minLength = undefined;
|
|
16855
16816
|
this.noValidate = false;
|
|
16856
|
-
this.
|
|
16817
|
+
this.onDark = false;
|
|
16818
|
+
// Raw values returned from the input mask before model normalization.
|
|
16819
|
+
this._rawMaskValue = undefined;
|
|
16820
|
+
this.required = false;
|
|
16821
|
+
this.setCustomValidityForType = undefined;
|
|
16822
|
+
// Credit Card is intentionally excluded — its mask manages the cursor
|
|
16823
|
+
// itself, and listing it here caused cursor placement issues in Safari.
|
|
16824
|
+
/** @private */
|
|
16857
16825
|
this.setSelectionInputTypes = [
|
|
16858
16826
|
"text",
|
|
16859
16827
|
"password",
|
|
16860
16828
|
"email"
|
|
16861
|
-
];
|
|
16829
|
+
];
|
|
16830
|
+
this.shape = 'classic';
|
|
16831
|
+
/** @private */
|
|
16862
16832
|
this.showPassword = false;
|
|
16833
|
+
this.size = 'lg';
|
|
16863
16834
|
this.touched = false;
|
|
16835
|
+
/** @private */
|
|
16864
16836
|
this.uniqueId = new UniqueId().create();
|
|
16837
|
+
/** @private */
|
|
16865
16838
|
this.util = new AuroInputUtilities({
|
|
16866
16839
|
locale: this.locale,
|
|
16867
16840
|
format: this.format
|
|
16868
16841
|
});
|
|
16842
|
+
/** @private */
|
|
16869
16843
|
this.validation = new AuroFormValidation();
|
|
16844
|
+
/** @private */
|
|
16870
16845
|
this.validationCCLength = undefined;
|
|
16846
|
+
this.value = undefined;
|
|
16847
|
+
this._valueObject = undefined;
|
|
16871
16848
|
}
|
|
16872
16849
|
|
|
16873
16850
|
// function to define props used within the scope of this component
|
|
@@ -17415,6 +17392,15 @@ class BaseInput extends AuroElement$1 {
|
|
|
17415
17392
|
|
|
17416
17393
|
this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
|
|
17417
17394
|
|
|
17395
|
+
// Normalize the format token to lowercase so case-mixed values supplied
|
|
17396
|
+
// via attribute (e.g. `format="MM/DD/YYYY"`) hit the `dateFormatMap`
|
|
17397
|
+
// lookup inside `setCustomHelpTextMessage`. Without this, an uppercase
|
|
17398
|
+
// format silently misses the map and leaves `setCustomValidityForType`
|
|
17399
|
+
// unset.
|
|
17400
|
+
if (this.format) {
|
|
17401
|
+
this.format = this.format.toLowerCase();
|
|
17402
|
+
}
|
|
17403
|
+
|
|
17418
17404
|
// use validity message override if declared when initializing the component
|
|
17419
17405
|
if (this.hasAttribute('setCustomValidity')) {
|
|
17420
17406
|
this.ValidityMessageOverride = this.setCustomValidity;
|
|
@@ -17848,6 +17834,38 @@ class BaseInput extends AuroElement$1 {
|
|
|
17848
17834
|
this.touched = true;
|
|
17849
17835
|
this.validation.validate(this);
|
|
17850
17836
|
}
|
|
17837
|
+
|
|
17838
|
+
// Prevents cursor jumping in Safari. Setting `this.value` triggers a Lit
|
|
17839
|
+
// update that can re-render the input and reset the native cursor; we
|
|
17840
|
+
// capture the caret position before that update commits and restore it
|
|
17841
|
+
// via `setSelectionRange` once the update has flushed. Gated on
|
|
17842
|
+
// `setSelectionInputTypes` so credit-card (and other masked types whose
|
|
17843
|
+
// formatter manages the cursor itself) doesn't get a competing write.
|
|
17844
|
+
// Capture the caret position INSIDE the gate — reading `selectionStart`
|
|
17845
|
+
// on input types that don't support text selection (number, email in
|
|
17846
|
+
// some browsers) throws InvalidStateError, which would crash all input
|
|
17847
|
+
// handling. Wrap the read in try/catch belt-and-suspenders even though
|
|
17848
|
+
// the gated types currently support it, since the list is a public
|
|
17849
|
+
// property a consumer could mutate.
|
|
17850
|
+
if (this.setSelectionInputTypes.includes(this.type)) {
|
|
17851
|
+
let selectionStart;
|
|
17852
|
+
try {
|
|
17853
|
+
selectionStart = this.inputElement.selectionStart;
|
|
17854
|
+
} catch (error) { // eslint-disable-line no-unused-vars
|
|
17855
|
+
return;
|
|
17856
|
+
}
|
|
17857
|
+
if (typeof selectionStart !== 'number') {
|
|
17858
|
+
return;
|
|
17859
|
+
}
|
|
17860
|
+
this.updateComplete.then(() => {
|
|
17861
|
+
try {
|
|
17862
|
+
this.inputElement.setSelectionRange(selectionStart, selectionStart);
|
|
17863
|
+
} catch (error) { // eslint-disable-line no-unused-vars
|
|
17864
|
+
// Some input types (number/email in certain UAs) throw on
|
|
17865
|
+
// setSelectionRange; swallow and let the native cursor stand.
|
|
17866
|
+
}
|
|
17867
|
+
});
|
|
17868
|
+
}
|
|
17851
17869
|
}
|
|
17852
17870
|
|
|
17853
17871
|
/**
|
|
@@ -18474,7 +18492,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
|
|
|
18474
18492
|
}
|
|
18475
18493
|
};
|
|
18476
18494
|
|
|
18477
|
-
var formkitVersion$1 = '
|
|
18495
|
+
var formkitVersion$1 = '202606291801';
|
|
18478
18496
|
|
|
18479
18497
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
18480
18498
|
// See LICENSE in the project root for license information.
|
|
@@ -18977,6 +18995,7 @@ class AuroInput extends BaseInput {
|
|
|
18977
18995
|
<${this.buttonTag}
|
|
18978
18996
|
@click="${this.handleClickShowPassword}"
|
|
18979
18997
|
appearance="${this.onDark ? 'inverse' : this.appearance}"
|
|
18998
|
+
aria-pressed="${this.showPassword ? 'true' : 'false'}"
|
|
18980
18999
|
class="notificationBtn passwordBtn"
|
|
18981
19000
|
shape="circle"
|
|
18982
19001
|
size="sm"
|
|
@@ -19050,25 +19069,29 @@ class AuroInput extends BaseInput {
|
|
|
19050
19069
|
* @returns {html} - Returns HTML for the help text and error message.
|
|
19051
19070
|
*/
|
|
19052
19071
|
renderHtmlHelpText() {
|
|
19072
|
+
// Single `<p>` with stable identity across validity transitions —
|
|
19073
|
+
// previously two distinct templates (valid vs invalid) caused Lit to
|
|
19074
|
+
// replace the node entirely on a flip, and VoiceOver wouldn't
|
|
19075
|
+
// re-announce because the live-region element it was watching had been
|
|
19076
|
+
// removed and a new one inserted. Keeping one node means the `role`,
|
|
19077
|
+
// `aria-live`, and text content all change in-place, which AT does
|
|
19078
|
+
// observe and announce.
|
|
19079
|
+
const isError = this.validity && this.validity !== 'valid';
|
|
19053
19080
|
return u$7`
|
|
19054
|
-
|
|
19055
|
-
?
|
|
19056
|
-
|
|
19057
|
-
|
|
19058
|
-
|
|
19059
|
-
|
|
19060
|
-
|
|
19061
|
-
|
|
19062
|
-
|
|
19063
|
-
|
|
19064
|
-
|
|
19065
|
-
|
|
19066
|
-
|
|
19067
|
-
|
|
19068
|
-
</p>
|
|
19069
|
-
</${this.helpTextTag}>
|
|
19070
|
-
`
|
|
19071
|
-
}
|
|
19081
|
+
<${this.helpTextTag}
|
|
19082
|
+
appearance="${this.onDark ? 'inverse' : this.appearance}"
|
|
19083
|
+
?error=${isError}>
|
|
19084
|
+
<p
|
|
19085
|
+
id="${this.uniqueId}"
|
|
19086
|
+
part="helpText"
|
|
19087
|
+
role="${o(isError ? 'alert' : undefined)}"
|
|
19088
|
+
aria-live="${o(isError ? 'assertive' : undefined)}">
|
|
19089
|
+
${isError
|
|
19090
|
+
? this.errorMessage
|
|
19091
|
+
: u$7`<slot name="helpText">${this.getHelpText()}</slot>`
|
|
19092
|
+
}
|
|
19093
|
+
</p>
|
|
19094
|
+
</${this.helpTextTag}>
|
|
19072
19095
|
`;
|
|
19073
19096
|
}
|
|
19074
19097
|
|
|
@@ -19595,7 +19618,7 @@ class AuroBibtemplate extends i$3 {
|
|
|
19595
19618
|
}
|
|
19596
19619
|
}
|
|
19597
19620
|
|
|
19598
|
-
var formkitVersion = '
|
|
19621
|
+
var formkitVersion = '202606291801';
|
|
19599
19622
|
|
|
19600
19623
|
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}`;
|
|
19601
19624
|
|