@openremote/manager 1.8.0-snapshot.20250723094757 → 1.8.0-snapshot.20250725120000

package/lib/components/configuration/or-conf-map/or-conf-map-global.js

@@ -41,82 +41,82 @@ let OrConfMapGlobal = class OrConfMapGlobal extends LitElement {
         var _a, _b, _c, _d, _e;
         const isCustom = (_b = (_a = this.config.sources) === null || _a === void 0 ? void 0 : _a.vector_tiles) === null || _b === void 0 ? void 0 : _b.custom;
         const hasExternalSource = Object.keys(this.config.sources).length > 1;
-        return html `
-            <div class="map-tile-settings">
-                <div class="map-tile-server-group">
-                    <div class="subheader"><or-translate value="configuration.global.mapTileServer"></or-translate></div>
-                    <span>
-                        <or-translate value="configuration.global.mapTileServerDescription"></or-translate><br>
-                        <or-translate class="note" value="configuration.global.mapTileServerNote"></or-translate>
-                    </span>
-                    <or-mwc-input class="input"
-                        .value="${isCustom ? (_e = (_d = (_c = this.config.sources) === null || _c === void 0 ? void 0 : _c.vector_tiles) === null || _d === void 0 ? void 0 : _d.tiles) === null || _e === void 0 ? void 0 : _e[0] : undefined}"
-                        .type="${InputType.URL}"
-                        .label="${i18next.t("configuration.global.mapTileServerPlaceholder")}"
-                        placeholder="https://api.example.com/tileset/{z}/{x}/{y}"
+        return html `
+            <div class="map-tile-settings">
+                <div class="map-tile-server-group">
+                    <div class="subheader"><or-translate value="configuration.global.mapTileServer"></or-translate></div>
+                    <span>
+                        <or-translate value="configuration.global.mapTileServerDescription"></or-translate><br>
+                        <or-translate class="note" value="configuration.global.mapTileServerNote"></or-translate>
+                    </span>
+                    <or-mwc-input class="input"
+                        .value="${isCustom ? (_e = (_d = (_c = this.config.sources) === null || _c === void 0 ? void 0 : _c.vector_tiles) === null || _d === void 0 ? void 0 : _d.tiles) === null || _e === void 0 ? void 0 : _e[0] : undefined}"
+                        .type="${InputType.URL}"
+                        .label="${i18next.t("configuration.global.mapTileServerPlaceholder")}"
+                        placeholder="https://api.example.com/tileset/{z}/{x}/{y}"
                         @or-mwc-input-changed="${(e) => {
             this.config.sources.vector_tiles.tiles = e.detail.value ? [e.detail.value] : undefined;
             this.config.sources.vector_tiles.custom = !!e.detail.value;
             this.notifyConfigChange(this.config);
-        }}"
-                    ></or-mwc-input>
-                </div>
-                <div class="map-tile-upload-group">
-                    <div class="subheader"><or-translate value="configuration.global.mapTiles"></or-translate></div>
-                    <span>
-                        <or-translate value="configuration.global.uploadMapTiles"></or-translate><br>
-                        <or-translate class="note" value="configuration.global.uploadMapTilesNote"
-                            .options=${{ limit: this.humanReadableBytes(this.limit) }}
-                        ></or-translate>
-                    </span>
-                    <div class="input d-inline-flex" style="height: 56px">
-                        <div id="fileupload" style="display: flex; align-items: center">
-                            <or-mwc-input outlined label="selectFile" style="width: fit-content; padding-right: 12px;" .type="${InputType.BUTTON}" @or-mwc-input-changed="${() => this.shadowRoot.getElementById('fileupload-elem').click()}">
-                                <input id="fileupload-elem" name="configfile" type="file" accept=".mbtiles" @change="${this.notifyMapFileChange}"/>
-                            </or-mwc-input>
-                            <or-mwc-input id="filename-elem" style="width: unset" .value="${this.filename}" .label="${i18next.t("file")}" .type="${InputType.TEXT}" disabled>
-                            </or-mwc-input>
-                            ${when(this.filename, () => html `<or-mwc-input type="${InputType.BUTTON}" iconColor="black" icon="delete"
-                                @or-mwc-input-changed="${this.notifyMapFileChange}"
-                            ></or-mwc-input>`)}
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="map-style-settings">
-                <div class="map-style-server-group">
-                    <span>
-                        <div class="subheader"><or-translate value="configuration.global.mapStyleJsonUrl"></or-translate></div>
-                        <or-translate value="configuration.global.mapStyleJsonUrlDescription"></or-translate><br>
-                        <or-translate class="note" value="configuration.global.mapStyleJsonUrlNote"></or-translate>
-                    </span>
-                    <div style="display: flex; height: 56px; align-items: center">
-                        <or-mwc-input class="input"
-                            .value="${this.config.override}"
-                            .type="${InputType.URL}"
-                            .label="${i18next.t("configuration.global.mapStyleJsonUrlPlaceholder")}"
-                            placeholder="https://api.example.com/tileset/style.json"
+        }}"
+                    ></or-mwc-input>
+                </div>
+                <div class="map-tile-upload-group">
+                    <div class="subheader"><or-translate value="configuration.global.mapTiles"></or-translate></div>
+                    <span>
+                        <or-translate value="configuration.global.uploadMapTiles"></or-translate><br>
+                        <or-translate class="note" value="configuration.global.uploadMapTilesNote"
+                            .options=${{ limit: this.humanReadableBytes(this.limit) }}
+                        ></or-translate>
+                    </span>
+                    <div class="input d-inline-flex" style="height: 56px">
+                        <div id="fileupload" style="display: flex; align-items: center">
+                            <or-mwc-input outlined label="selectFile" style="width: fit-content; padding-right: 12px;" .type="${InputType.BUTTON}" @or-mwc-input-changed="${() => this.shadowRoot.getElementById('fileupload-elem').click()}">
+                                <input id="fileupload-elem" name="configfile" type="file" accept=".mbtiles" @change="${this.notifyMapFileChange}"/>
+                            </or-mwc-input>
+                            <or-mwc-input id="filename-elem" style="width: unset" .value="${this.filename}" .label="${i18next.t("file")}" .type="${InputType.TEXT}" disabled>
+                            </or-mwc-input>
+                            ${when(this.filename, () => html `<or-mwc-input type="${InputType.BUTTON}" iconColor="black" icon="delete"
+                                @or-mwc-input-changed="${this.notifyMapFileChange}"
+                            ></or-mwc-input>`)}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="map-style-settings">
+                <div class="map-style-server-group">
+                    <span>
+                        <div class="subheader"><or-translate value="configuration.global.mapStyleJsonUrl"></or-translate></div>
+                        <or-translate value="configuration.global.mapStyleJsonUrlDescription"></or-translate><br>
+                        <or-translate class="note" value="configuration.global.mapStyleJsonUrlNote"></or-translate>
+                    </span>
+                    <div style="display: flex; height: 56px; align-items: center">
+                        <or-mwc-input class="input"
+                            .value="${this.config.override}"
+                            .type="${InputType.URL}"
+                            .label="${i18next.t("configuration.global.mapStyleJsonUrlPlaceholder")}"
+                            placeholder="https://api.example.com/tileset/style.json"
                             @or-mwc-input-changed="${(e) => {
             this.config.override = e.detail.value || undefined;
             this.notifyConfigChange(this.config);
             this.requestUpdate();
