@ni/spright-components 5.1.1 → 5.2.1

package/dist/all-components-bundle.js

@@ -29876,7 +29876,7 @@ so this becomes the fallback color for the slot */ ''}
                   value = value.replace(/\r\n?/g, "\n");
               }
               if (value)
-                  this.insertNode(this.parser.schema.text(value), marks);
+                  this.insertNode(this.parser.schema.text(value), marks, !/\S/.test(value));
               this.findInText(dom);
           }
           else {
@@ -29940,7 +29940,7 @@ so this becomes the fallback color for the slot */ ''}
       ignoreFallback(dom, marks) {
           // Ignored BR nodes should at least create an inline context
           if (dom.nodeName == "BR" && (!this.top.type || !this.top.type.inlineContent))
-              this.findPlace(this.parser.schema.text("-"), marks);
+              this.findPlace(this.parser.schema.text("-"), marks, true);
       }
       // Run any style parser associated with the node's styles. Either
       // return an updated array of marks, or null to indicate some of the
@@ -29988,7 +29988,7 @@ so this becomes the fallback color for the slot */ ''}
                       marks = inner;
                   }
               }
-              else if (!this.insertNode(nodeType.create(rule.attrs), marks)) {
+              else if (!this.insertNode(nodeType.create(rule.attrs), marks, dom.nodeName == "BR")) {
                   this.leafFallback(dom, marks);
               }
           }
@@ -30005,7 +30005,7 @@ so this becomes the fallback color for the slot */ ''}
           }
           else if (rule.getContent) {
               this.findInside(dom);
-              rule.getContent(dom, this.parser.schema).forEach(node => this.insertNode(node, marks));
+              rule.getContent(dom, this.parser.schema).forEach(node => this.insertNode(node, marks, false));
           }
           else {
               let contentDOM = dom;
@@ -30036,19 +30036,22 @@ so this becomes the fallback color for the slot */ ''}
       // Try to find a way to fit the given node type into the current
       // context. May add intermediate wrappers and/or leave non-solid
       // nodes that we're in.
-      findPlace(node, marks) {
+      findPlace(node, marks, cautious) {
           let route, sync;
-          for (let depth = this.open; depth >= 0; depth--) {
+          for (let depth = this.open, penalty = 0; depth >= 0; depth--) {
               let cx = this.nodes[depth];
               let found = cx.findWrapping(node);
-              if (found && (!route || route.length > found.length)) {
+              if (found && (!route || route.length > found.length + penalty)) {
                   route = found;
                   sync = cx;
                   if (!found.length)
                       break;
               }
-              if (cx.solid)
-                  break;
+              if (cx.solid) {
+                  if (cautious)
+                      break;
+                  penalty += 2;
+              }
           }
           if (!route)
               return null;
@@ -30058,13 +30061,13 @@ so this becomes the fallback color for the slot */ ''}
           return marks;
       }
       // Try to insert the given node, adjusting the context when needed.
-      insertNode(node, marks) {
+      insertNode(node, marks, cautious) {
           if (node.isInline && this.needsBlock && !this.top.type) {
               let block = this.textblockFromContext();
               if (block)
                   marks = this.enterInner(block, null, marks);
           }
-          let innerMarks = this.findPlace(node, marks);
+          let innerMarks = this.findPlace(node, marks, cautious);
           if (innerMarks) {
               this.closeExtra();
               let top = this.top;
@@ -30082,7 +30085,7 @@ so this becomes the fallback color for the slot */ ''}
       // Try to start a node of the given type, adjusting the context when
       // necessary.
       enter(type, attrs, marks, preserveWS) {
-          let innerMarks = this.findPlace(type.create(attrs), marks);
+          let innerMarks = this.findPlace(type.create(attrs), marks, false);
           if (innerMarks)
               innerMarks = this.enterInner(type, attrs, marks, true, preserveWS);
           return innerMarks;
@@ -31216,7 +31219,7 @@ so this becomes the fallback color for the slot */ ''}
           let from = mapping.mapResult(this.from, 1), to = mapping.mapResult(this.to, -1);
           if (from.deletedAcross && to.deletedAcross)
               return null;
-          return new ReplaceStep(from.pos, Math.max(from.pos, to.pos), this.slice);
+          return new ReplaceStep(from.pos, Math.max(from.pos, to.pos), this.slice, this.structure);
       }
       merge(other) {
           if (!(other instanceof ReplaceStep) || other.structure || this.structure)
@@ -32593,19 +32596,26 @@ so this becomes the fallback color for the slot */ ''}
           return this;
       }
       /**
-      Remove a mark (or a mark of the given type) from the node at
+      Remove a mark (or all marks of the given type) from the node at
       position `pos`.
       */
       removeNodeMark(pos, mark) {
-          if (!(mark instanceof Mark$1)) {
-              let node = this.doc.nodeAt(pos);
-              if (!node)
-                  throw new RangeError("No node at position " + pos);
-              mark = mark.isInSet(node.marks);
-              if (!mark)
-                  return this;
+          let node = this.doc.nodeAt(pos);
+          if (!node)
+              throw new RangeError("No node at position " + pos);
+          if (mark instanceof Mark$1) {
+              if (mark.isInSet(node.marks))
+                  this.step(new RemoveNodeMarkStep(pos, mark));
+          }
+          else {
+              let set = node.marks, found, steps = [];
+              while (found = mark.isInSet(set)) {
+                  steps.push(new RemoveNodeMarkStep(pos, found));
+                  set = found.removeFromSet(set);
+              }
+              for (let i = steps.length - 1; i >= 0; i--)
+                  this.step(steps[i]);
           }
-          this.step(new RemoveNodeMarkStep(pos, mark));
           return this;
       }
       /**
@@ -36629,7 +36639,7 @@ so this becomes the fallback color for the slot */ ''}
       // innerHTML, even on a detached document. This wraps the string in
       // a way that makes the browser allow us to use its parser again.
       if (!_policy)
-          _policy = trustedTypes.createPolicy("ProseMirrorClipboard", { createHTML: (s) => s });
+          _policy = trustedTypes.defaultPolicy || trustedTypes.createPolicy("ProseMirrorClipboard", { createHTML: (s) => s });
       return _policy.createHTML(html);
   }
   function readHTML(html) {
@@ -37320,6 +37330,10 @@ so this becomes the fallback color for the slot */ ''}
       }
   }
   const dragCopyModifier = mac$2 ? "altKey" : "ctrlKey";
