@oicl/openbridge-webcomponents 0.0.10 → 0.0.13

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

@@ -0,0 +1,592 @@
+import { css } from "lit";
+const compentStyle = css`* {
+    box-sizing: border-box;
+}
+
+@keyframes spin { 
+    100% { 
+        transform:rotate(360deg); 
+    } 
+}
+
+.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);
+    border-width: 1px;
+    border-style: solid;
+    cursor: pointer;
+}
+
+.wrapper:focus {
+    outline: none;
+}
+
+.wrapper.activated {
+    border-color: var(--flat-activated-border-color);
+    background-color: var(--flat-activated-background-color);
+}
+
+.wrapper:focus-visible {
+    outline-color: hsla(211, 100%, 44%, 0.3);
+    outline-width: 4px;
+    outline-style: solid;
+}
+
+.wrapper:hover {
+    border-color: var(--flat-hover-border-color);
+    background-color: var(--flat-hover-background-color);
+}
+
+.wrapper:active {
+    border-color: var(--flat-pressed-border-color);
+    background-color: var(--flat-pressed-background-color);
+}
+
+.wrapper:disabled {
+    border-color: var(--flat-disabled-border-color);
+    background-color: var(--flat-disabled-background-color);
+    cursor: not-allowed;
+    color: var(--on-flat-disabled-color);
+}
+
+.wrapper.label-top {
+        flex-direction: column-reverse;
+    }
+
+.wrapper.label-bottom {
+        flex-direction: column;
+    }
+
+.wrapper.label-left {
+        flex-direction: row-reverse;
+    }
+
+.wrapper.progress .icon-holder::before {
+        content: '';
+        position: absolute;
+        top: -5px;
+        left: -5px;
+        width: calc(100% + 10px);
+        height: calc(100% + 10px);
+        background: var(--container-backdrop-color);
+        border-radius: 100%;
+        z-index: -1;
+    }
+
+.wrapper .progress-spinner {
+        position: absolute;
+        top: -5px;
+        left: -5px;
+        animation:spin 3s linear infinite;
+    }
+
+.badge-top-right, .badge-top-left, .badge-bottom-right, .badge-bottom-left {
+    position: absolute;
+    z-index: 1;
+}
+
+.size-small .icon-holder {
+    width: 32px;
+    height: 32px;
+}
+
+.size-small .icon-holder .icon-primary {
+        width: 24px;
+        height: 24px;
+    }
+
+.size-small .icon-holder .icon-direction {
+        width: 24px;
+        height: 24px;
+    }
+
+.size-small .icon-holder .badge-top-right {
+        top: -8px;
+        right: -8px;
+    }
+
+.size-small .icon-holder .badge-top-left {
+        top: -8px;
+        left: -8px;
+    }
+
+.size-small .icon-holder .badge-bottom-right {
+        bottom: -8px;
+        right: -8px;
+    }
+
+.size-small .icon-holder .badge-bottom-left {
+        bottom: -8px;
+        left: -8px;
+    }
+
+.variant-switch :is(.size-small .icon-holder) .badge-top-right {
+        top: -8px;
+        right: -12px;
+    }
+
+.variant-switch :is(.size-small .icon-holder) .badge-top-left {
+        top: -8px;
+        left: -12px;
+    }
+
+.variant-switch :is(.size-small .icon-holder) .badge-bottom-right {
+        bottom: -8px;
+        right: -12px;
+    }
+
+.variant-switch :is(.size-small .icon-holder) .badge-bottom-left {
+        bottom: -8px;
+        left: -12px;
+    }
+
+.size-regular .icon-holder {
+    width: 48px;
+    height: 48px;
+}
+
+.size-regular .icon-holder .icon-primary {
+        width: 32px;
+        height: 32px;
+    }
+
+.variant-double :is(.size-regular .icon-holder) {
+        padding-bottom: 4px;
+    }
+
+.variant-double :is(.size-regular .icon-holder) .icon-direction {
+            width: 24px;
+            height: 24px;
+        }
+
+.variant-double :is(.size-regular .icon-holder) .icon-primary {
+            width: 16px;
+            height: 16px;
+        }
+
+.size-regular .icon-holder .badge-top-right {
+        top: -4px;
+        right: -4px;
+    }
+
+.size-regular .icon-holder .badge-top-left {
+        top: -4px;
+        left: -4px;
+    }
+
+.size-regular .icon-holder .badge-bottom-right {
+        bottom: -4px;
+        right: -4px;
+    }
+
+.size-regular .icon-holder .badge-bottom-left {
+        bottom: -4px;
+        left: -4px;
+    }
+
+.variant-switch :is(.size-regular .icon-holder) .badge-top-right {
+        top: -4px;
+        right: -8px;
+    }
+
+.variant-switch :is(.size-regular .icon-holder) .badge-top-left {
+        top: -4px;
+        left: -8px;
+    }
+
+.variant-switch :is(.size-regular .icon-holder) .badge-bottom-right {
+        bottom: -4px;
+        right: -8px;
+    }
+
+.variant-switch :is(.size-regular .icon-holder) .badge-bottom-left {
+        bottom: -4px;
+        left: -8px;
+    }
+
+.size-large .icon-holder {
+    width: 64px;
+    height: 64px;
+}
+
+.size-large .icon-holder .icon-primary {
+        width: 48px;
+        height: 48px;
+    }
+
+.variant-double :is(.size-large .icon-holder) {
+        padding-bottom: 4px;
+    }
+
+.variant-double :is(.size-large .icon-holder) .icon-direction {
+            width: 32px;
+            height: 32px;
+        }
+
+.variant-double :is(.size-large .icon-holder) .icon-primary {
+            width: 24px;
+            height: 24px;
+        }
+
+.size-large .icon-holder .badge-top-right {
+        top: -8px;
+        right: -8px;
+    }
+
+.size-large .icon-holder .badge-top-left {
+        top: -8px;
+        left: -8px;
+    }
+
+.size-large .icon-holder .badge-bottom-right {
+        bottom: -8px;
+        right: -8px;
+    }
+
+.size-large .icon-holder .badge-bottom-left {
+        bottom: -8px;
+        left: -8px;
+    }
+
+.variant-switch :is(.size-large .icon-holder) .badge-top-right {
+        top: -8px;
+        right: -8px;
+    }
+
+.variant-switch :is(.size-large .icon-holder) .badge-top-left {
+        top: -8px;
+        left: -8px;
+    }
+
+.variant-switch :is(.size-large .icon-holder) .badge-bottom-right {
+        bottom: -8px;
+        right: -8px;
+    }
+
+.variant-switch :is(.size-large .icon-holder) .badge-bottom-left {
+        bottom: -8px;
+        left: -8px;
+    }
+
+.size-xl .icon-holder {
+    width: 96px;
+    height: 96px;
+}
+
+.size-xl .icon-holder .icon-primary {
+        width: 72px;
+        height: 72px;
+    }
+
+.variant-double :is(.size-xl .icon-holder) {
+        padding-bottom: 4px;
+    }
+
+.variant-double :is(.size-xl .icon-holder) .icon-direction {
+            width: 48px;
+            height: 48px;
+        }
+
+.variant-double :is(.size-xl .icon-holder) .icon-primary {
+            width: 32px;
+            height: 32px;
+        }
+
+.size-xl .icon-holder .badge-top-right {
+        top: -4px;
+        right: -4px;
+    }
+
+.size-xl .icon-holder .badge-top-left {
+        top: -4px;
+        left: -4px;
+    }
+
+.size-xl .icon-holder .badge-bottom-right {
+        bottom: -4px;
+        right: -4px;
+    }
+
+.size-xl .icon-holder .badge-bottom-left {
+        bottom: -4px;
+        left: -4px;
+    }
+
+.variant-switch :is(.size-xl .icon-holder) .badge-top-right {
+        top: -4px;
+        right: -4px;
+    }
+
+.variant-switch :is(.size-xl .icon-holder) .badge-top-left {
+        top: -4px;
+        left: -4px;
+    }
+
+.variant-switch :is(.size-xl .icon-holder) .badge-bottom-right {
+        bottom: -4px;
+        right: -4px;
+    }
+
+.variant-switch :is(.size-xl .icon-holder) .badge-bottom-left {
+        bottom: -4px;
+        left: -4px;
+    }
+
+.icon-holder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+
+    margin: 8px;
+
+    border-radius: 100%;
+    border-width: 1px;
+    border-style: solid;
+    
+}
+
+.alert .icon-holder::after {
+    content: '';
+    position: absolute;
+    top: -11px; /* 1px border + 2px border + 8px margin */
+    right: -11px;
+    width: calc(100% + 22px);
+    height: calc(100% + 22px);
+    border-radius: 6px;
+    border: 2px solid var(--alert-alarm-color);
+    box-sizing: border-box;
+
+}
+
+.alert-icon {
+    position: absolute;
+    top: -11px;
+    right: -19px;
+}
+
+.variant-switch .icon-holder {
+    border-radius: 6px;
+}
+
+.state-closed .icon-holder {
+    border-color: var(--automation-pipe-secondary-inverted-color, #B3B3B3);
+    background: var(--automation-pipe-primary-inverted-color, #E0E0E0);
+}
+
+.state-open .icon-holder {
+    border-color: var(--normal-enabled-border-color);
+    background: var(--normal-enabled-background-color);
+}
+
+.state-open-enhanced .icon-holder {
+    border-color: var(--running-enabled-border-color, rgba(0, 0, 0, 0.20));
+    background: var(--running-enabled-background-color, #259228);
+}
+
+.state-open-medium .icon-holder {
+    border-color: var(--automation-button-tertiary-color, rgba(0, 0, 0, 0.20));
+    background: var(--automation-fresh-water, #C6F1FB);
+}
+
+.state-static .icon-holder {
+    border-color: var(--automation-button-tertiary-color, rgba(0, 0, 0, 0.20));
+    background: var(--flat-enabled-background-color, rgba(0, 0, 0, 0.00));
+}
+
+.label {
+    padding-right: 4px;
+    text-align: left;
+    color: var(--element-neutral-color);
+}
+
+.label-style-active .label {
+        color: var(--element-active-color);
+    }
+
+.label .direction {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+
+        font-family: Noto Sans;
+
+        font-size: 16px;
+
+        font-weight: 620;
+
+        line-height: 24px;
+
+        font-variation-settings: 'wdth' 100, 'CTGR' 0;
+
+        
+    }
+
+.label-size-small :is(.label .direction) {
+            font-family: 'Noto Sans';
+            font-size: 12px;
+            font-style: normal;
+            font-weight: 650;
+            line-height: 16px;
+            /* 133.333% */
+        }
+
+.label-size-enhanced :is(.label .direction) {
+            font-family: Noto Sans;
+            font-size: 36px;
+            font-weight: 570;
+            line-height: 48px;
+            text-align: center;
+            font-variation-settings: 'wdth' 100, 'CTGR' 0;
+        }
+
+.label .direction .zeros {
+            color: var(--border-outline-color);
+        }
+
+.label-style-enhanced :is(.label .direction) .value {
+            color: var(--instrument-enhanced-secondary-color);
+        }
+
+.label .direction .direction-icon {
+            display: block;
+            width: 16px;
+            height: 16px;
+            margin-right: 4px;
+        }
+
+.label-size-small :is(.label .direction .direction-icon) {
+                width: 12px;
+                height: 12px;
+            }
+
+.label-size-enhanced :is(.label .direction .direction-icon) {
+                width: 24px;
+                height: 24px;
+            }
+
+.label .direction .unit {
+            font-family: 'Noto Sans';
+            font-size: 12px;
+            font-style: normal;
+            font-weight: 370;
+            line-height: 16px;
+            /* 133.333% */
+            margin-left: 1px;
+        }
+
+.label-size-regular :is(.label .direction .unit) {
+                position: relative;
+                top: 2px;
+            }
+
+.label-size-enhanced :is(.label .direction .unit) {
+                /* UI/Body */
+                font-family: 'Noto Sans';
+                font-size: 16px;
+                font-style: normal;
+                font-weight: 370;
+                line-height: 24px;
+                /* 150% */
+                text-decoration: none;
+                position: relative;
+                top: 8px;
+            }
+
+.label .tag {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+
+        font-family: 'Noto Sans';
+
+        font-size: 12px;
+
+        font-style: normal;
+
+        font-weight: 370;
+
+        line-height: 16px;
+
+        /* 133.333% */
+
+        
+    }
+
+.label-size-enhanced :is(.label .tag) {
+            /* UI/Body */
+            font-family: 'Noto Sans';
+            font-size: 16px;
+            font-style: normal;
+            font-weight: 370;
+            line-height: 24px;
+            /* 150% */
+            text-decoration: none;
+        }
+
+.label .tag .hash {
+            text-align: center;
+            width: 16px;
+            margin-right: 4px;
+            font-family: 'Noto Sans';
+            font-size: 12px;
+            font-style: normal;
+            font-weight: 650;
+            line-height: 16px;
+            /* 133.333% */
+        }
+
+.label-size-small :is(.label .tag .hash) {
+                width: 12px;
+            }
+
+.label-size-enhanced :is(.label .tag .hash) {
+                /* UI/Body-Active */
+                font-family: Noto Sans;
+                font-size: 16px;
+                font-style: normal;
+                font-weight: 650;
+                line-height: 24px;
+                /* 150% */
+                width: 24px;
+            }
+
+.label .state {
+        /* UI/Body */
+        font-family: 'Noto Sans';
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 370;
+        line-height: 24px;
+        /* 150% */
+        text-decoration: none;
+    }
+
+.label .state.bold {
+            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 {
+        padding-right: 0;
+    }`;
+export {
+  compentStyle as default
+};
+//# sourceMappingURL=automation-button.css.js.map

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

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

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

