@openremote/or-app 1.8.0-snapshot.20250725120002 → 1.8.0-snapshot.20250728102340

package/lib/index.js

@@ -1,547 +1,76 @@
-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);
+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;
             }
-            // 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);
+                
+            .main-content {
+                display: flex;
+                flex: 1;
+                box-sizing: border-box;
+                background-color: var(--or-app-color2);
+                overflow: auto;
             }
-            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();
+            
+            .no-scroll {
+                overflow: hidden;
             }
-            else {
-                showErrorDialog(manager.isError ? "managerError." + manager.error : "");
+
+            main > * {
+                display: flex;
+                flex: 1;
+                position: relative;
             }
-        }));
-    }
-    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);
-                }
+    
+            .desktop-hidden {
+                display: none !important;
             }
-            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);
-            }
-            else {
-                window.sessionStorage.removeItem("realm");
-            }
-        }
-        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);
+            
+            @media only screen and (max-width: 780px) {
+                .desktop-hidden {
+                    display: inline-block !important;
+                }
             }
-            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)));
+            
+            /* HEADER STYLES */
+            or-header a > or-icon {
+                margin-right: 10px;
             }
-            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)));
+        `}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;
             }
-        }
-    }
-    // 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>`
+            
+            #login_wrapper > or-mwc-input {
+                margin: 10px 0;
+                width: 100%;
             }
-        ]), 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
+        `;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};