@oicl/openbridge-webcomponents 0.0.4

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

@@ -0,0 +1,68 @@
+import { unsafeCSS, LitElement, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import compentStyle from "./alert-menu.css.js";
+import "../button/button.js";
+import "../card-list-button/card-list-button.js";
+import "../../icons/icon-02-chevron-right.js";
+import "../../icons/icon-14-alert-list.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+let ObcAlertMenu = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.empty = false;
+  }
+  render() {
+    return html`
+      <div class="wrapper">
+        <div class="header">
+          <div class="title">Active alerts</div>
+          ${this.empty ? null : html`<obc-button
+                variant="raised"
+                class="ack-all-btn"
+                @click=${() => this.dispatchEvent(new CustomEvent("ack-all-click"))}
+              >
+                ACK ALL
+              </obc-button> `}
+        </div>
+        <div class="divider"></div>
+        <slot></slot>
+        ${this.empty ? html`<div class="empty">
+              <slot name="empty">No active alerts</slot>
+            </div>` : null}
+        <div class="spacer"></div>
+        <div class="divider"></div>
+        <obc-card-list-button
+          class="alert-list-btn"
+          @click=${() => {
+      this.dispatchEvent(new CustomEvent("alert-list-click"));
+    }}
+        >
+          <obi-14-alert-list slot="leading-icon"></obi-14-alert-list>
+          Alert list
+          <obi-02-chevron-right slot="trailing-icon"></obi-02-chevron-right>
+        </obc-card-list-button>
+      </div>
+    `;
+  }
+};
+ObcAlertMenu.styles = unsafeCSS(compentStyle);
+__decorateClass([
+  property({ type: Boolean })
+], ObcAlertMenu.prototype, "empty", 2);
+ObcAlertMenu = __decorateClass([
+  customElement("obc-alert-menu")
+], ObcAlertMenu);
+export {
+  ObcAlertMenu
+};
+//# sourceMappingURL=alert-menu.js.map

