@oicl/openbridge-webcomponents 0.0.9 → 0.0.10

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

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+import { LineMediumType, LineTypeType } from '../index';
+export declare enum CornerLineDirection {
+    topRight = "top-right",
+    topLeft = "top-left",
+    bottomRight = "bottom-right",
+    bottomLeft = "bottom-left"
+}
+export type CornerLineDirectionType = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+export declare class ObcCornerLine extends LitElement {
+    medium: LineMediumType;
+    direction: CornerLineDirectionType;
+    lineType: LineTypeType;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'obc-corner-line': ObcCornerLine;
+    }
+}
+//# sourceMappingURL=corner-line.d.ts.map

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

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

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

@@ -0,0 +1,161 @@
+import { css, LitElement, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { LineMedium, LineType, lineColor, 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 CornerLineDirection = /* @__PURE__ */ ((CornerLineDirection2) => {
+  CornerLineDirection2["topRight"] = "top-right";
+  CornerLineDirection2["topLeft"] = "top-left";
+  CornerLineDirection2["bottomRight"] = "bottom-right";
+  CornerLineDirection2["bottomLeft"] = "bottom-left";
+  return CornerLineDirection2;
+})(CornerLineDirection || {});
+let ObcCornerLine = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.medium = LineMedium.normal;
+    this.direction = "top-right";
+    this.lineType = LineType.fluid;
+  }
+  render() {
+    let rotation = 270;
+    if (this.direction === "top-left") {
+      rotation = 180;
+    } else if (this.direction === "bottom-left") {
+      rotation = 90;
+    } else if (this.direction === "bottom-right") {
+      rotation = 0;
+    }
+    if (this.lineType === LineType.connector) {
+      return html`
+        <svg
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          transform="rotate(${rotation})"
+        >
+          <path
+            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"
+            fill="var(--element-neutral-color)"
+          />
+          <path
+            d="M24 11.5H22.5V12.5L24 12.5V11.5Z"
+            fill="var(--element-neutral-color)"
+          />
+          <path
+            d="M21 11.5H18V12.5L21 12.5V11.5Z"
+            fill="var(--element-neutral-color)"
+          />
+          <path
+            d="M11.5 18V21H12.5L12.5 18H11.5Z"
+            fill="var(--element-neutral-color)"
+          />
+          <path
+            d="M11.5 22.5V24H12.5V22.5H11.5Z"
+            fill="var(--element-neutral-color)"
+          />
+        </svg>
+      `;
+    }
+    const color = lineColor(this.medium);
+    const width = lineWidth(this.lineType);
+    const r1 = 6 - 0.5 - width / 2;
+    const r2 = 6 + 0.5 + width / 2;
+    if (this.lineType === LineType.air) {
+      const r12 = 2.5;
+      const r22 = 11.5;
+      return html`
+        <svg
+          class="line"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          height="24"
+          width="24"
+          transform="rotate(${rotation})"
+        >
+          <path
+            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"
+            stroke="none"
+            fill="var(${color.inner})"
+          />
+          <path
+            d="M ${12 + 0.5 + width / 2} 24 v -4 a ${r12} ${r12} 0 0 1 ${r12} -${r12} h 4"
+            stroke-width="1"
+            stroke="var(${color.outer})"
+            fill="none"
+          />
+          <path
+            d="M ${12 - 0.5 - width / 2} 24 v -6 a ${r22} ${r22} 0 0 1 ${r22} -${r22} h 6"
+            stroke-width="1"
+            stroke="var(${color.outer})"
+            fill="none"
+          />
+        </svg>
+      `;
+    } else {
+      return html`
+        <svg
+          class="line"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          height="24"
+          width="24"
+          transform="rotate(${rotation})"
+        >
+          <path
+            d="M 12 24 v -6 a 6 6 0 0 1 6 -6 h 6"
+            stroke-width=${width}
+            stroke="var(${color.inner})"
+            fill="none"
+          />
+          <path
+            d="M ${12 + 0.5 + width / 2} 24 v -6 a ${r1} ${r1} 0 0 1 ${r1} -${r1} h 6"
+            stroke-width="1"
+            stroke="var(${color.outer})"
+            fill="none"
+          />
+          <path
+            d="M ${12 - 0.5 - width / 2} 24 v -6 a ${r2} ${r2} 0 0 1 ${r2} -${r2} h 6"
+            stroke-width="1"
+            stroke="var(${color.outer})"
+            fill="none"
+          />
+        </svg>
+      `;
+    }
+  }
+};
+ObcCornerLine.styles = css`
+    :host {
+      display: block;
+      line-height: 0;
+    }
+  `;
+__decorateClass([
+  property({ type: String })
+], ObcCornerLine.prototype, "medium", 2);
+__decorateClass([
+  property({ type: String })
+], ObcCornerLine.prototype, "direction", 2);
+__decorateClass([
+  property({ type: String, attribute: "line-type" })
+], ObcCornerLine.prototype, "lineType", 2);
+ObcCornerLine = __decorateClass([
+  customElement("obc-corner-line")
+], ObcCornerLine);
+export {
+  CornerLineDirection,
+  ObcCornerLine
+};
+//# sourceMappingURL=corner-line.js.map

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

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

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