@@ -0,0 +1,95 @@
+import { LitElement } from 'lit';
+import '../../icons/icon-08-forward';
+import '../../icons/icon-08-forward-fast';
+import '../../icons/icon-08-forward-stopped';
+import '../../icons/icon-08-backward';
+import '../../icons/icon-08-backward-fast';
+import '../../icons/icon-08-backward-stopped';
+import '../../icons/icon-08-standby';
+import '../../icons/icon-02-arrow-up';
+import '../../icons/icon-02-arrow-down';
+import '../../icons/icon-02-arrow-back';
+import '../../icons/icon-02-arrow-forward';
+export declare enum AutomationButtonSize {
+    small = "small",
+    regular = "regular",
+    large = "large",
+    xl = "xl"
+}
+export declare enum AutomationButtonVariant {
+    regular = "regular",
+    double = "double",
+    switch = "switch"
+}
+export declare enum AutomationButtonState {
+    closed = "closed",
+    open = "open",
+    openEnhanced = "open-enhanced",
+    openMedium = "open-medium",
+    static = "static"
+}
+export declare enum AutomationButtonLabelSize {
+    small = "small",
+    regular = "regular",
+    enhanced = "enhanced"
+}
+export declare enum AutomationBottonLabelStyle {
+    regular = "regular",
+    enhanced = "enhanced",
+    active = "active"
+}
+export interface AutomationButtonStateLabel {
+    type: 'state';
+    text: string;
+    bold: boolean;
+}
+export interface AutomationButtonTagLabel {
+    type: 'tag';
+    text: string;
+    showHash: boolean;
+}
+export interface AutomationButtonDirectonValueLabel {
+    type: 'direction';
+    value: number;
+    nDigits: number;
+    unit: 'percent';
+    direction: 'up' | 'down' | 'left' | 'right';
+}
+export declare enum AutomationButtonLabelPosition {
+    top = "top",
+    bottom = "bottom",
+    left = "left",
+    right = "right"
+}
+export declare enum AutomationButtonDirection {
+    forward = "forward",
+    forwardFast = "forward-fast",
+    forwardStopped = "forward-stopped",
+    backward = "backward",
+    backwardFast = "backward-fast",
+    backwardStopped = "backward-stopped",
+    standby = "standby"
+}
+export type AutomationButtonLabel = AutomationButtonStateLabel | AutomationButtonTagLabel | AutomationButtonDirectonValueLabel;
+export declare class ObcAutomationButton extends LitElement {
+    size: AutomationButtonSize;
+    variant: AutomationButtonVariant;
+    state: AutomationButtonState;
+    labels: AutomationButtonLabel[];
+    labelPosition: AutomationButtonLabelPosition;
+    labelSize: AutomationButtonLabelSize;
+    labelStyle: AutomationBottonLabelStyle;
+    alert: boolean;
+    progress: boolean;
+    direction: AutomationButtonDirection;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+    private getProgressSpinner;
+    private getDirectionIcon;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'obc-automation-button': ObcAutomationButton;
+    }
+}
+//# sourceMappingURL=automation-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"automation-button.d.ts","sourceRoot":"","sources":["../../../src/automation/automation-button/automation-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,UAAU,EAAkB,MAAM,KAAK,CAAC;AAIpE,OAAO,6BAA6B,CAAC;AACrC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,qCAAqC,CAAC;AAC7C,OAAO,8BAA8B,CAAC;AACtC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,sCAAsC,CAAC;AAC9C,OAAO,6BAA6B,CAAC;AACrC,OAAO,8BAA8B,CAAC;AACtC,OAAO,gCAAgC,CAAC;AACxC,OAAO,gCAAgC,CAAC;AACxC,OAAO,mCAAmC,CAAC;AAE3C,oBAAY,oBAAoB;IAC9B,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,EAAE,OAAO;CACV;AAED,oBAAY,uBAAuB;IACjC,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,MAAM,WAAW;CAClB;AAED,oBAAY,qBAAqB;IAC/B,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,YAAY,kBAAkB;IAC9B,UAAU,gBAAgB;IAC1B,MAAM,WAAW;CAClB;AAED,oBAAY,yBAAyB;IACnC,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,QAAQ,aAAa;CACtB;AAED,oBAAY,0BAA0B;IACpC,OAAO,YAAY;IACnB,QAAQ,aAAa;IACrB,MAAM,WAAW;CAClB;AAED,MAAM,WAAW,0BAA0B;IACzC,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,OAAO,CAAC;CACf;AAED,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,KAAK,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,kCAAkC;IACjD,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,SAAS,CAAC;IAChB,SAAS,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;CAC7C;AAED,oBAAY,6BAA6B;IACvC,GAAG,QAAQ;IACX,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,KAAK,UAAU;CAChB;AAED,oBAAY,yBAAyB;IACnC,OAAO,YAAY;IACnB,WAAW,iBAAiB;IAC5B,cAAc,oBAAoB;IAClC,QAAQ,aAAa;IACrB,YAAY,kBAAkB;IAC9B,eAAe,qBAAqB;IACpC,OAAO,YAAY;CACpB;AAED,MAAM,MAAM,qBAAqB,GAC7B,0BAA0B,GAC1B,wBAAwB,GACxB,kCAAkC,CAAC;AA6CvC,qBACa,mBAAoB,SAAQ,UAAU;IACvB,IAAI,EAAE,oBAAoB,CACrB;IACL,OAAO,EAAE,uBAAuB,CACxB;IACR,KAAK,EAAE,qBAAqB,CACzB;IACc,MAAM,EAAE,qBAAqB,EAAE,CACrE;IACqB,aAAa,EAAE,6BAA6B,CAC/B;IACb,SAAS,EAAE,yBAAyB,CAC1B;IACV,UAAU,EAAE,0BAA0B,CAC3B;IACV,KAAK,EAAE,OAAO,CAAS;IACvB,QAAQ,EAAE,OAAO,CAAS;IAC3B,SAAS,EAAE,yBAAyB,CAC1B;IAE3B,MAAM;IAqEf,OAAgB,MAAM,0BAA2B;IAEjD,OAAO,CAAC,kBAAkB;IAkC1B,OAAO,CAAC,gBAAgB;CA2GzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,mBAAmB,CAAC;KAC9C;CACF"}