package/dist/components/alert-menu/alert-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-menu.js","sources":["../../../src/components/alert-menu/alert-menu.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport compentStyle from './alert-menu.css?inline';\nimport '../button/button';\nimport '../card-list-button/card-list-button';\nimport '../../icons/icon-02-chevron-right';\nimport '../../icons/icon-14-alert-list';\n\n/**\n *\n * @fires ack-all-click - Fired when the ack button is clicked\n * @fires alert-list-click - Fired when the alert list button is clicked\n */\n@customElement('obc-alert-menu')\nexport class ObcAlertMenu extends LitElement {\n  @property({type: Boolean}) empty: boolean = false;\n\n  override render() {\n    return html`\n      <div class=\"wrapper\">\n        <div class=\"header\">\n          <div class=\"title\">Active alerts</div>\n          ${this.empty\n            ? null\n            : html`<obc-button\n                variant=\"raised\"\n                class=\"ack-all-btn\"\n                @click=${() =>\n                  this.dispatchEvent(new CustomEvent('ack-all-click'))}\n              >\n                ACK ALL\n              </obc-button> `}\n        </div>\n        <div class=\"divider\"></div>\n        <slot></slot>\n        ${this.empty\n          ? html`<div class=\"empty\">\n              <slot name=\"empty\">No active alerts</slot>\n            </div>`\n          : null}\n        <div class=\"spacer\"></div>\n        <div class=\"divider\"></div>\n        <obc-card-list-button\n          class=\"alert-list-btn\"\n          @click=${() => {\n            this.dispatchEvent(new CustomEvent('alert-list-click'));\n          }}\n        >\n          <obi-14-alert-list slot=\"leading-icon\"></obi-14-alert-list>\n          Alert list\n          <obi-02-chevron-right slot=\"trailing-icon\"></obi-02-chevron-right>\n        </obc-card-list-button>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-alert-menu': ObcAlertMenu;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAca,IAAA,eAAN,cAA2B,WAAW;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA;AACuC,SAAA,QAAA;AAAA,EAAA;AAAA,EAEnC,SAAS;AACT,WAAA;AAAA;AAAA;AAAA;AAAA,YAIC,KAAK,QACH,OACA;AAAA;AAAA;AAAA,yBAGW,MACP,KAAK,cAAc,IAAI,YAAY,eAAe,CAAC,CAAC;AAAA;AAAA;AAAA,6BAGzC;AAAA;AAAA;AAAA;AAAA,UAInB,KAAK,QACH;AAAA;AAAA,sBAGA,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKG,MAAM;AACb,WAAK,cAAc,IAAI,YAAY,kBAAkB,CAAC;AAAA,IAAA,CACvD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQT;AAGF;AA3Ca,aA0CK,SAAS,UAAU,YAAY;AAzCpB,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,SAAQ;AAAA,GADd,aACgB,WAAA,SAAA,CAAA;AADhB,eAAN,gBAAA;AAAA,EADN,cAAc,gBAAgB;AAAA,GAClB,YAAA;"}

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

@@ -0,0 +1,73 @@
+import { css } from "lit";
+const compentStyle = css`
+:host {
+    display: contents;
+
+}
+
+.alert {
+    display: contents;
+}
+
+.alert .icon {
+        display: block;
+        height: 32px;
+        width: 32px;
+    }
+
+.alert .message {
+        /* UI/Body */
+        font-family: 'Noto Sans';
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 370;
+        line-height: 24px;
+        /* 150% */
+        text-decoration: none;
+        flex-grow: 1;
+        flex-shrink: 1;
+        color: var(--element-active-color, #1A1A1A);
+        min-height: 48px;
+        display: flex;
+        align-items: center;
+    }
+
+.alert .time-wrapper {
+        display: contents;
+    }
+
+.alert .time-since {
+        flex-shrink: 0;
+        /* UI/Body */
+        font-family: 'Noto Sans';
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 370;
+        line-height: 24px;
+        /* 150% */
+        text-decoration: none;
+        color: var(--element-neutral-color);
+    }
+
+.alert .time {
+        flex-shrink: 0;
+        /* UI/Body */
+        font-family: 'Noto Sans';
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 370;
+        line-height: 24px;
+        /* 150% */
+        text-decoration: none;
+        color: var(--element-neutral-color);
+        display: flex;
+    }
+
+.alert .time .time-divider {
+            position: relative;
+            top: -0.75px;
+        }`;
+export {
+  compentStyle as default
+};
+//# sourceMappingURL=alert-menu-item.css.js.map

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

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

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

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+import '../button/button';
+/**
+ *
+ * @fires ack-click - Fired when the ack button is clicked
+ */
+export declare class ObcAlertMenuItem extends LitElement {
+    message: string;
+    time: string;
+    timeSince: string;
+    acknowledgeble: boolean;
+    acknowledged: boolean;
+    narrowBreakpointPx: number;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ob-alert-menu-item': ObcAlertMenuItem;
+    }
+}
+//# sourceMappingURL=alert-menu-item.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alert-menu-item.d.ts","sourceRoot":"","sources":["../../../src/components/alert-menu-item/alert-menu-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAuB,MAAM,KAAK,CAAC;AAIrD,OAAO,kBAAkB,CAAC;AAC1B;;;GAGG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IACpB,OAAO,SAAa;IACpB,IAAI,SAA0B;IACL,SAAS,SAAQ;IACzC,cAAc,UAAS;IACvB,YAAY,UAAS;IAEhD,kBAAkB,SAAO;IAEhB,MAAM;IA8Cf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}

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

