@oicl/openbridge-webcomponents 0.0.13 → 0.0.14

package/dist/automation/line-overlap/line-overlap.js.map

@@ -1 +1 @@
-{"version":3,"file":"line-overlap.js","sources":["../../../src/automation/line-overlap/line-overlap.ts"],"sourcesContent":["import {LitElement, css, html} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {LineMedium, LineType, lineColor, lineWidth} from '..';\n\n@customElement('obc-line-overlap')\nexport class ObcLineOverlap extends LitElement {\n  @property({type: String}) medium: LineMedium = LineMedium.normal;\n  @property({type: String}) lineType: LineType = LineType.fluid;\n\n  override render() {\n    if (this.lineType === LineType.connector) {\n      throw new Error('Connector line type not supported for line overlap');\n    }\n\n    const color = lineColor(this.medium);\n    const width = lineWidth(this.lineType) + 1;\n    const h = width / 2;\n\n    return html`\n      <svg\n        class=\"line\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          mask=\"url(#clip)\"\n          d=\"M${12 - h} -1V25h${width}V-1z\"\n          fill=\"var(${color.inner})\"\n          stroke=\"var(${color.outer})\"\n        />\n\n        <path\n          d=\"M-1 ${12 - h}H25v${width}H-1z\"\n          fill=\"var(${color.inner})\"\n          stroke=\"var(${color.outer})\"\n        />\n\n        <defs>\n          <mask id=\"clip\">\n            <rect x=\"0\" y=\"0\" width=\"24\" height=\"24\" fill=\"white\" />\n            <rect\n              x=\"0\"\n              y=\"${12 - 2 - h}\"\n              width=\"24\"\n              height=\"${width + 4}\"\n              fill=\"black\"\n            />\n          </mask>\n        </defs>\n      </svg>\n    `;\n  }\n\n  static override styles = css`\n    :host {\n      display: block;\n      line-height: 0;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-line-overlap': ObcLineOverlap;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAKa,IAAA,iBAAN,cAA6B,WAAW;AAAA,EAAxC,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,SAAqB,WAAW;AAChC,SAAA,WAAqB,SAAS;AAAA,EAAA;AAAA,EAE/C,SAAS;AACZ,QAAA,KAAK,aAAa,SAAS,WAAW;AAClC,YAAA,IAAI,MAAM,oDAAoD;AAAA,IACtE;AAEM,UAAA,QAAQ,UAAU,KAAK,MAAM;AACnC,UAAM,QAAQ,UAAU,KAAK,QAAQ,IAAI;AACzC,UAAM,IAAI,QAAQ;AAEX,WAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAWK,KAAK,CAAC,UAAU,KAAK;AAAA,sBACf,MAAM,KAAK;AAAA,wBACT,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,mBAIhB,KAAK,CAAC,OAAO,KAAK;AAAA,sBACf,MAAM,KAAK;AAAA,wBACT,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAQhB,KAAK,IAAI,CAAC;AAAA;AAAA,wBAEL,QAAQ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAO/B;AAQF;AAzDa,eAmDK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAlDC,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GADb,eACe,WAAA,UAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAFb,eAEe,WAAA,YAAA,CAAA;AAFf,iBAAN,gBAAA;AAAA,EADN,cAAc,kBAAkB;AAAA,GACpB,cAAA;"}
+{"version":3,"file":"line-overlap.js","sources":["../../../src/automation/line-overlap/line-overlap.ts"],"sourcesContent":["import {LitElement, css, html} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {LineMedium, LineType, lineColor, lineWidth} from '..';\n\n@customElement('obc-line-overlap')\nexport class ObcLineOverlap extends LitElement {\n  @property({type: String}) medium: LineMedium = LineMedium.normal;\n  @property({type: String}) lineType: LineType = LineType.fluid;\n\n  override render() {\n    if (this.lineType === LineType.connector) {\n      throw new Error('Connector line type not supported for line overlap');\n    }\n\n    const color = lineColor(this.medium);\n    const width = lineWidth(this.lineType) + 1;\n    const h = width / 2;\n\n    return html`\n      <svg\n        class=\"line\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          mask=\"url(#clip)\"\n          d=\"M${12 - h} -1V25h${width}V-1z\"\n          fill=\"var(${color.inner})\"\n          stroke=\"var(${color.outer})\"\n        />\n\n        <path\n          d=\"M-1 ${12 - h}H25v${width}H-1z\"\n          fill=\"var(${color.inner})\"\n          stroke=\"var(${color.outer})\"\n        />\n\n        <defs>\n          <mask id=\"clip\">\n            <rect x=\"0\" y=\"0\" width=\"24\" height=\"24\" fill=\"white\" />\n            <rect\n              x=\"0\"\n              y=\"${12 - 2 - h}\"\n              width=\"24\"\n              height=\"${width + 4}\"\n              fill=\"black\"\n            />\n          </mask>\n        </defs>\n      </svg>\n    `;\n  }\n\n  static override styles = css`\n    :host {\n      display: block;\n      line-height: 0;\n    }\n\n    svg {\n      position: relative;\n      left: -12px;\n      top: -12px;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-line-overlap': ObcLineOverlap;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAKa,IAAA,iBAAN,cAA6B,WAAW;AAAA,EAAxC,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,SAAqB,WAAW;AAChC,SAAA,WAAqB,SAAS;AAAA,EAAA;AAAA,EAE/C,SAAS;AACZ,QAAA,KAAK,aAAa,SAAS,WAAW;AAClC,YAAA,IAAI,MAAM,oDAAoD;AAAA,IACtE;AAEM,UAAA,QAAQ,UAAU,KAAK,MAAM;AACnC,UAAM,QAAQ,UAAU,KAAK,QAAQ,IAAI;AACzC,UAAM,IAAI,QAAQ;AAEX,WAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAWK,KAAK,CAAC,UAAU,KAAK;AAAA,sBACf,MAAM,KAAK;AAAA,wBACT,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,mBAIhB,KAAK,CAAC,OAAO,KAAK;AAAA,sBACf,MAAM,KAAK;AAAA,wBACT,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAQhB,KAAK,IAAI,CAAC;AAAA;AAAA,wBAEL,QAAQ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAO/B;AAcF;AA/Da,eAmDK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAlDC,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GADb,eACe,WAAA,UAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAFb,eAEe,WAAA,YAAA,CAAA;AAFf,iBAAN,gBAAA;AAAA,EADN,cAAc,kBAAkB;AAAA,GACpB,cAAA;"}

package/dist/automation/three-way-line/three-way-line.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"three-way-line.d.ts","sourceRoot":"","sources":["../../../src/automation/three-way-line/three-way-line.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAE1C,OAAO,EAAC,UAAU,EAAE,QAAQ,EAAuB,MAAM,IAAI,CAAC;AAE9D,oBAAY,qBAAqB;IAC/B,GAAG,QAAQ;IACX,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,IAAI,SAAS;CACd;AAED,qBACa,eAAgB,SAAQ,UAAU;IACnB,MAAM,EAAE,UAAU,CAAqB;IACvC,SAAS,EAAE,qBAAqB,CAC9B;IACF,QAAQ,EAAE,QAAQ,CAAkB;IAErD,MAAM;IAkFf,OAAgB,MAAM,0BAKpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,eAAe,CAAC;KACvC;CACF"}
+{"version":3,"file":"three-way-line.d.ts","sourceRoot":"","sources":["../../../src/automation/three-way-line/three-way-line.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAE1C,OAAO,EAAC,UAAU,EAAE,QAAQ,EAAuB,MAAM,IAAI,CAAC;AAE9D,oBAAY,qBAAqB;IAC/B,GAAG,QAAQ;IACX,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,IAAI,SAAS;CACd;AAED,qBACa,eAAgB,SAAQ,UAAU;IACnB,MAAM,EAAE,UAAU,CAAqB;IACvC,SAAS,EAAE,qBAAqB,CAC9B;IACF,QAAQ,EAAE,QAAQ,CAAkB;IAErD,MAAM;IAkFf,OAAgB,MAAM,0BAWpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,eAAe,CAAC;KACvC;CACF"}

package/dist/automation/three-way-line/three-way-line.js

@@ -110,6 +110,12 @@ ObcThreeWayLine.styles = css`
       display: block;
       line-height: 0;
     }
+
+    svg {
+      position: relative;
+      top: -12px;
+      left: -12px;
+    }
   `;
 __decorateClass([
   property({ type: String })

package/dist/automation/three-way-line/three-way-line.js.map

@@ -1 +1 @@
-{"version":3,"file":"three-way-line.js","sources":["../../../src/automation/three-way-line/three-way-line.ts"],"sourcesContent":["import {LitElement, css, html} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {LineMedium, LineType, lineColor, lineWidth} from '..';\n\nexport enum ThreeWayLineDirection {\n  top = 'top',\n  right = 'right',\n  bottom = 'bottom',\n  left = 'left',\n}\n\n@customElement('obc-three-way-line')\nexport class ObcThreeWayLine extends LitElement {\n  @property({type: String}) medium: LineMedium = LineMedium.normal;\n  @property({type: String}) direction: ThreeWayLineDirection =\n    ThreeWayLineDirection.top;\n  @property({type: String}) lineType: LineType = LineType.fluid;\n\n  override render() {\n    let rotation = 0;\n    if (this.direction === ThreeWayLineDirection.top) {\n      rotation = 180;\n    } else if (this.direction === ThreeWayLineDirection.right) {\n      rotation = 270;\n    } else if (this.direction === ThreeWayLineDirection.bottom) {\n      rotation = 0;\n    } else if (this.direction === ThreeWayLineDirection.left) {\n      rotation = 90;\n    }\n\n    if (this.lineType === LineType.connector) {\n      return html`\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          transform=\"rotate(${rotation})\"\n        >\n          <path\n            d=\"M10 11.5H14V12.5L10 12.5V11.5Z\"\n            fill=\"var(--element-neutral-color)\"\n          />\n          <path\n            d=\"M4 11.5H8V12.5L4 12.5V11.5Z\"\n            fill=\"var(--element-neutral-color)\"\n          />\n          <path\n            d=\"M0 11.5H2L2 12.5L0 12.5V11.5Z\"\n            fill=\"var(--element-neutral-color)\"\n          />\n          <path\n            d=\"M22 11.5L24 11.5V12.5L22 12.5V11.5Z\"\n            fill=\"var(--element-neutral-color)\"\n          />\n          <path\n            d=\"M16 11.5H20V12.5L16 12.5V11.5Z\"\n            fill=\"var(--element-neutral-color)\"\n          />\n          <path\n            d=\"M12.5 24V22.1667H11.5V24H12.5Z\"\n            fill=\"var(--element-neutral-color)\"\n          />\n          <path\n            d=\"M12.5 20.3333L12.5 16.6667H11.5L11.5 20.3333H12.5Z\"\n            fill=\"var(--element-neutral-color)\"\n          />\n          <path\n            d=\"M12.5 14.8333V13L11.5 13V14.8333H12.5Z\"\n            fill=\"var(--element-neutral-color)\"\n          />\n        </svg>\n      `;\n    }\n\n    const color = lineColor(this.medium);\n    const width = lineWidth(this.lineType) + 1;\n    const h = width / 2;\n    const c = 13 - h; // inner corner lenght\n\n    return html`\n      <svg\n        class=\"line\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        transform=\"rotate(${rotation})\"\n      >\n        <path\n          d=\"M-1 ${12 + h} v${-width}h26v${width}h-${c}v${c}h-${width}v-${c}Z\"\n          fill=\"var(${color.inner})\"\n          stroke=\"var(${color.outer})\"\n        />\n      </svg>\n    `;\n  }\n\n  static override styles = css`\n    :host {\n      display: block;\n      line-height: 0;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-three-way-line': ObcThreeWayLine;\n  }\n}\n"],"names":["ThreeWayLineDirection"],"mappings":";;;;;;;;;;;;;;AAIY,IAAA,0CAAAA,2BAAL;AACLA,yBAAA,KAAM,IAAA;AACNA,yBAAA,OAAQ,IAAA;AACRA,yBAAA,QAAS,IAAA;AACTA,yBAAA,MAAO,IAAA;AAJGA,SAAAA;AAAA,GAAA,yBAAA,CAAA,CAAA;AAQC,IAAA,kBAAN,cAA8B,WAAW;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,SAAqB,WAAW;AAExD,SAAA,YAAA;AACwB,SAAA,WAAqB,SAAS;AAAA,EAAA;AAAA,EAE/C,SAAS;AAChB,QAAI,WAAW;AACX,QAAA,KAAK,cAAc,OAA2B;AACrC,iBAAA;AAAA,IAAA,WACF,KAAK,cAAc,SAA6B;AAC9C,iBAAA;AAAA,IAAA,WACF,KAAK,cAAc,UAA8B;AAC/C,iBAAA;AAAA,IAAA,WACF,KAAK,cAAc,QAA4B;AAC7C,iBAAA;AAAA,IACb;AAEI,QAAA,KAAK,aAAa,SAAS,WAAW;AACjC,aAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAOiB,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAoClC;AAEM,UAAA,QAAQ,UAAU,KAAK,MAAM;AACnC,UAAM,QAAQ,UAAU,KAAK,QAAQ,IAAI;AACzC,UAAM,IAAI,QAAQ;AAClB,UAAM,IAAI,KAAK;AAER,WAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAQiB,QAAQ;AAAA;AAAA;AAAA,mBAGjB,KAAK,CAAC,KAAK,CAAC,KAAK,OAAO,KAAK,KAAK,CAAC,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC;AAAA,sBACrD,MAAM,KAAK;AAAA,wBACT,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,EAIjC;AAQF;AA9Fa,gBAwFK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAvFC,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GADb,gBACe,WAAA,UAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAFb,gBAEe,WAAA,aAAA,CAAA;AAEA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAJb,gBAIe,WAAA,YAAA,CAAA;AAJf,kBAAN,gBAAA;AAAA,EADN,cAAc,oBAAoB;AAAA,GACtB,eAAA;"}
+{"version":3,"file":"three-way-line.js","sources":["../../../src/automation/three-way-line/three-way-line.ts"],"sourcesContent":["import {LitElement, css, html} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {LineMedium, LineType, lineColor, lineWidth} from '..';\n\nexport enum ThreeWayLineDirection {\n  top = 'top',\n  right = 'right',\n  bottom = 'bottom',\n  left = 'left',\n}\n\n@customElement('obc-three-way-line')\nexport class ObcThreeWayLine extends LitElement {\n  @property({type: String}) medium: LineMedium = LineMedium.normal;\n  @property({type: String}) direction: ThreeWayLineDirection =\n    ThreeWayLineDirection.top;\n  @property({type: String}) lineType: LineType = LineType.fluid;\n\n  override render() {\n    let rotation = 0;\n    if (this.direction === ThreeWayLineDirection.top) {\n      rotation = 180;\n    } else if (this.direction === ThreeWayLineDirection.right) {\n      rotation = 270;\n    } else if (this.direction === ThreeWayLineDirection.bottom) {\n      rotation = 0;\n    } else if (this.direction === ThreeWayLineDirection.left) {\n      rotation = 90;\n    }\n\n    if (this.lineType === LineType.connector) {\n      return html`\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          transform=\"rotate(${rotation})\"\n        >\n          <path\n            d=\"M10 11.5H14V12.5L10 12.5V11.5Z\"\n            fill=\"var(--element-neutral-color)\"\n          />\n          <path\n            d=\"M4 11.5H8V12.5L4 12.5V11.5Z\"\n            fill=\"var(--element-neutral-color)\"\n          />\n          <path\n            d=\"M0 11.5H2L2 12.5L0 12.5V11.5Z\"\n            fill=\"var(--element-neutral-color)\"\n          />\n          <path\n            d=\"M22 11.5L24 11.5V12.5L22 12.5V11.5Z\"\n            fill=\"var(--element-neutral-color)\"\n          />\n          <path\n            d=\"M16 11.5H20V12.5L16 12.5V11.5Z\"\n            fill=\"var(--element-neutral-color)\"\n          />\n          <path\n            d=\"M12.5 24V22.1667H11.5V24H12.5Z\"\n            fill=\"var(--element-neutral-color)\"\n          />\n          <path\n            d=\"M12.5 20.3333L12.5 16.6667H11.5L11.5 20.3333H12.5Z\"\n            fill=\"var(--element-neutral-color)\"\n          />\n          <path\n            d=\"M12.5 14.8333V13L11.5 13V14.8333H12.5Z\"\n            fill=\"var(--element-neutral-color)\"\n          />\n        </svg>\n      `;\n    }\n\n    const color = lineColor(this.medium);\n    const width = lineWidth(this.lineType) + 1;\n    const h = width / 2;\n    const c = 13 - h; // inner corner lenght\n\n    return html`\n      <svg\n        class=\"line\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        transform=\"rotate(${rotation})\"\n      >\n        <path\n          d=\"M-1 ${12 + h} v${-width}h26v${width}h-${c}v${c}h-${width}v-${c}Z\"\n          fill=\"var(${color.inner})\"\n          stroke=\"var(${color.outer})\"\n        />\n      </svg>\n    `;\n  }\n\n  static override styles = css`\n    :host {\n      display: block;\n      line-height: 0;\n    }\n\n    svg {\n      position: relative;\n      top: -12px;\n      left: -12px;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-three-way-line': ObcThreeWayLine;\n  }\n}\n"],"names":["ThreeWayLineDirection"],"mappings":";;;;;;;;;;;;;;AAIY,IAAA,0CAAAA,2BAAL;AACLA,yBAAA,KAAM,IAAA;AACNA,yBAAA,OAAQ,IAAA;AACRA,yBAAA,QAAS,IAAA;AACTA,yBAAA,MAAO,IAAA;AAJGA,SAAAA;AAAA,GAAA,yBAAA,CAAA,CAAA;AAQC,IAAA,kBAAN,cAA8B,WAAW;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,SAAqB,WAAW;AAExD,SAAA,YAAA;AACwB,SAAA,WAAqB,SAAS;AAAA,EAAA;AAAA,EAE/C,SAAS;AAChB,QAAI,WAAW;AACX,QAAA,KAAK,cAAc,OAA2B;AACrC,iBAAA;AAAA,IAAA,WACF,KAAK,cAAc,SAA6B;AAC9C,iBAAA;AAAA,IAAA,WACF,KAAK,cAAc,UAA8B;AAC/C,iBAAA;AAAA,IAAA,WACF,KAAK,cAAc,QAA4B;AAC7C,iBAAA;AAAA,IACb;AAEI,QAAA,KAAK,aAAa,SAAS,WAAW;AACjC,aAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAOiB,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAoClC;AAEM,UAAA,QAAQ,UAAU,KAAK,MAAM;AACnC,UAAM,QAAQ,UAAU,KAAK,QAAQ,IAAI;AACzC,UAAM,IAAI,QAAQ;AAClB,UAAM,IAAI,KAAK;AAER,WAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAQiB,QAAQ;AAAA;AAAA;AAAA,mBAGjB,KAAK,CAAC,KAAK,CAAC,KAAK,OAAO,KAAK,KAAK,CAAC,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC;AAAA,sBACrD,MAAM,KAAK;AAAA,wBACT,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,EAIjC;AAcF;AApGa,gBAwFK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAvFC,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GADb,gBACe,WAAA,UAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAFb,gBAEe,WAAA,aAAA,CAAA;AAEA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAJb,gBAIe,WAAA,YAAA,CAAA;AAJf,kBAAN,gBAAA;AAAA,EADN,cAAc,oBAAoB;AAAA,GACtB,eAAA;"}

package/dist/automation/vertical-line/vertical-line.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vertical-line.d.ts","sourceRoot":"","sources":["../../../src/automation/vertical-line/vertical-line.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAE1C,OAAO,EAAC,UAAU,EAAa,QAAQ,EAAY,MAAM,UAAU,CAAC;AAMpE,qBACa,eAAgB,SAAQ,UAAU;IACnB,MAAM,EAAE,UAAU,CAAqB;IACvC,QAAQ,EAAE,QAAQ,CAAkB;IACpC,MAAM,EAAE,MAAM,CAAK;IAEpC,MAAM;IAgEf,OAAgB,MAAM,0BAUpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}
+{"version":3,"file":"vertical-line.d.ts","sourceRoot":"","sources":["../../../src/automation/vertical-line/vertical-line.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAE1C,OAAO,EAAC,UAAU,EAAa,QAAQ,EAAY,MAAM,UAAU,CAAC;AAMpE,qBACa,eAAgB,SAAQ,UAAU;IACnB,MAAM,EAAE,UAAU,CAAqB;IACvC,QAAQ,EAAE,QAAQ,CAAkB;IACpC,MAAM,EAAE,MAAM,CAAK;IAEpC,MAAM;IAgEf,OAAgB,MAAM,0BAWpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}

package/dist/automation/vertical-line/vertical-line.js

@@ -88,9 +88,10 @@ ObcVerticalLine.styles = css`
       line-height: 0;
     }
 
-    .line {
+    svg {
       position: relative;
       top: -0.5px;
+      left: -12px;
     }
   `;
 __decorateClass([

package/dist/automation/vertical-line/vertical-line.js.map

@@ -1 +1 @@
-{"version":3,"file":"vertical-line.js","sources":["../../../src/automation/vertical-line/vertical-line.ts"],"sourcesContent":["import {LitElement, html, css} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {LineMedium, lineColor, LineType, lineWidth} from '../index';\n\n/* Vertical line component\n *\n * The vertical line is 24px * length + 1px. +1 px to make sure that connecting lines are overlapping, to hide the gap between them.\n */\n@customElement('obc-vertical-line')\nexport class ObcVerticalLine extends LitElement {\n  @property({type: String}) medium: LineMedium = LineMedium.normal;\n  @property({type: String}) lineType: LineType = LineType.fluid;\n  @property({type: Number}) length: number = 1;\n\n  override render() {\n    if (this.lineType === LineType.connector) {\n      const length = this.length * 24;\n      return html`<svg\n        width=\"24\"\n        height=\"${length}\"\n        viewBox=\"0 0 24 ${length}\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <line\n          y1=\"0\"\n          x1=\"12\"\n          y2=\"${length}\"\n          x2=\"12\"\n          stroke-width=\"1\"\n          stroke=\"var(--element-neutral-color)\"\n          stroke-dasharray=\"4,2\"\n          stroke-dashoffset=\"2\"\n        />\n      </svg> `;\n    }\n\n    const length = this.length * 24 + 1;\n    const color = lineColor(this.medium);\n    const width = lineWidth(this.lineType);\n    return html`\n      <div class=\"wrapper\" style=\"width: 24px; height: ${this.length * 24}px;\">\n        <svg\n          class=\"line\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 -.5  24 ${length}\"\n          width=\"24\"\n          height=${length}\n        >\n          <line\n            y1=\"-.5\"\n            x1=\"12\"\n            y2=\"${length - 0.5}\"\n            x2=\"12\"\n            stroke-width=${width}\n            stroke=\"var(${color.inner})\"\n          />\n          <line\n            y1=\"-.5\"\n            x1=${12 - 0.5 - width / 2}\n            y2=\"${length - 0.5}\"\n            x2=${12 - 0.5 - width / 2}\n            stroke-width=\"1\"\n            stroke=\"var(${color.outer})\"\n          />\n          <line\n            y1=\"-.5\"\n            x1=${12 + 0.5 + width / 2}\n            y2=\"${length - 0.5}\"\n            x2=${12 + 0.5 + width / 2}\n            stroke-width=\"1\"\n            stroke=\"var(${color.outer})\"\n          />\n        </svg>\n      </div>\n    `;\n  }\n\n  static override styles = css`\n    :host {\n      display: block;\n      line-height: 0;\n    }\n\n    .line {\n      position: relative;\n      top: -0.5px;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-vertical-line': ObcVerticalLine;\n  }\n}\n"],"names":["length"],"mappings":";;;;;;;;;;;;;;AASa,IAAA,kBAAN,cAA8B,WAAW;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,SAAqB,WAAW;AAChC,SAAA,WAAqB,SAAS;AACb,SAAA,SAAA;AAAA,EAAA;AAAA,EAElC,SAAS;AACZ,QAAA,KAAK,aAAa,SAAS,WAAW;AAClCA,YAAAA,UAAS,KAAK,SAAS;AACtB,aAAA;AAAA;AAAA,kBAEKA,OAAM;AAAA,0BACEA,OAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAOhBA,OAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQlB;AAEM,UAAA,SAAS,KAAK,SAAS,KAAK;AAC5B,UAAA,QAAQ,UAAU,KAAK,MAAM;AAC7B,UAAA,QAAQ,UAAU,KAAK,QAAQ;AAC9B,WAAA;AAAA,yDAC8C,KAAK,SAAS,EAAE;AAAA;AAAA;AAAA;AAAA,+BAI1C,MAAM;AAAA;AAAA,mBAElB,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKP,SAAS,GAAG;AAAA;AAAA,2BAEH,KAAK;AAAA,0BACN,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,iBAIpB,KAAK,MAAM,QAAQ,CAAC;AAAA,kBACnB,SAAS,GAAG;AAAA,iBACb,KAAK,MAAM,QAAQ,CAAC;AAAA;AAAA,0BAEX,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,iBAIpB,KAAK,MAAM,QAAQ,CAAC;AAAA,kBACnB,SAAS,GAAG;AAAA,iBACb,KAAK,MAAM,QAAQ,CAAC;AAAA;AAAA,0BAEX,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,EAKnC;AAaF;AAhFa,gBAqEK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AApEC,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GADb,gBACe,WAAA,UAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAFb,gBAEe,WAAA,YAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAHb,gBAGe,WAAA,UAAA,CAAA;AAHf,kBAAN,gBAAA;AAAA,EADN,cAAc,mBAAmB;AAAA,GACrB,eAAA;"}
+{"version":3,"file":"vertical-line.js","sources":["../../../src/automation/vertical-line/vertical-line.ts"],"sourcesContent":["import {LitElement, html, css} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {LineMedium, lineColor, LineType, lineWidth} from '../index';\n\n/* Vertical line component\n *\n * The vertical line is 24px * length + 1px. +1 px to make sure that connecting lines are overlapping, to hide the gap between them.\n */\n@customElement('obc-vertical-line')\nexport class ObcVerticalLine extends LitElement {\n  @property({type: String}) medium: LineMedium = LineMedium.normal;\n  @property({type: String}) lineType: LineType = LineType.fluid;\n  @property({type: Number}) length: number = 1;\n\n  override render() {\n    if (this.lineType === LineType.connector) {\n      const length = this.length * 24;\n      return html`<svg\n        width=\"24\"\n        height=\"${length}\"\n        viewBox=\"0 0 24 ${length}\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <line\n          y1=\"0\"\n          x1=\"12\"\n          y2=\"${length}\"\n          x2=\"12\"\n          stroke-width=\"1\"\n          stroke=\"var(--element-neutral-color)\"\n          stroke-dasharray=\"4,2\"\n          stroke-dashoffset=\"2\"\n        />\n      </svg> `;\n    }\n\n    const length = this.length * 24 + 1;\n    const color = lineColor(this.medium);\n    const width = lineWidth(this.lineType);\n    return html`\n      <div class=\"wrapper\" style=\"width: 24px; height: ${this.length * 24}px;\">\n        <svg\n          class=\"line\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 -.5  24 ${length}\"\n          width=\"24\"\n          height=${length}\n        >\n          <line\n            y1=\"-.5\"\n            x1=\"12\"\n            y2=\"${length - 0.5}\"\n            x2=\"12\"\n            stroke-width=${width}\n            stroke=\"var(${color.inner})\"\n          />\n          <line\n            y1=\"-.5\"\n            x1=${12 - 0.5 - width / 2}\n            y2=\"${length - 0.5}\"\n            x2=${12 - 0.5 - width / 2}\n            stroke-width=\"1\"\n            stroke=\"var(${color.outer})\"\n          />\n          <line\n            y1=\"-.5\"\n            x1=${12 + 0.5 + width / 2}\n            y2=\"${length - 0.5}\"\n            x2=${12 + 0.5 + width / 2}\n            stroke-width=\"1\"\n            stroke=\"var(${color.outer})\"\n          />\n        </svg>\n      </div>\n    `;\n  }\n\n  static override styles = css`\n    :host {\n      display: block;\n      line-height: 0;\n    }\n\n    svg {\n      position: relative;\n      top: -0.5px;\n      left: -12px;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-vertical-line': ObcVerticalLine;\n  }\n}\n"],"names":["length"],"mappings":";;;;;;;;;;;;;;AASa,IAAA,kBAAN,cAA8B,WAAW;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,SAAqB,WAAW;AAChC,SAAA,WAAqB,SAAS;AACb,SAAA,SAAA;AAAA,EAAA;AAAA,EAElC,SAAS;AACZ,QAAA,KAAK,aAAa,SAAS,WAAW;AAClCA,YAAAA,UAAS,KAAK,SAAS;AACtB,aAAA;AAAA;AAAA,kBAEKA,OAAM;AAAA,0BACEA,OAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAOhBA,OAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQlB;AAEM,UAAA,SAAS,KAAK,SAAS,KAAK;AAC5B,UAAA,QAAQ,UAAU,KAAK,MAAM;AAC7B,UAAA,QAAQ,UAAU,KAAK,QAAQ;AAC9B,WAAA;AAAA,yDAC8C,KAAK,SAAS,EAAE;AAAA;AAAA;AAAA;AAAA,+BAI1C,MAAM;AAAA;AAAA,mBAElB,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKP,SAAS,GAAG;AAAA;AAAA,2BAEH,KAAK;AAAA,0BACN,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,iBAIpB,KAAK,MAAM,QAAQ,CAAC;AAAA,kBACnB,SAAS,GAAG;AAAA,iBACb,KAAK,MAAM,QAAQ,CAAC;AAAA;AAAA,0BAEX,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,iBAIpB,KAAK,MAAM,QAAQ,CAAC;AAAA,kBACnB,SAAS,GAAG;AAAA,iBACb,KAAK,MAAM,QAAQ,CAAC;AAAA;AAAA,0BAEX,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,EAKnC;AAcF;AAjFa,gBAqEK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AApEC,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GADb,gBACe,WAAA,UAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAFb,gBAEe,WAAA,YAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAHb,gBAGe,WAAA,UAAA,CAAA;AAHf,kBAAN,gBAAA;AAAA,EADN,cAAc,mBAAmB;AAAA,GACrB,eAAA;"}

package/dist/storybook-util.d.ts

@@ -5,7 +5,8 @@ import './icons/icon-04-day';
 import './icons/icon-04-brilliance-low';
 import './icons/icon-04-brilliance-high';
 import './icons/icon-06-ship';
-import { TemplateResult } from 'lit';
+import { HTMLTemplateResult, TemplateResult } from 'lit';
 export declare const iconIds: string[];
 export declare function iconIdToIconHtml(id: string, attributes?: Record<string, string>): TemplateResult;
+export declare function crossDecorator(story: () => unknown): HTMLTemplateResult;
 //# sourceMappingURL=storybook-util.d.ts.map

package/dist/storybook-util.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"storybook-util.d.ts","sourceRoot":"","sources":["../src/storybook-util.ts"],"names":[],"mappings":"AAAA,OAAO,6BAA6B,CAAC;AACrC,OAAO,wBAAwB,CAAC;AAChC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,gCAAgC,CAAC;AACxC,OAAO,iCAAiC,CAAC;AACzC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,EAAC,cAAc,EAAO,MAAM,KAAK,CAAC;AAGzC,eAAO,MAAM,OAAO,UAQZ,CAAC;AAET,wBAAgB,gBAAgB,CAC9B,EAAE,EAAE,MAAM,EACV,UAAU,GAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAM,GACtC,cAAc,CAyBhB"}
+{"version":3,"file":"storybook-util.d.ts","sourceRoot":"","sources":["../src/storybook-util.ts"],"names":[],"mappings":"AAAA,OAAO,6BAA6B,CAAC;AACrC,OAAO,wBAAwB,CAAC;AAChC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,gCAAgC,CAAC;AACxC,OAAO,iCAAiC,CAAC;AACzC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,EAAC,kBAAkB,EAAE,cAAc,EAAO,MAAM,KAAK,CAAC;AAG7D,eAAO,MAAM,OAAO,UAQZ,CAAC;AAET,wBAAgB,gBAAgB,CAC9B,EAAE,EAAE,MAAM,EACV,UAAU,GAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAM,GACtC,cAAc,CAyBhB;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,OAAO,GAAG,kBAAkB,CAsCvE"}

package/dist/storybook-util.js

@@ -42,7 +42,47 @@ function iconIdToIconHtml(id, attributes = {}) {
       throw new Error(`Unknown icon id: ${id}`);
   }
 }
+function crossDecorator(story) {
+  return html` <style>
+      .wrapper {
+        width: 100%;
+        height: 100vh;
+        position: relative;
+      }
+
+      .wrapper > * {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+      }
+
+      .wrapper::before {
+        content: '';
+        display: block;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 1px;
+        left: calc(50% - 0.5px);
+        background-color: rgb(0, 0, 0, 0.3);
+      }
+
+      .wrapper::after {
+        content: '';
+        display: block;
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: 1px;
+        top: calc(50% - 0.5px);
+        background-color: rgb(0, 0, 0, 0.3);
+        z-index: -100;
+      }
+    </style>
+    <div class="wrapper">${story()}</div>`;
+}
 export {
+  crossDecorator,
   iconIdToIconHtml,
   iconIds
 };

package/dist/storybook-util.js.map

@@ -1 +1 @@
-{"version":3,"file":"storybook-util.js","sources":["../src/storybook-util.ts"],"sourcesContent":["import './icons/icon-01-placeholder';\nimport './icons/icon-01-search';\nimport './icons/icon-06-radar';\nimport './icons/icon-04-day';\nimport './icons/icon-04-brilliance-low';\nimport './icons/icon-04-brilliance-high';\nimport './icons/icon-06-ship';\nimport {TemplateResult, html} from 'lit';\nimport {spread} from '@open-wc/lit-helpers';\n\nexport const iconIds = [\n  '01-placeholder',\n  '01-search',\n  '04-brilliance-low',\n  '04-brilliance-high',\n  '06-radar',\n  '04-day',\n  '06-ship',\n].sort();\n\nexport function iconIdToIconHtml(\n  id: string,\n  attributes: Record<string, string> = {}\n): TemplateResult {\n  switch (id) {\n    case '01-placeholder':\n      return html`<obi-01-placeholder\n        ${spread(attributes)}\n      ></obi-01-placeholder>`;\n    case '01-search':\n      return html`<obi-01-search ${spread(attributes)}></obi-01-search>`;\n    case '04-day':\n      return html`<obi-04-day ${spread(attributes)}></obi-04-day>`;\n    case '04-brilliance-low':\n      return html`<obi-04-brilliance-low\n        ${spread(attributes)}\n      ></obi-04-brilliance-low>`;\n    case '04-brilliance-high':\n      return html`<obi-04-brilliance-high\n        ${spread(attributes)}\n      ></obi-04-brilliance-high>`;\n    case '06-radar':\n      return html`<obi-06-radar ${spread(attributes)}></obi-06-radar>`;\n    case '06-ship':\n      return html`<obi-06-ship ${spread(attributes)}></obi-06-ship>`;\n    default:\n      throw new Error(`Unknown icon id: ${id}`);\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;AAUO,MAAM,UAAU;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK;AAEA,SAAS,iBACd,IACA,aAAqC,IACrB;AAChB,UAAQ,IAAI;AAAA,IACV,KAAK;AACI,aAAA;AAAA,UACH,OAAO,UAAU,CAAC;AAAA;AAAA,IAExB,KAAK;AACI,aAAA,sBAAsB,OAAO,UAAU,CAAC;AAAA,IACjD,KAAK;AACI,aAAA,mBAAmB,OAAO,UAAU,CAAC;AAAA,IAC9C,KAAK;AACI,aAAA;AAAA,UACH,OAAO,UAAU,CAAC;AAAA;AAAA,IAExB,KAAK;AACI,aAAA;AAAA,UACH,OAAO,UAAU,CAAC;AAAA;AAAA,IAExB,KAAK;AACI,aAAA,qBAAqB,OAAO,UAAU,CAAC;AAAA,IAChD,KAAK;AACI,aAAA,oBAAoB,OAAO,UAAU,CAAC;AAAA,IAC/C;AACE,YAAM,IAAI,MAAM,oBAAoB,EAAE,EAAE;AAAA,EAC5C;AACF;"}
+{"version":3,"file":"storybook-util.js","sources":["../src/storybook-util.ts"],"sourcesContent":["import './icons/icon-01-placeholder';\nimport './icons/icon-01-search';\nimport './icons/icon-06-radar';\nimport './icons/icon-04-day';\nimport './icons/icon-04-brilliance-low';\nimport './icons/icon-04-brilliance-high';\nimport './icons/icon-06-ship';\nimport {HTMLTemplateResult, TemplateResult, html} from 'lit';\nimport {spread} from '@open-wc/lit-helpers';\n\nexport const iconIds = [\n  '01-placeholder',\n  '01-search',\n  '04-brilliance-low',\n  '04-brilliance-high',\n  '06-radar',\n  '04-day',\n  '06-ship',\n].sort();\n\nexport function iconIdToIconHtml(\n  id: string,\n  attributes: Record<string, string> = {}\n): TemplateResult {\n  switch (id) {\n    case '01-placeholder':\n      return html`<obi-01-placeholder\n        ${spread(attributes)}\n      ></obi-01-placeholder>`;\n    case '01-search':\n      return html`<obi-01-search ${spread(attributes)}></obi-01-search>`;\n    case '04-day':\n      return html`<obi-04-day ${spread(attributes)}></obi-04-day>`;\n    case '04-brilliance-low':\n      return html`<obi-04-brilliance-low\n        ${spread(attributes)}\n      ></obi-04-brilliance-low>`;\n    case '04-brilliance-high':\n      return html`<obi-04-brilliance-high\n        ${spread(attributes)}\n      ></obi-04-brilliance-high>`;\n    case '06-radar':\n      return html`<obi-06-radar ${spread(attributes)}></obi-06-radar>`;\n    case '06-ship':\n      return html`<obi-06-ship ${spread(attributes)}></obi-06-ship>`;\n    default:\n      throw new Error(`Unknown icon id: ${id}`);\n  }\n}\n\nexport function crossDecorator(story: () => unknown): HTMLTemplateResult {\n  return html` <style>\n      .wrapper {\n        width: 100%;\n        height: 100vh;\n        position: relative;\n      }\n\n      .wrapper > * {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n      }\n\n      .wrapper::before {\n        content: '';\n        display: block;\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 1px;\n        left: calc(50% - 0.5px);\n        background-color: rgb(0, 0, 0, 0.3);\n      }\n\n      .wrapper::after {\n        content: '';\n        display: block;\n        position: absolute;\n        left: 0;\n        right: 0;\n        height: 1px;\n        top: calc(50% - 0.5px);\n        background-color: rgb(0, 0, 0, 0.3);\n        z-index: -100;\n      }\n    </style>\n    <div class=\"wrapper\">${story()}</div>`;\n}\n"],"names":[],"mappings":";;;;;;;;;AAUO,MAAM,UAAU;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK;AAEA,SAAS,iBACd,IACA,aAAqC,IACrB;AAChB,UAAQ,IAAI;AAAA,IACV,KAAK;AACI,aAAA;AAAA,UACH,OAAO,UAAU,CAAC;AAAA;AAAA,IAExB,KAAK;AACI,aAAA,sBAAsB,OAAO,UAAU,CAAC;AAAA,IACjD,KAAK;AACI,aAAA,mBAAmB,OAAO,UAAU,CAAC;AAAA,IAC9C,KAAK;AACI,aAAA;AAAA,UACH,OAAO,UAAU,CAAC;AAAA;AAAA,IAExB,KAAK;AACI,aAAA;AAAA,UACH,OAAO,UAAU,CAAC;AAAA;AAAA,IAExB,KAAK;AACI,aAAA,qBAAqB,OAAO,UAAU,CAAC;AAAA,IAChD,KAAK;AACI,aAAA,oBAAoB,OAAO,UAAU,CAAC;AAAA,IAC/C;AACE,YAAM,IAAI,MAAM,oBAAoB,EAAE,EAAE;AAAA,EAC5C;AACF;AAEO,SAAS,eAAe,OAA0C;AAChE,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAoCkB,OAAO;AAClC;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "type": "module",
   "repository": {
     "type": "git",

package/src/automation/automation-button/automation-button.css

@@ -8,7 +8,88 @@
     } 
 }
 
+.outer-wrapper {
+    width: 0;
+    height: 0;
+}
+
 .wrapper {
+    position: absolute;
+
+    &.label-bottom {
+        top: -33px;
+        transform: translateX(-50%);
+    }
+
+    &.label-right {
+        left: -33px;
+        transform: translateY(-50%);
+    }
+
+    &.label-top{
+        bottom: -33px;
+        transform: translateX(-50%);
+    }
+
+    &.label-left {
+        right: -33px;
+        transform: translateY(-50%);
+    }
+
+    &.size-small {
+        &.label-bottom {
+            top: -25px;
+        }
+
+        &.label-right {
+            left: -25px;
+        }
+
+        &.label-top{
+            bottom: -25px;
+        }
+
+        &.label-left {
+            right: -25px;
+        }
+    }
+
+    &.size-large {
+        &.label-bottom {
+            top: -41px;
+        }
+
+        &.label-right {
+            left: -41px;
+        }
+
+        &.label-top{
+            bottom: -41px;
+        }
+
+        &.label-left {
+            right: -41px;
+        }
+    }
+
+    &.size-xl {
+        &.label-bottom {
+            top: -57px;
+        }
+
+        &.label-right {
+            left: -57px;
+        }
+
+        &.label-top{
+            bottom: -57px;
+        }
+
+        &.label-left {
+            right: -57px;
+        }
+    }
+
     display: flex;
     flex-direction: row;
     align-items: center;

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

@@ -24,11 +24,13 @@ import '../../icons/icon-08-pump-on-horisontal';
 import '../../icons/icon-08-pump-off-horisontal';
 import '../valve-analog-three-way-icon/valve-analog-three-way-icon';
 import {BadgeSize} from '../../components/badge/badge';
+import {crossDecorator} from '../../storybook-util';
 
 const meta: Meta<typeof ObcAutomationButton> = {
   title: 'Automation/Button',
   tags: ['autodocs'],
   component: 'obc-automation-button',
+  decorators: [crossDecorator],
   argTypes: {
     size: {
       options: ['small', 'regular', 'large', 'xl'],

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

@@ -159,66 +159,68 @@ export class ObcAutomationButton extends LitElement {
     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 class="outer-wrapper">
+        <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>
-        <div class="label">${labels}</div>
-      </button>
+          <div class="label">${labels}</div>
+        </button>
+      </div>
     `;
   }
 

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

@@ -6,11 +6,13 @@ import '../horizontal-line/horizontal-line';
 import '../vertical-line/vertical-line';
 import {LineMedium, LineType} from '../index';
 import {html} from 'lit';
+import {crossDecorator} from '../../storybook-util';
 
 const meta: Meta<typeof ObcAutomationReadout> = {
   title: 'Automation/Readout',
   tags: ['autodocs'],
   component: 'obc-automation-readout',
+  decorators: [crossDecorator],
   args: {
     value: 25,
     unit: '°C',
@@ -52,13 +54,7 @@ export const UsageWithPipeBottom: Story = {
       #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 */
+        left: calc(-2.5 * 24px);
       }
     </style>
     <div class="canvas">
@@ -91,14 +87,8 @@ export const UsageWithPipeTop: Story = {
 
       #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 */
+        top: 0;
+        left: calc(-2.5 * 24px);
       }
     </style>
     <div class="canvas">
@@ -131,14 +121,8 @@ export const UsageWithPipeLeft: Story = {
 
       #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);
+        left: 0;
+        top: calc(-24px * 2.5);
       }
     </style>
     <div class="canvas">
@@ -171,14 +155,7 @@ export const UsageWithPipeRight: Story = {
 
       #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;
+        top: calc(-2.5 * 24px);
       }
     </style>
     <div class="canvas">

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

@@ -15,6 +15,7 @@
     /* This is a hack to make the badge appear above the content */
     position: relative;
     top: -20px;
+    transform: translateX(-50%);
 }
 
 .badges {
@@ -54,7 +55,7 @@
 }
 
 .header {
-    width: 140px;
+    width: 150px;
     display: flex;
     align-items: center;
     justify-content: space-between;

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

@@ -5,6 +5,7 @@ import '../../components/badge/badge';
 import '../../icons/icon-08-auto';
 import '../../icons/icon-16-lock';
 import {html} from 'lit';
+import {crossDecorator} from '../../storybook-util';
 
 const meta: Meta<typeof ObcAutomationTank> = {
   title: 'Automation/Tank',
@@ -29,14 +30,7 @@ const meta: Meta<typeof ObcAutomationTank> = {
       control: {type: 'radio'},
     },
   },
-  decorators: [
-    (story) =>
-      html`<div
-        style="display: flex; justify-content: center; align-items: center; height: 100vh"
-      >
-        ${story()}
-      </div>`,
-  ],
+  decorators: [crossDecorator],
 } satisfies Meta<ObcAutomationTank>;
 
 export default meta;

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

@@ -1,10 +1,12 @@
 import type {Meta, StoryObj} from '@storybook/web-components';
 import {ObcCornerLine} from './corner-line';
 import './corner-line';
+import {crossDecorator} from '../../storybook-util';
 
 const meta: Meta<typeof ObcCornerLine> = {
   title: 'Line/Corner line',
   tags: ['autodocs'],
+  decorators: [crossDecorator],
   component: 'obc-corner-line',
   args: {},
   argTypes: {

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

@@ -149,6 +149,12 @@ export class ObcCornerLine extends LitElement {
       display: block;
       line-height: 0;
     }
+
+    svg {
+      position: relative;
+      top: -12px;
+      left: -12px;
+    }
   `;
 }
 

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

@@ -1,11 +1,13 @@
 import type {Meta, StoryObj} from '@storybook/web-components';
 import {ObcDirectionLine} from './direction-line';
 import './direction-line';
+import {crossDecorator} from '../../storybook-util';
 
 const meta: Meta<typeof ObcDirectionLine> = {
   title: 'Line/Direction',
   tags: ['autodocs'],
   component: 'obc-direction-line',
+  decorators: [crossDecorator],
   args: {},
   argTypes: {
     medium: {

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

@@ -54,6 +54,11 @@ export class ObcDirectionLine extends LitElement {
       display: block;
       line-height: 0;
     }
+
+    svg {
+      position: relative;
+      top: -12px;
+    }
   `;
 }
 

package/src/automation/end-point-line/end-point-line.stories.ts

@@ -1,11 +1,13 @@
 import type {Meta, StoryObj} from '@storybook/web-components';
 import {ObcEndPointLine} from './end-point-line';
 import './end-point-line';
+import {crossDecorator} from '../../storybook-util';
 
 const meta: Meta<typeof ObcEndPointLine> = {
   title: 'Line/End point line',
   tags: ['autodocs'],
   component: 'obc-end-point-line',
+  decorators: [crossDecorator],
   argTypes: {
     medium: {
       options: ['normal', 'empty', 'water'],