@oicl/openbridge-webcomponents 0.0.12 → 0.0.13

package/src/icons/icon-20-satellite-off.ts

@@ -29,6 +29,7 @@ export class Obi20SatelliteOff extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-20-sensor-gps-bad.ts

@@ -27,6 +27,7 @@ export class Obi20SensorGpsBad extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-20-sensor-gps-full.ts

@@ -29,6 +29,7 @@ export class Obi20SensorGpsFull extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-20-sensor-gps-low.ts

@@ -25,6 +25,7 @@ export class Obi20SensorGpsLow extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-20-sensor-gps-medium.ts

@@ -27,6 +27,7 @@ export class Obi20SensorGpsMedium extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-20-sensor-gyro.ts

@@ -31,6 +31,7 @@ export class Obi20SensorGyro extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-20-sensor-wind.ts

@@ -25,6 +25,7 @@ export class Obi20SensorWind extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-20-usb.ts

@@ -29,6 +29,7 @@ export class Obi20USB extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-20-wifi-bad.ts

@@ -25,6 +25,7 @@ export class Obi20WifiBad extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-20-wifi-off.ts

@@ -25,6 +25,7 @@ export class Obi20WifiOff extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-20-wifi-wifi_statusbar_0.ts

@@ -25,6 +25,7 @@ export class Obi20WifiWifi_statusbar_0 extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-20-wifi-wifi_statusbar_1.ts

@@ -25,6 +25,7 @@ export class Obi20WifiWifi_statusbar_1 extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-20-wifi-wifi_statusbar_2.ts

@@ -25,6 +25,7 @@ export class Obi20WifiWifi_statusbar_2 extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-20-wifi-wifi_statusbar_3.ts

@@ -25,6 +25,7 @@ export class Obi20WifiWifi_statusbar_3 extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-20-wifi-wifi_statusbar_4.ts

@@ -25,6 +25,7 @@ export class Obi20WifiWifi_statusbar_4 extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-20-wifi2-off.ts

@@ -25,6 +25,7 @@ export class Obi20Wifi2Off extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-20-wifi2.ts

@@ -25,6 +25,7 @@ export class Obi20Wifi2 extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-frame2622.ts

@@ -19,6 +19,7 @@ export class ObiFrame2622 extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-iec-02-ais-target-activated-selected.ts

@@ -25,6 +25,7 @@ export class ObiIEC02AisTargetActivatedSelected extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-iec-02-ais-target-activated.ts

@@ -25,6 +25,7 @@ export class ObiIEC02AisTargetActivated extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-iec-02-associated-target-ais.ts

@@ -25,6 +25,7 @@ export class ObiIEC02AssociatedTargetAis extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-iec-02-associated-target-radar.ts

@@ -25,6 +25,7 @@ export class ObiIEC02AssociatedTargetRadar extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-iec-02-radar-target-tracked-selected.ts

@@ -33,6 +33,7 @@ export class ObiIEC02RadarTargetTrackedSelected extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-iec-02-radar-target-tracked.ts

@@ -25,6 +25,7 @@ export class ObiIEC02RadarTargetTracked extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-temp.ts

@@ -19,6 +19,7 @@ export class ObiTemp extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/index.ts

@@ -33,6 +33,7 @@ import './icon-01-placeholder-device-static';
 import './icon-01-play';
 import './icon-01-print';
 import './icon-01-redo';
+import './icon-01-refresh';
 import './icon-01-remove';
 import './icon-01-reorder';
 import './icon-01-save';
@@ -40,6 +41,7 @@ import './icon-01-search';
 import './icon-01-sort';
 import './icon-01-standby';
 import './icon-01-stop';
+import './icon-01-sync';
 import './icon-01-text';
 import './icon-01-undo';
 import './icon-01-visibility';
@@ -419,6 +421,7 @@ import './icon-14-notification-empty';
 import './icon-14-rectified';
 import './icon-14-running';
 import './icon-14-running-color';
+import './icon-14-shelf';
 import './icon-14-signal-fail';
 import './icon-14-warning';
 import './icon-14-warning-acknowledged';

package/src/icons/names.ts

