@ni/nimble-components 32.8.2 → 32.9.1

package/dist/all-components-bundle.js

@@ -18127,6 +18127,10 @@
       name: 'arrows_repeat_16_x_16',
       data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8.75 11.75 10 14l-6-3 6-3-1.25 2.25ZM8 11h1a4 4 0 0 0 4-4M7.25 5.75 6 8l6-3-6-3 1.25 2.25ZM8 5H7a4 4 0 0 0-4 4" class="cls-1"/></svg>`,
   };
+  const asterisk5X5 = {
+      name: 'asterisk_5_x_5',
+      data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 5"><path d="m.721 4.076.813-1.372-1.429-.63.266-.84 1.527.349L2.05 0h.883l.154 1.583 1.541-.35.266.84-1.442.631.812 1.372-.715.519L2.5 3.376 1.435 4.595z" class="cls-1"/></svg>`,
+  };
   const at16X16 = {
       name: 'at_16_x_16',
       data: `<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 16 16"><path d="M12.139 3.621a5.5 5.5 0 0 1 1.206 1.845q.435 1.074.436 2.407 0 .961-.275 1.954t-.687 1.646H9.343l-.11-.536a4.6 4.6 0 0 1-.756.415q-.364.155-1.051.155-1.12 0-1.813-.924t-.694-2.49q0-.837.234-1.467.234-.628.639-1.095.377-.44.914-.687a2.5 2.5 0 0 1 1.064-.248q.453 0 .804.169.35.168.543.353v-.425h1.594v5.605h1.168q.248-.543.368-1.178.12-.636.12-1.22 0-1.161-.323-2.036-.322-.877-.892-1.453a3.7 3.7 0 0 0-1.366-.879 4.9 4.9 0 0 0-1.697-.289q-.871 0-1.657.343a4.6 4.6 0 0 0-1.383.928q-.61.598-.992 1.497c-.382.899-.381 1.257-.381 1.972q0 1.167.36 2.068.36.9.958 1.497.596.59 1.386.9a4.5 4.5 0 0 0 1.668.309q.583 0 1.328-.106a9 9 0 0 0 1.321-.279v1.333q-.64.144-1.271.22-.633.074-1.381.075a6.1 6.1 0 0 1-2.325-.433 5.4 5.4 0 0 1-1.852-1.23 5.6 5.6 0 0 1-1.212-1.91 6.7 6.7 0 0 1-.436-2.444q0-1.278.453-2.366a5.9 5.9 0 0 1 1.25-1.9A5.7 5.7 0 0 1 5.781 2.46 5.8 5.8 0 0 1 8.079 2q1.209 0 2.257.426a5.3 5.3 0 0 1 1.803 1.195M9.082 9.652V6.19a3 3 0 0 0-.522-.21 2 2 0 0 0-.543-.065q-.66 0-1.017.577c-.357.577-.357.912-.357 1.58q0 1.085.295 1.607.296.522.975.522.357 0 .625-.141.269-.14.544-.408"/></svg>`,
@@ -20500,8 +20504,68 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
+  /**
+   * The runtime behavior for template overflow detection.
+   * @public
+   */
+  class OverflowBehavior {
+      /**
+       * Creates an instance of OverflowBehavior.
+       * @param target - The element to check for overflow.
+       * @param propertyName - The name of the property to assign the overflow state to.
+       */
+      constructor(target, propertyName) {
+          this.target = target;
+          this.propertyName = propertyName;
+      }
+      /**
+       * Bind this behavior to the source.
+       * @param source - The source to bind to.
+       * @param context - The execution context that the binding is operating within.
+       */
+      bind(source) {
+          this.source = source;
+          this.setSourceValue(false);
+          this.mouseOverHandler = () => {
+              const hasOverflow = this.target.offsetWidth < this.target.scrollWidth;
+              this.setSourceValue(hasOverflow);
+          };
+          this.mouseOutHandler = () => {
+              this.setSourceValue(false);
+          };
+          this.target.addEventListener('mouseover', this.mouseOverHandler);
+          this.target.addEventListener('mouseout', this.mouseOutHandler);
+      }
+      /**
+       * Unbinds this behavior from the source.
+       * @param source - The source to unbind from.
+       */
+      unbind() {
+          this.source = undefined;
+          this.target.removeEventListener('mouseover', this.mouseOverHandler);
+          this.target.removeEventListener('mouseout', this.mouseOutHandler);
+      }
+      setSourceValue(value) {
+          // @ts-expect-error set property on source
+          this.source[this.propertyName] = value;
+      }
+  }
+  /**
+   * A directive that observes if an element has overflow and sets a flag.
+   * @param propertyName - The name of the property to assign the overflow flag.
+   * @public
+   */
+  function overflow(propertyName) {
+      return new AttachedBehaviorHTMLDirective('nimble-overflow', OverflowBehavior, propertyName);
+  }
+
   const errorTextTemplate = html `
-    <div class="error-text" title="${x => x.errorText}" aria-live="polite">
+    <div
+        class="error-text"
+        ${overflow('errorHasOverflow')}
+        title="${x => (x.errorHasOverflow && x.errorText ? x.errorText : null)}"
+        aria-live="polite"
+    >
         ${x => x.errorText}
     </div>
 `;
@@ -20546,14 +20610,37 @@ so this becomes the fallback color for the slot */ ''}
     </template>
 `;
 
+  // As the returned class is internal to the function, we can't write a signature that uses is directly, so rely on inference
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type
+  function mixinErrorPattern(base) {
+      /**
+       * The Mixin that provides a concrete column with the API to support being resized
+       * proportionally within a Table.
+       */
+      class ErrorPatternElement extends base {
+          constructor() {
+              super(...arguments);
+              /*
+               * Show the error appearance of the control
+               */
+              this.errorVisible = false;
+              /* @internal
+               * Indicates if the error text has overflowed its container. The value should not be
+               * set directly. Instead, it is used with the `overflow` directive.
+               */
+              this.errorHasOverflow = false;
+          }
+      }
+      attr({ attribute: 'error-text' })(ErrorPatternElement.prototype, 'errorText');
+      attr({ attribute: 'error-visible', mode: 'boolean' })(ErrorPatternElement.prototype, 'errorVisible');
+      observable(ErrorPatternElement.prototype, 'errorHasOverflow');
+      return ErrorPatternElement;
+  }
+
   /**
    * A nimble-styled checkbox control.
    */
-  class Checkbox extends Checkbox$1 {
-      constructor() {
-          super(...arguments);
-          this.errorVisible = false;
-      }
+  class Checkbox extends mixinErrorPattern(Checkbox$1) {
       /**
        * @internal
        */
@@ -20565,12 +20652,6 @@ so this becomes the fallback color for the slot */ ''}
   __decorate$1([
       attr({ attribute: 'tabindex', converter: nullableNumberConverter })
   ], Checkbox.prototype, "tabIndex", void 0);
-  __decorate$1([
-      attr({ attribute: 'error-text' })
-  ], Checkbox.prototype, "errorText", void 0);
-  __decorate$1([
-      attr({ attribute: 'error-visible', mode: 'boolean' })
-  ], Checkbox.prototype, "errorVisible", void 0);
   const nimbleCheckbox = Checkbox.compose({
       baseName: 'checkbox',
       baseClass: Checkbox$1,
@@ -21122,61 +21203,6 @@ so this becomes the fallback color for the slot */ ''}
             }
         `));
 
