@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.78 → 2.0.0-next.80

package/.storybook/vitest.setup.ts

@@ -1,4 +1,5 @@
 import {setProjectAnnotations} from '@storybook/web-components-vite';
+import {beforeEach} from 'vitest';
 import * as projectAnnotations from './preview.js';
 import {vis, visAnnotations} from 'storybook-addon-vis/vitest-setup';
 
@@ -20,4 +21,27 @@ document.head.appendChild(style);
 // https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
 setProjectAnnotations([projectAnnotations, visAnnotations]);
 
+// storybook-addon-vis captures and compares the screenshot in an afterEach hook.
 vis.setup();
+
+// Flaky visual snapshots are retried via Vitest's `test.retry` (configured in
+// vitest.config.ts). A retry re-runs the whole test, which re-renders the story
+// and captures a brand new screenshot — that re-render is what actually shakes
+// off render-time flakiness (e.g. sub-pixel anti-aliasing of <canvas> charts).
+// Simply re-capturing an already-rendered DOM is not enough: the pixels are
+// identical every time, so the only way to give a flaky frame another chance is
+// to render it again.
+//
+// One catch: the vis matcher skips the comparison when the test already has
+// recorded errors (`if (test.result.errors?.length) return`). On a Vitest retry
+// the previous attempt's failure is still attached to the task, so without
+// intervention the comparison would be silently skipped and the test would
+// "pass" — masking real regressions. Clearing those errors at the start of each
+// attempt keeps every retry honest: the snapshot is genuinely re-evaluated, so a
+// transient diff gets another chance while a real mismatch still fails once the
+// retries are exhausted.
+beforeEach((context) => {
+  if (context.task.result) {
+    context.task.result.errors = [];
+  }
+});

package/bundle/openbridge-webcomponents.bundle.js

@@ -14552,6 +14552,11 @@ const compentStyle$1d = i$7`
   height: fit-content;
 }
 
+:host([fullwidth]) {
+  display: block;
+  width: 100%;
+}
+
 .wrapper {
   --bg-color: var(--alert-alarm-color);
   --thickness: var(--global-size-spacing-border-weight-alertframe);
@@ -14578,6 +14583,10 @@ const compentStyle$1d = i$7`
     height: fit-content;
   }
 
