@oicl/openbridge-webcomponents 0.0.8 → 0.0.10

package/src/automation/corner-line/corner-line.stories.ts

@@ -0,0 +1,31 @@
+import type {Meta, StoryObj} from '@storybook/web-components';
+import {ObcCornerLine} from './corner-line';
+import './corner-line';
+
+const meta: Meta<typeof ObcCornerLine> = {
+  title: 'Line/Corner line',
+  tags: ['autodocs'],
+  component: 'obc-corner-line',
+  args: {},
+  argTypes: {
+    direction: {
+      options: ['top-left', 'top-right', 'bottom-left', 'bottom-right'],
+      control: {type: 'radio'},
+    },
+    medium: {
+      options: ['normal', 'empty', 'water'],
+      control: {type: 'radio'},
+    },
+    lineType: {
+      options: ['fluid', 'electric', 'air', 'connector'],
+      control: {type: 'radio'},
+    },
+  },
+} satisfies Meta<ObcCornerLine>;
+
+export default meta;
+type Story = StoryObj<ObcCornerLine>;
+
+export const Primary: Story = {
+  args: {},
+};

package/src/automation/corner-line/corner-line.ts

@@ -0,0 +1,167 @@
+import {LitElement, html, css} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {
+  LineMedium,
+  LineMediumType,
+  lineColor,
+  LineType,
+  LineTypeType,
+  lineWidth,
+} from '../index';
+
+export 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';
+
+@customElement('obc-corner-line')
+export class ObcCornerLine extends LitElement {
+  @property({type: String}) medium: LineMediumType = LineMedium.normal;
+  @property({type: String}) direction: CornerLineDirectionType =
+    CornerLineDirection.topRight;
+  @property({type: String, attribute: 'line-type'}) lineType: LineTypeType =
+    LineType.fluid;
+
+  override render() {
+    let rotation = 270;
+    if (this.direction === CornerLineDirection.topLeft) {
+      rotation = 180;
+    } else if (this.direction === CornerLineDirection.bottomLeft) {
+      rotation = 90;
+    } else if (this.direction === CornerLineDirection.bottomRight) {
+      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 r1 = 2.5;
+      const r2 = 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 ${r1} ${r1} 0 0 1 ${r1} -${r1} h 4"
+            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>
+      `;
+    } 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>
+      `;
+    }
+  }
+
+  static override styles = css`
+    :host {
+      display: block;
+      line-height: 0;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-corner-line': ObcCornerLine;
+  }
+}

package/src/automation/horizontal-line/horizontal-line.stories.ts

@@ -0,0 +1,28 @@
+import type {Meta, StoryObj} from '@storybook/web-components';
+import {ObcHorizontalLine} from './horizontal-line';
+import './horizontal-line';
+
+const meta: Meta<typeof ObcHorizontalLine> = {
+  title: 'Line/Horizontal line',
+  tags: ['autodocs'],
+  component: 'obc-horizontal-line',
+  argTypes: {
+    medium: {
+      options: ['normal', 'empty', 'water'],
+      control: {type: 'radio'},
+    },
+    lineType: {
+      options: ['fluid', 'electric', 'air', 'connector'],
+      control: {type: 'radio'},
+    },
+  },
+} satisfies Meta<ObcHorizontalLine>;
+
+export default meta;
+type Story = StoryObj<ObcHorizontalLine>;
+
+export const Primary: Story = {
+  args: {
+    length: 3,
+  },
+};

package/src/automation/horizontal-line/horizontal-line.ts

@@ -0,0 +1,100 @@
+import {LitElement, html, css} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {
+  LineMedium,
+  LineMediumType,
+  lineColor,
+  LineType,
+  LineTypeType,
+  lineWidth,
+} from '../index';
+
+@customElement('obc-horizontal-line')
+export class ObcHorizontalLine extends LitElement {
+  @property({type: String}) medium: LineMediumType = LineMedium.normal;
+  @property({type: String, attribute: 'line-type'}) lineType: LineTypeType =
+    LineType.fluid;
+  @property({type: Number}) length: number = 1;
+
+  override render() {
+    if (this.lineType === LineType.connector) {
+      const length = this.length * 24;
+      return html`<svg
+        width="${length}"
+        height="24"
+        viewBox="0 0 ${length} 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <line
+          x1="0"
+          y1="12"
+          x2="${length}"
+          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>
+    `;
+  }
+
+  static override styles = css`
+    :host {
+      display: block;
+      line-height: 0;
+    }
+    .line {
+      position: relative;
+      left: -0.5px;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-horizontal-line': ObcHorizontalLine;
+  }
+}

