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

package/src/components/slider-double/slider-double.ts

@@ -29,6 +29,15 @@ export type ObcSliderDoubleValueEvent = CustomEvent<{
   high: number;
 }>;
 
+/**
+ * Event type for change event in obc-slider-double (fired after user interaction completes).
+ * Contains the current low and high values of the slider.
+ */
+export type ObcSliderDoubleChangeEvent = CustomEvent<{
+  low: number;
+  high: number;
+}>;
+
 /**
  * `<obc-slider-double>` – A dual-thumb range slider for selecting a value interval within a defined range.
  *
@@ -86,7 +95,8 @@ export type ObcSliderDoubleValueEvent = CustomEvent<{
  * - `hugcontainer` (attribute): If present, removes spacing between slider and container edges.
  *
  * ## Events
- * - `value` – Fired whenever the low or high value changes. Event detail contains `{low, high}`.
+ * - `value` – Fired continuously whenever the low or high value changes during user interaction. Event detail contains `{low, high}`.
+ * - `change` – Fired only after user interaction completes (mouse release). Event detail contains `{low, high}`.
  *
  * ## Best Practices and Constraints
  * - Ensure `low` is always less than or equal to `high`; the component enforces this automatically.
@@ -121,6 +131,7 @@ export type ObcSliderDoubleValueEvent = CustomEvent<{
  * @slot left-readout - Custom content for the left (low) readout label (rendered when `showLeftReadout` is true)
  * @slot right-readout - Custom content for the right (high) readout label (rendered when `showRightReadout` is true)
  * @fires value {ObcSliderDoubleValueEvent} - Fires when the value is changed
+ * @fires change {ObcSliderDoubleChangeEvent} - Fires when user interaction completes
  */
 @customElement('obc-slider-double')
 export class ObcSliderDouble extends LitElement {
@@ -281,6 +292,19 @@ export class ObcSliderDouble extends LitElement {
     );
   }
 
+  /**
+   * Fires the `change` event with the current low and high values.
+   *
+   * @fires change
+   */
+  private fireChangeEvent() {
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        detail: {low: this.low, high: this.high},
+      }) as ObcSliderDoubleChangeEvent
+    );
+  }
+
   private THUMB_WIDTH = 48;
   private THUMB_VISIBLE_WIDTH = 12;
 
@@ -389,6 +413,7 @@ export class ObcSliderDouble extends LitElement {
     window.removeEventListener('mousemove', this.onWindowMouseMove);
     window.removeEventListener('mouseup', this.onWindowMouseUp);
     this.stopAnimation();
+    this.fireChangeEvent();
   }
 
   private updateTargetValue(e: MouseEvent) {
@@ -534,6 +559,7 @@ export class ObcSliderDouble extends LitElement {
           ?disabled=${this.variant === ObcSliderDoubleVariant.NoInput ||
           this.disabled}
           @input=${this.onInput}
+          @change=${() => this.fireChangeEvent()}
         />
         <input
           type="range"
@@ -545,6 +571,7 @@ export class ObcSliderDouble extends LitElement {
           ?disabled=${this.variant === ObcSliderDoubleVariant.NoInput ||
           this.disabled}
           @input=${this.onInput}
+          @change=${() => this.fireChangeEvent()}
         />
         <div class="interactive-track"></div>
         <div class="thumb min"></div>

package/src/components/toggle-button-group/toggle-button-group.ts

@@ -14,6 +14,10 @@ export type ObcToggleButtonGroupValueChangeEvent = CustomEvent<{
   previousValue: string;
 }>;
 
+export type ObcToggleButtonGroupChangeEvent = CustomEvent<{
+  value: string;
+}>;
+
 /**
  * `<obc-toggle-button-group>` – A segmented control for selecting a single option from a set (also known as a button group or segmented button).
  *
@@ -122,6 +126,7 @@ export type ObcToggleButtonGroupValueChangeEvent = CustomEvent<{
  *
  * @slot - Place one or more `<obc-toggle-button-option>` elements here to define the selectable options.
  * @fires value {CustomEvent<{value: string, previousValue: string}>} Fired when the selected value changes.
+ * @fires change {CustomEvent<{value: string}>} Fired when the selected value changes by user interaction.
  */
 @customElement('obc-toggle-button-group')
 export class ObcToggleButtonGroup extends LitElement {
@@ -229,7 +234,11 @@ export class ObcToggleButtonGroup extends LitElement {
     return Array.from(this.options).find((opt) => !opt.disabled) || null;
   }
 
-  private updateSelection(newValue: string, emitEvent: boolean = true) {
+  private updateSelection(
+    newValue: string,
+    emitValueEvent: boolean = true,
+    emitChangeEvent: boolean = false
+  ) {
     const oldValue = this.value;
 
     if (!this.hasAnyEnabledOption()) {
@@ -264,13 +273,21 @@ export class ObcToggleButtonGroup extends LitElement {
 
     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},
+        })
+      );
+    }
   }
 
   private updateActivated(newValue: string | undefined) {
@@ -391,8 +408,14 @@ export class ObcToggleButtonGroup extends LitElement {
           detail: {value, previousValue: this.value},
         })
       );
+
+      this.dispatchEvent(
+        new CustomEvent('change', {
+          detail: {value},
+        })
+      );
     } else {
-      this.updateSelection(value);
+      this.updateSelection(value, true, true);
     }
   }
 

