@oicl/openbridge-webcomponents 2.0.0-next.152 → 2.0.0-next.153

package/dist/components/alert-button-item/alert-button-item.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-button-item.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/alert-button-item/alert-button-item.d.ts

@@ -0,0 +1,162 @@
+import { LitElement } from 'lit';
+import { AlertType, FlashingSpeed, AlertCounts, ResolvedFlashingSpeed } from '../../types.js';
+import { FlashingController } from '../../palettes/flashing-controller.js';
+import '../../icons/icon-alerts.js';
+import '../../icons/icon-alerts-active.js';
+import '../../icons/icon-alerts-alarm-twotone.js';
+import '../../icons/icon-alerts-warning-twotone.js';
+import '../../icons/icon-alerts-caution-twotone.js';
+import '../../manual-icon/icon-alerts-critical-twotone.js';
+import '../../manual-icon/icon-alerts-diagnostic-twotone.js';
+import '../alert-counter-item/alert-counter-item.js';
+/**
+ * `ObcAlertButtonType` – Enum for alert button visual and behavioral variants.
+ *
+ * - `flat`: Minimal, icon-only button for compact spaces.
+ * - `normal`: Standard button with icon and optional counter.
+ * - `enhanced`: Emphasized button with additional styling for high-priority alerts.
+ */
+export declare enum ObcAlertButtonType {
+    Flat = "flat",
+    Normal = "normal",
+    Enhanced = "enhanced"
+}
+/**
+ * `<obc-alert-button-item>` – The bell button that shows the alert state and count.
+ *
+ * Shows the alert status as a bell in the style of the given alert type, with
+ * an optional counter, or as a global counter: one badge per severity, then
+ * the bell and the total. `obc-alert-button` renders the item next to its
+ * silence button; use the item on its own where no silence button is needed.
+ *
+ * ---
+ *
+ * ### Features
+ * - **Variants (`type`):** `flat` (icon only), `normal` (bordered, icon and
+ *   counter) and `enhanced` (filled in the severity colour).
+ * - **Alert types:** `alarm`, `warning`, `caution` and the `level-*` family;
+ *   `nAlerts` of 0 shows the idle bell.
+ * - **Counter:** `counter` shows `nAlerts` next to the bell, except in `flat`.
+ * - **Global counter:** `globalCounter` shows the per-severity `counts` as
+ *   badges, then the bell and `nAlerts`, always in the normal style.
+ * - **Flashing:** `blinking` flashes the bell at the tempo `flashingSpeed`
+ *   resolves (#1224).
+ * - **Fill height:** `fillHeight` stretches the visible button to the host
+ *   height, as the tall `obc-alert-button` does.
+ *
+ * ---
+ *
+ * ### Usage Guidelines
+ * - Keep `nAlerts` and `counts` consistent; the item shows both as given.
+ * - The generated label reads e.g. "Alerts, 12, 2 Alarm, 4 Warning,
+ *   6 Caution"; an `aria-label` on the host replaces it.
+ * - A native button, so Enter and Space activate it (APG button pattern).
+ * - A parent that joins another button to the item's end sets the
+ *   `data-group-item-not-last` attribute on the host.
+ * - **TODO(designer):** the Figma file draws the flat item's hover, active and
+ *   focused variants at 20 % opacity; the item uses the standard flat states.
+ * - **TODO(designer):** the Figma file defines no flashing for the global
+ *   counter, so it never flashes.
+ *
+ * ---
+ *
+ * ### Example
+ *
+ * ```html
+ * <obc-alert-button-item alertType="alarm" nAlerts="3" counter blinking></obc-alert-button-item>
+ * <obc-alert-button-item
+ *   globalCounter
+ *   nAlerts="12"
+ *   .counts=${{countAlarm: 2, countWarning: 4, countCaution: 6}}
+ * ></obc-alert-button-item>
+ * ```
+ *
+ * @property type - Visual variant: `flat` (icon only), `normal` (default, bordered with the counter) or `enhanced` (filled in the severity colour).
+ * @availableWhen type globalCounter==false
+ * @property alertType - Alert type that selects the icon and colours: `alarm`, `warning`, `caution` or a `level-*` severity.
+ * @availableWhen alertType globalCounter==false
+ * @property nAlerts - Number of active alerts; 0 shows the idle bell and hides the counter.
+ * @property counter - Shows `nAlerts` next to the bell (not in `flat`).
+ * @availableWhen counter globalCounter==false
+ * @property globalCounter - Shows the per-severity counts, the bell and the total instead of a single alert status.
+ * @property counts - Alert count per severity for the global counter badges.
+ * @availableWhen counts globalCounter==true
+ * @property shelvedCount - Number of shelved alerts, shown after the global counter badges.
+ * @availableWhen shelvedCount globalCounter==true
+ * @property blinking - Flashes the bell while there are active alerts of a flashing alert type.
+ * @availableWhen blinking globalCounter==false
+ * @property flashingSpeed - Flash tempo while `blinking` is on: `default` resolves from `alertType`, `fast`, `slow`, `very-slow` force a tempo, `fixed` never flashes.
+ * @availableWhen flashingSpeed blinking==true
+ * @property fillHeight - Stretches the visible button to the host height instead of the 32 px visual target.
+ * @property ariaLabel - Accessible name forwarded to the inner `<button>`, mapped to the `aria-label` attribute; replaces the generated label. `aria-labelledby` is not supported: ID references cannot cross the shadow boundary.
+ * @fires click - Fired when the button is clicked.
+ * @experimental
+ */
+export declare class ObcAlertButtonItem extends LitElement {
+    /**
+     * Visual variant: `flat` (icon only), `normal` (default, bordered with the counter) or `enhanced` (filled in the severity colour).
+     *
+     * Available when `globalCounter==false`.
+     */
+    type: ObcAlertButtonType;
+    /**
+     * Alert type that selects the icon and colours: `alarm`, `warning`, `caution` or a `level-*` severity.
+     *
+     * Available when `globalCounter==false`.
+     */
+    alertType?: AlertType;
+    /** Number of active alerts; 0 shows the idle bell and hides the counter. */
+    nAlerts: number;
+    /**
+     * Shows `nAlerts` next to the bell (not in `flat`).
+     *
+     * Available when `globalCounter==false`.
+     */
+    counter: boolean;
+    /** Shows the per-severity counts, the bell and the total instead of a single alert status. */
+    globalCounter: boolean;
+    /**
+     * Alert count per severity for the global counter badges.
+     *
+     * Available when `globalCounter==true`.
+     */
+    counts: AlertCounts;
+    /**
+     * Number of shelved alerts, shown after the global counter badges.
+     *
+     * Available when `globalCounter==true`.
+     */
+    shelvedCount: number;
+    /**
+     * Flashes the bell while there are active alerts of a flashing alert type.
+     *
+     * Available when `globalCounter==false`.
+     */
+    blinking: boolean;
+    /**
+     * Flash tempo while `blinking` is on: `default` resolves from `alertType`, `fast`, `slow`, `very-slow` force a tempo, `fixed` never flashes.
+     *
+     * Available when `blinking==true`.
+     */
+    flashingSpeed: FlashingSpeed;
+    /** Stretches the visible button to the host height instead of the 32 px visual target. */
+    fillHeight: boolean;
+    /** Accessible name forwarded to the inner `<button>`, mapped to the `aria-label` attribute; replaces the generated label. `aria-labelledby` is not supported: ID references cannot cross the shadow boundary. */
+    ariaLabel: string | null;
+    protected readonly flashing: FlashingController;
+    get resolvedFlashingSpeed(): ResolvedFlashingSpeed;
+    private get accessibleName();
+    private renderTwotoneIcon;
+    /** The blink layer shows the opposite of the steady layer in each flash. */
+    private renderIcon;
+    private renderCount;
+    private renderCounts;
+    render(): import('lit-html').TemplateResult<1>;
+    static styles: import('lit').CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'obc-alert-button-item': ObcAlertButtonItem;
+    }
+}
+//# sourceMappingURL=alert-button-item.d.ts.map

