@openremote/or-app 1.8.0-snapshot.20250725120000 → 1.8.0-snapshot.20250725123024

package/lib/or-header.js

@@ -1,500 +1,302 @@
-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 manager, { DefaultBoxShadowBottom, DefaultColor1, DefaultColor2, DefaultColor3, DefaultColor4, DefaultColor5, DefaultHeaderHeight, Util, DEFAULT_LANGUAGES } from "@openremote/core";
-import "@openremote/or-mwc-components/or-mwc-dialog";
-import "@openremote/or-icon";
-import { getContentWithMenuTemplate } from "@openremote/or-mwc-components/or-mwc-menu";
-import { router, updateRealm } from "./index";
-import { i18next } from "@openremote/or-translate";
-export { DEFAULT_LANGUAGES };
-function getHeaderMenuItems(items) {
-    return items.filter(hasRequiredRole).map((option) => {
-        return {
-            text: option.text,
-            value: option.value ? option.value : "",
-            icon: option.icon,
-            href: option.href
-        };
-    });
-}
-function hasRequiredRole(option) {
-    if (!option.roles) {
-        return true;
-    }
-    if (Array.isArray(option.roles)) {
-        return option.roles.some((r) => manager.hasRole(r));
-    }
-    if (Util.isFunction(option.roles)) {
-        return option.roles();
-    }
-    return Object.entries(option.roles).some(([client, roles]) => roles.some((r) => manager.hasRole(r, client)));
-}
-function getCurrentMenuItemRef(defaultRef) {
-    const menu = window.location.hash.substr(2).split("/")[0];
-    return menu || defaultRef;
-}
-let OrHeader = class OrHeader extends LitElement {
-    constructor() {
-        super(...arguments);
-        this._drawerOpened = false;
-        this.alarmButton = 'bell-outline';
-        this.alarmColor = '--or-app-color3, ${unsafeCSS(DefaultColor3)}';
-    }
-    // language=CSS
-    static get styles() {
-        return css `
-        
-            :host {
-                --internal-or-header-color: var(--or-header-color, var(--or-app-color1, ${unsafeCSS(DefaultColor1)}));    
-                --internal-or-header-selected-color: var(--or-header-selected-color, var(--or-app-color4, ${unsafeCSS(DefaultColor4)}));    
-                --internal-or-header-text-color: var(--or-header-text-color, var(--or-app-color3, inherit));
-                --internal-or-header-height: var(--or-header-height, ${unsafeCSS(DefaultHeaderHeight)});
-                --internal-or-header-logo-margin: var(--or-header-logo-margin, 0 40px 0 0);
-                --internal-or-header-logo-height: var(--or-header-logo-height, var(--internal-or-header-height, ${unsafeCSS(DefaultHeaderHeight)}));
-                --internal-or-header-item-size: var(--or-header-item-size, calc(${unsafeCSS(DefaultHeaderHeight)} - 20px));
-                --internal-or-header-drawer-color: var(--or-header-drawer-color, var(--or-app-color2, ${unsafeCSS(DefaultColor2)}));
-                --internal-or-header-drawer-text-color: var(--or-header-drawer-text-color, var(--or-app-color3, ${unsafeCSS(DefaultColor3)}));
-                --internal-or-header-drawer-item-size: var(--or-header-drawer-item-size, 30px);
-                --internal-or-header-drawer-separator-color: var(--or-header-drawer-separator-color, var(--or-app-color5, ${unsafeCSS(DefaultColor5)}));
-                
-                display: block;
-                z-index: 4;
-            }
-              
-            #toolbar-top {
-                display: flex;
-                padding: 0;
-            }
-            
-            #logo-mobile {
-                margin: 8px;
-                height: calc(var(--internal-or-header-logo-height) - 16px);
-                display: block;
-            }
-    
-            #logo {
-                display: none;
-            }
-                                            
-            #header {
-                opacity: 1;
-                width: 100%;
-                height: var(--internal-or-header-height);
-                text-align: center;
-                background-color: var(--internal-or-header-color);
-                color: var(--internal-or-header-text-color);
-                --or-icon-fill: var(--internal-or-header-text-color);
-                --or-icon-height: calc(var(--internal-or-header-item-size) - 12px);
-                --or-icon-width: calc(var(--internal-or-header-item-size) - 12px);
-                z-index: 9999999;
-            }
-    
-            .shadow {
-                -webkit-box-shadow: ${unsafeCSS(DefaultBoxShadowBottom)};
-                -moz-box-shadow: ${unsafeCSS(DefaultBoxShadowBottom)};
-                box-shadow: ${unsafeCSS(DefaultBoxShadowBottom)};
-            }
-                    
-            #drawer {
-                width: 100%;
-                position: absolute;
-                top: var(--internal-or-header-height);
-                max-height: 0;
-                height: calc(100% - var(--internal-or-header-height));
-                transition: max-height 0.25s ease-out;
-                background: var(--internal-or-header-drawer-color);
-                color: var(--internal-or-header-drawer-text-color);
-                --or-icon-fill: var(--internal-or-header-drawer-text-color);
-                --or-icon-height: calc(var(--internal-or-header-drawer-item-size) - 10px);
-                --or-icon-width: calc(var(--internal-or-header-drawer-item-size) - 10px);
-                overflow: auto;
-            }
-            
-            #drawer[opened] {
-                max-height: 10000px;
-                transition: max-height 0.75s ease-in;
-            }
-                            
-            #drawer > div {
-                box-sizing: border-box;
-                width: 100%;
-                height: 100%;
-                padding: 10px 0px;
-                position: relative;
-            }
-              
-            .menu-btn {
-                background: none;
-                border: none;
-                cursor: pointer;
-                padding: 0 16px;
-                height: 100%;
-            }
-            
-            #menu-btn-mobile {
-                display: flex;
-                margin-left: auto;
-                --or-icon-height: calc(var(--internal-or-header-item-size) - 8px);
-                --or-icon-width: calc(var(--internal-or-header-item-size) - 8px);
-            }
-
-            #menu-btn-mobile #realm-picker > span{
-                max-width: 70px;
-                text-overflow: ellipsis;
-                overflow: hidden;
-                white-space: nowrap;
-            }
-    
-            #menu-btn-desktop {
-                display: none;
-            }
-            
-            #desktop-right {
-                margin-left: auto;
-                padding-right: 10px;
-                display: none;
-            }
-    
-            .mobile-bottom-border {
-                border-top: 1px solid var(--internal-or-header-drawer-separator-color);
-                margin-top: 16px;
-                padding-top: 8px;
-            }
-          
-            .menu-item {
-                opacity: 0.7;
-                cursor: pointer;
-                text-decoration: none !important;         
-                color: inherit;       
-                padding: 0 20px;
-                font-size: 14px;       
-            }        
-            
-            .menu-item:hover,
-            .menu-item[selected] {
-                opacity: 1;
-            }                
-            #desktop-left .menu-item or-icon {
-                margin-right: 10px;
-            }
-            #desktop-left .menu-item  {
-                display: none;
-                line-height: calc(var(--internal-or-header-height) - 4px);
-            }
-            
-            #desktop-right .menu-item  {
-                line-height: var(--internal-or-header-height);
-            }
-            
-            #drawer .menu-item  {
-                display: block;
-                line-height: var(--internal-or-header-drawer-item-size);
-                margin: 6px 0;
-                padding: 8px 16px;
-            }
-            
-            #drawer .menu-item  or-icon {
-                margin: 0 10px;
-            }
-
-            #desktop-left .menu-item[selected] {
-                display: inline-block;
-                line-height: var(--internal-or-header-height);
-            }
-    
-            or-mwc-menu {
-                margin-right: 10px;
-                display: block;
-            }
-            
-            .or-language-container {
-                display: flex;
-                height: 50px;
-                align-items: center;
-            }
-          
-            #realm-picker {
-                position: relative;
-                display: flex;
-                height: 50px;
-                align-items: center;
-                cursor: pointer;
-                margin-left: 10px;
-            }
-            
-            #realm-picker > span {
-                margin-right: 2px;
-            }
-          
-            /* Wide layout: when the viewport width is bigger than 768px, layout
-            changes to a wide layout. */
-            @media (min-width: 768px) {
-                #menu-btn-desktop {
-                    display: block;
-                }          
-    
-                #menu-btn-mobile {
-                    display: none;
-                }
-    
-                #drawer {
-                    display: none;
-                }
-                
-                #desktop-right {
-                    display: flex;
-                }
-                
-                #desktop-left .menu-item {
-                    display: inline-block;
-                }
-                
-                #desktop-left .menu-item or-icon {
-                    display: none;
-                }
-    
-                #desktop-left .menu-item[selected] {                
-                    border-bottom: 4px solid var(--internal-or-header-selected-color);
-                    line-height: calc(var(--internal-or-header-height) - 4px);
-                }
-
-                #logo {
-                    margin: var(--internal-or-header-logo-margin);
-                    height: var(--internal-or-header-logo-height);
-                    display: block;
-                }
-    
-                #logo-mobile {
-                    display: none;
-                }
-                
-                #desktop-left ::slotted(*) {
-                    display: inline-block;
-                }
-    
-                #desktop-left ::slotted(*[selected]) {                
-                    border-bottom: 4px solid var(--internal-or-header-selected-color);
-                    line-height: calc(var(--internal-or-header-height) - 4px);
-                }
-            }
-            
-            @media (min-width: 1024px) {
-               
-    
-                #desktop-left .menu-item or-icon{
-                    display: inline-block;
-                }
-            }
-    `;
-    }
-    _onRealmSelect(realm) {
-        this.store.dispatch(updateRealm(realm));
-    }
-    shouldUpdate(changedProperties) {
-        if (changedProperties.has("config")) {
-            this.activeMenu = getCurrentMenuItemRef(this.config && this.config.mainMenu && this.config.mainMenu.length > 0 ? this.config.mainMenu[0].href : undefined);
-        }
-        if (changedProperties.has("realm")) {
-            this._getAlarmButton();
-        }
-        return super.shouldUpdate(changedProperties);
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this._subscribeEvents();
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this._unsubscribeEvents();
-    }
-    _subscribeEvents() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (manager.events) {
-                this._eventSubscriptionId = yield manager.events.subscribe({
-                    eventType: "alarm"
-                }, (ev) => this._getAlarmButton());
+var __decorate=this&&this.__decorate||function(e,r,o,t){var i,a=arguments.length,n=a<3?r:null===t?t=Object.getOwnPropertyDescriptor(r,o):t;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,r,o,t);else for(var l=e.length-1;l>=0;l--)(i=e[l])&&(n=(a<3?i(n):a>3?i(r,o,n):i(r,o))||n);return a>3&&n&&Object.defineProperty(r,o,n),n},__awaiter=this&&this.__awaiter||function(e,r,o,t){return new(o||(o=Promise))(function(i,a){function n(e){try{d(t.next(e))}catch(e){a(e)}}function l(e){try{d(t.throw(e))}catch(e){a(e)}}function d(e){var r;e.done?i(e.value):((r=e.value)instanceof o?r:new o(function(e){e(r)})).then(n,l)}d((t=t.apply(e,r||[])).next())})};import{css as e,html as r,LitElement as o,unsafeCSS as t}from"lit";import{customElement as i,property as a,query as n,state as l}from"lit/decorators.js";import d,{DefaultBoxShadowBottom as s,DefaultColor1 as c,DefaultColor2 as h,DefaultColor3 as p,DefaultColor4 as m,DefaultColor5 as u,DefaultHeaderHeight as v,Util as g,DEFAULT_LANGUAGES as b}from"@openremote/core";import"@openremote/or-mwc-components/or-mwc-dialog";import"@openremote/or-icon";import{getContentWithMenuTemplate as f}from"@openremote/or-mwc-components/or-mwc-menu";import{router as x,updateRealm as w}from"./index";import{i18next as _}from"@openremote/or-translate";function getHeaderMenuItems(e){return e.filter(hasRequiredRole).map(e=>({text:e.text,value:e.value?e.value:"",icon:e.icon,href:e.href}))}function hasRequiredRole(e){return!e.roles||(Array.isArray(e.roles)?e.roles.some(e=>d.hasRole(e)):g.isFunction(e.roles)?e.roles():Object.entries(e.roles).some(([e,r])=>r.some(r=>d.hasRole(r,e))))}function getCurrentMenuItemRef(e){return window.location.hash.substr(2).split("/")[0]||e}let OrHeader=class extends o{constructor(){super(...arguments),this._drawerOpened=!1,this.alarmButton="bell-outline",this.alarmColor="--or-app-color3, ${unsafeCSS(DefaultColor3)}"}static get styles(){return e`
+        
+            :host {
+                --internal-or-header-color: var(--or-header-color, var(--or-app-color1, ${t(c)}));    
+                --internal-or-header-selected-color: var(--or-header-selected-color, var(--or-app-color4, ${t(m)}));    
+                --internal-or-header-text-color: var(--or-header-text-color, var(--or-app-color3, inherit));
+                --internal-or-header-height: var(--or-header-height, ${t(v)});
+                --internal-or-header-logo-margin: var(--or-header-logo-margin, 0 40px 0 0);
+                --internal-or-header-logo-height: var(--or-header-logo-height, var(--internal-or-header-height, ${t(v)}));
+                --internal-or-header-item-size: var(--or-header-item-size, calc(${t(v)} - 20px));
+                --internal-or-header-drawer-color: var(--or-header-drawer-color, var(--or-app-color2, ${t(h)}));
+                --internal-or-header-drawer-text-color: var(--or-header-drawer-text-color, var(--or-app-color3, ${t(p)}));
+                --internal-or-header-drawer-item-size: var(--or-header-drawer-item-size, 30px);
+                --internal-or-header-drawer-separator-color: var(--or-header-drawer-separator-color, var(--or-app-color5, ${t(u)}));
+                
+                display: block;
+                z-index: 4;
             }
-        });
-    }
-    _unsubscribeEvents() {
-        if (this._eventSubscriptionId) {
-            manager.events.unsubscribe(this._eventSubscriptionId);
-            this._eventSubscriptionId = undefined;
-        }
-    }
-    render() {
-        if (!this.config) {
-            return html ``;
-        }
-        const mainItems = this.config.mainMenu;
-        const secondaryItems = this.config.secondaryMenu;
-        return html `
-           <!-- Header -->
-            <div id="header" class="shadow">
-                <div id="toolbar-top">
-                    <div><img id="logo" src="${this.logo}" /><img id="logo-mobile" src="${this.logoMobile}" /></div>
-
-                    <!-- This gets hidden on a small screen-->
-                    <nav id="toolbar-list">
-                        <div id="desktop-left">
-                            ${mainItems ? mainItems.filter(hasRequiredRole).map((headerItem) => {
-            return html `
-                                    <a class="menu-item" @click="${(e) => this._onHeaderItemSelect(headerItem)}" ?selected="${this.activeMenu === headerItem.href}"><or-icon icon="${headerItem.icon}"></or-icon><or-translate value="${headerItem.text}"></or-translate></a>
-                                `;
-        }) : ``}
-                        </div>
-                    </nav>
-                    <div id="desktop-right">
-                        <div id="alarm-btn">
-                            <a class="menu-item" @click="${(e) => router.navigate('alarms')}">
-                                <or-icon icon="${this.alarmButton}" style="color:var(${this.alarmColor})" title="${i18next.t("alarm.alarm_plural")}"></or-icon>
-                            </a>
-                        </div>
-                        ${this._getRealmMenu((value) => this._onRealmSelect(value))}
-                        ${secondaryItems ? getContentWithMenuTemplate(html `
-                            <button id="menu-btn-desktop" class="menu-btn" title="Menu"><or-icon icon="dots-vertical"></or-icon></button>
-                        `, getHeaderMenuItems(secondaryItems), undefined, (value) => this._onSecondaryMenuSelect(value)) : ``}
-                    </div>
-                    <div id="menu-btn-mobile">
-                        ${this._getRealmMenu((value) => this._onRealmSelect(value))}
-                        <button id="menu-btn" class="menu-btn" title="Menu" @click="${this._toggleDrawer}"><or-icon icon="${this._drawerOpened ? "close" : "menu"}"></or-icon></button>
-                    </div>
-                </div>
-            </div>
-            <div id="drawer" ?opened="${this._drawerOpened}" @click="${this._closeDrawer}">
-                <div>                    
-                    <div id="mobile-top">
-                        <nav id="drawer-list">
-                            ${mainItems ? mainItems.filter((option) => !option.hideMobile && hasRequiredRole(option)).map((headerItem) => {
-            return html `
-                                    <a class="menu-item" @click="${(e) => this._onHeaderItemSelect(headerItem)}" ?selected="${this.activeMenu === headerItem.href}"><or-icon icon="${headerItem.icon}"></or-icon><or-translate value="${headerItem.text}"></or-translate></a>
-                                `;
-        }) : ``}
-                        </nav>
-                    </div>
-                    
-                    ${secondaryItems ? html `
-                        <div id="mobile-bottom" class="${mainItems.length > 0 ? 'mobile-bottom-border' : ''}">
-                            ${secondaryItems.filter((option) => !option.hideMobile && hasRequiredRole(option)).map((headerItem) => {
-            return html `
-                                    <a class="menu-item" @click="${(e) => this._onHeaderItemSelect(headerItem)}" ?selected="${this.activeMenu === headerItem.href}"><or-icon icon="${headerItem.icon}"></or-icon><or-translate value="${headerItem.text}"></or-translate></a>
-                                `;
-        })}
-                        </div>` : ``}
-                </div>
-            </div>
-        `;
-    }
-    _getRealmMenu(callback) {
-        const currentRealm = this.realms.find((t) => t.name === this.realm);
-        let realmTemplate = html `
-            <div id="realm-picker">
-                ${this.realms.length > 1 ? html `
-                    <span>${currentRealm ? currentRealm.displayName : ""}</span>
-                    <or-icon icon="chevron-down"></or-icon>
-                ` : ``}
-            </div>
-        `;
-        if (manager.isSuperUser()) {
-            const menuItems = this.realms.map((r) => {
-                return {
-                    text: r.displayName,
-                    value: r.name
-                };
-            });
-            realmTemplate = html `
-                ${getContentWithMenuTemplate(realmTemplate, menuItems, currentRealm ? currentRealm.name : undefined, (value) => callback(value))}
-            `;
-        }
-        return realmTemplate;
-    }
-    _getAlarmButton() {
-        return __awaiter(this, void 0, void 0, function* () {
-            let newAlarms = false;
-            if (manager.hasRole("read:alarms") || manager.hasRole("read:admin")) {
-                const response = yield manager.rest.api.AlarmResource.getAlarms({ realm: manager.displayRealm, status: "OPEN" /* Model.AlarmStatus.OPEN */ });
-                newAlarms = response.data.length > 0;
+              
+            #toolbar-top {
+                display: flex;
+                padding: 0;
             }
-            this.alarmButton = newAlarms ? 'bell-badge-outline' : 'bell-outline';
-            this.alarmColor = newAlarms ? '--or-app-color4, ${unsafeCSS(DefaultColor4)}' : '--or-app-color3, ${unsafeCSS(DefaultColor3)}';
-        });
-    }
-    _onSecondaryMenuSelect(value) {
-        const headerItem = this.config.secondaryMenu.find((item) => item.value === value);
-        if (headerItem) {
-            this._onHeaderItemSelect(headerItem);
-        }
-    }
-    _onHeaderItemSelect(headerItem) {
-        if (headerItem.action) {
-            headerItem.action();
-        }
-        else if (headerItem.href) {
-            if (headerItem.absolute) {
-                window.location.href = headerItem.href;
+            
+            #logo-mobile {
+                margin: 8px;
+                height: calc(var(--internal-or-header-logo-height) - 16px);
+                display: block;
             }
-            else {
-                router.navigate(headerItem.href);
+    
+            #logo {
+                display: none;
             }
-        }
-    }
-    _closeDrawer() {
-        this._drawerOpened = false;
-    }
-    _toggleDrawer() {
-        this._drawerOpened = !this._drawerOpened;
-    }
-};
-__decorate([
-    property({ type: Array })
-], OrHeader.prototype, "realms", void 0);
-__decorate([
-    property({ type: String })
-], OrHeader.prototype, "realm", void 0);
-__decorate([
-    property({ type: Object })
-], OrHeader.prototype, "store", void 0);
-__decorate([
-    property({ type: String })
-], OrHeader.prototype, "logo", void 0);
-__decorate([
-    property({ type: String })
-], OrHeader.prototype, "logoMobile", void 0);
-__decorate([
-    property({ type: Object })
-], OrHeader.prototype, "config", void 0);
-__decorate([
-    query("div[id=mobile-bottom]")
-], OrHeader.prototype, "_mobileBottomDiv", void 0);
-__decorate([
-    property()
-], OrHeader.prototype, "activeMenu", void 0);
-__decorate([
-    state()
-], OrHeader.prototype, "_drawerOpened", void 0);
-__decorate([
-    state()
-], OrHeader.prototype, "alarmButton", void 0);
-__decorate([
-    state()
-], OrHeader.prototype, "alarmColor", void 0);
-OrHeader = __decorate([
-    customElement("or-header")
-], OrHeader);
-export { OrHeader };
-//# sourceMappingURL=or-header.js.map
+                                            
+            #header {
+                opacity: 1;
+                width: 100%;
+                height: var(--internal-or-header-height);
+                text-align: center;
+                background-color: var(--internal-or-header-color);
+                color: var(--internal-or-header-text-color);
+                --or-icon-fill: var(--internal-or-header-text-color);
+                --or-icon-height: calc(var(--internal-or-header-item-size) - 12px);
+                --or-icon-width: calc(var(--internal-or-header-item-size) - 12px);
+                z-index: 9999999;
+            }
+    
+            .shadow {
+                -webkit-box-shadow: ${t(s)};
+                -moz-box-shadow: ${t(s)};
+                box-shadow: ${t(s)};
+            }
+                    
+            #drawer {
+                width: 100%;
+                position: absolute;
+                top: var(--internal-or-header-height);
+                max-height: 0;
+                height: calc(100% - var(--internal-or-header-height));
+                transition: max-height 0.25s ease-out;
+                background: var(--internal-or-header-drawer-color);
+                color: var(--internal-or-header-drawer-text-color);
+                --or-icon-fill: var(--internal-or-header-drawer-text-color);
+                --or-icon-height: calc(var(--internal-or-header-drawer-item-size) - 10px);
+                --or-icon-width: calc(var(--internal-or-header-drawer-item-size) - 10px);
+                overflow: auto;
+            }
+            
+            #drawer[opened] {
+                max-height: 10000px;
+                transition: max-height 0.75s ease-in;
+            }
+                            
+            #drawer > div {
+                box-sizing: border-box;
+                width: 100%;
+                height: 100%;
+                padding: 10px 0px;
+                position: relative;
+            }
+              
+            .menu-btn {
+                background: none;
+                border: none;
+                cursor: pointer;
+                padding: 0 16px;
+                height: 100%;
+            }
+            
+            #menu-btn-mobile {
+                display: flex;
+                margin-left: auto;
+                --or-icon-height: calc(var(--internal-or-header-item-size) - 8px);
+                --or-icon-width: calc(var(--internal-or-header-item-size) - 8px);
+            }
+
+            #menu-btn-mobile #realm-picker > span{
+                max-width: 70px;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+            }
+    
+            #menu-btn-desktop {
+                display: none;
+            }
+            
+            #desktop-right {
+                margin-left: auto;
+                padding-right: 10px;
+                display: none;
+            }
+    
+            .mobile-bottom-border {
+                border-top: 1px solid var(--internal-or-header-drawer-separator-color);
+                margin-top: 16px;
+                padding-top: 8px;
+            }
+          
+            .menu-item {
+                opacity: 0.7;
+                cursor: pointer;
+                text-decoration: none !important;         
+                color: inherit;       
+                padding: 0 20px;
+                font-size: 14px;       
+            }        
+            
+            .menu-item:hover,
+            .menu-item[selected] {
+                opacity: 1;
+            }                
+            #desktop-left .menu-item or-icon {
+                margin-right: 10px;
+            }
+            #desktop-left .menu-item  {
+                display: none;
+                line-height: calc(var(--internal-or-header-height) - 4px);
+            }
+            
+            #desktop-right .menu-item  {
+                line-height: var(--internal-or-header-height);
+            }
+            
+            #drawer .menu-item  {
+                display: block;
+                line-height: var(--internal-or-header-drawer-item-size);
+                margin: 6px 0;
+                padding: 8px 16px;
+            }
+            
+            #drawer .menu-item  or-icon {
+                margin: 0 10px;
+            }
+
+            #desktop-left .menu-item[selected] {
+                display: inline-block;
+                line-height: var(--internal-or-header-height);
+            }
+    
+            or-mwc-menu {
+                margin-right: 10px;
+                display: block;
+            }
+            
+            .or-language-container {
+                display: flex;
+                height: 50px;
+                align-items: center;
+            }
+          
+            #realm-picker {
+                position: relative;
+                display: flex;
+                height: 50px;
+                align-items: center;
+                cursor: pointer;
+                margin-left: 10px;
+            }
+            
+            #realm-picker > span {
+                margin-right: 2px;
+            }
+          
+            /* Wide layout: when the viewport width is bigger than 768px, layout
+            changes to a wide layout. */
+            @media (min-width: 768px) {
+                #menu-btn-desktop {
+                    display: block;
+                }          
+    
+                #menu-btn-mobile {
+                    display: none;
+                }
+    
+                #drawer {
+                    display: none;
+                }
+                
+                #desktop-right {
+                    display: flex;
+                }
+                
+                #desktop-left .menu-item {
+                    display: inline-block;
+                }
+                
+                #desktop-left .menu-item or-icon {
+                    display: none;
+                }
+    
+                #desktop-left .menu-item[selected] {                
+                    border-bottom: 4px solid var(--internal-or-header-selected-color);
+                    line-height: calc(var(--internal-or-header-height) - 4px);
+                }
+
+                #logo {
+                    margin: var(--internal-or-header-logo-margin);
+                    height: var(--internal-or-header-logo-height);
+                    display: block;
+                }
+    
+                #logo-mobile {
+                    display: none;
+                }
+                
+                #desktop-left ::slotted(*) {
+                    display: inline-block;
+                }
+    
+                #desktop-left ::slotted(*[selected]) {                
+                    border-bottom: 4px solid var(--internal-or-header-selected-color);
+                    line-height: calc(var(--internal-or-header-height) - 4px);
+                }
+            }
+            
+            @media (min-width: 1024px) {
+               
+    
+                #desktop-left .menu-item or-icon{
+                    display: inline-block;
+                }
+            }
+    `}_onRealmSelect(e){this.store.dispatch(w(e))}shouldUpdate(e){return e.has("config")&&(this.activeMenu=getCurrentMenuItemRef(this.config&&this.config.mainMenu&&this.config.mainMenu.length>0?this.config.mainMenu[0].href:void 0)),e.has("realm")&&this._getAlarmButton(),super.shouldUpdate(e)}connectedCallback(){super.connectedCallback(),this._subscribeEvents()}disconnectedCallback(){super.disconnectedCallback(),this._unsubscribeEvents()}_subscribeEvents(){return __awaiter(this,void 0,void 0,function*(){d.events&&(this._eventSubscriptionId=yield d.events.subscribe({eventType:"alarm"},e=>this._getAlarmButton()))})}_unsubscribeEvents(){this._eventSubscriptionId&&(d.events.unsubscribe(this._eventSubscriptionId),this._eventSubscriptionId=void 0)}render(){if(!this.config)return r``;let e=this.config.mainMenu,o=this.config.secondaryMenu;return r`
+           <!-- Header -->
+            <div id="header" class="shadow">
+                <div id="toolbar-top">
+                    <div><img id="logo" src="${this.logo}" /><img id="logo-mobile" src="${this.logoMobile}" /></div>
+
+                    <!-- This gets hidden on a small screen-->
+                    <nav id="toolbar-list">
+                        <div id="desktop-left">
+                            ${e?e.filter(hasRequiredRole).map(e=>r`
+                                    <a class="menu-item" @click="${r=>this._onHeaderItemSelect(e)}" ?selected="${this.activeMenu===e.href}"><or-icon icon="${e.icon}"></or-icon><or-translate value="${e.text}"></or-translate></a>
+                                `):""}
+                        </div>
+                    </nav>
+                    <div id="desktop-right">
+                        <div id="alarm-btn">
+                            <a class="menu-item" @click="${e=>x.navigate("alarms")}">
+                                <or-icon icon="${this.alarmButton}" style="color:var(${this.alarmColor})" title="${_.t("alarm.alarm_plural")}"></or-icon>
+                            </a>
+                        </div>
+                        ${this._getRealmMenu(e=>this._onRealmSelect(e))}
+                        ${o?f(r`
+                            <button id="menu-btn-desktop" class="menu-btn" title="Menu"><or-icon icon="dots-vertical"></or-icon></button>
+                        `,getHeaderMenuItems(o),void 0,e=>this._onSecondaryMenuSelect(e)):""}
+                    </div>
+                    <div id="menu-btn-mobile">
+                        ${this._getRealmMenu(e=>this._onRealmSelect(e))}
+                        <button id="menu-btn" class="menu-btn" title="Menu" @click="${this._toggleDrawer}"><or-icon icon="${this._drawerOpened?"close":"menu"}"></or-icon></button>
+                    </div>
+                </div>
+            </div>
+            <div id="drawer" ?opened="${this._drawerOpened}" @click="${this._closeDrawer}">
+                <div>                    
+                    <div id="mobile-top">
+                        <nav id="drawer-list">
+                            ${e?e.filter(e=>!e.hideMobile&&hasRequiredRole(e)).map(e=>r`
+                                    <a class="menu-item" @click="${r=>this._onHeaderItemSelect(e)}" ?selected="${this.activeMenu===e.href}"><or-icon icon="${e.icon}"></or-icon><or-translate value="${e.text}"></or-translate></a>
+                                `):""}
+                        </nav>
+                    </div>
+                    
+                    ${o?r`
+                        <div id="mobile-bottom" class="${e.length>0?"mobile-bottom-border":""}">
+                            ${o.filter(e=>!e.hideMobile&&hasRequiredRole(e)).map(e=>r`
+                                    <a class="menu-item" @click="${r=>this._onHeaderItemSelect(e)}" ?selected="${this.activeMenu===e.href}"><or-icon icon="${e.icon}"></or-icon><or-translate value="${e.text}"></or-translate></a>
+                                `)}
+                        </div>`:""}
+                </div>
+            </div>
+        `}_getRealmMenu(e){let o=this.realms.find(e=>e.name===this.realm),t=r`
+            <div id="realm-picker">
+                ${this.realms.length>1?r`
+                    <span>${o?o.displayName:""}</span>
+                    <or-icon icon="chevron-down"></or-icon>
+                `:""}
+            </div>
+        `;if(d.isSuperUser()){let i=this.realms.map(e=>({text:e.displayName,value:e.name}));t=r`
+                ${f(t,i,o?o.name:void 0,r=>e(r))}
+            `}return t}_getAlarmButton(){return __awaiter(this,void 0,void 0,function*(){let e=!1;(d.hasRole("read:alarms")||d.hasRole("read:admin"))&&(e=(yield d.rest.api.AlarmResource.getAlarms({realm:d.displayRealm,status:"OPEN"})).data.length>0),this.alarmButton=e?"bell-badge-outline":"bell-outline",this.alarmColor=e?"--or-app-color4, ${unsafeCSS(DefaultColor4)}":"--or-app-color3, ${unsafeCSS(DefaultColor3)}"})}_onSecondaryMenuSelect(e){let r=this.config.secondaryMenu.find(r=>r.value===e);r&&this._onHeaderItemSelect(r)}_onHeaderItemSelect(e){e.action?e.action():e.href&&(e.absolute?window.location.href=e.href:x.navigate(e.href))}_closeDrawer(){this._drawerOpened=!1}_toggleDrawer(){this._drawerOpened=!this._drawerOpened}};__decorate([a({type:Array})],OrHeader.prototype,"realms",void 0),__decorate([a({type:String})],OrHeader.prototype,"realm",void 0),__decorate([a({type:Object})],OrHeader.prototype,"store",void 0),__decorate([a({type:String})],OrHeader.prototype,"logo",void 0),__decorate([a({type:String})],OrHeader.prototype,"logoMobile",void 0),__decorate([a({type:Object})],OrHeader.prototype,"config",void 0),__decorate([n("div[id=mobile-bottom]")],OrHeader.prototype,"_mobileBottomDiv",void 0),__decorate([a()],OrHeader.prototype,"activeMenu",void 0),__decorate([l()],OrHeader.prototype,"_drawerOpened",void 0),__decorate([l()],OrHeader.prototype,"alarmButton",void 0),__decorate([l()],OrHeader.prototype,"alarmColor",void 0),OrHeader=__decorate([i("or-header")],OrHeader);export{b as DEFAULT_LANGUAGES,OrHeader};