@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.49 → 2.0.0-next.52

package/dist/integration-systems/integration-bar/integration-bar.d.ts

@@ -0,0 +1,91 @@
+import { LitElement } from 'lit';
+import '../integration-tabs/integration-tabs.js';
+import '../integration-button/integration-button.js';
+import '../../components/clock/clock.js';
+import '../../components/icon-button/icon-button.js';
+import '../../icons/icon-palette-day-night-iec.js';
+import '../../icons/icon-user.js';
+import '../../icons/icon-configure.js';
+import '../../icons/icon-notification.js';
+import '../../icons/icon-home.js';
+import '../../icons/icon-ship.js';
+import '../../icons/icon-screen-desk.js';
+import '../../icons/icon-alerts.js';
+import '../../icons/icon-link.js';
+/**
+ * `<obc-integration-bar>` – A compact top-level integration header for vessel and system navigation controls.
+ *
+ * Provides a configurable integration bar with home/navigation controls, optional fleet and vessel selection,
+ * and optional utility actions such as alerts, notifications, screen, system, dimming, user, and clock.
+ *
+ * @slot clock - Custom clock content, rendered when `showClock` is true
+ * @slot integration-buttons - Regular vessel integration buttons
+ * @slot hug-buttons - Compact vessel integration buttons; slotted integration buttons are forced to hug type
+ * @slot vessel-integration-menu - Modal that will appear achored below the fleet/vessel button. Typically an obc-integration-vessel-menu
+ * @property {IntegrationBarType} type - Integration bar mode for fleet/vessel presentation
+ * @property {boolean} hideHomeButton - Hides the home button when true
+ * @property {boolean} showClock - Toggles rendering of the clock slot
+ * @property {boolean} showLinkButton - Toggles visibility of link button
+ * @property {boolean} linkButtonActivated - Activated state of link button
+ * @property {boolean} showUserButton - Toggles visibility of user button
+ * @property {boolean} userButtonActivated - Activated state of user button
+ * @property {boolean} showDimmingButton - Toggles visibility of dimming button
+ * @property {boolean} dimmingButtonActivated - Activated state of dimming button
+ * @property {boolean} showSystemButton - Toggles visibility of system button
+ * @property {boolean} systemButtonActivated - Activated state of system button
+ * @property {boolean} showScreenButton - Toggles visibility of screen button
+ * @property {boolean} screenButtonActivated - Activated state of screen button
+ * @property {boolean} showNotificationButton - Toggles visibility of notification button
+ * @property {boolean} notificationButtonActivated - Activated state of notification button
+ * @property {boolean} showAlertButton - Toggles visibility of alert button
+ * @property {boolean} alertButtonActivated - Activated state of alert button
+ * @property {boolean} showFleetButton - Toggles visibility of fleet button
+ * @property {boolean} fleetButtonSelected - Selected state of fleet button
+ * @property {boolean} fleetButtonActivated - Active state of fleet button while selection is pending
+ * @property {string} fleetButtonLabel - Label for the fleet button
+ * @property {string} selectedVesselValue - Selected vessel value
+ * @property {string} activeVesselValue - Active vessel value while selection is pending
+ * @property {{value: string; label: string}[]} vesselSelectorOptions - Available vessel options
+ * @fires fleet-button-click - Fired when the fleet button is clicked
+ * @fires link-button-clicked - Fired when the link button is clicked
+ * @fires alert-button-clicked - Fired when the alert button is clicked
+ * @fires notification-button-clicked - Fired when the notification button is clicked
+ * @fires screen-button-clicked - Fired when the screen button is clicked
+ * @fires system-button-clicked - Fired when the system button is clicked
+ * @fires dimming-button-clicked - Fired when the dimming button is clicked
+ * @fires user-button-clicked - Fired when the user button is clicked
+ */
+export declare class ObcIntegrationBar extends LitElement {
+    hideHomeButton: boolean;
+    showClock: boolean;
+    showLinkButton: boolean;
+    linkButtonActivated: boolean;
+    showUserButton: boolean;
+    userButtonActivated: boolean;
+    showDimmingButton: boolean;
+    dimmingButtonActivated: boolean;
+    showSystemButton: boolean;
+    systemButtonActivated: boolean;
+    showScreenButton: boolean;
+    screenButtonActivated: boolean;
+    showNotificationButton: boolean;
+    notificationButtonActivated: boolean;
+    showAlertButton: boolean;
+    alertButtonActivated: boolean;
+    showFleetButton: boolean;
+    fleetButtonSelected: boolean;
+    fleetButtonActivated: boolean;
+    fleetButtonLabel: string;
+    private buttonsOnBar;
+    private onFleetButtonClick;
+    private onHugButtonsSlotChange;
+    private onButtonsSlotChange;
+    render(): import('lit-html').TemplateResult<1>;
+    static styles: import('lit').CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'obc-integration-bar': ObcIntegrationBar;
+    }
+}
+//# sourceMappingURL=integration-bar.d.ts.map

