@vaadin/common-frontend 0.0.19 → 0.0.21

package/ConnectionIndicator.js

@@ -1,209 +1,265 @@
-/*
- * 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 {
-    /**
-     * 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;
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __decoratorStart = (base) => [, , , __create(base?.[__knownSymbol("metadata")] ?? null)];
+var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
+var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
+var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
+var __runInitializers = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
+  return value;
+};
+var __decorateElement = (array, flags, name, decorators, target, extra) => {
+  var fn, it, done, ctx, access, k = flags & 7, s = !!(flags & 8), p = !!(flags & 16);
+  var j = k > 3 ? array.length + 1 : k ? s ? 1 : 2 : 0, key = __decoratorStrings[k + 5];
+  var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
+  var desc = k && (!p && !s && (target = target.prototype), k < 5 && (k > 3 || !p) && __getOwnPropDesc(k < 4 ? target : { get [name]() {
+    return __privateGet(this, extra);
+  }, set [name](x) {
+    return __privateSet(this, extra, x);
+  } }, name));
+  k ? p && k < 4 && __name(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name(target, name);
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
+    if (k) {
+      ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn(target, x) : (x) => name in x };
+      if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet : __privateMethod)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
+      if (k > 2) access.set = p ? (x, y) => __privateSet(x, target, y, k ^ 4 ? extra : desc.set) : (x, y) => x[name] = y;
     }
-    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;
+    it = (0, decorators[i])(k ? k < 4 ? p ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
+    if (k ^ 4 || it === void 0) __expectFn(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = it);
+    else if (typeof it !== "object" || it === null) __typeError("Object expected");
+    else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
+  }
+  return k || __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p ? k ^ 4 ? extra : desc : target;
+};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use the "in" operator on this value') : member.has(obj);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _applyDefaultTheme_dec, _loadingBarState_dec, _loading_dec, _expanded_dec, _reconnecting_dec, _offline_dec, _reconnectingText_dec, _offlineText_dec, _onlineText_dec, _expandedDuration_dec, _thirdDelay_dec, _secondDelay_dec, _firstDelay_dec, _a, _init, _firstDelay, _secondDelay, _thirdDelay, _expandedDuration, _onlineText, _offlineText, _reconnectingText, _offline, _reconnecting, _expanded, _loading, _loadingBarState, _b, loadingBarState_get, loadingBarState_set, _ConnectionIndicator_instances, __isPopover, isPopover_get, isPopover_set, _applyDefaultThemeState, _firstTimeout, _secondTimeout, _thirdTimeout, _expandedTimeout, _connectionStateStore, _lastMessageState, initPopover_fn, updateConnectionState_fn, updateLoading_fn, updatePopoverState_fn, renderMessage_fn, updateTheme_fn, getDefaultStyle_fn, getLoadingBarStyle_fn, timeoutFor_fn;
+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 || {});
+const _ConnectionIndicator = class _ConnectionIndicator extends (_a = LitElement, _firstDelay_dec = [property({ type: Number })], _secondDelay_dec = [property({ type: Number })], _thirdDelay_dec = [property({ type: Number })], _expandedDuration_dec = [property({ type: Number })], _onlineText_dec = [property({ type: String })], _offlineText_dec = [property({ type: String })], _reconnectingText_dec = [property({ type: String })], _offline_dec = [property({ type: Boolean, reflect: true })], _reconnecting_dec = [property({ type: Boolean, reflect: true })], _expanded_dec = [property({ type: Boolean, reflect: true })], _loading_dec = [property({ type: Boolean, reflect: true })], _loadingBarState_dec = [state()], _applyDefaultTheme_dec = [property({ type: Boolean, reflect: true })], _a) {
+  constructor() {
+    super();
+    __runInitializers(_init, 5, this);
+    __privateAdd(this, _ConnectionIndicator_instances);
+    __privateAdd(this, _firstDelay, __runInitializers(_init, 8, this, 450)), __runInitializers(_init, 11, this);
+    __privateAdd(this, _secondDelay, __runInitializers(_init, 12, this, 1500)), __runInitializers(_init, 15, this);
+    __privateAdd(this, _thirdDelay, __runInitializers(_init, 16, this, 5e3)), __runInitializers(_init, 19, this);
+    __privateAdd(this, _expandedDuration, __runInitializers(_init, 20, this, 2e3)), __runInitializers(_init, 23, this);
+    __privateAdd(this, _onlineText, __runInitializers(_init, 24, this, "Online")), __runInitializers(_init, 27, this);
+    __privateAdd(this, _offlineText, __runInitializers(_init, 28, this, "Connection lost")), __runInitializers(_init, 31, this);
+    __privateAdd(this, _reconnectingText, __runInitializers(_init, 32, this, "Connection lost, trying to reconnect...")), __runInitializers(_init, 35, this);
+    __privateAdd(this, _offline, __runInitializers(_init, 36, this, false)), __runInitializers(_init, 39, this);
+    __privateAdd(this, _reconnecting, __runInitializers(_init, 40, this, false)), __runInitializers(_init, 43, this);
+    __privateAdd(this, _expanded, __runInitializers(_init, 44, this, false)), __runInitializers(_init, 47, this);
+    __privateAdd(this, _loading, __runInitializers(_init, 48, this, false)), __runInitializers(_init, 51, this);
+    __privateAdd(this, _loadingBarState, __runInitializers(_init, 52, this, "" /* IDLE */)), __runInitializers(_init, 55, this);
+    __privateAdd(this, __isPopover, false);
+    __privateAdd(this, _applyDefaultThemeState, true);
+    __privateAdd(this, _firstTimeout, 0);
+    __privateAdd(this, _secondTimeout, 0);
+    __privateAdd(this, _thirdTimeout, 0);
+    __privateAdd(this, _expandedTimeout, 0);
+    __privateAdd(this, _connectionStateStore);
+    __publicField(this, "connectionStateListener");
+    __privateAdd(this, _lastMessageState, ConnectionState.CONNECTED);
+    this.connectionStateListener = () => {
+      this.expanded = __privateMethod(this, _ConnectionIndicator_instances, updateConnectionState_fn).call(this);
+      __privateSet(this, _expandedTimeout, __privateMethod(this, _ConnectionIndicator_instances, timeoutFor_fn).call(this, __privateGet(this, _expandedTimeout), this.expanded, () => {
         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);
-        };
+      }, this.expandedDuration));
+    };
+  }
+  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);
     }
