@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.119 → 2.0.0-next.121

package/src/components/alert-frame/alert-frame.ts

@@ -20,6 +20,7 @@ import {
   getAlertBadgeComponent,
   AlertBadgeComponent,
 } from '../../alert-severity.js';
+import {blinkingAll} from '../../palettes/blinking.js';
 
 export {AlertType as ObcAlertFrameStatus} from '../../types.js';
 
@@ -256,6 +257,42 @@ export class ObcAlertFrame extends LitElement {
     `;
   }
 
+  private _blinkAnimationCancel?: () => void;
+
+  private syncBlinking() {
+    if (
+      this.mode !== ObcAlertFrameMode.unackedActive &&
+      this._blinkAnimationCancel
+    ) {
+      this._blinkAnimationCancel();
+      this._blinkAnimationCancel = undefined;
+    }
+
+    if (
+      this.mode === ObcAlertFrameMode.unackedActive &&
+      !this._blinkAnimationCancel
+    ) {
+      this._blinkAnimationCancel = blinkingAll(this);
+    }
+  }
+
+  override connectedCallback() {
+    super.connectedCallback();
+    if (this.hasUpdated) {
+      this.syncBlinking();
+    }
+  }
+
+  override updated() {
+    this.syncBlinking();
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    this._blinkAnimationCancel?.();
+    this._blinkAnimationCancel = undefined;
+  }
+
   private flap() {
     if (this.type === ObcAlertFrameType.Regular) {
       return nothing;

package/src/components/alert-icon/alert-icon.spec.ts

@@ -0,0 +1,76 @@
+import {describe, expect, it} from 'vitest';
+import './alert-icon.js';
+import {ObcAlertIcon} from './alert-icon.js';
+import {render} from 'vitest-browser-lit';
+import {html} from 'lit';
+import {AlertType} from '../../types.js';
+
+describe('obc-alert-icon blinking lifecycle', () => {
+  async function setup(acknowledged = false) {
+    const screen = render(
+      html`<obc-alert-icon
+        .alertType=${AlertType.Alarm}
+        .acknowledged=${acknowledged}
+      ></obc-alert-icon>`
+    );
+    const el = screen.baseElement.querySelector(
+      'obc-alert-icon'
+    ) as ObcAlertIcon;
+    await el.updateComplete;
+    return el;
+  }
+
+  function wrapperAnimations(el: ObcAlertIcon) {
+    return el.getAnimations();
+  }
+
+  it('blinks for an unacknowledged blinking alert type', async () => {
+    const el = await setup();
+
+    expect(wrapperAnimations(el).length).toBeGreaterThan(0);
+  });
+
+  it('does not blink once acknowledged', async () => {
+    const el = await setup(true);
+
+    expect(wrapperAnimations(el)).toHaveLength(0);
+  });
+
+  it('stops blinking when the alert is acknowledged', async () => {
+    const el = await setup();
+    expect(wrapperAnimations(el).length).toBeGreaterThan(0);
+
+    el.acknowledged = true;
+    await el.updateComplete;
+
+    expect(wrapperAnimations(el)).toHaveLength(0);
+  });
+
+  it('resumes blinking after disconnect and reconnect', async () => {
+    const el = await setup();
+    const parent = el.parentElement!;
+    const initial = wrapperAnimations(el).length;
+    expect(initial).toBeGreaterThan(0);
+
+    parent.removeChild(el);
+    expect(wrapperAnimations(el)).toHaveLength(0);
+
+    // Reconnect without touching any property, so no Lit update is scheduled.
+    parent.appendChild(el);
+    await el.updateComplete;
+
+    expect(wrapperAnimations(el)).toHaveLength(initial);
+  });
+
+  it('does not accumulate animations across repeated updates', async () => {
+    const el = await setup();
+    const initial = wrapperAnimations(el).length;
+
+    el.active = true;
+    await el.updateComplete;
+    el.silenced = true;
+    await el.updateComplete;
+
+    expect(wrapperAnimations(el)).toHaveLength(initial);
+  });
+});

package/src/components/alert-icon/alert-icon.ts

@@ -50,6 +50,7 @@ import {
 import {lowSilencedA, lowSilencedB} from './icons/icon-low-silenced.js';
 import {lowRectifiedA, lowRectifiedB} from './icons/icon-low-rectified.js';
 import {lowAcknowledged} from './icons/icon-low-acknowledged.js';
+import {blinkingAll} from '../../palettes/blinking.js';
 
 enum AlertIconState {
   Silenced = 'silenced',
@@ -343,6 +344,43 @@ export class ObcAlertIcon extends LitElement {
     return html`<div class="wrapper">${this.renderStaticIcon()}</div>`;
   }
 
+  private _blinkAnimationCancel?: () => void;
+
+  private syncBlinking(): void {
+    if (
+      this._blinkAnimationCancel &&
+      !supportsBlinking(this._effectiveType, this.acknowledged ?? false)
+    ) {
+      this._blinkAnimationCancel();
+      this._blinkAnimationCancel = undefined;
+    }
+    if (
+      !this._blinkAnimationCancel &&
+      supportsBlinking(this._effectiveType, this.acknowledged ?? false)
+    ) {
+      this._blinkAnimationCancel = blinkingAll(this);
+    }
+  }
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    if (this.hasUpdated) {
+      this.syncBlinking();
+    }
+  }
+
+  override updated(): void {
+    this.syncBlinking();
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    if (this._blinkAnimationCancel) {
+      this._blinkAnimationCancel();
+      this._blinkAnimationCancel = undefined;
+    }
+  }
+
   static override styles = css`
     .wrapper {
       height: 100%;

package/src/icons/AGENTS.md

@@ -0,0 +1,6 @@
+# src/icons — generated, do not edit
+
+Every file here is generated from Figma by `npm run download:icons`. Edits are
+discarded on the next run. See [`docs/agents/generated-code.md`](../../../../docs/agents/generated-code.md).
+
+Note `src/manual-icon/` is the opposite: hand-written, edit it normally.

package/src/integration-systems/integration-button/integration-button.css

@@ -27,9 +27,13 @@
 .touch-target {
   @mixin style style=integration-normal visibleWrapperClass=.content-container;
   @mixin font-body;
+  --leading-icon-size: var(
+    --app-components-integration-system-navigation-item-horizontal-icon-size
+  );
   anchor-name: --touch-target;
   display: flex;
   align-items: center;
+  text-align: left;
   gap: 4px;
   flex: 1;
   min-height: var(
@@ -169,20 +173,23 @@
     color: var(--integration-on-normal-neutral-color);
   }
 
-  .icon.leading {
-    width: var(
-      --app-components-integration-system-navigation-item-horizontal-icon-size
-    );
-    height: var(
-      --app-components-integration-system-navigation-item-horizontal-icon-size
+  &.has-status {
+    --leading-icon-size: var(
+      --app-components-integration-system-navigation-item-horizontal-icon-size-large
     );
-    min-width: var(
-      --app-components-integration-system-navigation-item-horizontal-icon-size
-    );
-    flex: 0 0
-      var(
-        --app-components-integration-system-navigation-item-horizontal-icon-size
-      );
+  }
+
+  .icon.leading {
+    width: var(--leading-icon-size);
+    height: var(--leading-icon-size);
+    min-width: var(--leading-icon-size);
+    flex: 0 0 var(--leading-icon-size);
+
+    & ::slotted(*) {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
   }
 
   .icon.trailing {

package/src/integration-systems/integration-button/integration-button.stories.ts

@@ -8,6 +8,35 @@ import './integration-button.js';
 import {html} from 'lit';
 import '../../icons/icon-placeholder.js';
 
+const LONG_STATUS =
+  'Very long status for a vessel at sea doing something important';
+
+const renderButton = (args: ObcIntegrationButton, statusText: string) => html`
+  <obc-integration-button
+    style="width: 320px; display: block;"
+    .hasLeadingIcon=${args.hasLeadingIcon}
+    .hasTrailingIcon=${args.hasTrailingIcon}
+    .hasTrailingIcon2=${args.hasTrailingIcon2}
+    .hasStatus=${args.hasStatus}
+    .readouts=${args.readouts}
+    .selected=${args.selected}
+    .activated=${args.activated}
+    .disabled=${args.disabled}
+    .dividerBottom=${args.dividerBottom}
+    .dividerRight=${args.dividerRight}
+    .variant=${args.variant}
+    .type=${args.type}
+  >
+    <obi-placeholder slot="leading-icon"></obi-placeholder>
+    <obi-placeholder slot="trailing-icon"></obi-placeholder>
+    <obi-placeholder slot="trailing-icon2"></obi-placeholder>
+    <div slot="label">Label</div>
+    <div slot="status">${statusText}</div>
+    <div slot="info-label">Info Label</div>
+    <div slot="info-status">Info Status</div>
+  </obc-integration-button>
+`;
+
 const meta: Meta<ObcIntegrationButton> = {
   title: 'Integration Systems/Integration Button',
   tags: ['experimental'],
@@ -30,28 +59,7 @@ const meta: Meta<ObcIntegrationButton> = {
       value: 'integration-container-global-color',
     },
   },
-  render: (args) => html`
-    <obc-integration-button
-      style="width: 320px; display: block;"
-      .hasLeadingIcon=${args.hasLeadingIcon}
-      .hasTrailingIcon=${args.hasTrailingIcon}
-      .hasTrailingIcon2=${args.hasTrailingIcon2}
-      .hasStatus=${args.hasStatus}
-      .readouts=${args.readouts}
-      .selected=${args.selected}
-      .disabled=${args.disabled}
-      .variant=${args.variant}
-      .type=${args.type}
-    >
-      <obi-placeholder slot="leading-icon"></obi-placeholder>
-      <obi-placeholder slot="trailing-icon"></obi-placeholder>
-      <obi-placeholder slot="trailing-icon2"></obi-placeholder>
-      <div slot="label">Label</div>
-      <div slot="status">Status</div>
-      <div slot="info-label">Info Label</div>
-      <div slot="info-status">Info Status</div>
-    </obc-integration-button>
-  `,
+  render: (args) => renderButton(args, 'Status'),
 } satisfies Meta<ObcIntegrationButton>;
 export default meta;
 
@@ -61,28 +69,6 @@ export const WithStatus: StoryObj<ObcIntegrationButton> = {
   args: {
     hasStatus: true,
   },
-  render: (args) => html`
-    <obc-integration-button
-      style="width: 320px; display: block;"
-      .hasLeadingIcon=${args.hasLeadingIcon}
-      .hasTrailingIcon=${args.hasTrailingIcon}
-      .hasTrailingIcon2=${args.hasTrailingIcon2}
-      .readouts=${args.readouts}
-      .selected=${args.selected}
-      .disabled=${args.disabled}
-      .variant=${args.variant}
-      .type=${args.type}
-      .hasStatus=${args.hasStatus}
-    >
-      <obi-placeholder slot="leading-icon"></obi-placeholder>
-      <obi-placeholder slot="trailing-icon"></obi-placeholder>
-      <obi-placeholder slot="trailing-icon2"></obi-placeholder>
-      <div slot="label">Label</div>
-      <div slot="status">Status</div>
-      <div slot="info-label">Info Label</div>
-      <div slot="info-status">Info Status</div>
-    </obc-integration-button>
-  `,
 };
 
 export const Selected: StoryObj<ObcIntegrationButton> = {
@@ -111,9 +97,49 @@ export const Rich: StoryObj<ObcIntegrationButton> = {
   },
 };
 
+export const RichWithStatus: StoryObj<ObcIntegrationButton> = {
+  args: {
+    type: IntegrationButtonType.rich,
+    hasStatus: true,
+  },
+};
+
 export const Disabled: StoryObj<ObcIntegrationButton> = {
   args: {
     type: IntegrationButtonType.rich,
     disabled: true,
   },
 };
+
+export const WithLongStatus: StoryObj<ObcIntegrationButton> = {
+  args: {
+    hasStatus: true,
+  },
+  render: (args) => renderButton(args, LONG_STATUS),
+};
+
+export const HugWithLongStatus: StoryObj<ObcIntegrationButton> = {
+  args: {
+    type: IntegrationButtonType.hug,
+    hasStatus: true,
+    hasTrailingIcon: false,
+  },
+  render: (args) => renderButton(args, LONG_STATUS),
+};
+
+export const RichWithLongStatus: StoryObj<ObcIntegrationButton> = {
+  args: {
+    type: IntegrationButtonType.rich,
+    hasStatus: true,
+  },
+  render: (args) => renderButton(args, LONG_STATUS),
+};
+
+export const RichWithLongReadoutLabel: StoryObj<ObcIntegrationButton> = {
+  args: {
+    type: IntegrationButtonType.rich,
+    hasStatus: true,
+    readouts: [{label: 'Estimated Time of Arrival', value: '12', unit: 'h'}],
+  },
+  render: (args) => renderButton(args, 'Status'),
+};

package/src/integration-systems/integration-button/integration-button.ts

@@ -24,7 +24,7 @@ export enum IntegrationButtonType {
 /**
  * `<obc-integration-button>` – A button component for integration systems.
  *
- * @slot leading-icon - Icon before label (shown when `hasLeadingIcon` is true)
+ * @slot leading-icon - Icon before label (shown when `hasLeadingIcon` is true); rendered at the large icon size when `hasStatus` is true
  * @slot trailing-icon - Icon after label (shown when `hasTrailingIcon` is true)
  * @slot trailing-icon2 - Icon after label (shown when `hasTrailingIcon2` is true)
  * @slot label - Label text
@@ -76,7 +76,7 @@ export class ObcIntegrationButton extends LitElement {
       selected: this.selected,
       activated: this.activated,
       disabled: this.disabled,
-      'has-description': this.hasStatus,
+      'has-status': this.hasStatus,
       ['variant-' + this.variant]: true,
       ['type-' + this.type]: true,
     };

package/src/integration-systems/integration-dropdown-button/integration-dropdown-button.css

@@ -134,6 +134,7 @@
     flex-direction: column;
     align-items: flex-start;
     flex-grow: 1;
+    text-align: left;
   }
 
   & .text-container .label {

package/src/palettes/blinking.ts

@@ -0,0 +1,46 @@
+const CRITICAL_PERIOD = 1000; // ms
+const ALARM_PERIOD = 2000; // ms
+const WARNING_PERIOD = 4000; // ms
+const LOW_PERIOD = 8000; // ms
+
+function blinkingInstall(
+  el: HTMLElement,
+  period: number,
+  label: string
+): () => void {
+  const anim = el.animate(
+    [
+      {[label + '-on']: 1, [label + '-off']: 0},
+      {[label + '-on']: 0, [label + '-off']: 1},
+    ],
+    {duration: period, iterations: Infinity, easing: 'steps(2, jump-none)'}
+  );
+  anim.startTime = 0; // Common time origin for all animations, so they blink in sync.
+  return () => anim.cancel();
+}
+
+export function blinkingCritical(el: HTMLElement): () => void {
+  return blinkingInstall(el, CRITICAL_PERIOD, '--critical-blink');
+}
+
+export function blinkingAlarm(el: HTMLElement): () => void {
+  return blinkingInstall(el, ALARM_PERIOD, '--alarm-blink');
+}
+
+export function blinkingWarning(el: HTMLElement): () => void {
+  return blinkingInstall(el, WARNING_PERIOD, '--warning-blink');
+}
+
+export function blinkingLow(el: HTMLElement): () => void {
+  return blinkingInstall(el, LOW_PERIOD, '--low-blink');
+}
+
+export function blinkingAll(el: HTMLElement): () => void {
+  const animes = [
+    blinkingCritical(el),
+    blinkingAlarm(el),
+    blinkingWarning(el),
+    blinkingLow(el),
+  ];
+  return () => animes.forEach((anim) => anim());
+}

package/src/palettes/manual.css

@@ -121,45 +121,3 @@
   inherits: true;
   initial-value: 0;
 }
-
-@keyframes critical-blink {
-  0% {
-    --critical-blink-on: 1;
-    --critical-blink-off: 0;
-  }
-
-  50% {
-    --critical-blink-on: 0;
-    --critical-blink-off: 1;
-  }
-
-  100% {
-    --critical-blink-on: 1;
-    --critical-blink-off: 0;
-  }
-}
-
-@keyframes low-blink {
-  0% {
-    --low-blink-on: 1;
-    --low-blink-off: 0;
-  }
-
-  50% {
-    --low-blink-on: 0;
-    --low-blink-off: 1;
-  }
-
-  100% {
-    --low-blink-on: 1;
-    --low-blink-off: 0;
-  }
-}
-
-:root {
-  animation:
-    warning-blink 4s infinite,
-    critical-blink 1s infinite,
-    low-blink 8s infinite;
-  animation-timing-function: steps(1);
-}

package/src/palettes/variables.css

@@ -14740,37 +14740,6 @@
   initial-value: 0;
 }
 
-@keyframes warning-blink {
-  0% {
-    --warning-blink-on: 1;
-    --warning-blink-off: 0;
-    --alarm-blink-on: 1;
-    --alarm-blink-off: 0;
-  }
-
-  25% {
-    --alarm-blink-on: 0;
-    --alarm-blink-off: 1;
-  }
-
-  50% {
-    --warning-blink-on: 0;
-    --warning-blink-off: 1;
-    --alarm-blink-on: 1;
-    --alarm-blink-off: 0;
-  }
-
-  75% {
-    --alarm-blink-on: 0;
-    --alarm-blink-off: 1;
-  }
-
-  100% {
-    --warning-blink-on: 1;
-    --warning-blink-off: 0;
-  }
-}
-
 @property --warning-blink-on {
   syntax: "<number>";
   inherits: true;
@@ -14782,8 +14751,3 @@
   inherits: true;
   initial-value: 0;
 }
-
-:root {
-  animation: warning-blink 4s infinite;
-  animation-timing-function: steps(1);
-}