@ni/ok-components 0.3.9 → 0.3.10

package/dist/all-components-bundle.js

@@ -19445,11 +19445,17 @@ Defines an interaction area clip-path that leaves out the severity text so it is
       cssCustomPropertyName: null
   }).withDefault(coreLabelDefaults.itemRemoveLabel);
 
+  /**
+   * Orientation of steppers.
+   * @public
+   */
+  const StepperOrientation = Orientation;
+
   const template$V = (context, definition) => html `
     <template slot="step">
         <li class="
             container
-            ${x => (x.stepInternals.orientation === 'vertical' ? 'vertical' : '')}
+            ${x => (x.stepInternals.orientation === StepperOrientation.vertical ? 'vertical' : '')}
             ${x => (x.stepInternals.last ? 'last' : '')}
         ">
             <a
@@ -19507,12 +19513,6 @@ Defines an interaction area clip-path that leaves out the severity text so it is
     </template>
 `;
 
-  /**
-   * Orientation of steppers.
-   * @public
-   */
-  const StepperOrientation = Orientation;
-
   /**
    * Internal properties configurable for a step
    */
@@ -23617,6 +23617,7 @@ so this becomes the fallback color for the slot */ ''}
       }
   }
   registerIconSvg('icon-arrow-expander-up', IconArrowExpanderUp);
+  const iconArrowExpanderUpTag = 'nimble-icon-arrow-expander-up';
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
@@ -66522,7 +66523,7 @@ ${nextLine.slice(indentLevel + 2)}`;
     <template slot="step">
         <li class="
             container
-            ${x => (x.stepInternals.orientation === 'vertical' ? 'vertical' : '')}
+            ${x => (x.stepInternals.orientation === StepperOrientation.vertical ? 'vertical' : '')}
             ${x => (x.stepInternals.last ? 'last' : '')}
         ">
             <button
@@ -66652,15 +66653,61 @@ ${nextLine.slice(indentLevel + 2)}`;
 
     :host {
         border: none;
-        gap: ${smallPadding};
     }
 
     :host([orientation="vertical"]) {
         flex-direction: column;
     }
 
