@ni/nimble-components 34.2.0 → 34.3.1

package/dist/all-components-bundle.js

@@ -6781,20 +6781,6 @@
   ], BreadcrumbItem$1.prototype, "separator", void 0);
   applyMixins(BreadcrumbItem$1, StartEnd, DelegatesARIALink);
 
-  /**
-   * The template for the {@link @ni/fast-foundation#Breadcrumb} component.
-   * @public
-   */
-  const breadcrumbTemplate = (context, definition) => html `
-    <template role="navigation">
-        <div role="list" class="list" part="list">
-            <slot
-                ${slotted({ property: "slottedBreadcrumbItems", filter: elements() })}
-            ></slot>
-        </div>
-    </template>
-`;
-
   /**
    * A Breadcrumb Custom HTML Element.
    * @slot - The default slot for the breadcrumb items
@@ -18359,6 +18345,14 @@
       name: 'pot_with_lid_16_x_16',
       data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M11 4V2H5v2H2v1h12V4ZM6 4V3h4v1Zm-4 9h1v1h10v-1h1V6H2Z" class="cls-1"/></svg>`,
   };
+  const print = {
+      name: 'print',
+      data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M10.55 10.6H8V10h2.25zm-5.3.4-.5 1h6.5l-.5-1zM14 11h-1l1 2v1H2v-1l1-2H2V6l1-2h1V2h8v2h1l1 2zM5 5h6V3H5zm8 8-2-4H5l-2 4zm0-6h-1v1h1z" class="cls-1"/></svg>`,
+  };
+  const qrcodeRead = {
+      name: 'qrcode_read',
+      data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6 4v2H4V4zm6 0h-2v2h2zm-8 8h2v-2H4zM3 3h2V2H2v3h1zm10-1h-2v1h2v2h1V2zm0 11h-2v1h3v-3h-1zM3 11H2v3h3v-1H3zm7-3H9v1h1zM8 9V7H7v1H6v1h1v1h2V9zm4 3v-1h-1v1zm-1-2h1V7h-2v1h1v1h-1v1H9v1h2zm-4 2h2v-1H7zM5 7H4v2h1V8h1V7zm2-1H6v1h1zm1-2H7v1h1v1h1V4zm1 2v1h1V6z" class="cls-1"/></svg>`,
+  };
   const question16X16 = {
       name: 'question_16_x_16',
       data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M11.303 5.594a3.3 3.3 0 0 1-.195 1.176 2.6 2.6 0 0 1-.549.885 4 4 0 0 1-.852.672 7.5 7.5 0 0 1-1.121.54v1.501H6.27V8.15q.467-.125.845-.256a3.2 3.2 0 0 0 .793-.429 2.1 2.1 0 0 0 .608-.612 1.45 1.45 0 0 0 .22-.791 1.04 1.04 0 0 0-.423-.939 2.16 2.16 0 0 0-1.195-.28 3.3 3.3 0 0 0-1.068.204 4.9 4.9 0 0 0-1.09.526h-.263V3.566a8 8 0 0 1 1.296-.372A8.2 8.2 0 0 1 7.77 3a4.2 4.2 0 0 1 2.579.718 2.24 2.24 0 0 1 .954 1.876M8.77 13H6.112v-1.737H8.77Z" class="cls-1"/></svg>`,
@@ -19741,12 +19735,71 @@
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
 
+  /**
+   * The template for the {@link @ni/fast-foundation#Breadcrumb} component.
+   * @public
+   */
+  // prettier-ignore
+  const breadcrumbTemplate = (_context, _definition) => html `
+    <template role="navigation">
+        ${when(x => x.showScrollButtons, html `
+            <${buttonTag} 
+                content-hidden
+                class="scroll-button left"
+                appearance="${ButtonAppearance.ghost}"
+                @click="${x => x.onScrollLeftClick()}"
+                ${ref('leftScrollButton')}
+            >
+                ${x => scrollForwardLabel.getValueFor(x)}
+                <${iconArrowExpanderLeftTag} slot="start"></${iconArrowExpanderLeftTag}>
+            </${buttonTag}>
+        `)}
+        <div ${ref('list')} role="list" class="list" part="list" tabindex="-1">
+            <slot
+                ${slotted({ property: 'slottedBreadcrumbItems', filter: elements() })}
+            ></slot>
+        </div>
+        ${when(x => x.showScrollButtons, html `
+            <${buttonTag}
+                content-hidden
+                class="scroll-button right"
+                appearance="${ButtonAppearance.ghost}"
+                @click="${x => x.onScrollRightClick()}"
+            >
+                ${x => scrollBackwardLabel.getValueFor(x)}
+                <${iconArrowExpanderRightTag} slot="start"></${iconArrowExpanderRightTag}>
+            </${buttonTag}>
+        `)}
+    </template>
+`;
+
   const styles$R = css `
-    ${display('inline-block')}
+    ${display('inline-flex')}
+
+    :host {
+        flex-direction: row;
+    }
+
+    .scroll-button.left {
+        margin-right: ${smallPadding};
+    }
 
     .list {
-        display: flex;
-        flex-wrap: wrap;
+        display: inline-flex;
+        max-width: 100%;
+        width: max-content;
+        align-self: end;
+        overflow-x: scroll;
+        scrollbar-width: none;
+    }
+
+    .scroll-button.right {
+        margin-left: ${smallPadding};
+    }
+
+    ::slotted(*) {
+        flex-shrink: 0;
+        white-space: nowrap;
     }
 
     ::slotted(:last-child) {
@@ -19763,10 +19816,63 @@
    * A nimble-styled breadcrumb
    */
   class Breadcrumb extends Breadcrumb$1 {
+      constructor() {
+          super();
+          /**
+           * @internal
+           */
+          this.showScrollButtons = false;
+          this.listResizeObserver = new ResizeObserver(entries => {
+              let listVisibleWidth = entries[0]?.contentRect.width;
+              if (listVisibleWidth !== undefined) {
+                  const buttonWidth = this.leftScrollButton?.clientWidth ?? 0;
+                  listVisibleWidth = Math.ceil(listVisibleWidth);
+                  if (this.showScrollButtons) {
+                      listVisibleWidth += buttonWidth * 2;
+                  }
+                  this.showScrollButtons = listVisibleWidth < this.list.scrollWidth;
+              }
+          });
+      }
+      /**
+       * @internal
+       */
+      onScrollLeftClick() {
+          this.list.scrollBy({
+              left: -this.list.clientWidth,
+              behavior: 'smooth'
+          });
+      }
+      /**
+       * @internal
+       */
+      onScrollRightClick() {
+          this.list.scrollBy({
+              left: this.list.clientWidth,
+              behavior: 'smooth'
+          });
+      }
+      /**
+       * @internal
+       */
+      connectedCallback() {
+          super.connectedCallback();
+          this.listResizeObserver.observe(this.list);
+      }
+      /**
+       * @internal
+       */
+      disconnectedCallback() {
+          super.disconnectedCallback();
+          this.listResizeObserver.disconnect();
+      }
   }
   __decorate([
       attr
   ], Breadcrumb.prototype, "appearance", void 0);
+  __decorate([
+      observable
+  ], Breadcrumb.prototype, "showScrollButtons", void 0);
   const nimbleBreadcrumb = Breadcrumb.compose({
       baseName: 'breadcrumb',
       baseClass: Breadcrumb$1,
@@ -24331,6 +24437,30 @@ so this becomes the fallback color for the slot */ ''}
   }
   registerIcon('icon-pot-with-lid', IconPotWithLid);
 
+  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+  // See generation source in nimble-components/build/generate-icons
+  /**
+   * The icon component for the 'print' icon
+   */
+  class IconPrint extends Icon {
+      constructor() {
+          super(print);
+      }
+  }
+  registerIcon('icon-print', IconPrint);
+
+  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+  // See generation source in nimble-components/build/generate-icons
+  /**
+   * The icon component for the 'qrcodeRead' icon
+   */
+  class IconQrcodeRead extends Icon {
+      constructor() {
+          super(qrcodeRead);
+      }
+  }
+  registerIcon('icon-qrcode-read', IconQrcodeRead);
+
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**