@ni/nimble-components 11.8.5 → 11.9.0

package/dist/esm/all-components.d.ts

@@ -10,6 +10,7 @@ import './button';
 import './card-button';
 import './checkbox';
 import './combobox';
+import './dialog';
 import './drawer';
 import './icons/all-icons';
 import './list-option';

package/dist/esm/all-components.js

@@ -10,6 +10,7 @@ import './button';
 import './card-button';
 import './checkbox';
 import './combobox';
+import './dialog';
 import './drawer';
 import './icons/all-icons';
 import './list-option';

package/dist/esm/all-components.js.map

@@ -1 +1 @@
-{"version":3,"file":"all-components.js","sourceRoot":"","sources":["../../src/all-components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,mBAAmB,CAAC;AAC3B,OAAO,cAAc,CAAC;AACtB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,eAAe,CAAC;AACvB,OAAO,YAAY,CAAC;AACpB,OAAO,YAAY,CAAC;AACpB,OAAO,UAAU,CAAC;AAClB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AACvB,OAAO,QAAQ,CAAC;AAChB,OAAO,eAAe,CAAC;AACvB,OAAO,aAAa,CAAC;AACrB,OAAO,gBAAgB,CAAC;AACxB,OAAO,UAAU,CAAC;AAClB,OAAO,UAAU,CAAC;AAClB,OAAO,OAAO,CAAC;AACf,OAAO,aAAa,CAAC;AACrB,OAAO,QAAQ,CAAC;AAChB,OAAO,gBAAgB,CAAC;AACxB,OAAO,aAAa,CAAC;AACrB,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,iBAAiB,CAAC;AACzB,OAAO,WAAW,CAAC;AACnB,OAAO,WAAW,CAAC;AACnB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC"}
+{"version":3,"file":"all-components.js","sourceRoot":"","sources":["../../src/all-components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,mBAAmB,CAAC;AAC3B,OAAO,cAAc,CAAC;AACtB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,eAAe,CAAC;AACvB,OAAO,YAAY,CAAC;AACpB,OAAO,YAAY,CAAC;AACpB,OAAO,UAAU,CAAC;AAClB,OAAO,UAAU,CAAC;AAClB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AACvB,OAAO,QAAQ,CAAC;AAChB,OAAO,eAAe,CAAC;AACvB,OAAO,aAAa,CAAC;AACrB,OAAO,gBAAgB,CAAC;AACxB,OAAO,UAAU,CAAC;AAClB,OAAO,UAAU,CAAC;AAClB,OAAO,OAAO,CAAC;AACf,OAAO,aAAa,CAAC;AACrB,OAAO,QAAQ,CAAC;AAChB,OAAO,gBAAgB,CAAC;AACxB,OAAO,aAAa,CAAC;AACrB,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,iBAAiB,CAAC;AACzB,OAAO,WAAW,CAAC;AACnB,OAAO,WAAW,CAAC;AACnB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC"}

package/dist/esm/dialog/index.d.ts

@@ -0,0 +1,64 @@
+import { ARIAGlobalStatesAndProperties, FoundationElement } from '@microsoft/fast-foundation';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-dialog': Dialog;
+    }
+}
+/**
+ * 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).
+ */
+export declare const USER_DISMISSED: unique symbol;
+export declare type UserDismissed = typeof USER_DISMISSED;
+/**
+ * This is a workaround for an incomplete definition of the native dialog element:
+ * https://github.com/microsoft/TypeScript/issues/48267
+ * @internal
+ */
+export interface ExtendedDialog extends HTMLDialogElement {
+    showModal(): void;
+    close(): void;
+}
+/**
+ * A nimble-styled dialog.
+ */
+export declare class Dialog<CloseReason = void> extends FoundationElement {
+    /**
+     * @public
+     * @description
+     * Prevents dismissing the dialog via the Escape key
+     */
+    preventDismiss: boolean;
+    /**
+     * The ref to the internal dialog element.
+     *
+     * @internal
+     */
+    readonly dialogElement: ExtendedDialog;
+    /**
+     * True if the dialog is open/showing, false otherwise
+     */
+    get open(): boolean;
+    private resolveShow?;
+    private closeReason;
+    /**
+     * 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.
+     */
+    show(): Promise<CloseReason | UserDismissed>;
+    /**
+     * Closes the dialog
+     * @param reason An optional value indicating how/why the dialog was closed.
+     */
+    close(reason: CloseReason): void;
+    /**
+     * @internal
+     */
+    closeHandler(): boolean;
+    /**
+     * @internal
+     */
+    cancelHandler(event: Event): boolean;
+}
+export interface Dialog extends ARIAGlobalStatesAndProperties {
+}

package/dist/esm/dialog/index.js

