@vaadin/common-frontend 0.0.22 → 0.0.23
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 +49 -24
- package/ConnectionIndicator.js.map +2 -2
- package/package.json +14 -7
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConnectionIndicator.d.ts","sourceRoot":"","sources":["src/ConnectionIndicator.ts"],"names":[],"mappings":"AAgBA,OAAO,
|
|
1
|
+
{"version":3,"file":"ConnectionIndicator.d.ts","sourceRoot":"","sources":["src/ConnectionIndicator.ts"],"names":[],"mappings":"AAgBA,OAAO,EAAa,UAAU,EAAkB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAQjF;;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;CA6UpC;AAMD;;;;;;;;;GASG;AACH,eAAO,MAAM,mBAAmB,qBAA+B,CAAC"}
|
package/ConnectionIndicator.js
CHANGED
|
@@ -47,11 +47,12 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
|
|
|
47
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
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
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;
|
|
51
|
-
import { html, LitElement } from "lit";
|
|
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, updateStyle_fn, updateTheme_fn, getFunctionalStyle_fn, getDefaultStyle_fn, getLoadingBarStyle_fn, timeoutFor_fn;
|
|
51
|
+
import { html, css, LitElement } from "lit";
|
|
52
52
|
import { property, state } from "lit/decorators.js";
|
|
53
53
|
import { classMap } from "lit/directives/class-map.js";
|
|
54
54
|
import { ConnectionState } from "./ConnectionState.js";
|
|
55
|
+
const FUNCTIONAL_STYLE_ID = "css-loading-indicator-functional";
|
|
55
56
|
const DEFAULT_STYLE_ID = "css-loading-indicator";
|
|
56
57
|
var LoadingBarState = /* @__PURE__ */ ((LoadingBarState2) => {
|
|
57
58
|
LoadingBarState2["IDLE"] = "";
|
|
@@ -189,17 +190,6 @@ _connectionStateStore = new WeakMap();
|
|
|
189
190
|
_lastMessageState = new WeakMap();
|
|
190
191
|
initPopover_fn = function() {
|
|
191
192
|
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
193
|
};
|
|
204
194
|
/**
|
|
205
195
|
* Update state flags.
|
|
@@ -253,23 +243,59 @@ renderMessage_fn = function() {
|
|
|
253
243
|
}
|
|
254
244
|
return this.onlineText;
|
|
255
245
|
};
|
|
256
|
-
|
|
257
|
-
if (
|
|
258
|
-
if (!document.getElementById(
|
|
246
|
+
updateStyle_fn = function(id, shouldApply, styleTemplate) {
|
|
247
|
+
if (shouldApply) {
|
|
248
|
+
if (!document.getElementById(id)) {
|
|
259
249
|
const style = document.createElement("style");
|
|
260
|
-
style.id =
|
|
261
|
-
style.textContent =
|
|
250
|
+
style.id = id;
|
|
251
|
+
style.textContent = styleTemplate.apply(this).cssText;
|
|
262
252
|
document.head.appendChild(style);
|
|
263
253
|
}
|
|
264
254
|
} else {
|
|
265
|
-
const style = document.getElementById(
|
|
255
|
+
const style = document.getElementById(id);
|
|
266
256
|
if (style) {
|
|
267
257
|
document.head.removeChild(style);
|
|
268
258
|
}
|
|
269
259
|
}
|
|
270
260
|
};
|
|
261
|
+
updateTheme_fn = function() {
|
|
262
|
+
__privateMethod(this, _ConnectionIndicator_instances, updateStyle_fn).call(this, FUNCTIONAL_STYLE_ID, this.isConnected, __privateMethod(this, _ConnectionIndicator_instances, getFunctionalStyle_fn));
|
|
263
|
+
__privateMethod(this, _ConnectionIndicator_instances, updateStyle_fn).call(this, DEFAULT_STYLE_ID, __privateGet(this, _applyDefaultThemeState) && this.isConnected, __privateMethod(this, _ConnectionIndicator_instances, getDefaultStyle_fn));
|
|
264
|
+
};
|
|
265
|
+
getFunctionalStyle_fn = function() {
|
|
266
|
+
return css`
|
|
267
|
+
/* Override user agent styles for popover */
|
|
268
|
+
vaadin-connection-indicator[popover] {
|
|
269
|
+
display: contents;
|
|
270
|
+
width: auto;
|
|
271
|
+
height: auto;
|
|
272
|
+
inset: 0;
|
|
273
|
+
bottom: auto;
|
|
274
|
+
margin: 0;
|
|
275
|
+
padding: 0;
|
|
276
|
+
background: none;
|
|
277
|
+
border: none;
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
.v-loading-indicator,
|
|
281
|
+
.v-status-message {
|
|
282
|
+
pointer-events: none;
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
/*
|
|
286
|
+
Make sure the connection indicator content is hidden, as expected to when
|
|
287
|
+
"applyDefaultTheme" is set to false. Typically, either theme or user
|
|
288
|
+
styles override these and show the indicator.
|
|
289
|
+
*/
|
|
290
|
+
.v-loading-indicator,
|
|
291
|
+
.v-status-message {
|
|
292
|
+
pointer-events: none;
|
|
293
|
+
opacity: 0;
|
|
294
|
+
}
|
|
295
|
+
`;
|
|
296
|
+
};
|
|
271
297
|
getDefaultStyle_fn = function() {
|
|
272
|
-
return `
|
|
298
|
+
return css`
|
|
273
299
|
@keyframes v-progress-start {
|
|
274
300
|
0% {
|
|
275
301
|
width: 0%;
|
|
@@ -313,18 +339,19 @@ getDefaultStyle_fn = function() {
|
|
|
313
339
|
}
|
|
314
340
|
.v-loading-indicator,
|
|
315
341
|
.v-status-message {
|
|
342
|
+
box-sizing: border-box;
|
|
316
343
|
position: fixed;
|
|
317
344
|
left: 0;
|
|
318
|
-
right:
|
|
345
|
+
right: 0;
|
|
319
346
|
top: 0;
|
|
320
347
|
background-color: var(--lumo-primary-color, var(--material-primary-color, blue));
|
|
321
348
|
transition: none;
|
|
322
349
|
}
|
|
323
350
|
.v-loading-indicator {
|
|
351
|
+
right: auto;
|
|
324
352
|
width: 50%;
|
|
325
353
|
height: 4px;
|
|
326
354
|
opacity: 1;
|
|
327
|
-
pointer-events: none;
|
|
328
355
|
animation: v-progress-start 1000ms 200ms both;
|
|
329
356
|
}
|
|
330
357
|
.v-loading-indicator[style*='none'] {
|
|
@@ -350,8 +377,6 @@ getDefaultStyle_fn = function() {
|
|
|
350
377
|
|
|
351
378
|
.v-status-message {
|
|
352
379
|
opacity: 0;
|
|
353
|
-
pointer-events: none;
|
|
354
|
-
width: 100%;
|
|
355
380
|
max-height: var(--status-height-collapsed, 8px);
|
|
356
381
|
overflow: hidden;
|
|
357
382
|
background-color: var(--status-bg-color-online, var(--lumo-primary-color, var(--material-primary-color, blue)));
|
|
@@ -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 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,
|
|
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, css, LitElement, type CSSResult, 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 FUNCTIONAL_STYLE_ID = 'css-loading-indicator-functional';\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 }\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 #updateStyle(id: string, shouldApply: boolean, styleTemplate: (this: ConnectionIndicator) => CSSResult) {\n if (shouldApply) {\n if (!document.getElementById(id)) {\n const style = document.createElement('style');\n style.id = id;\n style.textContent = styleTemplate.apply(this).cssText;\n document.head.appendChild(style);\n }\n } else {\n const style = document.getElementById(id);\n if (style) {\n document.head.removeChild(style);\n }\n }\n }\n\n #updateTheme() {\n // Functional style applies positioning and makes the indicator\n // invisible by default with disabled theme, as documented. The\n // style is always present, regardless of applyDefaultTheme.\n this.#updateStyle(FUNCTIONAL_STYLE_ID, this.isConnected, this.#getFunctionalStyle);\n // Theme styles are removed when applyDefaultTheme is set to false.\n this.#updateStyle(DEFAULT_STYLE_ID, this.#applyDefaultThemeState && this.isConnected, this.#getDefaultStyle);\n }\n\n #getFunctionalStyle(): CSSResult {\n return css`\n /* Override user agent styles for popover */\n vaadin-connection-indicator[popover] {\n display: contents;\n width: auto;\n height: auto;\n inset: 0;\n bottom: auto;\n margin: 0;\n padding: 0;\n background: none;\n border: none;\n }\n \n .v-loading-indicator,\n .v-status-message {\n pointer-events: none;\n }\n\n /*\n Make sure the connection indicator content is hidden, as expected to when\n \"applyDefaultTheme\" is set to false. Typically, either theme or user\n styles override these and show the indicator.\n */ \n .v-loading-indicator,\n .v-status-message {\n pointer-events: none;\n opacity: 0;\n }\n `;\n }\n\n #getDefaultStyle(): CSSResult {\n return css`\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 box-sizing: border-box;\n position: fixed;\n left: 0;\n right: 0;\n top: 0;\n background-color: var(--lumo-primary-color, var(--material-primary-color, blue));\n transition: none;\n }\n .v-loading-indicator {\n right: auto;\n width: 50%;\n height: 4px;\n opacity: 1;\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 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": "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",
|
|
6
6
|
"names": ["LoadingBarState"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/common-frontend",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.23",
|
|
4
4
|
"description": "Vaadin frontend utils used by Flow and Hilla",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -59,15 +59,22 @@
|
|
|
59
59
|
"@types/chai": "4.3.20",
|
|
60
60
|
"@types/sinon": "21.0.0",
|
|
61
61
|
"@types/sinon-chai": "4.0.0",
|
|
62
|
-
"@vitest/browser": "4.
|
|
63
|
-
"@vitest/browser-playwright": "4.
|
|
64
|
-
"@vitest/coverage-v8": "4.
|
|
65
|
-
"@vitest/ui": "4.
|
|
62
|
+
"@vitest/browser": "4.1.9",
|
|
63
|
+
"@vitest/browser-playwright": "4.1.9",
|
|
64
|
+
"@vitest/coverage-v8": "4.1.9",
|
|
65
|
+
"@vitest/ui": "4.1.9",
|
|
66
66
|
"playwright-core": "1.58.2",
|
|
67
67
|
"sinon": "21.0.1",
|
|
68
68
|
"sinon-chai": "4.0.1",
|
|
69
69
|
"type-fest": "5.4.4",
|
|
70
|
-
"vitest": "4.
|
|
70
|
+
"vitest": "4.1.9"
|
|
71
71
|
},
|
|
72
|
-
"dependencies": {
|
|
72
|
+
"dependencies": {
|
|
73
|
+
"@nx/js": "22.7.6",
|
|
74
|
+
"concurrently": "9.2.3",
|
|
75
|
+
"esbuild": "0.28.1",
|
|
76
|
+
"nx": "22.7.6",
|
|
77
|
+
"postcss": "8.5.16",
|
|
78
|
+
"vite": "7.3.6"
|
|
79
|
+
}
|
|
73
80
|
}
|