@ni/nimble-components 29.3.7 → 29.4.0

package/dist/all-components-bundle.js

@@ -16280,7 +16280,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Mon, 17 Jun 2024 15:00:56 GMT
+   * Generated on Mon, 17 Jun 2024 16:25:28 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -19800,7 +19800,8 @@
       popupIconWarningLabel: 'Warning',
       popupIconInformationLabel: 'Information',
       filterSearchLabel: 'Search',
-      filterNoResultsLabel: 'No items found'
+      filterNoResultsLabel: 'No items found',
+      loadingLabel: 'Loading…'
   };
 
   const popupDismissLabel = DesignToken.create({
@@ -19835,6 +19836,10 @@
       name: 'filter-no-results-label',
       cssCustomPropertyName: null
   }).withDefault(coreLabelDefaults.filterNoResultsLabel);
+  const loadingLabel = DesignToken.create({
+      name: 'loading-label',
+      cssCustomPropertyName: null
+  }).withDefault(coreLabelDefaults.loadingLabel);
 
   // prettier-ignore
   const template$z = html `
@@ -20907,7 +20912,8 @@
    */
   const FilterMode = {
       none: undefined,
-      standard: 'standard'
+      standard: 'standard',
+      manual: 'manual'
   };
 
   const styles$H = css `
@@ -24657,7 +24663,8 @@
       popupIconWarning: popupIconWarningLabel,
       popupIconInformation: popupIconInformationLabel,
       filterSearch: filterSearchLabel,
