@aurodesignsystem-dev/auro-dialog 0.0.0-pr106.5 → 0.0.0-pr106.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/demo/auro-dialog.min.js +227 -200
- package/dist/{auro-dialog-CO6oy4Gv.js → auro-dialog-WVmAMJ0_.js} +43 -42
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -1
- package/dist/registered.js +1 -1
- package/package.json +3 -3
package/demo/auro-dialog.min.js
CHANGED
|
@@ -2265,6 +2265,36 @@ class AuroFloatingUI {
|
|
|
2265
2265
|
}
|
|
2266
2266
|
}
|
|
2267
2267
|
|
|
2268
|
+
static openingQueue = [];
|
|
2269
|
+
|
|
2270
|
+
/**
|
|
2271
|
+
* Returns the currently active floating UI instance that should be considered "on top".
|
|
2272
|
+
* Prefers any globally tracked expanded dropdown or floater, falling back to the last entry in the local opening queue.
|
|
2273
|
+
*
|
|
2274
|
+
* This getter first checks the global document references for a visible floating UI and returns it if found.
|
|
2275
|
+
* If the global reference is stale or not visible, it clears those references and instead returns the most recently opened instance from `openingQueue`, or `null` if none exist.
|
|
2276
|
+
*
|
|
2277
|
+
* Side effect: clears stale global refs so callers don't need a separate cleanup step.
|
|
2278
|
+
*/
|
|
2279
|
+
static get topOpeningFloatingUI() {
|
|
2280
|
+
const existedVisibleFloatingUI =
|
|
2281
|
+
document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
|
|
2282
|
+
if (
|
|
2283
|
+
existedVisibleFloatingUI &&
|
|
2284
|
+
existedVisibleFloatingUI.element.isPopoverVisible
|
|
2285
|
+
) {
|
|
2286
|
+
return existedVisibleFloatingUI;
|
|
2287
|
+
}
|
|
2288
|
+
|
|
2289
|
+
// clear existedVisibleFloatingUI in case it's not flushed well when it hidden by other reasons (e.g. noToggle + click)
|
|
2290
|
+
document.expandedAuroFormkitDropdown = null;
|
|
2291
|
+
document.expandedAuroFloater = null;
|
|
2292
|
+
|
|
2293
|
+
return AuroFloatingUI.openingQueue.length > 0
|
|
2294
|
+
? AuroFloatingUI.openingQueue[AuroFloatingUI.openingQueue.length - 1]
|
|
2295
|
+
: null;
|
|
2296
|
+
}
|
|
2297
|
+
|
|
2268
2298
|
constructor(element, behavior) {
|
|
2269
2299
|
this.element = element;
|
|
2270
2300
|
this.behavior = behavior;
|
|
@@ -2364,12 +2394,16 @@ class AuroFloatingUI {
|
|
|
2364
2394
|
`(max-width: ${breakpoint})`,
|
|
2365
2395
|
).matches;
|
|
2366
2396
|
|
|
2367
|
-
element.expanded = smallerThanBreakpoint;
|
|
2368
|
-
|
|
2369
|
-
|
|
2370
|
-
|
|
2397
|
+
this.element.expanded = smallerThanBreakpoint;
|
|
2398
|
+
|
|
2399
|
+
if (this.element.nested) {
|
|
2400
|
+
return "cover";
|
|
2401
|
+
}
|
|
2402
|
+
return smallerThanBreakpoint || this.element.modal
|
|
2403
|
+
? "fullscreen"
|
|
2404
|
+
: "dialog";
|
|
2371
2405
|
}
|
|
2372
|
-
return "
|
|
2406
|
+
return "dialog";
|
|
2373
2407
|
case "dropdown":
|
|
2374
2408
|
case undefined:
|
|
2375
2409
|
case null:
|
|
@@ -2468,17 +2502,111 @@ class AuroFloatingUI {
|
|
|
2468
2502
|
lockScroll(lock = true) {
|
|
2469
2503
|
const element = this.element;
|
|
2470
2504
|
|
|
2471
|
-
if (
|
|
2472
|
-
|
|
2473
|
-
|
|
2505
|
+
if (!element?.bib) {
|
|
2506
|
+
return;
|
|
2507
|
+
}
|
|
2508
|
+
|
|
2509
|
+
const dialog = (
|
|
2510
|
+
element.bib?.shadowRoot ||
|
|
2511
|
+
element.bib ||
|
|
2512
|
+
element
|
|
2513
|
+
).querySelector("dialog");
|
|
2514
|
+
if (dialog) {
|
|
2515
|
+
if (lock) {
|
|
2516
|
+
dialog.setAttribute("aria-modal", "true");
|
|
2517
|
+
} else {
|
|
2518
|
+
dialog.removeAttribute("aria-modal");
|
|
2474
2519
|
}
|
|
2520
|
+
}
|
|
2475
2521
|
|
|
2476
|
-
|
|
2522
|
+
if (lock) {
|
|
2523
|
+
if (!this._scrollLocked) {
|
|
2524
|
+
this._scrollLocked = true;
|
|
2525
|
+
this._savedScrollY = window.scrollY;
|
|
2526
|
+
this._savedScrollStyles = {
|
|
2527
|
+
rootScrollbarGutter: document.documentElement.style.scrollbarGutter,
|
|
2528
|
+
rootOverflow: document.documentElement.style.overflow,
|
|
2529
|
+
bodyOverflow: document.body.style.overflow,
|
|
2530
|
+
bodyPosition: document.body.style.position,
|
|
2531
|
+
bodyTop: document.body.style.top,
|
|
2532
|
+
bodyWidth: document.body.style.width,
|
|
2533
|
+
bibTransform: element?.bib?.style.transform,
|
|
2534
|
+
};
|
|
2535
|
+
document.documentElement.style.scrollbarGutter = "stable";
|
|
2536
|
+
document.documentElement.style.overflow = "hidden";
|
|
2537
|
+
document.body.style.overflow = "hidden";
|
|
2538
|
+
|
|
2539
|
+
// position:fixed is the only way to block VoiceOver three-finger swipe,
|
|
2540
|
+
// which bypasses both overflow:hidden and touchmove preventDefault.
|
|
2541
|
+
document.body.style.position = "fixed";
|
|
2542
|
+
document.body.style.top = `-${this._savedScrollY}px`;
|
|
2543
|
+
document.body.style.width = "100%";
|
|
2544
|
+
|
|
2545
|
+
// Move `bib` by the amount the viewport is shifted to stay aligned in fullscreen.
|
|
2546
|
+
if (element?.bib && window?.visualViewport?.offsetTop) {
|
|
2547
|
+
element.bib.style.transform = `translateY(${window?.visualViewport?.offsetTop}px)`;
|
|
2548
|
+
}
|
|
2477
2549
|
|
|
2478
|
-
|
|
2479
|
-
|
|
2550
|
+
this.lockTouchScroll(true);
|
|
2551
|
+
}
|
|
2480
2552
|
} else {
|
|
2481
|
-
|
|
2553
|
+
if (this._scrollLocked) {
|
|
2554
|
+
document.documentElement.style.scrollbarGutter =
|
|
2555
|
+
this._savedScrollStyles?.rootScrollbarGutter ?? "";
|
|
2556
|
+
document.documentElement.style.overflow =
|
|
2557
|
+
this._savedScrollStyles?.rootOverflow ?? "";
|
|
2558
|
+
document.body.style.overflow =
|
|
2559
|
+
this._savedScrollStyles?.bodyOverflow ?? "";
|
|
2560
|
+
document.body.style.position =
|
|
2561
|
+
this._savedScrollStyles?.bodyPosition ?? "";
|
|
2562
|
+
document.body.style.top = this._savedScrollStyles?.bodyTop ?? "";
|
|
2563
|
+
document.body.style.width = this._savedScrollStyles?.bodyWidth ?? "";
|
|
2564
|
+
if (element?.bib) {
|
|
2565
|
+
element.bib.style.transform =
|
|
2566
|
+
this._savedScrollStyles?.bibTransform ?? "";
|
|
2567
|
+
}
|
|
2568
|
+
window.scrollTo(0, this._savedScrollY || 0);
|
|
2569
|
+
this._savedScrollY = undefined;
|
|
2570
|
+
this._savedScrollStyles = undefined;
|
|
2571
|
+
this._scrollLocked = false;
|
|
2572
|
+
|
|
2573
|
+
this.lockTouchScroll(false);
|
|
2574
|
+
}
|
|
2575
|
+
}
|
|
2576
|
+
}
|
|
2577
|
+
|
|
2578
|
+
/**
|
|
2579
|
+
* Locks page-level touch scroll while bib is open.
|
|
2580
|
+
* Walks composedPath() so scrollable children inside the dialog still scroll.
|
|
2581
|
+
* @private
|
|
2582
|
+
*/
|
|
2583
|
+
lockTouchScroll(lock = true) {
|
|
2584
|
+
if (lock) {
|
|
2585
|
+
if (this._boundTouchMoveHandler) {
|
|
2586
|
+
return;
|
|
2587
|
+
}
|
|
2588
|
+
this._boundTouchMoveHandler = (e) => {
|
|
2589
|
+
const path = e.composedPath();
|
|
2590
|
+
const insideScrollable = path.some(
|
|
2591
|
+
(el) =>
|
|
2592
|
+
el !== document &&
|
|
2593
|
+
el !== document.documentElement &&
|
|
2594
|
+
el !== document.body &&
|
|
2595
|
+
(el.scrollHeight > el.clientHeight ||
|
|
2596
|
+
el.scrollWidth > el.clientWidth),
|
|
2597
|
+
);
|
|
2598
|
+
if (!insideScrollable) {
|
|
2599
|
+
e.preventDefault();
|
|
2600
|
+
}
|
|
2601
|
+
};
|
|
2602
|
+
document.addEventListener("touchmove", this._boundTouchMoveHandler, {
|
|
2603
|
+
passive: false,
|
|
2604
|
+
});
|
|
2605
|
+
} else if (this._boundTouchMoveHandler) {
|
|
2606
|
+
document.removeEventListener("touchmove", this._boundTouchMoveHandler, {
|
|
2607
|
+
passive: false,
|
|
2608
|
+
});
|
|
2609
|
+
this._boundTouchMoveHandler = undefined;
|
|
2482
2610
|
}
|
|
2483
2611
|
}
|
|
2484
2612
|
|
|
@@ -2497,7 +2625,7 @@ class AuroFloatingUI {
|
|
|
2497
2625
|
return;
|
|
2498
2626
|
}
|
|
2499
2627
|
|
|
2500
|
-
if (value === "fullscreen") {
|
|
2628
|
+
if (value === "fullscreen" || value === "dialog") {
|
|
2501
2629
|
element.isBibFullscreen = true;
|
|
2502
2630
|
// reset the prev position
|
|
2503
2631
|
element.bib.setAttribute("isfullscreen", "");
|
|
@@ -2525,7 +2653,7 @@ class AuroFloatingUI {
|
|
|
2525
2653
|
}
|
|
2526
2654
|
|
|
2527
2655
|
if (element.isPopoverVisible) {
|
|
2528
|
-
this.lockScroll(
|
|
2656
|
+
this.lockScroll(value === "fullscreen");
|
|
2529
2657
|
}
|
|
2530
2658
|
} else {
|
|
2531
2659
|
element.bib.style.position = "";
|
|
@@ -2798,6 +2926,12 @@ class AuroFloatingUI {
|
|
|
2798
2926
|
this.position();
|
|
2799
2927
|
},
|
|
2800
2928
|
);
|
|
2929
|
+
|
|
2930
|
+
const idx = AuroFloatingUI.openingQueue.indexOf(this);
|
|
2931
|
+
if (idx > -1) {
|
|
2932
|
+
AuroFloatingUI.openingQueue.splice(idx, 1);
|
|
2933
|
+
}
|
|
2934
|
+
AuroFloatingUI.openingQueue.push(this);
|
|
2801
2935
|
}
|
|
2802
2936
|
}
|
|
2803
2937
|
|
|
@@ -2838,6 +2972,10 @@ class AuroFloatingUI {
|
|
|
2838
2972
|
// Clearing it when hideBib is blocked (e.g. noToggle + click) corrupts
|
|
2839
2973
|
// the singleton state so other dropdowns can't detect this one is still open.
|
|
2840
2974
|
document.expandedAuroFloater = null;
|
|
2975
|
+
const idx = AuroFloatingUI.openingQueue.indexOf(this);
|
|
2976
|
+
if (idx > -1) {
|
|
2977
|
+
AuroFloatingUI.openingQueue.splice(idx, 1);
|
|
2978
|
+
}
|
|
2841
2979
|
}
|
|
2842
2980
|
|
|
2843
2981
|
/**
|
|
@@ -3169,10 +3307,10 @@ var buttonVersion = "12.3.2";
|
|
|
3169
3307
|
|
|
3170
3308
|
var iconVersion = "9.1.2";
|
|
3171
3309
|
|
|
3172
|
-
var colorCss = i$5
|
|
3310
|
+
var colorCss = i$5`dialog.container .wrapper{background:var(--ds-auro-dialog-container-color);color:var(--ds-auro-dialog-text-color)}dialog.container::backdrop{background:var(--ds-auro-dialog-overlay-open-background-color)}dialog.container:not([popover])::backdrop{background:var(--ds-auro-dialog-overlay-modal-background-color)}@media screen and (min-width:768px){dialog.container{box-shadow:var(--ds-auro-dialog-boxshadow-color)}}.dialog-header--action{border:2px solid transparent;border-radius:var(--ds-border-radius, .375rem);background-color:transparent}
|
|
3173
3311
|
`;
|
|
3174
3312
|
|
|
3175
|
-
var styleCss = i$5`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:host{--insetPaddingXl: 0 var(--ds-size-400, 2rem) var(--ds-size-400, 2rem) var(--ds-size-400, 2rem);--insetPaddingXxl: 0 var(--ds-size-600, 3rem) var(--ds-size-600, 3rem) var(--ds-size-600, 3rem);--insetPaddingXxxl: 0 var(--ds-size-800, 4rem) var(--ds-size-800, 4rem) var(--ds-size-800, 4rem)}[auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.dialogOverlay{position:fixed;z-index:-1;bottom:0;left:0;width:100%;height:100%;pointer-events:none}.dialogOverlay--open{z-index:var(--ds-depth-overlay);pointer-events:unset;transition:background .3s cubic-bezier(.4,0,.2,0)}.dialogOverlay--modal{z-index:var(--ds-depth-overlay);transition:background .3s cubic-bezier(.4,0,.5,0)}.dialog{position:fixed;z-index:-1;top:unset;right:0;bottom:-100%;left:0;box-sizing:border-box;display:flex;flex-direction:column;visibility:hidden;overflow:visible;width:calc(100% - var(--insetPaddingXl) - var(--insetPaddingXl));max-height:90%;padding:var(--insetPaddingXl);opacity:0;border:0;margin:0;max-width:none}.dialog::backdrop{background:transparent}.dialog{transition:opacity .3s ease-in-out,visibility .3s ease-in-out,bottom .3s ease-in-out}.dialog--open{z-index:var(--ds-depth-modal, 300);visibility:visible;bottom:0;opacity:1}@media screen and (min-width:768px){.dialog{top:10%;bottom:unset;left:0;right:0;max-width:80%;max-height:80%;margin:auto;padding:var(--insetPaddingXxxl);opacity:0;width:calc(100% - var(--insetPaddingXxxl) - var(--insetPaddingXxxl));height:auto;overflow:visible}.dialog--open{opacity:1}}@media screen and (min-width:1024px){.dialog{max-width:986px}}.dialog-footer{padding-top:var(--ds-size-400, 2rem)}@media screen and (min-width:768px){.dialog-footer ::slotted(*){display:flex;justify-content:flex-end}}.dialog-header{display:flex;align-items:flex-start;justify-content:space-between;padding-top:var(--ds-size-800, 4rem);margin-bottom:var(--ds-size-300, 1.5rem)}.dialog-header--action{margin:0;padding:0}.dialog-header--action:hover{cursor:pointer}.dialog-header .heading{flex:1;margin-block:0}.dialog-content{flex:1;overflow:auto;overscroll-behavior:contain;margin:calc(-1 * var(--ds-size-100));padding:var(--ds-size-100)}::slotted([slot=content]){position:relative}:host([unformatted]) .dialog-header--action{position:absolute;top:var(--ds-size-400, 2rem);bottom:unset;right:var(--ds-size-400, 2rem)}@media screen and (min-width:768px){:host([unformatted]) .dialog-header--action{top:var(--ds-size-800, 4rem);bottom:unset;right:var(--ds-size-800, 4rem)}}:host([sm]) .dialog{max-height:30%}@media screen and (min-width:768px){:host([sm]) .dialog{top:10%;bottom:unset;max-width:40%;max-height:80%;padding:var(--insetPaddingXxl)}}@media screen and (min-width:1024px){:host([sm]) .dialog{max-width:740px}}:host([md]) .dialog{max-height:50%}@media screen and (min-width:768px){:host([md]) .dialog{top:10%;bottom:unset;max-width:70%;max-height:80%}}@media screen and (min-width:1024px){:host([md]) .dialog{top:10%;bottom:unset;max-width:986px}}@media screen and (min-width:768px){:host([sm][lg]) .dialog,:host([md][lg]) .dialog{max-height:80%}}:host([sm][lg]) .dialog,:host([md][lg]) .dialog{max-height:90%}:host([unformatted]) .dialog{padding:0}
|
|
3313
|
+
var styleCss = i$5`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:host{--insetPaddingXl: 0 var(--ds-size-400, 2rem) var(--ds-size-400, 2rem) var(--ds-size-400, 2rem);--insetPaddingXxl: 0 var(--ds-size-600, 3rem) var(--ds-size-600, 3rem) var(--ds-size-600, 3rem);--insetPaddingXxxl: 0 var(--ds-size-800, 4rem) var(--ds-size-800, 4rem) var(--ds-size-800, 4rem)}[auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.dialogOverlay{position:fixed;z-index:-1;bottom:0;left:0;width:100%;height:100%;pointer-events:none}.dialogOverlay--open{z-index:var(--ds-depth-overlay);pointer-events:unset;transition:background .3s cubic-bezier(.4,0,.2,0)}.dialogOverlay--modal{z-index:var(--ds-depth-overlay);transition:background .3s cubic-bezier(.4,0,.5,0)}.bib{position:fixed;inset:0;visibility:hidden;overflow:hidden}.bib dialog.container{display:inline-block;width:100%;max-width:none;height:100%;max-height:none;padding:0;border-width:medium;border-style:none;border-color:currentcolor;border-image:initial;margin:0;background-color:transparent;outline:none;transform:translateZ(0);overflow:hidden}:host([open]) .bib{visibility:visible}.dialog{position:fixed;z-index:-1;top:unset;right:0;bottom:-100%;left:0;box-sizing:border-box;display:flex;flex-direction:column;overflow:visible;width:calc(100% - var(--insetPaddingXl) - var(--insetPaddingXl));max-height:90%;padding:var(--insetPaddingXl);opacity:0;border:0;margin:0;max-width:none;transition:opacity .3s ease-in-out,visibility .3s ease-in-out,bottom .3s ease-in-out}.dialog--open{z-index:var(--ds-depth-modal, 300);visibility:visible;bottom:0;opacity:1}@media screen and (min-width:768px){.dialog{top:10%;bottom:unset;left:0;right:0;max-width:80%;max-height:80%;margin:auto;padding:var(--insetPaddingXxxl);opacity:0;width:calc(100% - var(--insetPaddingXxxl) - var(--insetPaddingXxxl));height:auto;overflow:visible}.dialog--open{opacity:1}}@media screen and (min-width:1024px){.dialog{max-width:986px}}.dialog-footer{padding-top:var(--ds-size-400, 2rem)}@media screen and (min-width:768px){.dialog-footer ::slotted(*){display:flex;justify-content:flex-end}}.dialog-header{display:flex;align-items:flex-start;justify-content:space-between;padding-top:var(--ds-size-800, 4rem);margin-bottom:var(--ds-size-300, 1.5rem)}.dialog-header--action{margin:0;padding:0}.dialog-header--action:hover{cursor:pointer}.dialog-header .heading{flex:1;margin-block:0}.dialog-content{flex:1;overflow:auto;overscroll-behavior:contain;margin:calc(-1 * var(--ds-size-100));padding:var(--ds-size-100)}::slotted([slot=content]){position:relative}:host([unformatted]) .dialog-header--action{position:absolute;top:var(--ds-size-400, 2rem);bottom:unset;right:var(--ds-size-400, 2rem)}@media screen and (min-width:768px){:host([unformatted]) .dialog-header--action{top:var(--ds-size-800, 4rem);bottom:unset;right:var(--ds-size-800, 4rem)}}:host([sm]) .dialog{max-height:30%}@media screen and (min-width:768px){:host([sm]) .dialog{top:10%;bottom:unset;max-width:40%;max-height:80%;padding:var(--insetPaddingXxl)}}@media screen and (min-width:1024px){:host([sm]) .dialog{max-width:740px}}:host([md]) .dialog{max-height:50%}@media screen and (min-width:768px){:host([md]) .dialog{top:10%;bottom:unset;max-width:70%;max-height:80%}}@media screen and (min-width:1024px){:host([md]) .dialog{top:10%;bottom:unset;max-width:986px}}@media screen and (min-width:768px){:host([sm][lg]) .dialog,:host([md][lg]) .dialog{max-height:80%}}:host([sm][lg]) .dialog,:host([md][lg]) .dialog{max-height:90%}:host([unformatted]) .dialog{padding:0}
|
|
3176
3314
|
`;
|
|
3177
3315
|
|
|
3178
3316
|
var styleUnformattedCss = i$5`[unformatted] .unformattedWrapper{padding:var(--ds-size-400, 2rem)}@media screen and (min-width:768px){[unformatted] .unformattedWrapper{padding:var(--ds-size-800, 4rem);padding-top:var(--ds-size-400, 2rem)}}
|
|
@@ -3213,7 +3351,7 @@ class ComponentBase extends i$2 {
|
|
|
3213
3351
|
|
|
3214
3352
|
this.isPopoverVisible = false;
|
|
3215
3353
|
this.isBibFullscreen = false;
|
|
3216
|
-
this.floater = new AuroFloatingUI();
|
|
3354
|
+
this.floater = new AuroFloatingUI(this, 'dialog');
|
|
3217
3355
|
|
|
3218
3356
|
const versioning = new AuroDependencyVersioning();
|
|
3219
3357
|
|
|
@@ -3331,14 +3469,29 @@ class ComponentBase extends i$2 {
|
|
|
3331
3469
|
}
|
|
3332
3470
|
|
|
3333
3471
|
set open(value) {
|
|
3334
|
-
|
|
3472
|
+
if (value) {
|
|
3473
|
+
this.show();
|
|
3474
|
+
} else {
|
|
3475
|
+
this.hide();
|
|
3476
|
+
}
|
|
3335
3477
|
}
|
|
3336
3478
|
|
|
3337
3479
|
/**
|
|
3338
3480
|
* @ignore
|
|
3339
3481
|
*/
|
|
3340
3482
|
get floaterConfig() {
|
|
3341
|
-
|
|
3483
|
+
if (!ComponentBase._mobileBreakpointValue) {
|
|
3484
|
+
const docStyle = getComputedStyle(document.documentElement);
|
|
3485
|
+
ComponentBase._mobileBreakpointValue = docStyle.getPropertyValue(MOBILE_BREAKPOINT);
|
|
3486
|
+
}
|
|
3487
|
+
return {
|
|
3488
|
+
prefix: 'auroDialog',
|
|
3489
|
+
fullscreenBreakpoint: ComponentBase._mobileBreakpointValue,
|
|
3490
|
+
};
|
|
3491
|
+
}
|
|
3492
|
+
|
|
3493
|
+
get behavior() {
|
|
3494
|
+
return 'dialog';
|
|
3342
3495
|
}
|
|
3343
3496
|
|
|
3344
3497
|
firstUpdated() {
|
|
@@ -3354,9 +3507,7 @@ class ComponentBase extends i$2 {
|
|
|
3354
3507
|
slotWrapper.classList.remove("dialog-footer");
|
|
3355
3508
|
}
|
|
3356
3509
|
|
|
3357
|
-
this.floater.configure(this,
|
|
3358
|
-
// Dialog uses CSS positioning; override to prevent bib.shadowRoot crash in fullscreen strategy
|
|
3359
|
-
this.floater.position = () => {};
|
|
3510
|
+
this.floater.configure(this, this.floaterConfig.prefix);
|
|
3360
3511
|
|
|
3361
3512
|
// Forward FloatingUI toggle event to backward-compatible 'toggle' event
|
|
3362
3513
|
this.addEventListener('auroDialog-toggled', (event) => {
|
|
@@ -3371,7 +3522,7 @@ class ComponentBase extends i$2 {
|
|
|
3371
3522
|
this.dialog.addEventListener('cancel', (e) => {
|
|
3372
3523
|
e.preventDefault();
|
|
3373
3524
|
if (!this.modal) {
|
|
3374
|
-
this.
|
|
3525
|
+
this.hide();
|
|
3375
3526
|
}
|
|
3376
3527
|
});
|
|
3377
3528
|
|
|
@@ -3380,9 +3531,16 @@ class ComponentBase extends i$2 {
|
|
|
3380
3531
|
// the deprecated overlay div, so this listener replaces the overlay div's
|
|
3381
3532
|
// click handler for backdrop-area interactions.
|
|
3382
3533
|
this.dialog.addEventListener('click', (e) => {
|
|
3383
|
-
if (e.target
|
|
3384
|
-
|
|
3534
|
+
if (e.target !== this.dialog) {
|
|
3535
|
+
return;
|
|
3536
|
+
}
|
|
3537
|
+
if (this.modal) {
|
|
3538
|
+
return; // Modal drawers require an explicit action to close.
|
|
3385
3539
|
}
|
|
3540
|
+
if (AuroFloatingUI.topOpeningFloatingUI !== this.floater) {
|
|
3541
|
+
return; // there is another floatingUI that is currently visible, so ignore backdrop clicks on this one
|
|
3542
|
+
}
|
|
3543
|
+
this.hide();
|
|
3386
3544
|
});
|
|
3387
3545
|
}
|
|
3388
3546
|
|
|
@@ -3397,37 +3555,24 @@ class ComponentBase extends i$2 {
|
|
|
3397
3555
|
if (changedProperties.has('isPopoverVisible')) {
|
|
3398
3556
|
if (this.isPopoverVisible) {
|
|
3399
3557
|
if (!this.floater.showing) {
|
|
3400
|
-
this.
|
|
3558
|
+
this.show();
|
|
3401
3559
|
}
|
|
3402
|
-
this.openDialog();
|
|
3403
3560
|
} else {
|
|
3404
3561
|
if (this.floater.showing) {
|
|
3405
|
-
this.
|
|
3562
|
+
this.hide();
|
|
3406
3563
|
}
|
|
3407
|
-
this.closeDialog();
|
|
3408
3564
|
}
|
|
3409
3565
|
}
|
|
3410
3566
|
|
|
3411
3567
|
if (changedProperties.has('triggerElement')) {
|
|
3412
|
-
this.floater.configure(this,
|
|
3568
|
+
this.floater.configure(this, this.floaterConfig.prefix);
|
|
3413
3569
|
this.floater.position = () => {};
|
|
3414
3570
|
}
|
|
3415
3571
|
}
|
|
3416
3572
|
|
|
3417
|
-
connectedCallback() {
|
|
3418
|
-
super.connectedCallback();
|
|
3419
|
-
|
|
3420
|
-
if (!ComponentBase._mobileBreakpointValue) {
|
|
3421
|
-
const docStyle = getComputedStyle(document.documentElement);
|
|
3422
|
-
ComponentBase._mobileBreakpointValue = Number(docStyle.getPropertyValue(MOBILE_BREAKPOINT).replace('px', ''));
|
|
3423
|
-
}
|
|
3424
|
-
}
|
|
3425
|
-
|
|
3426
3573
|
disconnectedCallback() {
|
|
3427
3574
|
super.disconnectedCallback();
|
|
3428
3575
|
this.floater.disconnect();
|
|
3429
|
-
this._restorePageScroll();
|
|
3430
|
-
this._unlockTouchScroll();
|
|
3431
3576
|
clearTimeout(this._resizeTimer);
|
|
3432
3577
|
}
|
|
3433
3578
|
|
|
@@ -3439,32 +3584,10 @@ class ComponentBase extends i$2 {
|
|
|
3439
3584
|
this.defaultTrigger = document.activeElement;
|
|
3440
3585
|
|
|
3441
3586
|
if (this.modal) {
|
|
3442
|
-
this.
|
|
3587
|
+
this.floater.lockScroll();
|
|
3443
3588
|
this.dialog.showModal();
|
|
3444
|
-
this._lockTouchScroll();
|
|
3445
3589
|
} else {
|
|
3446
3590
|
this.dialog.showPopover();
|
|
3447
|
-
|
|
3448
|
-
// lock page when dialog is full-bleed on mobile to prevent background scroll,
|
|
3449
|
-
// but allow scroll when dialog is a smaller popover that doesn't cover the entire viewport.
|
|
3450
|
-
const bWidth = document.body.offsetWidth;
|
|
3451
|
-
if (bWidth < ComponentBase._mobileBreakpointValue) {
|
|
3452
|
-
this._lockPageScroll();
|
|
3453
|
-
}
|
|
3454
|
-
|
|
3455
|
-
this._boundResizeHandler = () => {
|
|
3456
|
-
clearTimeout(this._resizeTimer);
|
|
3457
|
-
this._resizeTimer = setTimeout(() => {
|
|
3458
|
-
const bWidth = document.body.offsetWidth;
|
|
3459
|
-
if (bWidth < ComponentBase._mobileBreakpointValue) {
|
|
3460
|
-
if (!this._scrollLocked) {
|
|
3461
|
-
this._lockPageScroll();
|
|
3462
|
-
}
|
|
3463
|
-
} else {
|
|
3464
|
-
this._restorePageScroll();
|
|
3465
|
-
}
|
|
3466
|
-
}, 50);
|
|
3467
|
-
};
|
|
3468
3591
|
window.addEventListener('resize', this._boundResizeHandler);
|
|
3469
3592
|
}
|
|
3470
3593
|
|
|
@@ -3487,9 +3610,6 @@ class ComponentBase extends i$2 {
|
|
|
3487
3610
|
* @returns {void}
|
|
3488
3611
|
*/
|
|
3489
3612
|
closeDialog() {
|
|
3490
|
-
this._restorePageScroll();
|
|
3491
|
-
this._unlockTouchScroll();
|
|
3492
|
-
|
|
3493
3613
|
if (this.focusTrap) {
|
|
3494
3614
|
this.focusTrap.disconnect();
|
|
3495
3615
|
this.focusTrap = undefined;
|
|
@@ -3520,78 +3640,6 @@ class ComponentBase extends i$2 {
|
|
|
3520
3640
|
}
|
|
3521
3641
|
}
|
|
3522
3642
|
|
|
3523
|
-
/**
|
|
3524
|
-
* Restores page scroll locked during openDialog().
|
|
3525
|
-
* Safe to call multiple times — only acts when a lock is active.
|
|
3526
|
-
* @private
|
|
3527
|
-
*/
|
|
3528
|
-
_restorePageScroll() {
|
|
3529
|
-
if (this._scrollLocked) {
|
|
3530
|
-
document.body.style.position = '';
|
|
3531
|
-
document.body.style.top = '';
|
|
3532
|
-
document.body.style.width = '';
|
|
3533
|
-
document.body.style.overflow = '';
|
|
3534
|
-
document.documentElement.style.overflow = '';
|
|
3535
|
-
window.scrollTo(0, this._savedScrollY || 0);
|
|
3536
|
-
this._savedScrollY = undefined;
|
|
3537
|
-
this._scrollLocked = false;
|
|
3538
|
-
}
|
|
3539
|
-
}
|
|
3540
|
-
|
|
3541
|
-
/**
|
|
3542
|
-
* Locks page scroll by applying styles to the body element.
|
|
3543
|
-
* This is necessary for modal dialogs to prevent background scrolling, including on mobile devices and assistive technologies.
|
|
3544
|
-
* The scroll position is saved and restored when the dialog is closed to prevent content jump.
|
|
3545
|
-
* @private
|
|
3546
|
-
*/
|
|
3547
|
-
_lockPageScroll() {
|
|
3548
|
-
if (!this._scrollLocked) {
|
|
3549
|
-
// Dialog spec: showModal() for native top-layer + focus containment + ::backdrop.
|
|
3550
|
-
// Lock page scroll for the entire duration the modal is open.
|
|
3551
|
-
// position:fixed on <body> is the only reliable way to prevent all scroll
|
|
3552
|
-
// vectors including VoiceOver three-finger swipe.
|
|
3553
|
-
this._savedScrollY = window.scrollY;
|
|
3554
|
-
document.body.style.position = 'fixed';
|
|
3555
|
-
document.body.style.top = `-${this._savedScrollY}px`;
|
|
3556
|
-
document.body.style.width = '100%';
|
|
3557
|
-
document.body.style.overflow = 'hidden';
|
|
3558
|
-
document.documentElement.style.overflow = 'hidden';
|
|
3559
|
-
this._scrollLocked = true;
|
|
3560
|
-
}
|
|
3561
|
-
}
|
|
3562
|
-
|
|
3563
|
-
/**
|
|
3564
|
-
* Locks touch scroll while the modal is open.
|
|
3565
|
-
* Walks composedPath() so scrollable children inside the dialog still scroll.
|
|
3566
|
-
* @private
|
|
3567
|
-
*/
|
|
3568
|
-
_lockTouchScroll() {
|
|
3569
|
-
if (this._boundTouchMoveHandler) {
|
|
3570
|
-
return;
|
|
3571
|
-
}
|
|
3572
|
-
this._boundTouchMoveHandler = (e) => {
|
|
3573
|
-
const path = e.composedPath();
|
|
3574
|
-
const insideScrollable = path.some(
|
|
3575
|
-
(el) => el !== document && el.scrollHeight > el.clientHeight,
|
|
3576
|
-
);
|
|
3577
|
-
if (!insideScrollable) {
|
|
3578
|
-
e.preventDefault();
|
|
3579
|
-
}
|
|
3580
|
-
};
|
|
3581
|
-
document.addEventListener('touchmove', this._boundTouchMoveHandler, { passive: false });
|
|
3582
|
-
}
|
|
3583
|
-
|
|
3584
|
-
/**
|
|
3585
|
-
* Removes the touch scroll lock.
|
|
3586
|
-
* @private
|
|
3587
|
-
*/
|
|
3588
|
-
_unlockTouchScroll() {
|
|
3589
|
-
if (this._boundTouchMoveHandler) {
|
|
3590
|
-
document.removeEventListener('touchmove', this._boundTouchMoveHandler, { passive: false });
|
|
3591
|
-
this._boundTouchMoveHandler = undefined;
|
|
3592
|
-
}
|
|
3593
|
-
}
|
|
3594
|
-
|
|
3595
3643
|
/**
|
|
3596
3644
|
* @private
|
|
3597
3645
|
* @returns {void}
|
|
@@ -3605,37 +3653,12 @@ class ComponentBase extends i$2 {
|
|
|
3605
3653
|
this.dispatchEvent(toggleEvent);
|
|
3606
3654
|
}
|
|
3607
3655
|
|
|
3608
|
-
/**
|
|
3609
|
-
* @private
|
|
3610
|
-
* @returns {void}
|
|
3611
|
-
*/
|
|
3612
|
-
handleOverlayClick() {
|
|
3613
|
-
if (this.isPopoverVisible && !this.modal) {
|
|
3614
|
-
const dropdownComponents = [
|
|
3615
|
-
...this.querySelectorAll(
|
|
3616
|
-
"auro-combobox, [auro-combobox], auro-select, [auro-select], auro-datepicker, [auro-datepicker]",
|
|
3617
|
-
),
|
|
3618
|
-
];
|
|
3619
|
-
const dropdowns = [
|
|
3620
|
-
...this.querySelectorAll("auro-dropdown, [auro-dropdown]"),
|
|
3621
|
-
...dropdownComponents.map((comp) => comp.dropdown),
|
|
3622
|
-
];
|
|
3623
|
-
|
|
3624
|
-
const isAnyDropdownOpen = dropdowns.some(
|
|
3625
|
-
(dropdown) => dropdown.isPopoverVisible,
|
|
3626
|
-
);
|
|
3627
|
-
if (!isAnyDropdownOpen) {
|
|
3628
|
-
this.floater.hideBib();
|
|
3629
|
-
}
|
|
3630
|
-
}
|
|
3631
|
-
}
|
|
3632
|
-
|
|
3633
3656
|
/**
|
|
3634
3657
|
* @private
|
|
3635
3658
|
* @returns {void}
|
|
3636
3659
|
*/
|
|
3637
3660
|
handleCloseButtonClick() {
|
|
3638
|
-
this.
|
|
3661
|
+
this.hide();
|
|
3639
3662
|
}
|
|
3640
3663
|
|
|
3641
3664
|
/**
|
|
@@ -3655,6 +3678,7 @@ class ComponentBase extends i$2 {
|
|
|
3655
3678
|
*/
|
|
3656
3679
|
show() {
|
|
3657
3680
|
this.floater.showBib();
|
|
3681
|
+
this.openDialog();
|
|
3658
3682
|
}
|
|
3659
3683
|
|
|
3660
3684
|
/**
|
|
@@ -3663,6 +3687,7 @@ class ComponentBase extends i$2 {
|
|
|
3663
3687
|
*/
|
|
3664
3688
|
hide() {
|
|
3665
3689
|
this.floater.hideBib();
|
|
3690
|
+
this.closeDialog();
|
|
3666
3691
|
}
|
|
3667
3692
|
|
|
3668
3693
|
static get styles() {
|
|
@@ -3700,8 +3725,9 @@ getCloseButton() {
|
|
|
3700
3725
|
"dialogOverlay--open": this.isPopoverVisible,
|
|
3701
3726
|
util_displayHidden: !this.isPopoverVisible,
|
|
3702
3727
|
};
|
|
3703
|
-
const
|
|
3728
|
+
const wrapperClasses = {
|
|
3704
3729
|
dialog: true,
|
|
3730
|
+
wrapper: true,
|
|
3705
3731
|
"dialog--open": this.isPopoverVisible,
|
|
3706
3732
|
};
|
|
3707
3733
|
|
|
@@ -3709,43 +3735,44 @@ getCloseButton() {
|
|
|
3709
3735
|
<!-- Hidden slot for close button aria-label -->
|
|
3710
3736
|
<slot name="ariaLabel.dialog.close" hidden @slotchange=${this.requestUpdate}></slot>
|
|
3711
3737
|
|
|
3712
|
-
<!-- FloatingUI bib anchor for lifecycle management (ESC, click-outside, state) -->
|
|
3713
|
-
<div id="bib" aria-hidden="true"></div>
|
|
3714
|
-
|
|
3715
3738
|
<!-- @deprecated dialog-overlay: backdrop styling is now provided by ::backdrop on the dialog element.
|
|
3716
3739
|
Retained for backward compatibility; part="dialog-overlay" remains available for custom CSS. -->
|
|
3717
|
-
<div class="${e(classes)}" id="dialog-overlay" part="dialog-overlay"
|
|
3718
|
-
|
|
3719
|
-
<
|
|
3720
|
-
|
|
3721
|
-
|
|
3722
|
-
|
|
3723
|
-
|
|
3724
|
-
|
|
3725
|
-
|
|
3726
|
-
|
|
3727
|
-
|
|
3728
|
-
this.
|
|
3729
|
-
|
|
3730
|
-
|
|
3731
|
-
|
|
3732
|
-
|
|
3733
|
-
|
|
3734
|
-
|
|
3735
|
-
|
|
3736
|
-
<
|
|
3737
|
-
|
|
3738
|
-
|
|
3739
|
-
|
|
3740
|
-
|
|
3741
|
-
|
|
3742
|
-
|
|
3743
|
-
|
|
3744
|
-
|
|
3740
|
+
<div class="${e(classes)}" id="dialog-overlay" part="dialog-overlay"></div>
|
|
3741
|
+
|
|
3742
|
+
<div id="bib" class="bib">
|
|
3743
|
+
<dialog
|
|
3744
|
+
id="dialog"
|
|
3745
|
+
popover="${o$1(this.modal ? undefined : 'manual')}"
|
|
3746
|
+
class="container"
|
|
3747
|
+
aria-labelledby="dialog-header"
|
|
3748
|
+
aria-describedby="dialog-content">
|
|
3749
|
+
<div class="${e(wrapperClasses)}"
|
|
3750
|
+
part="dialog"
|
|
3751
|
+
@transitionend="${this.onDialogTransitionEnd}">
|
|
3752
|
+
${
|
|
3753
|
+
this.unformatted
|
|
3754
|
+
? u$2`
|
|
3755
|
+
<slot name="content"></slot>
|
|
3756
|
+
${this.getCloseButton()}
|
|
3757
|
+
`
|
|
3758
|
+
: u$2`
|
|
3759
|
+
<div class="dialog-header" part="dialog-header">
|
|
3760
|
+
<h1 class="heading heading-lg util_stackMarginNone--top" id="dialog-header">
|
|
3761
|
+
<slot name="header">Default header...</slot>
|
|
3762
|
+
</h1>
|
|
3763
|
+
${this.getCloseButton()}
|
|
3764
|
+
</div>
|
|
3765
|
+
<div class="dialog-content body-default" part="dialog-content">
|
|
3766
|
+
<slot name="content"></slot>
|
|
3767
|
+
</div>
|
|
3768
|
+
<div class="dialog-footer" id="footerWrapper" part="dialog-footer">
|
|
3769
|
+
<slot name="footer" id="footer"></slot>
|
|
3770
|
+
</div>
|
|
3771
|
+
`
|
|
3772
|
+
}
|
|
3745
3773
|
</div>
|
|
3746
|
-
|
|
3747
|
-
|
|
3748
|
-
</dialog>
|
|
3774
|
+
</dialog>
|
|
3775
|
+
</div>
|
|
3749
3776
|
`;
|
|
3750
3777
|
}
|
|
3751
3778
|
}
|