@oicl/openbridge-webcomponents 0.0.9 → 0.0.12

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>

package/src/components/slider/slider.css

@@ -22,6 +22,7 @@
   position: relative;
 }
 
+
 .slider {
   position: absolute;
   -webkit-appearance: none;
@@ -70,6 +71,25 @@
   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/src/components/slider/slider.stories.ts

@@ -17,7 +17,9 @@ const meta: Meta<typeof ObcSlider> = {
     step: {
       control: {type: 'number', min: 1, max: 100, step: 1},
     },
-
+    hugContainer: {
+      control: {type: 'boolean'},
+    },
     iconLeft: {
       options: iconIds,
       control: {type: 'select'},
@@ -34,6 +36,9 @@ const meta: Meta<typeof ObcSlider> = {
       min="0"
       max="100"
       ?hug-container=${args.hugContainer}
+      ?has-left-icon=${args.iconLeft ? true : false}
+      ?has-right-icon=${args.iconRight ? true : false}
+      variant=${args.variant}
     >
       ${args.iconLeft
         ? iconIdToIconHtml(args.iconLeft as unknown as string, {
@@ -62,6 +67,13 @@ export const Primary: Story = {
   },
 };
 
+export const NoIcons: Story = {
+  args: {
+    value: 20,
+    hugContainer: false,
+  },
+};
+
 export const HugContainer: Story = {
   args: {
     value: 20,
@@ -70,3 +82,10 @@ export const HugContainer: Story = {
     hugContainer: true,
   },
 };
+
+export const NoValue: Story = {
+  args: {
+    value: 20,
+    variant: 'no-input',
+  },
+};

package/src/components/slider/slider.ts

@@ -4,6 +4,14 @@ import {styleMap} from 'lit/directives/style-map.js';
 import {ifDefined} from 'lit/directives/if-defined.js';
 import componentStyle from './slider.css?inline';
 import '../icon-button/icon-button';
+import {classMap} from 'lit/directives/class-map.js';
+
+export enum ObcSliderVariant {
+  NoValue = 'no-value',
+  NoInput = 'no-input',
+}
+
+export type ObcSliderVariantType = 'no-value' | 'no-input';
 
 /**
  * @element obc-slider
@@ -27,6 +35,9 @@ export class ObcSlider extends LitElement {
   @property({type: Number}) max = 100;
   @property({type: Number}) step: number | undefined;
   @property({type: Number, attribute: 'step-click'}) stepClick = 10;
+  @property({type: String}) variant: ObcSliderVariantType = 'no-value';
+  @property({type: Boolean, attribute: 'has-left-icon'}) hasLeftIcon = false;
+  @property({type: Boolean, attribute: 'has-right-icon'}) hasRightIcon = false;
 
   onInput(value: number) {
     this.value = value;
@@ -44,31 +55,44 @@ export class ObcSlider extends LitElement {
   override render() {
     const ratio = (this.value - this.min) / (this.max - this.min);
     return html`
-      <obc-icon-button @click=${this.onReduceClick} variant="flat">
-        <slot name="icon-left"></slot>
-      </obc-icon-button>
-      <div class="wrapper">
+      ${this.hasLeftIcon
+        ? html` <obc-icon-button @click=${this.onReduceClick} variant="flat">
+            <slot name="icon-left"></slot>
+          </obc-icon-button>`
+        : null}
+      <div class=${classMap({wrapper: true, [this.variant]: true})}>
         <div class="track"></div>
         <div
           class="interactive-track"
           style=${styleMap({'--ratio': ratio})}
         ></div>
-        <input
-          type="range"
-          min=${this.min}
-          max=${this.max}
-          step=${ifDefined(this.step)}
-          .value=${this.value.toString()}
-          class="slider"
-          @input=${(event: Event) => {
-            this.value = Number((event.target as HTMLInputElement).value);
-            this.dispatchEvent(new CustomEvent('value', {detail: this.value}));
-          }}
-        />
+        ${this.variant === ObcSliderVariant.NoInput
+          ? html`<div
+              class="passive-thumb"
+              style=${styleMap({'--ratio': ratio})}
+            ></div>`
+          : html`
+              <input
+                type="range"
+                min=${this.min}
+                max=${this.max}
+                step=${ifDefined(this.step)}
+                .value=${this.value.toString()}
+                class="slider"
+                @input=${(event: Event) => {
+                  this.value = Number((event.target as HTMLInputElement).value);
+                  this.dispatchEvent(
+                    new CustomEvent('value', {detail: this.value})
+                  );
+                }}
+              />
+            `}
       </div>
-      <obc-icon-button @click=${this.onIncreaseClick} variant="flat">
-        <slot name="icon-right"></slot>
-      </obc-icon-button>
+      ${this.hasRightIcon
+        ? html`<obc-icon-button @click=${this.onIncreaseClick} variant="flat">
+            <slot name="icon-right"></slot>
+          </obc-icon-button>`
+        : null}
     `;
   }
 

package/src/components/top-bar/top-bar.css

@@ -1,3 +1,7 @@
+* {
+  box-sizing: border-box;
+}
+
 .wrapper {
   height: 48px;
   width: 100%;

package/src/components/top-bar/top-bar.ts

@@ -202,14 +202,16 @@ export class ObcTopBar extends LitElement {
                 <obi-01-apps></obi-01-apps>
               </obc-icon-button>`
             : null}
-          <obc-icon-button
-            class="left-more-button"
-            variant="flat"
-            @click=${this.leftMoreButtonClicked}
-            ?activated=${this.leftMoreButtonActivated}
-          >
-            <obi-01-more-vertical></obi-01-more-vertical>
-          </obc-icon-button>
+          ${!this.inactive
+            ? html`<obc-icon-button
+                class="left-more-button"
+                variant="flat"
+                @click=${this.leftMoreButtonClicked}
+                ?activated=${this.leftMoreButtonActivated}
+              >
+                <obi-01-more-vertical></obi-01-more-vertical>
+              </obc-icon-button>`
+            : null}
         </div>
       </nav>
     `;