@@ -0,0 +1,15 @@
+import { LitElement } from 'lit';
+import { LineMediumType, LineTypeType } from '../index';
+export declare class ObcHorizontalLine extends LitElement {
+    medium: LineMediumType;
+    lineType: LineTypeType;
+    length: number;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'obc-horizontal-line': ObcHorizontalLine;
+    }
+}
+//# sourceMappingURL=horizontal-line.d.ts.map

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

@@ -0,0 +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,EAEL,cAAc,EAGd,YAAY,EAEb,MAAM,UAAU,CAAC;AAElB,qBACa,iBAAkB,SAAQ,UAAU;IACrB,MAAM,EAAE,cAAc,CAAqB;IACnB,QAAQ,EAAE,YAAY,CACvD;IACS,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"}

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

@@ -0,0 +1,110 @@
+import { css, LitElement, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { LineMedium, LineType, lineColor, 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;
+};
+let ObcHorizontalLine = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.medium = LineMedium.normal;
+    this.lineType = LineType.fluid;
+    this.length = 1;
+  }
+  render() {
+    if (this.lineType === LineType.connector) {
+      const length2 = this.length * 24;
+      return html`<svg
+        width="${length2}"
+        height="24"
+        viewBox="0 0 ${length2} 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <line
+          x1="0"
+          y1="12"
+          x2="${length2}"
+          y2="12"
+          stroke-width="1"
+          stroke="var(--element-neutral-color)"
+          stroke-dasharray="4,2"
+          stroke-dashoffset="2"
+        />
+      </svg> `;
+    }
+    const color = lineColor(this.medium);
+    const length = this.length * 24 + 1;
+    const width = lineWidth(this.lineType);
+    return html`
+      <div class="wrapper" style="height: 24px; width: ${this.length * 24}px;">
+        <svg
+          class="line"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="-.5 0 ${length} 24"
+          height="24"
+          width=${length}
+        >
+          <line
+            x1="-0.5"
+            y1="12"
+            x2="${length - 0.5}"
+            y2="12"
+            stroke-width=${width}
+            stroke="var(${color.inner})"
+          />
+          <line
+            x1="-0.5"
+            y1="${12 - 0.5 - width / 2}"
+            x2="${length - 0.5}"
+            y2="${12 - 0.5 - width / 2}"
+            stroke-width="1"
+            stroke="var(${color.outer})"
+          />
+          <line
+            x1="-0.5"
+            y1="${12 + 0.5 + width / 2}"
+            x2="${length - 0.5}"
+            y2="${12 + 0.5 + width / 2}"
+            stroke-width="1"
+            stroke="var(${color.outer})"
+          />
+        </svg>
+      </div>
+    `;
+  }
+};
+ObcHorizontalLine.styles = css`
+    :host {
+      display: block;
+      line-height: 0;
+    }
+    .line {
+      position: relative;
+      left: -0.5px;
+    }
+  `;
+__decorateClass([
+  property({ type: String })
+], ObcHorizontalLine.prototype, "medium", 2);
+__decorateClass([
+  property({ type: String, attribute: "line-type" })
+], ObcHorizontalLine.prototype, "lineType", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcHorizontalLine.prototype, "length", 2);
+ObcHorizontalLine = __decorateClass([
+  customElement("obc-horizontal-line")
+], ObcHorizontalLine);
+export {
+  ObcHorizontalLine
+};
+//# sourceMappingURL=horizontal-line.js.map

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

