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

package/lib/components/configuration/or-conf-realm/or-conf-realm-card.js

@@ -156,19 +156,19 @@ let OrConfRealmCard = class OrConfRealmCard extends LitElement {
         showDialog(new OrMwcDialog()
             .setHeading(i18next.t('delete'))
             .setActions(dialogActions)
-            .setContent(html `
-                ${i18next.t('configuration.deleteRealmCustomizationConfirm')}
+            .setContent(html `
+                ${i18next.t('configuration.deleteRealmCustomizationConfirm')}
             `)
-            .setStyles(html `
-                <style>
-                    .mdc-dialog__surface {
-                        padding: 4px 8px;
-                    }
-
-                    #dialog-content {
-                        padding: 24px;
-                    }
-                </style>
+            .setStyles(html `
+                <style>
+                    .mdc-dialog__surface {
+                        padding: 4px 8px;
+                    }
+
+                    #dialog-content {
+                        padding: 24px;
+                    }
+                </style>
             `)
             .setDismissAction(null));
     }
@@ -188,104 +188,104 @@ let OrConfRealmCard = class OrConfRealmCard extends LitElement {
                 (!search && ((_a = app.realm.notifications) === null || _a === void 0 ? void 0 : _a.languages.includes(entry[0]))) ||
                 entry[1].toLowerCase().includes(search === null || search === void 0 ? void 0 : search.toLowerCase());
         });
-        return html `
-            <or-collapsible-panel .expanded="${app.expanded}">
-                <div slot="header" class="header-container">
-                    ${app.name}
-                </div>
-                <div slot="content" class="panel-content">
-                    <div class="subheader">${i18next.t("configuration.main")}</div>
-                    <or-mwc-input class="appTitle" .type="${InputType.TEXT}" .label="${i18next.t("configuration.realmTitle")}" value="${(_b = app.realm) === null || _b === void 0 ? void 0 : _b.appTitle}"
+        return html `
+            <or-collapsible-panel .expanded="${app.expanded}">
+                <div slot="header" class="header-container">
+                    ${app.name}
+                </div>
+                <div slot="content" class="panel-content">
+                    <div class="subheader">${i18next.t("configuration.main")}</div>
+                    <or-mwc-input class="appTitle" .type="${InputType.TEXT}" .label="${i18next.t("configuration.realmTitle")}" value="${(_b = app.realm) === null || _b === void 0 ? void 0 : _b.appTitle}"
                                   @or-mwc-input-changed="${(e) => {
             app.realm.appTitle = e.detail.value;
             app.notifyConfigChange(app.realm);
-        }}"
-                    ></or-mwc-input>
-                    <or-mwc-input class="language" .type="${InputType.SELECT}" .label="${i18next.t("configuration.defaultLanguage")}" value="${(_c = app.realm) === null || _c === void 0 ? void 0 : _c.language}"
-                                  .options="${Object.entries(DEFAULT_LANGUAGES).map(([key, value]) => [key, i18next.t(value)])}"
+        }}"
+                    ></or-mwc-input>
+                    <or-mwc-input class="language" .type="${InputType.SELECT}" .label="${i18next.t("configuration.defaultLanguage")}" value="${(_c = app.realm) === null || _c === void 0 ? void 0 : _c.language}"
+                                  .options="${Object.entries(DEFAULT_LANGUAGES).map(([key, value]) => [key, i18next.t(value)])}"
                                   @or-mwc-input-changed="${(e) => {
             app.realm.language = e.detail.value;
             app.notifyConfigChange(app.realm);
