@ni/spright-components 6.23.3 → 7.0.0

package/dist/all-components-bundle.js

@@ -18627,6 +18627,10 @@ Defines an interaction area clip-path that leaves out the severity text so it is
       name: 'arrow_partial_rotate_left_16_x_16',
       data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 11.988a3.086 3.086 0 0 0 3.143-3.025 3.08 3.08 0 0 0-3.085-3.02v.088l.826 2.067-5.598-2.796L8.884 2.5l-.742 1.932a4.62 4.62 0 0 1 4.572 4.53A4.63 4.63 0 0 1 8 13.5Z" class="cls-1"/></svg>`,
   };
+  const arrowRightArrowLeft16X16 = {
+      name: 'arrow_right_arrow_left_16_x_16',
+      data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M5 4.167h5.173l-.99-2.084L15 4.983 9.182 7.917l.99-2.084H5zm6 6H5.827l.99-2.084L1 11.017l5.818 2.9-.99-2.084H11z"/></svg>`,
+  };
   const arrowRightThin16X16 = {
       name: 'arrow_right_thin_16_x_16',
       data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m7.97 4.37-.68 1.12 3.09 1.86H2v1.3h8.38l-3.09 1.86.68 1.12L14 8z" class="cls-1"/></svg>`,
@@ -18843,6 +18847,18 @@ Defines an interaction area clip-path that leaves out the severity text so it is
       name: 'circle_slash_16_x_16',
       data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 2a6 6 0 1 0 6 6 6 6 0 0 0-6-6m.075 1.714a4.281 4.281 0 0 1 3.573 6.647L5.714 4.427a4.26 4.26 0 0 1 2.36-.713M3.789 8a4.26 4.26 0 0 1 .713-2.36l5.934 5.933A4.281 4.281 0 0 1 3.789 8" class="cls-1"/></svg>`,
   };
+  const circleSparkle16X16 = {
+      name: 'circle_sparkle_16_x_16',
+      data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 2C4.69 2 2 4.69 2 8s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6m1.138 7.133A3.98 3.98 0 0 0 8.003 11.5a3.98 3.98 0 0 0-1.136-2.37A4 4 0 0 0 4.5 7.998a4 4 0 0 0 2.362-1.131A3.98 3.98 0 0 0 7.997 4.5a3.98 3.98 0 0 0 1.136 2.37A4 4 0 0 0 11.5 8.002a4 4 0 0 0-2.362 1.131"/></svg>`,
+  };
+  const circleSparkleExclamation16X16 = {
+      name: 'circle_sparkle_exclamation_16_x_16',
+      data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M3.29 6H1.93v-.89h1.36zM8.1 2h.01zM3.15 4.56 3.3 1H1.91l.15 3.56zM14.1 8c0 3.31-2.69 6-6 6s-6-2.69-6-6c0-.34.04-.67.09-1h2.09l.04-3.65A6 6 0 0 1 8.106 2 6.005 6.005 0 0 1 14.1 8m-2.6.002A4 4 0 0 1 9.133 6.87 3.98 3.98 0 0 1 7.997 4.5a3.98 3.98 0 0 1-1.135 2.367A4 4 0 0 1 4.5 7.997 4 4 0 0 1 6.867 9.13a3.98 3.98 0 0 1 1.136 2.37 3.98 3.98 0 0 1 1.135-2.367 4 4 0 0 1 2.362-1.13"/></svg>`,
+  };
+  const circleSparkleTriangle16X16 = {
+      name: 'circle_sparkle_triangle_16_x_16',
+      data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M4.96 4.975H1.01l1.98-3.96 1.98 3.96zm9.03 3.01c0 3.31-2.69 6-6 6s-6-2.69-6-6c0-.71.13-1.38.35-2.01h4.24l-1.59-3.18c.88-.51 1.91-.81 3-.81 3.31 0 6 2.69 6 6m-2.49.017A4 4 0 0 1 9.133 6.87 3.98 3.98 0 0 1 7.997 4.5a3.98 3.98 0 0 1-1.135 2.367A4 4 0 0 1 4.5 7.997 4 4 0 0 1 6.867 9.13a3.98 3.98 0 0 1 1.136 2.37 3.98 3.98 0 0 1 1.135-2.367 4 4 0 0 1 2.362-1.13"/></svg>`,
+  };
   const circleX16X16 = {
       name: 'circle_x_16_x_16',
       data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 2a6 6 0 1 0 6 6 6 6 0 0 0-6-6m.075 1.714a4.26 4.26 0 0 1 2.409.743l-2.37 2.37-2.4-2.4a4.26 4.26 0 0 1 2.36-.713M4.502 5.64l2.4 2.4-2.37 2.37a4.27 4.27 0 0 1-.03-4.77m3.573 6.647a4.26 4.26 0 0 1-2.31-.685l2.349-2.35 2.322 2.322a4.26 4.26 0 0 1-2.361.713m3.573-1.925L9.326 8.039l2.35-2.349a4.25 4.25 0 0 1-.028 4.67" class="cls-1"/></svg>`,
@@ -24171,6 +24187,18 @@ so this becomes the fallback color for the slot */ ''}
   }
   registerIconSvg('icon-arrow-partial-rotate-left', IconArrowPartialRotateLeft);
 
