@oicl/openbridge-webcomponents 2.0.0-next.124 → 2.0.0-next.125

package/bundle/openbridge-webcomponents.bundle.js

@@ -76568,6 +76568,21 @@ const componentStyle$_ = i$7`* {
       cursor: not-allowed;
     }
 
+/* A read-only field is still focusable and selectable, but it accepts no
+     edits — so it must not advertise the hover/pressed affordances that
+     \`@mixin style\` renders. Zeroing --obc-can-hover makes the mixin's hover
+     colour-mix collapse back onto the enabled colours; the pressed state has
+     no such switch and is restored explicitly. */
+
+.wrapper.readonly {
+    --obc-can-hover: 0;
+  }
+
+.wrapper.readonly:not(.disabled):active .input-field-container {
+    border-color: var(--normal-enabled-border-color);
+    background: var(--normal-enabled-background-color);
+  }
+
 .wrapper.helpertext,.wrapper.haslabel {
     flex-direction: column;
     align-items: flex-start;
@@ -76578,6 +76593,10 @@ const componentStyle$_ = i$7`* {
     background: var(--container-background-color);
   }
 
+.wrapper.readonly.empty:not(.disabled):active .input-field-container {
+    background: var(--container-background-color);
+  }
+
 .wrapper.empty:not(.disabled):focus-within .input-field-container {
     background: var(--normal-enabled-background-color);
   }