@@ -0,0 +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 {\n  LineMedium,\n  LineMediumType,\n  lineColor,\n  LineType,\n  LineTypeType,\n  lineWidth,\n} from '../index';\n\n@customElement('obc-horizontal-line')\nexport class ObcHorizontalLine extends LitElement {\n  @property({type: String}) medium: LineMediumType = LineMedium.normal;\n  @property({type: String, attribute: 'line-type'}) lineType: LineTypeType =\n    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":";;;;;;;;;;;;;;AAYa,IAAA,oBAAN,cAAgC,WAAW;AAAA,EAA3C,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,SAAyB,WAAW;AACZ,SAAA,WAChD,SAAS;AACgC,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;AAjFa,kBAuEK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAtEC,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GADb,kBACe,WAAA,UAAA,CAAA;AACwB,gBAAA;AAAA,EAAjD,SAAS,EAAC,MAAM,QAAQ,WAAW,aAAY;AAAA,GAFrC,kBAEuC,WAAA,YAAA,CAAA;AAExB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAJb,kBAIe,WAAA,UAAA,CAAA;AAJf,oBAAN,gBAAA;AAAA,EADN,cAAc,qBAAqB;AAAA,GACvB,iBAAA;"}

package/dist/automation/index.d.ts

@@ -0,0 +1,20 @@
+export declare enum LineMedium {
+    normal = "normal",
+    empty = "empty",
+    water = "water",
+    air = "air"
+}
+export type LineMediumType = keyof typeof LineMedium;
+export declare enum LineType {
+    fluid = "fluid",
+    electric = "electric",
+    air = "air",
+    connector = "connector"
+}
+export type LineTypeType = keyof typeof LineType;
+export declare function lineColor(medium: LineMediumType): {
+    inner: string;
+    outer: string;
+};
+export declare function lineWidth(lineType: LineTypeType): number;
+//# sourceMappingURL=index.d.ts.map

package/dist/automation/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/automation/index.ts"],"names":[],"mappings":"AAAA,oBAAY,UAAU;IACpB,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,KAAK,UAAU;IACf,GAAG,QAAQ;CACZ;AACD,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,UAAU,CAAC;AAErD,oBAAY,QAAQ;IAClB,KAAK,UAAU;IACf,QAAQ,aAAa;IACrB,GAAG,QAAQ;IACX,SAAS,cAAc;CACxB;AACD,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,QAAQ,CAAC;AAEjD,wBAAgB,SAAS,CAAC,MAAM,EAAE,cAAc,GAAG;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAQA;AAED,wBAAgB,SAAS,CAAC,QAAQ,EAAE,YAAY,GAAG,MAAM,CAWxD"}

package/dist/automation/index.js

@@ -0,0 +1,42 @@
+var LineMedium = /* @__PURE__ */ ((LineMedium2) => {
+  LineMedium2["normal"] = "normal";
+  LineMedium2["empty"] = "empty";
+  LineMedium2["water"] = "water";
+  LineMedium2["air"] = "air";
+  return LineMedium2;
+})(LineMedium || {});
+var LineType = /* @__PURE__ */ ((LineType2) => {
+  LineType2["fluid"] = "fluid";
+  LineType2["electric"] = "electric";
+  LineType2["air"] = "air";
+  LineType2["connector"] = "connector";
+  return LineType2;
+})(LineType || {});
+function lineColor(medium) {
+  let innerColor = "--automation-pipe-primary-color";
+  if (medium === "empty") {
+    innerColor = "--automation-pipe-primary-inverted-color";
+  } else if (medium === "water" || medium === "air") {
+    innerColor = "--automation-fresh-water";
+  }
+  return { inner: innerColor, outer: "--automation-pipe-tertiary-color" };
+}
+function lineWidth(lineType) {
+  if (lineType === "electric") {
+    return 2;
+  } else if (lineType === "connector") {
+    return 1;
+  } else if (lineType === "fluid") {
+    return 4;
+  } else if (lineType === "air") {
+    return 10;
+  }
+  throw new Error("Unknown line type");
+}
+export {
+  LineMedium,
+  LineType,
+  lineColor,
+  lineWidth
+};
+//# sourceMappingURL=index.js.map

package/dist/automation/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/automation/index.ts"],"sourcesContent":["export enum LineMedium {\n  normal = 'normal',\n  empty = 'empty',\n  water = 'water',\n  air = 'air',\n}\nexport type LineMediumType = keyof typeof LineMedium;\n\nexport enum LineType {\n  fluid = 'fluid',\n  electric = 'electric',\n  air = 'air',\n  connector = 'connector',\n}\nexport type LineTypeType = keyof typeof LineType;\n\nexport function lineColor(medium: LineMediumType): {\n  inner: string;\n  outer: string;\n} {\n  let innerColor = '--automation-pipe-primary-color';\n  if (medium === LineMedium.empty) {\n    innerColor = '--automation-pipe-primary-inverted-color';\n  } else if (medium === LineMedium.water || medium === LineMedium.air) {\n    innerColor = '--automation-fresh-water';\n  }\n  return {inner: innerColor, outer: '--automation-pipe-tertiary-color'};\n}\n\nexport function lineWidth(lineType: LineTypeType): number {\n  if (lineType === LineType.electric) {\n    return 2;\n  } else if (lineType === LineType.connector) {\n    return 1;\n  } else if (lineType === LineType.fluid) {\n    return 4;\n  } else if (lineType === LineType.air) {\n    return 10;\n  }\n  throw new Error('Unknown line type');\n}\n"],"names":["LineMedium","LineType"],"mappings":"AAAY,IAAA,+BAAAA,gBAAL;AACLA,cAAA,QAAS,IAAA;AACTA,cAAA,OAAQ,IAAA;AACRA,cAAA,OAAQ,IAAA;AACRA,cAAA,KAAM,IAAA;AAJIA,SAAAA;AAAA,GAAA,cAAA,CAAA,CAAA;AAQA,IAAA,6BAAAC,cAAL;AACLA,YAAA,OAAQ,IAAA;AACRA,YAAA,UAAW,IAAA;AACXA,YAAA,KAAM,IAAA;AACNA,YAAA,WAAY,IAAA;AAJFA,SAAAA;AAAA,GAAA,YAAA,CAAA,CAAA;AAQL,SAAS,UAAU,QAGxB;AACA,MAAI,aAAa;AACjB,MAAI,WAAW,SAAkB;AAClB,iBAAA;AAAA,EACJ,WAAA,WAAW,WAAoB,WAAW,OAAgB;AACtD,iBAAA;AAAA,EACf;AACA,SAAO,EAAC,OAAO,YAAY,OAAO,mCAAkC;AACtE;AAEO,SAAS,UAAU,UAAgC;AACxD,MAAI,aAAa,YAAmB;AAC3B,WAAA;AAAA,EAAA,WACE,aAAa,aAAoB;AACnC,WAAA;AAAA,EAAA,WACE,aAAa,SAAgB;AAC/B,WAAA;AAAA,EAAA,WACE,aAAa,OAAc;AAC7B,WAAA;AAAA,EACT;AACM,QAAA,IAAI,MAAM,mBAAmB;AACrC;"}

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

@@ -0,0 +1,15 @@
+import { LitElement } from 'lit';
+import { LineMediumType, LineTypeType } from '../index';
+export declare class ObcVerticalLine extends LitElement {
+    medium: LineMediumType;
+    lineType: LineTypeType;
+    length: number;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'obc-vertical-line': ObcVerticalLine;
+    }
+}
+//# sourceMappingURL=vertical-line.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"vertical-line.d.ts","sourceRoot":"","sources":["../../../src/automation/vertical-line/vertical-line.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAE1C,OAAO,EAEL,cAAc,EAGd,YAAY,EAEb,MAAM,UAAU,CAAC;AAMlB,qBACa,eAAgB,SAAQ,UAAU;IACnB,MAAM,EAAE,cAAc,CAAqB;IACnB,QAAQ,EAAE,YAAY,CACvD;IACS,MAAM,EAAE,MAAM,CAAK;IAEpC,MAAM;IAgEf,OAAgB,MAAM,0BAUpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}

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

