@oicl/openbridge-webcomponents 0.0.10 → 0.0.13

package/dist/automation/automation-readout/automation-readout.d.ts

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+import { LineType } from '..';
+export declare enum AutomationReadoutPosition {
+    Left = "left",
+    Right = "right",
+    Top = "top",
+    Bottom = "bottom"
+}
+export declare class ObcAutomationReadout extends LitElement {
+    value: number;
+    unit: string;
+    numberOfDigits: number;
+    position: AutomationReadoutPosition;
+    lineType: LineType | undefined;
+    render(): import("lit-html").TemplateResult<1>;
+    getLineWidth(): number;
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'obc-automation-readout': ObcAutomationReadout;
+    }
+}
+//# sourceMappingURL=automation-readout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"automation-readout.d.ts","sourceRoot":"","sources":["../../../src/automation/automation-readout/automation-readout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAIhD,OAAO,EAAC,QAAQ,EAAY,MAAM,IAAI,CAAC;AAEvC,oBAAY,yBAAyB;IACnC,IAAI,SAAS;IACb,KAAK,UAAU;IACf,GAAG,QAAQ;IACX,MAAM,WAAW;CAClB;AAED,qBACa,oBAAqB,SAAQ,UAAU;IACxB,KAAK,SAAK;IACV,IAAI,SAAM;IACV,cAAc,SAAK;IACnB,QAAQ,EAAE,yBAAyB,CAC1B;IACT,QAAQ,EAAE,QAAQ,GAAG,SAAS,CAAa;IAE5D,MAAM;IAwBf,YAAY,IAAI,MAAM;IAOtB,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,oBAAoB,CAAC;KAChD;CACF"}

package/dist/automation/automation-readout/automation-readout.js

