@vaadin/common-frontend 0.0.20 → 0.0.22
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 +240 -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;CAgTpC;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,167 @@ 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
|
+
this.style.width = "auto";
|
|
194
|
+
this.style.height = "auto";
|
|
195
|
+
this.style.top = "0";
|
|
196
|
+
this.style.right = "0";
|
|
197
|
+
this.style.bottom = "auto";
|
|
198
|
+
this.style.left = "0";
|
|
199
|
+
this.style.margin = "0";
|
|
200
|
+
this.style.padding = "0";
|
|
201
|
+
this.style.background = "none";
|
|
202
|
+
this.style.border = "none";
|
|
203
|
+
};
|
|
204
|
+
/**
|
|
205
|
+
* Update state flags.
|
|
206
|
+
*
|
|
207
|
+
* @returns true if the connection message changes, and therefore a new
|
|
208
|
+
* message should be shown
|
|
209
|
+
*/
|
|
210
|
+
updateConnectionState_fn = function() {
|
|
211
|
+
const connectionState = __privateGet(this, _connectionStateStore)?.state;
|
|
212
|
+
this.offline = connectionState === ConnectionState.CONNECTION_LOST;
|
|
213
|
+
this.reconnecting = connectionState === ConnectionState.RECONNECTING;
|
|
214
|
+
__privateMethod(this, _ConnectionIndicator_instances, updateLoading_fn).call(this, connectionState === ConnectionState.LOADING);
|
|
215
|
+
if (this.loading) {
|
|
149
216
|
return false;
|
|
150
217
|
}
|
|
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
|
-
);
|
|
218
|
+
if (connectionState !== __privateGet(this, _lastMessageState)) {
|
|
219
|
+
__privateSet(this, _lastMessageState, connectionState);
|
|
220
|
+
return true;
|
|
178
221
|
}
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
222
|
+
return false;
|
|
223
|
+
};
|
|
224
|
+
updateLoading_fn = function(loading) {
|
|
225
|
+
this.loading = loading;
|
|
226
|
+
__privateSet(this, _ConnectionIndicator_instances, "" /* IDLE */, loadingBarState_set);
|
|
227
|
+
__privateSet(this, _firstTimeout, __privateMethod(this, _ConnectionIndicator_instances, timeoutFor_fn).call(this, __privateGet(this, _firstTimeout), loading, () => {
|
|
228
|
+
__privateSet(this, _ConnectionIndicator_instances, "first" /* FIRST */, loadingBarState_set);
|
|
229
|
+
}, this.firstDelay));
|
|
230
|
+
__privateSet(this, _secondTimeout, __privateMethod(this, _ConnectionIndicator_instances, timeoutFor_fn).call(this, __privateGet(this, _secondTimeout), loading, () => {
|
|
231
|
+
__privateSet(this, _ConnectionIndicator_instances, "second" /* SECOND */, loadingBarState_set);
|
|
232
|
+
}, this.secondDelay));
|
|
233
|
+
__privateSet(this, _thirdTimeout, __privateMethod(this, _ConnectionIndicator_instances, timeoutFor_fn).call(this, __privateGet(this, _thirdTimeout), loading, () => {
|
|
234
|
+
__privateSet(this, _ConnectionIndicator_instances, "third" /* THIRD */, loadingBarState_set);
|
|
235
|
+
}, this.thirdDelay));
|
|
236
|
+
};
|
|
237
|
+
updatePopoverState_fn = function() {
|
|
238
|
+
const showPopover = this.loading || this.offline || this.reconnecting || this.expanded;
|
|
239
|
+
if (__privateGet(this, _ConnectionIndicator_instances, isPopover_get)) {
|
|
240
|
+
this.hidePopover();
|
|
188
241
|
}
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
return this.reconnectingText;
|
|
192
|
-
}
|
|
193
|
-
if (this.offline) {
|
|
194
|
-
return this.offlineText;
|
|
195
|
-
}
|
|
196
|
-
return this.onlineText;
|
|
242
|
+
if (showPopover) {
|
|
243
|
+
this.showPopover();
|
|
197
244
|
}
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
245
|
+
__privateSet(this, _ConnectionIndicator_instances, showPopover, isPopover_set);
|
|
246
|
+
};
|
|
247
|
+
renderMessage_fn = function() {
|
|
248
|
+
if (this.reconnecting) {
|
|
249
|
+
return this.reconnectingText;
|
|
250
|
+
}
|
|
251
|
+
if (this.offline) {
|
|
252
|
+
return this.offlineText;
|
|
253
|
+
}
|
|
254
|
+
return this.onlineText;
|
|
255
|
+
};
|
|
256
|
+
updateTheme_fn = function() {
|
|
257
|
+
if (__privateGet(this, _applyDefaultThemeState) && this.isConnected) {
|
|
258
|
+
if (!document.getElementById(DEFAULT_STYLE_ID)) {
|
|
259
|
+
const style = document.createElement("style");
|
|
260
|
+
style.id = DEFAULT_STYLE_ID;
|
|
261
|
+
style.textContent = __privateMethod(this, _ConnectionIndicator_instances, getDefaultStyle_fn).call(this);
|
|
262
|
+
document.head.appendChild(style);
|
|
263
|
+
}
|
|
264
|
+
} else {
|
|
265
|
+
const style = document.getElementById(DEFAULT_STYLE_ID);
|
|
266
|
+
if (style) {
|
|
267
|
+
document.head.removeChild(style);
|
|
211
268
|
}
|
|
212
269
|
}
|
|
213
|
-
|
|
214
|
-
|
|
270
|
+
};
|
|
271
|
+
getDefaultStyle_fn = function() {
|
|
272
|
+
return `
|
|
215
273
|
@keyframes v-progress-start {
|
|
216
274
|
0% {
|
|
217
275
|
width: 0%;
|
|
@@ -292,6 +350,7 @@ class ConnectionIndicator extends LitElement {
|
|
|
292
350
|
|
|
293
351
|
.v-status-message {
|
|
294
352
|
opacity: 0;
|
|
353
|
+
pointer-events: none;
|
|
295
354
|
width: 100%;
|
|
296
355
|
max-height: var(--status-height-collapsed, 8px);
|
|
297
356
|
overflow: hidden;
|
|
@@ -310,6 +369,7 @@ class ConnectionIndicator extends LitElement {
|
|
|
310
369
|
vaadin-connection-indicator[offline] .v-status-message,
|
|
311
370
|
vaadin-connection-indicator[reconnecting] .v-status-message {
|
|
312
371
|
opacity: 1;
|
|
372
|
+
pointer-events: auto;
|
|
313
373
|
background-color: var(--status-bg-color-offline, var(--lumo-shade, #333));
|
|
314
374
|
color: var(
|
|
315
375
|
--status-text-color-offline,
|
|
@@ -336,6 +396,7 @@ class ConnectionIndicator extends LitElement {
|
|
|
336
396
|
|
|
337
397
|
vaadin-connection-indicator[expanded] .v-status-message {
|
|
338
398
|
opacity: 1;
|
|
399
|
+
pointer-events: auto;
|
|
339
400
|
}
|
|
340
401
|
|
|
341
402
|
.v-status-message span {
|
|
@@ -367,26 +428,40 @@ class ConnectionIndicator extends LitElement {
|
|
|
367
428
|
}
|
|
368
429
|
}
|
|
369
430
|
`;
|
|
431
|
+
};
|
|
432
|
+
getLoadingBarStyle_fn = function() {
|
|
433
|
+
switch (__privateGet(this, _ConnectionIndicator_instances, loadingBarState_get)) {
|
|
434
|
+
case "" /* IDLE */:
|
|
435
|
+
return "display: none";
|
|
436
|
+
case "first" /* FIRST */:
|
|
437
|
+
case "second" /* SECOND */:
|
|
438
|
+
case "third" /* THIRD */:
|
|
439
|
+
return "display: block";
|
|
440
|
+
default:
|
|
441
|
+
return "";
|
|
370
442
|
}
|
|
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;
|
|
443
|
+
};
|
|
444
|
+
timeoutFor_fn = function(timeoutId, enabled, handler, delay) {
|
|
445
|
+
if (timeoutId !== 0) {
|
|
446
|
+
window.clearTimeout(timeoutId);
|
|
388
447
|
}
|
|
389
|
-
|
|
448
|
+
return enabled ? window.setTimeout(handler, delay) : 0;
|
|
449
|
+
};
|
|
450
|
+
__decorateElement(_init, 4, "firstDelay", _firstDelay_dec, _ConnectionIndicator, _firstDelay);
|
|
451
|
+
__decorateElement(_init, 4, "secondDelay", _secondDelay_dec, _ConnectionIndicator, _secondDelay);
|
|
452
|
+
__decorateElement(_init, 4, "thirdDelay", _thirdDelay_dec, _ConnectionIndicator, _thirdDelay);
|
|
453
|
+
__decorateElement(_init, 4, "expandedDuration", _expandedDuration_dec, _ConnectionIndicator, _expandedDuration);
|
|
454
|
+
__decorateElement(_init, 4, "onlineText", _onlineText_dec, _ConnectionIndicator, _onlineText);
|
|
455
|
+
__decorateElement(_init, 4, "offlineText", _offlineText_dec, _ConnectionIndicator, _offlineText);
|
|
456
|
+
__decorateElement(_init, 4, "reconnectingText", _reconnectingText_dec, _ConnectionIndicator, _reconnectingText);
|
|
457
|
+
__decorateElement(_init, 4, "offline", _offline_dec, _ConnectionIndicator, _offline);
|
|
458
|
+
__decorateElement(_init, 4, "reconnecting", _reconnecting_dec, _ConnectionIndicator, _reconnecting);
|
|
459
|
+
__decorateElement(_init, 4, "expanded", _expanded_dec, _ConnectionIndicator, _expanded);
|
|
460
|
+
__decorateElement(_init, 4, "loading", _loading_dec, _ConnectionIndicator, _loading);
|
|
461
|
+
_b = __decorateElement(_init, 20, "#loadingBarState", _loadingBarState_dec, _ConnectionIndicator_instances, _loadingBarState), loadingBarState_get = _b.get, loadingBarState_set = _b.set;
|
|
462
|
+
__decorateElement(_init, 3, "applyDefaultTheme", _applyDefaultTheme_dec, _ConnectionIndicator);
|
|
463
|
+
__decoratorMetadata(_init, _ConnectionIndicator);
|
|
464
|
+
let ConnectionIndicator = _ConnectionIndicator;
|
|
390
465
|
if (customElements.get("vaadin-connection-indicator") === void 0) {
|
|
391
466
|
customElements.define("vaadin-connection-indicator", ConnectionIndicator);
|
|
392
467
|
}
|
|
@@ -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 this.style.width = 'auto';\n this.style.height = 'auto';\n this.style.top = '0';\n this.style.right = '0';\n this.style.bottom = 'auto';\n this.style.left = '0';\n this.style.margin = '0';\n this.style.padding = '0';\n this.style.background = 'none';\n this.style.border = 'none';\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;AA8SF;AAzdO;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;AACrB,OAAK,MAAM,QAAQ;AACnB,OAAK,MAAM,SAAS;AACpB,OAAK,MAAM,MAAM;AACjB,OAAK,MAAM,QAAQ;AACnB,OAAK,MAAM,SAAS;AACpB,OAAK,MAAM,OAAO;AAClB,OAAK,MAAM,SAAS;AACpB,OAAK,MAAM,UAAU;AACrB,OAAK,MAAM,aAAa;AACxB,OAAK,MAAM,SAAS;AACtB;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;AAjcA,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;AA2dP,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.22"
|
|
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.22",
|
|
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
|
}
|