-    ol {
-        display: contents;
+    .scroll-button.start {
+        width: ${controlHeight};
+        height: ${controlHeight};
+        margin-right: ${smallPadding};
+        margin-bottom: 0px;
+    }
+
+    :host([orientation="vertical"]) .scroll-button.start {
+        margin-right: 0px;
+        margin-bottom: ${smallPadding};
+    }
+
+    .list {
+        flex-grow: 1;
+        display: inline-flex;
+        gap: ${smallPadding};
+        scrollbar-width: none;
+        padding: 0;
+        margin: 0;
+
+        flex-direction: row;
+        overflow-x: scroll;
+        overflow-y: hidden;
+        width: max-content;
+        max-width: 100%;
+        height: auto;
+        max-height: none;
+    }
+
+    :host([orientation="vertical"]) .list {
+        flex-direction: column;
+        overflow-x: hidden;
+        overflow-y: scroll;
+        width: auto;
+        max-width: none;
+        height: max-content;
+        max-height: 100%;
+    }
+
+    .scroll-button.end {
+        width: ${controlHeight};
+        height: ${controlHeight};
+        margin-left: ${smallPadding};
+        margin-top: 0px;
+    }
+
+    :host([orientation="vertical"]) .scroll-button.end {
+        margin-left: 0px;
+        margin-top: ${smallPadding};
     }
 
     slot[name="step"]::slotted(*) {
@@ -66672,10 +66719,35 @@ ${nextLine.slice(indentLevel + 2)}`;
     }
 `;
 
-  const template$w = html `<ol><slot
-        name="step"
-        ${slotted('steps')}
-    ></slot></ol>`;
+  const template$w = html `
+    ${when(x => x.showScrollButtons, html `
+        <${buttonTag}
+            content-hidden
+            class="scroll-button start"
+            appearance="${ButtonAppearance.ghost}"
+            @click="${x => x.onScrollStartClick()}"
+            ${ref('startScrollButton')}
+        >
+            ${x => scrollForwardLabel.getValueFor(x)}
+            ${when(x => x.isHorizontal(), html `<${iconArrowExpanderLeftTag} slot="start"></${iconArrowExpanderLeftTag}>`, html `<${iconArrowExpanderUpTag} slot="start"></${iconArrowExpanderUpTag}>`)}
+        </${buttonTag}>
+    `)}
+    <ol ${ref('list')} class="list"><slot
+            name="step"
+            ${slotted('steps')}
+        ></slot></ol>
+    ${when(x => x.showScrollButtons, html `
+        <${buttonTag}
+            content-hidden
+            class="scroll-button end"
+            appearance="${ButtonAppearance.ghost}"
+            @click="${x => x.onScrollEndClick()}"
+        >
+            ${x => scrollBackwardLabel.getValueFor(x)}
+            ${when(x => x.isHorizontal(), html `<${iconArrowExpanderRightTag} slot="start"></${iconArrowExpanderRightTag}>`, html `<${iconArrowExpanderDownTag} slot="start"></${iconArrowExpanderDownTag}>`)}
+        </${buttonTag}>
+    `)}
+`;
 
   /**
    * A nimble-styled stepper
@@ -66684,12 +66756,70 @@ ${nextLine.slice(indentLevel + 2)}`;
       constructor() {
           super(...arguments);
           this.orientation = StepperOrientation.horizontal;
+          /** @internal */
+          this.showScrollButtons = false;
+      }
+      /** @internal */
+      onScrollStartClick() {
+          if (this.isHorizontal()) {
+              this.list.scrollBy({
+                  left: -this.list.clientWidth,
+                  behavior: 'smooth'
+              });
+          }
+          else {
+              this.list.scrollBy({
+                  top: -this.list.clientHeight,
+                  behavior: 'smooth'
+              });
+          }
+      }
+      /** @internal */
+      onScrollEndClick() {
+          if (this.isHorizontal()) {
+              this.list.scrollBy({
+                  left: this.list.clientWidth,
+                  behavior: 'smooth'
+              });
+          }
+          else {
+              this.list.scrollBy({
+                  top: this.list.clientHeight,
+                  behavior: 'smooth'
+              });
+          }
+      }
+      /** @internal */
+      connectedCallback() {
+          super.connectedCallback();
+          // Steps fill parent container so can't rely on a resize observer to track their space usage.
+          // Instead directly track each step's occlusion with intersection observer which is more compute intensive.
+          // When available can switch to container scroll state queries, see: https://github.com/ni/nimble/issues/2922
+          this.listIntersectionObserver = new IntersectionObserver(_ => {
+              this.handleListOverflow();
+          }, {
+              root: this.list,
+              threshold: 1.0
+          });
+      }
+      /** @internal */
+      disconnectedCallback() {
+          super.disconnectedCallback();
+          this.listIntersectionObserver?.disconnect();
+      }
+      /** @internal */
+      isHorizontal() {
+          return this.orientation !== StepperOrientation.vertical;
       }
       orientationChanged() {
           this.updateStepInternals();
       }
       stepsChanged() {
           this.updateStepInternals();
+          this.listIntersectionObserver?.disconnect();
+          if (this.steps) {
+              this.steps.forEach(step => this.listIntersectionObserver?.observe(step));
+          }
       }
       updateStepInternals() {
           if (!this.steps) {
@@ -66697,15 +66827,38 @@ ${nextLine.slice(indentLevel + 2)}`;
           }
           const lastIndex = this.steps.length - 1;
           this.steps.forEach((step, index) => {
-              step.stepInternals.orientation = this.orientation;
+              step.stepInternals.orientation = this.isHorizontal()
+                  ? StepperOrientation.horizontal
+                  : StepperOrientation.vertical;
               step.stepInternals.last = index === lastIndex;
               step.stepInternals.position = index + 1;
           });
       }
+      handleListOverflow() {
+          let listVisibleSize = this.isHorizontal()
+              ? this.list.clientWidth
+              : this.list.clientHeight;
+          if (listVisibleSize !== undefined) {
+              const buttonSize = this.isHorizontal()
+                  ? this.startScrollButton?.clientWidth ?? 0
+                  : this.startScrollButton?.clientHeight ?? 0;
+              listVisibleSize = Math.ceil(listVisibleSize);
+              if (this.showScrollButtons) {
+                  listVisibleSize += buttonSize * 2;
+              }
+              const listScrollSize = this.isHorizontal()
+                  ? this.list.scrollWidth
+                  : this.list.scrollHeight;
+              this.showScrollButtons = listVisibleSize < listScrollSize;
+          }
+      }
   }
   __decorate([
       attr
   ], Stepper.prototype, "orientation", void 0);
+  __decorate([
+      observable
+  ], Stepper.prototype, "showScrollButtons", void 0);
   __decorate([
       observable
   ], Stepper.prototype, "steps", void 0);