@ni/ok-components 0.0.2 → 0.0.3

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
@@ -19749,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$W = css `
-    ${display$2('inline-block')}
+    ${display$2('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) {
@@ -19771,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,