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

package/src/components/date-item/date-item.css

@@ -27,8 +27,6 @@
     width: 100%;
     max-width: var(--menu-navigation-components-date-item-touch-target);
     height: var(--menu-navigation-components-date-item-touch-target);
-    padding: var(--menu-navigation-components-date-item-padding-vertical)
-      var(--menu-navigation-components-date-item-padding-horizontal);
 
     /* Keyboard press visual feedback */
     &.pressing .date-container {
@@ -175,7 +173,9 @@
   display: flex;
   width: var(--menu-navigation-components-date-item-touch-target, 48px);
   height: var(--menu-navigation-components-date-item-touch-target, 48px);
-  padding: var(--menu-navigation-components-date-item-padding-vertical, 8px)
+  /* TODO(designer): Figma pads this frame with Date item/padding-bottom, 12 and 16px in
+     large and xl, less room than the date container needs; 8px fits every size (#929) */
+  padding: 8px
     var(--menu-navigation-components-date-item-padding-horizontal, 8px);
   flex-direction: column;
   justify-content: center;

package/src/components/keyboard-full/keyboard-full.css

@@ -109,8 +109,8 @@ obc-input::part(input) {
 .key-button {
   display: flex;
   flex: 1 0 0;
-  min-width: var(--ui-components-keyboard-numeric-touch-target-size);
-  min-height: var(--ui-components-keyboard-numeric-button-size-min);
+  min-width: var(--ui-components-keyboard-button-size-min);
+  min-height: var(--ui-components-keyboard-button-size-min);
 }
 
 obc-button.key-button::part(wrapper) {
@@ -121,8 +121,8 @@ obc-button.key-button::part(visible-wrapper) {
   box-sizing: border-box;
   display: flex;
   width: 100%;
-  min-width: var(--ui-components-keyboard-numeric-touch-target-size);
-  min-height: var(--ui-components-keyboard-numeric-button-size-min);
+  min-width: var(--ui-components-keyboard-button-size-min);
+  min-height: var(--ui-components-keyboard-button-size-min);
   align-items: center;
   justify-content: center;
   align-self: stretch;

package/src/components/message-menu-item/message-menu-item.css

@@ -167,12 +167,8 @@
 }
 
 .trailing-icon {
-  width: var(
-    --app-components-alert-components-general-notification-item-icon-size-large
-  );
-  height: var(
-    --app-components-alert-components-general-notification-item-icon-size-large
-  );
+  width: var(--app-components-message-menu-item-icon-size-large);
+  height: var(--app-components-message-menu-item-icon-size-large);
   display: flex;
   align-items: center;
   justify-content: center;

package/src/components/sequence-toolbar/sequence-toolbar.css

@@ -12,7 +12,7 @@
   align-items: center;
   padding: 5px;
   border: 1px solid var(--border-outline-color);
-  background-color: var(--enabled-background-color);
+  background-color: var(--container-global-color);
 
   &.type-sequential,
   &.type-unordered {
@@ -28,7 +28,6 @@
 
   &.type-condensed {
     border-radius: 100px;
-    background-color: var(--normal-enabled-background-color);
 
     .condensed-label__current {
       font-weight: var(--font-weight-Bold, 670);

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

@@ -170,6 +170,10 @@ const meta: Meta = {
     chartFill: {
       control: 'boolean',
     },
+    rangeLabels: {
+      control: {type: 'radio'},
+      options: ['none', 'y', 'x', 'xy'],
+    },
     touching: {
       control: 'boolean',
     },
@@ -190,6 +194,7 @@ const meta: Meta = {
     fillMin: 0,
     // Note: fillMax intentionally omitted - in 'fill' mode it auto-derives from value
     chartFill: true,
+    rangeLabels: 'none',
     touching: false,
   },
   render: (args) => html`
@@ -199,6 +204,7 @@ const meta: Meta = {
       .height=${args.height}
       .priority=${args.priority}
       .chartFill=${args.chartFill}
+      .rangeLabels=${args.rangeLabels}
       .minValue=${args.minValue}
       .maxValue=${args.maxValue}
       .value=${args.value}
@@ -242,6 +248,7 @@ export const GaugeTrend: Story = {
       .height=${_args.height}
       .priority=${_args.priority}
       .chartFill=${_args.chartFill}
+      .rangeLabels=${_args.rangeLabels}
       .minValue=${_args.minValue ?? 0}
       .maxValue=${_args.maxValue ?? 100}
       .value=${_args.value}
@@ -266,6 +273,21 @@ export const GaugeTrend: Story = {
   `,
 };
 
+export const CompactRangeLabels: Story = {
+  name: 'Compact With Range Labels (160px)',
+  play: async () => {
+    await new Promise((resolve) => setTimeout(resolve, 300));
+  },
+  args: {
+    browserContainerWidth: 160,
+    width: 160,
+    height: 160,
+    rangeLabels: 'xy',
+    hasBar: true,
+    hasScale: true,
+  },
+};
+
 export const UnevenTimeIntervals: Story = {
   name: 'Uneven Time Intervals (Auto Time Axis)',
   play: async () => {
@@ -279,6 +301,7 @@ export const UnevenTimeIntervals: Story = {
       .height=${_args.height}
       .priority=${_args.priority}
       .chartFill=${_args.chartFill}
+      .rangeLabels=${_args.rangeLabels}
       .minValue=${_args.minValue ?? 0}
       .maxValue=${_args.maxValue ?? 100}
       .value=${_args.value}
@@ -311,6 +334,7 @@ export const GaugeTrendScaleReferenceSize: Story = {
       .height=${_args.height}
       .priority=${_args.priority}
       .chartFill=${_args.chartFill}
+      .rangeLabels=${_args.rangeLabels}
       .minValue=${_args.minValue ?? 0}
       .maxValue=${_args.maxValue ?? 100}
       .value=${_args.value}
@@ -531,6 +555,7 @@ export const GaugeTrendWithoutScale: Story = {
       .height=${_args.height}
       .priority=${_args.priority}
       .chartFill=${_args.chartFill}
+      .rangeLabels=${_args.rangeLabels}
       .minValue=${_args.minValue ?? 0}
       .maxValue=${_args.maxValue ?? 100}
       .value=${_args.value}
@@ -572,6 +597,7 @@ export const GaugeTrendWithoutBar: Story = {
       .height=${_args.height}
       .priority=${_args.priority}
       .chartFill=${_args.chartFill}
+      .rangeLabels=${_args.rangeLabels}
       .minValue=${_args.minValue ?? 0}
       .maxValue=${_args.maxValue ?? 100}
       .value=${_args.value}
@@ -617,6 +643,7 @@ export const GaugeTrendWithAdvice: Story = {
       .height=${_args.height}
       .priority=${_args.priority}
       .chartFill=${_args.chartFill}
+      .rangeLabels=${_args.rangeLabels}
       .minValue=${_args.minValue ?? 0}
       .maxValue=${_args.maxValue ?? 100}
       .value=${_args.value}
@@ -708,6 +735,7 @@ export const GaugeTrendCustomScaleRange: Story = {
       .height=${_args.height}
       .priority=${_args.priority}
       .chartFill=${_args.chartFill}
+      .rangeLabels=${_args.rangeLabels}
       .minValue=${_args.minValue}
       .maxValue=${_args.maxValue}
       .value=${_args.value}
@@ -753,6 +781,7 @@ export const GaugeTrendLabelsOnly: Story = {
       .height=${_args.height}
       .priority=${_args.priority}
       .chartFill=${_args.chartFill}
+      .rangeLabels=${_args.rangeLabels}
       .minValue=${_args.minValue ?? 0}
       .maxValue=${_args.maxValue ?? 100}
       .value=${_args.value}

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

@@ -442,6 +442,17 @@ export class ObcGaugeTrend extends SetpointMixin(ObcChartLineBase) {
     return false;
   }
 
+  /**
+   * The right scale is this component's own bar, ranged by `minValue` /
+   * `maxValue`. `chartMinValue` / `chartMaxValue` exist so the plotted range
+   * can differ from it, so the chart's axis range must not overwrite it.
+   */
+  protected override ownsSlottedScaleRange(
+    side: 'left' | 'right' | 'top' | 'bottom'
+  ): boolean {
+    return side !== 'right';
+  }
+
   override willUpdate(changed: Map<PropertyKey, unknown>) {
     // Auto axis detection: {x, value} data switches to time spacing, {label,
     // value} stays category. An explicit xAxisType assignment (anything we

package/src/navigation-instruments/instrument-field/instrument-field.css

@@ -76,7 +76,7 @@
 
     .tag {
       @mixin font-instrument-label;
-      width: var(--obc-instrument-field-tag-width);
+      width: var(--obc-instrument-field-tag-width, auto);
     }
 
     .unit {
@@ -109,7 +109,7 @@
     @mixin font-instrument-unit;
     color: var(--element-neutral-color);
     justify-content: end;
-    width: var(--obc-instrument-field-source-width);
+    width: var(--obc-instrument-field-source-width, auto);
     box-sizing: content-box;
   }
 

package/src/navigation-instruments/readout/readout.ts

@@ -55,7 +55,7 @@ import {
   ObcAlertFrameThickness,
   ObcAlertFrameMode,
 } from '../../components/alert-frame/alert-frame.js';
-import {AlertType} from '../../types.js';
+import {AlertType, FlashingSpeed} from '../../types.js';
 import '../../components/button/button.js';
 import '../../components/context-menu-input/context-menu-input.js';
 import {
@@ -866,6 +866,7 @@ export class ObcReadout extends LitElement {
           .thickness=${thickness}
           .status=${alert.status ?? AlertType.Alarm}
           .mode=${alert.mode ?? ObcAlertFrameMode.ackedActive}
+          .flashingSpeed=${alert.flashingSpeed ?? FlashingSpeed.Default}
           .showIcon=${alert.showIcon ?? false}
           .showAlertCategoryIcon=${alert.showAlertCategoryIcon ?? true}
           .wrapContent=${false}

package/src/navigation-instruments/readout-list-item/readout-list-item.ts

@@ -44,7 +44,7 @@ import {
   ObcAlertFrameThickness,
   ObcAlertFrameMode,
 } from '../../components/alert-frame/alert-frame.js';
-import {AlertType} from '../../types.js';
+import {AlertType, FlashingSpeed} from '../../types.js';
 
 // The value weight maps straight to obc-textbox's font weights (regular /
 // semibold / bold). Re-exported so consumers can set `valueOptions.weight`
@@ -941,6 +941,7 @@ export class ObcReadoutListItem extends LitElement {
           .thickness=${thickness}
           .status=${alert.status ?? AlertType.Alarm}
           .mode=${alert.mode ?? ObcAlertFrameMode.ackedActive}
+          .flashingSpeed=${alert.flashingSpeed ?? FlashingSpeed.Default}
           .showIcon=${alert.showIcon ?? false}
           .showAlertCategoryIcon=${alert.showAlertCategoryIcon ?? true}
           .wrapContent=${false}

package/src/palettes/blinking.spec.ts

@@ -0,0 +1,83 @@
+import {afterEach, describe, expect, it} from 'vitest';
+import '../main.css';
+import {
+  FLASH_OFF_MS,
+  FLASH_ON_MS,
+  FLASH_TEMPOS,
+  blinkingAll,
+  flashPeriodMs,
+  flashVariable,
+  installFlashing,
+} from './blinking.js';
+import {FlashingSpeed} from '../types.js';
+
+describe('installFlashing', () => {
+  const hosts: HTMLElement[] = [];
+  function host(): HTMLElement {
+    const el = document.createElement('div');
+    document.body.append(el);
+    hosts.push(el);
+    return el;
+  }
+  afterEach(() => {
+    hosts.splice(0).forEach((el) => el.remove());
+  });
+
+  it.each(FLASH_TEMPOS)(
+    '%s runs on for its on-time, off for 400 ms, from the document origin',
+    (tempo) => {
+      const el = host();
+      const cancel = installFlashing(el, tempo);
+      const [anim] = el.getAnimations();
+      const effect = anim.effect as KeyframeEffect;
+      const timing = effect.getTiming();
+      expect(timing.duration).toBe(FLASH_ON_MS[tempo] + FLASH_OFF_MS);
+      expect(timing.iterations).toBe(Infinity);
+      const frames = effect.getKeyframes();
+      expect(frames).toHaveLength(3);
+      // Chromium reports the normalised form of `step-end`.
+      expect(frames[0].easing).toMatch(/^(step-end|steps\(1\))$/);
+      expect(frames[1].offset).toBeCloseTo(
+        FLASH_ON_MS[tempo] / flashPeriodMs(tempo)
+      );
+      expect(anim.startTime).toBe(0);
+      cancel();
+      expect(el.getAnimations()).toHaveLength(0);
+    }
+  );
+
+  it('nests the cycles so every tempo dips together', () => {
+    expect(flashPeriodMs(FlashingSpeed.Fast)).toBe(800);
+    expect(flashPeriodMs(FlashingSpeed.Slow)).toBe(1600);
+    expect(flashPeriodMs(FlashingSpeed.VerySlow)).toBe(3200);
+  });
+
+  it('drives the on/off variables in step', () => {
+    const el = host();
+    installFlashing(el, FlashingSpeed.Fast);
+    const [anim] = el.getAnimations();
+    const on = () =>
+      getComputedStyle(el).getPropertyValue(
+        flashVariable(FlashingSpeed.Fast, 'on')
+      );
+    const off = () =>
+      getComputedStyle(el).getPropertyValue(
+        flashVariable(FlashingSpeed.Fast, 'off')
+      );
+    anim.pause();
+    anim.currentTime = 100;
+    expect(on().trim()).toBe('1');
+    expect(off().trim()).toBe('0');
+    anim.currentTime = 500;
+    expect(on().trim()).toBe('0');
+    expect(off().trim()).toBe('1');
+  });
+
+  it('blinkingAll installs one animation per tempo and cancels them together', () => {
+    const el = host();
+    const cancel = blinkingAll(el);
+    expect(el.getAnimations()).toHaveLength(FLASH_TEMPOS.length);
+    cancel();
+    expect(el.getAnimations()).toHaveLength(0);
+  });
+});

package/src/palettes/blinking.ts

@@ -1,46 +1,58 @@
-const CRITICAL_PERIOD = 1000; // ms
-const ALARM_PERIOD = 2000; // ms
-const WARNING_PERIOD = 4000; // ms
-const LOW_PERIOD = 8000; // ms
+import {FlashingSpeed, type FlashTempo} from '../types.js';
 
-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();
-}
+/** Shared off phase: nested cycles (800/1600/3200 ms) then dip together (#1224). */
+export const FLASH_OFF_MS = 400;
 
-export function blinkingCritical(el: HTMLElement): () => void {
-  return blinkingInstall(el, CRITICAL_PERIOD, '--critical-blink');
-}
+export const FLASH_ON_MS: Record<FlashTempo, number> = {
+  [FlashingSpeed.Fast]: 400,
+  [FlashingSpeed.Slow]: 1200,
+  [FlashingSpeed.VerySlow]: 2800,
+};
+
+export const FLASH_TEMPOS: readonly FlashTempo[] = [
+  FlashingSpeed.Fast,
+  FlashingSpeed.Slow,
+  FlashingSpeed.VerySlow,
+];
 
-export function blinkingAlarm(el: HTMLElement): () => void {
-  return blinkingInstall(el, ALARM_PERIOD, '--alarm-blink');
+export function flashPeriodMs(tempo: FlashTempo): number {
+  return FLASH_ON_MS[tempo] + FLASH_OFF_MS;
 }
 
-export function blinkingWarning(el: HTMLElement): () => void {
-  return blinkingInstall(el, WARNING_PERIOD, '--warning-blink');
+/** Animated custom property name; `on` reads 1 during the on phase, `off` 1 during the off phase. */
+export function flashVariable(tempo: FlashTempo, phase: 'on' | 'off'): string {
+  return `--flash-${tempo}-${phase}`;
 }
 
-export function blinkingLow(el: HTMLElement): () => void {
-  return blinkingInstall(el, LOW_PERIOD, '--low-blink');
+/**
+ * Animates `--flash-<tempo>-on` / `-off` on `el` for one tempo. Returns the
+ * cancel function.
+ */
+export function installFlashing(
+  el: HTMLElement,
+  tempo: FlashTempo
+): () => void {
+  const on = flashVariable(tempo, 'on');
+  const off = flashVariable(tempo, 'off');
+  const period = flashPeriodMs(tempo);
+  const frames: Keyframe[] = [
+    {[on]: 1, [off]: 0, easing: 'step-end'},
+    {
+      [on]: 0,
+      [off]: 1,
+      offset: FLASH_ON_MS[tempo] / period,
+      easing: 'step-end',
+    },
+    {[on]: 0, [off]: 1},
+  ];
+  const anim = el.animate(frames, {duration: period, iterations: Infinity});
+  // Document-timeline origin, so every flashing element is in the same phase.
+  anim.startTime = 0;
+  return () => anim.cancel();
 }
 
+/** Installs every tempo on `el`, for CSS that reads the variables directly. */
 export function blinkingAll(el: HTMLElement): () => void {
-  const animes = [
-    blinkingCritical(el),
-    blinkingAlarm(el),
-    blinkingWarning(el),
-    blinkingLow(el),
-  ];
-  return () => animes.forEach((anim) => anim());
+  const cancels = FLASH_TEMPOS.map((tempo) => installFlashing(el, tempo));
+  return () => cancels.forEach((cancel) => cancel());
 }

package/src/palettes/flashing-controller.ts

@@ -0,0 +1,62 @@
+import type {LitElement, ReactiveController} from 'lit';
+import {
+  FlashingSpeed,
+  type FlashTempo,
+  type ResolvedFlashingSpeed,
+} from '../types.js';
+import {installFlashing} from './blinking.js';
+
+/**
+ * Keeps one flash animation on the host in step with the tempo the host
+ * resolves after every update. `fixed` or a disconnect removes it; a
+ * reconnect re-syncs without waiting for a property change (#1224).
+ */
+export class FlashingController implements ReactiveController {
+  private cancel?: () => void;
+  private installed?: FlashTempo;
+
+  constructor(
+    private readonly host: LitElement,
+    private readonly resolve: () => ResolvedFlashingSpeed
+  ) {
+    host.addController(this);
+  }
+
+  get tempo(): FlashTempo | undefined {
+    return this.installed;
+  }
+
+  hostConnected(): void {
+    if (this.host.hasUpdated) {
+      this.sync();
+    }
+  }
+
+  hostUpdated(): void {
+    this.sync();
+  }
+
+  hostDisconnected(): void {
+    this.stop();
+  }
+
+  private sync(): void {
+    const wanted = this.host.isConnected ? this.resolve() : FlashingSpeed.Fixed;
+    if (wanted === FlashingSpeed.Fixed) {
+      this.stop();
+      return;
+    }
+    if (wanted === this.installed) {
+      return;
+    }
+    this.stop();
+    this.cancel = installFlashing(this.host, wanted);
+    this.installed = wanted;
+  }
+
+  private stop(): void {
+    this.cancel?.();
+    this.cancel = undefined;
+    this.installed = undefined;
+  }
+}

package/src/palettes/manual.css

@@ -98,25 +98,39 @@
   --alert-notification-container-border-color: rgb(226, 240, 255);
 }
 
-@property --critical-blink-on {
+/* Animated per element by palettes/blinking.ts; registered so the numbers
+   feed calc() (#1224). */
+@property --flash-fast-on {
   syntax: "<number>";
   inherits: true;
   initial-value: 1;
 }
 
-@property --critical-blink-off {
+@property --flash-fast-off {
   syntax: "<number>";
   inherits: true;
   initial-value: 0;
 }
 
-@property --low-blink-on {
+@property --flash-slow-on {
   syntax: "<number>";
   inherits: true;
   initial-value: 1;
 }
 
-@property --low-blink-off {
+@property --flash-slow-off {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
+}
+
+@property --flash-very-slow-on {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1;
+}
+
+@property --flash-very-slow-off {
   syntax: "<number>";
   inherits: true;
   initial-value: 0;

package/src/svghelpers/index.ts

@@ -3,3 +3,4 @@ export * from './stroke-aware.js';
 export * from './setpoint.js';
 export * from './setpoint-mixin.js';
 export * from './setpoint-bundle.js';
+export * from './rounded-rect.js';

package/src/svghelpers/rounded-rect.spec.ts

@@ -0,0 +1,47 @@
+import {describe, expect, it} from 'vitest';
+import {roundedRectPath} from './rounded-rect.js';
+
+describe('roundedRectPath', () => {
+  it('draws square corners for zero radii', () => {
+    expect(
+      roundedRectPath({x: 0, y: 0, width: 100, height: 50, radii: [0, 0, 0, 0]})
+    ).toBe('M0 0 H100 V50 H0 V0 Z');
+  });
+
+  it('draws a clockwise arc per rounded corner', () => {
+    expect(
+      roundedRectPath({
+        x: 1,
+        y: 1,
+        width: 100,
+        height: 50,
+        radii: [10, 10, 10, 10],
+      })
+    ).toBe(
+      'M11 1 H91 A10 10 0 0 1 101 11 V41 A10 10 0 0 1 91 51 H11 A10 10 0 0 1 1 41 V11 A10 10 0 0 1 11 1 Z'
+    );
+  });
+
+  it('keeps individual corners square', () => {
+    const d = roundedRectPath({
+      x: 0,
+      y: 0,
+      width: 100,
+      height: 50,
+      radii: [0, 8, 0, 8],
+    });
+    expect(d.startsWith('M0 0 H92 A8 8 0 0 1 100 8 V50 H8')).toBe(true);
+  });
+
+  it('clamps radii to half the shorter side', () => {
+    const d = roundedRectPath({
+      x: 0,
+      y: 0,
+      width: 100,
+      height: 20,
+      radii: [50, 50, 50, 50],
+    });
+    expect(d).toContain('A10 10 0 0 1');
+    expect(d).not.toContain('A50');
+  });
+});

package/src/svghelpers/rounded-rect.ts

@@ -0,0 +1,42 @@
+export interface RoundedRect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  /** Corner radii in CSS order: top-left, top-right, bottom-right, bottom-left. */
+  radii: [number, number, number, number];
+}
+
+/**
+ * SVG path of a rectangle with per-corner radii, so a stroke can follow a
+ * box whose corners are individually sharp (the alert frame's
+ * `sharpEdge*` flags). Radii are clamped to half the shorter side.
+ */
+export function roundedRectPath({
+  x,
+  y,
+  width,
+  height,
+  radii,
+}: RoundedRect): string {
+  const max = Math.min(width, height) / 2;
+  const [tl, tr, br, bl] = radii.map((r) => Math.max(0, Math.min(r, max)));
+  const right = x + width;
+  const bottom = y + height;
+  const arc = (r: number, endX: number, endY: number) =>
+    r > 0 ? `A${r} ${r} 0 0 1 ${endX} ${endY}` : '';
+  return [
+    `M${x + tl} ${y}`,
+    `H${right - tr}`,
+    arc(tr, right, y + tr),
+    `V${bottom - br}`,
+    arc(br, right - br, bottom),
+    `H${x + bl}`,
+    arc(bl, x, bottom - bl),
+    `V${y + tl}`,
+    arc(tl, x + tl, y),
+    'Z',
+  ]
+    .filter(Boolean)
+    .join(' ');
+}

package/src/types.ts

@@ -16,6 +16,26 @@ export enum AlertType {
   LevelDiagnostic = 'level-diagnostic',
 }
 
+/**
+ * Flash tempo of an alert element. `default` resolves per alert type and
+ * phase (see `resolveFlashingSpeed` in `alert-severity.ts`); `fixed` never
+ * flashes.
+ */
+export enum FlashingSpeed {
+  Default = 'default',
+  Fast = 'fast',
+  Slow = 'slow',
+  VerySlow = 'very-slow',
+  Fixed = 'fixed',
+}
+
+export type ResolvedFlashingSpeed = Exclude<
+  FlashingSpeed,
+  FlashingSpeed.Default
+>;
+
+export type FlashTempo = Exclude<ResolvedFlashingSpeed, FlashingSpeed.Fixed>;
+
 export const ALERT_SEVERITY_PRIORITY = [
   AlertType.LevelCritical,
   AlertType.Alarm,