@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.76 → 2.0.0-next.78

package/src/automation/automation-button/abstract-automation-button-motorized.ts

@@ -42,7 +42,10 @@ export class ObcAbstractAutomationButtonMotorized extends ObcAbstractAutomationB
           nDigits: this.speedMaxDigits,
           unit: this.speedUnit,
           direction: this.labelDirection,
-          icon: 'chevron',
+          icon:
+            this.labelDirection === AutomationButtonLabelDirection.none
+              ? 'none'
+              : 'chevron',
         },
       ];
     } else if (!this.on) {

package/src/automation/automation-button/automation-button.ts

@@ -69,6 +69,7 @@ export enum AutomationButtonLabelDirection {
   down = 'down',
   left = 'left',
   right = 'right',
+  none = 'none',
 }
 
 /**

package/src/components/automation-button-readout-stack/automation-button-readout-stack.ts

@@ -31,7 +31,7 @@ export interface AutomationButtonReadoutStackValue {
   value: number;
   nDigits: number;
   unit: string;
-  direction: 'up' | 'down' | 'left' | 'right';
+  direction: 'up' | 'down' | 'left' | 'right' | 'none';
   icon: 'none' | 'arrow' | 'chevron';
 }
 

package/src/navigation-instruments/gauge-radial/gauge-radial.css

@@ -5,18 +5,30 @@
 }
 
 /* Host takes each sector's crop aspect (see `sectorClips`): 270/90 square, 180
-   wide — so the dial is the same size at any width. */
+   wide — so the dial is the same size at any width.
+
+   `width`/`height: auto` + `max-width`/`max-height: 100%` makes the host the
+   largest box of the sector's aspect ratio that fits inside *both* the
+   available width and height. Using `height: auto` alone only honours the
+   width, so in a short, wide (e.g. flex) container the square would grow as
+   tall as it is wide and overflow — see issue #992. */
 :host([sector="270"]),
 :host([sector="90-left"]),
 :host([sector="90-right"]) {
+  width: auto;
   height: auto;
+  max-width: 100%;
+  max-height: 100%;
   aspect-ratio: 1;
 }
 
 /* 448 / 251 = the 180° crop's aspect (448 wide × 448·(1 − 44%) tall); keep in
    sync with `sectorClips` bottom=44 in gauge-radial.ts. */
 :host([sector="180"]) {
+  width: auto;
   height: auto;
+  max-width: 100%;
+  max-height: 100%;
   aspect-ratio: 448 / 251;
 }
 

package/src/navigation-instruments/gauge-radial/gauge-radial.stories.ts

@@ -241,6 +241,24 @@ export const Sector90RightWithReadout: Story = {
   },
 };
 
+export const ShortWideContainer: Story = {
+  args: {
+    ...sectorStoryArgs,
+    sector: GaugeRadialSector.deg270,
+    width: 600,
+    height: 160,
+  },
+};
+
+export const ShortWideContainer180: Story = {
+  args: {
+    ...sectorStoryArgs,
+    sector: GaugeRadialSector.deg180,
+    width: 600,
+    height: 120,
+  },
+};
+
 const readoutStoryArgs = {
   value: 123,
   minValue: 0,

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));

package/src/navigation-instruments/watch/watch.stories.ts

