@oicl/openbridge-webcomponents 0.0.13 → 0.0.15

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;
@@ -54,10 +48,10 @@ export const VerticalWithBadges: Story = {
       .trend=${args.trend}
       .tag=${args.tag}
     >
-      <obc-badge slot="badges" size="regular" hide-number type="automation">
+      <obc-badge slot="badges" size="regular" hideNumber type="automation">
         <obi-08-auto></obi-08-auto>
       </obc-badge>
-      <obc-badge slot="badges" size="regular" hide-number type="automation">
+      <obc-badge slot="badges" size="regular" hideNumber type="automation">
         <obi-16-lock></obi-16-lock>
       </obc-badge>
     </obc-automation-tank>`;

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'],

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

@@ -57,6 +57,7 @@ export class ObcEndPointLine extends LitElement {
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
         transform="rotate(${rotation})"
+        class="${this.direction}"
       >
         <path
           d="M${12 - h} 25 V${12 + h}h-${(terminalWidth - width) /
@@ -74,6 +75,28 @@ export class ObcEndPointLine extends LitElement {
       display: block;
       line-height: 0;
     }
+
+    svg {
+      position: relative;
+
+      &.top,
+      &.bottom {
+        left: -12px;
+      }
+
+      &.bottom {
+        top: -24px;
+      }
+
+      &.left,
+      &.right {
+        top: -12px;
+      }
+
+      &.right {
+        left: -24px;
+      }
+    }
   `;
 }
 

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

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

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

@@ -78,9 +78,10 @@ export class ObcHorizontalLine extends LitElement {
       display: block;
       line-height: 0;
     }
-    .line {
+    svg {
       position: relative;
       left: -0.5px;
+      top: -12px;
     }
   `;
 }

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

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

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

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

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

@@ -1,12 +1,14 @@
 import type {Meta, StoryObj} from '@storybook/web-components';
 import {ObcLineOverlap} from './line-overlap';
 import './line-overlap';
+import {crossDecorator} from '../../storybook-util';
 
 const meta: Meta<typeof ObcLineOverlap> = {
   title: 'Line/Overlap',
   tags: ['autodocs'],
   component: 'obc-line-overlap',
   args: {},
+  decorators: [crossDecorator],
   argTypes: {
     medium: {
       options: ['normal', 'empty', 'water'],

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

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

package/src/automation/line.stories.ts

@@ -38,7 +38,7 @@ const meta: Meta = {
 
         #line1 {
           position: absolute;
-          top: calc(24px * 1);
+          top: calc(24px * 0.5);
           left: calc(24px * 0);
         }
 
@@ -51,7 +51,7 @@ const meta: Meta = {
         #line2 {
           position: absolute;
           top: calc(24px * 0);
-          left: calc(24px * 1);
+          left: calc(24px * 0.5);
         }
         #corner-2-3 {
           position: absolute;
@@ -61,7 +61,7 @@ const meta: Meta = {
 
         #line3 {
           position: absolute;
-          top: calc(24px * 1);
+          top: calc(24px * 0.5);
           left: calc(24px * 6);
         }
         #three-way {
@@ -80,7 +80,7 @@ const meta: Meta = {
         <obc-vertical-line
           medium=${args.medium}
           lineType=${args.lineType}
-          length="5"
+          length="5.5"
           id="line1"
         ></obc-vertical-line>
         <obc-corner-line

package/src/automation/three-way-line/three-way-line.stories.ts

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

package/src/automation/three-way-line/three-way-line.ts

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

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

@@ -2,7 +2,7 @@ import type {Meta, StoryObj} from '@storybook/web-components';
 import {ObcVerticalLine} from './vertical-line';
 import './vertical-line';
 import '../horizontal-line/horizontal-line';
-import {html} from 'lit';
+import {crossDecorator} from '../../storybook-util';
 
 const meta: Meta<typeof ObcVerticalLine> = {
   title: 'Line/Vertical line',
@@ -14,6 +14,7 @@ const meta: Meta<typeof ObcVerticalLine> = {
       control: {type: 'radio'},
     },
   },
+  decorators: [crossDecorator],
 } satisfies Meta<ObcVerticalLine>;
 
 export default meta;
@@ -34,38 +35,3 @@ export const Primary: Story = {
     },
   },
 };
-
-export const Complex: Story = {
-  render: () => {
-    return html`
-      <style>
-        .canvas {
-          position: relative;
-          width: 400px;
-          height: 400px;
-        }
-
-        #line1 {
-          position: absolute;
-          top: 24px;
-        }
-
-        #line2 {
-          position: absolute;
-          top: calc(24px * 3);
-          left: calc(24px * 5);
-        }
-        #line3 {
-          position: absolute;
-          top: calc(24px * 3);
-          left: calc(24px * 5);
-        }
-      </style>
-      <div class="canvas">
-        <obc-vertical-line length="5" id="line1"></obc-vertical-line>
-        <obc-vertical-line length="2" id="line2"></obc-vertical-line>
-        <obc-horizontal-line length="5" id="line3"></obc-horizontal-line>
-      </div>
-    `;
-  },
-};

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

@@ -82,9 +82,10 @@ export class ObcVerticalLine extends LitElement {
       line-height: 0;
     }
 
-    .line {
+    svg {
       position: relative;
       top: -0.5px;
+      left: -12px;
     }
   `;
 }

