@oicl/openbridge-webcomponents 0.0.12 → 0.0.14

package/src/automation/three-way-line/three-way-line.ts

@@ -0,0 +1,119 @@
+import {LitElement, css, html} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {LineMedium, LineType, lineColor, lineWidth} from '..';
+
+export enum ThreeWayLineDirection {
+  top = 'top',
+  right = 'right',
+  bottom = 'bottom',
+  left = 'left',
+}
+
+@customElement('obc-three-way-line')
+export class ObcThreeWayLine extends LitElement {
+  @property({type: String}) medium: LineMedium = LineMedium.normal;
+  @property({type: String}) direction: ThreeWayLineDirection =
+    ThreeWayLineDirection.top;
+  @property({type: String}) lineType: LineType = LineType.fluid;
+
+  override render() {
+    let rotation = 0;
+    if (this.direction === ThreeWayLineDirection.top) {
+      rotation = 180;
+    } else if (this.direction === ThreeWayLineDirection.right) {
+      rotation = 270;
+    } else if (this.direction === ThreeWayLineDirection.bottom) {
+      rotation = 0;
+    } else if (this.direction === ThreeWayLineDirection.left) {
+      rotation = 90;
+    }
+
+    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="M10 11.5H14V12.5L10 12.5V11.5Z"
+            fill="var(--element-neutral-color)"
+          />
+          <path
+            d="M4 11.5H8V12.5L4 12.5V11.5Z"
+            fill="var(--element-neutral-color)"
+          />
+          <path
+            d="M0 11.5H2L2 12.5L0 12.5V11.5Z"
+            fill="var(--element-neutral-color)"
+          />
+          <path
+            d="M22 11.5L24 11.5V12.5L22 12.5V11.5Z"
+            fill="var(--element-neutral-color)"
+          />
+          <path
+            d="M16 11.5H20V12.5L16 12.5V11.5Z"
+            fill="var(--element-neutral-color)"
+          />
+          <path
+            d="M12.5 24V22.1667H11.5V24H12.5Z"
+            fill="var(--element-neutral-color)"
+          />
+          <path
+            d="M12.5 20.3333L12.5 16.6667H11.5L11.5 20.3333H12.5Z"
+            fill="var(--element-neutral-color)"
+          />
+          <path
+            d="M12.5 14.8333V13L11.5 13V14.8333H12.5Z"
+            fill="var(--element-neutral-color)"
+          />
+        </svg>
+      `;
+    }
+
+    const color = lineColor(this.medium);
+    const width = lineWidth(this.lineType) + 1;
+    const h = width / 2;
+    const c = 13 - h; // inner corner lenght
+
+    return html`
+      <svg
+        class="line"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        transform="rotate(${rotation})"
+      >
+        <path
+          d="M-1 ${12 + h} v${-width}h26v${width}h-${c}v${c}h-${width}v-${c}Z"
+          fill="var(${color.inner})"
+          stroke="var(${color.outer})"
+        />
+      </svg>
+    `;
+  }
+
+  static override styles = css`
+    :host {
+      display: block;
+      line-height: 0;
+    }
+
+    svg {
+      position: relative;
+      top: -12px;
+      left: -12px;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-three-way-line': ObcThreeWayLine;
+  }
+}

package/src/automation/valve-analog-three-way-icon/valve-analog-three-way-icon.css

@@ -0,0 +1,14 @@
+:host {
+    display: block;
+}
+
+.wrapper {
+    height: 100%;
+    width: 100%;
+    line-height: 0;
+}
+
+.wrapper>* {
+    height: 100%;
+    width: 100%;
+}

package/src/automation/valve-analog-three-way-icon/valve-analog-three-way-icon.stories.ts

@@ -0,0 +1,69 @@
+import type {Meta, StoryObj} from '@storybook/web-components';
+import {ObcValveAnalogThreeWayIcon} from './valve-analog-three-way-icon';
+import './valve-analog-three-way-icon';
+
+const meta: Meta<typeof ObcValveAnalogThreeWayIcon> = {
+  title: 'Automation/Icon/Valve analog three way',
+  tags: ['autodocs'],
+  component: 'obc-valve-analog-three-way-icon',
+  args: {
+    horisontal: false,
+  },
+  argTypes: {
+    horisontal: {
+      control: {type: 'boolean'},
+    },
+  },
+} satisfies Meta<ObcValveAnalogThreeWayIcon>;
+
+export default meta;
+type Story = StoryObj<ObcValveAnalogThreeWayIcon>;
+
+export const Open: Story = {
+  args: {
+    value: 100,
+    value2: 0,
+    closed: false,
+  },
+};
+
+export const Closed: Story = {
+  args: {
+    value: 0,
+    value2: 0,
+    closed: true,
+  },
+};
+
+export const HalfOpen: Story = {
+  args: {
+    value: 50,
+    value2: 50,
+    closed: false,
+  },
+};
+
+export const OnePartOpen: Story = {
+  args: {
+    value: 50,
+    value2: 0,
+    closed: false,
+  },
+};
+
+export const OnePartOpenHorizontal: Story = {
+  args: {
+    value: 50,
+    value2: 0,
+    closed: false,
+    horisontal: true,
+  },
+};
+
+export const NearClosed: Story = {
+  args: {
+    value: 0,
+    value2: 100,
+    closed: false,
+  },
+};

package/src/automation/valve-analog-three-way-icon/valve-analog-three-way-icon.ts

@@ -0,0 +1,148 @@
+import {LitElement, html, svg, unsafeCSS} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import compentStyle from './valve-analog-three-way-icon.css?inline';
+
+@customElement('obc-valve-analog-three-way-icon')
+export class ObcValveAnalogThreeWayIcon extends LitElement {
+  @property({type: Number}) value: number = 0;
+  @property({type: Number}) value2: number = 0;
+  @property({type: Boolean}) closed: boolean = false;
+  @property({type: Boolean}) horisontal: boolean = false;
+
+  override render() {
+    if (this.closed) {
+      return html` <div class="wrapper">
+        <svg
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M2.72361 6.3618C2.39116 6.19558 2 6.43733 2 6.80902V17.191C2 17.5627 2.39116 17.8044 2.72361 17.6382L9 14.5V9.5L2.72361 6.3618ZM9.5 9H14.5L17.6382 2.72361C17.8044 2.39116 17.5627 2 17.191 2H6.80902C6.43733 2 6.19558 2.39116 6.3618 2.72361L9.5 9ZM13.882 8L16.382 3H7.61803L10.118 8H13.882ZM15 14.5L21.2764 17.6382C21.6088 17.8044 22 17.5627 22 17.191V6.80902C22 6.43733 21.6088 6.19558 21.2764 6.3618L15 9.5V14.5ZM16 10.118V13.882L21 16.382V7.61803L16 10.118ZM8 10.118L3 7.61803V16.382L8 13.882V10.118ZM12 11C11.4477 11 11 11.4477 11 12V20C11 20.5523 11.4477 21 12 21C12.5523 21 13 20.5523 13 20V12C13 11.4477 12.5523 11 12 11Z"
+            fill="var(--automation-device-tertiary-inverted-color)"
+          />
+          <path
+            d="M16.382 3L13.882 8H10.118L7.61803 3H16.382Z"
+            fill="var(--automation-device-primary-inverted-color"
+          />
+          <path
+            d="M16 13.882V10.118L21 7.61803V16.382L16 13.882Z"
+            fill="var(--automation-device-primary-inverted-color"
+          />
+          <path
+            d="M3 7.61803L8 10.118V13.882L3 16.382V7.61803Z"
+            fill="var(--automation-device-primary-inverted-color"
+          />
+        </svg>
+      </div>`;
+    }
+
+    const valueRotation = 0.5 * this.value - 0.5 * this.value2 + 50;
+
+    const handleRotation =
+      -(1 - valueRotation / 100) * (this.horisontal ? 180 : 90);
+    const handle = svg`
+      <g transform="rotate(${handleRotation} 12 18.5)">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M9.49942 20.1303H14.4994C15.3278 20.1303 15.9994 19.4587 15.9994 18.6303C15.9994 17.8019 15.3278 17.1303 14.4994 17.1303H9.49942C8.67099 17.1303 7.99942 17.8019 7.99942 18.6303C7.99942 19.4587 8.67099 20.1303 9.49942 20.1303ZM9.49942 19.1303L14.4994 19.1303C14.7756 19.1303 14.9994 18.9064 14.9994 18.6303C14.9994 18.3542 14.7756 18.1303 14.4994 18.1303L9.49942 18.1303C9.22328 18.1303 8.99942 18.3542 8.99942 18.6303C8.99942 18.9064 9.22328 19.1303 9.49942 19.1303Z" fill="var(--automation-device-tertiary-color)"/>
+        <path d="M14.4994 19.1303L9.49942 19.1303C9.22328 19.1303 8.99942 18.9064 8.99942 18.6303C8.99942 18.3542 9.22328 18.1303 9.49942 18.1303L14.4994 18.1303C14.7756 18.1303 14.9994 18.3542 14.9994 18.6303C14.9994 18.9064 14.7756 19.1303 14.4994 19.1303Z" fill="var(--automation-device-primary-color)"/>
+      </g>
+    `;
+
+    const xmin = 10.5;
+    const xmax = 2.5;
+
+    const x =
+      xmin +
+      ((xmax - xmin) * (this.horisontal ? this.value2 : this.value)) / 100;
+
+    const ymin = 10.5;
+    const ymax = 2.5;
+
+    const y =
+      ymin +
+      ((ymax - ymin) * (this.horisontal ? this.value : this.value2)) / 100;
+
+    return html`
+      <div class="wrapper">
+        <div class="wrapper">
+          <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M6.80902 2H17.191C17.5627 2 17.8044 2.39116 17.6382 2.72361L14 10L21.2764 6.3618C21.6088 6.19558 22 6.43733 22 6.80902V17.191C22 17.5627 21.6088 17.8044 21.2764 17.6382L17.6382 15.8191L14 14H10L2.72361 17.6382C2.39116 17.8044 2 17.5627 2 17.191V6.80902C2 6.43733 2.39116 6.19558 2.72361 6.3618L10 10L6.3618 2.72361C6.19558 2.39116 6.43733 2 6.80902 2Z"
+              fill="black"
+            />
+            <path
+              d="M13 9.76224L16.3811 3H7.61719L11 9.76562V11H9.76416L3 7.61792V16.3819L9.7637 13H14.2363L21 16.3819V7.61792L14.2358 11H13V9.76224Z"
+              fill="var(--automation-device-primary-color)"
+            />
+            ${handle}
+            <g clip-path="url(#clip0)">
+              <rect
+                x=${24 - x}
+                y="0"
+                width=${x - xmax}
+                height="24"
+                fill="var(--automation-device-secondary-color)"
+              />
+              <line
+                x1=${24 - x}
+                y1="0"
+                x2=${24 - x}
+                y2="24"
+                stroke="var(--automation-device-tertiary-color)"
+                stroke-width="1"
+              />
+            </g>
+            ${this.horisontal
+              ? svg`
+        <g clip-path="url(#clip2)">
+          <rect y="0" x=${ymax} height="24" width=${y - ymax} fill="var(--automation-device-secondary-color)"/>
+          <line y1="0" x1=${y} y2="24" x2=${y} stroke="var(--automation-device-tertiary-color)" stroke-width="1"/>
+        </g>
+          `
+              : svg`
+        <g clip-path="url(#clip1)">
+          <rect x="0" y=${ymax} width="24" height=${y - ymax} fill="var(--automation-device-secondary-color)"/>
+          <line x1="0" y1=${y} x2="24" y2=${y} stroke="var(--automation-device-tertiary-color)" stroke-width="1"/>
+        </g>
+        `}
+            <defs>
+              <clipPath id="clip0">
+                <path
+                  d="M 13 11 L 13 13 H 14.2363 L 21 16.3819 V 7.6179 L 14.2358 11 Z"
+                />
+              </clipPath>
+              <clipPath id="clip1">
+                <path
+                  d="M 13 9.7622 L 16.3811 3 H 7.6172 L 11 9.7656 L 11 13 H 13 V 9.7622 Z"
+                />
+              </clipPath>
+              <clipPath id="clip2">
+                <path
+                  d="M 11 11 V 11 H 9.7642 L 3 7.6179 V 16.3819 L 9.7637 13 H 14.2363 L 14.2358 11 Z"
+                />
+              </clipPath>
+            </defs>
+          </svg>
+        </div>
+      </div>
+    `;
+  }
+
+  static override styles = unsafeCSS(compentStyle);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-valve-analog-three-way-icon': ObcValveAnalogThreeWayIcon;
+  }
+}