@@ -0,0 +1,94 @@
+import { unsafeCSS, LitElement, css, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import compentStyle from "./alert-menu-item.css.js";
+import { renderTime } from "../../time.js";
+import "../button/button.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+let ObcAlertMenuItem = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.message = "Message";
+    this.time = "2021-01-01T00:00:00Z";
+    this.timeSince = "1h";
+    this.acknowledgeble = false;
+    this.acknowledged = false;
+    this.narrowBreakpointPx = 400;
+  }
+  render() {
+    const style = css`
+      @media (max-width: ${this.narrowBreakpointPx}px) {
+        .alert .time-wrapper {
+          grid-column-start: 3;
+          grid-column-end: -2;
+          display: flex !important;
+          flex-direction: column;
+          align-items: center;
+          justify-content: flex-start;
+          flex-shrink: 0;
+        }
+      }
+    `;
+    const time = renderTime(new Date(this.time));
+    return html`
+      <style>
+        ${style}
+      </style>
+      <div class="alert">
+        <div class="icon">
+          <slot name="icon"> </slot>
+        </div>
+        <div class="message">${this.message}</div>
+        <div class="time-wrapper">
+          <div class="time">${time}</div>
+          <div class="time-since">${this.timeSince}</div>
+        </div>
+        <div class="acknowledge">
+          ${this.acknowledgeble && !this.acknowledged ? html`
+                <obc-button
+                  class="acknowledge-button"
+                  full-width
+                  @click=${() => this.dispatchEvent(new CustomEvent("ack-click"))}
+                  >ACK</obc-button
+                >
+              ` : ""}
+        </div>
+      </div>
+    `;
+  }
+};
+ObcAlertMenuItem.styles = unsafeCSS(compentStyle);
+__decorateClass([
+  property({ type: String })
+], ObcAlertMenuItem.prototype, "message", 2);
+__decorateClass([
+  property({ type: String })
+], ObcAlertMenuItem.prototype, "time", 2);
+__decorateClass([
+  property({ type: String, attribute: "time-since" })
+], ObcAlertMenuItem.prototype, "timeSince", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcAlertMenuItem.prototype, "acknowledgeble", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcAlertMenuItem.prototype, "acknowledged", 2);
+__decorateClass([
+  property({ type: Number, attribute: "narrow-breakpoint-px" })
+], ObcAlertMenuItem.prototype, "narrowBreakpointPx", 2);
+ObcAlertMenuItem = __decorateClass([
+  customElement("obc-alert-menu-item")
+], ObcAlertMenuItem);
+export {
+  ObcAlertMenuItem
+};
+//# sourceMappingURL=alert-menu-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alert-menu-item.js","sources":["../../../src/components/alert-menu-item/alert-menu-item.ts"],"sourcesContent":["import {LitElement, css, html, unsafeCSS} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport compentStyle from './alert-menu-item.css?inline';\nimport {renderTime} from '../../time';\nimport '../button/button';\n/**\n *\n * @fires ack-click - Fired when the ack button is clicked\n */\n@customElement('obc-alert-menu-item')\nexport class ObcAlertMenuItem extends LitElement {\n  @property({type: String}) message = 'Message';\n  @property({type: String}) time = '2021-01-01T00:00:00Z';\n  @property({type: String, attribute: 'time-since'}) timeSince = '1h';\n  @property({type: Boolean}) acknowledgeble = false;\n  @property({type: Boolean}) acknowledged = false;\n  @property({type: Number, attribute: 'narrow-breakpoint-px'})\n  narrowBreakpointPx = 400;\n\n  override render() {\n    const style = css`\n      @media (max-width: ${this.narrowBreakpointPx}px) {\n        .alert .time-wrapper {\n          grid-column-start: 3;\n          grid-column-end: -2;\n          display: flex !important;\n          flex-direction: column;\n          align-items: center;\n          justify-content: flex-start;\n          flex-shrink: 0;\n        }\n      }\n    `;\n\n    const time = renderTime(new Date(this.time));\n    return html`\n      <style>\n        ${style}\n      </style>\n      <div class=\"alert\">\n        <div class=\"icon\">\n          <slot name=\"icon\"> </slot>\n        </div>\n        <div class=\"message\">${this.message}</div>\n        <div class=\"time-wrapper\">\n          <div class=\"time\">${time}</div>\n          <div class=\"time-since\">${this.timeSince}</div>\n        </div>\n        <div class=\"acknowledge\">\n          ${this.acknowledgeble && !this.acknowledged\n            ? html`\n                <obc-button\n                  class=\"acknowledge-button\"\n                  full-width\n                  @click=${() =>\n                    this.dispatchEvent(new CustomEvent('ack-click'))}\n                  >ACK</obc-button\n                >\n              `\n            : ''}\n        </div>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ob-alert-menu-item': ObcAlertMenuItem;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAUa,IAAA,mBAAN,cAA+B,WAAW;AAAA,EAA1C,cAAA;AAAA,UAAA,GAAA,SAAA;AAC+B,SAAA,UAAA;AACH,SAAA,OAAA;AAC8B,SAAA,YAAA;AACnB,SAAA,iBAAA;AACF,SAAA,eAAA;AAErB,SAAA,qBAAA;AAAA,EAAA;AAAA,EAEZ,SAAS;AAChB,UAAM,QAAQ;AAAA,2BACS,KAAK,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAa9C,UAAM,OAAO,WAAW,IAAI,KAAK,KAAK,IAAI,CAAC;AACpC,WAAA;AAAA;AAAA,UAED,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+BAMgB,KAAK,OAAO;AAAA;AAAA,8BAEb,IAAI;AAAA,oCACE,KAAK,SAAS;AAAA;AAAA;AAAA,YAGtC,KAAK,kBAAkB,CAAC,KAAK,eAC3B;AAAA;AAAA;AAAA;AAAA,2BAIa,MACP,KAAK,cAAc,IAAI,YAAY,WAAW,CAAC,CAAC;AAAA;AAAA;AAAA,kBAItD,EAAE;AAAA;AAAA;AAAA;AAAA,EAId;AAGF;AAxDa,iBAuDK,SAAS,UAAU,YAAY;AAtDrB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GADb,iBACe,WAAA,WAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAFb,iBAEe,WAAA,QAAA,CAAA;AACyB,gBAAA;AAAA,EAAlD,SAAS,EAAC,MAAM,QAAQ,WAAW,cAAa;AAAA,GAHtC,iBAGwC,WAAA,aAAA,CAAA;AACxB,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,SAAQ;AAAA,GAJd,iBAIgB,WAAA,kBAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,SAAQ;AAAA,GALd,iBAKgB,WAAA,gBAAA,CAAA;AAE3B,gBAAA;AAAA,EADC,SAAS,EAAC,MAAM,QAAQ,WAAW,wBAAuB;AAAA,GANhD,iBAOX,WAAA,sBAAA,CAAA;AAPW,mBAAN,gBAAA;AAAA,EADN,cAAc,qBAAqB;AAAA,GACvB,gBAAA;"}

