@aurodesignsystem-dev/auro-dialog 0.0.0-pr106.4 → 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 +228 -198
- package/dist/{auro-dialog-DMisOOkB.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,35 +3555,25 @@ 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();
|
|
3576
|
+
clearTimeout(this._resizeTimer);
|
|
3429
3577
|
}
|
|
3430
3578
|
|
|
3431
3579
|
/**
|
|
@@ -3436,32 +3584,10 @@ class ComponentBase extends i$2 {
|
|
|
3436
3584
|
this.defaultTrigger = document.activeElement;
|
|
3437
3585
|
|
|
3438
3586
|
if (this.modal) {
|
|
3439
|
-
this.
|
|
3587
|
+
this.floater.lockScroll();
|
|
3440
3588
|
this.dialog.showModal();
|
|
3441
|
-
this._lockTouchScroll();
|
|
3442
3589
|
} else {
|
|
3443
3590
|
this.dialog.showPopover();
|
|
3444
|
-
|
|
3445
|
-
// lock page when dialog is full-bleed on mobile to prevent background scroll,
|
|
3446
|
-
// but allow scroll when dialog is a smaller popover that doesn't cover the entire viewport.
|
|
3447
|
-
const bWidth = document.body.offsetWidth;
|
|
3448
|
-
if (bWidth < ComponentBase._mobileBreakpointValue) {
|
|
3449
|
-
this._lockPageScroll();
|
|
3450
|
-
}
|
|
3451
|
-
|
|
3452
|
-
this._boundResizeHandler = () => {
|
|
3453
|
-
clearTimeout(this._resizeTimer);
|
|
3454
|
-
this._resizeTimer = setTimeout(() => {
|
|
3455
|
-
const bWidth = document.body.offsetWidth;
|
|
3456
|
-
if (bWidth < ComponentBase._mobileBreakpointValue) {
|
|
3457
|
-
if (!this._scrollLocked) {
|
|
3458
|
-
this._lockPageScroll();
|
|
3459
|
-
}
|
|
3460
|
-
} else {
|
|
3461
|
-
this._restorePageScroll();
|
|
3462
|
-
}
|
|
3463
|
-
}, 50);
|
|
3464
|
-
};
|
|
3465
3591
|
window.addEventListener('resize', this._boundResizeHandler);
|
|
3466
3592
|
}
|
|
3467
3593
|
|
|
@@ -3484,9 +3610,6 @@ class ComponentBase extends i$2 {
|
|
|
3484
3610
|
* @returns {void}
|
|
3485
3611
|
*/
|
|
3486
3612
|
closeDialog() {
|
|
3487
|
-
this._restorePageScroll();
|
|
3488
|
-
this._unlockTouchScroll();
|
|
3489
|
-
|
|
3490
3613
|
if (this.focusTrap) {
|
|
3491
3614
|
this.focusTrap.disconnect();
|
|
3492
3615
|
this.focusTrap = undefined;
|
|
@@ -3517,78 +3640,6 @@ class ComponentBase extends i$2 {
|
|
|
3517
3640
|
}
|
|
3518
3641
|
}
|
|
3519
3642
|
|
|
3520
|
-
/**
|
|
3521
|
-
* Restores page scroll locked during openDialog().
|
|
3522
|
-
* Safe to call multiple times — only acts when a lock is active.
|
|
3523
|
-
* @private
|
|
3524
|
-
*/
|
|
3525
|
-
_restorePageScroll() {
|
|
3526
|
-
if (this._scrollLocked) {
|
|
3527
|
-
document.body.style.position = '';
|
|
3528
|
-
document.body.style.top = '';
|
|
3529
|
-
document.body.style.width = '';
|
|
3530
|
-
document.body.style.overflow = '';
|
|
3531
|
-
document.documentElement.style.overflow = '';
|
|
3532
|
-
window.scrollTo(0, this._savedScrollY || 0);
|
|
3533
|
-
this._savedScrollY = undefined;
|
|
3534
|
-
this._scrollLocked = false;
|
|
3535
|
-
}
|
|
3536
|
-
}
|
|
3537
|
-
|
|
3538
|
-
/**
|
|
3539
|
-
* Locks page scroll by applying styles to the body element.
|
|
3540
|
-
* This is necessary for modal dialogs to prevent background scrolling, including on mobile devices and assistive technologies.
|
|
3541
|
-
* The scroll position is saved and restored when the dialog is closed to prevent content jump.
|
|
3542
|
-
* @private
|
|
3543
|
-
*/
|
|
3544
|
-
_lockPageScroll() {
|
|
3545
|
-
if (!this._scrollLocked) {
|
|
3546
|
-
// Dialog spec: showModal() for native top-layer + focus containment + ::backdrop.
|
|
3547
|
-
// Lock page scroll for the entire duration the modal is open.
|
|
3548
|
-
// position:fixed on <body> is the only reliable way to prevent all scroll
|
|
3549
|
-
// vectors including VoiceOver three-finger swipe.
|
|
3550
|
-
this._savedScrollY = window.scrollY;
|
|
3551
|
-
document.body.style.position = 'fixed';
|
|
3552
|
-
document.body.style.top = `-${this._savedScrollY}px`;
|
|
3553
|
-
document.body.style.width = '100%';
|
|
3554
|
-
document.body.style.overflow = 'hidden';
|
|
3555
|
-
document.documentElement.style.overflow = 'hidden';
|
|
3556
|
-
this._scrollLocked = true;
|
|
3557
|
-
}
|
|
3558
|
-
}
|
|
3559
|
-
|
|
3560
|
-
/**
|
|
3561
|
-
* Locks touch scroll while the modal is open.
|
|
3562
|
-
* Walks composedPath() so scrollable children inside the dialog still scroll.
|
|
3563
|
-
* @private
|
|
3564
|
-
*/
|
|
3565
|
-
_lockTouchScroll() {
|
|
3566
|
-
if (this._boundTouchMoveHandler) {
|
|
3567
|
-
return;
|
|
3568
|
-
}
|
|
3569
|
-
this._boundTouchMoveHandler = (e) => {
|
|
3570
|
-
const path = e.composedPath();
|
|
3571
|
-
const insideScrollable = path.some(
|
|
3572
|
-
(el) => el !== document && el.scrollHeight > el.clientHeight,
|
|
3573
|
-
);
|
|
3574
|
-
if (!insideScrollable) {
|
|
3575
|
-
e.preventDefault();
|
|
3576
|
-
}
|
|
3577
|
-
};
|
|
3578
|
-
document.addEventListener('touchmove', this._boundTouchMoveHandler, { passive: false });
|
|
3579
|
-
}
|
|
3580
|
-
|
|
3581
|
-
/**
|
|
3582
|
-
* Removes the touch scroll lock.
|
|
3583
|
-
* @private
|
|
3584
|
-
*/
|
|
3585
|
-
_unlockTouchScroll() {
|
|
3586
|
-
if (this._boundTouchMoveHandler) {
|
|
3587
|
-
document.removeEventListener('touchmove', this._boundTouchMoveHandler, { passive: false });
|
|
3588
|
-
this._boundTouchMoveHandler = undefined;
|
|
3589
|
-
}
|
|
3590
|
-
}
|
|
3591
|
-
|
|
3592
3643
|
/**
|
|
3593
3644
|
* @private
|
|
3594
3645
|
* @returns {void}
|
|
@@ -3602,37 +3653,12 @@ class ComponentBase extends i$2 {
|
|
|
3602
3653
|
this.dispatchEvent(toggleEvent);
|
|
3603
3654
|
}
|
|
3604
3655
|
|
|
3605
|
-
/**
|
|
3606
|
-
* @private
|
|
3607
|
-
* @returns {void}
|
|
3608
|
-
*/
|
|
3609
|
-
handleOverlayClick() {
|
|
3610
|
-
if (this.isPopoverVisible && !this.modal) {
|
|
3611
|
-
const dropdownComponents = [
|
|
3612
|
-
...this.querySelectorAll(
|
|
3613
|
-
"auro-combobox, [auro-combobox], auro-select, [auro-select], auro-datepicker, [auro-datepicker]",
|
|
3614
|
-
),
|
|
3615
|
-
];
|
|
3616
|
-
const dropdowns = [
|
|
3617
|
-
...this.querySelectorAll("auro-dropdown, [auro-dropdown]"),
|
|
3618
|
-
...dropdownComponents.map((comp) => comp.dropdown),
|
|
3619
|
-
];
|
|
3620
|
-
|
|
3621
|
-
const isAnyDropdownOpen = dropdowns.some(
|
|
3622
|
-
(dropdown) => dropdown.isPopoverVisible,
|
|
3623
|
-
);
|
|
3624
|
-
if (!isAnyDropdownOpen) {
|
|
3625
|
-
this.floater.hideBib();
|
|
3626
|
-
}
|
|
3627
|
-
}
|
|
3628
|
-
}
|
|
3629
|
-
|
|
3630
3656
|
/**
|
|
3631
3657
|
* @private
|
|
3632
3658
|
* @returns {void}
|
|
3633
3659
|
*/
|
|
3634
3660
|
handleCloseButtonClick() {
|
|
3635
|
-
this.
|
|
3661
|
+
this.hide();
|
|
3636
3662
|
}
|
|
3637
3663
|
|
|
3638
3664
|
/**
|
|
@@ -3652,6 +3678,7 @@ class ComponentBase extends i$2 {
|
|
|
3652
3678
|
*/
|
|
3653
3679
|
show() {
|
|
3654
3680
|
this.floater.showBib();
|
|
3681
|
+
this.openDialog();
|
|
3655
3682
|
}
|
|
3656
3683
|
|
|
3657
3684
|
/**
|
|
@@ -3660,6 +3687,7 @@ class ComponentBase extends i$2 {
|
|
|
3660
3687
|
*/
|
|
3661
3688
|
hide() {
|
|
3662
3689
|
this.floater.hideBib();
|
|
3690
|
+
this.closeDialog();
|
|
3663
3691
|
}
|
|
3664
3692
|
|
|
3665
3693
|
static get styles() {
|
|
@@ -3697,8 +3725,9 @@ getCloseButton() {
|
|
|
3697
3725
|
"dialogOverlay--open": this.isPopoverVisible,
|
|
3698
3726
|
util_displayHidden: !this.isPopoverVisible,
|
|
3699
3727
|
};
|
|
3700
|
-
const
|
|
3728
|
+
const wrapperClasses = {
|
|
3701
3729
|
dialog: true,
|
|
3730
|
+
wrapper: true,
|
|
3702
3731
|
"dialog--open": this.isPopoverVisible,
|
|
3703
3732
|
};
|
|
3704
3733
|
|
|
@@ -3706,43 +3735,44 @@ getCloseButton() {
|
|
|
3706
3735
|
<!-- Hidden slot for close button aria-label -->
|
|
3707
3736
|
<slot name="ariaLabel.dialog.close" hidden @slotchange=${this.requestUpdate}></slot>
|
|
3708
3737
|
|
|
3709
|
-
<!-- FloatingUI bib anchor for lifecycle management (ESC, click-outside, state) -->
|
|
3710
|
-
<div id="bib" aria-hidden="true"></div>
|
|
3711
|
-
|
|
3712
3738
|
<!-- @deprecated dialog-overlay: backdrop styling is now provided by ::backdrop on the dialog element.
|
|
3713
3739
|
Retained for backward compatibility; part="dialog-overlay" remains available for custom CSS. -->
|
|
3714
|
-
<div class="${e(classes)}" id="dialog-overlay" part="dialog-overlay"
|
|
3715
|
-
|
|
3716
|
-
<
|
|
3717
|
-
|
|
3718
|
-
|
|
3719
|
-
|
|
3720
|
-
|
|
3721
|
-
|
|
3722
|
-
|
|
3723
|
-
|
|
3724
|
-
|
|
3725
|
-
this.
|
|
3726
|
-
|
|
3727
|
-
|
|
3728
|
-
|
|
3729
|
-
|
|
3730
|
-
|
|
3731
|
-
|
|
3732
|
-
|
|
3733
|
-
<
|
|
3734
|
-
|
|
3735
|
-
|
|
3736
|
-
|
|
3737
|
-
|
|
3738
|
-
|
|
3739
|
-
|
|
3740
|
-
|
|
3741
|
-
|
|
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
|
+
}
|
|
3742
3773
|
</div>
|
|
3743
|
-
|
|
3744
|
-
|
|
3745
|
-
</dialog>
|
|
3774
|
+
</dialog>
|
|
3775
|
+
</div>
|
|
3746
3776
|
`;
|
|
3747
3777
|
}
|
|
3748
3778
|
}
|