package/dist/integration-systems/integration-bar/integration-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"integration-bar.d.ts","sourceRoot":"","sources":["../../../src/integration-systems/integration-bar/integration-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAGzD,OAAO,yCAAyC,CAAC;AACjD,OAAO,6CAA6C,CAAC;AAKrD,OAAO,iCAAiC,CAAC;AACzC,OAAO,6CAA6C,CAAC;AACrD,OAAO,2CAA2C,CAAC;AACnD,OAAO,0BAA0B,CAAC;AAClC,OAAO,+BAA+B,CAAC;AACvC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAClC,OAAO,iCAAiC,CAAC;AACzC,OAAO,4BAA4B,CAAC;AACpC,OAAO,0BAA0B,CAAC;AAIlC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IACpB,cAAc,UAAS;IACvB,SAAS,UAAS;IAClB,cAAc,UAAS;IACvB,mBAAmB,UAAS;IAC5B,cAAc,UAAS;IACvB,mBAAmB,UAAS;IAC5B,iBAAiB,UAAS;IAC1B,sBAAsB,UAAS;IAC/B,gBAAgB,UAAS;IACzB,qBAAqB,UAAS;IAC9B,gBAAgB,UAAS;IACzB,qBAAqB,UAAS;IAC9B,sBAAsB,UAAS;IAC/B,2BAA2B,UAAS;IACpC,eAAe,UAAS;IACxB,oBAAoB,UAAS;IAC7B,eAAe,UAAS;IACxB,mBAAmB,UAAS;IAC5B,oBAAoB,UAAS;IAC9B,gBAAgB,SAAW;IAE5C,OAAO,CAAC,YAAY,CAAS;IAEtC,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,sBAAsB;IAe9B,OAAO,CAAC,mBAAmB;IAIlB,MAAM;IAmLf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}

package/dist/integration-systems/integration-bar/integration-bar.js

@@ -0,0 +1,279 @@
+import { unsafeCSS, LitElement, nothing, html } from "lit";
+import { customElement } from "../../decorator.js";
+import compentStyle from "./integration-bar.css.js";
+import "../integration-tabs/integration-tabs.js";
+import { IntegrationButtonType, IntegrationButtonVariant } from "../integration-button/integration-button.js";
+import "../../components/clock/clock.js";
+import "../../components/icon-button/icon-button.js";
+import "../../icons/icon-palette-day-night-iec.js";
+import "../../icons/icon-user.js";
+import "../../icons/icon-configure.js";
+import "../../icons/icon-notification.js";
+import "../../icons/icon-home.js";
+import "../../icons/icon-ship.js";
+import "../../icons/icon-screen-desk.js";
+import "../../icons/icon-alerts.js";
+import "../../icons/icon-link.js";
+import { property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.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;
+};
+let ObcIntegrationBar = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.hideHomeButton = false;
+    this.showClock = false;
+    this.showLinkButton = false;
+    this.linkButtonActivated = false;
+    this.showUserButton = false;
+    this.userButtonActivated = false;
+    this.showDimmingButton = false;
+    this.dimmingButtonActivated = false;
+    this.showSystemButton = false;
+    this.systemButtonActivated = false;
+    this.showScreenButton = false;
+    this.screenButtonActivated = false;
+    this.showNotificationButton = false;
+    this.notificationButtonActivated = false;
+    this.showAlertButton = false;
+    this.alertButtonActivated = false;
+    this.showFleetButton = false;
+    this.fleetButtonSelected = false;
+    this.fleetButtonActivated = false;
+    this.fleetButtonLabel = "Fleet";
+    this.buttonsOnBar = false;
+  }
+  onFleetButtonClick() {
+    this.dispatchEvent(new CustomEvent("fleet-button-click"));
+  }
+  onHugButtonsSlotChange(event) {
+    const slot = event.currentTarget;
+    const assignedElements = slot.assignedElements({ flatten: true });
+    assignedElements.forEach((element) => {
+      if (element.tagName === "OBC-INTEGRATION-BUTTON") {
+        const integrationButton = element;
+        integrationButton.type = IntegrationButtonType.hug;
+      }
+    });
+    this.buttonsOnBar = true;
+  }
+  onButtonsSlotChange() {
+    this.buttonsOnBar = true;
+  }
+  render() {
+    const isFleetButtonAnchored = this.fleetButtonActivated;
+    return html`
+      <nav class="wrapper">
+        <div class="content-container">
+          ${!this.hideHomeButton ? html`<obc-icon-button class="home-button" variant="integration">
+                <obi-home></obi-home>
+              </obc-icon-button>` : null}
+          ${this.showLinkButton ? html`<obc-icon-button
+                class=${classMap({
+      "link-button": true,
+      activated: this.linkButtonActivated
+    })}
+                part="link-button"
+                variant="integration"
+                @click=${() => this.dispatchEvent(new CustomEvent("link-button-clicked"))}
+                ?activated=${this.linkButtonActivated}
+              >
+                <obi-link></obi-link>
+              </obc-icon-button>` : null}
+          <div class=${classMap({ "fleet-vessel-container": true })}>
+            ${this.showFleetButton ? html`<obc-integration-button
+                  class="fleet-button"
+                  .variant=${IntegrationButtonVariant.normal}
+                  ?selected=${this.fleetButtonSelected}
+                  ?activated=${this.fleetButtonActivated}
+                  style=${isFleetButtonAnchored ? "anchor-name: --integration-menu-anchor;" : ""}
+                  @click=${() => this.onFleetButtonClick()}
+                >
+                  <span slot="label">${this.fleetButtonLabel}</span>
+                </obc-integration-button>` : nothing}
+            <div class="vessel-container">
+              ${this.buttonsOnBar ? nothing : html`<div class="vessel-button-placeholder"></div>`}
+              <slot
+                class="hug-buttons-slot"
+                name="hug-buttons"
+                @slotchange=${this.onHugButtonsSlotChange}
+              ></slot>
+              <slot
+                class="integration-buttons-slot"
+                name="integration-buttons"
+                @slotchange=${this.onButtonsSlotChange}
+              ></slot>
+            </div>
+          </div>
+        </div>
+        <div
+          class=${classMap({
+      "buttons-on-bar": this.buttonsOnBar,
+      "right-content-container": true
+    })}
+        >
+          ${this.showAlertButton ? html`<obc-icon-button
+                class=${classMap({
+      "alert-button": true,
+      activated: this.alertButtonActivated
+    })}
+                part="alert-button"
+                variant="integration"
+                style=${this.alertButtonActivated ? "anchor-name: --settings-menu-anchor;" : ""}
+                @click=${() => this.dispatchEvent(new CustomEvent("alert-button-clicked"))}
+                ?activated=${this.alertButtonActivated}
+              >
+                <obi-alerts></obi-alerts>
+              </obc-icon-button>` : null}
+          ${this.showNotificationButton ? html`<obc-icon-button
+                class=${classMap({
+      "notification-button": true,
+      activated: this.notificationButtonActivated
+    })}
+                part="notification-button"
+                variant="integration"
+                style=${this.notificationButtonActivated ? "anchor-name: --settings-menu-anchor;" : ""}
+                @click=${() => this.dispatchEvent(
+      new CustomEvent("notification-button-clicked")
+    )}
+                ?activated=${this.notificationButtonActivated}
+              >
+                <obi-notification></obi-notification>
+              </obc-icon-button>` : null}
+          ${this.showScreenButton ? html`<obc-icon-button
+                class=${classMap({
+      "screen-button": true,
+      activated: this.screenButtonActivated
+    })}
+                part="screen-button"
+                variant="integration"
+                style=${this.screenButtonActivated ? "anchor-name: --settings-menu-anchor;" : ""}
+                @click=${() => this.dispatchEvent(new CustomEvent("screen-button-clicked"))}
+                ?activated=${this.screenButtonActivated}
+              >
+                <obi-screen-desk></obi-screen-desk>
+              </obc-icon-button>` : null}
+          ${this.showSystemButton ? html`<obc-icon-button
+                class=${classMap({
+      "system-button": true,
+      activated: this.systemButtonActivated
+    })}
+                part="system-button"
+                variant="integration"
+                style=${this.systemButtonActivated ? "anchor-name: --settings-menu-anchor;" : ""}
+                @click=${() => this.dispatchEvent(new CustomEvent("system-button-clicked"))}
+                ?activated=${this.systemButtonActivated}
+              >
+                <obi-configure></obi-configure>
+              </obc-icon-button>` : null}
+          ${this.showDimmingButton ? html`<obc-icon-button
+                class=${classMap({
+      "dimming-button": true,
+      activated: this.dimmingButtonActivated
+    })}
+                part="dimming-button"
+                variant="integration"
+                style=${this.dimmingButtonActivated ? "anchor-name: --settings-menu-anchor;" : ""}
+                @click=${() => this.dispatchEvent(new CustomEvent("dimming-button-clicked"))}
+                ?activated=${this.dimmingButtonActivated}
+              >
+                <obi-palette-day-night-iec></obi-palette-day-night-iec>
+              </obc-icon-button>` : null}
+          ${this.showUserButton ? html`<obc-icon-button
+                class=${classMap({
+      "user-button": true,
+      activated: this.userButtonActivated
+    })}
+                part="user-button"
+                variant="integration"
+                style=${this.userButtonActivated ? "anchor-name: --settings-menu-anchor;" : ""}
+                @click=${() => this.dispatchEvent(new CustomEvent("user-button-clicked"))}
+                ?activated=${this.userButtonActivated}
+              >
+                <obi-user></obi-user>
+              </obc-icon-button>` : null}
+          ${this.showClock ? html`<slot name="clock"></slot>` : null}
+        </div>
+      </nav>
+    `;
+  }
+};
+ObcIntegrationBar.styles = unsafeCSS(compentStyle);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationBar.prototype, "hideHomeButton", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationBar.prototype, "showClock", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationBar.prototype, "showLinkButton", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationBar.prototype, "linkButtonActivated", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationBar.prototype, "showUserButton", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationBar.prototype, "userButtonActivated", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationBar.prototype, "showDimmingButton", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationBar.prototype, "dimmingButtonActivated", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationBar.prototype, "showSystemButton", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationBar.prototype, "systemButtonActivated", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationBar.prototype, "showScreenButton", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationBar.prototype, "screenButtonActivated", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationBar.prototype, "showNotificationButton", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationBar.prototype, "notificationButtonActivated", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationBar.prototype, "showAlertButton", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationBar.prototype, "alertButtonActivated", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationBar.prototype, "showFleetButton", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationBar.prototype, "fleetButtonSelected", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationBar.prototype, "fleetButtonActivated", 2);
+__decorateClass([
+  property({ type: String })
+], ObcIntegrationBar.prototype, "fleetButtonLabel", 2);
+__decorateClass([
+  state()
+], ObcIntegrationBar.prototype, "buttonsOnBar", 2);
+ObcIntegrationBar = __decorateClass([
+  customElement("obc-integration-bar")
+], ObcIntegrationBar);
+export {
+  ObcIntegrationBar
+};
+//# sourceMappingURL=integration-bar.js.map