@@ -461,6 +461,7 @@ export const MultiCut: Story = {
 
 export const TickmarksTest: Story = {
   args: {
+    width: 480,
     tickmarks: [
       // every 15 degrees
       ...Array.from({length: 24}, (_, i) => ({
@@ -510,6 +511,7 @@ export const TickmarksTest: Story = {
 
 export const TickmarksInsideTest: Story = {
   args: {
+    width: 480,
     tickmarks: [
       // every 15 degrees
       ...Array.from({length: 24}, (_, i) => ({
@@ -577,6 +579,7 @@ export const TickmarksInsideTest: Story = {
 
 export const TickmarksTestRotation: Story = {
   args: {
+    width: 480,
     tickmarks: [
       // every 15 degrees
       ...Array.from({length: 24}, (_, i) => ({
@@ -650,6 +653,7 @@ export const TickmarksTestRotation: Story = {
 
 export const TickmarksTestInsideRotation: Story = {
   args: {
+    width: 480,
     tickmarks: [
       // every 15 degrees
       ...Array.from({length: 24}, (_, i) => ({
@@ -732,188 +736,174 @@ export const TickmarksTestInsideRotation: Story = {
  * gauge-vertical/horizontal components, but for radial (watch-based) instruments.
  */
 export const StateComparison: Story = {
+  args: {
+    width: 600,
+  },
   render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 24px;">
+    <div
+      style="display: grid; grid-template-columns: 80px repeat(2, 1fr); gap: 16px; align-items: center; justify-items: center;"
+    >
       <!-- Header row -->
-      <div
-        style="display: grid; grid-template-columns: 80px repeat(2, 1fr); gap: 16px; align-items: center;"
-      >
-        <div></div>
-        <div
-          style="text-align: center; font-weight: bold; font-size: 12px; color: #ccc;"
-        >
-          regular
-        </div>
-        <div
-          style="text-align: center; font-weight: bold; font-size: 12px; color: #ccc;"
-        >
-          enhanced
-        </div>
+      <div></div>
+      <div style="font-weight: bold; font-size: 12px; color: #ccc;">
+        regular
+      </div>
+      <div style="font-weight: bold; font-size: 12px; color: #ccc;">
+        enhanced
       </div>
 
       <!-- active row -->
-      <div
-        style="display: grid; grid-template-columns: 80px repeat(2, 1fr); gap: 16px; align-items: center;"
-      >
-        <div style="font-size: 12px; color: #888;">active</div>
-        <div style="width: 160px; height: 160px;">
-          <obc-watch
-            .state=${InstrumentState.active}
-            .priority=${Priority.regular}
-            .angleSetpoint=${45}
-            .atAngleSetpoint=${false}
-            .watchCircleType=${WatchCircleType.double}
-            .areas=${[
-              {
-                startAngle: -90,
-                endAngle: 90,
-                roundInsideCut: true,
-                roundOutsideCut: true,
-              },
-            ]}
-            .barAreas=${[
-              {
-                startAngle: 0,
-                endAngle: 30,
-                fillColor: 'var(--instrument-regular-tertiary-color)',
-              },
-            ]}
-          ></obc-watch>
-        </div>
-        <div style="width: 160px; height: 160px;">
-          <obc-watch
-            .state=${InstrumentState.active}
-            .priority=${Priority.enhanced}
-            .angleSetpoint=${45}
-            .atAngleSetpoint=${false}
-            .watchCircleType=${WatchCircleType.double}
-            .areas=${[
-              {
-                startAngle: -90,
-                endAngle: 90,
-                roundInsideCut: true,
-                roundOutsideCut: true,
-              },
-            ]}
-            .barAreas=${[
-              {
-                startAngle: 0,
-                endAngle: 30,
-                fillColor: 'var(--instrument-enhanced-tertiary-color)',
-              },
-            ]}
-          ></obc-watch>
-        </div>
+
+      <div style="font-size: 12px; color: #888;">active</div>
+      <div style="width: 160px; height: 160px;">
+        <obc-watch
+          .state=${InstrumentState.active}
+          .priority=${Priority.regular}
+          .angleSetpoint=${45}
+          .atAngleSetpoint=${false}
+          .watchCircleType=${WatchCircleType.double}
+          .areas=${[
+            {
+              startAngle: -90,
+              endAngle: 90,
+              roundInsideCut: true,
+              roundOutsideCut: true,
+            },
+          ]}
+          .barAreas=${[
+            {
+              startAngle: 0,
+              endAngle: 30,
+              fillColor: 'var(--instrument-regular-tertiary-color)',
+            },
+          ]}
+        ></obc-watch>
+      </div>
+      <div style="width: 160px; height: 160px;">
+        <obc-watch
+          .state=${InstrumentState.active}
+          .priority=${Priority.enhanced}
+          .angleSetpoint=${45}
+          .atAngleSetpoint=${false}
+          .watchCircleType=${WatchCircleType.double}
+          .areas=${[
+            {
+              startAngle: -90,
+              endAngle: 90,
+              roundInsideCut: true,
+              roundOutsideCut: true,
+            },
+          ]}
+          .barAreas=${[
+            {
+              startAngle: 0,
+              endAngle: 30,
+              fillColor: 'var(--instrument-enhanced-tertiary-color)',
+            },
+          ]}
+        ></obc-watch>
       </div>
 
       <!-- loading row -->
-      <div
-        style="display: grid; grid-template-columns: 80px repeat(2, 1fr); gap: 16px; align-items: center;"
-      >
-        <div style="font-size: 12px; color: #888;">loading</div>
-        <div style="width: 160px; height: 160px;">
-          <obc-watch
-            .state=${InstrumentState.loading}
-            .priority=${Priority.regular}
-            .angleSetpoint=${45}
-            .atAngleSetpoint=${false}
-            .watchCircleType=${WatchCircleType.double}
-            .areas=${[
-              {
-                startAngle: -90,
-                endAngle: 90,
-                roundInsideCut: true,
-                roundOutsideCut: true,
-              },
-            ]}
-            .barAreas=${[
-              {
-                startAngle: 0,
-                endAngle: 30,
-                fillColor: 'var(--instrument-frame-tertiary-color)',
-              },
-            ]}
-          ></obc-watch>
-        </div>
-        <div style="width: 160px; height: 160px;">
-          <obc-watch
-            .state=${InstrumentState.loading}
-            .priority=${Priority.enhanced}
-            .angleSetpoint=${45}
-            .atAngleSetpoint=${false}
-            .watchCircleType=${WatchCircleType.double}
-            .areas=${[
-              {
-                startAngle: -90,
-                endAngle: 90,
-                roundInsideCut: true,
-                roundOutsideCut: true,
-              },
-            ]}
-            .barAreas=${[
-              {
-                startAngle: 0,
-                endAngle: 30,
-                fillColor: 'var(--instrument-frame-tertiary-color)',
-              },
-            ]}
-          ></obc-watch>
-        </div>
+      <div style="font-size: 12px; color: #888;">loading</div>
+      <div style="width: 160px; height: 160px;">
+        <obc-watch
+          .state=${InstrumentState.loading}
+          .priority=${Priority.regular}
+          .angleSetpoint=${45}
+          .atAngleSetpoint=${false}
+          .watchCircleType=${WatchCircleType.double}
+          .areas=${[
+            {
+              startAngle: -90,
+              endAngle: 90,
+              roundInsideCut: true,
+              roundOutsideCut: true,
+            },
+          ]}
+          .barAreas=${[
+            {
+              startAngle: 0,
+              endAngle: 30,
+              fillColor: 'var(--instrument-frame-tertiary-color)',
+            },
+          ]}
+        ></obc-watch>
+      </div>
+      <div style="width: 160px; height: 160px;">
+        <obc-watch
+          .state=${InstrumentState.loading}
+          .priority=${Priority.enhanced}
+          .angleSetpoint=${45}
+          .atAngleSetpoint=${false}
+          .watchCircleType=${WatchCircleType.double}
+          .areas=${[
+            {
+              startAngle: -90,
+              endAngle: 90,
+              roundInsideCut: true,
+              roundOutsideCut: true,
+            },
+          ]}
+          .barAreas=${[
+            {
+              startAngle: 0,
+              endAngle: 30,
+              fillColor: 'var(--instrument-frame-tertiary-color)',
+            },
+          ]}
+        ></obc-watch>
       </div>
 
       <!-- off row -->
-      <div
-        style="display: grid; grid-template-columns: 80px repeat(2, 1fr); gap: 16px; align-items: center;"
-      >
-        <div style="font-size: 12px; color: #888;">off</div>
-        <div style="width: 160px; height: 160px;">
-          <obc-watch
-            .state=${InstrumentState.off}
-            .priority=${Priority.regular}
-            .angleSetpoint=${45}
-            .atAngleSetpoint=${false}
-            .watchCircleType=${WatchCircleType.double}
-            .areas=${[
-              {
-                startAngle: -90,
-                endAngle: 90,
-                roundInsideCut: true,
-                roundOutsideCut: true,
-              },
-            ]}
-            .barAreas=${[
-              {
-                startAngle: 0,
-                endAngle: 30,
-                fillColor: 'var(--instrument-frame-tertiary-color)',
-              },
-            ]}
-          ></obc-watch>
-        </div>
-        <div style="width: 160px; height: 160px;">
-          <obc-watch
-            .state=${InstrumentState.off}
-            .priority=${Priority.enhanced}
-            .angleSetpoint=${45}
-            .atAngleSetpoint=${false}
-            .watchCircleType=${WatchCircleType.double}
-            .areas=${[
-              {
-                startAngle: -90,
-                endAngle: 90,
-                roundInsideCut: true,
-                roundOutsideCut: true,
-              },
-            ]}
-            .barAreas=${[
-              {
-                startAngle: 0,
-                endAngle: 30,
-                fillColor: 'var(--instrument-frame-tertiary-color)',
-              },
-            ]}
-          ></obc-watch>
-        </div>
+      <div style="font-size: 12px; color: #888;">off</div>
+      <div style="width: 160px; height: 160px;">
+        <obc-watch
+          .state=${InstrumentState.off}
+          .priority=${Priority.regular}
+          .angleSetpoint=${45}
+          .atAngleSetpoint=${false}
+          .watchCircleType=${WatchCircleType.double}
+          .areas=${[
+            {
+              startAngle: -90,
+              endAngle: 90,
+              roundInsideCut: true,
+              roundOutsideCut: true,
+            },
+          ]}
+          .barAreas=${[
+            {
+              startAngle: 0,
+              endAngle: 30,
+              fillColor: 'var(--instrument-frame-tertiary-color)',
+            },
+          ]}
+        ></obc-watch>
+      </div>
+      <div style="width: 160px; height: 160px;">
+        <obc-watch
+          .state=${InstrumentState.off}
+          .priority=${Priority.enhanced}
+          .angleSetpoint=${45}
+          .atAngleSetpoint=${false}
+          .watchCircleType=${WatchCircleType.double}
+          .areas=${[
+            {
+              startAngle: -90,
+              endAngle: 90,
+              roundInsideCut: true,
+              roundOutsideCut: true,
+            },
+          ]}
+          .barAreas=${[
+            {
+              startAngle: 0,
+              endAngle: 30,
+              fillColor: 'var(--instrument-frame-tertiary-color)',
+            },
+          ]}
+        ></obc-watch>
       </div>
     </div>
   `,

package/src/storybook-util.ts

@@ -102,7 +102,7 @@ export function widthDecorator(
   const height = context.args.height ?? width;
   return html` <div
     class="wrapper"
-    style="width: ${width}px; height: ${height}px"
+    style="width: ${width}px; height: ${height}px; overflow: auto;"
   >
     ${story()}
   </div>`;