package/src/automation/valve-analoge-two-way-icon/valve-analog-two-way-icon.css

@@ -0,0 +1,11 @@
+
+.wrapper {
+    height: 100%;
+    width: 100%;
+    line-height: 0;
+}
+
+.wrapper>* {
+    height: 100%;
+    width: 100%;
+}

package/src/automation/valve-analoge-two-way-icon/valve-analog-two-way-icon.stories.ts

@@ -0,0 +1,41 @@
+import type {Meta, StoryObj} from '@storybook/web-components';
+import {ObcValveAnalogTwoWayIcon} from './valve-analog-two-way-icon';
+import './valve-analog-two-way-icon';
+
+const meta: Meta<typeof ObcValveAnalogTwoWayIcon> = {
+  title: 'Automation/Icon/Valve analog two way',
+  tags: ['autodocs'],
+  component: 'obc-valve-analog-two-way-icon',
+  args: {},
+} satisfies Meta<ObcValveAnalogTwoWayIcon>;
+
+export default meta;
+type Story = StoryObj<ObcValveAnalogTwoWayIcon>;
+
+export const Open: Story = {
+  args: {
+    value: 100,
+    closed: false,
+  },
+};
+
+export const Closed: Story = {
+  args: {
+    value: 0,
+    closed: true,
+  },
+};
+
+export const HalfOpen: Story = {
+  args: {
+    value: 50,
+    closed: false,
+  },
+};
+
+export const NearClosed: Story = {
+  args: {
+    value: 0,
+    closed: false,
+  },
+};

