@oicl/openbridge-webcomponents 0.0.15-dev-20250205200936 → 0.0.15-dev-20250206192612

package/dist/components/alert-icon/icons/icon-14-warning-unack-b.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-14-warning-unack-b.js","sources":["../../../../src/components/alert-icon/icons/icon-14-warning-unack-b.ts"],"sourcesContent":["import {svg} from 'lit';\nexport const svg14WarningUnackB = svg`<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<circle cx=\"12\" cy=\"12\" r=\"10.5\" style=\"stroke: var(--element-neutral-color)\" />\n<path d=\"M8.50855 13.8814L11.6442 17.0171V6.9829L8.50855 10.1186H6V13.8814H8.50855Z\" style=\"fill: var(--element-neutral-color)\" />\n<path d=\"M14.4664 12C14.4664 10.89 13.8267 9.93672 12.8985 9.47263V14.5211C13.8267 14.0633 14.4664 13.11 14.4664 12Z\" style=\"fill: var(--element-neutral-color)\" />\n<path d=\"M12.8985 7.7919C14.7109 8.33124 16.0342 10.012 16.0342 12C16.0342 13.988 14.7109 15.6688 12.8985 16.2081V17.5C15.4133 16.9293 17.2885 14.6842 17.2885 12C17.2885 9.31585 15.4133 7.0707 12.8985 6.5V7.7919Z\" style=\"fill: var(--element-neutral-color)\" />\n</svg>\n`;\n"],"names":[],"mappings":";AACO,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"icon-14-warning-unack-b.js","sources":["../../../../src/components/alert-icon/icons/icon-14-warning-unack-b.ts"],"sourcesContent":["import {svg} from 'lit';\nexport const svg14WarningUnackB = svg`<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<circle cx=\"12\" cy=\"12\" r=\"10.5\" style=\"stroke: var(--element-neutral-color)\" />\n<path d=\"M8.5 14H6.5C6.22386 14 6 13.7761 6 13.5V10.5C6 10.2239 6.22386 10 6.5 10H8.5L12 6.5V10.379V17.5L8.5 14Z\" style=\"fill: var(--element-neutral-color)\"/>\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M14.7678 13.7678C14.4186 14.117 13.9767 14.3522 13.5 14.4495V9.55053C13.9767 9.64784 14.4186 9.88307 14.7678 10.2323C15.2366 10.7011 15.5 11.337 15.5 12C15.5 12.6631 15.2366 13.299 14.7678 13.7678Z\" style=\"fill: var(--element-neutral-color)\"/>\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13.5 6.59167V7.86933C14.2529 8.05163 14.9484 8.43799 15.5052 8.99482C16.3022 9.79185 16.75 10.8729 16.75 12C16.75 13.1272 16.3022 14.2082 15.5052 15.0052C14.9484 15.5621 14.2529 15.9484 13.5 16.1307V17.4084C14.5869 17.2074 15.5965 16.6817 16.3891 15.8891C17.4205 14.8577 18 13.4587 18 12C18 10.5413 17.4205 9.14239 16.3891 8.11094C15.5965 7.31836 14.5869 6.79266 13.5 6.59167Z\" style=\"fill: var(--element-neutral-color)\"/>\n</svg>\n`;\n"],"names":[],"mappings":";AACO,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

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

