@nopwdio/sdk-js/cdn/components/np-status.js

Nopwd JS SDK

import{g as u,h,k as n,l as f}from"../chunk-PJMUNIPM.js";import{a as g}from"../chunk-HHPIKOXT.js";import{a as m,b as d}from"../chunk-325E7D5T.js";import{a as c,b as o,d as i,e as p,f as l}from"../chunk-X5RZB7NH.js";import{a as r}from"../chunk-JFKSI6I7.js";var w=c`
  :host {
    display: flex;
  }

  a {
    display: flex;
    flex-grow: 1;

    align-items: center;

    gap: var(--np-component-icon-gap);

    margin: 0;
    padding: var(--np-component-padding);

    border: solid var(--np-component-border-color) var(--np-component-border-width);
    border-radius: var(--np-component-border-radius);

    font-size: var(--np-component-font-size);
    font-weight: var(--np-component-font-weight);

    color: var(--np-component-text-color);
    background-color: var(--np-component-background-color);
    text-decoration: none;
  }

  /* button success */
  :host([state="operational"]) {
    --np-component-border-color: var(--np-core-color-green-m);
    --np-component-text-color: var(--np-core-color-green-m);
  }

  :host([state="offline"]),
  :host([state="down"]) {
    --np-component-border-color: var(--np-core-color-red-m);
    --np-component-text-color: var(--np-core-color-red-m);
  }

  :host([state="disrupted"]) {
    --np-component-border-color: var(--np-core-color-orange-m);
    --np-component-text-color: var(--np-core-color-orange-m);
  }

  :host([state="nodata"]),
  :host([state="unknown"]) {
    --np-component-border-color: var(--np-core-color-grey-m);
    --np-component-text-color: var(--np-core-color-grey-m);
  }

  :host([state="unknown"]) .icon {
    animation: scale var(--np-core-animation-duration-m) ease-out infinite alternate;
  }

  :host([state="disrupted"]) .icon,
  :host([state="operational"]) .icon {
    animation: glow var(--np-core-animation-duration-xl) ease-in-out infinite alternate;
  }

  .icon {
    font-size: 0.7em;
  }
`;var b=(t=>(t.OPERATIONAL="operational",t.DISRUPTED="disrupted",t.DOWN="down",t.UNKNOWN="unknown",t.NODATA="nodata",t.OFFLINE="offline",t))(b||{}),e=class extends i{constructor(){super();this.state="unknown"}async connectedCallback(){super.connectedCallback(),this.connect()}async disconnectedCallback(){super.disconnectedCallback(),this.disconnect()}async connect(){this.state!=="offline"&&(this.state="unknown");let a="wss://ws-a5hdgaocga-uc.a.run.app",s=this.getAttribute("scope"),v=s===null?`${a}/status`:`${a}/status/${s}`;this.ws=new WebSocket(v),this.ws.onmessage=O=>{let t=JSON.parse(O.data);if(t.success_count+t.error_count===0){this.state="nodata";return}if(t.success_count===0){this.state="down";return}if(t.error_count>0){this.state="disrupted";return}this.state="operational"},this.ws.onclose=async()=>{this.state="offline",this.isConnected&&(await g(1e3),this.connect())}}disconnect(){this.state="offline",this.ws?.close()}render(){return o`<a href="https://nopwd.io/status" part="link">
      ${this.state==="down"?o`${n} <slot name="down">Service is down</slot>`:this.state==="nodata"?o`${n} <slot name="nodata">No data</slot>`:this.state==="disrupted"?o`${n} <slot name="disrupted">Some systems disrupted</slot>`:this.state==="operational"?o`${h} <slot name="operational">All systems operational</slot>`:this.state==="offline"?o`${f} <slot name="offline">Offline</slot>`:o`${u} <slot>Connecting...</slot>`}
    </a>`}};e.styles=[m,d,w],r([l({reflect:!0})],e.prototype,"state",2),e=r([p("np-status")],e);export{e as NpStatus,b as State};