package/src/automation/valve-analoge-two-way-icon/valve-analog-two-way-icon.ts

@@ -0,0 +1,120 @@
+import {LitElement, html, svg, unsafeCSS} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import compentStyle from './valve-analog-two-way-icon.css?inline';
+
+@customElement('obc-valve-analog-two-way-icon')
+export class ObcValveAnalogTwoWayIcon extends LitElement {
+  @property({type: Number}) value: number = 0;
+  @property({type: Boolean}) closed: boolean = false;
+
+  override render() {
+    if (this.closed) {
+      return html` <div class="wrapper">
+        <svg
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M3 16.8892L10 12.8059V10.4546L3 6.37127V16.8892ZM11 9.88024V13.3802L2.75194 18.1916C2.41861 18.386 2 18.1456 2 17.7597V5.50075C2 5.11486 2.41861 4.87442 2.75193 5.06886L11 9.88024ZM21 16.8892V6.37127L14 10.4546V12.8059L21 16.8892ZM13 13.3802L21.2481 18.1916C21.5814 18.386 22 18.1456 22 17.7597V5.50075C22 5.11486 21.5814 4.87442 21.2481 5.06886L13 9.88024V13.3802ZM12 22.6301C11.4477 22.6301 11 22.1824 11 21.6301V15.6301C11 15.0778 11.4477 14.6301 12 14.6301C12.5523 14.6301 13 15.0778 13 15.6301V21.6301C13 22.1824 12.5523 22.6301 12 22.6301Z"
+            fill="var(--automation-device-secondary-color)"
+          />
+          <path
+            d="M10 12.8059L3 16.8892V6.37127L10 10.4546V12.8059Z"
+            fill="var(--automation-device-tertiary-color)"
+          />
+          <path
+            d="M21 6.37127V16.8892L14 12.8059V10.4546L21 6.37127Z"
+            fill="var(--automation-device-tertiary-color)"
+          />
+        </svg>
+      </div>`;
+    }
+
+    const handleRotation = -(1 - this.value / 100) * 90;
+    const handle = svg`
+      <g transform="rotate(${handleRotation} 12 18.5)">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M9.49942 20.1303H14.4994C15.3278 20.1303 15.9994 19.4587 15.9994 18.6303C15.9994 17.8019 15.3278 17.1303 14.4994 17.1303H9.49942C8.67099 17.1303 7.99942 17.8019 7.99942 18.6303C7.99942 19.4587 8.67099 20.1303 9.49942 20.1303ZM9.49942 19.1303L14.4994 19.1303C14.7756 19.1303 14.9994 18.9064 14.9994 18.6303C14.9994 18.3542 14.7756 18.1303 14.4994 18.1303L9.49942 18.1303C9.22328 18.1303 8.99942 18.3542 8.99942 18.6303C8.99942 18.9064 9.22328 19.1303 9.49942 19.1303Z" fill="var(--automation-device-tertiary-color)"/>
+        <path d="M14.4994 19.1303L9.49942 19.1303C9.22328 19.1303 8.99942 18.9064 8.99942 18.6303C8.99942 18.3542 9.22328 18.1303 9.49942 18.1303L14.4994 18.1303C14.7756 18.1303 14.9994 18.3542 14.9994 18.6303C14.9994 18.9064 14.7756 19.1303 14.4994 19.1303Z" fill="var(--automation-device-primary-color)"/>
+      </g>
+    `;
+
+    const xmin = 10.5;
+    const xmax = 2.5;
+    const x = xmin + ((xmax - xmin) * this.value) / 100;
+
+    return html`
+      <div class="wrapper">
+        <svg
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M2 5.50075V17.7597C2 18.1456 2.41861 18.386 2.75194 18.1916L10.5714 13.6302H13.4286L21.2481 18.1916C21.5814 18.386 22 18.1456 22 17.7597V5.50075C22 5.11486 21.5814 4.87442 21.2481 5.06886L13.4286 9.63024H10.5714L2.75193 5.06886C2.41861 4.87442 2 5.11486 2 5.50075Z"
+            fill="var(--automation-device-tertiary-color)"
+          />
+          <path
+            d="M3 6.3712V16.8891L10.3011 12.6302H13.6989L21 16.8891V6.3712L13.6989 10.6302H10.3011L3 6.3712Z"
+            fill="var(--automation-device-primary-color)"
+          />
+          ${handle}
+          <g clip-path="url(#clip0)">
+            <rect
+              x=${xmax}
+              y="0"
+              width=${x - xmax}
+              height="24"
+              fill="var(--automation-device-secondary-color)"
+            />
+            <line
+              x1=${x}
+              y1="0"
+              x2=${x}
+              y2="24"
+              stroke="var(--automation-device-tertiary-color)"
+              stroke-width="1"
+            />
+
+            <rect
+              x=${24 - x}
+              y="0"
+              width=${x - xmax}
+              height="24"
+              fill="var(--automation-device-secondary-color)"
+            />
+            <line
+              x1=${24 - x}
+              y1="0"
+              x2=${24 - x}
+              y2="24"
+              stroke="var(--automation-device-tertiary-color)"
+              stroke-width="1"
+            />
+          </g>
+          <defs>
+            <clipPath id="clip0">
+              <path
+                d="M3 6.3712V16.8891L10.3011 12.6302H13.6989L21 16.8891V6.3712L13.6989 10.6302H10.3011L3 6.3712Z"
+              />
+            </clipPath>
+          </defs>
+        </svg>
+      </div>
+    `;
+  }
+
+  static override styles = unsafeCSS(compentStyle);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-valve-analog-two-way-icon': ObcValveAnalogTwoWayIcon;
+  }
+}

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

