@ni/nimble-components 11.8.3 → 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')
@@ -14700,7 +14700,7 @@
     DesignToken.create(styleNameFromTokenName(tokenNames.sectionBackgroundColor)).withDefault((element) => getColorForTheme(element, Black15, Black80, ForestGreen));
     DesignToken.create(styleNameFromTokenName(tokenNames.dividerBackgroundColor)).withDefault((element) => getColorForTheme(element, Black15, Black80, ForestGreen));
     const fillSelectedColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillSelectedColor)).withDefault((element) => hexToRgbaCssColor(getFillSelectedColorForTheme(element), 0.2));
-    const fillSelectedRgbPartialColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillSelectedRgbPartialColor)).withDefault((element) => hexToRgbPartial(getFillSelectedColorForTheme(element)));
+    DesignToken.create(styleNameFromTokenName(tokenNames.fillSelectedRgbPartialColor)).withDefault((element) => hexToRgbPartial(getFillSelectedColorForTheme(element)));
     const fillHoverSelectedColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillHoverSelectedColor)).withDefault((element) => hexToRgbaCssColor(getFillSelectedColorForTheme(element), 0.15));
     const fillHoverColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillHoverColor)).withDefault((element) => hexToRgbaCssColor(getFillHoverColorForTheme(element), 0.1));
     DesignToken.create(styleNameFromTokenName(tokenNames.fillDownColor)).withDefault((element) => hexToRgbaCssColor(getFillDownColorForTheme(element), 0.15));
@@ -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;
@@ -16739,9 +16739,7 @@
     class Combobox extends Combobox$1 {
         constructor() {
             super(...arguments);
-            this.focusOutHandler = () => {
-                this.open = false;
-            };
+            this.valueUpdatedByInput = false;
         }
         // Workaround for https://github.com/microsoft/fast/issues/5123
         setPositioning() {
@@ -16765,10 +16763,6 @@
             // Call setPositioning() after this.forcedPosition is initialized.
             this.setPositioning();
             this.updateInputAriaLabel();
-            this.addEventListener('focusout', this.focusOutHandler);
-        }
-        disconnectedCallback() {
-            this.removeEventListener('focusout', this.focusOutHandler);
         }
         toggleButtonClickHandler(e) {
             e.stopImmediatePropagation();
@@ -16795,6 +16789,50 @@
             const enabledOptions = this.filteredOptions.filter(o => !o.disabled);
             this.filteredOptions = enabledOptions;
         }
+        /**
+         * This is a workaround for the issue described here: https://github.com/microsoft/fast/issues/6267
+         * For now, we will update the value ourselves while a user types in text. Note that there is other
+         * implementation related to this (like the 'keydownEventHandler') needed to create the complete set
+         * of desired behavior described in the issue noted above.
+         */
+        // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+        inputHandler(e) {
+            const returnValue = super.inputHandler(e);
+            if (!this.valueUpdatedByInput) {
+                this.valueBeforeTextUpdate = this.value;
+            }
+            this.value = this.control.value;
+            this.valueUpdatedByInput = true;
+            return returnValue;
+        }
+        // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+        keydownHandler(e) {
+            const returnValue = super.keydownHandler(e);
+            if (e.ctrlKey || e.altKey) {
+                return returnValue;
+            }
+            switch (e.key) {
+                case keyEnter:
+                    this.emitChangeIfValueUpdated();
+                    break;
+                case keyArrowDown:
+                case keyArrowUp:
+                    if (this.open && this.valueUpdatedByInput) {
+                        this.valueUpdatedByInput = false;
+                    }
+                    break;
+                default:
+                    return returnValue;
+            }
+            return returnValue;
+        }
+        // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+        focusoutHandler(e) {
+            const returnValue = super.focusoutHandler(e);
+            this.open = false;
+            this.emitChangeIfValueUpdated();
+            return returnValue;
+        }
         openChanged() {
             super.openChanged();
             if (this.dropdownButton) {
@@ -16814,6 +16852,24 @@
                 inputElement?.removeAttribute('aria-label');
             }
         }
+        /**
+         * This will only emit a `change` event after text entry where the text in the input prior to
+         * typing is different than the text present upon an attempt to commit (e.g. pressing <Enter>).
+         * So, for a concrete example:
+         * 1) User types 'Sue' (when Combobox input was blank).
+         * 2) User presses <Enter> -> 'change' event fires
+         * 3) User deletes 'Sue'
+         * 4) User re-types 'Sue'
+         * 5) User presses <Enter> -> NO 'change' event is fired
+         */
+        emitChangeIfValueUpdated() {
+            if (this.valueUpdatedByInput) {
+                if (this.value !== this.valueBeforeTextUpdate) {
+                    this.$emit('change');
+                }
+                this.valueUpdatedByInput = false;
+            }
+        }
     }
     __decorate([
         observable
@@ -16825,7 +16881,7 @@
         baseName: 'combobox',
         baseClass: Combobox$1,
         template: comboboxTemplate,
-        styles: styles$j,
+        styles: styles$k,
         shadowOptions: {
             delegatesFocus: true
         },
@@ -16862,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 = {};
@@ -18079,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;
@@ -19969,7 +20135,7 @@
 `;
 
     const styles$e = css `
-    ${styles$q}
+    ${styles$r}
 
     .control[aria-pressed='true'] {
         background-color: ${fillSelectedColor};
@@ -20409,7 +20575,7 @@
 
     const styles$c = css `
     ${display('inline-block')}
-    ${styles$k}
+    ${styles$l}
 
     :host {
         font: ${bodyFont};
@@ -20522,11 +20688,6 @@
         outline: none;
     }
 
-    .control::selection {
-        color: ${controlLabelFontColor};
-        background: rgba(${fillSelectedRgbPartialColor}, 0.3);
-    }
-
     .control::placeholder {
         color: ${controlLabelFontColor};
     }
@@ -20670,7 +20831,7 @@
     };
 
     const styles$b = css `
-    ${styles$l}
+    ${styles$m}
 `.withBehaviors(appearanceBehavior(DropdownAppearance.underline, css `
             .control {
                 padding-top: ${borderWidth};
@@ -21250,11 +21411,6 @@
         box-shadow: none;
     }
 
-    .control::selection {
-        color: ${controlLabelFontColor};
-        background: rgba(${fillSelectedRgbPartialColor}, 0.3);
-    }
-
     .control::placeholder {
         color: ${controlLabelFontColor};
     }
@@ -21345,7 +21501,7 @@
     /* eslint-disable @typescript-eslint/indent */
     const styles$4 = css `
     ${display('inline-block')}
-    ${styles$k}
+    ${styles$l}
 
     :host {
         font: ${bodyFont};
@@ -21470,11 +21626,6 @@
         text-overflow: clip;
     }
 
-    .control::selection {
-        color: ${controlLabelFontColor};
-        background: rgba(${fillSelectedRgbPartialColor}, 0.3);
-    }
-
     .control::placeholder {
         color: ${controlLabelFontColor};
     }