+  function dragMoves(view, event) {
+      let moves = view.someProp("dragCopies", test => !test(event));
+      return moves != null ? moves : !event[dragCopyModifier];
+  }
   handlers.dragstart = (view, _event) => {
       let event = _event;
       let mouseDown = view.input.mouseDown;
@@ -37349,7 +37363,7 @@ so this becomes the fallback color for the slot */ ''}
       event.dataTransfer.effectAllowed = "copyMove";
       if (!brokenClipboardAPI)
           event.dataTransfer.setData("text/plain", text);
-      view.dragging = new Dragging(slice, !event[dragCopyModifier], node);
+      view.dragging = new Dragging(slice, dragMoves(view, event), node);
   };
   handlers.dragend = view => {
       let dragging = view.dragging;
@@ -37376,7 +37390,7 @@ so this becomes the fallback color for the slot */ ''}
       else {
           slice = parseFromClipboard(view, getText$1(event.dataTransfer), brokenClipboardAPI ? null : event.dataTransfer.getData("text/html"), false, $mouse);
       }
-      let move = !!(dragging && !event[dragCopyModifier]);
+      let move = !!(dragging && dragMoves(view, event));
       if (view.someProp("handleDrop", f => f(view, event, slice || Slice.empty, move))) {
           event.preventDefault();
           return;
@@ -38661,9 +38675,11 @@ so this becomes the fallback color for the slot */ ''}
       // as being an iOS enter press), just dispatch an Enter key instead.
       if (((ios && view.input.lastIOSEnter > Date.now() - 225 &&
           (!inlineChange || addedNodes.some(n => n.nodeName == "DIV" || n.nodeName == "P"))) ||
-          (!inlineChange && $from.pos < parse.doc.content.size && !$from.sameParent($to) &&
+          (!inlineChange && $from.pos < parse.doc.content.size &&
+              (!$from.sameParent($to) || !$from.parent.inlineContent) &&
+              !/\S/.test(parse.doc.textBetween($from.pos, $to.pos, "", "")) &&
               (nextSel = Selection$2.findFrom(parse.doc.resolve($from.pos + 1), 1, true)) &&
-              nextSel.head == $to.pos)) &&
+              nextSel.head > $from.pos)) &&
           view.someProp("handleKeyDown", f => f(view, keyEvent(13, "Enter")))) {
           view.input.lastIOSEnter = 0;
           return;
@@ -40116,6 +40132,8 @@ so this becomes the fallback color for the slot */ ''}
               types[0] = deflt ? { type: deflt } : null;
               can = canSplit(tr.doc, splitPos, types.length, types);
           }
