@openremote/or-app 1.8.0-snapshot.20250725074716 → 1.8.0-snapshot.20250725120001

package/lib/index.js

@@ -1,76 +1,547 @@
-var __decorate=this&&this.__decorate||function(e,i,t,o){var r,n=arguments.length,a=n<3?i:null===o?o=Object.getOwnPropertyDescriptor(i,t):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,i,t,o);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(a=(n<3?r(a):n>3?r(i,t,a):r(i,t))||a);return n>3&&a&&Object.defineProperty(i,t,a),a},__awaiter=this&&this.__awaiter||function(e,i,t,o){return new(t||(t=Promise))(function(r,n){function a(e){try{l(o.next(e))}catch(e){n(e)}}function s(e){try{l(o.throw(e))}catch(e){n(e)}}function l(e){var i;e.done?r(e.value):((i=e.value)instanceof t?i:new t(function(e){e(i)})).then(a,s)}l((o=o.apply(e,i||[])).next())})};import{css as e,html as i,LitElement as t,unsafeCSS as o}from"lit";import{customElement as r,property as n,query as a,state as s}from"lit/decorators.js";import{router as l}from"./types";import"@openremote/or-translate";import"@openremote/or-mwc-components/or-mwc-menu";import"@openremote/or-mwc-components/or-mwc-snackbar";import"./or-header";import"@openremote/or-icon";import{updateMetadata as p}from"pwa-helpers/metadata";import c from"i18next";import h,{DefaultColor2 as f,DefaultColor3 as d,DefaultColor4 as g,normaliseConfig as m,ORError as _,OREvent as u,Util as v}from"@openremote/core";import{DEFAULT_LANGUAGES as y}from"./or-header";import{OrMwcDialog as b,showDialog as C,showErrorDialog as w}from"@openremote/or-mwc-components/or-mwc-dialog";import{OrMwcSnackbar as E}from"@openremote/or-mwc-components/or-mwc-snackbar";import{setOffline as A,setVisibility as O,updatePage as k,updateRealm as F}from"./app";import{InputType as $}from"@openremote/or-mwc-components/or-mwc-input";import{pageOfflineProvider as L}from"./page-offline";export const DefaultLogo=require("../images/logo.svg");export const DefaultMobileLogo=require("../images/logo-mobile.svg");export const DefaultFavIcon=require("../images/favicon.ico");export*from"./app";export*from"./or-header";export*from"./types";export function getDefaultManagerConfig(){return m(DEFAULT_MANAGER_CONFIG)}let DEFAULT_MANAGER_CONFIG={managerUrl:MANAGER_URL||"",keycloakUrl:KEYCLOAK_URL||"",auth:"KEYCLOAK",autoLogin:!0,realm:void 0,consoleAutoEnable:!0,loadTranslations:["or"]},OrApp=class extends t{static get styles(){return e`
-            :host {
-                --or-app-color2: ${o(f)};
-                --or-app-color3: ${o(d)};
-                --or-app-color4: ${o(g)};
-                --or-console-primary-color: #4D9D2A;
-                color: ${o(d)};
-                fill: ${o(d)};
-                font-size: 14px;
-
-                height: 100vh; /* Fallback */
-                height: 100dvh; /* Stretch to dynamic viewport height */
-                display: flex;
-                flex: 1;
-                flex-direction: column;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { css, html, LitElement, unsafeCSS } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { router } from "./types";
+import "@openremote/or-translate";
+import "@openremote/or-mwc-components/or-mwc-menu";
+import "@openremote/or-mwc-components/or-mwc-snackbar";
+import "./or-header";
+import "@openremote/or-icon";
+import { updateMetadata } from "pwa-helpers/metadata";
+import i18next from "i18next";
+import manager, { DefaultColor2, DefaultColor3, DefaultColor4, normaliseConfig, ORError, OREvent, Util } from "@openremote/core";
+import { DEFAULT_LANGUAGES } from "./or-header";
+import { OrMwcDialog, showDialog, showErrorDialog } from "@openremote/or-mwc-components/or-mwc-dialog";
+import { OrMwcSnackbar } from "@openremote/or-mwc-components/or-mwc-snackbar";
+import { setOffline, setVisibility, updatePage, updateRealm } from "./app";
+import { InputType } from "@openremote/or-mwc-components/or-mwc-input";
+import { pageOfflineProvider } from "./page-offline";
+export const DefaultLogo = require("../images/logo.svg");
+export const DefaultMobileLogo = require("../images/logo-mobile.svg");
+export const DefaultFavIcon = require("../images/favicon.ico");
+export * from "./app";
+export * from "./or-header";
+export * from "./types";
+export { DEFAULT_LANGUAGES };
+export function getDefaultManagerConfig() {
+    return normaliseConfig(DEFAULT_MANAGER_CONFIG);
+}
+const DEFAULT_MANAGER_CONFIG = {
+    managerUrl: (MANAGER_URL || ""),
+    keycloakUrl: (KEYCLOAK_URL || ""),
+    auth: "KEYCLOAK" /* Auth.KEYCLOAK */,
+    autoLogin: true,
+    realm: undefined,
+    consoleAutoEnable: true,
+    loadTranslations: ["or"]
+};
+let OrApp = class OrApp extends LitElement {
+    // language=CSS
+    static get styles() {
+        return css `
+            :host {
+                --or-app-color2: ${unsafeCSS(DefaultColor2)};
+                --or-app-color3: ${unsafeCSS(DefaultColor3)};
+                --or-app-color4: ${unsafeCSS(DefaultColor4)};
+                --or-console-primary-color: #4D9D2A;
+                color: ${unsafeCSS(DefaultColor3)};
+                fill: ${unsafeCSS(DefaultColor3)};
+                font-size: 14px;
+
+                height: 100vh; /* Fallback */
+                height: 100dvh; /* Stretch to dynamic viewport height */
+                display: flex;
+                flex: 1;
+                flex-direction: column;
+            }
+                
+            .main-content {
+                display: flex;
+                flex: 1;
+                box-sizing: border-box;
+                background-color: var(--or-app-color2);
+                overflow: auto;
+            }
+            
+            .no-scroll {
+                overflow: hidden;
+            }
+
+            main > * {
+                display: flex;
+                flex: 1;
+                position: relative;
+            }
+    
+            .desktop-hidden {
+                display: none !important;
+            }
+            
+            @media only screen and (max-width: 780px) {
+                .desktop-hidden {
+                    display: inline-block !important;
+                }
+            }
+            
+            /* HEADER STYLES */
+            or-header a > or-icon {
+                margin-right: 10px;
+            }
+        `;
+    }
+    constructor(store) {
+        super();
+        this._initialised = false;
+        this._offline = false;
+        this._showOfflineFallback = false;
+        this._onEvent = (ev) => this._handleEvent(ev);
+        this._onVisibilityChanged = (ev) => this._handleVisibilityChange(ev);
+        this._store = store;
+        // Set this element as the host for dialogs
+        OrMwcDialog.DialogHostElement = this;
+        OrMwcSnackbar.DialogHostElement = this;
+    }
+    getState() {
+        return this._store.getState();
+    }
+    // Using HTML 'visibilitychange' listener to see whether the Manager is visible for the user.
+    // TODO; Add an ConsoleProvider that listens to background/foreground changes, and dispatch the respective OREvent. This will improve responsiveness of logic attached to it.
+    // For example used for triggering reconnecting logic once the UI becomes visible again.
+    _handleVisibilityChange(ev) {
+        var _a;
+        if (document.visibilityState === "visible") {
+            this._store.dispatch((setVisibility(true)));
+            // When the manager appears on Mobile devices, but the connection is OFFLINE,
+            // we reset the timer to the {appConfig.offlineTimeout} seconds. This is because we saw issues with reopening the app,
+            // and seeing a connection interval of 30+ seconds. We now give the user the benefit of the doubt, by resetting the timer.
+            if (((_a = manager.console) === null || _a === void 0 ? void 0 : _a.isMobile) && this._offline) {
+                this._startOfflineFallbackTimer(true);
             }
-                
-            .main-content {
-                display: flex;
-                flex: 1;
-                box-sizing: border-box;
-                background-color: var(--or-app-color2);
-                overflow: auto;
+            // Always try reconnecting (just in case we are disconnected)
+            manager.reconnect();
+        }
+        else {
+            this._store.dispatch((setVisibility(false)));
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._storeUnsubscribe = this._store.subscribe(() => this.stateChanged(this.getState()));
+        document.addEventListener("visibilitychange", this._onVisibilityChanged);
+        this.stateChanged(this.getState());
+    }
+    disconnectedCallback() {
+        this._storeUnsubscribe();
+        document.removeEventListener("visibilityChange", this._onVisibilityChanged);
+        manager.removeListener(this._onEvent);
+        super.disconnectedCallback();
+    }
+    firstUpdated(_changedProperties) {
+        super.firstUpdated(_changedProperties);
+        const managerConfig = this.managerConfig ? Object.assign(Object.assign({}, DEFAULT_MANAGER_CONFIG), this.managerConfig) : DEFAULT_MANAGER_CONFIG;
+        if (!managerConfig.realm) {
+            // Use realm query parameter if no specific realm provided
+            managerConfig.realm = Util.getQueryParameter("realm");
+        }
+        if (!managerConfig.defaultLanguage) {
+            managerConfig.defaultLanguage = Util.getBrowserLanguage();
+        }
+        managerConfig.skipFallbackToBasicAuth = true; // We do this so we can load styling config before displaying basic login
+        managerConfig.basicLoginProvider = (u, p) => this.doBasicLogin(u, p);
+        console.info("Initialising the manager");
+        manager.init(managerConfig).then((success) => __awaiter(this, void 0, void 0, function* () {
+            if (!success && manager.error === ORError.AUTH_FAILED && (!managerConfig.auth || managerConfig.auth === "KEYCLOAK" /* Auth.KEYCLOAK */)) {
+                this.doAppConfigInit();
+                // Fallback to basic auth now styling is loaded
+                managerConfig.auth = "BASIC" /* Auth.BASIC */;
+                success = yield manager.init(managerConfig);
             }
-            
-            .no-scroll {
-                overflow: hidden;
-            }
-
-            main > * {
-                display: flex;
-                flex: 1;
-                position: relative;
+            if (success) {
+                this.doAppConfigInit();
+                if (!this.appConfig) {
+                    showErrorDialog("appError.noConfig", document.body);
+                    console.error("No AppConfig supplied");
+                    return;
+                }
+                if (!this._config) {
+                    showErrorDialog("appError.noConfig", document.body);
+                    console.error("No default AppConfig or realm specific config provided so cannot render");
+                    return;
+                }
+                if (!this._store) {
+                    showErrorDialog("appError.noReduxStore", document.body);
+                    console.error("No Redux store supplied");
+                    return;
+                }
+                if (!this.appConfig.pages || Object.keys(this.appConfig.pages).length === 0) {
+                    showErrorDialog("appError.noPages", document.body);
+                    console.error("No page providers");
+                    return;
+                }
+                // Load available realm info
+                const response = yield manager.rest.api.RealmResource.getAccessible();
+                this._realms = response.data;
+                let realm = undefined;
+                // Set current display realm if super user
+                if (manager.isSuperUser()) {
+                    // Look in session storage
+                    realm = window.sessionStorage.getItem("realm");
+                    if (realm && !this._realms.some(r => r.name === realm)) {
+                        realm = undefined;
+                    }
+                }
+                this._store.dispatch(updateRealm(realm || manager.getRealm() || "master"));
+                this._initialised = true;
+                // Register listener to change global state based on certain events
+                manager.addListener(this._onEvent);
+                // Create route listener to set header active item (this must be done before any routes added)
+                const headerUpdater = (activeMenu) => {
+                    this._activeMenu = activeMenu;
+                };
+                router.hooks({
+                    before(done, match) {
+                        headerUpdater(match ? match.url.split('/')[0] : undefined);
+                        done();
+                    }
+                });
+                // Configure routes
+                this.appConfig.pages.forEach((pageProvider, index) => {
+                    if (pageProvider.routes) {
+                        pageProvider.routes.forEach((route) => {
+                            router.on(route, (match) => {
+                                this._store.dispatch(updatePage({ page: pageProvider.name, params: match.data }));
+                            });
+                        });
+                    }
+                });
+                if (this.appConfig.pages.length > 0) {
+                    router.notFound(() => {
+                        this._store.dispatch(updatePage(this.appConfig.pages[0].name));
+                    });
+                }
+                router.resolve();
             }
-    
-            .desktop-hidden {
-                display: none !important;
+            else {
+                showErrorDialog(manager.isError ? "managerError." + manager.error : "");
             }
-            
-            @media only screen and (max-width: 780px) {
-                .desktop-hidden {
-                    display: inline-block !important;
+        }));
+    }
+    updated(changedProps) {
+        var _a, _b;
+        super.updated(changedProps);
+        if (!this._initialised) {
+            return;
+        }
+        // If either page or 'offline'-status is changed, it should update to the correct page,
+        // by appending the page to the HTML content
+        if (changedProps.has("_page") || changedProps.has("_offline") || changedProps.has("_showOfflineFallback")) {
+            if (this._mainElem) {
+                const pageProvider = this.appConfig.pages.find((page) => page.name === this._page);
+                const showOfflineFallback = (this._showOfflineFallback && !(pageProvider === null || pageProvider === void 0 ? void 0 : pageProvider.allowOffline));
+                const offlinePage = this._mainElem.querySelector('#offline-page');
+                // If page has changed, replace the previous content with the new page.
+                // However, if no page is present yet, append it to the page.
+                if (changedProps.has('_page') && pageProvider) {
+                    const currentPage = this._mainElem.firstElementChild;
+                    if (currentPage) {
+                        const newPage = pageProvider.pageCreator();
+                        if (showOfflineFallback) {
+                            newPage.style.setProperty('display', 'none'); // hide the new page while offline overlay page is shown
+                            newPage.setAttribute('loadedDuringOffline', 'true'); // mark the page as "loaded during offline", since the content is either empty or invalid
+                        }
+                        this._mainElem.replaceChild(newPage, currentPage); // replace content
+                    }
+                    else {
+                        this._mainElem.appendChild(pageProvider.pageCreator());
+                    }
+                }
+                // CASE: "Offline overlay page is present, but should not be shown"
+                if (offlinePage && !showOfflineFallback) {
+                    this._mainElem.removeChild(offlinePage); // remove offline overlay
+                    const elem = this._mainElem.firstElementChild;
+                    elem === null || elem === void 0 ? void 0 : elem.style.removeProperty('display'); // show the current page again (back to the foreground)
+                    if (elem === null || elem === void 0 ? void 0 : elem.onRefresh) {
+                        elem.onRefresh(); // If custom onRefresh() is set by the page, run that function.
+                    }
+                }
+                // CASE: "Offline overlay page is NOT present, but needs to be there"
+                // It either shows the default offline fallback page, or a custom one defined in the AppConfig.
+                else if (!offlinePage && showOfflineFallback) {
+                    const newOfflinePage = ((_a = this.appConfig) === null || _a === void 0 ? void 0 : _a.offlinePage) ? this.appConfig.offlinePage.pageCreator() : pageOfflineProvider(this._store).pageCreator();
+                    (_b = this._mainElem.firstElementChild) === null || _b === void 0 ? void 0 : _b.style.setProperty('display', 'none'); // Hide the current page (to the background)
+                    newOfflinePage.id = "offline-page";
+                    this._mainElem.appendChild(newOfflinePage);
                 }
             }
-            
-            /* HEADER STYLES */
-            or-header a > or-icon {
-                margin-right: 10px;
+            this.updateWindowTitle();
+        }
+    }
+    shouldUpdate(changedProps) {
+        var _a, _b;
+        if (changedProps.has("_realm")) {
+            this._config = this._getConfig();
+            if (this._realm) {
+                manager.displayRealm = this._realm;
+                window.sessionStorage.setItem("realm", this._realm);
             }
-        `}constructor(e){super(),this._initialised=!1,this._offline=!1,this._showOfflineFallback=!1,this._onEvent=e=>this._handleEvent(e),this._onVisibilityChanged=e=>this._handleVisibilityChange(e),this._store=e,b.DialogHostElement=this,E.DialogHostElement=this}getState(){return this._store.getState()}_handleVisibilityChange(e){var i;"visible"===document.visibilityState?(this._store.dispatch(O(!0)),(null==(i=h.console)?void 0:i.isMobile)&&this._offline&&this._startOfflineFallbackTimer(!0),h.reconnect()):this._store.dispatch(O(!1))}connectedCallback(){super.connectedCallback(),this._storeUnsubscribe=this._store.subscribe(()=>this.stateChanged(this.getState())),document.addEventListener("visibilitychange",this._onVisibilityChanged),this.stateChanged(this.getState())}disconnectedCallback(){this._storeUnsubscribe(),document.removeEventListener("visibilityChange",this._onVisibilityChanged),h.removeListener(this._onEvent),super.disconnectedCallback()}firstUpdated(e){super.firstUpdated(e);let i=this.managerConfig?Object.assign(Object.assign({},DEFAULT_MANAGER_CONFIG),this.managerConfig):DEFAULT_MANAGER_CONFIG;i.realm||(i.realm=v.getQueryParameter("realm")),i.defaultLanguage||(i.defaultLanguage=v.getBrowserLanguage()),i.skipFallbackToBasicAuth=!0,i.basicLoginProvider=(e,i)=>this.doBasicLogin(e,i),console.info("Initialising the manager"),h.init(i).then(e=>__awaiter(this,void 0,void 0,function*(){if(e||h.error!==_.AUTH_FAILED||i.auth&&"KEYCLOAK"!==i.auth||(this.doAppConfigInit(),i.auth="BASIC",e=yield h.init(i)),e){let e;if(this.doAppConfigInit(),!this.appConfig){w("appError.noConfig",document.body),console.error("No AppConfig supplied");return}if(!this._config){w("appError.noConfig",document.body),console.error("No default AppConfig or realm specific config provided so cannot render");return}if(!this._store){w("appError.noReduxStore",document.body),console.error("No Redux store supplied");return}if(!this.appConfig.pages||0===Object.keys(this.appConfig.pages).length){w("appError.noPages",document.body),console.error("No page providers");return}let i=yield h.rest.api.RealmResource.getAccessible();this._realms=i.data,h.isSuperUser()&&(e=window.sessionStorage.getItem("realm"))&&!this._realms.some(i=>i.name===e)&&(e=void 0),this._store.dispatch(F(e||h.getRealm()||"master")),this._initialised=!0,h.addListener(this._onEvent),l.hooks({before(e,i){var t;t=i?i.url.split("/")[0]:void 0,this._activeMenu=t,e()}}),this.appConfig.pages.forEach((e,i)=>{e.routes&&e.routes.forEach(i=>{l.on(i,i=>{this._store.dispatch(k({page:e.name,params:i.data}))})})}),this.appConfig.pages.length>0&&l.notFound(()=>{this._store.dispatch(k(this.appConfig.pages[0].name))}),l.resolve()}else w(h.isError?"managerError."+h.error:"")}))}updated(e){var i,t;if(super.updated(e),this._initialised&&(e.has("_page")||e.has("_offline")||e.has("_showOfflineFallback"))){if(this._mainElem){let o=this.appConfig.pages.find(e=>e.name===this._page),r=this._showOfflineFallback&&!(null==o?void 0:o.allowOffline),n=this._mainElem.querySelector("#offline-page");if(e.has("_page")&&o){let e=this._mainElem.firstElementChild;if(e){let i=o.pageCreator();r&&(i.style.setProperty("display","none"),i.setAttribute("loadedDuringOffline","true")),this._mainElem.replaceChild(i,e)}else this._mainElem.appendChild(o.pageCreator())}if(n&&!r){this._mainElem.removeChild(n);let e=this._mainElem.firstElementChild;null==e||e.style.removeProperty("display"),(null==e?void 0:e.onRefresh)&&e.onRefresh()}else if(!n&&r){let e=(null==(i=this.appConfig)?void 0:i.offlinePage)?this.appConfig.offlinePage.pageCreator():L(this._store).pageCreator();null==(t=this._mainElem.firstElementChild)||t.style.setProperty("display","none"),e.id="offline-page",this._mainElem.appendChild(e)}}this.updateWindowTitle()}}shouldUpdate(e){var i,t;if(e.has("_realm")&&(this._config=this._getConfig(),this._realm?(h.displayRealm=this._realm,window.sessionStorage.setItem("realm",this._realm)):window.sessionStorage.removeItem("realm")),e.has("_config")&&this._config){this._config.logo?this._config.logo=(null!=(i=h.managerUrl)?i:"")+this._config.logo:this._config.logo=DefaultLogo,this._config.logoMobile?this._config.logoMobile=(null!=(t=h.managerUrl)?t:"")+this._config.logoMobile:this._config.logoMobile=DefaultMobileLogo;let e=this._config&&this._config.favicon?(h.managerUrl||"")+this._config.favicon:DefaultFavIcon,o=document.querySelector("link[rel~='icon']");o||((o=document.createElement("link")).rel="icon",document.getElementsByTagName("head")[0].appendChild(o)),o.href=e}return this.updateWindowTitle(),super.shouldUpdate(e)}render(){let e;if(!this._initialised)return i`<or-mwc-dialog id="app-modal"></or-mwc-dialog>`;if(h.consoleAppConfig){let t=h.consoleAppConfig,o=t.primaryColor,r=t.secondaryColor;e=i`<style>:host {--or-console-primary-color:${o};--or-console-secondary-color:${r};}</style>`}return i`
-            ${this._config.styles?"string"==typeof this._config.styles?i`<style>${this._config.styles}</style>`:this._config.styles.strings:""}
-            ${e}
-            ${this._config.header?i`
-                <or-header .activeMenu="${this._activeMenu}" .store="${this._store}" .realm="${this._realm}" .realms="${this._realms}" .logo="${this._config.logo}" .logoMobile="${this._config.logoMobile}" .config="${this._config.header}"></or-header>
-            `:""}
-            
-            <!-- Main content -->
-            <main role="main" class="main-content d-none"></main>
-            
-            <slot></slot>
-        `}stateChanged(e){this._realm=e.app.realm,this._page=e.app.page,this._offline=e.app.offline}_handleEvent(e){e===u.OFFLINE?(this._offline||this._store.dispatch(A(!0)),this._startOfflineFallbackTimer()):e===u.ONLINE&&this._offline&&(this._showOfflineFallback=!1,this._completeOfflineFallbackTimer(),this._store.dispatch(A(!1)))}_startOfflineFallbackTimer(e=!1){var i;if(e)this._completeOfflineFallbackTimer(!0);else if(this._offlineFallbackDeferred||this._showOfflineFallback)return;let t=new v.Deferred,o=!1;t.promise.then(()=>{this._showOfflineFallback=this._offline}).finally(()=>{o=!0}),setTimeout(()=>{o||t.resolve()},(null==(i=this.appConfig)?void 0:i.offlineTimeout)||2e4),this._offlineFallbackDeferred=t}_completeOfflineFallbackTimer(e=!1){var i,t;e?null==(i=this._offlineFallbackDeferred)||i.reject():null==(t=this._offlineFallbackDeferred)||t.resolve(),this._offlineFallbackDeferred=void 0}logout(){h.logout()}setLanguage(e){h.language=e}showLanguageModal(){C(new b().setHeading("language").setDismissAction(null).setStyles(i`<style>.selected { color: ${o(g)} }</style>`).setActions(Object.entries(this.appConfig.languages||y).map(([e,t])=>({content:i`<span class="${e===h.language?"selected":""}">${c.t(t)}</span>`,actionName:e,action:()=>{h.language=e}}))))}doAppConfigInit(){this.appConfig=this.appConfig||(this.appConfigProvider?this.appConfigProvider(h):void 0),this.appConfig&&(this._config||(this._config=this._getConfig()))}doBasicLogin(e,t){let o=new v.Deferred,r=e,n=t,a=i`
-            #login-logo {
-                width: 24px;
-                height: 24px;
+            else {
+                window.sessionStorage.removeItem("realm");
             }
-            
-            #login_wrapper > or-mwc-input {
-                margin: 10px 0;
-                width: 100%;
+        }
+        if (changedProps.has("_config") && this._config) {
+            if (!this._config.logo) {
+                this._config.logo = DefaultLogo;
+            }
+            else {
+                this._config.logo = ((_a = manager.managerUrl) !== null && _a !== void 0 ? _a : "") + this._config.logo;
+            }
+            if (!this._config.logoMobile) {
+                this._config.logoMobile = DefaultMobileLogo;
+            }
+            else {
+                this._config.logoMobile = ((_b = manager.managerUrl) !== null && _b !== void 0 ? _b : "") + this._config.logoMobile;
+            }
+            const favIcon = this._config && this._config.favicon ? (manager.managerUrl || "") + this._config.favicon : DefaultFavIcon;
+            let link = document.querySelector("link[rel~='icon']");
+            if (!link) {
+                link = document.createElement("link");
+                link.rel = "icon";
+                document.getElementsByTagName("head")[0].appendChild(link);
+            }
+            link.href = favIcon;
+        }
+        this.updateWindowTitle();
+        return super.shouldUpdate(changedProps);
+    }
+    render() {
+        if (!this._initialised) {
+            return html `<or-mwc-dialog id="app-modal"></or-mwc-dialog>`;
+        }
+        let consoleStyles;
+        if (manager.consoleAppConfig) {
+            const consoleAppConfig = manager.consoleAppConfig;
+            const primary = consoleAppConfig.primaryColor;
+            const secondary = consoleAppConfig.secondaryColor;
+            consoleStyles = html `<style>:host {--or-console-primary-color:${primary};--or-console-secondary-color:${secondary};}</style>`;
+        }
+        return html `
+            ${this._config.styles ? typeof (this._config.styles) === "string" ? html `<style>${this._config.styles}</style>` : this._config.styles.strings : ``}
+            ${consoleStyles}
+            ${this._config.header ? html `
+                <or-header .activeMenu="${this._activeMenu}" .store="${this._store}" .realm="${this._realm}" .realms="${this._realms}" .logo="${this._config.logo}" .logoMobile="${this._config.logoMobile}" .config="${this._config.header}"></or-header>
+            ` : ``}
+            
+            <!-- Main content -->
+            <main role="main" class="main-content d-none"></main>
+            
+            <slot></slot>
+        `;
+    }
+    stateChanged(state) {
+        this._realm = state.app.realm;
+        this._page = state.app.page;
+        this._offline = state.app.offline;
+    }
+    _handleEvent(event) {
+        if (event === OREvent.OFFLINE) {
+            if (!this._offline) {
+                this._store.dispatch((setOffline(true)));
+            }
+            this._startOfflineFallbackTimer(); // start fallback timer (if not done yet)
+        }
+        else if (event === OREvent.ONLINE) {
+            if (this._offline) {
+                this._showOfflineFallback = false;
+                this._completeOfflineFallbackTimer(); // complete fallback timer
+                this._store.dispatch((setOffline(false)));
+            }
+        }
+    }
+    // Offline timer logic
+    //
+    // This will start a Deferred promise that keeps track of the 'wait before showing offline page' timer.
+    // - Resolving the promise updates the 'show offline fallback' variable based on OFFLINE state.
+    // - Rejecting the promise 'aborts the process' and skips that logic and does nothing.
+    //
+    // To explain; when the Manager reports "We're offline!" it will wait 10+ seconds before visually reporting the user that he/she is offline.
+    // However, if the user reconnects within that time period, we resolve this promise early. (which is why using Deferred is useful)
+    _startOfflineFallbackTimer(force = false) {
+        var _a;
+        if (force) {
+            this._completeOfflineFallbackTimer(true);
+        }
+        else if (this._offlineFallbackDeferred || this._showOfflineFallback) {
+            return;
+        }
+        const deferred = new Util.Deferred();
+        let finished = false;
+        deferred.promise.then(() => {
+            this._showOfflineFallback = this._offline;
+        }).finally(() => {
+            finished = true;
+        });
+        setTimeout(() => {
+            if (!finished) {
+                deferred.resolve();
+            } // resolve THIS timer if not done yet.
+        }, ((_a = this.appConfig) === null || _a === void 0 ? void 0 : _a.offlineTimeout) || 20000);
+        this._offlineFallbackDeferred = deferred;
+    }
+    // Completes and removes the 'show offline page' timer
+    // Resolving the timer updates the 'show offline fallback' variable based on OFFLINE state.
+    // if 'aborted' is TRUE it will skip that logic. See startOfflineTimer() for more details.
+    _completeOfflineFallbackTimer(aborted = false) {
+        var _a, _b;
+        if (aborted) {
+            (_a = this._offlineFallbackDeferred) === null || _a === void 0 ? void 0 : _a.reject();
+        }
+        else {
+            (_b = this._offlineFallbackDeferred) === null || _b === void 0 ? void 0 : _b.resolve();
+        }
+        this._offlineFallbackDeferred = undefined;
+    }
+    logout() {
+        manager.logout();
+    }
+    setLanguage(lang) {
+        manager.language = lang;
+    }
+    showLanguageModal() {
+        showDialog(new OrMwcDialog()
+            .setHeading("language")
+            .setDismissAction(null)
+            .setStyles(html `<style>.selected { color: ${unsafeCSS(DefaultColor4)} }</style>`)
+            .setActions(Object.entries(this.appConfig.languages || DEFAULT_LANGUAGES).map(([key, value]) => {
+            return {
+                content: html `<span class="${(key === manager.language) ? 'selected' : ''}">${i18next.t(value)}</span>`,
+                actionName: key,
+                action: () => {
+                    manager.language = key;
+                }
+            };
+        })));
+    }
+    doAppConfigInit() {
+        this.appConfig = this.appConfig || (this.appConfigProvider ? this.appConfigProvider(manager) : undefined);
+        if (!this.appConfig) {
+            return;
+        }
+        if (!this._config) {
+            this._config = this._getConfig();
+        }
+    }
+    doBasicLogin(username, password) {
+        const deferred = new Util.Deferred();
+        let u = username;
+        let p = password;
+        // language=CSS
+        const styles = html `
+            #login-logo {
+                width: 24px;
+                height: 24px;
+            }
+            
+            #login_wrapper > or-mwc-input {
+                margin: 10px 0;
+                width: 100%;
+            }
+        `;
+        const dialog = showDialog(new OrMwcDialog()
+            .setStyles(html `<style>${styles}</style>`)
+            .setHeading(html `<img id="login-logo" src="${this._config.logoMobile || this._config.logo}" /></or-icon><or-translate value="login"></or-translate>`)
+            .setContent(html `
+                <div id="login_wrapper">
+                    <or-mwc-input .label="${i18next.t("user")}" .type="${InputType.TEXT}" min="1" required .value="${username}" @or-mwc-input-changed="${(e) => u = e.detail.value}"></or-mwc-input>            
+                    <or-mwc-input .label="${i18next.t("password")}" .type="${InputType.PASSWORD}" min="1" required .value="${password}" @or-mwc-input-changed="${(e) => p = e.detail.value}"></or-mwc-input>           
+                </div>
+            `)
+            .setActions([
+            {
+                actionName: "submit",
+                default: true,
+                action: () => {
+                    deferred.resolve({
+                        cancel: false,
+                        username: u,
+                        password: p
+                    });
+                },
+                content: html `<or-mwc-input .type=${InputType.BUTTON} .label="${i18next.t("submit")}" raised></or-mwc-input>`
             }
-        `;return C(new b().setStyles(i`<style>${a}</style>`).setHeading(i`<img id="login-logo" src="${this._config.logoMobile||this._config.logo}" /></or-icon><or-translate value="login"></or-translate>`).setContent(i`
-                <div id="login_wrapper">
-                    <or-mwc-input .label="${c.t("user")}" .type="${$.TEXT}" min="1" required .value="${e}" @or-mwc-input-changed="${e=>r=e.detail.value}"></or-mwc-input>            
-                    <or-mwc-input .label="${c.t("password")}" .type="${$.PASSWORD}" min="1" required .value="${t}" @or-mwc-input-changed="${e=>n=e.detail.value}"></or-mwc-input>           
-                </div>
-            `).setActions([{actionName:"submit",default:!0,action:()=>{o.resolve({cancel:!1,username:r,password:n})},content:i`<or-mwc-input .type=${$.BUTTON} .label="${c.t("submit")}" raised></or-mwc-input>`}]),document.body),o.promise}updateWindowTitle(){if(!this._initialised)return;let e=this._config.appTitle||"",i=c.isInitialized?c.t(e):e,t=this._mainElem?this._mainElem.firstElementChild:void 0;t&&(i+=c.isInitialized?" - "+c.t(t.name):" - "+t.name),p({title:i,description:i})}_getConfig(){let e=this.appConfig.realms?this.appConfig.realms.default:{},i=this.appConfig.realms?this.appConfig.realms[this._realm||""]:void 0;return i=v.mergeObjects(e,i,!1),this.appConfig&&this.appConfig.superUserHeader&&h.isSuperUser()&&(i.header=this.appConfig.superUserHeader),i}};__decorate([n({type:Object})],OrApp.prototype,"appConfig",void 0),__decorate([n({type:Object})],OrApp.prototype,"managerConfig",void 0),__decorate([a("main")],OrApp.prototype,"_mainElem",void 0),__decorate([s()],OrApp.prototype,"_initialised",void 0),__decorate([s()],OrApp.prototype,"_page",void 0),__decorate([s()],OrApp.prototype,"_config",void 0),__decorate([s()],OrApp.prototype,"_realm",void 0),__decorate([s()],OrApp.prototype,"_offline",void 0),__decorate([s()],OrApp.prototype,"_showOfflineFallback",void 0),__decorate([s()],OrApp.prototype,"_activeMenu",void 0),OrApp=__decorate([r("or-app")],OrApp);export{y as DEFAULT_LANGUAGES,OrApp};
+        ]), document.body); // Attach to document as or-app isn't visible until initialised
+        return deferred.promise;
+    }
+    updateWindowTitle() {
+        if (!this._initialised) {
+            return;
+        }
+        const appTitle = this._config.appTitle || "";
+        let pageTitle = (i18next.isInitialized ? i18next.t(appTitle) : appTitle);
+        const pageElem = (this._mainElem ? this._mainElem.firstElementChild : undefined);
+        if (pageElem) {
+            pageTitle += (i18next.isInitialized ? " - " + i18next.t(pageElem.name) : " - " + pageElem.name);
+        }
+        updateMetadata({
+            title: pageTitle,
+            description: pageTitle
+        });
+    }
+    _getConfig() {
+        const defaultConfig = this.appConfig.realms ? this.appConfig.realms.default : {};
+        let realmConfig = this.appConfig.realms ? this.appConfig.realms[this._realm || ""] : undefined;
+        realmConfig = Util.mergeObjects(defaultConfig, realmConfig, false);
+        if (this.appConfig && this.appConfig.superUserHeader && manager.isSuperUser()) {
+            realmConfig.header = this.appConfig.superUserHeader;
+        }
+        return realmConfig;
+    }
+};
+__decorate([
+    property({ type: Object })
+], OrApp.prototype, "appConfig", void 0);
+__decorate([
+    property({ type: Object })
+], OrApp.prototype, "managerConfig", void 0);
+__decorate([
+    query("main")
+], OrApp.prototype, "_mainElem", void 0);
+__decorate([
+    state()
+], OrApp.prototype, "_initialised", void 0);
+__decorate([
+    state()
+], OrApp.prototype, "_page", void 0);
+__decorate([
+    state()
+], OrApp.prototype, "_config", void 0);
+__decorate([
+    state()
+], OrApp.prototype, "_realm", void 0);
+__decorate([
+    state()
+], OrApp.prototype, "_offline", void 0);
+__decorate([
+    state()
+], OrApp.prototype, "_showOfflineFallback", void 0);
+__decorate([
+    state()
+], OrApp.prototype, "_activeMenu", void 0);
+OrApp = __decorate([
+    customElement("or-app")
+], OrApp);
+export { OrApp };
+//# sourceMappingURL=index.js.map