@@ -2,7 +2,7 @@ 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';
+import {crossDecorator} from '../../storybook-util';
 
 const meta: Meta<typeof ObcVerticalLine> = {
   title: 'Line/Vertical line',
@@ -14,6 +14,7 @@ const meta: Meta<typeof ObcVerticalLine> = {
       control: {type: 'radio'},
     },
   },
+  decorators: [crossDecorator],
 } satisfies Meta<ObcVerticalLine>;
 
 export default meta;
@@ -34,38 +35,3 @@ export const Primary: Story = {
     },
   },
 };
-
-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

@@ -1,13 +1,6 @@
 import {LitElement, html, css} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
-import {
-  LineMedium,
-  LineMediumType,
-  lineColor,
-  LineType,
-  LineTypeType,
-  lineWidth,
-} from '../index';
+import {LineMedium, lineColor, LineType, lineWidth} from '../index';
 
 /* Vertical line component
  *
@@ -15,9 +8,8 @@ import {
  */
 @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: String}) medium: LineMedium = LineMedium.normal;
+  @property({type: String}) lineType: LineType = LineType.fluid;
   @property({type: Number}) length: number = 1;
 
   override render() {
@@ -90,9 +82,10 @@ export class ObcVerticalLine extends LitElement {
       line-height: 0;
     }
 
-    .line {
+    svg {
       position: relative;
       top: -0.5px;
+      left: -12px;
     }
   `;
 }