@@ -0,0 +1,90 @@
+import { __decorate } from "tslib";
+import { attr } from '@microsoft/fast-element';
+import { applyMixins, ARIAGlobalStatesAndProperties, DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
+import { styles } from './styles';
+import { template } from './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).
+ */
+export const USER_DISMISSED = Symbol('user dismissed');
+/**
+ * A nimble-styled dialog.
+ */
+// eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+export 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,
+    styles,
+    baseClass: Dialog,
+    shadowOptions: {
+        delegatesFocus: true
+    }
+});
+DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
+//# sourceMappingURL=index.js.map

package/dist/esm/dialog/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/dialog/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,WAAW,EACX,6BAA6B,EAC7B,YAAY,EACZ,iBAAiB,EACpB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAkB,MAAM,CAAC,gBAAgB,CAAC,CAAC;AAatE;;GAEG;AACH,mEAAmE;AACnE,MAAM,OAAO,MAA2B,SAAQ,iBAAiB;IAAjE;;QACI;;;;WAIG;QAEI,mBAAc,GAAG,KAAK,CAAC;IAiElC,CAAC;IAxDG;;OAEG;IACH,IAAW,IAAI;QACX,OAAO,IAAI,CAAC,WAAW,KAAK,SAAS,CAAC;IAC1C,CAAC;IAKD;;;OAGG;IACI,KAAK,CAAC,IAAI;QACb,IAAI,IAAI,CAAC,IAAI,EAAE;YACX,MAAM,IAAI,KAAK,CAAC,wBAAwB,CAAC,CAAC;SAC7C;QACD,IAAI,CAAC,aAAa,CAAC,SAAS,EAAE,CAAC;QAC/B,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,OAAO,EAAE,EAAE;YACpC,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC;QAC/B,CAAC,CAAC,CAAC;IACP,CAAC;IAED;;;OAGG;IACI,KAAK,CAAC,MAAmB;QAC5B,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACZ,MAAM,IAAI,KAAK,CAAC,oBAAoB,CAAC,CAAC;SACzC;QACD,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;QAC1B,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;IAC/B,CAAC;IAED;;OAEG;IACI,YAAY;QACf,IAAI,CAAC,WAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACpC,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC;QAC7B,OAAO,IAAI,CAAC;IAChB,CAAC;IAED;;OAEG;IACI,aAAa,CAAC,KAAY;QAC7B,IAAI,IAAI,CAAC,cAAc,EAAE;YACrB,KAAK,CAAC,cAAc,EAAE,CAAC;SAC1B;aAAM;YACH,IAAI,CAAC,WAAW,GAAG,cAAc,CAAC;SACrC;QACD,OAAO,IAAI,CAAC;IAChB,CAAC;CACJ;AAjEG;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;8CAC1B;AAqElC,WAAW,CAAC,MAAM,EAAE,6BAA6B,CAAC,CAAC;AAEnD,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC;IAChC,QAAQ,EAAE,QAAQ;IAClB,QAAQ;IACR,MAAM;IACN,SAAS,EAAE,MAAM;IACjB,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC"}

package/dist/esm/dialog/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/dialog/styles.js

@@ -0,0 +1,14 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { applicationBackgroundColor, borderWidth, popupBoxShadowColor, popupBorderColor } from '../theme-provider/design-tokens';
+export const styles = css `
+    ${display('grid')}
+
+    dialog {
+        background-color: ${applicationBackgroundColor};
+        border: ${borderWidth} solid ${popupBorderColor};
+        box-shadow: 0px 2px 3px ${popupBoxShadowColor};
+        max-width: 50%;
+    }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/dialog/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/dialog/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,0BAA0B,EAC1B,WAAW,EACX,mBAAmB,EACnB,gBAAgB,EACnB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;4BAGO,0BAA0B;kBACpC,WAAW,UAAU,gBAAgB;kCACrB,mBAAmB;;;CAGpD,CAAC"}

package/dist/esm/dialog/template.d.ts

@@ -0,0 +1,2 @@
+import type { Dialog } from '.';
+export declare const template: import("@microsoft/fast-element").ViewTemplate<Dialog<void>, any>;

package/dist/esm/dialog/template.js

@@ -0,0 +1,15 @@
+import { html, ref } from '@microsoft/fast-element';
+export const template = 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>
+`;
+//# sourceMappingURL=template.js.map

package/dist/esm/dialog/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/dialog/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAGpD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAQ;;;cAGtB,GAAG,CAAC,eAAe,CAAC;;0BAER,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;uBACnB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC;sBACnC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,EAAE;;;;;CAK1C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "11.8.5",
+  "version": "11.9.0",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run generate-icons && npm run build-components && npm run bundle-components && npm run generate-scss && npm run build-storybook",