@aurodesignsystem-dev/auro-dialog 0.0.0-pr97.1 → 0.0.0-pr97.2
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/api.js +5 -2
- package/demo/api.md +20 -22
- package/demo/api.min.js +42 -0
- package/demo/auro-dialog.min.js +33 -32
- package/demo/index.md +2 -2
- package/dist/{auro-dialog-DCuKG3EH.js → auro-dialog-BGLeu91P.js} +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.js +1 -1
- package/dist/registered.js +1 -1
- package/package.json +1 -1
package/demo/api.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { initAccessibilityExample } from "../apiExamples/accessibility";
|
|
2
2
|
import { initBasicExample } from "../apiExamples/basic";
|
|
3
3
|
import { initDecoupledExample } from "../apiExamples/decoupled";
|
|
4
|
-
import { initEditCloseButtonExample } from "../apiExamples/
|
|
4
|
+
import { initEditCloseButtonExample } from "../apiExamples/close-button";
|
|
5
5
|
import { initModalExample } from "../apiExamples/modal";
|
|
6
6
|
import { initPopoverAndDropdownExample } from "../apiExamples/popover-and-dropdown";
|
|
7
7
|
import { initSizeOptionsExample } from "../apiExamples/size-options";
|
|
8
|
-
import { initAriaLabelSlotExample } from "../apiExamples/
|
|
8
|
+
import { initAriaLabelSlotExample } from "../apiExamples/aria-label";
|
|
9
9
|
|
|
10
10
|
import "../src/registered"
|
|
11
11
|
|
|
@@ -19,6 +19,9 @@ export function initExamples(initCount) {
|
|
|
19
19
|
initModalExample();
|
|
20
20
|
initDecoupledExample();
|
|
21
21
|
initPopoverAndDropdownExample();
|
|
22
|
+
initEditCloseButtonExample();
|
|
23
|
+
initAriaLabelSlotExample();
|
|
24
|
+
initAccessibilityExample();
|
|
22
25
|
} catch (_err) {
|
|
23
26
|
if (initCount <= 20) {
|
|
24
27
|
// setTimeout handles issue where content is sometimes loaded after the functions get called
|
package/demo/api.md
CHANGED
|
@@ -7,17 +7,17 @@ The `auro-dialog` appears on top of the page and presents information that requi
|
|
|
7
7
|
|
|
8
8
|
### Properties & Attributes
|
|
9
9
|
|
|
10
|
-
| Properties | Attributes | Modifiers | Type | Default | Description
|
|
11
|
-
| --------------------- | ----------------------- | --------- | ---------------------- | --------- |
|
|
12
|
-
| closeButtonAppearance | close-button-appearance | | `default` \| `inverse` | `default` | Defines whether the close button should be light colored for use on dark backgrounds.
|
|
13
|
-
| lg | lg | | boolean | | Sets
|
|
14
|
-
| md | md | | boolean | | Sets dialog box to medium style. Adding both md and lg will set the dialog to md for desktop and lg for mobile.
|
|
15
|
-
| modal | modal | | boolean | `false` | Modal dialog restricts the user to take an action (no default close actions)
|
|
16
|
-
| onDark | onDark | | boolean | | DEPRECATED - use `close-button-appearance="inverse" instead.
|
|
17
|
-
| open | open | | boolean | | Sets state of dialog to open
|
|
18
|
-
| sm | sm | | boolean | | Sets dialog box to small style. Adding both sm and lg will set the dialog to sm for desktop and lg for mobile.
|
|
19
|
-
| triggerElement | | | HTMLElement | | The element to focus when the dialog is closed. If not set, defaults to the value of document.activeElement when the dialog is opened.
|
|
20
|
-
| unformatted | unformatted | | boolean | `false` | Unformatted dialog window, edge-to-edge fill for content
|
|
10
|
+
| Properties | Attributes | Modifiers | Type | Default | Description |
|
|
11
|
+
| --------------------- | ----------------------- | --------- | ---------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
12
|
+
| closeButtonAppearance | close-button-appearance | | `default` \| `inverse` | `default` | Defines whether the close button should be light colored for use on dark backgrounds. |
|
|
13
|
+
| lg | lg | | boolean | | Sets dialog box to large style. Adding both lg and sm/md will set the dialog to lg for mobile and sm/md for desktop.<br>Must be used in conjunction with sm or md to have an effect. |
|
|
14
|
+
| md | md | | boolean | | Sets dialog box to medium style. Adding both md and lg will set the dialog to md for desktop and lg for mobile. |
|
|
15
|
+
| modal | modal | | boolean | `false` | Modal dialog restricts the user to take an action (no default close actions) |
|
|
16
|
+
| onDark | onDark | | boolean | | DEPRECATED - use `close-button-appearance="inverse" instead. |
|
|
17
|
+
| open | open | | boolean | | Sets state of dialog to open |
|
|
18
|
+
| sm | sm | | boolean | | Sets dialog box to small style. Adding both sm and lg will set the dialog to sm for desktop and lg for mobile. |
|
|
19
|
+
| triggerElement | | | HTMLElement | | The element to focus when the dialog is closed. If not set, defaults to the value of document.activeElement when the dialog is opened. |
|
|
20
|
+
| unformatted | unformatted | | boolean | `false` | Unformatted dialog window, edge-to-edge fill for content |
|
|
21
21
|
|
|
22
22
|
### Methods
|
|
23
23
|
|
|
@@ -517,8 +517,8 @@ This property can be used in combination with any other use case of the dialog,
|
|
|
517
517
|
To customize the aria-label text for the close button, use the `ariaLabel.dialog.close` slot to provide custom text. If no text is provided, the default text `"Close"` will be used.
|
|
518
518
|
|
|
519
519
|
<div class="exampleWrapper">
|
|
520
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/
|
|
521
|
-
<!-- The below content is automatically added from ./../apiExamples/
|
|
520
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/aria-label.html) -->
|
|
521
|
+
<!-- The below content is automatically added from ./../apiExamples/aria-label.html -->
|
|
522
522
|
<div>
|
|
523
523
|
<auro-button id="openAriaLabelSlot">Unformatted Dialog w/ custom close button aria-label</auro-button>
|
|
524
524
|
</div>
|
|
@@ -536,8 +536,8 @@ To customize the aria-label text for the close button, use the `ariaLabel.dialog
|
|
|
536
536
|
</div>
|
|
537
537
|
<auro-accordion alignRight>
|
|
538
538
|
<span slot="trigger">See code</span>
|
|
539
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/
|
|
540
|
-
<!-- The below code snippet is automatically added from ./../apiExamples/
|
|
539
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/aria-label.html) -->
|
|
540
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/aria-label.html -->
|
|
541
541
|
|
|
542
542
|
```html
|
|
543
543
|
<div>
|
|
@@ -564,8 +564,8 @@ To customize the aria-label text for the close button, use the `ariaLabel.dialog
|
|
|
564
564
|
The close button can be targetted via the `close-button` CSS part, e.g. `auro-dialog::part(close-button)`.
|
|
565
565
|
|
|
566
566
|
<div class="exampleWrapper">
|
|
567
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/
|
|
568
|
-
<!-- The below content is automatically added from ./../apiExamples/
|
|
567
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/close-button.html) -->
|
|
568
|
+
<!-- The below content is automatically added from ./../apiExamples/close-button.html -->
|
|
569
569
|
<div>
|
|
570
570
|
<auro-button id="openEditDialog">Unformatted w/custom close button</auro-button>
|
|
571
571
|
</div>
|
|
@@ -573,7 +573,6 @@ The close button can be targetted via the `close-button` CSS part, e.g. `auro-di
|
|
|
573
573
|
.example::part(close-button) {
|
|
574
574
|
top: var(--ds-size-400);
|
|
575
575
|
right: var(--ds-size-400);
|
|
576
|
-
color: var(--ds-color-brand-flamingo-500);
|
|
577
576
|
}
|
|
578
577
|
</style>
|
|
579
578
|
<auro-dialog id="unformattedCustomMdDialog" unformatted md lg class="example">
|
|
@@ -589,8 +588,8 @@ The close button can be targetted via the `close-button` CSS part, e.g. `auro-di
|
|
|
589
588
|
</div>
|
|
590
589
|
<auro-accordion alignRight>
|
|
591
590
|
<span slot="trigger">See code</span>
|
|
592
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/
|
|
593
|
-
<!-- The below code snippet is automatically added from ./../apiExamples/
|
|
591
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/close-button.html) -->
|
|
592
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/close-button.html -->
|
|
594
593
|
|
|
595
594
|
```html
|
|
596
595
|
<div>
|
|
@@ -600,7 +599,6 @@ The close button can be targetted via the `close-button` CSS part, e.g. `auro-di
|
|
|
600
599
|
.example::part(close-button) {
|
|
601
600
|
top: var(--ds-size-400);
|
|
602
601
|
right: var(--ds-size-400);
|
|
603
|
-
color: var(--ds-color-brand-flamingo-500);
|
|
604
602
|
}
|
|
605
603
|
</style>
|
|
606
604
|
<auro-dialog id="unformattedCustomMdDialog" unformatted md lg class="example">
|
|
@@ -802,4 +800,4 @@ The component may be restyled by changing the values of the following token(s).
|
|
|
802
800
|
--ds-auro-dialog-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
|
|
803
801
|
}
|
|
804
802
|
```
|
|
805
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
803
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
package/demo/api.min.js
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
import { A as AuroDialog, i as initBasicExample } from './auro-dialog.min.js';
|
|
2
2
|
|
|
3
|
+
function initAccessibilityExample() {
|
|
4
|
+
const button = document.querySelector("#openAccessibility");
|
|
5
|
+
const dialog = document.querySelector("#unformattedMdDialog");
|
|
6
|
+
|
|
7
|
+
button.addEventListener("click", () => {
|
|
8
|
+
if (dialog.hasAttribute("open")) {
|
|
9
|
+
dialog.removeAttribute("open");
|
|
10
|
+
} else {
|
|
11
|
+
dialog.setAttribute("open", true);
|
|
12
|
+
}
|
|
13
|
+
});
|
|
14
|
+
}
|
|
15
|
+
|
|
3
16
|
function initDecoupledExample() {
|
|
4
17
|
const smLgButtons = [
|
|
5
18
|
document.querySelector("#openSmLg"),
|
|
@@ -34,6 +47,19 @@ function initDecoupledExample() {
|
|
|
34
47
|
});
|
|
35
48
|
}
|
|
36
49
|
|
|
50
|
+
function initEditCloseButtonExample() {
|
|
51
|
+
const button = document.querySelector("#openEditDialog");
|
|
52
|
+
const dialog = document.querySelector("#unformattedCustomMdDialog");
|
|
53
|
+
|
|
54
|
+
button.addEventListener("click", () => {
|
|
55
|
+
if (dialog.hasAttribute("open")) {
|
|
56
|
+
dialog.removeAttribute("open");
|
|
57
|
+
} else {
|
|
58
|
+
dialog.setAttribute("open", true);
|
|
59
|
+
}
|
|
60
|
+
});
|
|
61
|
+
}
|
|
62
|
+
|
|
37
63
|
function initModalExample() {
|
|
38
64
|
const defaultButtons = [
|
|
39
65
|
document.querySelector("#openDefaultModal"),
|
|
@@ -152,6 +178,19 @@ function initSizeOptionsExample() {
|
|
|
152
178
|
});
|
|
153
179
|
}
|
|
154
180
|
|
|
181
|
+
function initAriaLabelSlotExample() {
|
|
182
|
+
const button = document.querySelector("#openAriaLabelSlot");
|
|
183
|
+
const dialog = document.querySelector("#ariaLabelMdDialog");
|
|
184
|
+
|
|
185
|
+
button.addEventListener("click", () => {
|
|
186
|
+
if (dialog.hasAttribute("open")) {
|
|
187
|
+
dialog.removeAttribute("open");
|
|
188
|
+
} else {
|
|
189
|
+
dialog.setAttribute("open", true);
|
|
190
|
+
}
|
|
191
|
+
});
|
|
192
|
+
}
|
|
193
|
+
|
|
155
194
|
AuroDialog.register();
|
|
156
195
|
|
|
157
196
|
function initExamples(initCount) {
|
|
@@ -164,6 +203,9 @@ function initExamples(initCount) {
|
|
|
164
203
|
initModalExample();
|
|
165
204
|
initDecoupledExample();
|
|
166
205
|
initPopoverAndDropdownExample();
|
|
206
|
+
initEditCloseButtonExample();
|
|
207
|
+
initAriaLabelSlotExample();
|
|
208
|
+
initAccessibilityExample();
|
|
167
209
|
} catch (_err) {
|
|
168
210
|
if (initCount <= 20) {
|
|
169
211
|
// setTimeout handles issue where content is sometimes loaded after the functions get called
|
package/demo/auro-dialog.min.js
CHANGED
|
@@ -533,9 +533,9 @@ class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,cl
|
|
|
533
533
|
</div>
|
|
534
534
|
`}}
|
|
535
535
|
|
|
536
|
-
var buttonVersion = '12.
|
|
536
|
+
var buttonVersion = '12.3.0';
|
|
537
537
|
|
|
538
|
-
var iconVersion = '9.1.
|
|
538
|
+
var iconVersion = '9.1.1';
|
|
539
539
|
|
|
540
540
|
var colorCss = i$5`.dialogOverlay--open{background:var(--ds-auro-dialog-overlay-open-background-color)}.dialogOverlay--modal{background:var(--ds-auro-dialog-overlay-modal-background-color)}.dialog{background:var(--ds-auro-dialog-container-color);color:var(--ds-auro-dialog-text-color)}@media screen and (min-width:768px){.dialog{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}
|
|
541
541
|
`;
|
|
@@ -608,6 +608,7 @@ class ComponentBase extends i$2 {
|
|
|
608
608
|
/**
|
|
609
609
|
* Defines whether the close button should be light colored for use on dark backgrounds.
|
|
610
610
|
* @type {'default'|'inverse'}
|
|
611
|
+
* @default 'default'
|
|
611
612
|
*/
|
|
612
613
|
closeButtonAppearance: {
|
|
613
614
|
type: String,
|
|
@@ -616,66 +617,66 @@ class ComponentBase extends i$2 {
|
|
|
616
617
|
},
|
|
617
618
|
|
|
618
619
|
/**
|
|
619
|
-
*
|
|
620
|
-
|
|
621
|
-
modal: { type: Boolean },
|
|
622
|
-
|
|
623
|
-
/**
|
|
624
|
-
* Unformatted dialog window, edge-to-edge fill for content
|
|
620
|
+
* Sets dialog box to large style. Adding both lg and sm/md will set the dialog to lg for mobile and sm/md for desktop.
|
|
621
|
+
* Must be used in conjunction with sm or md to have an effect.
|
|
625
622
|
*/
|
|
626
|
-
|
|
623
|
+
lg: {
|
|
627
624
|
type: Boolean,
|
|
628
|
-
reflect: true
|
|
625
|
+
reflect: true
|
|
629
626
|
},
|
|
630
627
|
|
|
631
628
|
/**
|
|
632
|
-
* Sets
|
|
629
|
+
* Sets dialog box to medium style. Adding both md and lg will set the dialog to md for desktop and lg for mobile.
|
|
633
630
|
*/
|
|
634
|
-
|
|
631
|
+
md: {
|
|
635
632
|
type: Boolean,
|
|
636
633
|
reflect: true
|
|
637
634
|
},
|
|
638
635
|
|
|
639
636
|
/**
|
|
640
|
-
*
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
triggerElement: {
|
|
644
|
-
type: Object,
|
|
645
|
-
attribute: false,
|
|
646
|
-
},
|
|
637
|
+
* Modal dialog restricts the user to take an action (no default close actions)
|
|
638
|
+
*/
|
|
639
|
+
modal: { type: Boolean },
|
|
647
640
|
|
|
648
641
|
/**
|
|
649
|
-
*
|
|
642
|
+
* DEPRECATED - use `close-button-appearance="inverse" instead.
|
|
650
643
|
*/
|
|
651
|
-
|
|
644
|
+
onDark: {
|
|
652
645
|
type: Boolean,
|
|
653
|
-
reflect: true
|
|
646
|
+
reflect: true
|
|
654
647
|
},
|
|
655
648
|
|
|
656
649
|
/**
|
|
657
|
-
* Sets
|
|
650
|
+
* Sets state of dialog to open
|
|
658
651
|
*/
|
|
659
|
-
|
|
652
|
+
open: {
|
|
660
653
|
type: Boolean,
|
|
661
|
-
reflect: true
|
|
654
|
+
reflect: true
|
|
662
655
|
},
|
|
663
656
|
|
|
664
657
|
/**
|
|
665
|
-
* Sets
|
|
666
|
-
* Must be used in conjunction with sm or md to have an effect.
|
|
658
|
+
* Sets dialog box to small style. Adding both sm and lg will set the dialog to sm for desktop and lg for mobile.
|
|
667
659
|
*/
|
|
668
|
-
|
|
660
|
+
sm: {
|
|
669
661
|
type: Boolean,
|
|
670
|
-
reflect: true
|
|
662
|
+
reflect: true
|
|
671
663
|
},
|
|
672
664
|
|
|
673
665
|
/**
|
|
674
|
-
*
|
|
666
|
+
* The element to focus when the dialog is closed. If not set, defaults to the value of document.activeElement when the dialog is opened.
|
|
667
|
+
* @type {HTMLElement}
|
|
668
|
+
*/
|
|
669
|
+
triggerElement: {
|
|
670
|
+
type: Object,
|
|
671
|
+
attribute: false
|
|
672
|
+
},
|
|
673
|
+
|
|
674
|
+
/**
|
|
675
|
+
* Unformatted dialog window, edge-to-edge fill for content
|
|
675
676
|
*/
|
|
676
|
-
|
|
677
|
+
unformatted: {
|
|
677
678
|
type: Boolean,
|
|
678
|
-
reflect: true
|
|
679
|
+
reflect: true
|
|
679
680
|
}
|
|
680
681
|
};
|
|
681
682
|
}
|
package/demo/index.md
CHANGED
|
@@ -45,11 +45,11 @@ It should be noted that the `footer` slot is reserved for the placement of actio
|
|
|
45
45
|
|
|
46
46
|
## Example(s)
|
|
47
47
|
|
|
48
|
+
### Basic
|
|
49
|
+
|
|
48
50
|
The dialog open state is controlled via the `open` attribute, or by programmatically setting the `open` property to `true`.
|
|
49
51
|
You can see in the example below under the "See Code" section that we are controlling our dialogs by adding and removing the `open` attribute.
|
|
50
52
|
|
|
51
|
-
### Basic
|
|
52
|
-
|
|
53
53
|
<div class="exampleWrapper">
|
|
54
54
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
|
|
55
55
|
<!-- The below content is automatically added from ./../apiExamples/basic.html -->
|
|
@@ -79,7 +79,7 @@ import{css as e,LitElement as t,html as s}from"lit";import{classMap as a}from"li
|
|
|
79
79
|
`,J=e`.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;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;transition:all .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:0;height:0;overflow:hidden}.dialog--open{opacity:1;width:calc(100% - var(--insetPaddingXxxl) - var(--insetPaddingXxxl));height:auto;overflow:visible}}@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}
|
|
80
80
|
`,Q=e`[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)}}
|
|
81
81
|
`,Y=e`:host{--ds-auro-dialog-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dialog-boxshadow-color: var(--ds-elevation-300, 0px 0px 15px rgba(0, 0, 0, .2));--ds-auro-dialog-overlay-modal-background-color: var(--ds-advanced-color-shared-scrim, rgba(0, 0, 0, .5));--ds-auro-dialog-overlay-open-background-color: var(--ds-advanced-color-shared-scrim, rgba(0, 0, 0, .5));--ds-auro-dialog-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}
|
|
82
|
-
`;class Z extends t{constructor(){super(),this.modal=!1,this.unformatted=!1,this.closeButtonAppearance="default";const e=new d;this.buttonTag=e.generateTag("auro-button","12.
|
|
82
|
+
`;class Z extends t{constructor(){super(),this.modal=!1,this.unformatted=!1,this.closeButtonAppearance="default";const e=new d;this.buttonTag=e.generateTag("auro-button","12.3.0",L),this.iconTag=e.generateTag("auro-icon","9.1.1",V),this.runtimeUtils=new l}static get properties(){return{closeButtonAppearance:{type:String,attribute:"close-button-appearance",reflect:!0},lg:{type:Boolean,reflect:!0},md:{type:Boolean,reflect:!0},modal:{type:Boolean},onDark:{type:Boolean,reflect:!0},open:{type:Boolean,reflect:!0},sm:{type:Boolean,reflect:!0},triggerElement:{type:Object,attribute:!1},unformatted:{type:Boolean,reflect:!0}}}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-dialog");const e=this.shadowRoot.querySelector("#footer"),t=this.shadowRoot.querySelector("#footerWrapper");this.dialog=this.shadowRoot.getElementById("dialog"),this.unformatted||0!==e.assignedNodes().length||t.classList.remove("dialog-footer")}updated(e){e.has("open")&&(this.open?this.openDialog():this.closeDialog())}connectedCallback(){super.connectedCallback(),this.keydownEventHandler=this.handleKeydown.bind(this),window.addEventListener("keydown",this.keydownEventHandler)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("keydown",this.keydownEventHandler)}openDialog(){this.defaultTrigger=document.activeElement,this.focusTrap=new p(this.dialog)}onDialogTransitionEnd(){this.open&&this.focusTrap&&this.focusTrap.focusFirstElement()}closeDialog(){this.focusTrap&&(this.focusTrap.disconnect(),this.focusTrap=void 0),this.defaultTrigger&&(this.defaultTrigger.focus(),this.defaultTrigger=void 0),this.dispatchToggleEvent()}dispatchToggleEvent(){const e=new Event("toggle",{bubbles:!0,cancelable:!1});this.dispatchEvent(e)}handleOverlayClick(){if(this.open&&!this.modal){const e=[...this.querySelectorAll("auro-combobox, [auro-combobox], auro-select, [auro-select], auro-datepicker, [auro-datepicker]")];[...this.querySelectorAll("auro-dropdown, [auro-dropdown]"),...e.map(e=>e.dropdown)].some(e=>e.isPopoverVisible)||this.handleCloseButtonClick()}}handleCloseButtonClick(){this.open=!1}handleKeydown({key:e,keyCode:t}){!this.open||this.modal||"Escape"!==e&&27!==t||(this.open=!1)}focus(){this.open&&this.dialog.focus()}static get styles(){return[J,Q,K,Y]}getCloseButton(){return this.modal?i``:i`
|
|
83
83
|
<${this.buttonTag}
|
|
84
84
|
aria-label="${this.runtimeUtils.getSlotText(this,"ariaLabel.dialog.close")||"Close"}"
|
|
85
85
|
variant="ghost"
|
package/dist/index.d.ts
CHANGED
|
@@ -86,7 +86,7 @@ export type AuroDialogProps = {
|
|
|
86
86
|
"close-button-appearance"?: AuroDialog['closeButtonAppearance'];
|
|
87
87
|
/** Defines whether the close button should be light colored for use on dark backgrounds. */
|
|
88
88
|
"closeButtonAppearance"?: AuroDialog['closeButtonAppearance'];
|
|
89
|
-
/** Sets
|
|
89
|
+
/** Sets dialog box to large style. Adding both lg and sm/md will set the dialog to lg for mobile and sm/md for desktop.
|
|
90
90
|
Must be used in conjunction with sm or md to have an effect. */
|
|
91
91
|
"lg"?: AuroDialog['lg'];
|
|
92
92
|
/** Sets dialog box to medium style. Adding both md and lg will set the dialog to md for desktop and lg for mobile. */
|
|
@@ -120,7 +120,7 @@ Must be used in conjunction with sm or md to have an effect. */
|
|
|
120
120
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
121
121
|
*
|
|
122
122
|
* - `close-button-appearance`/`closeButtonAppearance`: Defines whether the close button should be light colored for use on dark backgrounds.
|
|
123
|
-
* - `lg`: Sets
|
|
123
|
+
* - `lg`: Sets dialog box to large style. Adding both lg and sm/md will set the dialog to lg for mobile and sm/md for desktop.
|
|
124
124
|
* Must be used in conjunction with sm or md to have an effect.
|
|
125
125
|
* - `md`: Sets dialog box to medium style. Adding both md and lg will set the dialog to md for desktop and lg for mobile.
|
|
126
126
|
* - `modal`: Modal dialog restricts the user to take an action (no default close actions)
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export{A as AuroDialog}from"./auro-dialog-
|
|
1
|
+
export{A as AuroDialog}from"./auro-dialog-BGLeu91P.js";import"lit";import"lit/directives/class-map.js";import"lit/static-html.js";import"lit/directives/if-defined.js";
|
package/dist/registered.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{A as i}from"./auro-dialog-
|
|
1
|
+
import{A as i}from"./auro-dialog-BGLeu91P.js";import"lit";import"lit/directives/class-map.js";import"lit/static-html.js";import"lit/directives/if-defined.js";i.register();
|
package/package.json
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"================================================================================"
|
|
8
8
|
],
|
|
9
9
|
"name": "@aurodesignsystem-dev/auro-dialog",
|
|
10
|
-
"version": "0.0.0-pr97.
|
|
10
|
+
"version": "0.0.0-pr97.2",
|
|
11
11
|
"description": "auro-dialog HTML custom element",
|
|
12
12
|
"repository": {
|
|
13
13
|
"type": "git",
|