@ni/nimble-components 20.5.4 → 20.6.0

package/dist/all-components-bundle.js

@@ -16288,7 +16288,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Tue, 26 Sep 2023 20:58:04 GMT
+   * Generated on Thu, 28 Sep 2023 22:01:04 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -19482,11 +19482,12 @@
       data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M8.033 14.026 4.9 10.866 6.277 9.53l1.744 1.81 4.562-4.507 1.307 1.363Zm1.155-10.68-1.321-1.32-2.312 2.311-2.311-2.311-1.321 1.32 2.311 2.312L1.923 7.97l1.32 1.32 2.312-2.31 2.312 2.31 1.32-1.32-2.31-2.312Z"/></svg>`
   };
 
-  const template$t = html `
-    <template>
-        <div class="icon" :innerHTML=${x => x.icon.data}></div>
-    </template
-`;
+  // Avoiding any whitespace in the template because this is an inline element
+  const template$t = html `<div
+    class="icon"
+    aria-hidden="true"
+    :innerHTML=${x => x.icon.data}
+></div>`;
 
   const styles$I = css `
     ${display('inline-flex')}
@@ -19534,30 +19535,10 @@
           super();
           this.icon = icon;
       }
-      connectedCallback() {
-          super.connectedCallback();
-          this.forwardAriaLabelToSvg();
-      }
-      ariaLabelChanged() {
-          this.forwardAriaLabelToSvg();
-      }
-      forwardAriaLabelToSvg() {
-          const svg = this.shadowRoot?.querySelector('svg');
-          if (!svg) {
-              return;
-          }
-          if (this.ariaLabel !== null && this.ariaLabel !== undefined) {
-              svg.setAttribute('aria-label', this.ariaLabel);
-          }
-          else {
-              svg.removeAttribute('aria-label');
-          }
-      }
   }
   __decorate$1([
       attr
   ], Icon.prototype, "severity", void 0);
-  applyMixins(Icon, ARIAGlobalStatesAndProperties);
   const registerIcon = (baseName, iconClass) => {
       const composedIcon = iconClass.compose({
           baseName,
@@ -19634,7 +19615,10 @@
   const coreLabelDefaults = {
       popupDismissLabel: 'Close',
       numericIncrementLabel: 'Increment',
-      numericDecrementLabel: 'Decrement'
+      numericDecrementLabel: 'Decrement',
+      errorIconLabel: 'Error',
+      warningIconLabel: 'Warning',
+      informationIconLabel: 'Information'
   };
 
   const popupDismissLabel = DesignToken.create({
@@ -19649,6 +19633,18 @@
       name: 'numeric-increment-label',
       cssCustomPropertyName: null
   }).withDefault(coreLabelDefaults.numericIncrementLabel);
+  const errorIconLabel = DesignToken.create({
+      name: 'error-icon-label',
+      cssCustomPropertyName: null
+  }).withDefault(coreLabelDefaults.errorIconLabel);
+  const warningIconLabel = DesignToken.create({
+      name: 'warning-icon-label',
+      cssCustomPropertyName: null
+  }).withDefault(coreLabelDefaults.warningIconLabel);
+  const informationIconLabel = DesignToken.create({
+      name: 'information-icon-label',
+      cssCustomPropertyName: null
+  }).withDefault(coreLabelDefaults.informationIconLabel);
 
   // prettier-ignore
   const template$s = html `
@@ -19677,13 +19673,13 @@
     >
         <div class="icon">
             ${when(x => x.severity === BannerSeverity.error, html `
-                <${iconExclamationMarkTag}></${iconExclamationMarkTag}>
+                <${iconExclamationMarkTag} role="img" aria-label="${x => errorIconLabel.getValueFor(x)}"></${iconExclamationMarkTag}>
             `)}
             ${when(x => x.severity === BannerSeverity.warning, html `
-                <${iconTriangleFilledTag}></${iconTriangleFilledTag}>
+                <${iconTriangleFilledTag} role="img" aria-label="${x => warningIconLabel.getValueFor(x)}"></${iconTriangleFilledTag}>
             `)}
             ${when(x => x.severity === BannerSeverity.information, html `
-                <${iconInfoTag}></${iconInfoTag}>
+                <${iconInfoTag} role="img" aria-label="${x => informationIconLabel.getValueFor(x)}"></${iconInfoTag}>
             `)}
         </div>
         <div class="text">
