@aurodesignsystem-dev/auro-dialog 0.0.0-pr97.4 → 0.0.0-pr97.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.
Files changed (8) hide show
  1. package/demo/api.md +3 -3
  2. package/demo/auro-dialog.min.js +7 -7
  3. package/demo/index.md +22 -0
  4. package/dist/{auro-dialog-BGLeu91P.js → auro-dialog-BNnIwNXB.js} +1 -1
  5. package/dist/index.d.ts +7 -6
  6. package/dist/index.js +1 -1
  7. package/dist/registered.js +1 -1
  8. package/package.json +1 -1
package/demo/api.md CHANGED
@@ -12,12 +12,12 @@ The `auro-dialog` appears on top of the page and presents information that requi
12
12
  | closeButtonAppearance | close-button-appearance | | `default` \| `inverse` | `default` | Defines whether the close button should be light colored for use on dark backgrounds. |
13
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
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) |
15
+ | modal | modal | | boolean | | Modal dialog restricts the user to take an action (no default close actions). |
16
16
  | onDark | onDark | | boolean | | DEPRECATED - use `close-button-appearance="inverse" instead. |
17
- | open | open | | boolean | | Sets state of dialog to open |
17
+ | open | open | | boolean | | Sets state of dialog to open. |
18
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
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 |
20
+ | unformatted | unformatted | | boolean | | Unformatted dialog window, edge-to-edge fill for content. |
21
21
 
22
22
  ### Methods
23
23
 
package/demo/auro-dialog.min.js CHANGED
@@ -572,12 +572,12 @@ class ComponentBase extends i$2 {
572
572
  constructor() {
573
573
  super();
574
574
 
575
+ this._initializeDefaults();
576
+ }
577
+
578
+ _initializeDefaults() {
575
579
  this.modal = false;
576
580
  this.unformatted = false;
577
-
578
- /**
579
- * @type {'default'|'inverse'}
580
- */
581
581
  this.closeButtonAppearance = 'default';
582
582
 
583
583
  const versioning = new AuroDependencyVersioning();
@@ -634,7 +634,7 @@ class ComponentBase extends i$2 {
634
634
  },
635
635
 
636
636
  /**
637
- * Modal dialog restricts the user to take an action (no default close actions)
637
+ * Modal dialog restricts the user to take an action (no default close actions).
638
638
  */
639
639
  modal: { type: Boolean },
640
640
 
@@ -647,7 +647,7 @@ class ComponentBase extends i$2 {
647
647
  },
648
648
 
649
649
  /**
650
- * Sets state of dialog to open
650
+ * Sets state of dialog to open.
651
651
  */
652
652
  open: {
653
653
  type: Boolean,
@@ -672,7 +672,7 @@ class ComponentBase extends i$2 {
672
672
  },
673
673
 
674
674
  /**
675
- * Unformatted dialog window, edge-to-edge fill for content
675
+ * Unformatted dialog window, edge-to-edge fill for content.
676
676
  */
677
677
  unformatted: {
678
678
  type: Boolean,
package/demo/index.md CHANGED
@@ -25,6 +25,28 @@ The `<auro-dialog>` component should be used in situations where users may:
25
25
  * Be prompted to view content with the option of closing it
26
26
  <!-- AURO-GENERATED-CONTENT:END -->
27
27
 
28
+ ## Set Up
29
+
30
+ Triggering the dialog relies on functions being installed. See the following example code that is installed into this demo.
31
+
32
+ ```javascript
33
+ function toggleDialog(dialogID) {
34
+ const dialog = document.querySelector(dialogID);
35
+
36
+ if (dialog.hasAttribute('open')) {
37
+ dialog.removeAttribute('open');
38
+ } else {
39
+ dialog.setAttribute('open', true);
40
+ }
41
+ }
42
+ ```
43
+
44
+ Once the JavaScript is added to the scope of the experience, the next part is adding a trigger. In this example, the button component will toggle a dialog with the ID of `#demo1`.
45
+
46
+ ```javascript
47
+ <auro-button onClick="toggleDialog('#demo1')">Open Default Dialog</auro-button>
48
+ ```
49
+
28
50
  ## The Structure
29
51
 
30
52
  The structure of the dialog itself consists of three slots. The `header`, `content` and `footer` slots. See the scaffolding example below for adding content to the component.
package/dist/{auro-dialog-BGLeu91P.js → auro-dialog-BNnIwNXB.js} RENAMED
@@ -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.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`
82
+ `;class Z extends t{constructor(){super(),this._initializeDefaults()}_initializeDefaults(){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
@@ -91,15 +91,15 @@ 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. */
93
93
  "md"?: AuroDialog['md'];
94
- /** Modal dialog restricts the user to take an action (no default close actions) */
94
+ /** Modal dialog restricts the user to take an action (no default close actions). */
95
95
  "modal"?: AuroDialog['modal'];
96
96
  /** DEPRECATED - use `close-button-appearance="inverse" instead. */
97
97
  "onDark"?: AuroDialog['onDark'];
98
- /** Sets state of dialog to open */
98
+ /** Sets state of dialog to open. */
99
99
  "open"?: AuroDialog['open'];
100
100
  /** Sets dialog box to small style. Adding both sm and lg will set the dialog to sm for desktop and lg for mobile. */
101
101
  "sm"?: AuroDialog['sm'];
102
- /** Unformatted dialog window, edge-to-edge fill for content */
102
+ /** Unformatted dialog window, edge-to-edge fill for content. */
103
103
  "unformatted"?: AuroDialog['unformatted'];
104
104
  /** The element to focus when the dialog is closed. If not set, defaults to the value of document.activeElement when the dialog is opened. */
105
105
  "triggerElement"?: AuroDialog['triggerElement'];
@@ -123,11 +123,11 @@ Must be used in conjunction with sm or md to have an effect. */
123
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
- * - `modal`: Modal dialog restricts the user to take an action (no default close actions)
126
+ * - `modal`: Modal dialog restricts the user to take an action (no default close actions).
127
127
  * - `onDark`: DEPRECATED - use `close-button-appearance="inverse" instead.
128
- * - `open`: Sets state of dialog to open
128
+ * - `open`: Sets state of dialog to open.
129
129
  * - `sm`: Sets dialog box to small style. Adding both sm and lg will set the dialog to sm for desktop and lg for mobile.
130
- * - `unformatted`: Unformatted dialog window, edge-to-edge fill for content
130
+ * - `unformatted`: Unformatted dialog window, edge-to-edge fill for content.
131
131
  * - `triggerElement`: The element to focus when the dialog is closed. If not set, defaults to the value of document.activeElement when the dialog is opened. (property only)
132
132
  *
133
133
  * ## Events
@@ -149,6 +149,7 @@ Must be used in conjunction with sm or md to have an effect. */
149
149
  *
150
150
  * Methods that can be called to access component functionality.
151
151
  *
152
+ * - `_initializeDefaults() => void`: undefined
152
153
  * - `register(name?: string = "auro-dialog") => void`: This will register this element with the browser.
153
154
  *
154
155
  * ## CSS Parts
package/dist/index.js CHANGED
@@ -1 +1 @@
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";
1
+ export{A as AuroDialog}from"./auro-dialog-BNnIwNXB.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-BGLeu91P.js";import"lit";import"lit/directives/class-map.js";import"lit/static-html.js";import"lit/directives/if-defined.js";i.register();
1
+ import{A as i}from"./auro-dialog-BNnIwNXB.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.4",
10
+ "version": "0.0.0-pr97.6",
11
11
  "description": "auro-dialog HTML custom element",
12
12
  "repository": {
13
13
  "type": "git",