@@ -29,8 +29,6 @@ import '../../icons/icon-sound-muted-fill';
 export declare class ObcAlertTopbarElement extends LitElement {
     nAlerts: number;
     alertType: AlertType;
-    blinkAlarmValue: boolean;
-    blinkWarningValue: boolean;
     showAck: boolean;
     alertMuted: boolean;
     minimized: boolean;

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

@@ -1 +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,mCAAmC,CAAC;AAC3C,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAKtC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBAEa,qBAAsB,SAAQ,UAAU;IACzB,OAAO,SAAK;IACZ,SAAS,EAAE,SAAS,CAAkB;IACrC,eAAe,UAAS;IACxB,iBAAiB,UAAS;IAC1B,OAAO,UAAS;IAChB,UAAU,UAAS;IACnB,SAAS,UAAS;IACnB,QAAQ,SAAO;IAEhC,MAAM;IAsEf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,yBAAyB,EAAE,qBAAqB,CAAC;KAClD;CACF"}
+{"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,mCAAmC,CAAC;AAC3C,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAKtC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBAEa,qBAAsB,SAAQ,UAAU;IACzB,OAAO,SAAK;IACZ,SAAS,EAAE,SAAS,CAAmB;IACtC,OAAO,UAAS;IAChB,UAAU,UAAS;IACnB,SAAS,UAAS;IACnB,QAAQ,SAAO;IAEhC,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

@@ -22,9 +22,7 @@ let ObcAlertTopbarElement = class extends LitElement {
   constructor() {
     super(...arguments);
     this.nAlerts = 0;
-    this.alertType = AlertType.None;
-    this.blinkAlarmValue = false;
-    this.blinkWarningValue = false;
+    this.alertType = AlertType.Alarm;
     this.showAck = false;
     this.alertMuted = false;
     this.minimized = false;
@@ -32,7 +30,7 @@ let ObcAlertTopbarElement = class extends LitElement {
   }
   render() {
     const empty = this.nAlerts === 0;
-    const disabledMute = this.alertMuted || empty || this.alertType === AlertType.None || this.alertType === AlertType.Running || this.alertType === AlertType.Caution;
+    const disabledMute = this.alertMuted || empty || this.nAlerts === 0 || this.alertType === AlertType.Running || this.alertType === AlertType.Caution;
     let firstPart;
     if (this.minimized) {
       firstPart = html`<obc-notification-button
@@ -84,9 +82,7 @@ let ObcAlertTopbarElement = class extends LitElement {
         <obc-alert-button
           .alertType=${this.alertType}
           .nAlerts=${this.nAlerts}
-          .counter=${!empty}
-          .blinkAlarmValue=${this.blinkAlarmValue}
-          .blinkWarningValue=${this.blinkWarningValue}
+          counter
           @click=${() => this.dispatchEvent(new CustomEvent("alertclick"))}
         ></obc-alert-button>
       </div>
@@ -100,12 +96,6 @@ __decorateClass([
 __decorateClass([
   property({ type: String })
 ], ObcAlertTopbarElement.prototype, "alertType", 2);
-__decorateClass([
-  property({ type: Boolean })
-], ObcAlertTopbarElement.prototype, "blinkAlarmValue", 2);
-__decorateClass([
-  property({ type: Boolean })
-], ObcAlertTopbarElement.prototype, "blinkWarningValue", 2);
 __decorateClass([
   property({ type: Boolean })
 ], ObcAlertTopbarElement.prototype, "showAck", 2);

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

@@ -1 +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-sound-muted-fill';\nimport {AlertType} from '../../types';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {localized, msg} from '@lit/localize';\n\n/**\n * Element that displays the alert in topbar\n * Use the element in the alerts slot in topbar\n *\n * @prop {number} nAlerts - Number of alerts.\n * @prop {AlertType} alertType - Type of alert.\n * @prop {boolean} blinkAlarmValue - This value should alternate between true and false to make the icon blink.\n *                       It should be synchronized with the blinkValue of other alarms.\n * @prop {boolean} blinkWarningValue - This value should alternate between true and false to make the icon blink.\n * @prop {boolean} showAck - If the ack button should be shown.\n * @prop {boolean} alertMuted - If the alert is muted.\n * @prop {boolean} minimized - If the alert is minimized.\n * @prop {number} maxWidth - The maximum width of the alert.\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 * @slot empty - The message to display when there are no alerts\n */\n@localized()\n@customElement('obc-alert-topbar-element')\nexport class ObcAlertTopbarElement extends LitElement {\n  @property({type: Number}) nAlerts = 0;\n  @property({type: String}) alertType: AlertType = AlertType.None;\n  @property({type: Boolean}) blinkAlarmValue = false;\n  @property({type: Boolean}) blinkWarningValue = false;\n  @property({type: Boolean}) showAck = false;\n  @property({type: Boolean}) alertMuted = false;\n  @property({type: Boolean}) minimized = false;\n  @property({type: Number}) 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        openright\n        cornerleft\n        @click=${() => this.dispatchEvent(new CustomEvent('muteclick'))}\n      >\n        <obi-sound-muted-fill></obi-sound-muted-fill>\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\">${msg('No active alerts')}</div>\n        </obc-notification-message>\n        ${this.showAck\n          ? html`<obc-notification-button\n              openright\n              @click=${() => this.dispatchEvent(new CustomEvent('ackclick'))}\n              >ACK</obc-notification-button\n            >`\n          : html``}\n        <obc-notification-button\n          icon\n          openright\n          .indent=${empty}\n          .disabled=${disabledMute}\n          @click=${() => this.dispatchEvent(new CustomEvent('muteclick'))}\n        >\n          <obi-sound-muted-fill></obi-sound-muted-fill>\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          .alertType=${this.alertType}\n          .nAlerts=${this.nAlerts}\n          .counter=${!empty}\n          .blinkAlarmValue=${this.blinkAlarmValue}\n          .blinkWarningValue=${this.blinkWarningValue}\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":";;;;;;;;;;;;;;;;;;;;AAqCa,IAAA,wBAAN,cAAoC,WAAW;AAAA,EAA/C,cAAA;AAAA,UAAA,GAAA,SAAA;AAC+B,SAAA,UAAA;AACV,SAAA,YAAuB,UAAU;AACd,SAAA,kBAAA;AACE,SAAA,oBAAA;AACV,SAAA,UAAA;AACG,SAAA,aAAA;AACD,SAAA,YAAA;AACF,SAAA,WAAA;AAAA,EAAA;AAAA,EAE5B,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,8BAG9C,IAAI,kBAAkB,CAAC;AAAA;AAAA,UAE3C,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,IAAA;AAK9D,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,6BACE,KAAK,eAAe;AAAA,+BAClB,KAAK,iBAAiB;AAAA,mBAClC,MAAM,KAAK,cAAc,IAAI,YAAY,YAAY,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,EAAA;AAO1E;AAjFa,sBAgFK,SAAS,UAAU,YAAY;AA/ErB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAO,CAAA;AAAA,GADb,sBACe,WAAA,WAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAO,CAAA;AAAA,GAFb,sBAEe,WAAA,aAAA,CAAA;AACC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAQ,CAAA;AAAA,GAHd,sBAGgB,WAAA,mBAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAQ,CAAA;AAAA,GAJd,sBAIgB,WAAA,qBAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAQ,CAAA;AAAA,GALd,sBAKgB,WAAA,WAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAQ,CAAA;AAAA,GANd,sBAMgB,WAAA,cAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAQ,CAAA;AAAA,GAPd,sBAOgB,WAAA,aAAA,CAAA;AACD,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAO,CAAA;AAAA,GARb,sBAQe,WAAA,YAAA,CAAA;AARf,wBAAN,gBAAA;AAAA,EAFN,UAAU;AAAA,EACV,cAAc,0BAA0B;AAAA,GAC5B,qBAAA;"}
+{"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-sound-muted-fill';\nimport {AlertType} from '../../types';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {localized, msg} from '@lit/localize';\n\n/**\n * Element that displays the alert in topbar\n * Use the element in the alerts slot in topbar\n *\n * @prop {number} nAlerts - Number of alerts.\n * @prop {AlertType} alertType - Type of alert.\n * @prop {boolean} blinkAlarmValue - This value should alternate between true and false to make the icon blink.\n *                       It should be synchronized with the blinkValue of other alarms.\n * @prop {boolean} blinkWarningValue - This value should alternate between true and false to make the icon blink.\n * @prop {boolean} showAck - If the ack button should be shown.\n * @prop {boolean} alertMuted - If the alert is muted.\n * @prop {boolean} minimized - If the alert is minimized.\n * @prop {number} maxWidth - The maximum width of the alert.\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 * @slot empty - The message to display when there are no alerts\n */\n@localized()\n@customElement('obc-alert-topbar-element')\nexport class ObcAlertTopbarElement extends LitElement {\n  @property({type: Number}) nAlerts = 0;\n  @property({type: String}) alertType: AlertType = AlertType.Alarm;\n  @property({type: Boolean}) showAck = false;\n  @property({type: Boolean}) alertMuted = false;\n  @property({type: Boolean}) minimized = false;\n  @property({type: Number}) maxWidth = 480;\n\n  override render() {\n    const empty = this.nAlerts === 0;\n    const disabledMute =\n      this.alertMuted ||\n      empty ||\n      this.nAlerts === 0 ||\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        openright\n        cornerleft\n        @click=${() => this.dispatchEvent(new CustomEvent('muteclick'))}\n      >\n        <obi-sound-muted-fill></obi-sound-muted-fill>\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\">${msg('No active alerts')}</div>\n        </obc-notification-message>\n        ${this.showAck\n          ? html`<obc-notification-button\n              openright\n              @click=${() => this.dispatchEvent(new CustomEvent('ackclick'))}\n              >ACK</obc-notification-button\n            >`\n          : html``}\n        <obc-notification-button\n          icon\n          openright\n          .indent=${empty}\n          .disabled=${disabledMute}\n          @click=${() => this.dispatchEvent(new CustomEvent('muteclick'))}\n        >\n          <obi-sound-muted-fill></obi-sound-muted-fill>\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          .alertType=${this.alertType}\n          .nAlerts=${this.nAlerts}\n          counter\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":";;;;;;;;;;;;;;;;;;;;AAqCa,IAAA,wBAAN,cAAoC,WAAW;AAAA,EAA/C,cAAA;AAAA,UAAA,GAAA,SAAA;AAC+B,SAAA,UAAA;AACV,SAAA,YAAuB,UAAU;AACtB,SAAA,UAAA;AACG,SAAA,aAAA;AACD,SAAA,YAAA;AACF,SAAA,WAAA;AAAA,EAAA;AAAA,EAE5B,SAAS;AACV,UAAA,QAAQ,KAAK,YAAY;AAC/B,UAAM,eACJ,KAAK,cACL,SACA,KAAK,YAAY,KACjB,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,8BAG9C,IAAI,kBAAkB,CAAC;AAAA;AAAA,UAE3C,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,IAAA;AAK9D,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;AAAA,mBAEd,MAAM,KAAK,cAAc,IAAI,YAAY,YAAY,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,EAAA;AAO1E;AA7Ea,sBA4EK,SAAS,UAAU,YAAY;AA3ErB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAO,CAAA;AAAA,GADb,sBACe,WAAA,WAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAO,CAAA;AAAA,GAFb,sBAEe,WAAA,aAAA,CAAA;AACC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAQ,CAAA;AAAA,GAHd,sBAGgB,WAAA,WAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAQ,CAAA;AAAA,GAJd,sBAIgB,WAAA,cAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAQ,CAAA;AAAA,GALd,sBAKgB,WAAA,aAAA,CAAA;AACD,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAO,CAAA;AAAA,GANb,sBAMe,WAAA,YAAA,CAAA;AANf,wBAAN,gBAAA;AAAA,EAFN,UAAU;AAAA,EACV,cAAc,0BAA0B;AAAA,GAC5B,qBAAA;"}

package/dist/types.d.ts

@@ -3,10 +3,7 @@ export declare enum AlertType {
     Warning = "warning",
     Caution = "caution",
     Running = "running",
-    Command = "command",
-    Notification = "notification",
-    None = "none",
-    Flat = "flat"
+    Notification = "notification"
 }
 export declare enum Direction {
     Up = "up",

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,oBAAY,SAAS;IACnB,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,YAAY,iBAAiB;IAC7B,IAAI,SAAS;IACb,IAAI,SAAS;CACd;AAED,oBAAY,SAAS;IACnB,EAAE,OAAO;IACT,IAAI,SAAS;IACb,IAAI,SAAS;IACb,KAAK,UAAU;CAChB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,oBAAY,SAAS;IACnB,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,YAAY,iBAAiB;CAC9B;AAED,oBAAY,SAAS;IACnB,EAAE,OAAO;IACT,IAAI,SAAS;IACb,IAAI,SAAS;IACb,KAAK,UAAU;CAChB"}

package/dist/types.js

@@ -3,10 +3,7 @@ var AlertType = /* @__PURE__ */ ((AlertType2) => {
   AlertType2["Warning"] = "warning";
   AlertType2["Caution"] = "caution";
   AlertType2["Running"] = "running";
-  AlertType2["Command"] = "command";
   AlertType2["Notification"] = "notification";
-  AlertType2["None"] = "none";
-  AlertType2["Flat"] = "flat";
   return AlertType2;
 })(AlertType || {});
 var Direction = /* @__PURE__ */ ((Direction2) => {

package/dist/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../src/types.ts"],"sourcesContent":["export enum AlertType {\n  Alarm = 'alarm',\n  Warning = 'warning',\n  Caution = 'caution',\n  Running = 'running',\n  Command = 'command',\n  Notification = 'notification',\n  None = 'none',\n  Flat = 'flat',\n}\n\nexport enum Direction {\n  Up = 'up',\n  Down = 'down',\n  Left = 'left',\n  Right = 'right',\n}\n"],"names":["AlertType","Direction"],"mappings":"AAAY,IAAA,8BAAAA,eAAL;AACLA,aAAA,OAAQ,IAAA;AACRA,aAAA,SAAU,IAAA;AACVA,aAAA,SAAU,IAAA;AACVA,aAAA,SAAU,IAAA;AACVA,aAAA,SAAU,IAAA;AACVA,aAAA,cAAe,IAAA;AACfA,aAAA,MAAO,IAAA;AACPA,aAAA,MAAO,IAAA;AARGA,SAAAA;AAAA,GAAA,aAAA,CAAA,CAAA;AAWA,IAAA,8BAAAC,eAAL;AACLA,aAAA,IAAK,IAAA;AACLA,aAAA,MAAO,IAAA;AACPA,aAAA,MAAO,IAAA;AACPA,aAAA,OAAQ,IAAA;AAJEA,SAAAA;AAAA,GAAA,aAAA,CAAA,CAAA;"}
+{"version":3,"file":"types.js","sources":["../src/types.ts"],"sourcesContent":["export enum AlertType {\n  Alarm = 'alarm',\n  Warning = 'warning',\n  Caution = 'caution',\n  Running = 'running',\n  Notification = 'notification',\n}\n\nexport enum Direction {\n  Up = 'up',\n  Down = 'down',\n  Left = 'left',\n  Right = 'right',\n}\n"],"names":["AlertType","Direction"],"mappings":"AAAY,IAAA,8BAAAA,eAAL;AACLA,aAAA,OAAQ,IAAA;AACRA,aAAA,SAAU,IAAA;AACVA,aAAA,SAAU,IAAA;AACVA,aAAA,SAAU,IAAA;AACVA,aAAA,cAAe,IAAA;AALLA,SAAAA;AAAA,GAAA,aAAA,CAAA,CAAA;AAQA,IAAA,8BAAAC,eAAL;AACLA,aAAA,IAAK,IAAA;AACLA,aAAA,MAAO,IAAA;AACPA,aAAA,MAAO,IAAA;AACPA,aAAA,OAAQ,IAAA;AAJEA,SAAAA;AAAA,GAAA,aAAA,CAAA,CAAA;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents",
-  "version": "0.0.15-dev-20250205200936",
+  "version": "0.0.15-dev-20250206192612",
   "type": "module",
   "repository": {
     "type": "git",
@@ -74,7 +74,7 @@
     "postcss": "^8.4.49",
     "postcss-mixins": "^11.0.3",
     "postcss-nesting": "^13.0.1",
-    "prettier": "^3.3.3",
+    "prettier": "^3.4.2",
     "release-it": "^17.1.1",
     "rollup-plugin-postcss-lit": "^2.1.0",
     "storybook": "^8.4.7",

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

@@ -1,134 +1,154 @@
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+button {
+  position: relative;
+  padding: 0;
+  appearance: none;
+  border: none;
+  background-color: transparent;
+}
+
+.wrapper.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
 }
 
 .wrapper {
-    box-sizing: border-box;
-    padding: 0;
-    padding-right: 8px;
-    background: transparent;
-    height: 48px;
-    width: 56px;
-    appearance: none;
-    border: none;
+  box-sizing: border-box;
+  background: transparent;
+  min-width: var(--global-size-spacing-touch-target-min);
+  min-height: var(--global-size-spacing-touch-target-min);
+  padding: 0 var(--app-components-alert-button-margin-horizontal);
+  appearance: none;
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  @mixin font-button;
+
+  &.standalone {
+    padding-right: 0;
+  }
+
+  &:not(.standalone) {
+    padding-left: 0;
+  }
+
+  & .icon {
+    width: var(--app-components-alert-button-icon-size);
+    height: var(--app-components-alert-button-icon-size);
+  }
+
+  & .visible-wrapper {
+    border-radius: var(--ui-components-button-border-radius-top-left)
+      var(--ui-components-button-border-radius-top-right)
+      var(--ui-components-button-border-radius-bottom-right)
+      var(--ui-components-button-border-radius-bottom-left);
     display: flex;
     align-items: center;
     justify-content: center;
+    width: var(--app-components-alert-button-alert-button-width);
+    height: var(--app-components-alert-button-visual-target-size);
+    gap: var(--app-components-alert-button-counter-spacing);
+  }
 
-    @mixin font-button;
-
-    &.standalone {
-        width: 48px;
-        padding-right: 0;
-    }
-
-    &.counter {
-        width: 64px;
-        
-        &.standalone {
-            width: 72px;
-            padding-left: 8px;
-            padding-right: 8px;
-        }
-    }
+  &:not(.counter),
+  &.type-flat {
+    padding: 0;
 
-    & .icon {
-        height: 24px;
-        width: 24px;
+    & .visible-wrapper {
+      width: var(--ui-components-icon-button-visual-target-size);
     }
+  }
 
+  &:not(.standalone) {
     & .visible-wrapper {
-        border-radius: 6px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 32px;
-        width: 100%;
-        gap: 4px;
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
     }
+  }
 
-    &.standalone:not(.counter) .visible-wrapper {
-        width: 32px;
-    }
+  &.type-alarm {
+    @mixin style style=alarm visibleWrapperClass=.visible-wrapper;
+    color: var(--on-alarm-active-color);
 
-    &:not(.standalone) {
-        & .visible-wrapper {
-            border-radius: 0 6px 6px 0;
-        }
+    &.on {
+      opacity: var(--alarm-blink-on);
     }
+  }
 
-    &.type-alarm {
-        @mixin style style=alarm visibleWrapperClass=.visible-wrapper;
-        color: var(--on-alarm-active-color);
-    }
+  &.type-alarm-off {
+    opacity: var(--alarm-blink-off);
+  }
 
-    &.type-warning {
-        @mixin style style=warning visibleWrapperClass=.visible-wrapper;
+  &.type-warning {
+    @mixin style style=warning visibleWrapperClass=.visible-wrapper;
 
-        & .visible-wrapper {
-            color: var(--on-warning-active-color, #FFF);
+    & .visible-wrapper {
+      color: var(--on-warning-active-color, #fff);
 
-            & .badge {
-                color: var(--on-warning-active-color, #FFF);
-            }
-        }
+      & .badge {
+        color: var(--on-warning-active-color, #fff);
+      }
     }
 
-    &.type-caution {
-        @mixin style style=caution visibleWrapperClass=.visible-wrapper;
-
-        & .visible-wrapper {
-            color: var(--on-caution-active-color, #FFF);
-
-            & .badge {
-                color: var(--on-caution-active-color, #FFF);
-            }
-        }
+    &.on {
+      opacity: var(--warning-blink-on);
     }
+  }
 
-    &.type-running {
-        @mixin style style=normal visibleWrapperClass=.visible-wrapper;
-
-        & .icon {
-            color: var(--alert-running-color);
-        }
-    }
+  &.type-warning-off {
+    opacity: var(--warning-blink-off);
+  }
 
-    &.type-command {
-        @mixin style style=notification visibleWrapperClass=.visible-wrapper;
+  &.type-caution {
+    @mixin style style=caution visibleWrapperClass=.visible-wrapper;
 
-        & .visible-wrapper {
-            color: var(--on-running-active-color, #FFF);
+    & .visible-wrapper {
+      color: var(--on-caution-active-color, #fff);
 
-            & .badge {
-                color: var(--on-running-active-color, #FFF);
-            }
-        }
+      & .badge {
+        color: var(--on-caution-active-color, #fff);
+      }
     }
+  }
 
-    &.type-notification {
-        @mixin style style=normal visibleWrapperClass=.visible-wrapper;
+  &.type-running {
+    @mixin style style=running visibleWrapperClass=.visible-wrapper;
+    color: var(--on-running-active-color);
+  }
 
-        & .icon {
-            color: var(--instrument-enhanced-secondary-color);
-        }
-    }
+  &.type-notification {
+    @mixin style style=notification visibleWrapperClass=.visible-wrapper;
+    color: var(--on-notification-active-color);
+  }
+
+  &.type-advice {
+    @mixin style style=advice visibleWrapperClass=.visible-wrapper;
+    color: var(--on-advice-active-color);
+  }
 
-    &.type-none {
-        @mixin style style=normal visibleWrapperClass=.visible-wrapper;
-        color: var(--on-normal-active-color);
+  &.type-none {
+    @mixin style style=normal visibleWrapperClass=.visible-wrapper;
+    color: var(--on-normal-active-color);
 
-        & .icon {
-            color: var(--on-normal-neutral-color);
-        }
+    & .icon {
+      color: var(--on-normal-neutral-color);
     }
+  }
 
-    &.type-flat {
-        @mixin style style=flat visibleWrapperClass=.visible-wrapper;
-        color: var(--on-flat-active-color);
+  &.type-flat {
+    @mixin style style=flat visibleWrapperClass=.visible-wrapper;
+    color: var(--on-flat-active-color);
 
-        & .icon {
-            color: var(--on-flat-neutral-color);
-        }
+    & .icon {
+      color: var(--on-flat-neutral-color);
     }
-}
+  }
+}

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

@@ -11,8 +11,6 @@ const meta: Meta<typeof ObcAlertButton> = {
     nAlerts: 2,
     counter: true,
     standalone: false,
-    blinkAlarmValue: true,
-    blinkWarningValue: true,
   },
   argTypes: {
     nAlerts: {
@@ -40,6 +38,28 @@ export const Alarm: Story = {
   },
 };
 
+export const AlarmStandalone: Story = {
+  args: {
+    alertType: AlertType.Alarm,
+    standalone: true,
+  },
+};
+
+export const Alarm3digits: Story = {
+  args: {
+    alertType: AlertType.Alarm,
+    nAlerts: 100,
+  },
+};
+
+export const Alarm3digitsStandalone: Story = {
+  args: {
+    alertType: AlertType.Alarm,
+    nAlerts: 100,
+    standalone: true,
+  },
+};
+
 export const Warning: Story = {
   args: {
     alertType: AlertType.Warning,
@@ -58,9 +78,11 @@ export const Running: Story = {
   },
 };
 
-export const Command: Story = {
+export const RegularIdle: Story = {
   args: {
-    alertType: AlertType.Command,
+    alertType: AlertType.Alarm,
+    nAlerts: 0,
+    standalone: false,
   },
 };
 
@@ -70,36 +92,37 @@ export const Notification: Story = {
   },
 };
 
-export const Regular: Story = {
-  args: {
-    alertType: AlertType.None,
-  },
-};
-
-export const Flat: Story = {
+export const Standalone: Story = {
   args: {
-    alertType: AlertType.Flat,
+    alertType: AlertType.Alarm,
+    nAlerts: 2,
+    counter: true,
+    standalone: true,
   },
 };
 
-export const RegularNoCounter: Story = {
+export const StandaloneIdle: Story = {
   args: {
-    alertType: AlertType.None,
-    counter: false,
+    alertType: AlertType.Alarm,
+    nAlerts: 0,
+    standalone: true,
+    flatWhenIdle: false,
   },
 };
 
-export const RegularStandalone: Story = {
+export const StandaloneIdleFlat: Story = {
   args: {
-    alertType: AlertType.None,
-    counter: true,
+    alertType: AlertType.Alarm,
+    nAlerts: 0,
     standalone: true,
+    flatWhenIdle: true,
   },
 };
 
 export const RegularStandaloneNoCounter: Story = {
   args: {
-    alertType: AlertType.None,
+    alertType: AlertType.Alarm,
+    nAlerts: 1,
     counter: false,
     standalone: true,
   },

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

@@ -1,7 +1,12 @@
 import {LitElement, html, unsafeCSS} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
 import compentStyle from './alert-button.css?inline';
+import '../../icons/icon-alerts';
 import '../../icons/icon-alerts-active';
+import '../../icons/icon-notification';
+import '../../icons/icon-notification-filled';
+import '../../icons/icon-notification-advice';
+import '../../icons/icon-notification-advice-active';
 import {AlertType} from '../../types';
 import {classMap} from 'lit/directives/class-map.js';
 
@@ -12,46 +17,103 @@ import {classMap} from 'lit/directives/class-map.js';
  * @prop {AlertType} alertType - Type of alert.
  * @prop {boolean} standalone - If the button is standalone and not used together with an notification-message.
  * @prop {boolean} counter - If the button should display a counter.
- * @prop {boolean} blinkAlarmValue - This value should alternate between true and false to make the icon blink.
- *                        It should be synchronized with the blinkValue of other alarms.
- * @prop {boolean} blinkWarningValue - This value should alternate between true and false to make the icon blink.
  *
  * @fires click - Fires when the button is clicked.
  */
 @customElement('obc-alert-button')
 export class ObcAlertButton extends LitElement {
   @property({type: Number}) nAlerts = 0;
-  @property({type: String}) alertType = AlertType.None;
+  @property({type: String}) alertType = AlertType.Alarm;
+  @property({type: Boolean}) flatWhenIdle = false;
   @property({type: Boolean}) standalone = false;
   @property({type: Boolean}) counter = false;
-  @property({type: Boolean}) blinkAlarmValue = false;
-  @property({type: Boolean}) blinkWarningValue = false;
+
+  private alertIcon() {
+    const isIdle = this.nAlerts === 0;
+    switch (this.alertType) {
+      /*
+      case AlertType.Advice:
+        if (isIdle) {
+          return html`<obi-notification-advice
+            class="icon"
+          ></obi-notification-advice>`;
+        } else {
+          return html`<obi-notification-advice-active
+            class="icon"
+          ></obi-notification-advice-active>`;
+        }
+          */
+      case AlertType.Notification:
+        if (isIdle) {
+          return html`<obi-notification class="icon"></obi-notification>`;
+        } else {
+          return html`<obi-notification-filled
+            class="icon"
+          ></obi-notification-filled>`;
+        }
+      default:
+        if (isIdle) {
+          return html`<obi-alerts class="icon"></obi-alerts>`;
+        } else {
+          return html`<obi-alerts-active class="icon"></obi-alerts-active>`;
+        }
+    }
+  }
 
   override render() {
-    let alertType = this.alertType;
-    if (this.alertType === AlertType.Alarm && !this.blinkAlarmValue) {
-      alertType = AlertType.None;
-    } else if (
-      this.alertType === AlertType.Warning &&
-      !this.blinkWarningValue
-    ) {
-      alertType = AlertType.None;
+    const isAlarm = this.alertType === AlertType.Alarm;
+    const isWarning = this.alertType === AlertType.Warning;
+    const hasAlerts = this.nAlerts > 0;
+    const isAlarmOrWarning = (isAlarm || isWarning) && hasAlerts;
+
+    let activeAlertType: string = this.alertType;
+    if (!hasAlerts) {
+      if (this.flatWhenIdle) {
+        activeAlertType = 'flat';
+      } else {
+        activeAlertType = 'none';
+      }
     }
     return html`
-      <button
-        class=${classMap({
-          wrapper: true,
-          [`type-${alertType}`]: true,
-          counter: this.counter,
-          standalone: this.standalone,
-        })}
-      >
-        <div class="visible-wrapper">
-          <obi-alerts-active class="icon"></obi-alerts-active>
-          ${this.counter
-            ? html`<div class="badge">${this.nAlerts}</div>`
-            : null}
+      <button>
+        <div
+          class=${classMap({
+            wrapper: true,
+            [`type-${activeAlertType}`]: true,
+            counter: this.counter,
+            standalone: this.standalone,
+            on: true,
+          })}
+        >
+          <div class="visible-wrapper">
+            ${this.alertIcon()}
+            ${this.counter && hasAlerts
+              ? html`<div class="badge">${this.nAlerts}</div>`
+              : null}
+          </div>
         </div>
+
+        ${isAlarmOrWarning
+          ? html`<div
+              class=${classMap({
+                wrapper: true,
+                'type-none': true,
+                counter: this.counter,
+                standalone: this.standalone,
+                [`type-${this.alertType}-off`]: true,
+                overlay: true,
+              })}
+            >
+              <div class="visible-wrapper">
+                ${this.nAlerts > 0
+                  ? html`<obi-alerts-active class="icon"></obi-alerts-active>`
+                  : html`<obi-alerts class="icon"></obi-alerts>`}
+                ${this.counter
+                  ? html`<div class="badge">${this.nAlerts}</div>`
+                  : null}
+              </div>
+            </div>`
+          : null}
       </button>
     `;
   }