@aurodesignsystem-dev/auro-formkit 0.0.0-pr1510.3 → 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.js +22 -0
- package/components/checkbox/demo/customize.min.js +1 -1
- package/components/checkbox/demo/demo-support.js +1 -0
- package/components/checkbox/demo/getting-started.js +22 -0
- package/components/checkbox/demo/getting-started.min.js +1 -1
- package/components/checkbox/demo/index.js +8 -0
- package/components/checkbox/demo/index.min.js +1 -1
- package/components/checkbox/demo/styles.scss +1 -0
- package/components/checkbox/dist/index.js +1 -1
- package/components/checkbox/dist/registered.js +1 -1
- package/components/combobox/demo/customize.js +24 -0
- package/components/combobox/demo/customize.min.js +119 -96
- package/components/combobox/demo/demo-support.js +1 -0
- package/components/combobox/demo/getting-started.js +21 -0
- package/components/combobox/demo/getting-started.min.js +119 -96
- package/components/combobox/demo/index.js +23 -0
- package/components/combobox/demo/index.min.js +119 -96
- package/components/combobox/demo/styles.scss +1 -0
- package/components/combobox/dist/index.js +118 -95
- package/components/combobox/dist/registered.js +118 -95
- package/components/counter/demo/customize.js +21 -0
- package/components/counter/demo/customize.min.js +2 -2
- package/components/counter/demo/demo-support.js +1 -0
- package/components/counter/demo/index.js +21 -0
- package/components/counter/demo/index.min.js +2 -2
- package/components/counter/demo/styles.scss +1 -0
- package/components/counter/dist/index.js +2 -2
- package/components/counter/dist/registered.js +2 -2
- package/components/datepicker/demo/accessibility.md +1 -2
- package/components/datepicker/demo/api.md +62 -63
- package/components/datepicker/demo/customize.js +17 -0
- package/components/datepicker/demo/customize.md +1 -12
- package/components/datepicker/demo/customize.min.js +335 -702
- package/components/datepicker/demo/demo-support.js +1 -0
- package/components/datepicker/demo/index.js +23 -0
- package/components/datepicker/demo/index.min.js +335 -702
- package/components/datepicker/demo/styles.scss +1 -0
- package/components/datepicker/dist/index.js +335 -702
- package/components/datepicker/dist/registered.js +335 -702
- package/components/datepicker/dist/{auro-calendar-cell.d.ts → src/auro-calendar-cell.d.ts} +3 -14
- package/components/datepicker/dist/{auro-calendar.d.ts → src/auro-calendar.d.ts} +6 -90
- package/components/datepicker/dist/{auro-datepicker.d.ts → src/auro-datepicker.d.ts} +5 -78
- package/components/dropdown/demo/customize.js +9 -0
- package/components/dropdown/demo/customize.min.js +1 -1
- package/components/dropdown/demo/demo-support.js +1 -0
- package/components/dropdown/demo/getting-started.js +9 -0
- package/components/dropdown/demo/getting-started.min.js +1 -1
- package/components/dropdown/demo/index.js +16 -0
- package/components/dropdown/demo/index.min.js +1 -1
- package/components/dropdown/demo/styles.scss +1 -0
- package/components/dropdown/dist/index.js +1 -1
- package/components/dropdown/dist/registered.js +1 -1
- package/components/form/demo/customize.js +28 -0
- package/components/form/demo/customize.min.js +583 -904
- package/components/form/demo/demo-support.js +1 -0
- package/components/form/demo/getting-started.js +9 -0
- package/components/form/demo/getting-started.min.js +583 -904
- package/components/form/demo/index.js +5 -0
- package/components/form/demo/index.min.js +583 -904
- package/components/form/demo/registerDemoDeps.js +23 -0
- package/components/form/demo/registerDemoDeps.min.js +583 -904
- package/components/form/demo/styles.scss +1 -0
- package/components/input/demo/api.md +5 -5
- package/components/input/demo/customize.js +25 -0
- package/components/input/demo/customize.md +8 -8
- package/components/input/demo/customize.min.js +116 -93
- package/components/input/demo/demo-support.js +1 -0
- package/components/input/demo/getting-started.js +8 -0
- package/components/input/demo/getting-started.min.js +116 -93
- package/components/input/demo/index.js +8 -0
- package/components/input/demo/index.min.js +116 -93
- package/components/input/demo/styles.css +974 -0
- package/components/input/demo/styles.scss +1 -0
- 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/menu/demo/demo-support.js +1 -0
- package/components/menu/demo/index.js +25 -0
- package/components/menu/demo/styles.scss +1 -0
- package/components/radio/demo/customize.js +22 -0
- package/components/radio/demo/customize.min.js +1 -1
- package/components/radio/demo/demo-support.js +1 -0
- package/components/radio/demo/getting-started.js +24 -0
- package/components/radio/demo/getting-started.min.js +1 -1
- package/components/radio/demo/index.js +8 -0
- package/components/radio/demo/index.min.js +1 -1
- package/components/radio/demo/styles.scss +1 -0
- package/components/radio/dist/index.js +1 -1
- package/components/radio/dist/registered.js +1 -1
- package/components/select/demo/customize.js +11 -0
- package/components/select/demo/customize.min.js +2 -2
- package/components/select/demo/demo-support.js +1 -0
- package/components/select/demo/getting-started.js +26 -0
- package/components/select/demo/getting-started.min.js +2 -2
- package/components/select/demo/index.js +11 -0
- package/components/select/demo/index.min.js +2 -2
- package/components/select/demo/styles.scss +1 -0
- package/components/select/dist/index.js +2 -2
- package/components/select/dist/registered.js +2 -2
- package/custom-elements.json +2146 -2218
- package/package.json +2 -6
- package/components/datepicker/dist/blackoutUtils.d.ts +0 -43
- /package/components/datepicker/dist/{auro-calendar-month.d.ts → src/auro-calendar-month.d.ts} +0 -0
- /package/components/datepicker/dist/{buttonVersion.d.ts → src/buttonVersion.d.ts} +0 -0
- /package/components/datepicker/dist/{datepickerKeyboardStrategy.d.ts → src/datepickerKeyboardStrategy.d.ts} +0 -0
- /package/components/datepicker/dist/{iconVersion.d.ts → src/iconVersion.d.ts} +0 -0
- /package/components/datepicker/dist/{index.d.ts → src/index.d.ts} +0 -0
- /package/components/datepicker/dist/{popoverVersion.d.ts → src/popoverVersion.d.ts} +0 -0
- /package/components/datepicker/dist/{styles → src/styles}/classic/color-css.d.ts +0 -0
- /package/components/datepicker/dist/{styles → src/styles}/classic/style-css.d.ts +0 -0
- /package/components/datepicker/dist/{styles → src/styles}/color-calendar-css.d.ts +0 -0
- /package/components/datepicker/dist/{styles → src/styles}/color-cell-css.d.ts +0 -0
- /package/components/datepicker/dist/{styles → src/styles}/color-css.d.ts +0 -0
- /package/components/datepicker/dist/{styles → src/styles}/color-month-css.d.ts +0 -0
- /package/components/datepicker/dist/{styles → src/styles}/shapeSize-css.d.ts +0 -0
- /package/components/datepicker/dist/{styles → src/styles}/snowflake/color-css.d.ts +0 -0
- /package/components/datepicker/dist/{styles → src/styles}/snowflake/style-css.d.ts +0 -0
- /package/components/datepicker/dist/{styles → src/styles}/style-auro-calendar-cell-css.d.ts +0 -0
- /package/components/datepicker/dist/{styles → src/styles}/style-auro-calendar-css.d.ts +0 -0
- /package/components/datepicker/dist/{styles → src/styles}/style-auro-calendar-month-css.d.ts +0 -0
- /package/components/datepicker/dist/{styles → src/styles}/style-css.d.ts +0 -0
- /package/components/datepicker/dist/{styles → src/styles}/tokens-css.d.ts +0 -0
- /package/components/datepicker/dist/{utilities.d.ts → src/utilities.d.ts} +0 -0
- /package/components/datepicker/dist/{utilitiesCalendar.d.ts → src/utilitiesCalendar.d.ts} +0 -0
- /package/components/datepicker/dist/{utilitiesCalendarRender.d.ts → src/utilitiesCalendarRender.d.ts} +0 -0
- /package/components/datepicker/dist/{vendor → src/vendor}/wc-range-datepicker/day.d.ts +0 -0
- /package/components/datepicker/dist/{vendor → src/vendor}/wc-range-datepicker/range-datepicker-calendar.d.ts +0 -0
- /package/components/datepicker/dist/{vendor → src/vendor}/wc-range-datepicker/range-datepicker-cell.d.ts +0 -0
- /package/components/datepicker/dist/{vendor → src/vendor}/wc-range-datepicker/range-datepicker.d.ts +0 -0
|
@@ -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() {
|
|
@@ -16524,6 +16524,13 @@ class AuroInputUtilities {
|
|
|
16524
16524
|
* @returns {string | undefined}
|
|
16525
16525
|
*/
|
|
16526
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
|
+
}
|
|
16527
16534
|
const normalizedFormat = format.toLowerCase();
|
|
16528
16535
|
const maskOptions = this.getMaskOptions('date', normalizedFormat);
|
|
16529
16536
|
|
|
@@ -16674,79 +16681,18 @@ class BaseInput extends AuroElement$1 {
|
|
|
16674
16681
|
constructor() {
|
|
16675
16682
|
super();
|
|
16676
16683
|
|
|
16677
|
-
|
|
16678
|
-
|
|
16679
|
-
|
|
16680
|
-
|
|
16681
|
-
|
|
16682
|
-
|
|
16683
|
-
|
|
16684
|
-
|
|
16685
|
-
|
|
16686
|
-
|
|
16687
|
-
this.required = false;
|
|
16688
|
-
this.onDark = false;
|
|
16689
|
-
this.setCustomValidityForType = undefined;
|
|
16690
|
-
this.size = 'lg';
|
|
16691
|
-
this.shape = 'classic';
|
|
16692
|
-
this.value = undefined;
|
|
16693
|
-
this._valueObject = undefined;
|
|
16694
|
-
|
|
16695
|
-
this._initializePrivateDefaults();
|
|
16696
|
-
}
|
|
16697
|
-
|
|
16698
|
-
/**
|
|
16699
|
-
* Internal Defaults.
|
|
16700
|
-
* @private
|
|
16701
|
-
* @returns {void}
|
|
16702
|
-
*/
|
|
16703
|
-
_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.
|
|
16704
16694
|
this.activeLabel = false;
|
|
16705
|
-
|
|
16706
|
-
this.icon = false;
|
|
16707
|
-
this.disabled = false;
|
|
16708
|
-
this.dvInputOnly = false;
|
|
16709
|
-
this.hideLabelVisually = false;
|
|
16710
|
-
this.max = undefined;
|
|
16711
|
-
this.maxLength = undefined;
|
|
16712
|
-
this.min = undefined;
|
|
16713
|
-
this.minLength = undefined;
|
|
16714
|
-
this.noValidate = false;
|
|
16715
|
-
this.onDark = false;
|
|
16716
|
-
this.required = false;
|
|
16717
|
-
this.setCustomValidityForType = undefined;
|
|
16718
|
-
|
|
16719
|
-
// Used for storing raw values returned from input mask.
|
|
16720
|
-
this._rawMaskValue = undefined;
|
|
16721
|
-
|
|
16722
|
-
/**
|
|
16723
|
-
* @private
|
|
16724
|
-
*/
|
|
16725
|
-
this.layout = 'classic';
|
|
16726
|
-
|
|
16727
|
-
/**
|
|
16728
|
-
* @private
|
|
16729
|
-
*/
|
|
16730
|
-
this.shape = 'classic';
|
|
16731
|
-
|
|
16732
|
-
/**
|
|
16733
|
-
* @private
|
|
16734
|
-
*/
|
|
16735
|
-
this.size = 'lg';
|
|
16736
|
-
|
|
16737
|
-
this.touched = false;
|
|
16738
|
-
this.util = new AuroInputUtilities({
|
|
16739
|
-
locale: "en-US",
|
|
16740
|
-
format: this.format
|
|
16741
|
-
});
|
|
16742
|
-
this.validation = new AuroFormValidation();
|
|
16743
|
-
this.inputIconName = undefined;
|
|
16744
|
-
this.showPassword = false;
|
|
16745
|
-
this.validationCCLength = undefined;
|
|
16746
|
-
this.hasValue = false;
|
|
16747
|
-
this.label = 'Input label is undefined';
|
|
16748
|
-
|
|
16749
|
-
|
|
16695
|
+
/** @private */
|
|
16750
16696
|
this.allowedInputTypes = [
|
|
16751
16697
|
"text",
|
|
16752
16698
|
"number",
|
|
@@ -16755,7 +16701,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
16755
16701
|
"credit-card",
|
|
16756
16702
|
"tel"
|
|
16757
16703
|
];
|
|
16758
|
-
this.
|
|
16704
|
+
this.appearance = "default";
|
|
16705
|
+
/** @private */
|
|
16759
16706
|
this.dateFormatMap = {
|
|
16760
16707
|
'mm/dd/yyyy': 'dateMMDDYYYY',
|
|
16761
16708
|
'dd/mm/yyyy': 'dateDDMMYYYY',
|
|
@@ -16772,27 +16719,57 @@ class BaseInput extends AuroElement$1 {
|
|
|
16772
16719
|
'dd/mm': 'dateDDMM',
|
|
16773
16720
|
'mm/dd': 'dateMMDD'
|
|
16774
16721
|
};
|
|
16722
|
+
this.disabled = false;
|
|
16723
|
+
/** @private */
|
|
16775
16724
|
this.domHandler = new DomHandler();
|
|
16776
16725
|
this.dvInputOnly = false;
|
|
16777
16726
|
this.hasValue = false;
|
|
16727
|
+
this.hideLabelVisually = false;
|
|
16728
|
+
this.icon = false;
|
|
16729
|
+
/** @private */
|
|
16778
16730
|
this.inputIconName = undefined;
|
|
16731
|
+
/** @private */
|
|
16779
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;
|
|
16780
16741
|
this.noValidate = false;
|
|
16781
|
-
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 */
|
|
16782
16750
|
this.setSelectionInputTypes = [
|
|
16783
16751
|
"text",
|
|
16784
16752
|
"password",
|
|
16785
16753
|
"email"
|
|
16786
|
-
];
|
|
16754
|
+
];
|
|
16755
|
+
this.shape = 'classic';
|
|
16756
|
+
/** @private */
|
|
16787
16757
|
this.showPassword = false;
|
|
16758
|
+
this.size = 'lg';
|
|
16788
16759
|
this.touched = false;
|
|
16760
|
+
/** @private */
|
|
16789
16761
|
this.uniqueId = new UniqueId().create();
|
|
16762
|
+
/** @private */
|
|
16790
16763
|
this.util = new AuroInputUtilities({
|
|
16791
16764
|
locale: this.locale,
|
|
16792
16765
|
format: this.format
|
|
16793
16766
|
});
|
|
16767
|
+
/** @private */
|
|
16794
16768
|
this.validation = new AuroFormValidation();
|
|
16769
|
+
/** @private */
|
|
16795
16770
|
this.validationCCLength = undefined;
|
|
16771
|
+
this.value = undefined;
|
|
16772
|
+
this._valueObject = undefined;
|
|
16796
16773
|
}
|
|
16797
16774
|
|
|
16798
16775
|
// function to define props used within the scope of this component
|
|
@@ -17340,6 +17317,15 @@ class BaseInput extends AuroElement$1 {
|
|
|
17340
17317
|
|
|
17341
17318
|
this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
|
|
17342
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
|
+
|
|
17343
17329
|
// use validity message override if declared when initializing the component
|
|
17344
17330
|
if (this.hasAttribute('setCustomValidity')) {
|
|
17345
17331
|
this.ValidityMessageOverride = this.setCustomValidity;
|
|
@@ -17773,6 +17759,38 @@ class BaseInput extends AuroElement$1 {
|
|
|
17773
17759
|
this.touched = true;
|
|
17774
17760
|
this.validation.validate(this);
|
|
17775
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
|
+
}
|
|
17776
17794
|
}
|
|
17777
17795
|
|
|
17778
17796
|
/**
|
|
@@ -18399,7 +18417,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
18399
18417
|
}
|
|
18400
18418
|
};
|
|
18401
18419
|
|
|
18402
|
-
var formkitVersion$1 = '
|
|
18420
|
+
var formkitVersion$1 = '202606252337';
|
|
18403
18421
|
|
|
18404
18422
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
18405
18423
|
// See LICENSE in the project root for license information.
|
|
@@ -18902,6 +18920,7 @@ class AuroInput extends BaseInput {
|
|
|
18902
18920
|
<${this.buttonTag}
|
|
18903
18921
|
@click="${this.handleClickShowPassword}"
|
|
18904
18922
|
appearance="${this.onDark ? 'inverse' : this.appearance}"
|
|
18923
|
+
aria-pressed="${this.showPassword ? 'true' : 'false'}"
|
|
18905
18924
|
class="notificationBtn passwordBtn"
|
|
18906
18925
|
shape="circle"
|
|
18907
18926
|
size="sm"
|
|
@@ -18975,25 +18994,29 @@ class AuroInput extends BaseInput {
|
|
|
18975
18994
|
* @returns {html} - Returns HTML for the help text and error message.
|
|
18976
18995
|
*/
|
|
18977
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';
|
|
18978
19005
|
return html`
|
|
18979
|
-
|
|
18980
|
-
?
|
|
18981
|
-
|
|
18982
|
-
|
|
18983
|
-
|
|
18984
|
-
|
|
18985
|
-
|
|
18986
|
-
|
|
18987
|
-
|
|
18988
|
-
|
|
18989
|
-
|
|
18990
|
-
appearance="${this.onDark ? 'inverse' : this.appearance}">
|
|
18991
|
-
<p id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
|
|
18992
|
-
${this.errorMessage}
|
|
18993
|
-
</p>
|
|
18994
|
-
</${this.helpTextTag}>
|
|
18995
|
-
`
|
|
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>`
|
|
18996
19017
|
}
|
|
19018
|
+
</p>
|
|
19019
|
+
</${this.helpTextTag}>
|
|
18997
19020
|
`;
|
|
18998
19021
|
}
|
|
18999
19022
|
|
|
@@ -19520,7 +19543,7 @@ class AuroBibtemplate extends LitElement {
|
|
|
19520
19543
|
}
|
|
19521
19544
|
}
|
|
19522
19545
|
|
|
19523
|
-
var formkitVersion = '
|
|
19546
|
+
var formkitVersion = '202606252337';
|
|
19524
19547
|
|
|
19525
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}`;
|
|
19526
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() {
|
|
@@ -16524,6 +16524,13 @@ class AuroInputUtilities {
|
|
|
16524
16524
|
* @returns {string | undefined}
|
|
16525
16525
|
*/
|
|
16526
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
|
+
}
|
|
16527
16534
|
const normalizedFormat = format.toLowerCase();
|
|
16528
16535
|
const maskOptions = this.getMaskOptions('date', normalizedFormat);
|
|
16529
16536
|
|
|
@@ -16674,79 +16681,18 @@ class BaseInput extends AuroElement$1 {
|
|
|
16674
16681
|
constructor() {
|
|
16675
16682
|
super();
|
|
16676
16683
|
|
|
16677
|
-
|
|
16678
|
-
|
|
16679
|
-
|
|
16680
|
-
|
|
16681
|
-
|
|
16682
|
-
|
|
16683
|
-
|
|
16684
|
-
|
|
16685
|
-
|
|
16686
|
-
|
|
16687
|
-
this.required = false;
|
|
16688
|
-
this.onDark = false;
|
|
16689
|
-
this.setCustomValidityForType = undefined;
|
|
16690
|
-
this.size = 'lg';
|
|
16691
|
-
this.shape = 'classic';
|
|
16692
|
-
this.value = undefined;
|
|
16693
|
-
this._valueObject = undefined;
|
|
16694
|
-
|
|
16695
|
-
this._initializePrivateDefaults();
|
|
16696
|
-
}
|
|
16697
|
-
|
|
16698
|
-
/**
|
|
16699
|
-
* Internal Defaults.
|
|
16700
|
-
* @private
|
|
16701
|
-
* @returns {void}
|
|
16702
|
-
*/
|
|
16703
|
-
_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.
|
|
16704
16694
|
this.activeLabel = false;
|
|
16705
|
-
|
|
16706
|
-
this.icon = false;
|
|
16707
|
-
this.disabled = false;
|
|
16708
|
-
this.dvInputOnly = false;
|
|
16709
|
-
this.hideLabelVisually = false;
|
|
16710
|
-
this.max = undefined;
|
|
16711
|
-
this.maxLength = undefined;
|
|
16712
|
-
this.min = undefined;
|
|
16713
|
-
this.minLength = undefined;
|
|
16714
|
-
this.noValidate = false;
|
|
16715
|
-
this.onDark = false;
|
|
16716
|
-
this.required = false;
|
|
16717
|
-
this.setCustomValidityForType = undefined;
|
|
16718
|
-
|
|
16719
|
-
// Used for storing raw values returned from input mask.
|
|
16720
|
-
this._rawMaskValue = undefined;
|
|
16721
|
-
|
|
16722
|
-
/**
|
|
16723
|
-
* @private
|
|
16724
|
-
*/
|
|
16725
|
-
this.layout = 'classic';
|
|
16726
|
-
|
|
16727
|
-
/**
|
|
16728
|
-
* @private
|
|
16729
|
-
*/
|
|
16730
|
-
this.shape = 'classic';
|
|
16731
|
-
|
|
16732
|
-
/**
|
|
16733
|
-
* @private
|
|
16734
|
-
*/
|
|
16735
|
-
this.size = 'lg';
|
|
16736
|
-
|
|
16737
|
-
this.touched = false;
|
|
16738
|
-
this.util = new AuroInputUtilities({
|
|
16739
|
-
locale: "en-US",
|
|
16740
|
-
format: this.format
|
|
16741
|
-
});
|
|
16742
|
-
this.validation = new AuroFormValidation();
|
|
16743
|
-
this.inputIconName = undefined;
|
|
16744
|
-
this.showPassword = false;
|
|
16745
|
-
this.validationCCLength = undefined;
|
|
16746
|
-
this.hasValue = false;
|
|
16747
|
-
this.label = 'Input label is undefined';
|
|
16748
|
-
|
|
16749
|
-
|
|
16695
|
+
/** @private */
|
|
16750
16696
|
this.allowedInputTypes = [
|
|
16751
16697
|
"text",
|
|
16752
16698
|
"number",
|
|
@@ -16755,7 +16701,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
16755
16701
|
"credit-card",
|
|
16756
16702
|
"tel"
|
|
16757
16703
|
];
|
|
16758
|
-
this.
|
|
16704
|
+
this.appearance = "default";
|
|
16705
|
+
/** @private */
|
|
16759
16706
|
this.dateFormatMap = {
|
|
16760
16707
|
'mm/dd/yyyy': 'dateMMDDYYYY',
|
|
16761
16708
|
'dd/mm/yyyy': 'dateDDMMYYYY',
|
|
@@ -16772,27 +16719,57 @@ class BaseInput extends AuroElement$1 {
|
|
|
16772
16719
|
'dd/mm': 'dateDDMM',
|
|
16773
16720
|
'mm/dd': 'dateMMDD'
|
|
16774
16721
|
};
|
|
16722
|
+
this.disabled = false;
|
|
16723
|
+
/** @private */
|
|
16775
16724
|
this.domHandler = new DomHandler();
|
|
16776
16725
|
this.dvInputOnly = false;
|
|
16777
16726
|
this.hasValue = false;
|
|
16727
|
+
this.hideLabelVisually = false;
|
|
16728
|
+
this.icon = false;
|
|
16729
|
+
/** @private */
|
|
16778
16730
|
this.inputIconName = undefined;
|
|
16731
|
+
/** @private */
|
|
16779
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;
|
|
16780
16741
|
this.noValidate = false;
|
|
16781
|
-
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 */
|
|
16782
16750
|
this.setSelectionInputTypes = [
|
|
16783
16751
|
"text",
|
|
16784
16752
|
"password",
|
|
16785
16753
|
"email"
|
|
16786
|
-
];
|
|
16754
|
+
];
|
|
16755
|
+
this.shape = 'classic';
|
|
16756
|
+
/** @private */
|
|
16787
16757
|
this.showPassword = false;
|
|
16758
|
+
this.size = 'lg';
|
|
16788
16759
|
this.touched = false;
|
|
16760
|
+
/** @private */
|
|
16789
16761
|
this.uniqueId = new UniqueId().create();
|
|
16762
|
+
/** @private */
|
|
16790
16763
|
this.util = new AuroInputUtilities({
|
|
16791
16764
|
locale: this.locale,
|
|
16792
16765
|
format: this.format
|
|
16793
16766
|
});
|
|
16767
|
+
/** @private */
|
|
16794
16768
|
this.validation = new AuroFormValidation();
|
|
16769
|
+
/** @private */
|
|
16795
16770
|
this.validationCCLength = undefined;
|
|
16771
|
+
this.value = undefined;
|
|
16772
|
+
this._valueObject = undefined;
|
|
16796
16773
|
}
|
|
16797
16774
|
|
|
16798
16775
|
// function to define props used within the scope of this component
|
|
@@ -17340,6 +17317,15 @@ class BaseInput extends AuroElement$1 {
|
|
|
17340
17317
|
|
|
17341
17318
|
this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
|
|
17342
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
|
+
|
|
17343
17329
|
// use validity message override if declared when initializing the component
|
|
17344
17330
|
if (this.hasAttribute('setCustomValidity')) {
|
|
17345
17331
|
this.ValidityMessageOverride = this.setCustomValidity;
|
|
@@ -17773,6 +17759,38 @@ class BaseInput extends AuroElement$1 {
|
|
|
17773
17759
|
this.touched = true;
|
|
17774
17760
|
this.validation.validate(this);
|
|
17775
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
|
+
}
|
|
17776
17794
|
}
|
|
17777
17795
|
|
|
17778
17796
|
/**
|
|
@@ -18399,7 +18417,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
18399
18417
|
}
|
|
18400
18418
|
};
|
|
18401
18419
|
|
|
18402
|
-
var formkitVersion$1 = '
|
|
18420
|
+
var formkitVersion$1 = '202606252337';
|
|
18403
18421
|
|
|
18404
18422
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
18405
18423
|
// See LICENSE in the project root for license information.
|
|
@@ -18902,6 +18920,7 @@ class AuroInput extends BaseInput {
|
|
|
18902
18920
|
<${this.buttonTag}
|
|
18903
18921
|
@click="${this.handleClickShowPassword}"
|
|
18904
18922
|
appearance="${this.onDark ? 'inverse' : this.appearance}"
|
|
18923
|
+
aria-pressed="${this.showPassword ? 'true' : 'false'}"
|
|
18905
18924
|
class="notificationBtn passwordBtn"
|
|
18906
18925
|
shape="circle"
|
|
18907
18926
|
size="sm"
|
|
@@ -18975,25 +18994,29 @@ class AuroInput extends BaseInput {
|
|
|
18975
18994
|
* @returns {html} - Returns HTML for the help text and error message.
|
|
18976
18995
|
*/
|
|
18977
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';
|
|
18978
19005
|
return html`
|
|
18979
|
-
|
|
18980
|
-
?
|
|
18981
|
-
|
|
18982
|
-
|
|
18983
|
-
|
|
18984
|
-
|
|
18985
|
-
|
|
18986
|
-
|
|
18987
|
-
|
|
18988
|
-
|
|
18989
|
-
|
|
18990
|
-
appearance="${this.onDark ? 'inverse' : this.appearance}">
|
|
18991
|
-
<p id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
|
|
18992
|
-
${this.errorMessage}
|
|
18993
|
-
</p>
|
|
18994
|
-
</${this.helpTextTag}>
|
|
18995
|
-
`
|
|
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>`
|
|
18996
19017
|
}
|
|
19018
|
+
</p>
|
|
19019
|
+
</${this.helpTextTag}>
|
|
18997
19020
|
`;
|
|
18998
19021
|
}
|
|
18999
19022
|
|
|
@@ -19520,7 +19543,7 @@ class AuroBibtemplate extends LitElement {
|
|
|
19520
19543
|
}
|
|
19521
19544
|
}
|
|
19522
19545
|
|
|
19523
|
-
var formkitVersion = '
|
|
19546
|
+
var formkitVersion = '202606252337';
|
|
19524
19547
|
|
|
19525
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}`;
|
|
19526
19549
|
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
|
|
2
|
+
import { AuroCounter } from '../src/auro-counter.js';
|
|
3
|
+
import { AuroCounterGroup } from '../src/auro-counter-group.js';
|
|
4
|
+
|
|
5
|
+
AuroCounter.register();
|
|
6
|
+
AuroCounterGroup.register();
|
|
7
|
+
AuroCounterGroup.register('custom-counter-group');
|
|
8
|
+
AuroCounter.register('custom-counter');
|
|
9
|
+
|
|
10
|
+
export function initExamples(initialCount = 0) {
|
|
11
|
+
try {
|
|
12
|
+
|
|
13
|
+
} catch (err) {
|
|
14
|
+
if (initialCount <= 20) {
|
|
15
|
+
// setTimeout handles issue where content is sometimes loaded after the functions get called
|
|
16
|
+
setTimeout(() => {
|
|
17
|
+
initExamples(initialCount + 1);
|
|
18
|
+
}, 100);
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
}
|
|
@@ -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() {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { renderPage, openAccordion } from '@aurodesignsystem/utils/demo-support';
|