@ni/nimble-components 13.0.0 → 14.0.0

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

@@ -26,12 +26,28 @@ export declare class Dialog<CloseReason = void> extends FoundationElement {
      * Prevents dismissing the dialog via the Escape key
      */
     preventDismiss: boolean;
+    /**
+     * @public
+     * @description
+     * Hides the header of the dialog.
+     */
+    headerHidden: boolean;
+    /**
+     * @public
+     * @description
+     * Hides the footer of the dialog.
+     */
+    footerHidden: boolean;
     /**
      * The ref to the internal dialog element.
      *
      * @internal
      */
     readonly dialogElement: ExtendedDialog;
+    /** @internal */
+    footerIsEmpty: boolean;
+    /** @internal */
+    readonly slottedFooterElements?: HTMLElement[];
     /**
      * True if the dialog is open/showing, false otherwise
      */
@@ -47,6 +63,7 @@ export declare class Dialog<CloseReason = void> extends FoundationElement {
      * @param reason An optional value indicating how/why the dialog was closed.
      */
     close(reason: CloseReason): void;
+    slottedFooterElementsChanged(_prev: HTMLElement[] | undefined, next: HTMLElement[] | undefined): void;
     /**
      * @internal
      */

package/dist/esm/dialog/index.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { attr } from '@microsoft/fast-element';
+import { attr, observable } from '@microsoft/fast-element';
 import { applyMixins, ARIAGlobalStatesAndProperties, DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
 import { UserDismissed } from '../patterns/dialog/types';
 import { styles } from './styles';
@@ -18,6 +18,20 @@ export class Dialog extends FoundationElement {
          * Prevents dismissing the dialog via the Escape key
          */
         this.preventDismiss = false;
+        /**
+         * @public
+         * @description
+         * Hides the header of the dialog.
+         */
+        this.headerHidden = false;
+        /**
+         * @public
+         * @description
+         * Hides the footer of the dialog.
+         */
+        this.footerHidden = false;
+        /** @internal */
+        this.footerIsEmpty = true;
     }
     /**
      * True if the dialog is open/showing, false otherwise
@@ -50,6 +64,9 @@ export class Dialog extends FoundationElement {
         this.resolveShow(reason);
         this.resolveShow = undefined;
     }
+    slottedFooterElementsChanged(_prev, next) {
+        this.footerIsEmpty = !next?.length;
+    }
     /**
      * @internal
      */
@@ -70,6 +87,18 @@ Dialog.UserDismissed = UserDismissed;
 __decorate([
     attr({ attribute: 'prevent-dismiss', mode: 'boolean' })
 ], Dialog.prototype, "preventDismiss", void 0);
+__decorate([
+    attr({ attribute: 'header-hidden', mode: 'boolean' })
+], Dialog.prototype, "headerHidden", void 0);
+__decorate([
+    attr({ attribute: 'footer-hidden', mode: 'boolean' })
+], Dialog.prototype, "footerHidden", void 0);
+__decorate([
+    observable
+], Dialog.prototype, "footerIsEmpty", void 0);
+__decorate([
+    observable
+], Dialog.prototype, "slottedFooterElements", void 0);
 applyMixins(Dialog, ARIAGlobalStatesAndProperties);
 const nimbleDialog = Dialog.compose({
     baseName: 'dialog',

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

@@ -1 +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,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,aAAa,EAAE,CAAC;AAkBzB;;GAEG;AACH,mEAAmE;AACnE,MAAM,OAAO,MAA2B,SAAQ,iBAAiB;IAAjE;;QAKI;;;;WAIG;QAEI,mBAAc,GAAG,KAAK,CAAC;IAyDlC,CAAC;IAhDG;;OAEG;IACH,IAAW,IAAI;QACX,OAAO,IAAI,CAAC,WAAW,KAAK,SAAS,CAAC;IAC1C,CAAC;IAID;;;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,aAAa,CAAC,KAAK,EAAE,CAAC;QAC3B,IAAI,CAAC,WAAY,CAAC,MAAM,CAAC,CAAC;QAC1B,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC;IACjC,CAAC;IAED;;OAEG;IACI,aAAa,CAAC,KAAY;QAC7B,IAAI,IAAI,CAAC,cAAc,EAAE;YACrB,KAAK,CAAC,cAAc,EAAE,CAAC;SAC1B;aAAM;YACH,IAAI,CAAC,WAAY,CAAC,aAAa,CAAC,CAAC;YACjC,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC;SAChC;QACD,OAAO,IAAI,CAAC;IAChB,CAAC;;AAlED,uDAAuD;AACvD,gEAAgE;AACzC,oBAAa,GAAG,aAAa,CAAC;AAQrD;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;8CAC1B;AA6DlC,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;CACpB,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/dialog/index.ts"],"names":[],"mappings":"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"}

package/dist/esm/dialog/styles.js

@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { applicationBackgroundColor, borderWidth, popupBoxShadowColor, popupBorderColor } from '../theme-provider/design-tokens';
+import { applicationBackgroundColor, standardPadding, actionRgbPartialColor, bodyFont, bodyFontColor, titlePlus1Font, titlePlus1FontColor, smallPadding, subtitleFont, subtitleFontColor } from '../theme-provider/design-tokens';
 import { modalBackdropColorThemeColorStatic, modalBackdropColorThemeDarkStatic, modalBackdropColorThemeLightStatic } from '../theme-provider/design-tokens-static';
 import { Theme } from '../theme-provider/types';
 import { themeBehavior } from '../utilities/style/theme';
@@ -8,10 +8,98 @@ export const styles = css `
     ${display('grid')}
 
     dialog {
+        flex-direction: column;
         background-color: ${applicationBackgroundColor};
-        border: ${borderWidth} solid ${popupBorderColor};
-        box-shadow: 0px 2px 3px ${popupBoxShadowColor};
-        max-width: 50%;
+        border: none;
+        box-shadow: 0px 4px 8px #0000004d;
+        padding: 0px;
+        width: 400px;
+        max-height: 600px;
+    }
+
+    dialog[open] {
+        display: flex;
+    }
+
+    header {
+        min-height: 48px;
+        padding: 24px 24px 0px 24px;
+        flex: none;
+        display: flex;
+        flex-direction: column;
+        gap: ${smallPadding};
+    }
+
+    :host([header-hidden]) header {
+        ${
+/**
+ * Hide content visually while keeping it screen reader-accessible.
+ * Source: https://webaim.org/techniques/css/invisiblecontent/#techniques
+ * See discussion here: https://github.com/microsoft/fast/issues/5740#issuecomment-1068195035
+ */
+''}
+        display: inline-block;
+        height: 1px;
+        width: 1px;
+        position: absolute;
+        margin: -1px;
+        clip: rect(1px, 1px, 1px, 1px);
+        clip-path: inset(50%);
+        overflow: hidden;
+        padding: 0;
+    }
+
+    .title {
+        font: ${titlePlus1Font};
+        color: ${titlePlus1FontColor};
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .subtitle {
+        font: ${subtitleFont};
+        color: ${subtitleFontColor};
+    }
+
+    section {
+        flex: auto;
+        overflow-y: auto;
+        font: ${bodyFont};
+        color: ${bodyFontColor};
+        display: flex;
+        flex-direction: column;
+        gap: ${standardPadding};
+
+        ${
+/**
+ * Use padding on all sides except the top because the padding is within
+ * the scrollable area. The whole scrollable area, including the top of
+ * the scrollbar, should be 24px away from the header, so use a margin
+ * instead of padding for the top.
+ */
+''}
+        padding: 0px 24px 24px 24px;
+        margin-top: 24px;
+    }
+
+    footer {
+        border-top: 2px solid rgba(${actionRgbPartialColor}, 0.1);
+        padding: 24px;
+        flex: none;
+        display: flex;
+        justify-content: flex-end;
+        gap: ${standardPadding};
+    }
+
+    footer.empty {
+        padding: 0px;
+        height: 72px;
+        border-top: none;
+    }
+
+    :host([footer-hidden]) footer {
+        display: none;
     }
 `.withBehaviors(
 /*

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

@@ -1 +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;AACzC,OAAO,EACH,kCAAkC,EAClC,iCAAiC,EACjC,kCAAkC,EACrC,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;4BAGO,0BAA0B;kBACpC,WAAW,UAAU,gBAAgB;kCACrB,mBAAmB;;;CAGpD,CAAC,aAAa;AACX;;;GAGG;AACH,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8BAEmB,kCAAkC;;SAEvD,CACJ,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;8BAEmB,iCAAiC;;SAEtD,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8BAEmB,kCAAkC;;SAEvD,CACJ,CACJ,CAAC"}
+{"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,eAAe,EACf,qBAAqB,EACrB,QAAQ,EACR,aAAa,EACb,cAAc,EACd,mBAAmB,EACnB,YAAY,EACZ,YAAY,EACZ,iBAAiB,EACpB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACH,kCAAkC,EAClC,iCAAiC,EACjC,kCAAkC,EACrC,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;4BAIO,0BAA0B;;;;;;;;;;;;;;;;;;eAkBvC,YAAY;;;;UAIjB;AACE;;;;GAIG;AACH,EACJ;;;;;;;;;;;;;gBAaQ,cAAc;iBACb,mBAAmB;;;;;;;gBAOpB,YAAY;iBACX,iBAAiB;;;;;;gBAMlB,QAAQ;iBACP,aAAa;;;eAGf,eAAe;;UAEpB;AACE;;;;;GAKG;AACH,EACJ;;;;;;qCAM6B,qBAAqB;;;;;eAK3C,eAAe;;;;;;;;;;;;CAY7B,CAAC,aAAa;AACX;;;GAGG;AACH,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8BAEmB,kCAAkC;;SAEvD,CACJ,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;8BAEmB,iCAAiC;;SAEtD,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8BAEmB,kCAAkC;;SAEvD,CACJ,CACJ,CAAC"}

package/dist/esm/dialog/template.js

@@ -1,13 +1,29 @@
-import { html, ref } from '@microsoft/fast-element';
+import { html, ref, slotted } from '@microsoft/fast-element';
 export const template = html `
     <template>
         <dialog
             ${ref('dialogElement')}
-            role="alertdialog"
-            aria-label="${x => x.ariaLabel}"
+            role="dialog"
             @cancel="${(x, c) => x.cancelHandler(c.event)}"
+            aria-labelledby="header"
         >
-            <slot></slot>
+            <header id="header">
+                <div class="title">
+                    <slot name="title"></slot>
+                </div>
+                <div class="subtitle">
+                    <slot name="subtitle"></slot>
+                </div>
+            </header>
+            <section>
+                <slot></slot>
+            </section>
+            <footer class="${x => (x.footerIsEmpty ? 'empty' : '')}">
+                <slot
+                    name="footer"
+                    ${slotted({ property: 'slottedFooterElements' })}
+                ></slot>
+            </footer>
         </dialog>
     </template>
 `;

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

@@ -1 +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;;;;;CAKxD,CAAC"}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/dialog/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAG7D,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAQ;;;cAGtB,GAAG,CAAC,eAAe,CAAC;;uBAEX,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC;;;;;;;;;;;;;;6BAc5B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;;;sBAG5C,OAAO,CAAC,EAAE,QAAQ,EAAE,uBAAuB,EAAE,CAAC;;;;;CAKnE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "13.0.0",
+  "version": "14.0.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",