@ni/nimble-components 34.3.0 → 34.3.1

package/dist/all-components-bundle.min.js

@@ -2458,11 +2458,32 @@ this.$emit("toggle",t)}dismissBanner(){this.open=!1}}t([ft({mode:"boolean"})],Gg
 const Zg=Gg.compose({baseName:"banner",template:Wg,styles:Vg})
 Di.getOrCreate().withPrefix("nimble").register(Zg())
 const Kg=Mt`
-    ${qs("inline-block")}
+    ${qs("inline-flex")}
+
+    :host {
+        flex-direction: row;
+    }
+
+    .scroll-button.left {
+        margin-right: ${Rl};
+    }
 
     .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: ${Rl};
+    }
+
+    ::slotted(*) {
+        flex-shrink: 0;
+        white-space: nowrap;
     }
 
     ::slotted(:last-child) {
@@ -2474,14 +2495,39 @@ const Kg=Mt`
         color: ${Ac};
     }
 `
-class Yg extends En{}t([ft],Yg.prototype,"appearance",void 0)
+class Yg extends En{constructor(){super(),this.showScrollButtons=!1,this.listResizeObserver=new ResizeObserver((t=>{let e=t[0]?.contentRect.width
+if(void 0!==e){const t=this.leftScrollButton?.clientWidth??0
+e=Math.ceil(e),this.showScrollButtons&&(e+=2*t),this.showScrollButtons=e<this.list.scrollWidth}}))}onScrollLeftClick(){this.list.scrollBy({left:-this.list.clientWidth,behavior:"smooth"})}onScrollRightClick(){this.list.scrollBy({left:this.list.clientWidth,behavior:"smooth"})}connectedCallback(){super.connectedCallback(),this.listResizeObserver.observe(this.list)}disconnectedCallback(){super.disconnectedCallback(),this.listResizeObserver.disconnect()}}t([ft],Yg.prototype,"appearance",void 0),t([C],Yg.prototype,"showScrollButtons",void 0)
 const Xg=Yg.compose({baseName:"breadcrumb",baseClass:En,template:(t,e)=>Q`
     <template role="navigation">
-        <div role="list" class="list" part="list">
+        ${Gt((t=>t.showScrollButtons),Q`
+            <${Nh} 
+                content-hidden
+                class="scroll-button left"
+                appearance="${gh}"
+                @click="${t=>t.onScrollLeftClick()}"
+                ${Ut("leftScrollButton")}
+            >
+                ${t=>_g.getValueFor(t)}
+                <${ng} slot="start"></${ng}>
+            </${Nh}>
+        `)}
+        <div ${Ut("list")} role="list" class="list" part="list" tabindex="-1">
             <slot
                 ${ie({property:"slottedBreadcrumbItems",filter:te()})}
             ></slot>
         </div>
+        ${Gt((t=>t.showScrollButtons),Q`
+            <${Nh}
+                content-hidden
+                class="scroll-button right"
+                appearance="${gh}"
+                @click="${t=>t.onScrollRightClick()}"
+            >
+                ${t=>Sg.getValueFor(t)}
+                <${ig} slot="start"></${ig}>
+            </${Nh}>
+        `)}
     </template>
 `,styles:Kg})
 Di.getOrCreate().withPrefix("nimble").register(Xg())