@@ -0,0 +1,111 @@
+import { css, LitElement, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { LineMedium, LineType, lineColor, 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;
+};
+let ObcVerticalLine = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.medium = LineMedium.normal;
+    this.lineType = LineType.fluid;
+    this.length = 1;
+  }
+  render() {
+    if (this.lineType === LineType.connector) {
+      const length2 = this.length * 24;
+      return html`<svg
+        width="24"
+        height="${length2}"
+        viewBox="0 0 24 ${length2}"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <line
+          y1="0"
+          x1="12"
+          y2="${length2}"
+          x2="12"
+          stroke-width="1"
+          stroke="var(--element-neutral-color)"
+          stroke-dasharray="4,2"
+          stroke-dashoffset="2"
+        />
+      </svg> `;
+    }
+    const length = this.length * 24 + 1;
+    const color = lineColor(this.medium);
+    const width = lineWidth(this.lineType);
+    return html`
+      <div class="wrapper" style="width: 24px; height: ${this.length * 24}px;">
+        <svg
+          class="line"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 -.5  24 ${length}"
+          width="24"
+          height=${length}
+        >
+          <line
+            y1="-.5"
+            x1="12"
+            y2="${length - 0.5}"
+            x2="12"
+            stroke-width=${width}
+            stroke="var(${color.inner})"
+          />
+          <line
+            y1="-.5"
+            x1=${12 - 0.5 - width / 2}
+            y2="${length - 0.5}"
+            x2=${12 - 0.5 - width / 2}
+            stroke-width="1"
+            stroke="var(${color.outer})"
+          />
+          <line
+            y1="-.5"
+            x1=${12 + 0.5 + width / 2}
+            y2="${length - 0.5}"
+            x2=${12 + 0.5 + width / 2}
+            stroke-width="1"
+            stroke="var(${color.outer})"
+          />
+        </svg>
+      </div>
+    `;
+  }
+};
+ObcVerticalLine.styles = css`
+    :host {
+      display: block;
+      line-height: 0;
+    }
+
+    .line {
+      position: relative;
+      top: -0.5px;
+    }
+  `;
+__decorateClass([
+  property({ type: String })
+], ObcVerticalLine.prototype, "medium", 2);
+__decorateClass([
+  property({ type: String, attribute: "line-type" })
+], ObcVerticalLine.prototype, "lineType", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcVerticalLine.prototype, "length", 2);
+ObcVerticalLine = __decorateClass([
+  customElement("obc-vertical-line")
+], ObcVerticalLine);
+export {
+  ObcVerticalLine
+};
+//# sourceMappingURL=vertical-line.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"vertical-line.js","sources":["../../../src/automation/vertical-line/vertical-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\n/* Vertical line component\n *\n * The vertical line is 24px * length + 1px. +1 px to make sure that connecting lines are overlapping, to hide the gap between them.\n */\n@customElement('obc-vertical-line')\nexport class ObcVerticalLine extends LitElement {\n  @property({type: String}) medium: LineMediumType = LineMedium.normal;\n  @property({type: String, attribute: 'line-type'}) lineType: LineTypeType =\n    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=\"24\"\n        height=\"${length}\"\n        viewBox=\"0 0 24 ${length}\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <line\n          y1=\"0\"\n          x1=\"12\"\n          y2=\"${length}\"\n          x2=\"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 length = this.length * 24 + 1;\n    const color = lineColor(this.medium);\n    const width = lineWidth(this.lineType);\n    return html`\n      <div class=\"wrapper\" style=\"width: 24px; height: ${this.length * 24}px;\">\n        <svg\n          class=\"line\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 -.5  24 ${length}\"\n          width=\"24\"\n          height=${length}\n        >\n          <line\n            y1=\"-.5\"\n            x1=\"12\"\n            y2=\"${length - 0.5}\"\n            x2=\"12\"\n            stroke-width=${width}\n            stroke=\"var(${color.inner})\"\n          />\n          <line\n            y1=\"-.5\"\n            x1=${12 - 0.5 - width / 2}\n            y2=\"${length - 0.5}\"\n            x2=${12 - 0.5 - width / 2}\n            stroke-width=\"1\"\n            stroke=\"var(${color.outer})\"\n          />\n          <line\n            y1=\"-.5\"\n            x1=${12 + 0.5 + width / 2}\n            y2=\"${length - 0.5}\"\n            x2=${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\n    .line {\n      position: relative;\n      top: -0.5px;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-vertical-line': ObcVerticalLine;\n  }\n}\n"],"names":["length"],"mappings":";;;;;;;;;;;;;;AAgBa,IAAA,kBAAN,cAA8B,WAAW;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,SAAyB,WAAW;AACZ,SAAA,WAChD,SAAS;AACgC,SAAA,SAAA;AAAA,EAAA;AAAA,EAElC,SAAS;AACZ,QAAA,KAAK,aAAa,SAAS,WAAW;AAClCA,YAAAA,UAAS,KAAK,SAAS;AACtB,aAAA;AAAA;AAAA,kBAEKA,OAAM;AAAA,0BACEA,OAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAOhBA,OAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQlB;AAEM,UAAA,SAAS,KAAK,SAAS,KAAK;AAC5B,UAAA,QAAQ,UAAU,KAAK,MAAM;AAC7B,UAAA,QAAQ,UAAU,KAAK,QAAQ;AAC9B,WAAA;AAAA,yDAC8C,KAAK,SAAS,EAAE;AAAA;AAAA;AAAA;AAAA,+BAI1C,MAAM;AAAA;AAAA,mBAElB,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKP,SAAS,GAAG;AAAA;AAAA,2BAEH,KAAK;AAAA,0BACN,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,iBAIpB,KAAK,MAAM,QAAQ,CAAC;AAAA,kBACnB,SAAS,GAAG;AAAA,iBACb,KAAK,MAAM,QAAQ,CAAC;AAAA;AAAA,0BAEX,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,iBAIpB,KAAK,MAAM,QAAQ,CAAC;AAAA,kBACnB,SAAS,GAAG;AAAA,iBACb,KAAK,MAAM,QAAQ,CAAC;AAAA;AAAA,0BAEX,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,EAKnC;AAaF;AAjFa,gBAsEK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AArEC,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GADb,gBACe,WAAA,UAAA,CAAA;AACwB,gBAAA;AAAA,EAAjD,SAAS,EAAC,MAAM,QAAQ,WAAW,aAAY;AAAA,GAFrC,gBAEuC,WAAA,YAAA,CAAA;AAExB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAJb,gBAIe,WAAA,UAAA,CAAA;AAJf,kBAAN,gBAAA;AAAA,EADN,cAAc,mBAAmB;AAAA,GACrB,eAAA;"}

