@oicl/openbridge-webcomponents 2.0.0-next.72 → 2.0.0-next.73

package/custom-elements.json

@@ -70183,7 +70183,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<obc-integration-vessel-menu>` – A menu to be shown when selecting a obc-integration-button from a obc-integration-bar.",
+          "description": "`<obc-integration-vessel-menu>` – A menu to be shown when selecting a obc-integration-button from a obc-integration-bar.\n\n## Sizing\n\nThe menu hugs its content and never reserves more space than its slotted\nsections need; it deliberately does not impose a height of its own. Sizing is\nowned by the consumer, since only the consumer knows how large the menu may\ngrow in a given layout.\n\nFrom a web components perspective, drive the size from the host element and\nthe slotted light-DOM nodes — not from component properties:\n\n- **Bound the whole menu** by giving the host element a definite `height`. The\n  menu fills that height and the alert list scrolls within the remaining space\n  while the footer and content keep their size. This is the recommended\n  approach. (A `max-height` alone will not bound the list — the internal\n  scroll needs a definite height to resolve against.)\n- **Size sections independently** (advanced) by sizing the slotted nodes\n  directly — e.g. a fixed-height `content` element, or a capped, scrollable\n  wrapper around the `alarms` items.\n- **Leave it unbounded** to let the menu grow with its content.",
           "name": "ObcIntegrationVesselMenu",
           "slots": [
             {
@@ -70202,24 +70202,27 @@
           "members": [
             {
               "kind": "field",
-              "name": "hideAlarmList",
+              "name": "hasActions",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "Hide the alarm list, ensuring it doesn't take space (display: none).",
-              "attribute": "hideAlarmList"
-            }
-          ],
-          "attributes": [
+              "default": "true"
+            },
             {
-              "name": "hideAlarmList",
+              "kind": "field",
+              "name": "hasAlertList",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "Hide the alarm list, ensuring it doesn't take space (display: none).",
-              "fieldName": "hideAlarmList"
+              "default": "true"
+            },
+            {
+              "kind": "field",
+              "name": "hasContent",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true"
             }
           ],
           "superclass": {

package/dist/integration-systems/integration-vessel-menu/integration-vessel-menu.css.js

@@ -8,6 +8,10 @@ const componentStyle = css`
   box-sizing: border-box;
 }
 
+:host {
+  display: block;
+}
+
 .wrapper {
             border-color: var(--integration-normal-enabled-border-color);
             background-color: var(--integration-normal-enabled-background-color);
@@ -18,6 +22,7 @@ const componentStyle = css`
   display: flex;
   flex-direction: column;
   align-items: center;
+  height: 100%;
   background: var(--container-global-color);
   border-radius: var(
     --app-components-integration-system-dropdown-menu-border-radius
@@ -44,6 +49,10 @@ const componentStyle = css`
   border-radius: 12px;
 }
 
+.footer-container.hidden {
+    display: none;
+  }
+
 .content-area {
   display: flex;
   flex-direction: column;
@@ -53,6 +62,10 @@ const componentStyle = css`
   border-radius: 8px;
 }
 
+.content-area.hidden {
+    display: none;
+  }
+
 .footer-container slot[name="buttons"]::slotted(*) {
   display: flex;
   flex: 1 1 0px;
@@ -67,7 +80,8 @@ const componentStyle = css`
   gap: var(--app-components-integration-system-menu-action-spacing);
 }
 
