@oicl/openbridge-webcomponents 0.0.9 → 0.0.12

package/dist/components/slider/slider.d.ts

@@ -1,5 +1,10 @@
 import { LitElement } from 'lit';
 import '../icon-button/icon-button';
+export declare enum ObcSliderVariant {
+    NoValue = "no-value",
+    NoInput = "no-input"
+}
+export type ObcSliderVariantType = 'no-value' | 'no-input';
 /**
  * @element obc-slider
  *
@@ -21,6 +26,9 @@ export declare class ObcSlider extends LitElement {
     max: number;
     step: number | undefined;
     stepClick: number;
+    variant: ObcSliderVariantType;
+    hasLeftIcon: boolean;
+    hasRightIcon: boolean;
     onInput(value: number): void;
     onReduceClick(): void;
     onIncreaseClick(): void;

package/dist/components/slider/slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/components/slider/slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAKhD,OAAO,4BAA4B,CAAC;AAEpC;;;;;;;;;;;;;;GAcG;AACH,qBACa,SAAU,SAAQ,UAAU;IACb,KAAK,SAAM;IACX,GAAG,SAAK;IACR,GAAG,SAAO;IACV,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IACA,SAAS,SAAM;IAElE,OAAO,CAAC,KAAK,EAAE,MAAM;IAKrB,aAAa;IAIb,eAAe;IAIN,MAAM;IA+Bf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/components/slider/slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAKhD,OAAO,4BAA4B,CAAC;AAGpC,oBAAY,gBAAgB;IAC1B,OAAO,aAAa;IACpB,OAAO,aAAa;CACrB;AAED,MAAM,MAAM,oBAAoB,GAAG,UAAU,GAAG,UAAU,CAAC;AAE3D;;;;;;;;;;;;;;GAcG;AACH,qBACa,SAAU,SAAQ,UAAU;IACb,KAAK,SAAM;IACX,GAAG,SAAK;IACR,GAAG,SAAO;IACV,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IACA,SAAS,SAAM;IACxC,OAAO,EAAE,oBAAoB,CAAc;IACd,WAAW,UAAS;IACnB,YAAY,UAAS;IAE7E,OAAO,CAAC,KAAK,EAAE,MAAM;IAKrB,aAAa;IAIb,eAAe;IAIN,MAAM;IA4Cf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/dist/components/slider/slider.js

@@ -4,6 +4,7 @@ import { styleMap } from "lit/directives/style-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import componentStyle from "./slider.css.js";
 import "../icon-button/icon-button.js";
+import { classMap } from "lit/directives/class-map.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -15,6 +16,11 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
+var ObcSliderVariant = /* @__PURE__ */ ((ObcSliderVariant2) => {
+  ObcSliderVariant2["NoValue"] = "no-value";
+  ObcSliderVariant2["NoInput"] = "no-input";
+  return ObcSliderVariant2;
+})(ObcSliderVariant || {});
 let ObcSlider = class extends LitElement {
   constructor() {
     super(...arguments);
@@ -22,6 +28,9 @@ let ObcSlider = class extends LitElement {
     this.min = 0;
     this.max = 100;
     this.stepClick = 10;
+    this.variant = "no-value";
+    this.hasLeftIcon = false;
+    this.hasRightIcon = false;
   }
   onInput(value) {
     this.value = value;
@@ -36,31 +45,38 @@ let ObcSlider = class extends LitElement {
   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) => {
+        ${this.variant === "no-input" ? 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) => {
       this.value = Number(event.target.value);
-      this.dispatchEvent(new CustomEvent("value", { detail: this.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}
     `;
   }
 };
@@ -80,10 +96,20 @@ __decorateClass([
 __decorateClass([
   property({ type: Number, attribute: "step-click" })
 ], ObcSlider.prototype, "stepClick", 2);
+__decorateClass([
+  property({ type: String })
+], ObcSlider.prototype, "variant", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "has-left-icon" })
+], ObcSlider.prototype, "hasLeftIcon", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "has-right-icon" })
+], ObcSlider.prototype, "hasRightIcon", 2);
 ObcSlider = __decorateClass([
   customElement("obc-slider")
 ], ObcSlider);
 export {
-  ObcSlider
+  ObcSlider,
+  ObcSliderVariant
 };
 //# sourceMappingURL=slider.js.map

package/dist/components/slider/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","sources":["../../../src/components/slider/slider.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {styleMap} from 'lit/directives/style-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport componentStyle from './slider.css?inline';\nimport '../icon-button/icon-button';\n\n/**\n * @element obc-slider\n *\n * @prop {number} value - The value of the slider\n * @prop {number} min - The minimum value of the slider\n * @prop {number} max - The maximum value of the slider\n * @prop {number} step - The step value of the slider\n * @prop {number} stepClick - The step value when clicking the increase or decrease buttons\n * @attr hug-container - If set, the slider will not have any spacing between the slider icons and the container\n *\n * @slot icon-left - Slot for the left icon\n * @slot icon-right - Slot for the right icon\n *\n * @fires value - Fires when the value is changed\n */\n@customElement('obc-slider')\nexport class ObcSlider extends LitElement {\n  @property({type: Number}) value = 50;\n  @property({type: Number}) min = 0;\n  @property({type: Number}) max = 100;\n  @property({type: Number}) step: number | undefined;\n  @property({type: Number, attribute: 'step-click'}) stepClick = 10;\n\n  onInput(value: number) {\n    this.value = value;\n    this.dispatchEvent(new CustomEvent('value', {detail: this.value}));\n  }\n\n  onReduceClick() {\n    this.onInput(Math.max(this.value - this.stepClick, this.min));\n  }\n\n  onIncreaseClick() {\n    this.onInput(Math.min(this.value + this.stepClick, this.max));\n  }\n\n  override render() {\n    const ratio = (this.value - this.min) / (this.max - this.min);\n    return html`\n      <obc-icon-button @click=${this.onReduceClick} variant=\"flat\">\n        <slot name=\"icon-left\"></slot>\n      </obc-icon-button>\n      <div class=\"wrapper\">\n        <div class=\"track\"></div>\n        <div\n          class=\"interactive-track\"\n          style=${styleMap({'--ratio': ratio})}\n        ></div>\n        <input\n          type=\"range\"\n          min=${this.min}\n          max=${this.max}\n          step=${ifDefined(this.step)}\n          .value=${this.value.toString()}\n          class=\"slider\"\n          @input=${(event: Event) => {\n            this.value = Number((event.target as HTMLInputElement).value);\n            this.dispatchEvent(new CustomEvent('value', {detail: this.value}));\n          }}\n        />\n      </div>\n      <obc-icon-button @click=${this.onIncreaseClick} variant=\"flat\">\n        <slot name=\"icon-right\"></slot>\n      </obc-icon-button>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-slider': ObcSlider;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAuBa,IAAA,YAAN,cAAwB,WAAW;AAAA,EAAnC,cAAA;AAAA,UAAA,GAAA,SAAA;AAC6B,SAAA,QAAA;AACF,SAAA,MAAA;AACA,SAAA,MAAA;AAE+B,SAAA,YAAA;AAAA,EAAA;AAAA,EAE/D,QAAQ,OAAe;AACrB,SAAK,QAAQ;AACR,SAAA,cAAc,IAAI,YAAY,SAAS,EAAC,QAAQ,KAAK,MAAM,CAAA,CAAC;AAAA,EACnE;AAAA,EAEA,gBAAgB;AACT,SAAA,QAAQ,KAAK,IAAI,KAAK,QAAQ,KAAK,WAAW,KAAK,GAAG,CAAC;AAAA,EAC9D;AAAA,EAEA,kBAAkB;AACX,SAAA,QAAQ,KAAK,IAAI,KAAK,QAAQ,KAAK,WAAW,KAAK,GAAG,CAAC;AAAA,EAC9D;AAAA,EAES,SAAS;AAChB,UAAM,SAAS,KAAK,QAAQ,KAAK,QAAQ,KAAK,MAAM,KAAK;AAClD,WAAA;AAAA,gCACqB,KAAK,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAOhC,SAAS,EAAC,WAAW,MAAM,CAAA,CAAC;AAAA;AAAA;AAAA;AAAA,gBAI9B,KAAK,GAAG;AAAA,gBACR,KAAK,GAAG;AAAA,iBACP,UAAU,KAAK,IAAI,CAAC;AAAA,mBAClB,KAAK,MAAM,UAAU;AAAA;AAAA,mBAErB,CAAC,UAAiB;AACzB,WAAK,QAAQ,OAAQ,MAAM,OAA4B,KAAK;AACvD,WAAA,cAAc,IAAI,YAAY,SAAS,EAAC,QAAQ,KAAK,MAAM,CAAA,CAAC;AAAA,IAAA,CAClE;AAAA;AAAA;AAAA,gCAGqB,KAAK,eAAe;AAAA;AAAA;AAAA;AAAA,EAIlD;AAGF;AApDa,UAmDK,SAAS,UAAU,cAAc;AAlDvB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GADb,UACe,WAAA,SAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAFb,UAEe,WAAA,OAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAHb,UAGe,WAAA,OAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAJb,UAIe,WAAA,QAAA,CAAA;AACyB,gBAAA;AAAA,EAAlD,SAAS,EAAC,MAAM,QAAQ,WAAW,cAAa;AAAA,GALtC,UAKwC,WAAA,aAAA,CAAA;AALxC,YAAN,gBAAA;AAAA,EADN,cAAc,YAAY;AAAA,GACd,SAAA;"}
+{"version":3,"file":"slider.js","sources":["../../../src/components/slider/slider.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {styleMap} from 'lit/directives/style-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport componentStyle from './slider.css?inline';\nimport '../icon-button/icon-button';\nimport {classMap} from 'lit/directives/class-map.js';\n\nexport enum ObcSliderVariant {\n  NoValue = 'no-value',\n  NoInput = 'no-input',\n}\n\nexport type ObcSliderVariantType = 'no-value' | 'no-input';\n\n/**\n * @element obc-slider\n *\n * @prop {number} value - The value of the slider\n * @prop {number} min - The minimum value of the slider\n * @prop {number} max - The maximum value of the slider\n * @prop {number} step - The step value of the slider\n * @prop {number} stepClick - The step value when clicking the increase or decrease buttons\n * @attr hug-container - If set, the slider will not have any spacing between the slider icons and the container\n *\n * @slot icon-left - Slot for the left icon\n * @slot icon-right - Slot for the right icon\n *\n * @fires value - Fires when the value is changed\n */\n@customElement('obc-slider')\nexport class ObcSlider extends LitElement {\n  @property({type: Number}) value = 50;\n  @property({type: Number}) min = 0;\n  @property({type: Number}) max = 100;\n  @property({type: Number}) step: number | undefined;\n  @property({type: Number, attribute: 'step-click'}) stepClick = 10;\n  @property({type: String}) variant: ObcSliderVariantType = 'no-value';\n  @property({type: Boolean, attribute: 'has-left-icon'}) hasLeftIcon = false;\n  @property({type: Boolean, attribute: 'has-right-icon'}) hasRightIcon = false;\n\n  onInput(value: number) {\n    this.value = value;\n    this.dispatchEvent(new CustomEvent('value', {detail: this.value}));\n  }\n\n  onReduceClick() {\n    this.onInput(Math.max(this.value - this.stepClick, this.min));\n  }\n\n  onIncreaseClick() {\n    this.onInput(Math.min(this.value + this.stepClick, this.max));\n  }\n\n  override render() {\n    const ratio = (this.value - this.min) / (this.max - this.min);\n    return html`\n      ${this.hasLeftIcon\n        ? html` <obc-icon-button @click=${this.onReduceClick} variant=\"flat\">\n            <slot name=\"icon-left\"></slot>\n          </obc-icon-button>`\n        : null}\n      <div class=${classMap({wrapper: true, [this.variant]: true})}>\n        <div class=\"track\"></div>\n        <div\n          class=\"interactive-track\"\n          style=${styleMap({'--ratio': ratio})}\n        ></div>\n        ${this.variant === ObcSliderVariant.NoInput\n          ? html`<div\n              class=\"passive-thumb\"\n              style=${styleMap({'--ratio': ratio})}\n            ></div>`\n          : html`\n              <input\n                type=\"range\"\n                min=${this.min}\n                max=${this.max}\n                step=${ifDefined(this.step)}\n                .value=${this.value.toString()}\n                class=\"slider\"\n                @input=${(event: Event) => {\n                  this.value = Number((event.target as HTMLInputElement).value);\n                  this.dispatchEvent(\n                    new CustomEvent('value', {detail: this.value})\n                  );\n                }}\n              />\n            `}\n      </div>\n      ${this.hasRightIcon\n        ? html`<obc-icon-button @click=${this.onIncreaseClick} variant=\"flat\">\n            <slot name=\"icon-right\"></slot>\n          </obc-icon-button>`\n        : null}\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-slider': ObcSlider;\n  }\n}\n"],"names":["ObcSliderVariant"],"mappings":";;;;;;;;;;;;;;;;;;AAQY,IAAA,qCAAAA,sBAAL;AACLA,oBAAA,SAAU,IAAA;AACVA,oBAAA,SAAU,IAAA;AAFAA,SAAAA;AAAA,GAAA,oBAAA,CAAA,CAAA;AAuBC,IAAA,YAAN,cAAwB,WAAW;AAAA,EAAnC,cAAA;AAAA,UAAA,GAAA,SAAA;AAC6B,SAAA,QAAA;AACF,SAAA,MAAA;AACA,SAAA,MAAA;AAE+B,SAAA,YAAA;AACL,SAAA,UAAA;AACW,SAAA,cAAA;AACE,SAAA,eAAA;AAAA,EAAA;AAAA,EAEvE,QAAQ,OAAe;AACrB,SAAK,QAAQ;AACR,SAAA,cAAc,IAAI,YAAY,SAAS,EAAC,QAAQ,KAAK,MAAM,CAAA,CAAC;AAAA,EACnE;AAAA,EAEA,gBAAgB;AACT,SAAA,QAAQ,KAAK,IAAI,KAAK,QAAQ,KAAK,WAAW,KAAK,GAAG,CAAC;AAAA,EAC9D;AAAA,EAEA,kBAAkB;AACX,SAAA,QAAQ,KAAK,IAAI,KAAK,QAAQ,KAAK,WAAW,KAAK,GAAG,CAAC;AAAA,EAC9D;AAAA,EAES,SAAS;AAChB,UAAM,SAAS,KAAK,QAAQ,KAAK,QAAQ,KAAK,MAAM,KAAK;AAClD,WAAA;AAAA,QACH,KAAK,cACH,gCAAgC,KAAK,aAAa;AAAA;AAAA,gCAGlD,IAAI;AAAA,mBACK,SAAS,EAAC,SAAS,MAAM,CAAC,KAAK,OAAO,GAAG,KAAI,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,kBAIhD,SAAS,EAAC,WAAW,MAAM,CAAA,CAAC;AAAA;AAAA,UAEpC,KAAK,YAAY,aACf;AAAA;AAAA,sBAEU,SAAS,EAAC,WAAW,MAAM,CAAA,CAAC;AAAA,uBAEtC;AAAA;AAAA;AAAA,sBAGU,KAAK,GAAG;AAAA,sBACR,KAAK,GAAG;AAAA,uBACP,UAAU,KAAK,IAAI,CAAC;AAAA,yBAClB,KAAK,MAAM,UAAU;AAAA;AAAA,yBAErB,CAAC,UAAiB;AACzB,WAAK,QAAQ,OAAQ,MAAM,OAA4B,KAAK;AACvD,WAAA;AAAA,QACH,IAAI,YAAY,SAAS,EAAC,QAAQ,KAAK,OAAM;AAAA,MAAA;AAAA,IAC/C,CACD;AAAA;AAAA,aAEJ;AAAA;AAAA,QAEL,KAAK,eACH,+BAA+B,KAAK,eAAe;AAAA;AAAA,gCAGnD,IAAI;AAAA;AAAA,EAEZ;AAGF;AApEa,UAmEK,SAAS,UAAU,cAAc;AAlEvB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GADb,UACe,WAAA,SAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAFb,UAEe,WAAA,OAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAHb,UAGe,WAAA,OAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAJb,UAIe,WAAA,QAAA,CAAA;AACyB,gBAAA;AAAA,EAAlD,SAAS,EAAC,MAAM,QAAQ,WAAW,cAAa;AAAA,GALtC,UAKwC,WAAA,aAAA,CAAA;AACzB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GANb,UAMe,WAAA,WAAA,CAAA;AAC6B,gBAAA;AAAA,EAAtD,SAAS,EAAC,MAAM,SAAS,WAAW,iBAAgB;AAAA,GAP1C,UAO4C,WAAA,eAAA,CAAA;AACC,gBAAA;AAAA,EAAvD,SAAS,EAAC,MAAM,SAAS,WAAW,kBAAiB;AAAA,GAR3C,UAQ6C,WAAA,gBAAA,CAAA;AAR7C,YAAN,gBAAA;AAAA,EADN,cAAc,YAAY;AAAA,GACd,SAAA;"}

package/dist/components/top-bar/top-bar.css.js

@@ -1,5 +1,9 @@
 import { css } from "lit";
-const compentStyle = css`.wrapper {
+const compentStyle = css`* {
+  box-sizing: border-box;
+}
+
+.wrapper {
   height: 48px;
   width: 100%;
   display: flex;

package/dist/components/top-bar/top-bar.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"top-bar.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"top-bar.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/top-bar/top-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"top-bar.d.ts","sourceRoot":"","sources":["../../../src/components/top-bar/top-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAIhD,OAAO,4BAA4B,CAAC;AACpC,OAAO,gBAAgB,CAAC;AACxB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAClC,OAAO,2BAA2B,CAAC;AACnC,OAAO,gCAAgC,CAAC;AACxC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,6BAA6B,CAAC;AACrC,OAAO,0BAA0B,CAAC;AAClC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,EAAC,cAAc,EAAC,MAAM,0BAA0B,CAAC;AAExD;;;;;;;GAOG;AACH,qBACa,SAAU,SAAQ,UAAU;IACb,QAAQ,SAAS;IACjB,QAAQ,SAAU;IAClB,IAAI,SAA8B;IAE5D,mBAAmB,UAAS;IAE5B,sBAAsB,UAAS;IAE/B,mBAAmB,UAAS;IAE5B,uBAAuB,UAAS;IAE0B,cAAc,UAChE;IACkD,cAAc,UAChE;IAER,iBAAiB,UAAS;IAC0B,SAAS,UAAS;IACnB,QAAQ,UAAS;IACzC,QAAQ,UAAS;IAE5C,qBAAqB,SAAO;IAE5B,yBAAyB,SAAO;IAEhC,oBAAoB,SAAO;IAE3B,yBAAyB,SAAO;IACL,QAAQ,UAAS;IAE5C,eAAe,EAAE,cAAc,EAAE,CAAM;IAEvC,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,qBAAqB;IAIpB,MAAM;IA6If,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,SAAS,CAAC;KAC1B;CACF"}
+{"version":3,"file":"top-bar.d.ts","sourceRoot":"","sources":["../../../src/components/top-bar/top-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAIhD,OAAO,4BAA4B,CAAC;AACpC,OAAO,gBAAgB,CAAC;AACxB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAClC,OAAO,2BAA2B,CAAC;AACnC,OAAO,gCAAgC,CAAC;AACxC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,6BAA6B,CAAC;AACrC,OAAO,0BAA0B,CAAC;AAClC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,EAAC,cAAc,EAAC,MAAM,0BAA0B,CAAC;AAExD;;;;;;;GAOG;AACH,qBACa,SAAU,SAAQ,UAAU;IACb,QAAQ,SAAS;IACjB,QAAQ,SAAU;IAClB,IAAI,SAA8B;IAE5D,mBAAmB,UAAS;IAE5B,sBAAsB,UAAS;IAE/B,mBAAmB,UAAS;IAE5B,uBAAuB,UAAS;IAE0B,cAAc,UAChE;IACkD,cAAc,UAChE;IAER,iBAAiB,UAAS;IAC0B,SAAS,UAAS;IACnB,QAAQ,UAAS;IACzC,QAAQ,UAAS;IAE5C,qBAAqB,SAAO;IAE5B,yBAAyB,SAAO;IAEhC,oBAAoB,SAAO;IAE3B,yBAAyB,SAAO;IACL,QAAQ,UAAS;IAE5C,eAAe,EAAE,cAAc,EAAE,CAAM;IAEvC,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,qBAAqB;IAIpB,MAAM;IA+If,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,SAAS,CAAC;KAC1B;CACF"}

package/dist/components/top-bar/top-bar.js

@@ -179,14 +179,14 @@ let ObcTopBar = class 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>
     `;

package/dist/components/top-bar/top-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"top-bar.js","sources":["../../../src/components/top-bar/top-bar.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport compentStyle from './top-bar.css?inline';\nimport '../icon-button/icon-button';\nimport '../clock/clock';\nimport '../divider/divider';\nimport '../breadcrumb/breadcrumb';\nimport '../../icons/icon-01-menu';\nimport '../../icons/icon-01-close';\nimport '../../icons/icon-02-arrow-back';\nimport '../../icons/icon-02-arrow-forward';\nimport '../../icons/icon-04-dimming';\nimport '../../icons/icon-01-apps';\nimport '../../icons/icon-01-more-vertical';\nimport {BreadcrumbItem} from '../breadcrumb/breadcrumb';\n\n/**\n * Top bar component\n *\n * @fires menu-button-clicked - Menu button clicked\n * @fires dimming-button-clicked - Dimming button clicked\n * @fires apps-button-clicked - Apps button clicked\n * @fires left-more-button-clicked - Left more button clicked\n */\n@customElement('obc-top-bar')\nexport class ObcTopBar extends LitElement {\n  @property({type: String}) appTitle = 'App';\n  @property({type: String}) pageName = 'Page';\n  @property({type: String}) date = '2021-01-01T11:11:11.111Z';\n  @property({type: Boolean, attribute: 'menu-button-activated'})\n  menuButtonActivated = false;\n  @property({type: Boolean, attribute: 'dimming-button-activated'})\n  dimmingButtonActivated = false;\n  @property({type: Boolean, attribute: 'apps-button-activated'})\n  appsButtonActivated = false;\n  @property({type: Boolean, attribute: 'left-more-button-activated'})\n  leftMoreButtonActivated = false;\n\n  @property({type: Boolean, attribute: 'wide-menu-button'}) wideMenuButton =\n    false;\n  @property({type: Boolean, attribute: 'show-apps-button'}) showAppsButton =\n    false;\n  @property({type: Boolean, attribute: 'show-dimming-button'})\n  showDimmingButton = false;\n  @property({type: Boolean, attribute: 'show-clock'}) showClock = false;\n  @property({type: Boolean, attribute: 'show-date'}) showDate = false;\n  @property({type: Boolean}) inactive = false;\n  @property({type: Number, attribute: 'apps-button-breakpoint-px'})\n  appButtonBreakpointPx = 500;\n  @property({type: Number, attribute: 'dimming-button-breakpoint-px'})\n  dimmingButtonBreakpointPx = 500;\n  @property({type: Number, attribute: 'app-title-breakpoint-px'})\n  appTitleBreakpointPx = 500;\n  @property({type: Number, attribute: 'clock-minimize-breakpoint-px'})\n  clockMinimizeBreakpointPx = 300;\n  @property({type: Boolean}) settings = false;\n  @property({type: Array, attribute: 'breadcrumb-items'})\n  breadcrumbItems: BreadcrumbItem[] = [];\n\n  private menuButtonClicked() {\n    this.dispatchEvent(new CustomEvent('menu-button-clicked'));\n  }\n\n  private dimmingButtonClicked() {\n    this.dispatchEvent(new CustomEvent('dimming-button-clicked'));\n  }\n\n  private appsButtonClicked() {\n    this.dispatchEvent(new CustomEvent('apps-button-clicked'));\n  }\n\n  private leftMoreButtonClicked() {\n    this.dispatchEvent(new CustomEvent('left-more-button-clicked'));\n  }\n\n  override render() {\n    const leftGroup = [];\n    if (this.settings) {\n      leftGroup.push(\n        html`<div class=\"menu-button\">\n          <obc-icon-button\n            variant=\"flat\"\n            @click=${() => this.dispatchEvent(new CustomEvent('close'))}\n          >\n            <obi-01-close></obi-01-close>\n          </obc-icon-button>\n        </div>`\n      );\n      leftGroup.push(html`<obc-divider></obc-divider>`);\n      leftGroup.push(\n        html`<obc-icon-button\n          variant=\"flat\"\n          corner-left\n          @click=${() => this.dispatchEvent(new CustomEvent('back'))}\n        >\n          <obi-02-arrow-back></obi-02-arrow-back>\n        </obc-icon-button>`\n      );\n      leftGroup.push(\n        html`<obc-icon-button\n          variant=\"flat\"\n          corner-right\n          @click=${() => this.dispatchEvent(new CustomEvent('forward'))}\n        >\n          <obi-02-arrow-forward></obi-02-arrow-forward>\n        </obc-icon-button>`\n      );\n      leftGroup.push(html`<obc-divider></obc-divider>`);\n      leftGroup.push(html`<div class=\"title\">${this.appTitle}</div>`);\n      leftGroup.push(\n        html`<obc-breadcrumb .items=${this.breadcrumbItems}></obc-breadcrumb>`\n      );\n    } else {\n      if (!this.inactive) {\n        leftGroup.push(\n          html`<div class=\"menu-button ${this.wideMenuButton ? 'wide' : null}\">\n            <obc-icon-button\n              variant=\"flat\"\n              @click=${this.menuButtonClicked}\n              ?activated=${this.menuButtonActivated}\n            >\n              <obi-01-menu></obi-01-menu>\n            </obc-icon-button>\n          </div>`\n        );\n      }\n      leftGroup.push(html`<div class=\"title\">${this.appTitle}</div>`);\n      leftGroup.push(html`<div class=\"page-name\">${this.pageName}</div>`);\n    }\n\n    const breakpointMoreButton = Math.max(\n      this.appButtonBreakpointPx,\n      this.dimmingButtonBreakpointPx\n    );\n\n    return html`\n      <style>\n        @media (max-width: ${breakpointMoreButton}px) {\n          .left-more-button {\n            display: revert !important;\n          }\n\n          .group.left > * {\n            margin-right: 4px;\n            margin-left: 4px;\n          }\n        }\n\n        @media (max-width: ${this.appButtonBreakpointPx}px) {\n          .apps-button {\n            display: none;\n          }\n        }\n\n        @media (max-width: ${this.dimmingButtonBreakpointPx}px) {\n          .dimming-button {\n            display: none;\n          }\n        }\n\n        @media (max-width: ${this.appTitleBreakpointPx}px) {\n          .title {\n            display: none;\n          }\n        }\n      </style>\n      <nav\n        class=${classMap({\n          wrapper: true,\n          inactive: this.inactive,\n          settings: this.settings,\n        })}\n      >\n        <div class=\"left group\">${leftGroup}</div>\n        <div class=\"right group\">\n          ${this.showClock\n            ? html`<obc-clock\n                date=${this.date}\n                blink-only-breakpoint-px=${this.clockMinimizeBreakpointPx}\n                ?show-date=${this.showDate}\n              ></obc-clock>`\n            : null}\n          <slot name=\"alerts\"></slot>\n          ${this.showDimmingButton && !this.inactive\n            ? html`<obc-icon-button\n                class=\"dimming-button\"\n                variant=\"flat\"\n                @click=${this.dimmingButtonClicked}\n                ?activated=${this.dimmingButtonActivated}\n              >\n                <obi-04-dimming></obi-04-dimming>\n              </obc-icon-button>`\n            : null}\n          ${this.showAppsButton && !this.inactive\n            ? html`<obc-icon-button\n                class=\"apps-button\"\n                variant=\"flat\"\n                @click=${this.appsButtonClicked}\n                ?activated=${this.appsButtonActivated}\n              >\n                <obi-01-apps></obi-01-apps>\n              </obc-icon-button>`\n            : null}\n          <obc-icon-button\n            class=\"left-more-button\"\n            variant=\"flat\"\n            @click=${this.leftMoreButtonClicked}\n            ?activated=${this.leftMoreButtonActivated}\n          >\n            <obi-01-more-vertical></obi-01-more-vertical>\n          </obc-icon-button>\n        </div>\n      </nav>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-top-bar': ObcTopBar;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"top-bar.js","sources":["../../../src/components/top-bar/top-bar.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport compentStyle from './top-bar.css?inline';\nimport '../icon-button/icon-button';\nimport '../clock/clock';\nimport '../divider/divider';\nimport '../breadcrumb/breadcrumb';\nimport '../../icons/icon-01-menu';\nimport '../../icons/icon-01-close';\nimport '../../icons/icon-02-arrow-back';\nimport '../../icons/icon-02-arrow-forward';\nimport '../../icons/icon-04-dimming';\nimport '../../icons/icon-01-apps';\nimport '../../icons/icon-01-more-vertical';\nimport {BreadcrumbItem} from '../breadcrumb/breadcrumb';\n\n/**\n * Top bar component\n *\n * @fires menu-button-clicked - Menu button clicked\n * @fires dimming-button-clicked - Dimming button clicked\n * @fires apps-button-clicked - Apps button clicked\n * @fires left-more-button-clicked - Left more button clicked\n */\n@customElement('obc-top-bar')\nexport class ObcTopBar extends LitElement {\n  @property({type: String}) appTitle = 'App';\n  @property({type: String}) pageName = 'Page';\n  @property({type: String}) date = '2021-01-01T11:11:11.111Z';\n  @property({type: Boolean, attribute: 'menu-button-activated'})\n  menuButtonActivated = false;\n  @property({type: Boolean, attribute: 'dimming-button-activated'})\n  dimmingButtonActivated = false;\n  @property({type: Boolean, attribute: 'apps-button-activated'})\n  appsButtonActivated = false;\n  @property({type: Boolean, attribute: 'left-more-button-activated'})\n  leftMoreButtonActivated = false;\n\n  @property({type: Boolean, attribute: 'wide-menu-button'}) wideMenuButton =\n    false;\n  @property({type: Boolean, attribute: 'show-apps-button'}) showAppsButton =\n    false;\n  @property({type: Boolean, attribute: 'show-dimming-button'})\n  showDimmingButton = false;\n  @property({type: Boolean, attribute: 'show-clock'}) showClock = false;\n  @property({type: Boolean, attribute: 'show-date'}) showDate = false;\n  @property({type: Boolean}) inactive = false;\n  @property({type: Number, attribute: 'apps-button-breakpoint-px'})\n  appButtonBreakpointPx = 500;\n  @property({type: Number, attribute: 'dimming-button-breakpoint-px'})\n  dimmingButtonBreakpointPx = 500;\n  @property({type: Number, attribute: 'app-title-breakpoint-px'})\n  appTitleBreakpointPx = 500;\n  @property({type: Number, attribute: 'clock-minimize-breakpoint-px'})\n  clockMinimizeBreakpointPx = 300;\n  @property({type: Boolean}) settings = false;\n  @property({type: Array, attribute: 'breadcrumb-items'})\n  breadcrumbItems: BreadcrumbItem[] = [];\n\n  private menuButtonClicked() {\n    this.dispatchEvent(new CustomEvent('menu-button-clicked'));\n  }\n\n  private dimmingButtonClicked() {\n    this.dispatchEvent(new CustomEvent('dimming-button-clicked'));\n  }\n\n  private appsButtonClicked() {\n    this.dispatchEvent(new CustomEvent('apps-button-clicked'));\n  }\n\n  private leftMoreButtonClicked() {\n    this.dispatchEvent(new CustomEvent('left-more-button-clicked'));\n  }\n\n  override render() {\n    const leftGroup = [];\n    if (this.settings) {\n      leftGroup.push(\n        html`<div class=\"menu-button\">\n          <obc-icon-button\n            variant=\"flat\"\n            @click=${() => this.dispatchEvent(new CustomEvent('close'))}\n          >\n            <obi-01-close></obi-01-close>\n          </obc-icon-button>\n        </div>`\n      );\n      leftGroup.push(html`<obc-divider></obc-divider>`);\n      leftGroup.push(\n        html`<obc-icon-button\n          variant=\"flat\"\n          corner-left\n          @click=${() => this.dispatchEvent(new CustomEvent('back'))}\n        >\n          <obi-02-arrow-back></obi-02-arrow-back>\n        </obc-icon-button>`\n      );\n      leftGroup.push(\n        html`<obc-icon-button\n          variant=\"flat\"\n          corner-right\n          @click=${() => this.dispatchEvent(new CustomEvent('forward'))}\n        >\n          <obi-02-arrow-forward></obi-02-arrow-forward>\n        </obc-icon-button>`\n      );\n      leftGroup.push(html`<obc-divider></obc-divider>`);\n      leftGroup.push(html`<div class=\"title\">${this.appTitle}</div>`);\n      leftGroup.push(\n        html`<obc-breadcrumb .items=${this.breadcrumbItems}></obc-breadcrumb>`\n      );\n    } else {\n      if (!this.inactive) {\n        leftGroup.push(\n          html`<div class=\"menu-button ${this.wideMenuButton ? 'wide' : null}\">\n            <obc-icon-button\n              variant=\"flat\"\n              @click=${this.menuButtonClicked}\n              ?activated=${this.menuButtonActivated}\n            >\n              <obi-01-menu></obi-01-menu>\n            </obc-icon-button>\n          </div>`\n        );\n      }\n      leftGroup.push(html`<div class=\"title\">${this.appTitle}</div>`);\n      leftGroup.push(html`<div class=\"page-name\">${this.pageName}</div>`);\n    }\n\n    const breakpointMoreButton = Math.max(\n      this.appButtonBreakpointPx,\n      this.dimmingButtonBreakpointPx\n    );\n\n    return html`\n      <style>\n        @media (max-width: ${breakpointMoreButton}px) {\n          .left-more-button {\n            display: revert !important;\n          }\n\n          .group.left > * {\n            margin-right: 4px;\n            margin-left: 4px;\n          }\n        }\n\n        @media (max-width: ${this.appButtonBreakpointPx}px) {\n          .apps-button {\n            display: none;\n          }\n        }\n\n        @media (max-width: ${this.dimmingButtonBreakpointPx}px) {\n          .dimming-button {\n            display: none;\n          }\n        }\n\n        @media (max-width: ${this.appTitleBreakpointPx}px) {\n          .title {\n            display: none;\n          }\n        }\n      </style>\n      <nav\n        class=${classMap({\n          wrapper: true,\n          inactive: this.inactive,\n          settings: this.settings,\n        })}\n      >\n        <div class=\"left group\">${leftGroup}</div>\n        <div class=\"right group\">\n          ${this.showClock\n            ? html`<obc-clock\n                date=${this.date}\n                blink-only-breakpoint-px=${this.clockMinimizeBreakpointPx}\n                ?show-date=${this.showDate}\n              ></obc-clock>`\n            : null}\n          <slot name=\"alerts\"></slot>\n          ${this.showDimmingButton && !this.inactive\n            ? html`<obc-icon-button\n                class=\"dimming-button\"\n                variant=\"flat\"\n                @click=${this.dimmingButtonClicked}\n                ?activated=${this.dimmingButtonActivated}\n              >\n                <obi-04-dimming></obi-04-dimming>\n              </obc-icon-button>`\n            : null}\n          ${this.showAppsButton && !this.inactive\n            ? html`<obc-icon-button\n                class=\"apps-button\"\n                variant=\"flat\"\n                @click=${this.appsButtonClicked}\n                ?activated=${this.appsButtonActivated}\n              >\n                <obi-01-apps></obi-01-apps>\n              </obc-icon-button>`\n            : null}\n          ${!this.inactive\n            ? html`<obc-icon-button\n                class=\"left-more-button\"\n                variant=\"flat\"\n                @click=${this.leftMoreButtonClicked}\n                ?activated=${this.leftMoreButtonActivated}\n              >\n                <obi-01-more-vertical></obi-01-more-vertical>\n              </obc-icon-button>`\n            : null}\n        </div>\n      </nav>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-top-bar': ObcTopBar;\n  }\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents",
-  "version": "0.0.9",
+  "version": "0.0.12",
   "type": "module",
   "repository": {
     "type": "git",
@@ -18,7 +18,6 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "download:icons": "tsx ./script/download-icons.ts",
-    "download:instruments": "tsx ./script/svg-instruments/main.ts",
     "new:component": "tsx ./new-component.ts",
     "test-storybook": "test-storybook",
     "prepack": "yarn build",
@@ -40,44 +39,38 @@
     "@lit-labs/gen-wrapper-react": "^0.3.1",
     "@lit-labs/gen-wrapper-vue": "^0.3.2",
     "@open-wc/lit-helpers": "^0.7.0",
-    "@storybook/addon-essentials": "^7.6.7",
-    "@storybook/addon-interactions": "^7.6.17",
-    "@storybook/addon-links": "^7.6.7",
-    "@storybook/addon-storysource": "^7.6.17",
-    "@storybook/addon-themes": "^7.6.7",
-    "@storybook/blocks": "^7.6.7",
-    "@storybook/test-runner": "^0.16.0",
-    "@storybook/testing-library": "^0.2.2",
-    "@storybook/web-components": "^7.6.7",
-    "@storybook/web-components-vite": "^7.6.7",
+    "@storybook/addon-essentials": "^8.0.5",
+    "@storybook/addon-interactions": "^8.0.5",
+    "@storybook/addon-links": "^8.0.5",
+    "@storybook/addon-storysource": "^8.0.5",
+    "@storybook/addon-themes": "^8.0.5",
+    "@storybook/blocks": "^8.0.5",
+    "@storybook/test": "^8.0.5",
+    "@storybook/test-runner": "^0.17.0",
+    "@storybook/web-components": "^8.0.5",
+    "@storybook/web-components-vite": "^8.0.5",
     "@topcli/prompts": "^1.8.0",
     "@types/jest-image-snapshot": "^6",
-    "@types/xmldom": "^0.1.34",
-    "chromatic": "^7.6.0",
     "concurrently": "^8.2.2",
     "dotenv": "^16.3.1",
     "eslint": "^8.56.0",
-    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-storybook": "^0.8.0",
     "figma-api": "^1.11.0",
     "jest-image-snapshot": "^6.2.0",
     "lit-analyzer": "^2.0.2",
     "nodemon": "^3.0.2",
     "playwright": "^1.40.0",
-    "postcss": "^8.4.32",
-    "postcss-mixins": "^9.0.4",
+    "postcss": "^8.4.36",
+    "postcss-mixins": "^10.0.0",
     "postcss-nesting": "^12.0.1",
-    "postcss-plugin": "^1.0.0",
     "prettier": "^3.1.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "release-it": "^17.1.1",
     "rollup-plugin-postcss-lit": "^2.1.0",
-    "storybook": "^7.6.7",
-    "tsx": "^3.14.0",
+    "storybook": "^8.0.5",
+    "tsx": "^4.7.1",
     "typescript": "^5.3.3",
-    "vite": "^4.4.5",
-    "vite-plugin-dts": "^3.6.3",
-    "xmldom": "^0.6.0"
+    "vite": "^5.2.7",
+    "vite-plugin-dts": "^3.6.3"
   },
   "types": "./dist/index.d.ts",
   "customElements": "custom-elements.json"

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,
+  },
+};