@ni/nimble-components 11.8.5 → 11.9.0

package/dist/all-components-bundle.js

@@ -9518,7 +9518,7 @@
      *
      * @public
      */
-    class Dialog extends FoundationElement {
+    class Dialog$1 extends FoundationElement {
         constructor() {
             super(...arguments);
             /**
@@ -9602,7 +9602,7 @@
             };
             this.getTabQueueBounds = () => {
                 const bounds = [];
-                return Dialog.reduceTabbableItems(bounds, this);
+                return Dialog$1.reduceTabbableItems(bounds, this);
             };
             /**
              * focus on first element of tab queue
@@ -9726,12 +9726,12 @@
                 return elements;
             }
             if (isTabbable(element) ||
-                (Dialog.isFocusableFastElement(element) && Dialog.hasTabbableShadow(element))) {
+                (Dialog$1.isFocusableFastElement(element) && Dialog$1.hasTabbableShadow(element))) {
                 elements.push(element);
                 return elements;
             }
             if (element.childElementCount) {
-                return elements.concat(Array.from(element.children).reduce(Dialog.reduceTabbableItems, []));
+                return elements.concat(Array.from(element.children).reduce(Dialog$1.reduceTabbableItems, []));
             }
             return elements;
         }
@@ -9762,22 +9762,22 @@
     }
     __decorate$1([
         attr({ mode: "boolean" })
-    ], Dialog.prototype, "modal", void 0);
+    ], Dialog$1.prototype, "modal", void 0);
     __decorate$1([
         attr({ mode: "boolean" })
-    ], Dialog.prototype, "hidden", void 0);
+    ], Dialog$1.prototype, "hidden", void 0);
     __decorate$1([
         attr({ attribute: "trap-focus", mode: "boolean" })
-    ], Dialog.prototype, "trapFocus", void 0);
+    ], Dialog$1.prototype, "trapFocus", void 0);
     __decorate$1([
         attr({ attribute: "aria-describedby" })
-    ], Dialog.prototype, "ariaDescribedby", void 0);
+    ], Dialog$1.prototype, "ariaDescribedby", void 0);
     __decorate$1([
         attr({ attribute: "aria-labelledby" })
-    ], Dialog.prototype, "ariaLabelledby", void 0);
+    ], Dialog$1.prototype, "ariaLabelledby", void 0);
     __decorate$1([
         attr({ attribute: "aria-label" })
-    ], Dialog.prototype, "ariaLabel", void 0);
+    ], Dialog$1.prototype, "ariaLabel", void 0);
 
     /**
      * The template for the {@link @microsoft/fast-foundation#(ListboxOption:class)} component.
@@ -14250,7 +14250,7 @@
      */
     const focusVisible$1 = canUseFocusVisible() ? "focus-visible" : "focus";
 
-    const styles$u = css `
+    const styles$v = css `
     :host {
         contain: layout;
         display: block;
@@ -14274,7 +14274,7 @@
         baseName: 'anchored-region',
         baseClass: AnchoredRegion$1,
         template: anchoredRegionTemplate,
-        styles: styles$u
+        styles: styles$v
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -14616,9 +14616,9 @@
         return c > 3 && r && Object.defineProperty(target, key, r), r;
     }
 
-    const template$6 = html `<slot></slot>`;
+    const template$7 = html `<slot></slot>`;
 
-    const styles$t = css `
+    const styles$u = css `
     :host {
         display: contents;
     }
@@ -14674,8 +14674,8 @@
     ], ThemeProvider.prototype, "theme", void 0);
     const nimbleDesignSystemProvider = ThemeProvider.compose({
         baseName: 'theme-provider',
-        styles: styles$t,
-        template: template$6
+        styles: styles$u,
+        template: template$7
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -14898,7 +14898,7 @@
      */
     const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
 
-    const styles$s = css `
+    const styles$t = css `
     ${display('inline-block')}
 
     :host {
@@ -14958,7 +14958,7 @@
         baseName: 'breadcrumb',
         baseClass: Breadcrumb$1,
         template: breadcrumbTemplate,
-        styles: styles$s
+        styles: styles$t
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
 
@@ -15544,7 +15544,7 @@
      */
     const focusVisible = `:${focusVisible$1}`;
 
-    const styles$r = css `
+    const styles$s = css `
     ${display('inline-flex')}
 
     :host {
@@ -15624,7 +15624,7 @@
         baseName: 'breadcrumb-item',
         baseClass: BreadcrumbItem$1,
         template: breadcrumbItemTemplate,
-        styles: styles$r,
+        styles: styles$s,
         separator: forwardSlash16X16.data
     });
     DesignSystem.getOrCreate()
@@ -15709,7 +15709,7 @@
         block: 'block'
     };
 
-    const styles$q = css `
+    const styles$r = css `
     ${display('inline-flex')}
 
     :host {
@@ -15916,7 +15916,7 @@
             `));
 
     // prettier-ignore
-    const styles$p = styles$q
+    const styles$q = styles$r
         .withBehaviors(appearanceBehavior(ButtonAppearance.outline, css `
                 :host(.primary) .control {
                     box-shadow: 0px 0px 0px ${borderWidth} rgba(${actionRgbPartialColor}, 0.3) inset;
@@ -16030,7 +16030,7 @@
         baseName: 'button',
         baseClass: Button$1,
         template: buttonTemplate,
-        styles: styles$p,
+        styles: styles$q,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -16038,7 +16038,7 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleButton());
 
     // prettier-ignore
-    const styles$o = css `
+    const styles$p = css `
     ${display('inline-flex')}
 
     :host {
@@ -16201,14 +16201,14 @@
     const nimbleCardButton = CardButton.compose({
         baseName: 'card-button',
         template: buttonTemplate,
-        styles: styles$o,
+        styles: styles$p,
         shadowOptions: {
             delegatesFocus: true
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
 
-    const styles$n = css `
+    const styles$o = css `
     ${display('inline-flex')}
 
     :host {
@@ -16326,7 +16326,7 @@
         baseName: 'checkbox',
         baseClass: Checkbox$1,
         template: checkboxTemplate,
-        styles: styles$n,
+        styles: styles$o,
         checkedIndicator: check16X16.data,
         indeterminateIndicator: minus16X16.data
     });
@@ -16338,13 +16338,13 @@
     </div>
 `;
 
-    const template$5 = html `
+    const template$6 = html `
     <template>
         <div class="icon" :innerHTML=${x => x.icon.data}></div>
     </template
 `;
 
-    const styles$m = css `
+    const styles$n = css `
     ${display('inline-flex')}
 
     :host {
@@ -16394,8 +16394,8 @@
     const registerIcon = (baseName, iconClass) => {
         const composedIcon = iconClass.compose({
             baseName,
-            template: template$5,
-            styles: styles$m,
+            template: template$6,
+            styles: styles$n,
             baseClass: iconClass
         });
         DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
@@ -16423,7 +16423,7 @@
     }
     registerIcon('icon-arrow-expander-down', IconArrowExpanderDown);
 
-    const styles$l = css `
+    const styles$m = css `
     ${display('inline-flex')}
 
     :host {
@@ -16609,7 +16609,7 @@
     }
 `;
 
-    const styles$k = css `
+    const styles$l = css `
     .error-icon {
         display: none;
     }
@@ -16647,9 +16647,9 @@
     }
 `;
 
-    const styles$j = css `
+    const styles$k = css `
+    ${styles$m}
     ${styles$l}
-    ${styles$k}
 
     :host {
         --ni-private-hover-bottom-border-width: 2px;
@@ -16881,7 +16881,7 @@
         baseName: 'combobox',
         baseClass: Combobox$1,
         template: comboboxTemplate,
-        styles: styles$j,
+        styles: styles$k,
         shadowOptions: {
             delegatesFocus: true
         },
@@ -16918,6 +16918,116 @@
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCombobox());
 
+    const styles$j = css `
+    ${display('grid')}
+
+    dialog {
+        background-color: ${applicationBackgroundColor};
+        border: ${borderWidth} solid ${popupBorderColor};
+        box-shadow: 0px 2px 3px ${popupBoxShadowColor};
+        max-width: 50%;
+    }
+`;
+
+    const template$5 = html `
+    <template>
+        <dialog
+            ${ref('dialogElement')}
+            role="alertdialog"
+            aria-label="${x => x.ariaLabel}"
+            @cancel="${(x, c) => x.cancelHandler(c.event)}"
+            @close="${x => x.closeHandler()}"
+        >
+            <slot></slot>
+        </dialog>
+    </template>
+`;
+
+    /**
+     * Symbol that is returned as the dialog close reason (from the Promise returned by show()) when
+     * the dialog was closed by pressing the ESC key (vs. calling the close() function).
+     */
+    const USER_DISMISSED = Symbol('user dismissed');
+    /**
+     * A nimble-styled dialog.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+    class Dialog extends FoundationElement {
+        constructor() {
+            super(...arguments);
+            /**
+             * @public
+             * @description
+             * Prevents dismissing the dialog via the Escape key
+             */
+            this.preventDismiss = false;
+        }
+        /**
+         * True if the dialog is open/showing, false otherwise
+         */
+        get open() {
+            return this.resolveShow !== undefined;
+        }
+        /**
+         * Opens the dialog
+         * @returns Promise that is resolved when the dialog is closed. The value of the resolved Promise is the reason value passed to the close() method, or USER_DISMISSED if the dialog was closed via the ESC key.
+         */
+        async show() {
+            if (this.open) {
+                throw new Error('Dialog is already open');
+            }
+            this.dialogElement.showModal();
+            return new Promise((resolve, _reject) => {
+                this.resolveShow = resolve;
+            });
+        }
+        /**
+         * Closes the dialog
+         * @param reason An optional value indicating how/why the dialog was closed.
+         */
+        close(reason) {
+            if (!this.open) {
+                throw new Error('Dialog is not open');
+            }
+            this.closeReason = reason;
+            this.dialogElement.close();
+        }
+        /**
+         * @internal
+         */
+        closeHandler() {
+            this.resolveShow(this.closeReason);
+            this.resolveShow = undefined;
+            return true;
+        }
+        /**
+         * @internal
+         */
+        cancelHandler(event) {
+            if (this.preventDismiss) {
+                event.preventDefault();
+            }
+            else {
+                this.closeReason = USER_DISMISSED;
+            }
+            return true;
+        }
+    }
+    __decorate([
+        attr({ attribute: 'prevent-dismiss', mode: 'boolean' })
+    ], Dialog.prototype, "preventDismiss", void 0);
+    applyMixins(Dialog, ARIAGlobalStatesAndProperties);
+    const nimbleDialog = Dialog.compose({
+        baseName: 'dialog',
+        template: template$5,
+        styles: styles$j,
+        baseClass: Dialog,
+        shadowOptions: {
+            delegatesFocus: true
+        }
+    });
+    DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
+
     var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
     var dist = {};
@@ -18135,7 +18245,7 @@
      * which animates to be visible with a slide-in / slide-out animation.
      * Configured via 'location', 'state', 'modal', 'preventDismiss' properties.
      */
-    class Drawer extends Dialog {
+    class Drawer extends Dialog$1 {
         constructor() {
             super(...arguments);
             this.location = DrawerLocation.left;
@@ -20025,7 +20135,7 @@
 `;
 
     const styles$e = css `
-    ${styles$q}
+    ${styles$r}
 
     .control[aria-pressed='true'] {
         background-color: ${fillSelectedColor};
@@ -20465,7 +20575,7 @@
 
     const styles$c = css `
     ${display('inline-block')}
-    ${styles$k}
+    ${styles$l}
 
     :host {
         font: ${bodyFont};
@@ -20721,7 +20831,7 @@
     };
 
     const styles$b = css `
-    ${styles$l}
+    ${styles$m}
 `.withBehaviors(appearanceBehavior(DropdownAppearance.underline, css `
             .control {
                 padding-top: ${borderWidth};
@@ -21391,7 +21501,7 @@
     /* eslint-disable @typescript-eslint/indent */
     const styles$4 = css `
     ${display('inline-block')}
-    ${styles$k}
+    ${styles$l}
 
     :host {
         font: ${bodyFont};