@ni/nimble-components 20.10.3 → 20.12.0

package/dist/all-components-bundle.js

@@ -7516,6 +7516,16 @@
   applyMixins(DelegatesARIAButton, ARIAGlobalStatesAndProperties);
   applyMixins(Button$1, StartEnd, DelegatesARIAButton);
 
+  /**
+   * An Card Custom HTML Element.
+   *
+   * @slot - The default slot for the card content
+   *
+   * @public
+   */
+  let Card$1 = class Card extends FoundationElement {
+  };
+
   /**
    * The template for the {@link @microsoft/fast-foundation#(Checkbox:class)} component.
    * @public
@@ -16288,7 +16298,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Wed, 01 Nov 2023 14:47:40 GMT
+   * Generated on Wed, 01 Nov 2023 20:26:57 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -16673,9 +16683,9 @@
       return `${prefix}${uniqueIdCounter++}`;
   }
 
-  const template$A = html `<slot></slot>`;
+  const template$B = html `<slot></slot>`;
 
-  const styles$T = css `
+  const styles$U = css `
     :host {
         display: contents;
     }
@@ -16792,8 +16802,8 @@
   ], ThemeProvider.prototype, "theme", void 0);
   const nimbleDesignSystemProvider = ThemeProvider.compose({
       baseName: 'theme-provider',
-      styles: styles$T,
-      template: template$A
+      styles: styles$U,
+      template: template$B
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -16823,7 +16833,7 @@
   const actionRgbPartialColor = DesignToken.create(styleNameFromTokenName(tokenNames.actionRgbPartialColor)).withDefault((element) => hexToRgbPartial(getColorForTheme(element, Black91, Black15, White)));
   const applicationBackgroundColor = DesignToken.create(styleNameFromTokenName(tokenNames.applicationBackgroundColor)).withDefault((element) => getColorForTheme(element, White, Black85, ForestGreen));
   DesignToken.create(styleNameFromTokenName(tokenNames.headerBackgroundColor)).withDefault((element) => getColorForTheme(element, Black7, Black88, ForestGreen));
-  DesignToken.create(styleNameFromTokenName(tokenNames.sectionBackgroundColor)).withDefault((element) => getColorForTheme(element, Black15, Black80, ForestGreen));
+  const sectionBackgroundColor = DesignToken.create(styleNameFromTokenName(tokenNames.sectionBackgroundColor)).withDefault((element) => getColorForTheme(element, Black15, Black80, ForestGreen));
   DesignToken.create(styleNameFromTokenName(tokenNames.dividerBackgroundColor)).withDefault((element) => getColorForTheme(element, Black15, Black80, ForestGreen));
   const fillSelectedColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillSelectedColor)).withDefault((element) => hexToRgbaCssColor(getFillSelectedColorForTheme(element), 0.2));
   const fillSelectedRgbPartialColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillSelectedRgbPartialColor)).withDefault((element) => hexToRgbPartial(getFillSelectedColorForTheme(element)));
@@ -16988,7 +16998,7 @@
       }
   }
 
-  const styles$S = css `
+  const styles$T = css `
     ${display('inline')}
 
     :host {
@@ -17071,7 +17081,7 @@
 `;
 
   // prettier-ignore
-  const template$z = (_context, definition) => html `<a
+  const template$A = (_context, definition) => html `<a
         class="control"
         part="control"
         download="${x => x.download}"
@@ -17161,8 +17171,8 @@
   const nimbleAnchor = Anchor.compose({
       baseName: 'anchor',
       baseClass: Anchor$1,
-      template: template$z,
-      styles: styles$S,
+      template: template$A,
+      styles: styles$T,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17265,7 +17275,7 @@
     padding: 0;
 `;
 
-  const styles$R = css `
+  const styles$S = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -17542,8 +17552,8 @@
             }
         `));
 
-  const styles$Q = css `
-    ${styles$R}
+  const styles$R = css `
+    ${styles$S}
     ${buttonAppearanceVariantStyles}
 
     .control {
@@ -17551,7 +17561,7 @@
     }
 `;
 
-  const template$y = (context, definition) => html `
+  const template$z = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17633,8 +17643,8 @@
   ], AnchorButton.prototype, "disabled", void 0);
   const nimbleAnchorButton = AnchorButton.compose({
       baseName: 'anchor-button',
-      template: template$y,
-      styles: styles$Q,
+      template: template$z,
+      styles: styles$R,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17642,7 +17652,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
   DesignSystem.tagFor(AnchorButton);
 
-  const styles$P = css `
+  const styles$Q = css `
     ${display('grid')}
 
     :host {
@@ -17719,7 +17729,7 @@
     }
 `;
 
-  const template$x = (context, definition) => html `
+  const template$y = (context, definition) => html `
     <template
         role="menuitem"
         class="${x => (typeof x.startColumnCount === 'number'
@@ -17825,8 +17835,8 @@
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
   const nimbleAnchorMenuItem = AnchorMenuItem.compose({
       baseName: 'anchor-menu-item',
-      template: template$x,
-      styles: styles$P,
+      template: template$y,
+      styles: styles$Q,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17850,7 +17860,7 @@
       }
   });
 
-  const styles$O = css `
+  const styles$P = css `
     ${display('inline-flex')}
 
     :host {
@@ -17966,7 +17976,7 @@
     }
 `;
 
-  const template$w = (context, definition) => html `
+  const template$x = (context, definition) => html `
     <template slot="anchortab" role="tab" aria-disabled="${x => x.disabled}">
         <a
             download="${x => x.download}"
@@ -18018,8 +18028,8 @@
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
   const nimbleAnchorTab = AnchorTab.compose({
       baseName: 'anchor-tab',
-      template: template$w,
-      styles: styles$O,
+      template: template$x,
+      styles: styles$P,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -18027,7 +18037,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
   DesignSystem.tagFor(AnchorTab);
 
-  const styles$N = css `
+  const styles$O = css `
     ${display('grid')}
 
     :host {
@@ -18049,7 +18059,7 @@
     }
 `;
 
-  const template$v = (context, definition) => html `
+  const template$w = (context, definition) => html `
     ${startSlotTemplate(context, definition)}
     <div ${ref('tablist')} class="tablist" part="tablist" role="tablist">
         <slot name="anchortab" ${slotted('tabs')}></slot>
@@ -18255,8 +18265,8 @@
   applyMixins(AnchorTabs, StartEnd);
   const nimbleAnchorTabs = AnchorTabs.compose({
       baseName: 'anchor-tabs',
-      template: template$v,
-      styles: styles$N,
+      template: template$w,
+      styles: styles$O,
       shadowOptions: {
           delegatesFocus: false
       }
@@ -18273,7 +18283,7 @@
     -webkit-user-select: none;
 `;
 
-  const styles$M = css `
+  const styles$N = css `
     ${display('block')}
 
     :host {
@@ -18374,7 +18384,7 @@
     }
 `;
 
-  const template$u = (context, definition) => html `
+  const template$v = (context, definition) => html `
     <template
         role="treeitem"
         slot="${x => (x.isNestedItem() ? 'item' : null)}"
@@ -18511,8 +18521,8 @@
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
   const nimbleAnchorTreeItem = AnchorTreeItem.compose({
       baseName: 'anchor-tree-item',
-      template: template$u,
-      styles: styles$M,
+      template: template$v,
+      styles: styles$N,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -18522,7 +18532,7 @@
       .register(nimbleAnchorTreeItem());
   DesignSystem.tagFor(AnchorTreeItem);
 
-  const styles$L = css `
+  const styles$M = css `
     :host {
         contain: layout;
         display: block;
@@ -18546,7 +18556,7 @@
       baseName: 'anchored-region',
       baseClass: AnchoredRegion$1,
       template: anchoredRegionTemplate,
-      styles: styles$L
+      styles: styles$M
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -18626,7 +18636,7 @@
    */
   const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
 