package/src/automation/index.ts

@@ -0,0 +1,41 @@
+export enum LineMedium {
+  normal = 'normal',
+  empty = 'empty',
+  water = 'water',
+  air = 'air',
+}
+export type LineMediumType = keyof typeof LineMedium;
+
+export enum LineType {
+  fluid = 'fluid',
+  electric = 'electric',
+  air = 'air',
+  connector = 'connector',
+}
+export type LineTypeType = keyof typeof LineType;
+
+export function lineColor(medium: LineMediumType): {
+  inner: string;
+  outer: string;
+} {
+  let innerColor = '--automation-pipe-primary-color';
+  if (medium === LineMedium.empty) {
+    innerColor = '--automation-pipe-primary-inverted-color';
+  } else if (medium === LineMedium.water || medium === LineMedium.air) {
+    innerColor = '--automation-fresh-water';
+  }
+  return {inner: innerColor, outer: '--automation-pipe-tertiary-color'};
+}
+
+export function lineWidth(lineType: LineTypeType): number {
+  if (lineType === LineType.electric) {
+    return 2;
+  } else if (lineType === LineType.connector) {
+    return 1;
+  } else if (lineType === LineType.fluid) {
+    return 4;
+  } else if (lineType === LineType.air) {
+    return 10;
+  }
+  throw new Error('Unknown line type');
+}

package/src/automation/line.stories.ts

@@ -0,0 +1,142 @@
+import type {Meta, StoryObj} from '@storybook/web-components';
+import {ObcVerticalLine} from './vertical-line';
+import './vertical-line/vertical-line';
+import './horizontal-line/horizontal-line';
+import './corner-line/corner-line';
+import {LineMedium, LineType} from './index';
+import {html} from 'lit';
+
+const meta: Meta = {
+  title: 'Line/Example',
+  tags: ['autodocs'],
+  argTypes: {
+    medium: {
+      options: ['normal', 'empty', 'water', 'air'],
+      control: {type: 'radio'},
+    },
+    lineType: {
+      options: ['fluid', 'electric', 'air', 'connector'],
+      control: {type: 'radio'},
+    },
+  },
+  render: (args) => {
+    return html`
+      <style>
+        .canvas {
+          position: relative;
+          width: 400px;
+          height: 400px;
+        }
+
+        #line1 {
+          position: absolute;
+          top: calc(24px * 1);
+          left: calc(24px * 0);
+        }
+
+        #corner-1-2 {
+          position: absolute;
+          top: calc(24px * 0);
+          left: calc(24px * 0);
+        }
+
+        #line2 {
+          position: absolute;
+          top: calc(24px * 0);
+          left: calc(24px * 1);
+        }
+        #corner-2-3 {
+          position: absolute;
+          top: calc(24px * 0);
+          left: calc(24px * 6);
+        }
+
+        #line3 {
+          position: absolute;
+          top: calc(24px * 1);
+          left: calc(24px * 6);
+        }
+      </style>
+      <div class="canvas">
+        <obc-vertical-line
+          medium=${args.medium}
+          line-type=${args.lineType}
+          length="5"
+          id="line1"
+        ></obc-vertical-line>
+        <obc-corner-line
+          medium=${args.medium}
+          line-type=${args.lineType}
+          direction="bottom-right"
+          id="corner-1-2"
+        ></obc-corner-line>
+        <obc-horizontal-line
+          medium=${args.medium}
+          line-type=${args.lineType}
+          length="5"
+          id="line2"
+        ></obc-horizontal-line>
+        <obc-corner-line
+          medium=${args.medium}
+          line-type=${args.lineType}
+          direction="bottom-left"
+          id="corner-2-3"
+        ></obc-corner-line>
+        <obc-vertical-line
+          medium=${args.medium}
+          line-type=${args.lineType}
+          length="2"
+          id="line3"
+        ></obc-vertical-line>
+      </div>
+    `;
+  },
+} satisfies Meta<ObcVerticalLine>;
+
+export default meta;
+type Story = StoryObj<ObcVerticalLine>;
+
+export const Fluid: Story = {
+  args: {
+    medium: LineMedium.water,
+    lineType: LineType.fluid,
+  },
+  argTypes: {
+    medium: {
+      options: ['normal', 'empty', 'water'],
+      control: {type: 'radio'},
+    },
+  },
+};
+
+export const Electric: Story = {
+  args: {
+    medium: LineMedium.normal,
+    lineType: LineType.electric,
+  },
+  medium: {
+    options: ['normal', 'empty'],
+    control: {type: 'radio'},
+  },
+};
+
+export const Air: Story = {
+  args: {
+    medium: LineMedium.air,
+    lineType: LineType.air,
+  },
+  argTypes: {
+    medium: {
+      options: ['normal', 'empty', 'air'],
+      control: {type: 'radio'},
+    },
+  },
+};
+
+export const Connector: Story = {
+  args: {
+    medium: LineMedium.normal,
+    lineType: LineType.connector,
+  },
+  argTypes: {},
+};