package/dist/components/alert-button-item/alert-button-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-button-item.d.ts","sourceRoot":"","sources":["../../../src/components/alert-button-item/alert-button-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAMzD,OAAO,4BAA4B,CAAC;AACpC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,0CAA0C,CAAC;AAClD,OAAO,4CAA4C,CAAC;AACpD,OAAO,4CAA4C,CAAC;AACpD,OAAO,mDAAmD,CAAC;AAC3D,OAAO,qDAAqD,CAAC;AAC7D,OAAO,6CAA6C,CAAC;AAErD,OAAO,EACL,SAAS,EACT,aAAa,EACb,KAAK,WAAW,EAChB,KAAK,qBAAqB,EAC3B,MAAM,gBAAgB,CAAC;AAUxB,OAAO,EAAC,kBAAkB,EAAC,MAAM,uCAAuC,CAAC;AAEzE;;;;;;GAMG;AACH,oBAAY,kBAAkB;IAC5B,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,QAAQ,aAAa;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsEG;AACH,qBAEa,kBAAmB,SAAQ,UAAU;IACtB,IAAI,EAAE,kBAAkB,CACtB;IACF,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,SAAK;IACX,OAAO,UAAS;IAChB,aAAa,UAAS;IACL,MAAM,EAAE,WAAW,CAAM;IAC3C,YAAY,SAAK;IAChB,QAAQ,UAAS;IAClB,aAAa,EAAE,aAAa,CAC9B;IACG,UAAU,UAAS;IAIrC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEzC,SAAS,CAAC,QAAQ,CAAC,QAAQ,qBAGzB;IAEF,IAAI,qBAAqB,IAAI,qBAAqB,CAcjD;IAED,OAAO,KAAK,cAAc,GAiBzB;IAED,OAAO,CAAC,iBAAiB;IAiCzB,4EAA4E;IAC5E,OAAO,CAAC,UAAU;IAelB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,YAAY;IAWX,MAAM;IAyCf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,kBAAkB,CAAC;KAC7C;CACF"}

package/dist/components/alert-button-item/alert-button-item.js