+.wrapper.full-width {
+    width: 100%;
+  }
+
 .wrapper {
 
   --blink-width-dynamic: calc(var(--blink-width) * var(--blink-on));
@@ -15271,6 +15280,7 @@ let ObcAlertFrame = class extends i$4 {
     this.status = AlertType.Alarm;
     this.mode = "acked-active";
     this.wrapContent = false;
+    this.fullWidth = false;
     this.sharpEdgeTopLeft = false;
     this.sharpEdgeTopRight = false;
     this.sharpEdgeBottomLeft = false;
@@ -15285,6 +15295,7 @@ let ObcAlertFrame = class extends i$4 {
         class=${e$1({
       wrapper: true,
       "wrap-content": this.wrapContent,
+      "full-width": this.fullWidth,
       ["thickness-" + this.thickness]: true,
       [this.type]: true,
       [this.status]: true,
@@ -15382,6 +15393,9 @@ __decorateClass$zF([
 __decorateClass$zF([
   n$3({ type: Boolean, reflect: true })
 ], ObcAlertFrame.prototype, "wrapContent", 2);
+__decorateClass$zF([
+  n$3({ type: Boolean, reflect: true })
+], ObcAlertFrame.prototype, "fullWidth", 2);
 __decorateClass$zF([
   n$3({ type: Boolean })
 ], ObcAlertFrame.prototype, "sharpEdgeTopLeft", 2);
@@ -15406,7 +15420,7 @@ __decorateClass$zF([
 ObcAlertFrame = __decorateClass$zF([
   customElement("obc-alert-frame")
 ], ObcAlertFrame);
-function wrapWithAlertFrame(options, content) {
+function wrapWithAlertFrame(options, content, fullWidth = false) {
   if (typeof options !== "object" || options === null) {
     return content;
   }
@@ -15418,6 +15432,7 @@ function wrapWithAlertFrame(options, content) {
     .showIcon=${options.showIcon ?? false}
     .showAlertCategoryIcon=${options.showAlertCategoryIcon ?? true}
     .wrapContent=${true}
+    .fullWidth=${fullWidth}
     >${content}</obc-alert-frame
   >`;
 }
@@ -75812,12 +75827,23 @@ let ObcSlider = class extends i$4 {
     this.value = value;
     this.dispatchEvent(new CustomEvent("value", { detail: this.value }));
   }
+  /**
+   * Fires the `change` event with the current value.
+   *
+   * @fires change
+   */
+  fireChangeEvent() {
+    this.dispatchEvent(
+      new CustomEvent("change", { detail: this.value })
+    );
+  }
   /**
    * Decrements the value by `stepClick` when the left icon button is clicked.
    */
   onReduceClick() {
     if (this.disabled) return;
     this.onInput(Math.max(this.value - this.stepClick, this.min));
+    this.fireChangeEvent();
   }
   /**
    * Increments the value by `stepClick` when the right icon button is clicked.
@@ -75825,6 +75851,7 @@ let ObcSlider = class extends i$4 {
   onIncreaseClick() {
     if (this.disabled) return;
     this.onInput(Math.min(this.value + this.stepClick, this.max));
+    this.fireChangeEvent();
   }
   get slider() {
     return this.renderRoot.querySelector('input[type="range"]');
@@ -75882,12 +75909,14 @@ let ObcSlider = class extends i$4 {
     window.removeEventListener("mousemove", this.onWindowMouseMove);
     window.removeEventListener("mouseup", this.onWindowMouseUp);
     this.stopAnimation();
+    this.fireChangeEvent();
   }
   onTouchEnd() {
     this.isTouchActive = false;
     window.removeEventListener("touchmove", this.onWindowTouchMove);
     window.removeEventListener("touchend", this.onWindowTouchEnd);
     this.stopAnimation();
+    this.fireChangeEvent();
   }
   updateTargetValue(e2) {
     const rect2 = this.slider.getBoundingClientRect();
@@ -75981,6 +76010,9 @@ let ObcSlider = class extends i$4 {
           @input=${(event) => {
       this.value = Number(event.target.value);
       this.dispatchEvent(new CustomEvent("value", { detail: this.value }));
+    }}
+          @change=${() => {
+      this.fireChangeEvent();
     }}
           @mousedown=${this.onMouseDown}
           @touchstart=${this.onTouchStart}
@@ -77278,6 +77310,13 @@ let ObcToggleSwitch = class extends i$4 {
       e2.target.checked = this.checked;
     }
   }
+  _fireChangeEvent(e2) {
+    if (this.disabled) {
+      e2.preventDefault();
+      return;
+    }
+    this.dispatchEvent(new CustomEvent("change"));
+  }
   render() {
     return b`
       <label
@@ -77302,6 +77341,7 @@ let ObcToggleSwitch = class extends i$4 {
               .checked=${this.checked}
               ?disabled=${this.disabled}
               @input=${this._tryChange}
+              @change=${this._fireChangeEvent}
             />
           </div>
         </div>
@@ -78084,7 +78124,7 @@ let ObcToggleButtonGroup = class extends i$4 {
     if (this.disabled) return null;
     return Array.from(this.options).find((opt) => !opt.disabled) || null;
   }
-  updateSelection(newValue, emitEvent = true) {
+  updateSelection(newValue, emitValueEvent = true, emitChangeEvent = false) {
     const oldValue = this.value;
     if (!this.hasAnyEnabledOption()) {
       this.options.forEach((option) => {
@@ -78113,13 +78153,20 @@ let ObcToggleButtonGroup = class extends i$4 {
       option.selected = option.value === newValue;
     });
     this.setNoDivider();
-    if (emitEvent && oldValue !== newValue) {
+    if (emitValueEvent && oldValue !== newValue) {
       this.dispatchEvent(
         new CustomEvent("value", {
           detail: { value: newValue, previousValue: oldValue }
         })
       );
     }
+    if (emitChangeEvent && oldValue !== newValue) {
+      this.dispatchEvent(
+        new CustomEvent("change", {
+          detail: { value: newValue }
+        })
+      );
+    }
   }
   updateActivated(newValue) {
     if (newValue) {
@@ -78220,8 +78267,13 @@ let ObcToggleButtonGroup = class extends i$4 {
           detail: { value, previousValue: this.value }
         })
       );
+      this.dispatchEvent(
+        new CustomEvent("change", {
+          detail: { value }
+        })
+      );
     } else {
-      this.updateSelection(value);
+      this.updateSelection(value, true, true);
     }
   }
   willUpdate(changedProperties) {
@@ -94348,7 +94400,14 @@ let ObcPagination = class extends i$4 {
     this.fullWidth = false;
     this.disabled = false;
     this.handlePageChange = (event) => {
-      this.setCurrentPage(Number(event.detail.value));
+      const success = this.setCurrentPage(Number(event.detail.value));
+      if (success) {
+        this.dispatchEvent(
+          new CustomEvent("select-page", {
+            detail: { page: Number(event.detail.value) }
+          })
+        );
+      }
     };
     this.handleFirstClick = () => {
       if (!this.canNavigateFirst) return;
@@ -94409,13 +94468,16 @@ let ObcPagination = class extends i$4 {
   }
   setCurrentPage(newPage) {
     const page = Math.max(1, Math.min(newPage, this.validatedPages));
-    if (page === this.currentPage) return;
+    if (page === this.currentPage) {
+      return false;
+    }
     this.currentPage = page;
     this.dispatchEvent(
       new CustomEvent("value", {
         detail: { value: page }
       })
     );
+    return true;
   }
   dispatchNavigateEvent(action) {
     this.dispatchEvent(
@@ -100664,6 +100726,18 @@ let ObcSliderDouble = class extends i$4 {
       new CustomEvent("value", { detail: { low: this.low, high: this.high } })
     );
   }
+  /**
+   * Fires the `change` event with the current low and high values.
+   *
+   * @fires change
+   */
+  fireChangeEvent() {
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { low: this.low, high: this.high }
+      })
+    );
+  }
   lowClickValue(e2) {
     const rect2 = this.minInput.getBoundingClientRect();
     const left = rect2.left + this.THUMB_WIDTH - this.THUMB_VISIBLE_WIDTH / 2;
@@ -100751,6 +100825,7 @@ let ObcSliderDouble = class extends i$4 {
     window.removeEventListener("mousemove", this.onWindowMouseMove);
     window.removeEventListener("mouseup", this.onWindowMouseUp);
     this.stopAnimation();
+    this.fireChangeEvent();
   }
   updateTargetValue(e2) {
     const unroundedValue = this.isTargetingLow ? this.lowClickValue(e2) : this.highClickValue(e2);
@@ -100867,6 +100942,7 @@ let ObcSliderDouble = class extends i$4 {
           .value=${this.low.toString()}
           ?disabled=${this.variant === "no-input" || this.disabled}
           @input=${this.onInput}
+          @change=${() => this.fireChangeEvent()}
         />
         <input
           type="range"
@@ -100877,6 +100953,7 @@ let ObcSliderDouble = class extends i$4 {
           .value=${this.high.toString()}
           ?disabled=${this.variant === "no-input" || this.disabled}
           @input=${this.onInput}
+          @change=${() => this.fireChangeEvent()}
         />
         <div class="interactive-track"></div>
         <div class="thumb min"></div>
@@ -107401,7 +107478,7 @@ let ObcToggleButtonVerticalGroup = class extends i$4 {
     if (this.disabled) return null;
     return Array.from(this.options).find((opt) => !opt.disabled) || null;
   }
-  updateSelection(newValue, emitEvent = true) {
+  updateSelection(newValue, emitValueEvent = true, emitChangeEvent = false) {
     const oldValue = this.value;
     if (!this.hasAnyEnabledOption()) {
       this.options.forEach((option) => {
@@ -107430,13 +107507,20 @@ let ObcToggleButtonVerticalGroup = class extends i$4 {
       option.selected = option.value === newValue;
     });
     this.updateDividers();
-    if (emitEvent && oldValue !== newValue) {
+    if (emitValueEvent && oldValue !== newValue) {
       this.dispatchEvent(
         new CustomEvent("value", {
           detail: { value: newValue, previousValue: oldValue }
         })
       );
     }
+    if (emitChangeEvent && oldValue !== newValue) {
+      this.dispatchEvent(
+        new CustomEvent("change", {
+          detail: { value: newValue }
+        })
+      );
+    }
   }
   firstUpdated(changed) {
     super.firstUpdated(changed);
@@ -107535,7 +107619,7 @@ let ObcToggleButtonVerticalGroup = class extends i$4 {
   }
   onOptionSelected(e2) {
     const { value } = e2.detail;
-    this.updateSelection(value);
+    this.updateSelection(value, true, true);
   }
   render() {
     const classes = {
@@ -222747,7 +222831,8 @@ let ObcReadoutListItem = class extends i$4 {
                 `}
           </div>
         </div>
-      `
+      `,
+      true
     );
   }
 };