+          if (!can)
+              return false;
           tr.split(splitPos, types.length, types);
           if (!atEnd && atStart && $from.node(splitDepth).type != deflt) {
               let first = tr.mapping.map($from.before(splitDepth)), $first = tr.doc.resolve(first);
@@ -44730,7 +44748,7 @@ img.ProseMirror-separator {
               // @ts-ignore
               const name = typeof nameOrPluginKey === 'string' ? `${nameOrPluginKey}$` : nameOrPluginKey.key;
               // @ts-ignore
-              plugins = prevPlugins.filter(plugin => !plugin.key.startsWith(name));
+              plugins = plugins.filter(plugin => !plugin.key.startsWith(name));
           });
           if (prevPlugins.length === plugins.length) {
               // No plugin was removed, so we don’t need to update the state
@@ -63767,6 +63785,10 @@ img.ProseMirror-separator {
     }
   };
 
+  function safelyAccessDocument(_document) {
+    return _document || (typeof document !== 'undefined' ? document : null);
+  }
+
   //
 
   //
@@ -63906,7 +63928,7 @@ img.ProseMirror-separator {
               columnSizingStart: []
             }));
           };
-          const contextDocument = _contextDocument || typeof document !== 'undefined' ? document : null;
+          const contextDocument = safelyAccessDocument(_contextDocument);
           const mouseEvents = {
             moveHandler: e => onMove(e.clientX),
             upHandler: e => {
@@ -74849,6 +74871,7 @@ focus outline in that case.
       frameless: 'frameless'
   };
 
+  // prettier-ignore
   const styles$8 = css `
     ${display$1('inline-block')}
     ${styles$Q}
@@ -74863,12 +74886,17 @@ focus outline in that case.
         --ni-private-height-within-border: calc(
             ${controlHeight} - 2 * ${borderWidth}
         );
+        --ni-private-default-start-slot-opacity: 0.6;
     }
 
     :host([disabled]) {
         color: ${bodyDisabledFontColor};
     }
 
+    :host([disabled][appearance-readonly]) {
+        color: ${bodyFontColor};
+    }
+
     .label {
         display: flex;
         color: ${controlLabelFontColor};
@@ -74879,6 +74907,10 @@ focus outline in that case.
         color: ${controlLabelDisabledFontColor};
     }
 
+    :host([disabled][appearance-readonly]) .label {
+        color: ${controlLabelFontColor};
+    }
+
     .root {
         position: relative;
         display: flex;
@@ -74944,7 +74976,7 @@ focus outline in that case.
 
     slot[name='start']::slotted(*) {
         flex: none;
-        opacity: 0.6;
+        opacity: var(--ni-private-default-start-slot-opacity);
         margin-right: ${smallPadding};
     }
 
@@ -74952,6 +74984,10 @@ focus outline in that case.
         opacity: 0.3;
     }
 
+    :host([disabled][appearance-readonly]) slot[name='start']::slotted(*) {
+        opacity: var(--ni-private-default-start-slot-opacity);
+    }
+
     .control {
         -webkit-appearance: none;
         font: inherit;
@@ -74985,10 +75021,14 @@ focus outline in that case.
         color: ${controlLabelFontColor};
     }
 
-    .control[disabled]::placeholder {
+    :host([disabled]) .control::placeholder {
         color: ${bodyDisabledFontColor};
     }
 
+    :host([disabled][appearance-readonly]) .control::placeholder {
+        color: ${controlLabelFontColor};
+    }
+
     [part='end'] {
         display: contents;
     }
@@ -75175,6 +75215,7 @@ focus outline in that case.
            */
           this.appearance = TextFieldAppearance.underline;
           this.fullBleed = false;
+          this.appearanceReadOnly = false;
       }
   }
   __decorate([
@@ -75183,6 +75224,9 @@ focus outline in that case.
   __decorate([
       attr({ attribute: 'full-bleed', mode: 'boolean' })
   ], TextField.prototype, "fullBleed", void 0);
+  __decorate([
+      attr({ attribute: 'appearance-readonly', mode: 'boolean' })
+  ], TextField.prototype, "appearanceReadOnly", void 0);
   const nimbleTextField = TextField.compose({
       baseName: 'text-field',
       baseClass: TextField$1,
@@ -93047,7 +93091,7 @@ focus outline in that case.
     :host {
         flex-direction: column;
         justify-content: flex-start;
-        row-gap: ${standardPadding};
+        row-gap: 32px;
         padding: ${mediumPadding};
         background: ${applicationBackgroundColor};
         overflow-y: auto;
@@ -93073,6 +93117,16 @@ focus outline in that case.
       .withPrefix('spright')
       .register(sprightChatConversation());
 
+  /**
+   * A message type in a chat conversation.
+   * @public
+   */
+  const ChatMessageType = {
+      system: undefined,
+      outbound: 'outbound',
+      inbound: 'inbound'
+  };
+
   const styles$1 = css `
     ${display('flex')}
 
@@ -93087,45 +93141,85 @@ focus outline in that case.
         color: ${bodyFontColor};
     }
 