-    render() {
-        return html `
-      <div class="v-loading-indicator ${this.loadingBarState}" style=${this.getLoadingBarStyle()}></div>
+    return $wnd.Vaadin?.connectionIndicator;
+  }
+  render() {
+    return html`
+      <div class="v-loading-indicator ${__privateGet(this, _ConnectionIndicator_instances, loadingBarState_get)}" style=${__privateMethod(this, _ConnectionIndicator_instances, getLoadingBarStyle_fn).call(this)}></div>
 
       <div
         class="v-status-message ${classMap({
-            active: this.reconnecting,
-        })}"
+      active: this.reconnecting
+    })}"
       >
-        <span class="text"> ${this.renderMessage()} </span>
+        <span class="text"> ${__privateMethod(this, _ConnectionIndicator_instances, renderMessage_fn).call(this)} </span>
       </div>
     `;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    __privateMethod(this, _ConnectionIndicator_instances, initPopover_fn).call(this);
+    const $wnd = window;
+    if ($wnd.Vaadin?.connectionState) {
+      __privateSet(this, _connectionStateStore, $wnd.Vaadin.connectionState);
+      __privateGet(this, _connectionStateStore).addStateChangeListener(this.connectionStateListener);
+      __privateMethod(this, _ConnectionIndicator_instances, updateConnectionState_fn).call(this);
     }
-    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();
+    __privateMethod(this, _ConnectionIndicator_instances, updateTheme_fn).call(this);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (__privateGet(this, _connectionStateStore)) {
+      __privateGet(this, _connectionStateStore).removeStateChangeListener(this.connectionStateListener);
     }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        if (this.connectionStateStore) {
-            this.connectionStateStore.removeStateChangeListener(this.connectionStateListener);
-        }
-        this.updateTheme();
-    }
-    get applyDefaultTheme() {
-        return this.applyDefaultThemeState;
+    __privateMethod(this, _ConnectionIndicator_instances, updateTheme_fn).call(this);
+    __privateSet(this, _ConnectionIndicator_instances, false, isPopover_set);
+  }
+  updated(props) {
+    if (["loading", "offline", "reconnecting", "expanded"].some((p) => props.has(p))) {
+      __privateMethod(this, _ConnectionIndicator_instances, updatePopoverState_fn).call(this);
     }
-    set applyDefaultTheme(applyDefaultTheme) {
-        if (applyDefaultTheme !== this.applyDefaultThemeState) {
-            this.applyDefaultThemeState = applyDefaultTheme;
-            this.updateTheme();
-        }
+  }
+  get applyDefaultTheme() {
+    return __privateGet(this, _applyDefaultThemeState);
+  }
+  set applyDefaultTheme(applyDefaultTheme) {
+    if (applyDefaultTheme !== __privateGet(this, _applyDefaultThemeState)) {
+      __privateSet(this, _applyDefaultThemeState, applyDefaultTheme);
+      __privateMethod(this, _ConnectionIndicator_instances, updateTheme_fn).call(this);
     }
-    createRenderRoot() {
-        return this;
-    }
-    /**
-     * Update state flags.
-     *
-     * @returns 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;
-    }
-    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);
-    }
-    renderMessage() {
-        if (this.reconnecting) {
-            return this.reconnectingText;
-        }
-        if (this.offline) {
-            return this.offlineText;
-        }
-        return this.onlineText;
+  }
+  createRenderRoot() {
+    return this;
+  }
+};
+_init = __decoratorStart(_a);
+_firstDelay = new WeakMap();
+_secondDelay = new WeakMap();
+_thirdDelay = new WeakMap();
+_expandedDuration = new WeakMap();
+_onlineText = new WeakMap();
+_offlineText = new WeakMap();
+_reconnectingText = new WeakMap();
+_offline = new WeakMap();
+_reconnecting = new WeakMap();
+_expanded = new WeakMap();
+_loading = new WeakMap();
+_loadingBarState = new WeakMap();
+_ConnectionIndicator_instances = new WeakSet();
+__isPopover = new WeakMap();
+isPopover_get = function() {
+  return __privateGet(this, __isPopover);
+};
+isPopover_set = function(_) {
+  __privateSet(this, __isPopover, _);
+};
+_applyDefaultThemeState = new WeakMap();
+_firstTimeout = new WeakMap();
+_secondTimeout = new WeakMap();
+_thirdTimeout = new WeakMap();
+_expandedTimeout = new WeakMap();
+_connectionStateStore = new WeakMap();
+_lastMessageState = new WeakMap();
+initPopover_fn = function() {
+  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_fn = function() {
+  const connectionState = __privateGet(this, _connectionStateStore)?.state;
+  this.offline = connectionState === ConnectionState.CONNECTION_LOST;
+  this.reconnecting = connectionState === ConnectionState.RECONNECTING;
+  __privateMethod(this, _ConnectionIndicator_instances, updateLoading_fn).call(this, connectionState === ConnectionState.LOADING);
+  if (this.loading) {
+    return false;
+  }
+  if (connectionState !== __privateGet(this, _lastMessageState)) {
+    __privateSet(this, _lastMessageState, connectionState);
+    return true;
+  }
+  return false;
+};
+updateLoading_fn = function(loading) {
+  this.loading = loading;
+  __privateSet(this, _ConnectionIndicator_instances, "" /* IDLE */, loadingBarState_set);
+  __privateSet(this, _firstTimeout, __privateMethod(this, _ConnectionIndicator_instances, timeoutFor_fn).call(this, __privateGet(this, _firstTimeout), loading, () => {
+    __privateSet(this, _ConnectionIndicator_instances, "first" /* FIRST */, loadingBarState_set);
+  }, this.firstDelay));
+  __privateSet(this, _secondTimeout, __privateMethod(this, _ConnectionIndicator_instances, timeoutFor_fn).call(this, __privateGet(this, _secondTimeout), loading, () => {
+    __privateSet(this, _ConnectionIndicator_instances, "second" /* SECOND */, loadingBarState_set);
+  }, this.secondDelay));
+  __privateSet(this, _thirdTimeout, __privateMethod(this, _ConnectionIndicator_instances, timeoutFor_fn).call(this, __privateGet(this, _thirdTimeout), loading, () => {
+    __privateSet(this, _ConnectionIndicator_instances, "third" /* THIRD */, loadingBarState_set);
+  }, this.thirdDelay));
+};
+updatePopoverState_fn = function() {
+  const showPopover = this.loading || this.offline || this.reconnecting || this.expanded;
+  if (__privateGet(this, _ConnectionIndicator_instances, isPopover_get)) {
+    this.hidePopover();
+  }
+  if (showPopover) {
+    this.showPopover();
+  }
+  __privateSet(this, _ConnectionIndicator_instances, showPopover, isPopover_set);
+};
+renderMessage_fn = function() {
+  if (this.reconnecting) {
+    return this.reconnectingText;
+  }
+  if (this.offline) {
+    return this.offlineText;
+  }
+  return this.onlineText;
+};
+updateTheme_fn = function() {
+  if (__privateGet(this, _applyDefaultThemeState) && this.isConnected) {
+    if (!document.getElementById(DEFAULT_STYLE_ID)) {
+      const style = document.createElement("style");
+      style.id = DEFAULT_STYLE_ID;
+      style.textContent = __privateMethod(this, _ConnectionIndicator_instances, getDefaultStyle_fn).call(this);
+      document.head.appendChild(style);
     }
-    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);
-            }
-        }
+  } else {
+    const style = document.getElementById(DEFAULT_STYLE_ID);
+    if (style) {
+      document.head.removeChild(style);
     }
-    getDefaultStyle() {
-        return `
+  }
+};
+getDefaultStyle_fn = function() {
+  return `
       @keyframes v-progress-start {
         0% {
           width: 0%;
@@ -248,7 +304,6 @@ export class ConnectionIndicator extends LitElement {
       .v-loading-indicator,
       .v-status-message {
         position: fixed;
-        z-index: 251;
         left: 0;
         right: auto;
         top: 0;
@@ -285,6 +340,7 @@ export class ConnectionIndicator extends LitElement {
 
       .v-status-message {
         opacity: 0;
+        pointer-events: none;
         width: 100%;
         max-height: var(--status-height-collapsed, 8px);
         overflow: hidden;
@@ -303,6 +359,7 @@ export class ConnectionIndicator extends LitElement {
       vaadin-connection-indicator[offline] .v-status-message,
       vaadin-connection-indicator[reconnecting] .v-status-message {
         opacity: 1;
+        pointer-events: auto;
         background-color: var(--status-bg-color-offline, var(--lumo-shade, #333));
         color: var(
           --status-text-color-offline,
@@ -329,6 +386,7 @@ export class ConnectionIndicator extends LitElement {
 
       vaadin-connection-indicator[expanded] .v-status-message {
         opacity: 1;
+        pointer-events: auto;
       }
 
       .v-status-message span {
@@ -360,80 +418,47 @@ export class ConnectionIndicator extends LitElement {
         }
       }
     `;
-    }
-    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();
-    }
-}
-__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);
+};
+getLoadingBarStyle_fn = function() {
+  switch (__privateGet(this, _ConnectionIndicator_instances, loadingBarState_get)) {
+    case "" /* IDLE */:
+      return "display: none";
+    case "first" /* FIRST */:
+    case "second" /* SECOND */:
+    case "third" /* THIRD */:
+      return "display: block";
+    default:
+      return "";
+  }
+};
+timeoutFor_fn = function(timeoutId, enabled, handler, delay) {
+  if (timeoutId !== 0) {
+    window.clearTimeout(timeoutId);
+  }
+  return enabled ? window.setTimeout(handler, delay) : 0;
+};
+__decorateElement(_init, 4, "firstDelay", _firstDelay_dec, _ConnectionIndicator, _firstDelay);
+__decorateElement(_init, 4, "secondDelay", _secondDelay_dec, _ConnectionIndicator, _secondDelay);
+__decorateElement(_init, 4, "thirdDelay", _thirdDelay_dec, _ConnectionIndicator, _thirdDelay);
+__decorateElement(_init, 4, "expandedDuration", _expandedDuration_dec, _ConnectionIndicator, _expandedDuration);
+__decorateElement(_init, 4, "onlineText", _onlineText_dec, _ConnectionIndicator, _onlineText);
+__decorateElement(_init, 4, "offlineText", _offlineText_dec, _ConnectionIndicator, _offlineText);
+__decorateElement(_init, 4, "reconnectingText", _reconnectingText_dec, _ConnectionIndicator, _reconnectingText);
+__decorateElement(_init, 4, "offline", _offline_dec, _ConnectionIndicator, _offline);
+__decorateElement(_init, 4, "reconnecting", _reconnecting_dec, _ConnectionIndicator, _reconnecting);
+__decorateElement(_init, 4, "expanded", _expanded_dec, _ConnectionIndicator, _expanded);
+__decorateElement(_init, 4, "loading", _loading_dec, _ConnectionIndicator, _loading);
+_b = __decorateElement(_init, 20, "#loadingBarState", _loadingBarState_dec, _ConnectionIndicator_instances, _loadingBarState), loadingBarState_get = _b.get, loadingBarState_set = _b.set;
+__decorateElement(_init, 3, "applyDefaultTheme", _applyDefaultTheme_dec, _ConnectionIndicator);
+__decoratorMetadata(_init, _ConnectionIndicator);
+let ConnectionIndicator = _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