@nopwdio/ui/dist/components/ui-mobile.js

Nopwd Design System

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { LitElement, css, html } from "lit";
import { customElement, property } from "lit/decorators.js";
import { battery, signal, signalSlash } from "../icons/outline.js";
let UiMobile = class UiMobile extends LitElement {
    constructor() {
        super();
        this.isOnline = true;
        this.milliseconds = 0;
        this.onConnectivityChange = this.onConnectivityChange.bind(this);
    }
    connectedCallback() {
        super.connectedCallback();
        this.intervalId = window.setInterval(() => this.updateTime(), 500);
        window.addEventListener("online", this.onConnectivityChange, true);
        window.addEventListener("offline", this.onConnectivityChange, true);
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        window.clearInterval(this.intervalId);
        window.removeEventListener("online", this.onConnectivityChange, true);
        window.removeEventListener("offline", this.onConnectivityChange, true);
    }
    onConnectivityChange() {
        this.isOnline = navigator.onLine;
    }
    onOffline() {
        this.isOnline = false;
    }
    updateTime() {
        const date = new Date();
        this.hours = date.getHours();
        this.minutes = date.getMinutes();
        this.milliseconds = date.getMilliseconds();
    }
    render() {
        return html `
      <header>
        <span class="clock">
          <span class="digit"
            >${this.hours === undefined ? "--" : this.hours.toString().padStart(2, "0")}</span
          >
          <span class="separator" ?odd=${this.milliseconds >= 500}>:</span>
          <span class="digit"
            >${this.minutes === undefined ? "--" : this.minutes.toString().padStart(2, "0")}</span
          >
        </span>
        <span class="center"></span>
        <div class="status">${this.isOnline ? signal : signalSlash}${battery}</div>
      </header>
      <slot></slot>
    `;
    }
};
UiMobile.styles = css `
    :host {
      display: flex;
      flex-shrink: 0;
      flex-flow: column;
      justify-content: stretch;
      aspect-ratio: 9 / 16;
      border-radius: var(--np-border-radius-emphasis);
      border: var(--np-border-width) solid var(--np-border-color);

      font-size: var(--np-text-size);
    }

    header {
      font-size: var(--np-text-size);
      display: grid;
      align-items: center;
      padding: var(--np-padding-emphasis);
      grid-template-columns: 3fr 2fr 3fr;
    }

    .clock,
    .status {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .clock {
      font-size: var(--np-text-size-muted);
      font-weight: var(--np-text-weight-emphasis);
      gap: var(--np-gap-muted);
    }
    .clock .separator[odd] {
      color: var(--np-text-color-muted);
    }

    .center {
      border-radius: var(--np-border-radius-emphasis);
      padding: var(--np-padding);
      background-color: var(--np-text-color);
    }

    .status {
      display: flex;
      justify-content: center;
      gap: var(--np-gap);
    }

    .icon {
      height: var(--np-text-size);
    }
  `;
__decorate([
    property({ type: Boolean })
], UiMobile.prototype, "isOnline", void 0);
__decorate([
    property({ type: Number })
], UiMobile.prototype, "hours", void 0);
__decorate([
    property({ type: Number })
], UiMobile.prototype, "minutes", void 0);
__decorate([
    property({ type: Number })
], UiMobile.prototype, "milliseconds", void 0);
UiMobile = __decorate([
    customElement("ui-mobile")
], UiMobile);
export { UiMobile };
//# sourceMappingURL=ui-mobile.js.map