@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.151 → 2.0.0-next.152

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

@@ -17,7 +17,9 @@
 .wrapper {
   --bg-color: var(--alert-alarm-color);
   --thickness: var(--global-size-spacing-border-weight-alertframe);
-  --blink-on: var(--alarm-blink-on);
+  /* 0/1 from the flash-<tempo> classes below; steady when no class applies. */
+  --blink-on: 0;
+  --blink-off: 1;
   color: var(--on-alarm-active-color);
   position: relative;
   width: 100%;
@@ -27,10 +29,10 @@
   );
   outline: var(--thickness) solid var(--bg-color);
   outline-offset: 0;
+  /* +2 px outward while on, both thicknesses (Figma Flash=yes: 2 → 4 px). */
   --blink-width: 2px;
   &.thickness-small {
     --thickness: 2px;
-    --blink-width: 1px;
   }
 
   &.wrap-content {
@@ -42,14 +44,64 @@
     width: 100%;
   }
 
+  &.flash-fast {
+    --blink-on: var(--flash-fast-on);
+    --blink-off: var(--flash-fast-off);
+  }
+
+  &.flash-slow {
+    --blink-on: var(--flash-slow-on);
+    --blink-off: var(--flash-slow-off);
+  }
+
+  &.flash-very-slow {
+    --blink-on: var(--flash-very-slow-on);
+    --blink-off: var(--flash-very-slow-off);
+  }
+
+  --flash-transition: 50ms linear;
+
+  &.flash-effect-outline-eased {
+    transition: outline-width var(--flash-transition);
+
+    .flap {
+      transition: box-shadow var(--flash-transition);
+    }
+
+    .mask {
+      transition:
+        top var(--flash-transition),
+        bottom var(--flash-transition),
+        left var(--flash-transition),
+        right var(--flash-transition);
+    }
+
+    .dash path {
+      transition: stroke-width var(--flash-transition);
+    }
+  }
+
   --blink-width-dynamic: calc(var(--blink-width) * var(--blink-on));
+  /* One knob for flap and masks, so they cannot drift apart from the outline. */
+  --flap-grow: 0px;
 
-  &.unacked-active {
+  &.unacked-active,
+  &.unacked-rectified {
     outline-width: calc(var(--thickness) + var(--blink-width-dynamic));
   }
 
+  &.unacked-active {
+    --flap-grow: var(--blink-width-dynamic);
+  }
+
   &.unacked-rectified {
-    outline-style: dashed;
+    /* The dashed stroke is centred, so it moves out by half its growth. */
+    --flap-grow: calc(var(--blink-width-dynamic) / 2);
+  }
+
+  &.unacked-rectified {
+    /* The dash pattern (12/6) needs an SVG stroke; outlines have no dash array. */
+    outline-style: none;
   }
 
   &.alarm,
@@ -61,24 +113,17 @@
   &.warning,
   &.level-medium {
     --bg-color: var(--alert-warning-color);
-    --blink-on: var(--warning-blink-on);
     color: var(--on-warning-active-color);
   }
 
   &.caution,
   &.level-low {
     --bg-color: var(--alert-caution-color);
-    --blink-on: 1;
     color: var(--on-caution-active-color);
   }
 
-  &.level-low {
-    --blink-on: var(--low-blink-on);
-  }
-
   &.level-critical {
     --bg-color: var(--critical-enabled-background-color);
-    --blink-on: var(--critical-blink-on);
     color: var(--on-critical-active-color);
   }
 
@@ -132,7 +177,7 @@
       width: calc(
         var(--ui-components-button-border-radius) + var(--thickness) + 0.5px
       );
-      top: 0;
+      top: calc(-1 * var(--flap-grow));
       left: calc(
         -1 * var(--ui-components-button-border-radius) - var(--thickness)
       );
@@ -143,17 +188,13 @@
         calc(100% - var(--thickness)) 50%,
         50% var(--thickness)
       );
-
-      .unacked-active & {
-        top: calc(-1 * var(--blink-width-dynamic));
-      }
     }
 
     &.down {
       width: calc(
         var(--ui-components-button-border-radius) + var(--thickness) + 0.5px
       );
-      bottom: 0;
+      bottom: calc(-1 * var(--flap-grow));
       left: calc(
         -1 * var(--ui-components-button-border-radius) - var(--thickness)
       );
@@ -164,10 +205,6 @@
         50% calc(100% - var(--thickness)),
         calc(100% - var(--thickness)) 50%
       );