@@ -0,0 +1,85 @@
+import { unsafeCSS, LitElement, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import compentStyle from "./automation-readout.css.js";
+import { classMap } from "lit/directives/class-map.js";
+import { lineWidth } from "../index.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+var AutomationReadoutPosition = /* @__PURE__ */ ((AutomationReadoutPosition2) => {
+  AutomationReadoutPosition2["Left"] = "left";
+  AutomationReadoutPosition2["Right"] = "right";
+  AutomationReadoutPosition2["Top"] = "top";
+  AutomationReadoutPosition2["Bottom"] = "bottom";
+  return AutomationReadoutPosition2;
+})(AutomationReadoutPosition || {});
+let ObcAutomationReadout = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.value = 0;
+    this.unit = "";
+    this.numberOfDigits = 3;
+    this.position = "bottom";
+    this.lineType = void 0;
+  }
+  render() {
+    const offset = this.getLineWidth() / 2;
+    return html`
+      <button
+        class=${classMap({
+      wrapper: true,
+      [`position-${this.position}`]: true
+    })}
+        style="--offset: ${offset}px;"
+      >
+        <div class="visible-wrapper">
+          <div
+            class="value"
+            style="min-width: ${this.numberOfDigits.toFixed(0)}ch"
+          >
+            ${this.value.toFixed(0)}
+          </div>
+          <div class="unit">${this.unit}</div>
+        </div>
+      </button>
+    `;
+  }
+  getLineWidth() {
+    if (this.lineType === void 0) {
+      return 0;
+    }
+    return lineWidth(this.lineType);
+  }
+};
+ObcAutomationReadout.styles = unsafeCSS(compentStyle);
+__decorateClass([
+  property({ type: Number })
+], ObcAutomationReadout.prototype, "value", 2);
+__decorateClass([
+  property({ type: String })
+], ObcAutomationReadout.prototype, "unit", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcAutomationReadout.prototype, "numberOfDigits", 2);
+__decorateClass([
+  property({ type: String })
+], ObcAutomationReadout.prototype, "position", 2);
+__decorateClass([
+  property({ type: String })
+], ObcAutomationReadout.prototype, "lineType", 2);
+ObcAutomationReadout = __decorateClass([
+  customElement("obc-automation-readout")
+], ObcAutomationReadout);
+export {
+  AutomationReadoutPosition,
+  ObcAutomationReadout
+};
+//# sourceMappingURL=automation-readout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"automation-readout.js","sources":["../../../src/automation/automation-readout/automation-readout.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport compentStyle from './automation-readout.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {LineType, lineWidth} from '..';\n\nexport enum AutomationReadoutPosition {\n  Left = 'left',\n  Right = 'right',\n  Top = 'top',\n  Bottom = 'bottom',\n}\n\n@customElement('obc-automation-readout')\nexport class ObcAutomationReadout extends LitElement {\n  @property({type: Number}) value = 0;\n  @property({type: String}) unit = '';\n  @property({type: Number}) numberOfDigits = 3;\n  @property({type: String}) position: AutomationReadoutPosition =\n    AutomationReadoutPosition.Bottom;\n  @property({type: String}) lineType: LineType | undefined = undefined;\n\n  override render() {\n    const offset = this.getLineWidth() / 2;\n\n    return html`\n      <button\n        class=${classMap({\n          wrapper: true,\n          [`position-${this.position}`]: true,\n        })}\n        style=\"--offset: ${offset}px;\"\n      >\n        <div class=\"visible-wrapper\">\n          <div\n            class=\"value\"\n            style=\"min-width: ${this.numberOfDigits.toFixed(0)}ch\"\n          >\n            ${this.value.toFixed(0)}\n          </div>\n          <div class=\"unit\">${this.unit}</div>\n        </div>\n      </button>\n    `;\n  }\n\n  getLineWidth(): number {\n    if (this.lineType === undefined) {\n      return 0;\n    }\n    return lineWidth(this.lineType);\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-automation-readout': ObcAutomationReadout;\n  }\n}\n"],"names":["AutomationReadoutPosition"],"mappings":";;;;;;;;;;;;;;;;AAMY,IAAA,8CAAAA,+BAAL;AACLA,6BAAA,MAAO,IAAA;AACPA,6BAAA,OAAQ,IAAA;AACRA,6BAAA,KAAM,IAAA;AACNA,6BAAA,QAAS,IAAA;AAJCA,SAAAA;AAAA,GAAA,6BAAA,CAAA,CAAA;AAQC,IAAA,uBAAN,cAAmC,WAAW;AAAA,EAA9C,cAAA;AAAA,UAAA,GAAA,SAAA;AAC6B,SAAA,QAAA;AACD,SAAA,OAAA;AACU,SAAA,iBAAA;AAEzC,SAAA,WAAA;AACyD,SAAA,WAAA;AAAA,EAAA;AAAA,EAElD,SAAS;AACV,UAAA,SAAS,KAAK,aAAA,IAAiB;AAE9B,WAAA;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,SAAS;AAAA,MACT,CAAC,YAAY,KAAK,QAAQ,EAAE,GAAG;AAAA,IAAA,CAChC,CAAC;AAAA,2BACiB,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,gCAKD,KAAK,eAAe,QAAQ,CAAC,CAAC;AAAA;AAAA,cAEhD,KAAK,MAAM,QAAQ,CAAC,CAAC;AAAA;AAAA,8BAEL,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA,EAIrC;AAAA,EAEA,eAAuB;AACjB,QAAA,KAAK,aAAa,QAAW;AACxB,aAAA;AAAA,IACT;AACO,WAAA,UAAU,KAAK,QAAQ;AAAA,EAChC;AAGF;AAxCa,qBAuCK,SAAS,UAAU,YAAY;AAtCrB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GADb,qBACe,WAAA,SAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAFb,qBAEe,WAAA,QAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAHb,qBAGe,WAAA,kBAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAJb,qBAIe,WAAA,YAAA,CAAA;AAEA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GANb,qBAMe,WAAA,YAAA,CAAA;AANf,uBAAN,gBAAA;AAAA,EADN,cAAc,wBAAwB;AAAA,GAC1B,oBAAA;"}

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