-  const styles$K = css `
+  const styles$L = css `
     ${display('flex')}
 
     :host {
@@ -18769,8 +18779,8 @@
             }
         `));
 
-  const styles$J = css `
-    ${styles$R}
+  const styles$K = css `
+    ${styles$S}
     ${buttonAppearanceVariantStyles}
 `;
 
@@ -18816,7 +18826,7 @@
       baseName: 'button',
       baseClass: Button$1,
       template: buttonTemplate,
-      styles: styles$J,
+      styles: styles$K,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -18889,6 +18899,10 @@
       name: 'arrows_repeat_16_x_16',
       data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" 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"/></svg>`
   };
+  const at16X16 = {
+      name: 'at_16_x_16',
+      data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" xml:space="preserve"><path d="M12.139 3.621a5.49 5.49 0 0 1 1.206 1.845c.29.716.436 1.519.436 2.407 0 .641-.091 1.292-.275 1.954-.183.662-.412 1.211-.687 1.646H9.343l-.11-.536a4.554 4.554 0 0 1-.756.415c-.242.104-.593.155-1.051.155-.747 0-1.351-.308-1.813-.924-.462-.616-.694-1.446-.694-2.49 0-.558.078-1.047.234-1.467.156-.418.369-.784.639-1.095.252-.293.556-.522.914-.687a2.518 2.518 0 0 1 1.064-.248c.302 0 .57.056.804.169.234.112.414.23.543.353v-.425h1.594v5.605h1.168c.165-.362.288-.755.368-1.178.079-.424.12-.83.12-1.22 0-.774-.108-1.453-.323-2.036-.215-.585-.512-1.069-.892-1.453a3.695 3.695 0 0 0-1.366-.879 4.861 4.861 0 0 0-1.697-.289c-.581 0-1.133.115-1.657.343a4.548 4.548 0 0 0-1.383.928c-.407.398-.738.898-.992 1.497s-.381 1.257-.381 1.972c0 .778.12 1.468.36 2.068.24.6.559 1.099.958 1.497.397.393.86.694 1.386.9a4.533 4.533 0 0 0 1.668.309c.389 0 .831-.035 1.328-.106a9.3 9.3 0 0 0 1.321-.279v1.333c-.426.096-.85.17-1.271.22-.422.049-.882.075-1.381.075a6.124 6.124 0 0 1-2.325-.433 5.415 5.415 0 0 1-1.852-1.23 5.58 5.58 0 0 1-1.212-1.91 6.666 6.666 0 0 1-.436-2.444c0-.852.151-1.641.453-2.366a5.94 5.94 0 0 1 1.25-1.9A5.66 5.66 0 0 1 5.781 2.46 5.808 5.808 0 0 1 8.079 2c.806 0 1.558.142 2.257.426a5.273 5.273 0 0 1 1.803 1.195zM9.082 9.652V6.19a2.79 2.79 0 0 0-.522-.21 2.1 2.1 0 0 0-.543-.065c-.44 0-.778.192-1.017.577s-.357.912-.357 1.58c0 .723.098 1.259.295 1.607.197.348.522.522.975.522.238 0 .446-.047.625-.141.18-.093.36-.229.544-.408z"/></svg>`
+  };
   const bars16X16 = {
       name: 'bars_16_x_16',
       data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M2 13v-2h12v2Zm0-4V7h12v2Zm0-4V3h12v2Z"/></svg>`
@@ -19495,13 +19509,13 @@
   };
 
   // Avoiding any whitespace in the template because this is an inline element
