@oicl/openbridge-webcomponents 0.0.12 → 0.0.13

package/src/automation/automation-readout/automation-readout.stories.ts

@@ -0,0 +1,201 @@
+import type {Meta, StoryObj} from '@storybook/web-components';
+import {ObcAutomationReadout} from './automation-readout';
+import './automation-readout';
+import {AutomationReadoutPosition} from './automation-readout';
+import '../horizontal-line/horizontal-line';
+import '../vertical-line/vertical-line';
+import {LineMedium, LineType} from '../index';
+import {html} from 'lit';
+
+const meta: Meta<typeof ObcAutomationReadout> = {
+  title: 'Automation/Readout',
+  tags: ['autodocs'],
+  component: 'obc-automation-readout',
+  args: {
+    value: 25,
+    unit: '°C',
+    numberOfDigits: 3,
+    lineType: LineType.fluid,
+  },
+  argTypes: {
+    value: {
+      control: {
+        type: 'range',
+        min: -99,
+        max: 999,
+      },
+    },
+    lineType: {
+      options: [
+        LineType.air,
+        LineType.connector,
+        LineType.electric,
+        LineType.fluid,
+      ],
+      control: {type: 'radio'},
+    },
+  },
+} satisfies Meta<ObcAutomationReadout>;
+
+export default meta;
+type Story = StoryObj<ObcAutomationReadout>;
+
+export const UsageWithPipeBottom: Story = {
+  render: (args) => html`
+    <style>
+      .canvas {
+        position: relative;
+        width: 400px;
+        height: 400px;
+      }
+
+      #line-bottom {
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+
+      #readout-bottom {
+        position: absolute;
+        top: 12px; /* 12px is the height of the grid size */
+        left: calc(2.5 * 24px); /* 5 is the length of the line */
+      }
+    </style>
+    <div class="canvas">
+      <obc-automation-readout
+        .value=${args.value}
+        .unit=${args.unit}
+        .numberOfDigits=${args.numberOfDigits}
+        .position=${AutomationReadoutPosition.Bottom}
+        .lineType=${args.lineType}
+        id="readout-bottom"
+      ></obc-automation-readout>
+      <obc-horizontal-line
+        .medium=${LineMedium.water}
+        .lineType=${args.lineType || LineType.fluid}
+        length="5"
+        id="line-bottom"
+      ></obc-horizontal-line>
+    </div>
+  `,
+};
+
+export const UsageWithPipeTop: Story = {
+  render: (args) => html`
+    <style>
+      .canvas {
+        position: relative;
+        width: 400px;
+        height: 400px;
+      }
+
+      #line-top {
+        position: absolute;
+        top: 24px;
+        left: 0;
+      }
+
+      #readout-top {
+        position: absolute;
+        top: 36px; /* 12px is the height of the grid size */
+        left: calc(2.5 * 24px); /* 5 is the length of the line */
+      }
+    </style>
+    <div class="canvas">
+      <obc-automation-readout
+        .value=${args.value}
+        .unit=${args.unit}
+        .numberOfDigits=${args.numberOfDigits}
+        .position=${AutomationReadoutPosition.Top}
+        .lineType=${args.lineType}
+        id="readout-top"
+      ></obc-automation-readout>
+      <obc-horizontal-line
+        .medium=${LineMedium.water}
+        .lineType=${args.lineType || LineType.fluid}
+        length="5"
+        id="line-top"
+      ></obc-horizontal-line>
+    </div>
+  `,
+};
+
+export const UsageWithPipeLeft: Story = {
+  render: (args) => html`
+    <style>
+      .canvas {
+        position: relative;
+        width: 400px;
+        height: 400px;
+      }
+
+      #line-left {
+        position: absolute;
+        top: 0;
+        left: calc(24px * 3);
+      }
+
+      #readout-left {
+        position: absolute;
+        top: calc(2.5 * 24px); /* 24px is the height of the grid size */
+        left: calc(24px * 3 + 12px);
+      }
+    </style>
+    <div class="canvas">
+      <obc-automation-readout
+        .value=${args.value}
+        .unit=${args.unit}
+        .numberOfDigits=${args.numberOfDigits}
+        .position=${AutomationReadoutPosition.Left}
+        .lineType=${args.lineType}
+        id="readout-left"
+      ></obc-automation-readout>
+      <obc-vertical-line
+        .medium=${LineMedium.water}
+        .lineType=${args.lineType || LineType.fluid}
+        length="5"
+        id="line-left"
+      ></obc-vertical-line>
+    </div>
+  `,
+};
+
+export const UsageWithPipeRight: Story = {
+  render: (args) => html`
+    <style>
+      .canvas {
+        position: relative;
+        width: 400px;
+        height: 400px;
+      }
+
+      #line-right {
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+
+      #readout-right {
+        position: absolute;
+        top: calc(2.5 * 24px); /* 24px is the height of the grid size */
+        left: 12px;
+      }
+    </style>
+    <div class="canvas">
+      <obc-automation-readout
+        .value=${args.value}
+        .unit=${args.unit}
+        .numberOfDigits=${args.numberOfDigits}
+        .position=${AutomationReadoutPosition.Right}
+        .lineType=${args.lineType}
+        id="readout-right"
+      ></obc-automation-readout>
+      <obc-vertical-line
+        .medium=${LineMedium.water}
+        .lineType=${args.lineType || LineType.fluid}
+        length="5"
+        id="line-right"
+      ></obc-vertical-line>
+    </div>
+  `,
+};

