@oicl/openbridge-webcomponents 0.0.13 → 0.0.15-dev-20240814145458

package/dist/automation/automation-button/automation-button.css.js

@@ -9,7 +9,14 @@ const compentStyle = css`* {
     } 
 }
 
+.outer-wrapper {
+    width: 0;
+    height: 0;
+}
+
 .wrapper {
+    position: absolute;
+
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -22,6 +29,74 @@ const compentStyle = css`* {
     border-radius: 6px;
 }
 
+.wrapper.label-bottom {
+        top: -33px;
+        transform: translateX(-50%);
+    }
+
+.wrapper.label-right {
+        left: -33px;
+        transform: translateY(-50%);
+    }
+
+.wrapper.label-top{
+        bottom: -33px;
+        transform: translateX(-50%);
+    }
+
+.wrapper.label-left {
+        right: -33px;
+        transform: translateY(-50%);
+    }
+
+.wrapper.size-small.label-bottom {
+            top: -25px;
+        }
+
+.wrapper.size-small.label-right {
+            left: -25px;
+        }
+
+.wrapper.size-small.label-top{
+            bottom: -25px;
+        }
+
+.wrapper.size-small.label-left {
+            right: -25px;
+        }
+
+.wrapper.size-large.label-bottom {
+            top: -41px;
+        }
+
+.wrapper.size-large.label-right {
+            left: -41px;
+        }
+
+.wrapper.size-large.label-top{
+            bottom: -41px;
+        }
+
+.wrapper.size-large.label-left {
+            right: -41px;
+        }
+
+.wrapper.size-xl.label-bottom {
+            top: -57px;
+        }
+
+.wrapper.size-xl.label-right {
+            left: -57px;
+        }
+
+.wrapper.size-xl.label-top{
+            bottom: -57px;
+        }
+
+.wrapper.size-xl.label-left {
+            right: -57px;
+        }
+
 .wrapper {
     border-color: var(--flat-enabled-border-color);
     background-color: var(--flat-enabled-background-color);

package/dist/automation/automation-button/automation-button.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"automation-button.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"automation-button.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/automation/automation-button/automation-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"automation-button.d.ts","sourceRoot":"","sources":["../../../src/automation/automation-button/automation-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,UAAU,EAAkB,MAAM,KAAK,CAAC;AAIpE,OAAO,6BAA6B,CAAC;AACrC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,qCAAqC,CAAC;AAC7C,OAAO,8BAA8B,CAAC;AACtC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,sCAAsC,CAAC;AAC9C,OAAO,6BAA6B,CAAC;AACrC,OAAO,8BAA8B,CAAC;AACtC,OAAO,gCAAgC,CAAC;AACxC,OAAO,gCAAgC,CAAC;AACxC,OAAO,mCAAmC,CAAC;AAE3C,oBAAY,oBAAoB;IAC9B,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,EAAE,OAAO;CACV;AAED,oBAAY,uBAAuB;IACjC,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,MAAM,WAAW;CAClB;AAED,oBAAY,qBAAqB;IAC/B,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,YAAY,kBAAkB;IAC9B,UAAU,gBAAgB;IAC1B,MAAM,WAAW;CAClB;AAED,oBAAY,yBAAyB;IACnC,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,QAAQ,aAAa;CACtB;AAED,oBAAY,0BAA0B;IACpC,OAAO,YAAY;IACnB,QAAQ,aAAa;IACrB,MAAM,WAAW;CAClB;AAED,MAAM,WAAW,0BAA0B;IACzC,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,OAAO,CAAC;CACf;AAED,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,KAAK,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,kCAAkC;IACjD,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,SAAS,CAAC;IAChB,SAAS,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;CAC7C;AAED,oBAAY,6BAA6B;IACvC,GAAG,QAAQ;IACX,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,KAAK,UAAU;CAChB;AAED,oBAAY,yBAAyB;IACnC,OAAO,YAAY;IACnB,WAAW,iBAAiB;IAC5B,cAAc,oBAAoB;IAClC,QAAQ,aAAa;IACrB,YAAY,kBAAkB;IAC9B,eAAe,qBAAqB;IACpC,OAAO,YAAY;CACpB;AAED,MAAM,MAAM,qBAAqB,GAC7B,0BAA0B,GAC1B,wBAAwB,GACxB,kCAAkC,CAAC;AA6CvC,qBACa,mBAAoB,SAAQ,UAAU;IACvB,IAAI,EAAE,oBAAoB,CACrB;IACL,OAAO,EAAE,uBAAuB,CACxB;IACR,KAAK,EAAE,qBAAqB,CACzB;IACc,MAAM,EAAE,qBAAqB,EAAE,CACrE;IACqB,aAAa,EAAE,6BAA6B,CAC/B;IACb,SAAS,EAAE,yBAAyB,CAC1B;IACV,UAAU,EAAE,0BAA0B,CAC3B;IACV,KAAK,EAAE,OAAO,CAAS;IACvB,QAAQ,EAAE,OAAO,CAAS;IAC3B,SAAS,EAAE,yBAAyB,CAC1B;IAE3B,MAAM;IAqEf,OAAgB,MAAM,0BAA2B;IAEjD,OAAO,CAAC,kBAAkB;IAkC1B,OAAO,CAAC,gBAAgB;CA2GzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,mBAAmB,CAAC;KAC9C;CACF"}
+{"version":3,"file":"automation-button.d.ts","sourceRoot":"","sources":["../../../src/automation/automation-button/automation-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,UAAU,EAAkB,MAAM,KAAK,CAAC;AAIpE,OAAO,6BAA6B,CAAC;AACrC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,qCAAqC,CAAC;AAC7C,OAAO,8BAA8B,CAAC;AACtC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,sCAAsC,CAAC;AAC9C,OAAO,6BAA6B,CAAC;AACrC,OAAO,8BAA8B,CAAC;AACtC,OAAO,gCAAgC,CAAC;AACxC,OAAO,gCAAgC,CAAC;AACxC,OAAO,mCAAmC,CAAC;AAE3C,oBAAY,oBAAoB;IAC9B,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,EAAE,OAAO;CACV;AAED,oBAAY,uBAAuB;IACjC,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,MAAM,WAAW;CAClB;AAED,oBAAY,qBAAqB;IAC/B,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,YAAY,kBAAkB;IAC9B,UAAU,gBAAgB;IAC1B,MAAM,WAAW;CAClB;AAED,oBAAY,yBAAyB;IACnC,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,QAAQ,aAAa;CACtB;AAED,oBAAY,0BAA0B;IACpC,OAAO,YAAY;IACnB,QAAQ,aAAa;IACrB,MAAM,WAAW;CAClB;AAED,MAAM,WAAW,0BAA0B;IACzC,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,OAAO,CAAC;CACf;AAED,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,KAAK,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,kCAAkC;IACjD,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,SAAS,CAAC;IAChB,SAAS,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;CAC7C;AAED,oBAAY,6BAA6B;IACvC,GAAG,QAAQ;IACX,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,KAAK,UAAU;CAChB;AAED,oBAAY,yBAAyB;IACnC,OAAO,YAAY;IACnB,WAAW,iBAAiB;IAC5B,cAAc,oBAAoB;IAClC,QAAQ,aAAa;IACrB,YAAY,kBAAkB;IAC9B,eAAe,qBAAqB;IACpC,OAAO,YAAY;CACpB;AAED,MAAM,MAAM,qBAAqB,GAC7B,0BAA0B,GAC1B,wBAAwB,GACxB,kCAAkC,CAAC;AA6CvC,qBACa,mBAAoB,SAAQ,UAAU;IACvB,IAAI,EAAE,oBAAoB,CACrB;IACL,OAAO,EAAE,uBAAuB,CACxB;IACR,KAAK,EAAE,qBAAqB,CACzB;IACc,MAAM,EAAE,qBAAqB,EAAE,CACrE;IACqB,aAAa,EAAE,6BAA6B,CAC/B;IACb,SAAS,EAAE,yBAAyB,CAC1B;IACV,UAAU,EAAE,0BAA0B,CAC3B;IACV,KAAK,EAAE,OAAO,CAAS;IACvB,QAAQ,EAAE,OAAO,CAAS;IAC3B,SAAS,EAAE,yBAAyB,CAC1B;IAE3B,MAAM;IAuEf,OAAgB,MAAM,0BAA2B;IAEjD,OAAO,CAAC,kBAAkB;IAkC1B,OAAO,CAAC,gBAAgB;CA2GzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,mBAAmB,CAAC;KAC9C;CACF"}

package/dist/automation/automation-button/automation-button.js

@@ -133,8 +133,9 @@ let ObcAutomationButton = class extends LitElement {
     const progressSpinner = this.getProgressSpinner();
     const direction = this.getDirectionIcon();
     return html`
-      <button
-        class=${classMap({
+      <div class="outer-wrapper">
+        <button
+          class=${classMap({
       wrapper: true,
       ["size-" + this.size]: true,
       ["variant-" + this.variant]: true,
@@ -145,49 +146,50 @@ let ObcAutomationButton = class extends LitElement {
       alert: this.alert,
       progress: this.progress
     })}
-      >
-        <div class="icon-holder">
-          ${direction}
-          ${this.variant !== "double" || this.size !== "small" ? html`<div class="icon-primary">
-                <slot name="icon"></slot>
-              </div>` : ""}
-          ${progressSpinner}
-          ${this.alert ? html`<svg
-                class="alert-icon"
-                width="18"
-                height="31"
-                viewBox="0 0 18 31"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M 0 0 L 16 0 C 17.1046 0 18 0.8954 18 2 V 14.7889 C 18 15.5786 17.7662 16.3506 17.3282 17.0077 L 9 30 V 3 L  7 1 H 0  Z"
-                  fill="var(--alert-alarm-color)"
-                />
-                <path
-                  d="M12 4H14V11.5H12V4Z"
-                  fill="var(--on-alarm-active-color)"
-                />
-                <path
-                  d="M12 13.5H14V15.5H12V13.5Z"
-                  fill="var(--on-alarm-active-color)"
-                />
-              </svg> ` : ""}
-          <div class="badge-top-right">
-            <slot name="badge-top-right"></slot>
-          </div>
-          <div class="badge-top-left">
-            <slot name="badge-top-left"></slot>
-          </div>
-          <div class="badge-bottom-left">
-            <slot name="badge-bottom-left"></slot>
-          </div>
-          <div class="badge-bottom-right">
-            <slot name="badge-bottom-right"></slot>
+        >
+          <div class="icon-holder">
+            ${direction}
+            ${this.variant !== "double" || this.size !== "small" ? html`<div class="icon-primary">
+                  <slot name="icon"></slot>
+                </div>` : ""}
+            ${progressSpinner}
+            ${this.alert ? html`<svg
+                  class="alert-icon"
+                  width="18"
+                  height="31"
+                  viewBox="0 0 18 31"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M 0 0 L 16 0 C 17.1046 0 18 0.8954 18 2 V 14.7889 C 18 15.5786 17.7662 16.3506 17.3282 17.0077 L 9 30 V 3 L  7 1 H 0  Z"
+                    fill="var(--alert-alarm-color)"
+                  />
+                  <path
+                    d="M12 4H14V11.5H12V4Z"
+                    fill="var(--on-alarm-active-color)"
+                  />
+                  <path
+                    d="M12 13.5H14V15.5H12V13.5Z"
+                    fill="var(--on-alarm-active-color)"
+                  />
+                </svg> ` : ""}
+            <div class="badge-top-right">
+              <slot name="badge-top-right"></slot>
+            </div>
+            <div class="badge-top-left">
+              <slot name="badge-top-left"></slot>
+            </div>
+            <div class="badge-bottom-left">
+              <slot name="badge-bottom-left"></slot>
+            </div>
+            <div class="badge-bottom-right">
+              <slot name="badge-bottom-right"></slot>
+            </div>
           </div>
-        </div>
-        <div class="label">${labels}</div>
-      </button>
+          <div class="label">${labels}</div>
+        </button>
+      </div>
     `;
   }
   getProgressSpinner() {
@@ -323,7 +325,7 @@ let ObcAutomationButton = class extends LitElement {
     } else if (this.direction === "standby") {
       return html`<obi-08-standby
         class="icon-direction"
-        use-css-color
+        usecsscolor
       ></obi-08-standby>`;
     }
     throw new Error("Invalid direction");

package/dist/automation/automation-button/automation-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"automation-button.js","sources":["../../../src/automation/automation-button/automation-button.ts"],"sourcesContent":["import {HTMLTemplateResult, LitElement, html, unsafeCSS} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport compentStyle from './automation-button.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport '../../icons/icon-08-forward';\nimport '../../icons/icon-08-forward-fast';\nimport '../../icons/icon-08-forward-stopped';\nimport '../../icons/icon-08-backward';\nimport '../../icons/icon-08-backward-fast';\nimport '../../icons/icon-08-backward-stopped';\nimport '../../icons/icon-08-standby';\nimport '../../icons/icon-02-arrow-up';\nimport '../../icons/icon-02-arrow-down';\nimport '../../icons/icon-02-arrow-back';\nimport '../../icons/icon-02-arrow-forward';\n\nexport enum AutomationButtonSize {\n  small = 'small',\n  regular = 'regular',\n  large = 'large',\n  xl = 'xl',\n}\n\nexport enum AutomationButtonVariant {\n  regular = 'regular',\n  double = 'double',\n  switch = 'switch',\n}\n\nexport enum AutomationButtonState {\n  closed = 'closed',\n  open = 'open',\n  openEnhanced = 'open-enhanced',\n  openMedium = 'open-medium',\n  static = 'static',\n}\n\nexport enum AutomationButtonLabelSize {\n  small = 'small',\n  regular = 'regular',\n  enhanced = 'enhanced',\n}\n\nexport enum AutomationBottonLabelStyle {\n  regular = 'regular',\n  enhanced = 'enhanced',\n  active = 'active',\n}\n\nexport interface AutomationButtonStateLabel {\n  type: 'state';\n  text: string;\n  bold: boolean;\n}\n\nexport interface AutomationButtonTagLabel {\n  type: 'tag';\n  text: string;\n  showHash: boolean;\n}\n\nexport interface AutomationButtonDirectonValueLabel {\n  type: 'direction';\n  value: number;\n  nDigits: number;\n  unit: 'percent';\n  direction: 'up' | 'down' | 'left' | 'right';\n}\n\nexport enum AutomationButtonLabelPosition {\n  top = 'top',\n  bottom = 'bottom',\n  left = 'left',\n  right = 'right',\n}\n\nexport enum AutomationButtonDirection {\n  forward = 'forward',\n  forwardFast = 'forward-fast',\n  forwardStopped = 'forward-stopped',\n  backward = 'backward',\n  backwardFast = 'backward-fast',\n  backwardStopped = 'backward-stopped',\n  standby = 'standby',\n}\n\nexport type AutomationButtonLabel =\n  | AutomationButtonStateLabel\n  | AutomationButtonTagLabel\n  | AutomationButtonDirectonValueLabel;\n\nfunction renderLabel(label: AutomationButtonLabel): HTMLTemplateResult {\n  if (label.type === 'state') {\n    return html`<div class=\"state ${label.bold ? 'bold' : ''}\">\n      ${label.text}\n    </div>`;\n  } else if (label.type === 'tag') {\n    return html`<div class=\"tag\">\n      ${label.showHash ? html`<div class=\"hash\">#</div>` : null} ${label.text}\n    </div>`;\n  } else {\n    const v = label.value.toFixed(0);\n    const zeroPadding =\n      v.length < label.nDigits ? '0'.repeat(label.nDigits - v.length) : '';\n\n    let directionIcon: HTMLTemplateResult;\n    if (label.direction === 'up') {\n      directionIcon = html`<obi-02-arrow-up\n        class=\"direction-icon\"\n      ></obi-02-arrow-up>`;\n    } else if (label.direction === 'down') {\n      directionIcon = html`<obi-02-arrow-down\n        class=\"direction-icon\"\n      ></obi-02-arrow-down>`;\n    } else if (label.direction === 'left') {\n      directionIcon = html`<obi-02-arrow-back\n        class=\"direction-icon\"\n      ></obi-02-arrow-back>`;\n    } else if (label.direction === 'right') {\n      directionIcon = html`<obi-02-arrow-forward\n        class=\"direction-icon\"\n      ></obi-02-arrow-forward>`;\n    } else {\n      throw new Error('Invalid direction');\n    }\n    return html` <div class=\"direction\">\n      ${directionIcon}\n      <span class=\"zeros\">${zeroPadding}</span>\n      <span class=\"value\">${v}</span>\n      <span class=\"unit\">${label.unit === 'percent' ? '%' : label.unit}</span>\n    </div>`;\n  }\n}\n\n@customElement('obc-automation-button')\nexport class ObcAutomationButton extends LitElement {\n  @property({type: String}) size: AutomationButtonSize =\n    AutomationButtonSize.regular;\n  @property({type: String}) variant: AutomationButtonVariant =\n    AutomationButtonVariant.regular;\n  @property({type: String}) state: AutomationButtonState =\n    AutomationButtonState.open;\n  @property({type: Array, attribute: false}) labels: AutomationButtonLabel[] =\n    [];\n  @property({type: String}) labelPosition: AutomationButtonLabelPosition =\n    AutomationButtonLabelPosition.bottom;\n  @property({type: String}) labelSize: AutomationButtonLabelSize =\n    AutomationButtonLabelSize.regular;\n  @property({type: String}) labelStyle: AutomationBottonLabelStyle =\n    AutomationBottonLabelStyle.regular;\n  @property({type: Boolean}) alert: boolean = false;\n  @property({type: Boolean}) progress: boolean = false;\n  @property({type: String}) direction: AutomationButtonDirection =\n    AutomationButtonDirection.forward;\n\n  override render() {\n    const labels = this.labels.map(renderLabel);\n    const progressSpinner = this.getProgressSpinner();\n    const direction = this.getDirectionIcon();\n\n    return html`\n      <button\n        class=${classMap({\n          wrapper: true,\n          ['size-' + this.size]: true,\n          ['variant-' + this.variant]: true,\n          ['state-' + this.state]: true,\n          ['label-' + this.labelPosition]: true,\n          ['label-size-' + this.labelSize]: true,\n          ['label-style-' + this.labelStyle]: true,\n          alert: this.alert,\n          progress: this.progress,\n        })}\n      >\n        <div class=\"icon-holder\">\n          ${direction}\n          ${this.variant !== AutomationButtonVariant.double ||\n          this.size !== AutomationButtonSize.small\n            ? html`<div class=\"icon-primary\">\n                <slot name=\"icon\"></slot>\n              </div>`\n            : ''}\n          ${progressSpinner}\n          ${this.alert\n            ? html`<svg\n                class=\"alert-icon\"\n                width=\"18\"\n                height=\"31\"\n                viewBox=\"0 0 18 31\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M 0 0 L 16 0 C 17.1046 0 18 0.8954 18 2 V 14.7889 C 18 15.5786 17.7662 16.3506 17.3282 17.0077 L 9 30 V 3 L  7 1 H 0  Z\"\n                  fill=\"var(--alert-alarm-color)\"\n                />\n                <path\n                  d=\"M12 4H14V11.5H12V4Z\"\n                  fill=\"var(--on-alarm-active-color)\"\n                />\n                <path\n                  d=\"M12 13.5H14V15.5H12V13.5Z\"\n                  fill=\"var(--on-alarm-active-color)\"\n                />\n              </svg> `\n            : ''}\n          <div class=\"badge-top-right\">\n            <slot name=\"badge-top-right\"></slot>\n          </div>\n          <div class=\"badge-top-left\">\n            <slot name=\"badge-top-left\"></slot>\n          </div>\n          <div class=\"badge-bottom-left\">\n            <slot name=\"badge-bottom-left\"></slot>\n          </div>\n          <div class=\"badge-bottom-right\">\n            <slot name=\"badge-bottom-right\"></slot>\n          </div>\n        </div>\n        <div class=\"label\">${labels}</div>\n      </button>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n\n  private getProgressSpinner(): null | HTMLTemplateResult {\n    if (!this.progress) {\n      return null;\n    }\n\n    let spinnerWidth: number;\n    if (this.size === AutomationButtonSize.small) {\n      spinnerWidth = 40;\n    } else if (this.size === AutomationButtonSize.regular) {\n      spinnerWidth = 56;\n    } else if (this.size === AutomationButtonSize.large) {\n      spinnerWidth = 72;\n    } else {\n      spinnerWidth = 104;\n    }\n    const progressSpinner = html`<svg\n      width=\"${spinnerWidth}\"\n      height=\"${spinnerWidth}\"\n      viewBox=\"0 0 ${spinnerWidth} ${spinnerWidth}\"\n      fill=\"none\"\n      class=\"progress-spinner\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M2 ${spinnerWidth / 2} A ${spinnerWidth / 2 - 2} ${spinnerWidth / 2 -\n        2} 0 0 1 ${spinnerWidth / 2} 2\"\n        stroke=\"var(--instrument-enhanced-secondary-color)\"\n        stroke-width=\"4\"\n        stroke-linecap=\"round\"\n      />\n    </svg> `;\n    return progressSpinner;\n  }\n\n  private getDirectionIcon(): null | HTMLTemplateResult {\n    if (this.variant !== AutomationButtonVariant.double) {\n      return null;\n    } else if (this.direction === AutomationButtonDirection.forward) {\n      return html`<svg\n        class=\"icon-direction\"\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=\"M8 5 v 14 L 20 12Z\"\n          stroke=\"var(--automation-device-tertiary-color)\"\n          fill=\"var(--automation-device-primary-color)\"\n          vector-effect=\"non-scaling-stroke\"\n        />\n      </svg> `;\n    } else if (this.direction === AutomationButtonDirection.forwardFast) {\n      return html`<svg\n        class=\"icon-direction\"\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=\"M3.5 5 v 14 l 8.5 -7 Z M14.5 5 v 14 l 8.5 -7 Z\"\n          stroke=\"var(--automation-device-tertiary-color)\"\n          fill=\"var(--automation-device-primary-color)\"\n          vector-effect=\"non-scaling-stroke\"\n        />\n      </svg> `;\n    } else if (this.direction === AutomationButtonDirection.forwardStopped) {\n      return html`<svg\n        class=\"icon-direction\"\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=\"M8 5 v 14 L 20 12Z\"\n          fill=\"var(--automation-device-tertiary-color)\"\n          stroke=\"var(--automation-device-tertiary-inverted-color)\"\n          vector-effect=\"non-scaling-stroke\"\n        />\n      </svg> `;\n    } else if (this.direction === AutomationButtonDirection.backward) {\n      return html`<svg\n        class=\"icon-direction\"\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=\"M16 5 v 14 L 4 12Z\"\n          stroke=\"var(--automation-device-tertiary-color)\"\n          fill=\"var(--automation-device-primary-color)\"\n          vector-effect=\"non-scaling-stroke\"\n        />\n      </svg>`;\n    } else if (this.direction === AutomationButtonDirection.backwardFast) {\n      return html`<svg\n        class=\"icon-direction\"\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=\"M20.5 5 v 14 l -8.5 -7 Z M9.5 5 v 14 l -8.5 -7 Z\"\n          stroke=\"var(--automation-device-tertiary-color)\"\n          fill=\"var(--automation-device-primary-color)\"\n          vector-effect=\"non-scaling-stroke\"\n        />\n      </svg>`;\n    } else if (this.direction === AutomationButtonDirection.backwardStopped) {\n      return html`<svg\n        class=\"icon-direction\"\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=\"M16 5 v 14 L 4 12Z\"\n          fill=\"var(--automation-device-tertiary-color)\"\n          stroke=\"var(--automation-device-tertiary-inverted-color)\"\n          vector-effect=\"non-scaling-stroke\"\n        />\n      </svg> `;\n    } else if (this.direction === AutomationButtonDirection.standby) {\n      return html`<obi-08-standby\n        class=\"icon-direction\"\n        use-css-color\n      ></obi-08-standby>`;\n    }\n    throw new Error('Invalid direction');\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-automation-button': ObcAutomationButton;\n  }\n}\n"],"names":["AutomationButtonSize","AutomationButtonVariant","AutomationButtonState","AutomationButtonLabelSize","AutomationBottonLabelStyle","AutomationButtonLabelPosition","AutomationButtonDirection"],"mappings":"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"}
+{"version":3,"file":"automation-button.js","sources":["../../../src/automation/automation-button/automation-button.ts"],"sourcesContent":["import {HTMLTemplateResult, LitElement, html, unsafeCSS} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport compentStyle from './automation-button.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport '../../icons/icon-08-forward';\nimport '../../icons/icon-08-forward-fast';\nimport '../../icons/icon-08-forward-stopped';\nimport '../../icons/icon-08-backward';\nimport '../../icons/icon-08-backward-fast';\nimport '../../icons/icon-08-backward-stopped';\nimport '../../icons/icon-08-standby';\nimport '../../icons/icon-02-arrow-up';\nimport '../../icons/icon-02-arrow-down';\nimport '../../icons/icon-02-arrow-back';\nimport '../../icons/icon-02-arrow-forward';\n\nexport enum AutomationButtonSize {\n  small = 'small',\n  regular = 'regular',\n  large = 'large',\n  xl = 'xl',\n}\n\nexport enum AutomationButtonVariant {\n  regular = 'regular',\n  double = 'double',\n  switch = 'switch',\n}\n\nexport enum AutomationButtonState {\n  closed = 'closed',\n  open = 'open',\n  openEnhanced = 'open-enhanced',\n  openMedium = 'open-medium',\n  static = 'static',\n}\n\nexport enum AutomationButtonLabelSize {\n  small = 'small',\n  regular = 'regular',\n  enhanced = 'enhanced',\n}\n\nexport enum AutomationBottonLabelStyle {\n  regular = 'regular',\n  enhanced = 'enhanced',\n  active = 'active',\n}\n\nexport interface AutomationButtonStateLabel {\n  type: 'state';\n  text: string;\n  bold: boolean;\n}\n\nexport interface AutomationButtonTagLabel {\n  type: 'tag';\n  text: string;\n  showHash: boolean;\n}\n\nexport interface AutomationButtonDirectonValueLabel {\n  type: 'direction';\n  value: number;\n  nDigits: number;\n  unit: 'percent';\n  direction: 'up' | 'down' | 'left' | 'right';\n}\n\nexport enum AutomationButtonLabelPosition {\n  top = 'top',\n  bottom = 'bottom',\n  left = 'left',\n  right = 'right',\n}\n\nexport enum AutomationButtonDirection {\n  forward = 'forward',\n  forwardFast = 'forward-fast',\n  forwardStopped = 'forward-stopped',\n  backward = 'backward',\n  backwardFast = 'backward-fast',\n  backwardStopped = 'backward-stopped',\n  standby = 'standby',\n}\n\nexport type AutomationButtonLabel =\n  | AutomationButtonStateLabel\n  | AutomationButtonTagLabel\n  | AutomationButtonDirectonValueLabel;\n\nfunction renderLabel(label: AutomationButtonLabel): HTMLTemplateResult {\n  if (label.type === 'state') {\n    return html`<div class=\"state ${label.bold ? 'bold' : ''}\">\n      ${label.text}\n    </div>`;\n  } else if (label.type === 'tag') {\n    return html`<div class=\"tag\">\n      ${label.showHash ? html`<div class=\"hash\">#</div>` : null} ${label.text}\n    </div>`;\n  } else {\n    const v = label.value.toFixed(0);\n    const zeroPadding =\n      v.length < label.nDigits ? '0'.repeat(label.nDigits - v.length) : '';\n\n    let directionIcon: HTMLTemplateResult;\n    if (label.direction === 'up') {\n      directionIcon = html`<obi-02-arrow-up\n        class=\"direction-icon\"\n      ></obi-02-arrow-up>`;\n    } else if (label.direction === 'down') {\n      directionIcon = html`<obi-02-arrow-down\n        class=\"direction-icon\"\n      ></obi-02-arrow-down>`;\n    } else if (label.direction === 'left') {\n      directionIcon = html`<obi-02-arrow-back\n        class=\"direction-icon\"\n      ></obi-02-arrow-back>`;\n    } else if (label.direction === 'right') {\n      directionIcon = html`<obi-02-arrow-forward\n        class=\"direction-icon\"\n      ></obi-02-arrow-forward>`;\n    } else {\n      throw new Error('Invalid direction');\n    }\n    return html` <div class=\"direction\">\n      ${directionIcon}\n      <span class=\"zeros\">${zeroPadding}</span>\n      <span class=\"value\">${v}</span>\n      <span class=\"unit\">${label.unit === 'percent' ? '%' : label.unit}</span>\n    </div>`;\n  }\n}\n\n@customElement('obc-automation-button')\nexport class ObcAutomationButton extends LitElement {\n  @property({type: String}) size: AutomationButtonSize =\n    AutomationButtonSize.regular;\n  @property({type: String}) variant: AutomationButtonVariant =\n    AutomationButtonVariant.regular;\n  @property({type: String}) state: AutomationButtonState =\n    AutomationButtonState.open;\n  @property({type: Array, attribute: false}) labels: AutomationButtonLabel[] =\n    [];\n  @property({type: String}) labelPosition: AutomationButtonLabelPosition =\n    AutomationButtonLabelPosition.bottom;\n  @property({type: String}) labelSize: AutomationButtonLabelSize =\n    AutomationButtonLabelSize.regular;\n  @property({type: String}) labelStyle: AutomationBottonLabelStyle =\n    AutomationBottonLabelStyle.regular;\n  @property({type: Boolean}) alert: boolean = false;\n  @property({type: Boolean}) progress: boolean = false;\n  @property({type: String}) direction: AutomationButtonDirection =\n    AutomationButtonDirection.forward;\n\n  override render() {\n    const labels = this.labels.map(renderLabel);\n    const progressSpinner = this.getProgressSpinner();\n    const direction = this.getDirectionIcon();\n\n    return html`\n      <div class=\"outer-wrapper\">\n        <button\n          class=${classMap({\n            wrapper: true,\n            ['size-' + this.size]: true,\n            ['variant-' + this.variant]: true,\n            ['state-' + this.state]: true,\n            ['label-' + this.labelPosition]: true,\n            ['label-size-' + this.labelSize]: true,\n            ['label-style-' + this.labelStyle]: true,\n            alert: this.alert,\n            progress: this.progress,\n          })}\n        >\n          <div class=\"icon-holder\">\n            ${direction}\n            ${this.variant !== AutomationButtonVariant.double ||\n            this.size !== AutomationButtonSize.small\n              ? html`<div class=\"icon-primary\">\n                  <slot name=\"icon\"></slot>\n                </div>`\n              : ''}\n            ${progressSpinner}\n            ${this.alert\n              ? html`<svg\n                  class=\"alert-icon\"\n                  width=\"18\"\n                  height=\"31\"\n                  viewBox=\"0 0 18 31\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    d=\"M 0 0 L 16 0 C 17.1046 0 18 0.8954 18 2 V 14.7889 C 18 15.5786 17.7662 16.3506 17.3282 17.0077 L 9 30 V 3 L  7 1 H 0  Z\"\n                    fill=\"var(--alert-alarm-color)\"\n                  />\n                  <path\n                    d=\"M12 4H14V11.5H12V4Z\"\n                    fill=\"var(--on-alarm-active-color)\"\n                  />\n                  <path\n                    d=\"M12 13.5H14V15.5H12V13.5Z\"\n                    fill=\"var(--on-alarm-active-color)\"\n                  />\n                </svg> `\n              : ''}\n            <div class=\"badge-top-right\">\n              <slot name=\"badge-top-right\"></slot>\n            </div>\n            <div class=\"badge-top-left\">\n              <slot name=\"badge-top-left\"></slot>\n            </div>\n            <div class=\"badge-bottom-left\">\n              <slot name=\"badge-bottom-left\"></slot>\n            </div>\n            <div class=\"badge-bottom-right\">\n              <slot name=\"badge-bottom-right\"></slot>\n            </div>\n          </div>\n          <div class=\"label\">${labels}</div>\n        </button>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n\n  private getProgressSpinner(): null | HTMLTemplateResult {\n    if (!this.progress) {\n      return null;\n    }\n\n    let spinnerWidth: number;\n    if (this.size === AutomationButtonSize.small) {\n      spinnerWidth = 40;\n    } else if (this.size === AutomationButtonSize.regular) {\n      spinnerWidth = 56;\n    } else if (this.size === AutomationButtonSize.large) {\n      spinnerWidth = 72;\n    } else {\n      spinnerWidth = 104;\n    }\n    const progressSpinner = html`<svg\n      width=\"${spinnerWidth}\"\n      height=\"${spinnerWidth}\"\n      viewBox=\"0 0 ${spinnerWidth} ${spinnerWidth}\"\n      fill=\"none\"\n      class=\"progress-spinner\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M2 ${spinnerWidth / 2} A ${spinnerWidth / 2 - 2} ${spinnerWidth / 2 -\n        2} 0 0 1 ${spinnerWidth / 2} 2\"\n        stroke=\"var(--instrument-enhanced-secondary-color)\"\n        stroke-width=\"4\"\n        stroke-linecap=\"round\"\n      />\n    </svg> `;\n    return progressSpinner;\n  }\n\n  private getDirectionIcon(): null | HTMLTemplateResult {\n    if (this.variant !== AutomationButtonVariant.double) {\n      return null;\n    } else if (this.direction === AutomationButtonDirection.forward) {\n      return html`<svg\n        class=\"icon-direction\"\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=\"M8 5 v 14 L 20 12Z\"\n          stroke=\"var(--automation-device-tertiary-color)\"\n          fill=\"var(--automation-device-primary-color)\"\n          vector-effect=\"non-scaling-stroke\"\n        />\n      </svg> `;\n    } else if (this.direction === AutomationButtonDirection.forwardFast) {\n      return html`<svg\n        class=\"icon-direction\"\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=\"M3.5 5 v 14 l 8.5 -7 Z M14.5 5 v 14 l 8.5 -7 Z\"\n          stroke=\"var(--automation-device-tertiary-color)\"\n          fill=\"var(--automation-device-primary-color)\"\n          vector-effect=\"non-scaling-stroke\"\n        />\n      </svg> `;\n    } else if (this.direction === AutomationButtonDirection.forwardStopped) {\n      return html`<svg\n        class=\"icon-direction\"\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=\"M8 5 v 14 L 20 12Z\"\n          fill=\"var(--automation-device-tertiary-color)\"\n          stroke=\"var(--automation-device-tertiary-inverted-color)\"\n          vector-effect=\"non-scaling-stroke\"\n        />\n      </svg> `;\n    } else if (this.direction === AutomationButtonDirection.backward) {\n      return html`<svg\n        class=\"icon-direction\"\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=\"M16 5 v 14 L 4 12Z\"\n          stroke=\"var(--automation-device-tertiary-color)\"\n          fill=\"var(--automation-device-primary-color)\"\n          vector-effect=\"non-scaling-stroke\"\n        />\n      </svg>`;\n    } else if (this.direction === AutomationButtonDirection.backwardFast) {\n      return html`<svg\n        class=\"icon-direction\"\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=\"M20.5 5 v 14 l -8.5 -7 Z M9.5 5 v 14 l -8.5 -7 Z\"\n          stroke=\"var(--automation-device-tertiary-color)\"\n          fill=\"var(--automation-device-primary-color)\"\n          vector-effect=\"non-scaling-stroke\"\n        />\n      </svg>`;\n    } else if (this.direction === AutomationButtonDirection.backwardStopped) {\n      return html`<svg\n        class=\"icon-direction\"\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=\"M16 5 v 14 L 4 12Z\"\n          fill=\"var(--automation-device-tertiary-color)\"\n          stroke=\"var(--automation-device-tertiary-inverted-color)\"\n          vector-effect=\"non-scaling-stroke\"\n        />\n      </svg> `;\n    } else if (this.direction === AutomationButtonDirection.standby) {\n      return html`<obi-08-standby\n        class=\"icon-direction\"\n        usecsscolor\n      ></obi-08-standby>`;\n    }\n    throw new Error('Invalid direction');\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-automation-button': ObcAutomationButton;\n  }\n}\n"],"names":["AutomationButtonSize","AutomationButtonVariant","AutomationButtonState","AutomationButtonLabelSize","AutomationBottonLabelStyle","AutomationButtonLabelPosition","AutomationButtonDirection"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAgBY,IAAA,yCAAAA,0BAAL;AACLA,wBAAA,OAAQ,IAAA;AACRA,wBAAA,SAAU,IAAA;AACVA,wBAAA,OAAQ,IAAA;AACRA,wBAAA,IAAK,IAAA;AAJKA,SAAAA;AAAA,GAAA,wBAAA,CAAA,CAAA;AAOA,IAAA,4CAAAC,6BAAL;AACLA,2BAAA,SAAU,IAAA;AACVA,2BAAA,QAAS,IAAA;AACTA,2BAAA,QAAS,IAAA;AAHCA,SAAAA;AAAA,GAAA,2BAAA,CAAA,CAAA;AAMA,IAAA,0CAAAC,2BAAL;AACLA,yBAAA,QAAS,IAAA;AACTA,yBAAA,MAAO,IAAA;AACPA,yBAAA,cAAe,IAAA;AACfA,yBAAA,YAAa,IAAA;AACbA,yBAAA,QAAS,IAAA;AALCA,SAAAA;AAAA,GAAA,yBAAA,CAAA,CAAA;AAQA,IAAA,8CAAAC,+BAAL;AACLA,6BAAA,OAAQ,IAAA;AACRA,6BAAA,SAAU,IAAA;AACVA,6BAAA,UAAW,IAAA;AAHDA,SAAAA;AAAA,GAAA,6BAAA,CAAA,CAAA;AAMA,IAAA,+CAAAC,gCAAL;AACLA,8BAAA,SAAU,IAAA;AACVA,8BAAA,UAAW,IAAA;AACXA,8BAAA,QAAS,IAAA;AAHCA,SAAAA;AAAA,GAAA,8BAAA,CAAA,CAAA;AA0BA,IAAA,kDAAAC,mCAAL;AACLA,iCAAA,KAAM,IAAA;AACNA,iCAAA,QAAS,IAAA;AACTA,iCAAA,MAAO,IAAA;AACPA,iCAAA,OAAQ,IAAA;AAJEA,SAAAA;AAAA,GAAA,iCAAA,CAAA,CAAA;AAOA,IAAA,8CAAAC,+BAAL;AACLA,6BAAA,SAAU,IAAA;AACVA,6BAAA,aAAc,IAAA;AACdA,6BAAA,gBAAiB,IAAA;AACjBA,6BAAA,UAAW,IAAA;AACXA,6BAAA,cAAe,IAAA;AACfA,6BAAA,iBAAkB,IAAA;AAClBA,6BAAA,SAAU,IAAA;AAPAA,SAAAA;AAAA,GAAA,6BAAA,CAAA,CAAA;AAeZ,SAAS,YAAY,OAAkD;AACjE,MAAA,MAAM,SAAS,SAAS;AAC1B,WAAO,yBAAyB,MAAM,OAAO,SAAS,EAAE;AAAA,QACpD,MAAM,IAAI;AAAA;AAAA,EAAA,WAEL,MAAM,SAAS,OAAO;AACxB,WAAA;AAAA,QACH,MAAM,WAAW,kCAAkC,IAAI,IAAI,MAAM,IAAI;AAAA;AAAA,EAAA,OAEpE;AACL,UAAM,IAAI,MAAM,MAAM,QAAQ,CAAC;AACzB,UAAA,cACJ,EAAE,SAAS,MAAM,UAAU,IAAI,OAAO,MAAM,UAAU,EAAE,MAAM,IAAI;AAEhE,QAAA;AACA,QAAA,MAAM,cAAc,MAAM;AACZ,sBAAA;AAAA;AAAA;AAAA,IAAA,WAGP,MAAM,cAAc,QAAQ;AACrB,sBAAA;AAAA;AAAA;AAAA,IAAA,WAGP,MAAM,cAAc,QAAQ;AACrB,sBAAA;AAAA;AAAA;AAAA,IAAA,WAGP,MAAM,cAAc,SAAS;AACtB,sBAAA;AAAA;AAAA;AAAA,IAAA,OAGX;AACC,YAAA,IAAI,MAAM,mBAAmB;AAAA,IACrC;AACO,WAAA;AAAA,QACH,aAAa;AAAA,4BACO,WAAW;AAAA,4BACX,CAAC;AAAA,2BACF,MAAM,SAAS,YAAY,MAAM,MAAM,IAAI;AAAA;AAAA,EAEpE;AACF;AAGa,IAAA,sBAAN,cAAkC,WAAW;AAAA,EAA7C,cAAA;AAAA,UAAA,GAAA,SAAA;AAEH,SAAA,OAAA;AAEA,SAAA,UAAA;AAEA,SAAA,QAAA;AACyC,SAAA,SACzC;AAEA,SAAA,gBAAA;AAEA,SAAA,YAAA;AAEA,SAAA,aAAA;AAC0C,SAAA,QAAA;AACG,SAAA,WAAA;AAE7C,SAAA,YAAA;AAAA,EAAA;AAAA,EAEO,SAAS;AAChB,UAAM,SAAS,KAAK,OAAO,IAAI,WAAW;AACpC,UAAA,kBAAkB,KAAK;AACvB,UAAA,YAAY,KAAK;AAEhB,WAAA;AAAA;AAAA;AAAA,kBAGO,SAAS;AAAA,MACf,SAAS;AAAA,MACT,CAAC,UAAU,KAAK,IAAI,GAAG;AAAA,MACvB,CAAC,aAAa,KAAK,OAAO,GAAG;AAAA,MAC7B,CAAC,WAAW,KAAK,KAAK,GAAG;AAAA,MACzB,CAAC,WAAW,KAAK,aAAa,GAAG;AAAA,MACjC,CAAC,gBAAgB,KAAK,SAAS,GAAG;AAAA,MAClC,CAAC,iBAAiB,KAAK,UAAU,GAAG;AAAA,MACpC,OAAO,KAAK;AAAA,MACZ,UAAU,KAAK;AAAA,IAAA,CAChB,CAAC;AAAA;AAAA;AAAA,cAGE,SAAS;AAAA,cACT,KAAK,YAAY,YACnB,KAAK,SAAS,UACV;AAAA;AAAA,0BAGA,EAAE;AAAA,cACJ,eAAe;AAAA,cACf,KAAK,QACH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAqBA,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+BAca,MAAM;AAAA;AAAA;AAAA;AAAA,EAInC;AAAA,EAIQ,qBAAgD;AAClD,QAAA,CAAC,KAAK,UAAU;AACX,aAAA;AAAA,IACT;AAEI,QAAA;AACA,QAAA,KAAK,SAAS,SAA4B;AAC7B,qBAAA;AAAA,IAAA,WACN,KAAK,SAAS,WAA8B;AACtC,qBAAA;AAAA,IAAA,WACN,KAAK,SAAS,SAA4B;AACpC,qBAAA;AAAA,IAAA,OACV;AACU,qBAAA;AAAA,IACjB;AACA,UAAM,kBAAkB;AAAA,eACb,YAAY;AAAA,gBACX,YAAY;AAAA,qBACP,YAAY,IAAI,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAMjC,eAAe,CAAC,MAAM,eAAe,IAAI,CAAC,IAAI,eAAe,IACrE,CAAC,UAAU,eAAe,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAMxB,WAAA;AAAA,EACT;AAAA,EAEQ,mBAA8C;AAChD,QAAA,KAAK,YAAY,UAAgC;AAC5C,aAAA;AAAA,IAAA,WACE,KAAK,cAAc,WAAmC;AACxD,aAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA,WAeE,KAAK,cAAc,gBAAuC;AAC5D,aAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA,WAeE,KAAK,cAAc,mBAA0C;AAC/D,aAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA,WAeE,KAAK,cAAc,YAAoC;AACzD,aAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA,WAeE,KAAK,cAAc,iBAAwC;AAC7D,aAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA,WAeE,KAAK,cAAc,oBAA2C;AAChE,aAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA,WAeE,KAAK,cAAc,WAAmC;AACxD,aAAA;AAAA;AAAA;AAAA;AAAA,IAIT;AACM,UAAA,IAAI,MAAM,mBAAmB;AAAA,EACrC;AACF;AA1Oa,oBA2FK,SAAS,UAAU,YAAY;AA1FrB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GADb,oBACe,WAAA,QAAA,CAAA;AAEA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAHb,oBAGe,WAAA,WAAA,CAAA;AAEA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GALb,oBAKe,WAAA,SAAA,CAAA;AAEiB,gBAAA;AAAA,EAA1C,SAAS,EAAC,MAAM,OAAO,WAAW,OAAM;AAAA,GAP9B,oBAOgC,WAAA,UAAA,CAAA;AAEjB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GATb,oBASe,WAAA,iBAAA,CAAA;AAEA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAXb,oBAWe,WAAA,aAAA,CAAA;AAEA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAbb,oBAae,WAAA,cAAA,CAAA;AAEC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,SAAQ;AAAA,GAfd,oBAegB,WAAA,SAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,SAAQ;AAAA,GAhBd,oBAgBgB,WAAA,YAAA,CAAA;AACD,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAjBb,oBAiBe,WAAA,aAAA,CAAA;AAjBf,sBAAN,gBAAA;AAAA,EADN,cAAc,uBAAuB;AAAA,GACzB,mBAAA;"}

package/dist/automation/automation-tank/automation-tank.css.js

@@ -16,6 +16,7 @@ const compentStyle = css`* {
     /* This is a hack to make the badge appear above the content */
     position: relative;
     top: -20px;
+    transform: translateX(-50%);
 }
 
 .badges {
@@ -91,7 +92,7 @@ const compentStyle = css`* {
     }
 
 .header {
-    width: 140px;
+    width: 150px;
     display: flex;
     align-items: center;
     justify-content: space-between;

package/dist/automation/automation-tank/automation-tank.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"automation-tank.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"automation-tank.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/automation/corner-line/corner-line.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"corner-line.d.ts","sourceRoot":"","sources":["../../../src/automation/corner-line/corner-line.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAE1C,OAAO,EAAC,UAAU,EAAa,QAAQ,EAAY,MAAM,UAAU,CAAC;AAEpE,oBAAY,mBAAmB;IAC7B,QAAQ,cAAc;IACtB,OAAO,aAAa;IACpB,WAAW,iBAAiB;IAC5B,UAAU,gBAAgB;CAC3B;AAED,MAAM,MAAM,uBAAuB,GAC/B,WAAW,GACX,UAAU,GACV,cAAc,GACd,aAAa,CAAC;AAElB,qBACa,aAAc,SAAQ,UAAU;IACjB,MAAM,EAAE,UAAU,CAAqB;IACvC,SAAS,EAAE,uBAAuB,CAC7B;IACL,QAAQ,EAAE,QAAQ,CAAkB;IAErD,MAAM;IA0Hf,OAAgB,MAAM,0BAKpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}
+{"version":3,"file":"corner-line.d.ts","sourceRoot":"","sources":["../../../src/automation/corner-line/corner-line.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAE1C,OAAO,EAAC,UAAU,EAAa,QAAQ,EAAY,MAAM,UAAU,CAAC;AAEpE,oBAAY,mBAAmB;IAC7B,QAAQ,cAAc;IACtB,OAAO,aAAa;IACpB,WAAW,iBAAiB;IAC5B,UAAU,gBAAgB;CAC3B;AAED,MAAM,MAAM,uBAAuB,GAC/B,WAAW,GACX,UAAU,GACV,cAAc,GACd,aAAa,CAAC;AAElB,qBACa,aAAc,SAAQ,UAAU;IACjB,MAAM,EAAE,UAAU,CAAqB;IACvC,SAAS,EAAE,uBAAuB,CAC7B;IACL,QAAQ,EAAE,QAAQ,CAAkB;IAErD,MAAM;IA0Hf,OAAgB,MAAM,0BAWpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

package/dist/automation/corner-line/corner-line.js

@@ -141,6 +141,12 @@ ObcCornerLine.styles = css`
       display: block;
       line-height: 0;
     }
+
+    svg {
+      position: relative;
+      top: -12px;
+      left: -12px;
+    }
   `;
 __decorateClass([
   property({ type: String })

package/dist/automation/corner-line/corner-line.js.map

@@ -1 +1 @@
-{"version":3,"file":"corner-line.js","sources":["../../../src/automation/corner-line/corner-line.ts"],"sourcesContent":["import {LitElement, html, css} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {LineMedium, lineColor, LineType, lineWidth} from '../index';\n\nexport enum CornerLineDirection {\n  topRight = 'top-right',\n  topLeft = 'top-left',\n  bottomRight = 'bottom-right',\n  bottomLeft = 'bottom-left',\n}\n\nexport type CornerLineDirectionType =\n  | 'top-right'\n  | 'top-left'\n  | 'bottom-right'\n  | 'bottom-left';\n\n@customElement('obc-corner-line')\nexport class ObcCornerLine extends LitElement {\n  @property({type: String}) medium: LineMedium = LineMedium.normal;\n  @property({type: String}) direction: CornerLineDirectionType =\n    CornerLineDirection.topRight;\n  @property({type: String}) lineType: LineType = LineType.fluid;\n\n  override render() {\n    let rotation = 270;\n    if (this.direction === CornerLineDirection.topLeft) {\n      rotation = 180;\n    } else if (this.direction === CornerLineDirection.bottomLeft) {\n      rotation = 90;\n    } else if (this.direction === CornerLineDirection.bottomRight) {\n      rotation = 0;\n    }\n\n    if (this.lineType === LineType.connector) {\n      return html`\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          transform=\"rotate(${rotation})\"\n        >\n          <path\n            d=\"M16.5 11.5L15 11.5C14.9951 11.5 14.9902 11.5 14.9853 11.5C13.0826 11.5079 11.5382 13.0339 11.5007 14.9294C11.5002 14.9529 11.5 14.9764 11.5 15V16.5L12.5 16.5L12.5 15C12.5 13.6355 13.5932 12.5263 14.9516 12.5005C14.9677 12.5002 14.9838 12.5 15 12.5L16.5 12.5V11.5Z\"\n            fill=\"var(--element-neutral-color)\"\n          />\n          <path\n            d=\"M24 11.5H22.5V12.5L24 12.5V11.5Z\"\n            fill=\"var(--element-neutral-color)\"\n          />\n          <path\n            d=\"M21 11.5H18V12.5L21 12.5V11.5Z\"\n            fill=\"var(--element-neutral-color)\"\n          />\n          <path\n            d=\"M11.5 18V21H12.5L12.5 18H11.5Z\"\n            fill=\"var(--element-neutral-color)\"\n          />\n          <path\n            d=\"M11.5 22.5V24H12.5V22.5H11.5Z\"\n            fill=\"var(--element-neutral-color)\"\n          />\n        </svg>\n      `;\n    }\n\n    const color = lineColor(this.medium);\n    const width = lineWidth(this.lineType);\n\n    const r1 = 6 - 0.5 - width / 2;\n    const r2 = 6 + 0.5 + width / 2;\n\n    if (this.lineType === LineType.air) {\n      const r1 = 2.5;\n      const r2 = 11.5;\n      return html`\n        <svg\n          class=\"line\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          height=\"24\"\n          width=\"24\"\n          transform=\"rotate(${rotation})\"\n        >\n          <path\n            d=\"M 17 24 v -4 a 3 3 0 0 1 3 -3 h 4 v -10 h -6 a 11 11 0 0 0 -11 11 v 6 z\"\n            stroke=\"none\"\n            fill=\"var(${color.inner})\"\n          />\n          <path\n            d=\"M ${12 +\n            0.5 +\n            width / 2} 24 v -4 a ${r1} ${r1} 0 0 1 ${r1} -${r1} h 4\"\n            stroke-width=\"1\"\n            stroke=\"var(${color.outer})\"\n            fill=\"none\"\n          />\n          <path\n            d=\"M ${12 -\n            0.5 -\n            width / 2} 24 v -6 a ${r2} ${r2} 0 0 1 ${r2} -${r2} h 6\"\n            stroke-width=\"1\"\n            stroke=\"var(${color.outer})\"\n            fill=\"none\"\n          />\n        </svg>\n      `;\n    } else {\n      return html`\n        <svg\n          class=\"line\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          height=\"24\"\n          width=\"24\"\n          transform=\"rotate(${rotation})\"\n        >\n          <path\n            d=\"M 12 24 v -6 a 6 6 0 0 1 6 -6 h 6\"\n            stroke-width=${width}\n            stroke=\"var(${color.inner})\"\n            fill=\"none\"\n          />\n          <path\n            d=\"M ${12 +\n            0.5 +\n            width / 2} 24 v -6 a ${r1} ${r1} 0 0 1 ${r1} -${r1} h 6\"\n            stroke-width=\"1\"\n            stroke=\"var(${color.outer})\"\n            fill=\"none\"\n          />\n          <path\n            d=\"M ${12 -\n            0.5 -\n            width / 2} 24 v -6 a ${r2} ${r2} 0 0 1 ${r2} -${r2} h 6\"\n            stroke-width=\"1\"\n            stroke=\"var(${color.outer})\"\n            fill=\"none\"\n          />\n        </svg>\n      `;\n    }\n  }\n\n  static override styles = css`\n    :host {\n      display: block;\n      line-height: 0;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-corner-line': ObcCornerLine;\n  }\n}\n"],"names":["CornerLineDirection","r1","r2"],"mappings":";;;;;;;;;;;;;;AAIY,IAAA,wCAAAA,yBAAL;AACLA,uBAAA,UAAW,IAAA;AACXA,uBAAA,SAAU,IAAA;AACVA,uBAAA,aAAc,IAAA;AACdA,uBAAA,YAAa,IAAA;AAJHA,SAAAA;AAAA,GAAA,uBAAA,CAAA,CAAA;AAcC,IAAA,gBAAN,cAA4B,WAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,SAAqB,WAAW;AAExD,SAAA,YAAA;AACwB,SAAA,WAAqB,SAAS;AAAA,EAAA;AAAA,EAE/C,SAAS;AAChB,QAAI,WAAW;AACX,QAAA,KAAK,cAAc,YAA6B;AACvC,iBAAA;AAAA,IAAA,WACF,KAAK,cAAc,eAAgC;AACjD,iBAAA;AAAA,IAAA,WACF,KAAK,cAAc,gBAAiC;AAClD,iBAAA;AAAA,IACb;AAEI,QAAA,KAAK,aAAa,SAAS,WAAW;AACjC,aAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAOiB,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAwBlC;AAEM,UAAA,QAAQ,UAAU,KAAK,MAAM;AAC7B,UAAA,QAAQ,UAAU,KAAK,QAAQ;AAE/B,UAAA,KAAK,IAAI,MAAM,QAAQ;AACvB,UAAA,KAAK,IAAI,MAAM,QAAQ;AAEzB,QAAA,KAAK,aAAa,SAAS,KAAK;AAClC,YAAMC,MAAK;AACX,YAAMC,MAAK;AACJ,aAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAOiB,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKd,MAAM,KAAK;AAAA;AAAA;AAAA,mBAGhB,KACP,MACA,QAAQ,CAAC,cAAcD,GAAE,IAAIA,GAAE,UAAUA,GAAE,KAAKA,GAAE;AAAA;AAAA,0BAEpC,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,mBAIlB,KACP,MACA,QAAQ,CAAC,cAAcC,GAAE,IAAIA,GAAE,UAAUA,GAAE,KAAKA,GAAE;AAAA;AAAA,0BAEpC,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA,OAK1B;AACE,aAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAOiB,QAAQ;AAAA;AAAA;AAAA;AAAA,2BAIX,KAAK;AAAA,0BACN,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,mBAIlB,KACP,MACA,QAAQ,CAAC,cAAc,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE;AAAA;AAAA,0BAEpC,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,mBAIlB,KACP,MACA,QAAQ,CAAC,cAAc,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE;AAAA;AAAA,0BAEpC,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,IAKjC;AAAA,EACF;AAQF;AAtIa,cAgIK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AA/HC,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GADb,cACe,WAAA,UAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAFb,cAEe,WAAA,aAAA,CAAA;AAEA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAJb,cAIe,WAAA,YAAA,CAAA;AAJf,gBAAN,gBAAA;AAAA,EADN,cAAc,iBAAiB;AAAA,GACnB,aAAA;"}
+{"version":3,"file":"corner-line.js","sources":["../../../src/automation/corner-line/corner-line.ts"],"sourcesContent":["import {LitElement, html, css} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {LineMedium, lineColor, LineType, lineWidth} from '../index';\n\nexport enum CornerLineDirection {\n  topRight = 'top-right',\n  topLeft = 'top-left',\n  bottomRight = 'bottom-right',\n  bottomLeft = 'bottom-left',\n}\n\nexport type CornerLineDirectionType =\n  | 'top-right'\n  | 'top-left'\n  | 'bottom-right'\n  | 'bottom-left';\n\n@customElement('obc-corner-line')\nexport class ObcCornerLine extends LitElement {\n  @property({type: String}) medium: LineMedium = LineMedium.normal;\n  @property({type: String}) direction: CornerLineDirectionType =\n    CornerLineDirection.topRight;\n  @property({type: String}) lineType: LineType = LineType.fluid;\n\n  override render() {\n    let rotation = 270;\n    if (this.direction === CornerLineDirection.topLeft) {\n      rotation = 180;\n    } else if (this.direction === CornerLineDirection.bottomLeft) {\n      rotation = 90;\n    } else if (this.direction === CornerLineDirection.bottomRight) {\n      rotation = 0;\n    }\n\n    if (this.lineType === LineType.connector) {\n      return html`\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          transform=\"rotate(${rotation})\"\n        >\n          <path\n            d=\"M16.5 11.5L15 11.5C14.9951 11.5 14.9902 11.5 14.9853 11.5C13.0826 11.5079 11.5382 13.0339 11.5007 14.9294C11.5002 14.9529 11.5 14.9764 11.5 15V16.5L12.5 16.5L12.5 15C12.5 13.6355 13.5932 12.5263 14.9516 12.5005C14.9677 12.5002 14.9838 12.5 15 12.5L16.5 12.5V11.5Z\"\n            fill=\"var(--element-neutral-color)\"\n          />\n          <path\n            d=\"M24 11.5H22.5V12.5L24 12.5V11.5Z\"\n            fill=\"var(--element-neutral-color)\"\n          />\n          <path\n            d=\"M21 11.5H18V12.5L21 12.5V11.5Z\"\n            fill=\"var(--element-neutral-color)\"\n          />\n          <path\n            d=\"M11.5 18V21H12.5L12.5 18H11.5Z\"\n            fill=\"var(--element-neutral-color)\"\n          />\n          <path\n            d=\"M11.5 22.5V24H12.5V22.5H11.5Z\"\n            fill=\"var(--element-neutral-color)\"\n          />\n        </svg>\n      `;\n    }\n\n    const color = lineColor(this.medium);\n    const width = lineWidth(this.lineType);\n\n    const r1 = 6 - 0.5 - width / 2;\n    const r2 = 6 + 0.5 + width / 2;\n\n    if (this.lineType === LineType.air) {\n      const r1 = 2.5;\n      const r2 = 11.5;\n      return html`\n        <svg\n          class=\"line\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          height=\"24\"\n          width=\"24\"\n          transform=\"rotate(${rotation})\"\n        >\n          <path\n            d=\"M 17 24 v -4 a 3 3 0 0 1 3 -3 h 4 v -10 h -6 a 11 11 0 0 0 -11 11 v 6 z\"\n            stroke=\"none\"\n            fill=\"var(${color.inner})\"\n          />\n          <path\n            d=\"M ${12 +\n            0.5 +\n            width / 2} 24 v -4 a ${r1} ${r1} 0 0 1 ${r1} -${r1} h 4\"\n            stroke-width=\"1\"\n            stroke=\"var(${color.outer})\"\n            fill=\"none\"\n          />\n          <path\n            d=\"M ${12 -\n            0.5 -\n            width / 2} 24 v -6 a ${r2} ${r2} 0 0 1 ${r2} -${r2} h 6\"\n            stroke-width=\"1\"\n            stroke=\"var(${color.outer})\"\n            fill=\"none\"\n          />\n        </svg>\n      `;\n    } else {\n      return html`\n        <svg\n          class=\"line\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          height=\"24\"\n          width=\"24\"\n          transform=\"rotate(${rotation})\"\n        >\n          <path\n            d=\"M 12 24 v -6 a 6 6 0 0 1 6 -6 h 6\"\n            stroke-width=${width}\n            stroke=\"var(${color.inner})\"\n            fill=\"none\"\n          />\n          <path\n            d=\"M ${12 +\n            0.5 +\n            width / 2} 24 v -6 a ${r1} ${r1} 0 0 1 ${r1} -${r1} h 6\"\n            stroke-width=\"1\"\n            stroke=\"var(${color.outer})\"\n            fill=\"none\"\n          />\n          <path\n            d=\"M ${12 -\n            0.5 -\n            width / 2} 24 v -6 a ${r2} ${r2} 0 0 1 ${r2} -${r2} h 6\"\n            stroke-width=\"1\"\n            stroke=\"var(${color.outer})\"\n            fill=\"none\"\n          />\n        </svg>\n      `;\n    }\n  }\n\n  static override styles = css`\n    :host {\n      display: block;\n      line-height: 0;\n    }\n\n    svg {\n      position: relative;\n      top: -12px;\n      left: -12px;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-corner-line': ObcCornerLine;\n  }\n}\n"],"names":["CornerLineDirection","r1","r2"],"mappings":";;;;;;;;;;;;;;AAIY,IAAA,wCAAAA,yBAAL;AACLA,uBAAA,UAAW,IAAA;AACXA,uBAAA,SAAU,IAAA;AACVA,uBAAA,aAAc,IAAA;AACdA,uBAAA,YAAa,IAAA;AAJHA,SAAAA;AAAA,GAAA,uBAAA,CAAA,CAAA;AAcC,IAAA,gBAAN,cAA4B,WAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,SAAqB,WAAW;AAExD,SAAA,YAAA;AACwB,SAAA,WAAqB,SAAS;AAAA,EAAA;AAAA,EAE/C,SAAS;AAChB,QAAI,WAAW;AACX,QAAA,KAAK,cAAc,YAA6B;AACvC,iBAAA;AAAA,IAAA,WACF,KAAK,cAAc,eAAgC;AACjD,iBAAA;AAAA,IAAA,WACF,KAAK,cAAc,gBAAiC;AAClD,iBAAA;AAAA,IACb;AAEI,QAAA,KAAK,aAAa,SAAS,WAAW;AACjC,aAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAOiB,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAwBlC;AAEM,UAAA,QAAQ,UAAU,KAAK,MAAM;AAC7B,UAAA,QAAQ,UAAU,KAAK,QAAQ;AAE/B,UAAA,KAAK,IAAI,MAAM,QAAQ;AACvB,UAAA,KAAK,IAAI,MAAM,QAAQ;AAEzB,QAAA,KAAK,aAAa,SAAS,KAAK;AAClC,YAAMC,MAAK;AACX,YAAMC,MAAK;AACJ,aAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAOiB,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKd,MAAM,KAAK;AAAA;AAAA;AAAA,mBAGhB,KACP,MACA,QAAQ,CAAC,cAAcD,GAAE,IAAIA,GAAE,UAAUA,GAAE,KAAKA,GAAE;AAAA;AAAA,0BAEpC,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,mBAIlB,KACP,MACA,QAAQ,CAAC,cAAcC,GAAE,IAAIA,GAAE,UAAUA,GAAE,KAAKA,GAAE;AAAA;AAAA,0BAEpC,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA,OAK1B;AACE,aAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAOiB,QAAQ;AAAA;AAAA;AAAA;AAAA,2BAIX,KAAK;AAAA,0BACN,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,mBAIlB,KACP,MACA,QAAQ,CAAC,cAAc,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE;AAAA;AAAA,0BAEpC,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,mBAIlB,KACP,MACA,QAAQ,CAAC,cAAc,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE;AAAA;AAAA,0BAEpC,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,IAKjC;AAAA,EACF;AAcF;AA5Ia,cAgIK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA/HC,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GADb,cACe,WAAA,UAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAFb,cAEe,WAAA,aAAA,CAAA;AAEA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAJb,cAIe,WAAA,YAAA,CAAA;AAJf,gBAAN,gBAAA;AAAA,EADN,cAAc,iBAAiB;AAAA,GACnB,aAAA;"}

package/dist/automation/direction-line/direction-line.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"direction-line.d.ts","sourceRoot":"","sources":["../../../src/automation/direction-line/direction-line.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAE1C,OAAO,EAAC,UAAU,EAAE,QAAQ,EAAuB,MAAM,IAAI,CAAC;AAE9D,qBACa,gBAAiB,SAAQ,UAAU;IACpB,MAAM,EAAE,UAAU,CAAqB;IACvC,QAAQ,EAAE,QAAQ,CAAkB;IAErD,MAAM;IA0Cf,OAAgB,MAAM,0BAKpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}
+{"version":3,"file":"direction-line.d.ts","sourceRoot":"","sources":["../../../src/automation/direction-line/direction-line.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAE1C,OAAO,EAAC,UAAU,EAAE,QAAQ,EAAuB,MAAM,IAAI,CAAC;AAE9D,qBACa,gBAAiB,SAAQ,UAAU;IACpB,MAAM,EAAE,UAAU,CAAqB;IACvC,QAAQ,EAAE,QAAQ,CAAkB;IAErD,MAAM;IA0Cf,OAAgB,MAAM,0BAUpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}

package/dist/automation/direction-line/direction-line.js

@@ -64,6 +64,11 @@ ObcDirectionLine.styles = css`
       display: block;
       line-height: 0;
     }
+
+    svg {
+      position: relative;
+      top: -12px;
+    }
   `;
 __decorateClass([
   property({ type: String })

package/dist/automation/direction-line/direction-line.js.map

@@ -1 +1 @@
-{"version":3,"file":"direction-line.js","sources":["../../../src/automation/direction-line/direction-line.ts"],"sourcesContent":["import {LitElement, css, html} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {LineMedium, LineType, lineColor, lineWidth} from '..';\n\n@customElement('obc-direction-line')\nexport class ObcDirectionLine extends LitElement {\n  @property({type: String}) medium: LineMedium = LineMedium.normal;\n  @property({type: String}) lineType: LineType = LineType.fluid;\n\n  override render() {\n    if (this.lineType === LineType.connector) {\n      throw new Error('Connector line type not supported for line overlap');\n    }\n\n    const color = lineColor(this.medium);\n    const width = lineWidth(this.lineType) + 1;\n    const h = width / 2;\n    return html`\n      <svg\n        class=\"line\"\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          mask=\"url(#clip)\"\n          d=\"M-1 ${12 - h}H25v${width}H-1z\"\n          fill=\"var(${color.inner})\"\n          stroke=\"var(${color.outer})\"\n        />\n        <path\n          transform=\"translate(8 6)\"\n          d=\"M0.5 0L6.5 6L0.5 12H3.31068L9.31068 6L3.31068 0H0.5Z\"\n          fill=\"var(${color.outer})\"\n        />\n        <defs>\n          <mask id=\"clip\">\n            <rect width=\"100%\" height=\"100%\" fill=\"white\" />\n            <path\n              transform=\"translate(6.5 6)\"\n              d=\"M0.5 0L6.5 6L0.5 12v1H6.31068v-1L12.31068 6L6.31068 0v-1H0.5v1Z\"\n              fill=\"black\"\n            />\n          </mask>\n        </defs>\n      </svg>\n    `;\n  }\n\n  static override styles = css`\n    :host {\n      display: block;\n      line-height: 0;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-direction-line': ObcDirectionLine;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAKa,IAAA,mBAAN,cAA+B,WAAW;AAAA,EAA1C,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,SAAqB,WAAW;AAChC,SAAA,WAAqB,SAAS;AAAA,EAAA;AAAA,EAE/C,SAAS;AACZ,QAAA,KAAK,aAAa,SAAS,WAAW;AAClC,YAAA,IAAI,MAAM,oDAAoD;AAAA,IACtE;AAEM,UAAA,QAAQ,UAAU,KAAK,MAAM;AACnC,UAAM,QAAQ,UAAU,KAAK,QAAQ,IAAI;AACzC,UAAM,IAAI,QAAQ;AACX,WAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAWQ,KAAK,CAAC,OAAO,KAAK;AAAA,sBACf,MAAM,KAAK;AAAA,wBACT,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKb,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAc/B;AAQF;AApDa,iBA8CK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AA7CC,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GADb,iBACe,WAAA,UAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAFb,iBAEe,WAAA,YAAA,CAAA;AAFf,mBAAN,gBAAA;AAAA,EADN,cAAc,oBAAoB;AAAA,GACtB,gBAAA;"}
+{"version":3,"file":"direction-line.js","sources":["../../../src/automation/direction-line/direction-line.ts"],"sourcesContent":["import {LitElement, css, html} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {LineMedium, LineType, lineColor, lineWidth} from '..';\n\n@customElement('obc-direction-line')\nexport class ObcDirectionLine extends LitElement {\n  @property({type: String}) medium: LineMedium = LineMedium.normal;\n  @property({type: String}) lineType: LineType = LineType.fluid;\n\n  override render() {\n    if (this.lineType === LineType.connector) {\n      throw new Error('Connector line type not supported for line overlap');\n    }\n\n    const color = lineColor(this.medium);\n    const width = lineWidth(this.lineType) + 1;\n    const h = width / 2;\n    return html`\n      <svg\n        class=\"line\"\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          mask=\"url(#clip)\"\n          d=\"M-1 ${12 - h}H25v${width}H-1z\"\n          fill=\"var(${color.inner})\"\n          stroke=\"var(${color.outer})\"\n        />\n        <path\n          transform=\"translate(8 6)\"\n          d=\"M0.5 0L6.5 6L0.5 12H3.31068L9.31068 6L3.31068 0H0.5Z\"\n          fill=\"var(${color.outer})\"\n        />\n        <defs>\n          <mask id=\"clip\">\n            <rect width=\"100%\" height=\"100%\" fill=\"white\" />\n            <path\n              transform=\"translate(6.5 6)\"\n              d=\"M0.5 0L6.5 6L0.5 12v1H6.31068v-1L12.31068 6L6.31068 0v-1H0.5v1Z\"\n              fill=\"black\"\n            />\n          </mask>\n        </defs>\n      </svg>\n    `;\n  }\n\n  static override styles = css`\n    :host {\n      display: block;\n      line-height: 0;\n    }\n\n    svg {\n      position: relative;\n      top: -12px;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-direction-line': ObcDirectionLine;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAKa,IAAA,mBAAN,cAA+B,WAAW;AAAA,EAA1C,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,SAAqB,WAAW;AAChC,SAAA,WAAqB,SAAS;AAAA,EAAA;AAAA,EAE/C,SAAS;AACZ,QAAA,KAAK,aAAa,SAAS,WAAW;AAClC,YAAA,IAAI,MAAM,oDAAoD;AAAA,IACtE;AAEM,UAAA,QAAQ,UAAU,KAAK,MAAM;AACnC,UAAM,QAAQ,UAAU,KAAK,QAAQ,IAAI;AACzC,UAAM,IAAI,QAAQ;AACX,WAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAWQ,KAAK,CAAC,OAAO,KAAK;AAAA,sBACf,MAAM,KAAK;AAAA,wBACT,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKb,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAc/B;AAaF;AAzDa,iBA8CK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA7CC,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GADb,iBACe,WAAA,UAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAFb,iBAEe,WAAA,YAAA,CAAA;AAFf,mBAAN,gBAAA;AAAA,EADN,cAAc,oBAAoB;AAAA,GACtB,gBAAA;"}

package/dist/automation/end-point-line/end-point-line.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"end-point-line.d.ts","sourceRoot":"","sources":["../../../src/automation/end-point-line/end-point-line.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAE1C,OAAO,EAAC,UAAU,EAAE,QAAQ,EAAuB,MAAM,IAAI,CAAC;AAC9D,oBAAY,iBAAiB;IAC3B,GAAG,QAAQ;IACX,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,IAAI,SAAS;CACd;AAED,qBACa,eAAgB,SAAQ,UAAU;IACnB,MAAM,EAAE,UAAU,CAAqB;IACvC,SAAS,EAAE,iBAAiB,CAC9B;IACE,QAAQ,EAAE,QAAQ,CAAkB;IAErD,MAAM;IAsDf,OAAgB,MAAM,0BAKpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,eAAe,CAAC;KACvC;CACF"}
+{"version":3,"file":"end-point-line.d.ts","sourceRoot":"","sources":["../../../src/automation/end-point-line/end-point-line.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAE1C,OAAO,EAAC,UAAU,EAAE,QAAQ,EAAuB,MAAM,IAAI,CAAC;AAC9D,oBAAY,iBAAiB;IAC3B,GAAG,QAAQ;IACX,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,IAAI,SAAS;CACd;AAED,qBACa,eAAgB,SAAQ,UAAU;IACnB,MAAM,EAAE,UAAU,CAAqB;IACvC,SAAS,EAAE,iBAAiB,CAC9B;IACE,QAAQ,EAAE,QAAQ,CAAkB;IAErD,MAAM;IAuDf,OAAgB,MAAM,0BA2BpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,eAAe,CAAC;KACvC;CACF"}

package/dist/automation/end-point-line/end-point-line.js

@@ -65,6 +65,7 @@ let ObcEndPointLine = class extends LitElement {
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
         transform="rotate(${rotation})"
+        class="${this.direction}"
       >
         <path
           d="M${12 - h} 25 V${12 + h}h-${(terminalWidth - width) / 2}v-${width}h${terminalWidth}v${width}h-${(terminalWidth - width) / 2}V25Z"
@@ -80,6 +81,28 @@ ObcEndPointLine.styles = css`
       display: block;
       line-height: 0;
     }
+
+    svg {
+      position: relative;
+
+      &.top,
+      &.bottom {
+        left: -12px;
+      }
+
+      &.bottom {
+        top: -24px;
+      }
+
+      &.left,
+      &.right {
+        top: -12px;
+      }
+
+      &.right {
+        left: -24px;
+      }
+    }
   `;
 __decorateClass([
   property({ type: String })

package/dist/automation/end-point-line/end-point-line.js.map

@@ -1 +1 @@
-{"version":3,"file":"end-point-line.js","sources":["../../../src/automation/end-point-line/end-point-line.ts"],"sourcesContent":["import {LitElement, css, html} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {LineMedium, LineType, lineColor, lineWidth} from '..';\nexport enum EndPointDirection {\n  top = 'top',\n  right = 'right',\n  bottom = 'bottom',\n  left = 'left',\n}\n\n@customElement('obc-end-point-line')\nexport class ObcEndPointLine extends LitElement {\n  @property({type: String}) medium: LineMedium = LineMedium.normal;\n  @property({type: String}) direction: EndPointDirection =\n    EndPointDirection.top;\n  @property({type: String}) lineType: LineType = LineType.fluid;\n\n  override render() {\n    let rotation = 0;\n    if (this.direction === EndPointDirection.top) {\n      rotation = 180;\n    } else if (this.direction === EndPointDirection.right) {\n      rotation = 270;\n    } else if (this.direction === EndPointDirection.bottom) {\n      rotation = 0;\n    } else if (this.direction === EndPointDirection.left) {\n      rotation = 90;\n    }\n\n    if (this.lineType === LineType.connector) {\n      throw new Error(\n        'Connector line type is not supported for end-point line'\n      );\n    }\n\n    const color = lineColor(this.medium);\n    const width = lineWidth(this.lineType) + 1;\n    const h = width / 2;\n    let terminalWidth: number;\n    if (this.lineType === LineType.electric) {\n      terminalWidth = 15;\n    } else if (this.lineType === LineType.air) {\n      terminalWidth = 22;\n    } else if (this.lineType === LineType.fluid) {\n      terminalWidth = 16;\n    } else {\n      throw new Error('Invalid line type');\n    }\n    terminalWidth -= 1;\n\n    return html`\n      <svg\n        class=\"line\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        transform=\"rotate(${rotation})\"\n      >\n        <path\n          d=\"M${12 - h} 25 V${12 + h}h-${(terminalWidth - width) /\n          2}v-${width}h${terminalWidth}v${width}h-${(terminalWidth - width) /\n          2}V25Z\"\n          fill=\"var(${color.inner})\"\n          stroke=\"var(${color.outer})\"\n        />\n      </svg>\n    `;\n  }\n\n  static override styles = css`\n    :host {\n      display: block;\n      line-height: 0;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-end-point-line': ObcEndPointLine;\n  }\n}\n"],"names":["EndPointDirection"],"mappings":";;;;;;;;;;;;;;AAGY,IAAA,sCAAAA,uBAAL;AACLA,qBAAA,KAAM,IAAA;AACNA,qBAAA,OAAQ,IAAA;AACRA,qBAAA,QAAS,IAAA;AACTA,qBAAA,MAAO,IAAA;AAJGA,SAAAA;AAAA,GAAA,qBAAA,CAAA,CAAA;AAQC,IAAA,kBAAN,cAA8B,WAAW;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,SAAqB,WAAW;AAExD,SAAA,YAAA;AACwB,SAAA,WAAqB,SAAS;AAAA,EAAA;AAAA,EAE/C,SAAS;AAChB,QAAI,WAAW;AACX,QAAA,KAAK,cAAc,OAAuB;AACjC,iBAAA;AAAA,IAAA,WACF,KAAK,cAAc,SAAyB;AAC1C,iBAAA;AAAA,IAAA,WACF,KAAK,cAAc,UAA0B;AAC3C,iBAAA;AAAA,IAAA,WACF,KAAK,cAAc,QAAwB;AACzC,iBAAA;AAAA,IACb;AAEI,QAAA,KAAK,aAAa,SAAS,WAAW;AACxC,YAAM,IAAI;AAAA,QACR;AAAA,MAAA;AAAA,IAEJ;AAEM,UAAA,QAAQ,UAAU,KAAK,MAAM;AACnC,UAAM,QAAQ,UAAU,KAAK,QAAQ,IAAI;AACzC,UAAM,IAAI,QAAQ;AACd,QAAA;AACA,QAAA,KAAK,aAAa,SAAS,UAAU;AACvB,sBAAA;AAAA,IACP,WAAA,KAAK,aAAa,SAAS,KAAK;AACzB,sBAAA;AAAA,IACP,WAAA,KAAK,aAAa,SAAS,OAAO;AAC3B,sBAAA;AAAA,IAAA,OACX;AACC,YAAA,IAAI,MAAM,mBAAmB;AAAA,IACrC;AACiB,qBAAA;AAEV,WAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAQiB,QAAQ;AAAA;AAAA;AAAA,gBAGpB,KAAK,CAAC,QAAQ,KAAK,CAAC,MAAM,gBAAgB,SAChD,CAAC,KAAK,KAAK,IAAI,aAAa,IAAI,KAAK,MAAM,gBAAgB,SAC3D,CAAC;AAAA,sBACW,MAAM,KAAK;AAAA,wBACT,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,EAIjC;AAQF;AAlEa,gBA4DK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AA3DC,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GADb,gBACe,WAAA,UAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAFb,gBAEe,WAAA,aAAA,CAAA;AAEA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAJb,gBAIe,WAAA,YAAA,CAAA;AAJf,kBAAN,gBAAA;AAAA,EADN,cAAc,oBAAoB;AAAA,GACtB,eAAA;"}
+{"version":3,"file":"end-point-line.js","sources":["../../../src/automation/end-point-line/end-point-line.ts"],"sourcesContent":["import {LitElement, css, html} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {LineMedium, LineType, lineColor, lineWidth} from '..';\nexport enum EndPointDirection {\n  top = 'top',\n  right = 'right',\n  bottom = 'bottom',\n  left = 'left',\n}\n\n@customElement('obc-end-point-line')\nexport class ObcEndPointLine extends LitElement {\n  @property({type: String}) medium: LineMedium = LineMedium.normal;\n  @property({type: String}) direction: EndPointDirection =\n    EndPointDirection.top;\n  @property({type: String}) lineType: LineType = LineType.fluid;\n\n  override render() {\n    let rotation = 0;\n    if (this.direction === EndPointDirection.top) {\n      rotation = 180;\n    } else if (this.direction === EndPointDirection.right) {\n      rotation = 270;\n    } else if (this.direction === EndPointDirection.bottom) {\n      rotation = 0;\n    } else if (this.direction === EndPointDirection.left) {\n      rotation = 90;\n    }\n\n    if (this.lineType === LineType.connector) {\n      throw new Error(\n        'Connector line type is not supported for end-point line'\n      );\n    }\n\n    const color = lineColor(this.medium);\n    const width = lineWidth(this.lineType) + 1;\n    const h = width / 2;\n    let terminalWidth: number;\n    if (this.lineType === LineType.electric) {\n      terminalWidth = 15;\n    } else if (this.lineType === LineType.air) {\n      terminalWidth = 22;\n    } else if (this.lineType === LineType.fluid) {\n      terminalWidth = 16;\n    } else {\n      throw new Error('Invalid line type');\n    }\n    terminalWidth -= 1;\n\n    return html`\n      <svg\n        class=\"line\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        transform=\"rotate(${rotation})\"\n        class=\"${this.direction}\"\n      >\n        <path\n          d=\"M${12 - h} 25 V${12 + h}h-${(terminalWidth - width) /\n          2}v-${width}h${terminalWidth}v${width}h-${(terminalWidth - width) /\n          2}V25Z\"\n          fill=\"var(${color.inner})\"\n          stroke=\"var(${color.outer})\"\n        />\n      </svg>\n    `;\n  }\n\n  static override styles = css`\n    :host {\n      display: block;\n      line-height: 0;\n    }\n\n    svg {\n      position: relative;\n\n      &.top,\n      &.bottom {\n        left: -12px;\n      }\n\n      &.bottom {\n        top: -24px;\n      }\n\n      &.left,\n      &.right {\n        top: -12px;\n      }\n\n      &.right {\n        left: -24px;\n      }\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-end-point-line': ObcEndPointLine;\n  }\n}\n"],"names":["EndPointDirection"],"mappings":";;;;;;;;;;;;;;AAGY,IAAA,sCAAAA,uBAAL;AACLA,qBAAA,KAAM,IAAA;AACNA,qBAAA,OAAQ,IAAA;AACRA,qBAAA,QAAS,IAAA;AACTA,qBAAA,MAAO,IAAA;AAJGA,SAAAA;AAAA,GAAA,qBAAA,CAAA,CAAA;AAQC,IAAA,kBAAN,cAA8B,WAAW;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,SAAqB,WAAW;AAExD,SAAA,YAAA;AACwB,SAAA,WAAqB,SAAS;AAAA,EAAA;AAAA,EAE/C,SAAS;AAChB,QAAI,WAAW;AACX,QAAA,KAAK,cAAc,OAAuB;AACjC,iBAAA;AAAA,IAAA,WACF,KAAK,cAAc,SAAyB;AAC1C,iBAAA;AAAA,IAAA,WACF,KAAK,cAAc,UAA0B;AAC3C,iBAAA;AAAA,IAAA,WACF,KAAK,cAAc,QAAwB;AACzC,iBAAA;AAAA,IACb;AAEI,QAAA,KAAK,aAAa,SAAS,WAAW;AACxC,YAAM,IAAI;AAAA,QACR;AAAA,MAAA;AAAA,IAEJ;AAEM,UAAA,QAAQ,UAAU,KAAK,MAAM;AACnC,UAAM,QAAQ,UAAU,KAAK,QAAQ,IAAI;AACzC,UAAM,IAAI,QAAQ;AACd,QAAA;AACA,QAAA,KAAK,aAAa,SAAS,UAAU;AACvB,sBAAA;AAAA,IACP,WAAA,KAAK,aAAa,SAAS,KAAK;AACzB,sBAAA;AAAA,IACP,WAAA,KAAK,aAAa,SAAS,OAAO;AAC3B,sBAAA;AAAA,IAAA,OACX;AACC,YAAA,IAAI,MAAM,mBAAmB;AAAA,IACrC;AACiB,qBAAA;AAEV,WAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAQiB,QAAQ;AAAA,iBACnB,KAAK,SAAS;AAAA;AAAA;AAAA,gBAGf,KAAK,CAAC,QAAQ,KAAK,CAAC,MAAM,gBAAgB,SAChD,CAAC,KAAK,KAAK,IAAI,aAAa,IAAI,KAAK,MAAM,gBAAgB,SAC3D,CAAC;AAAA,sBACW,MAAM,KAAK;AAAA,wBACT,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,EAIjC;AA8BF;AAzFa,gBA6DK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA5DC,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GADb,gBACe,WAAA,UAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAFb,gBAEe,WAAA,aAAA,CAAA;AAEA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAJb,gBAIe,WAAA,YAAA,CAAA;AAJf,kBAAN,gBAAA;AAAA,EADN,cAAc,oBAAoB;AAAA,GACtB,eAAA;"}

package/dist/automation/horizontal-line/horizontal-line.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"horizontal-line.d.ts","sourceRoot":"","sources":["../../../src/automation/horizontal-line/horizontal-line.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAE1C,OAAO,EAAC,UAAU,EAAa,QAAQ,EAAY,MAAM,UAAU,CAAC;AAEpE,qBACa,iBAAkB,SAAQ,UAAU;IACrB,MAAM,EAAE,UAAU,CAAqB;IACvC,QAAQ,EAAE,QAAQ,CAAkB;IACpC,MAAM,EAAE,MAAM,CAAK;IAEpC,MAAM;IAiEf,OAAgB,MAAM,0BASpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}
+{"version":3,"file":"horizontal-line.d.ts","sourceRoot":"","sources":["../../../src/automation/horizontal-line/horizontal-line.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAE1C,OAAO,EAAC,UAAU,EAAa,QAAQ,EAAY,MAAM,UAAU,CAAC;AAEpE,qBACa,iBAAkB,SAAQ,UAAU;IACrB,MAAM,EAAE,UAAU,CAAqB;IACvC,QAAQ,EAAE,QAAQ,CAAkB;IACpC,MAAM,EAAE,MAAM,CAAK;IAEpC,MAAM;IAiEf,OAAgB,MAAM,0BAUpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}

package/dist/automation/horizontal-line/horizontal-line.js

@@ -87,9 +87,10 @@ ObcHorizontalLine.styles = css`
       display: block;
       line-height: 0;
     }
-    .line {
+    svg {
       position: relative;
       left: -0.5px;
+      top: -12px;
     }
   `;
 __decorateClass([

package/dist/automation/horizontal-line/horizontal-line.js.map

@@ -1 +1 @@
-{"version":3,"file":"horizontal-line.js","sources":["../../../src/automation/horizontal-line/horizontal-line.ts"],"sourcesContent":["import {LitElement, html, css} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {LineMedium, lineColor, LineType, lineWidth} from '../index';\n\n@customElement('obc-horizontal-line')\nexport class ObcHorizontalLine extends LitElement {\n  @property({type: String}) medium: LineMedium = LineMedium.normal;\n  @property({type: String}) lineType: LineType = LineType.fluid;\n  @property({type: Number}) length: number = 1;\n\n  override render() {\n    if (this.lineType === LineType.connector) {\n      const length = this.length * 24;\n      return html`<svg\n        width=\"${length}\"\n        height=\"24\"\n        viewBox=\"0 0 ${length} 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <line\n          x1=\"0\"\n          y1=\"12\"\n          x2=\"${length}\"\n          y2=\"12\"\n          stroke-width=\"1\"\n          stroke=\"var(--element-neutral-color)\"\n          stroke-dasharray=\"4,2\"\n          stroke-dashoffset=\"2\"\n        />\n      </svg> `;\n    }\n\n    const color = lineColor(this.medium);\n    const length = this.length * 24 + 1;\n    const width = lineWidth(this.lineType);\n\n    return html`\n      <div class=\"wrapper\" style=\"height: 24px; width: ${this.length * 24}px;\">\n        <svg\n          class=\"line\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"-.5 0 ${length} 24\"\n          height=\"24\"\n          width=${length}\n        >\n          <line\n            x1=\"-0.5\"\n            y1=\"12\"\n            x2=\"${length - 0.5}\"\n            y2=\"12\"\n            stroke-width=${width}\n            stroke=\"var(${color.inner})\"\n          />\n          <line\n            x1=\"-0.5\"\n            y1=\"${12 - 0.5 - width / 2}\"\n            x2=\"${length - 0.5}\"\n            y2=\"${12 - 0.5 - width / 2}\"\n            stroke-width=\"1\"\n            stroke=\"var(${color.outer})\"\n          />\n          <line\n            x1=\"-0.5\"\n            y1=\"${12 + 0.5 + width / 2}\"\n            x2=\"${length - 0.5}\"\n            y2=\"${12 + 0.5 + width / 2}\"\n            stroke-width=\"1\"\n            stroke=\"var(${color.outer})\"\n          />\n        </svg>\n      </div>\n    `;\n  }\n\n  static override styles = css`\n    :host {\n      display: block;\n      line-height: 0;\n    }\n    .line {\n      position: relative;\n      left: -0.5px;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-horizontal-line': ObcHorizontalLine;\n  }\n}\n"],"names":["length"],"mappings":";;;;;;;;;;;;;;AAKa,IAAA,oBAAN,cAAgC,WAAW;AAAA,EAA3C,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,SAAqB,WAAW;AAChC,SAAA,WAAqB,SAAS;AACb,SAAA,SAAA;AAAA,EAAA;AAAA,EAElC,SAAS;AACZ,QAAA,KAAK,aAAa,SAAS,WAAW;AAClCA,YAAAA,UAAS,KAAK,SAAS;AACtB,aAAA;AAAA,iBACIA,OAAM;AAAA;AAAA,uBAEAA,OAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAObA,OAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQlB;AAEM,UAAA,QAAQ,UAAU,KAAK,MAAM;AAC7B,UAAA,SAAS,KAAK,SAAS,KAAK;AAC5B,UAAA,QAAQ,UAAU,KAAK,QAAQ;AAE9B,WAAA;AAAA,yDAC8C,KAAK,SAAS,EAAE;AAAA;AAAA;AAAA;AAAA,2BAI9C,MAAM;AAAA;AAAA,kBAEf,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKN,SAAS,GAAG;AAAA;AAAA,2BAEH,KAAK;AAAA,0BACN,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,kBAInB,KAAK,MAAM,QAAQ,CAAC;AAAA,kBACpB,SAAS,GAAG;AAAA,kBACZ,KAAK,MAAM,QAAQ,CAAC;AAAA;AAAA,0BAEZ,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,kBAInB,KAAK,MAAM,QAAQ,CAAC;AAAA,kBACpB,SAAS,GAAG;AAAA,kBACZ,KAAK,MAAM,QAAQ,CAAC;AAAA;AAAA,0BAEZ,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,EAKnC;AAYF;AAhFa,kBAsEK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AArEC,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GADb,kBACe,WAAA,UAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAFb,kBAEe,WAAA,YAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAHb,kBAGe,WAAA,UAAA,CAAA;AAHf,oBAAN,gBAAA;AAAA,EADN,cAAc,qBAAqB;AAAA,GACvB,iBAAA;"}
+{"version":3,"file":"horizontal-line.js","sources":["../../../src/automation/horizontal-line/horizontal-line.ts"],"sourcesContent":["import {LitElement, html, css} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {LineMedium, lineColor, LineType, lineWidth} from '../index';\n\n@customElement('obc-horizontal-line')\nexport class ObcHorizontalLine extends LitElement {\n  @property({type: String}) medium: LineMedium = LineMedium.normal;\n  @property({type: String}) lineType: LineType = LineType.fluid;\n  @property({type: Number}) length: number = 1;\n\n  override render() {\n    if (this.lineType === LineType.connector) {\n      const length = this.length * 24;\n      return html`<svg\n        width=\"${length}\"\n        height=\"24\"\n        viewBox=\"0 0 ${length} 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <line\n          x1=\"0\"\n          y1=\"12\"\n          x2=\"${length}\"\n          y2=\"12\"\n          stroke-width=\"1\"\n          stroke=\"var(--element-neutral-color)\"\n          stroke-dasharray=\"4,2\"\n          stroke-dashoffset=\"2\"\n        />\n      </svg> `;\n    }\n\n    const color = lineColor(this.medium);\n    const length = this.length * 24 + 1;\n    const width = lineWidth(this.lineType);\n\n    return html`\n      <div class=\"wrapper\" style=\"height: 24px; width: ${this.length * 24}px;\">\n        <svg\n          class=\"line\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"-.5 0 ${length} 24\"\n          height=\"24\"\n          width=${length}\n        >\n          <line\n            x1=\"-0.5\"\n            y1=\"12\"\n            x2=\"${length - 0.5}\"\n            y2=\"12\"\n            stroke-width=${width}\n            stroke=\"var(${color.inner})\"\n          />\n          <line\n            x1=\"-0.5\"\n            y1=\"${12 - 0.5 - width / 2}\"\n            x2=\"${length - 0.5}\"\n            y2=\"${12 - 0.5 - width / 2}\"\n            stroke-width=\"1\"\n            stroke=\"var(${color.outer})\"\n          />\n          <line\n            x1=\"-0.5\"\n            y1=\"${12 + 0.5 + width / 2}\"\n            x2=\"${length - 0.5}\"\n            y2=\"${12 + 0.5 + width / 2}\"\n            stroke-width=\"1\"\n            stroke=\"var(${color.outer})\"\n          />\n        </svg>\n      </div>\n    `;\n  }\n\n  static override styles = css`\n    :host {\n      display: block;\n      line-height: 0;\n    }\n    svg {\n      position: relative;\n      left: -0.5px;\n      top: -12px;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-horizontal-line': ObcHorizontalLine;\n  }\n}\n"],"names":["length"],"mappings":";;;;;;;;;;;;;;AAKa,IAAA,oBAAN,cAAgC,WAAW;AAAA,EAA3C,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,SAAqB,WAAW;AAChC,SAAA,WAAqB,SAAS;AACb,SAAA,SAAA;AAAA,EAAA;AAAA,EAElC,SAAS;AACZ,QAAA,KAAK,aAAa,SAAS,WAAW;AAClCA,YAAAA,UAAS,KAAK,SAAS;AACtB,aAAA;AAAA,iBACIA,OAAM;AAAA;AAAA,uBAEAA,OAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAObA,OAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQlB;AAEM,UAAA,QAAQ,UAAU,KAAK,MAAM;AAC7B,UAAA,SAAS,KAAK,SAAS,KAAK;AAC5B,UAAA,QAAQ,UAAU,KAAK,QAAQ;AAE9B,WAAA;AAAA,yDAC8C,KAAK,SAAS,EAAE;AAAA;AAAA;AAAA;AAAA,2BAI9C,MAAM;AAAA;AAAA,kBAEf,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKN,SAAS,GAAG;AAAA;AAAA,2BAEH,KAAK;AAAA,0BACN,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,kBAInB,KAAK,MAAM,QAAQ,CAAC;AAAA,kBACpB,SAAS,GAAG;AAAA,kBACZ,KAAK,MAAM,QAAQ,CAAC;AAAA;AAAA,0BAEZ,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,kBAInB,KAAK,MAAM,QAAQ,CAAC;AAAA,kBACpB,SAAS,GAAG;AAAA,kBACZ,KAAK,MAAM,QAAQ,CAAC;AAAA;AAAA,0BAEZ,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,EAKnC;AAaF;AAjFa,kBAsEK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AArEC,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GADb,kBACe,WAAA,UAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAFb,kBAEe,WAAA,YAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAHb,kBAGe,WAAA,UAAA,CAAA;AAHf,oBAAN,gBAAA;AAAA,EADN,cAAc,qBAAqB;AAAA,GACvB,iBAAA;"}

package/dist/automation/line-cross/line-cross.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"line-cross.d.ts","sourceRoot":"","sources":["../../../src/automation/line-cross/line-cross.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAE1C,OAAO,EAAC,UAAU,EAAE,QAAQ,EAAuB,MAAM,IAAI,CAAC;AAE9D,qBACa,YAAa,SAAQ,UAAU;IAChB,MAAM,EAAE,UAAU,CAAqB;IACvC,QAAQ,EAAE,QAAQ,CAAkB;IAErD,MAAM;IA+Ff,OAAgB,MAAM,0BAKpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}
+{"version":3,"file":"line-cross.d.ts","sourceRoot":"","sources":["../../../src/automation/line-cross/line-cross.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAE1C,OAAO,EAAC,UAAU,EAAE,QAAQ,EAAuB,MAAM,IAAI,CAAC;AAE9D,qBACa,YAAa,SAAQ,UAAU;IAChB,MAAM,EAAE,UAAU,CAAqB;IACvC,QAAQ,EAAE,QAAQ,CAAkB;IAErD,MAAM;IA+Ff,OAAgB,MAAM,0BAWpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}

package/dist/automation/line-cross/line-cross.js

@@ -114,6 +114,12 @@ ObcLineCross.styles = css`
       display: block;
       line-height: 0;
     }
+
+    svg {
+      position: relative;
+      top: -12px;
+      left: -12px;
+    }
   `;
 __decorateClass([
   property({ type: String })

package/dist/automation/line-cross/line-cross.js.map

@@ -1 +1 @@
-{"version":3,"file":"line-cross.js","sources":["../../../src/automation/line-cross/line-cross.ts"],"sourcesContent":["import {LitElement, css, html} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {LineMedium, LineType, lineColor, lineWidth} from '..';\n\n@customElement('obc-line-cross')\nexport class ObcLineCross extends LitElement {\n  @property({type: String}) medium: LineMedium = LineMedium.normal;\n  @property({type: String}) lineType: LineType = LineType.fluid;\n\n  override render() {\n    if (this.lineType === LineType.connector) {\n      return html`\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=\"M11.5 1.83333V0H12.5V1.83333H11.5Z\"\n            fill=\"var(--element-neutral-color)\"\n          />\n          <path\n            d=\"M11.5 7.33333V3.66667H12.5V7.33333H11.5Z\"\n            fill=\"var(--element-neutral-color)\"\n          />\n          <path\n            d=\"M11.5 11V9.16667H12.5V11H11.5Z\"\n            fill=\"var(--element-neutral-color)\"\n          />\n          <path\n            d=\"M0 12.5H2V11.5H0V12.5Z\"\n            fill=\"var(--element-neutral-color)\"\n          />\n          <path\n            d=\"M4 12.5H8V11.5H4V12.5Z\"\n            fill=\"var(--element-neutral-color)\"\n          />\n          <path\n            d=\"M10 12.5H14V11.5H10V12.5Z\"\n            fill=\"var(--element-neutral-color)\"\n          />\n          <path\n            d=\"M16 12.5H20V11.5H16V12.5Z\"\n            fill=\"var(--element-neutral-color)\"\n          />\n          <path\n            d=\"M22 12.5H24V11.5H22V12.5Z\"\n            fill=\"var(--element-neutral-color)\"\n          />\n          <path\n            d=\"M11.5 13V14.8333H12.5V13H11.5Z\"\n            fill=\"var(--element-neutral-color)\"\n          />\n          <path\n            d=\"M11.5 16.6667V20.3333H12.5V16.6667H11.5Z\"\n            fill=\"var(--element-neutral-color)\"\n          />\n          <path\n            d=\"M11.5 22.1667V24H12.5V22.1667H11.5Z\"\n            fill=\"var(--element-neutral-color)\"\n          />\n        </svg>\n      `;\n    }\n\n    const color = lineColor(this.medium);\n    const width = lineWidth(this.lineType) + 1;\n    const h = width / 2;\n\n    let r: number;\n    if (this.lineType === LineType.electric) {\n      r = 4.5;\n    } else if (this.lineType === LineType.air) {\n      r = 10;\n    } else if (this.lineType === LineType.fluid) {\n      r = 6;\n    } else {\n      throw new Error('Invalid line type');\n    }\n\n    return html`\n      <svg\n        class=\"line\"\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=\"M-1 ${12 - h} H${12 - r} A${r} ${r} 0 0 1 ${12 - h} ${12 -\n          r} V${-1}\n            h${width} V${12 - r} A${r} ${r} 0 0 1 ${12 + r} ${12 - h} H25\n            V${12 + h} H${12 + r} A${r} ${r} 0 0 1 ${12 + h} ${12 + r} V25\n            h-${width} V${12 + r} A${r} ${r} 0 0 1 ${12 - r} ${12 + h} H-1 Z\"\n          fill=\"var(${color.inner})\"\n          stroke=\"var(${color.outer})\"\n        />\n      </svg>\n    `;\n  }\n\n  static override styles = css`\n    :host {\n      display: block;\n      line-height: 0;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-line-cross': ObcLineCross;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAKa,IAAA,eAAN,cAA2B,WAAW;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,SAAqB,WAAW;AAChC,SAAA,WAAqB,SAAS;AAAA,EAAA;AAAA,EAE/C,SAAS;AACZ,QAAA,KAAK,aAAa,SAAS,WAAW;AACjC,aAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAsDT;AAEM,UAAA,QAAQ,UAAU,KAAK,MAAM;AACnC,UAAM,QAAQ,UAAU,KAAK,QAAQ,IAAI;AACzC,UAAM,IAAI,QAAQ;AAEd,QAAA;AACA,QAAA,KAAK,aAAa,SAAS,UAAU;AACnC,UAAA;AAAA,IACK,WAAA,KAAK,aAAa,SAAS,KAAK;AACrC,UAAA;AAAA,IACK,WAAA,KAAK,aAAa,SAAS,OAAO;AACvC,UAAA;AAAA,IAAA,OACC;AACC,YAAA,IAAI,MAAM,mBAAmB;AAAA,IACrC;AAEO,WAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAUQ,KAAK,CAAC,KAAK,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,KAAK,CAAC,IAAI,KACzD,CAAC,KAAK,EAAE;AAAA,eACH,KAAK,KAAK,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,KAAK,CAAC,IAAI,KAAK,CAAC;AAAA,eACrD,KAAK,CAAC,KAAK,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,KAAK,CAAC,IAAI,KAAK,CAAC;AAAA,gBACrD,KAAK,KAAK,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,KAAK,CAAC,IAAI,KAAK,CAAC;AAAA,sBAC/C,MAAM,KAAK;AAAA,wBACT,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,EAIjC;AAQF;AAzGa,aAmGK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAlGC,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GADb,aACe,WAAA,UAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAFb,aAEe,WAAA,YAAA,CAAA;AAFf,eAAN,gBAAA;AAAA,EADN,cAAc,gBAAgB;AAAA,GAClB,YAAA;"}
+{"version":3,"file":"line-cross.js","sources":["../../../src/automation/line-cross/line-cross.ts"],"sourcesContent":["import {LitElement, css, html} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {LineMedium, LineType, lineColor, lineWidth} from '..';\n\n@customElement('obc-line-cross')\nexport class ObcLineCross extends LitElement {\n  @property({type: String}) medium: LineMedium = LineMedium.normal;\n  @property({type: String}) lineType: LineType = LineType.fluid;\n\n  override render() {\n    if (this.lineType === LineType.connector) {\n      return html`\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=\"M11.5 1.83333V0H12.5V1.83333H11.5Z\"\n            fill=\"var(--element-neutral-color)\"\n          />\n          <path\n            d=\"M11.5 7.33333V3.66667H12.5V7.33333H11.5Z\"\n            fill=\"var(--element-neutral-color)\"\n          />\n          <path\n            d=\"M11.5 11V9.16667H12.5V11H11.5Z\"\n            fill=\"var(--element-neutral-color)\"\n          />\n          <path\n            d=\"M0 12.5H2V11.5H0V12.5Z\"\n            fill=\"var(--element-neutral-color)\"\n          />\n          <path\n            d=\"M4 12.5H8V11.5H4V12.5Z\"\n            fill=\"var(--element-neutral-color)\"\n          />\n          <path\n            d=\"M10 12.5H14V11.5H10V12.5Z\"\n            fill=\"var(--element-neutral-color)\"\n          />\n          <path\n            d=\"M16 12.5H20V11.5H16V12.5Z\"\n            fill=\"var(--element-neutral-color)\"\n          />\n          <path\n            d=\"M22 12.5H24V11.5H22V12.5Z\"\n            fill=\"var(--element-neutral-color)\"\n          />\n          <path\n            d=\"M11.5 13V14.8333H12.5V13H11.5Z\"\n            fill=\"var(--element-neutral-color)\"\n          />\n          <path\n            d=\"M11.5 16.6667V20.3333H12.5V16.6667H11.5Z\"\n            fill=\"var(--element-neutral-color)\"\n          />\n          <path\n            d=\"M11.5 22.1667V24H12.5V22.1667H11.5Z\"\n            fill=\"var(--element-neutral-color)\"\n          />\n        </svg>\n      `;\n    }\n\n    const color = lineColor(this.medium);\n    const width = lineWidth(this.lineType) + 1;\n    const h = width / 2;\n\n    let r: number;\n    if (this.lineType === LineType.electric) {\n      r = 4.5;\n    } else if (this.lineType === LineType.air) {\n      r = 10;\n    } else if (this.lineType === LineType.fluid) {\n      r = 6;\n    } else {\n      throw new Error('Invalid line type');\n    }\n\n    return html`\n      <svg\n        class=\"line\"\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=\"M-1 ${12 - h} H${12 - r} A${r} ${r} 0 0 1 ${12 - h} ${12 -\n          r} V${-1}\n            h${width} V${12 - r} A${r} ${r} 0 0 1 ${12 + r} ${12 - h} H25\n            V${12 + h} H${12 + r} A${r} ${r} 0 0 1 ${12 + h} ${12 + r} V25\n            h-${width} V${12 + r} A${r} ${r} 0 0 1 ${12 - r} ${12 + h} H-1 Z\"\n          fill=\"var(${color.inner})\"\n          stroke=\"var(${color.outer})\"\n        />\n      </svg>\n    `;\n  }\n\n  static override styles = css`\n    :host {\n      display: block;\n      line-height: 0;\n    }\n\n    svg {\n      position: relative;\n      top: -12px;\n      left: -12px;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-line-cross': ObcLineCross;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAKa,IAAA,eAAN,cAA2B,WAAW;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,SAAqB,WAAW;AAChC,SAAA,WAAqB,SAAS;AAAA,EAAA;AAAA,EAE/C,SAAS;AACZ,QAAA,KAAK,aAAa,SAAS,WAAW;AACjC,aAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAsDT;AAEM,UAAA,QAAQ,UAAU,KAAK,MAAM;AACnC,UAAM,QAAQ,UAAU,KAAK,QAAQ,IAAI;AACzC,UAAM,IAAI,QAAQ;AAEd,QAAA;AACA,QAAA,KAAK,aAAa,SAAS,UAAU;AACnC,UAAA;AAAA,IACK,WAAA,KAAK,aAAa,SAAS,KAAK;AACrC,UAAA;AAAA,IACK,WAAA,KAAK,aAAa,SAAS,OAAO;AACvC,UAAA;AAAA,IAAA,OACC;AACC,YAAA,IAAI,MAAM,mBAAmB;AAAA,IACrC;AAEO,WAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAUQ,KAAK,CAAC,KAAK,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,KAAK,CAAC,IAAI,KACzD,CAAC,KAAK,EAAE;AAAA,eACH,KAAK,KAAK,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,KAAK,CAAC,IAAI,KAAK,CAAC;AAAA,eACrD,KAAK,CAAC,KAAK,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,KAAK,CAAC,IAAI,KAAK,CAAC;AAAA,gBACrD,KAAK,KAAK,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,KAAK,CAAC,IAAI,KAAK,CAAC;AAAA,sBAC/C,MAAM,KAAK;AAAA,wBACT,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,EAIjC;AAcF;AA/Ga,aAmGK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAlGC,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GADb,aACe,WAAA,UAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAFb,aAEe,WAAA,YAAA,CAAA;AAFf,eAAN,gBAAA;AAAA,EADN,cAAc,gBAAgB;AAAA,GAClB,YAAA;"}

package/dist/automation/line-overlap/line-overlap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"line-overlap.d.ts","sourceRoot":"","sources":["../../../src/automation/line-overlap/line-overlap.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAE1C,OAAO,EAAC,UAAU,EAAE,QAAQ,EAAuB,MAAM,IAAI,CAAC;AAE9D,qBACa,cAAe,SAAQ,UAAU;IAClB,MAAM,EAAE,UAAU,CAAqB;IACvC,QAAQ,EAAE,QAAQ,CAAkB;IAErD,MAAM;IA+Cf,OAAgB,MAAM,0BAKpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}
+{"version":3,"file":"line-overlap.d.ts","sourceRoot":"","sources":["../../../src/automation/line-overlap/line-overlap.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAE1C,OAAO,EAAC,UAAU,EAAE,QAAQ,EAAuB,MAAM,IAAI,CAAC;AAE9D,qBACa,cAAe,SAAQ,UAAU;IAClB,MAAM,EAAE,UAAU,CAAqB;IACvC,QAAQ,EAAE,QAAQ,CAAkB;IAErD,MAAM;IA+Cf,OAAgB,MAAM,0BAWpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}