@@ -0,0 +1,210 @@
+import { unsafeCSS, LitElement, html, nothing } from "lit";
+import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { localized, msg } from "@lit/localize";
+import componentStyle from "./alert-button-item.css.js";
+import { customElement } from "../../decorator.js";
+import "../../icons/icon-alerts.js";
+import "../../icons/icon-alerts-active.js";
+import "../../icons/icon-alerts-alarm-twotone.js";
+import "../../icons/icon-alerts-warning-twotone.js";
+import "../../icons/icon-alerts-caution-twotone.js";
+import "../../manual-icon/icon-alerts-critical-twotone.js";
+import "../../manual-icon/icon-alerts-diagnostic-twotone.js";
+import { ObcAlertCounterItemType } from "../alert-counter-item/alert-counter-item.js";
+import { FlashingSpeed } from "../../types.js";
+import { resolveFlashingSpeed, AlertFlashPhase, alertCountsLabel, alertTypeLabel, getAlertTwotoneComponent, AlertTwotoneComponent, rankAlertCounts } from "../../alert-severity.js";
+import { FlashingController } from "../../palettes/flashing-controller.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+var ObcAlertButtonType = /* @__PURE__ */ ((ObcAlertButtonType2) => {
+  ObcAlertButtonType2["Flat"] = "flat";
+  ObcAlertButtonType2["Normal"] = "normal";
+  ObcAlertButtonType2["Enhanced"] = "enhanced";
+  return ObcAlertButtonType2;
+})(ObcAlertButtonType || {});
+let ObcAlertButtonItem = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.type = "normal";
+    this.nAlerts = 0;
+    this.counter = false;
+    this.globalCounter = false;
+    this.counts = {};
+    this.shelvedCount = 0;
+    this.blinking = false;
+    this.flashingSpeed = FlashingSpeed.Default;
+    this.fillHeight = false;
+    this.ariaLabel = null;
+    this.flashing = new FlashingController(
+      this,
+      () => this.resolvedFlashingSpeed
+    );
+  }
+  get resolvedFlashingSpeed() {
+    if (this.globalCounter || !this.blinking || this.nAlerts <= 0 || this.alertType === void 0) {
+      return FlashingSpeed.Fixed;
+    }
+    return resolveFlashingSpeed(
+      this.flashingSpeed,
+      this.alertType,
+      AlertFlashPhase.Active
+    );
+  }
+  get accessibleName() {
+    if (this.ariaLabel) {
+      return this.ariaLabel;
+    }
+    const parts = [msg("Alerts")];
+    if (this.nAlerts > 0) {
+      parts.push(String(this.nAlerts));
+    }
+    if (this.globalCounter) {
+      const breakdown = alertCountsLabel(this.counts, this.shelvedCount);
+      if (breakdown) {
+        parts.push(breakdown);
+      }
+    } else if (this.nAlerts > 0 && this.alertType) {
+      parts.push(alertTypeLabel(this.alertType));
+    }
+    return parts.join(", ");
+  }
+  renderTwotoneIcon() {
+    const twotone = this.alertType ? getAlertTwotoneComponent(this.alertType) : AlertTwotoneComponent.Caution;
+    switch (twotone) {
+      case AlertTwotoneComponent.Critical:
+        return html`<obi-alerts-critical-twotone
+          useCssColor
+          class="icon"
+        ></obi-alerts-critical-twotone>`;
+      case AlertTwotoneComponent.Diagnostic:
+        return html`<obi-alerts-diagnostic-twotone
+          useCssColor
+          class="icon"
+        ></obi-alerts-diagnostic-twotone>`;
+      case AlertTwotoneComponent.Warning:
+        return html`<obi-alerts-warning-twotone
+          useCssColor
+          class="icon"
+        ></obi-alerts-warning-twotone>`;
+      case AlertTwotoneComponent.Caution:
+        return html`<obi-alerts-caution-twotone
+          useCssColor
+          class="icon"
+        ></obi-alerts-caution-twotone>`;
+      default:
+        return html`<obi-alerts-alarm-twotone
+          useCssColor
+          class="icon"
+        ></obi-alerts-alarm-twotone>`;
+    }
+  }
+  /** The blink layer shows the opposite of the steady layer in each flash. */
+  renderIcon(styleType, blinkLayer) {
+    if (this.nAlerts === 0) {
+      return html`<obi-alerts class="icon"></obi-alerts>`;
+    }
+    const enhanced = styleType === "enhanced";
+    if (blinkLayer) {
+      return enhanced ? this.renderTwotoneIcon() : html`<obi-alerts class="icon"></obi-alerts>`;
+    }
+    return enhanced || this.globalCounter ? html`<obi-alerts-active class="icon"></obi-alerts-active>` : this.renderTwotoneIcon();
+  }
+  renderCount() {
+    return html`<span class="count">${this.nAlerts}</span>`;
+  }
+  renderCounts() {
+    if (rankAlertCounts(this.counts).length === 0 && this.shelvedCount <= 0) {
+      return nothing;
+    }
+    return html`<obc-alert-counter-item
+      .type=${ObcAlertCounterItemType.Badges}
+      .counts=${this.counts}
+      .shelvedCount=${this.shelvedCount}
+    ></obc-alert-counter-item>`;
+  }
+  render() {
+    const styleType = this.globalCounter ? "normal" : this.type;
+    const showCount = this.nAlerts > 0 && (this.globalCounter || this.counter && styleType !== "flat");
+    const tempo = this.resolvedFlashingSpeed;
+    return html`
+      <button
+        class=${classMap({
+      "alert-button": true,
+      [`type-${styleType}`]: true,
+      [`alert-type-${this.alertType ?? "none"}`]: true,
+      counter: showCount && !this.globalCounter,
+      "global-counter": this.globalCounter,
+      "fill-height": this.fillHeight,
+      [`flash-${tempo}`]: true
+    })}
+        aria-label=${this.accessibleName}
+      >
+        ${tempo === FlashingSpeed.Fixed ? nothing : html`<div class="blink" aria-hidden="true">
+              <div class="content">
+                ${this.renderIcon(styleType, true)}
+                ${showCount ? this.renderCount() : nothing}
+              </div>
+            </div>`}
+        <div class="visible-wrapper">
+          ${this.globalCounter ? this.renderCounts() : nothing}
+          <div class="content">
+            ${this.renderIcon(styleType, false)}
+            ${showCount ? this.renderCount() : nothing}
+          </div>
+        </div>
+      </button>
+    `;
+  }
+};
+ObcAlertButtonItem.styles = unsafeCSS(componentStyle);
+__decorateClass([
+  property({ type: String })
+], ObcAlertButtonItem.prototype, "type", 2);
+__decorateClass([
+  property({ type: String })
+], ObcAlertButtonItem.prototype, "alertType", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcAlertButtonItem.prototype, "nAlerts", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcAlertButtonItem.prototype, "counter", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcAlertButtonItem.prototype, "globalCounter", 2);
+__decorateClass([
+  property({ type: Object, attribute: false })
+], ObcAlertButtonItem.prototype, "counts", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcAlertButtonItem.prototype, "shelvedCount", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcAlertButtonItem.prototype, "blinking", 2);
+__decorateClass([
+  property({ type: String })
+], ObcAlertButtonItem.prototype, "flashingSpeed", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcAlertButtonItem.prototype, "fillHeight", 2);
+__decorateClass([
+  property({ type: String, attribute: "aria-label" })
+], ObcAlertButtonItem.prototype, "ariaLabel", 2);
+ObcAlertButtonItem = __decorateClass([
+  customElement("obc-alert-button-item"),
+  localized()
+], ObcAlertButtonItem);
+export {
+  ObcAlertButtonItem,
+  ObcAlertButtonType
+};
+//# sourceMappingURL=alert-button-item.js.map