package/src/automation/vertical-line/vertical-line.stories.ts

@@ -0,0 +1,71 @@
+import type {Meta, StoryObj} from '@storybook/web-components';
+import {ObcVerticalLine} from './vertical-line';
+import './vertical-line';
+import '../horizontal-line/horizontal-line';
+import {html} from 'lit';
+
+const meta: Meta<typeof ObcVerticalLine> = {
+  title: 'Line/Vertical line',
+  tags: ['autodocs'],
+  component: 'obc-vertical-line',
+  argTypes: {
+    medium: {
+      options: ['normal', 'empty', 'water'],
+      control: {type: 'radio'},
+    },
+  },
+} satisfies Meta<ObcVerticalLine>;
+
+export default meta;
+type Story = StoryObj<ObcVerticalLine>;
+
+export const Primary: Story = {
+  args: {
+    length: 3,
+  },
+  argTypes: {
+    medium: {
+      options: ['normal', 'empty', 'water'],
+      control: {type: 'radio'},
+    },
+    lineType: {
+      options: ['fluid', 'electric', 'air', 'connector'],
+      control: {type: 'radio'},
+    },
+  },
+};
+
+export const Complex: Story = {
+  render: () => {
+    return html`
+      <style>
+        .canvas {
+          position: relative;
+          width: 400px;
+          height: 400px;
+        }
+
+        #line1 {
+          position: absolute;
+          top: 24px;
+        }
+
+        #line2 {
+          position: absolute;
+          top: calc(24px * 3);
+          left: calc(24px * 5);
+        }
+        #line3 {
+          position: absolute;
+          top: calc(24px * 3);
+          left: calc(24px * 5);
+        }
+      </style>
+      <div class="canvas">
+        <obc-vertical-line length="5" id="line1"></obc-vertical-line>
+        <obc-vertical-line length="2" id="line2"></obc-vertical-line>
+        <obc-horizontal-line length="5" id="line3"></obc-horizontal-line>
+      </div>
+    `;
+  },
+};

package/src/automation/vertical-line/vertical-line.ts

@@ -0,0 +1,104 @@
+import {LitElement, html, css} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {
+  LineMedium,
+  LineMediumType,
+  lineColor,
+  LineType,
+  LineTypeType,
+  lineWidth,
+} from '../index';
+
+/* Vertical line component
+ *
+ * The vertical line is 24px * length + 1px. +1 px to make sure that connecting lines are overlapping, to hide the gap between them.
+ */
+@customElement('obc-vertical-line')
+export class ObcVerticalLine extends LitElement {
+  @property({type: String}) medium: LineMediumType = LineMedium.normal;
+  @property({type: String, attribute: 'line-type'}) lineType: LineTypeType =
+    LineType.fluid;
+  @property({type: Number}) length: number = 1;
+
+  override render() {
+    if (this.lineType === LineType.connector) {
+      const length = this.length * 24;
+      return html`<svg
+        width="24"
+        height="${length}"
+        viewBox="0 0 24 ${length}"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <line
+          y1="0"
+          x1="12"
+          y2="${length}"
+          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>
+    `;
+  }
+
+  static override styles = css`
+    :host {
+      display: block;
+      line-height: 0;
+    }
+
+    .line {
+      position: relative;
+      top: -0.5px;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-vertical-line': ObcVerticalLine;
+  }
+}

package/src/components/brilliance-menu/brilliance-menu.ts

@@ -62,6 +62,8 @@ export class ObcBrillianceMenu 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>