@oicl/openbridge-webcomponents 0.0.15-dev-20241124190908 → 0.0.15-dev-20241125211335

package/.storybook/main.ts

@@ -11,7 +11,6 @@ const config: StorybookConfig = {
     getAbsolutePath('@storybook/addon-interactions'),
     getAbsolutePath('@storybook/addon-storysource'),
     getAbsolutePath('storybook-addon-tag-badges'),
-    getAbsolutePath('@chromatic-com/storybook'),
   ],
 
   framework: {

package/dist/automation/automation-button/automation-button.css.js

@@ -16,17 +16,6 @@ const compentStyle = css`* {
 
 .wrapper {
     position: absolute;
-
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    width: fit-content;
-
-    appearance: none;
-    padding: 0;
-    margin: 0;
-    border-radius: 6px;
 }
 
 .wrapper.label-bottom {
@@ -97,6 +86,20 @@ const compentStyle = css`* {
             right: -57px;
         }
 
+.wrapper {
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: fit-content;
+
+    appearance: none;
+    padding: 0;
+    margin: 0;
+    border-radius: 6px;
+}
+
 .wrapper {
     border-color: var(--flat-enabled-border-color);
     background-color: var(--flat-enabled-background-color);
@@ -178,32 +181,32 @@ const compentStyle = css`* {
     height: 32px;
 }
 
-.size-small .icon-holder .icon-primary {
+:is(.size-small .icon-holder) .icon-primary {
         width: 24px;
         height: 24px;
     }
 
-.size-small .icon-holder .icon-direction {
+:is(.size-small .icon-holder) .icon-direction {
         width: 24px;
         height: 24px;
     }
 
-.size-small .icon-holder .badge-top-right {
+:is(.size-small .icon-holder) .badge-top-right {
         top: -8px;
         right: -8px;
     }
 
-.size-small .icon-holder .badge-top-left {
+:is(.size-small .icon-holder) .badge-top-left {
         top: -8px;
         left: -8px;
     }
 
-.size-small .icon-holder .badge-bottom-right {
+:is(.size-small .icon-holder) .badge-bottom-right {
         bottom: -8px;
         right: -8px;
     }
 
-.size-small .icon-holder .badge-bottom-left {
+:is(.size-small .icon-holder) .badge-bottom-left {
         bottom: -8px;
         left: -8px;
     }
@@ -233,7 +236,7 @@ const compentStyle = css`* {
     height: 48px;
 }
 
-.size-regular .icon-holder .icon-primary {
+:is(.size-regular .icon-holder) .icon-primary {
         width: 32px;
         height: 32px;
     }
@@ -242,32 +245,32 @@ const compentStyle = css`* {
         padding-bottom: 4px;
     }
 
-.variant-double :is(.size-regular .icon-holder) .icon-direction {
+:is(.variant-double :is(.size-regular .icon-holder)) .icon-direction {
             width: 24px;
             height: 24px;
         }
 
-.variant-double :is(.size-regular .icon-holder) .icon-primary {
+:is(.variant-double :is(.size-regular .icon-holder)) .icon-primary {
             width: 16px;
             height: 16px;
         }
 
-.size-regular .icon-holder .badge-top-right {
+:is(.size-regular .icon-holder) .badge-top-right {
         top: -4px;
         right: -4px;
     }
 
-.size-regular .icon-holder .badge-top-left {
+:is(.size-regular .icon-holder) .badge-top-left {
         top: -4px;
         left: -4px;
     }
 
-.size-regular .icon-holder .badge-bottom-right {
+:is(.size-regular .icon-holder) .badge-bottom-right {
         bottom: -4px;
         right: -4px;
     }
 
-.size-regular .icon-holder .badge-bottom-left {
+:is(.size-regular .icon-holder) .badge-bottom-left {
         bottom: -4px;
         left: -4px;
     }
@@ -297,7 +300,7 @@ const compentStyle = css`* {
     height: 64px;
 }
 
-.size-large .icon-holder .icon-primary {
+:is(.size-large .icon-holder) .icon-primary {
         width: 48px;
         height: 48px;
     }
@@ -306,32 +309,32 @@ const compentStyle = css`* {
         padding-bottom: 4px;
     }
 
-.variant-double :is(.size-large .icon-holder) .icon-direction {
+:is(.variant-double :is(.size-large .icon-holder)) .icon-direction {
             width: 32px;
             height: 32px;
         }
 
-.variant-double :is(.size-large .icon-holder) .icon-primary {
+:is(.variant-double :is(.size-large .icon-holder)) .icon-primary {
             width: 24px;
             height: 24px;
         }
 
-.size-large .icon-holder .badge-top-right {
+:is(.size-large .icon-holder) .badge-top-right {
         top: -8px;
         right: -8px;
     }
 
-.size-large .icon-holder .badge-top-left {
+:is(.size-large .icon-holder) .badge-top-left {
         top: -8px;
         left: -8px;
     }
 
-.size-large .icon-holder .badge-bottom-right {
+:is(.size-large .icon-holder) .badge-bottom-right {
         bottom: -8px;
         right: -8px;
     }
 
-.size-large .icon-holder .badge-bottom-left {
+:is(.size-large .icon-holder) .badge-bottom-left {
         bottom: -8px;
         left: -8px;
     }
@@ -361,7 +364,7 @@ const compentStyle = css`* {
     height: 96px;
 }
 
-.size-xl .icon-holder .icon-primary {
+:is(.size-xl .icon-holder) .icon-primary {
         width: 72px;
         height: 72px;
     }
@@ -370,32 +373,32 @@ const compentStyle = css`* {
         padding-bottom: 4px;
     }
 
-.variant-double :is(.size-xl .icon-holder) .icon-direction {
+:is(.variant-double :is(.size-xl .icon-holder)) .icon-direction {
             width: 48px;
             height: 48px;
         }
 
-.variant-double :is(.size-xl .icon-holder) .icon-primary {
+:is(.variant-double :is(.size-xl .icon-holder)) .icon-primary {
             width: 32px;
             height: 32px;
         }
 
-.size-xl .icon-holder .badge-top-right {
+:is(.size-xl .icon-holder) .badge-top-right {
         top: -4px;
         right: -4px;
     }
 
-.size-xl .icon-holder .badge-top-left {
+:is(.size-xl .icon-holder) .badge-top-left {
         top: -4px;
         left: -4px;
     }
 
-.size-xl .icon-holder .badge-bottom-right {
+:is(.size-xl .icon-holder) .badge-bottom-right {
         bottom: -4px;
         right: -4px;
     }
 
-.size-xl .icon-holder .badge-bottom-left {
+:is(.size-xl .icon-holder) .badge-bottom-left {
         bottom: -4px;
         left: -4px;
     }
@@ -529,7 +532,7 @@ const compentStyle = css`* {
             font-variation-settings: 'wdth' 100, 'CTGR' 0;
         }
 
-.label .direction .zeros {
+:is(.label .direction) .zeros {
             color: var(--border-outline-color);
         }
 
@@ -537,24 +540,24 @@ const compentStyle = css`* {
             color: var(--instrument-enhanced-secondary-color);
         }
 
-.label .direction .direction-icon {
+:is(.label .direction) .direction-icon {
             display: block;
             width: 16px;
             height: 16px;
             margin-right: 4px;
         }
 
-.label-size-small :is(.label .direction .direction-icon) {
+.label-size-small :is(:is(.label .direction) .direction-icon) {
                 width: 12px;
                 height: 12px;
             }
 
-.label-size-enhanced :is(.label .direction .direction-icon) {
+.label-size-enhanced :is(:is(.label .direction) .direction-icon) {
                 width: 24px;
                 height: 24px;
             }
 
-.label .direction .unit {
+:is(.label .direction) .unit {
             font-family: 'Noto Sans';
             font-size: 12px;
             font-style: normal;
@@ -564,12 +567,12 @@ const compentStyle = css`* {
             margin-left: 1px;
         }
 
-.label-size-regular :is(.label .direction .unit) {
+.label-size-regular :is(:is(.label .direction) .unit) {
                 position: relative;
                 top: 2px;
             }
 
-.label-size-enhanced :is(.label .direction .unit) {
+.label-size-enhanced :is(:is(.label .direction) .unit) {
                 /* UI/Body */
                 font-family: 'Noto Sans';
                 font-size: 16px;
@@ -613,7 +616,7 @@ const compentStyle = css`* {
             text-decoration: none;
         }
 
-.label .tag .hash {
+:is(.label .tag) .hash {
             text-align: center;
             width: 16px;
             margin-right: 4px;
@@ -625,11 +628,11 @@ const compentStyle = css`* {
             /* 133.333% */
         }
 
-.label-size-small :is(.label .tag .hash) {
+.label-size-small :is(:is(.label .tag) .hash) {
                 width: 12px;
             }
 
-.label-size-enhanced :is(.label .tag .hash) {
+.label-size-enhanced :is(:is(.label .tag) .hash) {
                 /* UI/Body-Active */
                 font-family: Noto Sans;
                 font-size: 16px;
@@ -651,14 +654,14 @@ const compentStyle = css`* {
         text-decoration: none;
     }
 
-.label .state.bold {
+.bold:is(.label .state) {
             font-family: Noto Sans;
             font-size: 16px;
             font-weight: 620;
             line-height: 24px;
             font-variation-settings: 'wdth' 100, 'CTGR' 0}
 
-.label-top .label, .label-bottom .label {
+.label-top .label,.label-bottom .label {
         padding-right: 0;
     }`;
 export {

package/dist/automation/automation-button/automation-button.css.js.map

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

package/dist/automation/automation-button/automation-button.d.ts

@@ -1,5 +1,4 @@
 import { LitElement } from 'lit';
-
 import '../../icons/icon-08-forward';
 import '../../icons/icon-08-forward-fast';
 import '../../icons/icon-08-forward-stopped';

package/dist/automation/automation-input-modal/automation-input-modal.d.ts

@@ -1,5 +1,4 @@
 import { LitElement } from 'lit';
-
 export declare class ObcAutomationInputModal extends LitElement {
     render(): import('lit-html').TemplateResult<1>;
     static styles: import('lit').CSSResult;

package/dist/automation/automation-readout/automation-readout.css.js

@@ -75,8 +75,7 @@ const compentStyle = css`* {
         border: var(--normal-enabled-border-color) solid 1px;
     }
 
-.wrapper.position-bottom::before,
-    .wrapper.position-top::before {
+.wrapper.position-bottom::before,.wrapper.position-top::before {
         width: 0;
         height: 8px;
     }
@@ -98,8 +97,7 @@ const compentStyle = css`* {
         right: calc(-4px - var(--offset));
     }
 
-.wrapper.position-left::before,
-    .wrapper.position-right::before {
+.wrapper.position-left::before,.wrapper.position-right::before {
         height: 0;
         width: 8px;
     }
@@ -133,12 +131,12 @@ const compentStyle = css`* {
 
     }
 
-.wrapper .visible-wrapper .value {
+:is(.wrapper .visible-wrapper) .value {
             color: var(--instrument-enhanced-secondary-color);
             text-align: right
         }
 
-.wrapper .visible-wrapper .unit {
+:is(.wrapper .visible-wrapper) .unit {
             /* Instrument/unit-s */
             font-family: "Noto Sans";
             font-size: 16px;

package/dist/automation/automation-readout/automation-readout.css.js.map

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

package/dist/automation/automation-readout/automation-readout.d.ts

@@ -1,6 +1,5 @@
 import { LitElement } from 'lit';
 import { LineType } from '..';
-
 export declare enum AutomationReadoutPosition {
     Left = "left",
     Right = "right",

package/dist/automation/automation-tank/automation-tank.css.js

@@ -26,22 +26,6 @@ const compentStyle = css`* {
     min-height: 20px;
 }
 
-.wrapper {
-    appearance: none;
-
-    display: flex;
-    flex-direction: column-reverse;
-    width: fit-content;
-    color: var(--instrument-regular-secondary-color);
-
-    border-radius: 6px;
-    border: 1px solid var(--instrument-frame-tertiary-color);
-    background: var(--instrument-frame-primary-color);
-
-    padding: 8px;
-    gap: 8px;
-}
-
 .wrapper {
     border-color: var(--normal-enabled-border-color);
     background-color: var(--normal-enabled-background-color);
@@ -82,6 +66,22 @@ const compentStyle = css`* {
     color: var(--on-normal-disabled-color);
 }
 
+.wrapper {
+    appearance: none;
+
+    display: flex;
+    flex-direction: column-reverse;
+    width: fit-content;
+    color: var(--instrument-regular-secondary-color);
+
+    border-radius: 6px;
+    border: 1px solid var(--instrument-frame-tertiary-color);
+    background: var(--instrument-frame-primary-color);
+
+    padding: 8px;
+    gap: 8px;
+}
+
 .compact .content {
         display: none;
     }

package/dist/automation/automation-tank/automation-tank.d.ts

@@ -1,6 +1,5 @@
 import { HTMLTemplateResult, LitElement } from 'lit';
 import { LineMedium } from '..';
-
 import '../../icons/icon-02-chevron-double-up';
 import '../../icons/icon-02-chevron-up';
 import '../../icons/icon-02-chevron-double-down';

package/dist/automation/corner-line/corner-line.d.ts

@@ -1,6 +1,5 @@
 import { LitElement } from 'lit';
 import { LineMedium, LineType } from '../index';
-
 export declare enum CornerLineDirection {
     topRight = "top-right",
     topLeft = "top-left",

package/dist/automation/direction-line/direction-line.d.ts

@@ -1,6 +1,5 @@
 import { LitElement } from 'lit';
 import { LineMedium, LineType } from '..';
-
 export declare class ObcDirectionLine extends LitElement {
     medium: LineMedium;
     lineType: LineType;

package/dist/automation/end-point-line/end-point-line.d.ts

@@ -1,6 +1,5 @@
 import { LitElement } from 'lit';
 import { LineMedium, LineType } from '..';
-
 export declare enum EndPointDirection {
     top = "top",
     right = "right",

package/dist/automation/horizontal-line/horizontal-line.d.ts

@@ -1,6 +1,5 @@
 import { LitElement } from 'lit';
 import { LineMedium, LineType } from '../index';
-
 export declare class ObcHorizontalLine extends LitElement {
     medium: LineMedium;
     lineType: LineType;

package/dist/automation/line-cross/line-cross.d.ts

@@ -1,6 +1,5 @@
 import { LitElement } from 'lit';
 import { LineMedium, LineType } from '..';
-
 export declare class ObcLineCross extends LitElement {
     medium: LineMedium;
     lineType: LineType;

package/dist/automation/line-overlap/line-overlap.d.ts

@@ -1,6 +1,5 @@
 import { LitElement } from 'lit';
 import { LineMedium, LineType } from '..';
-
 export declare class ObcLineOverlap extends LitElement {
     medium: LineMedium;
     lineType: LineType;

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

@@ -1,6 +1,5 @@
 import { LitElement } from 'lit';
 import { LineMedium, LineType } from '..';
-
 export declare enum ThreeWayLineDirection {
     top = "top",
     right = "right",

package/dist/automation/valve-analog-three-way-icon/valve-analog-three-way-icon.d.ts

@@ -1,5 +1,4 @@
 import { LitElement } from 'lit';
-
 export declare class ObcValveAnalogThreeWayIcon extends LitElement {
     value: number;
     value2: number;

package/dist/automation/valve-analoge-two-way-icon/valve-analog-two-way-icon.d.ts

@@ -1,5 +1,4 @@
 import { LitElement } from 'lit';
-
 export declare class ObcValveAnalogTwoWayIcon extends LitElement {
     value: number;
     closed: boolean;

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

@@ -1,6 +1,5 @@
 import { LitElement } from 'lit';
 import { LineMedium, LineType } from '../index';
-
 export declare class ObcVerticalLine extends LitElement {
     medium: LineMedium;
     lineType: LineType;

package/dist/components/alert-button/alert-button.css.js

@@ -67,10 +67,6 @@ const compentStyle = css`* {
             border-radius: 0 6px 6px 0;
         }
 
-.wrapper.type-alarm {
-        color: var(--on-alarm-active-color);
-    }
-
 .wrapper.type-alarm {
     cursor: pointer;
 }
@@ -115,6 +111,10 @@ const compentStyle = css`* {
     color: var(--on-alarm-disabled-color);
 }
 
+.wrapper.type-alarm {
+        color: var(--on-alarm-active-color);
+}
+
 .wrapper.type-warning {
     cursor: pointer;
 }
@@ -163,7 +163,7 @@ const compentStyle = css`* {
             color: var(--on-warning-active-color, #FFF);
         }
 
-.wrapper.type-warning .visible-wrapper .badge {
+:is(.wrapper.type-warning .visible-wrapper) .badge {
                 color: var(--on-warning-active-color, #FFF);
             }
 
@@ -215,7 +215,7 @@ const compentStyle = css`* {
             color: var(--on-caution-active-color, #FFF);
         }
 
-.wrapper.type-caution .visible-wrapper .badge {
+:is(.wrapper.type-caution .visible-wrapper) .badge {
                 color: var(--on-caution-active-color, #FFF);
             }
 
@@ -315,7 +315,7 @@ const compentStyle = css`* {
             color: var(--on-running-active-color, #FFF);
         }
 
-.wrapper.type-command .visible-wrapper .badge {
+:is(.wrapper.type-command .visible-wrapper) .badge {
                 color: var(--on-running-active-color, #FFF);
             }
 
@@ -367,10 +367,6 @@ const compentStyle = css`* {
             color: var(--instrument-enhanced-secondary-color);
         }
 
-.wrapper.type-none {
-        color: var(--on-normal-active-color);
-    }
-
 .wrapper.type-none {
     cursor: pointer;
 }
@@ -415,14 +411,14 @@ const compentStyle = css`* {
     color: var(--on-normal-disabled-color);
 }
 
+.wrapper.type-none {
+        color: var(--on-normal-active-color);
+}
+
 .wrapper.type-none .icon {
             color: var(--on-normal-neutral-color);
         }
 
-.wrapper.type-flat {
-        color: var(--on-flat-active-color);
-    }
-
 .wrapper.type-flat {
     cursor: pointer;
 }
@@ -467,6 +463,10 @@ const compentStyle = css`* {
     color: var(--on-flat-disabled-color);
 }
 
+.wrapper.type-flat {
+        color: var(--on-flat-active-color);
+}
+
 .wrapper.type-flat .icon {
             color: var(--on-flat-neutral-color);
         }`;

package/dist/components/alert-button/alert-button.d.ts

@@ -1,6 +1,5 @@
 import { LitElement } from 'lit';
 import { AlertType } from '../../types';
-
 import '../../icons/icon-14-alerts';
 /**
  * Button used for alerts and notification

package/dist/components/alert-icon/alert-icon.d.ts

@@ -1,5 +1,4 @@
 import { LitElement } from 'lit';
-
 declare const mapping: {
     'alarm-silenced': {
         a: import('lit-html').TemplateResult<2>;

package/dist/components/alert-menu/alert-menu.d.ts

@@ -1,5 +1,4 @@
 import { LitElement } from 'lit';
-
 import '../button/button';
 import '../card-list-button/card-list-button';
 import '../../icons/icon-02-chevron-right';

package/dist/components/alert-menu-item/alert-menu-item.css.js

@@ -63,7 +63,7 @@ const compentStyle = css`
         display: flex;
     }
 
-.alert .time .time-divider {
+:is(.alert .time) .time-divider {
             position: relative;
             top: -0.75px;
         }`;

package/dist/components/alert-menu-item/alert-menu-item.d.ts

@@ -1,5 +1,4 @@
 import { LitElement } from 'lit';
-
 import '../button/button';
 /**
  *

package/dist/components/alert-topbar-element/alert-topbar-element.d.ts

@@ -1,6 +1,5 @@
 import { LitElement } from 'lit';
 import { AlertType } from '../../types';
-
 import '../alert-button/alert-button';
 import '../notification-button/notification-button';
 import '../notification-message/notification-message';