@aurodesignsystem-dev/auro-formkit 0.0.0-pr1424.2 → 0.0.0-pr1424.4
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/CHANGELOG.md +2 -2
- package/README.md +133 -183
- package/components/checkbox/demo/api.min.js +3 -3
- package/components/checkbox/demo/index.min.js +3 -3
- package/components/checkbox/dist/index.js +3 -3
- package/components/checkbox/dist/registered.js +3 -3
- package/components/combobox/demo/api.html +1 -0
- package/components/combobox/demo/api.js +3 -1
- package/components/combobox/demo/api.md +75 -0
- package/components/combobox/demo/api.min.js +314 -172
- package/components/combobox/demo/index.min.js +301 -171
- package/components/combobox/dist/comboboxKeyboardStrategy.d.ts +1 -1
- package/components/combobox/dist/index.js +291 -171
- package/components/combobox/dist/registered.js +291 -171
- package/components/counter/demo/api.html +3 -0
- package/components/counter/demo/api.js +4 -0
- package/components/counter/demo/api.md +130 -0
- package/components/counter/demo/api.min.js +320 -167
- package/components/counter/demo/index.min.js +300 -167
- package/components/counter/dist/counterGroupKeyboardStrategy.d.ts +3 -0
- package/components/counter/dist/index.js +300 -167
- package/components/counter/dist/registered.js +300 -167
- package/components/datepicker/demo/api.html +1 -0
- package/components/datepicker/demo/api.js +2 -0
- package/components/datepicker/demo/api.md +57 -0
- package/components/datepicker/demo/api.min.js +376 -171
- package/components/datepicker/demo/index.min.js +364 -171
- package/components/datepicker/dist/datepickerKeyboardStrategy.d.ts +3 -1
- package/components/datepicker/dist/index.js +364 -171
- package/components/datepicker/dist/registered.js +364 -171
- package/components/dropdown/demo/api.html +1 -0
- package/components/dropdown/demo/api.js +2 -0
- package/components/dropdown/demo/api.md +95 -0
- package/components/dropdown/demo/api.min.js +296 -165
- package/components/dropdown/demo/index.min.js +276 -165
- package/components/dropdown/dist/index.js +276 -165
- package/components/dropdown/dist/registered.js +276 -165
- package/components/form/demo/api.min.js +1254 -684
- package/components/form/demo/index.min.js +1254 -684
- package/components/input/demo/api.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/api.md +1 -0
- package/components/menu/demo/api.min.js +10 -0
- package/components/menu/demo/index.min.js +10 -0
- package/components/menu/dist/auro-menuoption.d.ts +9 -0
- package/components/menu/dist/index.js +10 -0
- package/components/menu/dist/registered.js +10 -0
- package/components/radio/demo/api.min.js +2 -2
- package/components/radio/demo/index.min.js +2 -2
- package/components/radio/dist/index.js +2 -2
- package/components/radio/dist/registered.js +2 -2
- package/components/select/demo/api.html +1 -0
- package/components/select/demo/api.js +2 -0
- package/components/select/demo/api.md +76 -0
- package/components/select/demo/api.min.js +306 -169
- package/components/select/demo/index.min.js +293 -169
- package/components/select/dist/index.js +283 -169
- package/components/select/dist/registered.js +283 -169
- package/custom-elements.json +48 -3
- package/package.json +5 -3
|
@@ -1301,10 +1301,19 @@ const comboboxKeyboardStrategy = {
|
|
|
1301
1301
|
}
|
|
1302
1302
|
},
|
|
1303
1303
|
|
|
1304
|
-
Escape(component,
|
|
1305
|
-
if (ctx.isExpanded
|
|
1304
|
+
Escape(component, evt, ctx) {
|
|
1305
|
+
if (!ctx.isExpanded) {
|
|
1306
|
+
return;
|
|
1307
|
+
}
|
|
1308
|
+
|
|
1309
|
+
// Prevent the Escape key from bubbling up and closing any parent dialogs / drawers / popups
|
|
1310
|
+
evt.stopPropagation();
|
|
1311
|
+
|
|
1312
|
+
if (ctx.isModal) {
|
|
1306
1313
|
component.setTriggerInputFocus();
|
|
1307
1314
|
}
|
|
1315
|
+
|
|
1316
|
+
component.hideBib();
|
|
1308
1317
|
},
|
|
1309
1318
|
|
|
1310
1319
|
Home(component, evt, ctx) {
|
|
@@ -3168,11 +3177,19 @@ class AuroFloatingUI {
|
|
|
3168
3177
|
* This ensures that the bib content has the same dimensions as the sizer element.
|
|
3169
3178
|
*/
|
|
3170
3179
|
mirrorSize() {
|
|
3180
|
+
const element = this.element;
|
|
3181
|
+
if (!element) {
|
|
3182
|
+
return;
|
|
3183
|
+
}
|
|
3184
|
+
|
|
3171
3185
|
// mirror the boxsize from bibSizer
|
|
3172
|
-
if (
|
|
3173
|
-
const sizerStyle = window.getComputedStyle(
|
|
3174
|
-
const bibContent =
|
|
3175
|
-
|
|
3186
|
+
if (element.bibSizer && element.matchWidth && element.bib?.shadowRoot) {
|
|
3187
|
+
const sizerStyle = window.getComputedStyle(element.bibSizer);
|
|
3188
|
+
const bibContent = element.bib.shadowRoot.querySelector(".container");
|
|
3189
|
+
if (!bibContent) {
|
|
3190
|
+
return;
|
|
3191
|
+
}
|
|
3192
|
+
|
|
3176
3193
|
if (sizerStyle.width !== "0px") {
|
|
3177
3194
|
bibContent.style.width = sizerStyle.width;
|
|
3178
3195
|
}
|
|
@@ -3194,9 +3211,14 @@ class AuroFloatingUI {
|
|
|
3194
3211
|
* @returns {String} The positioning strategy, one of 'fullscreen', 'floating', 'cover'.
|
|
3195
3212
|
*/
|
|
3196
3213
|
getPositioningStrategy() {
|
|
3214
|
+
const element = this.element;
|
|
3215
|
+
if (!element) {
|
|
3216
|
+
return "floating";
|
|
3217
|
+
}
|
|
3218
|
+
|
|
3197
3219
|
const breakpoint =
|
|
3198
|
-
|
|
3199
|
-
|
|
3220
|
+
element.bib?.mobileFullscreenBreakpoint ||
|
|
3221
|
+
element.floaterConfig?.fullscreenBreakpoint;
|
|
3200
3222
|
switch (this.behavior) {
|
|
3201
3223
|
case "tooltip":
|
|
3202
3224
|
return "floating";
|
|
@@ -3207,9 +3229,9 @@ class AuroFloatingUI {
|
|
|
3207
3229
|
`(max-width: ${breakpoint})`,
|
|
3208
3230
|
).matches;
|
|
3209
3231
|
|
|
3210
|
-
|
|
3232
|
+
element.expanded = smallerThanBreakpoint;
|
|
3211
3233
|
}
|
|
3212
|
-
if (
|
|
3234
|
+
if (element.nested) {
|
|
3213
3235
|
return "cover";
|
|
3214
3236
|
}
|
|
3215
3237
|
return "fullscreen";
|
|
@@ -3239,42 +3261,65 @@ class AuroFloatingUI {
|
|
|
3239
3261
|
* and applies the calculated position to the bib's style.
|
|
3240
3262
|
*/
|
|
3241
3263
|
position() {
|
|
3264
|
+
const element = this.element;
|
|
3265
|
+
if (!element) {
|
|
3266
|
+
return;
|
|
3267
|
+
}
|
|
3268
|
+
|
|
3242
3269
|
const strategy = this.getPositioningStrategy();
|
|
3243
3270
|
this.configureBibStrategy(strategy);
|
|
3244
3271
|
|
|
3245
3272
|
if (strategy === "floating") {
|
|
3273
|
+
if (!element.trigger || !element.bib) {
|
|
3274
|
+
return;
|
|
3275
|
+
}
|
|
3276
|
+
|
|
3246
3277
|
this.mirrorSize();
|
|
3247
3278
|
// Define the middlware for the floater configuration
|
|
3248
3279
|
const middleware = [
|
|
3249
|
-
offset(
|
|
3250
|
-
...(
|
|
3251
|
-
...(
|
|
3252
|
-
...(
|
|
3280
|
+
offset(element.floaterConfig?.offset || 0),
|
|
3281
|
+
...(element.floaterConfig?.shift ? [shift()] : []), // Add shift middleware if shift is enabled.
|
|
3282
|
+
...(element.floaterConfig?.flip ? [flip()] : []), // Add flip middleware if flip is enabled.
|
|
3283
|
+
...(element.floaterConfig?.autoPlacement ? [autoPlacement()] : []), // Add autoPlacement middleware if autoPlacement is enabled.
|
|
3253
3284
|
];
|
|
3254
3285
|
|
|
3255
3286
|
// Compute the position of the bib
|
|
3256
|
-
computePosition(
|
|
3257
|
-
strategy:
|
|
3258
|
-
placement:
|
|
3287
|
+
computePosition(element.trigger, element.bib, {
|
|
3288
|
+
strategy: element.floaterConfig?.strategy || "fixed",
|
|
3289
|
+
placement: element.floaterConfig?.placement,
|
|
3259
3290
|
middleware: middleware || [],
|
|
3260
3291
|
}).then(({ x, y }) => {
|
|
3261
3292
|
// eslint-disable-line id-length
|
|
3262
|
-
|
|
3293
|
+
const currentElement = this.element;
|
|
3294
|
+
if (!currentElement?.bib) {
|
|
3295
|
+
return;
|
|
3296
|
+
}
|
|
3297
|
+
|
|
3298
|
+
Object.assign(currentElement.bib.style, {
|
|
3263
3299
|
left: `${x}px`,
|
|
3264
3300
|
top: `${y}px`,
|
|
3265
3301
|
});
|
|
3266
3302
|
});
|
|
3267
3303
|
} else if (strategy === "cover") {
|
|
3304
|
+
if (!element.parentNode || !element.bib) {
|
|
3305
|
+
return;
|
|
3306
|
+
}
|
|
3307
|
+
|
|
3268
3308
|
// Compute the position of the bib
|
|
3269
|
-
computePosition(
|
|
3309
|
+
computePosition(element.parentNode, element.bib, {
|
|
3270
3310
|
placement: "bottom-start",
|
|
3271
3311
|
}).then(({ x, y }) => {
|
|
3272
3312
|
// eslint-disable-line id-length
|
|
3273
|
-
|
|
3313
|
+
const currentElement = this.element;
|
|
3314
|
+
if (!currentElement?.bib || !currentElement.parentNode) {
|
|
3315
|
+
return;
|
|
3316
|
+
}
|
|
3317
|
+
|
|
3318
|
+
Object.assign(currentElement.bib.style, {
|
|
3274
3319
|
left: `${x}px`,
|
|
3275
|
-
top: `${y -
|
|
3276
|
-
width: `${
|
|
3277
|
-
height: `${
|
|
3320
|
+
top: `${y - currentElement.parentNode.offsetHeight}px`,
|
|
3321
|
+
width: `${currentElement.parentNode.offsetWidth}px`,
|
|
3322
|
+
height: `${currentElement.parentNode.offsetHeight}px`,
|
|
3278
3323
|
});
|
|
3279
3324
|
});
|
|
3280
3325
|
}
|
|
@@ -3286,11 +3331,17 @@ class AuroFloatingUI {
|
|
|
3286
3331
|
* @param {Boolean} lock - If true, locks the body's scrolling functionlity; otherwise, unlock.
|
|
3287
3332
|
*/
|
|
3288
3333
|
lockScroll(lock = true) {
|
|
3334
|
+
const element = this.element;
|
|
3335
|
+
|
|
3289
3336
|
if (lock) {
|
|
3337
|
+
if (!element?.bib) {
|
|
3338
|
+
return;
|
|
3339
|
+
}
|
|
3340
|
+
|
|
3290
3341
|
document.body.style.overflow = "hidden"; // hide body's scrollbar
|
|
3291
3342
|
|
|
3292
3343
|
// Move `bib` by the amount the viewport is shifted to stay aligned in fullscreen.
|
|
3293
|
-
|
|
3344
|
+
element.bib.style.transform = `translateY(${window?.visualViewport?.offsetTop}px)`;
|
|
3294
3345
|
} else {
|
|
3295
3346
|
document.body.style.overflow = "";
|
|
3296
3347
|
}
|
|
@@ -3306,20 +3357,24 @@ class AuroFloatingUI {
|
|
|
3306
3357
|
* @param {string} strategy - The positioning strategy ('fullscreen' or 'floating').
|
|
3307
3358
|
*/
|
|
3308
3359
|
configureBibStrategy(value) {
|
|
3360
|
+
const element = this.element;
|
|
3361
|
+
if (!element?.bib) {
|
|
3362
|
+
return;
|
|
3363
|
+
}
|
|
3364
|
+
|
|
3309
3365
|
if (value === "fullscreen") {
|
|
3310
|
-
|
|
3366
|
+
element.isBibFullscreen = true;
|
|
3311
3367
|
// reset the prev position
|
|
3312
|
-
|
|
3313
|
-
|
|
3314
|
-
|
|
3315
|
-
|
|
3316
|
-
|
|
3317
|
-
|
|
3318
|
-
|
|
3368
|
+
element.bib.setAttribute("isfullscreen", "");
|
|
3369
|
+
element.bib.style.position = "fixed";
|
|
3370
|
+
element.bib.style.top = "0px";
|
|
3371
|
+
element.bib.style.left = "0px";
|
|
3372
|
+
element.bib.style.width = "";
|
|
3373
|
+
element.bib.style.height = "";
|
|
3374
|
+
element.style.contain = "";
|
|
3319
3375
|
|
|
3320
3376
|
// reset the size that was mirroring `size` css-part
|
|
3321
|
-
const bibContent =
|
|
3322
|
-
this.element.bib.shadowRoot.querySelector(".container");
|
|
3377
|
+
const bibContent = element.bib.shadowRoot?.querySelector(".container");
|
|
3323
3378
|
if (bibContent) {
|
|
3324
3379
|
bibContent.style.width = "";
|
|
3325
3380
|
bibContent.style.height = "";
|
|
@@ -3334,14 +3389,14 @@ class AuroFloatingUI {
|
|
|
3334
3389
|
}, 0);
|
|
3335
3390
|
}
|
|
3336
3391
|
|
|
3337
|
-
if (
|
|
3392
|
+
if (element.isPopoverVisible) {
|
|
3338
3393
|
this.lockScroll(true);
|
|
3339
3394
|
}
|
|
3340
3395
|
} else {
|
|
3341
|
-
|
|
3342
|
-
|
|
3343
|
-
|
|
3344
|
-
|
|
3396
|
+
element.bib.style.position = "";
|
|
3397
|
+
element.bib.removeAttribute("isfullscreen");
|
|
3398
|
+
element.isBibFullscreen = false;
|
|
3399
|
+
element.style.contain = "layout";
|
|
3345
3400
|
}
|
|
3346
3401
|
|
|
3347
3402
|
const isChanged = this.strategy && this.strategy !== value;
|
|
@@ -3359,16 +3414,21 @@ class AuroFloatingUI {
|
|
|
3359
3414
|
},
|
|
3360
3415
|
);
|
|
3361
3416
|
|
|
3362
|
-
|
|
3417
|
+
element.dispatchEvent(event);
|
|
3363
3418
|
}
|
|
3364
3419
|
}
|
|
3365
3420
|
|
|
3366
3421
|
updateState() {
|
|
3367
|
-
const
|
|
3422
|
+
const element = this.element;
|
|
3423
|
+
if (!element) {
|
|
3424
|
+
return;
|
|
3425
|
+
}
|
|
3426
|
+
|
|
3427
|
+
const isVisible = element.isPopoverVisible;
|
|
3368
3428
|
if (!isVisible) {
|
|
3369
3429
|
this.cleanupHideHandlers();
|
|
3370
3430
|
try {
|
|
3371
|
-
|
|
3431
|
+
element.cleanup?.();
|
|
3372
3432
|
} catch (error) {
|
|
3373
3433
|
// Do nothing
|
|
3374
3434
|
}
|
|
@@ -3384,28 +3444,30 @@ class AuroFloatingUI {
|
|
|
3384
3444
|
* If not, and if the bib isn't in fullscreen mode with focus lost, it hides the bib.
|
|
3385
3445
|
*/
|
|
3386
3446
|
handleFocusLoss() {
|
|
3447
|
+
const element = this.element;
|
|
3448
|
+
if (!element?.bib) {
|
|
3449
|
+
return;
|
|
3450
|
+
}
|
|
3451
|
+
|
|
3387
3452
|
// if mouse is being pressed, skip and let click event to handle the action
|
|
3388
3453
|
if (AuroFloatingUI.isMousePressed) {
|
|
3389
3454
|
return;
|
|
3390
3455
|
}
|
|
3391
3456
|
|
|
3392
3457
|
if (
|
|
3393
|
-
|
|
3394
|
-
|
|
3458
|
+
element.noHideOnThisFocusLoss ||
|
|
3459
|
+
element.hasAttribute("noHideOnThisFocusLoss")
|
|
3395
3460
|
) {
|
|
3396
3461
|
return;
|
|
3397
3462
|
}
|
|
3398
3463
|
|
|
3399
3464
|
// if focus is still inside of trigger or bib, do not close
|
|
3400
|
-
if (
|
|
3401
|
-
this.element.matches(":focus") ||
|
|
3402
|
-
this.element.matches(":focus-within")
|
|
3403
|
-
) {
|
|
3465
|
+
if (element.matches(":focus") || element.matches(":focus-within")) {
|
|
3404
3466
|
return;
|
|
3405
3467
|
}
|
|
3406
3468
|
|
|
3407
3469
|
// if fullscreen bib is in fullscreen mode, do not close
|
|
3408
|
-
if (
|
|
3470
|
+
if (element.bib.hasAttribute("isfullscreen")) {
|
|
3409
3471
|
return;
|
|
3410
3472
|
}
|
|
3411
3473
|
|
|
@@ -3413,23 +3475,33 @@ class AuroFloatingUI {
|
|
|
3413
3475
|
}
|
|
3414
3476
|
|
|
3415
3477
|
setupHideHandlers() {
|
|
3478
|
+
const element = this.element;
|
|
3479
|
+
if (!element) {
|
|
3480
|
+
return;
|
|
3481
|
+
}
|
|
3482
|
+
|
|
3416
3483
|
// Define handlers & store references
|
|
3417
3484
|
this.focusHandler = () => this.handleFocusLoss();
|
|
3418
3485
|
|
|
3419
3486
|
this.clickHandler = (evt) => {
|
|
3487
|
+
const element = this.element;
|
|
3488
|
+
if (!element?.bib) {
|
|
3489
|
+
return;
|
|
3490
|
+
}
|
|
3491
|
+
|
|
3420
3492
|
// When the bib is fullscreen (modal dialog), don't close on outside
|
|
3421
3493
|
// clicks. VoiceOver's synthetic click events inside a top-layer modal
|
|
3422
3494
|
// <dialog> may not include the bib in composedPath(), causing false
|
|
3423
3495
|
// positives. This mirrors the fullscreen guard in handleFocusLoss().
|
|
3424
|
-
if (
|
|
3496
|
+
if (element.bib.hasAttribute("isfullscreen")) {
|
|
3425
3497
|
return;
|
|
3426
3498
|
}
|
|
3427
3499
|
|
|
3428
3500
|
if (
|
|
3429
|
-
(!evt.composedPath().includes(
|
|
3430
|
-
!evt.composedPath().includes(
|
|
3431
|
-
(
|
|
3432
|
-
evt.composedPath().includes(
|
|
3501
|
+
(!evt.composedPath().includes(element.trigger) &&
|
|
3502
|
+
!evt.composedPath().includes(element.bib)) ||
|
|
3503
|
+
(element.bib.backdrop &&
|
|
3504
|
+
evt.composedPath().includes(element.bib.backdrop))
|
|
3433
3505
|
) {
|
|
3434
3506
|
const existedVisibleFloatingUI =
|
|
3435
3507
|
document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
|
|
@@ -3450,7 +3522,12 @@ class AuroFloatingUI {
|
|
|
3450
3522
|
|
|
3451
3523
|
// ESC key handler
|
|
3452
3524
|
this.keyDownHandler = (evt) => {
|
|
3453
|
-
|
|
3525
|
+
const element = this.element;
|
|
3526
|
+
if (!element) {
|
|
3527
|
+
return;
|
|
3528
|
+
}
|
|
3529
|
+
|
|
3530
|
+
if (evt.key === "Escape" && element.isPopoverVisible) {
|
|
3454
3531
|
const existedVisibleFloatingUI =
|
|
3455
3532
|
document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
|
|
3456
3533
|
if (
|
|
@@ -3507,6 +3584,10 @@ class AuroFloatingUI {
|
|
|
3507
3584
|
}
|
|
3508
3585
|
|
|
3509
3586
|
updateCurrentExpandedDropdown() {
|
|
3587
|
+
if (!this.element) {
|
|
3588
|
+
return;
|
|
3589
|
+
}
|
|
3590
|
+
|
|
3510
3591
|
// Close any other dropdown that is already open
|
|
3511
3592
|
const existedVisibleFloatingUI =
|
|
3512
3593
|
document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
|
|
@@ -3523,25 +3604,34 @@ class AuroFloatingUI {
|
|
|
3523
3604
|
}
|
|
3524
3605
|
|
|
3525
3606
|
showBib() {
|
|
3526
|
-
|
|
3607
|
+
const element = this.element;
|
|
3608
|
+
if (!element) {
|
|
3609
|
+
return;
|
|
3610
|
+
}
|
|
3611
|
+
|
|
3612
|
+
if (!element.bib || (!element.trigger && !element.parentNode)) {
|
|
3613
|
+
return;
|
|
3614
|
+
}
|
|
3615
|
+
|
|
3616
|
+
if (!element.disabled && !this.showing) {
|
|
3527
3617
|
this.updateCurrentExpandedDropdown();
|
|
3528
|
-
|
|
3618
|
+
element.triggerChevron?.setAttribute("data-expanded", true);
|
|
3529
3619
|
|
|
3530
3620
|
// prevent double showing: isPopovervisible gets first and showBib gets called later
|
|
3531
3621
|
if (!this.showing) {
|
|
3532
|
-
if (!
|
|
3622
|
+
if (!element.modal) {
|
|
3533
3623
|
this.setupHideHandlers();
|
|
3534
3624
|
}
|
|
3535
3625
|
this.showing = true;
|
|
3536
|
-
|
|
3626
|
+
element.isPopoverVisible = true;
|
|
3537
3627
|
this.position();
|
|
3538
3628
|
this.dispatchEventDropdownToggle();
|
|
3539
3629
|
}
|
|
3540
3630
|
|
|
3541
3631
|
// Setup auto update to handle resize and scroll
|
|
3542
|
-
|
|
3543
|
-
|
|
3544
|
-
|
|
3632
|
+
element.cleanup = autoUpdate(
|
|
3633
|
+
element.trigger || element.parentNode,
|
|
3634
|
+
element.bib,
|
|
3545
3635
|
() => {
|
|
3546
3636
|
this.position();
|
|
3547
3637
|
},
|
|
@@ -3554,22 +3644,27 @@ class AuroFloatingUI {
|
|
|
3554
3644
|
* @param {String} eventType - The event type that triggered the hiding action.
|
|
3555
3645
|
*/
|
|
3556
3646
|
hideBib(eventType = "unknown") {
|
|
3557
|
-
|
|
3647
|
+
const element = this.element;
|
|
3648
|
+
if (!element) {
|
|
3649
|
+
return;
|
|
3650
|
+
}
|
|
3651
|
+
|
|
3652
|
+
if (element.disabled) {
|
|
3558
3653
|
return;
|
|
3559
3654
|
}
|
|
3560
3655
|
|
|
3561
3656
|
// noToggle dropdowns should not close when the trigger is clicked (the
|
|
3562
3657
|
// "toggle" behavior), but they CAN still close via other interactions like
|
|
3563
3658
|
// Escape key or focus loss.
|
|
3564
|
-
if (
|
|
3659
|
+
if (element.noToggle && eventType === "click") {
|
|
3565
3660
|
return;
|
|
3566
3661
|
}
|
|
3567
3662
|
|
|
3568
3663
|
this.lockScroll(false);
|
|
3569
|
-
|
|
3664
|
+
element.triggerChevron?.removeAttribute("data-expanded");
|
|
3570
3665
|
|
|
3571
|
-
if (
|
|
3572
|
-
|
|
3666
|
+
if (element.isPopoverVisible) {
|
|
3667
|
+
element.isPopoverVisible = false;
|
|
3573
3668
|
}
|
|
3574
3669
|
if (this.showing) {
|
|
3575
3670
|
this.cleanupHideHandlers();
|
|
@@ -3589,6 +3684,11 @@ class AuroFloatingUI {
|
|
|
3589
3684
|
* @param {String} eventType - The event type that triggered the toggle action.
|
|
3590
3685
|
*/
|
|
3591
3686
|
dispatchEventDropdownToggle(eventType) {
|
|
3687
|
+
const element = this.element;
|
|
3688
|
+
if (!element) {
|
|
3689
|
+
return;
|
|
3690
|
+
}
|
|
3691
|
+
|
|
3592
3692
|
const event = new CustomEvent(
|
|
3593
3693
|
this.eventPrefix ? `${this.eventPrefix}-toggled` : "toggled",
|
|
3594
3694
|
{
|
|
@@ -3600,11 +3700,16 @@ class AuroFloatingUI {
|
|
|
3600
3700
|
},
|
|
3601
3701
|
);
|
|
3602
3702
|
|
|
3603
|
-
|
|
3703
|
+
element.dispatchEvent(event);
|
|
3604
3704
|
}
|
|
3605
3705
|
|
|
3606
3706
|
handleClick() {
|
|
3607
|
-
|
|
3707
|
+
const element = this.element;
|
|
3708
|
+
if (!element) {
|
|
3709
|
+
return;
|
|
3710
|
+
}
|
|
3711
|
+
|
|
3712
|
+
if (element.isPopoverVisible) {
|
|
3608
3713
|
this.hideBib("click");
|
|
3609
3714
|
} else {
|
|
3610
3715
|
this.showBib();
|
|
@@ -3615,63 +3720,66 @@ class AuroFloatingUI {
|
|
|
3615
3720
|
{
|
|
3616
3721
|
composed: true,
|
|
3617
3722
|
detail: {
|
|
3618
|
-
expanded:
|
|
3723
|
+
expanded: element.isPopoverVisible,
|
|
3619
3724
|
},
|
|
3620
3725
|
},
|
|
3621
3726
|
);
|
|
3622
3727
|
|
|
3623
|
-
|
|
3728
|
+
element.dispatchEvent(event);
|
|
3624
3729
|
}
|
|
3625
3730
|
|
|
3626
3731
|
handleEvent(event) {
|
|
3627
|
-
|
|
3628
|
-
|
|
3629
|
-
|
|
3630
|
-
|
|
3631
|
-
|
|
3632
|
-
|
|
3633
|
-
|
|
3634
|
-
|
|
3635
|
-
|
|
3636
|
-
|
|
3637
|
-
|
|
3638
|
-
|
|
3639
|
-
|
|
3640
|
-
|
|
3641
|
-
|
|
3642
|
-
|
|
3643
|
-
case "mouseenter":
|
|
3644
|
-
if (this.element.hoverToggle) {
|
|
3645
|
-
this.showBib();
|
|
3646
|
-
}
|
|
3647
|
-
break;
|
|
3648
|
-
case "mouseleave":
|
|
3649
|
-
if (this.element.hoverToggle) {
|
|
3650
|
-
this.hideBib("mouseleave");
|
|
3651
|
-
}
|
|
3652
|
-
break;
|
|
3653
|
-
case "focus":
|
|
3654
|
-
if (this.element.focusShow) {
|
|
3655
|
-
/*
|
|
3656
|
-
This needs to better handle clicking that gives focus -
|
|
3657
|
-
currently it shows and then immediately hides the bib
|
|
3658
|
-
*/
|
|
3659
|
-
this.showBib();
|
|
3660
|
-
}
|
|
3661
|
-
break;
|
|
3662
|
-
case "blur":
|
|
3663
|
-
// send this task 100ms later queue to
|
|
3664
|
-
// wait a frame in case focus moves within the floating element/bib
|
|
3665
|
-
setTimeout(() => this.handleFocusLoss(), 0);
|
|
3666
|
-
break;
|
|
3667
|
-
case "click":
|
|
3668
|
-
if (document.activeElement === document.body) {
|
|
3669
|
-
event.currentTarget.focus();
|
|
3670
|
-
}
|
|
3732
|
+
const element = this.element;
|
|
3733
|
+
if (!element || element.disableEventShow) {
|
|
3734
|
+
return;
|
|
3735
|
+
}
|
|
3736
|
+
|
|
3737
|
+
switch (event.type) {
|
|
3738
|
+
case "keydown": {
|
|
3739
|
+
// Support both Enter and Space keys for accessibility
|
|
3740
|
+
// Space is included as it's expected behavior for interactive elements
|
|
3741
|
+
|
|
3742
|
+
const origin = event.composedPath()[0];
|
|
3743
|
+
if (
|
|
3744
|
+
event.key === "Enter" ||
|
|
3745
|
+
(event.key === " " && (!origin || origin.tagName !== "INPUT"))
|
|
3746
|
+
) {
|
|
3747
|
+
event.preventDefault();
|
|
3671
3748
|
this.handleClick();
|
|
3672
|
-
|
|
3673
|
-
|
|
3749
|
+
}
|
|
3750
|
+
break;
|
|
3674
3751
|
}
|
|
3752
|
+
case "mouseenter":
|
|
3753
|
+
if (element.hoverToggle) {
|
|
3754
|
+
this.showBib();
|
|
3755
|
+
}
|
|
3756
|
+
break;
|
|
3757
|
+
case "mouseleave":
|
|
3758
|
+
if (element.hoverToggle) {
|
|
3759
|
+
this.hideBib("mouseleave");
|
|
3760
|
+
}
|
|
3761
|
+
break;
|
|
3762
|
+
case "focus":
|
|
3763
|
+
if (element.focusShow) {
|
|
3764
|
+
/*
|
|
3765
|
+
This needs to better handle clicking that gives focus -
|
|
3766
|
+
currently it shows and then immediately hides the bib
|
|
3767
|
+
*/
|
|
3768
|
+
this.showBib();
|
|
3769
|
+
}
|
|
3770
|
+
break;
|
|
3771
|
+
case "blur":
|
|
3772
|
+
// send this task 100ms later queue to
|
|
3773
|
+
// wait a frame in case focus moves within the floating element/bib
|
|
3774
|
+
setTimeout(() => this.handleFocusLoss(), 0);
|
|
3775
|
+
break;
|
|
3776
|
+
case "click":
|
|
3777
|
+
if (document.activeElement === document.body) {
|
|
3778
|
+
event.currentTarget.focus();
|
|
3779
|
+
}
|
|
3780
|
+
this.handleClick();
|
|
3781
|
+
break;
|
|
3782
|
+
// Do nothing
|
|
3675
3783
|
}
|
|
3676
3784
|
}
|
|
3677
3785
|
|
|
@@ -3682,6 +3790,11 @@ class AuroFloatingUI {
|
|
|
3682
3790
|
* This prevents the component itself from being focusable when the trigger element already handles focus.
|
|
3683
3791
|
*/
|
|
3684
3792
|
handleTriggerTabIndex() {
|
|
3793
|
+
const element = this.element;
|
|
3794
|
+
if (!element) {
|
|
3795
|
+
return;
|
|
3796
|
+
}
|
|
3797
|
+
|
|
3685
3798
|
const focusableElementSelectors = [
|
|
3686
3799
|
"a",
|
|
3687
3800
|
"button",
|
|
@@ -3694,7 +3807,7 @@ class AuroFloatingUI {
|
|
|
3694
3807
|
"auro-hyperlink",
|
|
3695
3808
|
];
|
|
3696
3809
|
|
|
3697
|
-
const triggerNode =
|
|
3810
|
+
const triggerNode = element.querySelectorAll('[slot="trigger"]')[0];
|
|
3698
3811
|
if (!triggerNode) {
|
|
3699
3812
|
return;
|
|
3700
3813
|
}
|
|
@@ -3703,13 +3816,13 @@ class AuroFloatingUI {
|
|
|
3703
3816
|
focusableElementSelectors.forEach((selector) => {
|
|
3704
3817
|
// Check if the trigger node element is focusable
|
|
3705
3818
|
if (triggerNodeTagName === selector) {
|
|
3706
|
-
|
|
3819
|
+
element.tabIndex = -1;
|
|
3707
3820
|
return;
|
|
3708
3821
|
}
|
|
3709
3822
|
|
|
3710
3823
|
// Check if any child is focusable
|
|
3711
3824
|
if (triggerNode.querySelector(selector)) {
|
|
3712
|
-
|
|
3825
|
+
element.tabIndex = -1;
|
|
3713
3826
|
}
|
|
3714
3827
|
});
|
|
3715
3828
|
}
|
|
@@ -3719,13 +3832,18 @@ class AuroFloatingUI {
|
|
|
3719
3832
|
* @param {*} eventPrefix
|
|
3720
3833
|
*/
|
|
3721
3834
|
regenerateBibId() {
|
|
3722
|
-
|
|
3835
|
+
const element = this.element;
|
|
3836
|
+
if (!element) {
|
|
3837
|
+
return;
|
|
3838
|
+
}
|
|
3839
|
+
|
|
3840
|
+
this.id = element.getAttribute("id");
|
|
3723
3841
|
if (!this.id) {
|
|
3724
3842
|
this.id = window.crypto.randomUUID();
|
|
3725
|
-
|
|
3843
|
+
element.setAttribute("id", this.id);
|
|
3726
3844
|
}
|
|
3727
3845
|
|
|
3728
|
-
|
|
3846
|
+
element.bib?.setAttribute("id", `${this.id}-floater-bib`);
|
|
3729
3847
|
}
|
|
3730
3848
|
|
|
3731
3849
|
configure(elem, eventPrefix, enableKeyboardHandling = true) {
|
|
@@ -3737,67 +3855,69 @@ class AuroFloatingUI {
|
|
|
3737
3855
|
this.element = elem;
|
|
3738
3856
|
}
|
|
3739
3857
|
|
|
3740
|
-
|
|
3741
|
-
|
|
3858
|
+
const element = this.element;
|
|
3859
|
+
if (!element) {
|
|
3860
|
+
return;
|
|
3742
3861
|
}
|
|
3743
3862
|
|
|
3744
|
-
if (this.element.
|
|
3863
|
+
if (this.behavior !== element.behavior) {
|
|
3864
|
+
this.behavior = element.behavior;
|
|
3865
|
+
}
|
|
3866
|
+
|
|
3867
|
+
if (element.trigger) {
|
|
3745
3868
|
this.disconnect();
|
|
3746
3869
|
}
|
|
3747
|
-
|
|
3748
|
-
|
|
3749
|
-
|
|
3750
|
-
|
|
3751
|
-
|
|
3752
|
-
|
|
3753
|
-
|
|
3754
|
-
|
|
3755
|
-
this.element.shadowRoot.querySelector("#showStateIcon");
|
|
3870
|
+
element.trigger =
|
|
3871
|
+
element.triggerElement ||
|
|
3872
|
+
element.shadowRoot?.querySelector("#trigger") ||
|
|
3873
|
+
element.trigger;
|
|
3874
|
+
element.bib = element.shadowRoot?.querySelector("#bib") || element.bib;
|
|
3875
|
+
element.bibSizer = element.shadowRoot?.querySelector("#bibSizer");
|
|
3876
|
+
element.triggerChevron =
|
|
3877
|
+
element.shadowRoot?.querySelector("#showStateIcon");
|
|
3756
3878
|
|
|
3757
|
-
if (
|
|
3758
|
-
|
|
3879
|
+
if (element.floaterConfig) {
|
|
3880
|
+
element.hoverToggle = element.floaterConfig.hoverToggle;
|
|
3759
3881
|
}
|
|
3760
3882
|
|
|
3761
3883
|
this.regenerateBibId();
|
|
3762
3884
|
this.handleTriggerTabIndex();
|
|
3763
3885
|
|
|
3764
3886
|
this.handleEvent = this.handleEvent.bind(this);
|
|
3765
|
-
if (
|
|
3887
|
+
if (element.trigger) {
|
|
3766
3888
|
if (this.enableKeyboardHandling) {
|
|
3767
|
-
|
|
3889
|
+
element.trigger.addEventListener("keydown", this.handleEvent);
|
|
3768
3890
|
}
|
|
3769
|
-
|
|
3770
|
-
|
|
3771
|
-
|
|
3772
|
-
|
|
3773
|
-
|
|
3891
|
+
element.trigger.addEventListener("click", this.handleEvent);
|
|
3892
|
+
element.trigger.addEventListener("mouseenter", this.handleEvent);
|
|
3893
|
+
element.trigger.addEventListener("mouseleave", this.handleEvent);
|
|
3894
|
+
element.trigger.addEventListener("focus", this.handleEvent);
|
|
3895
|
+
element.trigger.addEventListener("blur", this.handleEvent);
|
|
3774
3896
|
}
|
|
3775
3897
|
}
|
|
3776
3898
|
|
|
3777
3899
|
disconnect() {
|
|
3778
3900
|
this.cleanupHideHandlers();
|
|
3779
|
-
if (this.element) {
|
|
3780
|
-
this.element.cleanup?.();
|
|
3781
3901
|
|
|
3782
|
-
|
|
3783
|
-
|
|
3784
|
-
|
|
3902
|
+
const element = this.element;
|
|
3903
|
+
if (!element) {
|
|
3904
|
+
return;
|
|
3905
|
+
}
|
|
3785
3906
|
|
|
3786
|
-
|
|
3787
|
-
|
|
3788
|
-
|
|
3789
|
-
|
|
3790
|
-
|
|
3791
|
-
|
|
3792
|
-
|
|
3793
|
-
|
|
3794
|
-
|
|
3795
|
-
|
|
3796
|
-
|
|
3797
|
-
|
|
3798
|
-
|
|
3799
|
-
|
|
3800
|
-
}
|
|
3907
|
+
element.cleanup?.();
|
|
3908
|
+
|
|
3909
|
+
if (element.bib && element.shadowRoot) {
|
|
3910
|
+
element.shadowRoot.append(element.bib);
|
|
3911
|
+
}
|
|
3912
|
+
|
|
3913
|
+
// Remove event & keyboard listeners
|
|
3914
|
+
if (element.trigger) {
|
|
3915
|
+
element.trigger.removeEventListener("keydown", this.handleEvent);
|
|
3916
|
+
element.trigger.removeEventListener("click", this.handleEvent);
|
|
3917
|
+
element.trigger.removeEventListener("mouseenter", this.handleEvent);
|
|
3918
|
+
element.trigger.removeEventListener("mouseleave", this.handleEvent);
|
|
3919
|
+
element.trigger.removeEventListener("focus", this.handleEvent);
|
|
3920
|
+
element.trigger.removeEventListener("blur", this.handleEvent);
|
|
3801
3921
|
}
|
|
3802
3922
|
}
|
|
3803
3923
|
}
|
|
@@ -4925,7 +5045,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
|
|
|
4925
5045
|
}
|
|
4926
5046
|
};
|
|
4927
5047
|
|
|
4928
|
-
var formkitVersion$2 = '
|
|
5048
|
+
var formkitVersion$2 = '202604091759';
|
|
4929
5049
|
|
|
4930
5050
|
let AuroElement$2 = class AuroElement extends LitElement {
|
|
4931
5051
|
static get properties() {
|
|
@@ -5031,7 +5151,7 @@ let AuroElement$2 = class AuroElement extends LitElement {
|
|
|
5031
5151
|
}
|
|
5032
5152
|
};
|
|
5033
5153
|
|
|
5034
|
-
// Copyright (c) 2026 Alaska Airlines. All
|
|
5154
|
+
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
5035
5155
|
// See LICENSE in the project root for license information.
|
|
5036
5156
|
|
|
5037
5157
|
|
|
@@ -12674,7 +12794,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
12674
12794
|
}
|
|
12675
12795
|
};
|
|
12676
12796
|
|
|
12677
|
-
var formkitVersion$1 = '
|
|
12797
|
+
var formkitVersion$1 = '202604091759';
|
|
12678
12798
|
|
|
12679
12799
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
12680
12800
|
// See LICENSE in the project root for license information.
|
|
@@ -13739,7 +13859,7 @@ class AuroBibtemplate extends LitElement {
|
|
|
13739
13859
|
}
|
|
13740
13860
|
}
|
|
13741
13861
|
|
|
13742
|
-
var formkitVersion = '
|
|
13862
|
+
var formkitVersion = '202604091759';
|
|
13743
13863
|
|
|
13744
13864
|
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}`;
|
|
13745
13865
|
|
|
@@ -14079,7 +14199,7 @@ class AuroHelpText extends LitElement {
|
|
|
14079
14199
|
}
|
|
14080
14200
|
}
|
|
14081
14201
|
|
|
14082
|
-
// Copyright (c) 2026 Alaska Airlines. All
|
|
14202
|
+
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
14083
14203
|
// See LICENSE in the project root for license information.
|
|
14084
14204
|
|
|
14085
14205
|
|
|
@@ -14602,7 +14722,7 @@ class AuroCombobox extends AuroElement {
|
|
|
14602
14722
|
* @returns {void}
|
|
14603
14723
|
*/
|
|
14604
14724
|
activateFirstEnabledAvailableOption() {
|
|
14605
|
-
const firstEnabledOptionIndex = this.availableOptions.findIndex((opt) => !opt.disabled);
|
|
14725
|
+
const firstEnabledOptionIndex = this.availableOptions.findIndex((opt) => !opt.disabled && !opt.hasAttribute('nomatch'));
|
|
14606
14726
|
this.updateActiveOption(firstEnabledOptionIndex);
|
|
14607
14727
|
}
|
|
14608
14728
|
|
|
@@ -14616,7 +14736,7 @@ class AuroCombobox extends AuroElement {
|
|
|
14616
14736
|
|
|
14617
14737
|
// Work backwards through the available options array to find the last enabled option
|
|
14618
14738
|
for (let index = this.availableOptions.length - 1; index >= 0; index -= 1) {
|
|
14619
|
-
if (!this.availableOptions[index].disabled) {
|
|
14739
|
+
if (!this.availableOptions[index].disabled && !this.availableOptions[index].hasAttribute('nomatch')) {
|
|
14620
14740
|
lastEnabledOptionIndex = index;
|
|
14621
14741
|
break;
|
|
14622
14742
|
}
|