+  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+  // See generation source in nimble-components/build/generate-icons
+  /**
+   * The icon component for the 'arrowRightArrowLeft' icon
+   */
+  class IconArrowRightArrowLeft extends IconSvg {
+      constructor() {
+          super(arrowRightArrowLeft16X16);
+      }
+  }
+  registerIconSvg('icon-arrow-right-arrow-left', IconArrowRightArrowLeft);
+
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
@@ -24797,6 +24825,42 @@ so this becomes the fallback color for the slot */ ''}
   }
   registerIconSvg('icon-circle-slash', IconCircleSlash);
 
+  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+  // See generation source in nimble-components/build/generate-icons
+  /**
+   * The icon component for the 'circleSparkle' icon
+   */
+  class IconCircleSparkle extends IconSvg {
+      constructor() {
+          super(circleSparkle16X16);
+      }
+  }
+  registerIconSvg('icon-circle-sparkle', IconCircleSparkle);
+
+  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+  // See generation source in nimble-components/build/generate-icons
+  /**
+   * The icon component for the 'circleSparkleExclamation' icon
+   */
+  class IconCircleSparkleExclamation extends IconSvg {
+      constructor() {
+          super(circleSparkleExclamation16X16);
+      }
+  }
+  registerIconSvg('icon-circle-sparkle-exclamation', IconCircleSparkleExclamation);
+
+  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+  // See generation source in nimble-components/build/generate-icons
+  /**
+   * The icon component for the 'circleSparkleTriangle' icon
+   */
+  class IconCircleSparkleTriangle extends IconSvg {
+      constructor() {
+          super(circleSparkleTriangle16X16);
+      }
+  }
+  registerIconSvg('icon-circle-sparkle-triangle', IconCircleSparkleTriangle);
+
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
@@ -26945,7 +27009,7 @@ so this becomes the fallback color for the slot */ ''}
     ${display$1('none')}
 `;
 
-  const supportedLabels$1 = {
+  const supportedLabels$2 = {
       popupDismiss: popupDismissLabel,
       numericDecrement: numericDecrementLabel,
       numericIncrement: numericIncrementLabel,
@@ -26967,7 +27031,7 @@ so this becomes the fallback color for the slot */ ''}
   class LabelProviderCore extends LabelProviderBase {
       constructor() {
           super(...arguments);
-          this.supportedLabels = supportedLabels$1;
+          this.supportedLabels = supportedLabels$2;
       }
   }
   __decorate([
@@ -27104,7 +27168,7 @@ so this becomes the fallback color for the slot */ ''}
       cssCustomPropertyName: null
   }).withDefault(tableLabelDefaults.tableGroupRowPlaceholderEmptyLabel);
 
-  const supportedLabels = {
+  const supportedLabels$1 = {
       groupCollapse: tableGroupCollapseLabel,
       groupExpand: tableGroupExpandLabel,
       rowCollapse: tableRowCollapseLabel,
@@ -27128,7 +27192,7 @@ so this becomes the fallback color for the slot */ ''}
   class LabelProviderTable extends LabelProviderBase {
       constructor() {
           super(...arguments);
-          this.supportedLabels = supportedLabels;
+          this.supportedLabels = supportedLabels$1;
       }
   }
   __decorate([
@@ -104657,6 +104721,20 @@ focus outline in that case.
     }
 `;
 
