npm - @oicl/openbridge-webcomponents - Versions diffs - 2.0.0-next.50 → 2.0.0-next.51 - Mend

@oicl/openbridge-webcomponents 2.0.0-next.50 → 2.0.0-next.51

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (34) hide show

package/dist/integration-systems/integration-button/integration-button.css.js.map CHANGED Viewed

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

package/dist/integration-systems/integration-button/integration-button.d.ts CHANGED Viewed

@@ -4,6 +4,15 @@ export interface IntegrationButtonReadout {
     value: string;
     unit: string;
 }
+export declare enum IntegrationButtonVariant {
+    normal = "normal",
+    flat = "flat"
+}
+export declare enum IntegrationButtonType {
+    hug = "hug",
+    regular = "regular",
+    rich = "rich"
+}
 /**
  * `<obc-integration-button>` – A button component for integration systems.
  *
@@ -11,20 +20,47 @@ export interface IntegrationButtonReadout {
  * @slot trailing-icon - Icon after label (shown when `hasTrailingIcon` is true)
  * @slot trailing-icon2 - Icon after label (shown when `hasTrailingIcon2` is true)
  * @slot label - Label text
- * @slot status - Status text
+ * @slot status - Status/description text (shown when `hasStatus` is true)
  * @slot info-label - Info label text
  * @slot info-status - Info status text
+ * @slot integration-vessel-menu - Integration vessel menu to be shown when button is in activated state
+ *
+ * @fires click - Fired when the internal button is activated.
+ *
+ * @property {boolean} hasTrailingIcon - Shows the `trailing-icon` slot.
+ * @property {boolean} hasTrailingIcon2 - Shows the `trailing-icon2` slot.
+ * @property {boolean} hasLeadingIcon - Shows the `leading-icon` slot.
+ * @property {boolean} hasstatus - Shows the `status` slot.
+ * @property {IntegrationButtonReadout[]} readouts - List of readout items shown in the rich type.
+ * @property {boolean} disabled - Disables the internal button.
+ * @property {boolean} activated - Applies active state styling while a selection is pending.
+ * @property {boolean} selected - Applies selected state styling.
+ * @property {boolean} dividerBottom - Shows a bottom divider under the button.
+ * @property {boolean} dividerRight - Shows a right divider to separate from adjacent buttons.
+ * @property {IntegrationButtonVariant} variant - Visual variant (`normal` or `flat`).
+ * @property {IntegrationButtonType} type - Layout type (`hug`, `regular`, or `rich`).
  */
 export declare class ObcIntegrationButton extends LitElement {
     hasTrailingIcon: boolean;
     hasTrailingIcon2: boolean;
     hasLeadingIcon: boolean;
+    hasStatus: boolean;
     readouts: IntegrationButtonReadout[];
     disabled: boolean;
+    activated: boolean;
     selected: boolean;
     dividerBottom: boolean;
+    dividerRight: boolean;
+    variant: IntegrationButtonVariant;
+    type: IntegrationButtonType;
+    private getButtonClasses;
+    private onIntegrationVesselMenuClick;
+    renderRich(): import('lit-html').TemplateResult<1>;
+    renderRegular(): import('lit-html').TemplateResult<1>;
+    renderHug(): import('lit-html').TemplateResult<1>;
     render(): import('lit-html').TemplateResult<1>;
     static styles: import('lit').CSSResult;
+    updated(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/integration-systems/integration-button/integration-button.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"integration-button.d.ts","sourceRoot":"","sources":["../../../src/integration-systems/integration-button/integration-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAMzD,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED~~;;;;;;;;;;GAUG~~;AACH,qBACa,oBAAqB,SAAQ,UAAU;IACvB,eAAe,UAAS;IACxB,gBAAgB,UAAS;IACzB,cAAc,UAAS;~~IAElD~~,QAAQ,EAAE,wBAAwB,EAAE,CAAM;IACf,QAAQ,UAAS;IACjB,QAAQ,UAAS;IACjB,aAAa,UAAS;~~IAExC~~,MAAM;~~IAmDf~~,OAAgB,MAAM,0BAA2B;~~CAClD~~;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,oBAAoB,CAAC;KAChD;CACF"}
1	+ {"version":3,"file":"integration-button.d.ts","sourceRoot":"","sources":["../../../src/integration-systems/integration-button/integration-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAMzD,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED,oBAAY,wBAAwB;IAClC,MAAM,WAAW;IACjB,IAAI,SAAS;CACd;AAED,oBAAY,qBAAqB;IAC/B,GAAG,QAAQ;IACX,OAAO,YAAY;IACnB,IAAI,SAAS;CACd;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBACa,oBAAqB,SAAQ,UAAU;IACvB,eAAe,UAAS;IACxB,gBAAgB,UAAS;IACzB,cAAc,UAAS;IACvB,SAAS,UAAS;IAE7C,QAAQ,EAAE,wBAAwB,EAAE,CAAM;IACf,QAAQ,UAAS;IACjB,SAAS,UAAS;IAClB,QAAQ,UAAS;IACjB,aAAa,UAAS;IACtB,YAAY,UAAS;IACtB,OAAO,EAAE,wBAAwB,CACzB;IACR,IAAI,EAAE,qBAAqB,CACrB;IAEhC,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,4BAA4B;IAIpC,UAAU;IA2EV,aAAa;IAgDb,SAAS;IAgDA,MAAM;IAef,OAAgB,MAAM,0BAA2B;IAExC,OAAO;CAajB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,oBAAoB,CAAC;KAChD;CACF"}

package/dist/integration-systems/integration-button/integration-button.js CHANGED Viewed

@@ -13,61 +13,210 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
+var IntegrationButtonVariant = /* @__PURE__ */ ((IntegrationButtonVariant2) => {
+  IntegrationButtonVariant2["normal"] = "normal";
+  IntegrationButtonVariant2["flat"] = "flat";
+  return IntegrationButtonVariant2;
+})(IntegrationButtonVariant || {});
+var IntegrationButtonType = /* @__PURE__ */ ((IntegrationButtonType2) => {
+  IntegrationButtonType2["hug"] = "hug";
+  IntegrationButtonType2["regular"] = "regular";
+  IntegrationButtonType2["rich"] = "rich";
+  return IntegrationButtonType2;
+})(IntegrationButtonType || {});
 let ObcIntegrationButton = class extends LitElement {
   constructor() {
     super(...arguments);
     this.hasTrailingIcon = false;
     this.hasTrailingIcon2 = false;
     this.hasLeadingIcon = false;
+    this.hasStatus = false;
     this.readouts = [];
     this.disabled = false;
+    this.activated = false;
     this.selected = false;
     this.dividerBottom = false;
+    this.dividerRight = false;
+    this.variant = "normal";
+    this.type = "regular";
   }
-  render() {
+  getButtonClasses() {
+    return {
+      "touch-target": true,
+      selected: this.selected,
+      activated: this.activated,
+      disabled: this.disabled,
+      "has-description": this.hasStatus,
+      ["variant-" + this.variant]: true,
+      ["type-" + this.type]: true
+    };
+  }
+  onIntegrationVesselMenuClick(event) {
+    event.stopPropagation();
+  }
+  renderRich() {
     return html`
-      <button
+      <div class="button-horizontal-divider-container">
+        <div class="button-vertical-divider-container">
+          <button
+            class=${classMap(this.getButtonClasses())}
+            ?disabled=${this.disabled}
+          >
+            <div class="content-container">
+              <div class="main-container">
+                ${this.hasLeadingIcon ? html`<div class="icon leading">
+                      <slot name="leading-icon"></slot>
+                    </div>` : nothing}
+                <div class="text-container">
+                  <div class="label"><slot name="label"></slot></div>
+                  ${this.hasStatus ? html`<div class="status">
+                        <slot name="status"></slot>
+                      </div>` : nothing}
+                </div>
+                ${this.hasTrailingIcon ? html`<div class="icon-container">
+                      ${this.hasTrailingIcon2 ? html`<slot
+                            name="trailing-icon2"
+                            class="icon trailing"
+                          ></slot>` : nothing}
+                      <slot name="trailing-icon" class="icon trailing"></slot>
+                    </div>` : nothing}
+              </div>
+              <div class="info-container">
+                <div class="info-item">
+                  <slot class="info-label" name="info-label"></slot>
+                  <slot class="info-status" name="info-status"></slot>
+                </div>
+                ${this.readouts.map(
+      (readout) => html`
+                    <div class="info-readout-item">
+                      <div class="info-item-label">${readout.label}</div>
+                      <div class="info-item-value">${readout.value}</div>
+                      <div class="info-item-unit">${readout.unit}</div>
+                    </div>
+                  `
+    )}
+              </div>
+            </div>
+          </button>
+          ${this.dividerRight ? html`<div class="divider-right"></div>` : html`<div
+                class="divider-right"
+                style="visibility: hidden;"
+              ></div>`}
+        </div>
+        ${this.dividerBottom ? html`<div class="divider-bottom"></div>` : nothing}
+      </div>
+      <div
         class=${classMap({
-      wrapper: true,
-      selected: this.selected
+      "integration-vessel-menu-container": true,
+      show: this.activated
     })}
-        ?disabled=${this.disabled}
+        @click=${this.onIntegrationVesselMenuClick}
       >
-        <div class="main-container">
-          ${this.hasLeadingIcon ? html`<div class="icon leading">
-                <slot name="leading-icon"></slot>
-              </div>` : nothing}
-          <div class="text-container">
-            <div class="label"><slot name="label"></slot></div>
-            <div class="status"><slot name="status"></slot></div>
+        <slot name="integration-vessel-menu"></slot>
+      </div>
+    `;
+  }
+  renderRegular() {
+    return html`
+      <div class="button-vertical-divider-container">
+        <button
+          class=${classMap(this.getButtonClasses())}
+          ?disabled=${this.disabled}
+        >
+          <div class="content-container">
+            ${this.hasLeadingIcon ? html`<div class="icon leading">
+                  <slot name="leading-icon"></slot>
+                </div>` : nothing}
+            <div class="text-container">
+              <div class="label"><slot name="label"></slot></div>
+              ${this.hasStatus ? html`<div class="status"><slot name="status"></slot></div>` : nothing}
+            </div>
+            ${this.hasTrailingIcon ? html`<div class="icon-container">
+                  ${this.hasTrailingIcon2 ? html`<slot
+                        name="trailing-icon2"
+                        class="icon trailing"
+                      ></slot>` : nothing}
+                  <slot name="trailing-icon" class="icon trailing"></slot>
+                </div>` : nothing}
           </div>
-          ${this.hasTrailingIcon ? html`<div class="icon-container">
-                ${this.hasTrailingIcon2 ? html`<slot
-                      name="trailing-icon2"
-                      class="icon trailing"
-                    ></slot>` : nothing}
-                <slot name="trailing-icon" class="icon trailing"></slot>
-              </div>` : nothing}
-        </div>
-        <div class="info-container">
-          <div class="info-item">
-            <slot class="info-label" name="info-label"></slot>
-            <slot class="info-status" name="info-status"></slot>
+        </button>
+        ${this.dividerRight ? html`<div class="divider-right"></div>` : html`<div class="divider-right" style="visibility: hidden;"></div>`}
+      </div>
+      <div
+        class=${classMap({
+      "integration-vessel-menu-container": true,
+      show: this.activated
+    })}
+        @click=${this.onIntegrationVesselMenuClick}
+      >
+        <slot name="integration-vessel-menu"></slot>
+      </div>
+    `;
+  }
+  renderHug() {
+    return html`
+      <div class="button-vertical-divider-container">
+        <button
+          class=${classMap(this.getButtonClasses())}
+          ?disabled=${this.disabled}
+        >
+          <div class="content-container">
+            ${this.hasLeadingIcon ? html`<div class="icon leading">
+                  <slot name="leading-icon"></slot>
+                </div>` : nothing}
+            <div class="text-container">
+              <div class="label"><slot name="label"></slot></div>
+              ${this.hasStatus ? html`<div class="status"><slot name="status"></slot></div>` : nothing}
+            </div>
+            ${this.hasTrailingIcon ? html`<div class="icon-container">
+                  ${this.hasTrailingIcon2 ? html`<slot
+                        name="trailing-icon2"
+                        class="icon trailing"
+                      ></slot>` : nothing}
+                  <slot name="trailing-icon" class="icon trailing"></slot>
+                </div>` : nothing}
           </div>
-          ${this.readouts.map(
-      (readout) => html`
-              <div class="info-readout-item">
-                <div class="info-item-label">${readout.label}</div>
-                <div class="info-item-value">${readout.value}</div>
-                <div class="info-item-unit">${readout.unit}</div>
-              </div>
-            `
-    )}
-        </div>
-      </button>
-      ${this.dividerBottom ? html`<div class="divider-bottom"></div>` : nothing}
+        </button>
+        ${this.dividerRight ? html`<div class="divider-right"></div>` : html`<div class="divider-right" style="visibility: hidden;"></div>`}
+      </div>
+      <div
+        class=${classMap({
+      "integration-vessel-menu-container": true,
+      show: this.activated
+    })}
+        @click=${this.onIntegrationVesselMenuClick}
+      >
+        <slot name="integration-vessel-menu"></slot>
+      </div>
     `;
   }
+  render() {
+    switch (this.type) {
+      case "hug": {
+        return this.renderHug();
+      }
+      case "rich": {
+        return this.renderRich();
+      }
+      case "regular":
+      default: {
+        return this.renderRegular();
+      }
+    }
+  }
+  updated() {
+    let dividerHeight = 40;
+    if (this.type === "hug") {
+      dividerHeight = 32;
+    }
+    if (this.type === "rich") {
+      dividerHeight = 64;
+    }
+    this.style.setProperty(
+      "--integration-button-divider-height",
+      `${dividerHeight}px`
+    );
+  }
 };
 ObcIntegrationButton.styles = unsafeCSS(compentStyle);
 __decorateClass([
@@ -79,22 +228,39 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], ObcIntegrationButton.prototype, "hasLeadingIcon", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationButton.prototype, "hasStatus", 2);
 __decorateClass([
   property({ type: Array, attribute: false })
 ], ObcIntegrationButton.prototype, "readouts", 2);
 __decorateClass([
   property({ type: Boolean })
 ], ObcIntegrationButton.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationButton.prototype, "activated", 2);
 __decorateClass([
   property({ type: Boolean })
 ], ObcIntegrationButton.prototype, "selected", 2);
 __decorateClass([
   property({ type: Boolean })
 ], ObcIntegrationButton.prototype, "dividerBottom", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationButton.prototype, "dividerRight", 2);
+__decorateClass([
+  property({ type: String })
+], ObcIntegrationButton.prototype, "variant", 2);
+__decorateClass([
+  property({ type: String })
+], ObcIntegrationButton.prototype, "type", 2);
 ObcIntegrationButton = __decorateClass([
   customElement("obc-integration-button")
 ], ObcIntegrationButton);
 export {
+  IntegrationButtonType,
+  IntegrationButtonVariant,
   ObcIntegrationButton
 };
 //# sourceMappingURL=integration-button.js.map

package/dist/integration-systems/integration-button/integration-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"integration-button.js","sources":["../../../src/integration-systems/integration-button/integration-button.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport compentStyle from './integration-button.css?inline';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nexport interface IntegrationButtonReadout {\n label: string;\n value: string;\n unit: string;\n}\n\n/*\n `<obc-integration-button>` – A button component for integration systems.\n \n @slot leading-icon - Icon before label (shown when `hasLeadingIcon` is true)\n * @slot trailing-icon - Icon after label (shown when `hasTrailingIcon` is true)\n * @slot trailing-icon2 - Icon after label (shown when `hasTrailingIcon2` is true)\n * @slot label - Label text\n * @slot status - Status text\n * @slot info-label - Info label text\n * @slot info-status - Info status text\n */\n@customElement('obc-integration-button')\nexport class ObcIntegrationButton extends LitElement {\n @property({type: Boolean}) hasTrailingIcon = false;\n @property({type: Boolean}) hasTrailingIcon2 = false;\n @property({type: Boolean}) hasLeadingIcon = false;\n @property({type: Array, attribute: false})\n readouts: IntegrationButtonReadout[] = [];\n @property({type: Boolean}) disabled = false;\n @property({type: Boolean}) selected = false;\n @property({type: Boolean}) dividerBottom = false;\n\n override render() {\n return html`\n <button\n class=${classMap({\n wrapper: true,\n selected: this.selected,\n })}\n ?disabled=${this.disabled}\n >\n <div class=\"main-container\">\n ${this.hasLeadingIcon\n ? html`<div class=\"icon leading\">\n <slot name=\"leading-icon\"></slot>\n </div>`\n : nothing}\n <div class=\"text-container\">\n <div class=\"label\"><slot name=\"label\"></slot></div>\n <div class=\"status\"><slot name=\"status\"></slot></div>\n </div>\n ${this.hasTrailingIcon\n ? html`<div class=\"icon-container\">\n ${this.hasTrailingIcon2\n ? html`<slot\n name=\"trailing-icon2\"\n class=\"icon trailing\"\n ></slot>`\n : nothing}\n <slot name=\"trailing-icon\" class=\"icon trailing\"></slot>\n </div>`\n : nothing}\n </div>\n <div class=\"info-container\">\n <div class=\"info-item\">\n <slot class=\"info-label\" name=\"info-label\"></slot>\n <slot class=\"info-status\" name=\"info-status\"></slot>\n </div>\n ${this.readouts.map(\n (readout) => html`\n <div class=\"info-readout-item\">\n <div class=\"info-item-label\">${readout.label}</div>\n <div class=\"info-item-value\">${readout.value}</div>\n <div class=\"info-item-unit\">${readout.unit}</div>\n </div>\n `\n )}\n </div>\n </button>\n ${this.dividerBottom ? html`<div class=\"divider-bottom\"></div>` : nothing}\n `;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-integration-button': ObcIntegrationButton;\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAwBO,IAAM,uBAAN,cAAmC,WAAW;AAAA,EAA9C,cAAA;AAAA,UAAA,GAAA,SAAA;AACsB,SAAA,kBAAkB;AAClB,SAAA,mBAAmB;AACnB,SAAA,iBAAiB;AAE5C,SAAA,WAAuC,CAAA;AACZ,SAAA,WAAW;AACX,SAAA,WAAW;AACX,SAAA,gBAAgB;AAAA,EAAA;AAAA,EAElC,SAAS;AAChB,WAAO;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,SAAS;AAAA,MACT,UAAU,KAAK;AAAA,IAAA,CAChB,CAAC;AAAA,oBACU,KAAK,QAAQ;AAAA;AAAA;AAAA,YAGrB,KAAK,iBACH;AAAA;AAAA,wBAGA,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,YAKT,KAAK,kBACH;AAAA,kBACI,KAAK,mBACH;AAAA;AAAA;AAAA,gCAIA,OAAO;AAAA;AAAA,wBAGb,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOT,KAAK,SAAS;AAAA,MACd,CAAC,YAAY;AAAA;AAAA,+CAEsB,QAAQ,KAAK;AAAA,+CACb,QAAQ,KAAK;AAAA,8CACd,QAAQ,IAAI;AAAA;AAAA;AAAA,IAAA,CAG/C;AAAA;AAAA;AAAA,QAGH,KAAK,gBAAgB,2CAA2C,OAAO;AAAA;AAAA,EAE7E;AAGF;AA9Da,qBA6DK,SAAS,UAAU,YAAY;AA5DpB,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GADd,qBACgB,WAAA,mBAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAFd,qBAEgB,WAAA,oBAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAHd,qBAGgB,WAAA,kBAAA,CAAA;AAE3B,gBAAA;AAAA,EADC,SAAS,EAAC,MAAM,OAAO,WAAW,OAAM;AAAA,GAJ9B,qBAKX,WAAA,YAAA,CAAA;AAC2B,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GANd,qBAMgB,WAAA,YAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAPd,qBAOgB,WAAA,YAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GARd,qBAQgB,WAAA,iBAAA,CAAA;AARhB,uBAAN,gBAAA;AAAA,EADN,cAAc,wBAAwB;AAAA,GAC1B,oBAAA;"}
1	+ {"version":3,"file":"integration-button.js","sources":["../../../src/integration-systems/integration-button/integration-button.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport compentStyle from './integration-button.css?inline';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nexport interface IntegrationButtonReadout {\n label: string;\n value: string;\n unit: string;\n}\n\nexport enum IntegrationButtonVariant {\n normal = 'normal',\n flat = 'flat',\n}\n\nexport enum IntegrationButtonType {\n hug = 'hug',\n regular = 'regular',\n rich = 'rich',\n}\n\n/*\n `<obc-integration-button>` – A button component for integration systems.\n \n @slot leading-icon - Icon before label (shown when `hasLeadingIcon` is true)\n * @slot trailing-icon - Icon after label (shown when `hasTrailingIcon` is true)\n * @slot trailing-icon2 - Icon after label (shown when `hasTrailingIcon2` is true)\n * @slot label - Label text\n * @slot status - Status/description text (shown when `hasStatus` is true)\n * @slot info-label - Info label text\n * @slot info-status - Info status text\n * @slot integration-vessel-menu - Integration vessel menu to be shown when button is in activated state\n \n @fires click - Fired when the internal button is activated.\n \n @property {boolean} hasTrailingIcon - Shows the `trailing-icon` slot.\n * @property {boolean} hasTrailingIcon2 - Shows the `trailing-icon2` slot.\n * @property {boolean} hasLeadingIcon - Shows the `leading-icon` slot.\n * @property {boolean} hasstatus - Shows the `status` slot.\n * @property {IntegrationButtonReadout[]} readouts - List of readout items shown in the rich type.\n * @property {boolean} disabled - Disables the internal button.\n * @property {boolean} activated - Applies active state styling while a selection is pending.\n * @property {boolean} selected - Applies selected state styling.\n * @property {boolean} dividerBottom - Shows a bottom divider under the button.\n * @property {boolean} dividerRight - Shows a right divider to separate from adjacent buttons.\n * @property {IntegrationButtonVariant} variant - Visual variant (`normal` or `flat`).\n * @property {IntegrationButtonType} type - Layout type (`hug`, `regular`, or `rich`).\n */\n@customElement('obc-integration-button')\nexport class ObcIntegrationButton extends LitElement {\n @property({type: Boolean}) hasTrailingIcon = false;\n @property({type: Boolean}) hasTrailingIcon2 = false;\n @property({type: Boolean}) hasLeadingIcon = false;\n @property({type: Boolean}) hasStatus = false;\n @property({type: Array, attribute: false})\n readouts: IntegrationButtonReadout[] = [];\n @property({type: Boolean}) disabled = false;\n @property({type: Boolean}) activated = false;\n @property({type: Boolean}) selected = false;\n @property({type: Boolean}) dividerBottom = false;\n @property({type: Boolean}) dividerRight = false;\n @property({type: String}) variant: IntegrationButtonVariant =\n IntegrationButtonVariant.normal;\n @property({type: String}) type: IntegrationButtonType =\n IntegrationButtonType.regular;\n\n private getButtonClasses() {\n return {\n 'touch-target': true,\n selected: this.selected,\n activated: this.activated,\n disabled: this.disabled,\n 'has-description': this.hasStatus,\n ['variant-' + this.variant]: true,\n ['type-' + this.type]: true,\n };\n }\n\n private onIntegrationVesselMenuClick(event: Event) {\n event.stopPropagation();\n }\n\n renderRich() {\n return html`\n <div class=\"button-horizontal-divider-container\">\n <div class=\"button-vertical-divider-container\">\n <button\n class=${classMap(this.getButtonClasses())}\n ?disabled=${this.disabled}\n >\n <div class=\"content-container\">\n <div class=\"main-container\">\n ${this.hasLeadingIcon\n ? html`<div class=\"icon leading\">\n <slot name=\"leading-icon\"></slot>\n </div>`\n : nothing}\n <div class=\"text-container\">\n <div class=\"label\"><slot name=\"label\"></slot></div>\n ${this.hasStatus\n ? html`<div class=\"status\">\n <slot name=\"status\"></slot>\n </div>`\n : nothing}\n </div>\n ${this.hasTrailingIcon\n ? html`<div class=\"icon-container\">\n ${this.hasTrailingIcon2\n ? html`<slot\n name=\"trailing-icon2\"\n class=\"icon trailing\"\n ></slot>`\n : nothing}\n <slot name=\"trailing-icon\" class=\"icon trailing\"></slot>\n </div>`\n : nothing}\n </div>\n <div class=\"info-container\">\n <div class=\"info-item\">\n <slot class=\"info-label\" name=\"info-label\"></slot>\n <slot class=\"info-status\" name=\"info-status\"></slot>\n </div>\n ${this.readouts.map(\n (readout) => html`\n <div class=\"info-readout-item\">\n <div class=\"info-item-label\">${readout.label}</div>\n <div class=\"info-item-value\">${readout.value}</div>\n <div class=\"info-item-unit\">${readout.unit}</div>\n </div>\n `\n )}\n </div>\n </div>\n </button>\n ${this.dividerRight\n ? html`<div class=\"divider-right\"></div>`\n : html`<div\n class=\"divider-right\"\n style=\"visibility: hidden;\"\n ></div>`}\n </div>\n ${this.dividerBottom\n ? html`<div class=\"divider-bottom\"></div>`\n : nothing}\n </div>\n <div\n class=${classMap({\n 'integration-vessel-menu-container': true,\n show: this.activated,\n })}\n @click=${this.onIntegrationVesselMenuClick}\n >\n <slot name=\"integration-vessel-menu\"></slot>\n </div>\n `;\n }\n\n renderRegular() {\n return html`\n <div class=\"button-vertical-divider-container\">\n <button\n class=${classMap(this.getButtonClasses())}\n ?disabled=${this.disabled}\n >\n <div class=\"content-container\">\n ${this.hasLeadingIcon\n ? html`<div class=\"icon leading\">\n <slot name=\"leading-icon\"></slot>\n </div>`\n : nothing}\n <div class=\"text-container\">\n <div class=\"label\"><slot name=\"label\"></slot></div>\n ${this.hasStatus\n ? html`<div class=\"status\"><slot name=\"status\"></slot></div>`\n : nothing}\n </div>\n ${this.hasTrailingIcon\n ? html`<div class=\"icon-container\">\n ${this.hasTrailingIcon2\n ? html`<slot\n name=\"trailing-icon2\"\n class=\"icon trailing\"\n ></slot>`\n : nothing}\n <slot name=\"trailing-icon\" class=\"icon trailing\"></slot>\n </div>`\n : nothing}\n </div>\n </button>\n ${this.dividerRight\n ? html`<div class=\"divider-right\"></div>`\n : html`<div class=\"divider-right\" style=\"visibility: hidden;\"></div>`}\n </div>\n <div\n class=${classMap({\n 'integration-vessel-menu-container': true,\n show: this.activated,\n })}\n @click=${this.onIntegrationVesselMenuClick}\n >\n <slot name=\"integration-vessel-menu\"></slot>\n </div>\n `;\n }\n\n renderHug() {\n return html`\n <div class=\"button-vertical-divider-container\">\n <button\n class=${classMap(this.getButtonClasses())}\n ?disabled=${this.disabled}\n >\n <div class=\"content-container\">\n ${this.hasLeadingIcon\n ? html`<div class=\"icon leading\">\n <slot name=\"leading-icon\"></slot>\n </div>`\n : nothing}\n <div class=\"text-container\">\n <div class=\"label\"><slot name=\"label\"></slot></div>\n ${this.hasStatus\n ? html`<div class=\"status\"><slot name=\"status\"></slot></div>`\n : nothing}\n </div>\n ${this.hasTrailingIcon\n ? html`<div class=\"icon-container\">\n ${this.hasTrailingIcon2\n ? html`<slot\n name=\"trailing-icon2\"\n class=\"icon trailing\"\n ></slot>`\n : nothing}\n <slot name=\"trailing-icon\" class=\"icon trailing\"></slot>\n </div>`\n : nothing}\n </div>\n </button>\n ${this.dividerRight\n ? html`<div class=\"divider-right\"></div>`\n : html`<div class=\"divider-right\" style=\"visibility: hidden;\"></div>`}\n </div>\n <div\n class=${classMap({\n 'integration-vessel-menu-container': true,\n show: this.activated,\n })}\n @click=${this.onIntegrationVesselMenuClick}\n >\n <slot name=\"integration-vessel-menu\"></slot>\n </div>\n `;\n }\n\n override render() {\n switch (this.type) {\n case IntegrationButtonType.hug: {\n return this.renderHug();\n }\n case IntegrationButtonType.rich: {\n return this.renderRich();\n }\n case IntegrationButtonType.regular:\n default: {\n return this.renderRegular();\n }\n }\n }\n\n static override styles = unsafeCSS(compentStyle);\n\n override updated() {\n let dividerHeight = 40;\n if (this.type === IntegrationButtonType.hug) {\n dividerHeight = 32;\n }\n if (this.type === IntegrationButtonType.rich) {\n dividerHeight = 64;\n }\n this.style.setProperty(\n '--integration-button-divider-height',\n `${dividerHeight}px`\n );\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-integration-button': ObcIntegrationButton;\n }\n}\n"],"names":["IntegrationButtonVariant","IntegrationButtonType"],"mappings":"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"}

package/dist/integration-systems/integration-dropdown-button/integration-dropdown-button.css.js CHANGED Viewed

@@ -177,7 +177,7 @@ const compentStyle = css`
   border-radius: 12px;
   background: var(--integration-container-global-color);
   box-shadow: var(--shadow-floating);
-  padding: 4px;
+  padding: 4px 0;
   overflow-y: auto;
 }
@@ -190,6 +190,7 @@ const compentStyle = css`
   min-height: var(
     --menu-navigation-components-navigation-item-touch-target-size
   );
+  margin: 0 4px;
   padding: 0px
     var(--menu-navigation-components-navigation-item-padding-horizontal);
   border-radius: var(
@@ -410,6 +411,11 @@ const compentStyle = css`
     display: none;
   }
+slot[name="fleet"] {
+  display: flex;
+  flex: 1;
+}
 .wrapper option.fleet-option {
   display: flex;
   align-items: center;

package/dist/integration-systems/integration-dropdown-button/integration-dropdown-button.css.js.map CHANGED Viewed

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

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

@@ -0,0 +1,75 @@
+import { css } from "lit";
+const componentStyle = css`
+          * {
+            -webkit-tap-highlight-color: transparent;
+          }
+* {
+  box-sizing: border-box;
+}
+.wrapper {
+            border-color: var(--integration-normal-enabled-border-color);
+            background-color: var(--integration-normal-enabled-background-color);
+            border-width: 1px;
+            border-style: solid;
+            --base-border-color: var(--integration-normal-enabled-border-color);
+            --base-background-color: var(--integration-normal-enabled-background-color);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-width: 788px;
+  align-items: center;
+  background: var(--container-global-color);
+  border-radius: var(
+    --app-components-integration-system-dropdown-menu-border-radius
+  );
+  border: 2px solid var(--integration-border-menu-outline-color);
+  box-shadow: var(--shadow-floating-x) var(--shadow-floating-y)
+    var(--shadow-floating-blur) var(--shadow-raised-spread)
+    var(--shadow-floating-color);
+}
+.footer-container {
+  width: 100%;
+  display: flex;
+  height: var(
+    --app-components-integration-system-dropdown-menu-action-container-height
+  );
+  padding: 0
+    var(--app-components-integration-system-dropdown-menu-padding-horizontal);
+  gap: var(--app-components-alert-menu-button-spacing);
+  border-top: 1px solid var(--border-divider-color);
+  background: var(--container-global-color);
+}
+.footer-container obc-button {
+  flex-grow: 1;
+  white-space: nowrap;
+}
+.content-container {
+  display: flex;
+  justify-content: center;
+  align-items: stretch;
+  align-self: stretch;
+  min-height: 0;
+  flex: 1;
+}
+.alert-list {
+  width: 100%;
+}
+.leading-icon {
+  color: var(--integration-on-normal-neutral-color);
+}
+.container-title {
+  color: var(--integration-on-normal-neutral-color);
+}
+`;
+export {
+  componentStyle as default
+};
+//# sourceMappingURL=integration-vessel-menu.css.js.map

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

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

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

@@ -0,0 +1,37 @@
+import { LitElement } from 'lit';
+import '../../components/button/button.js';
+import '../../components/icon-button/icon-button.js';
+import '../../icons/icon-placeholder.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.
+ *
+ * @slot leading-icon - Icon shown in the header.
+ * @slot title - Header title text.
+ * @slot button-1-leading-icon - Leading icon for the first button.
+ * @slot button-1-label - Label for the first button.
+ * @slot button-2-leading-icon - Leading icon for the second button.
+ * @slot button-2-label - Label for the second button.
+ * @slot button-3-leading-icon - Leading icon for the third button.
+ * @slot button-3-label - Label for the third button.
+ * @slot content - Main content shown in the content area.
+ * @slot alarms - Alarm items rendered inside the alert list.
+ *
+ * @property {number} numberOfButtons - Number of buttons to render (up to 3).
+ *
+ * @fires button1-click - Fired when the first button is clicked.
+ * @fires button2-click - Fired when the second button is clicked.
+ * @fires button3-click - Fired when the third button is clicked.
+ */
+export declare class ObcIntegrationVesselMenu extends LitElement {
+    numberOfButtons: number;
+    private renderButtons;
+    protected render(): import('lit-html').TemplateResult<1>;
+    static styles: import('lit').CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'obc-integration-vessel-menu': ObcIntegrationVesselMenu;
+    }
+}
+//# sourceMappingURL=integration-vessel-menu.d.ts.map

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

@@ -0,0 +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;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,qBACa,wBAAyB,SAAQ,UAAU;IAC5B,eAAe,SAAK;IAE9C,OAAO,CAAC,aAAa;cAmBF,MAAM;IAoBzB,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 ADDED Viewed

@@ -0,0 +1,72 @@
+import { unsafeCSS, LitElement, html } from "lit";
+import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { customElement } from "../../decorator.js";
+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 "../../building-blocks/alert-list/alert-list.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 ObcIntegrationVesselMenu = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.numberOfButtons = 3;
+  }
+  renderButtons() {
+    return html`${Array.from({ length: this.numberOfButtons }, (_, i) => {
+      const buttonNum = i + 1;
+      return html`<obc-button
+        @click=${() => this.dispatchEvent(new CustomEvent(`button${buttonNum}-click`))}
+        ?showLeadingIcon=${true}
+        ?fullWidth=${true}
+        class="button"
+      >
+        <slot
+          name="button-${buttonNum}-leading-icon"
+          slot="leading-icon"
+        ></slot>
+        <slot name="button-${buttonNum}-label"></slot>
+      </obc-button>`;
+    })}`;
+  }
+  render() {
+    return html`
+      <div
+        class=${classMap({
+      wrapper: true
+    })}
+      >
+        <div class="footer-container">${this.renderButtons()}</div>
+        <div class="content-area">
+          <slot name="content"></slot>
+        </div>
+        <div class="content-container">
+          <obc-alert-list class="alert-list"
+            ><slot name="alarms"> </slot>
+          </obc-alert-list>
+        </div>
+      </div>
+    `;
+  }
+};
+ObcIntegrationVesselMenu.styles = unsafeCSS(componentStyle);
+__decorateClass([
+  property({ type: Number })
+], ObcIntegrationVesselMenu.prototype, "numberOfButtons", 2);
+ObcIntegrationVesselMenu = __decorateClass([
+  customElement("obc-integration-vessel-menu")
+], ObcIntegrationVesselMenu);
+export {
+  ObcIntegrationVesselMenu
+};
+//# sourceMappingURL=integration-vessel-menu.js.map