@@ -23675,7 +23671,10 @@
   const supportedLabels$1 = {
       popupDismiss: popupDismissLabel,
       numericDecrement: numericDecrementLabel,
-      numericIncrement: numericIncrementLabel
+      numericIncrement: numericIncrementLabel,
+      errorIcon: errorIconLabel,
+      warningIcon: warningIconLabel,
+      informationIcon: informationIconLabel
   };
   /**
    * Core label provider for Nimble
@@ -23695,6 +23694,15 @@
   __decorate$1([
       attr({ attribute: 'numeric-increment' })
   ], LabelProviderCore.prototype, "numericIncrement", void 0);
+  __decorate$1([
+      attr({ attribute: 'error-icon' })
+  ], LabelProviderCore.prototype, "errorIcon", void 0);
+  __decorate$1([
+      attr({ attribute: 'warning-icon' })
+  ], LabelProviderCore.prototype, "warningIcon", void 0);
+  __decorate$1([
+      attr({ attribute: 'information-icon' })
+  ], LabelProviderCore.prototype, "informationIcon", void 0);
   const nimbleLabelProviderCore = LabelProviderCore.compose({
       baseName: 'label-provider-core'
   });
@@ -58785,6 +58793,46 @@ img.ProseMirror-separator {
           this.scrollbarWidth = -1;
           this.updateScrollbarWidthQueued = false;
           this.xmlSerializer = new XMLSerializer();
+          this.validAbsoluteLinkRegex = /^https?:\/\//i;
+          /**
+           * This method finds the Link mark in the pasted content and update its Text node.
+           * If there is no text node, pass the node's fragment recursively and updates only node containing Link mark.
+           * If the Text node does not contains Link mark, push the same node to `updatedNodes`.
+           *
+           * @param fragment Fragment containing the pasted content. [Fragment](https://prosemirror.net/docs/ref/#model.Fragment)
+           * @returns modified fragment from the `updatedNode` after updating the valid link text with its href value.
+           */
+          this.updateLinkNodes = (fragment) => {
+              const updatedNodes = [];
+              fragment.forEach(node => {
+                  if (node.isText && node.marks.length > 0) {
+                      const linkMark = node.marks.find(mark => mark.type.name === 'link' && mark.attrs);
+                      if (linkMark) {
+                          // Checks if the link is valid link or not
+                          // Needing to separately validate the link on paste is a workaround for a tiptap issue
+                          // See: https://github.com/ni/nimble/issues/1527
+                          if (this.validAbsoluteLinkRegex.test(linkMark.attrs.href)) {
+                              // The below lines of code is responsible for updating the text content with its href value and creates a new updated text node.
+                              // This code needs an update when the hyperlink support is added.
+                              // See: https://github.com/ni/nimble/issues/1527
+                              updatedNodes.push(this.tiptapEditor.schema.text(linkMark.attrs.href, node.marks));
+                          }
+                          else {
+                              // If it is a invalid link, creates a new Text node with the same text content and without a Link mark.
+                              updatedNodes.push(this.tiptapEditor.schema.text(node.textContent, linkMark.removeFromSet(node.marks)));
+                          }
+                      }
+                      else {
+                          updatedNodes.push(node);
+                      }
+                  }
+                  else {
+                      const updatedContent = this.updateLinkNodes(node.content);
+                      updatedNodes.push(node.copy(updatedContent));
+                  }
+              });
+              return Fragment.fromArray(updatedNodes);
+          };
       }
       /**
        * True if the editor is empty or contains only whitespace, false otherwise.
@@ -58956,6 +59004,14 @@ img.ProseMirror-separator {
       }
       createTiptapEditor() {
           const customLink = this.getCustomLinkExtension();
+          /**
+           * @param slice contains the Fragment of the copied content. If the content is a link, the slice contains Text node with Link mark.
+           * ProseMirror reference for `transformPasted`: https://prosemirror.net/docs/ref/#view.EditorProps.transformPasted
+           */
+          const transformPasted = (slice) => {
+              const modifiedFragment = this.updateLinkNodes(slice.content);
+              return new Slice(modifiedFragment, slice.openStart, slice.openEnd);
+          };
           /**
            * For more information on the extensions for the supported formatting options, refer to the links below.
            * Tiptap marks: https://tiptap.dev/api/marks
@@ -58970,6 +59026,14 @@ img.ProseMirror-separator {
               // Lists do not have any default paste rules, they have only input rules, so disabled paste rules
               // https://tiptap.dev/api/editor#enable-paste-rules
               enablePasteRules: false,
+              editorProps: {
+                  // Validating whether the links in the pasted content belongs to the supported scheme (HTTPS/HTTP),
+                  // and rendering it as a link in the editor. If not, rendering it as a plain text.
+                  // Also, updating the link text content with its href as we support only the absolute link.
+                  // `transformPasted` can be updated/removed when hyperlink support added
+                  // See: https://github.com/ni/nimble/issues/1527
+                  transformPasted
+              },
               extensions: [
                   Document$1,
                   Paragraph,
@@ -58997,7 +59061,7 @@ img.ProseMirror-separator {
                       // linkOnPaste can be enabled when hyperlink support added
                       // See: https://github.com/ni/nimble/issues/1527
                       linkOnPaste: false,
-                      validate: href => /^https?:\/\//i.test(href)
+                      validate: href => this.validAbsoluteLinkRegex.test(href)
                   })
               ]
           });
@@ -59019,10 +59083,18 @@ img.ProseMirror-separator {
               // See: https://github.com/ni/nimble/issues/1527
               inclusive: false,
               parseHTML() {
-                  // To load the `nimble-anchor` from the HTML parsed content by markdown-parser as links in the
-                  // Tiptap editor, the `parseHTML` of Link extension should return `anchorTag`. This is because the
-                  // link mark schema in `markdown-parser.ts` file uses `<nimble-anchor>` as anchor tag and not `<a>`.
-                  return [{ tag: anchorTag }];
+                  return [
+                      // To load the `nimble-anchor` from the HTML parsed content by markdown-parser as links in the Tiptap editor, the `parseHTML`
+                      // of Link extension should return nimble `anchorTag`.
+                      // This is because the link mark schema in `markdown-parser.ts` file uses `<nimble-anchor>` as anchor tag and not `<a>`.
+                      {
+                          tag: anchorTag
+                      },
+                      // `<a>` tag is added here to support when pasting a link from external source.
+                      {
+                          tag: 'a'
+                      }
+                  ];
               },
               // HTMLAttribute cannot be in camelCase as we want to match it with the name in Tiptap
               // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -63968,6 +64040,7 @@ img.ProseMirror-separator {
             <${iconTwoSquaresInBracketsTag}
                 class="grouped-indicator"
                 title="${x => tableColumnHeaderGroupedLabel.getValueFor(x)}"
+                role="img"
                 aria-label="${x => tableColumnHeaderGroupedLabel.getValueFor(x)}"
             ></${iconTwoSquaresInBracketsTag}>
         `)}
@@ -68664,6 +68737,7 @@ img.ProseMirror-separator {
   const createIconTemplate = (icon) => html `
     <${icon}
         title="${x => x.text}"
+        role="img"
         aria-label="${x => x.text}"
         severity="${x => x.severity}"
         class="no-shrink"