@oicl/openbridge-webcomponents 2.1.0-next.3 → 2.1.0-next.4

package/dist/automation/valve-analog-three-way-icon/valve-analog-three-way-icon.js

@@ -1,132 +1,174 @@
 import { customElement } from "../../decorator.js";
+import { clampPercent } from "../../svghelpers/math.js";
 import __decorate from "../../_virtual/_@oxc-project_runtime@0.150.0/helpers/esm/decorate.js";
 import valve_analog_three_way_icon_default from "./valve-analog-three-way-icon.css.js";
+import { ThreewayValveOrientation, threewayValveRotation } from "../threeway-valve-shared/threeway-valve-shared.js";
 import { LitElement, html, svg, unsafeCSS } from "lit";
 import { property } from "lit/decorators.js";
 //#region src/automation/valve-analog-three-way-icon/valve-analog-three-way-icon.ts
+var T_OUTLINE = "M14.1216 9.92409L20.47 5.95634C21.136 5.54006 22 6.0189 22 6.80433V17.1958C22 17.9813 21.136 18.4601 20.47 18.0438L14 14.0001L18.0438 20.4701C18.46 21.1361 17.9812 22.0001 17.1958 22.0001H6.80425C6.01881 22.0001 5.53997 21.1361 5.95625 20.4701L10 14.0001L3.53 18.0438C2.86395 18.4601 2 17.9813 2 17.1958V6.80433C2 6.0189 2.86395 5.54006 3.53 5.95634L10 10.0001H13.8566C13.9503 10.0001 14.0421 9.97375 14.1216 9.92409ZM10 11.0001C9.81258 11.0001 9.62893 10.9474 9.47 10.8481L3 6.80433L3 17.1958L9.47 13.1521C9.86488 12.9053 10.3778 12.9637 10.7071 13.293C11.0364 13.6222 11.0948 14.1352 10.848 14.5301L6.80425 21.0001H17.1958L13.152 14.5301C12.9052 14.1352 12.9636 13.6222 13.2929 13.293C13.6222 12.9637 14.1351 12.9053 14.53 13.1521L21 17.1958V6.80433L14.6516 10.7721C14.4132 10.9211 14.1377 11.0001 13.8566 11.0001H10Z";
+var T_BODY = "M10 11.0004C9.81258 11.0004 9.62893 10.9478 9.47 10.8484L3 6.80469L3 17.1962L9.47 13.1524C9.86488 12.9056 10.3778 12.9641 10.7071 13.2933C11.0364 13.6226 11.0948 14.1356 10.848 14.5304L6.80425 21.0004H17.1958L13.152 14.5304C12.9052 14.1356 12.9636 13.6226 13.2929 13.2933C13.6222 12.9641 14.1351 12.9056 14.53 13.1524L21 17.1962V6.80469L14.6516 10.7724C14.4132 10.9214 14.1377 11.0004 13.8566 11.0004H10Z";
+/**
+* Outline, plug and body when one port is shut, indexed by port. Taken from
+* `obi-threeway-analog-inleft-bottom-100`, `-inleft-left-100` and
+* `-inleft-left-0`.
+*/
+var PLUGGED = [
+	{
+		outline: "M14.53 10.848C14.3711 10.9473 14.1874 11 14 11H11V14C11 14.1874 10.9473 14.3711 10.848 14.53L6.80425 21H17.1958L13.152 14.53C12.9052 14.1351 12.9636 13.6222 13.2929 13.2929C13.6222 12.9636 14.1351 12.9052 14.53 13.152L21 17.1958V6.80425L14.53 10.848ZM20.47 18.0438C21.136 18.46 22 17.9812 22 17.1958V6.80425C22 6.01881 21.136 5.53997 20.47 5.95625L14 10H10.5C10.2239 10 10 10.2239 10 10.5V14L5.95625 20.47C5.53997 21.136 6.01881 22 6.80425 22H17.1958C17.9812 22 18.46 21.136 18.0438 20.47L14 14L20.47 18.0438Z",
+		plug: "M3 17.0568L8 13.4854V10.5146L3 6.94321V17.0568Z",
+		ring: "M3 17.0568L8 13.4854V10.5146L3 6.94317V17.0568ZM3.58124 17.8705C2.91937 18.3433 2 17.8702 2 17.0568V6.94317C2 6.1298 2.91937 5.65667 3.58124 6.12944L8.58124 9.70086C8.84403 9.88858 9 10.1916 9 10.5146V13.4854C9 13.8083 8.84403 14.1114 8.58124 14.2991L3.58124 17.8705Z",
+		body: "M14.53 10.848C14.3711 10.9473 14.1874 11 14 11H11V14C11 14.1874 10.9473 14.3711 10.848 14.53L6.80426 21H17.1958L13.152 14.53C12.9052 14.1351 12.9636 13.6222 13.2929 13.2929C13.6222 12.9636 14.1351 12.9052 14.53 13.152L21 17.1958L21 6.80425L14.53 10.848Z"
+	},
+	{
+		outline: "M14 11C14.1874 11 14.3711 10.9473 14.53 10.848L21 6.80425V17.1958L14.53 13.152C14.3711 13.0527 14.1874 13 14 13H10C9.81258 13 9.62893 13.0527 9.47 13.152L3 17.1958L3 6.80425L9.3484 10.772C9.5868 10.921 9.86227 11 10.1434 11H14ZM14 10H10.1434C10.0497 10 9.95786 9.97367 9.8784 9.924L3.53 5.95625C2.86395 5.53997 2 6.01881 2 6.80425V17.1958C2 17.9812 2.86395 18.46 3.53 18.0438L10 14H14L20.47 18.0438C21.136 18.46 22 17.9812 22 17.1958V6.80425C22 6.01881 21.136 5.53997 20.47 5.95625L14 10Z",
+		plug: "M10.5146 16L6.94317 21H17.0568L13.4854 16H10.5146Z",
+		ring: "M10.5146 16L6.94317 21H17.0568L13.4854 16H10.5146ZM6.12944 20.4188C5.65667 21.0806 6.1298 22 6.94317 22H17.0568C17.8702 22 18.3433 21.0806 17.8705 20.4188L14.2991 15.4188C14.1114 15.156 13.8083 15 13.4854 15H10.5146C10.1916 15 9.88858 15.156 9.70086 15.4188L6.12944 20.4188Z",
+		body: "M14 10.9999C14.1874 10.9999 14.3711 10.9472 14.53 10.8479L21 6.80416V17.1957L14.53 13.1519C14.3711 13.0526 14.1874 12.9999 14 12.9999H10C9.81258 12.9999 9.62893 13.0526 9.47 13.1519L3 17.1957L3 6.80416L9.3484 10.7719C9.5868 10.9209 9.86227 10.9999 10.1434 10.9999H14Z"
+	},
+	{
+		outline: "M9.47 10.848C9.62893 10.9473 9.81258 11 10 11H13V14C13 14.1874 13.0527 14.3711 13.152 14.53L17.1958 21H6.80425L10.848 14.53C11.0948 14.1351 11.0364 13.6222 10.7071 13.2929C10.3778 12.9636 9.86488 12.9052 9.47 13.152L3 17.1958L3 6.80425L9.47 10.848ZM3.53 18.0438C2.86395 18.46 2 17.9812 2 17.1958V6.80425C2 6.01881 2.86395 5.53997 3.53 5.95625L10 10H13.5C13.7761 10 14 10.2239 14 10.5V14L18.0438 20.47C18.46 21.136 17.9812 22 17.1958 22H6.80425C6.01881 22 5.53997 21.136 5.95625 20.47L10 14L3.53 18.0438Z",
+		plug: "M21 17.0568L16 13.4854V10.5146L21 6.94321V17.0568Z",
+		ring: "M21 17.0568L16 13.4854L16 10.5146L21 6.94321V17.0568ZM20.4188 17.8706C21.0806 18.3433 22 17.8702 22 17.0568V6.94321C22 6.12984 21.0806 5.65671 20.4188 6.12948L15.4188 9.7009C15.156 9.88862 15 10.1917 15 10.5146L15 13.4854C15 13.8084 15.156 14.1114 15.4188 14.2991L20.4188 17.8706Z",
+		body: "M9.47 10.848C9.62893 10.9473 9.81258 11 10 11H13V14C13 14.1874 13.0527 14.3711 13.152 14.53L17.1958 21H6.80425L10.848 14.53C11.0948 14.1351 11.0364 13.6222 10.7071 13.2929C10.3778 12.9636 9.86488 12.9052 9.47 13.152L3 17.1958L3 6.80425L9.47 10.848Z"
+	}
+];
+/** The port whose share of the split turns the handle, per inlet port. */
+var SPLIT_PORT = [
+	2,
+	0,
+	0
+];
+/** Width of the shut band at a fully shut port, in icon units. */
+var BAND_RANGE = 4;
+var SECONDARY = "fill: var(--automation-device-secondary-color)";
+var TERTIARY = "fill: var(--automation-device-tertiary-color)";
+var PRIMARY = "fill: var(--automation-device-primary-color)";
+var CLOSED = svg`
+  <mask id="closed-mask" fill="none">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M17 21H7L11.5 15H12.5L17 21ZM3 17L3 7L9 11.5V12.5L3 17ZM21 7V17L15 12.5V11.5L21 7Z"/>
+    <path d="M11 8C11 8.55228 11.4477 9 12 9C12.5523 9 13 8.55228 13 8V3C13 2.44772 12.5523 2 12 2C11.4477 2 11 2.44772 11 3V8Z"/>
+  </mask>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M17 21H7L11.5 15H12.5L17 21ZM3 17L3 7L9 11.5V12.5L3 17ZM21 7V17L15 12.5V11.5L21 7Z" style="fill: var(--automation-device-primary-inverted-color)"/>
+  <path d="M11 8C11 8.55228 11.4477 9 12 9C12.5523 9 13 8.55228 13 8V3C13 2.44772 12.5523 2 12 2C11.4477 2 11 2.44772 11 3V8Z" style="fill: var(--automation-device-tertiary-inverted-color)"/>
+  <path d="M17 21V22C17.3788 22 17.725 21.786 17.8944 21.4472C18.0638 21.1084 18.0273 20.703 17.8 20.4L17 21ZM7 21L6.2 20.4C5.97274 20.703 5.93618 21.1084 6.10557 21.4472C6.27496 21.786 6.62123 22 7 22V21ZM11.5 15V14C11.1852 14 10.8889 14.1482 10.7 14.4L11.5 15ZM12.5 15L13.3 14.4C13.1111 14.1482 12.8148 14 12.5 14V15ZM3 17H2C2 17.3788 2.214 17.725 2.55279 17.8944C2.89157 18.0638 3.29698 18.0273 3.6 17.8L3 17ZM3 7L3.6 6.2C3.29698 5.97274 2.89157 5.93618 2.55279 6.10557C2.214 6.27496 2 6.62123 2 7H3ZM9 11.5H10C10 11.1852 9.85181 10.8889 9.6 10.7L9 11.5ZM9 12.5L9.6 13.3C9.85181 13.1111 10 12.8148 10 12.5H9ZM21 7H22C22 6.62123 21.786 6.27496 21.4472 6.10557C21.1084 5.93618 20.703 5.97274 20.4 6.2L21 7ZM21 17L20.4 17.8C20.703 18.0273 21.1084 18.0638 21.4472 17.8944C21.786 17.725 22 17.3788 22 17H21ZM15 12.5H14C14 12.8148 14.1482 13.1111 14.4 13.3L15 12.5ZM15 11.5L14.4 10.7C14.1482 10.8889 14 11.1852 14 11.5H15ZM17 21V20H7V21V22H17V21ZM7 21L7.8 21.6L12.3 15.6L11.5 15L10.7 14.4L6.2 20.4L7 21ZM11.5 15V16H12.5V15V14H11.5V15ZM12.5 15L11.7 15.6L16.2 21.6L17 21L17.8 20.4L13.3 14.4L12.5 15ZM3 17H4L4 7H3H2L2 17H3ZM3 7L2.4 7.8L8.4 12.3L9 11.5L9.6 10.7L3.6 6.2L3 7ZM9 11.5H8V12.5H9H10V11.5H9ZM9 12.5L8.4 11.7L2.4 16.2L3 17L3.6 17.8L9.6 13.3L9 12.5ZM21 7H20V17H21H22V7H21ZM21 17L21.6 16.2L15.6 11.7L15 12.5L14.4 13.3L20.4 17.8L21 17ZM15 12.5H16V11.5H15H14V12.5H15ZM15 11.5L15.6 12.3L21.6 7.8L21 7L20.4 6.2L14.4 10.7L15 11.5ZM11 8H10C10 9.10457 10.8954 10 12 10V9V8H11ZM12 9V10C13.1046 10 14 9.10457 14 8H13H12V9ZM13 8H14V3H13H12V8H13ZM13 3H14C14 1.89543 13.1046 1 12 1V2V3H13ZM12 2V1C10.8954 1 10 1.89543 10 3H11H12V2ZM11 3H10V8H11H12V3H11Z" style="fill: var(--automation-device-primary-inverted-color)" mask="url(#closed-mask)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M17 21H7L11.5 15H12.5L17 21ZM3 17L3 7L9 11.5V12.5L3 17ZM21 7V17L15 12.5V11.5L21 7ZM7 22H17C17.824 22 18.2944 21.0592 17.8 20.4L13.3 14.4C13.1111 14.1482 12.8148 14 12.5 14H11.5C11.1852 14 10.8889 14.1482 10.7 14.4L6.2 20.4C5.70557 21.0592 6.17595 22 7 22ZM2 17V7C2 6.17595 2.94076 5.70557 3.6 6.2L9.6 10.7C9.85181 10.8889 10 11.1852 10 11.5V12.5C10 12.8148 9.85181 13.1111 9.6 13.3L3.6 17.8C2.94076 18.2944 2 17.824 2 17ZM22 7V17C22 17.824 21.0592 18.2944 20.4 17.8L14.4 13.3C14.1482 13.1111 14 12.8148 14 12.5V11.5C14 11.1852 14.1482 10.8889 14.4 10.7L20.4 6.2C21.0592 5.70557 22 6.17595 22 7Z" style="fill: var(--automation-device-tertiary-inverted-color)"/>
+  <path d="M13 3C13 2.44772 12.5523 2 12 2C11.4477 2 11 2.44772 11 3V8C11 8.55228 11.4477 9 12 9C12.5523 9 13 8.55228 13 8V3ZM14 8C14 9.10457 13.1046 10 12 10C10.8954 10 10 9.10457 10 8V3C10 1.89543 10.8954 1 12 1C13.1046 1 14 1.89543 14 3V8Z" style="fill: var(--automation-device-tertiary-inverted-color)"/>
+`;
+function renderHandle(cx, cy, angle) {
+	return svg`<g transform="rotate(${angle} ${cx} ${cy})">
+    <line x1=${cx} y1=${cy - 2.5} x2=${cx} y2=${cy + 2.5} stroke-width="3" stroke-linecap="round" style="stroke: var(--automation-device-tertiary-color)"/>
+    <line x1=${cx} y1=${cy - 2.5} x2=${cx} y2=${cy + 2.5} stroke-width="1" stroke-linecap="round" style="stroke: var(--automation-device-primary-color)"/>
+  </g>`;
+}
+/** The shut part of a partly open port: a shut band at the port end and a 1-unit edge line inside it. */
+function renderBand(port, opening) {
+	const width = BAND_RANGE * (100 - opening) / 100;
+	if (port === 0) {
+		const edge = 3 + width;
+		return svg`<rect x="2" y="0" width=${edge - 2} height="24" style=${SECONDARY}/>
+      <rect x=${edge} y="0" width="1" height="24" style=${TERTIARY}/>`;
+	}
+	if (port === 1) {
+		const edge = 21 - width;
+		return svg`<rect x="0" y=${edge} width="24" height=${22 - edge} style=${SECONDARY}/>
+      <rect x="0" y=${edge - 1} width="24" height="1" style=${TERTIARY}/>`;
+	}
+	const edge = 21 - width;
+	return svg`<rect x=${edge} y="0" width=${22 - edge} height="24" style=${SECONDARY}/>
+    <rect x=${edge - 1} y="0" width="1" height="24" style=${TERTIARY}/>`;
+}
 var ObcValveAnalogThreeWayIcon = class ObcValveAnalogThreeWayIcon extends LitElement {
 	constructor(..._args) {
 		super(..._args);
-		this.value = 0;
-		this.value2 = 0;
-		this.closed = false;
-		this.horisontal = false;
+		this.open1 = 0;
+		this.open2 = 0;
+		this.open3 = 0;
+		this.orientation = ThreewayValveOrientation.bottom;
 	}
-	render() {
-		if (this.closed) return html` <div class="wrapper">
-        <svg
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M2.72361 6.3618C2.39116 6.19558 2 6.43733 2 6.80902V17.191C2 17.5627 2.39116 17.8044 2.72361 17.6382L9 14.5V9.5L2.72361 6.3618ZM9.5 9H14.5L17.6382 2.72361C17.8044 2.39116 17.5627 2 17.191 2H6.80902C6.43733 2 6.19558 2.39116 6.3618 2.72361L9.5 9ZM13.882 8L16.382 3H7.61803L10.118 8H13.882ZM15 14.5L21.2764 17.6382C21.6088 17.8044 22 17.5627 22 17.191V6.80902C22 6.43733 21.6088 6.19558 21.2764 6.3618L15 9.5V14.5ZM16 10.118V13.882L21 16.382V7.61803L16 10.118ZM8 10.118L3 7.61803V16.382L8 13.882V10.118ZM12 11C11.4477 11 11 11.4477 11 12V20C11 20.5523 11.4477 21 12 21C12.5523 21 13 20.5523 13 20V12C13 11.4477 12.5523 11 12 11Z"
-            fill="var(--automation-device-tertiary-inverted-color)"
-          />
-          <path
-            d="M16.382 3L13.882 8H10.118L7.61803 3H16.382Z"
-            fill="var(--automation-device-primary-inverted-color"
-          />
-          <path
-            d="M16 13.882V10.118L21 7.61803V16.382L16 13.882Z"
-            fill="var(--automation-device-primary-inverted-color"
-          />
-          <path
-            d="M3 7.61803L8 10.118V13.882L3 16.382V7.61803Z"
-            fill="var(--automation-device-primary-inverted-color"
-          />
-        </svg>
-      </div>`;
-		const handleRotation = -(1 - (.5 * this.value - .5 * this.value2 + 50) / 100) * (this.horisontal ? 180 : 90);
-		const handle = svg`
-      <g transform="rotate(${handleRotation} 12 18.5)">
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M9.49942 20.1303H14.4994C15.3278 20.1303 15.9994 19.4587 15.9994 18.6303C15.9994 17.8019 15.3278 17.1303 14.4994 17.1303H9.49942C8.67099 17.1303 7.99942 17.8019 7.99942 18.6303C7.99942 19.4587 8.67099 20.1303 9.49942 20.1303ZM9.49942 19.1303L14.4994 19.1303C14.7756 19.1303 14.9994 18.9064 14.9994 18.6303C14.9994 18.3542 14.7756 18.1303 14.4994 18.1303L9.49942 18.1303C9.22328 18.1303 8.99942 18.3542 8.99942 18.6303C8.99942 18.9064 9.22328 19.1303 9.49942 19.1303Z" fill="var(--automation-device-tertiary-color)"/>
-        <path d="M14.4994 19.1303L9.49942 19.1303C9.22328 19.1303 8.99942 18.9064 8.99942 18.6303C8.99942 18.3542 9.22328 18.1303 9.49942 18.1303L14.4994 18.1303C14.7756 18.1303 14.9994 18.3542 14.9994 18.6303C14.9994 18.9064 14.7756 19.1303 14.4994 19.1303Z" fill="var(--automation-device-primary-color)"/>
+	get usesLegacyProperties() {
+		return this.value !== void 0 || this.value2 !== void 0 || this.closed !== void 0 || this.horisontal !== void 0;
+	}
+	get ports() {
+		if (!this.usesLegacyProperties) return [
+			this.open1,
+			this.open2,
+			this.open3
+		].map(clampPercent);
+		if (this.closed) return [
+			0,
+			0,
+			0
+		];
+		const value = clampPercent(this.value ?? 0);
+		const value2 = clampPercent(this.value2 ?? 0);
+		return this.horisontal ? [
+			value2,
+			100,
+			value
+		] : [
+			value,
+			value2,
+			100
+		];
+	}
+	get rotation() {
+		return threewayValveRotation(this.usesLegacyProperties ? ThreewayValveOrientation.top : this.orientation);
+	}
+	renderOpen(ports) {
+		if (ports.every((opening) => opening >= 100)) return svg`
+        <path fill-rule="evenodd" clip-rule="evenodd" d=${T_OUTLINE} style=${TERTIARY}/>
+        <path fill-rule="evenodd" clip-rule="evenodd" d=${T_BODY} style=${PRIMARY}/>
+        ${renderHandle(12, 3.5, 90)}
+      `;
+		const plugged = ports.findIndex((opening) => opening === 0);
+		const shape = plugged === -1 ? void 0 : PLUGGED[plugged];
+		const inlet = ports.indexOf(Math.max(...ports));
+		const splitPort = SPLIT_PORT[inlet];
+		const otherPort = 3 - inlet - splitPort;
+		const split = 100 * ports[splitPort] / (ports[splitPort] + ports[otherPort]);
+		const cx = 12;
+		const cy = 5 + .5 * split / 100;
+		const angle = (inlet === 0 ? -.9 : .9) * split;
+		return svg`
+      <defs>
+        <clipPath id="body"><path d=${T_BODY}/></clipPath>
+      </defs>
+      <path fill-rule="evenodd" clip-rule="evenodd" d=${shape?.outline ?? T_OUTLINE} style=${TERTIARY}/>
+      ${shape ? svg`<path fill-rule="evenodd" clip-rule="evenodd" d=${shape.plug} style=${TERTIARY}/>
+            <path fill-rule="evenodd" clip-rule="evenodd" d=${shape.ring} style=${SECONDARY}/>` : null}
+      <path fill-rule="evenodd" clip-rule="evenodd" d=${shape?.body ?? T_BODY} style=${PRIMARY}/>
+      <g clip-path="url(#body)">
+        ${ports.map((opening, port) => opening > 0 && opening < 100 ? renderBand(port, opening) : null)}
       </g>
+      ${renderHandle(cx, cy, angle)}
     `;
-		const xmin = 10.5;
-		const xmax = 2.5;
-		const x = xmin + -8 * (this.horisontal ? this.value2 : this.value) / 100;
-		const ymin = 10.5;
-		const ymax = 2.5;
-		const y = ymin + -8 * (this.horisontal ? this.value : this.value2) / 100;
-		return html`
-      <div class="wrapper">
-        <div class="wrapper">
-          <svg
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M6.80902 2H17.191C17.5627 2 17.8044 2.39116 17.6382 2.72361L14 10L21.2764 6.3618C21.6088 6.19558 22 6.43733 22 6.80902V17.191C22 17.5627 21.6088 17.8044 21.2764 17.6382L17.6382 15.8191L14 14H10L2.72361 17.6382C2.39116 17.8044 2 17.5627 2 17.191V6.80902C2 6.43733 2.39116 6.19558 2.72361 6.3618L10 10L6.3618 2.72361C6.19558 2.39116 6.43733 2 6.80902 2Z"
-              fill="black"
-            />
-            <path
-              d="M13 9.76224L16.3811 3H7.61719L11 9.76562V11H9.76416L3 7.61792V16.3819L9.7637 13H14.2363L21 16.3819V7.61792L14.2358 11H13V9.76224Z"
-              fill="var(--automation-device-primary-color)"
-            />
-            ${handle}
-            <g clip-path="url(#clip0)">
-              <rect
-                x=${24 - x}
-                y="0"
-                width=${x - xmax}
-                height="24"
-                fill="var(--automation-device-secondary-color)"
-              />
-              <line
-                x1=${24 - x}
-                y1="0"
-                x2=${24 - x}
-                y2="24"
-                stroke="var(--automation-device-tertiary-color)"
-                stroke-width="1"
-              />
-            </g>
-            ${this.horisontal ? svg`
-        <g clip-path="url(#clip2)">
-          <rect y="0" x=${ymax} height="24" width=${y - ymax} fill="var(--automation-device-secondary-color)"/>
-          <line y1="0" x1=${y} y2="24" x2=${y} stroke="var(--automation-device-tertiary-color)" stroke-width="1"/>
-        </g>
-          ` : svg`
-        <g clip-path="url(#clip1)">
-          <rect x="0" y=${ymax} width="24" height=${y - ymax} fill="var(--automation-device-secondary-color)"/>
-          <line x1="0" y1=${y} x2="24" y2=${y} stroke="var(--automation-device-tertiary-color)" stroke-width="1"/>
+	}
+	render() {
+		const ports = this.ports;
+		const passing = ports.filter((opening) => opening > 0).length >= 2;
+		return html`<div class="wrapper">
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g transform="rotate(${this.rotation} 12 12)">
+          ${passing ? this.renderOpen(ports) : CLOSED}
         </g>
-        `}
-            <defs>
-              <clipPath id="clip0">
-                <path
-                  d="M 13 11 L 13 13 H 14.2363 L 21 16.3819 V 7.6179 L 14.2358 11 Z"
-                />
-              </clipPath>
-              <clipPath id="clip1">
-                <path
-                  d="M 13 9.7622 L 16.3811 3 H 7.6172 L 11 9.7656 L 11 13 H 13 V 9.7622 Z"
-                />
-              </clipPath>
-              <clipPath id="clip2">
-                <path
-                  d="M 11 11 V 11 H 9.7642 L 3 7.6179 V 16.3819 L 9.7637 13 H 14.2363 L 14.2358 11 Z"
-                />
-              </clipPath>
-            </defs>
-          </svg>
-        </div>
-      </div>
-    `;
+      </svg>
+    </div>`;
 	}
 	static {
 		this.styles = unsafeCSS(valve_analog_three_way_icon_default);
 	}
 };
+__decorate([property({ type: Number })], ObcValveAnalogThreeWayIcon.prototype, "open1", void 0);
+__decorate([property({ type: Number })], ObcValveAnalogThreeWayIcon.prototype, "open2", void 0);
+__decorate([property({ type: Number })], ObcValveAnalogThreeWayIcon.prototype, "open3", void 0);
+__decorate([property({ type: String })], ObcValveAnalogThreeWayIcon.prototype, "orientation", void 0);
 __decorate([property({ type: Number })], ObcValveAnalogThreeWayIcon.prototype, "value", void 0);
 __decorate([property({ type: Number })], ObcValveAnalogThreeWayIcon.prototype, "value2", void 0);
 __decorate([property({ type: Boolean })], ObcValveAnalogThreeWayIcon.prototype, "closed", void 0);

package/dist/automation/valve-analog-three-way-icon/valve-analog-three-way-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"valve-analog-three-way-icon.js","names":[],"sources":["../../../src/automation/valve-analog-three-way-icon/valve-analog-three-way-icon.ts"],"sourcesContent":["import {LitElement, html, svg, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport compentStyle from './valve-analog-three-way-icon.css?inline';\nimport {customElement} from '../../decorator.js';\n\n/**\n * @stable\n */\n@customElement('obc-valve-analog-three-way-icon')\nexport class ObcValveAnalogThreeWayIcon extends LitElement {\n  @property({type: Number}) value: number = 0;\n  @property({type: Number}) value2: number = 0;\n  @property({type: Boolean}) closed: boolean = false;\n  @property({type: Boolean}) horisontal: boolean = false;\n\n  override render() {\n    if (this.closed) {\n      return html` <div class=\"wrapper\">\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M2.72361 6.3618C2.39116 6.19558 2 6.43733 2 6.80902V17.191C2 17.5627 2.39116 17.8044 2.72361 17.6382L9 14.5V9.5L2.72361 6.3618ZM9.5 9H14.5L17.6382 2.72361C17.8044 2.39116 17.5627 2 17.191 2H6.80902C6.43733 2 6.19558 2.39116 6.3618 2.72361L9.5 9ZM13.882 8L16.382 3H7.61803L10.118 8H13.882ZM15 14.5L21.2764 17.6382C21.6088 17.8044 22 17.5627 22 17.191V6.80902C22 6.43733 21.6088 6.19558 21.2764 6.3618L15 9.5V14.5ZM16 10.118V13.882L21 16.382V7.61803L16 10.118ZM8 10.118L3 7.61803V16.382L8 13.882V10.118ZM12 11C11.4477 11 11 11.4477 11 12V20C11 20.5523 11.4477 21 12 21C12.5523 21 13 20.5523 13 20V12C13 11.4477 12.5523 11 12 11Z\"\n            fill=\"var(--automation-device-tertiary-inverted-color)\"\n          />\n          <path\n            d=\"M16.382 3L13.882 8H10.118L7.61803 3H16.382Z\"\n            fill=\"var(--automation-device-primary-inverted-color\"\n          />\n          <path\n            d=\"M16 13.882V10.118L21 7.61803V16.382L16 13.882Z\"\n            fill=\"var(--automation-device-primary-inverted-color\"\n          />\n          <path\n            d=\"M3 7.61803L8 10.118V13.882L3 16.382V7.61803Z\"\n            fill=\"var(--automation-device-primary-inverted-color\"\n          />\n        </svg>\n      </div>`;\n    }\n\n    const valueRotation = 0.5 * this.value - 0.5 * this.value2 + 50;\n\n    const handleRotation =\n      -(1 - valueRotation / 100) * (this.horisontal ? 180 : 90);\n    const handle = svg`\n      <g transform=\"rotate(${handleRotation} 12 18.5)\">\n        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9.49942 20.1303H14.4994C15.3278 20.1303 15.9994 19.4587 15.9994 18.6303C15.9994 17.8019 15.3278 17.1303 14.4994 17.1303H9.49942C8.67099 17.1303 7.99942 17.8019 7.99942 18.6303C7.99942 19.4587 8.67099 20.1303 9.49942 20.1303ZM9.49942 19.1303L14.4994 19.1303C14.7756 19.1303 14.9994 18.9064 14.9994 18.6303C14.9994 18.3542 14.7756 18.1303 14.4994 18.1303L9.49942 18.1303C9.22328 18.1303 8.99942 18.3542 8.99942 18.6303C8.99942 18.9064 9.22328 19.1303 9.49942 19.1303Z\" fill=\"var(--automation-device-tertiary-color)\"/>\n        <path d=\"M14.4994 19.1303L9.49942 19.1303C9.22328 19.1303 8.99942 18.9064 8.99942 18.6303C8.99942 18.3542 9.22328 18.1303 9.49942 18.1303L14.4994 18.1303C14.7756 18.1303 14.9994 18.3542 14.9994 18.6303C14.9994 18.9064 14.7756 19.1303 14.4994 19.1303Z\" fill=\"var(--automation-device-primary-color)\"/>\n      </g>\n    `;\n\n    const xmin = 10.5;\n    const xmax = 2.5;\n\n    const x =\n      xmin +\n      ((xmax - xmin) * (this.horisontal ? this.value2 : this.value)) / 100;\n\n    const ymin = 10.5;\n    const ymax = 2.5;\n\n    const y =\n      ymin +\n      ((ymax - ymin) * (this.horisontal ? this.value : this.value2)) / 100;\n\n    return html`\n      <div class=\"wrapper\">\n        <div class=\"wrapper\">\n          <svg\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M6.80902 2H17.191C17.5627 2 17.8044 2.39116 17.6382 2.72361L14 10L21.2764 6.3618C21.6088 6.19558 22 6.43733 22 6.80902V17.191C22 17.5627 21.6088 17.8044 21.2764 17.6382L17.6382 15.8191L14 14H10L2.72361 17.6382C2.39116 17.8044 2 17.5627 2 17.191V6.80902C2 6.43733 2.39116 6.19558 2.72361 6.3618L10 10L6.3618 2.72361C6.19558 2.39116 6.43733 2 6.80902 2Z\"\n              fill=\"black\"\n            />\n            <path\n              d=\"M13 9.76224L16.3811 3H7.61719L11 9.76562V11H9.76416L3 7.61792V16.3819L9.7637 13H14.2363L21 16.3819V7.61792L14.2358 11H13V9.76224Z\"\n              fill=\"var(--automation-device-primary-color)\"\n            />\n            ${handle}\n            <g clip-path=\"url(#clip0)\">\n              <rect\n                x=${24 - x}\n                y=\"0\"\n                width=${x - xmax}\n                height=\"24\"\n                fill=\"var(--automation-device-secondary-color)\"\n              />\n              <line\n                x1=${24 - x}\n                y1=\"0\"\n                x2=${24 - x}\n                y2=\"24\"\n                stroke=\"var(--automation-device-tertiary-color)\"\n                stroke-width=\"1\"\n              />\n            </g>\n            ${\n              this.horisontal\n                ? svg`\n        <g clip-path=\"url(#clip2)\">\n          <rect y=\"0\" x=${ymax} height=\"24\" width=${y - ymax} fill=\"var(--automation-device-secondary-color)\"/>\n          <line y1=\"0\" x1=${y} y2=\"24\" x2=${y} stroke=\"var(--automation-device-tertiary-color)\" stroke-width=\"1\"/>\n        </g>\n          `\n                : svg`\n        <g clip-path=\"url(#clip1)\">\n          <rect x=\"0\" y=${ymax} width=\"24\" height=${y - ymax} fill=\"var(--automation-device-secondary-color)\"/>\n          <line x1=\"0\" y1=${y} x2=\"24\" y2=${y} stroke=\"var(--automation-device-tertiary-color)\" stroke-width=\"1\"/>\n        </g>\n        `\n            }\n            <defs>\n              <clipPath id=\"clip0\">\n                <path\n                  d=\"M 13 11 L 13 13 H 14.2363 L 21 16.3819 V 7.6179 L 14.2358 11 Z\"\n                />\n              </clipPath>\n              <clipPath id=\"clip1\">\n                <path\n                  d=\"M 13 9.7622 L 16.3811 3 H 7.6172 L 11 9.7656 L 11 13 H 13 V 9.7622 Z\"\n                />\n              </clipPath>\n              <clipPath id=\"clip2\">\n                <path\n                  d=\"M 11 11 V 11 H 9.7642 L 3 7.6179 V 16.3819 L 9.7637 13 H 14.2363 L 14.2358 11 Z\"\n                />\n              </clipPath>\n            </defs>\n          </svg>\n        </div>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-valve-analog-three-way-icon': ObcValveAnalogThreeWayIcon;\n  }\n}\n"],"mappings":";;;;;;AASO,IAAM,6BAAN,MAAM,mCAAmC,WAAW;;;EACf,KAAA,QAAA;EACC,KAAA,SAAA;EACE,KAAA,SAAA;EACI,KAAA,aAAA;;CAEjD,SAAkB;EAChB,IAAI,KAAK,QACP,OAAO,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgCb,MAAM,iBACJ,EAAE,KAHkB,KAAM,KAAK,QAAQ,KAAM,KAAK,SAAS,MAGrC,QAAQ,KAAK,aAAa,MAAM;EACxD,MAAM,SAAS,GAAG;6BACO,eAAe;;;;;EAMxC,MAAM,OAAO;EACb,MAAM,OAAO;EAEb,MAAM,IACJ,OACE,MAAgB,KAAK,aAAa,KAAK,SAAS,KAAK,SAAU;EAEnE,MAAM,OAAO;EACb,MAAM,OAAO;EAEb,MAAM,IACJ,OACE,MAAgB,KAAK,aAAa,KAAK,QAAQ,KAAK,UAAW;EAEnE,OAAO,IAAI;;;;;;;;;;;;;;;;;;cAkBD,OAAO;;;oBAGD,KAAK,EAAE;;wBAEH,IAAI,KAAK;;;;;qBAKZ,KAAK,EAAE;;qBAEP,KAAK,EAAE;;;;;;cAOd,KAAK,aACD,GAAG;;0BAEK,KAAK,qBAAqB,IAAI,KAAK;4BACjC,EAAE,cAAc,EAAE;;cAG5B,GAAG;;0BAEK,KAAK,qBAAqB,IAAI,KAAK;4BACjC,EAAE,cAAc,EAAE;;UAGjC;;;;;;;;;;;;;;;;;;;;;;CAsBX;;EAEyB,KAAA,SAAA,UAAU,mCAAY;;AACjD;AAzIG,WAAA,CAAA,SAAS,EAAC,MAAM,OAAM,CAAC,CAAA,GAAA,2BAAA,WAAA,SAAA,KAAA,CAAA;AACvB,WAAA,CAAA,SAAS,EAAC,MAAM,OAAM,CAAC,CAAA,GAAA,2BAAA,WAAA,UAAA,KAAA,CAAA;AACvB,WAAA,CAAA,SAAS,EAAC,MAAM,QAAO,CAAC,CAAA,GAAA,2BAAA,WAAA,UAAA,KAAA,CAAA;AACxB,WAAA,CAAA,SAAS,EAAC,MAAM,QAAO,CAAC,CAAA,GAAA,2BAAA,WAAA,cAAA,KAAA,CAAA;AAL1B,6BAAA,WAAA,CAAA,cAAc,iCAAiC,CAAA,GAAA,0BAAA"}
+{"version":3,"file":"valve-analog-three-way-icon.js","names":[],"sources":["../../../src/automation/valve-analog-three-way-icon/valve-analog-three-way-icon.ts"],"sourcesContent":["import {LitElement, html, svg, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport compentStyle from './valve-analog-three-way-icon.css?inline';\nimport {customElement} from '../../decorator.js';\nimport {clampPercent} from '../../svghelpers/math.js';\nimport {\n  ThreewayValveOrientation,\n  threewayValveRotation,\n} from '../threeway-valve-shared/threeway-valve-shared.js';\n\ntype Ports = [number, number, number];\n\nconst T_OUTLINE =\n  'M14.1216 9.92409L20.47 5.95634C21.136 5.54006 22 6.0189 22 6.80433V17.1958C22 17.9813 21.136 18.4601 20.47 18.0438L14 14.0001L18.0438 20.4701C18.46 21.1361 17.9812 22.0001 17.1958 22.0001H6.80425C6.01881 22.0001 5.53997 21.1361 5.95625 20.4701L10 14.0001L3.53 18.0438C2.86395 18.4601 2 17.9813 2 17.1958V6.80433C2 6.0189 2.86395 5.54006 3.53 5.95634L10 10.0001H13.8566C13.9503 10.0001 14.0421 9.97375 14.1216 9.92409ZM10 11.0001C9.81258 11.0001 9.62893 10.9474 9.47 10.8481L3 6.80433L3 17.1958L9.47 13.1521C9.86488 12.9053 10.3778 12.9637 10.7071 13.293C11.0364 13.6222 11.0948 14.1352 10.848 14.5301L6.80425 21.0001H17.1958L13.152 14.5301C12.9052 14.1352 12.9636 13.6222 13.2929 13.293C13.6222 12.9637 14.1351 12.9053 14.53 13.1521L21 17.1958V6.80433L14.6516 10.7721C14.4132 10.9211 14.1377 11.0001 13.8566 11.0001H10Z';\nconst T_BODY =\n  'M10 11.0004C9.81258 11.0004 9.62893 10.9478 9.47 10.8484L3 6.80469L3 17.1962L9.47 13.1524C9.86488 12.9056 10.3778 12.9641 10.7071 13.2933C11.0364 13.6226 11.0948 14.1356 10.848 14.5304L6.80425 21.0004H17.1958L13.152 14.5304C12.9052 14.1356 12.9636 13.6226 13.2929 13.2933C13.6222 12.9641 14.1351 12.9056 14.53 13.1524L21 17.1962V6.80469L14.6516 10.7724C14.4132 10.9214 14.1377 11.0004 13.8566 11.0004H10Z';\n\n/**\n * Outline, plug and body when one port is shut, indexed by port. Taken from\n * `obi-threeway-analog-inleft-bottom-100`, `-inleft-left-100` and\n * `-inleft-left-0`.\n */\nconst PLUGGED: {outline: string; plug: string; ring: string; body: string}[] = [\n  {\n    outline:\n      'M14.53 10.848C14.3711 10.9473 14.1874 11 14 11H11V14C11 14.1874 10.9473 14.3711 10.848 14.53L6.80425 21H17.1958L13.152 14.53C12.9052 14.1351 12.9636 13.6222 13.2929 13.2929C13.6222 12.9636 14.1351 12.9052 14.53 13.152L21 17.1958V6.80425L14.53 10.848ZM20.47 18.0438C21.136 18.46 22 17.9812 22 17.1958V6.80425C22 6.01881 21.136 5.53997 20.47 5.95625L14 10H10.5C10.2239 10 10 10.2239 10 10.5V14L5.95625 20.47C5.53997 21.136 6.01881 22 6.80425 22H17.1958C17.9812 22 18.46 21.136 18.0438 20.47L14 14L20.47 18.0438Z',\n    plug: 'M3 17.0568L8 13.4854V10.5146L3 6.94321V17.0568Z',\n    ring: 'M3 17.0568L8 13.4854V10.5146L3 6.94317V17.0568ZM3.58124 17.8705C2.91937 18.3433 2 17.8702 2 17.0568V6.94317C2 6.1298 2.91937 5.65667 3.58124 6.12944L8.58124 9.70086C8.84403 9.88858 9 10.1916 9 10.5146V13.4854C9 13.8083 8.84403 14.1114 8.58124 14.2991L3.58124 17.8705Z',\n    body: 'M14.53 10.848C14.3711 10.9473 14.1874 11 14 11H11V14C11 14.1874 10.9473 14.3711 10.848 14.53L6.80426 21H17.1958L13.152 14.53C12.9052 14.1351 12.9636 13.6222 13.2929 13.2929C13.6222 12.9636 14.1351 12.9052 14.53 13.152L21 17.1958L21 6.80425L14.53 10.848Z',\n  },\n  {\n    outline:\n      'M14 11C14.1874 11 14.3711 10.9473 14.53 10.848L21 6.80425V17.1958L14.53 13.152C14.3711 13.0527 14.1874 13 14 13H10C9.81258 13 9.62893 13.0527 9.47 13.152L3 17.1958L3 6.80425L9.3484 10.772C9.5868 10.921 9.86227 11 10.1434 11H14ZM14 10H10.1434C10.0497 10 9.95786 9.97367 9.8784 9.924L3.53 5.95625C2.86395 5.53997 2 6.01881 2 6.80425V17.1958C2 17.9812 2.86395 18.46 3.53 18.0438L10 14H14L20.47 18.0438C21.136 18.46 22 17.9812 22 17.1958V6.80425C22 6.01881 21.136 5.53997 20.47 5.95625L14 10Z',\n    plug: 'M10.5146 16L6.94317 21H17.0568L13.4854 16H10.5146Z',\n    ring: 'M10.5146 16L6.94317 21H17.0568L13.4854 16H10.5146ZM6.12944 20.4188C5.65667 21.0806 6.1298 22 6.94317 22H17.0568C17.8702 22 18.3433 21.0806 17.8705 20.4188L14.2991 15.4188C14.1114 15.156 13.8083 15 13.4854 15H10.5146C10.1916 15 9.88858 15.156 9.70086 15.4188L6.12944 20.4188Z',\n    body: 'M14 10.9999C14.1874 10.9999 14.3711 10.9472 14.53 10.8479L21 6.80416V17.1957L14.53 13.1519C14.3711 13.0526 14.1874 12.9999 14 12.9999H10C9.81258 12.9999 9.62893 13.0526 9.47 13.1519L3 17.1957L3 6.80416L9.3484 10.7719C9.5868 10.9209 9.86227 10.9999 10.1434 10.9999H14Z',\n  },\n  {\n    outline:\n      'M9.47 10.848C9.62893 10.9473 9.81258 11 10 11H13V14C13 14.1874 13.0527 14.3711 13.152 14.53L17.1958 21H6.80425L10.848 14.53C11.0948 14.1351 11.0364 13.6222 10.7071 13.2929C10.3778 12.9636 9.86488 12.9052 9.47 13.152L3 17.1958L3 6.80425L9.47 10.848ZM3.53 18.0438C2.86395 18.46 2 17.9812 2 17.1958V6.80425C2 6.01881 2.86395 5.53997 3.53 5.95625L10 10H13.5C13.7761 10 14 10.2239 14 10.5V14L18.0438 20.47C18.46 21.136 17.9812 22 17.1958 22H6.80425C6.01881 22 5.53997 21.136 5.95625 20.47L10 14L3.53 18.0438Z',\n    plug: 'M21 17.0568L16 13.4854V10.5146L21 6.94321V17.0568Z',\n    ring: 'M21 17.0568L16 13.4854L16 10.5146L21 6.94321V17.0568ZM20.4188 17.8706C21.0806 18.3433 22 17.8702 22 17.0568V6.94321C22 6.12984 21.0806 5.65671 20.4188 6.12948L15.4188 9.7009C15.156 9.88862 15 10.1917 15 10.5146L15 13.4854C15 13.8084 15.156 14.1114 15.4188 14.2991L20.4188 17.8706Z',\n    body: 'M9.47 10.848C9.62893 10.9473 9.81258 11 10 11H13V14C13 14.1874 13.0527 14.3711 13.152 14.53L17.1958 21H6.80425L10.848 14.53C11.0948 14.1351 11.0364 13.6222 10.7071 13.2929C10.3778 12.9636 9.86488 12.9052 9.47 13.152L3 17.1958L3 6.80425L9.47 10.848Z',\n  },\n];\n\n/** The port whose share of the split turns the handle, per inlet port. */\nconst SPLIT_PORT = [2, 0, 0];\n\n/** Width of the shut band at a fully shut port, in icon units. */\nconst BAND_RANGE = 4;\n\nconst SECONDARY = 'fill: var(--automation-device-secondary-color)';\nconst TERTIARY = 'fill: var(--automation-device-tertiary-color)';\nconst PRIMARY = 'fill: var(--automation-device-primary-color)';\n\nconst CLOSED = svg`\n  <mask id=\"closed-mask\" fill=\"none\">\n    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M17 21H7L11.5 15H12.5L17 21ZM3 17L3 7L9 11.5V12.5L3 17ZM21 7V17L15 12.5V11.5L21 7Z\"/>\n    <path d=\"M11 8C11 8.55228 11.4477 9 12 9C12.5523 9 13 8.55228 13 8V3C13 2.44772 12.5523 2 12 2C11.4477 2 11 2.44772 11 3V8Z\"/>\n  </mask>\n  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M17 21H7L11.5 15H12.5L17 21ZM3 17L3 7L9 11.5V12.5L3 17ZM21 7V17L15 12.5V11.5L21 7Z\" style=\"fill: var(--automation-device-primary-inverted-color)\"/>\n  <path d=\"M11 8C11 8.55228 11.4477 9 12 9C12.5523 9 13 8.55228 13 8V3C13 2.44772 12.5523 2 12 2C11.4477 2 11 2.44772 11 3V8Z\" style=\"fill: var(--automation-device-tertiary-inverted-color)\"/>\n  <path d=\"M17 21V22C17.3788 22 17.725 21.786 17.8944 21.4472C18.0638 21.1084 18.0273 20.703 17.8 20.4L17 21ZM7 21L6.2 20.4C5.97274 20.703 5.93618 21.1084 6.10557 21.4472C6.27496 21.786 6.62123 22 7 22V21ZM11.5 15V14C11.1852 14 10.8889 14.1482 10.7 14.4L11.5 15ZM12.5 15L13.3 14.4C13.1111 14.1482 12.8148 14 12.5 14V15ZM3 17H2C2 17.3788 2.214 17.725 2.55279 17.8944C2.89157 18.0638 3.29698 18.0273 3.6 17.8L3 17ZM3 7L3.6 6.2C3.29698 5.97274 2.89157 5.93618 2.55279 6.10557C2.214 6.27496 2 6.62123 2 7H3ZM9 11.5H10C10 11.1852 9.85181 10.8889 9.6 10.7L9 11.5ZM9 12.5L9.6 13.3C9.85181 13.1111 10 12.8148 10 12.5H9ZM21 7H22C22 6.62123 21.786 6.27496 21.4472 6.10557C21.1084 5.93618 20.703 5.97274 20.4 6.2L21 7ZM21 17L20.4 17.8C20.703 18.0273 21.1084 18.0638 21.4472 17.8944C21.786 17.725 22 17.3788 22 17H21ZM15 12.5H14C14 12.8148 14.1482 13.1111 14.4 13.3L15 12.5ZM15 11.5L14.4 10.7C14.1482 10.8889 14 11.1852 14 11.5H15ZM17 21V20H7V21V22H17V21ZM7 21L7.8 21.6L12.3 15.6L11.5 15L10.7 14.4L6.2 20.4L7 21ZM11.5 15V16H12.5V15V14H11.5V15ZM12.5 15L11.7 15.6L16.2 21.6L17 21L17.8 20.4L13.3 14.4L12.5 15ZM3 17H4L4 7H3H2L2 17H3ZM3 7L2.4 7.8L8.4 12.3L9 11.5L9.6 10.7L3.6 6.2L3 7ZM9 11.5H8V12.5H9H10V11.5H9ZM9 12.5L8.4 11.7L2.4 16.2L3 17L3.6 17.8L9.6 13.3L9 12.5ZM21 7H20V17H21H22V7H21ZM21 17L21.6 16.2L15.6 11.7L15 12.5L14.4 13.3L20.4 17.8L21 17ZM15 12.5H16V11.5H15H14V12.5H15ZM15 11.5L15.6 12.3L21.6 7.8L21 7L20.4 6.2L14.4 10.7L15 11.5ZM11 8H10C10 9.10457 10.8954 10 12 10V9V8H11ZM12 9V10C13.1046 10 14 9.10457 14 8H13H12V9ZM13 8H14V3H13H12V8H13ZM13 3H14C14 1.89543 13.1046 1 12 1V2V3H13ZM12 2V1C10.8954 1 10 1.89543 10 3H11H12V2ZM11 3H10V8H11H12V3H11Z\" style=\"fill: var(--automation-device-primary-inverted-color)\" mask=\"url(#closed-mask)\"/>\n  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M17 21H7L11.5 15H12.5L17 21ZM3 17L3 7L9 11.5V12.5L3 17ZM21 7V17L15 12.5V11.5L21 7ZM7 22H17C17.824 22 18.2944 21.0592 17.8 20.4L13.3 14.4C13.1111 14.1482 12.8148 14 12.5 14H11.5C11.1852 14 10.8889 14.1482 10.7 14.4L6.2 20.4C5.70557 21.0592 6.17595 22 7 22ZM2 17V7C2 6.17595 2.94076 5.70557 3.6 6.2L9.6 10.7C9.85181 10.8889 10 11.1852 10 11.5V12.5C10 12.8148 9.85181 13.1111 9.6 13.3L3.6 17.8C2.94076 18.2944 2 17.824 2 17ZM22 7V17C22 17.824 21.0592 18.2944 20.4 17.8L14.4 13.3C14.1482 13.1111 14 12.8148 14 12.5V11.5C14 11.1852 14.1482 10.8889 14.4 10.7L20.4 6.2C21.0592 5.70557 22 6.17595 22 7Z\" style=\"fill: var(--automation-device-tertiary-inverted-color)\"/>\n  <path d=\"M13 3C13 2.44772 12.5523 2 12 2C11.4477 2 11 2.44772 11 3V8C11 8.55228 11.4477 9 12 9C12.5523 9 13 8.55228 13 8V3ZM14 8C14 9.10457 13.1046 10 12 10C10.8954 10 10 9.10457 10 8V3C10 1.89543 10.8954 1 12 1C13.1046 1 14 1.89543 14 3V8Z\" style=\"fill: var(--automation-device-tertiary-inverted-color)\"/>\n`;\n\nfunction renderHandle(cx: number, cy: number, angle: number) {\n  return svg`<g transform=\"rotate(${angle} ${cx} ${cy})\">\n    <line x1=${cx} y1=${cy - 2.5} x2=${cx} y2=${cy + 2.5} stroke-width=\"3\" stroke-linecap=\"round\" style=\"stroke: var(--automation-device-tertiary-color)\"/>\n    <line x1=${cx} y1=${cy - 2.5} x2=${cx} y2=${cy + 2.5} stroke-width=\"1\" stroke-linecap=\"round\" style=\"stroke: var(--automation-device-primary-color)\"/>\n  </g>`;\n}\n\n/** The shut part of a partly open port: a shut band at the port end and a 1-unit edge line inside it. */\nfunction renderBand(port: number, opening: number) {\n  const width = (BAND_RANGE * (100 - opening)) / 100;\n  if (port === 0) {\n    const edge = 3 + width;\n    return svg`<rect x=\"2\" y=\"0\" width=${edge - 2} height=\"24\" style=${SECONDARY}/>\n      <rect x=${edge} y=\"0\" width=\"1\" height=\"24\" style=${TERTIARY}/>`;\n  }\n  if (port === 1) {\n    const edge = 21 - width;\n    return svg`<rect x=\"0\" y=${edge} width=\"24\" height=${22 - edge} style=${SECONDARY}/>\n      <rect x=\"0\" y=${edge - 1} width=\"24\" height=\"1\" style=${TERTIARY}/>`;\n  }\n  const edge = 21 - width;\n  return svg`<rect x=${edge} y=\"0\" width=${22 - edge} height=\"24\" style=${SECONDARY}/>\n    <rect x=${edge - 1} y=\"0\" width=\"1\" height=\"24\" style=${TERTIARY}/>`;\n}\n\n/**\n * Three-way analog valve symbol whose ports open continuously from 0 to\n * 100 %.\n *\n * Draws the same symbol as the `obi-threeway-analog-*` icons. The bands, the\n * handle angle and the handle position are linear in the opening: exact at\n * 0 and 100 %, within a fraction of a unit of the icons' 25/50/75 steps.\n * Used as the icon of `obc-analog-threeway-valve`, and on its\n * own inside an `obc-automation-button`.\n *\n * ## Ports\n *\n * Ports are numbered from the side without a port: with `orientation`\n * `bottom`, port 1 is left, port 2 is the stem at the bottom and port 3 is\n * right. The numbering turns with the symbol.\n *\n * - A port between 0 and 100 % shows its shut part as a band at the port end.\n * - A port at 0 % is drawn plugged.\n * - With fewer than two ports open no flow can pass, and the closed symbol is\n *   shown.\n * - With all three ports at 100 % the generic open symbol is shown.\n *\n * The handle shows how the most open port (the inlet) splits between the two\n * others, the way the `inleft-*` icons do.\n *\n * TODO(designer): the `inleft-bottom` and `inleft-right` icons name their 0\n * and 100 steps the other way round from their 25/50/75 steps (at `-0` the\n * port the series opens is shut). The symbol follows the 25/50/75 steps.\n *\n * @property open1 - Opening of port 1 in percent (0–100).\n * @property open2 - Opening of port 2, the stem, in percent (0–100).\n * @property open3 - Opening of port 3 in percent (0–100).\n * @property orientation - Side the stem points to; `bottom` and `top` lay the valve on a horizontal pipe, `left` and `right` on a vertical one.\n * @stable\n */\n@customElement('obc-valve-analog-three-way-icon')\nexport class ObcValveAnalogThreeWayIcon extends LitElement {\n  @property({type: Number}) open1: number = 0;\n  @property({type: Number}) open2: number = 0;\n  @property({type: Number}) open3: number = 0;\n  @property({type: String}) orientation: ThreewayValveOrientation =\n    ThreewayValveOrientation.bottom;\n\n  /**\n   * Opening of the right port with the stem up. Setting any of `value`,\n   * `value2`, `closed` or `horisontal` draws the symbol stem up, with the\n   * left port fully open, and ignores `open1`–`open3` and `orientation`.\n   * @deprecated Use `open1`–`open3` and `orientation`.\n   */\n  @property({type: Number}) value?: number;\n  /**\n   * Opening of the top port (the stem).\n   * @deprecated Use `open1`–`open3` and `orientation`.\n   */\n  @property({type: Number}) value2?: number;\n  /** @deprecated Set every opening to 0. */\n  @property({type: Boolean}) closed?: boolean;\n  /**\n   * Makes the stem the fully open port; `value` then opens the left port and\n   * `value2` the right one.\n   * @deprecated Use `open1`–`open3` and `orientation`.\n   */\n  @property({type: Boolean}) horisontal?: boolean;\n\n  private get usesLegacyProperties(): boolean {\n    return (\n      this.value !== undefined ||\n      this.value2 !== undefined ||\n      this.closed !== undefined ||\n      this.horisontal !== undefined\n    );\n  }\n\n  private get ports(): Ports {\n    if (!this.usesLegacyProperties) {\n      return [this.open1, this.open2, this.open3].map(clampPercent) as Ports;\n    }\n    if (this.closed) return [0, 0, 0];\n    const value = clampPercent(this.value ?? 0);\n    const value2 = clampPercent(this.value2 ?? 0);\n    return this.horisontal ? [value2, 100, value] : [value, value2, 100];\n  }\n\n  private get rotation(): number {\n    return threewayValveRotation(\n      this.usesLegacyProperties\n        ? ThreewayValveOrientation.top\n        : this.orientation\n    );\n  }\n\n  private renderOpen(ports: Ports) {\n    if (ports.every((opening) => opening >= 100)) {\n      return svg`\n        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=${T_OUTLINE} style=${TERTIARY}/>\n        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=${T_BODY} style=${PRIMARY}/>\n        ${renderHandle(12, 3.5, 90)}\n      `;\n    }\n\n    const plugged = ports.findIndex((opening) => opening === 0);\n    const shape = plugged === -1 ? undefined : PLUGGED[plugged];\n    const inlet = ports.indexOf(Math.max(...ports));\n    const splitPort = SPLIT_PORT[inlet];\n    const otherPort = 3 - inlet - splitPort;\n    const split =\n      (100 * ports[splitPort]) / (ports[splitPort] + ports[otherPort]);\n    // Linear between the obi icons' end steps: (12, 5) with the split port\n    // shut, (12, 5.5) with the other one shut.\n    const cx = 12;\n    const cy = 5 + (0.5 * split) / 100;\n    const angle = (inlet === 0 ? -0.9 : 0.9) * split;\n\n    return svg`\n      <defs>\n        <clipPath id=\"body\"><path d=${T_BODY}/></clipPath>\n      </defs>\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=${shape?.outline ?? T_OUTLINE} style=${TERTIARY}/>\n      ${\n        shape\n          ? svg`<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=${shape.plug} style=${TERTIARY}/>\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=${shape.ring} style=${SECONDARY}/>`\n          : null\n      }\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=${shape?.body ?? T_BODY} style=${PRIMARY}/>\n      <g clip-path=\"url(#body)\">\n        ${ports.map((opening, port) =>\n          opening > 0 && opening < 100 ? renderBand(port, opening) : null\n        )}\n      </g>\n      ${renderHandle(cx, cy, angle)}\n    `;\n  }\n\n  override render() {\n    const ports = this.ports;\n    const passing = ports.filter((opening) => opening > 0).length >= 2;\n    return html`<div class=\"wrapper\">\n      <svg\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <g transform=\"rotate(${this.rotation} 12 12)\">\n          ${passing ? this.renderOpen(ports) : CLOSED}\n        </g>\n      </svg>\n    </div>`;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-valve-analog-three-way-icon': ObcValveAnalogThreeWayIcon;\n  }\n}\n"],"mappings":"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"}

package/dist/components/automation-button-readout-stack/automation-button-readout-stack.d.ts

@@ -39,11 +39,13 @@ export interface AutomationButtonReadoutStackStateOn {
     type: 'state-on';
     value: string;
     hasIcon: boolean;
+    direction?: 'up' | 'down' | 'left' | 'right' | 'none';
 }
 export interface AutomationButtonReadoutStackStateOff {
     type: 'state-off';
     value: string;
     hasIcon: boolean;
+    direction?: 'up' | 'down' | 'left' | 'right' | 'none';
 }
 export interface AutomationButtonReadoutStackButton {
     type: 'button';
@@ -90,6 +92,7 @@ export declare class ObcAutomationButtonReadoutStack extends LitElement {
      * family's dash placeholder.
      */
     private renderNumber;
+    private renderArrow;
     renderValue(readout: AutomationButtonReadoutStackValue): HTMLTemplateResult;
     renderSetpoint(readout: AutomationButtonReadoutStackSetpoint): HTMLTemplateResult;
     renderStateOff(readout: AutomationButtonReadoutStackStateOff): HTMLTemplateResult;

package/dist/components/automation-button-readout-stack/automation-button-readout-stack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"automation-button-readout-stack.d.ts","sourceRoot":"","sources":["../../../src/components/automation-button-readout-stack/automation-button-readout-stack.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"automation-button-readout-stack.d.ts","sourceRoot":"","sources":["../../../src/components/automation-button-readout-stack/automation-button-readout-stack.ts"],"names":[],"mappings":"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"}

package/dist/components/automation-button-readout-stack/automation-button-readout-stack.js

@@ -80,26 +80,31 @@ var ObcAutomationButtonReadoutStack = class ObcAutomationButtonReadoutStack exte
       .hintedZeros=${format.hintedZeros ?? false}
     ></obc-readout-block>`;
 	}
-	renderValue(readout) {
-		let directionIcon = nothing;
-		if (readout.icon == "arrow") {
-			if (readout.direction == "up") directionIcon = html`<obi-arrow-up-google
+	renderArrow(direction) {
+		switch (direction) {
+			case "up": return html`<obi-arrow-up-google
           class="icon"
           useCssColor
         ></obi-arrow-up-google>`;
-			else if (readout.direction == "down") directionIcon = html`<obi-arrow-down-google
+			case "down": return html`<obi-arrow-down-google
           class="icon"
           useCssColor
         ></obi-arrow-down-google>`;
-			else if (readout.direction == "left") directionIcon = html`<obi-arrow-left-google
+			case "left": return html`<obi-arrow-left-google
           class="icon"
           useCssColor
         ></obi-arrow-left-google>`;
-			else if (readout.direction == "right") directionIcon = html`<obi-arrow-right-google
+			case "right": return html`<obi-arrow-right-google
           class="icon"
           useCssColor
         ></obi-arrow-right-google>`;
-		} else if (readout.icon == "chevron") {
+			default: return nothing;
+		}
+	}
+	renderValue(readout) {
+		let directionIcon = nothing;
+		if (readout.icon == "arrow") directionIcon = this.renderArrow(readout.direction);
+		else if (readout.icon == "chevron") {
 			if (readout.direction == "up") directionIcon = html`<obi-chevron-double-up-google
           class="icon"
           useCssColor
@@ -145,13 +150,15 @@ var ObcAutomationButtonReadoutStack = class ObcAutomationButtonReadoutStack exte
 	}
 	renderStateOff(readout) {
 		let offIcon = html``;
-		if (readout.hasIcon) offIcon = html`<obi-off class="icon" useCssColor></obi-off>`;
+		if (readout.direction && readout.direction !== "none") offIcon = this.renderArrow(readout.direction);
+		else if (readout.hasIcon) offIcon = html`<obi-off class="icon" useCssColor></obi-off>`;
 		const content = this.renderValueText(readout.value);
 		return this.renderValueContainer("state-off", offIcon, content);
 	}
 	renderStateOn(readout) {
 		let onIcon = html``;
-		if (readout.hasIcon) onIcon = html`<obi-on class="icon" useCssColor></obi-on>`;
+		if (readout.direction && readout.direction !== "none") onIcon = this.renderArrow(readout.direction);
+		else if (readout.hasIcon) onIcon = html`<obi-on class="icon" useCssColor></obi-on>`;
 		const content = this.renderValueText(readout.value);
 		return this.renderValueContainer("state-on", onIcon, content);
 	}

package/dist/components/automation-button-readout-stack/automation-button-readout-stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"automation-button-readout-stack.js","names":[],"sources":["../../../src/components/automation-button-readout-stack/automation-button-readout-stack.ts"],"sourcesContent":["import {HTMLTemplateResult, LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport compentStyle from './automation-button-readout-stack.css?inline';\nimport {property} from 'lit/decorators.js';\nimport '../../icons/icon-arrow-up-google.js';\nimport '../../icons/icon-arrow-down-google.js';\nimport '../../icons/icon-arrow-left-google.js';\nimport '../../icons/icon-arrow-right-google.js';\nimport '../../icons/icon-chevron-double-up-google.js';\nimport '../../icons/icon-chevron-double-down-google.js';\nimport '../../icons/icon-chevron-double-left-google.js';\nimport '../../icons/icon-chevron-double-right-google.js';\nimport '../../icons/icon-off.js';\nimport '../../icons/icon-on.js';\nimport '../../icons/icon-temperature-air.js';\nimport '../button/button.js';\nimport '../../building-blocks/readout-block/readout-block.js';\nimport {ReadoutBlockSize} from '../../building-blocks/readout-block/readout-block.js';\nimport {ObcTextboxSize} from '../../components/textbox/textbox.js';\nimport {SETPOINT_PATH_FILLED} from '../../svghelpers/setpoint.js';\n\nexport enum AutomationButtonReadoutStackSize {\n  small = 'small',\n  regular = 'regular',\n  enhanced = 'enhanced',\n}\n\nexport enum IdTagOrientation {\n  top = 'top',\n  bottom = 'bottom',\n}\n\n// The stack's three tiers map onto the readout block's: `small` is the block's\n// small tier at xs number typography, `regular` the small tier at its default\n// s, `enhanced` the large tier. The block's cap-height boxes (16 / 20 / 32)\n// match the tiers' former line-heights.\nconst blockSizeBySize: Record<\n  AutomationButtonReadoutStackSize,\n  ReadoutBlockSize\n> = {\n  [AutomationButtonReadoutStackSize.small]: ReadoutBlockSize.small,\n  [AutomationButtonReadoutStackSize.regular]: ReadoutBlockSize.small,\n  [AutomationButtonReadoutStackSize.enhanced]: ReadoutBlockSize.large,\n};\n\nconst valueSizeBySize: Record<\n  AutomationButtonReadoutStackSize,\n  ObcTextboxSize\n> = {\n  [AutomationButtonReadoutStackSize.small]: ObcTextboxSize.xs,\n  [AutomationButtonReadoutStackSize.regular]: ObcTextboxSize.s,\n  [AutomationButtonReadoutStackSize.enhanced]: ObcTextboxSize.l,\n};\n\nexport interface AutomationButtonReadoutStackValue {\n  type: 'value';\n  value: number;\n  nDigits: number;\n  unit: string;\n  direction: 'up' | 'down' | 'left' | 'right' | 'none';\n  icon: 'none' | 'arrow' | 'chevron' | 'slot';\n  /**\n   * Host slot the row's icon is projected from when `icon` is `'slot'` —\n   * consumers place any icon element with this slot name in the stack's\n   * light DOM (e.g. a device-specific `<obi-*>` icon).\n   */\n  slotName?: string;\n}\n\nexport interface AutomationButtonReadoutStackStateOn {\n  type: 'state-on';\n  value: string;\n  hasIcon: boolean;\n}\n\nexport interface AutomationButtonReadoutStackStateOff {\n  type: 'state-off';\n  value: string;\n  hasIcon: boolean;\n}\n\nexport interface AutomationButtonReadoutStackButton {\n  type: 'button';\n  value: number;\n  hasIcon: boolean;\n  unit: string;\n}\n\nexport interface AutomationButtonReadoutStackSetpoint {\n  type: 'setpoint';\n  value: number;\n  nDigits: number;\n  unit?: string;\n}\n\nexport type AutomationButtonReadoutStack =\n  | AutomationButtonReadoutStackValue\n  | AutomationButtonReadoutStackStateOn\n  | AutomationButtonReadoutStackStateOff\n  | AutomationButtonReadoutStackButton\n  | AutomationButtonReadoutStackSetpoint;\n\n/**\n * A value row with `icon: 'slot'` projects its icon from the host slot named\n * by its `slotName` — a dynamic slot name, so it carries no `@slot` tag (the\n * wrapper generator needs literal names).\n *\n * @property readouts - Rows rendered top-to-bottom: `value` (padded digits, unit,\n *   optional direction icon), `state-on`/`state-off`, `button`, and `setpoint`\n *   (shared setpoint glyph + padded digits).\n * @property tag - Identifier line (e.g. '#0001'); `null` hides it.\n * @property size - Typography tier of the rows (small / regular / enhanced).\n * @property idTagOrientation - Whether the tag renders above or below the rows.\n * @experimental\n */\n@customElement('obc-automation-button-readout-stack')\nexport class ObcAutomationButtonReadoutStack extends LitElement {\n  @property({type: Array, attribute: false})\n  readouts: AutomationButtonReadoutStack[] = [];\n  @property({type: String}) tag: string | null = null;\n  @property() size: AutomationButtonReadoutStackSize =\n    AutomationButtonReadoutStackSize.regular;\n  @property() idTagOrientation: IdTagOrientation = IdTagOrientation.top;\n\n  renderTag(): typeof nothing | HTMLTemplateResult {\n    if (this.tag === null) return nothing;\n\n    return html`<div class=\"tag\">${this.tag}</div>`;\n  }\n\n  private renderValueContainer(\n    type: string,\n    icon: HTMLTemplateResult | typeof nothing,\n    content: HTMLTemplateResult\n  ): HTMLTemplateResult {\n    return html`<div class=\"readout-item ${type}\">\n      ${icon}\n      <div class=\"value-container\">\n        <div class=\"label-container\">${content}</div>\n      </div>\n    </div>`;\n  }\n\n  private renderValueText(text: string): HTMLTemplateResult {\n    return html`<span class=\"value-text\">${text}</span>`;\n  }\n\n  /**\n   * A numeric segment on `obc-readout-block` — the block owns the formatting:\n   * hinted zeros fill the integer part to `maxDigits`, the sign is prepended\n   * without consuming a zero (`-005`), and an unavailable value renders the\n   * family's dash placeholder.\n   */\n  private renderNumber(\n    value: number,\n    format: {maxDigits?: number; fractionDigits?: number; hintedZeros?: boolean}\n  ): HTMLTemplateResult {\n    return html`<obc-readout-block\n      class=\"number\"\n      .value=${value}\n      .size=${blockSizeBySize[this.size]}\n      .valueSize=${valueSizeBySize[this.size]}\n      .maxDigits=${format.maxDigits ?? 0}\n      .fractionDigits=${format.fractionDigits ?? 0}\n      .hintedZeros=${format.hintedZeros ?? false}\n    ></obc-readout-block>`;\n  }\n\n  renderValue(readout: AutomationButtonReadoutStackValue): HTMLTemplateResult {\n    let directionIcon: HTMLTemplateResult | typeof nothing = nothing;\n    if (readout.icon == 'arrow') {\n      if (readout.direction == 'up') {\n        directionIcon = html`<obi-arrow-up-google\n          class=\"icon\"\n          useCssColor\n        ></obi-arrow-up-google>`;\n      } else if (readout.direction == 'down') {\n        directionIcon = html`<obi-arrow-down-google\n          class=\"icon\"\n          useCssColor\n        ></obi-arrow-down-google>`;\n      } else if (readout.direction == 'left') {\n        directionIcon = html`<obi-arrow-left-google\n          class=\"icon\"\n          useCssColor\n        ></obi-arrow-left-google>`;\n      } else if (readout.direction == 'right') {\n        directionIcon = html`<obi-arrow-right-google\n          class=\"icon\"\n          useCssColor\n        ></obi-arrow-right-google>`;\n      }\n    } else if (readout.icon == 'chevron') {\n      if (readout.direction == 'up') {\n        directionIcon = html`<obi-chevron-double-up-google\n          class=\"icon\"\n          useCssColor\n        ></obi-chevron-double-up-google>`;\n      } else if (readout.direction == 'down') {\n        directionIcon = html`<obi-chevron-double-down-google\n          class=\"icon\"\n          useCssColor\n        ></obi-chevron-double-down-google>`;\n      } else if (readout.direction == 'left') {\n        directionIcon = html`<obi-chevron-double-left-google\n          class=\"icon\"\n          useCssColor\n        ></obi-chevron-double-left-google>`;\n      } else if (readout.direction == 'right') {\n        directionIcon = html`<obi-chevron-double-right-google\n          class=\"icon\"\n          useCssColor\n        ></obi-chevron-double-right-google>`;\n      }\n    } else if (readout.icon == 'slot' && readout.slotName) {\n      directionIcon = html`<slot class=\"icon\" name=${readout.slotName}></slot>`;\n    }\n    const content = html`\n      ${this.renderNumber(readout.value, {\n        maxDigits: readout.nDigits,\n        hintedZeros: true,\n      })}\n      <span class=\"unit\">${readout.unit}</span>\n    `;\n\n    return this.renderValueContainer('value', directionIcon, content);\n  }\n\n  renderSetpoint(\n    readout: AutomationButtonReadoutStackSetpoint\n  ): HTMLTemplateResult {\n    const glyph = html`<svg\n      class=\"setpoint-glyph\"\n      viewBox=\"2.5 -2.5 21 26\"\n      aria-hidden=\"true\"\n    >\n      <path d=${SETPOINT_PATH_FILLED} transform=\"rotate(-90 13 10.5)\" />\n    </svg>`;\n    const content = html`\n      ${this.renderNumber(readout.value, {\n        maxDigits: readout.nDigits,\n        hintedZeros: true,\n      })}\n      ${\n        readout.unit ? html`<span class=\"unit\">${readout.unit}</span>` : nothing\n      }\n    `;\n    return this.renderValueContainer('setpoint', glyph, content);\n  }\n\n  renderStateOff(\n    readout: AutomationButtonReadoutStackStateOff\n  ): HTMLTemplateResult {\n    let offIcon: HTMLTemplateResult = html``;\n    if (readout.hasIcon) {\n      offIcon = html`<obi-off class=\"icon\" useCssColor></obi-off>`;\n    }\n\n    const content = this.renderValueText(readout.value);\n    return this.renderValueContainer('state-off', offIcon, content);\n  }\n\n  renderStateOn(\n    readout: AutomationButtonReadoutStackStateOn\n  ): HTMLTemplateResult {\n    let onIcon: HTMLTemplateResult = html``;\n    if (readout.hasIcon) {\n      onIcon = html`<obi-on class=\"icon\" useCssColor></obi-on>`;\n    }\n\n    const content = this.renderValueText(readout.value);\n    return this.renderValueContainer('state-on', onIcon, content);\n  }\n\n  renderButton(\n    readout: AutomationButtonReadoutStackButton\n  ): HTMLTemplateResult {\n    let temperatureIcon: HTMLTemplateResult = html``;\n    if (readout.hasIcon) {\n      temperatureIcon = html`<obi-temperature-air\n        class=\"icon\"\n        useCssColor\n      ></obi-temperature-air>`;\n    }\n\n    const content = html`\n      ${this.renderNumber(readout.value, {fractionDigits: 1})}\n      <span class=\"unit\">${readout.unit}</span>\n    `;\n\n    return html`<obc-button class=\"readout-button\" part=\"readout-button\">\n      ${this.renderValueContainer('button', temperatureIcon, content)}\n    </obc-button>`;\n  }\n\n  renderReadout(readout: AutomationButtonReadoutStack): HTMLTemplateResult {\n    if (readout.type === 'value') {\n      return this.renderValue(readout);\n    } else if (readout.type === 'state-on') {\n      return this.renderStateOn(readout);\n    } else if (readout.type === 'state-off') {\n      return this.renderStateOff(readout);\n    } else if (readout.type === 'button') {\n      return this.renderButton(readout);\n    } else if (readout.type === 'setpoint') {\n      return this.renderSetpoint(readout);\n    } else {\n      throw new Error('Invalid readout type');\n    }\n  }\n\n  override render() {\n    const displayableReadouts = this.readouts.filter(\n      (readout) =>\n        readout.type === 'value' ||\n        readout.type === 'state-off' ||\n        readout.type === 'state-on' ||\n        readout.type === 'button' ||\n        readout.type === 'setpoint'\n    );\n\n    const renderedReadouts = displayableReadouts.map((r) =>\n      this.renderReadout(r)\n    );\n    const tag = this.renderTag();\n    const elements: unknown[] = [];\n\n    if (this.idTagOrientation === IdTagOrientation.top) {\n      elements.push(tag);\n      elements.push(...renderedReadouts);\n    } else {\n      elements.push(...renderedReadouts);\n      elements.push(tag);\n    }\n\n    return html`<div class=\"readout-stack ${this.size}\">${elements}</div>`;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-automation-button-readout-stack': ObcAutomationButtonReadoutStack;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"automation-button-readout-stack.js","names":[],"sources":["../../../src/components/automation-button-readout-stack/automation-button-readout-stack.ts"],"sourcesContent":["import {HTMLTemplateResult, LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport compentStyle from './automation-button-readout-stack.css?inline';\nimport {property} from 'lit/decorators.js';\nimport '../../icons/icon-arrow-up-google.js';\nimport '../../icons/icon-arrow-down-google.js';\nimport '../../icons/icon-arrow-left-google.js';\nimport '../../icons/icon-arrow-right-google.js';\nimport '../../icons/icon-chevron-double-up-google.js';\nimport '../../icons/icon-chevron-double-down-google.js';\nimport '../../icons/icon-chevron-double-left-google.js';\nimport '../../icons/icon-chevron-double-right-google.js';\nimport '../../icons/icon-off.js';\nimport '../../icons/icon-on.js';\nimport '../../icons/icon-temperature-air.js';\nimport '../button/button.js';\nimport '../../building-blocks/readout-block/readout-block.js';\nimport {ReadoutBlockSize} from '../../building-blocks/readout-block/readout-block.js';\nimport {ObcTextboxSize} from '../../components/textbox/textbox.js';\nimport {SETPOINT_PATH_FILLED} from '../../svghelpers/setpoint.js';\n\nexport enum AutomationButtonReadoutStackSize {\n  small = 'small',\n  regular = 'regular',\n  enhanced = 'enhanced',\n}\n\nexport enum IdTagOrientation {\n  top = 'top',\n  bottom = 'bottom',\n}\n\n// The stack's three tiers map onto the readout block's: `small` is the block's\n// small tier at xs number typography, `regular` the small tier at its default\n// s, `enhanced` the large tier. The block's cap-height boxes (16 / 20 / 32)\n// match the tiers' former line-heights.\nconst blockSizeBySize: Record<\n  AutomationButtonReadoutStackSize,\n  ReadoutBlockSize\n> = {\n  [AutomationButtonReadoutStackSize.small]: ReadoutBlockSize.small,\n  [AutomationButtonReadoutStackSize.regular]: ReadoutBlockSize.small,\n  [AutomationButtonReadoutStackSize.enhanced]: ReadoutBlockSize.large,\n};\n\nconst valueSizeBySize: Record<\n  AutomationButtonReadoutStackSize,\n  ObcTextboxSize\n> = {\n  [AutomationButtonReadoutStackSize.small]: ObcTextboxSize.xs,\n  [AutomationButtonReadoutStackSize.regular]: ObcTextboxSize.s,\n  [AutomationButtonReadoutStackSize.enhanced]: ObcTextboxSize.l,\n};\n\nexport interface AutomationButtonReadoutStackValue {\n  type: 'value';\n  value: number;\n  nDigits: number;\n  unit: string;\n  direction: 'up' | 'down' | 'left' | 'right' | 'none';\n  icon: 'none' | 'arrow' | 'chevron' | 'slot';\n  /**\n   * Host slot the row's icon is projected from when `icon` is `'slot'` —\n   * consumers place any icon element with this slot name in the stack's\n   * light DOM (e.g. a device-specific `<obi-*>` icon).\n   */\n  slotName?: string;\n}\n\nexport interface AutomationButtonReadoutStackStateOn {\n  type: 'state-on';\n  value: string;\n  hasIcon: boolean;\n  direction?: 'up' | 'down' | 'left' | 'right' | 'none';\n}\n\nexport interface AutomationButtonReadoutStackStateOff {\n  type: 'state-off';\n  value: string;\n  hasIcon: boolean;\n  direction?: 'up' | 'down' | 'left' | 'right' | 'none';\n}\n\nexport interface AutomationButtonReadoutStackButton {\n  type: 'button';\n  value: number;\n  hasIcon: boolean;\n  unit: string;\n}\n\nexport interface AutomationButtonReadoutStackSetpoint {\n  type: 'setpoint';\n  value: number;\n  nDigits: number;\n  unit?: string;\n}\n\nexport type AutomationButtonReadoutStack =\n  | AutomationButtonReadoutStackValue\n  | AutomationButtonReadoutStackStateOn\n  | AutomationButtonReadoutStackStateOff\n  | AutomationButtonReadoutStackButton\n  | AutomationButtonReadoutStackSetpoint;\n\n/**\n * A value row with `icon: 'slot'` projects its icon from the host slot named\n * by its `slotName` — a dynamic slot name, so it carries no `@slot` tag (the\n * wrapper generator needs literal names).\n *\n * @property readouts - Rows rendered top-to-bottom: `value` (padded digits, unit,\n *   optional direction icon), `state-on`/`state-off`, `button`, and `setpoint`\n *   (shared setpoint glyph + padded digits).\n * @property tag - Identifier line (e.g. '#0001'); `null` hides it.\n * @property size - Typography tier of the rows (small / regular / enhanced).\n * @property idTagOrientation - Whether the tag renders above or below the rows.\n * @experimental\n */\n@customElement('obc-automation-button-readout-stack')\nexport class ObcAutomationButtonReadoutStack extends LitElement {\n  @property({type: Array, attribute: false})\n  readouts: AutomationButtonReadoutStack[] = [];\n  @property({type: String}) tag: string | null = null;\n  @property() size: AutomationButtonReadoutStackSize =\n    AutomationButtonReadoutStackSize.regular;\n  @property() idTagOrientation: IdTagOrientation = IdTagOrientation.top;\n\n  renderTag(): typeof nothing | HTMLTemplateResult {\n    if (this.tag === null) return nothing;\n\n    return html`<div class=\"tag\">${this.tag}</div>`;\n  }\n\n  private renderValueContainer(\n    type: string,\n    icon: HTMLTemplateResult | typeof nothing,\n    content: HTMLTemplateResult\n  ): HTMLTemplateResult {\n    return html`<div class=\"readout-item ${type}\">\n      ${icon}\n      <div class=\"value-container\">\n        <div class=\"label-container\">${content}</div>\n      </div>\n    </div>`;\n  }\n\n  private renderValueText(text: string): HTMLTemplateResult {\n    return html`<span class=\"value-text\">${text}</span>`;\n  }\n\n  /**\n   * A numeric segment on `obc-readout-block` — the block owns the formatting:\n   * hinted zeros fill the integer part to `maxDigits`, the sign is prepended\n   * without consuming a zero (`-005`), and an unavailable value renders the\n   * family's dash placeholder.\n   */\n  private renderNumber(\n    value: number,\n    format: {maxDigits?: number; fractionDigits?: number; hintedZeros?: boolean}\n  ): HTMLTemplateResult {\n    return html`<obc-readout-block\n      class=\"number\"\n      .value=${value}\n      .size=${blockSizeBySize[this.size]}\n      .valueSize=${valueSizeBySize[this.size]}\n      .maxDigits=${format.maxDigits ?? 0}\n      .fractionDigits=${format.fractionDigits ?? 0}\n      .hintedZeros=${format.hintedZeros ?? false}\n    ></obc-readout-block>`;\n  }\n\n  private renderArrow(\n    direction: 'up' | 'down' | 'left' | 'right' | 'none' | undefined\n  ): HTMLTemplateResult | typeof nothing {\n    switch (direction) {\n      case 'up':\n        return html`<obi-arrow-up-google\n          class=\"icon\"\n          useCssColor\n        ></obi-arrow-up-google>`;\n      case 'down':\n        return html`<obi-arrow-down-google\n          class=\"icon\"\n          useCssColor\n        ></obi-arrow-down-google>`;\n      case 'left':\n        return html`<obi-arrow-left-google\n          class=\"icon\"\n          useCssColor\n        ></obi-arrow-left-google>`;\n      case 'right':\n        return html`<obi-arrow-right-google\n          class=\"icon\"\n          useCssColor\n        ></obi-arrow-right-google>`;\n      default:\n        return nothing;\n    }\n  }\n\n  renderValue(readout: AutomationButtonReadoutStackValue): HTMLTemplateResult {\n    let directionIcon: HTMLTemplateResult | typeof nothing = nothing;\n    if (readout.icon == 'arrow') {\n      directionIcon = this.renderArrow(readout.direction);\n    } else if (readout.icon == 'chevron') {\n      if (readout.direction == 'up') {\n        directionIcon = html`<obi-chevron-double-up-google\n          class=\"icon\"\n          useCssColor\n        ></obi-chevron-double-up-google>`;\n      } else if (readout.direction == 'down') {\n        directionIcon = html`<obi-chevron-double-down-google\n          class=\"icon\"\n          useCssColor\n        ></obi-chevron-double-down-google>`;\n      } else if (readout.direction == 'left') {\n        directionIcon = html`<obi-chevron-double-left-google\n          class=\"icon\"\n          useCssColor\n        ></obi-chevron-double-left-google>`;\n      } else if (readout.direction == 'right') {\n        directionIcon = html`<obi-chevron-double-right-google\n          class=\"icon\"\n          useCssColor\n        ></obi-chevron-double-right-google>`;\n      }\n    } else if (readout.icon == 'slot' && readout.slotName) {\n      directionIcon = html`<slot class=\"icon\" name=${readout.slotName}></slot>`;\n    }\n    const content = html`\n      ${this.renderNumber(readout.value, {\n        maxDigits: readout.nDigits,\n        hintedZeros: true,\n      })}\n      <span class=\"unit\">${readout.unit}</span>\n    `;\n\n    return this.renderValueContainer('value', directionIcon, content);\n  }\n\n  renderSetpoint(\n    readout: AutomationButtonReadoutStackSetpoint\n  ): HTMLTemplateResult {\n    const glyph = html`<svg\n      class=\"setpoint-glyph\"\n      viewBox=\"2.5 -2.5 21 26\"\n      aria-hidden=\"true\"\n    >\n      <path d=${SETPOINT_PATH_FILLED} transform=\"rotate(-90 13 10.5)\" />\n    </svg>`;\n    const content = html`\n      ${this.renderNumber(readout.value, {\n        maxDigits: readout.nDigits,\n        hintedZeros: true,\n      })}\n      ${\n        readout.unit ? html`<span class=\"unit\">${readout.unit}</span>` : nothing\n      }\n    `;\n    return this.renderValueContainer('setpoint', glyph, content);\n  }\n\n  renderStateOff(\n    readout: AutomationButtonReadoutStackStateOff\n  ): HTMLTemplateResult {\n    let offIcon: HTMLTemplateResult | typeof nothing = html``;\n    if (readout.direction && readout.direction !== 'none') {\n      offIcon = this.renderArrow(readout.direction);\n    } else if (readout.hasIcon) {\n      offIcon = html`<obi-off class=\"icon\" useCssColor></obi-off>`;\n    }\n\n    const content = this.renderValueText(readout.value);\n    return this.renderValueContainer('state-off', offIcon, content);\n  }\n\n  renderStateOn(\n    readout: AutomationButtonReadoutStackStateOn\n  ): HTMLTemplateResult {\n    let onIcon: HTMLTemplateResult | typeof nothing = html``;\n    if (readout.direction && readout.direction !== 'none') {\n      onIcon = this.renderArrow(readout.direction);\n    } else if (readout.hasIcon) {\n      onIcon = html`<obi-on class=\"icon\" useCssColor></obi-on>`;\n    }\n\n    const content = this.renderValueText(readout.value);\n    return this.renderValueContainer('state-on', onIcon, content);\n  }\n\n  renderButton(\n    readout: AutomationButtonReadoutStackButton\n  ): HTMLTemplateResult {\n    let temperatureIcon: HTMLTemplateResult = html``;\n    if (readout.hasIcon) {\n      temperatureIcon = html`<obi-temperature-air\n        class=\"icon\"\n        useCssColor\n      ></obi-temperature-air>`;\n    }\n\n    const content = html`\n      ${this.renderNumber(readout.value, {fractionDigits: 1})}\n      <span class=\"unit\">${readout.unit}</span>\n    `;\n\n    return html`<obc-button class=\"readout-button\" part=\"readout-button\">\n      ${this.renderValueContainer('button', temperatureIcon, content)}\n    </obc-button>`;\n  }\n\n  renderReadout(readout: AutomationButtonReadoutStack): HTMLTemplateResult {\n    if (readout.type === 'value') {\n      return this.renderValue(readout);\n    } else if (readout.type === 'state-on') {\n      return this.renderStateOn(readout);\n    } else if (readout.type === 'state-off') {\n      return this.renderStateOff(readout);\n    } else if (readout.type === 'button') {\n      return this.renderButton(readout);\n    } else if (readout.type === 'setpoint') {\n      return this.renderSetpoint(readout);\n    } else {\n      throw new Error('Invalid readout type');\n    }\n  }\n\n  override render() {\n    const displayableReadouts = this.readouts.filter(\n      (readout) =>\n        readout.type === 'value' ||\n        readout.type === 'state-off' ||\n        readout.type === 'state-on' ||\n        readout.type === 'button' ||\n        readout.type === 'setpoint'\n    );\n\n    const renderedReadouts = displayableReadouts.map((r) =>\n      this.renderReadout(r)\n    );\n    const tag = this.renderTag();\n    const elements: unknown[] = [];\n\n    if (this.idTagOrientation === IdTagOrientation.top) {\n      elements.push(tag);\n      elements.push(...renderedReadouts);\n    } else {\n      elements.push(...renderedReadouts);\n      elements.push(tag);\n    }\n\n    return html`<div class=\"readout-stack ${this.size}\">${elements}</div>`;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-automation-button-readout-stack': ObcAutomationButtonReadoutStack;\n  }\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents",
-  "version": "2.1.0-next.3",
+  "version": "2.1.0-next.4",
   "type": "module",
   "repository": {
     "type": "git",