-
-      .unacked-active & {
-        bottom: calc(-1 * var(--blink-width-dynamic));
-      }
     }
 
     &.left {
@@ -177,7 +214,7 @@
       top: calc(
         -1 * var(--ui-components-button-border-radius) - var(--thickness)
       );
-      left: 0;
+      left: calc(-1 * var(--flap-grow));
       clip-path: polygon(
         0 0,
         0 100%,
@@ -186,10 +223,6 @@
         var(--thickness) 50%
       );
 
-      .unacked-active & {
-        left: calc(-1 * var(--blink-width-dynamic));
-      }
-
       .top & {
         top: unset;
         bottom: calc(
@@ -212,7 +245,7 @@
       top: calc(
         -1 * var(--ui-components-button-border-radius) - var(--thickness)
       );
-      right: 0;
+      right: calc(-1 * var(--flap-grow));
       clip-path: polygon(
         100% 0,
         100% 100%,
@@ -234,10 +267,6 @@
           calc(100% - var(--thickness)) 50%
         );
       }
-
-      .unacked-active & {
-        right: calc(-1 * var(--blink-width-dynamic));
-      }
     }
   }
 
@@ -315,8 +344,34 @@
   }
 }
 
-.unacked-active .flap {
-  outline: var(--bg-color) solid var(--blink-width-dynamic);
+/* Grows the flap outward with the outline, never toward the content: shifted
+   copies leave the inner edge where it is (an outline would cross it). */
+.flap.small,
+.flap.large {
+  box-shadow:
+    var(--flap-grow) 0 0 0 var(--bg-color),
+    0 calc(-1 * var(--flap-grow)) 0 0 var(--bg-color),
+    0 var(--flap-grow) 0 0 var(--bg-color),
+    var(--flap-grow) calc(-1 * var(--flap-grow)) 0 0 var(--bg-color),
+    var(--flap-grow) var(--flap-grow) 0 0 var(--bg-color);
+}
+
+.flap.bottom {
+  box-shadow:
+    0 var(--flap-grow) 0 0 var(--bg-color),
+    calc(-1 * var(--flap-grow)) 0 0 0 var(--bg-color),
+    var(--flap-grow) 0 0 0 var(--bg-color),
+    calc(-1 * var(--flap-grow)) var(--flap-grow) 0 0 var(--bg-color),
+    var(--flap-grow) var(--flap-grow) 0 0 var(--bg-color);
+}
+
+.flap.top {
+  box-shadow:
+    0 calc(-1 * var(--flap-grow)) 0 0 var(--bg-color),
+    calc(-1 * var(--flap-grow)) 0 0 0 var(--bg-color),
+    var(--flap-grow) 0 0 0 var(--bg-color),
+    calc(-1 * var(--flap-grow)) calc(-1 * var(--flap-grow)) 0 0 var(--bg-color),
+    var(--flap-grow) calc(-1 * var(--flap-grow)) 0 0 var(--bg-color);
 }
 
 ::slotted([slot="label"]) {
@@ -331,3 +386,21 @@
   display: block;
   flex-shrink: 0;
 }
+
+.dash {
+  /* Overridden inline per render from the measured thickness. */
+  --dash-pad: 0px;
+  position: absolute;
+  top: calc(-1 * var(--dash-pad));
+  left: calc(-1 * var(--dash-pad));
+  overflow: visible;
+  pointer-events: none;
+  fill: none;
+  stroke: var(--bg-color);
+  stroke-dasharray: 12 6;
+}
+
+.dash path {
+  /* Animated on the one path: a wider second path would drift its dashes. */
+  stroke-width: calc(var(--thickness) + var(--blink-width-dynamic));
+}

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

@@ -1,45 +1,114 @@
 import {describe, expect, it} from 'vitest';
 import './alert-frame.js';
-import {ObcAlertFrame, ObcAlertFrameMode} from './alert-frame.js';
+import {
+  ObcAlertFrame,
+  ObcAlertFrameFlashEffect,
+  ObcAlertFrameMode,
+} from './alert-frame.js';
 import {render} from 'vitest-browser-lit';
 import {html} from 'lit';
+import {AlertType, FlashingSpeed} from '../../types.js';
 
-describe('obc-alert-frame blinking lifecycle', () => {
-  async function setup(mode: ObcAlertFrameMode) {
+function durations(el: HTMLElement): number[] {
+  return el
+    .getAnimations()
+    .map((a) => (a.effect as KeyframeEffect).getTiming().duration as number);
+}
+
+describe('obc-alert-frame flashing lifecycle', () => {
+  async function setup(
+    mode: ObcAlertFrameMode,
+    status: AlertType = AlertType.Alarm,
+    flashingSpeed: FlashingSpeed = FlashingSpeed.Default
+  ) {
     const screen = render(
-      html`<obc-alert-frame .mode=${mode}></obc-alert-frame>`
+      html`<obc-alert-frame
+        .mode=${mode}
+        .status=${status}
+        .flashingSpeed=${flashingSpeed}
+      ></obc-alert-frame>`
     );
-    const el = screen.baseElement.querySelector(
+    const el = screen.container.querySelector(
       'obc-alert-frame'
     ) as ObcAlertFrame;
     await el.updateComplete;
     return el;
   }
 
-  it('blinks while mode is unacked-active', async () => {
+  it('flashes fast while an alarm is unacked-active', async () => {
     const el = await setup(ObcAlertFrameMode.unackedActive);
 
-    expect(el.getAnimations().length).toBeGreaterThan(0);
+    expect(durations(el)).toEqual([800]);
+    expect(el.resolvedFlashingSpeed).toBe(FlashingSpeed.Fast);
+  });
+
+  it('flashes slow for a warning and very slow for level-low', async () => {
+    expect(
+      durations(await setup(ObcAlertFrameMode.unackedActive, AlertType.Warning))
+    ).toEqual([1600]);
+    expect(
+      durations(
+        await setup(ObcAlertFrameMode.unackedActive, AlertType.LevelLow)
+      )
+    ).toEqual([3200]);
+  });
+
+  it('never flashes a caution', async () => {
+    expect(
+      durations(await setup(ObcAlertFrameMode.unackedActive, AlertType.Caution))
+    ).toEqual([]);
+    expect(
+      durations(
+        await setup(ObcAlertFrameMode.unackedRectified, AlertType.Caution)
+      )
+    ).toEqual([]);
+  });
+
+  it('flashes very slow while rectified', async () => {
+    const el = await setup(ObcAlertFrameMode.unackedRectified);
+
+    expect(durations(el)).toEqual([3200]);
+  });
+
+  it('honours an explicit flashingSpeed', async () => {
+    expect(
+      durations(
+        await setup(
+          ObcAlertFrameMode.unackedActive,
+          AlertType.Alarm,
+          FlashingSpeed.Slow
+        )
+      )
+    ).toEqual([1600]);
+    expect(
+      durations(
+        await setup(
+          ObcAlertFrameMode.unackedActive,
+          AlertType.Alarm,
+          FlashingSpeed.Fixed
+        )
+      )
+    ).toEqual([]);
   });
 
-  it('does not blink in other modes', async () => {
+  it('does not flash in acked-active', async () => {
     const el = await setup(ObcAlertFrameMode.ackedActive);
 
     expect(el.getAnimations()).toHaveLength(0);
   });
 
   describe('mode transitions', () => {
-    it('starts blinking when mode becomes unacked-active', async () => {
+    it('starts flashing when mode becomes unacked-active', async () => {
       const el = await setup(ObcAlertFrameMode.ackedActive);
       expect(el.getAnimations()).toHaveLength(0);
 
       el.mode = ObcAlertFrameMode.unackedActive;
       await el.updateComplete;
 
-      expect(el.getAnimations().length).toBeGreaterThan(0);
+      expect(durations(el)).toEqual([800]);
     });
 
-    it('stops blinking when mode leaves unacked-active', async () => {
+    it('stops flashing when mode leaves unacked-active', async () => {
       const el = await setup(ObcAlertFrameMode.unackedActive);
       expect(el.getAnimations().length).toBeGreaterThan(0);
 
@@ -49,13 +118,13 @@ describe('obc-alert-frame blinking lifecycle', () => {
       expect(el.getAnimations()).toHaveLength(0);
     });
 
-    it('stops blinking when mode becomes unacked-rectified', async () => {
+    it('switches to the very-slow tempo when mode becomes unacked-rectified', async () => {
       const el = await setup(ObcAlertFrameMode.unackedActive);
 
       el.mode = ObcAlertFrameMode.unackedRectified;
       await el.updateComplete;
 
-      expect(el.getAnimations()).toHaveLength(0);
+      expect(durations(el)).toEqual([3200]);
     });
 
     it('does not accumulate animations across repeated updates', async () => {
@@ -72,7 +141,7 @@ describe('obc-alert-frame blinking lifecycle', () => {
   });
 
   describe('reconnection', () => {
-    it('resumes blinking after disconnect and reconnect', async () => {
+    it('resumes flashing after disconnect and reconnect', async () => {
       const el = await setup(ObcAlertFrameMode.unackedActive);
       const parent = el.parentElement!;
       expect(el.getAnimations().length).toBeGreaterThan(0);
@@ -81,14 +150,14 @@ describe('obc-alert-frame blinking lifecycle', () => {
       expect(el.getAnimations()).toHaveLength(0);
 
       // Reconnect without touching any property. firstUpdated() will not run
-      // again, so this only passes if blinking is reinstalled on update.
+      // again, so this only passes if the controller re-syncs on connect.
       parent.appendChild(el);
       await el.updateComplete;
 
       expect(el.getAnimations().length).toBeGreaterThan(0);
     });
 
-    it('does not resume blinking on reconnect when mode is not unacked-active', async () => {
+    it('does not resume flashing on reconnect when mode is not unacked-active', async () => {
       const el = await setup(ObcAlertFrameMode.ackedActive);
       const parent = el.parentElement!;
 
@@ -99,7 +168,7 @@ describe('obc-alert-frame blinking lifecycle', () => {
       expect(el.getAnimations()).toHaveLength(0);
     });
 
-    it('does not blink after disconnection when mode became unacked-active while detached', async () => {
+    it('does not flash after disconnection when mode became unacked-active while detached', async () => {
       const el = await setup(ObcAlertFrameMode.ackedActive);
       const parent = el.parentElement!;
 
@@ -119,4 +188,94 @@ describe('obc-alert-frame blinking lifecycle', () => {
       expect(el.getAnimations().length).toBeGreaterThan(0);
     });
   });
+
+  it('eases the outline width between phases in the outline-eased effect', async () => {
+    const el = await setup(ObcAlertFrameMode.unackedActive);
+    el.flashEffect = ObcAlertFrameFlashEffect.OutlineEased;
+    await el.updateComplete;
+    const wrapper = el.shadowRoot!.querySelector('.wrapper') as HTMLElement;
+    const [flash] = el.getAnimations();
+    flash.pause();
+    flash.currentTime = 100;
+    await new Promise((r) => requestAnimationFrame(r));
+    await Promise.all(wrapper.getAnimations().map((a) => a.finished));
+    expect(getComputedStyle(wrapper).outlineWidth).toBe('4px');
+
+    flash.currentTime = 500;
+    // A style read starts the transition synchronously; waiting a frame lets
+    // a slow runner finish the 50 ms and drop it from getAnimations().
+    void getComputedStyle(wrapper).outlineWidth;
+    const transition = wrapper
+      .getAnimations()
+      .find(
+        (a) => (a as CSSTransition).transitionProperty === 'outline-width'
+      ) as CSSTransition | undefined;
+    expect(transition).toBeDefined();
+    expect((transition!.effect as KeyframeEffect).getTiming().duration).toBe(
+      50
+    );
+    transition!.pause();
+    transition!.currentTime = 25;
+    const midway = parseFloat(getComputedStyle(wrapper).outlineWidth);
+    expect(midway).toBeGreaterThan(2);
+    expect(midway).toBeLessThan(4);
+  });
+
+  describe('rectified dash', () => {
+    it('draws the 12/6 dash as one svg path whose stroke width flashes', async () => {
+      const el = await setup(ObcAlertFrameMode.unackedRectified);
+      await new Promise((r) => requestAnimationFrame(r));
+      await el.updateComplete;
+
+      const root = el.shadowRoot!;
+      const wrapper = root.querySelector('.wrapper') as HTMLElement;
+      expect(getComputedStyle(wrapper).outlineStyle).toBe('none');
+      const paths = root.querySelectorAll('svg.dash path');
+      expect(paths).toHaveLength(1);
+      const path = paths[0];
+      expect(getComputedStyle(path).strokeDasharray).toBe('12px, 6px');
+      const d = path.getAttribute('d');
+      expect(d).toMatch(/^M[\d.-]+ [\d.-]+ H/);
+
+      // The geometry must not change between phases, or the dashes drift.
+      const [anim] = el.getAnimations();
+      anim.pause();
+      anim.currentTime = 100;
+      expect(getComputedStyle(path).strokeWidth).toBe('4px');
+      anim.currentTime = 3000;
+      expect(getComputedStyle(path).strokeWidth).toBe('2px');
+      expect(path.getAttribute('d')).toBe(d);
+    });
+
+    it('re-measures when a sharp edge or the thickness changes', async () => {
+      const el = await setup(ObcAlertFrameMode.unackedRectified);
+      // The palette is not loaded here; give the corners a radius to lose.
+      el.style.setProperty('--ui-components-button-border-radius', '6px');
+      await new Promise((r) => requestAnimationFrame(r));
+      await el.updateComplete;
+      const path = () => el.shadowRoot!.querySelector('svg.dash path')!;
+      const rounded = path().getAttribute('d')!;
+      expect(rounded).toContain('A');
+
+      el.sharpEdgeTopLeft = true;
+      await el.updateComplete;
+      await el.updateComplete;
+
+      const sharp = path().getAttribute('d')!;
+      expect(sharp).not.toBe(rounded);
+      expect(sharp.startsWith('M3 3 H')).toBe(true);
+    });
+
+    it('removes the svg when the mode leaves unacked-rectified', async () => {
+      const el = await setup(ObcAlertFrameMode.unackedRectified);
+      await new Promise((r) => requestAnimationFrame(r));
+      await el.updateComplete;
+      expect(el.shadowRoot!.querySelector('svg.dash')).not.toBeNull();
+
+      el.mode = ObcAlertFrameMode.ackedActive;
+      await el.updateComplete;
+
+      expect(el.shadowRoot!.querySelector('svg.dash')).toBeNull();
+    });
+  });
 });

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

@@ -6,7 +6,9 @@ import {
   ObcAlertFrameStatus,
   AlertFrameTextSize,
   ObcAlertFrameMode,
+  ObcAlertFrameFlashEffect,
 } from './alert-frame.js';
+import {AlertType, FlashingSpeed} from '../../types.js';
 import './alert-frame.js';
 import '../../icons/icon-placeholder.js';
 import {html} from 'lit';
@@ -20,6 +22,8 @@ const meta: Meta<typeof ObcAlertFrame> = {
     thickness: ObcAlertFrameThickness.Small,
     status: ObcAlertFrameStatus.Alarm,
     mode: ObcAlertFrameMode.ackedActive,
+    flashingSpeed: FlashingSpeed.Default,
+    flashEffect: ObcAlertFrameFlashEffect.Outline,
     demoWidth: 200,
     showIcon: true,
     showAlertCategoryIcon: true,
@@ -37,6 +41,16 @@ const meta: Meta<typeof ObcAlertFrame> = {
         type: 'select',
       },
     },
+    flashingSpeed: {
+      options: Object.values(FlashingSpeed),
+      control: {type: 'select'},
+      if: {arg: 'mode', neq: ObcAlertFrameMode.ackedActive},
+    },
+    flashEffect: {
+      options: Object.values(ObcAlertFrameFlashEffect),
+      control: {type: 'select'},
+      if: {arg: 'mode', neq: ObcAlertFrameMode.ackedActive},
+    },
     thickness: {
       options: Object.values(ObcAlertFrameThickness),
       control: {
@@ -64,6 +78,8 @@ const meta: Meta<typeof ObcAlertFrame> = {
         .type=${args.type}
         .thickness=${args.thickness}
         .mode=${args.mode}
+        .flashingSpeed=${args.flashingSpeed}
+        .flashEffect=${args.flashEffect}
         .status=${args.status}
         .textSize=${args.textSize}
         .showIcon=${args.showIcon}
@@ -273,3 +289,48 @@ export const CriticalUnacked: Story = {
     showAlertCategoryIcon: true,
   },
 };
+
+export const FlashComparison: Story = {
+  tags: ['skip-test'],
+  render: () => {
+    const statuses = [
+      AlertType.LevelCritical,
+      AlertType.Alarm,
+      AlertType.Warning,
+      AlertType.Caution,
+      AlertType.LevelLow,
+    ];
+    const modes = [
+      ObcAlertFrameMode.unackedActive,
+      ObcAlertFrameMode.unackedRectified,
+    ];
+    return html`<style>
+        .flash-grid {
+          display: grid;
+          grid-template-columns: repeat(2, 200px);
+          gap: 24px;
+          padding: 16px;
+        }
+      </style>
+      ${Object.values(ObcAlertFrameFlashEffect).map(
+        (effect) =>
+          html`<h4>${effect}</h4>
+            <div class="flash-grid">
+              ${statuses.flatMap((status) =>
+                modes.map(
+                  (mode) =>
+                    html`<obc-alert-frame
+                      .type=${ObcAlertFrameType.Regular}
+                      .status=${status}
+                      .mode=${mode}
+                      .flashEffect=${effect}
+                      wrapContent
+                    >
+                      <div style="width: 200px; height: 48px"></div>
+                    </obc-alert-frame>`
+                )
+              )}
+            </div>`
+      )}`;
+  },
+};