@vaadin/common-frontend 0.0.21 → 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 -14
- package/ConnectionIndicator.js.map +2 -2
- package/index.js +1 -1
- 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,7 +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
193
|
};
|
|
194
194
|
/**
|
|
195
195
|
* Update state flags.
|
|
@@ -243,23 +243,59 @@ renderMessage_fn = function() {
|
|
|
243
243
|
}
|
|
244
244
|
return this.onlineText;
|
|
245
245
|
};
|
|
246
|
-
|
|
247
|
-
if (
|
|
248
|
-
if (!document.getElementById(
|
|
246
|
+
updateStyle_fn = function(id, shouldApply, styleTemplate) {
|
|
247
|
+
if (shouldApply) {
|
|
248
|
+
if (!document.getElementById(id)) {
|
|
249
249
|
const style = document.createElement("style");
|
|
250
|
-
style.id =
|
|
251
|
-
style.textContent =
|
|
250
|
+
style.id = id;
|
|
251
|
+
style.textContent = styleTemplate.apply(this).cssText;
|
|
252
252
|
document.head.appendChild(style);
|
|
253
253
|
}
|
|
254
254
|
} else {
|
|
255
|
-
const style = document.getElementById(
|
|
255
|
+
const style = document.getElementById(id);
|
|
256
256
|
if (style) {
|
|
257
257
|
document.head.removeChild(style);
|
|
258
258
|
}
|
|
259
259
|
}
|
|
260
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
|
+
};
|
|
261
297
|
getDefaultStyle_fn = function() {
|
|
262
|
-
return `
|
|
298
|
+
return css`
|
|
263
299
|
@keyframes v-progress-start {
|
|
264
300
|
0% {
|
|
265
301
|
width: 0%;
|
|
@@ -303,18 +339,19 @@ getDefaultStyle_fn = function() {
|
|
|
303
339
|
}
|
|
304
340
|
.v-loading-indicator,
|
|
305
341
|
.v-status-message {
|
|
342
|
+
box-sizing: border-box;
|
|
306
343
|
position: fixed;
|
|
307
344
|
left: 0;
|
|
308
|
-
right:
|
|
345
|
+
right: 0;
|
|
309
346
|
top: 0;
|
|
310
347
|
background-color: var(--lumo-primary-color, var(--material-primary-color, blue));
|
|
311
348
|
transition: none;
|
|
312
349
|
}
|
|
313
350
|
.v-loading-indicator {
|
|
351
|
+
right: auto;
|
|
314
352
|
width: 50%;
|
|
315
353
|
height: 4px;
|
|
316
354
|
opacity: 1;
|
|
317
|
-
pointer-events: none;
|
|
318
355
|
animation: v-progress-start 1000ms 200ms both;
|
|
319
356
|
}
|
|
320
357
|
.v-loading-indicator[style*='none'] {
|
|
@@ -340,8 +377,6 @@ getDefaultStyle_fn = function() {
|
|
|
340
377
|
|
|
341
378
|
.v-status-message {
|
|
342
379
|
opacity: 0;
|
|
343
|
-
pointer-events: none;
|
|
344
|
-
width: 100%;
|
|
345
380
|
max-height: var(--status-height-collapsed, 8px);
|
|
346
381
|
overflow: hidden;
|
|
347
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 }\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/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.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
|
}
|