-        }}"
-                    ></or-mwc-input>
-                    <div class="logo-group">
-                        <div class="subheader">${i18next.t("configuration.images")}</div>
-                        <div class="d-inline-flex">
-                            <or-file-uploader .title="${i18next.t('configuration.logo')}"
-                                              @change="${(e) => __awaiter(this, void 0, void 0, function* () { return yield app._setImageForUpload(e.detail.value[0], "logo"); })}"
-                                              .src="${app.logo ? app.logo : app.realm.logo}" .managerUrl="${managerUrl}"></or-file-uploader>
-                            <or-file-uploader .title="${i18next.t('configuration.logoMobile')}"
-                                              @change="${(e) => __awaiter(this, void 0, void 0, function* () { return yield app._setImageForUpload(e.detail.value[0], "logoMobile"); })}"
-                                              .src="${app.logoMobile ? app.logoMobile : app.realm.logoMobile}" .managerUrl="${managerUrl}"></or-file-uploader>
-                            <or-file-uploader .title="${html `Favicon`}"
-                                              @change="${(e) => __awaiter(this, void 0, void 0, function* () { return yield app._setImageForUpload(e.detail.value[0], "favicon"); })}"
-                                              .src="${app.favicon ? app.favicon : app.realm.favicon}" .managerUrl="${managerUrl}"></or-file-uploader>
-                        </div>
-                    </div>
-                    <div class="color-group">
-                        <div class="subheader">${i18next.t('configuration.realmColors')}</div>
-                        <div>
-                            <or-mwc-input class="color-item" .type="${InputType.COLOUR}" value="${colors["--or-app-color4"]}"
-                                          .label="${i18next.t('configuration.--or-app-color4')}"
-                                          @or-mwc-input-changed="${(e) => app._setColor("--or-app-color4", e.detail.value)}"></or-mwc-input>
-                            <or-mwc-input class="color-item" .type="${InputType.COLOUR}" value="${colors["--or-app-color5"]}"
-                                          .label="${i18next.t('configuration.--or-app-color5')}"
-                                          @or-mwc-input-changed="${(e) => app._setColor("--or-app-color5", e.detail.value)}"></or-mwc-input>
-                            <or-mwc-input class="color-item" .type="${InputType.COLOUR}" value="${colors["--or-app-color6"]}"
-                                          .label="${i18next.t("configuration.--or-app-color6")}"
-                                          @or-mwc-input-changed="${(e) => app._setColor("--or-app-color6", e.detail.value)}"></or-mwc-input>
-                            <or-mwc-input class="color-item" .type="${InputType.COLOUR}" value="${colors["--or-app-color1"]}"
-                                          .label="${i18next.t("configuration.--or-app-color1")}"
-                                          @or-mwc-input-changed="${(e) => app._setColor("--or-app-color1", e.detail.value)}"></or-mwc-input>
-                            <or-mwc-input class="color-item" .type="${InputType.COLOUR}" value="${colors["--or-app-color2"]}"
-                                          .label="${i18next.t("configuration.--or-app-color2")}"
-                                          @or-mwc-input-changed="${(e) => app._setColor("--or-app-color2", e.detail.value)}"></or-mwc-input>
-                            <or-mwc-input class="color-item" .type="${InputType.COLOUR}" value="${colors["--or-app-color3"]}"
-                                          .label="${i18next.t("configuration.--or-app-color3")}"
-                                          @or-mwc-input-changed="${(e) => app._setColor("--or-app-color3", e.detail.value)}"></or-mwc-input>
-                            <or-mwc-input class="color-item" .type="${InputType.COLOUR}" value="${colors["--or-app-color8"]}"
-                                          .label="${i18next.t("configuration.--or-app-color8")}"
-                                          @or-mwc-input-changed="${(e) => app._setColor("--or-app-color8", e.detail.value)}"></or-mwc-input>
-                        </div>
-                    </div>
-                    <div class="header-group">
-                        <div class="subheader">${i18next.t("configuration.navigation")}</div>
-                        <span>${i18next.t("configuration.navigationDescription")}</span>
-                        <div>
-                            <or-mwc-input
-                                    .type="${InputType.SELECT}" multiple
-                                    class="header-item"
-                                    .label="${i18next.t("configuration.primaryNavigation")}"
+        }}"
+                    ></or-mwc-input>
+                    <div class="logo-group">
+                        <div class="subheader">${i18next.t("configuration.images")}</div>
+                        <div class="d-inline-flex">
+                            <or-file-uploader .title="${i18next.t('configuration.logo')}"
+                                              @change="${(e) => __awaiter(this, void 0, void 0, function* () { return yield app._setImageForUpload(e.detail.value[0], "logo"); })}"
+                                              .src="${app.logo ? app.logo : app.realm.logo}" .managerUrl="${managerUrl}"></or-file-uploader>
+                            <or-file-uploader .title="${i18next.t('configuration.logoMobile')}"
+                                              @change="${(e) => __awaiter(this, void 0, void 0, function* () { return yield app._setImageForUpload(e.detail.value[0], "logoMobile"); })}"
+                                              .src="${app.logoMobile ? app.logoMobile : app.realm.logoMobile}" .managerUrl="${managerUrl}"></or-file-uploader>
+                            <or-file-uploader .title="${html `Favicon`}"
+                                              @change="${(e) => __awaiter(this, void 0, void 0, function* () { return yield app._setImageForUpload(e.detail.value[0], "favicon"); })}"
+                                              .src="${app.favicon ? app.favicon : app.realm.favicon}" .managerUrl="${managerUrl}"></or-file-uploader>
+                        </div>
+                    </div>
+                    <div class="color-group">
+                        <div class="subheader">${i18next.t('configuration.realmColors')}</div>
+                        <div>
+                            <or-mwc-input class="color-item" .type="${InputType.COLOUR}" value="${colors["--or-app-color4"]}"
+                                          .label="${i18next.t('configuration.--or-app-color4')}"
+                                          @or-mwc-input-changed="${(e) => app._setColor("--or-app-color4", e.detail.value)}"></or-mwc-input>
+                            <or-mwc-input class="color-item" .type="${InputType.COLOUR}" value="${colors["--or-app-color5"]}"
+                                          .label="${i18next.t('configuration.--or-app-color5')}"
+                                          @or-mwc-input-changed="${(e) => app._setColor("--or-app-color5", e.detail.value)}"></or-mwc-input>
+                            <or-mwc-input class="color-item" .type="${InputType.COLOUR}" value="${colors["--or-app-color6"]}"
+                                          .label="${i18next.t("configuration.--or-app-color6")}"
+                                          @or-mwc-input-changed="${(e) => app._setColor("--or-app-color6", e.detail.value)}"></or-mwc-input>
+                            <or-mwc-input class="color-item" .type="${InputType.COLOUR}" value="${colors["--or-app-color1"]}"
+                                          .label="${i18next.t("configuration.--or-app-color1")}"
+                                          @or-mwc-input-changed="${(e) => app._setColor("--or-app-color1", e.detail.value)}"></or-mwc-input>
+                            <or-mwc-input class="color-item" .type="${InputType.COLOUR}" value="${colors["--or-app-color2"]}"
+                                          .label="${i18next.t("configuration.--or-app-color2")}"
+                                          @or-mwc-input-changed="${(e) => app._setColor("--or-app-color2", e.detail.value)}"></or-mwc-input>
+                            <or-mwc-input class="color-item" .type="${InputType.COLOUR}" value="${colors["--or-app-color3"]}"
+                                          .label="${i18next.t("configuration.--or-app-color3")}"
+                                          @or-mwc-input-changed="${(e) => app._setColor("--or-app-color3", e.detail.value)}"></or-mwc-input>
+                            <or-mwc-input class="color-item" .type="${InputType.COLOUR}" value="${colors["--or-app-color8"]}"
+                                          .label="${i18next.t("configuration.--or-app-color8")}"
+                                          @or-mwc-input-changed="${(e) => app._setColor("--or-app-color8", e.detail.value)}"></or-mwc-input>
+                        </div>
+                    </div>
+                    <div class="header-group">
+                        <div class="subheader">${i18next.t("configuration.navigation")}</div>
+                        <span>${i18next.t("configuration.navigationDescription")}</span>
+                        <div>
+                            <or-mwc-input
+                                    .type="${InputType.SELECT}" multiple
+                                    class="header-item"
+                                    .label="${i18next.t("configuration.primaryNavigation")}"
                                     .value="${!!app.realm.headers ? (_d = app.realm.headers) === null || _d === void 0 ? void 0 : _d.filter(function (ele) {
             return app.headerListPrimary.includes(ele);