-      filterNoResults: filterNoResultsLabel
+      filterNoResults: filterNoResultsLabel,
+      loading: loadingLabel
   };
   /**
    * Core label provider for Nimble
@@ -24692,6 +24699,9 @@
   __decorate$1([
       attr({ attribute: 'filter-no-results' })
   ], LabelProviderCore.prototype, "filterNoResults", void 0);
+  __decorate$1([
+      attr({ attribute: 'loading' })
+  ], LabelProviderCore.prototype, "loading", void 0);
   const nimbleLabelProviderCore = LabelProviderCore.compose({
       baseName: 'label-provider-core',
       styles: styles$E
@@ -59399,6 +59409,37 @@ img.ProseMirror-separator {
         align-items: center;
         padding: ${smallPadding} ${mediumPadding};
     }
+
+    .loading-container {
+        padding-left: ${mediumPadding};
+        padding-right: ${mediumPadding};
+        display: flex;
+        height: ${controlHeight};
+        flex: 1 0 auto;
+    }
+
+    .loading-container.above {
+        align-items: end;
+        padding-bottom: ${smallPadding};
+    }
+
+    .loading-container.below {
+        align-items: normal;
+        padding-top: ${smallPadding};
+    }
+
+    .loading-container.empty {
+        padding: ${smallPadding} ${mediumPadding};
+        align-items: center;
+    }
+
+    .loading-label {
+        color: ${placeholderFontColor};
+    }
+
+    .loading-spinner {
+        margin-left: auto;
+    }
 `.withBehaviors(appearanceBehavior(DropdownAppearance.block, css `
             :host([error-visible]) .control {
                 border-bottom-width: ${borderWidth};
@@ -59406,11 +59447,235 @@ img.ProseMirror-separator {
             }
         `), themeBehavior(Theme.color, css `
             .filter-field,
-            .no-results-label {
+            .no-results-label,
+            .loading-container {
                 background: ${hexToRgbaCssColor(White, 0.15)};
             }
         `));
 
+  const styles$p = css `
+    ${display('inline-grid')}
+
+    :host {
+        height: ${spinnerSmallHeight};
+        aspect-ratio: 1 / 1;
+    }
+
+    div.overlay {
+        z-index: ${ZIndexLevels.zIndex1};
+        margin: max(2px, 6.25%);
+        grid-area: 1/1;
+    }
+
+    div.container {
+        margin: max(2px, 6.25%);
+        grid-area: 1/1;
+        ${
+/**
+ * At some spinner sizes / browser zoom levels, the spinner bits/squares appear to slightly overlap visually.
+ * If we set a color with transparency on each bit, it'll look wrong in the overlapping region (since the opacity
+ * combines and affects the color at the overlapping spot).
+ * Currently all 3 themes use a color with opacity = 0.6, so that's applied here on the parent element instead,
+ * which avoids that issue.
+ */
+''}
+        opacity: 0.6;
+    }
+
+    :host([appearance='accent']) div.container {
+        opacity: 1;
+    }
+
+    div.bit1,
+    div.bit2 {
+        background: var(--ni-private-spinner-bits-background-color);
+        width: 50%;
+        height: 50%;
+        margin: auto;
+        animation-duration: 1600ms;
+        animation-iteration-count: infinite;
+        animation-play-state: var(
+            --ni-private-spinner-animation-play-state,
+            running
+        );
+        animation-timing-function: cubic-bezier(0.65, 0, 0.35, 0);
+    }
+
+    div.bit1 {
+        animation-name: ni-private-spinner-keyframes-1;
+    }
+
+    div.bit2 {
+        animation-name: ni-private-spinner-keyframes-2;
+    }
+
+    @media (prefers-reduced-motion) {
+        div.bit1,
+        div.bit2 {
+            animation-timing-function: ease-in-out, steps(1);
+            animation-duration: 3200ms;
+        }
+
+        div.bit1 {
+            animation-name: ni-private-spinner-no-motion-opacity-keyframes,
+                ni-private-spinner-no-motion-transform-keyframes-1;
+        }
+
+        div.bit2 {
+            animation-name: ni-private-spinner-no-motion-opacity-keyframes,
+                ni-private-spinner-no-motion-transform-keyframes-2;
+        }
+    }
+
+    @keyframes ni-private-spinner-keyframes-1 {
+        0%,
+        100% {
+            transform: translate(-50%, 0);
+        }
+
+        25% {
+            transform: translate(50%, 0);
+        }
+
+        50% {
+            transform: translate(50%, 100%);
+        }
+
+        75% {
+            transform: translate(-50%, 100%);
+        }
+    }
+
+    @keyframes ni-private-spinner-keyframes-2 {
+        0%,
+        100% {
+            transform: translate(50%, 0);
+        }
+
+        25% {
+            transform: translate(-50%, 0);
+        }
+
+        50% {
+            transform: translate(-50%, -100%);
+        }
+
+        75% {
+            transform: translate(50%, -100%);
+        }
+    }
+
+    @keyframes ni-private-spinner-no-motion-opacity-keyframes {
+        0%,
+        50%,
+        100% {
+            opacity: 0;
+        }
+
+        25%,
+        75% {
+            opacity: 1;
+        }
+    }
+
+    @keyframes ni-private-spinner-no-motion-transform-keyframes-1 {
+        0%,
+        100% {
+            transform: translate(-50%, 0);
+        }
+        50% {
+            transform: translate(50%, 0);
+        }
+    }
+
+    @keyframes ni-private-spinner-no-motion-transform-keyframes-2 {
+        0%,
+        100% {
+            transform: translate(50%, 0);
+        }
+
+        50% {
+            transform: translate(-50%, 0);
+        }
+    }
+`.withBehaviors(themeBehavior(Theme.light, css `
+            :host {
+                --ni-private-spinner-bits-background-color: ${Black91};
+            }
+            :host([appearance='accent']) {
+                --ni-private-spinner-bits-background-color: ${DigitalGreenLight};
+            }
+        `), themeBehavior(Theme.dark, css `
+            :host {
+                --ni-private-spinner-bits-background-color: ${Black15};
+            }
+            :host([appearance='accent']) {
+                --ni-private-spinner-bits-background-color: ${PowerGreen};
+            }
+        `), themeBehavior(Theme.color, css `
+            :host {
+                --ni-private-spinner-bits-background-color: ${White};
+            }
+            :host([appearance='accent']) {
+                --ni-private-spinner-bits-background-color: ${PowerGreen};
+            }
+        `));
+
+  /* eslint-disable @typescript-eslint/indent */
+  // prettier-ignore
+  const template$l = html `
+    <template role="progressbar">
+        ${''
+/**
+ * In Firefox, the 'title' set on the spinner is very finicky when
+ * the spinner is animating. Therefore, put a transparent overlay on
+ * top of the spinning bits so that the title displays as expected.
+ */
+}
+        <div class="overlay"></div>
+
+        <div class="container">
+            <div class="bit1"></div>
+            <div class="bit2"></div>
+        </div>
+    </template>
+`;
+
+  /**
+   * Types of spinner appearance.
+   * @public
+   */
+  const SpinnerAppearance = {
+      default: undefined,
+      accent: 'accent'
+  };
+
+  /**
+   * A Nimble-styled spinner component.
+   * A spinner is an animating indicator that can be placed in a particular region of a page to represent loading progress, or an ongoing operation, of an indeterminate / unknown duration.
+   */
+  class Spinner extends FoundationElement {
+      constructor() {
+          super(...arguments);
+          /**
+           * @public
+           * @description
+           * The appearance the spinner area should have.
+           */
+          this.appearance = SpinnerAppearance.default;
+      }
+  }
+  __decorate$1([
+      attr
+  ], Spinner.prototype, "appearance", void 0);
+  const nimbleSpinner = Spinner.compose({
+      baseName: 'spinner',
+      template: template$l,
+      styles: styles$p
+  });
+  DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSpinner());
+  const spinnerTag = 'nimble-spinner';
+
   const isListOption = (el) => {
       return el instanceof ListOption;
   };
@@ -59419,7 +59684,7 @@ img.ProseMirror-separator {
   };
   /* eslint-disable @typescript-eslint/indent */
   // prettier-ignore
-  const template$l = (context, definition) => html `
+  const template$k = (context, definition) => html `
     <template
         class="${x => [
     x.collapsible && 'collapsible',
@@ -59509,7 +59774,7 @@ img.ProseMirror-separator {
                                 aria-controls="${x => x.ariaControls}"
                                 aria-activedescendant="${x => x.ariaActiveDescendant}"
                                 @input="${(x, c) => x.inputHandler(c.event)}"
-                                @click="${(x, c) => x.inputClickHandler(c.event)}"
+                                @click="${(x, c) => x.ignoreClickHandler(c.event)}"
                                 placeholder="${x => filterSearchLabel.getValueFor(x)}"
                                 value="${x => x.filter}"
                             />
@@ -59526,11 +59791,20 @@ img.ProseMirror-separator {
 })}
                         ></slot>
                     </div>
-                    ${when(x => (x.filterMode !== FilterMode.none && x.filteredOptions.length === 0), html `
+                    ${when(x => (x.filterMode !== FilterMode.none && x.filteredOptions.length === 0 && !x.loadingVisible), html `
                         <span class="no-results-label ${x => x.positionAttribute}">
                             ${x => filterNoResultsLabel.getValueFor(x)}
                         </span>
                     `)}
