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

package/bundle/openbridge-webcomponents.bundle.js

@@ -51296,6 +51296,10 @@ const compentStyle$14 = i$7`
   box-sizing: border-box;
 }
 
+:host {
+  overflow: hidden;
+}
+
 .label {
   font-family: var(--global-typography-font-family);
   font-weight: var(--global-typography-ui-body-font-weight);
@@ -75808,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.
@@ -75821,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"]');
@@ -75878,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();
@@ -75977,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}
@@ -77274,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
@@ -77298,6 +77326,7 @@ let ObcToggleSwitch = class extends i$4 {
               .checked=${this.checked}
               ?disabled=${this.disabled}
               @input=${this._tryChange}
+              @change=${this._fireChangeEvent}
             />
           </div>
         </div>
@@ -78080,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) => {
@@ -78109,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) {
@@ -78216,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) {
@@ -94344,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;
@@ -94405,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(
@@ -100660,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;
@@ -100747,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);
@@ -100863,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"
@@ -100873,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>
@@ -107397,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) => {
@@ -107426,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);
@@ -107531,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 = {
@@ -219131,10 +219204,36 @@ const compentStyle$7 = i$7`
 .chart-container {
   width: 100%;
   height: 100%;
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
+
+  padding-bottom: 0.5px;
+
+  --dot-width: 6px;
+  --dot-radius: calc(var(--dot-width) / 2);
+}
+
+.chart-container.medium {
+    --dot-width: 8px;
+  }
+
+.chart-container.large {
+    --dot-width: 10px;
+  }
+
+.u-over {
+  position: absolute;
+}
+
+#chart {
+  position: absolute;
+  width: calc(100% - var(--dot-radius));
+  left: 0;
+  top: var(--dot-radius);
+  bottom: var(--dot-radius);
 }
 
 canvas {
@@ -219146,11 +219245,12 @@ canvas {
 }
 
 #dot {
+  box-sizing: border-box;
   position: absolute;
-  width: 4px;
-  height: 4px;
-  right: -3px;
-  bottom: -3px;
+  width: var(--dot-width);
+  height: var(--dot-width);
+  right: 0;
+  bottom: 0;
   border-radius: 50%;
   background: var(--element-neutral-color);
   border: 1px solid var(--border-silhouette-color);
@@ -219161,25 +219261,12 @@ canvas {
   background: var(--element-neutral-enhanced-color);
 }
 
-.medium #dot {
-  width: 6px;
-  height: 6px;
-  right: -4px;
-  bottom: -4px;
-}
-
-.large #dot {
-  width: 8px;
-  height: 8px;
-  right: -5px;
-  bottom: -5px;
-}
-
 #zero-line {
   position: absolute;
-  width: 100%;
+  left: 0;
+  right: var(--dot-radius);
   height: 1px;
-  bottom: -0.5px;
+  bottom: calc(var(--dot-radius) - 0.5px);
   background: var(--element-disabled-color);
   border-radius: 2px;
 }
@@ -219335,6 +219422,7 @@ let ObcIndicatorGraph = class extends i$4 {
       <div
         class="chart-container ${this._effectivePriority} ${this._effectiveSize}"
       >
+        <div id="chart"></div>
         <div
           id="zero-line"
           style="transform: translateY(${-(this.zeroLineY ?? 0)}px);
@@ -219359,7 +219447,7 @@ __decorateClass$p([
   n$3({ type: Object })
 ], ObcIndicatorGraph.prototype, "layout", 2);
 __decorateClass$p([
-  e$3(".chart-container")
+  e$3("#chart")
 ], ObcIndicatorGraph.prototype, "chart", 2);
 __decorateClass$p([
   r$3()