-        }) : app.headerListPrimary}"
-                                    .options="${app.headerListPrimary}"
-                                    @or-mwc-input-changed="${(e) => app._setHeader(e.detail.value, app.headerListPrimary)}"
-                            ></or-mwc-input>
-                            <or-mwc-input
-                                    .type="${InputType.SELECT}" multiple
-                                    class="header-item"
-                                    .label="${i18next.t("configuration.secondaryNavigation")}"
+        }) : app.headerListPrimary}"
+                                    .options="${app.headerListPrimary}"
+                                    @or-mwc-input-changed="${(e) => app._setHeader(e.detail.value, app.headerListPrimary)}"
+                            ></or-mwc-input>
+                            <or-mwc-input
+                                    .type="${InputType.SELECT}" multiple
+                                    class="header-item"
+                                    .label="${i18next.t("configuration.secondaryNavigation")}"
                                     .value="${!!app.realm.headers ? (_e = app.realm.headers) === null || _e === void 0 ? void 0 : _e.filter(function (ele) {
             return app.headerListSecondary.includes(ele);
-        }) : app.headerListSecondary}"
-                                    .options="${app.headerListSecondary}"
-                                    @or-mwc-input-changed="${(e) => app._setHeader(e.detail.value, app.headerListSecondary)}"
-                            ></or-mwc-input>
-                        </div>
-                    </div>
-                    <div class="header-group">
-                        <div class="subheader">${i18next.t("configuration.notificationLanguages")}</div>
-                        <span>${i18next.t("configuration.notificationLanguagesDesc")}</span>
-                        <div>
-                            <or-mwc-input
-                                    .type="${InputType.SELECT}" multiple
-                                    class="header-item"
-                                    searchLabel="configuration.notificationLanguagesLabel"
-                                    .label="${i18next.t("configuration.notificationLanguages")}"
-                                    .value="${((_f = app.realm.notifications) === null || _f === void 0 ? void 0 : _f.languages) || []}"
-                                    .options="${this._languages}"
-                                    .searchProvider="${searchProvider}"
+        }) : app.headerListSecondary}"
+                                    .options="${app.headerListSecondary}"
+                                    @or-mwc-input-changed="${(e) => app._setHeader(e.detail.value, app.headerListSecondary)}"
+                            ></or-mwc-input>
+                        </div>
+                    </div>
+                    <div class="header-group">
+                        <div class="subheader">${i18next.t("configuration.notificationLanguages")}</div>
+                        <span>${i18next.t("configuration.notificationLanguagesDesc")}</span>
+                        <div>
+                            <or-mwc-input
+                                    .type="${InputType.SELECT}" multiple
+                                    class="header-item"
+                                    searchLabel="configuration.notificationLanguagesLabel"
+                                    .label="${i18next.t("configuration.notificationLanguages")}"
+                                    .value="${((_f = app.realm.notifications) === null || _f === void 0 ? void 0 : _f.languages) || []}"
+                                    .options="${this._languages}"
+                                    .searchProvider="${searchProvider}"
                                     @or-mwc-input-changed="${(e) => {
             var _a;
             const newLanguages = e.detail.value;