-    :host([message-type='outbound']) {
+    :host([message-type='${ChatMessageType.outbound}']) {
         justify-content: flex-end;
     }
 
-    :host([message-type='inbound']) {
+    :host([message-type='${ChatMessageType.inbound}']) {
         justify-content: flex-start;
     }
 
-    div {
-        max-width: calc(100% - 200px);
+    .container {
+        display: flex;
+        flex-direction: column;
+        max-width: calc(90%);
+    }
+
+    [part='start'] {
+        display: none;
+    }
+
+    .message-content {
         width: fit-content;
         height: fit-content;
-        padding: ${mediumPadding};
         overflow-x: auto;
     }
 
-    :host([message-type='outbound']) div {
+    :host([message-type='${ChatMessageType.outbound}']) .message-content {
         background: ${fillSelectedColor};
         border: ${borderWidth} solid ${borderHoverColor};
-        border-radius: 8px 8px 0px 8px;
+        border-radius: ${mediumPadding} ${mediumPadding} 0px ${mediumPadding};
+        padding: ${mediumPadding};
+    }
+
+    .footer-actions {
+        display: none;
+    }
+
+    :host([message-type='${ChatMessageType.inbound}'])
+        .footer-actions.has-content {
+        display: flex;
+        column-gap: ${standardPadding};
+        margin-top: ${mediumPadding};
+    }
+
+    .footer-actions ::slotted(${buttonTag}),
+    .footer-actions ::slotted(${toggleButtonTag}),
+    .footer-actions ::slotted(${anchorButtonTag}),
+    .footer-actions ::slotted(${menuButtonTag}) {
+        height: ${controlSlimHeight};
+    }
+
+    .end {
+        display: none;
     }
 
-    :host([message-type='inbound']) div {
-        border-radius: 8px 8px 8px 0px;
+    :host([message-type='${ChatMessageType.inbound}']) .end {
+        display: flex;
+        column-gap: ${standardPadding};
+        margin-top: ${largePadding};
     }
 `;
 
   /* eslint-disable @typescript-eslint/indent */
   // prettier-ignore
-  const template$1 = html `<div><slot></slot></div>`;
+  const template$1 = (context, definition) => html `
+    <div class="container">
+        ${startSlotTemplate(context, definition)}
+        <section class="message-content">
+            <slot></slot>
+        </section>
+        <section class="footer-actions ${x => (x.footerActionsIsEmpty ? '' : 'has-content')}">
+           <slot 
+                name="footer-actions"
+                ${slotted({ property: 'slottedFooterActionsElements' })}
+           ></slot>
+        </section>
+        ${endSlotTemplate(context, definition)}
+    </div>
+`;
   /* eslint-enable @typescript-eslint/indent */
 
-  /**
-   * A message type in a chat conversation.
-   * @public
-   */
-  const ChatMessageType = {
-      system: undefined};
-
   /**
    * A Spright component for displaying a chat message
    */
@@ -93139,11 +93233,23 @@ focus outline in that case.
            * HTML Attribute: message-type
            */
           this.messageType = ChatMessageType.system;
+          /** @internal */
+          this.footerActionsIsEmpty = true;
+      }
+      slottedFooterActionsElementsChanged(_prev, next) {
+          this.footerActionsIsEmpty = !next?.length;
       }
   }
   __decorate([
       attr({ attribute: 'message-type' })
   ], ChatMessage.prototype, "messageType", void 0);
+  __decorate([
+      observable
+  ], ChatMessage.prototype, "footerActionsIsEmpty", void 0);
+  __decorate([
+      observable
+  ], ChatMessage.prototype, "slottedFooterActionsElements", void 0);
+  applyMixins(ChatMessage, StartEnd);
   const sprightChatMessage = ChatMessage.compose({
       baseName: 'chat-message',
       template: template$1,