-.buttons-slot {
+.buttons-slot,
+.content-slot {
   display: contents;
 }
 
@@ -81,12 +95,13 @@ const componentStyle = css`
   border-radius: 8px;
 }
 
-.content-container.hidealarmlist {
+.content-container.hidden {
     display: none;
   }
 
 .alertlist {
   width: 100%;
+  height: 100%;
 }
 
 .leading-icon {

package/dist/integration-systems/integration-vessel-menu/integration-vessel-menu.css.js.map

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

package/dist/integration-systems/integration-vessel-menu/integration-vessel-menu.d.ts

@@ -2,17 +2,39 @@ import { LitElement } from 'lit';
 import '../../components/button/button.js';
 import '../../components/icon-button/icon-button.js';
 import '../../icons/icon-placeholder.js';
+import '../../icons/icon-unacknowledged.js';
 import '../../building-blocks/alert-list/alert-list.js';
 /**
  * `<obc-integration-vessel-menu>` – A menu to be shown when selecting a obc-integration-button from a obc-integration-bar.
  *
+ * ## Sizing
+ *
+ * The menu hugs its content and never reserves more space than its slotted
+ * sections need; it deliberately does not impose a height of its own. Sizing is
+ * owned by the consumer, since only the consumer knows how large the menu may
+ * grow in a given layout.
+ *
+ * From a web components perspective, drive the size from the host element and
+ * the slotted light-DOM nodes — not from component properties:
+ *
+ * - **Bound the whole menu** by giving the host element a definite `height`. The
+ *   menu fills that height and the alert list scrolls within the remaining space
+ *   while the footer and content keep their size. This is the recommended
+ *   approach. (A `max-height` alone will not bound the list — the internal
+ *   scroll needs a definite height to resolve against.)
+ * - **Size sections independently** (advanced) by sizing the slotted nodes
+ *   directly — e.g. a fixed-height `content` element, or a capped, scrollable
+ *   wrapper around the `alarms` items.
+ * - **Leave it unbounded** to let the menu grow with its content.
+ *
  * @slot buttons - Buttons shown in the footer.
  * @slot content - Main content shown in the content area.
  * @slot alarms - Alarm items rendered inside the alert list.
  */
 export declare class ObcIntegrationVesselMenu extends LitElement {
-    /** Hide the alarm list, ensuring it doesn't take space (display: none). */
-    hideAlarmList: boolean;
+    hasActions: boolean;
+    hasAlertList: boolean;
+    hasContent: boolean;
     protected render(): import('lit-html').TemplateResult<1>;
     static styles: import('lit').CSSResult;
 }

package/dist/integration-systems/integration-vessel-menu/integration-vessel-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"integration-vessel-menu.d.ts","sourceRoot":"","sources":["../../../src/integration-systems/integration-vessel-menu/integration-vessel-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAMhD,OAAO,mCAAmC,CAAC;AAC3C,OAAO,6CAA6C,CAAC;AACrD,OAAO,iCAAiC,CAAC;AACzC,OAAO,gDAAgD,CAAC;AAExD;;;;;;GAMG;AAEH,qBACa,wBAAyB,SAAQ,UAAU;IACtD,2EAA2E;IAChD,aAAa,UAAS;cAE9B,MAAM;IA2BzB,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,6BAA6B,EAAE,wBAAwB,CAAC;KACzD;CACF"}
+{"version":3,"file":"integration-vessel-menu.d.ts","sourceRoot":"","sources":["../../../src/integration-systems/integration-vessel-menu/integration-vessel-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAMhD,OAAO,mCAAmC,CAAC;AAC3C,OAAO,6CAA6C,CAAC;AACrD,OAAO,iCAAiC,CAAC;AACzC,OAAO,oCAAoC,CAAC;AAC5C,OAAO,gDAAgD,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,qBACa,wBAAyB,SAAQ,UAAU;IACT,UAAU,UAAQ;IAClB,YAAY,UAAQ;IACpB,UAAU,UAAQ;cAE5C,MAAM;IAuCzB,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,6BAA6B,EAAE,wBAAwB,CAAC;KACzD;CACF"}

package/dist/integration-systems/integration-vessel-menu/integration-vessel-menu.js

@@ -6,6 +6,7 @@ import componentStyle from "./integration-vessel-menu.css.js";
 import "../../components/button/button.js";
 import "../../components/icon-button/icon-button.js";
 import "../../icons/icon-placeholder.js";
+import "../../icons/icon-unacknowledged.js";
 import "../../building-blocks/alert-list/alert-list.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -20,29 +21,43 @@ var __decorateClass = (decorators, target, key, kind) => {
 let ObcIntegrationVesselMenu = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.hideAlarmList = false;
+    this.hasActions = true;
+    this.hasAlertList = true;
+    this.hasContent = true;
   }
   render() {
     return html`
-      <div
-        class=${classMap({
-      wrapper: true
+      <div class="wrapper">
+        <div
+          class=${classMap({
+      "footer-container": true,
+      hidden: !this.hasActions
     })}
-      >
-        <div class="footer-container">
+        >
           <slot name="buttons" class="buttons-slot"></slot>
         </div>
-        <div class="content-area">
-          <slot name="content"></slot>
+        <div
+          class=${classMap({
+      "content-area": true,
+      hidden: !this.hasContent
+    })}
+        >
+          <slot name="content" class="content-slot"></slot>
         </div>
         <div
           class=${classMap({
       "content-container": true,
-      hidealarmlist: this.hideAlarmList
+      hidden: !this.hasAlertList
     })}
         >
           <obc-alert-list class="alertlist"
             ><slot name="alarms"></slot>
+            <div slot="empty-icon">
+              <obi-unacknowledged></obi-unacknowledged>
+            </div>
+            <div slot="empty-title">
+              <span>No alerts</span>
+            </div>
           </obc-alert-list>
         </div>
       </div>
@@ -51,8 +66,14 @@ let ObcIntegrationVesselMenu = class extends LitElement {
 };
 ObcIntegrationVesselMenu.styles = unsafeCSS(componentStyle);
 __decorateClass([
-  property({ type: Boolean })
-], ObcIntegrationVesselMenu.prototype, "hideAlarmList", 2);
+  property({ type: Boolean, attribute: false })
+], ObcIntegrationVesselMenu.prototype, "hasActions", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: false })
+], ObcIntegrationVesselMenu.prototype, "hasAlertList", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: false })
+], ObcIntegrationVesselMenu.prototype, "hasContent", 2);
 ObcIntegrationVesselMenu = __decorateClass([
   customElement("obc-integration-vessel-menu")
 ], ObcIntegrationVesselMenu);

