@aurodesignsystem-dev/auro-formkit 0.0.0-pr1514.4 → 0.0.0-pr1514.6
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/bibtemplate/dist/index.js +1 -1
- package/components/bibtemplate/dist/registered.js +1 -1
- 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 +120 -97
- package/components/combobox/demo/getting-started.min.js +120 -97
- package/components/combobox/demo/index.min.js +120 -97
- package/components/combobox/dist/index.js +119 -96
- package/components/combobox/dist/registered.js +119 -96
- package/components/counter/demo/customize.min.js +3 -3
- package/components/counter/demo/index.min.js +3 -3
- package/components/counter/dist/index.js +3 -3
- package/components/counter/dist/registered.js +3 -3
- package/components/datepicker/demo/customize.min.js +220 -118
- package/components/datepicker/demo/index.min.js +220 -118
- package/components/datepicker/dist/auro-calendar.d.ts +20 -5
- package/components/datepicker/dist/index.js +220 -118
- package/components/datepicker/dist/registered.js +220 -118
- 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 +465 -317
- package/components/form/demo/getting-started.min.js +465 -317
- package/components/form/demo/index.min.js +465 -317
- package/components/form/demo/registerDemoDeps.min.js +465 -317
- 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 +3 -3
- package/components/select/demo/getting-started.min.js +3 -3
- package/components/select/demo/index.min.js +3 -3
- package/components/select/dist/index.js +3 -3
- package/components/select/dist/registered.js +3 -3
- package/custom-elements.json +1945 -1735
- package/package.json +1 -1
|
@@ -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 = '202606291937';
|
|
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 = '202606291937';
|
|
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
|
|
|
@@ -19200,7 +19223,7 @@ class AuroInput extends BaseInput {
|
|
|
19200
19223
|
|
|
19201
19224
|
var colorCss$3 = i$6`#headerContainer{box-shadow:var(--ds-auro-dropdownbib-header-boxshadow-color)}#footerContainer{background-color:var(--ds-auro-dropdownbib-footer-container-color)}`;
|
|
19202
19225
|
|
|
19203
|
-
var styleCss$4 = i$6`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column;padding:var(--ds-size-200, 1rem);padding-top:var(--ds-size-400, 2rem);padding-bottom:0}#headerContainer .titleRow{display:flex;flex-direction:row;justify-content:space-between;gap:var(--ds-size-100, 0.5rem)}#headerContainer .header{max-width:calc(100vw - var(--ds-size-900, 4.5rem));padding-top:var(--ds-size-200, 1rem)}#headerContainer .subheader{width:100%}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, 2.5rem)}#bodyContainer{position:relative;overflow:auto;flex:1
|
|
19226
|
+
var styleCss$4 = i$6`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column;padding:var(--ds-size-200, 1rem);padding-top:var(--ds-size-400, 2rem);padding-bottom:0}#headerContainer .titleRow{display:flex;flex-direction:row;justify-content:space-between;gap:var(--ds-size-100, 0.5rem)}#headerContainer .header{max-width:calc(100vw - var(--ds-size-900, 4.5rem));padding-top:var(--ds-size-200, 1rem)}#headerContainer .subheader{width:100%}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, 2.5rem)}#bodyContainer{position:relative;overflow:auto;flex:1}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{padding:var(--ds-size-200, 1rem)}`;
|
|
19204
19227
|
|
|
19205
19228
|
var tokenCss = i$6`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-footer-container-color: var(--ds-basic-color-surface-default, #ffffff)}`;
|
|
19206
19229
|
|
|
@@ -19595,7 +19618,7 @@ class AuroBibtemplate extends i$3 {
|
|
|
19595
19618
|
}
|
|
19596
19619
|
}
|
|
19597
19620
|
|
|
19598
|
-
var formkitVersion = '
|
|
19621
|
+
var formkitVersion = '202606291937';
|
|
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
|
|
|
@@ -4888,7 +4888,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
|
|
|
4888
4888
|
}
|
|
4889
4889
|
};
|
|
4890
4890
|
|
|
4891
|
-
var formkitVersion$2 = '
|
|
4891
|
+
var formkitVersion$2 = '202606291937';
|
|
4892
4892
|
|
|
4893
4893
|
let AuroElement$2 = class AuroElement extends i$3 {
|
|
4894
4894
|
static get properties() {
|
|
@@ -16614,6 +16614,13 @@ class AuroInputUtilities {
|
|
|
16614
16614
|
* @returns {string | undefined}
|
|
16615
16615
|
*/
|
|
16616
16616
|
toFormattedValue(valueObject, format) {
|
|
16617
|
+
// Exposed publicly via `AuroInputUtil.toFormattedValue`, so a missing
|
|
16618
|
+
// `format` argument has to fail gracefully rather than throw on
|
|
16619
|
+
// `format.toLowerCase()`. Treat any falsy value (undefined, null, '')
|
|
16620
|
+
// as "no format → no display value".
|
|
16621
|
+
if (!format) {
|
|
16622
|
+
return undefined;
|
|
16623
|
+
}
|
|
16617
16624
|
const normalizedFormat = format.toLowerCase();
|
|
16618
16625
|
const maskOptions = this.getMaskOptions('date', normalizedFormat);
|
|
16619
16626
|
|
|
@@ -16764,79 +16771,18 @@ class BaseInput extends AuroElement$1 {
|
|
|
16764
16771
|
constructor() {
|
|
16765
16772
|
super();
|
|
16766
16773
|
|
|
16767
|
-
|
|
16768
|
-
|
|
16769
|
-
|
|
16770
|
-
|
|
16771
|
-
|
|
16772
|
-
|
|
16773
|
-
|
|
16774
|
-
|
|
16775
|
-
|
|
16776
|
-
|
|
16777
|
-
this.required = false;
|
|
16778
|
-
this.onDark = false;
|
|
16779
|
-
this.setCustomValidityForType = undefined;
|
|
16780
|
-
this.size = 'lg';
|
|
16781
|
-
this.shape = 'classic';
|
|
16782
|
-
this.value = undefined;
|
|
16783
|
-
this._valueObject = undefined;
|
|
16784
|
-
|
|
16785
|
-
this._initializePrivateDefaults();
|
|
16786
|
-
}
|
|
16787
|
-
|
|
16788
|
-
/**
|
|
16789
|
-
* Internal Defaults.
|
|
16790
|
-
* @private
|
|
16791
|
-
* @returns {void}
|
|
16792
|
-
*/
|
|
16793
|
-
_initializePrivateDefaults() {
|
|
16774
|
+
// Single-source initialization. Alphabetized so duplicate or stale
|
|
16775
|
+
// defaults are immediately obvious on a diff. Every field is assigned
|
|
16776
|
+
// exactly once here (previously the constructor + the old
|
|
16777
|
+
// `_initializePrivateDefaults` overlapped — both wrote ~14 of the same
|
|
16778
|
+
// fields and double-allocated `util` and `validation`, discarding the
|
|
16779
|
+
// first instance). `validation` is now allocated exactly once; `util`
|
|
16780
|
+
// is seeded here with an en-US default and then rebuilt in
|
|
16781
|
+
// `connectedCallback` once the consumer-resolved locale is available,
|
|
16782
|
+
// so a parent (datepicker/combobox) calling `validate()` synchronously
|
|
16783
|
+
// during its own update cycle sees a populated util instance.
|
|
16794
16784
|
this.activeLabel = false;
|
|
16795
|
-
|
|
16796
|
-
this.icon = false;
|
|
16797
|
-
this.disabled = false;
|
|
16798
|
-
this.dvInputOnly = false;
|
|
16799
|
-
this.hideLabelVisually = false;
|
|
16800
|
-
this.max = undefined;
|
|
16801
|
-
this.maxLength = undefined;
|
|
16802
|
-
this.min = undefined;
|
|
16803
|
-
this.minLength = undefined;
|
|
16804
|
-
this.noValidate = false;
|
|
16805
|
-
this.onDark = false;
|
|
16806
|
-
this.required = false;
|
|
16807
|
-
this.setCustomValidityForType = undefined;
|
|
16808
|
-
|
|
16809
|
-
// Used for storing raw values returned from input mask.
|
|
16810
|
-
this._rawMaskValue = undefined;
|
|
16811
|
-
|
|
16812
|
-
/**
|
|
16813
|
-
* @private
|
|
16814
|
-
*/
|
|
16815
|
-
this.layout = 'classic';
|
|
16816
|
-
|
|
16817
|
-
/**
|
|
16818
|
-
* @private
|
|
16819
|
-
*/
|
|
16820
|
-
this.shape = 'classic';
|
|
16821
|
-
|
|
16822
|
-
/**
|
|
16823
|
-
* @private
|
|
16824
|
-
*/
|
|
16825
|
-
this.size = 'lg';
|
|
16826
|
-
|
|
16827
|
-
this.touched = false;
|
|
16828
|
-
this.util = new AuroInputUtilities({
|
|
16829
|
-
locale: "en-US",
|
|
16830
|
-
format: this.format
|
|
16831
|
-
});
|
|
16832
|
-
this.validation = new AuroFormValidation();
|
|
16833
|
-
this.inputIconName = undefined;
|
|
16834
|
-
this.showPassword = false;
|
|
16835
|
-
this.validationCCLength = undefined;
|
|
16836
|
-
this.hasValue = false;
|
|
16837
|
-
this.label = 'Input label is undefined';
|
|
16838
|
-
|
|
16839
|
-
|
|
16785
|
+
/** @private */
|
|
16840
16786
|
this.allowedInputTypes = [
|
|
16841
16787
|
"text",
|
|
16842
16788
|
"number",
|
|
@@ -16845,7 +16791,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
16845
16791
|
"credit-card",
|
|
16846
16792
|
"tel"
|
|
16847
16793
|
];
|
|
16848
|
-
this.
|
|
16794
|
+
this.appearance = "default";
|
|
16795
|
+
/** @private */
|
|
16849
16796
|
this.dateFormatMap = {
|
|
16850
16797
|
'mm/dd/yyyy': 'dateMMDDYYYY',
|
|
16851
16798
|
'dd/mm/yyyy': 'dateDDMMYYYY',
|
|
@@ -16862,27 +16809,57 @@ class BaseInput extends AuroElement$1 {
|
|
|
16862
16809
|
'dd/mm': 'dateDDMM',
|
|
16863
16810
|
'mm/dd': 'dateMMDD'
|
|
16864
16811
|
};
|
|
16812
|
+
this.disabled = false;
|
|
16813
|
+
/** @private */
|
|
16865
16814
|
this.domHandler = new DomHandler();
|
|
16866
16815
|
this.dvInputOnly = false;
|
|
16867
16816
|
this.hasValue = false;
|
|
16817
|
+
this.hideLabelVisually = false;
|
|
16818
|
+
this.icon = false;
|
|
16819
|
+
/** @private */
|
|
16868
16820
|
this.inputIconName = undefined;
|
|
16821
|
+
/** @private */
|
|
16869
16822
|
this.label = 'Input label is undefined';
|
|
16823
|
+
this.layout = 'classic';
|
|
16824
|
+
this.locale = 'en-US';
|
|
16825
|
+
this.max = undefined;
|
|
16826
|
+
this._maxObject = undefined;
|
|
16827
|
+
this.maxLength = undefined;
|
|
16828
|
+
this.min = undefined;
|
|
16829
|
+
this._minObject = undefined;
|
|
16830
|
+
this.minLength = undefined;
|
|
16870
16831
|
this.noValidate = false;
|
|
16871
|
-
this.
|
|
16832
|
+
this.onDark = false;
|
|
16833
|
+
// Raw values returned from the input mask before model normalization.
|
|
16834
|
+
this._rawMaskValue = undefined;
|
|
16835
|
+
this.required = false;
|
|
16836
|
+
this.setCustomValidityForType = undefined;
|
|
16837
|
+
// Credit Card is intentionally excluded — its mask manages the cursor
|
|
16838
|
+
// itself, and listing it here caused cursor placement issues in Safari.
|
|
16839
|
+
/** @private */
|
|
16872
16840
|
this.setSelectionInputTypes = [
|
|
16873
16841
|
"text",
|
|
16874
16842
|
"password",
|
|
16875
16843
|
"email"
|
|
16876
|
-
];
|
|
16844
|
+
];
|
|
16845
|
+
this.shape = 'classic';
|
|
16846
|
+
/** @private */
|
|
16877
16847
|
this.showPassword = false;
|
|
16848
|
+
this.size = 'lg';
|
|
16878
16849
|
this.touched = false;
|
|
16850
|
+
/** @private */
|
|
16879
16851
|
this.uniqueId = new UniqueId().create();
|
|
16852
|
+
/** @private */
|
|
16880
16853
|
this.util = new AuroInputUtilities({
|
|
16881
16854
|
locale: this.locale,
|
|
16882
16855
|
format: this.format
|
|
16883
16856
|
});
|
|
16857
|
+
/** @private */
|
|
16884
16858
|
this.validation = new AuroFormValidation();
|
|
16859
|
+
/** @private */
|
|
16885
16860
|
this.validationCCLength = undefined;
|
|
16861
|
+
this.value = undefined;
|
|
16862
|
+
this._valueObject = undefined;
|
|
16886
16863
|
}
|
|
16887
16864
|
|
|
16888
16865
|
// function to define props used within the scope of this component
|
|
@@ -17430,6 +17407,15 @@ class BaseInput extends AuroElement$1 {
|
|
|
17430
17407
|
|
|
17431
17408
|
this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
|
|
17432
17409
|
|
|
17410
|
+
// Normalize the format token to lowercase so case-mixed values supplied
|
|
17411
|
+
// via attribute (e.g. `format="MM/DD/YYYY"`) hit the `dateFormatMap`
|
|
17412
|
+
// lookup inside `setCustomHelpTextMessage`. Without this, an uppercase
|
|
17413
|
+
// format silently misses the map and leaves `setCustomValidityForType`
|
|
17414
|
+
// unset.
|
|
17415
|
+
if (this.format) {
|
|
17416
|
+
this.format = this.format.toLowerCase();
|
|
17417
|
+
}
|
|
17418
|
+
|
|
17433
17419
|
// use validity message override if declared when initializing the component
|
|
17434
17420
|
if (this.hasAttribute('setCustomValidity')) {
|
|
17435
17421
|
this.ValidityMessageOverride = this.setCustomValidity;
|
|
@@ -17863,6 +17849,38 @@ class BaseInput extends AuroElement$1 {
|
|
|
17863
17849
|
this.touched = true;
|
|
17864
17850
|
this.validation.validate(this);
|
|
17865
17851
|
}
|
|
17852
|
+
|
|
17853
|
+
// Prevents cursor jumping in Safari. Setting `this.value` triggers a Lit
|
|
17854
|
+
// update that can re-render the input and reset the native cursor; we
|
|
17855
|
+
// capture the caret position before that update commits and restore it
|
|
17856
|
+
// via `setSelectionRange` once the update has flushed. Gated on
|
|
17857
|
+
// `setSelectionInputTypes` so credit-card (and other masked types whose
|
|
17858
|
+
// formatter manages the cursor itself) doesn't get a competing write.
|
|
17859
|
+
// Capture the caret position INSIDE the gate — reading `selectionStart`
|
|
17860
|
+
// on input types that don't support text selection (number, email in
|
|
17861
|
+
// some browsers) throws InvalidStateError, which would crash all input
|
|
17862
|
+
// handling. Wrap the read in try/catch belt-and-suspenders even though
|
|
17863
|
+
// the gated types currently support it, since the list is a public
|
|
17864
|
+
// property a consumer could mutate.
|
|
17865
|
+
if (this.setSelectionInputTypes.includes(this.type)) {
|
|
17866
|
+
let selectionStart;
|
|
17867
|
+
try {
|
|
17868
|
+
selectionStart = this.inputElement.selectionStart;
|
|
17869
|
+
} catch (error) { // eslint-disable-line no-unused-vars
|
|
17870
|
+
return;
|
|
17871
|
+
}
|
|
17872
|
+
if (typeof selectionStart !== 'number') {
|
|
17873
|
+
return;
|
|
17874
|
+
}
|
|
17875
|
+
this.updateComplete.then(() => {
|
|
17876
|
+
try {
|
|
17877
|
+
this.inputElement.setSelectionRange(selectionStart, selectionStart);
|
|
17878
|
+
} catch (error) { // eslint-disable-line no-unused-vars
|
|
17879
|
+
// Some input types (number/email in certain UAs) throw on
|
|
17880
|
+
// setSelectionRange; swallow and let the native cursor stand.
|
|
17881
|
+
}
|
|
17882
|
+
});
|
|
17883
|
+
}
|
|
17866
17884
|
}
|
|
17867
17885
|
|
|
17868
17886
|
/**
|
|
@@ -18489,7 +18507,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
|
|
|
18489
18507
|
}
|
|
18490
18508
|
};
|
|
18491
18509
|
|
|
18492
|
-
var formkitVersion$1 = '
|
|
18510
|
+
var formkitVersion$1 = '202606291937';
|
|
18493
18511
|
|
|
18494
18512
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
18495
18513
|
// See LICENSE in the project root for license information.
|
|
@@ -18992,6 +19010,7 @@ class AuroInput extends BaseInput {
|
|
|
18992
19010
|
<${this.buttonTag}
|
|
18993
19011
|
@click="${this.handleClickShowPassword}"
|
|
18994
19012
|
appearance="${this.onDark ? 'inverse' : this.appearance}"
|
|
19013
|
+
aria-pressed="${this.showPassword ? 'true' : 'false'}"
|
|
18995
19014
|
class="notificationBtn passwordBtn"
|
|
18996
19015
|
shape="circle"
|
|
18997
19016
|
size="sm"
|
|
@@ -19065,25 +19084,29 @@ class AuroInput extends BaseInput {
|
|
|
19065
19084
|
* @returns {html} - Returns HTML for the help text and error message.
|
|
19066
19085
|
*/
|
|
19067
19086
|
renderHtmlHelpText() {
|
|
19087
|
+
// Single `<p>` with stable identity across validity transitions —
|
|
19088
|
+
// previously two distinct templates (valid vs invalid) caused Lit to
|
|
19089
|
+
// replace the node entirely on a flip, and VoiceOver wouldn't
|
|
19090
|
+
// re-announce because the live-region element it was watching had been
|
|
19091
|
+
// removed and a new one inserted. Keeping one node means the `role`,
|
|
19092
|
+
// `aria-live`, and text content all change in-place, which AT does
|
|
19093
|
+
// observe and announce.
|
|
19094
|
+
const isError = this.validity && this.validity !== 'valid';
|
|
19068
19095
|
return u$7`
|
|
19069
|
-
|
|
19070
|
-
?
|
|
19071
|
-
|
|
19072
|
-
|
|
19073
|
-
|
|
19074
|
-
|
|
19075
|
-
|
|
19076
|
-
|
|
19077
|
-
|
|
19078
|
-
|
|
19079
|
-
|
|
19080
|
-
|
|
19081
|
-
|
|
19082
|
-
|
|
19083
|
-
</p>
|
|
19084
|
-
</${this.helpTextTag}>
|
|
19085
|
-
`
|
|
19086
|
-
}
|
|
19096
|
+
<${this.helpTextTag}
|
|
19097
|
+
appearance="${this.onDark ? 'inverse' : this.appearance}"
|
|
19098
|
+
?error=${isError}>
|
|
19099
|
+
<p
|
|
19100
|
+
id="${this.uniqueId}"
|
|
19101
|
+
part="helpText"
|
|
19102
|
+
role="${o(isError ? 'alert' : undefined)}"
|
|
19103
|
+
aria-live="${o(isError ? 'assertive' : undefined)}">
|
|
19104
|
+
${isError
|
|
19105
|
+
? this.errorMessage
|
|
19106
|
+
: u$7`<slot name="helpText">${this.getHelpText()}</slot>`
|
|
19107
|
+
}
|
|
19108
|
+
</p>
|
|
19109
|
+
</${this.helpTextTag}>
|
|
19087
19110
|
`;
|
|
19088
19111
|
}
|
|
19089
19112
|
|
|
@@ -19215,7 +19238,7 @@ class AuroInput extends BaseInput {
|
|
|
19215
19238
|
|
|
19216
19239
|
var colorCss$3 = i$6`#headerContainer{box-shadow:var(--ds-auro-dropdownbib-header-boxshadow-color)}#footerContainer{background-color:var(--ds-auro-dropdownbib-footer-container-color)}`;
|
|
19217
19240
|
|
|
19218
|
-
var styleCss$4 = i$6`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column;padding:var(--ds-size-200, 1rem);padding-top:var(--ds-size-400, 2rem);padding-bottom:0}#headerContainer .titleRow{display:flex;flex-direction:row;justify-content:space-between;gap:var(--ds-size-100, 0.5rem)}#headerContainer .header{max-width:calc(100vw - var(--ds-size-900, 4.5rem));padding-top:var(--ds-size-200, 1rem)}#headerContainer .subheader{width:100%}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, 2.5rem)}#bodyContainer{position:relative;overflow:auto;flex:1
|
|
19241
|
+
var styleCss$4 = i$6`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column;padding:var(--ds-size-200, 1rem);padding-top:var(--ds-size-400, 2rem);padding-bottom:0}#headerContainer .titleRow{display:flex;flex-direction:row;justify-content:space-between;gap:var(--ds-size-100, 0.5rem)}#headerContainer .header{max-width:calc(100vw - var(--ds-size-900, 4.5rem));padding-top:var(--ds-size-200, 1rem)}#headerContainer .subheader{width:100%}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, 2.5rem)}#bodyContainer{position:relative;overflow:auto;flex:1}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{padding:var(--ds-size-200, 1rem)}`;
|
|
19219
19242
|
|
|
19220
19243
|
var tokenCss = i$6`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-footer-container-color: var(--ds-basic-color-surface-default, #ffffff)}`;
|
|
19221
19244
|
|
|
@@ -19610,7 +19633,7 @@ class AuroBibtemplate extends i$3 {
|
|
|
19610
19633
|
}
|
|
19611
19634
|
}
|
|
19612
19635
|
|
|
19613
|
-
var formkitVersion = '
|
|
19636
|
+
var formkitVersion = '202606291937';
|
|
19614
19637
|
|
|
19615
19638
|
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}`;
|
|
19616
19639
|
|