@vaadin/common-frontend 0.0.20 → 0.0.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ConnectionIndicator.d.ts.map +1 -1
- package/ConnectionIndicator.js +230 -165
- package/ConnectionIndicator.js.map +2 -2
- package/index.js +1 -1
- package/package.json +14 -14
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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;
|
|
1
|
+
{"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;CAsSpC;AAMD;;;;;;;;;GASG;AACH,eAAO,MAAM,mBAAmB,qBAA+B,CAAC"}
|
package/ConnectionIndicator.js
CHANGED
|
@@ -1,3 +1,53 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
|
|
5
|
+
var __typeError = (msg) => {
|
|
6
|
+
throw TypeError(msg);
|
|
7
|
+
};
|
|
8
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
9
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
10
|
+
var __decoratorStart = (base) => [, , , __create(base?.[__knownSymbol("metadata")] ?? null)];
|
|
11
|
+
var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
|
|
12
|
+
var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
|
|
13
|
+
var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
|
|
14
|
+
var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
|
|
15
|
+
var __runInitializers = (array, flags, self, value) => {
|
|
16
|
+
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);
|
|
17
|
+
return value;
|
|
18
|
+
};
|
|
19
|
+
var __decorateElement = (array, flags, name, decorators, target, extra) => {
|
|
20
|
+
var fn, it, done, ctx, access, k = flags & 7, s = !!(flags & 8), p = !!(flags & 16);
|
|
21
|
+
var j = k > 3 ? array.length + 1 : k ? s ? 1 : 2 : 0, key = __decoratorStrings[k + 5];
|
|
22
|
+
var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
|
|
23
|
+
var desc = k && (!p && !s && (target = target.prototype), k < 5 && (k > 3 || !p) && __getOwnPropDesc(k < 4 ? target : { get [name]() {
|
|
24
|
+
return __privateGet(this, extra);
|
|
25
|
+
}, set [name](x) {
|
|
26
|
+
return __privateSet(this, extra, x);
|
|
27
|
+
} }, name));
|
|
28
|
+
k ? p && k < 4 && __name(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name(target, name);
|
|
29
|
+
for (var i = decorators.length - 1; i >= 0; i--) {
|
|
30
|
+
ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
|
|
31
|
+
if (k) {
|
|
32
|
+
ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn(target, x) : (x) => name in x };
|
|
33
|
+
if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet : __privateMethod)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
|
|
34
|
+
if (k > 2) access.set = p ? (x, y) => __privateSet(x, target, y, k ^ 4 ? extra : desc.set) : (x, y) => x[name] = y;
|
|
35
|
+
}
|
|
36
|
+
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;
|
|
37
|
+
if (k ^ 4 || it === void 0) __expectFn(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = it);
|
|
38
|
+
else if (typeof it !== "object" || it === null) __typeError("Object expected");
|
|
39
|
+
else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
|
|
40
|
+
}
|
|
41
|
+
return k || __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p ? k ^ 4 ? extra : desc : target;
|
|
42
|
+
};
|
|
43
|
+
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
44
|
+
var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
|
|
45
|
+
var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use the "in" operator on this value') : member.has(obj);
|
|
46
|
+
var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
|
|
47
|
+
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);
|
|
48
|
+
var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
|
|
49
|
+
var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
|
|
50
|
+
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;
|
|
1
51
|
import { html, LitElement } from "lit";
|
|
2
52
|
import { property, state } from "lit/decorators.js";
|
|
3
53
|
import { classMap } from "lit/directives/class-map.js";
|
|
@@ -10,9 +60,41 @@ var LoadingBarState = /* @__PURE__ */ ((LoadingBarState2) => {
|
|
|
10
60
|
LoadingBarState2["THIRD"] = "third";
|
|
11
61
|
return LoadingBarState2;
|
|
12
62
|
})(LoadingBarState || {});
|
|
13
|
-
class
|
|
63
|
+
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) {
|
|
64
|
+
constructor() {
|
|
65
|
+
super();
|
|
66
|
+
__runInitializers(_init, 5, this);
|
|
67
|
+
__privateAdd(this, _ConnectionIndicator_instances);
|
|
68
|
+
__privateAdd(this, _firstDelay, __runInitializers(_init, 8, this, 450)), __runInitializers(_init, 11, this);
|
|
69
|
+
__privateAdd(this, _secondDelay, __runInitializers(_init, 12, this, 1500)), __runInitializers(_init, 15, this);
|
|
70
|
+
__privateAdd(this, _thirdDelay, __runInitializers(_init, 16, this, 5e3)), __runInitializers(_init, 19, this);
|
|
71
|
+
__privateAdd(this, _expandedDuration, __runInitializers(_init, 20, this, 2e3)), __runInitializers(_init, 23, this);
|
|
72
|
+
__privateAdd(this, _onlineText, __runInitializers(_init, 24, this, "Online")), __runInitializers(_init, 27, this);
|
|
73
|
+
__privateAdd(this, _offlineText, __runInitializers(_init, 28, this, "Connection lost")), __runInitializers(_init, 31, this);
|
|
74
|
+
__privateAdd(this, _reconnectingText, __runInitializers(_init, 32, this, "Connection lost, trying to reconnect...")), __runInitializers(_init, 35, this);
|
|
75
|
+
__privateAdd(this, _offline, __runInitializers(_init, 36, this, false)), __runInitializers(_init, 39, this);
|
|
76
|
+
__privateAdd(this, _reconnecting, __runInitializers(_init, 40, this, false)), __runInitializers(_init, 43, this);
|
|
77
|
+
__privateAdd(this, _expanded, __runInitializers(_init, 44, this, false)), __runInitializers(_init, 47, this);
|
|
78
|
+
__privateAdd(this, _loading, __runInitializers(_init, 48, this, false)), __runInitializers(_init, 51, this);
|
|
79
|
+
__privateAdd(this, _loadingBarState, __runInitializers(_init, 52, this, "" /* IDLE */)), __runInitializers(_init, 55, this);
|
|
80
|
+
__privateAdd(this, __isPopover, false);
|
|
81
|
+
__privateAdd(this, _applyDefaultThemeState, true);
|
|
82
|
+
__privateAdd(this, _firstTimeout, 0);
|
|
83
|
+
__privateAdd(this, _secondTimeout, 0);
|
|
84
|
+
__privateAdd(this, _thirdTimeout, 0);
|
|
85
|
+
__privateAdd(this, _expandedTimeout, 0);
|
|
86
|
+
__privateAdd(this, _connectionStateStore);
|
|
87
|
+
__publicField(this, "connectionStateListener");
|
|
88
|
+
__privateAdd(this, _lastMessageState, ConnectionState.CONNECTED);
|
|
89
|
+
this.connectionStateListener = () => {
|
|
90
|
+
this.expanded = __privateMethod(this, _ConnectionIndicator_instances, updateConnectionState_fn).call(this);
|
|
91
|
+
__privateSet(this, _expandedTimeout, __privateMethod(this, _ConnectionIndicator_instances, timeoutFor_fn).call(this, __privateGet(this, _expandedTimeout), this.expanded, () => {
|
|
92
|
+
this.expanded = false;
|
|
93
|
+
}, this.expandedDuration));
|
|
94
|
+
};
|
|
95
|
+
}
|
|
14
96
|
static get instance() {
|
|
15
|
-
return
|
|
97
|
+
return _ConnectionIndicator.create();
|
|
16
98
|
}
|
|
17
99
|
/**
|
|
18
100
|
* Initialize global connection indicator instance at
|
|
@@ -27,191 +109,157 @@ class ConnectionIndicator extends LitElement {
|
|
|
27
109
|
}
|
|
28
110
|
return $wnd.Vaadin?.connectionIndicator;
|
|
29
111
|
}
|
|
30
|
-
@property({ type: Number })
|
|
31
|
-
accessor firstDelay = 450;
|
|
32
|
-
@property({ type: Number })
|
|
33
|
-
accessor secondDelay = 1500;
|
|
34
|
-
@property({ type: Number })
|
|
35
|
-
accessor thirdDelay = 5e3;
|
|
36
|
-
@property({ type: Number })
|
|
37
|
-
accessor expandedDuration = 2e3;
|
|
38
|
-
@property({ type: String })
|
|
39
|
-
accessor onlineText = "Online";
|
|
40
|
-
@property({ type: String })
|
|
41
|
-
accessor offlineText = "Connection lost";
|
|
42
|
-
@property({ type: String })
|
|
43
|
-
accessor reconnectingText = "Connection lost, trying to reconnect...";
|
|
44
|
-
@property({ type: Boolean, reflect: true })
|
|
45
|
-
accessor offline = false;
|
|
46
|
-
@property({ type: Boolean, reflect: true })
|
|
47
|
-
accessor reconnecting = false;
|
|
48
|
-
@property({ type: Boolean, reflect: true })
|
|
49
|
-
accessor expanded = false;
|
|
50
|
-
@property({ type: Boolean, reflect: true })
|
|
51
|
-
accessor loading = false;
|
|
52
|
-
@state()
|
|
53
|
-
accessor #loadingBarState = "" /* IDLE */;
|
|
54
|
-
accessor #isPopover = false;
|
|
55
|
-
#applyDefaultThemeState = true;
|
|
56
|
-
#firstTimeout = 0;
|
|
57
|
-
#secondTimeout = 0;
|
|
58
|
-
#thirdTimeout = 0;
|
|
59
|
-
#expandedTimeout = 0;
|
|
60
|
-
#connectionStateStore;
|
|
61
|
-
connectionStateListener;
|
|
62
|
-
#lastMessageState = ConnectionState.CONNECTED;
|
|
63
|
-
constructor() {
|
|
64
|
-
super();
|
|
65
|
-
this.connectionStateListener = () => {
|
|
66
|
-
this.expanded = this.#updateConnectionState();
|
|
67
|
-
this.#expandedTimeout = this.#timeoutFor(
|
|
68
|
-
this.#expandedTimeout,
|
|
69
|
-
this.expanded,
|
|
70
|
-
() => {
|
|
71
|
-
this.expanded = false;
|
|
72
|
-
},
|
|
73
|
-
this.expandedDuration
|
|
74
|
-
);
|
|
75
|
-
};
|
|
76
|
-
}
|
|
77
112
|
render() {
|
|
78
113
|
return html`
|
|
79
|
-
<div class="v-loading-indicator ${this
|
|
114
|
+
<div class="v-loading-indicator ${__privateGet(this, _ConnectionIndicator_instances, loadingBarState_get)}" style=${__privateMethod(this, _ConnectionIndicator_instances, getLoadingBarStyle_fn).call(this)}></div>
|
|
80
115
|
|
|
81
116
|
<div
|
|
82
117
|
class="v-status-message ${classMap({
|
|
83
118
|
active: this.reconnecting
|
|
84
119
|
})}"
|
|
85
120
|
>
|
|
86
|
-
<span class="text"> ${this
|
|
121
|
+
<span class="text"> ${__privateMethod(this, _ConnectionIndicator_instances, renderMessage_fn).call(this)} </span>
|
|
87
122
|
</div>
|
|
88
123
|
`;
|
|
89
124
|
}
|
|
90
125
|
connectedCallback() {
|
|
91
126
|
super.connectedCallback();
|
|
92
|
-
this
|
|
127
|
+
__privateMethod(this, _ConnectionIndicator_instances, initPopover_fn).call(this);
|
|
93
128
|
const $wnd = window;
|
|
94
129
|
if ($wnd.Vaadin?.connectionState) {
|
|
95
|
-
this
|
|
96
|
-
this
|
|
97
|
-
this
|
|
130
|
+
__privateSet(this, _connectionStateStore, $wnd.Vaadin.connectionState);
|
|
131
|
+
__privateGet(this, _connectionStateStore).addStateChangeListener(this.connectionStateListener);
|
|
132
|
+
__privateMethod(this, _ConnectionIndicator_instances, updateConnectionState_fn).call(this);
|
|
98
133
|
}
|
|
99
|
-
this
|
|
134
|
+
__privateMethod(this, _ConnectionIndicator_instances, updateTheme_fn).call(this);
|
|
100
135
|
}
|
|
101
136
|
disconnectedCallback() {
|
|
102
137
|
super.disconnectedCallback();
|
|
103
|
-
if (this
|
|
104
|
-
this
|
|
138
|
+
if (__privateGet(this, _connectionStateStore)) {
|
|
139
|
+
__privateGet(this, _connectionStateStore).removeStateChangeListener(this.connectionStateListener);
|
|
105
140
|
}
|
|
106
|
-
this
|
|
107
|
-
this
|
|
141
|
+
__privateMethod(this, _ConnectionIndicator_instances, updateTheme_fn).call(this);
|
|
142
|
+
__privateSet(this, _ConnectionIndicator_instances, false, isPopover_set);
|
|
108
143
|
}
|
|
109
144
|
updated(props) {
|
|
110
145
|
if (["loading", "offline", "reconnecting", "expanded"].some((p) => props.has(p))) {
|
|
111
|
-
this
|
|
146
|
+
__privateMethod(this, _ConnectionIndicator_instances, updatePopoverState_fn).call(this);
|
|
112
147
|
}
|
|
113
148
|
}
|
|
114
149
|
get applyDefaultTheme() {
|
|
115
|
-
return this
|
|
150
|
+
return __privateGet(this, _applyDefaultThemeState);
|
|
116
151
|
}
|
|
117
|
-
@property({ type: Boolean, reflect: true })
|
|
118
152
|
set applyDefaultTheme(applyDefaultTheme) {
|
|
119
|
-
if (applyDefaultTheme !== this
|
|
120
|
-
this
|
|
121
|
-
this
|
|
153
|
+
if (applyDefaultTheme !== __privateGet(this, _applyDefaultThemeState)) {
|
|
154
|
+
__privateSet(this, _applyDefaultThemeState, applyDefaultTheme);
|
|
155
|
+
__privateMethod(this, _ConnectionIndicator_instances, updateTheme_fn).call(this);
|
|
122
156
|
}
|
|
123
157
|
}
|
|
124
158
|
createRenderRoot() {
|
|
125
159
|
return this;
|
|
126
160
|
}
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
161
|
+
};
|
|
162
|
+
_init = __decoratorStart(_a);
|
|
163
|
+
_firstDelay = new WeakMap();
|
|
164
|
+
_secondDelay = new WeakMap();
|
|
165
|
+
_thirdDelay = new WeakMap();
|
|
166
|
+
_expandedDuration = new WeakMap();
|
|
167
|
+
_onlineText = new WeakMap();
|
|
168
|
+
_offlineText = new WeakMap();
|
|
169
|
+
_reconnectingText = new WeakMap();
|
|
170
|
+
_offline = new WeakMap();
|
|
171
|
+
_reconnecting = new WeakMap();
|
|
172
|
+
_expanded = new WeakMap();
|
|
173
|
+
_loading = new WeakMap();
|
|
174
|
+
_loadingBarState = new WeakMap();
|
|
175
|
+
_ConnectionIndicator_instances = new WeakSet();
|
|
176
|
+
__isPopover = new WeakMap();
|
|
177
|
+
isPopover_get = function() {
|
|
178
|
+
return __privateGet(this, __isPopover);
|
|
179
|
+
};
|
|
180
|
+
isPopover_set = function(_) {
|
|
181
|
+
__privateSet(this, __isPopover, _);
|
|
182
|
+
};
|
|
183
|
+
_applyDefaultThemeState = new WeakMap();
|
|
184
|
+
_firstTimeout = new WeakMap();
|
|
185
|
+
_secondTimeout = new WeakMap();
|
|
186
|
+
_thirdTimeout = new WeakMap();
|
|
187
|
+
_expandedTimeout = new WeakMap();
|
|
188
|
+
_connectionStateStore = new WeakMap();
|
|
189
|
+
_lastMessageState = new WeakMap();
|
|
190
|
+
initPopover_fn = function() {
|
|
191
|
+
this.setAttribute("popover", "manual");
|
|
192
|
+
this.style.display = "contents";
|
|
193
|
+
};
|
|
194
|
+
/**
|
|
195
|
+
* Update state flags.
|
|
196
|
+
*
|
|
197
|
+
* @returns true if the connection message changes, and therefore a new
|
|
198
|
+
* message should be shown
|
|
199
|
+
*/
|
|
200
|
+
updateConnectionState_fn = function() {
|
|
201
|
+
const connectionState = __privateGet(this, _connectionStateStore)?.state;
|
|
202
|
+
this.offline = connectionState === ConnectionState.CONNECTION_LOST;
|
|
203
|
+
this.reconnecting = connectionState === ConnectionState.RECONNECTING;
|
|
204
|
+
__privateMethod(this, _ConnectionIndicator_instances, updateLoading_fn).call(this, connectionState === ConnectionState.LOADING);
|
|
205
|
+
if (this.loading) {
|
|
149
206
|
return false;
|
|
150
207
|
}
|
|
151
|
-
|
|
152
|
-
this
|
|
153
|
-
|
|
154
|
-
this.#firstTimeout = this.#timeoutFor(
|
|
155
|
-
this.#firstTimeout,
|
|
156
|
-
loading,
|
|
157
|
-
() => {
|
|
158
|
-
this.#loadingBarState = "first" /* FIRST */;
|
|
159
|
-
},
|
|
160
|
-
this.firstDelay
|
|
161
|
-
);
|
|
162
|
-
this.#secondTimeout = this.#timeoutFor(
|
|
163
|
-
this.#secondTimeout,
|
|
164
|
-
loading,
|
|
165
|
-
() => {
|
|
166
|
-
this.#loadingBarState = "second" /* SECOND */;
|
|
167
|
-
},
|
|
168
|
-
this.secondDelay
|
|
169
|
-
);
|
|
170
|
-
this.#thirdTimeout = this.#timeoutFor(
|
|
171
|
-
this.#thirdTimeout,
|
|
172
|
-
loading,
|
|
173
|
-
() => {
|
|
174
|
-
this.#loadingBarState = "third" /* THIRD */;
|
|
175
|
-
},
|
|
176
|
-
this.thirdDelay
|
|
177
|
-
);
|
|
208
|
+
if (connectionState !== __privateGet(this, _lastMessageState)) {
|
|
209
|
+
__privateSet(this, _lastMessageState, connectionState);
|
|
210
|
+
return true;
|
|
178
211
|
}
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
212
|
+
return false;
|
|
213
|
+
};
|
|
214
|
+
updateLoading_fn = function(loading) {
|
|
215
|
+
this.loading = loading;
|
|
216
|
+
__privateSet(this, _ConnectionIndicator_instances, "" /* IDLE */, loadingBarState_set);
|
|
217
|
+
__privateSet(this, _firstTimeout, __privateMethod(this, _ConnectionIndicator_instances, timeoutFor_fn).call(this, __privateGet(this, _firstTimeout), loading, () => {
|
|
218
|
+
__privateSet(this, _ConnectionIndicator_instances, "first" /* FIRST */, loadingBarState_set);
|
|
219
|
+
}, this.firstDelay));
|
|
220
|
+
__privateSet(this, _secondTimeout, __privateMethod(this, _ConnectionIndicator_instances, timeoutFor_fn).call(this, __privateGet(this, _secondTimeout), loading, () => {
|
|
221
|
+
__privateSet(this, _ConnectionIndicator_instances, "second" /* SECOND */, loadingBarState_set);
|
|
222
|
+
}, this.secondDelay));
|
|
223
|
+
__privateSet(this, _thirdTimeout, __privateMethod(this, _ConnectionIndicator_instances, timeoutFor_fn).call(this, __privateGet(this, _thirdTimeout), loading, () => {
|
|
224
|
+
__privateSet(this, _ConnectionIndicator_instances, "third" /* THIRD */, loadingBarState_set);
|
|
225
|
+
}, this.thirdDelay));
|
|
226
|
+
};
|
|
227
|
+
updatePopoverState_fn = function() {
|
|
228
|
+
const showPopover = this.loading || this.offline || this.reconnecting || this.expanded;
|
|
229
|
+
if (__privateGet(this, _ConnectionIndicator_instances, isPopover_get)) {
|
|
230
|
+
this.hidePopover();
|
|
188
231
|
}
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
return this.reconnectingText;
|
|
192
|
-
}
|
|
193
|
-
if (this.offline) {
|
|
194
|
-
return this.offlineText;
|
|
195
|
-
}
|
|
196
|
-
return this.onlineText;
|
|
232
|
+
if (showPopover) {
|
|
233
|
+
this.showPopover();
|
|
197
234
|
}
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
235
|
+
__privateSet(this, _ConnectionIndicator_instances, showPopover, isPopover_set);
|
|
236
|
+
};
|
|
237
|
+
renderMessage_fn = function() {
|
|
238
|
+
if (this.reconnecting) {
|
|
239
|
+
return this.reconnectingText;
|
|
240
|
+
}
|
|
241
|
+
if (this.offline) {
|
|
242
|
+
return this.offlineText;
|
|
243
|
+
}
|
|
244
|
+
return this.onlineText;
|
|
245
|
+
};
|
|
246
|
+
updateTheme_fn = function() {
|
|
247
|
+
if (__privateGet(this, _applyDefaultThemeState) && this.isConnected) {
|
|
248
|
+
if (!document.getElementById(DEFAULT_STYLE_ID)) {
|
|
249
|
+
const style = document.createElement("style");
|
|
250
|
+
style.id = DEFAULT_STYLE_ID;
|
|
251
|
+
style.textContent = __privateMethod(this, _ConnectionIndicator_instances, getDefaultStyle_fn).call(this);
|
|
252
|
+
document.head.appendChild(style);
|
|
253
|
+
}
|
|
254
|
+
} else {
|
|
255
|
+
const style = document.getElementById(DEFAULT_STYLE_ID);
|
|
256
|
+
if (style) {
|
|
257
|
+
document.head.removeChild(style);
|
|
211
258
|
}
|
|
212
259
|
}
|
|
213
|
-
|
|
214
|
-
|
|
260
|
+
};
|
|
261
|
+
getDefaultStyle_fn = function() {
|
|
262
|
+
return `
|
|
215
263
|
@keyframes v-progress-start {
|
|
216
264
|
0% {
|
|
217
265
|
width: 0%;
|
|
@@ -292,6 +340,7 @@ class ConnectionIndicator extends LitElement {
|
|
|
292
340
|
|
|
293
341
|
.v-status-message {
|
|
294
342
|
opacity: 0;
|
|
343
|
+
pointer-events: none;
|
|
295
344
|
width: 100%;
|
|
296
345
|
max-height: var(--status-height-collapsed, 8px);
|
|
297
346
|
overflow: hidden;
|
|
@@ -310,6 +359,7 @@ class ConnectionIndicator extends LitElement {
|
|
|
310
359
|
vaadin-connection-indicator[offline] .v-status-message,
|
|
311
360
|
vaadin-connection-indicator[reconnecting] .v-status-message {
|
|
312
361
|
opacity: 1;
|
|
362
|
+
pointer-events: auto;
|
|
313
363
|
background-color: var(--status-bg-color-offline, var(--lumo-shade, #333));
|
|
314
364
|
color: var(
|
|
315
365
|
--status-text-color-offline,
|
|
@@ -336,6 +386,7 @@ class ConnectionIndicator extends LitElement {
|
|
|
336
386
|
|
|
337
387
|
vaadin-connection-indicator[expanded] .v-status-message {
|
|
338
388
|
opacity: 1;
|
|
389
|
+
pointer-events: auto;
|
|
339
390
|
}
|
|
340
391
|
|
|
341
392
|
.v-status-message span {
|
|
@@ -367,26 +418,40 @@ class ConnectionIndicator extends LitElement {
|
|
|
367
418
|
}
|
|
368
419
|
}
|
|
369
420
|
`;
|
|
421
|
+
};
|
|
422
|
+
getLoadingBarStyle_fn = function() {
|
|
423
|
+
switch (__privateGet(this, _ConnectionIndicator_instances, loadingBarState_get)) {
|
|
424
|
+
case "" /* IDLE */:
|
|
425
|
+
return "display: none";
|
|
426
|
+
case "first" /* FIRST */:
|
|
427
|
+
case "second" /* SECOND */:
|
|
428
|
+
case "third" /* THIRD */:
|
|
429
|
+
return "display: block";
|
|
430
|
+
default:
|
|
431
|
+
return "";
|
|
370
432
|
}
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
case "first" /* FIRST */:
|
|
376
|
-
case "second" /* SECOND */:
|
|
377
|
-
case "third" /* THIRD */:
|
|
378
|
-
return "display: block";
|
|
379
|
-
default:
|
|
380
|
-
return "";
|
|
381
|
-
}
|
|
382
|
-
}
|
|
383
|
-
#timeoutFor(timeoutId, enabled, handler, delay) {
|
|
384
|
-
if (timeoutId !== 0) {
|
|
385
|
-
window.clearTimeout(timeoutId);
|
|
386
|
-
}
|
|
387
|
-
return enabled ? window.setTimeout(handler, delay) : 0;
|
|
433
|
+
};
|
|
434
|
+
timeoutFor_fn = function(timeoutId, enabled, handler, delay) {
|
|
435
|
+
if (timeoutId !== 0) {
|
|
436
|
+
window.clearTimeout(timeoutId);
|
|
388
437
|
}
|
|
389
|
-
|
|
438
|
+
return enabled ? window.setTimeout(handler, delay) : 0;
|
|
439
|
+
};
|
|
440
|
+
__decorateElement(_init, 4, "firstDelay", _firstDelay_dec, _ConnectionIndicator, _firstDelay);
|
|
441
|
+
__decorateElement(_init, 4, "secondDelay", _secondDelay_dec, _ConnectionIndicator, _secondDelay);
|
|
442
|
+
__decorateElement(_init, 4, "thirdDelay", _thirdDelay_dec, _ConnectionIndicator, _thirdDelay);
|
|
443
|
+
__decorateElement(_init, 4, "expandedDuration", _expandedDuration_dec, _ConnectionIndicator, _expandedDuration);
|
|
444
|
+
__decorateElement(_init, 4, "onlineText", _onlineText_dec, _ConnectionIndicator, _onlineText);
|
|
445
|
+
__decorateElement(_init, 4, "offlineText", _offlineText_dec, _ConnectionIndicator, _offlineText);
|
|
446
|
+
__decorateElement(_init, 4, "reconnectingText", _reconnectingText_dec, _ConnectionIndicator, _reconnectingText);
|
|
447
|
+
__decorateElement(_init, 4, "offline", _offline_dec, _ConnectionIndicator, _offline);
|
|
448
|
+
__decorateElement(_init, 4, "reconnecting", _reconnecting_dec, _ConnectionIndicator, _reconnecting);
|
|
449
|
+
__decorateElement(_init, 4, "expanded", _expanded_dec, _ConnectionIndicator, _expanded);
|
|
450
|
+
__decorateElement(_init, 4, "loading", _loading_dec, _ConnectionIndicator, _loading);
|
|
451
|
+
_b = __decorateElement(_init, 20, "#loadingBarState", _loadingBarState_dec, _ConnectionIndicator_instances, _loadingBarState), loadingBarState_get = _b.get, loadingBarState_set = _b.set;
|
|
452
|
+
__decorateElement(_init, 3, "applyDefaultTheme", _applyDefaultTheme_dec, _ConnectionIndicator);
|
|
453
|
+
__decoratorMetadata(_init, _ConnectionIndicator);
|
|
454
|
+
let ConnectionIndicator = _ConnectionIndicator;
|
|
390
455
|
if (customElements.get("vaadin-connection-indicator") === void 0) {
|
|
391
456
|
customElements.define("vaadin-connection-indicator", ConnectionIndicator);
|
|
392
457
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["src/ConnectionIndicator.ts"],
|
|
4
|
-
"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"],
|
|
5
|
-
"mappings": "AAgBA,SAAS,MAAM,kBAAuC;AACtD,SAAS,UAAU,aAAa;AAChC,SAAS,gBAAgB;AACzB,SAAS,uBAAkD;AAE3D,MAAM,mBAAmB;AAKlB,IAAW,kBAAX,kBAAWA,qBAAX;AACL,EAAAA,iBAAA,UAAO;AACP,EAAAA,iBAAA,WAAQ;AACR,EAAAA,iBAAA,YAAS;AACT,EAAAA,iBAAA,WAAQ;AAJQ,SAAAA;AAAA,GAAA;AAiBX,MAAM,
|
|
4
|
+
"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 pointer-events: none;\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 pointer-events: auto;\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 pointer-events: auto;\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"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAgBA,SAAS,MAAM,kBAAuC;AACtD,SAAS,UAAU,aAAa;AAChC,SAAS,gBAAgB;AACzB,SAAS,uBAAkD;AAE3D,MAAM,mBAAmB;AAKlB,IAAW,kBAAX,kBAAWA,qBAAX;AACL,EAAAA,iBAAA,UAAO;AACP,EAAAA,iBAAA,WAAQ;AACR,EAAAA,iBAAA,YAAS;AACT,EAAAA,iBAAA,WAAQ;AAJQ,SAAAA;AAAA,GAAA;AAiBX,MAAM,uBAAN,MAAM,8BAA4B,iBAsBvC,mBAAC,SAAS,EAAE,MAAM,OAAO,CAAC,IAM1B,oBAAC,SAAS,EAAE,MAAM,OAAO,CAAC,IAM1B,mBAAC,SAAS,EAAE,MAAM,OAAO,CAAC,IAO1B,yBAAC,SAAS,EAAE,MAAM,OAAO,CAAC,IAM1B,mBAAC,SAAS,EAAE,MAAM,OAAO,CAAC,IAM1B,oBAAC,SAAS,EAAE,MAAM,OAAO,CAAC,IAM1B,yBAAC,SAAS,EAAE,MAAM,OAAO,CAAC,IAG1B,gBAAC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC,IAG1C,qBAAC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC,IAG1C,iBAAC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC,IAG1C,gBAAC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC,IAG1C,wBAAC,MAAM,IAuFP,0BAAC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC,IAjKH,IAAW;AAAA,EA+FlD,cAAc;AACZ,UAAM;AAhGH;AAAA;AAuBL,uBAAS,aAAa,kBAAtB,gBAAsB,OAAtB;AAMA,uBAAS,cAAc,kBAAvB,iBAAuB,QAAvB;AAMA,uBAAS,aAAa,kBAAtB,iBAAsB,OAAtB;AAOA,uBAAS,mBAAmB,kBAA5B,iBAA4B,OAA5B;AAMA,uBAAS,aAAa,kBAAtB,iBAAsB,YAAtB;AAMA,uBAAS,cAAc,kBAAvB,iBAAuB,qBAAvB;AAMA,uBAAS,mBAAmB,kBAA5B,iBAA4B,6CAA5B;AAGA,uBAAS,UAAU,kBAAnB,iBAAmB,SAAnB;AAGA,uBAAS,eAAe,kBAAxB,iBAAwB,SAAxB;AAGA,uBAAS,WAAW,kBAApB,iBAAoB,SAApB;AAGA,uBAAS,UAAU,kBAAnB,iBAAmB,SAAnB;AAGA,uBAAS,kBAAoC,kBAA7C,iBAA6C,iBAA7C;AAEA,uBAAS,aAAsB;AAE/B,gDAA0B;AAE1B,sCAAgB;AAEhB,uCAAiB;AAEjB,sCAAgB;AAEhB,yCAAmB;AAEnB;AAEA,wBAAS;AAET,0CAAqC,gBAAgB;AAKnD,SAAK,0BAA0B,MAAM;AACnC,WAAK,WAAW,sBAAK,0DAAL;AAChB,yBAAK,kBAAmB,sBAAK,+CAAL,WACtB,mBAAK,mBACL,KAAK,UACL,MAAM;AACJ,aAAK,WAAW;AAAA,MAClB,GACA,KAAK;AAAA,IAET;AAAA,EACF;AAAA,EA5GA,WAAW,WAAgC;AACzC,WAAO,qBAAoB,OAAO;AAAA,EACpC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO,SAA8B;AACnC,UAAM,OAAO;AACb,QAAI,CAAC,KAAK,QAAQ,qBAAqB;AACrC,WAAK,WAAW,CAAC;AACjB,WAAK,OAAO,sBAAsB,SAAS,cAAc,6BAA6B;AACtF,eAAS,KAAK,YAAY,KAAK,OAAO,mBAAmB;AAAA,IAC3D;AACA,WAAO,KAAK,QAAQ;AAAA,EACtB;AAAA,EA8FmB,SAAS;AAC1B,WAAO;AAAA,wCAC6B,mBAAK,oDAAgB,WAAW,sBAAK,uDAAL,UAA0B;AAAA;AAAA;AAAA,kCAGhE,SAAS;AAAA,MACjC,QAAQ,KAAK;AAAA,IACf,CAAC,CAAC;AAAA;AAAA,8BAEoB,sBAAK,kDAAL,UAAqB;AAAA;AAAA;AAAA,EAGjD;AAAA,EAES,oBAAoB;AAC3B,UAAM,kBAAkB;AAExB,0BAAK,gDAAL;AAEA,UAAM,OAAO;AACb,QAAI,KAAK,QAAQ,iBAAiB;AAChC,yBAAK,uBAAwB,KAAK,OAAO;AACzC,yBAAK,uBAAsB,uBAAuB,KAAK,uBAAuB;AAC9E,4BAAK,0DAAL;AAAA,IACF;AAEA,0BAAK,gDAAL;AAAA,EACF;AAAA,EAES,uBAAuB;AAC9B,UAAM,qBAAqB;AAE3B,QAAI,mBAAK,wBAAuB;AAC9B,yBAAK,uBAAsB,0BAA0B,KAAK,uBAAuB;AAAA,IACnF;AAEA,0BAAK,gDAAL;AACA,uBAAK,gCAAa,OAAb;AAAA,EACP;AAAA,EAEmB,QAAQ,OAA6B;AACtD,QAAI,CAAC,WAAW,WAAW,gBAAgB,UAAU,EAAE,KAAK,CAAC,MAAM,MAAM,IAAI,CAAC,CAAC,GAAG;AAChF,4BAAK,uDAAL;AAAA,IACF;AAAA,EACF;AAAA,EAEA,IAAI,oBAAoB;AACtB,WAAO,mBAAK;AAAA,EACd;AAAA,EAGA,IAAI,kBAAkB,mBAA4B;AAChD,QAAI,sBAAsB,mBAAK,0BAAyB;AACtD,yBAAK,yBAA0B;AAC/B,4BAAK,gDAAL;AAAA,IACF;AAAA,EACF;AAAA,EAEmB,mBAAmB;AACpC,WAAO;AAAA,EACT;AAoSF;AA/cO;AAuBI;AAMA;AAMA;AAOA;AAMA;AAMA;AAMA;AAGA;AAGA;AAGA;AAGA;AAGA;AA3EJ;AA6EI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAET;AAEA;AAEA;AAEA;AAEA;AAEA;AAIA;AAgFA,iBAAY,WAAG;AAEb,OAAK,aAAa,WAAW,QAAQ;AAErC,OAAK,MAAM,UAAU;AACvB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA,2BAAsB,WAAY;AAChC,QAAM,kBAAkB,mBAAK,wBAAuB;AACpD,OAAK,UAAU,oBAAoB,gBAAgB;AACnD,OAAK,eAAe,oBAAoB,gBAAgB;AACxD,wBAAK,kDAAL,WAAoB,oBAAoB,gBAAgB;AACxD,MAAI,KAAK,SAAS;AAEhB,WAAO;AAAA,EACT;AAEA,MAAI,oBAAoB,mBAAK,oBAAmB;AAC9C,uBAAK,mBAAoB;AAEzB,WAAO;AAAA,EACT;AAGA,SAAO;AACT;AAEA,mBAAc,SAAC,SAAkB;AAC/B,OAAK,UAAU;AACf,qBAAK,gCAAmB,eAAnB;AAEL,qBAAK,eAAgB,sBAAK,+CAAL,WACnB,mBAAK,gBACL,SACA,MAAM;AACJ,uBAAK,gCAAmB,qBAAnB;AAAA,EACP,GACA,KAAK;AAGP,qBAAK,gBAAiB,sBAAK,+CAAL,WACpB,mBAAK,iBACL,SACA,MAAM;AACJ,uBAAK,gCAAmB,uBAAnB;AAAA,EACP,GACA,KAAK;AAGP,qBAAK,eAAgB,sBAAK,+CAAL,WACnB,mBAAK,gBACL,SACA,MAAM;AACJ,uBAAK,gCAAmB,qBAAnB;AAAA,EACP,GACA,KAAK;AAET;AAEA,wBAAmB,WAAG;AACpB,QAAM,cAAc,KAAK,WAAW,KAAK,WAAW,KAAK,gBAAgB,KAAK;AAK9E,MAAI,mBAAK,gDAAY;AACnB,SAAK,YAAY;AAAA,EACnB;AACA,MAAI,aAAa;AACf,SAAK,YAAY;AAAA,EACnB;AACA,qBAAK,gCAAa,aAAb;AACP;AAEA,mBAAc,WAAG;AACf,MAAI,KAAK,cAAc;AACrB,WAAO,KAAK;AAAA,EACd;AAEA,MAAI,KAAK,SAAS;AAChB,WAAO,KAAK;AAAA,EACd;AAEA,SAAO,KAAK;AACd;AAEA,iBAAY,WAAG;AACb,MAAI,mBAAK,4BAA2B,KAAK,aAAa;AACpD,QAAI,CAAC,SAAS,eAAe,gBAAgB,GAAG;AAC9C,YAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,YAAM,KAAK;AACX,YAAM,cAAc,sBAAK,oDAAL;AACpB,eAAS,KAAK,YAAY,KAAK;AAAA,IACjC;AAAA,EACF,OAAO;AACL,UAAM,QAAQ,SAAS,eAAe,gBAAgB;AACtD,QAAI,OAAO;AACT,eAAS,KAAK,YAAY,KAAK;AAAA,IACjC;AAAA,EACF;AACF;AAEA,qBAAgB,WAAW;AACzB,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+JT;AAEA,wBAAmB,WAAW;AAC5B,UAAQ,mBAAK,sDAAkB;AAAA,IAC7B,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAEA,gBAAW,SAAC,WAAmB,SAAkB,SAAqB,OAAuB;AAC3F,MAAI,cAAc,GAAG;AACnB,WAAO,aAAa,SAAS;AAAA,EAC/B;AAEA,SAAO,UAAU,OAAO,WAAW,SAAS,KAAK,IAAI;AACvD;AAvbA,4BAAS,cADT,iBAtBW,sBAuBF;AAMT,4BAAS,eADT,kBA5BW,sBA6BF;AAMT,4BAAS,cADT,iBAlCW,sBAmCF;AAOT,4BAAS,oBADT,uBAzCW,sBA0CF;AAMT,4BAAS,cADT,iBA/CW,sBAgDF;AAMT,4BAAS,eADT,kBArDW,sBAsDF;AAMT,4BAAS,oBADT,uBA3DW,sBA4DF;AAGT,4BAAS,WADT,cA9DW,sBA+DF;AAGT,4BAAS,gBADT,mBAjEW,sBAkEF;AAGT,4BAAS,YADT,eApEW,sBAqEF;AAGT,4BAAS,WADT,cAvEW,sBAwEF;AAGT,sDADA,sBACS,yEAAT,QAAS,sBAAT;AAuFA,4BAAI,qBADJ,wBAjKW;AAAN,2BAAM;AAAN,IAAM,sBAAN;AAidP,IAAI,eAAe,IAAI,6BAA6B,MAAM,QAAW;AACnE,iBAAe,OAAO,+BAA+B,mBAAmB;AAC1E;AAYO,MAAM,sBAAsB,oBAAoB;",
|
|
6
6
|
"names": ["LoadingBarState"]
|
|
7
7
|
}
|
package/index.js
CHANGED
|
@@ -2,7 +2,7 @@ function __REGISTER__(feature, vaadinObj = window.Vaadin ??= {}) {
|
|
|
2
2
|
vaadinObj.registrations ??= [];
|
|
3
3
|
vaadinObj.registrations.push({
|
|
4
4
|
is: feature ? `${"@vaadin/common-frontend"}/${feature}` : "@vaadin/common-frontend",
|
|
5
|
-
version: "0.0.
|
|
5
|
+
version: "0.0.20"
|
|
6
6
|
});
|
|
7
7
|
}
|
|
8
8
|
export * from "./ConnectionState.js";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/common-frontend",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.21",
|
|
4
4
|
"description": "Vaadin frontend utils used by Flow and Hilla",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -56,18 +56,18 @@
|
|
|
56
56
|
"lit": "^3.0.0"
|
|
57
57
|
},
|
|
58
58
|
"devDependencies": {
|
|
59
|
-
"@types/chai": "
|
|
60
|
-
"@types/sinon": "
|
|
61
|
-
"@types/sinon-chai": "
|
|
62
|
-
"@vitest/browser": "
|
|
63
|
-
"@vitest/
|
|
64
|
-
"@vitest/
|
|
65
|
-
"
|
|
66
|
-
"
|
|
67
|
-
"sinon
|
|
68
|
-
"
|
|
59
|
+
"@types/chai": "4.3.20",
|
|
60
|
+
"@types/sinon": "21.0.0",
|
|
61
|
+
"@types/sinon-chai": "4.0.0",
|
|
62
|
+
"@vitest/browser": "4.0.18",
|
|
63
|
+
"@vitest/browser-playwright": "4.0.18",
|
|
64
|
+
"@vitest/coverage-v8": "4.0.18",
|
|
65
|
+
"@vitest/ui": "4.0.18",
|
|
66
|
+
"playwright-core": "1.58.2",
|
|
67
|
+
"sinon": "21.0.1",
|
|
68
|
+
"sinon-chai": "4.0.1",
|
|
69
|
+
"type-fest": "5.4.4",
|
|
70
|
+
"vitest": "4.0.18"
|
|
69
71
|
},
|
|
70
|
-
"dependencies": {
|
|
71
|
-
"type-fest": "^4.32.0"
|
|
72
|
-
}
|
|
72
|
+
"dependencies": {}
|
|
73
73
|
}
|