package/dist/components/alert-topbar-element/alert-topbar-element.css.js

@@ -0,0 +1,14 @@
+import { css } from "lit";
+const compentStyle = css`.wrapper {
+    display: flex;
+    align-items: center;
+    margin-left: 8px;
+}
+
+.notification-message {
+    flex-grow: 1;
+}`;
+export {
+  compentStyle as default
+};
+//# sourceMappingURL=alert-topbar-element.css.js.map

package/dist/components/alert-topbar-element/alert-topbar-element.css.js.map

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

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

@@ -0,0 +1,33 @@
+import { LitElement } from 'lit';
+import '../alert-button/alert-button';
+import '../notification-button/notification-button';
+import '../notification-message/notification-message';
+import '../../icons/icon-14-mute';
+import { AlertType } from '../../types';
+/**
+ * Element that displays the alert in topbar
+ * Use the element in the alerts slot in topbar
+ *
+ * @fires muteclick - Fired when the mute button is clicked
+ * @fires ackclick - Fired when the ack button is clicked
+ * @fires alertclick - Fired when the alert button is clicked
+ * @fires messageclick - Fired when the message is clicked
+ *
+ * @slot  - The message to display in the alert element of type `obc-notification-message-item`
+ */
+export declare class ObcAlertTopbarElement extends LitElement {
+    nAlerts: number;
+    alertType: AlertType;
+    showAck: boolean;
+    alertMuted: boolean;
+    minimized: boolean;
+    maxWidth: number;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ob-alert-topbar-element': ObcAlertTopbarElement;
+    }
+}
+//# sourceMappingURL=alert-topbar-element.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alert-topbar-element.d.ts","sourceRoot":"","sources":["../../../src/components/alert-topbar-element/alert-topbar-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAGhD,OAAO,8BAA8B,CAAC;AACtC,OAAO,4CAA4C,CAAC;AACpD,OAAO,8CAA8C,CAAC;AAEtD,OAAO,0BAA0B,CAAC;AAClC,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAGtC;;;;;;;;;;GAUG;AACH,qBACa,qBAAsB,SAAQ,UAAU;IACF,OAAO,SAAK;IACV,SAAS,EAAE,SAAS,CACtD;IACiC,OAAO,UAAS;IACb,UAAU,UAAS;IAC7C,SAAS,UAAS;IACK,QAAQ,SAAO;IAExD,MAAM;IAoEf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,yBAAyB,EAAE,qBAAqB,CAAC;KAClD;CACF"}