-  /**
-   * The runtime behavior for template overflow detection.
-   * @public
-   */
-  class OverflowBehavior {
-      /**
-       * Creates an instance of OverflowBehavior.
-       * @param target - The element to check for overflow.
-       * @param propertyName - The name of the property to assign the overflow state to.
-       */
-      constructor(target, propertyName) {
-          this.target = target;
-          this.propertyName = propertyName;
-      }
-      /**
-       * Bind this behavior to the source.
-       * @param source - The source to bind to.
-       * @param context - The execution context that the binding is operating within.
-       */
-      bind(source) {
-          this.source = source;
-          this.setSourceValue(false);
-          this.mouseOverHandler = () => {
-              const hasOverflow = this.target.offsetWidth < this.target.scrollWidth;
-              this.setSourceValue(hasOverflow);
-          };
-          this.mouseOutHandler = () => {
-              this.setSourceValue(false);
-          };
-          this.target.addEventListener('mouseover', this.mouseOverHandler);
-          this.target.addEventListener('mouseout', this.mouseOutHandler);
-      }
-      /**
-       * Unbinds this behavior from the source.
-       * @param source - The source to unbind from.
-       */
-      unbind() {
-          this.source = undefined;
-          this.target.removeEventListener('mouseover', this.mouseOverHandler);
-          this.target.removeEventListener('mouseout', this.mouseOutHandler);
-      }
-      setSourceValue(value) {
-          // @ts-expect-error set property on source
-          this.source[this.propertyName] = value;
-      }
-  }
-  /**
-   * A directive that observes if an element has overflow and sets a flag.
-   * @param propertyName - The name of the property to assign the overflow flag.
-   * @public
-   */
-  function overflow(propertyName) {
-      return new AttachedBehaviorHTMLDirective('nimble-overflow', OverflowBehavior, propertyName);
-  }
-
   /* eslint-disable @typescript-eslint/indent */
   // prettier-ignore
   const template$z = (context, definition) => html `
@@ -21286,11 +21312,10 @@ so this becomes the fallback color for the slot */ ''}
   /**
    * A nimble-styed HTML combobox
    */
-  class Combobox extends FormAssociatedCombobox {
+  class Combobox extends mixinErrorPattern(FormAssociatedCombobox) {
       constructor() {
           super(...arguments);
           this.appearance = DropdownAppearance.underline;
-          this.errorVisible = false;
           /**
            * The open attribute.
            */
@@ -21886,12 +21911,6 @@ so this becomes the fallback color for the slot */ ''}
   __decorate$1([
       attr
   ], Combobox.prototype, "appearance", void 0);
-  __decorate$1([
-      attr({ attribute: 'error-text' })
-  ], Combobox.prototype, "errorText", void 0);
-  __decorate$1([
-      attr({ attribute: 'error-visible', mode: 'boolean' })
-  ], Combobox.prototype, "errorVisible", void 0);
   __decorate$1([
       attr({ attribute: 'autocomplete', mode: 'fromView' })
   ], Combobox.prototype, "autocomplete", void 0);
@@ -22796,6 +22815,18 @@ so this becomes the fallback color for the slot */ ''}
   }
   registerIcon('icon-arrows-repeat', IconArrowsRepeat);
 
+  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+  // See generation source in nimble-components/build/generate-icons
+  /**
+   * The icon component for the 'asterisk' icon
+   */
+  class IconAsterisk extends Icon {
+      constructor() {
+          super(asterisk5X5);
+      }
+  }
+  registerIcon('icon-asterisk', IconAsterisk);
+
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
@@ -26746,11 +26777,10 @@ so this becomes the fallback color for the slot */ ''}
   /**
    * A nimble-styled HTML number input
    */
-  class NumberField extends NumberField$1 {
+  class NumberField extends mixinErrorPattern(NumberField$1) {
       constructor() {
           super(...arguments);
           this.appearance = NumberFieldAppearance.underline;
-          this.errorVisible = false;
       }
       connectedCallback() {
           super.connectedCallback();
@@ -26761,12 +26791,6 @@ so this becomes the fallback color for the slot */ ''}
   __decorate$1([
       attr
   ], NumberField.prototype, "appearance", void 0);
-  __decorate$1([
-      attr({ attribute: 'error-text' })
-  ], NumberField.prototype, "errorText", void 0);
-  __decorate$1([
-      attr({ attribute: 'error-visible', mode: 'boolean' })
-  ], NumberField.prototype, "errorVisible", void 0);
   /**
    * A function that returns a number-field registration for configuring the component with a DesignSystem.
    *
@@ -27002,18 +27026,8 @@ so this becomes the fallback color for the slot */ ''}
   /**
    * A nimble-styled grouping element for radio buttons
    */
-  class RadioGroup extends RadioGroup$1 {
-      constructor() {
-          super(...arguments);
-          this.errorVisible = false;
-      }
+  class RadioGroup extends mixinErrorPattern(RadioGroup$1) {
   }
-  __decorate$1([
-      attr({ attribute: 'error-text' })
-  ], RadioGroup.prototype, "errorText", void 0);
-  __decorate$1([
-      attr({ attribute: 'error-visible', mode: 'boolean' })
-  ], RadioGroup.prototype, "errorVisible", void 0);
   const nimbleRadioGroup = RadioGroup.compose({
       baseName: 'radio-group',
       baseClass: RadioGroup$1,
@@ -59848,7 +59862,7 @@ img.ProseMirror-separator {
   /**
    * A nimble styled rich text editor
    */
-  class RichTextEditor extends RichText {
+  class RichTextEditor extends mixinErrorPattern(RichText) {
       constructor() {
           super(...arguments);
           /**
@@ -59881,13 +59895,6 @@ img.ProseMirror-separator {
            * HTML Attribute: footer-hidden
            */
           this.footerHidden = false;
-          /**
-           * Whether to display the error state.
-           *
-           * @public
-           * HTML Attribute: error-visible
-           */
-          this.errorVisible = false;
           /**
            * The width of the vertical scrollbar, if displayed.
            * @internal
@@ -60358,12 +60365,6 @@ img.ProseMirror-separator {
   __decorate$1([
       attr({ attribute: 'footer-hidden', mode: 'boolean' })
   ], RichTextEditor.prototype, "footerHidden", void 0);
-  __decorate$1([
-      attr({ attribute: 'error-visible', mode: 'boolean' })
-  ], RichTextEditor.prototype, "errorVisible", void 0);
-  __decorate$1([
-      attr({ attribute: 'error-text' })
-  ], RichTextEditor.prototype, "errorText", void 0);
   __decorate$1([
       attr
   ], RichTextEditor.prototype, "placeholder", void 0);
@@ -61078,11 +61079,10 @@ img.ProseMirror-separator {
   /**
    * A nimble-styled HTML select.
    */
-  class Select extends FormAssociatedSelect {
+  class Select extends mixinErrorPattern(FormAssociatedSelect) {
       constructor() {
           super(...arguments);
           this.appearance = DropdownAppearance.underline;
-          this.errorVisible = false;
           this.filterMode = FilterMode.none;
           this.clearable = false;
           this.loadingVisible = false;
@@ -62071,12 +62071,6 @@ img.ProseMirror-separator {
   __decorate$1([
       attr({ attribute: 'position' })
   ], Select.prototype, "positionAttribute", void 0);
-  __decorate$1([
-      attr({ attribute: 'error-text' })
-  ], Select.prototype, "errorText", void 0);
-  __decorate$1([
-      attr({ attribute: 'error-visible', mode: 'boolean' })
-  ], Select.prototype, "errorVisible", void 0);
   __decorate$1([
       attr({ attribute: 'filter-mode' })
   ], Select.prototype, "filterMode", void 0);
@@ -74589,7 +74583,7 @@ focus outline in that case.
   /**
    * A nimble-styed HTML text area
    */
-  class TextArea extends TextArea$1 {
+  class TextArea extends mixinErrorPattern(TextArea$1) {
       constructor() {
           super(...arguments);
           /**
@@ -74600,14 +74594,6 @@ focus outline in that case.
            * HTML Attribute: appearance
            */
           this.appearance = TextAreaAppearance.outline;
-          /**
-           * Whether to display the error state.
-           *
-           * @public
-           * @remarks
-           * HTML Attribute: error-visible
-           */
-          this.errorVisible = false;
           /**
            * The width of the vertical scrollbar, if displayed.
            * @internal
@@ -74678,12 +74664,6 @@ focus outline in that case.
   __decorate$1([
       attr
   ], TextArea.prototype, "appearance", void 0);
-  __decorate$1([
-      attr({ attribute: 'error-text' })
-  ], TextArea.prototype, "errorText", void 0);
-  __decorate$1([
-      attr({ attribute: 'error-visible', mode: 'boolean' })
-  ], TextArea.prototype, "errorVisible", void 0);
   __decorate$1([
       observable
   ], TextArea.prototype, "scrollbarWidth", void 0);
@@ -74950,7 +74930,7 @@ focus outline in that case.
   /**
    * A nimble-styed HTML text input
    */
-  class TextField extends TextField$1 {
+  class TextField extends mixinErrorPattern(TextField$1) {
       constructor() {
           super(...arguments);
           /**
@@ -74961,19 +74941,12 @@ focus outline in that case.
            * HTML Attribute: appearance
            */
           this.appearance = TextFieldAppearance.underline;
-          this.errorVisible = false;
           this.fullBleed = false;
       }
   }
   __decorate$1([
       attr
   ], TextField.prototype, "appearance", void 0);
-  __decorate$1([
-      attr({ attribute: 'error-text' })
-  ], TextField.prototype, "errorText", void 0);
-  __decorate$1([
-      attr({ attribute: 'error-visible', mode: 'boolean' })
-  ], TextField.prototype, "errorVisible", void 0);
   __decorate$1([
       attr({ attribute: 'full-bleed', mode: 'boolean' })
   ], TextField.prototype, "fullBleed", void 0);