@openremote/manager 1.8.0-snapshot.20250725120002 → 1.8.0-snapshot.20250728102340

package/lib/pages/page-assets.js

@@ -92,57 +92,57 @@ export function pageAssetsProvider(store, config) {
 let PageAssets = class PageAssets extends Page {
     static get styles() {
         // language=CSS
-        return css `
-
-            or-asset-tree {
-                align-items: stretch;
-                z-index: 1;
-            }
-
-            .hideMobile {
-                display: none;
-            }
-
-            or-asset-viewer {
-                align-items: stretch;
-                z-index: 0;
-            }
-
-            .multipleAssetsView {
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                text-align: center;
-                height: 100%;
-                width: 100%;
-            }
-
-            .multipleAssetsView > div {
-                display: flex;
-                flex-direction: column;
-            }
-
-            .multipleAssetsView > div > *:first-child {
-                margin: 30px;                
-            }
-
-            @media only screen and (min-width: 768px){
-                or-asset-tree {
-                    width: 300px;
-                    min-width: 300px;
-                    box-shadow: ${unsafeCSS(DefaultBoxShadow)}
-                }
-
-                .hideMobile {
-                    display: flex;
-                }
-
-                or-asset-viewer,
-                or-asset-viewer.hideMobile {
-                    display: initial;
-                    max-width: calc(100vw - 300px);
-                }
-            }
+        return css `
+
+            or-asset-tree {
+                align-items: stretch;
+                z-index: 1;
+            }
+
+            .hideMobile {
+                display: none;
+            }
+
+            or-asset-viewer {
+                align-items: stretch;
+                z-index: 0;
+            }
+
+            .multipleAssetsView {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                text-align: center;
+                height: 100%;
+                width: 100%;
+            }
+
+            .multipleAssetsView > div {
+                display: flex;
+                flex-direction: column;
+            }
+
+            .multipleAssetsView > div > *:first-child {
+                margin: 30px;                
+            }
+
+            @media only screen and (min-width: 768px){
+                or-asset-tree {
+                    width: 300px;
+                    min-width: 300px;
+                    box-shadow: ${unsafeCSS(DefaultBoxShadow)}
+                }
+
+                .hideMobile {
+                    display: flex;
+                }
+
+                or-asset-viewer,
+                or-asset-viewer.hideMobile {
+                    display: initial;
+                    max-width: calc(100vw - 300px);
+                }
+            }
         `;
     }
     get name() {
@@ -188,32 +188,32 @@ let PageAssets = class PageAssets extends Page {
         let viewerHTML;
         const multiSelection = this._assetIds && this._assetIds.length > 1;
         if (multiSelection) {
-            viewerHTML = html `
-                <div class="multipleAssetsView hideMobile">
-                    <div>
-                        <or-translate value="multiAssetSelected" .options="${{ assetNbr: this._assetIds.length }}"></or-translate>
-                        <or-mwc-input .type="${InputType.BUTTON}" label="changeParent" @click="${() => this._onParentChangeClick()}" outlined></or-mwc-input>
-                    </div>
-                </div>
+            viewerHTML = html `
+                <div class="multipleAssetsView hideMobile">
+                    <div>
+                        <or-translate value="multiAssetSelected" .options="${{ assetNbr: this._assetIds.length }}"></or-translate>
+                        <or-mwc-input .type="${InputType.BUTTON}" label="changeParent" @click="${() => this._onParentChangeClick()}" outlined></or-mwc-input>
+                    </div>
+                </div>
             `;
         }
         else {
             const assetId = this._assetIds && this._assetIds.length === 1 ? this._assetIds[0] : undefined;
-            viewerHTML = html `
-                <or-asset-viewer id="viewer"
-                                 .config="${this.config && this.config.viewer ? this.config.viewer : undefined}"
-                                 class="${!assetId ? "hideMobile" : ""}" .assetId="${assetId}"
-                                 .editMode="${this._editMode}"
-                ></or-asset-viewer>
+            viewerHTML = html `
+                <or-asset-viewer id="viewer"
+                                 .config="${this.config && this.config.viewer ? this.config.viewer : undefined}"
+                                 class="${!assetId ? "hideMobile" : ""}" .assetId="${assetId}"
+                                 .editMode="${this._editMode}"
+                ></or-asset-viewer>
             `;
         }
-        return html `
-            <or-asset-tree id="tree" .config="${this.config && this.config.tree ? this.config.tree : PAGE_ASSETS_CONFIG_DEFAULT.tree}"
-                           class="${this._assetIds && this._assetIds.length === 1 ? "hideMobile" : ""}"
-                           .selectedIds="${this._assetIds}"
-                           .expandedIds="${this._expandedIds}"
-            ></or-asset-tree>
-            ${viewerHTML}
+        return html `
+            <or-asset-tree id="tree" .config="${this.config && this.config.tree ? this.config.tree : PAGE_ASSETS_CONFIG_DEFAULT.tree}"
+                           class="${this._assetIds && this._assetIds.length === 1 ? "hideMobile" : ""}"
+                           .selectedIds="${this._assetIds}"
+                           .expandedIds="${this._expandedIds}"
+            ></or-asset-tree>
+            ${viewerHTML}
         `;
     }
     // State is only utilised for initial loading, and for changes within the store.
@@ -228,9 +228,9 @@ let PageAssets = class PageAssets extends Page {
         const blockEvent = (ev) => {
             ev.stopPropagation();
         };
-        const dialogContent = html `
-            <or-asset-tree id="parent-asset-tree" disableSubscribe readonly .selectedIds="${[]}"
-                           @or-asset-tree-request-select="${blockEvent}"
+        const dialogContent = html `
+            <or-asset-tree id="parent-asset-tree" disableSubscribe readonly .selectedIds="${[]}"
+                           @or-asset-tree-request-select="${blockEvent}"
                            @or-asset-tree-selection-changed="${blockEvent}"></or-asset-tree>`;
         const setParent = () => {
             const assetTree = dialog.shadowRoot.getElementById("parent-asset-tree");
@@ -260,32 +260,32 @@ let PageAssets = class PageAssets extends Page {
         dialog = showDialog(new OrMwcDialog()
             .setContent(dialogContent)
             .setActions(dialogActions)
-            .setStyles(html `
-                <style>
-                    .mdc-dialog__surface {
-                        width: 400px;
-                        height: 800px;
-                        display: flex;
-                        overflow: visible;
-                        overflow-x: visible !important;
-                        overflow-y: visible !important;
-                    }
-
-                    #dialog-content {
-                        flex: 1;
-                        overflow: visible;
-                        min-height: 0;
-                        padding: 0;
-                    }
-
-                    footer.mdc-dialog__actions {
-                        border-top: 1px solid ${unsafeCSS(DefaultColor5)};
-                    }
-
-                    or-asset-tree {
-                        height: 100%;
-                    }
-                </style>
+            .setStyles(html `
+                <style>
+                    .mdc-dialog__surface {
+                        width: 400px;
+                        height: 800px;
+                        display: flex;
+                        overflow: visible;
+                        overflow-x: visible !important;
+                        overflow-y: visible !important;
+                    }
+
+                    #dialog-content {
+                        flex: 1;
+                        overflow: visible;
+                        min-height: 0;
+                        padding: 0;
+                    }
+
+                    footer.mdc-dialog__actions {
+                        border-top: 1px solid ${unsafeCSS(DefaultColor5)};
+                    }
+
+                    or-asset-tree {
+                        height: 100%;
+                    }
+                </style>
             `)
             .setHeading(i18next.t("setParent"))
             .setDismissAction(null));

package/lib/pages/page-configuration.js

@@ -68,97 +68,97 @@ let PageConfiguration = class PageConfiguration extends Page {
     }
     static get styles() {
         // language=CSS
-        return css `
-            :host {
-                flex: 1;
-                width: 100%;
-
-                display: flex;
-                justify-content: center;
-
-                --or-collapisble-panel-background-color: #fff;
-                --or-panel-background-color: #fff;
-                --or-panel-padding: 12px 24px 24px;
-                --or-panel-heading-margin: 0 0 10px 0;
-                --or-panel-background-color: var(--or-app-color1, ${unsafeCSS(DefaultColor1)});
-                --or-panel-heading-font-size: 14px;
-            }
-
-            or-panel {
-                width: calc(100% - 40px);
-                max-width: 1360px;
-                margin-bottom: 16px;
-            }
-
-            #wrapper {
-                display: flex;
-                min-width: 0px;
-                width: 100%;
-                height: 100%;
-                flex-direction: column;
-                align-items: center;
-                overflow: auto;
-            }
-
-            #header-wrapper {
-                display: flex;
-                width: calc(100% - 40px);
-                max-width: 1360px;
-                padding: 0 20px;
-                flex-direction: row;
-                align-items: center;
-                justify-content: space-between;
-                margin: 15px auto;
-            }
-
-            #header-title {
-                font-size: 18px;
-                font-weight: bold;
-                align-items: center;
-                display: flex;
-                color: var(--or-app-color3, ${unsafeCSS(DefaultColor3)});
-            }
-
-            #header-title > or-icon {
-                margin-right: 10px;
-                margin-left: 14px;
-            }
-
-            #header-actions or-mwc-input {
-                margin-left: 12px;
-            }
-
-            or-icon {
-                vertical-align: middle; 
-                --or-icon-width: 20px;
-                --or-icon-height: 20px;
-                margin-right: 2px;
-                margin-left: -5px;
-            }
-            
-            .notFound-container {
-                display: flex;
-                flex-direction: column;
-                gap: 24px;
-            }
-
-            @media screen and (max-width: 768px) {
-                or-panel {
-                    border-left: 0px;
-                    border-right: 0px;
-                    width: 100%;
-                    --or-panel-border-radius: 0;
-                }
-
-                .hide-mobile {
-                    display: none;
-                }
-            }
-
-            .subheader {
-                padding: 10px 0 4px;
-                font-weight: bolder;
-            }
+        return css `
+            :host {
+                flex: 1;
+                width: 100%;
+
+                display: flex;
+                justify-content: center;
+
+                --or-collapisble-panel-background-color: #fff;
+                --or-panel-background-color: #fff;
+                --or-panel-padding: 12px 24px 24px;
+                --or-panel-heading-margin: 0 0 10px 0;
+                --or-panel-background-color: var(--or-app-color1, ${unsafeCSS(DefaultColor1)});
+                --or-panel-heading-font-size: 14px;
+            }
+
+            or-panel {
+                width: calc(100% - 40px);
+                max-width: 1360px;
+                margin-bottom: 16px;
+            }
+
+            #wrapper {
+                display: flex;
+                min-width: 0px;
+                width: 100%;
+                height: 100%;
+                flex-direction: column;
+                align-items: center;
+                overflow: auto;
+            }
+
+            #header-wrapper {
+                display: flex;
+                width: calc(100% - 40px);
+                max-width: 1360px;
+                padding: 0 20px;
+                flex-direction: row;
+                align-items: center;
+                justify-content: space-between;
+                margin: 15px auto;
+            }
+
+            #header-title {
+                font-size: 18px;
+                font-weight: bold;
+                align-items: center;
+                display: flex;
+                color: var(--or-app-color3, ${unsafeCSS(DefaultColor3)});
+            }
+
+            #header-title > or-icon {
+                margin-right: 10px;
+                margin-left: 14px;
+            }
+
+            #header-actions or-mwc-input {
+                margin-left: 12px;
+            }
+
+            or-icon {
+                vertical-align: middle; 
+                --or-icon-width: 20px;
+                --or-icon-height: 20px;
+                margin-right: 2px;
+                margin-left: -5px;
+            }
+            
+            .notFound-container {
+                display: flex;
+                flex-direction: column;
+                gap: 24px;
+            }
+
+            @media screen and (max-width: 768px) {
+                or-panel {
+                    border-left: 0px;
+                    border-right: 0px;
+                    width: 100%;
+                    --or-panel-border-radius: 0;
+                }
+
+                .hide-mobile {
+                    display: none;
+                }
+            }
+
+            .subheader {
+                padding: 10px 0 4px;
+                font-weight: bolder;
+            }
         `;
     }
     get name() {
@@ -215,59 +215,59 @@ let PageConfiguration = class PageConfiguration extends Page {
         if (!manager.authenticated) {
             return html `<or-translate value="notAuthenticated"></or-translate>`;
         }
-        return html `
-            ${when(this.loading, () => html `
-                <or-loading-indicator></or-loading-indicator>
+        return html `
+            ${when(this.loading, () => html `
+                <or-loading-indicator></or-loading-indicator>
             `, () => {
             var _a;
             const saveDisabled = !this.managerConfigurationChanged && !this.mapConfigChanged && !this.tilesForUpload && !this.tilesForDeletion;
-            const realmHeading = html `
-                    <div id="heading" style="justify-content: space-between;">
-                        <span style="margin: 0;"><or-translate style="text-transform: uppercase;" value="configuration.realmStyling"></or-translate></span>
+            const realmHeading = html `
+                    <div id="heading" style="justify-content: space-between;">
+                        <span style="margin: 0;"><or-translate style="text-transform: uppercase;" value="configuration.realmStyling"></or-translate></span>
                         <or-conf-json .heading="${'manager_config.json'}" .config="${this.managerConfiguration}" class="hide-mobile" @saveLocalConfig="${(ev) => {
                 this.managerConfiguration = ev.detail.value;
                 this.managerConfigurationChanged = true;
-            }}"
-                        ></or-conf-json>
+            }}"
+                        ></or-conf-json>
                     </div>`;
-            const mapHeading = html `<div id="heading" style="justify-content: space-between;">
-                        <span style="margin: 0;"><or-translate style="text-transform: uppercase;" value="configuration.mapSettings"></or-translate></span>
+            const mapHeading = html `<div id="heading" style="justify-content: space-between;">
+                        <span style="margin: 0;"><or-translate style="text-transform: uppercase;" value="configuration.mapSettings"></or-translate></span>
                     </div>`;
             const realmOptions = (_a = this.realms) === null || _a === void 0 ? void 0 : _a.map((r) => ({ name: r.name, displayName: r.displayName, canDelete: true }));
             realmOptions.push({ name: 'default', displayName: 'Default', canDelete: false });
-            return html `
-                    <div id="wrapper">
-                        <div id="header-wrapper">
-                            <div id="header-title">
-                                <or-icon icon="palette-outline"></or-icon>
-                                <or-translate value="appearance"></or-translate>
-                            </div>
-                            <div id="header-actions">
-                                <or-mwc-input id="save-btn" .disabled="${saveDisabled}" raised type="button" label="save"
-                                    @or-mwc-input-changed="${() => this.saveAllConfigs(this.managerConfiguration, this.mapConfig)}"
-                                ></or-mwc-input>
-                            </div>
-                        </div>
-                        <or-panel .heading="${realmHeading}">
-                            ${when(this.managerConfiguration, () => html `
-                                <or-conf-panel id="managerConfig-panel" .config="${this.managerConfiguration}" .realmOptions="${realmOptions}"
-                                    @change="${() => { this.managerConfigurationChanged = true; }}"
-                                ></or-conf-panel>
-                            `, () => html `
-                                <div class="notFound-container">
-                                    <span><or-translate value="configuration.managerConfigNotFound"></or-translate></span>
-                                    <or-mwc-input type="${InputType.BUTTON}" label="configuration.tryAgain"
+            return html `
+                    <div id="wrapper">
+                        <div id="header-wrapper">
+                            <div id="header-title">
+                                <or-icon icon="palette-outline"></or-icon>
+                                <or-translate value="appearance"></or-translate>
+                            </div>
+                            <div id="header-actions">
+                                <or-mwc-input id="save-btn" .disabled="${saveDisabled}" raised type="button" label="save"
+                                    @or-mwc-input-changed="${() => this.saveAllConfigs(this.managerConfiguration, this.mapConfig)}"
+                                ></or-mwc-input>
+                            </div>
+                        </div>
+                        <or-panel .heading="${realmHeading}">
+                            ${when(this.managerConfiguration, () => html `
+                                <or-conf-panel id="managerConfig-panel" .config="${this.managerConfiguration}" .realmOptions="${realmOptions}"
+                                    @change="${() => { this.managerConfigurationChanged = true; }}"
+                                ></or-conf-panel>
+                            `, () => html `
+                                <div class="notFound-container">
+                                    <span><or-translate value="configuration.managerConfigNotFound"></or-translate></span>
+                                    <or-mwc-input type="${InputType.BUTTON}" label="configuration.tryAgain"
                                         @or-mwc-input-changed="${() => this.getManagerConfig().then(val => {
                 this.managerConfiguration = val;
-            }).catch(e => console.error(e))}"
-                                    ></or-mwc-input>
-                                </div>
-                            `)}
-                        </or-panel>
-                        <or-panel .heading="${mapHeading}">
-                            ${when(this.mapConfig, () => html `
-                                <or-conf-map-global .config="${this.mapConfig}" .filename="${this.customMapFilename}" .limit="${this.customMapLimit}"
-                                    @change="${() => { this.mapConfigChanged = true; }}"
+            }).catch(e => console.error(e))}"
+                                    ></or-mwc-input>
+                                </div>
+                            `)}
+                        </or-panel>
+                        <or-panel .heading="${mapHeading}">
+                            ${when(this.mapConfig, () => html `
+                                <or-conf-map-global .config="${this.mapConfig}" .filename="${this.customMapFilename}" .limit="${this.customMapLimit}"
+                                    @change="${() => { this.mapConfigChanged = true; }}"
                                     @map-file-changed="${(e) => {
                 // If a map file is provided prepare for upload
                 if (e.detail) {
@@ -278,29 +278,29 @@ let PageConfiguration = class PageConfiguration extends Page {
                 }
                 // Otherwise assume it is meant for deletion
                 this.tilesForDeletion = !e.detail;
-            }}"
-                                ></or-conf-map-global>
-                                <div class="subheader"><or-translate value="configuration.realmMapSettingsTitle"></or-translate></div>
-                                <or-conf-panel id="mapConfig-panel" .config="${this.mapConfig}" .realmOptions="${realmOptions}"
-                                               @change="${() => { this.mapConfigChanged = true; }}"
-                                ></or-conf-panel>
-                            `, () => html `
-                                <div class="notFound-container">
-                                    <span><or-translate value="configuration.mapSettingsNotFound"></or-translate></span>
-                                    <or-mwc-input type="${InputType.BUTTON}" label="configuration.tryAgain"
+            }}"
+                                ></or-conf-map-global>
+                                <div class="subheader"><or-translate value="configuration.realmMapSettingsTitle"></or-translate></div>
+                                <or-conf-panel id="mapConfig-panel" .config="${this.mapConfig}" .realmOptions="${realmOptions}"
+                                               @change="${() => { this.mapConfigChanged = true; }}"
+                                ></or-conf-panel>
+                            `, () => html `
+                                <div class="notFound-container">
+                                    <span><or-translate value="configuration.mapSettingsNotFound"></or-translate></span>
+                                    <or-mwc-input type="${InputType.BUTTON}" label="configuration.tryAgain"
                                         @or-mwc-input-changed="${() => this.getMapConfig().then(val => {
                 this.mapConfig = val;
-            }).catch(e => console.error(e))}"
-                                    ></or-mwc-input>
-                                </div>
-                            `)}
-                        </or-panel>
-                        <div  style="margin: 0px auto; font-size: smaller;">
-                            OpenRemote Manager v${APP_VERSION}
-                        </div>
-                    </div>
+            }).catch(e => console.error(e))}"
+                                    ></or-mwc-input>
+                                </div>
+                            `)}
+                        </or-panel>
+                        <div  style="margin: 0px auto; font-size: smaller;">
+                            OpenRemote Manager v${APP_VERSION}
+                        </div>
+                    </div>
                 `;
-        })}
+        })}
         `;
     }
     /* ---------------- */