package/dist/components/alert-topbar-element/alert-topbar-element.js

@@ -0,0 +1,117 @@
+import { unsafeCSS, LitElement, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import compentStyle from "./alert-topbar-element.css.js";
+import "../alert-button/alert-button.js";
+import "../notification-button/notification-button.js";
+import "../notification-message/notification-message.js";
+import "../../icons/icon-14-mute.js";
+import { AlertType } from "../../types.js";
+import { classMap } from "lit/directives/class-map.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+let ObcAlertTopbarElement = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.nAlerts = 0;
+    this.alertType = AlertType.None;
+    this.showAck = false;
+    this.alertMuted = false;
+    this.minimized = false;
+    this.maxWidth = 480;
+  }
+  render() {
+    const empty = this.nAlerts === 0;
+    const disabledMute = this.alertMuted || empty || this.alertType === AlertType.None || this.alertType === AlertType.Running || this.alertType === AlertType.Caution;
+    let firstPart;
+    if (this.minimized) {
+      firstPart = html`<obc-notification-button
+        icon
+        open-right
+        corner-left
+        @click=${() => this.dispatchEvent(new CustomEvent("muteclick"))}
+      >
+        <obi-14-mute></obi-14-mute>
+      </obc-notification-button>`;
+    } else {
+      firstPart = html`<obc-notification-message
+          class="notification-message"
+          ?empty=${empty}
+          @click=${() => this.dispatchEvent(new CustomEvent("messageclick"))}
+        >
+          <slot></slot>
+          <div slot="empty">No active alerts</div>
+        </obc-notification-message>
+        ${this.showAck ? html`<obc-notification-button
+              open-right
+              @click=${() => this.dispatchEvent(new CustomEvent("ackclick"))}
+              >ACK</obc-notification-button
+            >` : html``}
+        <obc-notification-button
+          icon
+          open-right
+          ?indent=${empty}
+          ?disabled=${disabledMute}
+          @click=${() => this.dispatchEvent(new CustomEvent("muteclick"))}
+        >
+          <obi-14-mute></obi-14-mute>
+        </obc-notification-button>`;
+    }
+    return html`
+      <style>
+        :host {
+          max-width: ${this.maxWidth}px;
+        }
+      </style>
+      <div
+        class=${classMap({
+      wrapper: true,
+      minimized: this.minimized
+    })}
+        style=${`max-width: ${this.maxWidth - 8}px;`}
+      >
+        ${firstPart}
+        <obc-alert-button
+          alert-type=${this.alertType}
+          n-alerts=${this.nAlerts}
+          ?counter=${!empty}
+          @click=${() => this.dispatchEvent(new CustomEvent("alertclick"))}
+        ></obc-alert-button>
+      </div>
+    `;
+  }
+};
+ObcAlertTopbarElement.styles = unsafeCSS(compentStyle);
+__decorateClass([
+  property({ type: Number, attribute: "n-alerts" })
+], ObcAlertTopbarElement.prototype, "nAlerts", 2);
+__decorateClass([
+  property({ type: String, attribute: "alert-type" })
+], ObcAlertTopbarElement.prototype, "alertType", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-ack" })
+], ObcAlertTopbarElement.prototype, "showAck", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "alert-muted" })
+], ObcAlertTopbarElement.prototype, "alertMuted", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcAlertTopbarElement.prototype, "minimized", 2);
+__decorateClass([
+  property({ type: Number, attribute: "max-width" })
+], ObcAlertTopbarElement.prototype, "maxWidth", 2);
+ObcAlertTopbarElement = __decorateClass([
+  customElement("obc-alert-topbar-element")
+], ObcAlertTopbarElement);
+export {
+  ObcAlertTopbarElement
+};
+//# sourceMappingURL=alert-topbar-element.js.map

