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

package/src/components/number-input-field/number-input-field.spec.ts

@@ -352,4 +352,41 @@ describe('obc-number-input-field', () => {
       expect(event.defaultPrevented).toBe(false);
     });
   });
+
+  describe('readonly', () => {
+    beforeEach(async () => {
+      el.groupSeparator = ' ';
+      el.decimalSeparator = '.';
+      el.value = 1234.5;
+      el.readonly = true;
+      await el.updateComplete;
+    });
+
+    it('marks the native input readonly', () => {
+      expect(input.readOnly).toBe(true);
+    });
+
+    it('flags the wrapper so the hover and pressed states are suppressed', () => {
+      const wrapper = el.shadowRoot!.querySelector('.wrapper') as HTMLElement;
+      expect(wrapper.classList.contains('readonly')).toBe(true);
+    });
+
+    it('keeps the grouped display on focus', async () => {
+      const before = input.value;
+      input.focus();
+      await el.updateComplete;
+
+      expect(input.value).toBe(before);
+      expect(input.value).toContain(' ');
+    });
+
+    it('keeps its value across a focus/blur round trip', async () => {
+      input.focus();
+      await el.updateComplete;
+      input.blur();
+      await el.updateComplete;
+
+      expect(el.value).toBe(1234.5);
+    });
+  });
 });

package/src/components/number-input-field/number-input-field.stories.ts

@@ -38,6 +38,11 @@ const meta: Meta<typeof ObcNumberInputField> = {
       control: {type: 'boolean'},
       description: 'Disables the input field',
     },
+    readonly: {
+      control: {type: 'boolean'},
+      description:
+        'Makes the value selectable and copyable but not editable, and removes the hover and pressed states',
+    },
     error: {
       control: {type: 'boolean'},
       description: 'Displays error styling and sets aria-invalid',
@@ -105,6 +110,7 @@ const meta: Meta<typeof ObcNumberInputField> = {
           .textAlign=${args.textAlign ?? ObcNumberInputFieldTextAlign.Right}
           .size=${args.size ?? ObcNumberInputFieldSize.Regular}
           ?disabled=${args.disabled}
+          ?readonly=${args.readonly}
           ?error=${args.error}
           .errorText=${args.errorText ?? ''}
           ?hasLeadingIcon=${args.hasLeadingIcon}
@@ -352,6 +358,23 @@ export const Disabled: Story = {
   },
 };
 
+export const Readonly: Story = {
+  args: {
+    value: 50,
+    unit: '%',
+    label: 'Throttle Position',
+    readonly: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Read-only fields allow selection and copying but prevent editing.',
+      },
+    },
+  },
+};
+
 export const Error: Story = {
   args: {
     value: 999,

package/src/components/number-input-field/number-input-field.ts

@@ -204,6 +204,9 @@ export class ObcNumberInputField extends LitElement {
 
   private onFocus() {
     this.hasFocus = true;
+    // A read-only field has nothing to edit, so it keeps its formatted display
+    // instead of switching to the ungrouped editing representation.
+    if (this.readonly) return;
     const source = this.displayOverride || this.displayText;
     this.displayText = removeGroupingFromDisplay(
       source,
@@ -214,6 +217,7 @@ export class ObcNumberInputField extends LitElement {
 
   private onBlur() {
     this.hasFocus = false;
+    if (this.readonly) return;
     this.commitDisplay();
     if (!valuesEqual(this.value, this.lastCommittedValue)) {
       this.lastCommittedValue = this.value;
@@ -443,6 +447,7 @@ export class ObcNumberInputField extends LitElement {
           [`size-${this.size}`]: true,
           error: this.error,
           disabled: this.disabled,
+          readonly: this.readonly,
           empty: this.isEmpty,
           helpertext: hasHelperOrError,
           haslabel: Boolean(this.label),

package/src/components/text-input-field/text-input-field.spec.ts

@@ -263,5 +263,34 @@ describe('obc-text-input-field', () => {
       expect(input.value).toBe('');
       expect(el.value).toBe('');
     });
+
+    it('is hidden when readonly, since clearing is an edit', async () => {
+      el.readonly = true;
+      await el.updateComplete;
+
+      expect(el.shadowRoot!.querySelector('.trailing-icon-button')).toBeNull();
+    });
+  });
+
+  describe('readonly', () => {
+    beforeEach(async () => {
+      el.readonly = true;
+      await el.updateComplete;
+    });
+
+    it('marks the native input readonly', () => {
+      expect(input.readOnly).toBe(true);
+    });
+
+    it('flags the wrapper so the hover and pressed states are suppressed', () => {
+      const wrapper = el.shadowRoot!.querySelector('.wrapper') as HTMLElement;
+      expect(wrapper.classList.contains('readonly')).toBe(true);
+    });
+
+    it('stays focusable so the value can be read and copied', () => {
+      input.focus();
+
+      expect(el.shadowRoot!.activeElement).toBe(input);
+    });
   });
 });

package/src/components/text-input-field/text-input-field.ts

@@ -246,7 +246,10 @@ export class ObcTextInputField extends LitElement {
     const hasHelperOrError =
       Boolean(this.helperText) || Boolean(this.error && this.errorText);
     const showClearButton =
-      this.hasClearButton && this.value.length > 0 && !this.disabled;
+      this.hasClearButton &&
+      this.value.length > 0 &&
+      !this.disabled &&
+      !this.readonly;
     const isPasswordField = this.type === HTMLInputTypeAttribute.Password;
     const showPasswordToggle = isPasswordField && !this.disabled;
     const isClearButtonVisible = showClearButton && !showPasswordToggle;
@@ -272,6 +275,7 @@ export class ObcTextInputField extends LitElement {
           [`size-${this.size}`]: true,
           error: this.error,
           disabled: this.disabled,
+          readonly: this.readonly,
           empty: this.isEmpty,
           helpertext: hasHelperOrError,
           haslabel: Boolean(this.label),

package/src/mixins/base-input-field.css

@@ -40,6 +40,20 @@
     }
   }
 
+  /* 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. */
+  &.readonly {
+    --obc-can-hover: 0;
+  }
+
+  &.readonly:not(.disabled):active .input-field-container {
+    border-color: var(--normal-enabled-border-color);
+    background: var(--normal-enabled-background-color);
+  }
+
   &.helpertext,
   &.haslabel {
     flex-direction: column;
@@ -51,6 +65,10 @@
     background: var(--container-background-color);
   }
 
+  &.readonly.empty:not(.disabled):active .input-field-container {
+    background: var(--container-background-color);
+  }
+
   &.empty:not(.disabled):focus-within .input-field-container {
     background: var(--normal-enabled-background-color);
   }

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

@@ -0,0 +1,3 @@
+svg {
+  display: block;
+}

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

@@ -0,0 +1,3 @@
+svg {
+  display: block;
+}

package/src/navigation-instruments/gauge-horizontal/gauge-horizontal.ts

@@ -327,7 +327,9 @@ export class ObcGaugeHorizontal extends SetpointMixin(LitElement, {
         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}

package/src/navigation-instruments/gauge-vertical/gauge-vertical.ts

@@ -327,7 +327,9 @@ export class ObcGaugeVertical extends SetpointMixin(LitElement, {
         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}