package/src/automation/automation-readout/automation-readout.ts

@@ -0,0 +1,61 @@
+import {LitElement, html, unsafeCSS} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import compentStyle from './automation-readout.css?inline';
+import {classMap} from 'lit/directives/class-map.js';
+import {LineType, lineWidth} from '..';
+
+export enum AutomationReadoutPosition {
+  Left = 'left',
+  Right = 'right',
+  Top = 'top',
+  Bottom = 'bottom',
+}
+
+@customElement('obc-automation-readout')
+export class ObcAutomationReadout extends LitElement {
+  @property({type: Number}) value = 0;
+  @property({type: String}) unit = '';
+  @property({type: Number}) numberOfDigits = 3;
+  @property({type: String}) position: AutomationReadoutPosition =
+    AutomationReadoutPosition.Bottom;
+  @property({type: String}) lineType: LineType | undefined = undefined;
+
+  override 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(): number {
+    if (this.lineType === undefined) {
+      return 0;
+    }
+    return lineWidth(this.lineType);
+  }
+
+  static override styles = unsafeCSS(compentStyle);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-automation-readout': ObcAutomationReadout;
+  }
+}

package/src/automation/automation-tank/automation-tank.css

@@ -0,0 +1,121 @@
+* {
+    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 {
+    @mixin style style=normal;
+    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;
+}
+
+.compact {
+
+    .content {
+        display: none;
+    }
+
+    .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);
+
+    .percent {
+        @mixin font-instrument-value-enhanced;
+    }
+
+    .percent-symbol {
+        @mixin font-body;
+    }
+}
+
+.value {
+    display: flex;
+    align-items: baseline;
+    justify-content: flex-end;
+    padding-top: 4px;
+
+    @mixin font-label;
+
+    .current-value {
+        @mixin font-instrument-value-s;
+    }
+
+    .divider {
+        padding-left: 4px;
+        padding-right: 4px;
+    }
+
+    .max-value {
+        @mixin font-body;
+    }
+}
+
+.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 {
+    @mixin font-label;
+    color: var(--element-neutral-color);
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}

package/src/automation/automation-tank/automation-tank.stories.ts

@@ -0,0 +1,71 @@
+import type {Meta, StoryObj} from '@storybook/web-components';
+import {ObcAutomationTank, TankTrend, TankVariant} from './automation-tank';
+import './automation-tank';
+import '../../components/badge/badge';
+import '../../icons/icon-08-auto';
+import '../../icons/icon-16-lock';
+import {html} from 'lit';
+
+const meta: Meta<typeof ObcAutomationTank> = {
+  title: 'Automation/Tank',
+  tags: ['autodocs'],
+  component: 'obc-automation-tank',
+  args: {
+    value: 9_000,
+    max: 10_000,
+    trend: TankTrend.fastFalling,
+    tag: '#0000',
+  },
+  argTypes: {
+    trend: {
+      options: Object.values(TankTrend),
+      control: {type: 'radio'},
+    },
+    value: {
+      control: {type: 'range', min: 0, max: 10_000},
+    },
+    variant: {
+      options: Object.values(TankVariant),
+      control: {type: 'radio'},
+    },
+  },
+  decorators: [
+    (story) =>
+      html`<div
+        style="display: flex; justify-content: center; align-items: center; height: 100vh"
+      >
+        ${story()}
+      </div>`,
+  ],
+} satisfies Meta<ObcAutomationTank>;
+
+export default meta;
+type Story = StoryObj<ObcAutomationTank>;
+
+export const Vertical: Story = {
+  args: {},
+};
+
+export const VerticalWithBadges: Story = {
+  render(args) {
+    return html`<obc-automation-tank
+      .value=${args.value}
+      .max=${args.max}
+      .trend=${args.trend}
+      .tag=${args.tag}
+    >
+      <obc-badge slot="badges" size="regular" hide-number type="automation">
+        <obi-08-auto></obi-08-auto>
+      </obc-badge>
+      <obc-badge slot="badges" size="regular" hide-number type="automation">
+        <obi-16-lock></obi-16-lock>
+      </obc-badge>
+    </obc-automation-tank>`;
+  },
+};
+
+export const Compact: Story = {
+  args: {
+    variant: TankVariant.compact,
+  },
+};