@@ -34,6 +34,7 @@ export const iconIds: string[] = [
   '01-play',
   '01-print',
   '01-redo',
+  '01-refresh',
   '01-remove',
   '01-reorder',
   '01-save',
@@ -41,6 +42,7 @@ export const iconIds: string[] = [
   '01-sort',
   '01-standby',
   '01-stop',
+  '01-sync',
   '01-text',
   '01-undo',
   '01-visibility',
@@ -421,6 +423,7 @@ export const iconIds: string[] = [
   '14-rectified',
   '14-running',
   '14-running-color',
+  '14-shelf',
   '14-signal-fail',
   '14-warning',
   '14-warning-acknowledged',

package/src/mixins/font-instrument-unit-s.css

@@ -0,0 +1,9 @@
+@define-mixin font-instrument-unit-s {
+    /* Instrument/unit-s */
+    font-family: "Noto Sans";
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 350;
+    line-height: 24px;
+    /* 150% */
+}

package/src/mixins/font-instrument-value-double.css

@@ -0,0 +1,7 @@
+@define-mixin font-instrument-value-double {
+    font-family: "Noto Sans";
+    font-size: 72px;
+    font-style: normal;
+    font-weight: 570;
+    line-height: 96px; /* 133.333% */
+}

package/src/mixins/font-instrument-value-enhanced.css

@@ -0,0 +1,8 @@
+@define-mixin font-instrument-value-enhanced {
+    font-family: Noto Sans;
+    font-size: 36px;
+    font-weight: 570;
+    line-height: 48px;
+    text-align: center;
+    font-variation-settings: 'wdth' 100, 'CTGR' 0;
+}

package/src/mixins/font-instrument-value-regular.css

@@ -0,0 +1,8 @@
+@define-mixin font-instrument-value-regular {
+    font-family: Noto Sans;
+    font-size: 16px;
+    font-weight: 570;
+    line-height: 24px;
+    text-align: center;
+    font-variation-settings: 'wdth' 100, 'CTGR' 0;
+}

package/src/mixins/font-instrument-value-s.css

@@ -0,0 +1,8 @@
+@define-mixin font-instrument-value-s {
+    font-family: Noto Sans;
+    font-size: 16px;
+    font-weight: 620;
+    line-height: 24px;
+    font-variation-settings: 'wdth' 100, 'CTGR' 0;
+    
+}

package/src/navigation-instruments/azimuth-thruster/azimuth-thruster.ts

@@ -4,6 +4,7 @@ import {Size, InstrumentState} from '../types';
 import {thruster} from '../thruster/thruster';
 import '../watch/watch';
 import componentStyle from './azimuth-thruster.css?inline';
+import {ifDefined} from 'lit/directives/if-defined.js';
 
 @customElement('obc-azimuth-thruster')
 export class ObcAzimuthThruster extends LitElement {
@@ -25,6 +26,8 @@ export class ObcAzimuthThruster extends LitElement {
   thrustSetpointAtZero: boolean = false;
   @property({type: String}) state: InstrumentState = InstrumentState.inCommand;
   @property({type: Number}) loading: number = 0;
+  @property({type: Boolean, attribute: 'no-padding'}) noPadding: boolean =
+    false;
 
   override render() {
     const rotateAngle = this.angle;
@@ -47,12 +50,16 @@ export class ObcAzimuthThruster extends LitElement {
       this.state === InstrumentState.active ||
       this.state === InstrumentState.inCommand;
 
+    const viewBox = this.noPadding ? '-184 -184 368 368' : '-200 -200 400 400';
+
     return svg`
       <div class="container">
       <obc-watch ?hide-all-tickmarks=${!watchfaceTicksOn} ?off=${
         this.state === InstrumentState.off
-      }></obc-watch>
-      <svg viewBox="-200 -200 400 400" xmlns="http://www.w3.org/2000/svg">
+      }
+        padding=${ifDefined(this.noPadding ? 8 : undefined)}
+      ></obc-watch>
+      <svg viewBox=${viewBox} xmlns="http://www.w3.org/2000/svg">
         ${
           this.angleSetpoint !== undefined
             ? svg`

package/src/navigation-instruments/azimuth-thruster-labeled/azimuth-thruster-labeled.css

@@ -0,0 +1,53 @@
+* {
+  box-sizing: border-box;
+}
+
+.wrapper {
+    display: grid;
+    grid-template-areas: 
+        "label label"
+        "angle azimuth"
+        "power azimuth";
+    grid-template-columns: min-content 1fr;
+    grid-template-rows: min-content 1fr 1fr;
+    width: 100%;
+    height: 100%;
+}
+
+.label {
+    grid-area: label;
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    gap: 8px;
+    padding-left: 8px;
+    padding-top: 4px;
+    padding-bottom: 4px;
+
+    @mixin font-overline;
+    color: var(--element-neutral-color);
+    align-self: end;
+}
+
+.instrument-field-angle {
+    grid-area: angle;
+    padding-top: 11px;
+    padding-bottom: 4px;
+}
+
+.instrument-field-power {
+    grid-area: power;
+    align-self: end;
+    padding-top: 4px;
+    padding-bottom: 11px;
+}
+
+.azimuth-thruster {
+    grid-area: azimuth;
+    aspect-ratio: 1;
+    justify-self: start;
+    align-self: stretch;
+    max-width: 100%;
+    padding-left: 8px;
+    padding-right: 8px;
+}

package/src/navigation-instruments/azimuth-thruster-labeled/azimuth-thruster-labeled.stories.ts

@@ -0,0 +1,64 @@
+import type {Meta, StoryObj} from '@storybook/web-components';
+import {
+  AzimuthThrusterLabeledSize,
+  ObcAzimuthThrusterLabeled,
+} from './azimuth-thruster-labeled';
+import './azimuth-thruster-labeled';
+import {html} from 'lit';
+import {CommandStatus} from '../badge-command/badge-command';
+
+const meta: Meta<typeof ObcAzimuthThrusterLabeled> = {
+  title: 'Navigation instruments/Azimuth thruster labeled',
+  tags: ['autodocs'],
+  component: 'obc-azimuth-thruster-labeled',
+  args: {
+    angle: 30,
+    angleSetpoint: 40,
+    thrust: 60,
+    thrustSetpoint: 70,
+    label: '3. Thruster',
+    size: 'medium',
+    containerSize: 300,
+  },
+  decorators: [
+    (story, contex) => {
+      return html`<div style="height: ${contex.args.containerSize}px">
+        ${story()}
+      </div>`;
+    },
+  ],
+  argTypes: {
+    commandStatus: {
+      control: {
+        type: 'select',
+      },
+      options: Object.values(CommandStatus),
+    },
+    containerSize: {
+      control: {type: 'range', min: 100, max: 2000, step: 1},
+    },
+  },
+} satisfies Meta<ObcAzimuthThrusterLabeled>;
+
+export default meta;
+type Story = StoryObj<ObcAzimuthThrusterLabeled>;
+
+export const Medium: Story = {
+  args: {
+    containerSize: 266,
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: AzimuthThrusterLabeledSize.large,
+    containerSize: 604,
+  },
+};
+
+export const NoCommand: Story = {
+  args: {
+    containerSize: 266,
+    commandStatus: CommandStatus.NoCommand,
+  },
+};

package/src/navigation-instruments/azimuth-thruster-labeled/azimuth-thruster-labeled.ts

@@ -0,0 +1,111 @@
+import {LitElement, html, unsafeCSS} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import compentStyle from './azimuth-thruster-labeled.css?inline';
+import {CommandStatus} from '../badge-command/badge-command';
+import {classMap} from 'lit/directives/class-map.js';
+import '../badge-command/badge-command';
+import '../instrument-field/instrument-field';
+import '../azimuth-thruster/azimuth-thruster';
+import {InstrumentFieldSize} from '../instrument-field/instrument-field';
+import {InstrumentState, Size} from '../types';
+import {ifDefined} from 'lit/directives/if-defined.js';
+
+export enum AzimuthThrusterLabeledSize {
+  medium = 'medium',
+  large = 'large',
+}
+
+@customElement('obc-azimuth-thruster-labeled')
+export class ObcAzimuthThrusterLabeled extends LitElement {
+  @property({type: String}) label = '';
+  @property({type: String, attribute: 'command-status'})
+  commandStatus: CommandStatus = CommandStatus.InCommand;
+  @property({type: String}) size: AzimuthThrusterLabeledSize =
+    AzimuthThrusterLabeledSize.medium;
+  @property({type: Number}) angle = 0;
+  @property({type: Number, attribute: 'angle-setpoint'}) angleSetpoint:
+    | number
+    | undefined;
+  @property({type: Boolean, attribute: 'at-angle-setpoint'})
+  atAngleSetpoint: boolean = false;
+
+  @property({type: Number}) thrust = 0;
+  @property({type: Number, attribute: 'thrust-setpoint'}) thrustSetpoint:
+    | number
+    | undefined;
+  @property({type: Boolean, attribute: 'at-thrust-setpoint'})
+  atThrustSetpoint: boolean = false;
+  @property({type: Boolean, attribute: 'thrust-setpoint-at-zero'})
+  thrustSetpointAtZero: boolean = false;
+
+  override render() {
+    const fieldSize =
+      this.size === AzimuthThrusterLabeledSize.large
+        ? InstrumentFieldSize.large
+        : InstrumentFieldSize.regular;
+    const azimuthSize =
+      this.size === AzimuthThrusterLabeledSize.large ? Size.large : Size.medium;
+    let state: InstrumentState = InstrumentState.inCommand;
+    if (
+      [
+        CommandStatus.NoCommand,
+        CommandStatus.Blocked,
+        CommandStatus.CommandAvailable,
+      ].includes(this.commandStatus)
+    ) {
+      state = InstrumentState.active;
+    }
+
+    return html`
+      <div class=${classMap({wrapper: true, [this.size]: true})}>
+        <div class="label">
+          <obc-badge-command
+            class="badge"
+            status=${this.commandStatus}
+            ?large=${this.size === AzimuthThrusterLabeledSize.large}
+          ></obc-badge-command>
+          <div class="label-text">${this.label}</div>
+        </div>
+        <obc-instrument-field
+          class="instrument-field-angle"
+          value=${this.angle}
+          setpoint=${ifDefined(this.angleSetpoint)}
+          tag="Angle"
+          unit=""
+          degree
+          has-setpoint
+          size=${fieldSize}
+        ></obc-instrument-field>
+        <obc-instrument-field
+          class="instrument-field-power"
+          value=${this.thrust}
+          setpoint=${ifDefined(this.thrustSetpoint)}
+          tag="Power"
+          unit="%"
+          has-setpoint
+          size=${fieldSize}
+        ></obc-instrument-field>
+        <obc-azimuth-thruster
+          class="azimuth-thruster"
+          no-padding
+          .size=${azimuthSize}
+          .thrust=${this.thrust}
+          .thrustSetpoint=${this.thrustSetpoint}
+          .angle=${this.angle}
+          .angleSetpoint=${this.angleSetpoint}
+          .atThrustSetpoint=${this.atThrustSetpoint}
+          .atAngleSetpoint=${this.atAngleSetpoint}
+          .state=${state}
+        ></obc-azimuth-thruster>
+      </div>
+    `;
+  }
+
+  static override styles = unsafeCSS(compentStyle);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-azimuth-thruster-labeled': ObcAzimuthThrusterLabeled;
+  }
+}

package/src/navigation-instruments/badge-command/badge-command.stories.ts

@@ -0,0 +1,32 @@
+import type {Meta, StoryObj} from '@storybook/web-components';
+import {CommandStatus, ObcBadgeCommand} from './badge-command';
+import './badge-command';
+
+const meta: Meta<typeof ObcBadgeCommand> = {
+  title: 'Navigation instruments/Badge command',
+  tags: ['autodocs'],
+  component: 'obc-badge-command',
+  argTypes: {
+    large: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    status: {
+      options: Object.values(CommandStatus),
+      control: {
+        type: 'radio',
+      },
+    },
+  },
+} satisfies Meta<ObcBadgeCommand>;
+
+export default meta;
+type Story = StoryObj<ObcBadgeCommand>;
+
+export const InCommandLarge: Story = {
+  args: {
+    large: true,
+    status: CommandStatus.InCommand,
+  },
+};