-  const template$t = html `<div
+  const template$u = html `<div
     class="icon"
     aria-hidden="true"
     :innerHTML=${x => x.icon.data}
 ></div>`;
 
-  const styles$I = css `
+  const styles$J = css `
     ${display('inline-flex')}
 
     :host {
@@ -19554,8 +19568,8 @@
   const registerIcon = (baseName, iconClass) => {
       const composedIcon = iconClass.compose({
           baseName,
-          template: template$t,
-          styles: styles$I,
+          template: template$u,
+          styles: styles$J,
           baseClass: iconClass
       });
       DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
@@ -19659,7 +19673,7 @@
   }).withDefault(coreLabelDefaults.informationIconLabel);
 
   // prettier-ignore
-  const template$s = html `
+  const template$t = html `
     <div class="container"
         role="status"
         aria-atomic="${x => x.ariaAtomic}"
@@ -19775,13 +19789,13 @@
   applyMixins(Banner, ARIAGlobalStatesAndProperties);
   const nimbleBanner = Banner.compose({
       baseName: 'banner',
-      template: template$s,
-      styles: styles$K
+      template: template$t,
+      styles: styles$L
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
   DesignSystem.tagFor(Banner);
 
-  const styles$H = css `
+  const styles$I = css `
     ${display('inline-block')}
 
     :host {
@@ -19822,12 +19836,12 @@
       baseName: 'breadcrumb',
       baseClass: Breadcrumb$1,
       template: breadcrumbTemplate,
-      styles: styles$H
+      styles: styles$I
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
   DesignSystem.tagFor(Breadcrumb);
 
-  const styles$G = css `
+  const styles$H = css `
     ${display('inline-flex')}
 
     :host {
@@ -19901,7 +19915,7 @@
       baseName: 'breadcrumb-item',
       baseClass: BreadcrumbItem$1,
       template: breadcrumbItemTemplate,
-      styles: styles$G,
+      styles: styles$H,
       separator: forwardSlash16X16.data
   });
   DesignSystem.getOrCreate()
@@ -19909,6 +19923,36 @@
       .register(nimbleBreadcrumbItem());
   DesignSystem.tagFor(BreadcrumbItem);
 
+  const styles$G = css `
+    ${display('flex')}
+
+    :host {
+        flex-direction: column;
+        gap: ${standardPadding};
+        padding: ${standardPadding};
+        border: ${borderWidth} solid ${borderColor};
+        font: ${bodyFont};
+        color: ${bodyFontColor};
+        background-color: ${sectionBackgroundColor};
+    }
+`;
+
+  const template$s = html `<slot></slot>`;
+
+  /**
+   * A nimble-styled card
+   */
+  class Card extends Card$1 {
+  }
+  const nimbleCard = Card.compose({
+      baseName: 'card',
+      baseClass: Card$1,
+      template: template$s,
+      styles: styles$G
+  });
+  DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCard());
+  DesignSystem.tagFor(Card);
+
   const styles$F = css `
     ${display('inline-flex')}
 