package/dist/components/alert-button-item/alert-button-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-button-item.js","sources":["../../../src/components/alert-button-item/alert-button-item.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {localized, msg} from '@lit/localize';\nimport componentStyle from './alert-button-item.css?inline';\nimport {customElement} from '../../decorator.js';\nimport '../../icons/icon-alerts.js';\nimport '../../icons/icon-alerts-active.js';\nimport '../../icons/icon-alerts-alarm-twotone.js';\nimport '../../icons/icon-alerts-warning-twotone.js';\nimport '../../icons/icon-alerts-caution-twotone.js';\nimport '../../manual-icon/icon-alerts-critical-twotone.js';\nimport '../../manual-icon/icon-alerts-diagnostic-twotone.js';\nimport '../alert-counter-item/alert-counter-item.js';\nimport {ObcAlertCounterItemType} from '../alert-counter-item/alert-counter-item.js';\nimport {\n  AlertType,\n  FlashingSpeed,\n  type AlertCounts,\n  type ResolvedFlashingSpeed,\n} from '../../types.js';\nimport {\n  AlertFlashPhase,\n  AlertTwotoneComponent,\n  alertCountsLabel,\n  alertTypeLabel,\n  getAlertTwotoneComponent,\n  rankAlertCounts,\n  resolveFlashingSpeed,\n} from '../../alert-severity.js';\nimport {FlashingController} from '../../palettes/flashing-controller.js';\n\n/**\n * `ObcAlertButtonType` – Enum for alert button visual and behavioral variants.\n *\n * - `flat`: Minimal, icon-only button for compact spaces.\n * - `normal`: Standard button with icon and optional counter.\n * - `enhanced`: Emphasized button with additional styling for high-priority alerts.\n */\nexport enum ObcAlertButtonType {\n  Flat = 'flat',\n  Normal = 'normal',\n  Enhanced = 'enhanced',\n}\n\n/**\n * `<obc-alert-button-item>` – The bell button that shows the alert state and count.\n *\n * Shows the alert status as a bell in the style of the given alert type, with\n * an optional counter, or as a global counter: one badge per severity, then\n * the bell and the total. `obc-alert-button` renders the item next to its\n * silence button; use the item on its own where no silence button is needed.\n *\n * ---\n *\n * ### Features\n * - **Variants (`type`):** `flat` (icon only), `normal` (bordered, icon and\n *   counter) and `enhanced` (filled in the severity colour).\n * - **Alert types:** `alarm`, `warning`, `caution` and the `level-*` family;\n *   `nAlerts` of 0 shows the idle bell.\n * - **Counter:** `counter` shows `nAlerts` next to the bell, except in `flat`.\n * - **Global counter:** `globalCounter` shows the per-severity `counts` as\n *   badges, then the bell and `nAlerts`, always in the normal style.\n * - **Flashing:** `blinking` flashes the bell at the tempo `flashingSpeed`\n *   resolves (#1224).\n * - **Fill height:** `fillHeight` stretches the visible button to the host\n *   height, as the tall `obc-alert-button` does.\n *\n * ---\n *\n * ### Usage Guidelines\n * - Keep `nAlerts` and `counts` consistent; the item shows both as given.\n * - The generated label reads e.g. \"Alerts, 12, 2 Alarm, 4 Warning,\n *   6 Caution\"; an `aria-label` on the host replaces it.\n * - A native button, so Enter and Space activate it (APG button pattern).\n * - A parent that joins another button to the item's end sets the\n *   `data-group-item-not-last` attribute on the host.\n * - **TODO(designer):** the Figma file draws the flat item's hover, active and\n *   focused variants at 20 % opacity; the item uses the standard flat states.\n * - **TODO(designer):** the Figma file defines no flashing for the global\n *   counter, so it never flashes.\n *\n * ---\n *\n * ### Example\n *\n * ```html\n * <obc-alert-button-item alertType=\"alarm\" nAlerts=\"3\" counter blinking></obc-alert-button-item>\n * <obc-alert-button-item\n *   globalCounter\n *   nAlerts=\"12\"\n *   .counts=${{countAlarm: 2, countWarning: 4, countCaution: 6}}\n * ></obc-alert-button-item>\n * ```\n *\n * @property type - Visual variant: `flat` (icon only), `normal` (default, bordered with the counter) or `enhanced` (filled in the severity colour).\n * @availableWhen type globalCounter==false\n * @property alertType - Alert type that selects the icon and colours: `alarm`, `warning`, `caution` or a `level-*` severity.\n * @availableWhen alertType globalCounter==false\n * @property nAlerts - Number of active alerts; 0 shows the idle bell and hides the counter.\n * @property counter - Shows `nAlerts` next to the bell (not in `flat`).\n * @availableWhen counter globalCounter==false\n * @property globalCounter - Shows the per-severity counts, the bell and the total instead of a single alert status.\n * @property counts - Alert count per severity for the global counter badges.\n * @availableWhen counts globalCounter==true\n * @property shelvedCount - Number of shelved alerts, shown after the global counter badges.\n * @availableWhen shelvedCount globalCounter==true\n * @property blinking - Flashes the bell while there are active alerts of a flashing alert type.\n * @availableWhen blinking globalCounter==false\n * @property flashingSpeed - Flash tempo while `blinking` is on: `default` resolves from `alertType`, `fast`, `slow`, `very-slow` force a tempo, `fixed` never flashes.\n * @availableWhen flashingSpeed blinking==true\n * @property fillHeight - Stretches the visible button to the host height instead of the 32 px visual target.\n * @property ariaLabel - Accessible name forwarded to the inner `<button>`, mapped to the `aria-label` attribute; replaces the generated label. `aria-labelledby` is not supported: ID references cannot cross the shadow boundary.\n * @fires click - Fired when the button is clicked.\n * @experimental\n */\n@customElement('obc-alert-button-item')\n@localized()\nexport class ObcAlertButtonItem extends LitElement {\n  @property({type: String}) type: ObcAlertButtonType =\n    ObcAlertButtonType.Normal;\n  @property({type: String}) alertType?: AlertType;\n  @property({type: Number}) nAlerts = 0;\n  @property({type: Boolean}) counter = false;\n  @property({type: Boolean}) globalCounter = false;\n  @property({type: Object, attribute: false}) counts: AlertCounts = {};\n  @property({type: Number}) shelvedCount = 0;\n  @property({type: Boolean}) blinking = false;\n  @property({type: String}) flashingSpeed: FlashingSpeed =\n    FlashingSpeed.Default;\n  @property({type: Boolean}) fillHeight = false;\n\n  // Reactive so a consumer changing the name re-renders the shadow button.\n  @property({type: String, attribute: 'aria-label'})\n  override ariaLabel: string | null = null;\n\n  protected readonly flashing = new FlashingController(\n    this,\n    () => this.resolvedFlashingSpeed\n  );\n\n  get resolvedFlashingSpeed(): ResolvedFlashingSpeed {\n    if (\n      this.globalCounter ||\n      !this.blinking ||\n      this.nAlerts <= 0 ||\n      this.alertType === undefined\n    ) {\n      return FlashingSpeed.Fixed;\n    }\n    return resolveFlashingSpeed(\n      this.flashingSpeed,\n      this.alertType,\n      AlertFlashPhase.Active\n    );\n  }\n\n  private get accessibleName(): string {\n    if (this.ariaLabel) {\n      return this.ariaLabel;\n    }\n    const parts = [msg('Alerts')];\n    if (this.nAlerts > 0) {\n      parts.push(String(this.nAlerts));\n    }\n    if (this.globalCounter) {\n      const breakdown = alertCountsLabel(this.counts, this.shelvedCount);\n      if (breakdown) {\n        parts.push(breakdown);\n      }\n    } else if (this.nAlerts > 0 && this.alertType) {\n      parts.push(alertTypeLabel(this.alertType));\n    }\n    return parts.join(', ');\n  }\n\n  private renderTwotoneIcon() {\n    const twotone = this.alertType\n      ? getAlertTwotoneComponent(this.alertType)\n      : AlertTwotoneComponent.Caution;\n    switch (twotone) {\n      case AlertTwotoneComponent.Critical:\n        return html`<obi-alerts-critical-twotone\n          useCssColor\n          class=\"icon\"\n        ></obi-alerts-critical-twotone>`;\n      case AlertTwotoneComponent.Diagnostic:\n        return html`<obi-alerts-diagnostic-twotone\n          useCssColor\n          class=\"icon\"\n        ></obi-alerts-diagnostic-twotone>`;\n      case AlertTwotoneComponent.Warning:\n        return html`<obi-alerts-warning-twotone\n          useCssColor\n          class=\"icon\"\n        ></obi-alerts-warning-twotone>`;\n      case AlertTwotoneComponent.Caution:\n        return html`<obi-alerts-caution-twotone\n          useCssColor\n          class=\"icon\"\n        ></obi-alerts-caution-twotone>`;\n      default:\n        return html`<obi-alerts-alarm-twotone\n          useCssColor\n          class=\"icon\"\n        ></obi-alerts-alarm-twotone>`;\n    }\n  }\n\n  /** The blink layer shows the opposite of the steady layer in each flash. */\n  private renderIcon(styleType: ObcAlertButtonType, blinkLayer: boolean) {\n    if (this.nAlerts === 0) {\n      return html`<obi-alerts class=\"icon\"></obi-alerts>`;\n    }\n    const enhanced = styleType === ObcAlertButtonType.Enhanced;\n    if (blinkLayer) {\n      return enhanced\n        ? this.renderTwotoneIcon()\n        : html`<obi-alerts class=\"icon\"></obi-alerts>`;\n    }\n    return enhanced || this.globalCounter\n      ? html`<obi-alerts-active class=\"icon\"></obi-alerts-active>`\n      : this.renderTwotoneIcon();\n  }\n\n  private renderCount() {\n    return html`<span class=\"count\">${this.nAlerts}</span>`;\n  }\n\n  private renderCounts() {\n    if (rankAlertCounts(this.counts).length === 0 && this.shelvedCount <= 0) {\n      return nothing;\n    }\n    return html`<obc-alert-counter-item\n      .type=${ObcAlertCounterItemType.Badges}\n      .counts=${this.counts}\n      .shelvedCount=${this.shelvedCount}\n    ></obc-alert-counter-item>`;\n  }\n\n  override render() {\n    const styleType = this.globalCounter\n      ? ObcAlertButtonType.Normal\n      : this.type;\n    const showCount =\n      this.nAlerts > 0 &&\n      (this.globalCounter ||\n        (this.counter && styleType !== ObcAlertButtonType.Flat));\n    const tempo = this.resolvedFlashingSpeed;\n    return html`\n      <button\n        class=${classMap({\n          'alert-button': true,\n          [`type-${styleType}`]: true,\n          [`alert-type-${this.alertType ?? 'none'}`]: true,\n          counter: showCount && !this.globalCounter,\n          'global-counter': this.globalCounter,\n          'fill-height': this.fillHeight,\n          [`flash-${tempo}`]: true,\n        })}\n        aria-label=${this.accessibleName}\n      >\n        ${tempo === FlashingSpeed.Fixed\n          ? nothing\n          : html`<div class=\"blink\" aria-hidden=\"true\">\n              <div class=\"content\">\n                ${this.renderIcon(styleType, true)}\n                ${showCount ? this.renderCount() : nothing}\n              </div>\n            </div>`}\n        <div class=\"visible-wrapper\">\n          ${this.globalCounter ? this.renderCounts() : nothing}\n          <div class=\"content\">\n            ${this.renderIcon(styleType, false)}\n            ${showCount ? this.renderCount() : nothing}\n          </div>\n        </div>\n      </button>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-alert-button-item': ObcAlertButtonItem;\n  }\n}\n"],"names":["ObcAlertButtonType"],"mappings":"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"}

package/dist/components/alert-counter-item/alert-counter-item.css.js

@@ -0,0 +1,25 @@
+import { css } from "lit";
+const componentStyle = css`* {
+  -webkit-tap-highlight-color: transparent;
+}
+
+:host {
+  display: inline-block;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: var(--app-components-alert-counter-item-badge-spacing);
+}
+
+obi-alerts-shelf {
+  display: block; /* fills the badge icon box that sizes the badge-icon slot */
+  width: 100%;
+  height: 100%;
+}
+`;
+export {
+  componentStyle as default
+};
+//# sourceMappingURL=alert-counter-item.css.js.map

package/dist/components/alert-counter-item/alert-counter-item.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-counter-item.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/alert-counter-item/alert-counter-item.d.ts

@@ -0,0 +1,77 @@
+import { LitElement, nothing } from 'lit';
+import { AlertCounts } from '../../types.js';
+import '../badge/badge.js';
+import '../../icons/icon-alerts-shelf.js';
+/**
+ * `ObcAlertCounterItemType` – How each count is drawn (Figma `Type`).
+ *
+ * - `badges`: filled badges in the severity colour (Figma Badges counter).
+ * - `alert-level`: flat badges with the severity glyph (Figma Alert level counter).
+ */
+export declare enum ObcAlertCounterItemType {
+    Badges = "badges",
+    AlertLevel = "alert-level"
+}
+/**
+ * `<obc-alert-counter-item>` – A row of alert counts, one badge per severity.
+ *
+ * Renders a large `obc-badge` for every severity with a count above zero, most
+ * severe first, followed by an optional shelved count. Nothing renders when
+ * nothing is counted.
+ *
+ * ---
+ *
+ * ### Features
+ * - **Two types:** `badges` draws filled badges in the severity colour;
+ *   `alert-level` draws flat badges with the severity glyph.
+ * - **Every severity:** `counts` takes the whole `AlertType` vocabulary,
+ *   including the `level-*` family, ordered by `ALERT_SEVERITY_PRIORITY`.
+ * - **Shelved count:** `shelvedCount` adds a neutral badge at the end, with
+ *   the shelf icon in `alert-level`.
+ * - **Accessible summary:** the row is announced as one image labelled with
+ *   the counts, e.g. "2 Alarm, 4 Warning, 6 Caution".
+ *
+ * ---
+ *
+ * ### Usage Guidelines
+ * - Show how many alerts are outstanding per severity in a compact space;
+ *   `obc-alert-button-item` nests the counter for its global counter.
+ * - Pass the counts as one object: `.counts=${{countAlarm: 2, countWarning: 4}}`.
+ * - The counter is display-only: it renders no button and fires no events.
+ * - For a framed per-subsystem summary with a label, see
+ *   `obc-alert-subsystem-counter`.
+ * - **TODO(designer):** the Figma component also has an Unacked counter type;
+ *   how its icons map to counts is not defined yet.
+ *
+ * ---
+ *
+ * ### Example
+ *
+ * ```html
+ * <obc-alert-counter-item
+ *   .counts=${{countAlarm: 2, countWarning: 4, countCaution: 6}}
+ *   shelvedCount="9"
+ * ></obc-alert-counter-item>
+ * ```
+ *
+ * @property type - How each count is drawn: `badges` (filled severity badges, default) or `alert-level` (flat badges with the severity glyph).
+ * @property counts - Alert count per severity (`countAlarm`, `countWarning`, `countCaution` and the `level-*` counts); counts of zero or less are not shown.
+ * @property shelvedCount - Number of shelved alerts, shown as a neutral badge after the severities; hidden at zero.
+ * @experimental
+ */
+export declare class ObcAlertCounterItem extends LitElement {
+    /** How each count is drawn: `badges` (filled severity badges, default) or `alert-level` (flat badges with the severity glyph). */
+    type: ObcAlertCounterItemType;
+    /** Alert count per severity (`countAlarm`, `countWarning`, `countCaution` and the `level-*` counts); counts of zero or less are not shown. */
+    counts: AlertCounts;
+    /** Number of shelved alerts, shown as a neutral badge after the severities; hidden at zero. */
+    shelvedCount: number;
+    render(): import('lit-html').TemplateResult<1> | typeof nothing;
+    static styles: import('lit').CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'obc-alert-counter-item': ObcAlertCounterItem;
+    }
+}
+//# sourceMappingURL=alert-counter-item.d.ts.map