package/dist/integration-systems/integration-vessel-menu/integration-vessel-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"integration-vessel-menu.js","sources":["../../../src/integration-systems/integration-vessel-menu/integration-vessel-menu.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement} from '../../decorator.js';\nimport componentStyle from './integration-vessel-menu.css?inline';\n\nimport '../../components/button/button.js';\nimport '../../components/icon-button/icon-button.js';\nimport '../../icons/icon-placeholder.js';\nimport '../../building-blocks/alert-list/alert-list.js';\n\n/**\n * `<obc-integration-vessel-menu>` – A menu to be shown when selecting a obc-integration-button from a obc-integration-bar.\n *\n * @slot buttons - Buttons shown in the footer.\n * @slot content - Main content shown in the content area.\n * @slot alarms - Alarm items rendered inside the alert list.\n */\n\n@customElement('obc-integration-vessel-menu')\nexport class ObcIntegrationVesselMenu extends LitElement {\n  /** Hide the alarm list, ensuring it doesn't take space (display: none). */\n  @property({type: Boolean}) hideAlarmList = false;\n\n  protected override render() {\n    return html`\n      <div\n        class=${classMap({\n          wrapper: true,\n        })}\n      >\n        <div class=\"footer-container\">\n          <slot name=\"buttons\" class=\"buttons-slot\"></slot>\n        </div>\n        <div class=\"content-area\">\n          <slot name=\"content\"></slot>\n        </div>\n        <div\n          class=${classMap({\n            'content-container': true,\n            hidealarmlist: this.hideAlarmList,\n          })}\n        >\n          <obc-alert-list class=\"alertlist\"\n            ><slot name=\"alarms\"></slot>\n          </obc-alert-list>\n        </div>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-integration-vessel-menu': ObcIntegrationVesselMenu;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAoBO,IAAM,2BAAN,cAAuC,WAAW;AAAA,EAAlD,cAAA;AAAA,UAAA,GAAA,SAAA;AAEsB,SAAA,gBAAgB;AAAA,EAAA;AAAA,EAExB,SAAS;AAC1B,WAAO;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,SAAS;AAAA,IAAA,CACV,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBASQ,SAAS;AAAA,MACf,qBAAqB;AAAA,MACrB,eAAe,KAAK;AAAA,IAAA,CACrB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQV;AAGF;AAhCa,yBA+BK,SAAS,UAAU,cAAc;AA7BtB,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAFd,yBAEgB,WAAA,iBAAA,CAAA;AAFhB,2BAAN,gBAAA;AAAA,EADN,cAAc,6BAA6B;AAAA,GAC/B,wBAAA;"}
+{"version":3,"file":"integration-vessel-menu.js","sources":["../../../src/integration-systems/integration-vessel-menu/integration-vessel-menu.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement} from '../../decorator.js';\nimport componentStyle from './integration-vessel-menu.css?inline';\n\nimport '../../components/button/button.js';\nimport '../../components/icon-button/icon-button.js';\nimport '../../icons/icon-placeholder.js';\nimport '../../icons/icon-unacknowledged.js';\nimport '../../building-blocks/alert-list/alert-list.js';\n\n/**\n * `<obc-integration-vessel-menu>` – A menu to be shown when selecting a obc-integration-button from a obc-integration-bar.\n *\n * ## Sizing\n *\n * The menu hugs its content and never reserves more space than its slotted\n * sections need; it deliberately does not impose a height of its own. Sizing is\n * owned by the consumer, since only the consumer knows how large the menu may\n * grow in a given layout.\n *\n * From a web components perspective, drive the size from the host element and\n * the slotted light-DOM nodes — not from component properties:\n *\n * - **Bound the whole menu** by giving the host element a definite `height`. The\n *   menu fills that height and the alert list scrolls within the remaining space\n *   while the footer and content keep their size. This is the recommended\n *   approach. (A `max-height` alone will not bound the list — the internal\n *   scroll needs a definite height to resolve against.)\n * - **Size sections independently** (advanced) by sizing the slotted nodes\n *   directly — e.g. a fixed-height `content` element, or a capped, scrollable\n *   wrapper around the `alarms` items.\n * - **Leave it unbounded** to let the menu grow with its content.\n *\n * @slot buttons - Buttons shown in the footer.\n * @slot content - Main content shown in the content area.\n * @slot alarms - Alarm items rendered inside the alert list.\n */\n\n@customElement('obc-integration-vessel-menu')\nexport class ObcIntegrationVesselMenu extends LitElement {\n  @property({type: Boolean, attribute: false}) hasActions = true;\n  @property({type: Boolean, attribute: false}) hasAlertList = true;\n  @property({type: Boolean, attribute: false}) hasContent = true;\n\n  protected override render() {\n    return html`\n      <div class=\"wrapper\">\n        <div\n          class=${classMap({\n            'footer-container': true,\n            hidden: !this.hasActions,\n          })}\n        >\n          <slot name=\"buttons\" class=\"buttons-slot\"></slot>\n        </div>\n        <div\n          class=${classMap({\n            'content-area': true,\n            hidden: !this.hasContent,\n          })}\n        >\n          <slot name=\"content\" class=\"content-slot\"></slot>\n        </div>\n        <div\n          class=${classMap({\n            'content-container': true,\n            hidden: !this.hasAlertList,\n          })}\n        >\n          <obc-alert-list class=\"alertlist\"\n            ><slot name=\"alarms\"></slot>\n            <div slot=\"empty-icon\">\n              <obi-unacknowledged></obi-unacknowledged>\n            </div>\n            <div slot=\"empty-title\">\n              <span>No alerts</span>\n            </div>\n          </obc-alert-list>\n        </div>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-integration-vessel-menu': ObcIntegrationVesselMenu;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAyCO,IAAM,2BAAN,cAAuC,WAAW;AAAA,EAAlD,cAAA;AAAA,UAAA,GAAA,SAAA;AACwC,SAAA,aAAa;AACb,SAAA,eAAe;AACf,SAAA,aAAa;AAAA,EAAA;AAAA,EAEvC,SAAS;AAC1B,WAAO;AAAA;AAAA;AAAA,kBAGO,SAAS;AAAA,MACf,oBAAoB;AAAA,MACpB,QAAQ,CAAC,KAAK;AAAA,IAAA,CACf,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKM,SAAS;AAAA,MACf,gBAAgB;AAAA,MAChB,QAAQ,CAAC,KAAK;AAAA,IAAA,CACf,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKM,SAAS;AAAA,MACf,qBAAqB;AAAA,MACrB,QAAQ,CAAC,KAAK;AAAA,IAAA,CACf,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAcV;AAGF;AA7Ca,yBA4CK,SAAS,UAAU,cAAc;AA3CJ,gBAAA;AAAA,EAA5C,SAAS,EAAC,MAAM,SAAS,WAAW,OAAM;AAAA,GADhC,yBACkC,WAAA,cAAA,CAAA;AACA,gBAAA;AAAA,EAA5C,SAAS,EAAC,MAAM,SAAS,WAAW,OAAM;AAAA,GAFhC,yBAEkC,WAAA,gBAAA,CAAA;AACA,gBAAA;AAAA,EAA5C,SAAS,EAAC,MAAM,SAAS,WAAW,OAAM;AAAA,GAHhC,yBAGkC,WAAA,cAAA,CAAA;AAHlC,2BAAN,gBAAA;AAAA,EADN,cAAc,6BAA6B;AAAA,GAC/B,wBAAA;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents",
-  "version": "2.0.0-next.72",
+  "version": "2.0.0-next.73",
   "type": "module",
   "repository": {
     "type": "git",