@vaadin/common-frontend 0.0.18 → 0.0.20

package/ConnectionIndicator.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement, type PropertyValues } from 'lit';
 /**
  * The loading indicator states
  */
@@ -8,11 +8,18 @@ export declare const enum LoadingBarState {
     SECOND = "second",
     THIRD = "third"
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'vaadin-connection-indicator': ConnectionIndicator;
+    }
+}
 /**
  * Component showing loading and connection indicator. When added to DOM,
  * listens for changes on `window.Vaadin.connectionState` ConnectionStateStore.
  */
 export declare class ConnectionIndicator extends LitElement {
+    #private;
+    static get instance(): ConnectionIndicator;
     /**
      * Initialize global connection indicator instance at
      * window.Vaadin.connectionIndicator and add instance to the document body.
@@ -21,66 +28,45 @@ export declare class ConnectionIndicator extends LitElement {
     /**
      * The delay before showing the loading indicator, in ms.
      */
-    firstDelay: number;
+    accessor firstDelay: number;
     /**
      * The delay before the loading indicator goes into "second" state, in ms.
      */
-    secondDelay: number;
+    accessor secondDelay: number;
     /**
      * The delay before the loading indicator goes into "third" state, in ms.
      */
-    thirdDelay: number;
+    accessor thirdDelay: number;
     /**
      * The duration for which the connection state change message is visible,
      * in ms.
      */
-    expandedDuration: number;
+    accessor expandedDuration: number;
     /**
      * The message shown when the connection goes to connected state.
      */
-    onlineText: string;
+    accessor onlineText: string;
     /**
      * The message shown when the connection goes to lost state.
      */
-    offlineText: string;
+    accessor offlineText: string;
     /**
      * The message shown when the connection goes to reconnecting state.
      */
-    reconnectingText: string;
-    private offline;
-    private reconnecting;
-    private expanded;
-    private loading;
-    private loadingBarState;
-    private applyDefaultThemeState;
-    private firstTimeout;
-    private secondTimeout;
-    private thirdTimeout;
-    private expandedTimeout;
-    private connectionStateStore?;
-    private readonly connectionStateListener;
-    private lastMessageState;
+    accessor reconnectingText: string;
+    accessor offline: boolean;
+    accessor reconnecting: boolean;
+    accessor expanded: boolean;
+    accessor loading: boolean;
+    readonly connectionStateListener: () => void;
     constructor();
-    render(): import("lit").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult<1>;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    protected updated(props: PropertyValues): void;
     get applyDefaultTheme(): boolean;
     set applyDefaultTheme(applyDefaultTheme: boolean);
     protected createRenderRoot(): this;
-    /**
-     * Update state flags.
-     *
-     * @return true if the connection message changes, and therefore a new
-     * message should be shown
-     */
-    private updateConnectionState;
-    private updateLoading;
-    private renderMessage;
-    private updateTheme;
-    private getDefaultStyle;
-    private getLoadingBarStyle;
-    private timeoutFor;
-    static get instance(): ConnectionIndicator;
 }
 /**
  * The global connection indicator object. Its appearance and behavior can be

package/ConnectionIndicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConnectionIndicator.d.ts","sourceRoot":"","sources":["src/ConnectionIndicator.ts"],"names":[],"mappings":"AAgBA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAOvC;;GAEG;AACH,0BAAkB,eAAe;IAC/B,IAAI,KAAK;IACT,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED;;;GAGG;AACH,qBAAa,mBAAoB,SAAQ,UAAU;IACjD;;;OAGG;IACH,MAAM,CAAC,MAAM,IAAI,mBAAmB;IAUpC;;OAEG;IAEH,UAAU,SAAO;IAEjB;;OAEG;IAEH,WAAW,SAAQ;IAEnB;;OAEG;IAEH,UAAU,SAAQ;IAElB;;;OAGG;IAEH,gBAAgB,SAAQ;IAExB;;OAEG;IAEH,UAAU,SAAY;IAEtB;;OAEG;IAEH,WAAW,SAAqB;IAEhC;;OAEG;IAEH,gBAAgB,SAA6C;IAG7D,OAAO,CAAC,OAAO,CAAS;IAGxB,OAAO,CAAC,YAAY,CAAS;IAG7B,OAAO,CAAC,QAAQ,CAAS;IAGzB,OAAO,CAAC,OAAO,CAAS;IAGxB,OAAO,CAAC,eAAe,CAAyC;IAEhE,OAAO,CAAC,sBAAsB,CAAQ;IAEtC,OAAO,CAAC,YAAY,CAAK;IAEzB,OAAO,CAAC,aAAa,CAAK;IAE1B,OAAO,CAAC,YAAY,CAAK;IAEzB,OAAO,CAAC,eAAe,CAAK;IAE5B,OAAO,CAAC,oBAAoB,CAAC,CAAuB;IAEpD,OAAO,CAAC,QAAQ,CAAC,uBAAuB,CAAa;IAErD,OAAO,CAAC,gBAAgB,CAA8C;;IAkBtE,MAAM;IAcN,iBAAiB;IAajB,oBAAoB;IAUpB,IACI,iBAAiB,IAIoB,OAAO,CAF/C;IAED,IAAI,iBAAiB,CAAC,iBAAiB,EAAE,OAAO,EAK/C;IAED,SAAS,CAAC,gBAAgB;IAI1B;;;;;OAKG;IACH,OAAO,CAAC,qBAAqB;IAoB7B,OAAO,CAAC,aAAa;IAgCrB,OAAO,CAAC,aAAa;IAYrB,OAAO,CAAC,WAAW;IAgBnB,OAAO,CAAC,eAAe;IAgKvB,OAAO,CAAC,kBAAkB;IAa1B,OAAO,CAAC,UAAU;IAQlB,MAAM,KAAK,QAAQ,IAAI,mBAAmB,CAEzC;CACF;AAMD;;;;;;;;;GASG;AACH,eAAO,MAAM,mBAAmB,qBAA+B,CAAC"}
+{"version":3,"file":"ConnectionIndicator.d.ts","sourceRoot":"","sources":["src/ConnectionIndicator.ts"],"names":[],"mappings":"AAgBA,OAAO,EAAQ,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAO5D;;GAEG;AACH,0BAAkB,eAAe;IAC/B,IAAI,KAAK;IACT,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,6BAA6B,EAAE,mBAAmB,CAAC;KACpD;CACF;AAED;;;GAGG;AACH,qBAAa,mBAAoB,SAAQ,UAAU;;IACjD,MAAM,KAAK,QAAQ,IAAI,mBAAmB,CAEzC;IAED;;;OAGG;IACH,MAAM,CAAC,MAAM,IAAI,mBAAmB;IAUpC;;OAEG;IAEH,QAAQ,CAAC,UAAU,SAAO;IAE1B;;OAEG;IAEH,QAAQ,CAAC,WAAW,SAAQ;IAE5B;;OAEG;IAEH,QAAQ,CAAC,UAAU,SAAQ;IAE3B;;;OAGG;IAEH,QAAQ,CAAC,gBAAgB,SAAQ;IAEjC;;OAEG;IAEH,QAAQ,CAAC,UAAU,SAAY;IAE/B;;OAEG;IAEH,QAAQ,CAAC,WAAW,SAAqB;IAEzC;;OAEG;IAEH,QAAQ,CAAC,gBAAgB,SAA6C;IAGtE,QAAQ,CAAC,OAAO,UAAS;IAGzB,QAAQ,CAAC,YAAY,UAAS;IAG9B,QAAQ,CAAC,QAAQ,UAAS;IAG1B,QAAQ,CAAC,OAAO,UAAS;IAmBzB,QAAQ,CAAC,uBAAuB,EAAE,MAAM,IAAI,CAAC;;cAoB1B,MAAM;IAchB,iBAAiB;IAejB,oBAAoB;cAWV,OAAO,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI;IAMvD,IAAI,iBAAiB,IAKoB,OAAO,CAH/C;IAED,IACI,iBAAiB,CAAC,iBAAiB,EAAE,OAAO,EAK/C;cAEkB,gBAAgB;CAmSpC;AAMD;;;;;;;;;GASG;AACH,eAAO,MAAM,mBAAmB,qBAA+B,CAAC"}

package/ConnectionIndicator.js

@@ -1,209 +1,217 @@
-/*
- * Copyright 2000-2020 Vaadin Ltd.
- *
- * Licensed under the Apache License, Version 2.0 (the "License"); you may not
- * use this file except in compliance with the License. You may obtain a copy of
- * the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations under
- * the License.
- */
-import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
-import { property } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { ConnectionState } from './ConnectionState.js';
-const DEFAULT_STYLE_ID = 'css-loading-indicator';
-/**
- * The loading indicator states
- */
-export var LoadingBarState;
-(function (LoadingBarState) {
-    LoadingBarState["IDLE"] = "";
-    LoadingBarState["FIRST"] = "first";
-    LoadingBarState["SECOND"] = "second";
-    LoadingBarState["THIRD"] = "third";
-})(LoadingBarState || (LoadingBarState = {}));
-/**
- * Component showing loading and connection indicator. When added to DOM,
- * listens for changes on `window.Vaadin.connectionState` ConnectionStateStore.
- */
-export class ConnectionIndicator extends LitElement {
-    constructor() {
-        super();
-        /**
-         * The delay before showing the loading indicator, in ms.
-         */
-        this.firstDelay = 450;
-        /**
-         * The delay before the loading indicator goes into "second" state, in ms.
-         */
-        this.secondDelay = 1500;
-        /**
-         * The delay before the loading indicator goes into "third" state, in ms.
-         */
-        this.thirdDelay = 5000;
-        /**
-         * The duration for which the connection state change message is visible,
-         * in ms.
-         */
-        this.expandedDuration = 2000;
-        /**
-         * The message shown when the connection goes to connected state.
-         */
-        this.onlineText = 'Online';
-        /**
-         * The message shown when the connection goes to lost state.
-         */
-        this.offlineText = 'Connection lost';
-        /**
-         * The message shown when the connection goes to reconnecting state.
-         */
-        this.reconnectingText = 'Connection lost, trying to reconnect...';
-        this.offline = false;
-        this.reconnecting = false;
-        this.expanded = false;
-        this.loading = false;
-        this.loadingBarState = LoadingBarState.IDLE;
-        this.applyDefaultThemeState = true;
-        this.firstTimeout = 0;
-        this.secondTimeout = 0;
-        this.thirdTimeout = 0;
-        this.expandedTimeout = 0;
-        this.lastMessageState = ConnectionState.CONNECTED;
-        this.connectionStateListener = () => {
-            this.expanded = this.updateConnectionState();
-            this.expandedTimeout = this.timeoutFor(this.expandedTimeout, this.expanded, () => {
-                this.expanded = false;
-            }, this.expandedDuration);
-        };
+import { html, LitElement } from "lit";
+import { property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ConnectionState } from "./ConnectionState.js";
+const DEFAULT_STYLE_ID = "css-loading-indicator";
+var LoadingBarState = /* @__PURE__ */ ((LoadingBarState2) => {
+  LoadingBarState2["IDLE"] = "";
+  LoadingBarState2["FIRST"] = "first";
+  LoadingBarState2["SECOND"] = "second";
+  LoadingBarState2["THIRD"] = "third";
+  return LoadingBarState2;
+})(LoadingBarState || {});
+class ConnectionIndicator extends LitElement {
+  static get instance() {
+    return ConnectionIndicator.create();
+  }
+  /**
+   * Initialize global connection indicator instance at
+   * window.Vaadin.connectionIndicator and add instance to the document body.
+   */
+  static create() {
+    const $wnd = window;
+    if (!$wnd.Vaadin?.connectionIndicator) {
+      $wnd.Vaadin ??= {};
+      $wnd.Vaadin.connectionIndicator = document.createElement("vaadin-connection-indicator");
+      document.body.appendChild($wnd.Vaadin.connectionIndicator);
     }
-    /**
-     * Initialize global connection indicator instance at
-     * window.Vaadin.connectionIndicator and add instance to the document body.
-     */
-    static create() {
-        var _a, _b;
-        const $wnd = window;
-        if (!((_a = $wnd.Vaadin) === null || _a === void 0 ? void 0 : _a.connectionIndicator)) {
-            $wnd.Vaadin = $wnd.Vaadin || {};
-            $wnd.Vaadin.connectionIndicator = document.createElement('vaadin-connection-indicator');
-            document.body.appendChild($wnd.Vaadin.connectionIndicator);
-        }
-        return (_b = $wnd.Vaadin) === null || _b === void 0 ? void 0 : _b.connectionIndicator;
-    }
-    render() {
-        return html `
-      <div class="v-loading-indicator ${this.loadingBarState}" style=${this.getLoadingBarStyle()}></div>
+    return $wnd.Vaadin?.connectionIndicator;
+  }
+  @property({ type: Number })
+  accessor firstDelay = 450;
+  @property({ type: Number })
+  accessor secondDelay = 1500;
+  @property({ type: Number })
+  accessor thirdDelay = 5e3;
+  @property({ type: Number })
+  accessor expandedDuration = 2e3;
+  @property({ type: String })
+  accessor onlineText = "Online";
+  @property({ type: String })
+  accessor offlineText = "Connection lost";
+  @property({ type: String })
+  accessor reconnectingText = "Connection lost, trying to reconnect...";
+  @property({ type: Boolean, reflect: true })
+  accessor offline = false;
+  @property({ type: Boolean, reflect: true })
+  accessor reconnecting = false;
+  @property({ type: Boolean, reflect: true })
+  accessor expanded = false;
+  @property({ type: Boolean, reflect: true })
+  accessor loading = false;
+  @state()
+  accessor #loadingBarState = "" /* IDLE */;
+  accessor #isPopover = false;
+  #applyDefaultThemeState = true;
+  #firstTimeout = 0;
+  #secondTimeout = 0;
+  #thirdTimeout = 0;
+  #expandedTimeout = 0;
+  #connectionStateStore;
+  connectionStateListener;
+  #lastMessageState = ConnectionState.CONNECTED;
+  constructor() {
+    super();
+    this.connectionStateListener = () => {
+      this.expanded = this.#updateConnectionState();
+      this.#expandedTimeout = this.#timeoutFor(
+        this.#expandedTimeout,
+        this.expanded,
+        () => {
+          this.expanded = false;
+        },
+        this.expandedDuration
+      );
+    };
+  }
+  render() {
+    return html`
+      <div class="v-loading-indicator ${this.#loadingBarState}" style=${this.#getLoadingBarStyle()}></div>
 
       <div
         class="v-status-message ${classMap({
-            active: this.reconnecting,
-        })}"
+      active: this.reconnecting
+    })}"
       >
