npm - @oicl/openbridge-webcomponents-full-bundle - Versions diffs - 2.0.0-next.68 → 2.0.0-next.70 - Mend

@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.68 → 2.0.0-next.70

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 (14) hide show

package/custom-elements.json CHANGED Viewed

@@ -80299,19 +80299,19 @@
               "kind": "field",
               "name": "y",
               "type": {
-                "text": "number"
+                "text": "number | undefined"
               },
               "privacy": "private",
-              "default": "24"
+              "default": "undefined"
             },
             {
               "kind": "field",
               "name": "zeroLineY",
               "type": {
-                "text": "number"
+                "text": "number | undefined"
               },
               "privacy": "private",
-              "default": "0"
+              "default": "undefined"
             },
             {
               "kind": "field",

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

@@ -53,10 +53,6 @@ const componentStyle = css`
   border-radius: 8px;
 }
-.footer-container slot[name="buttons"]::slotted(:not(obc-button)) {
-  display: contents;
-}
 .footer-container slot[name="buttons"]::slotted(*) {
   display: flex;
   flex: 1 1 0px;
@@ -64,6 +60,13 @@ const componentStyle = css`
   white-space: nowrap;
 }
+.footer-container slot[name="buttons"]::slotted(:not(obc-button)) {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(auto, 1fr);
+  gap: var(--app-components-integration-system-menu-action-spacing);
+}
 .buttons-slot {
   display: contents;
 }

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

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

package/dist/navigation-instruments/indicator-graph/indicator-graph.d.ts CHANGED Viewed