package/dist/components/alert-topbar-element/alert-topbar-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-topbar-element.js","sources":["../../../src/components/alert-topbar-element/alert-topbar-element.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport compentStyle from './alert-topbar-element.css?inline';\nimport '../alert-button/alert-button';\nimport '../notification-button/notification-button';\nimport '../notification-message/notification-message';\n\nimport '../../icons/icon-14-mute';\nimport {AlertType} from '../../types';\nimport {classMap} from 'lit/directives/class-map.js';\n\n/**\n * Element that displays the alert in topbar\n * Use the element in the alerts slot in topbar\n *\n * @fires muteclick - Fired when the mute button is clicked\n * @fires ackclick - Fired when the ack button is clicked\n * @fires alertclick - Fired when the alert button is clicked\n * @fires messageclick - Fired when the message is clicked\n *\n * @slot  - The message to display in the alert element of type `obc-notification-message-item`\n */\n@customElement('obc-alert-topbar-element')\nexport class ObcAlertTopbarElement extends LitElement {\n  @property({type: Number, attribute: 'n-alerts'}) nAlerts = 0;\n  @property({type: String, attribute: 'alert-type'}) alertType: AlertType =\n    AlertType.None;\n  @property({type: Boolean, attribute: 'show-ack'}) showAck = false;\n  @property({type: Boolean, attribute: 'alert-muted'}) alertMuted = false;\n  @property({type: Boolean}) minimized = false;\n  @property({type: Number, attribute: 'max-width'}) maxWidth = 480;\n\n  override render() {\n    const empty = this.nAlerts === 0;\n    const disabledMute =\n      this.alertMuted ||\n      empty ||\n      this.alertType === AlertType.None ||\n      this.alertType === AlertType.Running ||\n      this.alertType === AlertType.Caution;\n    let firstPart;\n    if (this.minimized) {\n      firstPart = html`<obc-notification-button\n        icon\n        open-right\n        corner-left\n        @click=${() => this.dispatchEvent(new CustomEvent('muteclick'))}\n      >\n        <obi-14-mute></obi-14-mute>\n      </obc-notification-button>`;\n    } else {\n      firstPart = html`<obc-notification-message\n          class=\"notification-message\"\n          ?empty=${empty}\n          @click=${() => this.dispatchEvent(new CustomEvent('messageclick'))}\n        >\n          <slot></slot>\n          <div slot=\"empty\">No active alerts</div>\n        </obc-notification-message>\n        ${this.showAck\n          ? html`<obc-notification-button\n              open-right\n              @click=${() => this.dispatchEvent(new CustomEvent('ackclick'))}\n              >ACK</obc-notification-button\n            >`\n          : html``}\n        <obc-notification-button\n          icon\n          open-right\n          ?indent=${empty}\n          ?disabled=${disabledMute}\n          @click=${() => this.dispatchEvent(new CustomEvent('muteclick'))}\n        >\n          <obi-14-mute></obi-14-mute>\n        </obc-notification-button>`;\n    }\n    return html`\n      <style>\n        :host {\n          max-width: ${this.maxWidth}px;\n        }\n      </style>\n      <div\n        class=${classMap({\n          wrapper: true,\n          minimized: this.minimized,\n        })}\n        style=${`max-width: ${this.maxWidth - 8}px;`}\n      >\n        ${firstPart}\n        <obc-alert-button\n          alert-type=${this.alertType}\n          n-alerts=${this.nAlerts}\n          ?counter=${!empty}\n          @click=${() => this.dispatchEvent(new CustomEvent('alertclick'))}\n        ></obc-alert-button>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ob-alert-topbar-element': ObcAlertTopbarElement;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAuBa,IAAA,wBAAN,cAAoC,WAAW;AAAA,EAA/C,cAAA;AAAA,UAAA,GAAA,SAAA;AACsD,SAAA,UAAA;AACR,SAAA,YACjD,UAAU;AACgD,SAAA,UAAA;AACM,SAAA,aAAA;AAC3B,SAAA,YAAA;AACsB,SAAA,WAAA;AAAA,EAAA;AAAA,EAEpD,SAAS;AACV,UAAA,QAAQ,KAAK,YAAY;AAC/B,UAAM,eACJ,KAAK,cACL,SACA,KAAK,cAAc,UAAU,QAC7B,KAAK,cAAc,UAAU,WAC7B,KAAK,cAAc,UAAU;AAC3B,QAAA;AACJ,QAAI,KAAK,WAAW;AACN,kBAAA;AAAA;AAAA;AAAA;AAAA,iBAID,MAAM,KAAK,cAAc,IAAI,YAAY,WAAW,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,IAAA,OAI5D;AACO,kBAAA;AAAA;AAAA,mBAEC,KAAK;AAAA,mBACL,MAAM,KAAK,cAAc,IAAI,YAAY,cAAc,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,UAKlE,KAAK,UACH;AAAA;AAAA,uBAEW,MAAM,KAAK,cAAc,IAAI,YAAY,UAAU,CAAC,CAAC;AAAA;AAAA,iBAGhE,MAAM;AAAA;AAAA;AAAA;AAAA,oBAIE,KAAK;AAAA,sBACH,YAAY;AAAA,mBACf,MAAM,KAAK,cAAc,IAAI,YAAY,WAAW,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,IAIrE;AACO,WAAA;AAAA;AAAA;AAAA,uBAGY,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,gBAIpB,SAAS;AAAA,MACf,SAAS;AAAA,MACT,WAAW,KAAK;AAAA,IAAA,CACjB,CAAC;AAAA,gBACM,cAAc,KAAK,WAAW,CAAC,KAAK;AAAA;AAAA,UAE1C,SAAS;AAAA;AAAA,uBAEI,KAAK,SAAS;AAAA,qBAChB,KAAK,OAAO;AAAA,qBACZ,CAAC,KAAK;AAAA,mBACR,MAAM,KAAK,cAAc,IAAI,YAAY,YAAY,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,EAIxE;AAGF;AA9Ea,sBA6EK,SAAS,UAAU,YAAY;AA5EE,gBAAA;AAAA,EAAhD,SAAS,EAAC,MAAM,QAAQ,WAAW,YAAW;AAAA,GADpC,sBACsC,WAAA,WAAA,CAAA;AACE,gBAAA;AAAA,EAAlD,SAAS,EAAC,MAAM,QAAQ,WAAW,cAAa;AAAA,GAFtC,sBAEwC,WAAA,aAAA,CAAA;AAED,gBAAA;AAAA,EAAjD,SAAS,EAAC,MAAM,SAAS,WAAW,YAAW;AAAA,GAJrC,sBAIuC,WAAA,WAAA,CAAA;AACG,gBAAA;AAAA,EAApD,SAAS,EAAC,MAAM,SAAS,WAAW,eAAc;AAAA,GALxC,sBAK0C,WAAA,cAAA,CAAA;AAC1B,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,SAAQ;AAAA,GANd,sBAMgB,WAAA,aAAA,CAAA;AACuB,gBAAA;AAAA,EAAjD,SAAS,EAAC,MAAM,QAAQ,WAAW,aAAY;AAAA,GAPrC,sBAOuC,WAAA,YAAA,CAAA;AAPvC,wBAAN,gBAAA;AAAA,EADN,cAAc,0BAA0B;AAAA,GAC5B,qBAAA;"}

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

@@ -0,0 +1,135 @@
+import { css } from "lit";
+const compentStyle = css`.wrapper {
+  box-sizing: border-box;
+  position: relative;
+  height: 96px;
+  width: 72px;
+}
+.wrapper button {
+    color: var(--on-normal-neutral-color);
+
+    height: 72px;
+    width: 72px;
+    border-radius: 100%;
+
+    display: flex;
+
+    align-items: center;
+    justify-content: center;
+  }
+.wrapper button {
+  border-color: var(--normal-enabled-border-color);
+  background-color: var(--normal-enabled-background-color);
+  border-width: 1px;
+  border-style: solid;
+  cursor: pointer;
+}
+.wrapper button:focus {
+  outline: none;
+}
+.wrapper button.activated {
+  border-color: var(--normal-activated-border-color);
+  background-color: var(--normal-activated-background-color);
+}
+.wrapper button:focus-visible {
+  outline-color: hsla(211, 100%, 44%, 0.3);
+  outline-width: 4px;
+  outline-style: solid;
+}
+.wrapper button:hover {
+  border-color: var(--normal-hover-border-color);
+  background-color: var(--normal-hover-background-color);
+}
+.wrapper button:active {
+  border-color: var(--normal-pressed-border-color);
+  background-color: var(--normal-pressed-background-color);
+}
+.wrapper button:disabled {
+  border-color: var(--normal-disabled-border-color);
+  background-color: var(--normal-disabled-background-color);
+  cursor: not-allowed;
+  color: var(--on-normal-disabled-color);
+}
+.wrapper button .icon {
+      height: 48px;
+      width: 48px;
+    }
+.wrapper.small {
+    height: 64px;
+    width: 48px;
+    padding-top: 8px;
+  }
+.wrapper.small button {
+      height: 32px;
+      width: 32px;
+      margin-left: auto;
+      margin-right: auto;
+    }
+.wrapper.small .icon {
+      height: 20px;
+      width: 20px;
+    }
+.wrapper .label {
+    color: var(--element-active-color, #1a1a1a);
+    position: absolute;
+    bottom: 4px;
+    left: 0;
+    right: 0;
+
+    text-align: center;
+    font-family: 'Noto Sans';
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 370;
+    line-height: 16px;
+    /* 133.333% */
+  }
+.wrapper.checked button {
+      color: var(--on-selected-active-color);
+    }
+.wrapper.checked button {
+  border-color: var(--selected-enabled-border-color);
+  background-color: var(--selected-enabled-background-color);
+  border-width: 1px;
+  border-style: solid;
+  cursor: pointer;
+}
+.wrapper.checked button:focus {
+  outline: none;
+}
+.wrapper.checked button.activated {
+  border-color: var(--selected-activated-border-color);
+  background-color: var(--selected-activated-background-color);
+}
+.wrapper.checked button:focus-visible {
+  outline-color: hsla(211, 100%, 44%, 0.3);
+  outline-width: 4px;
+  outline-style: solid;
+}
+.wrapper.checked button:hover {
+  border-color: var(--selected-hover-border-color);
+  background-color: var(--selected-hover-background-color);
+}
+.wrapper.checked button:active {
+  border-color: var(--selected-pressed-border-color);
+  background-color: var(--selected-pressed-background-color);
+}
+.wrapper.checked button:disabled {
+  border-color: var(--selected-disabled-border-color);
+  background-color: var(--selected-disabled-background-color);
+  cursor: not-allowed;
+  color: var(--on-selected-disabled-color);
+}
+.wrapper.checked .label {
+      font-family: 'Noto Sans';
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 650;
+      line-height: 16px;
+      /* 133.333% */
+    }
+`;
+export {
+  compentStyle as default
+};
+//# sourceMappingURL=app-button.css.js.map

package/dist/components/app-button/app-button.css.js.map

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

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

@@ -0,0 +1,14 @@
+import { LitElement } from 'lit';
+export declare class ObcAppButton extends LitElement {
+    label: string;
+    checked: boolean;
+    size: string;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'obc-app-button': ObcAppButton;
+    }
+}
+//# sourceMappingURL=app-button.d.ts.map

package/dist/components/app-button/app-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-button.d.ts","sourceRoot":"","sources":["../../../src/components/app-button/app-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAKhD,qBACa,YAAa,SAAQ,UAAU;IAChB,KAAK,SAAY;IAChB,OAAO,UAAS;IACjB,IAAI,SAAY;IAEjC,MAAM;IAiBf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}