@@ -296,116 +296,116 @@ let OrConfRealmCard = class OrConfRealmCard extends LitElement {
             };
             app.notifyConfigChange(app.realm);
             this.requestUpdate(); // force render
-        }}"
-                            ></or-mwc-input>
+        }}"
+                            ></or-mwc-input>
                             ${when(((_h = (_g = app.realm.notifications) === null || _g === void 0 ? void 0 : _g.languages) === null || _h === void 0 ? void 0 : _h.length) > 0, () => {
             var _a;
-            return html `
-                                <or-mwc-input
-                                        .type="${InputType.SELECT}"
-                                        class="header-item"
-                                        .label="${i18next.t("configuration.defaultLanguage")}"
-                                        .value="${((_a = app.realm.notifications) === null || _a === void 0 ? void 0 : _a.defaultLanguage) || []}"
-                                        .options="${this._languages.filter(entry => { var _a; return (_a = app.realm.notifications) === null || _a === void 0 ? void 0 : _a.languages.includes(entry[0]); })}"
+            return html `
+                                <or-mwc-input
+                                        .type="${InputType.SELECT}"
+                                        class="header-item"
+                                        .label="${i18next.t("configuration.defaultLanguage")}"
+                                        .value="${((_a = app.realm.notifications) === null || _a === void 0 ? void 0 : _a.defaultLanguage) || []}"
+                                        .options="${this._languages.filter(entry => { var _a; return (_a = app.realm.notifications) === null || _a === void 0 ? void 0 : _a.languages.includes(entry[0]); })}"
                                         @or-mwc-input-changed="${(e) => {
                 app.realm.notifications.defaultLanguage = e.detail.value;
                 app.notifyConfigChange(app.realm);
                 this.requestUpdate(); // force render
-            }}"
-                                ></or-mwc-input>
+            }}"
+                                ></or-mwc-input>
                             `;
-        }, () => html `
-                                <or-mwc-input
-                                        .type="${InputType.SELECT}" disabled
-                                        class="header-item"
-                                        .label="${i18next.t("configuration.defaultLanguage")}"
-                                ></or-mwc-input>
-                            `)}
-                        </div>
-                    </div>
-
-                    ${when(app.canRemove, () => html `
-                        <or-mwc-input outlined id="remove-realm" .type="${InputType.BUTTON}"
-                                      label="configuration.deleteRealmCustomization"
-                                      @click="${() => { app._showRemoveRealmDialog(); }}"
-                        ></or-mwc-input>
-                    `)}
-                </div>
-            </or-collapsible-panel>
+        }, () => html `
+                                <or-mwc-input
+                                        .type="${InputType.SELECT}" disabled
+                                        class="header-item"
+                                        .label="${i18next.t("configuration.defaultLanguage")}"
+                                ></or-mwc-input>
+                            `)}
+                        </div>
+                    </div>
+
+                    ${when(app.canRemove, () => html `
+                        <or-mwc-input outlined id="remove-realm" .type="${InputType.BUTTON}"
+                                      label="configuration.deleteRealmCustomization"
+                                      @click="${() => { app._showRemoveRealmDialog(); }}"
+                        ></or-mwc-input>
+                    `)}
+                </div>
+            </or-collapsible-panel>
         `;
     }
 };