package/dist/integration-systems/integration-bar/integration-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"integration-bar.js","sources":["../../../src/integration-systems/integration-bar/integration-bar.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS, nothing} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport compentStyle from './integration-bar.css?inline';\nimport '../integration-tabs/integration-tabs.js';\nimport '../integration-button/integration-button.js';\nimport {\n  IntegrationButtonType,\n  IntegrationButtonVariant,\n} from '../integration-button/integration-button.js';\nimport '../../components/clock/clock.js';\nimport '../../components/icon-button/icon-button.js';\nimport '../../icons/icon-palette-day-night-iec.js';\nimport '../../icons/icon-user.js';\nimport '../../icons/icon-configure.js';\nimport '../../icons/icon-notification.js';\nimport '../../icons/icon-home.js';\nimport '../../icons/icon-ship.js';\nimport '../../icons/icon-screen-desk.js';\nimport '../../icons/icon-alerts.js';\nimport '../../icons/icon-link.js';\nimport {property, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\n/**\n * `<obc-integration-bar>` – A compact top-level integration header for vessel and system navigation controls.\n *\n * Provides a configurable integration bar with home/navigation controls, optional fleet and vessel selection,\n * and optional utility actions such as alerts, notifications, screen, system, dimming, user, and clock.\n *\n * @slot clock - Custom clock content, rendered when `showClock` is true\n * @slot integration-buttons - Regular vessel integration buttons\n * @slot hug-buttons - Compact vessel integration buttons; slotted integration buttons are forced to hug type\n * @slot vessel-integration-menu - Modal that will appear achored below the fleet/vessel button. Typically an obc-integration-vessel-menu\n * @property {IntegrationBarType} type - Integration bar mode for fleet/vessel presentation\n * @property {boolean} hideHomeButton - Hides the home button when true\n * @property {boolean} showClock - Toggles rendering of the clock slot\n * @property {boolean} showLinkButton - Toggles visibility of link button\n * @property {boolean} linkButtonActivated - Activated state of link button\n * @property {boolean} showUserButton - Toggles visibility of user button\n * @property {boolean} userButtonActivated - Activated state of user button\n * @property {boolean} showDimmingButton - Toggles visibility of dimming button\n * @property {boolean} dimmingButtonActivated - Activated state of dimming button\n * @property {boolean} showSystemButton - Toggles visibility of system button\n * @property {boolean} systemButtonActivated - Activated state of system button\n * @property {boolean} showScreenButton - Toggles visibility of screen button\n * @property {boolean} screenButtonActivated - Activated state of screen button\n * @property {boolean} showNotificationButton - Toggles visibility of notification button\n * @property {boolean} notificationButtonActivated - Activated state of notification button\n * @property {boolean} showAlertButton - Toggles visibility of alert button\n * @property {boolean} alertButtonActivated - Activated state of alert button\n * @property {boolean} showFleetButton - Toggles visibility of fleet button\n * @property {boolean} fleetButtonSelected - Selected state of fleet button\n * @property {boolean} fleetButtonActivated - Active state of fleet button while selection is pending\n * @property {string} fleetButtonLabel - Label for the fleet button\n * @property {string} selectedVesselValue - Selected vessel value\n * @property {string} activeVesselValue - Active vessel value while selection is pending\n * @property {{value: string; label: string}[]} vesselSelectorOptions - Available vessel options\n * @fires fleet-button-click - Fired when the fleet button is clicked\n * @fires link-button-clicked - Fired when the link button is clicked\n * @fires alert-button-clicked - Fired when the alert button is clicked\n * @fires notification-button-clicked - Fired when the notification button is clicked\n * @fires screen-button-clicked - Fired when the screen button is clicked\n * @fires system-button-clicked - Fired when the system button is clicked\n * @fires dimming-button-clicked - Fired when the dimming button is clicked\n * @fires user-button-clicked - Fired when the user button is clicked\n */\n@customElement('obc-integration-bar')\nexport class ObcIntegrationBar extends LitElement {\n  @property({type: Boolean}) hideHomeButton = false;\n  @property({type: Boolean}) showClock = false;\n  @property({type: Boolean}) showLinkButton = false;\n  @property({type: Boolean}) linkButtonActivated = false;\n  @property({type: Boolean}) showUserButton = false;\n  @property({type: Boolean}) userButtonActivated = false;\n  @property({type: Boolean}) showDimmingButton = false;\n  @property({type: Boolean}) dimmingButtonActivated = false;\n  @property({type: Boolean}) showSystemButton = false;\n  @property({type: Boolean}) systemButtonActivated = false;\n  @property({type: Boolean}) showScreenButton = false;\n  @property({type: Boolean}) screenButtonActivated = false;\n  @property({type: Boolean}) showNotificationButton = false;\n  @property({type: Boolean}) notificationButtonActivated = false;\n  @property({type: Boolean}) showAlertButton = false;\n  @property({type: Boolean}) alertButtonActivated = false;\n  @property({type: Boolean}) showFleetButton = false;\n  @property({type: Boolean}) fleetButtonSelected = false;\n  @property({type: Boolean}) fleetButtonActivated = false;\n  @property({type: String}) fleetButtonLabel = 'Fleet';\n\n  @state() private buttonsOnBar = false;\n\n  private onFleetButtonClick() {\n    this.dispatchEvent(new CustomEvent('fleet-button-click'));\n  }\n\n  private onHugButtonsSlotChange(event: Event) {\n    const slot = event.currentTarget as HTMLSlotElement;\n    const assignedElements = slot.assignedElements({flatten: true});\n\n    assignedElements.forEach((element) => {\n      if (element.tagName === 'OBC-INTEGRATION-BUTTON') {\n        const integrationButton = element as unknown as HTMLElement & {\n          type: IntegrationButtonType;\n        };\n        integrationButton.type = IntegrationButtonType.hug;\n      }\n    });\n    this.buttonsOnBar = true;\n  }\n\n  private onButtonsSlotChange() {\n    this.buttonsOnBar = true;\n  }\n\n  override render() {\n    const isFleetButtonAnchored = this.fleetButtonActivated;\n    return html`\n      <nav class=\"wrapper\">\n        <div class=\"content-container\">\n          ${!this.hideHomeButton\n            ? html`<obc-icon-button class=\"home-button\" variant=\"integration\">\n                <obi-home></obi-home>\n              </obc-icon-button>`\n            : null}\n          ${this.showLinkButton\n            ? html`<obc-icon-button\n                class=${classMap({\n                  'link-button': true,\n                  activated: this.linkButtonActivated,\n                })}\n                part=\"link-button\"\n                variant=\"integration\"\n                @click=${() =>\n                  this.dispatchEvent(new CustomEvent('link-button-clicked'))}\n                ?activated=${this.linkButtonActivated}\n              >\n                <obi-link></obi-link>\n              </obc-icon-button>`\n            : null}\n          <div class=${classMap({'fleet-vessel-container': true})}>\n            ${this.showFleetButton\n              ? html`<obc-integration-button\n                  class=\"fleet-button\"\n                  .variant=${IntegrationButtonVariant.normal}\n                  ?selected=${this.fleetButtonSelected}\n                  ?activated=${this.fleetButtonActivated}\n                  style=${isFleetButtonAnchored\n                    ? 'anchor-name: --integration-menu-anchor;'\n                    : ''}\n                  @click=${() => this.onFleetButtonClick()}\n                >\n                  <span slot=\"label\">${this.fleetButtonLabel}</span>\n                </obc-integration-button>`\n              : nothing}\n            <div class=\"vessel-container\">\n              ${this.buttonsOnBar\n                ? nothing\n                : html`<div class=\"vessel-button-placeholder\"></div>`}\n              <slot\n                class=\"hug-buttons-slot\"\n                name=\"hug-buttons\"\n                @slotchange=${this.onHugButtonsSlotChange}\n              ></slot>\n              <slot\n                class=\"integration-buttons-slot\"\n                name=\"integration-buttons\"\n                @slotchange=${this.onButtonsSlotChange}\n              ></slot>\n            </div>\n          </div>\n        </div>\n        <div\n          class=${classMap({\n            'buttons-on-bar': this.buttonsOnBar,\n            'right-content-container': true,\n          })}\n        >\n          ${this.showAlertButton\n            ? html`<obc-icon-button\n                class=${classMap({\n                  'alert-button': true,\n                  activated: this.alertButtonActivated,\n                })}\n                part=\"alert-button\"\n                variant=\"integration\"\n                style=${this.alertButtonActivated\n                  ? 'anchor-name: --settings-menu-anchor;'\n                  : ''}\n                @click=${() =>\n                  this.dispatchEvent(new CustomEvent('alert-button-clicked'))}\n                ?activated=${this.alertButtonActivated}\n              >\n                <obi-alerts></obi-alerts>\n              </obc-icon-button>`\n            : null}\n          ${this.showNotificationButton\n            ? html`<obc-icon-button\n                class=${classMap({\n                  'notification-button': true,\n                  activated: this.notificationButtonActivated,\n                })}\n                part=\"notification-button\"\n                variant=\"integration\"\n                style=${this.notificationButtonActivated\n                  ? 'anchor-name: --settings-menu-anchor;'\n                  : ''}\n                @click=${() =>\n                  this.dispatchEvent(\n                    new CustomEvent('notification-button-clicked')\n                  )}\n                ?activated=${this.notificationButtonActivated}\n              >\n                <obi-notification></obi-notification>\n              </obc-icon-button>`\n            : null}\n          ${this.showScreenButton\n            ? html`<obc-icon-button\n                class=${classMap({\n                  'screen-button': true,\n                  activated: this.screenButtonActivated,\n                })}\n                part=\"screen-button\"\n                variant=\"integration\"\n                style=${this.screenButtonActivated\n                  ? 'anchor-name: --settings-menu-anchor;'\n                  : ''}\n                @click=${() =>\n                  this.dispatchEvent(new CustomEvent('screen-button-clicked'))}\n                ?activated=${this.screenButtonActivated}\n              >\n                <obi-screen-desk></obi-screen-desk>\n              </obc-icon-button>`\n            : null}\n          ${this.showSystemButton\n            ? html`<obc-icon-button\n                class=${classMap({\n                  'system-button': true,\n                  activated: this.systemButtonActivated,\n                })}\n                part=\"system-button\"\n                variant=\"integration\"\n                style=${this.systemButtonActivated\n                  ? 'anchor-name: --settings-menu-anchor;'\n                  : ''}\n                @click=${() =>\n                  this.dispatchEvent(new CustomEvent('system-button-clicked'))}\n                ?activated=${this.systemButtonActivated}\n              >\n                <obi-configure></obi-configure>\n              </obc-icon-button>`\n            : null}\n          ${this.showDimmingButton\n            ? html`<obc-icon-button\n                class=${classMap({\n                  'dimming-button': true,\n                  activated: this.dimmingButtonActivated,\n                })}\n                part=\"dimming-button\"\n                variant=\"integration\"\n                style=${this.dimmingButtonActivated\n                  ? 'anchor-name: --settings-menu-anchor;'\n                  : ''}\n                @click=${() =>\n                  this.dispatchEvent(new CustomEvent('dimming-button-clicked'))}\n                ?activated=${this.dimmingButtonActivated}\n              >\n                <obi-palette-day-night-iec></obi-palette-day-night-iec>\n              </obc-icon-button>`\n            : null}\n          ${this.showUserButton\n            ? html`<obc-icon-button\n                class=${classMap({\n                  'user-button': true,\n                  activated: this.userButtonActivated,\n                })}\n                part=\"user-button\"\n                variant=\"integration\"\n                style=${this.userButtonActivated\n                  ? 'anchor-name: --settings-menu-anchor;'\n                  : ''}\n                @click=${() =>\n                  this.dispatchEvent(new CustomEvent('user-button-clicked'))}\n                ?activated=${this.userButtonActivated}\n              >\n                <obi-user></obi-user>\n              </obc-icon-button>`\n            : null}\n          ${this.showClock ? html`<slot name=\"clock\"></slot>` : null}\n        </div>\n      </nav>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-integration-bar': ObcIntegrationBar;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmEO,IAAM,oBAAN,cAAgC,WAAW;AAAA,EAA3C,cAAA;AAAA,UAAA,GAAA,SAAA;AACsB,SAAA,iBAAiB;AACjB,SAAA,YAAY;AACZ,SAAA,iBAAiB;AACjB,SAAA,sBAAsB;AACtB,SAAA,iBAAiB;AACjB,SAAA,sBAAsB;AACtB,SAAA,oBAAoB;AACpB,SAAA,yBAAyB;AACzB,SAAA,mBAAmB;AACnB,SAAA,wBAAwB;AACxB,SAAA,mBAAmB;AACnB,SAAA,wBAAwB;AACxB,SAAA,yBAAyB;AACzB,SAAA,8BAA8B;AAC9B,SAAA,kBAAkB;AAClB,SAAA,uBAAuB;AACvB,SAAA,kBAAkB;AAClB,SAAA,sBAAsB;AACtB,SAAA,uBAAuB;AACxB,SAAA,mBAAmB;AAEpC,SAAQ,eAAe;AAAA,EAAA;AAAA,EAExB,qBAAqB;AAC3B,SAAK,cAAc,IAAI,YAAY,oBAAoB,CAAC;AAAA,EAC1D;AAAA,EAEQ,uBAAuB,OAAc;AAC3C,UAAM,OAAO,MAAM;AACnB,UAAM,mBAAmB,KAAK,iBAAiB,EAAC,SAAS,MAAK;AAE9D,qBAAiB,QAAQ,CAAC,YAAY;AACpC,UAAI,QAAQ,YAAY,0BAA0B;AAChD,cAAM,oBAAoB;AAG1B,0BAAkB,OAAO,sBAAsB;AAAA,MACjD;AAAA,IACF,CAAC;AACD,SAAK,eAAe;AAAA,EACtB;AAAA,EAEQ,sBAAsB;AAC5B,SAAK,eAAe;AAAA,EACtB;AAAA,EAES,SAAS;AAChB,UAAM,wBAAwB,KAAK;AACnC,WAAO;AAAA;AAAA;AAAA,YAGC,CAAC,KAAK,iBACJ;AAAA;AAAA,oCAGA,IAAI;AAAA,YACN,KAAK,iBACH;AAAA,wBACU,SAAS;AAAA,MACf,eAAe;AAAA,MACf,WAAW,KAAK;AAAA,IAAA,CACjB,CAAC;AAAA;AAAA;AAAA,yBAGO,MACP,KAAK,cAAc,IAAI,YAAY,qBAAqB,CAAC,CAAC;AAAA,6BAC/C,KAAK,mBAAmB;AAAA;AAAA;AAAA,oCAIvC,IAAI;AAAA,uBACK,SAAS,EAAC,0BAA0B,KAAA,CAAK,CAAC;AAAA,cACnD,KAAK,kBACH;AAAA;AAAA,6BAEa,yBAAyB,MAAM;AAAA,8BAC9B,KAAK,mBAAmB;AAAA,+BACvB,KAAK,oBAAoB;AAAA,0BAC9B,wBACJ,4CACA,EAAE;AAAA,2BACG,MAAM,KAAK,mBAAA,CAAoB;AAAA;AAAA,uCAEnB,KAAK,gBAAgB;AAAA,6CAE5C,OAAO;AAAA;AAAA,gBAEP,KAAK,eACH,UACA,mDAAmD;AAAA;AAAA;AAAA;AAAA,8BAIvC,KAAK,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA,8BAK3B,KAAK,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMpC,SAAS;AAAA,MACf,kBAAkB,KAAK;AAAA,MACvB,2BAA2B;AAAA,IAAA,CAC5B,CAAC;AAAA;AAAA,YAEA,KAAK,kBACH;AAAA,wBACU,SAAS;AAAA,MACf,gBAAgB;AAAA,MAChB,WAAW,KAAK;AAAA,IAAA,CACjB,CAAC;AAAA;AAAA;AAAA,wBAGM,KAAK,uBACT,yCACA,EAAE;AAAA,yBACG,MACP,KAAK,cAAc,IAAI,YAAY,sBAAsB,CAAC,CAAC;AAAA,6BAChD,KAAK,oBAAoB;AAAA;AAAA;AAAA,oCAIxC,IAAI;AAAA,YACN,KAAK,yBACH;AAAA,wBACU,SAAS;AAAA,MACf,uBAAuB;AAAA,MACvB,WAAW,KAAK;AAAA,IAAA,CACjB,CAAC;AAAA;AAAA;AAAA,wBAGM,KAAK,8BACT,yCACA,EAAE;AAAA,yBACG,MACP,KAAK;AAAA,MACH,IAAI,YAAY,6BAA6B;AAAA,IAAA,CAC9C;AAAA,6BACU,KAAK,2BAA2B;AAAA;AAAA;AAAA,oCAI/C,IAAI;AAAA,YACN,KAAK,mBACH;AAAA,wBACU,SAAS;AAAA,MACf,iBAAiB;AAAA,MACjB,WAAW,KAAK;AAAA,IAAA,CACjB,CAAC;AAAA;AAAA;AAAA,wBAGM,KAAK,wBACT,yCACA,EAAE;AAAA,yBACG,MACP,KAAK,cAAc,IAAI,YAAY,uBAAuB,CAAC,CAAC;AAAA,6BACjD,KAAK,qBAAqB;AAAA;AAAA;AAAA,oCAIzC,IAAI;AAAA,YACN,KAAK,mBACH;AAAA,wBACU,SAAS;AAAA,MACf,iBAAiB;AAAA,MACjB,WAAW,KAAK;AAAA,IAAA,CACjB,CAAC;AAAA;AAAA;AAAA,wBAGM,KAAK,wBACT,yCACA,EAAE;AAAA,yBACG,MACP,KAAK,cAAc,IAAI,YAAY,uBAAuB,CAAC,CAAC;AAAA,6BACjD,KAAK,qBAAqB;AAAA;AAAA;AAAA,oCAIzC,IAAI;AAAA,YACN,KAAK,oBACH;AAAA,wBACU,SAAS;AAAA,MACf,kBAAkB;AAAA,MAClB,WAAW,KAAK;AAAA,IAAA,CACjB,CAAC;AAAA;AAAA;AAAA,wBAGM,KAAK,yBACT,yCACA,EAAE;AAAA,yBACG,MACP,KAAK,cAAc,IAAI,YAAY,wBAAwB,CAAC,CAAC;AAAA,6BAClD,KAAK,sBAAsB;AAAA;AAAA;AAAA,oCAI1C,IAAI;AAAA,YACN,KAAK,iBACH;AAAA,wBACU,SAAS;AAAA,MACf,eAAe;AAAA,MACf,WAAW,KAAK;AAAA,IAAA,CACjB,CAAC;AAAA;AAAA;AAAA,wBAGM,KAAK,sBACT,yCACA,EAAE;AAAA,yBACG,MACP,KAAK,cAAc,IAAI,YAAY,qBAAqB,CAAC,CAAC;AAAA,6BAC/C,KAAK,mBAAmB;AAAA;AAAA;AAAA,oCAIvC,IAAI;AAAA,YACN,KAAK,YAAY,mCAAmC,IAAI;AAAA;AAAA;AAAA;AAAA,EAIlE;AAGF;AAnOa,kBAkOK,SAAS,UAAU,YAAY;AAjOpB,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GADd,kBACgB,WAAA,kBAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAFd,kBAEgB,WAAA,aAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAHd,kBAGgB,WAAA,kBAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAJd,kBAIgB,WAAA,uBAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GALd,kBAKgB,WAAA,kBAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GANd,kBAMgB,WAAA,uBAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAPd,kBAOgB,WAAA,qBAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GARd,kBAQgB,WAAA,0BAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GATd,kBASgB,WAAA,oBAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAVd,kBAUgB,WAAA,yBAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAXd,kBAWgB,WAAA,oBAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAZd,kBAYgB,WAAA,yBAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAbd,kBAagB,WAAA,0BAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAdd,kBAcgB,WAAA,+BAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAfd,kBAegB,WAAA,mBAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAhBd,kBAgBgB,WAAA,wBAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAjBd,kBAiBgB,WAAA,mBAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAlBd,kBAkBgB,WAAA,uBAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAnBd,kBAmBgB,WAAA,wBAAA,CAAA;AACD,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GApBb,kBAoBe,WAAA,oBAAA,CAAA;AAET,gBAAA;AAAA,EAAhB,MAAA;AAAM,GAtBI,kBAsBM,WAAA,gBAAA,CAAA;AAtBN,oBAAN,gBAAA;AAAA,EADN,cAAc,qBAAqB;AAAA,GACvB,iBAAA;"}

package/dist/integration-systems/integration-bar-dropdown/integration-bar-dropdown.css.js

@@ -53,7 +53,8 @@ const compentStyle = css`
     }
 
 :is(.status .status-item) .status-label::slotted(*) {
-      font-family: var(--font-family-main);
+      font-family: var(--global-typography-font-family);
+      font-weight: var(--global-typography-ui-body-font-weight);
       font-size: var(--global-typography-ui-body-font-size);
       line-height: var(--global-typography-ui-body-line-height);
       font-feature-settings:

package/dist/integration-systems/integration-bar-dropdown/integration-bar-dropdown.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"integration-bar-dropdown.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"integration-bar-dropdown.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}