@@ -0,0 +1,200 @@
+import { css } from "lit";
+const compentStyle = css`* {
+    box-sizing: border-box;
+}
+
+.trend-icon {
+    display: block;
+    width: 24px;
+    height: 24px;
+}
+
+.outer {
+    display: flex;
+    width: fit-content;
+    flex-direction: column;
+    /* This is a hack to make the badge appear above the content */
+    position: relative;
+    top: -20px;
+}
+
+.badges {
+    display: flex;
+    justify-content: end;
+    padding-bottom: 4px;
+    min-height: 20px;
+}
+
+.wrapper {
+    appearance: none;
+
+    display: flex;
+    flex-direction: column-reverse;
+    width: fit-content;
+    color: var(--instrument-regular-secondary-color);
+
+    border-radius: 6px;
+    border: 1px solid var(--instrument-frame-tertiary-color);
+    background: var(--instrument-frame-primary-color);
+
+    padding: 8px;
+    gap: 8px;
+}
+
+.wrapper {
+    border-color: var(--normal-enabled-border-color);
+    background-color: var(--normal-enabled-background-color);
+    border-width: 1px;
+    border-style: solid;
+    cursor: pointer;
+}
+
+.wrapper:focus {
+    outline: none;
+}
+
+.wrapper.activated {
+    border-color: var(--normal-activated-border-color);
+    background-color: var(--normal-activated-background-color);
+}
+
+.wrapper:focus-visible {
+    outline-color: hsla(211, 100%, 44%, 0.3);
+    outline-width: 4px;
+    outline-style: solid;
+}
+
+.wrapper:hover {
+    border-color: var(--normal-hover-border-color);
+    background-color: var(--normal-hover-background-color);
+}
+
+.wrapper:active {
+    border-color: var(--normal-pressed-border-color);
+    background-color: var(--normal-pressed-background-color);
+}
+
+.wrapper:disabled {
+    border-color: var(--normal-disabled-border-color);
+    background-color: var(--normal-disabled-background-color);
+    cursor: not-allowed;
+    color: var(--on-normal-disabled-color);
+}
+
+.compact .content {
+        display: none;
+    }
+
+.compact .bar-container {
+        width: 48px;
+        height: 96px;
+    }
+
+.header {
+    width: 140px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid var(--border-outline-color);
+}
+
+.header .percent {
+        font-family: Noto Sans;
+        font-size: 36px;
+        font-weight: 570;
+        line-height: 48px;
+        text-align: center;
+        font-variation-settings: 'wdth' 100, 'CTGR' 0;
+    }
+
+.header .percent-symbol {
+        /* UI/Body */
+        font-family: 'Noto Sans';
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 370;
+        line-height: 24px;
+        /* 150% */
+        text-decoration: none;
+    }
+
+.value {
+    display: flex;
+    align-items: baseline;
+    justify-content: flex-end;
+    padding-top: 4px;
+
+    font-family: 'Noto Sans';
+
+    font-size: 12px;
+
+    font-style: normal;
+
+    font-weight: 370;
+
+    line-height: 16px;
+
+    /* 133.333% */
+}
+
+.value .current-value {
+        font-family: Noto Sans;
+        font-size: 16px;
+        font-weight: 620;
+        line-height: 24px;
+        font-variation-settings: 'wdth' 100, 'CTGR' 0;
+    }
+
+.value .divider {
+        padding-left: 4px;
+        padding-right: 4px;
+    }
+
+.value .max-value {
+        /* UI/Body */
+        font-family: 'Noto Sans';
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 370;
+        line-height: 24px;
+        /* 150% */
+        text-decoration: none;
+    }
+
+.bar-container {
+    width: 100%;
+    position: relative;
+    height: 70px;
+    border-radius: 2px;
+    border: 1px solid var(--instrument-frame-tertiary-color);
+    background: var(--instrument-frame-secondary-color);
+    overflow: hidden;
+}
+
+.bar {
+    position: absolute;
+    border-top: var(--element-inactive-color) 2px solid;
+    background-color: var(--automation-fuel);
+    top: calc((1 - var(--percent)) * (100% - 2px) + 1px);
+    bottom: 1px;
+    left: 1px;
+    right: 1px;
+}
+
+.tag {
+    font-family: 'Noto Sans';
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 370;
+    line-height: 16px;
+    /* 133.333% */
+    color: var(--element-neutral-color);
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}`;
+export {
+  compentStyle as default
+};
+//# sourceMappingURL=automation-tank.css.js.map

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

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