package/dist/components/alert-counter-item/alert-counter-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-counter-item.d.ts","sourceRoot":"","sources":["../../../src/components/alert-counter-item/alert-counter-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAQ,OAAO,EAAY,MAAM,KAAK,CAAC;AAMzD,OAAO,mBAAmB,CAAC;AAE3B,OAAO,kCAAkC,CAAC;AAC1C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAGhD;;;;;GAKG;AACH,oBAAY,uBAAuB;IACjC,MAAM,WAAW;IACjB,UAAU,gBAAgB;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,qBAEa,mBAAoB,SAAQ,UAAU;IACvB,IAAI,EAAE,uBAAuB,CACtB;IACW,MAAM,EAAE,WAAW,CAAM;IAC3C,YAAY,SAAK;IAElC,MAAM;IA0Cf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,mBAAmB,CAAC;KAC/C;CACF"}

package/dist/components/alert-counter-item/alert-counter-item.js

@@ -0,0 +1,87 @@
+import { unsafeCSS, LitElement, nothing, html } from "lit";
+import { property } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+import { localized } from "@lit/localize";
+import componentStyle from "./alert-counter-item.css.js";
+import { customElement } from "../../decorator.js";
+import { BadgeVariant, BadgeSize, BadgeType } from "../badge/badge.js";
+import "../../icons/icon-alerts-shelf.js";
+import { rankAlertCounts, alertCountsLabel } from "../../alert-severity.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+var ObcAlertCounterItemType = /* @__PURE__ */ ((ObcAlertCounterItemType2) => {
+  ObcAlertCounterItemType2["Badges"] = "badges";
+  ObcAlertCounterItemType2["AlertLevel"] = "alert-level";
+  return ObcAlertCounterItemType2;
+})(ObcAlertCounterItemType || {});
+let ObcAlertCounterItem = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.type = "badges";
+    this.counts = {};
+    this.shelvedCount = 0;
+  }
+  render() {
+    const ranked = rankAlertCounts(this.counts);
+    if (ranked.length === 0 && this.shelvedCount <= 0) {
+      return nothing;
+    }
+    const alertLevel = this.type === "alert-level";
+    const variant = alertLevel ? BadgeVariant.flat : BadgeVariant.default;
+    return html`
+      <div
+        class="row"
+        role="img"
+        aria-label=${alertCountsLabel(this.counts, this.shelvedCount)}
+      >
+        ${repeat(
+      ranked,
+      (entry) => entry.type,
+      (entry) => html`<obc-badge
+              size=${BadgeSize.large}
+              type=${entry.type}
+              .variant=${variant}
+              .showIcon=${alertLevel}
+              .number=${entry.count}
+            ></obc-badge>`
+    )}
+        ${this.shelvedCount > 0 ? html`<obc-badge
+              size=${BadgeSize.large}
+              type=${BadgeType.regular}
+              .variant=${variant}
+              .showIcon=${alertLevel}
+              .number=${this.shelvedCount}
+            >
+              ${alertLevel ? html`<obi-alerts-shelf slot="badge-icon"></obi-alerts-shelf>` : nothing}
+            </obc-badge>` : nothing}
+      </div>
+    `;
+  }
+};
+ObcAlertCounterItem.styles = unsafeCSS(componentStyle);
+__decorateClass([
+  property({ type: String })
+], ObcAlertCounterItem.prototype, "type", 2);
+__decorateClass([
+  property({ type: Object, attribute: false })
+], ObcAlertCounterItem.prototype, "counts", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcAlertCounterItem.prototype, "shelvedCount", 2);
+ObcAlertCounterItem = __decorateClass([
+  customElement("obc-alert-counter-item"),
+  localized()
+], ObcAlertCounterItem);
+export {
+  ObcAlertCounterItem,
+  ObcAlertCounterItemType
+};
+//# sourceMappingURL=alert-counter-item.js.map

