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

package/bundle/openbridge-webcomponents.bundle.js

@@ -12949,6 +12949,13 @@ __decorate([n$4({ type: Boolean })], ObiTwowayAnalogClosed.prototype, "useCssCol
 ObiTwowayAnalogClosed = __decorate([customElement("obi-twoway-analog-closed")], ObiTwowayAnalogClosed);
 //#endregion
 //#region src/automation/valve-analoge-two-way-icon/valve-analog-two-way-icon.ts
+var OUTLINE = "M11 11L3.5547 6.03645C2.89015 5.59342 2 6.06981 2 6.8685V19.1315C2 19.9302 2.89015 20.4066 3.5547 19.9635L11 15H13L20.4453 19.9635C21.1099 20.4066 22 19.9302 22 19.1315V6.8685C22 6.06981 21.1099 5.59342 20.4453 6.03645L13 11H11ZM3 6.8685L3 19.1315L10.6972 14H13.3028L21 19.1315V6.8685L13.3028 12H10.6972L3 6.8685Z";
+var BODY = "M10.6972 12H13.3028L21 6.8685V19.1315L13.3028 14H10.6972L3 19.1315V6.8685L10.6972 12Z";
+/** Width of the shut band at each port end when the opening is 0 %, in icon units. */
+var BAND_RANGE = 7;
+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 ObcValveAnalogTwoWayIcon = class ObcValveAnalogTwoWayIcon extends i$4 {
 	constructor(..._args) {
 		super(..._args);
@@ -12956,21 +12963,37 @@ var ObcValveAnalogTwoWayIcon = class ObcValveAnalogTwoWayIcon extends i$4 {
 		this.closed = false;
 		this.vertical = false;
 	}
+	renderBands(width) {
+		if (width <= 0) return null;
+		const left = 3 + width;
+		const right = 21 - width;
+		return w`<g clip-path="url(#body)">
+      <rect x="2" y="0" width=${left - 2} height="24" style=${SECONDARY}/>
+      <rect x=${left} y="0" width="1" height="24" style=${TERTIARY}/>
+      <rect x=${right} y="0" width=${22 - right} height="24" style=${SECONDARY}/>
+      <rect x=${right - 1} y="0" width="1" height="24" style=${TERTIARY}/>
+    </g>`;
+	}
+	/**
+	* Horizontal at the top when open, turning to vertical and moving 2 units
+	* down as the valve shuts, matching `obi-twoway-analog-open` at 100 %.
+	*/
+	renderHandle(value) {
+		const shut = 1 - value / 100;
+		const angle = -90 * shut;
+		const cx = 12;
+		const cy = 3.5 + 2 * shut;
+		return w`<g transform="rotate(${angle} ${cx} ${cy})">
+      <rect x=${8} y=${cy - 1.5} width="8" height="3" rx="1.5" style=${TERTIARY}/>
+      <rect x=${9} y=${cy - .5} width="6" height="1" rx="0.5" style=${PRIMARY}/>
+    </g>`;
+	}
 	render() {
 		const transform = this.vertical ? "transform: rotate(90deg);" : "";
 		if (this.closed) return b` <div class="wrapper" style="${transform}">
         <obi-twoway-analog-closed useCssColor> </obi-twoway-analog-closed>
       </div>`;
-		const handleRotation = -(1 - this.value / 100) * 90;
-		const handle = w`
-      <g transform="translate(0, ${(1 - this.value / 100) * 2}) rotate(${handleRotation} 12 3.5) ">
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M9.5 5H14.5C15.3284 5 16 4.32843 16 3.5C16 2.67157 15.3284 2 14.5 2H9.5C8.67157 2 8 2.67157 8 3.5C8 4.32843 8.67157 5 9.5 5ZM9.5 4L14.5 4C14.7761 4 15 3.77614 15 3.5C15 3.22386 14.7761 3 14.5 3L9.5 3C9.22386 3 9 3.22386 9 3.5C9 3.77614 9.22386 4 9.5 4Z" fill="var(--automation-device-tertiary-color)"/>
-        <path d="M9.5 4L14.5 4C14.7761 4 15 3.77614 15 3.5C15 3.22386 14.7761 3 14.5 3L9.5 3C9.22386 3 9 3.22386 9 3.5C9 3.77614 9.22386 4 9.5 4Z" fill="var(--automation-device-primary-color)"/>
-      </g>
-    `;
-		const xmin = 10.5;
-		const xmax = 2.5;
-		const x = xmin + -8 * this.value / 100;
+		const value = clampPercent$1(this.value);
 		return b`
       <div class="wrapper" style="${transform}">
         <svg
@@ -12980,55 +13003,13 @@ var ObcValveAnalogTwoWayIcon = class ObcValveAnalogTwoWayIcon extends i$4 {
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <path
-            d="M11 11L3.5547 6.03645C2.89015 5.59342 2 6.06981 2 6.8685V19.1315C2 19.9302 2.89015 20.4066 3.5547 19.9635L11 15H13L20.4453 19.9635C21.1099 20.4066 22 19.9302 22 19.1315V6.8685C22 6.06981 21.1099 5.59342 20.4453 6.03645L13 11H11ZM3 6.8685L3 19.1315L10.6972 14H13.3028L21 19.1315V6.8685L13.3028 12H10.6972L3 6.8685Z"
-            fill="var(--automation-device-tertiary-color)"
-          />
-          <path
-            d="M10.6972 12H13.3028L21 6.8685V19.1315L13.3028 14H10.6972L3 19.1315V6.8685L10.6972 12Z"
-            fill="var(--automation-device-primary-color)"
-          />
-          ${handle}
-          <g clip-path="url(#clip0)">
-            <rect
-              x=${xmax}
-              y="0"
-              width=${x - xmax}
-              height="24"
-              fill="var(--automation-device-secondary-color)"
-            />
-            <line
-              x1=${x}
-              y1="0"
-              x2=${x}
-              y2="24"
-              stroke="var(--automation-device-tertiary-color)"
-              stroke-width="1"
-            />
-
-            <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>
           <defs>
-            <clipPath id="clip0">
-              <path
-                d="M10.6972 12H13.3028L21 6.8685V19.1315L13.3028 14H10.6972L3 19.1315V6.8685L10.6972 12Z"
-              />
-            </clipPath>
+            <clipPath id="body"><path d=${BODY} /></clipPath>
           </defs>
+          <path d=${OUTLINE} style=${TERTIARY} />
+          <path d=${BODY} style=${PRIMARY} />
+          ${this.renderBands(BAND_RANGE * (100 - value) / 100)}
+          ${this.renderHandle(value)}
         </svg>
       </div>
     `;