@aurodesignsystem-dev/auro-formkit 0.0.0-pr1511.0 → 0.0.0-pr1512.0
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 -97
- package/components/combobox/demo/getting-started.min.js +119 -97
- package/components/combobox/demo/index.min.js +119 -97
- package/components/combobox/dist/index.js +118 -96
- package/components/combobox/dist/registered.js +118 -96
- package/components/counter/demo/customize.min.js +2 -3
- package/components/counter/demo/index.min.js +2 -3
- package/components/counter/dist/index.js +2 -3
- package/components/counter/dist/registered.js +2 -3
- package/components/datepicker/demo/customize.min.js +139 -98
- package/components/datepicker/demo/index.min.js +139 -98
- package/components/datepicker/dist/index.js +139 -98
- package/components/datepicker/dist/registered.js +139 -98
- package/components/dropdown/demo/customize.min.js +1 -2
- package/components/dropdown/demo/getting-started.min.js +1 -2
- package/components/dropdown/demo/index.min.js +1 -2
- package/components/dropdown/dist/index.js +1 -2
- package/components/dropdown/dist/registered.js +1 -2
- package/components/form/demo/customize.min.js +434 -426
- package/components/form/demo/getting-started.min.js +434 -426
- package/components/form/demo/index.min.js +434 -426
- package/components/form/demo/registerDemoDeps.min.js +434 -426
- 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.min.js +55 -132
- package/components/select/demo/getting-started.min.js +55 -132
- package/components/select/demo/index.min.js +55 -132
- package/components/select/demo/keyboard-behavior.md +4 -18
- package/components/select/dist/auro-select.d.ts +8 -20
- package/components/select/dist/index.js +55 -132
- package/components/select/dist/registered.js +55 -132
- package/custom-elements.json +1942 -1728
- package/package.json +1 -1
|
@@ -4806,7 +4806,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
|
|
|
4806
4806
|
}
|
|
4807
4807
|
};
|
|
4808
4808
|
|
|
4809
|
-
var formkitVersion$2 = '
|
|
4809
|
+
var formkitVersion$2 = '202606252337';
|
|
4810
4810
|
|
|
4811
4811
|
let AuroElement$2 = class AuroElement extends LitElement {
|
|
4812
4812
|
static get properties() {
|
|
@@ -6078,7 +6078,6 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
6078
6078
|
role="${ifDefined(this.triggerContentFocusable ? undefined : this.a11yRole)}"
|
|
6079
6079
|
aria-expanded="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
|
|
6080
6080
|
aria-controls="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
|
|
6081
|
-
aria-haspopup="${ifDefined(this.a11yRole === 'combobox' ? 'listbox' : undefined)}"
|
|
6082
6081
|
aria-labelledby="${ifDefined(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
|
|
6083
6082
|
aria-disabled="${ifDefined(this.disabled ? 'true' : undefined)}"
|
|
6084
6083
|
@focusin="${this.handleFocusin}"
|
|
@@ -16525,6 +16524,13 @@ class AuroInputUtilities {
|
|
|
16525
16524
|
* @returns {string | undefined}
|
|
16526
16525
|
*/
|
|
16527
16526
|
toFormattedValue(valueObject, format) {
|
|
16527
|
+
// Exposed publicly via `AuroInputUtil.toFormattedValue`, so a missing
|
|
16528
|
+
// `format` argument has to fail gracefully rather than throw on
|
|
16529
|
+
// `format.toLowerCase()`. Treat any falsy value (undefined, null, '')
|
|
16530
|
+
// as "no format → no display value".
|
|
16531
|
+
if (!format) {
|
|
16532
|
+
return undefined;
|
|
16533
|
+
}
|
|
16528
16534
|
const normalizedFormat = format.toLowerCase();
|
|
16529
16535
|
const maskOptions = this.getMaskOptions('date', normalizedFormat);
|
|
16530
16536
|
|
|
@@ -16675,79 +16681,18 @@ class BaseInput extends AuroElement$1 {
|
|
|
16675
16681
|
constructor() {
|
|
16676
16682
|
super();
|
|
16677
16683
|
|
|
16678
|
-
|
|
16679
|
-
|
|
16680
|
-
|
|
16681
|
-
|
|
16682
|
-
|
|
16683
|
-
|
|
16684
|
-
|
|
16685
|
-
|
|
16686
|
-
|
|
16687
|
-
|
|
16688
|
-
this.required = false;
|
|
16689
|
-
this.onDark = false;
|
|
16690
|
-
this.setCustomValidityForType = undefined;
|
|
16691
|
-
this.size = 'lg';
|
|
16692
|
-
this.shape = 'classic';
|
|
16693
|
-
this.value = undefined;
|
|
16694
|
-
this._valueObject = undefined;
|
|
16695
|
-
|
|
16696
|
-
this._initializePrivateDefaults();
|
|
16697
|
-
}
|
|
16698
|
-
|
|
16699
|
-
/**
|
|
16700
|
-
* Internal Defaults.
|
|
16701
|
-
* @private
|
|
16702
|
-
* @returns {void}
|
|
16703
|
-
*/
|
|
16704
|
-
_initializePrivateDefaults() {
|
|
16684
|
+
// Single-source initialization. Alphabetized so duplicate or stale
|
|
16685
|
+
// defaults are immediately obvious on a diff. Every field is assigned
|
|
16686
|
+
// exactly once here (previously the constructor + the old
|
|
16687
|
+
// `_initializePrivateDefaults` overlapped — both wrote ~14 of the same
|
|
16688
|
+
// fields and double-allocated `util` and `validation`, discarding the
|
|
16689
|
+
// first instance). `validation` is now allocated exactly once; `util`
|
|
16690
|
+
// is seeded here with an en-US default and then rebuilt in
|
|
16691
|
+
// `connectedCallback` once the consumer-resolved locale is available,
|
|
16692
|
+
// so a parent (datepicker/combobox) calling `validate()` synchronously
|
|
16693
|
+
// during its own update cycle sees a populated util instance.
|
|
16705
16694
|
this.activeLabel = false;
|
|
16706
|
-
|
|
16707
|
-
this.icon = false;
|
|
16708
|
-
this.disabled = false;
|
|
16709
|
-
this.dvInputOnly = false;
|
|
16710
|
-
this.hideLabelVisually = false;
|
|
16711
|
-
this.max = undefined;
|
|
16712
|
-
this.maxLength = undefined;
|
|
16713
|
-
this.min = undefined;
|
|
16714
|
-
this.minLength = undefined;
|
|
16715
|
-
this.noValidate = false;
|
|
16716
|
-
this.onDark = false;
|
|
16717
|
-
this.required = false;
|
|
16718
|
-
this.setCustomValidityForType = undefined;
|
|
16719
|
-
|
|
16720
|
-
// Used for storing raw values returned from input mask.
|
|
16721
|
-
this._rawMaskValue = undefined;
|
|
16722
|
-
|
|
16723
|
-
/**
|
|
16724
|
-
* @private
|
|
16725
|
-
*/
|
|
16726
|
-
this.layout = 'classic';
|
|
16727
|
-
|
|
16728
|
-
/**
|
|
16729
|
-
* @private
|
|
16730
|
-
*/
|
|
16731
|
-
this.shape = 'classic';
|
|
16732
|
-
|
|
16733
|
-
/**
|
|
16734
|
-
* @private
|
|
16735
|
-
*/
|
|
16736
|
-
this.size = 'lg';
|
|
16737
|
-
|
|
16738
|
-
this.touched = false;
|
|
16739
|
-
this.util = new AuroInputUtilities({
|
|
16740
|
-
locale: "en-US",
|
|
16741
|
-
format: this.format
|
|
16742
|
-
});
|
|
16743
|
-
this.validation = new AuroFormValidation();
|
|
16744
|
-
this.inputIconName = undefined;
|
|
16745
|
-
this.showPassword = false;
|
|
16746
|
-
this.validationCCLength = undefined;
|
|
16747
|
-
this.hasValue = false;
|
|
16748
|
-
this.label = 'Input label is undefined';
|
|
16749
|
-
|
|
16750
|
-
|
|
16695
|
+
/** @private */
|
|
16751
16696
|
this.allowedInputTypes = [
|
|
16752
16697
|
"text",
|
|
16753
16698
|
"number",
|
|
@@ -16756,7 +16701,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
16756
16701
|
"credit-card",
|
|
16757
16702
|
"tel"
|
|
16758
16703
|
];
|
|
16759
|
-
this.
|
|
16704
|
+
this.appearance = "default";
|
|
16705
|
+
/** @private */
|
|
16760
16706
|
this.dateFormatMap = {
|
|
16761
16707
|
'mm/dd/yyyy': 'dateMMDDYYYY',
|
|
16762
16708
|
'dd/mm/yyyy': 'dateDDMMYYYY',
|
|
@@ -16773,27 +16719,57 @@ class BaseInput extends AuroElement$1 {
|
|
|
16773
16719
|
'dd/mm': 'dateDDMM',
|
|
16774
16720
|
'mm/dd': 'dateMMDD'
|
|
16775
16721
|
};
|
|
16722
|
+
this.disabled = false;
|
|
16723
|
+
/** @private */
|
|
16776
16724
|
this.domHandler = new DomHandler();
|
|
16777
16725
|
this.dvInputOnly = false;
|
|
16778
16726
|
this.hasValue = false;
|
|
16727
|
+
this.hideLabelVisually = false;
|
|
16728
|
+
this.icon = false;
|
|
16729
|
+
/** @private */
|
|
16779
16730
|
this.inputIconName = undefined;
|
|
16731
|
+
/** @private */
|
|
16780
16732
|
this.label = 'Input label is undefined';
|
|
16733
|
+
this.layout = 'classic';
|
|
16734
|
+
this.locale = 'en-US';
|
|
16735
|
+
this.max = undefined;
|
|
16736
|
+
this._maxObject = undefined;
|
|
16737
|
+
this.maxLength = undefined;
|
|
16738
|
+
this.min = undefined;
|
|
16739
|
+
this._minObject = undefined;
|
|
16740
|
+
this.minLength = undefined;
|
|
16781
16741
|
this.noValidate = false;
|
|
16782
|
-
this.
|
|
16742
|
+
this.onDark = false;
|
|
16743
|
+
// Raw values returned from the input mask before model normalization.
|
|
16744
|
+
this._rawMaskValue = undefined;
|
|
16745
|
+
this.required = false;
|
|
16746
|
+
this.setCustomValidityForType = undefined;
|
|
16747
|
+
// Credit Card is intentionally excluded — its mask manages the cursor
|
|
16748
|
+
// itself, and listing it here caused cursor placement issues in Safari.
|
|
16749
|
+
/** @private */
|
|
16783
16750
|
this.setSelectionInputTypes = [
|
|
16784
16751
|
"text",
|
|
16785
16752
|
"password",
|
|
16786
16753
|
"email"
|
|
16787
|
-
];
|
|
16754
|
+
];
|
|
16755
|
+
this.shape = 'classic';
|
|
16756
|
+
/** @private */
|
|
16788
16757
|
this.showPassword = false;
|
|
16758
|
+
this.size = 'lg';
|
|
16789
16759
|
this.touched = false;
|
|
16760
|
+
/** @private */
|
|
16790
16761
|
this.uniqueId = new UniqueId().create();
|
|
16762
|
+
/** @private */
|
|
16791
16763
|
this.util = new AuroInputUtilities({
|
|
16792
16764
|
locale: this.locale,
|
|
16793
16765
|
format: this.format
|
|
16794
16766
|
});
|
|
16767
|
+
/** @private */
|
|
16795
16768
|
this.validation = new AuroFormValidation();
|
|
16769
|
+
/** @private */
|
|
16796
16770
|
this.validationCCLength = undefined;
|
|
16771
|
+
this.value = undefined;
|
|
16772
|
+
this._valueObject = undefined;
|
|
16797
16773
|
}
|
|
16798
16774
|
|
|
16799
16775
|
// function to define props used within the scope of this component
|
|
@@ -17341,6 +17317,15 @@ class BaseInput extends AuroElement$1 {
|
|
|
17341
17317
|
|
|
17342
17318
|
this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
|
|
17343
17319
|
|
|
17320
|
+
// Normalize the format token to lowercase so case-mixed values supplied
|
|
17321
|
+
// via attribute (e.g. `format="MM/DD/YYYY"`) hit the `dateFormatMap`
|
|
17322
|
+
// lookup inside `setCustomHelpTextMessage`. Without this, an uppercase
|
|
17323
|
+
// format silently misses the map and leaves `setCustomValidityForType`
|
|
17324
|
+
// unset.
|
|
17325
|
+
if (this.format) {
|
|
17326
|
+
this.format = this.format.toLowerCase();
|
|
17327
|
+
}
|
|
17328
|
+
|
|
17344
17329
|
// use validity message override if declared when initializing the component
|
|
17345
17330
|
if (this.hasAttribute('setCustomValidity')) {
|
|
17346
17331
|
this.ValidityMessageOverride = this.setCustomValidity;
|
|
@@ -17774,6 +17759,38 @@ class BaseInput extends AuroElement$1 {
|
|
|
17774
17759
|
this.touched = true;
|
|
17775
17760
|
this.validation.validate(this);
|
|
17776
17761
|
}
|
|
17762
|
+
|
|
17763
|
+
// Prevents cursor jumping in Safari. Setting `this.value` triggers a Lit
|
|
17764
|
+
// update that can re-render the input and reset the native cursor; we
|
|
17765
|
+
// capture the caret position before that update commits and restore it
|
|
17766
|
+
// via `setSelectionRange` once the update has flushed. Gated on
|
|
17767
|
+
// `setSelectionInputTypes` so credit-card (and other masked types whose
|
|
17768
|
+
// formatter manages the cursor itself) doesn't get a competing write.
|
|
17769
|
+
// Capture the caret position INSIDE the gate — reading `selectionStart`
|
|
17770
|
+
// on input types that don't support text selection (number, email in
|
|
17771
|
+
// some browsers) throws InvalidStateError, which would crash all input
|
|
17772
|
+
// handling. Wrap the read in try/catch belt-and-suspenders even though
|
|
17773
|
+
// the gated types currently support it, since the list is a public
|
|
17774
|
+
// property a consumer could mutate.
|
|
17775
|
+
if (this.setSelectionInputTypes.includes(this.type)) {
|
|
17776
|
+
let selectionStart;
|
|
17777
|
+
try {
|
|
17778
|
+
selectionStart = this.inputElement.selectionStart;
|
|
17779
|
+
} catch (error) { // eslint-disable-line no-unused-vars
|
|
17780
|
+
return;
|
|
17781
|
+
}
|
|
17782
|
+
if (typeof selectionStart !== 'number') {
|
|
17783
|
+
return;
|
|
17784
|
+
}
|
|
17785
|
+
this.updateComplete.then(() => {
|
|
17786
|
+
try {
|
|
17787
|
+
this.inputElement.setSelectionRange(selectionStart, selectionStart);
|
|
17788
|
+
} catch (error) { // eslint-disable-line no-unused-vars
|
|
17789
|
+
// Some input types (number/email in certain UAs) throw on
|
|
17790
|
+
// setSelectionRange; swallow and let the native cursor stand.
|
|
17791
|
+
}
|
|
17792
|
+
});
|
|
17793
|
+
}
|
|
17777
17794
|
}
|
|
17778
17795
|
|
|
17779
17796
|
/**
|
|
@@ -18400,7 +18417,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
18400
18417
|
}
|
|
18401
18418
|
};
|
|
18402
18419
|
|
|
18403
|
-
var formkitVersion$1 = '
|
|
18420
|
+
var formkitVersion$1 = '202606252337';
|
|
18404
18421
|
|
|
18405
18422
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
18406
18423
|
// See LICENSE in the project root for license information.
|
|
@@ -18903,6 +18920,7 @@ class AuroInput extends BaseInput {
|
|
|
18903
18920
|
<${this.buttonTag}
|
|
18904
18921
|
@click="${this.handleClickShowPassword}"
|
|
18905
18922
|
appearance="${this.onDark ? 'inverse' : this.appearance}"
|
|
18923
|
+
aria-pressed="${this.showPassword ? 'true' : 'false'}"
|
|
18906
18924
|
class="notificationBtn passwordBtn"
|
|
18907
18925
|
shape="circle"
|
|
18908
18926
|
size="sm"
|
|
@@ -18976,25 +18994,29 @@ class AuroInput extends BaseInput {
|
|
|
18976
18994
|
* @returns {html} - Returns HTML for the help text and error message.
|
|
18977
18995
|
*/
|
|
18978
18996
|
renderHtmlHelpText() {
|
|
18997
|
+
// Single `<p>` with stable identity across validity transitions —
|
|
18998
|
+
// previously two distinct templates (valid vs invalid) caused Lit to
|
|
18999
|
+
// replace the node entirely on a flip, and VoiceOver wouldn't
|
|
19000
|
+
// re-announce because the live-region element it was watching had been
|
|
19001
|
+
// removed and a new one inserted. Keeping one node means the `role`,
|
|
19002
|
+
// `aria-live`, and text content all change in-place, which AT does
|
|
19003
|
+
// observe and announce.
|
|
19004
|
+
const isError = this.validity && this.validity !== 'valid';
|
|
18979
19005
|
return html`
|
|
18980
|
-
|
|
18981
|
-
?
|
|
18982
|
-
|
|
18983
|
-
|
|
18984
|
-
|
|
18985
|
-
|
|
18986
|
-
|
|
18987
|
-
|
|
18988
|
-
|
|
18989
|
-
|
|
18990
|
-
|
|
18991
|
-
appearance="${this.onDark ? 'inverse' : this.appearance}">
|
|
18992
|
-
<p id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
|
|
18993
|
-
${this.errorMessage}
|
|
18994
|
-
</p>
|
|
18995
|
-
</${this.helpTextTag}>
|
|
18996
|
-
`
|
|
19006
|
+
<${this.helpTextTag}
|
|
19007
|
+
appearance="${this.onDark ? 'inverse' : this.appearance}"
|
|
19008
|
+
?error=${isError}>
|
|
19009
|
+
<p
|
|
19010
|
+
id="${this.uniqueId}"
|
|
19011
|
+
part="helpText"
|
|
19012
|
+
role="${ifDefined(isError ? 'alert' : undefined)}"
|
|
19013
|
+
aria-live="${ifDefined(isError ? 'assertive' : undefined)}">
|
|
19014
|
+
${isError
|
|
19015
|
+
? this.errorMessage
|
|
19016
|
+
: html`<slot name="helpText">${this.getHelpText()}</slot>`
|
|
18997
19017
|
}
|
|
19018
|
+
</p>
|
|
19019
|
+
</${this.helpTextTag}>
|
|
18998
19020
|
`;
|
|
18999
19021
|
}
|
|
19000
19022
|
|
|
@@ -19521,7 +19543,7 @@ class AuroBibtemplate extends LitElement {
|
|
|
19521
19543
|
}
|
|
19522
19544
|
}
|
|
19523
19545
|
|
|
19524
|
-
var formkitVersion = '
|
|
19546
|
+
var formkitVersion = '202606252337';
|
|
19525
19547
|
|
|
19526
19548
|
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}`;
|
|
19527
19549
|
|
|
@@ -4806,7 +4806,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
|
|
|
4806
4806
|
}
|
|
4807
4807
|
};
|
|
4808
4808
|
|
|
4809
|
-
var formkitVersion$2 = '
|
|
4809
|
+
var formkitVersion$2 = '202606252337';
|
|
4810
4810
|
|
|
4811
4811
|
let AuroElement$2 = class AuroElement extends LitElement {
|
|
4812
4812
|
static get properties() {
|
|
@@ -6078,7 +6078,6 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
6078
6078
|
role="${ifDefined(this.triggerContentFocusable ? undefined : this.a11yRole)}"
|
|
6079
6079
|
aria-expanded="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
|
|
6080
6080
|
aria-controls="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
|
|
6081
|
-
aria-haspopup="${ifDefined(this.a11yRole === 'combobox' ? 'listbox' : undefined)}"
|
|
6082
6081
|
aria-labelledby="${ifDefined(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
|
|
6083
6082
|
aria-disabled="${ifDefined(this.disabled ? 'true' : undefined)}"
|
|
6084
6083
|
@focusin="${this.handleFocusin}"
|
|
@@ -16525,6 +16524,13 @@ class AuroInputUtilities {
|
|
|
16525
16524
|
* @returns {string | undefined}
|
|
16526
16525
|
*/
|
|
16527
16526
|
toFormattedValue(valueObject, format) {
|
|
16527
|
+
// Exposed publicly via `AuroInputUtil.toFormattedValue`, so a missing
|
|
16528
|
+
// `format` argument has to fail gracefully rather than throw on
|
|
16529
|
+
// `format.toLowerCase()`. Treat any falsy value (undefined, null, '')
|
|
16530
|
+
// as "no format → no display value".
|
|
16531
|
+
if (!format) {
|
|
16532
|
+
return undefined;
|
|
16533
|
+
}
|
|
16528
16534
|
const normalizedFormat = format.toLowerCase();
|
|
16529
16535
|
const maskOptions = this.getMaskOptions('date', normalizedFormat);
|
|
16530
16536
|
|
|
@@ -16675,79 +16681,18 @@ class BaseInput extends AuroElement$1 {
|
|
|
16675
16681
|
constructor() {
|
|
16676
16682
|
super();
|
|
16677
16683
|
|
|
16678
|
-
|
|
16679
|
-
|
|
16680
|
-
|
|
16681
|
-
|
|
16682
|
-
|
|
16683
|
-
|
|
16684
|
-
|
|
16685
|
-
|
|
16686
|
-
|
|
16687
|
-
|
|
16688
|
-
this.required = false;
|
|
16689
|
-
this.onDark = false;
|
|
16690
|
-
this.setCustomValidityForType = undefined;
|
|
16691
|
-
this.size = 'lg';
|
|
16692
|
-
this.shape = 'classic';
|
|
16693
|
-
this.value = undefined;
|
|
16694
|
-
this._valueObject = undefined;
|
|
16695
|
-
|
|
16696
|
-
this._initializePrivateDefaults();
|
|
16697
|
-
}
|
|
16698
|
-
|
|
16699
|
-
/**
|
|
16700
|
-
* Internal Defaults.
|
|
16701
|
-
* @private
|
|
16702
|
-
* @returns {void}
|
|
16703
|
-
*/
|
|
16704
|
-
_initializePrivateDefaults() {
|
|
16684
|
+
// Single-source initialization. Alphabetized so duplicate or stale
|
|
16685
|
+
// defaults are immediately obvious on a diff. Every field is assigned
|
|
16686
|
+
// exactly once here (previously the constructor + the old
|
|
16687
|
+
// `_initializePrivateDefaults` overlapped — both wrote ~14 of the same
|
|
16688
|
+
// fields and double-allocated `util` and `validation`, discarding the
|
|
16689
|
+
// first instance). `validation` is now allocated exactly once; `util`
|
|
16690
|
+
// is seeded here with an en-US default and then rebuilt in
|
|
16691
|
+
// `connectedCallback` once the consumer-resolved locale is available,
|
|
16692
|
+
// so a parent (datepicker/combobox) calling `validate()` synchronously
|
|
16693
|
+
// during its own update cycle sees a populated util instance.
|
|
16705
16694
|
this.activeLabel = false;
|
|
16706
|
-
|
|
16707
|
-
this.icon = false;
|
|
16708
|
-
this.disabled = false;
|
|
16709
|
-
this.dvInputOnly = false;
|
|
16710
|
-
this.hideLabelVisually = false;
|
|
16711
|
-
this.max = undefined;
|
|
16712
|
-
this.maxLength = undefined;
|
|
16713
|
-
this.min = undefined;
|
|
16714
|
-
this.minLength = undefined;
|
|
16715
|
-
this.noValidate = false;
|
|
16716
|
-
this.onDark = false;
|
|
16717
|
-
this.required = false;
|
|
16718
|
-
this.setCustomValidityForType = undefined;
|
|
16719
|
-
|
|
16720
|
-
// Used for storing raw values returned from input mask.
|
|
16721
|
-
this._rawMaskValue = undefined;
|
|
16722
|
-
|
|
16723
|
-
/**
|
|
16724
|
-
* @private
|
|
16725
|
-
*/
|
|
16726
|
-
this.layout = 'classic';
|
|
16727
|
-
|
|
16728
|
-
/**
|
|
16729
|
-
* @private
|
|
16730
|
-
*/
|
|
16731
|
-
this.shape = 'classic';
|
|
16732
|
-
|
|
16733
|
-
/**
|
|
16734
|
-
* @private
|
|
16735
|
-
*/
|
|
16736
|
-
this.size = 'lg';
|
|
16737
|
-
|
|
16738
|
-
this.touched = false;
|
|
16739
|
-
this.util = new AuroInputUtilities({
|
|
16740
|
-
locale: "en-US",
|
|
16741
|
-
format: this.format
|
|
16742
|
-
});
|
|
16743
|
-
this.validation = new AuroFormValidation();
|
|
16744
|
-
this.inputIconName = undefined;
|
|
16745
|
-
this.showPassword = false;
|
|
16746
|
-
this.validationCCLength = undefined;
|
|
16747
|
-
this.hasValue = false;
|
|
16748
|
-
this.label = 'Input label is undefined';
|
|
16749
|
-
|
|
16750
|
-
|
|
16695
|
+
/** @private */
|
|
16751
16696
|
this.allowedInputTypes = [
|
|
16752
16697
|
"text",
|
|
16753
16698
|
"number",
|
|
@@ -16756,7 +16701,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
16756
16701
|
"credit-card",
|
|
16757
16702
|
"tel"
|
|
16758
16703
|
];
|
|
16759
|
-
this.
|
|
16704
|
+
this.appearance = "default";
|
|
16705
|
+
/** @private */
|
|
16760
16706
|
this.dateFormatMap = {
|
|
16761
16707
|
'mm/dd/yyyy': 'dateMMDDYYYY',
|
|
16762
16708
|
'dd/mm/yyyy': 'dateDDMMYYYY',
|
|
@@ -16773,27 +16719,57 @@ class BaseInput extends AuroElement$1 {
|
|
|
16773
16719
|
'dd/mm': 'dateDDMM',
|
|
16774
16720
|
'mm/dd': 'dateMMDD'
|
|
16775
16721
|
};
|
|
16722
|
+
this.disabled = false;
|
|
16723
|
+
/** @private */
|
|
16776
16724
|
this.domHandler = new DomHandler();
|
|
16777
16725
|
this.dvInputOnly = false;
|
|
16778
16726
|
this.hasValue = false;
|
|
16727
|
+
this.hideLabelVisually = false;
|
|
16728
|
+
this.icon = false;
|
|
16729
|
+
/** @private */
|
|
16779
16730
|
this.inputIconName = undefined;
|
|
16731
|
+
/** @private */
|
|
16780
16732
|
this.label = 'Input label is undefined';
|
|
16733
|
+
this.layout = 'classic';
|
|
16734
|
+
this.locale = 'en-US';
|
|
16735
|
+
this.max = undefined;
|
|
16736
|
+
this._maxObject = undefined;
|
|
16737
|
+
this.maxLength = undefined;
|
|
16738
|
+
this.min = undefined;
|
|
16739
|
+
this._minObject = undefined;
|
|
16740
|
+
this.minLength = undefined;
|
|
16781
16741
|
this.noValidate = false;
|
|
16782
|
-
this.
|
|
16742
|
+
this.onDark = false;
|
|
16743
|
+
// Raw values returned from the input mask before model normalization.
|
|
16744
|
+
this._rawMaskValue = undefined;
|
|
16745
|
+
this.required = false;
|
|
16746
|
+
this.setCustomValidityForType = undefined;
|
|
16747
|
+
// Credit Card is intentionally excluded — its mask manages the cursor
|
|
16748
|
+
// itself, and listing it here caused cursor placement issues in Safari.
|
|
16749
|
+
/** @private */
|
|
16783
16750
|
this.setSelectionInputTypes = [
|
|
16784
16751
|
"text",
|
|
16785
16752
|
"password",
|
|
16786
16753
|
"email"
|
|
16787
|
-
];
|
|
16754
|
+
];
|
|
16755
|
+
this.shape = 'classic';
|
|
16756
|
+
/** @private */
|
|
16788
16757
|
this.showPassword = false;
|
|
16758
|
+
this.size = 'lg';
|
|
16789
16759
|
this.touched = false;
|
|
16760
|
+
/** @private */
|
|
16790
16761
|
this.uniqueId = new UniqueId().create();
|
|
16762
|
+
/** @private */
|
|
16791
16763
|
this.util = new AuroInputUtilities({
|
|
16792
16764
|
locale: this.locale,
|
|
16793
16765
|
format: this.format
|
|
16794
16766
|
});
|
|
16767
|
+
/** @private */
|
|
16795
16768
|
this.validation = new AuroFormValidation();
|
|
16769
|
+
/** @private */
|
|
16796
16770
|
this.validationCCLength = undefined;
|
|
16771
|
+
this.value = undefined;
|
|
16772
|
+
this._valueObject = undefined;
|
|
16797
16773
|
}
|
|
16798
16774
|
|
|
16799
16775
|
// function to define props used within the scope of this component
|
|
@@ -17341,6 +17317,15 @@ class BaseInput extends AuroElement$1 {
|
|
|
17341
17317
|
|
|
17342
17318
|
this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
|
|
17343
17319
|
|
|
17320
|
+
// Normalize the format token to lowercase so case-mixed values supplied
|
|
17321
|
+
// via attribute (e.g. `format="MM/DD/YYYY"`) hit the `dateFormatMap`
|
|
17322
|
+
// lookup inside `setCustomHelpTextMessage`. Without this, an uppercase
|
|
17323
|
+
// format silently misses the map and leaves `setCustomValidityForType`
|
|
17324
|
+
// unset.
|
|
17325
|
+
if (this.format) {
|
|
17326
|
+
this.format = this.format.toLowerCase();
|
|
17327
|
+
}
|
|
17328
|
+
|
|
17344
17329
|
// use validity message override if declared when initializing the component
|
|
17345
17330
|
if (this.hasAttribute('setCustomValidity')) {
|
|
17346
17331
|
this.ValidityMessageOverride = this.setCustomValidity;
|
|
@@ -17774,6 +17759,38 @@ class BaseInput extends AuroElement$1 {
|
|
|
17774
17759
|
this.touched = true;
|
|
17775
17760
|
this.validation.validate(this);
|
|
17776
17761
|
}
|
|
17762
|
+
|
|
17763
|
+
// Prevents cursor jumping in Safari. Setting `this.value` triggers a Lit
|
|
17764
|
+
// update that can re-render the input and reset the native cursor; we
|
|
17765
|
+
// capture the caret position before that update commits and restore it
|
|
17766
|
+
// via `setSelectionRange` once the update has flushed. Gated on
|
|
17767
|
+
// `setSelectionInputTypes` so credit-card (and other masked types whose
|
|
17768
|
+
// formatter manages the cursor itself) doesn't get a competing write.
|
|
17769
|
+
// Capture the caret position INSIDE the gate — reading `selectionStart`
|
|
17770
|
+
// on input types that don't support text selection (number, email in
|
|
17771
|
+
// some browsers) throws InvalidStateError, which would crash all input
|
|
17772
|
+
// handling. Wrap the read in try/catch belt-and-suspenders even though
|
|
17773
|
+
// the gated types currently support it, since the list is a public
|
|
17774
|
+
// property a consumer could mutate.
|
|
17775
|
+
if (this.setSelectionInputTypes.includes(this.type)) {
|
|
17776
|
+
let selectionStart;
|
|
17777
|
+
try {
|
|
17778
|
+
selectionStart = this.inputElement.selectionStart;
|
|
17779
|
+
} catch (error) { // eslint-disable-line no-unused-vars
|
|
17780
|
+
return;
|
|
17781
|
+
}
|
|
17782
|
+
if (typeof selectionStart !== 'number') {
|
|
17783
|
+
return;
|
|
17784
|
+
}
|
|
17785
|
+
this.updateComplete.then(() => {
|
|
17786
|
+
try {
|
|
17787
|
+
this.inputElement.setSelectionRange(selectionStart, selectionStart);
|
|
17788
|
+
} catch (error) { // eslint-disable-line no-unused-vars
|
|
17789
|
+
// Some input types (number/email in certain UAs) throw on
|
|
17790
|
+
// setSelectionRange; swallow and let the native cursor stand.
|
|
17791
|
+
}
|
|
17792
|
+
});
|
|
17793
|
+
}
|
|
17777
17794
|
}
|
|
17778
17795
|
|
|
17779
17796
|
/**
|
|
@@ -18400,7 +18417,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
18400
18417
|
}
|
|
18401
18418
|
};
|
|
18402
18419
|
|
|
18403
|
-
var formkitVersion$1 = '
|
|
18420
|
+
var formkitVersion$1 = '202606252337';
|
|
18404
18421
|
|
|
18405
18422
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
18406
18423
|
// See LICENSE in the project root for license information.
|
|
@@ -18903,6 +18920,7 @@ class AuroInput extends BaseInput {
|
|
|
18903
18920
|
<${this.buttonTag}
|
|
18904
18921
|
@click="${this.handleClickShowPassword}"
|
|
18905
18922
|
appearance="${this.onDark ? 'inverse' : this.appearance}"
|
|
18923
|
+
aria-pressed="${this.showPassword ? 'true' : 'false'}"
|
|
18906
18924
|
class="notificationBtn passwordBtn"
|
|
18907
18925
|
shape="circle"
|
|
18908
18926
|
size="sm"
|
|
@@ -18976,25 +18994,29 @@ class AuroInput extends BaseInput {
|
|
|
18976
18994
|
* @returns {html} - Returns HTML for the help text and error message.
|
|
18977
18995
|
*/
|
|
18978
18996
|
renderHtmlHelpText() {
|
|
18997
|
+
// Single `<p>` with stable identity across validity transitions —
|
|
18998
|
+
// previously two distinct templates (valid vs invalid) caused Lit to
|
|
18999
|
+
// replace the node entirely on a flip, and VoiceOver wouldn't
|
|
19000
|
+
// re-announce because the live-region element it was watching had been
|
|
19001
|
+
// removed and a new one inserted. Keeping one node means the `role`,
|
|
19002
|
+
// `aria-live`, and text content all change in-place, which AT does
|
|
19003
|
+
// observe and announce.
|
|
19004
|
+
const isError = this.validity && this.validity !== 'valid';
|
|
18979
19005
|
return html`
|
|
18980
|
-
|
|
18981
|
-
?
|
|
18982
|
-
|
|
18983
|
-
|
|
18984
|
-
|
|
18985
|
-
|
|
18986
|
-
|
|
18987
|
-
|
|
18988
|
-
|
|
18989
|
-
|
|
18990
|
-
|
|
18991
|
-
appearance="${this.onDark ? 'inverse' : this.appearance}">
|
|
18992
|
-
<p id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
|
|
18993
|
-
${this.errorMessage}
|
|
18994
|
-
</p>
|
|
18995
|
-
</${this.helpTextTag}>
|
|
18996
|
-
`
|
|
19006
|
+
<${this.helpTextTag}
|
|
19007
|
+
appearance="${this.onDark ? 'inverse' : this.appearance}"
|
|
19008
|
+
?error=${isError}>
|
|
19009
|
+
<p
|
|
19010
|
+
id="${this.uniqueId}"
|
|
19011
|
+
part="helpText"
|
|
19012
|
+
role="${ifDefined(isError ? 'alert' : undefined)}"
|
|
19013
|
+
aria-live="${ifDefined(isError ? 'assertive' : undefined)}">
|
|
19014
|
+
${isError
|
|
19015
|
+
? this.errorMessage
|
|
19016
|
+
: html`<slot name="helpText">${this.getHelpText()}</slot>`
|
|
18997
19017
|
}
|
|
19018
|
+
</p>
|
|
19019
|
+
</${this.helpTextTag}>
|
|
18998
19020
|
`;
|
|
18999
19021
|
}
|
|
19000
19022
|
|
|
@@ -19521,7 +19543,7 @@ class AuroBibtemplate extends LitElement {
|
|
|
19521
19543
|
}
|
|
19522
19544
|
}
|
|
19523
19545
|
|
|
19524
|
-
var formkitVersion = '
|
|
19546
|
+
var formkitVersion = '202606252337';
|
|
19525
19547
|
|
|
19526
19548
|
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}`;
|
|
19527
19549
|
|
|
@@ -1099,7 +1099,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
|
|
|
1099
1099
|
}
|
|
1100
1100
|
};
|
|
1101
1101
|
|
|
1102
|
-
var formkitVersion$1 = '
|
|
1102
|
+
var formkitVersion$1 = '202606252337';
|
|
1103
1103
|
|
|
1104
1104
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1105
1105
|
// See LICENSE in the project root for license information.
|
|
@@ -5445,7 +5445,7 @@ class AuroHelpText extends i$2 {
|
|
|
5445
5445
|
}
|
|
5446
5446
|
}
|
|
5447
5447
|
|
|
5448
|
-
var formkitVersion = '
|
|
5448
|
+
var formkitVersion = '202606252337';
|
|
5449
5449
|
|
|
5450
5450
|
let AuroElement$1 = class AuroElement extends i$2 {
|
|
5451
5451
|
static get properties() {
|
|
@@ -6717,7 +6717,6 @@ class AuroDropdown extends AuroElement$1 {
|
|
|
6717
6717
|
role="${o$2(this.triggerContentFocusable ? undefined : this.a11yRole)}"
|
|
6718
6718
|
aria-expanded="${o$2(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
|
|
6719
6719
|
aria-controls="${o$2(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
|
|
6720
|
-
aria-haspopup="${o$2(this.a11yRole === 'combobox' ? 'listbox' : undefined)}"
|
|
6721
6720
|
aria-labelledby="${o$2(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
|
|
6722
6721
|
aria-disabled="${o$2(this.disabled ? 'true' : undefined)}"
|
|
6723
6722
|
@focusin="${this.handleFocusin}"
|