package/src/automation/automation-tank/automation-tank.ts

@@ -0,0 +1,108 @@
+import {HTMLTemplateResult, LitElement, html, unsafeCSS} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import compentStyle from './automation-tank.css?inline';
+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';
+import {classMap} from 'lit/directives/class-map.js';
+
+export enum TankTrend {
+  fastRising = 'fast-rising',
+  rising = 'rising',
+  stable = 'stable',
+  falling = 'falling',
+  fastFalling = 'fast-falling',
+}
+
+export enum TankVariant {
+  vertical = 'vertical',
+  compact = 'compact',
+}
+
+@customElement('obc-automation-tank')
+export class ObcAutomationTank extends LitElement {
+  @property({type: String}) medium: LineMedium = LineMedium.water;
+  @property({type: Number}) value: number = 0;
+  @property({type: Number}) max: number = 100;
+  @property({type: String}) trend: TankTrend = TankTrend.stable;
+  @property({type: String}) variant: TankVariant = TankVariant.vertical;
+  @property({type: String}) tag: string = '';
+
+  trendIcon(): HTMLTemplateResult {
+    if (this.trend === TankTrend.fastRising) {
+      return html`<obi-02-chevron-double-up
+        class="trend-icon"
+      ></obi-02-chevron-double-up>`;
+    } else if (this.trend === TankTrend.rising) {
+      return html`<obi-02-chevron-up class="trend-icon"></obi-02-chevron-up>`;
+    } else if (this.trend === TankTrend.fastFalling) {
+      return html`<obi-02-chevron-double-down
+        class="trend-icon"
+      ></obi-02-chevron-double-down>`;
+    } else if (this.trend === TankTrend.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>`;
+    }
+  }
+
+  override 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>
+    `;
+  }
+
+  static override styles = unsafeCSS(compentStyle);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-automation-tank': ObcAutomationTank;
+  }
+}

package/src/automation/corner-line/corner-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';
 
 export enum CornerLineDirection {
   topRight = 'top-right',
@@ -24,11 +17,10 @@ export type CornerLineDirectionType =
 
 @customElement('obc-corner-line')
 export class ObcCornerLine extends LitElement {
-  @property({type: String}) medium: LineMediumType = LineMedium.normal;
+  @property({type: String}) medium: LineMedium = LineMedium.normal;
   @property({type: String}) direction: CornerLineDirectionType =
     CornerLineDirection.topRight;
-  @property({type: String, attribute: 'line-type'}) lineType: LineTypeType =
-    LineType.fluid;
+  @property({type: String}) lineType: LineType = LineType.fluid;
 
   override render() {
     let rotation = 270;

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

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

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

@@ -0,0 +1,64 @@
+import {LitElement, css, html} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {LineMedium, LineType, lineColor, lineWidth} from '..';
+
+@customElement('obc-direction-line')
+export class ObcDirectionLine extends LitElement {
+  @property({type: String}) medium: LineMedium = LineMedium.normal;
+  @property({type: String}) lineType: LineType = LineType.fluid;
+
+  override render() {
+    if (this.lineType === LineType.connector) {
+      throw new Error('Connector line type not supported for line overlap');
+    }
+
+    const color = lineColor(this.medium);
+    const width = lineWidth(this.lineType) + 1;
+    const h = width / 2;
+    return html`
+      <svg
+        class="line"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          mask="url(#clip)"
+          d="M-1 ${12 - h}H25v${width}H-1z"
+          fill="var(${color.inner})"
+          stroke="var(${color.outer})"
+        />
+        <path
+          transform="translate(8 6)"
+          d="M0.5 0L6.5 6L0.5 12H3.31068L9.31068 6L3.31068 0H0.5Z"
+          fill="var(${color.outer})"
+        />
+        <defs>
+          <mask id="clip">
+            <rect width="100%" height="100%" fill="white" />
+            <path
+              transform="translate(6.5 6)"
+              d="M0.5 0L6.5 6L0.5 12v1H6.31068v-1L12.31068 6L6.31068 0v-1H0.5v1Z"
+              fill="black"
+            />
+          </mask>
+        </defs>
+      </svg>
+    `;
+  }
+
+  static override styles = css`
+    :host {
+      display: block;
+      line-height: 0;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-direction-line': ObcDirectionLine;
+  }
+}