@oicl/openbridge-webcomponents 2.0.0-next.87 → 2.0.0-next.88

package/bundle/openbridge-webcomponents.bundle.js

@@ -212819,48 +212819,74 @@ const componentStyle$9 = i$7`* {
   height: 100%;
 }
 
-/* Host takes each sector's crop aspect (see \`sectorClips\`): 270/90 square, 180
-   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"]) {
+.gauge-radial-root {
+  /* Readout vertical placement per layout (% of the cropped box), tuned to the
+     watch geometry — re-check if the ring radii or the 448 box change. Which
+     layout uses which is in renderReadouts(). */
+  --readout-meta-top: 72%;
+  --readout-meta-top-needle: 63%;
+  --readout-meta-top-180: 60%;
+
+  position: relative;
+
+  /* The dial is the largest box of its sector's aspect ratio that fits inside
+     *both* the available width and height of the (full-size) host. \`width: auto\`
+     stretches the block to the host width, then \`aspect-ratio\` + \`max-height\`
+     transfer the constraint back, shrinking it to fit a short host too — see
+     issue #992. The host always fills its container, so the gauge can be
+     positioned within the leftover space via the alignment classes below. */
   width: auto;
   height: auto;
   max-width: 100%;
   max-height: 100%;
   aspect-ratio: 1;
-}
 
-/* 448 / 251 = the 180° crop's aspect (448 wide × 448·(1 − 44%) tall); keep in
-   sync with \`sectorClips\` bottom=44 in gauge-radial.ts. */
+  /* Defaults (centered both ways); overridden by the halign-* / valign-*
+     classes. Horizontal alignment uses auto margins (which reference the host
+     width); vertical alignment uses a relative \`top\` offset (which references
+     the definite host height) plus a self-sized \`translateY\`. */
+  margin-left: auto;
+  margin-right: auto;
+  top: 50%;
+  transform: translateY(-50%);
 
-:host([sector="180"]) {
-  width: auto;
-  height: auto;
-  max-width: 100%;
-  max-height: 100%;
-  aspect-ratio: 448 / 251;
+  /* 448 / 251 = the 180° crop's aspect (448 wide × 448·(1 − 44%) tall); keep in
+     sync with \`sectorClips\` bottom=44 in gauge-radial.ts. */
 }
 
-.gauge-radial-root {
-  /* Readout vertical placement per layout (% of the cropped host), tuned to the
-     watch geometry — re-check if the ring radii or the 448 box change. Which
-     layout uses which is in renderReadouts(). */
-  --readout-meta-top: 72%;
-  --readout-meta-top-needle: 63%;
-  --readout-meta-top-180: 60%;
+.gauge-radial-root.sector-180 {
+    aspect-ratio: 448 / 251;
+  }
 
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
+.gauge-radial-root.halign-left {
+    margin-left: 0;
+    margin-right: auto;
+  }
+
+.gauge-radial-root.halign-center {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+.gauge-radial-root.halign-right {
+    margin-left: auto;
+    margin-right: 0;
+  }
+
+.gauge-radial-root.valign-top {
+    top: 0;
+    transform: translateY(0);
+  }
+
+.gauge-radial-root.valign-center {
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+.gauge-radial-root.valign-bottom {
+    top: 100%;
+    transform: translateY(-100%);
+  }
 
 .gauge-radial-root .gauge-readout-value {
     position: absolute;
@@ -212941,6 +212967,8 @@ let ObcGaugeRadial = class extends SetpointMixin(i$4) {
     this.tickmarkStyle = TickmarkStyle$1.regular;
     this.advices = [];
     this.sector = "270";
+    this.horizontalAlignment = "center";
+    this.verticalAlignment = "center";
     this.hasReadout = false;
     this.label = "";
     this.unit = "";
@@ -213056,8 +213084,9 @@ let ObcGaugeRadial = class extends SetpointMixin(i$4) {
       "type-needle": this.type === "needle",
       "sector-180": this.sector === "180",
       "sector-90-left": this.sector === "90-left",
-      "sector-90-right": this.sector === "90-right"
-      /* deg90Right */
+      "sector-90-right": this.sector === "90-right",
+      [`halign-${this.horizontalAlignment}`]: true,
+      [`valign-${this.verticalAlignment}`]: true
     })}
       >
         <obc-instrument-radial
@@ -213139,6 +213168,12 @@ __decorateClass$x([
 __decorateClass$x([
   n$3({ type: String, reflect: true })
 ], ObcGaugeRadial.prototype, "sector", 2);
+__decorateClass$x([
+  n$3({ type: String })
+], ObcGaugeRadial.prototype, "horizontalAlignment", 2);
+__decorateClass$x([
+  n$3({ type: String })
+], ObcGaugeRadial.prototype, "verticalAlignment", 2);
 __decorateClass$x([
   n$3({ type: Boolean })
 ], ObcGaugeRadial.prototype, "hasReadout", 2);