@oicl/openbridge-webcomponents 2.0.0-next.76 → 2.0.0-next.78

package/bundle/openbridge-webcomponents.bundle.js

@@ -16803,6 +16803,7 @@ var AutomationButtonLabelDirection = /* @__PURE__ */ ((AutomationButtonLabelDire
   AutomationButtonLabelDirection2["down"] = "down";
   AutomationButtonLabelDirection2["left"] = "left";
   AutomationButtonLabelDirection2["right"] = "right";
+  AutomationButtonLabelDirection2["none"] = "none";
   return AutomationButtonLabelDirection2;
 })(AutomationButtonLabelDirection || {});
 var AutomationButtonOrientation = /* @__PURE__ */ ((AutomationButtonOrientation2) => {
@@ -18356,7 +18357,7 @@ let ObcAnalogValve = class extends ObcAbstractAutomationButton {
       return [
         {
           type: "value",
-          icon: "arrow",
+          icon: this.labelDirection === AutomationButtonLabelDirection.none ? "none" : "arrow",
           value: this.value,
           nDigits: 3,
           unit: "%",
@@ -18447,7 +18448,7 @@ class ObcAbstractAutomationButtonMotorized extends ObcAbstractAutomationButton {
           nDigits: this.speedMaxDigits,
           unit: this.speedUnit,
           direction: this.labelDirection,
-          icon: "chevron"
+          icon: this.labelDirection === AutomationButtonLabelDirection.none ? "none" : "chevron"
         }
       ];
     } else if (!this.on) {
@@ -51295,6 +51296,10 @@ const compentStyle$14 = i$7`
   box-sizing: border-box;
 }
 
+:host {
+  overflow: hidden;
+}
+
 .label {
   font-family: var(--global-typography-font-family);
   font-weight: var(--global-typography-ui-body-font-weight);
@@ -212827,12 +212832,21 @@ const componentStyle$9 = i$7`
 }
 
 /* Host takes each sector's crop aspect (see \`sectorClips\`): 270/90 square, 180
-   wide — so the dial is the same size at any width. */
+   wide — so the dial is the same size at any width.
+
+   \`width\`/\`height: auto\` + \`max-width\`/\`max-height: 100%\` makes the host the
+   largest box of the sector's aspect ratio that fits inside *both* the
+   available width and height. Using \`height: auto\` alone only honours the
+   width, so in a short, wide (e.g. flex) container the square would grow as
+   tall as it is wide and overflow — see issue #992. */
 
 :host([sector="270"]),
 :host([sector="90-left"]),
 :host([sector="90-right"]) {
+  width: auto;
   height: auto;
+  max-width: 100%;
+  max-height: 100%;
   aspect-ratio: 1;
 }
 
@@ -212840,7 +212854,10 @@ const componentStyle$9 = i$7`
    sync with \`sectorClips\` bottom=44 in gauge-radial.ts. */
 
 :host([sector="180"]) {
+  width: auto;
   height: auto;
+  max-width: 100%;
+  max-height: 100%;
   aspect-ratio: 448 / 251;
 }
 
@@ -219118,10 +219135,36 @@ const compentStyle$7 = i$7`
 .chart-container {
   width: 100%;
   height: 100%;
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
+
+  padding-bottom: 0.5px;
+
+  --dot-width: 6px;
+  --dot-radius: calc(var(--dot-width) / 2);
+}
+
+.chart-container.medium {
+    --dot-width: 8px;
+  }
+
+.chart-container.large {
+    --dot-width: 10px;
+  }
+
+.u-over {
+  position: absolute;
+}
+
+#chart {
+  position: absolute;
+  width: calc(100% - var(--dot-radius));
+  left: 0;
+  top: var(--dot-radius);
+  bottom: var(--dot-radius);
 }
 
 canvas {
@@ -219133,11 +219176,12 @@ canvas {
 }
 
 #dot {
+  box-sizing: border-box;
   position: absolute;
-  width: 4px;
-  height: 4px;
-  right: -3px;
-  bottom: -3px;
+  width: var(--dot-width);
+  height: var(--dot-width);
+  right: 0;
+  bottom: 0;
   border-radius: 50%;
   background: var(--element-neutral-color);
   border: 1px solid var(--border-silhouette-color);
@@ -219148,25 +219192,12 @@ canvas {
   background: var(--element-neutral-enhanced-color);
 }
 
-.medium #dot {
-  width: 6px;
-  height: 6px;
-  right: -4px;
-  bottom: -4px;
-}
-
-.large #dot {
-  width: 8px;
-  height: 8px;
-  right: -5px;
-  bottom: -5px;
-}
-
 #zero-line {
   position: absolute;
-  width: 100%;
+  left: 0;
+  right: var(--dot-radius);
   height: 1px;
-  bottom: -0.5px;
+  bottom: calc(var(--dot-radius) - 0.5px);
   background: var(--element-disabled-color);
   border-radius: 2px;
 }
@@ -219322,6 +219353,7 @@ let ObcIndicatorGraph = class extends i$4 {
       <div
         class="chart-container ${this._effectivePriority} ${this._effectiveSize}"
       >
+        <div id="chart"></div>
         <div
           id="zero-line"
           style="transform: translateY(${-(this.zeroLineY ?? 0)}px);
@@ -219346,7 +219378,7 @@ __decorateClass$p([
   n$3({ type: Object })
 ], ObcIndicatorGraph.prototype, "layout", 2);
 __decorateClass$p([
-  e$3(".chart-container")
+  e$3("#chart")
 ], ObcIndicatorGraph.prototype, "chart", 2);
 __decorateClass$p([
   r$3()