-        }}"
-                        ></or-mwc-input>
-                    </div>
-                </div>
-                <div class="map-style-layers-group">
-                    <span>
-                        <div class="subheader"><or-translate value="configuration.global.mapLayers"></or-translate></div>
-                        <or-translate value="configuration.global.mapImportStyle"></or-translate>
-                        <or-translate class="note" value="configuration.global.mapImportStyleNote"></or-translate>
-                    </span>
-                    <div style="display: flex; gap: 12px; align-items: center">
-                        <or-mwc-input class="input fit-content" type="button" outlined icon="import" 
-                            .label="${i18next.t("configuration.global.import")}"
-                            .disabled="${!this.config.override}" @or-mwc-input-changed="${this.importMapSettings}"
-                        ></or-mwc-input>
-                        <or-conf-json class="input fit-content hide-mobile" .heading="${i18next.t("configuration.global.mapLayers")}"
-                            .config="${hasExternalSource ? this.config.layers.filter(({ id }) => !id.startsWith("or:")) : this.config.layers}"
+        }}"
+                        ></or-mwc-input>
+                    </div>
+                </div>
+                <div class="map-style-layers-group">
+                    <span>
+                        <div class="subheader"><or-translate value="configuration.global.mapLayers"></or-translate></div>
+                        <or-translate value="configuration.global.mapImportStyle"></or-translate>
+                        <or-translate class="note" value="configuration.global.mapImportStyleNote"></or-translate>
+                    </span>
+                    <div style="display: flex; gap: 12px; align-items: center">
+                        <or-mwc-input class="input fit-content" type="button" outlined icon="import" 
+                            .label="${i18next.t("configuration.global.import")}"
+                            .disabled="${!this.config.override}" @or-mwc-input-changed="${this.importMapSettings}"
+                        ></or-mwc-input>
+                        <or-conf-json class="input fit-content hide-mobile" .heading="${i18next.t("configuration.global.mapLayers")}"
+                            .config="${hasExternalSource ? this.config.layers.filter(({ id }) => !id.startsWith("or:")) : this.config.layers}"
                             @saveLocalConfig="${(ev) => {
             if (Array.isArray(ev.detail.value)) {
                 if (hasExternalSource) {
@@ -131,17 +131,17 @@ let OrConfMapGlobal = class OrConfMapGlobal extends LitElement {
                 this.notifyConfigChange(this.config);
                 this.requestUpdate();
             }
-        }}"
-                        ></or-conf-json>
-                        ${when(hasExternalSource, () => html `
-                            <or-mwc-input class="input fit-content" outlined type="button" icon="undo"
-                                .label="${i18next.t("configuration.global.reset")}"
-                                @or-mwc-input-changed="${this.resetMapSettings}"
-                            ></or-mwc-input>
-                        `)}
-                        </div>
-                </div>
-            </div>
+        }}"
+                        ></or-conf-json>
+                        ${when(hasExternalSource, () => html `
+                            <or-mwc-input class="input fit-content" outlined type="button" icon="undo"
+                                .label="${i18next.t("configuration.global.reset")}"
+                                @or-mwc-input-changed="${this.resetMapSettings}"
+                            ></or-mwc-input>
+                        `)}
+                        </div>
+                </div>
+            </div>
         `;
     }
     notifyConfigChange(config) {
@@ -207,80 +207,80 @@ let OrConfMapGlobal = class OrConfMapGlobal extends LitElement {
         return (bytes / Math.pow(1000, exponent)).toFixed(2) + " " + unit[exponent];
     }
 };
-OrConfMapGlobal.styles = css `
-        .subheader {
-            padding: 10px 0 4px;
-            font-weight: bolder;
-        }
-
-        .map-tile-settings {
-            display: flex;
-        }
-
-        .map-tile-server-group {
-            flex-direction: column;
-            width: 50%;
-        }
-
-        .map-tile-upload-group {
-            flex-direction: column;
-            padding-left: 12px;
-            width: 50%;
-        }
-
-        .map-style-settings {
-            display: flex;
-        }
-
-        .map-style-server-group {
-            flex-direction: column;
-            width: 50%;
-        }
-
-        .map-style-layers-group {
-            flex-direction: column;
-            padding-left: 12px;
-            width: 50%;
-        }
-
-        @media screen and (max-width: 768px) {
-            .map-tile-server-group, .map-tile-upload-group,
-            .map-style-server-group, .map-style-layers-group  {
-                width: 100%;
-                padding: unset;
-            }
-            .map-tile-settings, .map-style-settings {
-                display: block;
-            }
-        }
-
-        .input {
-            width: 100%;
-            max-width: 800px;
-            padding: 10px 0;
-        }
-
-        .input or-mwc-input:not([icon]) {
-            width: 80%;
-        }
-
-        .note {
-            font-style: italic;
-            color: rgba(0, 0, 0, 0.6);
-        }
-
-        or-file-uploader {
-            width: 108px;
-            height: 108px;
-        }
-
-        .d-inline-flex {
-            display: inline-flex;
-        }
-        
-        .fit-content {
-            width: fit-content;
-        }
+OrConfMapGlobal.styles = css `
+        .subheader {
+            padding: 10px 0 4px;
+            font-weight: bolder;
+        }
+
+        .map-tile-settings {
+            display: flex;
+        }
+
+        .map-tile-server-group {
+            flex-direction: column;
+            width: 50%;
+        }
+
+        .map-tile-upload-group {
+            flex-direction: column;
+            padding-left: 12px;
+            width: 50%;
+        }
+
+        .map-style-settings {
+            display: flex;
+        }
+
+        .map-style-server-group {
+            flex-direction: column;
+            width: 50%;
+        }
+
+        .map-style-layers-group {
+            flex-direction: column;
+            padding-left: 12px;
+            width: 50%;
+        }
+
+        @media screen and (max-width: 768px) {
+            .map-tile-server-group, .map-tile-upload-group,
+            .map-style-server-group, .map-style-layers-group  {
+                width: 100%;
+                padding: unset;
+            }
+            .map-tile-settings, .map-style-settings {
+                display: block;
+            }
+        }
+
+        .input {
+            width: 100%;
+            max-width: 800px;
+            padding: 10px 0;
+        }
+
+        .input or-mwc-input:not([icon]) {
+            width: 80%;
+        }
+
+        .note {
+            font-style: italic;
+            color: rgba(0, 0, 0, 0.6);
+        }
+
+        or-file-uploader {
+            width: 108px;
+            height: 108px;
+        }
+
+        .d-inline-flex {
+            display: inline-flex;
+        }
+        
+        .fit-content {
+            width: fit-content;
+        }
     `;
 __decorate([
     property()

package/lib/components/configuration/or-conf-panel.js

@@ -66,36 +66,36 @@ let OrConfPanel = class OrConfPanel extends LitElement {
         // Render the panels
         const realmConfigs = this.getRealmsProperty(this.config);
         const availableRealms = this.getAvailableRealms(this.config, this.realmOptions);
-        return html `
-            <div class="panels">
+        return html `
+            <div class="panels">
                 ${Object.entries(realmConfigs === undefined ? {} : realmConfigs).map(([key, value]) => {
             const realmOption = this.realmOptions.find((r) => r.name === key);
             switch (type) {
                 case "managerconfig":
-                    return html `
-                                <or-conf-realm-card .expanded="${this._addedRealm === key}" .name="${key}" .realm="${value}" .canRemove="${realmOption === null || realmOption === void 0 ? void 0 : realmOption.canDelete}"
-                                                    @change="${() => this.notifyConfigChange(this.config)}" @remove="${() => this._removeRealm(key)}"
-                                ></or-conf-realm-card>
+                    return html `
+                                <or-conf-realm-card .expanded="${this._addedRealm === key}" .name="${key}" .realm="${value}" .canRemove="${realmOption === null || realmOption === void 0 ? void 0 : realmOption.canDelete}"
+                                                    @change="${() => this.notifyConfigChange(this.config)}" @remove="${() => this._removeRealm(key)}"
+                                ></or-conf-realm-card>
                             `;
                 case "mapconfig":
-                    return html `
-                                <or-conf-map-card .expanded="${this._addedRealm === key}" .name="${key}" .map="${value}" .canRemove="${realmOption === null || realmOption === void 0 ? void 0 : realmOption.canDelete}"
-                                                  @change="${() => this.notifyConfigChange(this.config)}" @remove="${() => this._removeRealm(key)}"
-                                ></or-conf-map-card>
+                    return html `
+                                <or-conf-map-card .expanded="${this._addedRealm === key}" .name="${key}" .map="${value}" .canRemove="${realmOption === null || realmOption === void 0 ? void 0 : realmOption.canDelete}"
+                                                  @change="${() => this.notifyConfigChange(this.config)}" @remove="${() => this._removeRealm(key)}"
+                                ></or-conf-map-card>
                             `;
                 default:
                     return html `Unknown error.`;
             }
-        })}
-            </div>
-            <!-- Show an "ADD REALM" button if there are realms available to be added -->
-            <div style="display: flex; justify-content: space-between;">
-                ${when(availableRealms.length > 0, () => html `
-                    <or-mwc-input id="btn-add-realm" .type="${InputType.BUTTON}" label="${type === 'mapconfig' ? 'configuration.addMapCustomization' : 'configuration.addRealmCustomization'}" icon="plus"
-                                  @click="${() => this._showAddingRealmDialog()}"
-                    ></or-mwc-input>
-                `)}
-            </div>
+        })}
+            </div>
+            <!-- Show an "ADD REALM" button if there are realms available to be added -->
+            <div style="display: flex; justify-content: space-between;">
+                ${when(availableRealms.length > 0, () => html `
+                    <or-mwc-input id="btn-add-realm" .type="${InputType.BUTTON}" label="${type === 'mapconfig' ? 'configuration.addMapCustomization' : 'configuration.addRealmCustomization'}" icon="plus"
+                                  @click="${() => this._showAddingRealmDialog()}"
+                    ></or-mwc-input>
+                `)}
+            </div>
         `;
     }
     /* ----------------------------------- */
@@ -166,32 +166,32 @@ let OrConfPanel = class OrConfPanel extends LitElement {
         showDialog(new OrMwcDialog()
             .setHeading(i18next.t('configuration.addMapCustomization'))
             .setActions(dialogActions)
-            .setContent(html `
-                <or-mwc-input class="selector" label="Realm" @or-mwc-input-changed="${(e) => this._addedRealm = e.detail.value}" .type="${InputType.SELECT}"
+            .setContent(html `
+                <or-mwc-input class="selector" label="Realm" @or-mwc-input-changed="${(e) => this._addedRealm = e.detail.value}" .type="${InputType.SELECT}"
                               .options="${Object.entries(this.getAvailableRealms(this.config, this.realmOptions)).map(([, value]) => {
             return [value.name, value.displayName];
-        })}"
-                ></or-mwc-input>
+        })}"
+                ></or-mwc-input>
             `)
-            .setStyles(html `
-                <style>
-                    .mdc-dialog__surface {
-                        padding: 4px 8px;
-                    }
-
-                    #dialog-content {
-                        flex: 1;
-                        overflow: visible;
-                        min-height: 0;
-                        padding: 0;
-                    }
-
-                    or-mwc-input.selector {
-                        width: 300px;
-                        display: block;
-                        padding: 10px 20px;
-                    }
-                </style>
+            .setStyles(html `
+                <style>
+                    .mdc-dialog__surface {
+                        padding: 4px 8px;
+                    }
+
+                    #dialog-content {
+                        flex: 1;
+                        overflow: visible;
+                        min-height: 0;
+                        padding: 0;
+                    }
+
+                    or-mwc-input.selector {
+                        width: 300px;
+                        display: block;
+                        padding: 10px 20px;
+                    }
+                </style>
             `)
             .setDismissAction(null));
     }