+                    ${when(x => x.loadingVisible, html `
+                        <div class="loading-container ${x => x.positionAttribute} ${x => (x.filteredOptions.length === 0 ? 'empty' : '')}"
+                            @click="${(x, c) => x.ignoreClickHandler(c.event)}">
+                            <span class="loading-label">
+                                ${x => loadingLabel.getValueFor(x)}
+                            </span>
+                            <${spinnerTag} class="loading-spinner" appearance="accent"></${spinnerTag}>
+                        </div>
+                    `)}
                 </div>
             </div>
         </${anchoredRegionTag}>
@@ -59574,6 +59848,7 @@ img.ProseMirror-separator {
           this.errorVisible = false;
           this.filterMode = FilterMode.none;
           this.clearable = false;
+          this.loadingVisible = false;
           /**
            * @internal
            */
@@ -59833,8 +60108,8 @@ img.ProseMirror-separator {
       /**
        * @internal
        */
-      inputClickHandler(e) {
-          e.stopPropagation(); // clicking in filter input shouldn't close dropdown
+      ignoreClickHandler(e) {
+          e.stopPropagation();
       }
       /**
        * @internal
@@ -59867,19 +60142,24 @@ img.ProseMirror-separator {
        */
       inputHandler(e) {
           this.filter = this.filterInput?.value ?? '';
-          this.filterOptions();
-          const enabledOptions = this.filteredOptions.filter(o => !o.disabled);
-          let activeOptionIndex = this.filter !== ''
-              ? this.openActiveIndex ?? this.selectedIndex
-              : this.selectedIndex;
-          if (enabledOptions.length > 0
-              && !enabledOptions.find(o => o === this.options[activeOptionIndex])) {
-              activeOptionIndex = this.options.indexOf(enabledOptions[0]);
+          if (this.filterMode === FilterMode.standard) {
+              this.filterOptions();
+              const enabledOptions = this.filteredOptions.filter(o => !o.disabled);
+              let activeOptionIndex = this.filter !== ''
+                  ? this.openActiveIndex ?? this.selectedIndex
+                  : this.selectedIndex;
+              if (enabledOptions.length > 0
+                  && !enabledOptions.find(o => o === this.options[activeOptionIndex])) {
+                  activeOptionIndex = this.options.indexOf(enabledOptions[0]);
+              }
+              else if (enabledOptions.length === 0) {
+                  activeOptionIndex = -1;
+              }
+              this.setActiveOption(activeOptionIndex);
           }
-          else if (enabledOptions.length === 0) {
-              activeOptionIndex = -1;
+          if (this.filterMode !== FilterMode.none) {
+              this.emitFilterInputEvent();
           }
-          this.setActiveOption(activeOptionIndex);
           if (e.inputType.includes('deleteContent') || !this.filter.length) {
               return true;
           }
@@ -60152,6 +60432,9 @@ img.ProseMirror-separator {
           if (this.filterInput) {
               this.filterInput.value = '';
           }
+          if (this.filterMode !== FilterMode.none) {
+              this.emitFilterInputEvent();
+          }
           this.ariaControls = '';
           this.ariaExpanded = 'false';
       }
@@ -60350,7 +60633,9 @@ img.ProseMirror-separator {
           if (option.hidden) {
               return true;
           }
-          return !this.filterMatchesText(option.text);
+          return this.filterMode === FilterMode.standard
+              ? !this.filterMatchesText(option.text)
+              : false;
       }
       filterMatchesText(text) {
           const filter = this.filter.toLowerCase();
@@ -60449,6 +60734,12 @@ img.ProseMirror-separator {
       filterChanged() {
           this.filterOptions();
       }
+      emitFilterInputEvent() {
+          const eventDetail = {
+              filterText: this.filter
+          };
+          this.$emit('filter-input', eventDetail, { bubbles: true });
+      }
       maxHeightChanged() {
           this.updateListboxMaxHeightCssVariable();
       }
@@ -60483,6 +60774,9 @@ img.ProseMirror-separator {
   __decorate$1([
       attr({ attribute: 'clearable', mode: 'boolean' })
   ], Select.prototype, "clearable", void 0);
+  __decorate$1([
+      attr({ attribute: 'loading-visible', mode: 'boolean' })
+  ], Select.prototype, "loadingVisible", void 0);
   __decorate$1([
       observable
   ], Select.prototype, "displayPlaceholder", void 0);
@@ -60525,7 +60819,7 @@ img.ProseMirror-separator {
   const nimbleSelect = Select.compose({
       baseName: 'select',
       baseClass: Select$2,
-      template: template$l,
+      template: template$k,
       styles: styles$q,
       indicator: arrowExpanderDown16X16.data,
       end: html `
@@ -60539,229 +60833,6 @@ img.ProseMirror-separator {
   applyMixins(Select, StartEnd, DelegatesARIASelect);
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
 
-  const styles$p = css `
-    ${display('inline-grid')}
-
-    :host {
-        height: ${spinnerSmallHeight};
-        aspect-ratio: 1 / 1;
-    }
-
-    div.overlay {
-        z-index: ${ZIndexLevels.zIndex1};
-        margin: max(2px, 6.25%);
-        grid-area: 1/1;
-    }
-
-    div.container {
-        margin: max(2px, 6.25%);
-        grid-area: 1/1;
-        ${
-/**
- * At some spinner sizes / browser zoom levels, the spinner bits/squares appear to slightly overlap visually.
- * If we set a color with transparency on each bit, it'll look wrong in the overlapping region (since the opacity
- * combines and affects the color at the overlapping spot).
- * Currently all 3 themes use a color with opacity = 0.6, so that's applied here on the parent element instead,
- * which avoids that issue.
- */
-''}
-        opacity: 0.6;
-    }
-
-    :host([appearance='accent']) div.container {
-        opacity: 1;
-    }
-
-    div.bit1,
-    div.bit2 {
-        background: var(--ni-private-spinner-bits-background-color);
-        width: 50%;
-        height: 50%;
-        margin: auto;
-        animation-duration: 1600ms;
-        animation-iteration-count: infinite;
-        animation-play-state: var(
-            --ni-private-spinner-animation-play-state,
-            running
-        );
-        animation-timing-function: cubic-bezier(0.65, 0, 0.35, 0);
-    }
-
-    div.bit1 {
-        animation-name: ni-private-spinner-keyframes-1;
-    }
-
-    div.bit2 {
-        animation-name: ni-private-spinner-keyframes-2;
-    }
-
-    @media (prefers-reduced-motion) {
-        div.bit1,
-        div.bit2 {
-            animation-timing-function: ease-in-out, steps(1);
-            animation-duration: 3200ms;
-        }
-
-        div.bit1 {
-            animation-name: ni-private-spinner-no-motion-opacity-keyframes,
-                ni-private-spinner-no-motion-transform-keyframes-1;
-        }
-
-        div.bit2 {
-            animation-name: ni-private-spinner-no-motion-opacity-keyframes,
-                ni-private-spinner-no-motion-transform-keyframes-2;
-        }
-    }
-
-    @keyframes ni-private-spinner-keyframes-1 {
-        0%,
-        100% {
-            transform: translate(-50%, 0);
-        }
-
-        25% {
-            transform: translate(50%, 0);
-        }
-
-        50% {
-            transform: translate(50%, 100%);
-        }
-
-        75% {
-            transform: translate(-50%, 100%);
-        }
-    }
-
-    @keyframes ni-private-spinner-keyframes-2 {
-        0%,
-        100% {
-            transform: translate(50%, 0);
-        }
-
-        25% {
-            transform: translate(-50%, 0);
-        }
-
-        50% {
-            transform: translate(-50%, -100%);
-        }
-
-        75% {
-            transform: translate(50%, -100%);
-        }
-    }
-
-    @keyframes ni-private-spinner-no-motion-opacity-keyframes {
-        0%,
-        50%,
-        100% {
-            opacity: 0;
-        }
-
-        25%,
-        75% {
-            opacity: 1;
-        }
-    }
-
-    @keyframes ni-private-spinner-no-motion-transform-keyframes-1 {
-        0%,
-        100% {
-            transform: translate(-50%, 0);
-        }
-        50% {
-            transform: translate(50%, 0);
-        }
-    }
-
-    @keyframes ni-private-spinner-no-motion-transform-keyframes-2 {
-        0%,
-        100% {
-            transform: translate(50%, 0);
-        }
-
-        50% {
-            transform: translate(-50%, 0);
-        }
-    }
-`.withBehaviors(themeBehavior(Theme.light, css `
-            :host {
-                --ni-private-spinner-bits-background-color: ${Black91};
-            }
-            :host([appearance='accent']) {
-                --ni-private-spinner-bits-background-color: ${DigitalGreenLight};
-            }
-        `), themeBehavior(Theme.dark, css `
-            :host {
-                --ni-private-spinner-bits-background-color: ${Black15};
-            }
-            :host([appearance='accent']) {
-                --ni-private-spinner-bits-background-color: ${PowerGreen};
-            }
-        `), themeBehavior(Theme.color, css `
-            :host {
-                --ni-private-spinner-bits-background-color: ${White};
-            }
-            :host([appearance='accent']) {
-                --ni-private-spinner-bits-background-color: ${PowerGreen};
-            }
-        `));
-
-  /* eslint-disable @typescript-eslint/indent */
-  // prettier-ignore
-  const template$k = html `
-    <template role="progressbar">
-        ${''
-/**
- * In Firefox, the 'title' set on the spinner is very finicky when
- * the spinner is animating. Therefore, put a transparent overlay on
- * top of the spinning bits so that the title displays as expected.
- */
-}
-        <div class="overlay"></div>
-
-        <div class="container">
-            <div class="bit1"></div>
-            <div class="bit2"></div>
-        </div>
-    </template>
-`;
-
-  /**
-   * Types of spinner appearance.
-   * @public
-   */
-  const SpinnerAppearance = {
-      default: undefined,
-      accent: 'accent'
-  };
-
-  /**
-   * A Nimble-styled spinner component.
-   * A spinner is an animating indicator that can be placed in a particular region of a page to represent loading progress, or an ongoing operation, of an indeterminate / unknown duration.
-   */
-  class Spinner extends FoundationElement {
-      constructor() {
-          super(...arguments);
-          /**
-           * @public
-           * @description
-           * The appearance the spinner area should have.
-           */
-          this.appearance = SpinnerAppearance.default;
-      }
-  }
-  __decorate$1([
-      attr
-  ], Spinner.prototype, "appearance", void 0);
-  const nimbleSpinner = Spinner.compose({
-      baseName: 'spinner',
-      template: template$k,
-      styles: styles$p
-  });
-  DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSpinner());
-  const spinnerTag = 'nimble-spinner';
-
   const styles$o = css `
     ${display('inline-flex')}