package/dist/components/alert-counter-item/alert-counter-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-counter-item.js","sources":["../../../src/components/alert-counter-item/alert-counter-item.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {repeat} from 'lit/directives/repeat.js';\nimport {localized} from '@lit/localize';\nimport componentStyle from './alert-counter-item.css?inline';\nimport {customElement} from '../../decorator.js';\nimport '../badge/badge.js';\nimport {BadgeSize, BadgeType, BadgeVariant} from '../badge/badge.js';\nimport '../../icons/icon-alerts-shelf.js';\nimport type {AlertCounts} from '../../types.js';\nimport {alertCountsLabel, rankAlertCounts} from '../../alert-severity.js';\n\n/**\n * `ObcAlertCounterItemType` – How each count is drawn (Figma `Type`).\n *\n * - `badges`: filled badges in the severity colour (Figma Badges counter).\n * - `alert-level`: flat badges with the severity glyph (Figma Alert level counter).\n */\nexport enum ObcAlertCounterItemType {\n  Badges = 'badges',\n  AlertLevel = 'alert-level',\n}\n\n/**\n * `<obc-alert-counter-item>` – A row of alert counts, one badge per severity.\n *\n * Renders a large `obc-badge` for every severity with a count above zero, most\n * severe first, followed by an optional shelved count. Nothing renders when\n * nothing is counted.\n *\n * ---\n *\n * ### Features\n * - **Two types:** `badges` draws filled badges in the severity colour;\n *   `alert-level` draws flat badges with the severity glyph.\n * - **Every severity:** `counts` takes the whole `AlertType` vocabulary,\n *   including the `level-*` family, ordered by `ALERT_SEVERITY_PRIORITY`.\n * - **Shelved count:** `shelvedCount` adds a neutral badge at the end, with\n *   the shelf icon in `alert-level`.\n * - **Accessible summary:** the row is announced as one image labelled with\n *   the counts, e.g. \"2 Alarm, 4 Warning, 6 Caution\".\n *\n * ---\n *\n * ### Usage Guidelines\n * - Show how many alerts are outstanding per severity in a compact space;\n *   `obc-alert-button-item` nests the counter for its global counter.\n * - Pass the counts as one object: `.counts=${{countAlarm: 2, countWarning: 4}}`.\n * - The counter is display-only: it renders no button and fires no events.\n * - For a framed per-subsystem summary with a label, see\n *   `obc-alert-subsystem-counter`.\n * - **TODO(designer):** the Figma component also has an Unacked counter type;\n *   how its icons map to counts is not defined yet.\n *\n * ---\n *\n * ### Example\n *\n * ```html\n * <obc-alert-counter-item\n *   .counts=${{countAlarm: 2, countWarning: 4, countCaution: 6}}\n *   shelvedCount=\"9\"\n * ></obc-alert-counter-item>\n * ```\n *\n * @property type - How each count is drawn: `badges` (filled severity badges, default) or `alert-level` (flat badges with the severity glyph).\n * @property counts - Alert count per severity (`countAlarm`, `countWarning`, `countCaution` and the `level-*` counts); counts of zero or less are not shown.\n * @property shelvedCount - Number of shelved alerts, shown as a neutral badge after the severities; hidden at zero.\n * @experimental\n */\n@customElement('obc-alert-counter-item')\n@localized()\nexport class ObcAlertCounterItem extends LitElement {\n  @property({type: String}) type: ObcAlertCounterItemType =\n    ObcAlertCounterItemType.Badges;\n  @property({type: Object, attribute: false}) counts: AlertCounts = {};\n  @property({type: Number}) shelvedCount = 0;\n\n  override render() {\n    const ranked = rankAlertCounts(this.counts);\n    if (ranked.length === 0 && this.shelvedCount <= 0) {\n      return nothing;\n    }\n    const alertLevel = this.type === ObcAlertCounterItemType.AlertLevel;\n    const variant = alertLevel ? BadgeVariant.flat : BadgeVariant.default;\n    return html`\n      <div\n        class=\"row\"\n        role=\"img\"\n        aria-label=${alertCountsLabel(this.counts, this.shelvedCount)}\n      >\n        ${repeat(\n          ranked,\n          (entry) => entry.type,\n          (entry) =>\n            html`<obc-badge\n              size=${BadgeSize.large}\n              type=${entry.type}\n              .variant=${variant}\n              .showIcon=${alertLevel}\n              .number=${entry.count}\n            ></obc-badge>`\n        )}\n        ${this.shelvedCount > 0\n          ? html`<obc-badge\n              size=${BadgeSize.large}\n              type=${BadgeType.regular}\n              .variant=${variant}\n              .showIcon=${alertLevel}\n              .number=${this.shelvedCount}\n            >\n              ${alertLevel\n                ? html`<obi-alerts-shelf slot=\"badge-icon\"></obi-alerts-shelf>`\n                : nothing}\n            </obc-badge>`\n          : nothing}\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-alert-counter-item': ObcAlertCounterItem;\n  }\n}\n"],"names":["ObcAlertCounterItemType"],"mappings":";;;;;;;;;;;;;;;;;;;AAkBO,IAAK,4CAAAA,6BAAL;AACLA,2BAAA,QAAA,IAAS;AACTA,2BAAA,YAAA,IAAa;AAFH,SAAAA;AAAA,GAAA,2BAAA,CAAA,CAAA;AAsDL,IAAM,sBAAN,cAAkC,WAAW;AAAA,EAA7C,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,OACxB;AAC0C,SAAA,SAAsB,CAAA;AACxC,SAAA,eAAe;AAAA,EAAA;AAAA,EAEhC,SAAS;AAChB,UAAM,SAAS,gBAAgB,KAAK,MAAM;AAC1C,QAAI,OAAO,WAAW,KAAK,KAAK,gBAAgB,GAAG;AACjD,aAAO;AAAA,IACT;AACA,UAAM,aAAa,KAAK,SAAS;AACjC,UAAM,UAAU,aAAa,aAAa,OAAO,aAAa;AAC9D,WAAO;AAAA;AAAA;AAAA;AAAA,qBAIU,iBAAiB,KAAK,QAAQ,KAAK,YAAY,CAAC;AAAA;AAAA,UAE3D;AAAA,MACA;AAAA,MACA,CAAC,UAAU,MAAM;AAAA,MACjB,CAAC,UACC;AAAA,qBACS,UAAU,KAAK;AAAA,qBACf,MAAM,IAAI;AAAA,yBACN,OAAO;AAAA,0BACN,UAAU;AAAA,wBACZ,MAAM,KAAK;AAAA;AAAA,IAAA,CAE1B;AAAA,UACC,KAAK,eAAe,IAClB;AAAA,qBACS,UAAU,KAAK;AAAA,qBACf,UAAU,OAAO;AAAA,yBACb,OAAO;AAAA,0BACN,UAAU;AAAA,wBACZ,KAAK,YAAY;AAAA;AAAA,gBAEzB,aACE,gEACA,OAAO;AAAA,4BAEb,OAAO;AAAA;AAAA;AAAA,EAGjB;AAGF;AAjDa,oBAgDK,SAAS,UAAU,cAAc;AA/CvB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GADb,oBACe,WAAA,QAAA,CAAA;AAEkB,gBAAA;AAAA,EAA3C,SAAS,EAAC,MAAM,QAAQ,WAAW,OAAM;AAAA,GAH/B,oBAGiC,WAAA,UAAA,CAAA;AAClB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAJb,oBAIe,WAAA,gBAAA,CAAA;AAJf,sBAAN,gBAAA;AAAA,EAFN,cAAc,wBAAwB;AAAA,EACtC,UAAA;AAAU,GACE,mBAAA;"}