@@ -14,6 +14,7 @@ export interface ObcIndicatorGraphLayout {
     y?: {
         min?: number;
         max?: number;
+        showZeroLine?: boolean;
     };
 }
 /**

package/dist/navigation-instruments/indicator-graph/indicator-graph.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"indicator-graph.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/indicator-graph/indicator-graph.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,cAAc,EAAkB,MAAM,KAAK,CAAC;AAMhE,oBAAY,qBAAqB;IAC/B,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED,oBAAY,yBAAyB;IACnC,OAAO,YAAY;IACnB,QAAQ,aAAa;CACtB;~~AAED~~,MAAM,WAAW,uBAAuB;IACtC,IAAI,CAAC,EAAE,qBAAqB,CAAC;IAC7B,QAAQ,CAAC,EAAE,yBAAyB,CAAC;IACrC,CAAC,CAAC,EAAE;QAAC,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAC,CAAC;~~CAClC~~;AAED;;;;;GAKG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAE/C,IAAI,EAAE,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,CAAC,CAAY;IAGtC,MAAM,EAAE,uBAAuB,CAAM;IAGrC,OAAO,CAAC,KAAK,CAAkB;IAG/B,OAAO,CAAC,CAAC,~~CAAc~~;~~IAGvB~~,OAAO,CAAC,SAAS,~~CAAa~~;~~IAE9B~~,OAAO,CAAC,KAAK,CAAsB;IACnC,OAAO,CAAC,cAAc,CAA+B;IAErD,OAAO,CAAC,WAAW;IAKV,YAAY;IAmCZ,oBAAoB;IAQ7B,OAAO,CAAC,UAAU;IAWlB,OAAO,CAAC,MAAM;IAed,OAAO,KAAK,cAAc,GAEzB;IAED,OAAO,KAAK,kBAAkB,GAE7B;IAED,OAAO,CAAC,eAAe;IAWvB,OAAO,CAAC,eAAe;IASvB,aAAa;IAab,OAAO,CAAC,OAAO;~~IAWf~~,OAAO,CAAC,cAAc;~~IASb~~,OAAO,CAAC,iBAAiB,EAAE,cAAc;IAQzC,MAAM;IAsBf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}
1	+ {"version":3,"file":"indicator-graph.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/indicator-graph/indicator-graph.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,cAAc,EAAkB,MAAM,KAAK,CAAC;AAMhE,oBAAY,qBAAqB;IAC/B,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED,oBAAY,yBAAyB;IACnC,OAAO,YAAY;IACnB,QAAQ,aAAa;CACtB;AAGD,MAAM,WAAW,uBAAuB;IACtC,IAAI,CAAC,EAAE,qBAAqB,CAAC;IAC7B,QAAQ,CAAC,EAAE,yBAAyB,CAAC;IACrC,CAAC,CAAC,EAAE;QAAC,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,YAAY,CAAC,EAAE,OAAO,CAAA;KAAC,CAAC;CAC1D;AAED;;;;;GAKG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAE/C,IAAI,EAAE,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,CAAC,CAAY;IAGtC,MAAM,EAAE,uBAAuB,CAAM;IAGrC,OAAO,CAAC,KAAK,CAAkB;IAG/B,OAAO,CAAC,CAAC,CAAiC;IAG1C,OAAO,CAAC,SAAS,CAAiC;IAElD,OAAO,CAAC,KAAK,CAAsB;IACnC,OAAO,CAAC,cAAc,CAA+B;IAErD,OAAO,CAAC,WAAW;IAKV,YAAY;IAmCZ,oBAAoB;IAQ7B,OAAO,CAAC,UAAU;IAWlB,OAAO,CAAC,MAAM;IAed,OAAO,KAAK,cAAc,GAEzB;IAED,OAAO,KAAK,kBAAkB,GAE7B;IAED,OAAO,CAAC,eAAe;IAWvB,OAAO,CAAC,eAAe;IASvB,aAAa;IAab,OAAO,CAAC,OAAO;IAef,OAAO,CAAC,cAAc;IAab,OAAO,CAAC,iBAAiB,EAAE,cAAc;IAQzC,MAAM;IAsBf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}

package/dist/navigation-instruments/indicator-graph/indicator-graph.js CHANGED Viewed

@@ -29,8 +29,8 @@ let ObcIndicatorGraph = class extends LitElement {
     super(...arguments);
     this.data = [[], []];
     this.layout = {};
-    this.y = 24;
-    this.zeroLineY = 0;
+    this.y = void 0;
+    this.zeroLineY = void 0;
     this.uplot = null;
     this.resizeObserver = null;
   }
@@ -91,7 +91,7 @@ let ObcIndicatorGraph = class extends LitElement {
     const { min: minY, max: maxY } = this.layout.y ?? {};
     const range = maxY ?? initMax - (minY ?? initMin);
     let min = minY ?? initMin - range * 0.1;
-    if (minY === void 0) {
+    if (minY === void 0 && this.layout.y?.showZeroLine !== false) {
       min = Math.min(0, min);
     }
     return [min, maxY ?? initMax + range * 0.1];
@@ -138,7 +138,11 @@ let ObcIndicatorGraph = class extends LitElement {
     }
     const lastY = this.data[1][this.data[1].length - 1];
     const yRatio = this.uplot.scales.y.valToPct(lastY);
-    this.y = yRatio * this.chart.clientHeight;
+    if (yRatio < 0 || yRatio > 1) {
+      this.y = void 0;
+    } else {
+      this.y = yRatio * this.chart.clientHeight;
+    }
     this.updateZeroLine();
   }
   updateZeroLine() {
@@ -146,6 +150,10 @@ let ObcIndicatorGraph = class extends LitElement {
       return;
     }
     const yRatio = this.uplot.scales.y.valToPct(0);
+    if (yRatio < 0 || yRatio > 1) {
+      this.zeroLineY = void 0;
+      return;
+    }
     this.zeroLineY = yRatio * this.chart.clientHeight;
   }
   updated(changedProperties) {
@@ -162,15 +170,15 @@ let ObcIndicatorGraph = class extends LitElement {
       >
         <div
           id="zero-line"
-          style="transform: translateY(${-this.zeroLineY}px);
-          display: ${this.zeroLineY > -0.5 ? "block" : "none"};
+          style="transform: translateY(${-(this.zeroLineY ?? 0)}px);
+          display: ${this.zeroLineY !== void 0 ? "block" : "none"};
           "
         ></div>
         <div
           id="dot"
-          style="transform: translateY(${-this.y}px);
-        display: ${this.y > -0.5 ? "block" : "none"};
-        "
+          style="transform: translateY(${-(this.y ?? 0)}px);
+          display: ${this.y !== void 0 ? "block" : "none"};
+          "
         ></div>
       </div>
     `;

package/dist/navigation-instruments/indicator-graph/indicator-graph.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"indicator-graph.js","sources":["../../../src/navigation-instruments/indicator-graph/indicator-graph.ts"],"sourcesContent":["import {LitElement, PropertyValues, html, unsafeCSS} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport compentStyle from './indicator-graph.css?inline';\nimport uPlot from 'uplot';\nimport {customElement} from '../../decorator.js';\n\nexport enum ObcIndicatorGraphSize {\n small = 'small',\n medium = 'medium',\n large = 'large',\n}\n\nexport enum ObcIndicatorGraphPriority {\n regular = 'regular',\n enhanced = 'enhanced',\n}\n\nexport interface ObcIndicatorGraphLayout {\n size?: ObcIndicatorGraphSize;\n priority?: ObcIndicatorGraphPriority;\n y?: {min?: number; max?: number};\n}\n\n/*\n @element obc-indicator-graph\n * @description A mini graph component\n \n @property {Array} data - The data to display in the graph, first array is the x values, second array is the y values\n /\n@customElement('obc-indicator-graph')\nexport class ObcIndicatorGraph extends LitElement {\n @property({type: Array})\n data: [number[], number[]] = [[], []];\n\n @property({type: Object})\n layout: ObcIndicatorGraphLayout = {};\n\n @query('.chart-container')\n private chart!: HTMLDivElement;\n\n @state()\n private y: number = 24;\n\n @state()\n private zeroLineY: number = 0;\n\n private uplot: uPlot \| null = null;\n private resizeObserver: ResizeObserver \| null = null;\n\n private getCssColor(name: string) {\n const color = getComputedStyle(this).getPropertyValue(name).trim();\n return color;\n }\n\n override firstUpdated() {\n const opts = {\n width: this.chart.clientWidth,\n height: this.chart.clientHeight,\n scales: {\n x: {time: false, show: false},\n y: {\n auto: true,\n show: false,\n range: this._range.bind(this),\n },\n },\n series: [\n {},\n {\n stroke: this._getStrokeColor(),\n width: this._getStrokeWidth(),\n points: {show: false},\n },\n ],\n axes: [\n {show: false},\n {ticks: {show: false}, show: false, grid: {show: false}},\n ],\n legend: {show: false},\n cursor: {show: false},\n };\n\n this.uplot = new uPlot(opts, this.data, this.chart);\n requestAnimationFrame(() => this.updateY());\n\n this.resizeObserver = new ResizeObserver(() => this.updateSize());\n this.resizeObserver.observe(this.chart);\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.resizeObserver?.disconnect();\n this.resizeObserver = null;\n this.uplot?.destroy();\n this.uplot = null;\n }\n\n private updateSize() {\n if (!this.uplot) {\n return;\n }\n this.uplot.setSize({\n width: this.chart.clientWidth,\n height: this.chart.clientHeight,\n });\n this.updateY();\n }\n\n private _range(\n _self: uPlot,\n initMin: number,\n initMax: number,\n _scaleKey: string\n ): [number, number] {\n const {min: minY, max: maxY} = this.layout.y ?? {};\n const range = maxY ?? initMax - (minY ?? initMin);\n let min = minY ?? initMin - range 0.1;\n if (minY === undefined) {\n min = Math.min(0, min);\n }\n return [min, maxY ?? initMax + range * 0.1] as [number, number];\n }\n\n private get _effectiveSize() {\n return this.layout.size ?? ObcIndicatorGraphSize.medium;\n }\n\n private get _effectivePriority() {\n return this.layout.priority ?? ObcIndicatorGraphPriority.regular;\n }\n\n private _getStrokeWidth() {\n switch (this._effectiveSize) {\n case ObcIndicatorGraphSize.small:\n return 1;\n case ObcIndicatorGraphSize.medium:\n return 1.5;\n case ObcIndicatorGraphSize.large:\n return 2;\n }\n }\n\n private _getStrokeColor() {\n switch (this._effectivePriority) {\n case ObcIndicatorGraphPriority.regular:\n return this.getCssColor('--element-neutral-color');\n case ObcIndicatorGraphPriority.enhanced:\n return this.getCssColor('--element-neutral-enhanced-color');\n }\n }\n\n updatePalette() {\n if (!this.uplot) {\n return;\n }\n const stroke = this._getStrokeColor();\n this.uplot.setSeries(1, {\n // @ts-expect-error - stroke is not a property of the Series interface\n stroke: stroke,\n width: this._getStrokeWidth(),\n points: {show: false},\n });\n }\n\n private updateY() {\n if (!this.uplot) {\n return;\n }\n const lastY = this.data[1][this.data[1].length - 1];\n // @ts-expect-error - valToPct is not a property of the Scale interface\n const yRatio = this.uplot.scales.y.valToPct(lastY);\n this.y = yRatio * this.chart.clientHeight;\n this.updateZeroLine();\n }\n\n private updateZeroLine() {\n if (!this.uplot) {\n return;\n }\n // @ts-expect-error - valToPct is not a property of the Scale interface\n const yRatio = this.uplot.scales.y.valToPct(0);\n this.zeroLineY = yRatio * this.chart.clientHeight;\n }\n\n override updated(changedProperties: PropertyValues) {\n if (changedProperties.has('data') \|\| changedProperties.has('layout')) {\n this.updatePalette();\n this.uplot?.setData(this.data);\n requestAnimationFrame(() => this.updateY());\n }\n }\n\n override render() {\n return html`\n <div\n class=\"chart-container ${this._effectivePriority} ${this\n ._effectiveSize}\"\n >\n <div\n id=\"zero-line\"\n style=\"transform: translateY(${-this.zeroLineY}px);\n display: ${this.zeroLineY > -0.5 ? 'block' : 'none'};\n \"\n ></div>\n <div\n id=\"dot\"\n style=\"transform: translateY(${-this.y}px);\n display: ${this.y > -0.5 ? 'block' : 'none'};\n \"\n ></div>\n </div>\n `;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-indicator-graph': ObcIndicatorGraph;\n }\n}\n"],"names":["ObcIndicatorGraphSize","ObcIndicatorGraphPriority"],"mappings":";;;;;;;;;;;;;;;AAMO,IAAK,0CAAAA,2BAAL;AACLA,yBAAA,OAAA,IAAQ;AACRA,yBAAA,QAAA,IAAS;AACTA,yBAAA,OAAA,IAAQ;AAHE,SAAAA;AAAA,GAAA,yBAAA,CAAA,CAAA;AAML,IAAK,8CAAAC,+BAAL;AACLA,6BAAA,SAAA,IAAU;AACVA,6BAAA,UAAA,IAAW;AAFD,SAAAA;AAAA,GAAA,6BAAA,CAAA,CAAA;AAkBL,IAAM,oBAAN,cAAgC,WAAW;AAAA,EAA3C,cAAA;AAAA,UAAA,GAAA,SAAA;AAEL,SAAA,OAA6B,CAAC,CAAA,GAAI,EAAE;AAGpC,SAAA,SAAkC,CAAA;AAMlC,SAAQ,IAAY;AAGpB,SAAQ,YAAoB;AAE5B,SAAQ,QAAsB;AAC9B,SAAQ,iBAAwC;AAAA,EAAA;AAAA,EAExC,YAAY,MAAc;AAChC,UAAM,QAAQ,iBAAiB,IAAI,EAAE,iBAAiB,IAAI,EAAE,KAAA;AAC5D,WAAO;AAAA,EACT;AAAA,EAES,eAAe;AACtB,UAAM,OAAO;AAAA,MACX,OAAO,KAAK,MAAM;AAAA,MAClB,QAAQ,KAAK,MAAM;AAAA,MACnB,QAAQ;AAAA,QACN,GAAG,EAAC,MAAM,OAAO,MAAM,MAAA;AAAA,QACvB,GAAG;AAAA,UACD,MAAM;AAAA,UACN,MAAM;AAAA,UACN,OAAO,KAAK,OAAO,KAAK,IAAI;AAAA,QAAA;AAAA,MAC9B;AAAA,MAEF,QAAQ;AAAA,QACN,CAAA;AAAA,QACA;AAAA,UACE,QAAQ,KAAK,gBAAA;AAAA,UACb,OAAO,KAAK,gBAAA;AAAA,UACZ,QAAQ,EAAC,MAAM,MAAA;AAAA,QAAK;AAAA,MACtB;AAAA,MAEF,MAAM;AAAA,QACJ,EAAC,MAAM,MAAA;AAAA,QACP,EAAC,OAAO,EAAC,MAAM,MAAA,GAAQ,MAAM,OAAO,MAAM,EAAC,MAAM,MAAA,EAAK;AAAA,MAAC;AAAA,MAEzD,QAAQ,EAAC,MAAM,MAAA;AAAA,MACf,QAAQ,EAAC,MAAM,MAAA;AAAA,IAAK;AAGtB,SAAK,QAAQ,IAAI,MAAM,MAAM,KAAK,MAAM,KAAK,KAAK;AAClD,0BAAsB,MAAM,KAAK,SAAS;AAE1C,SAAK,iBAAiB,IAAI,eAAe,MAAM,KAAK,YAAY;AAChE,SAAK,eAAe,QAAQ,KAAK,KAAK;AAAA,EACxC;AAAA,EAES,uBAAuB;AAC9B,UAAM,qBAAA;AACN,SAAK,gBAAgB,WAAA;AACrB,SAAK,iBAAiB;AACtB,SAAK,OAAO,QAAA;AACZ,SAAK,QAAQ;AAAA,EACf;AAAA,EAEQ,aAAa;AACnB,QAAI,CAAC,KAAK,OAAO;AACf;AAAA,IACF;AACA,SAAK,MAAM,QAAQ;AAAA,MACjB,OAAO,KAAK,MAAM;AAAA,MAClB,QAAQ,KAAK,MAAM;AAAA,IAAA,CACpB;AACD,SAAK,QAAA;AAAA,EACP;AAAA,EAEQ,OACN,OACA,SACA,SACA,WACkB;AAClB,UAAM,EAAC,KAAK,MAAM,KAAK,SAAQ,KAAK,OAAO,KAAK,CAAA;AAChD,UAAM,QAAQ,QAAQ,WAAW,QAAQ;AACzC,QAAI,MAAM,QAAQ,UAAU,QAAQ;AACpC,QAAI,SAAS,QAAW;AACtB,YAAM,KAAK,IAAI,GAAG,GAAG;AAAA,IACvB;AACA,WAAO,CAAC,KAAK,QAAQ,UAAU,QAAQ,GAAG;AAAA,EAC5C;AAAA,EAEA,IAAY,iBAAiB;AAC3B,WAAO,KAAK,OAAO,QAAQ;AAAA,EAC7B;AAAA,EAEA,IAAY,qBAAqB;AAC/B,WAAO,KAAK,OAAO,YAAY;AAAA,EACjC;AAAA,EAEQ,kBAAkB;AACxB,YAAQ,KAAK,gBAAA;AAAA,MACX,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,IAAA;AAAA,EAEb;AAAA,EAEQ,kBAAkB;AACxB,YAAQ,KAAK,oBAAA;AAAA,MACX,KAAK;AACH,eAAO,KAAK,YAAY,yBAAyB;AAAA,MACnD,KAAK;AACH,eAAO,KAAK,YAAY,kCAAkC;AAAA,IAAA;AAAA,EAEhE;AAAA,EAEA,gBAAgB;AACd,QAAI,CAAC,KAAK,OAAO;AACf;AAAA,IACF;AACA,UAAM,SAAS,KAAK,gBAAA;AACpB,SAAK,MAAM,UAAU,GAAG;AAAA;AAAA,MAEtB;AAAA,MACA,OAAO,KAAK,gBAAA;AAAA,MACZ,QAAQ,EAAC,MAAM,MAAA;AAAA,IAAK,CACrB;AAAA,EACH;AAAA,EAEQ,UAAU;AAChB,QAAI,CAAC,KAAK,OAAO;AACf;AAAA,IACF;AACA,UAAM,QAAQ,KAAK,KAAK,CAAC,EAAE,KAAK,KAAK,CAAC,EAAE,SAAS,CAAC;AAElD,UAAM,SAAS,KAAK,MAAM,OAAO,EAAE,SAAS,KAAK;AACjD,SAAK,IAAI,SAAS,KAAK,MAAM;AAC7B,SAAK,eAAA;AAAA,EACP;AAAA,EAEQ,iBAAiB;AACvB,QAAI,CAAC,KAAK,OAAO;AACf;AAAA,IACF;AAEA,UAAM,SAAS,KAAK,MAAM,OAAO,EAAE,SAAS,CAAC;AAC7C,SAAK,YAAY,SAAS,KAAK,MAAM;AAAA,EACvC;AAAA,EAES,QAAQ,mBAAmC;AAClD,QAAI,kBAAkB,IAAI,MAAM,KAAK,kBAAkB,IAAI,QAAQ,GAAG;AACpE,WAAK,cAAA;AACL,WAAK,OAAO,QAAQ,KAAK,IAAI;AAC7B,4BAAsB,MAAM,KAAK,SAAS;AAAA,IAC5C;AAAA,EACF;AAAA,EAES,SAAS;AAChB,WAAO;AAAA;AAAA,iCAEsB,KAAK,kBAAkB,IAAI,KACjD,cAAc;AAAA;AAAA;AAAA;AAAA,yCAIgB,CAAC,KAAK,SAAS;AAAA,qBACnC,KAAK,YAAY,OAAO,UAAU,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,yCAKpB,CAAC,KAAK,CAAC;AAAA,mBAC7B,KAAK,IAAI,OAAO,UAAU,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,EAKjD;AAGF;AAzLa,kBAwLK,SAAS,UAAU,YAAY;AAtL/C,gBAAA;AAAA,EADC,SAAS,EAAC,MAAM,MAAA,CAAM;AAAA,GADZ,kBAEX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAJb,kBAKX,WAAA,UAAA,CAAA;AAGQ,gBAAA;AAAA,EADP,MAAM,kBAAkB;AAAA,GAPd,kBAQH,WAAA,SAAA,CAAA;AAGA,gBAAA;AAAA,EADP,MAAA;AAAM,GAVI,kBAWH,WAAA,KAAA,CAAA;AAGA,gBAAA;AAAA,EADP,MAAA;AAAM,GAbI,kBAcH,WAAA,aAAA,CAAA;AAdG,oBAAN,gBAAA;AAAA,EADN,cAAc,qBAAqB;AAAA,GACvB,iBAAA;"}
1	+ {"version":3,"file":"indicator-graph.js","sources":["../../../src/navigation-instruments/indicator-graph/indicator-graph.ts"],"sourcesContent":["import {LitElement, PropertyValues, html, unsafeCSS} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport compentStyle from './indicator-graph.css?inline';\nimport uPlot from 'uplot';\nimport {customElement} from '../../decorator.js';\n\nexport enum ObcIndicatorGraphSize {\n small = 'small',\n medium = 'medium',\n large = 'large',\n}\n\nexport enum ObcIndicatorGraphPriority {\n regular = 'regular',\n enhanced = 'enhanced',\n}\n\n// showZeroLine is defaulted to true\nexport interface ObcIndicatorGraphLayout {\n size?: ObcIndicatorGraphSize;\n priority?: ObcIndicatorGraphPriority;\n y?: {min?: number; max?: number; showZeroLine?: boolean};\n}\n\n/*\n @element obc-indicator-graph\n * @description A mini graph component\n \n @property {Array} data - The data to display in the graph, first array is the x values, second array is the y values\n /\n@customElement('obc-indicator-graph')\nexport class ObcIndicatorGraph extends LitElement {\n @property({type: Array})\n data: [number[], number[]] = [[], []];\n\n @property({type: Object})\n layout: ObcIndicatorGraphLayout = {};\n\n @query('.chart-container')\n private chart!: HTMLDivElement;\n\n @state()\n private y: number \| undefined = undefined;\n\n @state()\n private zeroLineY: number \| undefined = undefined;\n\n private uplot: uPlot \| null = null;\n private resizeObserver: ResizeObserver \| null = null;\n\n private getCssColor(name: string) {\n const color = getComputedStyle(this).getPropertyValue(name).trim();\n return color;\n }\n\n override firstUpdated() {\n const opts = {\n width: this.chart.clientWidth,\n height: this.chart.clientHeight,\n scales: {\n x: {time: false, show: false},\n y: {\n auto: true,\n show: false,\n range: this._range.bind(this),\n },\n },\n series: [\n {},\n {\n stroke: this._getStrokeColor(),\n width: this._getStrokeWidth(),\n points: {show: false},\n },\n ],\n axes: [\n {show: false},\n {ticks: {show: false}, show: false, grid: {show: false}},\n ],\n legend: {show: false},\n cursor: {show: false},\n };\n\n this.uplot = new uPlot(opts, this.data, this.chart);\n requestAnimationFrame(() => this.updateY());\n\n this.resizeObserver = new ResizeObserver(() => this.updateSize());\n this.resizeObserver.observe(this.chart);\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.resizeObserver?.disconnect();\n this.resizeObserver = null;\n this.uplot?.destroy();\n this.uplot = null;\n }\n\n private updateSize() {\n if (!this.uplot) {\n return;\n }\n this.uplot.setSize({\n width: this.chart.clientWidth,\n height: this.chart.clientHeight,\n });\n this.updateY();\n }\n\n private _range(\n _self: uPlot,\n initMin: number,\n initMax: number,\n _scaleKey: string\n ): [number, number] {\n const {min: minY, max: maxY} = this.layout.y ?? {};\n const range = maxY ?? initMax - (minY ?? initMin);\n let min = minY ?? initMin - range 0.1;\n if (minY === undefined && this.layout.y?.showZeroLine !== false) {\n min = Math.min(0, min);\n }\n return [min, maxY ?? initMax + range * 0.1] as [number, number];\n }\n\n private get _effectiveSize() {\n return this.layout.size ?? ObcIndicatorGraphSize.medium;\n }\n\n private get _effectivePriority() {\n return this.layout.priority ?? ObcIndicatorGraphPriority.regular;\n }\n\n private _getStrokeWidth() {\n switch (this._effectiveSize) {\n case ObcIndicatorGraphSize.small:\n return 1;\n case ObcIndicatorGraphSize.medium:\n return 1.5;\n case ObcIndicatorGraphSize.large:\n return 2;\n }\n }\n\n private _getStrokeColor() {\n switch (this._effectivePriority) {\n case ObcIndicatorGraphPriority.regular:\n return this.getCssColor('--element-neutral-color');\n case ObcIndicatorGraphPriority.enhanced:\n return this.getCssColor('--element-neutral-enhanced-color');\n }\n }\n\n updatePalette() {\n if (!this.uplot) {\n return;\n }\n const stroke = this._getStrokeColor();\n this.uplot.setSeries(1, {\n // @ts-expect-error - stroke is not a property of the Series interface\n stroke: stroke,\n width: this._getStrokeWidth(),\n points: {show: false},\n });\n }\n\n private updateY() {\n if (!this.uplot) {\n return;\n }\n const lastY = this.data[1][this.data[1].length - 1];\n // @ts-expect-error - valToPct is not a property of the Scale interface\n const yRatio = this.uplot.scales.y.valToPct(lastY);\n if (yRatio < 0 \|\| yRatio > 1) {\n this.y = undefined;\n } else {\n this.y = yRatio * this.chart.clientHeight;\n }\n this.updateZeroLine();\n }\n\n private updateZeroLine() {\n if (!this.uplot) {\n return;\n }\n // @ts-expect-error - valToPct is not a property of the Scale interface\n const yRatio = this.uplot.scales.y.valToPct(0);\n if (yRatio < 0 \|\| yRatio > 1) {\n this.zeroLineY = undefined;\n return;\n }\n this.zeroLineY = yRatio * this.chart.clientHeight;\n }\n\n override updated(changedProperties: PropertyValues) {\n if (changedProperties.has('data') \|\| changedProperties.has('layout')) {\n this.updatePalette();\n this.uplot?.setData(this.data);\n requestAnimationFrame(() => this.updateY());\n }\n }\n\n override render() {\n return html`\n <div\n class=\"chart-container ${this._effectivePriority} ${this\n ._effectiveSize}\"\n >\n <div\n id=\"zero-line\"\n style=\"transform: translateY(${-(this.zeroLineY ?? 0)}px);\n display: ${this.zeroLineY !== undefined ? 'block' : 'none'};\n \"\n ></div>\n <div\n id=\"dot\"\n style=\"transform: translateY(${-(this.y ?? 0)}px);\n display: ${this.y !== undefined ? 'block' : 'none'};\n \"\n ></div>\n </div>\n `;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-indicator-graph': ObcIndicatorGraph;\n }\n}\n"],"names":["ObcIndicatorGraphSize","ObcIndicatorGraphPriority"],"mappings":";;;;;;;;;;;;;;;AAMO,IAAK,0CAAAA,2BAAL;AACLA,yBAAA,OAAA,IAAQ;AACRA,yBAAA,QAAA,IAAS;AACTA,yBAAA,OAAA,IAAQ;AAHE,SAAAA;AAAA,GAAA,yBAAA,CAAA,CAAA;AAML,IAAK,8CAAAC,+BAAL;AACLA,6BAAA,SAAA,IAAU;AACVA,6BAAA,UAAA,IAAW;AAFD,SAAAA;AAAA,GAAA,6BAAA,CAAA,CAAA;AAmBL,IAAM,oBAAN,cAAgC,WAAW;AAAA,EAA3C,cAAA;AAAA,UAAA,GAAA,SAAA;AAEL,SAAA,OAA6B,CAAC,CAAA,GAAI,EAAE;AAGpC,SAAA,SAAkC,CAAA;AAMlC,SAAQ,IAAwB;AAGhC,SAAQ,YAAgC;AAExC,SAAQ,QAAsB;AAC9B,SAAQ,iBAAwC;AAAA,EAAA;AAAA,EAExC,YAAY,MAAc;AAChC,UAAM,QAAQ,iBAAiB,IAAI,EAAE,iBAAiB,IAAI,EAAE,KAAA;AAC5D,WAAO;AAAA,EACT;AAAA,EAES,eAAe;AACtB,UAAM,OAAO;AAAA,MACX,OAAO,KAAK,MAAM;AAAA,MAClB,QAAQ,KAAK,MAAM;AAAA,MACnB,QAAQ;AAAA,QACN,GAAG,EAAC,MAAM,OAAO,MAAM,MAAA;AAAA,QACvB,GAAG;AAAA,UACD,MAAM;AAAA,UACN,MAAM;AAAA,UACN,OAAO,KAAK,OAAO,KAAK,IAAI;AAAA,QAAA;AAAA,MAC9B;AAAA,MAEF,QAAQ;AAAA,QACN,CAAA;AAAA,QACA;AAAA,UACE,QAAQ,KAAK,gBAAA;AAAA,UACb,OAAO,KAAK,gBAAA;AAAA,UACZ,QAAQ,EAAC,MAAM,MAAA;AAAA,QAAK;AAAA,MACtB;AAAA,MAEF,MAAM;AAAA,QACJ,EAAC,MAAM,MAAA;AAAA,QACP,EAAC,OAAO,EAAC,MAAM,MAAA,GAAQ,MAAM,OAAO,MAAM,EAAC,MAAM,MAAA,EAAK;AAAA,MAAC;AAAA,MAEzD,QAAQ,EAAC,MAAM,MAAA;AAAA,MACf,QAAQ,EAAC,MAAM,MAAA;AAAA,IAAK;AAGtB,SAAK,QAAQ,IAAI,MAAM,MAAM,KAAK,MAAM,KAAK,KAAK;AAClD,0BAAsB,MAAM,KAAK,SAAS;AAE1C,SAAK,iBAAiB,IAAI,eAAe,MAAM,KAAK,YAAY;AAChE,SAAK,eAAe,QAAQ,KAAK,KAAK;AAAA,EACxC;AAAA,EAES,uBAAuB;AAC9B,UAAM,qBAAA;AACN,SAAK,gBAAgB,WAAA;AACrB,SAAK,iBAAiB;AACtB,SAAK,OAAO,QAAA;AACZ,SAAK,QAAQ;AAAA,EACf;AAAA,EAEQ,aAAa;AACnB,QAAI,CAAC,KAAK,OAAO;AACf;AAAA,IACF;AACA,SAAK,MAAM,QAAQ;AAAA,MACjB,OAAO,KAAK,MAAM;AAAA,MAClB,QAAQ,KAAK,MAAM;AAAA,IAAA,CACpB;AACD,SAAK,QAAA;AAAA,EACP;AAAA,EAEQ,OACN,OACA,SACA,SACA,WACkB;AAClB,UAAM,EAAC,KAAK,MAAM,KAAK,SAAQ,KAAK,OAAO,KAAK,CAAA;AAChD,UAAM,QAAQ,QAAQ,WAAW,QAAQ;AACzC,QAAI,MAAM,QAAQ,UAAU,QAAQ;AACpC,QAAI,SAAS,UAAa,KAAK,OAAO,GAAG,iBAAiB,OAAO;AAC/D,YAAM,KAAK,IAAI,GAAG,GAAG;AAAA,IACvB;AACA,WAAO,CAAC,KAAK,QAAQ,UAAU,QAAQ,GAAG;AAAA,EAC5C;AAAA,EAEA,IAAY,iBAAiB;AAC3B,WAAO,KAAK,OAAO,QAAQ;AAAA,EAC7B;AAAA,EAEA,IAAY,qBAAqB;AAC/B,WAAO,KAAK,OAAO,YAAY;AAAA,EACjC;AAAA,EAEQ,kBAAkB;AACxB,YAAQ,KAAK,gBAAA;AAAA,MACX,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,IAAA;AAAA,EAEb;AAAA,EAEQ,kBAAkB;AACxB,YAAQ,KAAK,oBAAA;AAAA,MACX,KAAK;AACH,eAAO,KAAK,YAAY,yBAAyB;AAAA,MACnD,KAAK;AACH,eAAO,KAAK,YAAY,kCAAkC;AAAA,IAAA;AAAA,EAEhE;AAAA,EAEA,gBAAgB;AACd,QAAI,CAAC,KAAK,OAAO;AACf;AAAA,IACF;AACA,UAAM,SAAS,KAAK,gBAAA;AACpB,SAAK,MAAM,UAAU,GAAG;AAAA;AAAA,MAEtB;AAAA,MACA,OAAO,KAAK,gBAAA;AAAA,MACZ,QAAQ,EAAC,MAAM,MAAA;AAAA,IAAK,CACrB;AAAA,EACH;AAAA,EAEQ,UAAU;AAChB,QAAI,CAAC,KAAK,OAAO;AACf;AAAA,IACF;AACA,UAAM,QAAQ,KAAK,KAAK,CAAC,EAAE,KAAK,KAAK,CAAC,EAAE,SAAS,CAAC;AAElD,UAAM,SAAS,KAAK,MAAM,OAAO,EAAE,SAAS,KAAK;AACjD,QAAI,SAAS,KAAK,SAAS,GAAG;AAC5B,WAAK,IAAI;AAAA,IACX,OAAO;AACL,WAAK,IAAI,SAAS,KAAK,MAAM;AAAA,IAC/B;AACA,SAAK,eAAA;AAAA,EACP;AAAA,EAEQ,iBAAiB;AACvB,QAAI,CAAC,KAAK,OAAO;AACf;AAAA,IACF;AAEA,UAAM,SAAS,KAAK,MAAM,OAAO,EAAE,SAAS,CAAC;AAC7C,QAAI,SAAS,KAAK,SAAS,GAAG;AAC5B,WAAK,YAAY;AACjB;AAAA,IACF;AACA,SAAK,YAAY,SAAS,KAAK,MAAM;AAAA,EACvC;AAAA,EAES,QAAQ,mBAAmC;AAClD,QAAI,kBAAkB,IAAI,MAAM,KAAK,kBAAkB,IAAI,QAAQ,GAAG;AACpE,WAAK,cAAA;AACL,WAAK,OAAO,QAAQ,KAAK,IAAI;AAC7B,4BAAsB,MAAM,KAAK,SAAS;AAAA,IAC5C;AAAA,EACF;AAAA,EAES,SAAS;AAChB,WAAO;AAAA;AAAA,iCAEsB,KAAK,kBAAkB,IAAI,KACjD,cAAc;AAAA;AAAA;AAAA;AAAA,yCAIgB,EAAE,KAAK,aAAa,EAAE;AAAA,qBAC1C,KAAK,cAAc,SAAY,UAAU,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,yCAK3B,EAAE,KAAK,KAAK,EAAE;AAAA,qBAClC,KAAK,MAAM,SAAY,UAAU,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,EAK1D;AAGF;AAjMa,kBAgMK,SAAS,UAAU,YAAY;AA9L/C,gBAAA;AAAA,EADC,SAAS,EAAC,MAAM,MAAA,CAAM;AAAA,GADZ,kBAEX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAJb,kBAKX,WAAA,UAAA,CAAA;AAGQ,gBAAA;AAAA,EADP,MAAM,kBAAkB;AAAA,GAPd,kBAQH,WAAA,SAAA,CAAA;AAGA,gBAAA;AAAA,EADP,MAAA;AAAM,GAVI,kBAWH,WAAA,KAAA,CAAA;AAGA,gBAAA;AAAA,EADP,MAAA;AAAM,GAbI,kBAcH,WAAA,aAAA,CAAA;AAdG,oBAAN,gBAAA;AAAA,EADN,cAAc,qBAAqB;AAAA,GACvB,iBAAA;"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents-full-bundle",
-  "version": "2.0.0-next.68",
+  "version": "2.0.0-next.70",
   "type": "module",
   "repository": {
     "type": "git",

package/src/integration-systems/integration-vessel-menu/integration-vessel-menu.css CHANGED Viewed

@@ -42,10 +42,6 @@
   border-radius: 8px;
 }
-.footer-container slot[name="buttons"]::slotted(:not(obc-button)) {
-  display: contents;
-}
 .footer-container slot[name="buttons"]::slotted(*) {
   display: flex;
   flex: 1 1 0px;
@@ -53,6 +49,13 @@
   white-space: nowrap;
 }
+.footer-container slot[name="buttons"]::slotted(:not(obc-button)) {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(auto, 1fr);
+  gap: var(--app-components-integration-system-menu-action-spacing);
+}
 .buttons-slot {
   display: contents;
 }

package/src/integration-systems/integration-vessel-menu/integration-vessel-menu.stories.ts CHANGED Viewed

@@ -195,6 +195,25 @@ const templateWithoutAlarms: IntegrationVesselMenuTemplate = (args) => html`
   </obc-integration-vessel-menu>
 `;
+const templateWrappedButtons: IntegrationVesselMenuTemplate = (args) => html`
+  <obc-integration-vessel-menu .hideAlarmList=${args.hideAlarmList}>
+    <div slot="buttons">
+      <div style="display: contents;">
+        <obc-button ?fullWidth=${true}>Open</obc-button>
+      </div>
+      <div style="display: contents;">
+        <obc-button ?fullWidth=${true}>Alerts</obc-button>
+      </div>
+    </div>
+    <div slot="content" style="padding: 24px;">
+      <div style="width: 320px;">
+        <p>Content area</p>
+      </div>
+    </div>
+    ${renderAlarms()}
+  </obc-integration-vessel-menu>
+`;
 export const Default: Story = {
   render: template,
 };
@@ -207,3 +226,7 @@ export const WithoutAlarmsHideEmptyAlarmList: Story = {
   render: templateWithoutAlarms,
   args: {hideAlarmList: true},
 };
+export const WithButtonsWrappedInDivWithoutStyling: Story = {
+  render: templateWrappedButtons,
+};

package/src/navigation-instruments/indicator-graph/indicator-graph.stories.ts CHANGED Viewed

@@ -30,6 +30,14 @@ type Story = StoryObj<ObcIndicatorGraph>;
 export const Primary: Story = {};
+export const NoZeroLine: Story = {
+  args: {
+    layout: {
+      y: {showZeroLine: false},
+    },
+  },
+};
 export const WithRange: Story = {
   args: {
     layout: {
@@ -114,3 +122,15 @@ export const Realtime: Story = {
     }, 1000 / 60);
   },
 };
+export const BelowZero: Story = {
+  args: {
+    data: [
+      Array.from({length: 30}, (_, i) => i),
+      Array.from({length: 30}, (_, i) => -2 - Math.sin((i / 30) * 2 * Math.PI)),
+    ],
+    layout: {
+      y: {min: -10, max: 0},
+    },
+  },
+};

package/src/navigation-instruments/indicator-graph/indicator-graph.ts CHANGED Viewed

@@ -15,10 +15,11 @@ export enum ObcIndicatorGraphPriority {
   enhanced = 'enhanced',
 }
+// showZeroLine is defaulted to true
 export interface ObcIndicatorGraphLayout {
   size?: ObcIndicatorGraphSize;
   priority?: ObcIndicatorGraphPriority;
-  y?: {min?: number; max?: number};
+  y?: {min?: number; max?: number; showZeroLine?: boolean};
 }
 /**
@@ -39,10 +40,10 @@ export class ObcIndicatorGraph extends LitElement {
   private chart!: HTMLDivElement;
   @state()
-  private y: number = 24;
+  private y: number | undefined = undefined;
   @state()
-  private zeroLineY: number = 0;
+  private zeroLineY: number | undefined = undefined;
   private uplot: uPlot | null = null;
   private resizeObserver: ResizeObserver | null = null;
@@ -115,7 +116,7 @@ export class ObcIndicatorGraph extends LitElement {
     const {min: minY, max: maxY} = this.layout.y ?? {};
     const range = maxY ?? initMax - (minY ?? initMin);
     let min = minY ?? initMin - range * 0.1;
-    if (minY === undefined) {
+    if (minY === undefined && this.layout.y?.showZeroLine !== false) {
       min = Math.min(0, min);
     }
     return [min, maxY ?? initMax + range * 0.1] as [number, number];
@@ -169,7 +170,11 @@ export class ObcIndicatorGraph extends LitElement {
     const lastY = this.data[1][this.data[1].length - 1];
     // @ts-expect-error - valToPct is not a property of the Scale interface
     const yRatio = this.uplot.scales.y.valToPct(lastY);
-    this.y = yRatio * this.chart.clientHeight;
+    if (yRatio < 0 || yRatio > 1) {
+      this.y = undefined;
+    } else {
+      this.y = yRatio * this.chart.clientHeight;
+    }
     this.updateZeroLine();
   }
@@ -179,6 +184,10 @@ export class ObcIndicatorGraph extends LitElement {
     }
     // @ts-expect-error - valToPct is not a property of the Scale interface
     const yRatio = this.uplot.scales.y.valToPct(0);
+    if (yRatio < 0 || yRatio > 1) {
+      this.zeroLineY = undefined;
+      return;
+    }
     this.zeroLineY = yRatio * this.chart.clientHeight;
   }
@@ -198,15 +207,15 @@ export class ObcIndicatorGraph extends LitElement {
       >
         <div
           id="zero-line"
-          style="transform: translateY(${-this.zeroLineY}px);
-          display: ${this.zeroLineY > -0.5 ? 'block' : 'none'};
+          style="transform: translateY(${-(this.zeroLineY ?? 0)}px);
+          display: ${this.zeroLineY !== undefined ? 'block' : 'none'};
           "
         ></div>
         <div
           id="dot"
-          style="transform: translateY(${-this.y}px);
-        display: ${this.y > -0.5 ? 'block' : 'none'};
-        "
+          style="transform: translateY(${-(this.y ?? 0)}px);
+          display: ${this.y !== undefined ? 'block' : 'none'};
+          "
         ></div>
       </div>
     `;