package/dist/automation/automation-tank/automation-tank.d.ts

@@ -0,0 +1,35 @@
+import { HTMLTemplateResult, LitElement } from 'lit';
+import { LineMedium } from '..';
+import '../../icons/icon-02-chevron-double-up';
+import '../../icons/icon-02-chevron-up';
+import '../../icons/icon-02-chevron-double-down';
+import '../../icons/icon-02-chevron-down';
+import '../../icons/icon-01-off';
+export declare enum TankTrend {
+    fastRising = "fast-rising",
+    rising = "rising",
+    stable = "stable",
+    falling = "falling",
+    fastFalling = "fast-falling"
+}
+export declare enum TankVariant {
+    vertical = "vertical",
+    compact = "compact"
+}
+export declare class ObcAutomationTank extends LitElement {
+    medium: LineMedium;
+    value: number;
+    max: number;
+    trend: TankTrend;
+    variant: TankVariant;
+    tag: string;
+    trendIcon(): HTMLTemplateResult;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'obc-automation-tank': ObcAutomationTank;
+    }
+}
+//# sourceMappingURL=automation-tank.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"automation-tank.d.ts","sourceRoot":"","sources":["../../../src/automation/automation-tank/automation-tank.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,kBAAkB,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAGpE,OAAO,EAAC,UAAU,EAAC,MAAM,IAAI,CAAC;AAE9B,OAAO,uCAAuC,CAAC;AAC/C,OAAO,gCAAgC,CAAC;AACxC,OAAO,yCAAyC,CAAC;AACjD,OAAO,kCAAkC,CAAC;AAC1C,OAAO,yBAAyB,CAAC;AAGjC,oBAAY,SAAS;IACnB,UAAU,gBAAgB;IAC1B,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,WAAW,iBAAiB;CAC7B;AAED,oBAAY,WAAW;IACrB,QAAQ,aAAa;IACrB,OAAO,YAAY;CACpB;AAED,qBACa,iBAAkB,SAAQ,UAAU;IACrB,MAAM,EAAE,UAAU,CAAoB;IACtC,KAAK,EAAE,MAAM,CAAK;IAClB,GAAG,EAAE,MAAM,CAAO;IAClB,KAAK,EAAE,SAAS,CAAoB;IACpC,OAAO,EAAE,WAAW,CAAwB;IAC5C,GAAG,EAAE,MAAM,CAAM;IAE3C,SAAS,IAAI,kBAAkB;IAoBtB,MAAM;IA8Cf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}

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