package/src/components/toggle-button-vertical-group/toggle-button-vertical-group.ts

@@ -15,6 +15,10 @@ export type ObcToggleButtonVerticalGroupValueChangeEvent = CustomEvent<{
   previousValue: string;
 }>;
 
+export type ObcToggleButtonVerticalGroupChangeEvent = CustomEvent<{
+  value: string;
+}>;
+
 /**
  * `<obc-toggle-button-vertical-group>` – A vertically oriented segmented control for selecting a single option from a set.
  *
@@ -108,6 +112,7 @@ export type ObcToggleButtonVerticalGroupValueChangeEvent = CustomEvent<{
  *
  * @slot - Place one or more `<obc-toggle-button-vertical-option>` elements here to define the selectable options.
  * @fires value {CustomEvent<{value: string, previousValue: string}>} Fired when the selected value changes.
+ * @fires change {CustomEvent<{value: string}>} Fired when the selected value changes by user interaction.
  */
 @customElement('obc-toggle-button-vertical-group')
 export class ObcToggleButtonVerticalGroup extends LitElement {
@@ -182,7 +187,11 @@ export class ObcToggleButtonVerticalGroup extends LitElement {
     return Array.from(this.options).find((opt) => !opt.disabled) || null;
   }
 
-  private updateSelection(newValue: string, emitEvent: boolean = true) {
+  private updateSelection(
+    newValue: string,
+    emitValueEvent: boolean = true,
+    emitChangeEvent: boolean = false
+  ) {
     const oldValue = this.value;
 
     if (!this.hasAnyEnabledOption()) {
@@ -217,7 +226,7 @@ export class ObcToggleButtonVerticalGroup extends LitElement {
 
     this.updateDividers();
 
-    if (emitEvent && oldValue !== newValue) {
+    if (emitValueEvent && oldValue !== newValue) {
       /**
        * Fired when the selected option changes.
        *
@@ -232,6 +241,22 @@ export class ObcToggleButtonVerticalGroup extends LitElement {
         })
       );
     }
+
+    if (emitChangeEvent && oldValue !== newValue) {
+      /**
+       * Fired when the selected value changes by user interaction.
+       *
+       * The event detail contains the new value:
+       * `{ value: string }`
+       *
+       * @event change
+       */
+      this.dispatchEvent(
+        new CustomEvent('change', {
+          detail: {value: newValue},
+        })
+      );
+    }
   }
 
   protected override firstUpdated(changed: PropertyValues) {
@@ -350,7 +375,7 @@ export class ObcToggleButtonVerticalGroup extends LitElement {
 
   private onOptionSelected(e: Event): void {
     const {value} = (e as CustomEvent).detail;
-    this.updateSelection(value);
+    this.updateSelection(value, true, true);
   }
 
   override render() {

package/src/components/toggle-switch/toggle-switch.ts

@@ -85,6 +85,7 @@ export type ObcToggleSwitchInputEvent = CustomEvent<{
  *
  * @slot icon - Leading icon slot (shown when `hasIcon` is true)
  * @fires input - {ObcToggleSwitchInputEvent} Dispatched when the value of the input changes
+ * @fires change - Dispatched when the value of the input changes by user interaction
  */
 @customElement('obc-toggle-switch')
 export class ObcToggleSwitch extends LitElement {
@@ -162,6 +163,14 @@ export class ObcToggleSwitch extends LitElement {
     }
   }
 
+  private _fireChangeEvent(e: Event) {
+    if (this.disabled) {
+      e.preventDefault();
+      return;
+    }
+    this.dispatchEvent(new CustomEvent('change'));
+  }
+
   override render() {
     return html`
       <label
@@ -190,6 +199,7 @@ export class ObcToggleSwitch extends LitElement {
               .checked=${this.checked}
               ?disabled=${this.disabled}
               @input=${this._tryChange}
+              @change=${this._fireChangeEvent}
             />
           </div>
         </div>

package/src/navigation-instruments/indicator-graph/indicator-graph.css

@@ -1,10 +1,36 @@
 .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);
+
+  &.medium {
+    --dot-width: 8px;
+  }
+
+  &.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 {
@@ -16,11 +42,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);
@@ -31,25 +58,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;
 }

package/src/navigation-instruments/indicator-graph/indicator-graph.ts

@@ -36,7 +36,7 @@ export class ObcIndicatorGraph extends LitElement {
   @property({type: Object})
   layout: ObcIndicatorGraphLayout = {};
 
-  @query('.chart-container')
+  @query('#chart')
   private chart!: HTMLDivElement;
 
   @state()
@@ -202,6 +202,7 @@ export class ObcIndicatorGraph extends LitElement {
         class="chart-container ${this._effectivePriority} ${this
           ._effectiveSize}"
       >
+        <div id="chart"></div>
         <div
           id="zero-line"
           style="transform: translateY(${-(this.zeroLineY ?? 0)}px);

package/src/navigation-instruments/watch/watch.css

@@ -2,6 +2,10 @@
   box-sizing: border-box;
 }
 
+:host {
+  overflow: hidden;
+}
+
 .label {
   @mixin font-body;
   font-size: calc(12px / var(--scale, 1));