@aurodesignsystem-dev/auro-formkit 0.0.0-pr1541.5 → 0.0.0-pr1542.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/checkbox/demo/customize.min.js +1 -1
- package/components/checkbox/demo/getting-started.min.js +1 -1
- package/components/checkbox/demo/index.min.js +1 -1
- package/components/checkbox/dist/index.js +1 -1
- package/components/checkbox/dist/registered.js +1 -1
- package/components/combobox/demo/api.md +1 -1
- package/components/combobox/demo/customize.min.js +22 -91
- package/components/combobox/demo/getting-started.min.js +22 -91
- package/components/combobox/demo/index.md +0 -1
- package/components/combobox/demo/index.min.js +22 -91
- package/components/combobox/dist/auro-combobox.d.ts +1 -1
- package/components/combobox/dist/index.js +4 -4
- package/components/combobox/dist/registered.js +4 -4
- package/components/counter/demo/customize.min.js +2 -2
- package/components/counter/demo/index.min.js +2 -2
- package/components/counter/dist/index.js +2 -2
- package/components/counter/dist/registered.js +2 -2
- package/components/datepicker/demo/customize.min.js +3 -3
- package/components/datepicker/demo/index.min.js +3 -3
- package/components/datepicker/dist/index.js +3 -3
- package/components/datepicker/dist/registered.js +3 -3
- 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 +33 -106
- package/components/form/demo/getting-started.min.js +33 -106
- package/components/form/demo/index.min.js +33 -106
- package/components/form/demo/registerDemoDeps.min.js +33 -106
- package/components/input/demo/customize.min.js +1 -1
- package/components/input/demo/getting-started.min.js +1 -1
- package/components/input/demo/index.min.js +1 -1
- package/components/input/dist/index.js +1 -1
- package/components/input/dist/registered.js +1 -1
- package/components/menu/demo/accessibility.md +4 -4
- package/components/menu/demo/api.md +19 -26
- package/components/menu/demo/css-only.md +19 -26
- package/components/menu/demo/customize.md +47 -307
- package/components/menu/demo/design.md +1 -1
- package/components/menu/demo/getting-started.md +7 -144
- package/components/menu/demo/index.min.js +19 -214
- package/components/menu/demo/keyboard-behavior.md +4 -83
- package/components/menu/demo/voiceover.md +8 -12
- package/components/menu/demo/why-menu.md +9 -8
- package/components/menu/dist/auro-menu-utils.d.ts +0 -19
- package/components/menu/dist/auro-menu.d.ts +8 -4
- package/components/menu/dist/auro-menuoption.d.ts +0 -12
- package/components/menu/dist/index.js +18 -87
- package/components/menu/dist/registered.js +18 -87
- 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/api.md +2 -2
- package/components/select/demo/customize.md +2 -5
- package/components/select/demo/customize.min.js +21 -94
- package/components/select/demo/design.md +10 -10
- package/components/select/demo/getting-started.md +1 -1
- package/components/select/demo/getting-started.min.js +21 -94
- package/components/select/demo/index.md +2 -2
- package/components/select/demo/index.min.js +21 -94
- package/components/select/demo/keyboard-behavior.md +18 -49
- package/components/select/dist/auro-select.d.ts +2 -6
- package/components/select/dist/index.js +3 -7
- package/components/select/dist/registered.js +3 -7
- package/custom-elements.json +1540 -1614
- package/package.json +1 -1
|
@@ -1275,7 +1275,7 @@ class AuroHelpText extends i$2 {
|
|
|
1275
1275
|
}
|
|
1276
1276
|
}
|
|
1277
1277
|
|
|
1278
|
-
var formkitVersion = '
|
|
1278
|
+
var formkitVersion = '202607082143';
|
|
1279
1279
|
|
|
1280
1280
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1281
1281
|
// See LICENSE in the project root for license information.
|
|
@@ -1275,7 +1275,7 @@ class AuroHelpText extends i$2 {
|
|
|
1275
1275
|
}
|
|
1276
1276
|
}
|
|
1277
1277
|
|
|
1278
|
-
var formkitVersion = '
|
|
1278
|
+
var formkitVersion = '202607082143';
|
|
1279
1279
|
|
|
1280
1280
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1281
1281
|
// See LICENSE in the project root for license information.
|
|
@@ -1275,7 +1275,7 @@ class AuroHelpText extends i$2 {
|
|
|
1275
1275
|
}
|
|
1276
1276
|
}
|
|
1277
1277
|
|
|
1278
|
-
var formkitVersion = '
|
|
1278
|
+
var formkitVersion = '202607082143';
|
|
1279
1279
|
|
|
1280
1280
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1281
1281
|
// See LICENSE in the project root for license information.
|
|
@@ -1228,7 +1228,7 @@ class AuroHelpText extends LitElement {
|
|
|
1228
1228
|
}
|
|
1229
1229
|
}
|
|
1230
1230
|
|
|
1231
|
-
var formkitVersion = '
|
|
1231
|
+
var formkitVersion = '202607082143';
|
|
1232
1232
|
|
|
1233
1233
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1234
1234
|
// See LICENSE in the project root for license information.
|
|
@@ -1228,7 +1228,7 @@ class AuroHelpText extends LitElement {
|
|
|
1228
1228
|
}
|
|
1229
1229
|
}
|
|
1230
1230
|
|
|
1231
|
-
var formkitVersion = '
|
|
1231
|
+
var formkitVersion = '202607082143';
|
|
1232
1232
|
|
|
1233
1233
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1234
1234
|
// See LICENSE in the project root for license information.
|
|
@@ -42,7 +42,7 @@ The `auro-combobox` element provides users with a way to select an option from a
|
|
|
42
42
|
| `type` | `type` | | `string` | | Applies the defined value as the type attribute on `auro-input`. |
|
|
43
43
|
| `typedValue` | `typedValue` | | `string` | | Specifies the value of the input element within the combobox. |
|
|
44
44
|
| `validity` | `validity` | | `string` | | Specifies the `validityState` this element is in. |
|
|
45
|
-
| `value` | `value` | | `string` | | Value selected for the dropdown menu.
|
|
45
|
+
| `value` | `value` | | `string` | | Value selected for the dropdown menu. |
|
|
46
46
|
|
|
47
47
|
## Methods
|
|
48
48
|
|
|
@@ -4879,7 +4879,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
|
|
|
4879
4879
|
}
|
|
4880
4880
|
};
|
|
4881
4881
|
|
|
4882
|
-
var formkitVersion$2 = '
|
|
4882
|
+
var formkitVersion$2 = '202607082143';
|
|
4883
4883
|
|
|
4884
4884
|
let AuroElement$2 = class AuroElement extends i$3 {
|
|
4885
4885
|
static get properties() {
|
|
@@ -18504,7 +18504,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
|
|
|
18504
18504
|
}
|
|
18505
18505
|
};
|
|
18506
18506
|
|
|
18507
|
-
var formkitVersion$1 = '
|
|
18507
|
+
var formkitVersion$1 = '202607082143';
|
|
18508
18508
|
|
|
18509
18509
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
18510
18510
|
// See LICENSE in the project root for license information.
|
|
@@ -19625,7 +19625,7 @@ class AuroBibtemplate extends i$3 {
|
|
|
19625
19625
|
}
|
|
19626
19626
|
}
|
|
19627
19627
|
|
|
19628
|
-
var formkitVersion = '
|
|
19628
|
+
var formkitVersion = '202607082143';
|
|
19629
19629
|
|
|
19630
19630
|
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}`;
|
|
19631
19631
|
|
|
@@ -20439,7 +20439,7 @@ class AuroCombobox extends AuroElement {
|
|
|
20439
20439
|
},
|
|
20440
20440
|
|
|
20441
20441
|
/**
|
|
20442
|
-
* Value selected for the dropdown menu.
|
|
20442
|
+
* Value selected for the dropdown menu.
|
|
20443
20443
|
*/
|
|
20444
20444
|
value: {
|
|
20445
20445
|
type: String
|
|
@@ -21957,18 +21957,6 @@ var tokensCss = i$6`:host{--ds-auro-menu-divider-color: var(--ds-basic-color-bor
|
|
|
21957
21957
|
// See LICENSE in the project root for license information.
|
|
21958
21958
|
|
|
21959
21959
|
|
|
21960
|
-
/**
|
|
21961
|
-
* Serializes a multi-select value array back into the String `value` property.
|
|
21962
|
-
* An empty (or missing) array collapses to `undefined` so an emptied selection
|
|
21963
|
-
* clears `value` rather than reflecting a `"[]"` attribute.
|
|
21964
|
-
* @private
|
|
21965
|
-
* @param {Array<string>|undefined} values - The selected values.
|
|
21966
|
-
* @returns {string|undefined} JSON string of the values, or undefined when empty.
|
|
21967
|
-
*/
|
|
21968
|
-
function serializeMultiSelectValue(values) {
|
|
21969
|
-
return values && values.length > 0 ? JSON.stringify(values) : undefined;
|
|
21970
|
-
}
|
|
21971
|
-
|
|
21972
21960
|
/**
|
|
21973
21961
|
* Validates if an option can be interacted with.
|
|
21974
21962
|
* @private
|
|
@@ -21981,20 +21969,6 @@ function isOptionInteractive(option) {
|
|
|
21981
21969
|
!option.hasAttribute('static');
|
|
21982
21970
|
}
|
|
21983
21971
|
|
|
21984
|
-
/**
|
|
21985
|
-
* Validates if an option may be selected by matching a programmatic value.
|
|
21986
|
-
* Unlike `isOptionInteractive`, `hidden` is allowed: the combobox toggles
|
|
21987
|
-
* `hidden` as its type-ahead filter, so a filtered-out option is still a
|
|
21988
|
-
* valid programmatic selection. Only disabled and static options — which are
|
|
21989
|
-
* never selectable — are rejected.
|
|
21990
|
-
* @param {HTMLElement} option - The option to check.
|
|
21991
|
-
* @returns {boolean} True if option can be selected by value.
|
|
21992
|
-
*/
|
|
21993
|
-
function isSelectableByValue(option) {
|
|
21994
|
-
return !option.hasAttribute('disabled') &&
|
|
21995
|
-
!option.hasAttribute('static');
|
|
21996
|
-
}
|
|
21997
|
-
|
|
21998
21972
|
/**
|
|
21999
21973
|
* Helper method to dispatch custom events.
|
|
22000
21974
|
* @param {HTMLElement} element - Element to dispatch event from.
|
|
@@ -22164,26 +22138,22 @@ class AuroMenu extends AuroElement {
|
|
|
22164
22138
|
|
|
22165
22139
|
/**
|
|
22166
22140
|
* Specifies the current active menuOption.
|
|
22167
|
-
* @readonly
|
|
22168
22141
|
*/
|
|
22169
22142
|
optionActive: {
|
|
22170
22143
|
type: Object,
|
|
22171
|
-
attribute:
|
|
22144
|
+
attribute: 'optionactive'
|
|
22172
22145
|
},
|
|
22173
22146
|
|
|
22174
22147
|
/**
|
|
22175
|
-
*
|
|
22176
|
-
* @readonly
|
|
22148
|
+
* An array of currently selected menu options, type `HTMLElement` by default. In multi-select mode, `optionSelected` is an array of HTML elements.
|
|
22177
22149
|
*/
|
|
22178
22150
|
optionSelected: {
|
|
22179
22151
|
// Allow HTMLElement, HTMLElement[] arrays and undefined
|
|
22180
|
-
type: Object
|
|
22181
|
-
attribute: false
|
|
22152
|
+
type: Object
|
|
22182
22153
|
},
|
|
22183
22154
|
|
|
22184
22155
|
/**
|
|
22185
22156
|
* The value of the selected option. In multi-select mode, this is a JSON stringified array of selected option values.
|
|
22186
|
-
* Options marked `disabled` or `static` are not selectable by value; `hidden` options remain selectable. In single-select mode, if the value matches a non-selectable option the selection is cleared (`optionSelected` becomes `undefined`) and `auroMenu-selectValueFailure` is dispatched. In multi-select mode, non-selectable entries are dropped from the value and the remaining selectable entries are selected; `auroMenu-selectValueFailure` is dispatched only when none of the entries match a selectable option.
|
|
22187
22157
|
*/
|
|
22188
22158
|
value: {
|
|
22189
22159
|
type: String,
|
|
@@ -22307,7 +22277,7 @@ class AuroMenu extends AuroElement {
|
|
|
22307
22277
|
}
|
|
22308
22278
|
|
|
22309
22279
|
/**
|
|
22310
|
-
* Selects options by value.
|
|
22280
|
+
* Selects options by value.
|
|
22311
22281
|
* @param {string|string[]|undefined|null} value - The value(s) to select.
|
|
22312
22282
|
* @public
|
|
22313
22283
|
*/
|
|
@@ -22392,11 +22362,6 @@ class AuroMenu extends AuroElement {
|
|
|
22392
22362
|
this.initItems();
|
|
22393
22363
|
}
|
|
22394
22364
|
|
|
22395
|
-
// Set when reconciliation reassigns `value` below. That reassignment schedules a
|
|
22396
|
-
// second updated() cycle, so the `event`-attribute dispatch is deferred to that
|
|
22397
|
-
// cycle to avoid firing option custom events twice on the same selection.
|
|
22398
|
-
let valueReconciled = false;
|
|
22399
|
-
|
|
22400
22365
|
// Handle null/undefined/empty case — empty/whitespace strings clear selection
|
|
22401
22366
|
// consistently with selectByValue(''), and avoid downstream `.includes('')` matches.
|
|
22402
22367
|
if (this.value === undefined || this.value === null || (typeof this.value === 'string' && this.value.trim() === '')) {
|
|
@@ -22409,31 +22374,11 @@ class AuroMenu extends AuroElement {
|
|
|
22409
22374
|
// Defensive default: `formattedValue` can be undefined for unexpected value types,
|
|
22410
22375
|
// and calling `.includes` on undefined would throw during reconciliation.
|
|
22411
22376
|
const valueArray = this.formattedValue || [];
|
|
22412
|
-
const matchingOptions = this.items ? this.items.filter((item) =>
|
|
22377
|
+
const matchingOptions = this.items ? this.items.filter((item) => valueArray.includes(item.value)) : [];
|
|
22413
22378
|
newSelected = matchingOptions.length > 0 ? matchingOptions : undefined;
|
|
22414
|
-
|
|
22415
|
-
// Reconcile `value` with the selectable set. Drop only entries whose option is
|
|
22416
|
-
// loaded but non-selectable (disabled/static) — leaving them would desync `value`
|
|
22417
|
-
// from `optionSelected`, and the toggle handlers rebuild `value` from `formattedValue`,
|
|
22418
|
-
// so the rejected entry would resurface on the next select/deselect. Entries with no
|
|
22419
|
-
// matching item yet are preserved so async preselection still works once options render.
|
|
22420
|
-
const rejectedValues = this.items
|
|
22421
|
-
? this.items.filter((item) => !isSelectableByValue(item) && valueArray.includes(item.value)).map((item) => item.value)
|
|
22422
|
-
: [];
|
|
22423
|
-
if (rejectedValues.length > 0) {
|
|
22424
|
-
const reconciled = valueArray.filter((val) => !rejectedValues.includes(val));
|
|
22425
|
-
this.value = serializeMultiSelectValue(reconciled);
|
|
22426
|
-
valueReconciled = true;
|
|
22427
|
-
}
|
|
22428
22379
|
} else {
|
|
22429
|
-
// In single-select mode, this.value should be a string
|
|
22430
|
-
|
|
22431
|
-
// non-selectable option falls through to the no-match path below
|
|
22432
|
-
// (dispatching auroMenu-selectValueFailure) instead of pinning it.
|
|
22433
|
-
// `hidden` is intentionally NOT excluded: the combobox toggles
|
|
22434
|
-
// `hidden` as its type-ahead filter, so a filtered-out option is
|
|
22435
|
-
// still a valid programmatic selection.
|
|
22436
|
-
const matchingOption = this.items ? this.items.find((item) => isSelectableByValue(item) && item.value === this.value) : undefined;
|
|
22380
|
+
// In single-select mode, this.value should be a string
|
|
22381
|
+
const matchingOption = this.items ? this.items.find((item) => item.value === this.value) : undefined;
|
|
22437
22382
|
|
|
22438
22383
|
if (matchingOption) {
|
|
22439
22384
|
newSelected = matchingOption;
|
|
@@ -22475,9 +22420,8 @@ class AuroMenu extends AuroElement {
|
|
|
22475
22420
|
]
|
|
22476
22421
|
]));
|
|
22477
22422
|
|
|
22478
|
-
// Notify of changes
|
|
22479
|
-
|
|
22480
|
-
if (this.optionSelected !== undefined && !valueReconciled) {
|
|
22423
|
+
// Notify of changes
|
|
22424
|
+
if (this.optionSelected !== undefined) {
|
|
22481
22425
|
const selected = Array.isArray(this.optionSelected) ? this.optionSelected : [this.optionSelected];
|
|
22482
22426
|
selected.forEach((opt) => {
|
|
22483
22427
|
if (opt.hasAttribute('event')) {
|
|
@@ -22690,7 +22634,7 @@ class AuroMenu extends AuroElement {
|
|
|
22690
22634
|
const currentSelected = this.optionSelected || [];
|
|
22691
22635
|
|
|
22692
22636
|
if (!currentValue.includes(option.value)) {
|
|
22693
|
-
this.value =
|
|
22637
|
+
this.value = JSON.stringify([
|
|
22694
22638
|
...currentValue,
|
|
22695
22639
|
option.value
|
|
22696
22640
|
]);
|
|
@@ -22716,9 +22660,15 @@ class AuroMenu extends AuroElement {
|
|
|
22716
22660
|
*/
|
|
22717
22661
|
handleDeselectState(option) {
|
|
22718
22662
|
if (this.multiSelect) {
|
|
22719
|
-
// Remove this option from array
|
|
22663
|
+
// Remove this option from array
|
|
22720
22664
|
const newFormattedValue = (this.formattedValue || []).filter((val) => val !== option.value);
|
|
22721
|
-
|
|
22665
|
+
|
|
22666
|
+
// If array is empty after removal, set back to undefined
|
|
22667
|
+
if (newFormattedValue && newFormattedValue.length === 0) {
|
|
22668
|
+
this.value = undefined;
|
|
22669
|
+
} else {
|
|
22670
|
+
this.value = JSON.stringify(newFormattedValue);
|
|
22671
|
+
}
|
|
22722
22672
|
|
|
22723
22673
|
this.optionSelected = this.optionSelected.filter((val) => val !== option);
|
|
22724
22674
|
if (this.optionSelected.length === 0) {
|
|
@@ -22765,11 +22715,6 @@ class AuroMenu extends AuroElement {
|
|
|
22765
22715
|
this.optionSelected = undefined;
|
|
22766
22716
|
this._index = -1;
|
|
22767
22717
|
|
|
22768
|
-
// Clear active option state so a follow-up open/navigation starts fresh
|
|
22769
|
-
// rather than reusing a stale reference from before the reset.
|
|
22770
|
-
this.items?.forEach((item) => item.classList.remove('active'));
|
|
22771
|
-
this.optionActive = undefined;
|
|
22772
|
-
|
|
22773
22718
|
// Reset UI state
|
|
22774
22719
|
this.updateItemsState(new Map([
|
|
22775
22720
|
[
|
|
@@ -23179,7 +23124,6 @@ let menuOptionIdCounter = 0;
|
|
|
23179
23124
|
* The `auro-menuoption` element provides users a way to define a menu option.
|
|
23180
23125
|
* @customElement auro-menuoption
|
|
23181
23126
|
*
|
|
23182
|
-
* @attr {Boolean} static - When present, marks the option as non-interactive — it renders but is skipped during keyboard navigation and cannot be selected. Useful for section headers, informational rows inside a menu, or attaching event listeners.
|
|
23183
23127
|
* @slot default - The default slot for the menu option text.
|
|
23184
23128
|
*
|
|
23185
23129
|
* @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
|
|
@@ -23209,7 +23153,6 @@ class AuroMenuOption extends AuroElement {
|
|
|
23209
23153
|
this.noCheckmark = false;
|
|
23210
23154
|
this.disabled = false;
|
|
23211
23155
|
this.noMatch = false;
|
|
23212
|
-
this.persistent = false;
|
|
23213
23156
|
|
|
23214
23157
|
/**
|
|
23215
23158
|
* @private
|
|
@@ -23231,12 +23174,6 @@ class AuroMenuOption extends AuroElement {
|
|
|
23231
23174
|
type: Boolean,
|
|
23232
23175
|
reflect: true
|
|
23233
23176
|
},
|
|
23234
|
-
|
|
23235
|
-
/**
|
|
23236
|
-
* **Deprecated.** Use the `value` attribute on `auro-menu` to set the selected option when the menu renders (or call `menu.selectByValue(value)` programmatically). Support for the child-level `selected` attribute will be removed in a future major release.
|
|
23237
|
-
*
|
|
23238
|
-
* @deprecated Use the `value` attribute on `auro-menu` instead.
|
|
23239
|
-
*/
|
|
23240
23177
|
selected: {
|
|
23241
23178
|
type: Boolean,
|
|
23242
23179
|
reflect: true
|
|
@@ -23271,12 +23208,6 @@ class AuroMenuOption extends AuroElement {
|
|
|
23271
23208
|
reflect: true,
|
|
23272
23209
|
attribute: 'nomatch'
|
|
23273
23210
|
},
|
|
23274
|
-
|
|
23275
|
-
/** When true, this option is excluded from `matchWord` DOM rewriting — useful for utility rows (e.g., "Add new…") that must render identically regardless of the current filter. */
|
|
23276
|
-
persistent: {
|
|
23277
|
-
type: Boolean,
|
|
23278
|
-
reflect: true
|
|
23279
|
-
},
|
|
23280
23211
|
};
|
|
23281
23212
|
}
|
|
23282
23213
|
|
|
@@ -4879,7 +4879,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
|
|
|
4879
4879
|
}
|
|
4880
4880
|
};
|
|
4881
4881
|
|
|
4882
|
-
var formkitVersion$2 = '
|
|
4882
|
+
var formkitVersion$2 = '202607082143';
|
|
4883
4883
|
|
|
4884
4884
|
let AuroElement$2 = class AuroElement extends i$3 {
|
|
4885
4885
|
static get properties() {
|
|
@@ -18504,7 +18504,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
|
|
|
18504
18504
|
}
|
|
18505
18505
|
};
|
|
18506
18506
|
|
|
18507
|
-
var formkitVersion$1 = '
|
|
18507
|
+
var formkitVersion$1 = '202607082143';
|
|
18508
18508
|
|
|
18509
18509
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
18510
18510
|
// See LICENSE in the project root for license information.
|
|
@@ -19625,7 +19625,7 @@ class AuroBibtemplate extends i$3 {
|
|
|
19625
19625
|
}
|
|
19626
19626
|
}
|
|
19627
19627
|
|
|
19628
|
-
var formkitVersion = '
|
|
19628
|
+
var formkitVersion = '202607082143';
|
|
19629
19629
|
|
|
19630
19630
|
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}`;
|
|
19631
19631
|
|
|
@@ -20439,7 +20439,7 @@ class AuroCombobox extends AuroElement {
|
|
|
20439
20439
|
},
|
|
20440
20440
|
|
|
20441
20441
|
/**
|
|
20442
|
-
* Value selected for the dropdown menu.
|
|
20442
|
+
* Value selected for the dropdown menu.
|
|
20443
20443
|
*/
|
|
20444
20444
|
value: {
|
|
20445
20445
|
type: String
|
|
@@ -21957,18 +21957,6 @@ var tokensCss = i$6`:host{--ds-auro-menu-divider-color: var(--ds-basic-color-bor
|
|
|
21957
21957
|
// See LICENSE in the project root for license information.
|
|
21958
21958
|
|
|
21959
21959
|
|
|
21960
|
-
/**
|
|
21961
|
-
* Serializes a multi-select value array back into the String `value` property.
|
|
21962
|
-
* An empty (or missing) array collapses to `undefined` so an emptied selection
|
|
21963
|
-
* clears `value` rather than reflecting a `"[]"` attribute.
|
|
21964
|
-
* @private
|
|
21965
|
-
* @param {Array<string>|undefined} values - The selected values.
|
|
21966
|
-
* @returns {string|undefined} JSON string of the values, or undefined when empty.
|
|
21967
|
-
*/
|
|
21968
|
-
function serializeMultiSelectValue(values) {
|
|
21969
|
-
return values && values.length > 0 ? JSON.stringify(values) : undefined;
|
|
21970
|
-
}
|
|
21971
|
-
|
|
21972
21960
|
/**
|
|
21973
21961
|
* Validates if an option can be interacted with.
|
|
21974
21962
|
* @private
|
|
@@ -21981,20 +21969,6 @@ function isOptionInteractive(option) {
|
|
|
21981
21969
|
!option.hasAttribute('static');
|
|
21982
21970
|
}
|
|
21983
21971
|
|
|
21984
|
-
/**
|
|
21985
|
-
* Validates if an option may be selected by matching a programmatic value.
|
|
21986
|
-
* Unlike `isOptionInteractive`, `hidden` is allowed: the combobox toggles
|
|
21987
|
-
* `hidden` as its type-ahead filter, so a filtered-out option is still a
|
|
21988
|
-
* valid programmatic selection. Only disabled and static options — which are
|
|
21989
|
-
* never selectable — are rejected.
|
|
21990
|
-
* @param {HTMLElement} option - The option to check.
|
|
21991
|
-
* @returns {boolean} True if option can be selected by value.
|
|
21992
|
-
*/
|
|
21993
|
-
function isSelectableByValue(option) {
|
|
21994
|
-
return !option.hasAttribute('disabled') &&
|
|
21995
|
-
!option.hasAttribute('static');
|
|
21996
|
-
}
|
|
21997
|
-
|
|
21998
21972
|
/**
|
|
21999
21973
|
* Helper method to dispatch custom events.
|
|
22000
21974
|
* @param {HTMLElement} element - Element to dispatch event from.
|
|
@@ -22164,26 +22138,22 @@ class AuroMenu extends AuroElement {
|
|
|
22164
22138
|
|
|
22165
22139
|
/**
|
|
22166
22140
|
* Specifies the current active menuOption.
|
|
22167
|
-
* @readonly
|
|
22168
22141
|
*/
|
|
22169
22142
|
optionActive: {
|
|
22170
22143
|
type: Object,
|
|
22171
|
-
attribute:
|
|
22144
|
+
attribute: 'optionactive'
|
|
22172
22145
|
},
|
|
22173
22146
|
|
|
22174
22147
|
/**
|
|
22175
|
-
*
|
|
22176
|
-
* @readonly
|
|
22148
|
+
* An array of currently selected menu options, type `HTMLElement` by default. In multi-select mode, `optionSelected` is an array of HTML elements.
|
|
22177
22149
|
*/
|
|
22178
22150
|
optionSelected: {
|
|
22179
22151
|
// Allow HTMLElement, HTMLElement[] arrays and undefined
|
|
22180
|
-
type: Object
|
|
22181
|
-
attribute: false
|
|
22152
|
+
type: Object
|
|
22182
22153
|
},
|
|
22183
22154
|
|
|
22184
22155
|
/**
|
|
22185
22156
|
* The value of the selected option. In multi-select mode, this is a JSON stringified array of selected option values.
|
|
22186
|
-
* Options marked `disabled` or `static` are not selectable by value; `hidden` options remain selectable. In single-select mode, if the value matches a non-selectable option the selection is cleared (`optionSelected` becomes `undefined`) and `auroMenu-selectValueFailure` is dispatched. In multi-select mode, non-selectable entries are dropped from the value and the remaining selectable entries are selected; `auroMenu-selectValueFailure` is dispatched only when none of the entries match a selectable option.
|
|
22187
22157
|
*/
|
|
22188
22158
|
value: {
|
|
22189
22159
|
type: String,
|
|
@@ -22307,7 +22277,7 @@ class AuroMenu extends AuroElement {
|
|
|
22307
22277
|
}
|
|
22308
22278
|
|
|
22309
22279
|
/**
|
|
22310
|
-
* Selects options by value.
|
|
22280
|
+
* Selects options by value.
|
|
22311
22281
|
* @param {string|string[]|undefined|null} value - The value(s) to select.
|
|
22312
22282
|
* @public
|
|
22313
22283
|
*/
|
|
@@ -22392,11 +22362,6 @@ class AuroMenu extends AuroElement {
|
|
|
22392
22362
|
this.initItems();
|
|
22393
22363
|
}
|
|
22394
22364
|
|
|
22395
|
-
// Set when reconciliation reassigns `value` below. That reassignment schedules a
|
|
22396
|
-
// second updated() cycle, so the `event`-attribute dispatch is deferred to that
|
|
22397
|
-
// cycle to avoid firing option custom events twice on the same selection.
|
|
22398
|
-
let valueReconciled = false;
|
|
22399
|
-
|
|
22400
22365
|
// Handle null/undefined/empty case — empty/whitespace strings clear selection
|
|
22401
22366
|
// consistently with selectByValue(''), and avoid downstream `.includes('')` matches.
|
|
22402
22367
|
if (this.value === undefined || this.value === null || (typeof this.value === 'string' && this.value.trim() === '')) {
|
|
@@ -22409,31 +22374,11 @@ class AuroMenu extends AuroElement {
|
|
|
22409
22374
|
// Defensive default: `formattedValue` can be undefined for unexpected value types,
|
|
22410
22375
|
// and calling `.includes` on undefined would throw during reconciliation.
|
|
22411
22376
|
const valueArray = this.formattedValue || [];
|
|
22412
|
-
const matchingOptions = this.items ? this.items.filter((item) =>
|
|
22377
|
+
const matchingOptions = this.items ? this.items.filter((item) => valueArray.includes(item.value)) : [];
|
|
22413
22378
|
newSelected = matchingOptions.length > 0 ? matchingOptions : undefined;
|
|
22414
|
-
|
|
22415
|
-
// Reconcile `value` with the selectable set. Drop only entries whose option is
|
|
22416
|
-
// loaded but non-selectable (disabled/static) — leaving them would desync `value`
|
|
22417
|
-
// from `optionSelected`, and the toggle handlers rebuild `value` from `formattedValue`,
|
|
22418
|
-
// so the rejected entry would resurface on the next select/deselect. Entries with no
|
|
22419
|
-
// matching item yet are preserved so async preselection still works once options render.
|
|
22420
|
-
const rejectedValues = this.items
|
|
22421
|
-
? this.items.filter((item) => !isSelectableByValue(item) && valueArray.includes(item.value)).map((item) => item.value)
|
|
22422
|
-
: [];
|
|
22423
|
-
if (rejectedValues.length > 0) {
|
|
22424
|
-
const reconciled = valueArray.filter((val) => !rejectedValues.includes(val));
|
|
22425
|
-
this.value = serializeMultiSelectValue(reconciled);
|
|
22426
|
-
valueReconciled = true;
|
|
22427
|
-
}
|
|
22428
22379
|
} else {
|
|
22429
|
-
// In single-select mode, this.value should be a string
|
|
22430
|
-
|
|
22431
|
-
// non-selectable option falls through to the no-match path below
|
|
22432
|
-
// (dispatching auroMenu-selectValueFailure) instead of pinning it.
|
|
22433
|
-
// `hidden` is intentionally NOT excluded: the combobox toggles
|
|
22434
|
-
// `hidden` as its type-ahead filter, so a filtered-out option is
|
|
22435
|
-
// still a valid programmatic selection.
|
|
22436
|
-
const matchingOption = this.items ? this.items.find((item) => isSelectableByValue(item) && item.value === this.value) : undefined;
|
|
22380
|
+
// In single-select mode, this.value should be a string
|
|
22381
|
+
const matchingOption = this.items ? this.items.find((item) => item.value === this.value) : undefined;
|
|
22437
22382
|
|
|
22438
22383
|
if (matchingOption) {
|
|
22439
22384
|
newSelected = matchingOption;
|
|
@@ -22475,9 +22420,8 @@ class AuroMenu extends AuroElement {
|
|
|
22475
22420
|
]
|
|
22476
22421
|
]));
|
|
22477
22422
|
|
|
22478
|
-
// Notify of changes
|
|
22479
|
-
|
|
22480
|
-
if (this.optionSelected !== undefined && !valueReconciled) {
|
|
22423
|
+
// Notify of changes
|
|
22424
|
+
if (this.optionSelected !== undefined) {
|
|
22481
22425
|
const selected = Array.isArray(this.optionSelected) ? this.optionSelected : [this.optionSelected];
|
|
22482
22426
|
selected.forEach((opt) => {
|
|
22483
22427
|
if (opt.hasAttribute('event')) {
|
|
@@ -22690,7 +22634,7 @@ class AuroMenu extends AuroElement {
|
|
|
22690
22634
|
const currentSelected = this.optionSelected || [];
|
|
22691
22635
|
|
|
22692
22636
|
if (!currentValue.includes(option.value)) {
|
|
22693
|
-
this.value =
|
|
22637
|
+
this.value = JSON.stringify([
|
|
22694
22638
|
...currentValue,
|
|
22695
22639
|
option.value
|
|
22696
22640
|
]);
|
|
@@ -22716,9 +22660,15 @@ class AuroMenu extends AuroElement {
|
|
|
22716
22660
|
*/
|
|
22717
22661
|
handleDeselectState(option) {
|
|
22718
22662
|
if (this.multiSelect) {
|
|
22719
|
-
// Remove this option from array
|
|
22663
|
+
// Remove this option from array
|
|
22720
22664
|
const newFormattedValue = (this.formattedValue || []).filter((val) => val !== option.value);
|
|
22721
|
-
|
|
22665
|
+
|
|
22666
|
+
// If array is empty after removal, set back to undefined
|
|
22667
|
+
if (newFormattedValue && newFormattedValue.length === 0) {
|
|
22668
|
+
this.value = undefined;
|
|
22669
|
+
} else {
|
|
22670
|
+
this.value = JSON.stringify(newFormattedValue);
|
|
22671
|
+
}
|
|
22722
22672
|
|
|
22723
22673
|
this.optionSelected = this.optionSelected.filter((val) => val !== option);
|
|
22724
22674
|
if (this.optionSelected.length === 0) {
|
|
@@ -22765,11 +22715,6 @@ class AuroMenu extends AuroElement {
|
|
|
22765
22715
|
this.optionSelected = undefined;
|
|
22766
22716
|
this._index = -1;
|
|
22767
22717
|
|
|
22768
|
-
// Clear active option state so a follow-up open/navigation starts fresh
|
|
22769
|
-
// rather than reusing a stale reference from before the reset.
|
|
22770
|
-
this.items?.forEach((item) => item.classList.remove('active'));
|
|
22771
|
-
this.optionActive = undefined;
|
|
22772
|
-
|
|
22773
22718
|
// Reset UI state
|
|
22774
22719
|
this.updateItemsState(new Map([
|
|
22775
22720
|
[
|
|
@@ -23179,7 +23124,6 @@ let menuOptionIdCounter = 0;
|
|
|
23179
23124
|
* The `auro-menuoption` element provides users a way to define a menu option.
|
|
23180
23125
|
* @customElement auro-menuoption
|
|
23181
23126
|
*
|
|
23182
|
-
* @attr {Boolean} static - When present, marks the option as non-interactive — it renders but is skipped during keyboard navigation and cannot be selected. Useful for section headers, informational rows inside a menu, or attaching event listeners.
|
|
23183
23127
|
* @slot default - The default slot for the menu option text.
|
|
23184
23128
|
*
|
|
23185
23129
|
* @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
|
|
@@ -23209,7 +23153,6 @@ class AuroMenuOption extends AuroElement {
|
|
|
23209
23153
|
this.noCheckmark = false;
|
|
23210
23154
|
this.disabled = false;
|
|
23211
23155
|
this.noMatch = false;
|
|
23212
|
-
this.persistent = false;
|
|
23213
23156
|
|
|
23214
23157
|
/**
|
|
23215
23158
|
* @private
|
|
@@ -23231,12 +23174,6 @@ class AuroMenuOption extends AuroElement {
|
|
|
23231
23174
|
type: Boolean,
|
|
23232
23175
|
reflect: true
|
|
23233
23176
|
},
|
|
23234
|
-
|
|
23235
|
-
/**
|
|
23236
|
-
* **Deprecated.** Use the `value` attribute on `auro-menu` to set the selected option when the menu renders (or call `menu.selectByValue(value)` programmatically). Support for the child-level `selected` attribute will be removed in a future major release.
|
|
23237
|
-
*
|
|
23238
|
-
* @deprecated Use the `value` attribute on `auro-menu` instead.
|
|
23239
|
-
*/
|
|
23240
23177
|
selected: {
|
|
23241
23178
|
type: Boolean,
|
|
23242
23179
|
reflect: true
|
|
@@ -23271,12 +23208,6 @@ class AuroMenuOption extends AuroElement {
|
|
|
23271
23208
|
reflect: true,
|
|
23272
23209
|
attribute: 'nomatch'
|
|
23273
23210
|
},
|
|
23274
|
-
|
|
23275
|
-
/** When true, this option is excluded from `matchWord` DOM rewriting — useful for utility rows (e.g., "Add new…") that must render identically regardless of the current filter. */
|
|
23276
|
-
persistent: {
|
|
23277
|
-
type: Boolean,
|
|
23278
|
-
reflect: true
|
|
23279
|
-
},
|
|
23280
23211
|
};
|
|
23281
23212
|
}
|
|
23282
23213
|
|
|
@@ -136,7 +136,6 @@
|
|
|
136
136
|
<auro-header level="3" id="presetValue">Preset the value</auro-header>
|
|
137
137
|
<p>In some cases it is necessary to preset the value of the component as part of the initial render.</p>
|
|
138
138
|
<p>When a value is preset, the matching option in the menu will be marked as both <code>active</code> and <code>selected</code>, and the input will display the corresponding text.</p>
|
|
139
|
-
<p>If a preset value matches an option marked <code>disabled</code> or <code>static</code>, the selection is rejected: <code>value</code> and <code>optionSelected</code> are cleared to <code>undefined</code>. A value that matches a <code>hidden</code> option is still applied.</p>
|
|
140
139
|
<p>If a preset value does not match any option, the component value is preserved and displayed in the input, but no menu option will be marked as selected. In suggestion mode, this value is treated as valid freeform input. In filter mode, the value will fail validation if the component is <code>required</code>.</p>
|
|
141
140
|
<auro-header level="3" id="autocomplete">Autocomplete</auro-header>
|
|
142
141
|
<p>The component supports the use of <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete">autocomplete</auro-hyperlink> configuration through HTML attributes.</p>
|