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

package/bundle/openbridge-webcomponents.bundle.js

@@ -14597,6 +14597,7 @@ const compentStyle$1e = i$7`* {
 
 .wrapper.level-critical {
     --bg-color: var(--critical-enabled-background-color);
+    --blink-on: var(--critical-blink-on);
     color: var(--on-critical-active-color);
   }
 
@@ -15220,6 +15221,42 @@ function usesAlarmNoAckIcon(type) {
     AlertType.LevelHigh
   ].includes(type);
 }
+const CRITICAL_PERIOD = 1e3;
+const ALARM_PERIOD = 2e3;
+const WARNING_PERIOD = 4e3;
+const LOW_PERIOD = 8e3;
+function blinkingInstall(el, period, label) {
+  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;
+  return () => anim.cancel();
+}
+function blinkingCritical(el) {
+  return blinkingInstall(el, CRITICAL_PERIOD, "--critical-blink");
+}
+function blinkingAlarm(el) {
+  return blinkingInstall(el, ALARM_PERIOD, "--alarm-blink");
+}
+function blinkingWarning(el) {
+  return blinkingInstall(el, WARNING_PERIOD, "--warning-blink");
+}
+function blinkingLow(el) {
+  return blinkingInstall(el, LOW_PERIOD, "--low-blink");
+}
+function blinkingAll(el) {
+  const animes = [
+    blinkingCritical(el),
+    blinkingAlarm(el),
+    blinkingWarning(el),
+    blinkingLow(el)
+  ];
+  return () => animes.forEach((anim) => anim());
+}
 var __defProp$zL = Object.defineProperty;
 var __getOwnPropDesc$zN = Object.getOwnPropertyDescriptor;
 var __decorateClass$zT = (decorators, target, key, kind) => {
@@ -15289,6 +15326,29 @@ let ObcAlertFrame = class extends i$4 {
       </div>
     `;
   }
+  syncBlinking() {
+    if (this.mode !== "unacked-active" && this._blinkAnimationCancel) {
+      this._blinkAnimationCancel();
+      this._blinkAnimationCancel = void 0;
+    }
+    if (this.mode === "unacked-active" && !this._blinkAnimationCancel) {
+      this._blinkAnimationCancel = blinkingAll(this);
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.hasUpdated) {
+      this.syncBlinking();
+    }
+  }
+  updated() {
+    this.syncBlinking();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._blinkAnimationCancel?.();
+    this._blinkAnimationCancel = void 0;
+  }
   flap() {
     if (this.type === "regular") {
       return A;
@@ -70698,9 +70758,13 @@ let ObcAlertButton = class extends i$4 {
   connectedCallback() {
     super.connectedCallback();
     window.addEventListener("resize", this.resizeListener);
+    if (this.hasUpdated) {
+      this.installBlinking();
+    }
   }
   disconnectedCallback() {
     window.removeEventListener("resize", this.resizeListener);
+    this._blinkAnimationCancel?.();
     super.disconnectedCallback();
   }
   renderAlertTwotoneIcon() {
@@ -70762,6 +70826,13 @@ let ObcAlertButton = class extends i$4 {
   get showSilenceButtonDynamic() {
     return this.showSilenceButton && this.width >= this.silenceButtonMinBreakpointPx && this.activeType !== "flat";
   }
+  installBlinking() {
+    this._blinkAnimationCancel?.();
+    this._blinkAnimationCancel = blinkingAll(this);
+  }
+  updated() {
+    this.installBlinking();
+  }
   render() {
     const hasAlerts = this.nAlerts > 0;
     const showCounter = this.counter && hasAlerts && this.activeType !== "flat";
@@ -72272,6 +72343,31 @@ let ObcAlertIcon = class extends i$4 {
     }
     return b`<div class="wrapper">${this.renderStaticIcon()}</div>`;
   }
+  syncBlinking() {
+    if (this._blinkAnimationCancel && !supportsBlinking(this._effectiveType, this.acknowledged ?? false)) {
+      this._blinkAnimationCancel();
+      this._blinkAnimationCancel = void 0;
+    }
+    if (!this._blinkAnimationCancel && supportsBlinking(this._effectiveType, this.acknowledged ?? false)) {
+      this._blinkAnimationCancel = blinkingAll(this);
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.hasUpdated) {
+      this.syncBlinking();
+    }
+  }
+  updated() {
+    this.syncBlinking();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._blinkAnimationCancel) {
+      this._blinkAnimationCancel();
+      this._blinkAnimationCancel = void 0;
+    }
+  }
 };
 ObcAlertIcon.styles = i$7`
     .wrapper {
@@ -206631,9 +206727,13 @@ const compentStyle$g = i$7`* {
     "liga" off,
     "clig" off,
     "ss04" on;
+  --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(
@@ -206788,22 +206888,25 @@ const compentStyle$g = i$7`* {
     color: var(--integration-on-normal-neutral-color);
   }
 
-.touch-target .icon.leading {
-    width: var(
-      --app-components-integration-system-navigation-item-horizontal-icon-size
-    );
-    height: var(
-      --app-components-integration-system-navigation-item-horizontal-icon-size
+.touch-target.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
-      );
   }
 
+.touch-target .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);
+  }
+
+:is(.touch-target .icon.leading) ::slotted(*) {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+
 .touch-target .icon.trailing {
     width: 28px;
     height: 24px;
@@ -207252,7 +207355,7 @@ let ObcIntegrationButton = class extends i$4 {
       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
     };
@@ -208001,6 +208104,7 @@ const compentStyle$f = i$7`* {
     flex-direction: column;
     align-items: flex-start;
     flex-grow: 1;
+    text-align: left;
   }
 
 :is(.wrapper option:not(.fleet-option)) .text-container .label {