@vaadin/common-frontend 0.0.17 → 0.0.19
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 +2 -2
- package/ConnectionIndicator.d.ts.map +1 -1
- package/ConnectionIndicator.js +16 -16
- package/ConnectionIndicator.js.map +1 -1
- package/ConnectionState.d.ts +3 -2
- package/ConnectionState.d.ts.map +1 -1
- package/ConnectionState.js +28 -4
- package/ConnectionState.js.map +1 -1
- package/index.js +5 -3
- package/index.js.map +1 -1
- package/package.json +19 -13
package/ConnectionIndicator.d.ts
CHANGED
|
@@ -61,7 +61,7 @@ export declare class ConnectionIndicator extends LitElement {
|
|
|
61
61
|
private readonly connectionStateListener;
|
|
62
62
|
private lastMessageState;
|
|
63
63
|
constructor();
|
|
64
|
-
render(): import("lit").TemplateResult<1>;
|
|
64
|
+
protected render(): import("lit-html").TemplateResult<1>;
|
|
65
65
|
connectedCallback(): void;
|
|
66
66
|
disconnectedCallback(): void;
|
|
67
67
|
get applyDefaultTheme(): boolean;
|
|
@@ -70,7 +70,7 @@ export declare class ConnectionIndicator extends LitElement {
|
|
|
70
70
|
/**
|
|
71
71
|
* Update state flags.
|
|
72
72
|
*
|
|
73
|
-
* @
|
|
73
|
+
* @returns true if the connection message changes, and therefore a new
|
|
74
74
|
* message should be shown
|
|
75
75
|
*/
|
|
76
76
|
private updateConnectionState;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConnectionIndicator.d.ts","sourceRoot":"","sources":["src/ConnectionIndicator.ts"],"names":[],"mappings":"AAgBA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAOvC;;GAEG;AACH,0BAAkB,eAAe;IAC/B,IAAI,KAAK;IACT,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED;;;GAGG;AACH,qBAAa,mBAAoB,SAAQ,UAAU;IACjD;;;OAGG;IACH,MAAM,CAAC,MAAM,IAAI,mBAAmB;IAUpC;;OAEG;IAEH,UAAU,SAAO;IAEjB;;OAEG;IAEH,WAAW,SAAQ;IAEnB;;OAEG;IAEH,UAAU,SAAQ;IAElB;;;OAGG;IAEH,gBAAgB,SAAQ;IAExB;;OAEG;IAEH,UAAU,SAAY;IAEtB;;OAEG;IAEH,WAAW,SAAqB;IAEhC;;OAEG;IAEH,gBAAgB,SAA6C;IAG7D,OAAO,CAAC,OAAO,CAAS;IAGxB,OAAO,CAAC,YAAY,CAAS;IAG7B,OAAO,CAAC,QAAQ,CAAS;IAGzB,OAAO,CAAC,OAAO,CAAS;IAGxB,OAAO,CAAC,eAAe,CAAyC;IAEhE,OAAO,CAAC,sBAAsB,CAAQ;IAEtC,OAAO,CAAC,YAAY,CAAK;IAEzB,OAAO,CAAC,aAAa,CAAK;IAE1B,OAAO,CAAC,YAAY,CAAK;IAEzB,OAAO,CAAC,eAAe,CAAK;IAE5B,OAAO,CAAC,oBAAoB,CAAC,CAAuB;IAEpD,OAAO,CAAC,QAAQ,CAAC,uBAAuB,CAAa;IAErD,OAAO,CAAC,gBAAgB,CAA8C;;IAkBtE,MAAM;
|
|
1
|
+
{"version":3,"file":"ConnectionIndicator.d.ts","sourceRoot":"","sources":["src/ConnectionIndicator.ts"],"names":[],"mappings":"AAgBA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAOvC;;GAEG;AACH,0BAAkB,eAAe;IAC/B,IAAI,KAAK;IACT,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED;;;GAGG;AACH,qBAAa,mBAAoB,SAAQ,UAAU;IACjD;;;OAGG;IACH,MAAM,CAAC,MAAM,IAAI,mBAAmB;IAUpC;;OAEG;IAEH,UAAU,SAAO;IAEjB;;OAEG;IAEH,WAAW,SAAQ;IAEnB;;OAEG;IAEH,UAAU,SAAQ;IAElB;;;OAGG;IAEH,gBAAgB,SAAQ;IAExB;;OAEG;IAEH,UAAU,SAAY;IAEtB;;OAEG;IAEH,WAAW,SAAqB;IAEhC;;OAEG;IAEH,gBAAgB,SAA6C;IAG7D,OAAO,CAAC,OAAO,CAAS;IAGxB,OAAO,CAAC,YAAY,CAAS;IAG7B,OAAO,CAAC,QAAQ,CAAS;IAGzB,OAAO,CAAC,OAAO,CAAS;IAGxB,OAAO,CAAC,eAAe,CAAyC;IAEhE,OAAO,CAAC,sBAAsB,CAAQ;IAEtC,OAAO,CAAC,YAAY,CAAK;IAEzB,OAAO,CAAC,aAAa,CAAK;IAE1B,OAAO,CAAC,YAAY,CAAK;IAEzB,OAAO,CAAC,eAAe,CAAK;IAE5B,OAAO,CAAC,oBAAoB,CAAC,CAAuB;IAEpD,OAAO,CAAC,QAAQ,CAAC,uBAAuB,CAAa;IAErD,OAAO,CAAC,gBAAgB,CAA8C;;IAkBtE,SAAS,CAAC,MAAM;IAchB,iBAAiB;IAajB,oBAAoB;IAUpB,IACI,iBAAiB,IAIoB,OAAO,CAF/C;IAED,IAAI,iBAAiB,CAAC,iBAAiB,EAAE,OAAO,EAK/C;IAED,SAAS,CAAC,gBAAgB;IAI1B;;;;;OAKG;IACH,OAAO,CAAC,qBAAqB;IAoB7B,OAAO,CAAC,aAAa;IAgCrB,OAAO,CAAC,aAAa;IAYrB,OAAO,CAAC,WAAW;IAgBnB,OAAO,CAAC,eAAe;IAgKvB,OAAO,CAAC,kBAAkB;IAa1B,OAAO,CAAC,UAAU;IAQlB,MAAM,KAAK,QAAQ,IAAI,mBAAmB,CAEzC;CACF;AAMD;;;;;;;;;GASG;AACH,eAAO,MAAM,mBAAmB,qBAA+B,CAAC"}
|
package/ConnectionIndicator.js
CHANGED
|
@@ -34,12 +34,26 @@ export var LoadingBarState;
|
|
|
34
34
|
* listens for changes on `window.Vaadin.connectionState` ConnectionStateStore.
|
|
35
35
|
*/
|
|
36
36
|
export class ConnectionIndicator extends LitElement {
|
|
37
|
+
/**
|
|
38
|
+
* Initialize global connection indicator instance at
|
|
39
|
+
* window.Vaadin.connectionIndicator and add instance to the document body.
|
|
40
|
+
*/
|
|
41
|
+
static create() {
|
|
42
|
+
var _a, _b;
|
|
43
|
+
const $wnd = window;
|
|
44
|
+
if (!((_a = $wnd.Vaadin) === null || _a === void 0 ? void 0 : _a.connectionIndicator)) {
|
|
45
|
+
$wnd.Vaadin || ($wnd.Vaadin = {});
|
|
46
|
+
$wnd.Vaadin.connectionIndicator = document.createElement('vaadin-connection-indicator');
|
|
47
|
+
document.body.appendChild($wnd.Vaadin.connectionIndicator);
|
|
48
|
+
}
|
|
49
|
+
return (_b = $wnd.Vaadin) === null || _b === void 0 ? void 0 : _b.connectionIndicator;
|
|
50
|
+
}
|
|
37
51
|
constructor() {
|
|
38
52
|
super();
|
|
39
53
|
/**
|
|
40
54
|
* The delay before showing the loading indicator, in ms.
|
|
41
55
|
*/
|
|
42
|
-
this.firstDelay =
|
|
56
|
+
this.firstDelay = 450;
|
|
43
57
|
/**
|
|
44
58
|
* The delay before the loading indicator goes into "second" state, in ms.
|
|
45
59
|
*/
|
|
@@ -83,20 +97,6 @@ export class ConnectionIndicator extends LitElement {
|
|
|
83
97
|
}, this.expandedDuration);
|
|
84
98
|
};
|
|
85
99
|
}
|
|
86
|
-
/**
|
|
87
|
-
* Initialize global connection indicator instance at
|
|
88
|
-
* window.Vaadin.connectionIndicator and add instance to the document body.
|
|
89
|
-
*/
|
|
90
|
-
static create() {
|
|
91
|
-
var _a, _b;
|
|
92
|
-
const $wnd = window;
|
|
93
|
-
if (!((_a = $wnd.Vaadin) === null || _a === void 0 ? void 0 : _a.connectionIndicator)) {
|
|
94
|
-
$wnd.Vaadin = $wnd.Vaadin || {};
|
|
95
|
-
$wnd.Vaadin.connectionIndicator = document.createElement('vaadin-connection-indicator');
|
|
96
|
-
document.body.appendChild($wnd.Vaadin.connectionIndicator);
|
|
97
|
-
}
|
|
98
|
-
return (_b = $wnd.Vaadin) === null || _b === void 0 ? void 0 : _b.connectionIndicator;
|
|
99
|
-
}
|
|
100
100
|
render() {
|
|
101
101
|
return html `
|
|
102
102
|
<div class="v-loading-indicator ${this.loadingBarState}" style=${this.getLoadingBarStyle()}></div>
|
|
@@ -143,7 +143,7 @@ export class ConnectionIndicator extends LitElement {
|
|
|
143
143
|
/**
|
|
144
144
|
* Update state flags.
|
|
145
145
|
*
|
|
146
|
-
* @
|
|
146
|
+
* @returns true if the connection message changes, and therefore a new
|
|
147
147
|
* message should be shown
|
|
148
148
|
*/
|
|
149
149
|
updateConnectionState() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConnectionIndicator.js","sourceRoot":"","sources":["src/ConnectionIndicator.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright 2000-2020 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 } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ConnectionState, 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\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 /**\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 = $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 firstDelay = 300;\n\n /**\n * The delay before the loading indicator goes into \"second\" state, in ms.\n */\n @property({ type: Number })\n secondDelay = 1500;\n\n /**\n * The delay before the loading indicator goes into \"third\" state, in ms.\n */\n @property({ type: Number })\n 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 expandedDuration = 2000;\n\n /**\n * The message shown when the connection goes to connected state.\n */\n @property({ type: String })\n onlineText = 'Online';\n\n /**\n * The message shown when the connection goes to lost state.\n */\n @property({ type: String })\n offlineText = 'Connection lost';\n\n /**\n * The message shown when the connection goes to reconnecting state.\n */\n @property({ type: String })\n reconnectingText = 'Connection lost, trying to reconnect...';\n\n @property({ type: Boolean, reflect: true })\n private offline = false;\n\n @property({ type: Boolean, reflect: true })\n private reconnecting = false;\n\n @property({ type: Boolean, reflect: true })\n private expanded = false;\n\n @property({ type: Boolean, reflect: true })\n private loading = false;\n\n @property({ type: String })\n private loadingBarState: LoadingBarState = LoadingBarState.IDLE;\n\n private applyDefaultThemeState = true;\n\n private firstTimeout = 0;\n\n private secondTimeout = 0;\n\n private thirdTimeout = 0;\n\n private expandedTimeout = 0;\n\n private connectionStateStore?: ConnectionStateStore;\n\n private readonly connectionStateListener: () => void;\n\n private 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 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 connectedCallback() {\n super.connectedCallback();\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 disconnectedCallback() {\n super.disconnectedCallback();\n\n if (this.connectionStateStore) {\n this.connectionStateStore.removeStateChangeListener(this.connectionStateListener);\n }\n\n this.updateTheme();\n }\n\n @property({ type: Boolean })\n get applyDefaultTheme() {\n return this.applyDefaultThemeState;\n }\n\n set applyDefaultTheme(applyDefaultTheme: boolean) {\n if (applyDefaultTheme !== this.applyDefaultThemeState) {\n this.applyDefaultThemeState = applyDefaultTheme;\n this.updateTheme();\n }\n }\n\n protected createRenderRoot() {\n return this;\n }\n\n /**\n * Update state flags.\n *\n * @return true if the connection message changes, and therefore a new\n * message should be shown\n */\n private updateConnectionState(): boolean {\n const state = this.connectionStateStore?.state;\n this.offline = state === ConnectionState.CONNECTION_LOST;\n this.reconnecting = state === ConnectionState.RECONNECTING;\n this.updateLoading(state === ConnectionState.LOADING);\n if (this.loading) {\n // Entering loading state, do not show message\n return false;\n }\n\n if (state !== this.lastMessageState) {\n this.lastMessageState = state!;\n // Message changes, show new message\n return true;\n }\n\n // Message did not change\n return false;\n }\n\n private 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 private 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 private 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 private 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 z-index: 251;\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 private 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 private 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 static get instance(): ConnectionIndicator {\n return ConnectionIndicator.create();\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"]}
|
|
1
|
+
{"version":3,"file":"ConnectionIndicator.js","sourceRoot":"","sources":["src/ConnectionIndicator.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;;AAEH,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,eAAe,EAA6B,MAAM,sBAAsB,CAAC;AAElF,MAAM,gBAAgB,GAAG,uBAAuB,CAAC;AAEjD;;GAEG;AACH,MAAM,CAAN,IAAkB,eAKjB;AALD,WAAkB,eAAe;IAC/B,4BAAS,CAAA;IACT,kCAAe,CAAA;IACf,oCAAiB,CAAA;IACjB,kCAAe,CAAA;AACjB,CAAC,EALiB,eAAe,KAAf,eAAe,QAKhC;AAED;;;GAGG;AACH,MAAM,OAAO,mBAAoB,SAAQ,UAAU;IACjD;;;OAGG;IACH,MAAM,CAAC,MAAM;;QACX,MAAM,IAAI,GAAG,MAAa,CAAC;QAC3B,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,mBAAmB,CAAA,EAAE,CAAC;YACtC,IAAI,CAAC,MAAM,KAAX,IAAI,CAAC,MAAM,GAAK,EAAE,EAAC;YACnB,IAAI,CAAC,MAAM,CAAC,mBAAmB,GAAG,QAAQ,CAAC,aAAa,CAAC,6BAA6B,CAAC,CAAC;YACxF,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC;QAC7D,CAAC;QACD,OAAO,MAAA,IAAI,CAAC,MAAM,0CAAE,mBAA0C,CAAC;IACjE,CAAC;IA4ED;QACE,KAAK,EAAE,CAAC;QA3EV;;WAEG;QAEH,eAAU,GAAG,GAAG,CAAC;QAEjB;;WAEG;QAEH,gBAAW,GAAG,IAAI,CAAC;QAEnB;;WAEG;QAEH,eAAU,GAAG,IAAI,CAAC;QAElB;;;WAGG;QAEH,qBAAgB,GAAG,IAAI,CAAC;QAExB;;WAEG;QAEH,eAAU,GAAG,QAAQ,CAAC;QAEtB;;WAEG;QAEH,gBAAW,GAAG,iBAAiB,CAAC;QAEhC;;WAEG;QAEH,qBAAgB,GAAG,yCAAyC,CAAC;QAGrD,YAAO,GAAG,KAAK,CAAC;QAGhB,iBAAY,GAAG,KAAK,CAAC;QAGrB,aAAQ,GAAG,KAAK,CAAC;QAGjB,YAAO,GAAG,KAAK,CAAC;QAGhB,oBAAe,GAAoB,eAAe,CAAC,IAAI,CAAC;QAExD,2BAAsB,GAAG,IAAI,CAAC;QAE9B,iBAAY,GAAG,CAAC,CAAC;QAEjB,kBAAa,GAAG,CAAC,CAAC;QAElB,iBAAY,GAAG,CAAC,CAAC;QAEjB,oBAAe,GAAG,CAAC,CAAC;QAMpB,qBAAgB,GAAoB,eAAe,CAAC,SAAS,CAAC;QAKpE,IAAI,CAAC,uBAAuB,GAAG,GAAG,EAAE;YAClC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAC7C,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,UAAU,CACpC,IAAI,CAAC,eAAe,EACpB,IAAI,CAAC,QAAQ,EACb,GAAG,EAAE;gBACH,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACxB,CAAC,EACD,IAAI,CAAC,gBAAgB,CACtB,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC;IAES,MAAM;QACd,OAAO,IAAI,CAAA;wCACyB,IAAI,CAAC,eAAe,WAAW,IAAI,CAAC,kBAAkB,EAAE;;;kCAG9D,QAAQ,CAAC;YACjC,MAAM,EAAE,IAAI,CAAC,YAAY;SAC1B,CAAC;;8BAEoB,IAAI,CAAC,aAAa,EAAE;;KAE7C,CAAC;IACJ,CAAC;IAED,iBAAiB;;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,MAAM,IAAI,GAAG,MAAa,CAAC;QAC3B,IAAI,MAAA,IAAI,CAAC,MAAM,0CAAE,eAAe,EAAE,CAAC;YACjC,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,MAAM,CAAC,eAAuC,CAAC;YAChF,IAAI,CAAC,oBAAoB,CAAC,sBAAsB,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;YAC/E,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC/B,CAAC;QAED,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAE7B,IAAI,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC9B,IAAI,CAAC,oBAAoB,CAAC,yBAAyB,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;QACpF,CAAC;QAED,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAGD,IAAI,iBAAiB;QACnB,OAAO,IAAI,CAAC,sBAAsB,CAAC;IACrC,CAAC;IAED,IAAI,iBAAiB,CAAC,iBAA0B;QAC9C,IAAI,iBAAiB,KAAK,IAAI,CAAC,sBAAsB,EAAE,CAAC;YACtD,IAAI,CAAC,sBAAsB,GAAG,iBAAiB,CAAC;YAChD,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC;IACH,CAAC;IAES,gBAAgB;QACxB,OAAO,IAAI,CAAC;IACd,CAAC;IAED;;;;;OAKG;IACK,qBAAqB;;QAC3B,MAAM,KAAK,GAAG,MAAA,IAAI,CAAC,oBAAoB,0CAAE,KAAK,CAAC;QAC/C,IAAI,CAAC,OAAO,GAAG,KAAK,KAAK,eAAe,CAAC,eAAe,CAAC;QACzD,IAAI,CAAC,YAAY,GAAG,KAAK,KAAK,eAAe,CAAC,YAAY,CAAC;QAC3D,IAAI,CAAC,aAAa,CAAC,KAAK,KAAK,eAAe,CAAC,OAAO,CAAC,CAAC;QACtD,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,8CAA8C;YAC9C,OAAO,KAAK,CAAC;QACf,CAAC;QAED,IAAI,KAAK,KAAK,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACpC,IAAI,CAAC,gBAAgB,GAAG,KAAM,CAAC;YAC/B,oCAAoC;YACpC,OAAO,IAAI,CAAC;QACd,CAAC;QAED,yBAAyB;QACzB,OAAO,KAAK,CAAC;IACf,CAAC;IAEO,aAAa,CAAC,OAAgB;QACpC,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,eAAe,GAAG,eAAe,CAAC,IAAI,CAAC;QAE5C,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,UAAU,CACjC,IAAI,CAAC,YAAY,EACjB,OAAO,EACP,GAAG,EAAE;YACH,IAAI,CAAC,eAAe,GAAG,eAAe,CAAC,KAAK,CAAC;QAC/C,CAAC,EACD,IAAI,CAAC,UAAU,CAChB,CAAC;QAEF,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,UAAU,CAClC,IAAI,CAAC,aAAa,EAClB,OAAO,EACP,GAAG,EAAE;YACH,IAAI,CAAC,eAAe,GAAG,eAAe,CAAC,MAAM,CAAC;QAChD,CAAC,EACD,IAAI,CAAC,WAAW,CACjB,CAAC;QAEF,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,UAAU,CACjC,IAAI,CAAC,YAAY,EACjB,OAAO,EACP,GAAG,EAAE;YACH,IAAI,CAAC,eAAe,GAAG,eAAe,CAAC,KAAK,CAAC;QAC/C,CAAC,EACD,IAAI,CAAC,UAAU,CAChB,CAAC;IACJ,CAAC;IAEO,aAAa;QACnB,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,OAAO,IAAI,CAAC,gBAAgB,CAAC;QAC/B,CAAC;QAED,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,OAAO,IAAI,CAAC,WAAW,CAAC;QAC1B,CAAC;QAED,OAAO,IAAI,CAAC,UAAU,CAAC;IACzB,CAAC;IAEO,WAAW;QACjB,IAAI,IAAI,CAAC,sBAAsB,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACpD,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,CAAC;gBAC/C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;gBAC9C,KAAK,CAAC,EAAE,GAAG,gBAAgB,CAAC;gBAC5B,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;gBAC3C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;YACnC,CAAC;QACH,CAAC;aAAM,CAAC;YACN,MAAM,KAAK,GAAG,QAAQ,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC;YACxD,IAAI,KAAK,EAAE,CAAC;gBACV,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;YACnC,CAAC;QACH,CAAC;IACH,CAAC;IAEO,eAAe;QACrB,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4JN,CAAC;IACJ,CAAC;IAEO,kBAAkB;QACxB,QAAQ,IAAI,CAAC,eAAe,EAAE,CAAC;YAC7B,KAAK,eAAe,CAAC,IAAI;gBACvB,OAAO,eAAe,CAAC;YACzB,KAAK,eAAe,CAAC,KAAK,CAAC;YAC3B,KAAK,eAAe,CAAC,MAAM,CAAC;YAC5B,KAAK,eAAe,CAAC,KAAK;gBACxB,OAAO,gBAAgB,CAAC;YAC1B;gBACE,OAAO,EAAE,CAAC;QACd,CAAC;IACH,CAAC;IAEO,UAAU,CAAC,SAAiB,EAAE,OAAgB,EAAE,OAAmB,EAAE,KAAa;QACxF,IAAI,SAAS,KAAK,CAAC,EAAE,CAAC;YACpB,MAAM,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;QACjC,CAAC;QAED,OAAO,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACzD,CAAC;IAED,MAAM,KAAK,QAAQ;QACjB,OAAO,mBAAmB,CAAC,MAAM,EAAE,CAAC;IACtC,CAAC;CACF;AAzZC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDACV;AAMjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDACR;AAMnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDACT;AAOlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6DACH;AAMxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDACL;AAMtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDACK;AAMhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6DACkC;AAGrD;IADP,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDACnB;AAGhB;IADP,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yDACd;AAGrB;IADP,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qDAClB;AAGjB;IADP,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDACnB;AAGhB;IADP,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DACqC;AAwEhE;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4DAG3B;AA6RH,IAAI,cAAc,CAAC,GAAG,CAAC,6BAA6B,CAAC,KAAK,SAAS,EAAE,CAAC;IACpE,cAAc,CAAC,MAAM,CAAC,6BAA6B,EAAE,mBAAmB,CAAC,CAAC;AAC5E,CAAC;AAED;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,mBAAmB,CAAC,QAAQ,CAAC","sourcesContent":["/*\n * Copyright 2000-2020 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 } from 'lit';\nimport { property } 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\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 /**\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 firstDelay = 450;\n\n /**\n * The delay before the loading indicator goes into \"second\" state, in ms.\n */\n @property({ type: Number })\n secondDelay = 1500;\n\n /**\n * The delay before the loading indicator goes into \"third\" state, in ms.\n */\n @property({ type: Number })\n 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 expandedDuration = 2000;\n\n /**\n * The message shown when the connection goes to connected state.\n */\n @property({ type: String })\n onlineText = 'Online';\n\n /**\n * The message shown when the connection goes to lost state.\n */\n @property({ type: String })\n offlineText = 'Connection lost';\n\n /**\n * The message shown when the connection goes to reconnecting state.\n */\n @property({ type: String })\n reconnectingText = 'Connection lost, trying to reconnect...';\n\n @property({ type: Boolean, reflect: true })\n private offline = false;\n\n @property({ type: Boolean, reflect: true })\n private reconnecting = false;\n\n @property({ type: Boolean, reflect: true })\n private expanded = false;\n\n @property({ type: Boolean, reflect: true })\n private loading = false;\n\n @property({ type: String })\n private loadingBarState: LoadingBarState = LoadingBarState.IDLE;\n\n private applyDefaultThemeState = true;\n\n private firstTimeout = 0;\n\n private secondTimeout = 0;\n\n private thirdTimeout = 0;\n\n private expandedTimeout = 0;\n\n private connectionStateStore?: ConnectionStateStore;\n\n private readonly connectionStateListener: () => void;\n\n private 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 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 connectedCallback() {\n super.connectedCallback();\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 disconnectedCallback() {\n super.disconnectedCallback();\n\n if (this.connectionStateStore) {\n this.connectionStateStore.removeStateChangeListener(this.connectionStateListener);\n }\n\n this.updateTheme();\n }\n\n @property({ type: Boolean })\n get applyDefaultTheme() {\n return this.applyDefaultThemeState;\n }\n\n set applyDefaultTheme(applyDefaultTheme: boolean) {\n if (applyDefaultTheme !== this.applyDefaultThemeState) {\n this.applyDefaultThemeState = applyDefaultTheme;\n this.updateTheme();\n }\n }\n\n protected createRenderRoot() {\n return this;\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 private updateConnectionState(): boolean {\n const state = this.connectionStateStore?.state;\n this.offline = state === ConnectionState.CONNECTION_LOST;\n this.reconnecting = state === ConnectionState.RECONNECTING;\n this.updateLoading(state === ConnectionState.LOADING);\n if (this.loading) {\n // Entering loading state, do not show message\n return false;\n }\n\n if (state !== this.lastMessageState) {\n this.lastMessageState = state!;\n // Message changes, show new message\n return true;\n }\n\n // Message did not change\n return false;\n }\n\n private 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 private 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 private 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 private 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 z-index: 251;\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 private 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 private 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 static get instance(): ConnectionIndicator {\n return ConnectionIndicator.create();\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"]}
|
package/ConnectionState.d.ts
CHANGED
|
@@ -24,10 +24,10 @@ export declare enum ConnectionState {
|
|
|
24
24
|
*/
|
|
25
25
|
CONNECTION_LOST = "connection-lost"
|
|
26
26
|
}
|
|
27
|
-
export
|
|
27
|
+
export type ConnectionStateChangeListener = (previous: ConnectionState, current: ConnectionState) => void;
|
|
28
28
|
export declare class ConnectionStateStore {
|
|
29
29
|
private connectionState;
|
|
30
|
-
private stateChangeListeners;
|
|
30
|
+
private readonly stateChangeListeners;
|
|
31
31
|
private loadingCount;
|
|
32
32
|
constructor(initialState: ConnectionState);
|
|
33
33
|
addStateChangeListener(listener: ConnectionStateChangeListener): void;
|
|
@@ -42,4 +42,5 @@ export declare class ConnectionStateStore {
|
|
|
42
42
|
get offline(): boolean;
|
|
43
43
|
private serviceWorkerMessageListener;
|
|
44
44
|
}
|
|
45
|
+
export declare const isLocalhost: (hostname: string) => boolean;
|
|
45
46
|
//# sourceMappingURL=ConnectionState.d.ts.map
|
package/ConnectionState.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConnectionState.d.ts","sourceRoot":"","sources":["src/ConnectionState.ts"],"names":[],"mappings":"AAAA,oBAAY,eAAe;IACzB;;;OAGG;IACH,SAAS,cAAc;IAEvB;;;OAGG;IACH,OAAO,YAAY;IAEnB;;;;;;OAMG;IACH,YAAY,iBAAiB;IAE7B;;;;OAIG;IACH,eAAe,oBAAoB;CACpC;AAED,
|
|
1
|
+
{"version":3,"file":"ConnectionState.d.ts","sourceRoot":"","sources":["src/ConnectionState.ts"],"names":[],"mappings":"AAAA,oBAAY,eAAe;IACzB;;;OAGG;IACH,SAAS,cAAc;IAEvB;;;OAGG;IACH,OAAO,YAAY;IAEnB;;;;;;OAMG;IACH,YAAY,iBAAiB;IAE7B;;;;OAIG;IACH,eAAe,oBAAoB;CACpC;AAED,MAAM,MAAM,6BAA6B,GAAG,CAAC,QAAQ,EAAE,eAAe,EAAE,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;AAE1G,qBAAa,oBAAoB;IAC/B,OAAO,CAAC,eAAe,CAAkB;IAEzC,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAA4C;IAEjF,OAAO,CAAC,YAAY,CAAK;gBAEb,YAAY,EAAE,eAAe;IAsBzC,sBAAsB,CAAC,QAAQ,EAAE,6BAA6B,GAAG,IAAI;IAIrE,yBAAyB,CAAC,QAAQ,EAAE,6BAA6B,GAAG,IAAI;IAIxE,cAAc,IAAI,IAAI;IAKtB,eAAe,IAAI,IAAI;IAIvB,aAAa,IAAI,IAAI;IAIrB,OAAO,CAAC,oBAAoB;IAS5B,IAAI,KAAK,IAAI,eAAe,CAE3B;IAED,IAAI,KAAK,CAAC,QAAQ,EAAE,eAAe,EASlC;IAED,IAAI,MAAM,IAAI,OAAO,CAEpB;IAED,IAAI,OAAO,IAAI,OAAO,CAErB;IAED,OAAO,CAAC,4BAA4B;CAYrC;AAED,eAAO,MAAM,WAAW,aAAc,MAAM,YAY3C,CAAC"}
|
package/ConnectionState.js
CHANGED
|
@@ -32,14 +32,17 @@ export class ConnectionStateStore {
|
|
|
32
32
|
this.loadingCount = 0;
|
|
33
33
|
this.connectionState = initialState;
|
|
34
34
|
this.serviceWorkerMessageListener = this.serviceWorkerMessageListener.bind(this);
|
|
35
|
+
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
|
35
36
|
if (navigator.serviceWorker) {
|
|
36
37
|
// Query service worker if the most recent fetch was served from cache
|
|
37
38
|
// Add message listener for handling response
|
|
39
|
+
// eslint-disable-next-line @typescript-eslint/unbound-method
|
|
38
40
|
navigator.serviceWorker.addEventListener('message', this.serviceWorkerMessageListener);
|
|
39
41
|
// Send JSON-RPC request to Vaadin service worker
|
|
40
|
-
|
|
42
|
+
// eslint-disable-next-line no-void
|
|
43
|
+
void navigator.serviceWorker.ready.then((registration) => {
|
|
41
44
|
var _a;
|
|
42
|
-
(_a = registration
|
|
45
|
+
(_a = registration.active) === null || _a === void 0 ? void 0 : _a.postMessage({
|
|
43
46
|
method: 'Vaadin.ServiceWorker.isConnectionLost',
|
|
44
47
|
id: 'Vaadin.ServiceWorker.isConnectionLost',
|
|
45
48
|
});
|
|
@@ -96,13 +99,34 @@ export class ConnectionStateStore {
|
|
|
96
99
|
this.state = ConnectionState.CONNECTION_LOST;
|
|
97
100
|
}
|
|
98
101
|
// Cleanup: remove event listener upon receiving response
|
|
102
|
+
// eslint-disable-next-line @typescript-eslint/unbound-method
|
|
99
103
|
navigator.serviceWorker.removeEventListener('message', this.serviceWorkerMessageListener);
|
|
100
104
|
}
|
|
101
105
|
}
|
|
102
106
|
}
|
|
107
|
+
export const isLocalhost = (hostname) => {
|
|
108
|
+
if (hostname === 'localhost') {
|
|
109
|
+
return true;
|
|
110
|
+
}
|
|
111
|
+
if (hostname === '[::1]') {
|
|
112
|
+
return true;
|
|
113
|
+
}
|
|
114
|
+
if (/^127\.\d+\.\d+\.\d+$/u.exec(hostname)) {
|
|
115
|
+
return true;
|
|
116
|
+
}
|
|
117
|
+
return false;
|
|
118
|
+
};
|
|
103
119
|
const $wnd = window;
|
|
104
120
|
if (!((_a = $wnd.Vaadin) === null || _a === void 0 ? void 0 : _a.connectionState)) {
|
|
105
|
-
|
|
106
|
-
|
|
121
|
+
let online;
|
|
122
|
+
if (isLocalhost(window.location.hostname)) {
|
|
123
|
+
// We do not know if we are online or not as we cannot trust navigator.onLine which checks availability of a network connection. Better to assume online so localhost apps can work
|
|
124
|
+
online = true;
|
|
125
|
+
}
|
|
126
|
+
else {
|
|
127
|
+
online = navigator.onLine;
|
|
128
|
+
}
|
|
129
|
+
$wnd.Vaadin || ($wnd.Vaadin = {});
|
|
130
|
+
$wnd.Vaadin.connectionState = new ConnectionStateStore(online ? ConnectionState.CONNECTED : ConnectionState.CONNECTION_LOST);
|
|
107
131
|
}
|
|
108
132
|
//# sourceMappingURL=ConnectionState.js.map
|
package/ConnectionState.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConnectionState.js","sourceRoot":"","sources":["src/ConnectionState.ts"],"names":[],"mappings":";AAAA,MAAM,CAAN,IAAY,eA4BX;AA5BD,WAAY,eAAe;IACzB;;;OAGG;IACH,0CAAuB,CAAA;IAEvB;;;OAGG;IACH,sCAAmB,CAAA;IAEnB;;;;;;OAMG;IACH,gDAA6B,CAAA;IAE7B;;;;OAIG;IACH,sDAAmC,CAAA;AACrC,CAAC,EA5BW,eAAe,KAAf,eAAe,QA4B1B;AAID,MAAM,OAAO,oBAAoB;IAO/B,YAAY,YAA6B;
|
|
1
|
+
{"version":3,"file":"ConnectionState.js","sourceRoot":"","sources":["src/ConnectionState.ts"],"names":[],"mappings":";AAAA,MAAM,CAAN,IAAY,eA4BX;AA5BD,WAAY,eAAe;IACzB;;;OAGG;IACH,0CAAuB,CAAA;IAEvB;;;OAGG;IACH,sCAAmB,CAAA;IAEnB;;;;;;OAMG;IACH,gDAA6B,CAAA;IAE7B;;;;OAIG;IACH,sDAAmC,CAAA;AACrC,CAAC,EA5BW,eAAe,KAAf,eAAe,QA4B1B;AAID,MAAM,OAAO,oBAAoB;IAO/B,YAAY,YAA6B;QAJxB,yBAAoB,GAAG,IAAI,GAAG,EAAiC,CAAC;QAEzE,iBAAY,GAAG,CAAC,CAAC;QAGvB,IAAI,CAAC,eAAe,GAAG,YAAY,CAAC;QAEpC,IAAI,CAAC,4BAA4B,GAAG,IAAI,CAAC,4BAA4B,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEjF,uEAAuE;QACvE,IAAI,SAAS,CAAC,aAAa,EAAE,CAAC;YAC5B,sEAAsE;YACtE,6CAA6C;YAC7C,6DAA6D;YAC7D,SAAS,CAAC,aAAa,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,4BAA4B,CAAC,CAAC;YACvF,iDAAiD;YACjD,mCAAmC;YACnC,KAAK,SAAS,CAAC,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,YAAY,EAAE,EAAE;;gBACvD,MAAA,YAAY,CAAC,MAAM,0CAAE,WAAW,CAAC;oBAC/B,MAAM,EAAE,uCAAuC;oBAC/C,EAAE,EAAE,uCAAuC;iBAC5C,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,sBAAsB,CAAC,QAAuC;QAC5D,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IAC1C,CAAC;IAED,yBAAyB,CAAC,QAAuC;QAC/D,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC7C,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,KAAK,GAAG,eAAe,CAAC,OAAO,CAAC;QACrC,IAAI,CAAC,YAAY,IAAI,CAAC,CAAC;IACzB,CAAC;IAED,eAAe;QACb,IAAI,CAAC,oBAAoB,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;IACvD,CAAC;IAED,aAAa;QACX,IAAI,CAAC,oBAAoB,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;IAC7D,CAAC;IAEO,oBAAoB,CAAC,UAA2B;QACtD,IAAI,IAAI,CAAC,YAAY,GAAG,CAAC,EAAE,CAAC;YAC1B,IAAI,CAAC,YAAY,IAAI,CAAC,CAAC;YACvB,IAAI,IAAI,CAAC,YAAY,KAAK,CAAC,EAAE,CAAC;gBAC5B,IAAI,CAAC,KAAK,GAAG,UAAU,CAAC;YAC1B,CAAC;QACH,CAAC;IACH,CAAC;IAED,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,eAAe,CAAC;IAC9B,CAAC;IAED,IAAI,KAAK,CAAC,QAAyB;QACjC,IAAI,QAAQ,KAAK,IAAI,CAAC,eAAe,EAAE,CAAC;YACtC,MAAM,SAAS,GAAG,IAAI,CAAC,eAAe,CAAC;YACvC,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC;YAChC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;YACtB,KAAK,MAAM,QAAQ,IAAI,IAAI,CAAC,oBAAoB,EAAE,CAAC;gBACjD,QAAQ,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;YAC5C,CAAC;QACH,CAAC;IACH,CAAC;IAED,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,eAAe,KAAK,eAAe,CAAC,SAAS,IAAI,IAAI,CAAC,eAAe,KAAK,eAAe,CAAC,OAAO,CAAC;IAChH,CAAC;IAED,IAAI,OAAO;QACT,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC;IACtB,CAAC;IAEO,4BAA4B,CAAC,KAAmB;QACtD,+CAA+C;QAC/C,IAAI,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,IAAI,KAAK,CAAC,IAAI,CAAC,EAAE,KAAK,uCAAuC,EAAE,CAAC;YAChG,IAAI,KAAK,CAAC,IAAI,CAAC,MAAM,KAAK,IAAI,EAAE,CAAC;gBAC/B,IAAI,CAAC,KAAK,GAAG,eAAe,CAAC,eAAe,CAAC;YAC/C,CAAC;YAED,yDAAyD;YACzD,6DAA6D;YAC7D,SAAS,CAAC,aAAa,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,4BAA4B,CAAC,CAAC;QAC5F,CAAC;IACH,CAAC;CACF;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,QAAgB,EAAE,EAAE;IAC9C,IAAI,QAAQ,KAAK,WAAW,EAAE,CAAC;QAC7B,OAAO,IAAI,CAAC;IACd,CAAC;IACD,IAAI,QAAQ,KAAK,OAAO,EAAE,CAAC;QACzB,OAAO,IAAI,CAAC;IACd,CAAC;IACD,IAAI,uBAAuB,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;QAC3C,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,MAAM,IAAI,GAAG,MAAa,CAAC;AAC3B,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,eAAe,CAAA,EAAE,CAAC;IAClC,IAAI,MAAM,CAAC;IACX,IAAI,WAAW,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;QAC1C,mLAAmL;QACnL,MAAM,GAAG,IAAI,CAAC;IAChB,CAAC;SAAM,CAAC;QACN,MAAM,GAAG,SAAS,CAAC,MAAM,CAAC;IAC5B,CAAC;IAED,IAAI,CAAC,MAAM,KAAX,IAAI,CAAC,MAAM,GAAK,EAAE,EAAC;IACnB,IAAI,CAAC,MAAM,CAAC,eAAe,GAAG,IAAI,oBAAoB,CACpD,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,eAAe,CACrE,CAAC;AACJ,CAAC","sourcesContent":["export enum ConnectionState {\n /**\n * Application is connected to server: last transaction over the wire (XHR /\n * heartbeat / endpoint call) was successful.\n */\n CONNECTED = 'connected',\n\n /**\n * Application is connected and Flow is loading application state from the\n * server, or Fusion is waiting for an endpoint call to return.\n */\n LOADING = 'loading',\n\n /**\n * Application has been temporarily disconnected from the server because the\n * last transaction over the wire (XHR / heartbeat / endpoint call) resulted\n * in a network error, or the browser has received the 'online' event and needs\n * to verify reconnection with the server. Flow is attempting to reconnect\n * a configurable number of times before giving up.\n */\n RECONNECTING = 'reconnecting',\n\n /**\n * Application has been permanently disconnected due to browser receiving the\n * 'offline' event, or the server not being reached after a number of reconnect\n * attempts.\n */\n CONNECTION_LOST = 'connection-lost',\n}\n\nexport type ConnectionStateChangeListener = (previous: ConnectionState, current: ConnectionState) => void;\n\nexport class ConnectionStateStore {\n private connectionState: ConnectionState;\n\n private readonly stateChangeListeners = new Set<ConnectionStateChangeListener>();\n\n private loadingCount = 0;\n\n constructor(initialState: ConnectionState) {\n this.connectionState = initialState;\n\n this.serviceWorkerMessageListener = this.serviceWorkerMessageListener.bind(this);\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n if (navigator.serviceWorker) {\n // Query service worker if the most recent fetch was served from cache\n // Add message listener for handling response\n // eslint-disable-next-line @typescript-eslint/unbound-method\n navigator.serviceWorker.addEventListener('message', this.serviceWorkerMessageListener);\n // Send JSON-RPC request to Vaadin service worker\n // eslint-disable-next-line no-void\n void navigator.serviceWorker.ready.then((registration) => {\n registration.active?.postMessage({\n method: 'Vaadin.ServiceWorker.isConnectionLost',\n id: 'Vaadin.ServiceWorker.isConnectionLost',\n });\n });\n }\n }\n\n addStateChangeListener(listener: ConnectionStateChangeListener): void {\n this.stateChangeListeners.add(listener);\n }\n\n removeStateChangeListener(listener: ConnectionStateChangeListener): void {\n this.stateChangeListeners.delete(listener);\n }\n\n loadingStarted(): void {\n this.state = ConnectionState.LOADING;\n this.loadingCount += 1;\n }\n\n loadingFinished(): void {\n this.decreaseLoadingCount(ConnectionState.CONNECTED);\n }\n\n loadingFailed(): void {\n this.decreaseLoadingCount(ConnectionState.CONNECTION_LOST);\n }\n\n private decreaseLoadingCount(finalState: ConnectionState) {\n if (this.loadingCount > 0) {\n this.loadingCount -= 1;\n if (this.loadingCount === 0) {\n this.state = finalState;\n }\n }\n }\n\n get state(): ConnectionState {\n return this.connectionState;\n }\n\n set state(newState: ConnectionState) {\n if (newState !== this.connectionState) {\n const prevState = this.connectionState;\n this.connectionState = newState;\n this.loadingCount = 0;\n for (const listener of this.stateChangeListeners) {\n listener(prevState, this.connectionState);\n }\n }\n }\n\n get online(): boolean {\n return this.connectionState === ConnectionState.CONNECTED || this.connectionState === ConnectionState.LOADING;\n }\n\n get offline(): boolean {\n return !this.online;\n }\n\n private serviceWorkerMessageListener(event: MessageEvent) {\n // Handle JSON-RPC response from service worker\n if (typeof event.data === 'object' && event.data.id === 'Vaadin.ServiceWorker.isConnectionLost') {\n if (event.data.result === true) {\n this.state = ConnectionState.CONNECTION_LOST;\n }\n\n // Cleanup: remove event listener upon receiving response\n // eslint-disable-next-line @typescript-eslint/unbound-method\n navigator.serviceWorker.removeEventListener('message', this.serviceWorkerMessageListener);\n }\n }\n}\n\nexport const isLocalhost = (hostname: string) => {\n if (hostname === 'localhost') {\n return true;\n }\n if (hostname === '[::1]') {\n return true;\n }\n if (/^127\\.\\d+\\.\\d+\\.\\d+$/u.exec(hostname)) {\n return true;\n }\n\n return false;\n};\n\nconst $wnd = window as any;\nif (!$wnd.Vaadin?.connectionState) {\n let online;\n if (isLocalhost(window.location.hostname)) {\n // We do not know if we are online or not as we cannot trust navigator.onLine which checks availability of a network connection. Better to assume online so localhost apps can work\n online = true;\n } else {\n online = navigator.onLine;\n }\n\n $wnd.Vaadin ||= {};\n $wnd.Vaadin.connectionState = new ConnectionStateStore(\n online ? ConnectionState.CONNECTED : ConnectionState.CONNECTION_LOST,\n );\n}\n"]}
|
package/index.js
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
|
+
var _a;
|
|
1
2
|
export * from './ConnectionState.js';
|
|
2
3
|
export * from './ConnectionIndicator.js';
|
|
3
4
|
const $wnd = window;
|
|
4
|
-
$wnd.Vaadin
|
|
5
|
-
|
|
5
|
+
$wnd.Vaadin || ($wnd.Vaadin = {});
|
|
6
|
+
(_a = $wnd.Vaadin).registrations || (_a.registrations = []);
|
|
7
|
+
// eslint-disable-next-line @typescript-eslint/no-unsafe-call
|
|
6
8
|
$wnd.Vaadin.registrations.push({
|
|
7
9
|
is: '@vaadin/common-frontend',
|
|
8
|
-
version: /* updated-by-script */ '0.0.
|
|
10
|
+
version: /* updated-by-script */ '0.0.18',
|
|
9
11
|
});
|
|
10
12
|
//# sourceMappingURL=index.js.map
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AAEzC,MAAM,IAAI,GAAG,MAAa,CAAC;AAC3B,IAAI,CAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["src/index.ts"],"names":[],"mappings":";AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AAEzC,MAAM,IAAI,GAAG,MAAa,CAAC;AAC3B,IAAI,CAAC,MAAM,KAAX,IAAI,CAAC,MAAM,GAAK,EAAE,EAAC;AACnB,MAAA,IAAI,CAAC,MAAM,EAAC,aAAa,QAAb,aAAa,GAAK,EAAE,EAAC;AACjC,6DAA6D;AAC7D,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC;IAC7B,EAAE,EAAE,yBAAyB;IAC7B,OAAO,EAAE,uBAAuB,CAAC,QAAQ;CAC1C,CAAC,CAAC","sourcesContent":["export * from './ConnectionState.js';\nexport * from './ConnectionIndicator.js';\n\nconst $wnd = window as any;\n$wnd.Vaadin ||= {};\n$wnd.Vaadin.registrations ||= [];\n// eslint-disable-next-line @typescript-eslint/no-unsafe-call\n$wnd.Vaadin.registrations.push({\n is: '@vaadin/common-frontend',\n version: /* updated-by-script */ '0.0.18',\n});\n"]}
|
package/package.json
CHANGED
|
@@ -1,14 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/common-frontend",
|
|
3
|
-
"version": "0.0.
|
|
4
|
-
"description": "Vaadin frontend utils used by Flow and
|
|
3
|
+
"version": "0.0.19",
|
|
4
|
+
"description": "Vaadin frontend utils used by Flow and Hilla",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
7
7
|
"type": "module",
|
|
8
|
-
"repository":
|
|
8
|
+
"repository": {
|
|
9
|
+
"type": "git",
|
|
10
|
+
"url": "https://github.com/vaadin/flow-hilla-common.git",
|
|
11
|
+
"directory": "frontend/packages/common-frontend"
|
|
12
|
+
},
|
|
9
13
|
"keywords": [
|
|
10
14
|
"Vaadin",
|
|
11
|
-
"
|
|
15
|
+
"Hilla"
|
|
12
16
|
],
|
|
13
17
|
"scripts": {
|
|
14
18
|
"build": "tsc --isolatedModules",
|
|
@@ -35,9 +39,9 @@
|
|
|
35
39
|
"author": "Vaadin Ltd",
|
|
36
40
|
"license": "Apache-2.0",
|
|
37
41
|
"bugs": {
|
|
38
|
-
"url": "https://github.com/vaadin/
|
|
42
|
+
"url": "https://github.com/vaadin/flow-hilla-common/issues"
|
|
39
43
|
},
|
|
40
|
-
"homepage": "https://vaadin.com
|
|
44
|
+
"homepage": "https://vaadin.com",
|
|
41
45
|
"files": [
|
|
42
46
|
"*.{d.ts.map,d.ts,js.map,js}"
|
|
43
47
|
],
|
|
@@ -48,16 +52,18 @@
|
|
|
48
52
|
"tslib": "^2.3.1"
|
|
49
53
|
},
|
|
50
54
|
"peerDependencies": {
|
|
51
|
-
"lit": "^
|
|
55
|
+
"lit": "^3.0.0"
|
|
52
56
|
},
|
|
53
57
|
"devDependencies": {
|
|
54
|
-
"@
|
|
58
|
+
"@esm-bundle/chai": "^4.3.4-fix.0",
|
|
59
|
+
"@open-wc/testing": "^4.0.0",
|
|
55
60
|
"@types/chai": "^4.2.21",
|
|
56
|
-
"@types/mocha": "^
|
|
57
|
-
"@types/sinon": "^
|
|
61
|
+
"@types/mocha": "^10.0.3",
|
|
62
|
+
"@types/sinon": "^17.0.2",
|
|
58
63
|
"@types/sinon-chai": "^3.2.5",
|
|
59
|
-
"@web/test-runner": "^0.
|
|
60
|
-
"
|
|
64
|
+
"@web/test-runner": "^0.18.0",
|
|
65
|
+
"mocha": "^10.2.0",
|
|
66
|
+
"sinon": "^17.0.1"
|
|
61
67
|
},
|
|
62
|
-
"gitHead": "
|
|
68
|
+
"gitHead": "8b61950646b8955ea20e7bbbd0c6c59f4aedcfd7"
|
|
63
69
|
}
|