package/dist/components/brilliance-menu/brilliance-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"brilliance-menu.d.ts","sourceRoot":"","sources":["../../../src/components/brilliance-menu/brilliance-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAGhD,OAAO,4BAA4B,CAAC;AACpC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,gCAAgC,CAAC;AACxC,OAAO,4CAA4C,CAAC;AACpD,OAAO,8CAA8C,CAAC;AACtD,OAAO,oCAAoC,CAAC;AAC5C,OAAO,qCAAqC,CAAC;AAC7C,OAAO,2BAA2B,CAAC;AACnC,OAAO,0BAA0B,CAAC;AAClC,OAAO,yBAAyB,CAAC;AACjC,OAAO,gCAAgC,CAAC;AAExC;;;;;;;;;;GAUG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IACrB,OAAO,EAAE,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,CAC9D;IACkB,UAAU,SAAM;IAE1C,kBAAkB,UAAS;IACgC,eAAe,UAClE;IAER,gBAAgB,CAAC,KAAK,EAAE,WAAW;IASnC,mBAAmB,CAAC,KAAK,EAAE,WAAW;IAS7B,MAAM;IAgDf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}
+{"version":3,"file":"brilliance-menu.d.ts","sourceRoot":"","sources":["../../../src/components/brilliance-menu/brilliance-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAGhD,OAAO,4BAA4B,CAAC;AACpC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,gCAAgC,CAAC;AACxC,OAAO,4CAA4C,CAAC;AACpD,OAAO,8CAA8C,CAAC;AACtD,OAAO,oCAAoC,CAAC;AAC5C,OAAO,qCAAqC,CAAC;AAC7C,OAAO,2BAA2B,CAAC;AACnC,OAAO,0BAA0B,CAAC;AAClC,OAAO,yBAAyB,CAAC;AACjC,OAAO,gCAAgC,CAAC;AAExC;;;;;;;;;;GAUG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IACrB,OAAO,EAAE,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,CAC9D;IACkB,UAAU,SAAM;IAE1C,kBAAkB,UAAS;IACgC,eAAe,UAClE;IAER,gBAAgB,CAAC,KAAK,EAAE,WAAW;IASnC,mBAAmB,CAAC,KAAK,EAAE,WAAW;IAS7B,MAAM;IAkDf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}

package/dist/components/brilliance-menu/brilliance-menu.js

@@ -57,6 +57,8 @@ let ObcBrillianceMenu = class extends LitElement {
           min="0"
           max="100"
           hug-container
+          has-left-icon
+          has-right-icon
         >
           <obi-04-brilliance-low slot="icon-left"></obi-04-brilliance-low>
           <obi-04-brilliance-high slot="icon-right"></obi-04-brilliance-high>

package/dist/components/brilliance-menu/brilliance-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"brilliance-menu.js","sources":["../../../src/components/brilliance-menu/brilliance-menu.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport componentStyle from './brilliance-menu.css?inline';\nimport '../icon-button/icon-button';\nimport '../slider/slider';\nimport '../toggle-switch/toggle-switch';\nimport '../toggle-button-group/toggle-button-group';\nimport '../toggle-button-option/toggle-button-option';\nimport '../../icons/icon-04-brilliance-low';\nimport '../../icons/icon-04-brilliance-high';\nimport '../../icons/icon-04-night';\nimport '../../icons/icon-04-dusk';\nimport '../../icons/icon-04-day';\nimport '../../icons/icon-04-day-bright';\n\n/**\n * @element obc-brilliance-menu\n *\n * @prop {String} palette - The palette to use. Possible values are 'night', 'dusk', 'day', 'bright'\n * @prop {Number} brightness - The brightness value\n * @prop {Boolean} showAutoBrightness - Show the auto brightness toggle\n * @prop {Boolean} showAutoPalette - Show the auto palette toggle\n *\n * @fires palette-changed - Fires when the palette is changed\n * @fires brightness-changed - Fires when the brightness is changed\n */\n@customElement('obc-brilliance-menu')\nexport class ObcBrillianceMenu extends LitElement {\n  @property({type: String}) palette: 'night' | 'dusk' | 'day' | 'bright' =\n    'day';\n  @property({type: Number}) brightness = 50;\n  @property({type: Boolean, attribute: 'show-auto-brightness'})\n  showAutoBrightness = false;\n  @property({type: Boolean, attribute: 'show-auto-palette'}) showAutoPalette =\n    false;\n\n  onPaletteChanged(event: CustomEvent) {\n    this.palette = event.detail.value;\n    this.dispatchEvent(\n      new CustomEvent('palette-changed', {\n        detail: {value: event.detail.value},\n      })\n    );\n  }\n\n  onBrightnessChanged(event: CustomEvent) {\n    this.brightness = event.detail;\n    this.dispatchEvent(\n      new CustomEvent('brightness-changed', {\n        detail: {value: event.detail},\n      })\n    );\n  }\n\n  override render() {\n    return html`\n      <div class=\"card\">\n        <h3>Brilliance</h3>\n        <obc-slider\n          value=${this.brightness}\n          @value=${this.onBrightnessChanged}\n          min=\"0\"\n          max=\"100\"\n          hug-container\n        >\n          <obi-04-brilliance-low slot=\"icon-left\"></obi-04-brilliance-low>\n          <obi-04-brilliance-high slot=\"icon-right\"></obi-04-brilliance-high>\n        </obc-slider>\n        ${this.showAutoBrightness\n          ? html`<obc-toggle-switch\n              label=\"Auto brilliance\"\n            ></obc-toggle-switch>`\n          : ''}\n        <div class=\"divider\"></div>\n        <h3>Day - Night</h3>\n        <obc-toggle-button-group\n          value=${this.palette}\n          @value=${this.onPaletteChanged}\n        >\n          <obc-toggle-button-option value=\"night\">\n            <obi-04-night slot=\"icon\"></obi-04-night>\n          </obc-toggle-button-option>\n          <obc-toggle-button-option value=\"dusk\">\n            <obi-04-dusk slot=\"icon\"></obi-04-dusk>\n          </obc-toggle-button-option>\n          <obc-toggle-button-option value=\"day\">\n            <obi-04-day slot=\"icon\"></obi-04-day>\n          </obc-toggle-button-option>\n          <obc-toggle-button-option value=\"bright\">\n            <obi-04-day-bright slot=\"icon\"></obi-04-day-bright>\n          </obc-toggle-button-option>\n        </obc-toggle-button-group>\n        ${this.showAutoPalette\n          ? html`<obc-toggle-switch\n              label=\"Auto day - night\"\n              checked\n            ></obc-toggle-switch>`\n          : ''}\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-brilliance-menu': ObcBrillianceMenu;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA2Ba,IAAA,oBAAN,cAAgC,WAAW;AAAA,EAA3C,cAAA;AAAA,UAAA,GAAA,SAAA;AAEH,SAAA,UAAA;AACqC,SAAA,aAAA;AAElB,SAAA,qBAAA;AAEnB,SAAA,kBAAA;AAAA,EAAA;AAAA,EAEF,iBAAiB,OAAoB;AAC9B,SAAA,UAAU,MAAM,OAAO;AACvB,SAAA;AAAA,MACH,IAAI,YAAY,mBAAmB;AAAA,QACjC,QAAQ,EAAC,OAAO,MAAM,OAAO,MAAK;AAAA,MAAA,CACnC;AAAA,IAAA;AAAA,EAEL;AAAA,EAEA,oBAAoB,OAAoB;AACtC,SAAK,aAAa,MAAM;AACnB,SAAA;AAAA,MACH,IAAI,YAAY,sBAAsB;AAAA,QACpC,QAAQ,EAAC,OAAO,MAAM,OAAM;AAAA,MAAA,CAC7B;AAAA,IAAA;AAAA,EAEL;AAAA,EAES,SAAS;AACT,WAAA;AAAA;AAAA;AAAA;AAAA,kBAIO,KAAK,UAAU;AAAA,mBACd,KAAK,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAQjC,KAAK,qBACH;AAAA;AAAA,qCAGA,EAAE;AAAA;AAAA;AAAA;AAAA,kBAII,KAAK,OAAO;AAAA,mBACX,KAAK,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAe9B,KAAK,kBACH;AAAA;AAAA;AAAA,qCAIA,EAAE;AAAA;AAAA;AAAA,EAGZ;AAGF;AA5Ea,kBA2EK,SAAS,UAAU,cAAc;AA1EvB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GADb,kBACe,WAAA,WAAA,CAAA;AAEA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAHb,kBAGe,WAAA,cAAA,CAAA;AAE1B,gBAAA;AAAA,EADC,SAAS,EAAC,MAAM,SAAS,WAAW,wBAAuB;AAAA,GAJjD,kBAKX,WAAA,sBAAA,CAAA;AAC2D,gBAAA;AAAA,EAA1D,SAAS,EAAC,MAAM,SAAS,WAAW,qBAAoB;AAAA,GAN9C,kBAMgD,WAAA,mBAAA,CAAA;AANhD,oBAAN,gBAAA;AAAA,EADN,cAAc,qBAAqB;AAAA,GACvB,iBAAA;"}
+{"version":3,"file":"brilliance-menu.js","sources":["../../../src/components/brilliance-menu/brilliance-menu.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport componentStyle from './brilliance-menu.css?inline';\nimport '../icon-button/icon-button';\nimport '../slider/slider';\nimport '../toggle-switch/toggle-switch';\nimport '../toggle-button-group/toggle-button-group';\nimport '../toggle-button-option/toggle-button-option';\nimport '../../icons/icon-04-brilliance-low';\nimport '../../icons/icon-04-brilliance-high';\nimport '../../icons/icon-04-night';\nimport '../../icons/icon-04-dusk';\nimport '../../icons/icon-04-day';\nimport '../../icons/icon-04-day-bright';\n\n/**\n * @element obc-brilliance-menu\n *\n * @prop {String} palette - The palette to use. Possible values are 'night', 'dusk', 'day', 'bright'\n * @prop {Number} brightness - The brightness value\n * @prop {Boolean} showAutoBrightness - Show the auto brightness toggle\n * @prop {Boolean} showAutoPalette - Show the auto palette toggle\n *\n * @fires palette-changed - Fires when the palette is changed\n * @fires brightness-changed - Fires when the brightness is changed\n */\n@customElement('obc-brilliance-menu')\nexport class ObcBrillianceMenu extends LitElement {\n  @property({type: String}) palette: 'night' | 'dusk' | 'day' | 'bright' =\n    'day';\n  @property({type: Number}) brightness = 50;\n  @property({type: Boolean, attribute: 'show-auto-brightness'})\n  showAutoBrightness = false;\n  @property({type: Boolean, attribute: 'show-auto-palette'}) showAutoPalette =\n    false;\n\n  onPaletteChanged(event: CustomEvent) {\n    this.palette = event.detail.value;\n    this.dispatchEvent(\n      new CustomEvent('palette-changed', {\n        detail: {value: event.detail.value},\n      })\n    );\n  }\n\n  onBrightnessChanged(event: CustomEvent) {\n    this.brightness = event.detail;\n    this.dispatchEvent(\n      new CustomEvent('brightness-changed', {\n        detail: {value: event.detail},\n      })\n    );\n  }\n\n  override render() {\n    return html`\n      <div class=\"card\">\n        <h3>Brilliance</h3>\n        <obc-slider\n          value=${this.brightness}\n          @value=${this.onBrightnessChanged}\n          min=\"0\"\n          max=\"100\"\n          hug-container\n          has-left-icon\n          has-right-icon\n        >\n          <obi-04-brilliance-low slot=\"icon-left\"></obi-04-brilliance-low>\n          <obi-04-brilliance-high slot=\"icon-right\"></obi-04-brilliance-high>\n        </obc-slider>\n        ${this.showAutoBrightness\n          ? html`<obc-toggle-switch\n              label=\"Auto brilliance\"\n            ></obc-toggle-switch>`\n          : ''}\n        <div class=\"divider\"></div>\n        <h3>Day - Night</h3>\n        <obc-toggle-button-group\n          value=${this.palette}\n          @value=${this.onPaletteChanged}\n        >\n          <obc-toggle-button-option value=\"night\">\n            <obi-04-night slot=\"icon\"></obi-04-night>\n          </obc-toggle-button-option>\n          <obc-toggle-button-option value=\"dusk\">\n            <obi-04-dusk slot=\"icon\"></obi-04-dusk>\n          </obc-toggle-button-option>\n          <obc-toggle-button-option value=\"day\">\n            <obi-04-day slot=\"icon\"></obi-04-day>\n          </obc-toggle-button-option>\n          <obc-toggle-button-option value=\"bright\">\n            <obi-04-day-bright slot=\"icon\"></obi-04-day-bright>\n          </obc-toggle-button-option>\n        </obc-toggle-button-group>\n        ${this.showAutoPalette\n          ? html`<obc-toggle-switch\n              label=\"Auto day - night\"\n              checked\n            ></obc-toggle-switch>`\n          : ''}\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-brilliance-menu': ObcBrillianceMenu;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA2Ba,IAAA,oBAAN,cAAgC,WAAW;AAAA,EAA3C,cAAA;AAAA,UAAA,GAAA,SAAA;AAEH,SAAA,UAAA;AACqC,SAAA,aAAA;AAElB,SAAA,qBAAA;AAEnB,SAAA,kBAAA;AAAA,EAAA;AAAA,EAEF,iBAAiB,OAAoB;AAC9B,SAAA,UAAU,MAAM,OAAO;AACvB,SAAA;AAAA,MACH,IAAI,YAAY,mBAAmB;AAAA,QACjC,QAAQ,EAAC,OAAO,MAAM,OAAO,MAAK;AAAA,MAAA,CACnC;AAAA,IAAA;AAAA,EAEL;AAAA,EAEA,oBAAoB,OAAoB;AACtC,SAAK,aAAa,MAAM;AACnB,SAAA;AAAA,MACH,IAAI,YAAY,sBAAsB;AAAA,QACpC,QAAQ,EAAC,OAAO,MAAM,OAAM;AAAA,MAAA,CAC7B;AAAA,IAAA;AAAA,EAEL;AAAA,EAES,SAAS;AACT,WAAA;AAAA;AAAA;AAAA;AAAA,kBAIO,KAAK,UAAU;AAAA,mBACd,KAAK,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAUjC,KAAK,qBACH;AAAA;AAAA,qCAGA,EAAE;AAAA;AAAA;AAAA;AAAA,kBAII,KAAK,OAAO;AAAA,mBACX,KAAK,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAe9B,KAAK,kBACH;AAAA;AAAA;AAAA,qCAIA,EAAE;AAAA;AAAA;AAAA,EAGZ;AAGF;AA9Ea,kBA6EK,SAAS,UAAU,cAAc;AA5EvB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GADb,kBACe,WAAA,WAAA,CAAA;AAEA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAHb,kBAGe,WAAA,cAAA,CAAA;AAE1B,gBAAA;AAAA,EADC,SAAS,EAAC,MAAM,SAAS,WAAW,wBAAuB;AAAA,GAJjD,kBAKX,WAAA,sBAAA,CAAA;AAC2D,gBAAA;AAAA,EAA1D,SAAS,EAAC,MAAM,SAAS,WAAW,qBAAoB;AAAA,GAN9C,kBAMgD,WAAA,mBAAA,CAAA;AANhD,oBAAN,gBAAA;AAAA,EADN,cAAc,qBAAqB;AAAA,GACvB,iBAAA;"}

package/dist/components/slider/slider.css.js

@@ -23,6 +23,7 @@ const componentStyle = css`* {
   position: relative;
 }
 
+
 .slider {
   position: absolute;
   -webkit-appearance: none;
@@ -71,6 +72,25 @@ const componentStyle = css`* {
   background: var(--selected-enabled-background-color);
 }
 
+.no-input .interactive-track {
+  width: calc(var(--ratio) * 100% + (1 - 2 * var(--ratio)) * 4px);
+}
+
+
+/* used in non-interactive mode */
+.passive-thumb {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  top: 16px;
+  left: calc(var(--ratio) * 100% - 8px + (1 - 2 * var(--ratio)) * 4px);
+  border-radius: 100%;
+  border-width: 4px;
+  border-style: solid;
+  border-color: var(--container-background-color);
+  background: var(--selected-enabled-background-color);
+}
+
 .wrapper:hover .interactive-track {
   background: var(--selected-hover-background-color);
 }

package/dist/components/slider/slider.css.js.map

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