-        <span class="text"> ${this.renderMessage()} </span>
+        <span class="text"> ${this.#renderMessage()} </span>
       </div>
     `;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.#initPopover();
+    const $wnd = window;
+    if ($wnd.Vaadin?.connectionState) {
+      this.#connectionStateStore = $wnd.Vaadin.connectionState;
+      this.#connectionStateStore.addStateChangeListener(this.connectionStateListener);
+      this.#updateConnectionState();
     }
-    connectedCallback() {
-        var _a;
-        super.connectedCallback();
-        const $wnd = window;
-        if ((_a = $wnd.Vaadin) === null || _a === void 0 ? void 0 : _a.connectionState) {
-            this.connectionStateStore = $wnd.Vaadin.connectionState;
-            this.connectionStateStore.addStateChangeListener(this.connectionStateListener);
-            this.updateConnectionState();
-        }
-        this.updateTheme();
+    this.#updateTheme();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.#connectionStateStore) {
+      this.#connectionStateStore.removeStateChangeListener(this.connectionStateListener);
     }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        if (this.connectionStateStore) {
-            this.connectionStateStore.removeStateChangeListener(this.connectionStateListener);
-        }
-        this.updateTheme();
+    this.#updateTheme();
+    this.#isPopover = false;
+  }
+  updated(props) {
+    if (["loading", "offline", "reconnecting", "expanded"].some((p) => props.has(p))) {
+      this.#updatePopoverState();
     }
-    get applyDefaultTheme() {
-        return this.applyDefaultThemeState;
+  }
+  get applyDefaultTheme() {
+    return this.#applyDefaultThemeState;
+  }
+  @property({ type: Boolean, reflect: true })
+  set applyDefaultTheme(applyDefaultTheme) {
+    if (applyDefaultTheme !== this.#applyDefaultThemeState) {
+      this.#applyDefaultThemeState = applyDefaultTheme;
+      this.#updateTheme();
     }
-    set applyDefaultTheme(applyDefaultTheme) {
-        if (applyDefaultTheme !== this.applyDefaultThemeState) {
-            this.applyDefaultThemeState = applyDefaultTheme;
-            this.updateTheme();
-        }
+  }
+  createRenderRoot() {
+    return this;
+  }
+  #initPopover() {
+    this.setAttribute("popover", "manual");
+    this.style.display = "contents";
+  }
+  /**
+   * Update state flags.
+   *
+   * @returns true if the connection message changes, and therefore a new
+   * message should be shown
+   */
+  #updateConnectionState() {
+    const connectionState = this.#connectionStateStore?.state;
+    this.offline = connectionState === ConnectionState.CONNECTION_LOST;
+    this.reconnecting = connectionState === ConnectionState.RECONNECTING;
+    this.#updateLoading(connectionState === ConnectionState.LOADING);
+    if (this.loading) {
+      return false;
     }
-    createRenderRoot() {
-        return this;
+    if (connectionState !== this.#lastMessageState) {
+      this.#lastMessageState = connectionState;
+      return true;
     }
-    /**
-     * Update state flags.
-     *
-     * @return true if the connection message changes, and therefore a new
-     * message should be shown
-     */
-    updateConnectionState() {
-        var _a;
-        const state = (_a = this.connectionStateStore) === null || _a === void 0 ? void 0 : _a.state;
-        this.offline = state === ConnectionState.CONNECTION_LOST;
-        this.reconnecting = state === ConnectionState.RECONNECTING;
-        this.updateLoading(state === ConnectionState.LOADING);
-        if (this.loading) {
-            // Entering loading state, do not show message
-            return false;
-        }
-        if (state !== this.lastMessageState) {
-            this.lastMessageState = state;
-            // Message changes, show new message
-            return true;
-        }
-        // Message did not change
-        return false;
+    return false;
+  }
+  #updateLoading(loading) {
+    this.loading = loading;
+    this.#loadingBarState = "" /* IDLE */;
+    this.#firstTimeout = this.#timeoutFor(
+      this.#firstTimeout,
+      loading,
+      () => {
+        this.#loadingBarState = "first" /* FIRST */;
+      },
+      this.firstDelay
+    );
+    this.#secondTimeout = this.#timeoutFor(
+      this.#secondTimeout,
+      loading,
+      () => {
+        this.#loadingBarState = "second" /* SECOND */;
+      },
+      this.secondDelay
+    );
+    this.#thirdTimeout = this.#timeoutFor(
+      this.#thirdTimeout,
+      loading,
+      () => {
+        this.#loadingBarState = "third" /* THIRD */;
+      },
+      this.thirdDelay
+    );
+  }
+  #updatePopoverState() {
+    const showPopover = this.loading || this.offline || this.reconnecting || this.expanded;
+    if (this.#isPopover) {
+      this.hidePopover();
     }
-    updateLoading(loading) {
-        this.loading = loading;
-        this.loadingBarState = LoadingBarState.IDLE;
-        this.firstTimeout = this.timeoutFor(this.firstTimeout, loading, () => {
-            this.loadingBarState = LoadingBarState.FIRST;
-        }, this.firstDelay);
-        this.secondTimeout = this.timeoutFor(this.secondTimeout, loading, () => {
-            this.loadingBarState = LoadingBarState.SECOND;
-        }, this.secondDelay);
-        this.thirdTimeout = this.timeoutFor(this.thirdTimeout, loading, () => {
-            this.loadingBarState = LoadingBarState.THIRD;
-        }, this.thirdDelay);
+    if (showPopover) {
+      this.showPopover();
     }
-    renderMessage() {
-        if (this.reconnecting) {
-            return this.reconnectingText;
-        }
-        if (this.offline) {
-            return this.offlineText;
-        }
-        return this.onlineText;
+    this.#isPopover = showPopover;
+  }
+  #renderMessage() {
+    if (this.reconnecting) {
+      return this.reconnectingText;
     }
-    updateTheme() {
-        if (this.applyDefaultThemeState && this.isConnected) {
-            if (!document.getElementById(DEFAULT_STYLE_ID)) {
-                const style = document.createElement('style');
-                style.id = DEFAULT_STYLE_ID;
-                style.textContent = this.getDefaultStyle();
-                document.head.appendChild(style);
-            }
-        }
-        else {
-            const style = document.getElementById(DEFAULT_STYLE_ID);
-            if (style) {
-                document.head.removeChild(style);
-            }
-        }
+    if (this.offline) {
+      return this.offlineText;
+    }
+    return this.onlineText;
+  }
+  #updateTheme() {
+    if (this.#applyDefaultThemeState && this.isConnected) {
+      if (!document.getElementById(DEFAULT_STYLE_ID)) {
+        const style = document.createElement("style");
+        style.id = DEFAULT_STYLE_ID;
+        style.textContent = this.#getDefaultStyle();
+        document.head.appendChild(style);
+      }
+    } else {
+      const style = document.getElementById(DEFAULT_STYLE_ID);
+      if (style) {
+        document.head.removeChild(style);
+      }
     }
-    getDefaultStyle() {
-        return `
+  }
+  #getDefaultStyle() {
+    return `
       @keyframes v-progress-start {
         0% {
           width: 0%;
@@ -248,7 +256,6 @@ export class ConnectionIndicator extends LitElement {
       .v-loading-indicator,
       .v-status-message {
         position: fixed;
-        z-index: 251;
         left: 0;
         right: auto;
         top: 0;
@@ -360,80 +367,33 @@ export class ConnectionIndicator extends LitElement {
         }
       }
     `;
