@oicl/openbridge-webcomponents 2.0.0-next.78 → 2.0.0-next.79

package/bundle/openbridge-webcomponents.bundle.js

@@ -75812,12 +75812,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 +75836,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 +75894,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 +75995,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 +77295,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 +77326,7 @@ let ObcToggleSwitch = class extends i$4 {
               .checked=${this.checked}
               ?disabled=${this.disabled}
               @input=${this._tryChange}
+              @change=${this._fireChangeEvent}
             />
           </div>
         </div>
@@ -78084,7 +78109,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 +78138,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 +78252,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 +94385,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 +94453,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 +100711,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 +100810,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 +100927,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 +100938,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 +107463,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 +107492,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 +107604,7 @@ let ObcToggleButtonVerticalGroup = class extends i$4 {
   }
   onOptionSelected(e2) {
     const { value } = e2.detail;
-    this.updateSelection(value);
+    this.updateSelection(value, true, true);
   }
   render() {
     const classes = {