-OrConfRealmCard.styles = css `
-      .language {
-        width: 100%;
-        padding: 10px 0px;
-        max-width: 800px;
-      }
-
-      .appTitle {
-        width: 100%;
-        max-width: 800px;
-        padding: 10px 0px;
-      }
-
-      .header-group .header-item {
-        width: 100%;
-        padding: 10px 0px;
-        max-width: 800px;
-      }
-
-      .color-group .color-item {
-        width: 100%;
-      }
-
-      .logo-group {
-        width: 100%;
-      }
-
-      @media screen and (max-width: 768px) {
-        .logo-group or-file-uploader {
-          min-width: calc(50% - 6px);
-          padding: 0 12px 12px 0!important;
-        }
-
-        .logo-group or-file-uploader:nth-child(2n + 2){
-          padding: 0 0 12px 0!important;
-        }
-
-        .logo-group .d-inline-flex{
-          display: flex;
-          flex-wrap: wrap;
-        }
-      }
-
-      .logo-group or-file-uploader {
-        padding: 0 24px 12px 0;
-      }
-
-      #remove-realm {
-        margin: 12px 0 0 0;
-      }
-
-      .subheader {
-        padding: 10px 0 4px;
-        font-weight: bolder;
-      }
-
-      .d-inline-flex {
-        display: inline-flex;
-      }
-
-      .panel-content {
-        padding: 0 24px 24px;
-      }
-
-      .description {
-        font-size: 12px;
-      }
-
-      or-collapsible-panel {
-        margin-bottom: 10px;
-      }
+OrConfRealmCard.styles = css `
+      .language {
+        width: 100%;
+        padding: 10px 0px;
+        max-width: 800px;
+      }
+
+      .appTitle {
+        width: 100%;
+        max-width: 800px;
+        padding: 10px 0px;
+      }
+
+      .header-group .header-item {
+        width: 100%;
+        padding: 10px 0px;
+        max-width: 800px;
+      }
+
+      .color-group .color-item {
+        width: 100%;
+      }
+
+      .logo-group {
+        width: 100%;
+      }
+
+      @media screen and (max-width: 768px) {
+        .logo-group or-file-uploader {
+          min-width: calc(50% - 6px);
+          padding: 0 12px 12px 0!important;
+        }
+
+        .logo-group or-file-uploader:nth-child(2n + 2){
+          padding: 0 0 12px 0!important;
+        }
+
+        .logo-group .d-inline-flex{
+          display: flex;
+          flex-wrap: wrap;
+        }
+      }
+
+      .logo-group or-file-uploader {
+        padding: 0 24px 12px 0;
+      }
+
+      #remove-realm {
+        margin: 12px 0 0 0;
+      }
+
+      .subheader {
+        padding: 10px 0 4px;
+        font-weight: bolder;
+      }
+
+      .d-inline-flex {
+        display: inline-flex;
+      }
+
+      .panel-content {
+        padding: 0 24px 24px;
+      }
+
+      .description {
+        font-size: 12px;
+      }
+
+      or-collapsible-panel {
+        margin-bottom: 10px;
+      }
     `;
 __decorate([
     property({ attribute: false })