+  }
+  #getLoadingBarStyle() {
+    switch (this.#loadingBarState) {
+      case "" /* IDLE */:
+        return "display: none";
+      case "first" /* FIRST */:
+      case "second" /* SECOND */:
+      case "third" /* THIRD */:
+        return "display: block";
+      default:
+        return "";
     }
-    getLoadingBarStyle() {
-        switch (this.loadingBarState) {
-            case LoadingBarState.IDLE:
-                return 'display: none';
-            case LoadingBarState.FIRST:
-            case LoadingBarState.SECOND:
-            case LoadingBarState.THIRD:
-                return 'display: block';
-            default:
-                return '';
-        }
-    }
-    timeoutFor(timeoutId, enabled, handler, delay) {
-        if (timeoutId !== 0) {
-            window.clearTimeout(timeoutId);
-        }
-        return enabled ? window.setTimeout(handler, delay) : 0;
-    }
-    static get instance() {
-        return ConnectionIndicator.create();
+  }
+  #timeoutFor(timeoutId, enabled, handler, delay) {
+    if (timeoutId !== 0) {
+      window.clearTimeout(timeoutId);
     }
+    return enabled ? window.setTimeout(handler, delay) : 0;
+  }
 }
-__decorate([
-    property({ type: Number })
-], ConnectionIndicator.prototype, "firstDelay", void 0);
-__decorate([
-    property({ type: Number })
-], ConnectionIndicator.prototype, "secondDelay", void 0);
-__decorate([
-    property({ type: Number })
-], ConnectionIndicator.prototype, "thirdDelay", void 0);
-__decorate([
-    property({ type: Number })
-], ConnectionIndicator.prototype, "expandedDuration", void 0);
-__decorate([
-    property({ type: String })
-], ConnectionIndicator.prototype, "onlineText", void 0);
-__decorate([
-    property({ type: String })
-], ConnectionIndicator.prototype, "offlineText", void 0);
-__decorate([
-    property({ type: String })
-], ConnectionIndicator.prototype, "reconnectingText", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], ConnectionIndicator.prototype, "offline", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], ConnectionIndicator.prototype, "reconnecting", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], ConnectionIndicator.prototype, "expanded", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], ConnectionIndicator.prototype, "loading", void 0);
-__decorate([
-    property({ type: String })
-], ConnectionIndicator.prototype, "loadingBarState", void 0);
-__decorate([
-    property({ type: Boolean })
-], ConnectionIndicator.prototype, "applyDefaultTheme", null);
-if (customElements.get('vaadin-connection-indicator') === undefined) {
-    customElements.define('vaadin-connection-indicator', ConnectionIndicator);
+if (customElements.get("vaadin-connection-indicator") === void 0) {
+  customElements.define("vaadin-connection-indicator", ConnectionIndicator);
 }
-/**
- * The global connection indicator object. Its appearance and behavior can be
- * configured via properties:
- *
- * connectionIndicator.firstDelay = 0;
- * connectionIndicator.onlineText = 'The application is online';
- *
- * To avoid altering the appearance while the indicator is active, apply the
- * configuration in your application 'frontend/index.ts' file.
- */
-export const connectionIndicator = ConnectionIndicator.instance;
-//# sourceMappingURL=ConnectionIndicator.js.map
+const connectionIndicator = ConnectionIndicator.instance;
+export {
+  ConnectionIndicator,
+  LoadingBarState,
+  connectionIndicator
+};
+//# sourceMappingURL=ConnectionIndicator.js.map

package/ConnectionIndicator.js.map

@@ -1 +1,7 @@
-{"version":3,"file":"ConnectionIndicator.js","sourceRoot":"","sources":["src/ConnectionIndicator.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright 2000-2020 Vaadin Ltd.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\"); you may not\n * use this file except in compliance with the License. You may obtain a copy of\n * the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the\n * License for the specific language governing permissions and limitations under\n * the License.\n */\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ConnectionState, ConnectionStateStore } from './ConnectionState.js';\n\nconst DEFAULT_STYLE_ID = 'css-loading-indicator';\n\n/**\n * The loading indicator states\n */\nexport const enum LoadingBarState {\n  IDLE = '',\n  FIRST = 'first',\n  SECOND = 'second',\n  THIRD = 'third',\n}\n\n/**\n * Component showing loading and connection indicator. When added to DOM,\n * listens for changes on `window.Vaadin.connectionState` ConnectionStateStore.\n */\nexport class ConnectionIndicator extends LitElement {\n  /**\n   * Initialize global connection indicator instance at\n   * window.Vaadin.connectionIndicator and add instance to the document body.\n   */\n  static create(): ConnectionIndicator {\n    const $wnd = window as any;\n    if (!$wnd.Vaadin?.connectionIndicator) {\n      $wnd.Vaadin = $wnd.Vaadin || {};\n      $wnd.Vaadin.connectionIndicator = document.createElement('vaadin-connection-indicator');\n      document.body.appendChild($wnd.Vaadin.connectionIndicator);\n    }\n    return $wnd.Vaadin?.connectionIndicator as ConnectionIndicator;\n  }\n\n  /**\n   * The delay before showing the loading indicator, in ms.\n   */\n  @property({ type: Number })\n  firstDelay = 450;\n\n  /**\n   * The delay before the loading indicator goes into \"second\" state, in ms.\n   */\n  @property({ type: Number })\n  secondDelay = 1500;\n\n  /**\n   * The delay before the loading indicator goes into \"third\" state, in ms.\n   */\n  @property({ type: Number })\n  thirdDelay = 5000;\n\n  /**\n   * The duration for which the connection state change message is visible,\n   * in ms.\n   */\n  @property({ type: Number })\n  expandedDuration = 2000;\n\n  /**\n   * The message shown when the connection goes to connected state.\n   */\n  @property({ type: String })\n  onlineText = 'Online';\n\n  /**\n   * The message shown when the connection goes to lost state.\n   */\n  @property({ type: String })\n  offlineText = 'Connection lost';\n\n  /**\n   * The message shown when the connection goes to reconnecting state.\n   */\n  @property({ type: String })\n  reconnectingText = 'Connection lost, trying to reconnect...';\n\n  @property({ type: Boolean, reflect: true })\n  private offline = false;\n\n  @property({ type: Boolean, reflect: true })\n  private reconnecting = false;\n\n  @property({ type: Boolean, reflect: true })\n  private expanded = false;\n\n  @property({ type: Boolean, reflect: true })\n  private loading = false;\n\n  @property({ type: String })\n  private loadingBarState: LoadingBarState = LoadingBarState.IDLE;\n\n  private applyDefaultThemeState = true;\n\n  private firstTimeout = 0;\n\n  private secondTimeout = 0;\n\n  private thirdTimeout = 0;\n\n  private expandedTimeout = 0;\n\n  private connectionStateStore?: ConnectionStateStore;\n\n  private readonly connectionStateListener: () => void;\n\n  private lastMessageState: ConnectionState = ConnectionState.CONNECTED;\n\n  constructor() {\n    super();\n\n    this.connectionStateListener = () => {\n      this.expanded = this.updateConnectionState();\n      this.expandedTimeout = this.timeoutFor(\n        this.expandedTimeout,\n        this.expanded,\n        () => {\n          this.expanded = false;\n        },\n        this.expandedDuration\n      );\n    };\n  }\n\n  render() {\n    return html`\n      <div class=\"v-loading-indicator ${this.loadingBarState}\" style=${this.getLoadingBarStyle()}></div>\n\n      <div\n        class=\"v-status-message ${classMap({\n          active: this.reconnecting,\n        })}\"\n      >\n        <span class=\"text\"> ${this.renderMessage()} </span>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    const $wnd = window as any;\n    if ($wnd.Vaadin?.connectionState) {\n      this.connectionStateStore = $wnd.Vaadin.connectionState as ConnectionStateStore;\n      this.connectionStateStore.addStateChangeListener(this.connectionStateListener);\n      this.updateConnectionState();\n    }\n\n    this.updateTheme();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    if (this.connectionStateStore) {\n      this.connectionStateStore.removeStateChangeListener(this.connectionStateListener);\n    }\n\n    this.updateTheme();\n  }\n\n  @property({ type: Boolean })\n  get applyDefaultTheme() {\n    return this.applyDefaultThemeState;\n  }\n\n  set applyDefaultTheme(applyDefaultTheme: boolean) {\n    if (applyDefaultTheme !== this.applyDefaultThemeState) {\n      this.applyDefaultThemeState = applyDefaultTheme;\n      this.updateTheme();\n    }\n  }\n\n  protected createRenderRoot() {\n    return this;\n  }\n\n  /**\n   * Update state flags.\n   *\n   * @return true if the connection message changes, and therefore a new\n   * message should be shown\n   */\n  private updateConnectionState(): boolean {\n    const state = this.connectionStateStore?.state;\n    this.offline = state === ConnectionState.CONNECTION_LOST;\n    this.reconnecting = state === ConnectionState.RECONNECTING;\n    this.updateLoading(state === ConnectionState.LOADING);\n    if (this.loading) {\n      // Entering loading state, do not show message\n      return false;\n    }\n\n    if (state !== this.lastMessageState) {\n      this.lastMessageState = state!;\n      // Message changes, show new message\n      return true;\n    }\n\n    // Message did not change\n    return false;\n  }\n\n  private updateLoading(loading: boolean) {\n    this.loading = loading;\n    this.loadingBarState = LoadingBarState.IDLE;\n\n    this.firstTimeout = this.timeoutFor(\n      this.firstTimeout,\n      loading,\n      () => {\n        this.loadingBarState = LoadingBarState.FIRST;\n      },\n      this.firstDelay\n    );\n\n    this.secondTimeout = this.timeoutFor(\n      this.secondTimeout,\n      loading,\n      () => {\n        this.loadingBarState = LoadingBarState.SECOND;\n      },\n      this.secondDelay\n    );\n\n    this.thirdTimeout = this.timeoutFor(\n      this.thirdTimeout,\n      loading,\n      () => {\n        this.loadingBarState = LoadingBarState.THIRD;\n      },\n      this.thirdDelay\n    );\n  }\n\n  private renderMessage() {\n    if (this.reconnecting) {\n      return this.reconnectingText;\n    }\n\n    if (this.offline) {\n      return this.offlineText;\n    }\n\n    return this.onlineText;\n  }\n\n  private updateTheme() {\n    if (this.applyDefaultThemeState && this.isConnected) {\n      if (!document.getElementById(DEFAULT_STYLE_ID)) {\n        const style = document.createElement('style');\n        style.id = DEFAULT_STYLE_ID;\n        style.textContent = this.getDefaultStyle();\n        document.head.appendChild(style);\n      }\n    } else {\n      const style = document.getElementById(DEFAULT_STYLE_ID);\n      if (style) {\n        document.head.removeChild(style);\n      }\n    }\n  }\n\n  private getDefaultStyle(): string {\n    return `\n      @keyframes v-progress-start {\n        0% {\n          width: 0%;\n        }\n        100% {\n          width: 50%;\n        }\n      }\n      @keyframes v-progress-delay {\n        0% {\n          width: 50%;\n        }\n        100% {\n          width: 90%;\n        }\n      }\n      @keyframes v-progress-wait {\n        0% {\n          width: 90%;\n          height: 4px;\n        }\n        3% {\n          width: 91%;\n          height: 7px;\n        }\n        100% {\n          width: 96%;\n          height: 7px;\n        }\n      }\n      @keyframes v-progress-wait-pulse {\n        0% {\n          opacity: 1;\n        }\n        50% {\n          opacity: 0.1;\n        }\n        100% {\n          opacity: 1;\n        }\n      }\n      .v-loading-indicator,\n      .v-status-message {\n        position: fixed;\n        z-index: 251;\n        left: 0;\n        right: auto;\n        top: 0;\n        background-color: var(--lumo-primary-color, var(--material-primary-color, blue));\n        transition: none;\n      }\n      .v-loading-indicator {\n        width: 50%;\n        height: 4px;\n        opacity: 1;\n        pointer-events: none;\n        animation: v-progress-start 1000ms 200ms both;\n      }\n      .v-loading-indicator[style*='none'] {\n        display: block !important;\n        width: 100%;\n        opacity: 0;\n        animation: none;\n        transition: opacity 500ms 300ms, width 300ms;\n      }\n      .v-loading-indicator.second {\n        width: 90%;\n        animation: v-progress-delay 3.8s forwards;\n      }\n      .v-loading-indicator.third {\n        width: 96%;\n        animation: v-progress-wait 5s forwards, v-progress-wait-pulse 1s 4s infinite backwards;\n      }\n\n      vaadin-connection-indicator[offline] .v-loading-indicator,\n      vaadin-connection-indicator[reconnecting] .v-loading-indicator {\n        display: none;\n      }\n\n      .v-status-message {\n        opacity: 0;\n        width: 100%;\n        max-height: var(--status-height-collapsed, 8px);\n        overflow: hidden;\n        background-color: var(--status-bg-color-online, var(--lumo-primary-color, var(--material-primary-color, blue)));\n        color: var(\n          --status-text-color-online,\n          var(--lumo-primary-contrast-color, var(--material-primary-contrast-color, #fff))\n        );\n        font-size: 0.75rem;\n        font-weight: 600;\n        line-height: 1;\n        transition: all 0.5s;\n        padding: 0 0.5em;\n      }\n\n      vaadin-connection-indicator[offline] .v-status-message,\n      vaadin-connection-indicator[reconnecting] .v-status-message {\n        opacity: 1;\n        background-color: var(--status-bg-color-offline, var(--lumo-shade, #333));\n        color: var(\n          --status-text-color-offline,\n          var(--lumo-primary-contrast-color, var(--material-primary-contrast-color, #fff))\n        );\n        background-image: repeating-linear-gradient(\n          45deg,\n          rgba(255, 255, 255, 0),\n          rgba(255, 255, 255, 0) 10px,\n          rgba(255, 255, 255, 0.1) 10px,\n          rgba(255, 255, 255, 0.1) 20px\n        );\n      }\n\n      vaadin-connection-indicator[reconnecting] .v-status-message {\n        animation: show-reconnecting-status 2s;\n      }\n\n      vaadin-connection-indicator[offline] .v-status-message:hover,\n      vaadin-connection-indicator[reconnecting] .v-status-message:hover,\n      vaadin-connection-indicator[expanded] .v-status-message {\n        max-height: var(--status-height, 1.75rem);\n      }\n\n      vaadin-connection-indicator[expanded] .v-status-message {\n        opacity: 1;\n      }\n\n      .v-status-message span {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        height: var(--status-height, 1.75rem);\n      }\n\n      vaadin-connection-indicator[reconnecting] .v-status-message span::before {\n        content: '';\n        width: 1em;\n        height: 1em;\n        border-top: 2px solid\n          var(--status-spinner-color, var(--lumo-primary-color, var(--material-primary-color, blue)));\n        border-left: 2px solid\n          var(--status-spinner-color, var(--lumo-primary-color, var(--material-primary-color, blue)));\n        border-right: 2px solid transparent;\n        border-bottom: 2px solid transparent;\n        border-radius: 50%;\n        box-sizing: border-box;\n        animation: v-spin 0.4s linear infinite;\n        margin: 0 0.5em;\n      }\n\n      @keyframes v-spin {\n        100% {\n          transform: rotate(360deg);\n        }\n      }\n    `;\n  }\n\n  private getLoadingBarStyle(): string {\n    switch (this.loadingBarState) {\n      case LoadingBarState.IDLE:\n        return 'display: none';\n      case LoadingBarState.FIRST:\n      case LoadingBarState.SECOND:\n      case LoadingBarState.THIRD:\n        return 'display: block';\n      default:\n        return '';\n    }\n  }\n\n  private timeoutFor(timeoutId: number, enabled: boolean, handler: () => void, delay: number): number {\n    if (timeoutId !== 0) {\n      window.clearTimeout(timeoutId);\n    }\n\n    return enabled ? window.setTimeout(handler, delay) : 0;\n  }\n\n  static get instance(): ConnectionIndicator {\n    return ConnectionIndicator.create();\n  }\n}\n\nif (customElements.get('vaadin-connection-indicator') === undefined) {\n  customElements.define('vaadin-connection-indicator', ConnectionIndicator);\n}\n\n/**\n * The global connection indicator object. Its appearance and behavior can be\n * configured via properties:\n *\n * connectionIndicator.firstDelay = 0;\n * connectionIndicator.onlineText = 'The application is online';\n *\n * To avoid altering the appearance while the indicator is active, apply the\n * configuration in your application 'frontend/index.ts' file.\n */\nexport const connectionIndicator = ConnectionIndicator.instance;\n"]}
+{
+  "version": 3,
+  "sources": ["src/ConnectionIndicator.ts"],
+  "sourcesContent": ["/*\n * Copyright 2000-2025 Vaadin Ltd.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\"); you may not\n * use this file except in compliance with the License. You may obtain a copy of\n * the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the\n * License for the specific language governing permissions and limitations under\n * the License.\n */\n\nimport { html, LitElement, type PropertyValues } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ConnectionState, type ConnectionStateStore } from './ConnectionState.js';\n\nconst DEFAULT_STYLE_ID = 'css-loading-indicator';\n\n/**\n * The loading indicator states\n */\nexport const enum LoadingBarState {\n  IDLE = '',\n  FIRST = 'first',\n  SECOND = 'second',\n  THIRD = 'third',\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'vaadin-connection-indicator': ConnectionIndicator;\n  }\n}\n\n/**\n * Component showing loading and connection indicator. When added to DOM,\n * listens for changes on `window.Vaadin.connectionState` ConnectionStateStore.\n */\nexport class ConnectionIndicator extends LitElement {\n  static get instance(): ConnectionIndicator {\n    return ConnectionIndicator.create();\n  }\n\n  /**\n   * Initialize global connection indicator instance at\n   * window.Vaadin.connectionIndicator and add instance to the document body.\n   */\n  static create(): ConnectionIndicator {\n    const $wnd = window as any;\n    if (!$wnd.Vaadin?.connectionIndicator) {\n      $wnd.Vaadin ??= {};\n      $wnd.Vaadin.connectionIndicator = document.createElement('vaadin-connection-indicator');\n      document.body.appendChild($wnd.Vaadin.connectionIndicator);\n    }\n    return $wnd.Vaadin?.connectionIndicator as ConnectionIndicator;\n  }\n\n  /**\n   * The delay before showing the loading indicator, in ms.\n   */\n  @property({ type: Number })\n  accessor firstDelay = 450;\n\n  /**\n   * The delay before the loading indicator goes into \"second\" state, in ms.\n   */\n  @property({ type: Number })\n  accessor secondDelay = 1500;\n\n  /**\n   * The delay before the loading indicator goes into \"third\" state, in ms.\n   */\n  @property({ type: Number })\n  accessor thirdDelay = 5000;\n\n  /**\n   * The duration for which the connection state change message is visible,\n   * in ms.\n   */\n  @property({ type: Number })\n  accessor expandedDuration = 2000;\n\n  /**\n   * The message shown when the connection goes to connected state.\n   */\n  @property({ type: String })\n  accessor onlineText = 'Online';\n\n  /**\n   * The message shown when the connection goes to lost state.\n   */\n  @property({ type: String })\n  accessor offlineText = 'Connection lost';\n\n  /**\n   * The message shown when the connection goes to reconnecting state.\n   */\n  @property({ type: String })\n  accessor reconnectingText = 'Connection lost, trying to reconnect...';\n\n  @property({ type: Boolean, reflect: true })\n  accessor offline = false;\n\n  @property({ type: Boolean, reflect: true })\n  accessor reconnecting = false;\n\n  @property({ type: Boolean, reflect: true })\n  accessor expanded = false;\n\n  @property({ type: Boolean, reflect: true })\n  accessor loading = false;\n\n  @state()\n  accessor #loadingBarState: LoadingBarState = LoadingBarState.IDLE;\n\n  accessor #isPopover: boolean = false;\n\n  #applyDefaultThemeState = true;\n\n  #firstTimeout = 0;\n\n  #secondTimeout = 0;\n\n  #thirdTimeout = 0;\n\n  #expandedTimeout = 0;\n\n  #connectionStateStore?: ConnectionStateStore;\n\n  readonly connectionStateListener: () => void;\n\n  #lastMessageState: ConnectionState = ConnectionState.CONNECTED;\n\n  constructor() {\n    super();\n\n    this.connectionStateListener = () => {\n      this.expanded = this.#updateConnectionState();\n      this.#expandedTimeout = this.#timeoutFor(\n        this.#expandedTimeout,\n        this.expanded,\n        () => {\n          this.expanded = false;\n        },\n        this.expandedDuration,\n      );\n    };\n  }\n\n  protected override render() {\n    return html`\n      <div class=\"v-loading-indicator ${this.#loadingBarState}\" style=${this.#getLoadingBarStyle()}></div>\n\n      <div\n        class=\"v-status-message ${classMap({\n          active: this.reconnecting,\n        })}\"\n      >\n        <span class=\"text\"> ${this.#renderMessage()} </span>\n      </div>\n    `;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    this.#initPopover();\n\n    const $wnd = window as any;\n    if ($wnd.Vaadin?.connectionState) {\n      this.#connectionStateStore = $wnd.Vaadin.connectionState as ConnectionStateStore;\n      this.#connectionStateStore.addStateChangeListener(this.connectionStateListener);\n      this.#updateConnectionState();\n    }\n\n    this.#updateTheme();\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n\n    if (this.#connectionStateStore) {\n      this.#connectionStateStore.removeStateChangeListener(this.connectionStateListener);\n    }\n\n    this.#updateTheme();\n    this.#isPopover = false;\n  }\n\n  protected override updated(props: PropertyValues): void {\n    if (['loading', 'offline', 'reconnecting', 'expanded'].some((p) => props.has(p))) {\n      this.#updatePopoverState();\n    }\n  }\n\n  get applyDefaultTheme() {\n    return this.#applyDefaultThemeState;\n  }\n\n  @property({ type: Boolean, reflect: true })\n  set applyDefaultTheme(applyDefaultTheme: boolean) {\n    if (applyDefaultTheme !== this.#applyDefaultThemeState) {\n      this.#applyDefaultThemeState = applyDefaultTheme;\n      this.#updateTheme();\n    }\n  }\n\n  protected override createRenderRoot() {\n    return this;\n  }\n\n  #initPopover() {\n    // Allow showing the indicator as popover\n    this.setAttribute('popover', 'manual');\n    // Override user agent styles for popover\n    this.style.display = 'contents';\n  }\n\n  /**\n   * Update state flags.\n   *\n   * @returns true if the connection message changes, and therefore a new\n   * message should be shown\n   */\n  #updateConnectionState(): boolean {\n    const connectionState = this.#connectionStateStore?.state;\n    this.offline = connectionState === ConnectionState.CONNECTION_LOST;\n    this.reconnecting = connectionState === ConnectionState.RECONNECTING;\n    this.#updateLoading(connectionState === ConnectionState.LOADING);\n    if (this.loading) {\n      // Entering loading state, do not show message\n      return false;\n    }\n\n    if (connectionState !== this.#lastMessageState) {\n      this.#lastMessageState = connectionState!;\n      // Message changes, show new message\n      return true;\n    }\n\n    // Message did not change\n    return false;\n  }\n\n  #updateLoading(loading: boolean) {\n    this.loading = loading;\n    this.#loadingBarState = LoadingBarState.IDLE;\n\n    this.#firstTimeout = this.#timeoutFor(\n      this.#firstTimeout,\n      loading,\n      () => {\n        this.#loadingBarState = LoadingBarState.FIRST;\n      },\n      this.firstDelay,\n    );\n\n    this.#secondTimeout = this.#timeoutFor(\n      this.#secondTimeout,\n      loading,\n      () => {\n        this.#loadingBarState = LoadingBarState.SECOND;\n      },\n      this.secondDelay,\n    );\n\n    this.#thirdTimeout = this.#timeoutFor(\n      this.#thirdTimeout,\n      loading,\n      () => {\n        this.#loadingBarState = LoadingBarState.THIRD;\n      },\n      this.thirdDelay,\n    );\n  }\n\n  #updatePopoverState() {\n    const showPopover = this.loading || this.offline || this.reconnecting || this.expanded;\n\n    // Always close the popover first on state changes. This way, on every state change,\n    // showPopover is called again, resulting in the connection indicator being shown on\n    // top of other popovers that might have been added, for example after a reconnect.\n    if (this.#isPopover) {\n      this.hidePopover();\n    }\n    if (showPopover) {\n      this.showPopover();\n    }\n    this.#isPopover = showPopover;\n  }\n\n  #renderMessage() {\n    if (this.reconnecting) {\n      return this.reconnectingText;\n    }\n\n    if (this.offline) {\n      return this.offlineText;\n    }\n\n    return this.onlineText;\n  }\n\n  #updateTheme() {\n    if (this.#applyDefaultThemeState && this.isConnected) {\n      if (!document.getElementById(DEFAULT_STYLE_ID)) {\n        const style = document.createElement('style');\n        style.id = DEFAULT_STYLE_ID;\n        style.textContent = this.#getDefaultStyle();\n        document.head.appendChild(style);\n      }\n    } else {\n      const style = document.getElementById(DEFAULT_STYLE_ID);\n      if (style) {\n        document.head.removeChild(style);\n      }\n    }\n  }\n\n  #getDefaultStyle(): string {\n    return `\n      @keyframes v-progress-start {\n        0% {\n          width: 0%;\n        }\n        100% {\n          width: 50%;\n        }\n      }\n      @keyframes v-progress-delay {\n        0% {\n          width: 50%;\n        }\n        100% {\n          width: 90%;\n        }\n      }\n      @keyframes v-progress-wait {\n        0% {\n          width: 90%;\n          height: 4px;\n        }\n        3% {\n          width: 91%;\n          height: 7px;\n        }\n        100% {\n          width: 96%;\n          height: 7px;\n        }\n      }\n      @keyframes v-progress-wait-pulse {\n        0% {\n          opacity: 1;\n        }\n        50% {\n          opacity: 0.1;\n        }\n        100% {\n          opacity: 1;\n        }\n      }\n      .v-loading-indicator,\n      .v-status-message {\n        position: fixed;\n        left: 0;\n        right: auto;\n        top: 0;\n        background-color: var(--lumo-primary-color, var(--material-primary-color, blue));\n        transition: none;\n      }\n      .v-loading-indicator {\n        width: 50%;\n        height: 4px;\n        opacity: 1;\n        pointer-events: none;\n        animation: v-progress-start 1000ms 200ms both;\n      }\n      .v-loading-indicator[style*='none'] {\n        display: block !important;\n        width: 100%;\n        opacity: 0;\n        animation: none;\n        transition: opacity 500ms 300ms, width 300ms;\n      }\n      .v-loading-indicator.second {\n        width: 90%;\n        animation: v-progress-delay 3.8s forwards;\n      }\n      .v-loading-indicator.third {\n        width: 96%;\n        animation: v-progress-wait 5s forwards, v-progress-wait-pulse 1s 4s infinite backwards;\n      }\n\n      vaadin-connection-indicator[offline] .v-loading-indicator,\n      vaadin-connection-indicator[reconnecting] .v-loading-indicator {\n        display: none;\n      }\n\n      .v-status-message {\n        opacity: 0;\n        width: 100%;\n        max-height: var(--status-height-collapsed, 8px);\n        overflow: hidden;\n        background-color: var(--status-bg-color-online, var(--lumo-primary-color, var(--material-primary-color, blue)));\n        color: var(\n          --status-text-color-online,\n          var(--lumo-primary-contrast-color, var(--material-primary-contrast-color, #fff))\n        );\n        font-size: 0.75rem;\n        font-weight: 600;\n        line-height: 1;\n        transition: all 0.5s;\n        padding: 0 0.5em;\n      }\n\n      vaadin-connection-indicator[offline] .v-status-message,\n      vaadin-connection-indicator[reconnecting] .v-status-message {\n        opacity: 1;\n        background-color: var(--status-bg-color-offline, var(--lumo-shade, #333));\n        color: var(\n          --status-text-color-offline,\n          var(--lumo-primary-contrast-color, var(--material-primary-contrast-color, #fff))\n        );\n        background-image: repeating-linear-gradient(\n          45deg,\n          rgba(255, 255, 255, 0),\n          rgba(255, 255, 255, 0) 10px,\n          rgba(255, 255, 255, 0.1) 10px,\n          rgba(255, 255, 255, 0.1) 20px\n        );\n      }\n\n      vaadin-connection-indicator[reconnecting] .v-status-message {\n        animation: show-reconnecting-status 2s;\n      }\n\n      vaadin-connection-indicator[offline] .v-status-message:hover,\n      vaadin-connection-indicator[reconnecting] .v-status-message:hover,\n      vaadin-connection-indicator[expanded] .v-status-message {\n        max-height: var(--status-height, 1.75rem);\n      }\n\n      vaadin-connection-indicator[expanded] .v-status-message {\n        opacity: 1;\n      }\n\n      .v-status-message span {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        height: var(--status-height, 1.75rem);\n      }\n\n      vaadin-connection-indicator[reconnecting] .v-status-message span::before {\n        content: '';\n        width: 1em;\n        height: 1em;\n        border-top: 2px solid\n          var(--status-spinner-color, var(--lumo-primary-color, var(--material-primary-color, blue)));\n        border-left: 2px solid\n          var(--status-spinner-color, var(--lumo-primary-color, var(--material-primary-color, blue)));\n        border-right: 2px solid transparent;\n        border-bottom: 2px solid transparent;\n        border-radius: 50%;\n        box-sizing: border-box;\n        animation: v-spin 0.4s linear infinite;\n        margin: 0 0.5em;\n      }\n\n      @keyframes v-spin {\n        100% {\n          transform: rotate(360deg);\n        }\n      }\n    `;\n  }\n\n  #getLoadingBarStyle(): string {\n    switch (this.#loadingBarState) {\n      case LoadingBarState.IDLE:\n        return 'display: none';\n      case LoadingBarState.FIRST:\n      case LoadingBarState.SECOND:\n      case LoadingBarState.THIRD:\n        return 'display: block';\n      default:\n        return '';\n    }\n  }\n\n  #timeoutFor(timeoutId: number, enabled: boolean, handler: () => void, delay: number): number {\n    if (timeoutId !== 0) {\n      window.clearTimeout(timeoutId);\n    }\n\n    return enabled ? window.setTimeout(handler, delay) : 0;\n  }\n}\n\nif (customElements.get('vaadin-connection-indicator') === undefined) {\n  customElements.define('vaadin-connection-indicator', ConnectionIndicator);\n}\n\n/**\n * The global connection indicator object. Its appearance and behavior can be\n * configured via properties:\n *\n * connectionIndicator.firstDelay = 0;\n * connectionIndicator.onlineText = 'The application is online';\n *\n * To avoid altering the appearance while the indicator is active, apply the\n * configuration in your application 'frontend/index.ts' file.\n */\nexport const connectionIndicator = ConnectionIndicator.instance;\n"],
+  "mappings": "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",
+  "names": ["LoadingBarState"]
+}

package/ConnectionState.d.ts

@@ -6,7 +6,7 @@ export declare enum ConnectionState {
     CONNECTED = "connected",
     /**
      * Application is connected and Flow is loading application state from the
-     * server, or Fusion is waiting for an endpoint call to return.
+     * server, or Hilla is waiting for an endpoint call to return.
      */
     LOADING = "loading",
     /**
@@ -24,23 +24,19 @@ export declare enum ConnectionState {
      */
     CONNECTION_LOST = "connection-lost"
 }
-export declare type ConnectionStateChangeListener = (previous: ConnectionState, current: ConnectionState) => void;
+export type ConnectionStateChangeListener = (previous: ConnectionState, current: ConnectionState) => void;
 export declare class ConnectionStateStore {
-    private connectionState;
-    private stateChangeListeners;
-    private loadingCount;
+    #private;
     constructor(initialState: ConnectionState);
     addStateChangeListener(listener: ConnectionStateChangeListener): void;
     removeStateChangeListener(listener: ConnectionStateChangeListener): void;
     loadingStarted(): void;
     loadingFinished(): void;
     loadingFailed(): void;
-    private decreaseLoadingCount;
     get state(): ConnectionState;
     set state(newState: ConnectionState);
     get online(): boolean;
     get offline(): boolean;
-    private serviceWorkerMessageListener;
 }
-export declare const isLocalhost: (hostname: string) => boolean;
+export declare function isLocalhost(hostname: string): boolean;
 //# sourceMappingURL=ConnectionState.d.ts.map

package/ConnectionState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConnectionState.d.ts","sourceRoot":"","sources":["src/ConnectionState.ts"],"names":[],"mappings":"AAAA,oBAAY,eAAe;IACzB;;;OAGG;IACH,SAAS,cAAc;IAEvB;;;OAGG;IACH,OAAO,YAAY;IAEnB;;;;;;OAMG;IACH,YAAY,iBAAiB;IAE7B;;;;OAIG;IACH,eAAe,oBAAoB;CACpC;AAED,oBAAY,6BAA6B,GAAG,CAAC,QAAQ,EAAE,eAAe,EAAE,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;AAE1G,qBAAa,oBAAoB;IAC/B,OAAO,CAAC,eAAe,CAAkB;IAEzC,OAAO,CAAC,oBAAoB,CAAiD;IAE7E,OAAO,CAAC,YAAY,CAAK;gBAEb,YAAY,EAAE,eAAe;IAmBzC,sBAAsB,CAAC,QAAQ,EAAE,6BAA6B,GAAG,IAAI;IAIrE,yBAAyB,CAAC,QAAQ,EAAE,6BAA6B,GAAG,IAAI;IAIxE,cAAc,IAAI,IAAI;IAKtB,eAAe,IAAI,IAAI;IAIvB,aAAa,IAAI,IAAI;IAIrB,OAAO,CAAC,oBAAoB;IAS5B,IAAI,KAAK,IAAI,eAAe,CAE3B;IAED,IAAI,KAAK,CAAC,QAAQ,EAAE,eAAe,EASlC;IAED,IAAI,MAAM,IAAI,OAAO,CAEpB;IAED,IAAI,OAAO,IAAI,OAAO,CAErB;IAED,OAAO,CAAC,4BAA4B;CAWrC;AAED,eAAO,MAAM,WAAW,aAAc,MAAM,YAY3C,CAAC"}
+{"version":3,"file":"ConnectionState.d.ts","sourceRoot":"","sources":["src/ConnectionState.ts"],"names":[],"mappings":"AAgBA,oBAAY,eAAe;IACzB;;;OAGG;IACH,SAAS,cAAc;IAEvB;;;OAGG;IACH,OAAO,YAAY;IAEnB;;;;;;OAMG;IACH,YAAY,iBAAiB;IAE7B;;;;OAIG;IACH,eAAe,oBAAoB;CACpC;AAED,MAAM,MAAM,6BAA6B,GAAG,CAAC,QAAQ,EAAE,eAAe,EAAE,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;AAE1G,qBAAa,oBAAoB;;gBAMnB,YAAY,EAAE,eAAe;IAoBzC,sBAAsB,CAAC,QAAQ,EAAE,6BAA6B,GAAG,IAAI;IAIrE,yBAAyB,CAAC,QAAQ,EAAE,6BAA6B,GAAG,IAAI;IAIxE,cAAc,IAAI,IAAI;IAKtB,eAAe,IAAI,IAAI;IAIvB,aAAa,IAAI,IAAI;IAarB,IAAI,KAAK,IAAI,eAAe,CAE3B;IAED,IAAI,KAAK,CAAC,QAAQ,EAAE,eAAe,EASlC;IAED,IAAI,MAAM,IAAI,OAAO,CAEpB;IAED,IAAI,OAAO,IAAI,OAAO,CAErB;CAcF;AAED,wBAAgB,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAUrD"}

package/ConnectionState.js

@@ -1,128 +1,103 @@
-var _a;
-export var ConnectionState;
-(function (ConnectionState) {
-    /**
-     * Application is connected to server: last transaction over the wire (XHR /
-     * heartbeat / endpoint call) was successful.
-     */
-    ConnectionState["CONNECTED"] = "connected";
-    /**
-     * Application is connected and Flow is loading application state from the
-     * server, or Fusion is waiting for an endpoint call to return.
-     */
-    ConnectionState["LOADING"] = "loading";
-    /**
-     * Application has been temporarily disconnected from the server because the
-     * last transaction over the wire (XHR / heartbeat / endpoint call) resulted
-     * in a network error, or the browser has received the 'online' event and needs
-     * to verify reconnection with the server. Flow is attempting to reconnect
-     * a configurable number of times before giving up.
-     */
-    ConnectionState["RECONNECTING"] = "reconnecting";
-    /**
-     * Application has been permanently disconnected due to browser receiving the
-     * 'offline' event, or the server not being reached after a number of reconnect
-     * attempts.
-     */
-    ConnectionState["CONNECTION_LOST"] = "connection-lost";
-})(ConnectionState || (ConnectionState = {}));
-export class ConnectionStateStore {
-    constructor(initialState) {
-        this.stateChangeListeners = new Set();
-        this.loadingCount = 0;
-        this.connectionState = initialState;
-        this.serviceWorkerMessageListener = this.serviceWorkerMessageListener.bind(this);
-        if (navigator.serviceWorker) {
-            // Query service worker if the most recent fetch was served from cache
-            // Add message listener for handling response
-            navigator.serviceWorker.addEventListener('message', this.serviceWorkerMessageListener);
-            // Send JSON-RPC request to Vaadin service worker
-            navigator.serviceWorker.ready.then((registration) => {
-                var _a;
-                (_a = registration === null || registration === void 0 ? void 0 : registration.active) === null || _a === void 0 ? void 0 : _a.postMessage({
-                    method: 'Vaadin.ServiceWorker.isConnectionLost',
-                    id: 'Vaadin.ServiceWorker.isConnectionLost',
-                });
-            });
-        }
-    }
-    addStateChangeListener(listener) {
-        this.stateChangeListeners.add(listener);
-    }
-    removeStateChangeListener(listener) {
-        this.stateChangeListeners.delete(listener);
-    }
-    loadingStarted() {
-        this.state = ConnectionState.LOADING;
-        this.loadingCount += 1;
-    }
-    loadingFinished() {
-        this.decreaseLoadingCount(ConnectionState.CONNECTED);
-    }
-    loadingFailed() {
-        this.decreaseLoadingCount(ConnectionState.CONNECTION_LOST);
-    }
-    decreaseLoadingCount(finalState) {
-        if (this.loadingCount > 0) {
-            this.loadingCount -= 1;
-            if (this.loadingCount === 0) {
-                this.state = finalState;
-            }
-        }
-    }
-    get state() {
-        return this.connectionState;
-    }
-    set state(newState) {
-        if (newState !== this.connectionState) {
-            const prevState = this.connectionState;
-            this.connectionState = newState;
-            this.loadingCount = 0;
-            for (const listener of this.stateChangeListeners) {
-                listener(prevState, this.connectionState);
-            }
-        }
-    }
-    get online() {
-        return this.connectionState === ConnectionState.CONNECTED || this.connectionState === ConnectionState.LOADING;
-    }
-    get offline() {
-        return !this.online;
-    }
-    serviceWorkerMessageListener(event) {
-        // Handle JSON-RPC response from service worker
-        if (typeof event.data === 'object' && event.data.id === 'Vaadin.ServiceWorker.isConnectionLost') {
-            if (event.data.result === true) {
-                this.state = ConnectionState.CONNECTION_LOST;
-            }
-            // Cleanup: remove event listener upon receiving response
-            navigator.serviceWorker.removeEventListener('message', this.serviceWorkerMessageListener);
-        }
-    }
+var ConnectionState = /* @__PURE__ */ ((ConnectionState2) => {
+  ConnectionState2["CONNECTED"] = "connected";
+  ConnectionState2["LOADING"] = "loading";
+  ConnectionState2["RECONNECTING"] = "reconnecting";
+  ConnectionState2["CONNECTION_LOST"] = "connection-lost";
+  return ConnectionState2;
+})(ConnectionState || {});
+class ConnectionStateStore {
+  #stateChangeListeners = /* @__PURE__ */ new Set();
+  #connectionState;
+  #loadingCount = 0;
+  constructor(initialState) {
+    this.#connectionState = initialState;
+    if (navigator.serviceWorker) {
+      navigator.serviceWorker.addEventListener("message", this.#serviceWorkerMessageListener);
+      void navigator.serviceWorker.ready.then((registration) => {
+        registration.active?.postMessage({
+          method: "Vaadin.ServiceWorker.isConnectionLost",
+          id: "Vaadin.ServiceWorker.isConnectionLost"
+        });
+      });
+    }
+  }
+  addStateChangeListener(listener) {
+    this.#stateChangeListeners.add(listener);
+  }
+  removeStateChangeListener(listener) {
+    this.#stateChangeListeners.delete(listener);
+  }
+  loadingStarted() {
+    this.state = "loading" /* LOADING */;
+    this.#loadingCount += 1;
+  }
+  loadingFinished() {
+    this.#decreaseLoadingCount("connected" /* CONNECTED */);
+  }
+  loadingFailed() {
+    this.#decreaseLoadingCount("connection-lost" /* CONNECTION_LOST */);
+  }
+  #decreaseLoadingCount(finalState) {
+    if (this.#loadingCount > 0) {
+      this.#loadingCount -= 1;
+      if (this.#loadingCount === 0) {
+        this.state = finalState;
+      }
+    }
+  }
+  get state() {
+    return this.#connectionState;
+  }
+  set state(newState) {
+    if (newState !== this.#connectionState) {
+      const prevState = this.#connectionState;
+      this.#connectionState = newState;
+      this.#loadingCount = 0;
+      for (const listener of this.#stateChangeListeners) {
+        listener(prevState, this.#connectionState);
+      }
+    }
+  }
+  get online() {
+    return this.#connectionState === "connected" /* CONNECTED */ || this.#connectionState === "loading" /* LOADING */;
+  }
+  get offline() {
+    return !this.online;
+  }
+  #serviceWorkerMessageListener = (event) => {
+    if (typeof event.data === "object" && event.data.id === "Vaadin.ServiceWorker.isConnectionLost") {
+      if (event.data.result === true) {
+        this.state = "connection-lost" /* CONNECTION_LOST */;
+      }
+      navigator.serviceWorker.removeEventListener("message", this.#serviceWorkerMessageListener);
+    }
+  };
+}
+function isLocalhost(hostname) {
+  if (hostname === "localhost") {
+    return true;
+  }
+  if (hostname === "[::1]") {
+    return true;
+  }
+  return /^127\.\d+\.\d+\.\d+$/u.test(hostname);
 }
-export const isLocalhost = (hostname) => {
-    if (hostname === 'localhost') {
-        return true;
-    }
-    if (hostname === '[::1]') {
-        return true;
-    }
-    if (hostname.match(/^127\.\d+\.\d+\.\d+$/)) {
-        return true;
-    }
-    return false;
-};
 const $wnd = window;
-if (!((_a = $wnd.Vaadin) === null || _a === void 0 ? void 0 : _a.connectionState)) {
-    let online;
-    if (isLocalhost(window.location.hostname)) {
-        // We do not know if we are online or not as we cannot trust navigator.onLine which checks availability of a network connection. Better to assume online so localhost apps can work
-        online = true;
-    }
-    else {
-        online = navigator.onLine;
-    }
-    $wnd.Vaadin = $wnd.Vaadin || {};
-    $wnd.Vaadin.connectionState = new ConnectionStateStore(online ? ConnectionState.CONNECTED : ConnectionState.CONNECTION_LOST);
+if (!$wnd.Vaadin?.connectionState) {
+  let online;
+  if (isLocalhost(window.location.hostname)) {
+    online = true;
+  } else {
+    online = navigator.onLine;
+  }
+  $wnd.Vaadin ??= {};
+  $wnd.Vaadin.connectionState = new ConnectionStateStore(
+    online ? "connected" /* CONNECTED */ : "connection-lost" /* CONNECTION_LOST */
+  );
 }
-//# sourceMappingURL=ConnectionState.js.map
+export {
+  ConnectionState,
+  ConnectionStateStore,
+  isLocalhost
+};
+//# sourceMappingURL=ConnectionState.js.map

package/ConnectionState.js.map

@@ -1 +1,7 @@
-{"version":3,"file":"ConnectionState.js","sourceRoot":"","sources":["src/ConnectionState.ts"],"names":[],"mappings":"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","sourcesContent":["export enum ConnectionState {\n  /**\n   * Application is connected to server: last transaction over the wire (XHR /\n   * heartbeat / endpoint call) was successful.\n   */\n  CONNECTED = 'connected',\n\n  /**\n   * Application is connected and Flow is loading application state from the\n   * server, or Fusion is waiting for an endpoint call to return.\n   */\n  LOADING = 'loading',\n\n  /**\n   * Application has been temporarily disconnected from the server because the\n   * last transaction over the wire (XHR / heartbeat / endpoint call) resulted\n   * in a network error, or the browser has received the 'online' event and needs\n   * to verify reconnection with the server. Flow is attempting to reconnect\n   * a configurable number of times before giving up.\n   */\n  RECONNECTING = 'reconnecting',\n\n  /**\n   * Application has been permanently disconnected due to browser receiving the\n   * 'offline' event, or the server not being reached after a number of reconnect\n   * attempts.\n   */\n  CONNECTION_LOST = 'connection-lost',\n}\n\nexport type ConnectionStateChangeListener = (previous: ConnectionState, current: ConnectionState) => void;\n\nexport class ConnectionStateStore {\n  private connectionState: ConnectionState;\n\n  private stateChangeListeners: Set<ConnectionStateChangeListener> = new Set();\n\n  private loadingCount = 0;\n\n  constructor(initialState: ConnectionState) {\n    this.connectionState = initialState;\n\n    this.serviceWorkerMessageListener = this.serviceWorkerMessageListener.bind(this);\n\n    if (navigator.serviceWorker) {\n      // Query service worker if the most recent fetch was served from cache\n      // Add message listener for handling response\n      navigator.serviceWorker.addEventListener('message', this.serviceWorkerMessageListener);\n      // Send JSON-RPC request to Vaadin service worker\n      navigator.serviceWorker.ready.then((registration) => {\n        registration?.active?.postMessage({\n          method: 'Vaadin.ServiceWorker.isConnectionLost',\n          id: 'Vaadin.ServiceWorker.isConnectionLost',\n        });\n      });\n    }\n  }\n\n  addStateChangeListener(listener: ConnectionStateChangeListener): void {\n    this.stateChangeListeners.add(listener);\n  }\n\n  removeStateChangeListener(listener: ConnectionStateChangeListener): void {\n    this.stateChangeListeners.delete(listener);\n  }\n\n  loadingStarted(): void {\n    this.state = ConnectionState.LOADING;\n    this.loadingCount += 1;\n  }\n\n  loadingFinished(): void {\n    this.decreaseLoadingCount(ConnectionState.CONNECTED);\n  }\n\n  loadingFailed(): void {\n    this.decreaseLoadingCount(ConnectionState.CONNECTION_LOST);\n  }\n\n  private decreaseLoadingCount(finalState: ConnectionState) {\n    if (this.loadingCount > 0) {\n      this.loadingCount -= 1;\n      if (this.loadingCount === 0) {\n        this.state = finalState;\n      }\n    }\n  }\n\n  get state(): ConnectionState {\n    return this.connectionState;\n  }\n\n  set state(newState: ConnectionState) {\n    if (newState !== this.connectionState) {\n      const prevState = this.connectionState;\n      this.connectionState = newState;\n      this.loadingCount = 0;\n      for (const listener of this.stateChangeListeners) {\n        listener(prevState, this.connectionState);\n      }\n    }\n  }\n\n  get online(): boolean {\n    return this.connectionState === ConnectionState.CONNECTED || this.connectionState === ConnectionState.LOADING;\n  }\n\n  get offline(): boolean {\n    return !this.online;\n  }\n\n  private serviceWorkerMessageListener(event: MessageEvent) {\n    // Handle JSON-RPC response from service worker\n    if (typeof event.data === 'object' && event.data.id === 'Vaadin.ServiceWorker.isConnectionLost') {\n      if (event.data.result === true) {\n        this.state = ConnectionState.CONNECTION_LOST;\n      }\n\n      // Cleanup: remove event listener upon receiving response\n      navigator.serviceWorker.removeEventListener('message', this.serviceWorkerMessageListener);\n    }\n  }\n}\n\nexport const isLocalhost = (hostname: string) => {\n  if (hostname === 'localhost') {\n    return true;\n  }\n  if (hostname === '[::1]') {\n    return true;\n  }\n  if (hostname.match(/^127\\.\\d+\\.\\d+\\.\\d+$/)) {\n    return true;\n  }\n\n  return false;\n};\n\nconst $wnd = window as any;\nif (!$wnd.Vaadin?.connectionState) {\n  let online;\n  if (isLocalhost(window.location.hostname)) {\n    // We do not know if we are online or not as we cannot trust navigator.onLine which checks availability of a network connection. Better to assume online so localhost apps can work\n    online = true;\n  } else {\n    online = navigator.onLine;\n  }\n\n  $wnd.Vaadin = $wnd.Vaadin || {};\n  $wnd.Vaadin.connectionState = new ConnectionStateStore(\n    online ? ConnectionState.CONNECTED : ConnectionState.CONNECTION_LOST\n  );\n}\n"]}
+{
+  "version": 3,
+  "sources": ["src/ConnectionState.ts"],
+  "sourcesContent": ["/*\n * Copyright 2000-2025 Vaadin Ltd.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\"); you may not\n * use this file except in compliance with the License. You may obtain a copy of\n * the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the\n * License for the specific language governing permissions and limitations under\n * the License.\n */\n\nexport enum ConnectionState {\n  /**\n   * Application is connected to server: last transaction over the wire (XHR /\n   * heartbeat / endpoint call) was successful.\n   */\n  CONNECTED = 'connected',\n\n  /**\n   * Application is connected and Flow is loading application state from the\n   * server, or Hilla is waiting for an endpoint call to return.\n   */\n  LOADING = 'loading',\n\n  /**\n   * Application has been temporarily disconnected from the server because the\n   * last transaction over the wire (XHR / heartbeat / endpoint call) resulted\n   * in a network error, or the browser has received the 'online' event and needs\n   * to verify reconnection with the server. Flow is attempting to reconnect\n   * a configurable number of times before giving up.\n   */\n  RECONNECTING = 'reconnecting',\n\n  /**\n   * Application has been permanently disconnected due to browser receiving the\n   * 'offline' event, or the server not being reached after a number of reconnect\n   * attempts.\n   */\n  CONNECTION_LOST = 'connection-lost',\n}\n\nexport type ConnectionStateChangeListener = (previous: ConnectionState, current: ConnectionState) => void;\n\nexport class ConnectionStateStore {\n  readonly #stateChangeListeners = new Set<ConnectionStateChangeListener>();\n\n  #connectionState: ConnectionState;\n  #loadingCount = 0;\n\n  constructor(initialState: ConnectionState) {\n    this.#connectionState = initialState;\n\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n    if (navigator.serviceWorker) {\n      // Query service worker if the most recent fetch was served from cache\n      // Add message listener for handling response\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      navigator.serviceWorker.addEventListener('message', this.#serviceWorkerMessageListener);\n      // Send JSON-RPC request to Vaadin service worker\n      // eslint-disable-next-line no-void\n      void navigator.serviceWorker.ready.then((registration) => {\n        registration.active?.postMessage({\n          method: 'Vaadin.ServiceWorker.isConnectionLost',\n          id: 'Vaadin.ServiceWorker.isConnectionLost',\n        });\n      });\n    }\n  }\n\n  addStateChangeListener(listener: ConnectionStateChangeListener): void {\n    this.#stateChangeListeners.add(listener);\n  }\n\n  removeStateChangeListener(listener: ConnectionStateChangeListener): void {\n    this.#stateChangeListeners.delete(listener);\n  }\n\n  loadingStarted(): void {\n    this.state = ConnectionState.LOADING;\n    this.#loadingCount += 1;\n  }\n\n  loadingFinished(): void {\n    this.#decreaseLoadingCount(ConnectionState.CONNECTED);\n  }\n\n  loadingFailed(): void {\n    this.#decreaseLoadingCount(ConnectionState.CONNECTION_LOST);\n  }\n\n  #decreaseLoadingCount(finalState: ConnectionState) {\n    if (this.#loadingCount > 0) {\n      this.#loadingCount -= 1;\n      if (this.#loadingCount === 0) {\n        this.state = finalState;\n      }\n    }\n  }\n\n  get state(): ConnectionState {\n    return this.#connectionState;\n  }\n\n  set state(newState: ConnectionState) {\n    if (newState !== this.#connectionState) {\n      const prevState = this.#connectionState;\n      this.#connectionState = newState;\n      this.#loadingCount = 0;\n      for (const listener of this.#stateChangeListeners) {\n        listener(prevState, this.#connectionState);\n      }\n    }\n  }\n\n  get online(): boolean {\n    return this.#connectionState === ConnectionState.CONNECTED || this.#connectionState === ConnectionState.LOADING;\n  }\n\n  get offline(): boolean {\n    return !this.online;\n  }\n\n  readonly #serviceWorkerMessageListener = (event: MessageEvent) => {\n    // Handle JSON-RPC response from service worker\n    if (typeof event.data === 'object' && event.data.id === 'Vaadin.ServiceWorker.isConnectionLost') {\n      if (event.data.result === true) {\n        this.state = ConnectionState.CONNECTION_LOST;\n      }\n\n      // Cleanup: remove event listener upon receiving response\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      navigator.serviceWorker.removeEventListener('message', this.#serviceWorkerMessageListener);\n    }\n  };\n}\n\nexport function isLocalhost(hostname: string): boolean {\n  if (hostname === 'localhost') {\n    return true;\n  }\n\n  if (hostname === '[::1]') {\n    return true;\n  }\n\n  return /^127\\.\\d+\\.\\d+\\.\\d+$/u.test(hostname);\n}\n\nconst $wnd = window as any;\nif (!$wnd.Vaadin?.connectionState) {\n  let online;\n  if (isLocalhost(window.location.hostname)) {\n    // We do not know if we are online or not as we cannot trust navigator.onLine which checks availability of a network connection. Better to assume online so localhost apps can work\n    online = true;\n  } else {\n    online = navigator.onLine;\n  }\n\n  $wnd.Vaadin ??= {};\n  $wnd.Vaadin.connectionState = new ConnectionStateStore(\n    online ? ConnectionState.CONNECTED : ConnectionState.CONNECTION_LOST,\n  );\n}\n"],
+  "mappings": "AAgBO,IAAK,kBAAL,kBAAKA,qBAAL;AAKL,EAAAA,iBAAA,eAAY;AAMZ,EAAAA,iBAAA,aAAU;AASV,EAAAA,iBAAA,kBAAe;AAOf,EAAAA,iBAAA,qBAAkB;AA3BR,SAAAA;AAAA,GAAA;AAgCL,MAAM,qBAAqB;AAAA,EACvB,wBAAwB,oBAAI,IAAmC;AAAA,EAExE;AAAA,EACA,gBAAgB;AAAA,EAEhB,YAAY,cAA+B;AACzC,SAAK,mBAAmB;AAGxB,QAAI,UAAU,eAAe;AAI3B,gBAAU,cAAc,iBAAiB,WAAW,KAAK,6BAA6B;AAGtF,WAAK,UAAU,cAAc,MAAM,KAAK,CAAC,iBAAiB;AACxD,qBAAa,QAAQ,YAAY;AAAA,UAC/B,QAAQ;AAAA,UACR,IAAI;AAAA,QACN,CAAC;AAAA,MACH,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAEA,uBAAuB,UAA+C;AACpE,SAAK,sBAAsB,IAAI,QAAQ;AAAA,EACzC;AAAA,EAEA,0BAA0B,UAA+C;AACvE,SAAK,sBAAsB,OAAO,QAAQ;AAAA,EAC5C;AAAA,EAEA,iBAAuB;AACrB,SAAK,QAAQ;AACb,SAAK,iBAAiB;AAAA,EACxB;AAAA,EAEA,kBAAwB;AACtB,SAAK,sBAAsB,2BAAyB;AAAA,EACtD;AAAA,EAEA,gBAAsB;AACpB,SAAK,sBAAsB,uCAA+B;AAAA,EAC5D;AAAA,EAEA,sBAAsB,YAA6B;AACjD,QAAI,KAAK,gBAAgB,GAAG;AAC1B,WAAK,iBAAiB;AACtB,UAAI,KAAK,kBAAkB,GAAG;AAC5B,aAAK,QAAQ;AAAA,MACf;AAAA,IACF;AAAA,EACF;AAAA,EAEA,IAAI,QAAyB;AAC3B,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,IAAI,MAAM,UAA2B;AACnC,QAAI,aAAa,KAAK,kBAAkB;AACtC,YAAM,YAAY,KAAK;AACvB,WAAK,mBAAmB;AACxB,WAAK,gBAAgB;AACrB,iBAAW,YAAY,KAAK,uBAAuB;AACjD,iBAAS,WAAW,KAAK,gBAAgB;AAAA,MAC3C;AAAA,IACF;AAAA,EACF;AAAA,EAEA,IAAI,SAAkB;AACpB,WAAO,KAAK,qBAAqB,+BAA6B,KAAK,qBAAqB;AAAA,EAC1F;AAAA,EAEA,IAAI,UAAmB;AACrB,WAAO,CAAC,KAAK;AAAA,EACf;AAAA,EAES,gCAAgC,CAAC,UAAwB;AAEhE,QAAI,OAAO,MAAM,SAAS,YAAY,MAAM,KAAK,OAAO,yCAAyC;AAC/F,UAAI,MAAM,KAAK,WAAW,MAAM;AAC9B,aAAK,QAAQ;AAAA,MACf;AAIA,gBAAU,cAAc,oBAAoB,WAAW,KAAK,6BAA6B;AAAA,IAC3F;AAAA,EACF;AACF;AAEO,SAAS,YAAY,UAA2B;AACrD,MAAI,aAAa,aAAa;AAC5B,WAAO;AAAA,EACT;AAEA,MAAI,aAAa,SAAS;AACxB,WAAO;AAAA,EACT;AAEA,SAAO,wBAAwB,KAAK,QAAQ;AAC9C;AAEA,MAAM,OAAO;AACb,IAAI,CAAC,KAAK,QAAQ,iBAAiB;AACjC,MAAI;AACJ,MAAI,YAAY,OAAO,SAAS,QAAQ,GAAG;AAEzC,aAAS;AAAA,EACX,OAAO;AACL,aAAS,UAAU;AAAA,EACrB;AAEA,OAAK,WAAW,CAAC;AACjB,OAAK,OAAO,kBAAkB,IAAI;AAAA,IAChC,SAAS,8BAA4B;AAAA,EACvC;AACF;",
+  "names": ["ConnectionState"]
+}

package/README.md

@@ -2,12 +2,12 @@
 
 [![Latest Stable Version](https://img.shields.io/npm/v/@vaadin/common-frontend.svg)](https://www.npmjs.com/package/@vaadin/common-frontend)
 
-A set of utilities used by Vaadin [Flow](https://vaadin.com/docs/latest/flow/overview) and [Fusion](https://vaadin.com/docs/latest/fusion/overview) frameworks.
+A set of utilities used by Vaadin [Flow](https://vaadin.com/docs/latest/flow/what-is-flow) and [Hilla](https://vaadin.com/docs/latest/hilla/faq) frameworks.
 
 ## Installation
 
 **NOTE**: This package is internal.
-If you want to use Flow or Fusion frameworks in your project, visit https://start.vaadin.com.
+If you want to use Flow or Hilla frameworks in your project, visit https://start.vaadin.com.
 
 ```bash
 $ npm install @vaadin/common-frontend

package/index.js

@@ -1,10 +1,11 @@
-export * from './ConnectionState.js';
-export * from './ConnectionIndicator.js';
-const $wnd = window;
-$wnd.Vaadin = $wnd.Vaadin || {};
-$wnd.Vaadin.registrations = $wnd.Vaadin.registrations || [];
-$wnd.Vaadin.registrations.push({
-    is: '@vaadin/common-frontend',
-    version: /* updated-by-script */ '0.0.18',
-});
-//# sourceMappingURL=index.js.map
+function __REGISTER__(feature, vaadinObj = window.Vaadin ??= {}) {
+  vaadinObj.registrations ??= [];
+  vaadinObj.registrations.push({
+    is: feature ? `${"@vaadin/common-frontend"}/${feature}` : "@vaadin/common-frontend",
+    version: "0.0.19"
+  });
+}
+export * from "./ConnectionState.js";
+export * from "./ConnectionIndicator.js";
+__REGISTER__();
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -1 +1,7 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AAEzC,MAAM,IAAI,GAAG,MAAa,CAAC;AAC3B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,EAAE,CAAC;AAChC,IAAI,CAAC,MAAM,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC,aAAa,IAAI,EAAE,CAAC;AAC5D,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC;IAC7B,EAAE,EAAE,yBAAyB;IAC7B,OAAO,EAAE,uBAAuB,CAAC,QAAQ;CAC1C,CAAC,CAAC","sourcesContent":["export * from './ConnectionState.js';\nexport * from './ConnectionIndicator.js';\n\nconst $wnd = window as any;\n$wnd.Vaadin = $wnd.Vaadin || {};\n$wnd.Vaadin.registrations = $wnd.Vaadin.registrations || [];\n$wnd.Vaadin.registrations.push({\n  is: '@vaadin/common-frontend',\n  version: /* updated-by-script */ '0.0.18',\n});\n"]}
+{
+  "version": 3,
+  "sources": ["../../../scripts/register.js", "src/index.ts"],
+  "sourcesContent": ["export function __REGISTER__(feature, vaadinObj = (window.Vaadin ??= {})) {\n  vaadinObj.registrations ??= [];\n  vaadinObj.registrations.push({\n    is: feature ? `${__NAME__}/${feature}` : __NAME__,\n    version: __VERSION__,\n  });\n}\n", "export * from './ConnectionState.js';\nexport * from './ConnectionIndicator.js';\n\n// @ts-expect-error: esbuild injection\n// eslint-disable-next-line @typescript-eslint/no-unsafe-call\n__REGISTER__();\n"],
+  "mappings": "AAAO,SAAS,aAAa,SAAS,YAAa,OAAO,WAAW,CAAC,GAAI;AACxE,YAAU,kBAAkB,CAAC;AAC7B,YAAU,cAAc,KAAK;AAAA,IAC3B,IAAI,UAAU,GAAG,yBAAQ,IAAI,OAAO,KAAK;AAAA,IACzC,SAAS;AAAA,EACX,CAAC;AACH;ACNA,cAAc;AACd,cAAc;AAId,aAAa;",
+  "names": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/common-frontend",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "description": "Vaadin frontend utils used by Flow and Hilla",
   "main": "index.js",
   "module": "index.js",
@@ -8,18 +8,22 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/vaadin/flow-hilla-common.git",
-    "directory": "frontend/packages/common-frontend"
+    "directory": "packages/ts/common-frontend"
   },
   "keywords": [
     "Vaadin",
     "Hilla"
   ],
   "scripts": {
-    "build": "tsc --isolatedModules",
-    "lint": "eslint --fix src/**/*.ts",
-    "test": "web-test-runner \"test/**/*.test.ts\" --config ../../web-test-runner.config.js",
-    "test:coverage": "npm run test -- --coverage",
-    "test:watch": "npm run test -- --watch",
+    "clean:build": "git clean -fx  -e .vite -e node_modules",
+    "build": "concurrently npm:build:*",
+    "build:esbuild": "tsx ../../../scripts/build.ts",
+    "build:dts": "tsc --isolatedModules -p tsconfig.build.json",
+    "lint": "eslint src test",
+    "lint:fix": "eslint src test --fix",
+    "test": "vitest --run",
+    "test:watch": "vitest --inspect --no-file-parallelism",
+    "test:coverage": "npm test -- --coverage",
     "typecheck": "tsc --noEmit"
   },
   "exports": {
@@ -48,20 +52,22 @@
   "publishConfig": {
     "access": "public"
   },
-  "dependencies": {
-    "tslib": "^2.3.1"
-  },
   "peerDependencies": {
-    "lit": "^2.0.0"
+    "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@open-wc/testing": "^2.5.33",
     "@types/chai": "^4.2.21",
-    "@types/mocha": "^9.0.0",
-    "@types/sinon": "^10.0.2",
-    "@types/sinon-chai": "^3.2.5",
-    "@web/test-runner": "^0.13.16",
-    "sinon": "^11.1.2"
+    "@types/sinon": "^17.0.2",
+    "@types/sinon-chai": "^3.2.12",
+    "@vitest/browser": "^3.0.2",
+    "@vitest/coverage-v8": "^3.0.2",
+    "@vitest/ui": "^3.0.2",
+    "playwright-core": "^1.49.1",
+    "sinon": "^17.0.1",
+    "sinon-chai": "^4.0.0",
+    "vitest": "^3.0.2"
   },
-  "gitHead": "8e2a447f2793a6f786fac572a50a11e41197a23a"
+  "dependencies": {
+    "type-fest": "^4.32.0"
+  }
 }