+  const chatLabelDefaults = {
+      chatSendLabel: 'Send',
+      chatStopLabel: 'Stop'
+  };
+
+  const chatSendLabel = DesignToken.create({
+      name: 'chat-send-label',
+      cssCustomPropertyName: null
+  }).withDefault(chatLabelDefaults.chatSendLabel);
+  const chatStopLabel = DesignToken.create({
+      name: 'chat-stop-label',
+      cssCustomPropertyName: null
+  }).withDefault(chatLabelDefaults.chatStopLabel);
+
   const template$e = html `
 <div class="container">
     <section class="attachments ${x => (x.attachmentsIsEmpty ? '' : 'has-content')}">
@@ -104688,10 +104766,10 @@ focus outline in that case.
             ?disabled=${x => (x.processing ? false : (x.sendDisabled || x.isInputEmpty))}
             @click=${x => (x.processing ? x.stopButtonClickHandler() : x.sendButtonClickHandler())}
             tabindex="${x => x.tabIndex}"
-            title=${x => (x.processing ? x.stopButtonLabel : x.sendButtonLabel)}
+            title=${x => (x.processing ? chatStopLabel.getValueFor(x) : chatSendLabel.getValueFor(x))}
             content-hidden
         >
-            ${x => (x.processing ? x.stopButtonLabel : x.sendButtonLabel)}
+            ${x => (x.processing ? chatStopLabel.getValueFor(x) : chatSendLabel.getValueFor(x))}
             ${when(x => x.processing, html `<${iconStopSquareTag} slot="start"></${iconStopSquareTag}>`, html `<${iconPaperPlaneTag} slot="start"></${iconPaperPlaneTag}>`)}
         </${buttonTag}>
     </section>
@@ -104865,12 +104943,6 @@ focus outline in that case.
   __decorate([
       attr
   ], ChatInput.prototype, "placeholder", void 0);
-  __decorate([
-      attr({ attribute: 'send-button-label' })
-  ], ChatInput.prototype, "sendButtonLabel", void 0);
-  __decorate([
-      attr({ attribute: 'stop-button-label' })
-  ], ChatInput.prototype, "stopButtonLabel", void 0);
   __decorate([
       attr
   ], ChatInput.prototype, "value", void 0);
@@ -105851,6 +105923,33 @@ focus outline in that case.
       .withPrefix('spright')
       .register(sprightIconWorkItemWrenchHammer());
 
+  const supportedLabels = {
+      send: chatSendLabel,
+      stop: chatStopLabel
+  };
+  /**
+   * Label provider for Spright chat components
+   */
+  class LabelProviderChat extends LabelProviderBase {
+      constructor() {
+          super(...arguments);
+          this.supportedLabels = supportedLabels;
+      }
+  }
+  __decorate([
+      attr
+  ], LabelProviderChat.prototype, "send", void 0);
+  __decorate([
+      attr
+  ], LabelProviderChat.prototype, "stop", void 0);
+  const sprightLabelProviderChat = LabelProviderChat.compose({
+      baseName: 'label-provider-chat',
+      styles: styles$X
+  });
+  DesignSystem.getOrCreate()
+      .withPrefix('spright')
+      .register(sprightLabelProviderChat());
+
   const styles = css `
     ${display('inline-block')}