@@ -77173,7 +77192,7 @@ let ObcTextInputField = class extends i$4 {
   }
   render() {
     const hasHelperOrError = Boolean(this.helperText) || Boolean(this.error && this.errorText);
-    const showClearButton = this.hasClearButton && this.value.length > 0 && !this.disabled;
+    const showClearButton = this.hasClearButton && this.value.length > 0 && !this.disabled && !this.readonly;
     const isPasswordField = this.type === "password";
     const showPasswordToggle = isPasswordField && !this.disabled;
     const isClearButtonVisible = showClearButton && !showPasswordToggle;
@@ -77191,6 +77210,7 @@ let ObcTextInputField = class extends i$4 {
       [`size-${this.size}`]: true,
       error: this.error,
       disabled: this.disabled,
+      readonly: this.readonly,
       empty: this.isEmpty,
       helpertext: hasHelperOrError,
       haslabel: Boolean(this.label),
@@ -92861,8 +92881,7 @@ let ObcKeyboardFull = class extends i$4 {
     this.preventFocusLoss = (e2) => {
       e2.preventDefault();
     };
-    this.onKeyPress = async (key) => {
-      const char = this.capsLock && this.mode === "abc" && !this.showNumberRow ? key.toUpperCase() : key.toLowerCase();
+    this.onKeyPress = async (char) => {
       const inputElement = this.inputField?.shadowRoot?.querySelector(
         "input"
       );
@@ -92966,6 +92985,13 @@ let ObcKeyboardFull = class extends i$4 {
       this.dispatchValueChange();
     };
   }
+  /**
+   * The character a letter key both shows and inserts. CAPS applies wherever
+   * the alphabetic layout is rendered, including the number-row variant.
+   */
+  letterKeyLabel(key) {
+    return this.capsLock ? key.toUpperCase() : key.toLowerCase();
+  }
   renderCursorNavigation() {
     return b`
       <div class="navigation-buttons-container">
@@ -93101,18 +93127,19 @@ let ObcKeyboardFull = class extends i$4 {
                 ${index2 === 2 && row.length < 10 ? Array(10 - row.length).fill(0).map(
         () => b`<div class="key-button-placeholder"></div>`
       ) : A}
-                ${row.map(
-        (key) => b`
+                ${row.map((key) => {
+        const label = this.letterKeyLabel(key);
+        return b`
                     <obc-button
                       class="key-button"
                       variant="normal"
                       @mousedown=${this.preventFocusLoss}
-                      @click=${() => this.onKeyPress(key)}
+                      @click=${() => this.onKeyPress(label)}
                     >
-                      ${this.capsLock ? key.toUpperCase() : key.toLowerCase()}
+                      ${label}
                     </obc-button>
-                  `
-      )}
+                  `;
+      })}
               </div>
             `
     )}
@@ -93840,6 +93867,21 @@ const componentStyle$H = i$7`* {
       cursor: not-allowed;
     }
 
+/* A read-only field is still focusable and selectable, but it accepts no
+     edits — so it must not advertise the hover/pressed affordances that
+     \`@mixin style\` renders. Zeroing --obc-can-hover makes the mixin's hover
+     colour-mix collapse back onto the enabled colours; the pressed state has
+     no such switch and is restored explicitly. */
+
+.wrapper.readonly {
+    --obc-can-hover: 0;
+  }
+
+.wrapper.readonly:not(.disabled):active .input-field-container {
+    border-color: var(--normal-enabled-border-color);
+    background: var(--normal-enabled-background-color);
+  }
+
 .wrapper.helpertext,.wrapper.haslabel {
     flex-direction: column;
     align-items: flex-start;
@@ -93850,6 +93892,10 @@ const componentStyle$H = i$7`* {
     background: var(--container-background-color);
   }
 
+.wrapper.readonly.empty:not(.disabled):active .input-field-container {
+    background: var(--container-background-color);
+  }
+
 .wrapper.empty:not(.disabled):focus-within .input-field-container {
     background: var(--normal-enabled-background-color);
   }
@@ -94382,6 +94428,7 @@ let ObcNumberInputField = class extends i$4 {
   }
   onFocus() {
     this.hasFocus = true;
+    if (this.readonly) return;
     const source = this.displayOverride || this.displayText;
     this.displayText = removeGroupingFromDisplay(
       source,
@@ -94391,6 +94438,7 @@ let ObcNumberInputField = class extends i$4 {
   }
   onBlur() {
     this.hasFocus = false;
+    if (this.readonly) return;
     this.commitDisplay();
     if (!valuesEqual(this.value, this.lastCommittedValue)) {
       this.lastCommittedValue = this.value;
@@ -94563,6 +94611,7 @@ let ObcNumberInputField = class extends i$4 {
       [`size-${this.size}`]: true,
       error: this.error,
       disabled: this.disabled,
+      readonly: this.readonly,
       empty: this.isEmpty,
       helpertext: hasHelperOrError,
       haslabel: Boolean(this.label),
@@ -211159,8 +211208,12 @@ ObcAzimuthThrusterLabeled = __decorateClass$S([
   customElement("obc-azimuth-thruster-labeled")
 ], ObcAzimuthThrusterLabeled);
 const compentStyle$b = i$7`* {
-    -webkit-tap-highlight-color: transparent
-}`;
+  -webkit-tap-highlight-color: transparent;
+}
+svg {
+  display: block;
+}
+`;
 var __defProp$R = Object.defineProperty;
 var __getOwnPropDesc$R = Object.getOwnPropertyDescriptor;
 var __decorateClass$R = (decorators, target, key, kind) => {
@@ -212316,8 +212369,12 @@ ObcCompassFlat = __decorateClass$P([
   customElement("obc-compass-flat")
 ], ObcCompassFlat);
 const componentStyle$i = i$7`* {
-    -webkit-tap-highlight-color: transparent
-}`;
+  -webkit-tap-highlight-color: transparent;
+}
+svg {
+  display: block;
+}
+`;
 var __defProp$O = Object.defineProperty;
 var __getOwnPropDesc$O = Object.getOwnPropertyDescriptor;
 var __decorateClass$O = (decorators, target, key, kind) => {
@@ -214899,7 +214956,7 @@ let ObcGaugeHorizontal = class extends SetpointMixin(i$4, {
         height=${this.fixedAspectRatio ? "100%" : `${viewBox.height}px`}
         viewBox="${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}"
         preserveAspectRatio="${preserveAspectRatio}"
-        style="--scale: ${this.fixedAspectRatio ? this._scale : 1};"
+        style="--scale: ${this.fixedAspectRatio ? this._scale : 1}; display: block;"
         part="svg"
       >
         ${parts.barContainer} ${parts.barFill} ${parts.scaleBackground}
@@ -217578,7 +217635,7 @@ let ObcGaugeVertical = class extends SetpointMixin(i$4, {
         height=${this.fixedAspectRatio ? "100%" : `${this.height}px`}
         viewBox="${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}"
         preserveAspectRatio="${preserveAspectRatio}"
-        style="--scale: ${this.fixedAspectRatio ? this._scale : 1};"
+        style="--scale: ${this.fixedAspectRatio ? this._scale : 1}; display: block;"
         part="svg"
       >
         ${parts.barContainer} ${parts.barFill} ${parts.scaleBackground}