package/src/components/alert-button/alert-button.ts

@@ -20,14 +20,12 @@ import {classMap} from 'lit/directives/class-map.js';
  */
 @customElement('obc-alert-button')
 export class ObcAlertButton extends LitElement {
-  @property({type: Number, attribute: 'n-alerts'}) nAlerts = 0;
-  @property({type: String, attribute: 'alert-type'}) alertType = AlertType.None;
+  @property({type: Number}) nAlerts = 0;
+  @property({type: String}) alertType = AlertType.None;
   @property({type: Boolean}) standalone = false;
   @property({type: Boolean}) counter = false;
-  @property({type: Boolean, attribute: 'blink-alarm-value'}) blinkAlarmValue =
-    false;
-  @property({type: Boolean, attribute: 'blink-warning-value'})
-  blinkWarningValue = false;
+  @property({type: Boolean}) blinkAlarmValue = false;
+  @property({type: Boolean}) blinkWarningValue = false;
 
   override render() {
     let alertType = this.alertType;

package/src/components/alert-icon/alert-icon.stories.ts

@@ -23,7 +23,7 @@ const meta: Meta<typeof ObcAlertIcon> = {
   render: (args) =>
     html` <div style="width:64px;height:64px">
       <obc-alert-icon
-        ?blink-value=${args.blinkValue}
+        ?blinkvalue=${args.blinkValue}
         name=${args.name}
       ></obc-alert-icon>
     </div>`,

package/src/components/alert-icon/alert-icon.ts

@@ -25,7 +25,7 @@ export type AlertIconName = keyof typeof mapping;
  */
 @customElement('obc-alert-icon')
 export class ObcAlertIcon extends LitElement {
-  @property({type: Boolean, attribute: 'blink-value'}) blinkValue = false;
+  @property({type: Boolean}) blinkValue = false;
   @property({type: String}) name: AlertIconName = 'alarm-unack';
 
   override render() {

package/src/components/alert-menu/alert-menu.stories.ts

@@ -32,64 +32,61 @@ const meta: Meta<typeof ObcAlertMenu> = {
         <obc-alert-menu-item
           acknowledgeble
           message="Alert message with more than one line of text"
-          time-since="12m 12s"
+          timesince="12m 12s"
           time="2020-11-19T13:56:00.414000Z"
-          narrow-breakpoint-px=${args.breakpoint}
+          narrowBreakpointPx=${args.breakpoint}
         >
-          <obi-14-alarm-unack slot="icon" use-css-color></obi-14-alarm-unack>
+          <obi-14-alarm-unack slot="icon" usecsscolor></obi-14-alarm-unack>
         </obc-alert-menu-item>
         <obc-alert-menu-item
           acknowledgeble
           message="Alert message with more than one line of text"
-          time-since="12m 12s"
+          timesince="12m 12s"
           time="2020-11-19T13:56:00.414000Z"
-          narrow-breakpoint-px=${args.breakpoint}
+          narrowBreakpointPx=${args.breakpoint}
         >
-          <obi-14-alarm-unack slot="icon" use-css-color></obi-14-alarm-unack>
+          <obi-14-alarm-unack slot="icon" usecsscolor></obi-14-alarm-unack>
         </obc-alert-menu-item>
         <obc-alert-menu-item
           acknowledgeble
           message="Alert message with more than one line of text"
-          time-since="12m 12s"
+          timesince="12m 12s"
           time="2020-11-19T13:56:00.414000Z"
-          narrow-breakpoint-px=${args.breakpoint}
+          narrowBreakpointPx=${args.breakpoint}
         >
-          <obi-14-alarm-unack slot="icon" use-css-color></obi-14-alarm-unack>
+          <obi-14-alarm-unack slot="icon" usecsscolor></obi-14-alarm-unack>
         </obc-alert-menu-item>
         <obc-alert-menu-item
           acknowledgeble
           message="Alert message with more than one line of text"
-          time-since="12m 12s"
+          timesince="12m 12s"
           time="2020-11-19T13:56:00.414000Z"
-          narrow-breakpoint-px=${args.breakpoint}
+          narrowBreakpointPx=${args.breakpoint}
         >
           <obi-14-warning-unacknowledged
             slot="icon"
-            use-css-color
+            usecsscolor
           ></obi-14-warning-unacknowledged>
         </obc-alert-menu-item>
         <obc-alert-menu-item
           acknowledgeble
           message="Alert message with more than one line of text"
-          time-since="12m 12s"
+          timesince="12m 12s"
           time="2020-11-19T13:56:00.414000Z"
-          narrow-breakpoint-px=${args.breakpoint}
+          narrowBreakpointPx=${args.breakpoint}
         >
           <obi-14-warning-unacknowledged
             slot="icon"
-            use-css-color
+            usecsscolor
           ></obi-14-warning-unacknowledged>
         </obc-alert-menu-item>
         <obc-alert-menu-item
           message="Alert message with more than one line of text"
-          time-since="12m 12s"
+          timesince="12m 12s"
           time="2020-11-19T13:56:00.414000Z"
-          narrow-breakpoint-px=${args.breakpoint}
+          narrowBreakpointPx=${args.breakpoint}
         >
-          <obi-14-caution-color
-            slot="icon"
-            use-css-color
-          ></obi-14-caution-color>
+          <obi-14-caution-color slot="icon" usecsscolor></obi-14-caution-color>
         </obc-alert-menu-item>
       </obc-alert-menu>`;
   },

package/src/components/alert-menu-item/alert-menu-item.ts

@@ -11,10 +11,10 @@ import '../button/button';
 export class ObcAlertMenuItem extends LitElement {
   @property({type: String}) message = 'Message';
   @property({type: String}) time = '2021-01-01T00:00:00Z';
-  @property({type: String, attribute: 'time-since'}) timeSince = '1h';
+  @property({type: String}) timeSince = '1h';
   @property({type: Boolean}) acknowledgeble = false;
   @property({type: Boolean}) acknowledged = false;
-  @property({type: Number, attribute: 'narrow-breakpoint-px'})
+  @property({type: Number})
   narrowBreakpointPx = 400;
 
   override render() {
@@ -51,7 +51,7 @@ export class ObcAlertMenuItem extends LitElement {
             ? html`
                 <obc-button
                   class="acknowledge-button"
-                  full-width
+                  fullWidth
                   @click=${() =>
                     this.dispatchEvent(new CustomEvent('ack-click'))}
                   >ACK</obc-button

package/src/components/alert-topbar-element/alert-topbar-element.stories.ts

@@ -29,17 +29,17 @@ const meta: Meta<typeof ObcAlertTopbarElement> = {
   },
   render: (args) => html`
     <obc-alert-topbar-element
-      n-alerts=${args.nAlerts}
-      alert-type=${args.alertType}
-      max-width=${args.maxWidth}
-      ?blink-alarm-value=${args.blinkAlarmValue}
-      ?blink-warning-value=${args.blinkWarningValue}
-      ?minimized=${args.minimized}
-      ?show-ack=${args.showAck}
-      ?alert-muted=${args.alertMuted}
+      .nAlerts=${args.nAlerts}
+      .alertType=${args.alertType}
+      .maxWidth=${args.maxWidth}
+      .blinkAlarmValue=${args.blinkAlarmValue}
+      .blinkWarningValue=${args.blinkWarningValue}
+      .minimized=${args.minimized}
+      .showAck=${args.showAck}
+      .alertMuted=${args.alertMuted}
     >
       <obc-notification-message-item time="2023-01-01T13:37:01+01:00">
-        <obi-14-alarm-unack slot="icon" use-css-color></obi-14-alarm-unack>
+        <obi-14-alarm-unack slot="icon" usecsscolor></obi-14-alarm-unack>
         <div slot="message">This is a message</div>
       </obc-notification-message-item>
     </obc-alert-topbar-element>
@@ -70,15 +70,15 @@ export const Caution: Story = {
   },
   render: (args) => html`
     <obc-alert-topbar-element
-      n-alerts=${args.nAlerts}
-      alert-type=${args.alertType}
-      max-width=${args.maxWidth}
-      ?minimized=${args.minimized}
-      ?show-ack=${args.showAck}
-      ?alert-muted=${args.alertMuted}
+      .nAlerts=${args.nAlerts}
+      .alertType=${args.alertType}
+      .maxWidth=${args.maxWidth}
+      .minimized=${args.minimized}
+      .showAck=${args.showAck}
+      .alertMuted=${args.alertMuted}
     >
       <obc-notification-message-item time="2023-01-01T13:37:01+01:00">
-        <obi-14-caution-color slot="icon" use-css-color></obi-14-caution-color>
+        <obi-14-caution-color slot="icon" usecsscolor></obi-14-caution-color>
         <div slot="message">This is a message</div>
       </obc-notification-message-item>
     </obc-alert-topbar-element>
@@ -98,10 +98,10 @@ export const NoAlerts: Story = {
   },
   render: (args) =>
     html` <obc-alert-topbar-element
-      n-alerts=${args.nAlerts}
-      alert-type=${args.alertType}
-      max-width=${args.maxWidth}
-      ?minimized=${args.minimized}
+      .nAlerts=${args.nAlerts}
+      .alertType=${args.alertType}
+      .maxWidth=${args.maxWidth}
+      .minimized=${args.minimized}
     >
     </obc-alert-topbar-element>`,
 };

package/src/components/alert-topbar-element/alert-topbar-element.ts

@@ -33,17 +33,14 @@ import {classMap} from 'lit/directives/class-map.js';
  */
 @customElement('obc-alert-topbar-element')
 export class ObcAlertTopbarElement extends LitElement {
-  @property({type: Number, attribute: 'n-alerts'}) nAlerts = 0;
-  @property({type: String, attribute: 'alert-type'}) alertType: AlertType =
-    AlertType.None;
-  @property({type: Boolean, attribute: 'blink-alarm-value'}) blinkAlarmValue =
-    false;
-  @property({type: Boolean, attribute: 'blink-warning-value'})
-  blinkWarningValue = false;
-  @property({type: Boolean, attribute: 'show-ack'}) showAck = false;
-  @property({type: Boolean, attribute: 'alert-muted'}) alertMuted = false;
+  @property({type: Number}) nAlerts = 0;
+  @property({type: String}) alertType: AlertType = AlertType.None;
+  @property({type: Boolean}) blinkAlarmValue = false;
+  @property({type: Boolean}) blinkWarningValue = false;
+  @property({type: Boolean}) showAck = false;
+  @property({type: Boolean}) alertMuted = false;
   @property({type: Boolean}) minimized = false;
-  @property({type: Number, attribute: 'max-width'}) maxWidth = 480;
+  @property({type: Number}) maxWidth = 480;
 
   override render() {
     const empty = this.nAlerts === 0;
@@ -57,8 +54,8 @@ export class ObcAlertTopbarElement extends LitElement {
     if (this.minimized) {
       firstPart = html`<obc-notification-button
         icon
-        open-right
-        corner-left
+        openright
+        cornerleft
         @click=${() => this.dispatchEvent(new CustomEvent('muteclick'))}
       >
         <obi-14-mute></obi-14-mute>
@@ -66,7 +63,7 @@ export class ObcAlertTopbarElement extends LitElement {
     } else {
       firstPart = html`<obc-notification-message
           class="notification-message"
-          ?empty=${empty}
+          .empty=${empty}
           @click=${() => this.dispatchEvent(new CustomEvent('messageclick'))}
         >
           <slot></slot>
@@ -74,16 +71,16 @@ export class ObcAlertTopbarElement extends LitElement {
         </obc-notification-message>
         ${this.showAck
           ? html`<obc-notification-button
-              open-right
+              openright
               @click=${() => this.dispatchEvent(new CustomEvent('ackclick'))}
               >ACK</obc-notification-button
             >`
           : html``}
         <obc-notification-button
           icon
-          open-right
-          ?indent=${empty}
-          ?disabled=${disabledMute}
+          openright
+          .indent=${empty}
+          .disabled=${disabledMute}
           @click=${() => this.dispatchEvent(new CustomEvent('muteclick'))}
         >
           <obi-14-mute></obi-14-mute>
@@ -104,11 +101,11 @@ export class ObcAlertTopbarElement extends LitElement {
       >
         ${firstPart}
         <obc-alert-button
-          alert-type=${this.alertType}
-          n-alerts=${this.nAlerts}
-          ?counter=${!empty}
-          ?blink-alarm-value=${this.blinkAlarmValue}
-          ?blink-warning-value=${this.blinkWarningValue}
+          .alertType=${this.alertType}
+          .nAlerts=${this.nAlerts}
+          .counter=${!empty}
+          .blinkAlarmValue=${this.blinkAlarmValue}
+          .blinkWarningValue=${this.blinkWarningValue}
           @click=${() => this.dispatchEvent(new CustomEvent('alertclick'))}
         ></obc-alert-button>
       </div>