@@ -20202,7 +20246,7 @@
   const checkboxTag = DesignSystem.tagFor(Checkbox);
 
   const styles$D = css `
-    ${styles$R}
+    ${styles$S}
 
     @layer base {
         .control[aria-pressed='true'] {
@@ -21756,6 +21800,19 @@
   registerIcon('icon-arrows-repeat', IconArrowsRepeat);
   DesignSystem.tagFor(IconArrowsRepeat);
 
+  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+  // See generation source in nimble-components/build/generate-icons
+  /**
+   * The icon component for the 'at' icon
+   */
+  class IconAt extends Icon {
+      constructor() {
+          super(at16X16);
+      }
+  }
+  registerIcon('icon-at', IconAt);
+  DesignSystem.tagFor(IconAt);
+
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
@@ -44574,6 +44631,39 @@ img.ProseMirror-separator {
       });
   }
 
+  function pasteHandler(options) {
+      return new Plugin({
+          key: new PluginKey('handlePasteLink'),
+          props: {
+              handlePaste: (view, event, slice) => {
+                  var _a;
+                  const { state } = view;
+                  const { selection } = state;
+                  const { empty } = selection;
+                  if (empty) {
+                      return false;
+                  }
+                  let textContent = '';
+                  slice.content.forEach(node => {
+                      textContent += node.textContent;
+                  });
+                  const link = find$1(textContent).find(item => item.isLink && item.value === textContent);
+                  if (!textContent || !link) {
+                      return false;
+                  }
+                  const html = (_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text/html');
+                  const hrefRegex = /href="([^"]*)"/;
+                  const existingLink = html === null || html === void 0 ? void 0 : html.match(hrefRegex);
+                  const url = existingLink ? existingLink[1] : link.href;
+                  options.editor.commands.setMark(options.type, {
+                      href: url,
+                  });
+                  return true;
+              },
+          },
+      });
+  }
+
   const Link = Mark.create({
       name: 'link',
       priority: 1000,
@@ -44667,7 +44757,7 @@ img.ProseMirror-separator {
                   type: this.type,
                   getAttributes: (match, pasteEvent) => {
                       var _a, _b;
-                      const html = (_a = pasteEvent.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text/html');
+                      const html = (_a = pasteEvent === null || pasteEvent === void 0 ? void 0 : pasteEvent.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text/html');
                       const hrefRegex = /href="([^"]*)"/;
                       const existingLink = html === null || html === void 0 ? void 0 : html.match(hrefRegex);
                       if (existingLink) {
@@ -44695,6 +44785,12 @@ img.ProseMirror-separator {
                   type: this.type,
               }));
           }
+          if (this.options.linkOnPaste) {
+              plugins.push(pasteHandler({
+                  editor: this.editor,
+                  type: this.type,
+              }));
+          }
           return plugins;
       },
   });