@@ -0,0 +1,136 @@
+import { unsafeCSS, LitElement, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import compentStyle from "./automation-tank.css.js";
+import { LineMedium } from "../index.js";
+import "../../icons/icon-02-chevron-double-up.js";
+import "../../icons/icon-02-chevron-up.js";
+import "../../icons/icon-02-chevron-double-down.js";
+import "../../icons/icon-02-chevron-down.js";
+import "../../icons/icon-01-off.js";
+import { classMap } from "lit/directives/class-map.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+var TankTrend = /* @__PURE__ */ ((TankTrend2) => {
+  TankTrend2["fastRising"] = "fast-rising";
+  TankTrend2["rising"] = "rising";
+  TankTrend2["stable"] = "stable";
+  TankTrend2["falling"] = "falling";
+  TankTrend2["fastFalling"] = "fast-falling";
+  return TankTrend2;
+})(TankTrend || {});
+var TankVariant = /* @__PURE__ */ ((TankVariant2) => {
+  TankVariant2["vertical"] = "vertical";
+  TankVariant2["compact"] = "compact";
+  return TankVariant2;
+})(TankVariant || {});
+let ObcAutomationTank = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.medium = LineMedium.water;
+    this.value = 0;
+    this.max = 100;
+    this.trend = "stable";
+    this.variant = "vertical";
+    this.tag = "";
+  }
+  trendIcon() {
+    if (this.trend === "fast-rising") {
+      return html`<obi-02-chevron-double-up
+        class="trend-icon"
+      ></obi-02-chevron-double-up>`;
+    } else if (this.trend === "rising") {
+      return html`<obi-02-chevron-up class="trend-icon"></obi-02-chevron-up>`;
+    } else if (this.trend === "fast-falling") {
+      return html`<obi-02-chevron-double-down
+        class="trend-icon"
+      ></obi-02-chevron-double-down>`;
+    } else if (this.trend === "falling") {
+      return html`<obi-02-chevron-down
+        class="trend-icon"
+      ></obi-02-chevron-down>`;
+    } else {
+      return html`<obi-01-off class="trend-icon"></obi-01-off>`;
+    }
+  }
+  render() {
+    const percent = this.value / this.max * 100;
+    return html`
+      <div class="outer">
+        <div class="badges">
+          <slot name="badges"></slot>
+        </div>
+        <button
+          class=${classMap({
+      wrapper: true,
+      [this.variant]: true,
+      [this.medium]: true
+    })}
+          style="--percent: ${percent / 100}"
+        >
+          <div class="bar-container">
+            <div class="bar"></div>
+          </div>
+          <div class="content">
+            <div class="header">
+              ${this.trendIcon()}
+              <div class="percent">
+                ${percent.toFixed(0)}<span class="percent-symbol">%</span>
+              </div>
+            </div>
+            <div class="value">
+              <div class="current">
+                <slot name="current-value" class="current-value"
+                  >${this.value.toFixed(0)}</slot
+                ><span class="divider">/</span>
+              </div>
+              <div class="max">
+                <slot class="max-value" name="max-value"
+                  >${this.max.toFixed(0)}</slot
+                >
+                <slot class="unit" name="unit">m<sup>3</sup></slot>
+              </div>
+            </div>
+          </div>
+        </button>
+        <div class="tag"><slot name="tag">${this.tag}</slot></div>
+      </div>
+    `;
+  }
+};
+ObcAutomationTank.styles = unsafeCSS(compentStyle);
+__decorateClass([
+  property({ type: String })
+], ObcAutomationTank.prototype, "medium", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcAutomationTank.prototype, "value", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcAutomationTank.prototype, "max", 2);
+__decorateClass([
+  property({ type: String })
+], ObcAutomationTank.prototype, "trend", 2);
+__decorateClass([
+  property({ type: String })
+], ObcAutomationTank.prototype, "variant", 2);
+__decorateClass([
+  property({ type: String })
+], ObcAutomationTank.prototype, "tag", 2);
+ObcAutomationTank = __decorateClass([
+  customElement("obc-automation-tank")
+], ObcAutomationTank);
+export {
+  ObcAutomationTank,
+  TankTrend,
+  TankVariant
+};
+//# sourceMappingURL=automation-tank.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"automation-tank.js","sources":["../../../src/automation/automation-tank/automation-tank.ts"],"sourcesContent":["import {HTMLTemplateResult, LitElement, html, unsafeCSS} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport compentStyle from './automation-tank.css?inline';\nimport {LineMedium} from '..';\n\nimport '../../icons/icon-02-chevron-double-up';\nimport '../../icons/icon-02-chevron-up';\nimport '../../icons/icon-02-chevron-double-down';\nimport '../../icons/icon-02-chevron-down';\nimport '../../icons/icon-01-off';\nimport {classMap} from 'lit/directives/class-map.js';\n\nexport enum TankTrend {\n  fastRising = 'fast-rising',\n  rising = 'rising',\n  stable = 'stable',\n  falling = 'falling',\n  fastFalling = 'fast-falling',\n}\n\nexport enum TankVariant {\n  vertical = 'vertical',\n  compact = 'compact',\n}\n\n@customElement('obc-automation-tank')\nexport class ObcAutomationTank extends LitElement {\n  @property({type: String}) medium: LineMedium = LineMedium.water;\n  @property({type: Number}) value: number = 0;\n  @property({type: Number}) max: number = 100;\n  @property({type: String}) trend: TankTrend = TankTrend.stable;\n  @property({type: String}) variant: TankVariant = TankVariant.vertical;\n  @property({type: String}) tag: string = '';\n\n  trendIcon(): HTMLTemplateResult {\n    if (this.trend === TankTrend.fastRising) {\n      return html`<obi-02-chevron-double-up\n        class=\"trend-icon\"\n      ></obi-02-chevron-double-up>`;\n    } else if (this.trend === TankTrend.rising) {\n      return html`<obi-02-chevron-up class=\"trend-icon\"></obi-02-chevron-up>`;\n    } else if (this.trend === TankTrend.fastFalling) {\n      return html`<obi-02-chevron-double-down\n        class=\"trend-icon\"\n      ></obi-02-chevron-double-down>`;\n    } else if (this.trend === TankTrend.falling) {\n      return html`<obi-02-chevron-down\n        class=\"trend-icon\"\n      ></obi-02-chevron-down>`;\n    } else {\n      return html`<obi-01-off class=\"trend-icon\"></obi-01-off>`;\n    }\n  }\n\n  override render() {\n    const percent = (this.value / this.max) * 100;\n\n    return html`\n      <div class=\"outer\">\n        <div class=\"badges\">\n          <slot name=\"badges\"></slot>\n        </div>\n        <button\n          class=${classMap({\n            wrapper: true,\n            [this.variant]: true,\n            [this.medium]: true,\n          })}\n          style=\"--percent: ${percent / 100}\"\n        >\n          <div class=\"bar-container\">\n            <div class=\"bar\"></div>\n          </div>\n          <div class=\"content\">\n            <div class=\"header\">\n              ${this.trendIcon()}\n              <div class=\"percent\">\n                ${percent.toFixed(0)}<span class=\"percent-symbol\">%</span>\n              </div>\n            </div>\n            <div class=\"value\">\n              <div class=\"current\">\n                <slot name=\"current-value\" class=\"current-value\"\n                  >${this.value.toFixed(0)}</slot\n                ><span class=\"divider\">/</span>\n              </div>\n              <div class=\"max\">\n                <slot class=\"max-value\" name=\"max-value\"\n                  >${this.max.toFixed(0)}</slot\n                >\n                <slot class=\"unit\" name=\"unit\">m<sup>3</sup></slot>\n              </div>\n            </div>\n          </div>\n        </button>\n        <div class=\"tag\"><slot name=\"tag\">${this.tag}</slot></div>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-automation-tank': ObcAutomationTank;\n  }\n}\n"],"names":["TankTrend","TankVariant"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAYY,IAAA,8BAAAA,eAAL;AACLA,aAAA,YAAa,IAAA;AACbA,aAAA,QAAS,IAAA;AACTA,aAAA,QAAS,IAAA;AACTA,aAAA,SAAU,IAAA;AACVA,aAAA,aAAc,IAAA;AALJA,SAAAA;AAAA,GAAA,aAAA,CAAA,CAAA;AAQA,IAAA,gCAAAC,iBAAL;AACLA,eAAA,UAAW,IAAA;AACXA,eAAA,SAAU,IAAA;AAFAA,SAAAA;AAAA,GAAA,eAAA,CAAA,CAAA;AAMC,IAAA,oBAAN,cAAgC,WAAW;AAAA,EAA3C,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,SAAqB,WAAW;AAChB,SAAA,QAAA;AACF,SAAA,MAAA;AACK,SAAA,QAAA;AACI,SAAA,UAAA;AACT,SAAA,MAAA;AAAA,EAAA;AAAA,EAExC,YAAgC;AAC1B,QAAA,KAAK,UAAU,eAAsB;AAChC,aAAA;AAAA;AAAA;AAAA,IAAA,WAGE,KAAK,UAAU,UAAkB;AACnC,aAAA;AAAA,IAAA,WACE,KAAK,UAAU,gBAAuB;AACxC,aAAA;AAAA;AAAA;AAAA,IAAA,WAGE,KAAK,UAAU,WAAmB;AACpC,aAAA;AAAA;AAAA;AAAA,IAAA,OAGF;AACE,aAAA;AAAA,IACT;AAAA,EACF;AAAA,EAES,SAAS;AAChB,UAAM,UAAW,KAAK,QAAQ,KAAK,MAAO;AAEnC,WAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMO,SAAS;AAAA,MACf,SAAS;AAAA,MACT,CAAC,KAAK,OAAO,GAAG;AAAA,MAChB,CAAC,KAAK,MAAM,GAAG;AAAA,IAAA,CAChB,CAAC;AAAA,8BACkB,UAAU,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAO3B,KAAK,WAAW;AAAA;AAAA,kBAEd,QAAQ,QAAQ,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMf,KAAK,MAAM,QAAQ,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKrB,KAAK,IAAI,QAAQ,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4CAOI,KAAK,GAAG;AAAA;AAAA;AAAA,EAGlD;AAGF;AA3Ea,kBA0EK,SAAS,UAAU,YAAY;AAzErB,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,SAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAHb,kBAGe,WAAA,OAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAJb,kBAIe,WAAA,SAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GALb,kBAKe,WAAA,WAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GANb,kBAMe,WAAA,OAAA,CAAA;AANf,oBAAN,gBAAA;AAAA,EADN,cAAc,qBAAqB;AAAA,GACvB,iBAAA;"}

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

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-import { LineMediumType, LineTypeType } from '../index';
+import { LineMedium, LineType } from '../index';
 export declare enum CornerLineDirection {
     topRight = "top-right",
     topLeft = "top-left",
@@ -8,9 +8,9 @@ export declare enum CornerLineDirection {
 }
 export type CornerLineDirectionType = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
 export declare class ObcCornerLine extends LitElement {
-    medium: LineMediumType;
+    medium: LineMedium;
     direction: CornerLineDirectionType;
-    lineType: LineTypeType;
+    lineType: LineType;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult;
 }

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,EAEL,cAAc,EAGd,YAAY,EAEb,MAAM,UAAU,CAAC;AAElB,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,cAAc,CAAqB;IAC3C,SAAS,EAAE,uBAAuB,CAC7B;IACmB,QAAQ,EAAE,YAAY,CACvD;IAER,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,0BAKpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

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

@@ -149,7 +149,7 @@ __decorateClass([
   property({ type: String })
 ], ObcCornerLine.prototype, "direction", 2);
 __decorateClass([
-  property({ type: String, attribute: "line-type" })
+  property({ type: String })
 ], ObcCornerLine.prototype, "lineType", 2);
 ObcCornerLine = __decorateClass([
   customElement("obc-corner-line")

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 {\n  LineMedium,\n  LineMediumType,\n  lineColor,\n  LineType,\n  LineTypeType,\n  lineWidth,\n} 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: LineMediumType = LineMedium.normal;\n  @property({type: String}) direction: CornerLineDirectionType =\n    CornerLineDirection.topRight;\n  @property({type: String, attribute: 'line-type'}) lineType: LineTypeType =\n    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":";;;;;;;;;;;;;;AAWY,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,SAAyB,WAAW;AAE5D,SAAA,YAAA;AACgD,SAAA,WAChD,SAAS;AAAA,EAAA;AAAA,EAEF,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;AAvIa,cAiIK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAhIC,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;AAEwB,gBAAA;AAAA,EAAjD,SAAS,EAAC,MAAM,QAAQ,WAAW,aAAY;AAAA,GAJrC,cAIuC,WAAA,YAAA,CAAA;AAJvC,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}\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;"}

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

@@ -0,0 +1,14 @@
+import { LitElement } from 'lit';
+import { LineMedium, LineType } from '..';
+export declare class ObcDirectionLine extends LitElement {
+    medium: LineMedium;
+    lineType: LineType;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'obc-direction-line': ObcDirectionLine;
+    }
+}
+//# sourceMappingURL=direction-line.d.ts.map

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

@@ -0,0 +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"}