@oicl/openbridge-webcomponents 0.0.10 → 0.0.13

package/src/automation/automation-button/automation-button.ts

@@ -0,0 +1,374 @@
+import {HTMLTemplateResult, LitElement, html, unsafeCSS} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import compentStyle from './automation-button.css?inline';
+import {classMap} from 'lit/directives/class-map.js';
+import '../../icons/icon-08-forward';
+import '../../icons/icon-08-forward-fast';
+import '../../icons/icon-08-forward-stopped';
+import '../../icons/icon-08-backward';
+import '../../icons/icon-08-backward-fast';
+import '../../icons/icon-08-backward-stopped';
+import '../../icons/icon-08-standby';
+import '../../icons/icon-02-arrow-up';
+import '../../icons/icon-02-arrow-down';
+import '../../icons/icon-02-arrow-back';
+import '../../icons/icon-02-arrow-forward';
+
+export enum AutomationButtonSize {
+  small = 'small',
+  regular = 'regular',
+  large = 'large',
+  xl = 'xl',
+}
+
+export enum AutomationButtonVariant {
+  regular = 'regular',
+  double = 'double',
+  switch = 'switch',
+}
+
+export enum AutomationButtonState {
+  closed = 'closed',
+  open = 'open',
+  openEnhanced = 'open-enhanced',
+  openMedium = 'open-medium',
+  static = 'static',
+}
+
+export enum AutomationButtonLabelSize {
+  small = 'small',
+  regular = 'regular',
+  enhanced = 'enhanced',
+}
+
+export enum AutomationBottonLabelStyle {
+  regular = 'regular',
+  enhanced = 'enhanced',
+  active = 'active',
+}
+
+export interface AutomationButtonStateLabel {
+  type: 'state';
+  text: string;
+  bold: boolean;
+}
+
+export interface AutomationButtonTagLabel {
+  type: 'tag';
+  text: string;
+  showHash: boolean;
+}
+
+export interface AutomationButtonDirectonValueLabel {
+  type: 'direction';
+  value: number;
+  nDigits: number;
+  unit: 'percent';
+  direction: 'up' | 'down' | 'left' | 'right';
+}
+
+export enum AutomationButtonLabelPosition {
+  top = 'top',
+  bottom = 'bottom',
+  left = 'left',
+  right = 'right',
+}
+
+export enum AutomationButtonDirection {
+  forward = 'forward',
+  forwardFast = 'forward-fast',
+  forwardStopped = 'forward-stopped',
+  backward = 'backward',
+  backwardFast = 'backward-fast',
+  backwardStopped = 'backward-stopped',
+  standby = 'standby',
+}
+
+export type AutomationButtonLabel =
+  | AutomationButtonStateLabel
+  | AutomationButtonTagLabel
+  | AutomationButtonDirectonValueLabel;
+
+function renderLabel(label: AutomationButtonLabel): HTMLTemplateResult {
+  if (label.type === 'state') {
+    return html`<div class="state ${label.bold ? 'bold' : ''}">
+      ${label.text}
+    </div>`;
+  } else if (label.type === 'tag') {
+    return html`<div class="tag">
+      ${label.showHash ? html`<div class="hash">#</div>` : null} ${label.text}
+    </div>`;
+  } else {
+    const v = label.value.toFixed(0);
+    const zeroPadding =
+      v.length < label.nDigits ? '0'.repeat(label.nDigits - v.length) : '';
+
+    let directionIcon: HTMLTemplateResult;
+    if (label.direction === 'up') {
+      directionIcon = html`<obi-02-arrow-up
+        class="direction-icon"
+      ></obi-02-arrow-up>`;
+    } else if (label.direction === 'down') {
+      directionIcon = html`<obi-02-arrow-down
+        class="direction-icon"
+      ></obi-02-arrow-down>`;
+    } else if (label.direction === 'left') {
+      directionIcon = html`<obi-02-arrow-back
+        class="direction-icon"
+      ></obi-02-arrow-back>`;
+    } else if (label.direction === 'right') {
+      directionIcon = html`<obi-02-arrow-forward
+        class="direction-icon"
+      ></obi-02-arrow-forward>`;
+    } else {
+      throw new Error('Invalid direction');
+    }
+    return html` <div class="direction">
+      ${directionIcon}
+      <span class="zeros">${zeroPadding}</span>
+      <span class="value">${v}</span>
+      <span class="unit">${label.unit === 'percent' ? '%' : label.unit}</span>
+    </div>`;
+  }
+}
+
+@customElement('obc-automation-button')
+export class ObcAutomationButton extends LitElement {
+  @property({type: String}) size: AutomationButtonSize =
+    AutomationButtonSize.regular;
+  @property({type: String}) variant: AutomationButtonVariant =
+    AutomationButtonVariant.regular;
+  @property({type: String}) state: AutomationButtonState =
+    AutomationButtonState.open;
+  @property({type: Array, attribute: false}) labels: AutomationButtonLabel[] =
+    [];
+  @property({type: String}) labelPosition: AutomationButtonLabelPosition =
+    AutomationButtonLabelPosition.bottom;
+  @property({type: String}) labelSize: AutomationButtonLabelSize =
+    AutomationButtonLabelSize.regular;
+  @property({type: String}) labelStyle: AutomationBottonLabelStyle =
+    AutomationBottonLabelStyle.regular;
+  @property({type: Boolean}) alert: boolean = false;
+  @property({type: Boolean}) progress: boolean = false;
+  @property({type: String}) direction: AutomationButtonDirection =
+    AutomationButtonDirection.forward;
+
+  override render() {
+    const labels = this.labels.map(renderLabel);
+    const progressSpinner = this.getProgressSpinner();
+    const direction = this.getDirectionIcon();
+
+    return html`
+      <button
+        class=${classMap({
+          wrapper: true,
+          ['size-' + this.size]: true,
+          ['variant-' + this.variant]: true,
+          ['state-' + this.state]: true,
+          ['label-' + this.labelPosition]: true,
+          ['label-size-' + this.labelSize]: true,
+          ['label-style-' + this.labelStyle]: true,
+          alert: this.alert,
+          progress: this.progress,
+        })}
+      >
+        <div class="icon-holder">
+          ${direction}
+          ${this.variant !== AutomationButtonVariant.double ||
+          this.size !== AutomationButtonSize.small
+            ? html`<div class="icon-primary">
+                <slot name="icon"></slot>
+              </div>`
+            : ''}
+          ${progressSpinner}
+          ${this.alert
+            ? html`<svg
+                class="alert-icon"
+                width="18"
+                height="31"
+                viewBox="0 0 18 31"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M 0 0 L 16 0 C 17.1046 0 18 0.8954 18 2 V 14.7889 C 18 15.5786 17.7662 16.3506 17.3282 17.0077 L 9 30 V 3 L  7 1 H 0  Z"
+                  fill="var(--alert-alarm-color)"
+                />
+                <path
+                  d="M12 4H14V11.5H12V4Z"
+                  fill="var(--on-alarm-active-color)"
+                />
+                <path
+                  d="M12 13.5H14V15.5H12V13.5Z"
+                  fill="var(--on-alarm-active-color)"
+                />
+              </svg> `
+            : ''}
+          <div class="badge-top-right">
+            <slot name="badge-top-right"></slot>
+          </div>
+          <div class="badge-top-left">
+            <slot name="badge-top-left"></slot>
+          </div>
+          <div class="badge-bottom-left">
+            <slot name="badge-bottom-left"></slot>
+          </div>
+          <div class="badge-bottom-right">
+            <slot name="badge-bottom-right"></slot>
+          </div>
+        </div>
+        <div class="label">${labels}</div>
+      </button>
+    `;
+  }
+
+  static override styles = unsafeCSS(compentStyle);
+
+  private getProgressSpinner(): null | HTMLTemplateResult {
+    if (!this.progress) {
+      return null;
+    }
+
+    let spinnerWidth: number;
+    if (this.size === AutomationButtonSize.small) {
+      spinnerWidth = 40;
+    } else if (this.size === AutomationButtonSize.regular) {
+      spinnerWidth = 56;
+    } else if (this.size === AutomationButtonSize.large) {
+      spinnerWidth = 72;
+    } else {
+      spinnerWidth = 104;
+    }
+    const progressSpinner = html`<svg
+      width="${spinnerWidth}"
+      height="${spinnerWidth}"
+      viewBox="0 0 ${spinnerWidth} ${spinnerWidth}"
+      fill="none"
+      class="progress-spinner"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M2 ${spinnerWidth / 2} A ${spinnerWidth / 2 - 2} ${spinnerWidth / 2 -
+        2} 0 0 1 ${spinnerWidth / 2} 2"
+        stroke="var(--instrument-enhanced-secondary-color)"
+        stroke-width="4"
+        stroke-linecap="round"
+      />
+    </svg> `;
+    return progressSpinner;
+  }
+
+  private getDirectionIcon(): null | HTMLTemplateResult {
+    if (this.variant !== AutomationButtonVariant.double) {
+      return null;
+    } else if (this.direction === AutomationButtonDirection.forward) {
+      return html`<svg
+        class="icon-direction"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M8 5 v 14 L 20 12Z"
+          stroke="var(--automation-device-tertiary-color)"
+          fill="var(--automation-device-primary-color)"
+          vector-effect="non-scaling-stroke"
+        />
+      </svg> `;
+    } else if (this.direction === AutomationButtonDirection.forwardFast) {
+      return html`<svg
+        class="icon-direction"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M3.5 5 v 14 l 8.5 -7 Z M14.5 5 v 14 l 8.5 -7 Z"
+          stroke="var(--automation-device-tertiary-color)"
+          fill="var(--automation-device-primary-color)"
+          vector-effect="non-scaling-stroke"
+        />
+      </svg> `;
+    } else if (this.direction === AutomationButtonDirection.forwardStopped) {
+      return html`<svg
+        class="icon-direction"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M8 5 v 14 L 20 12Z"
+          fill="var(--automation-device-tertiary-color)"
+          stroke="var(--automation-device-tertiary-inverted-color)"
+          vector-effect="non-scaling-stroke"
+        />
+      </svg> `;
+    } else if (this.direction === AutomationButtonDirection.backward) {
+      return html`<svg
+        class="icon-direction"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M16 5 v 14 L 4 12Z"
+          stroke="var(--automation-device-tertiary-color)"
+          fill="var(--automation-device-primary-color)"
+          vector-effect="non-scaling-stroke"
+        />
+      </svg>`;
+    } else if (this.direction === AutomationButtonDirection.backwardFast) {
+      return html`<svg
+        class="icon-direction"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M20.5 5 v 14 l -8.5 -7 Z M9.5 5 v 14 l -8.5 -7 Z"
+          stroke="var(--automation-device-tertiary-color)"
+          fill="var(--automation-device-primary-color)"
+          vector-effect="non-scaling-stroke"
+        />
+      </svg>`;
+    } else if (this.direction === AutomationButtonDirection.backwardStopped) {
+      return html`<svg
+        class="icon-direction"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M16 5 v 14 L 4 12Z"
+          fill="var(--automation-device-tertiary-color)"
+          stroke="var(--automation-device-tertiary-inverted-color)"
+          vector-effect="non-scaling-stroke"
+        />
+      </svg> `;
+    } else if (this.direction === AutomationButtonDirection.standby) {
+      return html`<obi-08-standby
+        class="icon-direction"
+        use-css-color
+      ></obi-08-standby>`;
+    }
+    throw new Error('Invalid direction');
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-automation-button': ObcAutomationButton;
+  }
+}

package/src/automation/automation-input-modal/automation-input-modal.css

@@ -0,0 +1,35 @@
+* {
+    box-sizing: border-box;
+}
+
+.wrapper {
+    width: min-content;
+    display: grid;
+    grid-template-columns: min-content min-content;
+    grid-template-areas: "actions header";
+
+    border-radius: 12px;
+    background: var(--container-global-color);
+    box-shadow: var(--shadow-floating);
+}
+
+.header {
+    grid-area: header;
+    display: flex;
+    align-items: center;
+    justify-items: center;
+    border-left: 1px solid var(--border-outline-color);
+    padding: 8px;
+}
+
+.prewiev {
+    grid-area: prewiev;
+    display: none;
+}
+
+.actions {
+    grid-area: actions;
+    display: flex;
+    flex-direction: column;
+    padding: 8px 16px;
+}

package/src/automation/automation-input-modal/automation-input-modal.stories.ts

@@ -0,0 +1,97 @@
+import type {Meta, StoryObj} from '@storybook/web-components';
+import {ObcAutomationInputModal} from './automation-input-modal';
+import './automation-input-modal';
+import '../../components/icon-button/icon-button';
+import '../../icons/icon-01-close';
+import '../../icons/icon-01-stop';
+import '../../icons/icon-08-forward';
+import '../../components/input/input';
+import '../../components/notification-button/notification-button';
+import '../../icons/icon-02-chevron-double-left';
+import '../../icons/icon-02-chevron-left';
+import '../../icons/icon-02-chevron-double-right';
+import '../../icons/icon-02-chevron-right';
+import '../../components/toggle-button-group/toggle-button-group';
+import '../../components/toggle-button-option/toggle-button-option';
+
+import {html} from 'lit';
+
+const meta: Meta<typeof ObcAutomationInputModal> = {
+  title: 'Automation/InputModal',
+  tags: ['autodocs'],
+  component: 'obc-automation-input-modal',
+  args: {},
+} satisfies Meta<ObcAutomationInputModal>;
+
+export default meta;
+type Story = StoryObj<ObcAutomationInputModal>;
+
+export const Compact: Story = {
+  render: () => html`
+    <style>
+      .speed {
+        display: grid;
+        grid-template-columns: min-content min-content 100px min-content min-content;
+      }
+      .label {
+        text-align: center;
+        color: var(--element-neutral-color);
+        font-feature-settings:
+          'ss02' on,
+          'clig' off,
+          'liga' off;
+        /* UI/Label */
+        font-family: 'Noto Sans';
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 370;
+        line-height: 16px; /* 133.333% */
+      }
+    </style>
+    <obc-automation-input-modal>
+      <div slot="header">
+        <obc-icon-button variant="flat">
+          <obi-01-close></obi-01-close>
+        </obc-icon-button>
+      </div>
+      <div slot="preview"></div>
+      <div slot="actions">
+        <obc-toggle-button-group has-labels value="run">
+          <obc-toggle-button-option value="stop"
+            >Stop
+            <obi-01-stop slot="icon"></obi-01-stop>
+          </obc-toggle-button-option>
+          <obc-toggle-button-option value="run"
+            >Run
+            <obi-08-forward slot="icon"></obi-08-forward>
+          </obc-toggle-button-option>
+        </obc-toggle-button-group>
+        <div class="speed">
+          <obc-notification-button icon corner-left open-right>
+            <obi-02-chevron-double-left></obi-02-chevron-double-left>
+          </obc-notification-button>
+          <obc-notification-button icon open-right>
+            <obi-02-chevron-left></obi-02-chevron-left>
+          </obc-notification-button>
+          <obc-input
+            value="10"
+            squared
+            textAlign="center"
+            font="button"
+          ></obc-input>
+          <obc-notification-button icon open-left>
+            <obi-02-chevron-right></obi-02-chevron-right>
+          </obc-notification-button>
+          <obc-notification-button icon corner-right open-left>
+            <obi-02-chevron-double-right></obi-02-chevron-double-right>
+          </obc-notification-button>
+          <div class="label">-10</div>
+          <div class="label">-1</div>
+          <div class="label">Speed</div>
+          <div class="label">+1</div>
+          <div class="label">+10</div>
+        </div>
+      </div>
+    </obc-automation-input-modal>
+  `,
+};

package/src/automation/automation-input-modal/automation-input-modal.ts

@@ -0,0 +1,28 @@
+import {LitElement, html, unsafeCSS} from 'lit';
+import {customElement} from 'lit/decorators.js';
+import compentStyle from './automation-input-modal.css?inline';
+
+@customElement('obc-automation-input-modal')
+export class ObcAutomationInputModal extends LitElement {
+  override render() {
+    return html`
+      <div class="wrapper">
+        <div class="header">
+          <slot name="header"></slot>
+        </div>
+        <div class="preview">
+          <slot name="preview"></slot>
+        </div>
+        <slot class="actions" name="actions"></slot>
+      </div>
+    `;
+  }
+
+  static override styles = unsafeCSS(compentStyle);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-automation-input-modal': ObcAutomationInputModal;
+  }
+}

package/src/automation/automation-readout/automation-readout.css

@@ -0,0 +1,94 @@
+* {
+    box-sizing: border-box;
+}
+
+.wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: fit-content;
+    min-height: 48px;
+    appearance: none;
+    background: none;
+    border: none;
+
+    @mixin style style=normal visibleWrapperClass=.visible-wrapper;
+
+    &.position-bottom {
+        top: calc(1px + var(--offset));
+        transform: translateX(-50%);
+    }
+
+    &.position-top {
+        transform: translate(-50%, calc(-100% - 1px - var(--offset)));
+    }
+
+    &::before {
+        content: '';
+        display: block;
+        position: absolute;
+        border: var(--normal-enabled-border-color) solid 1px;
+    }
+
+    &.position-bottom::before,
+    &.position-top::before {
+        width: 0;
+        height: 8px;
+    }
+
+    &.position-bottom::before {
+        top: -1px;
+    }
+
+    &.position-top::before {
+        bottom: -1px;
+    }
+
+    &.position-left {
+        transform: translate(calc(-100% - 4px - var(--offset)), -50%);
+    }
+
+    &.position-right {
+        transform: translateY(-50%);
+        right: calc(-4px - var(--offset));
+    }
+
+    &.position-left::before,
+    &.position-right::before {
+        height: 0;
+        width: 8px;
+    }
+
+    &.position-left::before {
+        right: -4px;
+    }
+
+    &.position-right::before {
+        left: -4px;
+    }
+
+    .visible-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: fit-content;
+        padding: 3px 7px;
+        border-radius: 6px;
+
+        @mixin font-instrument-value-s;
+
+        .value {
+            color: var(--instrument-enhanced-secondary-color);
+            text-align: right
+        }
+
+        .unit {
+            @mixin font-instrument-unit-s;
+            margin-left: 4px;
+            color: var(--on-normal-neutral-color);
+        }
+
+
+    }
+}