@openremote/or-rules 1.8.0-snapshot.20250723203453 → 1.8.0-snapshot.20250725120000

package/lib/json-viewer/modals/or-rule-notification-modal.d.ts

@@ -14,7 +14,7 @@ declare const OrRuleNotificationModal_base: (new (...args: any[]) => {
     _i18nextJustInitialized: boolean;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    shouldUpdate(changedProps: import("lit").PropertyValueMap<any> | Map<PropertyKey, unknown>): any;
+    shouldUpdate(changedProps: PropertyValues): any;
     initCallback: (options: import("i18next").InitOptions) => void;
     langChangedCallback: () => void;
     readonly isConnected: boolean;
@@ -33,6 +33,6 @@ export declare class OrRuleNotificationModal extends OrRuleNotificationModal_bas
     firstUpdated(changedProperties: PropertyValues): void;
     validateForm(): void;
     checkForm(): boolean | undefined;
-    protected render(): import("lit-html").TemplateResult<1>;
+    protected render(): import("lit").TemplateResult<1>;
 }
 export {};

package/lib/json-viewer/modals/or-rule-notification-modal.js

@@ -1,11 +1,196 @@
-var __decorate=this&&this.__decorate||function(t,o,e,i){var n,r=arguments.length,a=r<3?o:null===i?i=Object.getOwnPropertyDescriptor(o,e):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,o,e,i);else for(var l=t.length-1;l>=0;l--)(n=t[l])&&(a=(r<3?n(a):r>3?n(o,e,a):n(o,e))||a);return r>3&&a&&Object.defineProperty(o,e,a),a};import{html,LitElement}from"lit";import{customElement,property,query}from"lit/decorators.js";import"@openremote/or-mwc-components/or-mwc-input";import{InputType}from"@openremote/or-mwc-components/or-mwc-input";import i18next from"i18next";import{translate}from"@openremote/or-translate";import{OrMwcDialogOpenedEvent}from"@openremote/or-mwc-components/or-mwc-dialog";import{OrRulesJsonRuleChangedEvent}from"../or-rule-json-viewer";const checkValidity=t=>{if(t){const o=t.querySelectorAll("or-mwc-input");return Array.prototype.slice.call(o).every((t=>{if(t.shadowRoot){const o=t.shadowRoot.querySelector("input, textarea, select");return!(!o||!o.checkValidity())||(t._mdcComponent&&(t._mdcComponent.valid=!1,t._mdcComponent.helperTextContent="required"),!1)}return!1}))}};export class OrRulesNotificationModalCancelEvent extends CustomEvent{constructor(){super(OrRulesNotificationModalCancelEvent.NAME,{bubbles:!0,composed:!0})}}OrRulesNotificationModalCancelEvent.NAME="or-rules-notification-modal-cancel";export class OrRulesNotificationModalOkEvent extends CustomEvent{constructor(){super(OrRulesNotificationModalOkEvent.NAME,{bubbles:!0,composed:!0})}}OrRulesNotificationModalOkEvent.NAME="or-rules-notification-modal-ok";let OrRuleNotificationModal=class extends(translate(i18next)(LitElement)){constructor(){super(),this.title="message",this.addEventListener(OrMwcDialogOpenedEvent.NAME,this.initDialog)}connectedCallback(){return this.addEventListener(OrRulesJsonRuleChangedEvent.NAME,this._onJsonRuleChanged),super.connectedCallback()}disconnectedCallback(){return this.removeEventListener(OrRulesJsonRuleChangedEvent.NAME,this._onJsonRuleChanged),super.disconnectedCallback()}_onJsonRuleChanged(){this.validateForm()}initDialog(){this._orMwcDialog}renderDialogHTML(t){const o=this.shadowRoot.getElementById("notification-modal");if(!this.shadowRoot)return;const e=this.shadowRoot.querySelector(".notification-form-slot");if(o&&e){let t=document.createElement("div");e.assignedNodes({flatten:!0}).forEach((o=>{o instanceof HTMLElement&&t.appendChild(o)})),o.content=html`${t}`,o.dismissAction=null,this.requestUpdate()}}firstUpdated(t){t.has("action")&&this.renderDialogHTML(this.action),this.getUpdateComplete().finally((()=>{this.validateForm()}))}validateForm(){var t,o,e;const i=this.checkForm();null===(t=this._orMwcDialog)||void 0===t||t.setActions(null===(e=null===(o=this._orMwcDialog)||void 0===o?void 0:o.actions)||void 0===e?void 0:e.map((t=>("ok"===t.actionName&&(t.disabled=!i),t))))}checkForm(){if(this.shadowRoot){const t=this._orMwcDialog,o=null==t?void 0:t.shadowRoot;if(t&&o){const t=o.querySelector("or-rule-form-email-message"),e=o.querySelector("or-rule-form-push-notification"),i=o.querySelector("or-rule-form-localized");if(null==e?void 0:e.shadowRoot){const t=e.shadowRoot.querySelector("form");return checkValidity(t)}if(null==t?void 0:t.shadowRoot){const o=t.shadowRoot.querySelector("form");return checkValidity(o)}if(null==i?void 0:i.shadowRoot)return i.isValid()}}}render(){const t=()=>{this.dispatchEvent(new OrRulesNotificationModalCancelEvent)},o={actionName:"cancel",action:t},e=[{actionName:"cancel",content:html`<or-mwc-input class="button" .type="${InputType.BUTTON}" label="cancel"></or-mwc-input>`,action:t},{actionName:"ok",content:"ok",disabled:!0,action:()=>{this.dispatchEvent(new OrRulesNotificationModalOkEvent)}}],i=html`
-            <style>
-                .mdc-dialog__actions {
-                    justify-content: space-between !important;
-                }
-            </style>
-        `;return html`
-            <or-mwc-input .type="${InputType.BUTTON}" label="message" @or-mwc-input-changed="${()=>{const t=this.shadowRoot.getElementById("notification-modal");t&&t.open()}}"></or-mwc-input>
-            <or-mwc-dialog id="notification-modal" .heading="${this.title}" .dismissAction="${o}" .actions="${e}" .styles="${i}"></or-mwc-dialog>
-            <slot class="notification-form-slot"></slot>
-        `}};__decorate([property({type:Object})],OrRuleNotificationModal.prototype,"action",void 0),__decorate([property({type:String})],OrRuleNotificationModal.prototype,"title",void 0),__decorate([property({type:Object})],OrRuleNotificationModal.prototype,"query",void 0),__decorate([query("#notification-modal")],OrRuleNotificationModal.prototype,"_orMwcDialog",void 0),OrRuleNotificationModal=__decorate([customElement("or-rule-notification-modal")],OrRuleNotificationModal);export{OrRuleNotificationModal};
+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;
+};
+import { html, LitElement } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import "@openremote/or-mwc-components/or-mwc-input";
+import { InputType } from "@openremote/or-mwc-components/or-mwc-input";
+import i18next from "i18next";
+import { translate } from "@openremote/or-translate";
+import { OrMwcDialogOpenedEvent } from "@openremote/or-mwc-components/or-mwc-dialog";
+import { OrRulesJsonRuleChangedEvent } from "../or-rule-json-viewer";
+const checkValidity = (form) => {
+    if (form) {
+        const inputs = form.querySelectorAll('or-mwc-input');
+        const elements = Array.prototype.slice.call(inputs);
+        return elements.every((element) => {
+            if (element.shadowRoot) {
+                const input = element.shadowRoot.querySelector('input, textarea, select');
+                if (input && input.checkValidity()) {
+                    return true;
+                }
+                else {
+                    if (element._mdcComponent) {
+                        element._mdcComponent.valid = false;
+                        element._mdcComponent.helperTextContent = 'required';
+                    }
+                    return false;
+                }
+            }
+            else {
+                return false;
+            }
+        });
+    }
+};
+export class OrRulesNotificationModalCancelEvent extends CustomEvent {
+    constructor() {
+        super(OrRulesNotificationModalCancelEvent.NAME, {
+            bubbles: true,
+            composed: true
+        });
+    }
+}
+OrRulesNotificationModalCancelEvent.NAME = "or-rules-notification-modal-cancel";
+export class OrRulesNotificationModalOkEvent extends CustomEvent {
+    constructor() {
+        super(OrRulesNotificationModalOkEvent.NAME, {
+            bubbles: true,
+            composed: true
+        });
+    }
+}
+OrRulesNotificationModalOkEvent.NAME = "or-rules-notification-modal-ok";
+let OrRuleNotificationModal = class OrRuleNotificationModal extends translate(i18next)(LitElement) {
+    constructor() {
+        super();
+        this.title = "message";
+        this.addEventListener(OrMwcDialogOpenedEvent.NAME, this.initDialog);
+    }
+    connectedCallback() {
+        this.addEventListener(OrRulesJsonRuleChangedEvent.NAME, this._onJsonRuleChanged);
+        return super.connectedCallback();
+    }
+    disconnectedCallback() {
+        this.removeEventListener(OrRulesJsonRuleChangedEvent.NAME, this._onJsonRuleChanged);
+        return super.disconnectedCallback();
+    }
+    _onJsonRuleChanged() {
+        this.validateForm();
+    }
+    initDialog() {
+        if (!this._orMwcDialog)
+            return;
+    }
+    renderDialogHTML(action) {
+        const dialog = this.shadowRoot.getElementById("notification-modal");
+        if (!this.shadowRoot)
+            return;
+        const slot = this.shadowRoot.querySelector('.notification-form-slot');
+        if (dialog && slot) {
+            let container = document.createElement("div");
+            slot.assignedNodes({ flatten: true }).forEach((child) => {
+                if (child instanceof HTMLElement) {
+                    container.appendChild(child);
+                }
+            });
+            dialog.content = html `${container}`;
+            dialog.dismissAction = null;
+            this.requestUpdate();
+        }
+    }
+    firstUpdated(changedProperties) {
+        if (changedProperties.has("action")) {
+            this.renderDialogHTML(this.action);
+        }
+        // Possibly, a render is triggered by renderDialogHTML(), so we await the pending update. (if there is any)
+        this.getUpdateComplete().finally(() => {
+            this.validateForm();
+        });
+    }
+    validateForm() {
+        var _a, _b, _c;
+        const valid = this.checkForm();
+        (_a = this._orMwcDialog) === null || _a === void 0 ? void 0 : _a.setActions((_c = (_b = this._orMwcDialog) === null || _b === void 0 ? void 0 : _b.actions) === null || _c === void 0 ? void 0 : _c.map(action => {
+            if (action.actionName === "ok") {
+                action.disabled = !valid;
+            }
+            return action;
+        }));
+    }
+    checkForm() {
+        if (this.shadowRoot) {
+            const dialog = this._orMwcDialog;
+            const root = dialog === null || dialog === void 0 ? void 0 : dialog.shadowRoot;
+            if (dialog && root) {
+                const messageNotification = root.querySelector("or-rule-form-email-message");
+                const pushNotification = root.querySelector("or-rule-form-push-notification");
+                const localizedNotification = root.querySelector("or-rule-form-localized");
+                if (pushNotification === null || pushNotification === void 0 ? void 0 : pushNotification.shadowRoot) {
+                    const form = pushNotification.shadowRoot.querySelector('form');
+                    return checkValidity(form);
+                }
+                else if (messageNotification === null || messageNotification === void 0 ? void 0 : messageNotification.shadowRoot) {
+                    const form = messageNotification.shadowRoot.querySelector('form');
+                    return checkValidity(form);
+                }
+                else if (localizedNotification === null || localizedNotification === void 0 ? void 0 : localizedNotification.shadowRoot) {
+                    return localizedNotification.isValid();
+                }
+            }
+        }
+    }
+    render() {
+        const onCancel = () => {
+            this.dispatchEvent(new OrRulesNotificationModalCancelEvent());
+        };
+        const onOk = () => {
+            this.dispatchEvent(new OrRulesNotificationModalOkEvent());
+        };
+        const dismissAction = {
+            actionName: "cancel",
+            action: onCancel
+        };
+        const actions = [
+            {
+                actionName: "cancel",
+                content: html `<or-mwc-input class="button" .type="${InputType.BUTTON}" label="cancel"></or-mwc-input>`,
+                action: onCancel
+            },
+            {
+                actionName: "ok",
+                content: "ok",
+                disabled: true, // (by default, can be changed in checkForm())
+                action: onOk
+            }
+        ];
+        const styles = html `
+            <style>
+                .mdc-dialog__actions {
+                    justify-content: space-between !important;
+                }
+            </style>
+        `;
+        const notificationPickerModalOpen = () => {
+            const dialog = this.shadowRoot.getElementById("notification-modal");
+            if (dialog) {
+                dialog.open();
+            }
+        };
+        return html `
+            <or-mwc-input .type="${InputType.BUTTON}" label="message" @or-mwc-input-changed="${notificationPickerModalOpen}"></or-mwc-input>
+            <or-mwc-dialog id="notification-modal" .heading="${this.title}" .dismissAction="${dismissAction}" .actions="${actions}" .styles="${styles}"></or-mwc-dialog>
+            <slot class="notification-form-slot"></slot>
+        `;
+    }
+};
+__decorate([
+    property({ type: Object })
+], OrRuleNotificationModal.prototype, "action", void 0);
+__decorate([
+    property({ type: String })
+], OrRuleNotificationModal.prototype, "title", void 0);
+__decorate([
+    property({ type: Object })
+], OrRuleNotificationModal.prototype, "query", void 0);
+__decorate([
+    query("#notification-modal")
+], OrRuleNotificationModal.prototype, "_orMwcDialog", void 0);
+OrRuleNotificationModal = __decorate([
+    customElement("or-rule-notification-modal")
+], OrRuleNotificationModal);
+export { OrRuleNotificationModal };
+//# sourceMappingURL=or-rule-notification-modal.js.map

package/lib/json-viewer/modals/or-rule-radial-modal.d.ts

@@ -6,7 +6,7 @@ declare const OrRuleRadialModal_base: (new (...args: any[]) => {
     _i18nextJustInitialized: boolean;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    shouldUpdate(changedProps: import("lit").PropertyValueMap<any> | Map<PropertyKey, unknown>): any;
+    shouldUpdate(changedProps: import("lit").PropertyValues): any;
     initCallback: (options: import("i18next").InitOptions) => void;
     langChangedCallback: () => void;
     readonly isConnected: boolean;
@@ -20,6 +20,6 @@ export declare class OrRuleRadialModal extends OrRuleRadialModal_base {
     protected getAttributeName(attributePredicate: AttributePredicate): string | undefined;
     protected setValuePredicateProperty(propertyName: string, value: any): void;
     renderDialogHTML(value: RadialGeofencePredicate): void;
-    protected render(): import("lit-html").TemplateResult<1>;
+    protected render(): import("lit").TemplateResult<1>;
 }
 export {};

package/lib/json-viewer/modals/or-rule-radial-modal.js

@@ -1,17 +1,142 @@
-var __decorate=this&&this.__decorate||function(e,t,r,o){var a,i=arguments.length,l=i<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,r):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,r,o);else for(var n=e.length-1;n>=0;n--)(a=e[n])&&(l=(i<3?a(l):i>3?a(t,r,l):a(t,r))||l);return i>3&&l&&Object.defineProperty(t,r,l),l};import{html,LitElement}from"lit";import{customElement,property}from"lit/decorators.js";import{getAssetTypeFromQuery}from"../../index";import"@openremote/or-mwc-components/or-mwc-input";import{InputType}from"@openremote/or-mwc-components/or-mwc-input";import i18next from"i18next";import{OrRulesJsonRuleChangedEvent}from"../or-rule-json-viewer";import{translate}from"@openremote/or-translate";import{OrMwcDialogOpenedEvent}from"@openremote/or-mwc-components/or-mwc-dialog";import{OrMapClickedEvent}from"@openremote/or-map";import"@openremote/or-map";let OrRuleRadialModal=class extends(translate(i18next)(LitElement)){constructor(){super(),this.addEventListener(OrMwcDialogOpenedEvent.NAME,this.initRadialMap)}initRadialMap(){const e=this.shadowRoot.getElementById("radial-modal");if(!e)return;const t=e.shadowRoot.querySelector(".or-map");if(t){t.addEventListener(OrMapClickedEvent.NAME,(t=>{const r=t.detail.lngLat,o=e.shadowRoot.querySelector(".location-lat"),a=e.shadowRoot.querySelector(".location-lng");o.value=r.lat,a.value=r.lng;const i=new Event("change");o.dispatchEvent(i),a.dispatchEvent(i),this.setValuePredicateProperty("lat",r.lat),this.setValuePredicateProperty("lng",r.lng)}));const r=e.shadowRoot.querySelector(".location-lat"),o=e.shadowRoot.querySelector(".location-lng");if(o.value&&r.value){const e=[parseFloat(o.value),parseFloat(r.value)];t.flyTo(e,15)}else t.flyTo()}}getAttributeName(e){return e&&e.name?e.name.value:void 0}setValuePredicateProperty(e,t){this.attributePredicate&&this.attributePredicate.value&&(this.attributePredicate.value[e]=t,this.attributePredicate=Object.assign({},this.attributePredicate),this.dispatchEvent(new OrRulesJsonRuleChangedEvent),this.requestUpdate())}renderDialogHTML(e){const t=this.shadowRoot.getElementById("radial-modal");t&&(t.content=html`
-                <div style="display:grid">
-                    <or-map class="or-map" type="VECTOR" style="border: 1px solid #d5d5d5; height: 400px; min-width: 300px; margin-bottom: 20px;">
-                        <or-map-marker active color="#FF0000" icon="information" lat="${e.lat}" lng="${e.lng}" radius="${e.radius}"></or-map-marker>
-                    </or-map>
-                
-                    <div class="layout horizontal">
-                        <input hidden class="location-lng"  required placeholder=" " type="text" .value="${e&&e.lng?e.lng:null}" />
-                        <input hidden class="location-lat" required placeholder=" " type="text" .value="${e&&e.lat?e.lat:null}" />
-                    </div>
-
-                    <label>${i18next.t("radiusMin")}</label>
-                    <input @change="${e=>this.setValuePredicateProperty("radius",parseInt(e.target.value))}" style="max-width: calc(50% - 30px);" required placeholder=" " min="100" type="number" .value="${e&&e.radius?e.radius:100}" />
-                </div>`)}render(){if(!this.attributePredicate)return html``;if(!this.query)return html``;const e=this.attributePredicate.value;if(!this.assetDescriptor||!e)return html``;this.getAttributeName(this.attributePredicate),getAssetTypeFromQuery(this.query);const t=e||void 0,r=[{actionName:"cancel",content:html`<or-mwc-input class="button" .type="${InputType.BUTTON}" label="cancel"></or-mwc-input>`,action:()=>{}},{actionName:"ok",default:!0,content:html`<or-mwc-input class="button" .type="${InputType.BUTTON}" label="ok"></or-mwc-input>`,action:()=>{}}];return this.renderDialogHTML(t),html`
-            <or-mwc-input .type="${InputType.BUTTON}" label="area" @or-mwc-input-changed="${()=>{const e=this.shadowRoot.getElementById("radial-modal");e&&(e.dismissAction=null,e.open(),this.renderDialogHTML(t))}}"></or-mwc-input>
-            <or-mwc-dialog id="radial-modal" heading="area" .actions="${r}"></or-mwc-dialog>
-        `}};__decorate([property({type:Object})],OrRuleRadialModal.prototype,"assetDescriptor",void 0),__decorate([property({type:Object})],OrRuleRadialModal.prototype,"attributePredicate",void 0),__decorate([property({type:Object})],OrRuleRadialModal.prototype,"query",void 0),OrRuleRadialModal=__decorate([customElement("or-rule-radial-modal")],OrRuleRadialModal);export{OrRuleRadialModal};
+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;
+};
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { getAssetTypeFromQuery, } from "../../index";
+import "@openremote/or-mwc-components/or-mwc-input";
+import { InputType } from "@openremote/or-mwc-components/or-mwc-input";
+import i18next from "i18next";
+import { OrRulesJsonRuleChangedEvent } from "../or-rule-json-viewer";
+import { translate } from "@openremote/or-translate";
+import { OrMwcDialogOpenedEvent } from "@openremote/or-mwc-components/or-mwc-dialog";
+import { OrMapClickedEvent } from "@openremote/or-map";
+import "@openremote/or-map";
+let OrRuleRadialModal = class OrRuleRadialModal extends translate(i18next)(LitElement) {
+    constructor() {
+        super();
+        this.addEventListener(OrMwcDialogOpenedEvent.NAME, this.initRadialMap);
+    }
+    initRadialMap() {
+        const modal = this.shadowRoot.getElementById('radial-modal');
+        if (!modal)
+            return;
+        const map = modal.shadowRoot.querySelector('.or-map');
+        if (map) {
+            map.addEventListener(OrMapClickedEvent.NAME, (evt) => {
+                const lngLat = evt.detail.lngLat;
+                const latElement = modal.shadowRoot.querySelector('.location-lat');
+                const lngElement = modal.shadowRoot.querySelector('.location-lng');
+                latElement.value = lngLat.lat;
+                lngElement.value = lngLat.lng;
+                const event = new Event('change');
+                latElement.dispatchEvent(event);
+                lngElement.dispatchEvent(event);
+                this.setValuePredicateProperty('lat', lngLat.lat);
+                this.setValuePredicateProperty('lng', lngLat.lng);
+            });
+            const latElement = modal.shadowRoot.querySelector('.location-lat');
+            const lngElement = modal.shadowRoot.querySelector('.location-lng');
+            if (lngElement.value && latElement.value) {
+                const LngLat = [parseFloat(lngElement.value), parseFloat(latElement.value)];
+                map.flyTo(LngLat, 15);
+            }
+            else {
+                map.flyTo();
+            }
+        }
+    }
+    getAttributeName(attributePredicate) {
+        return attributePredicate && attributePredicate.name ? attributePredicate.name.value : undefined;
+    }
+    setValuePredicateProperty(propertyName, value) {
+        if (!this.attributePredicate)
+            return;
+        if (!this.attributePredicate.value)
+            return;
+        const valuePredicate = this.attributePredicate.value;
+        valuePredicate[propertyName] = value;
+        this.attributePredicate = Object.assign({}, this.attributePredicate);
+        this.dispatchEvent(new OrRulesJsonRuleChangedEvent());
+        this.requestUpdate();
+    }
+    renderDialogHTML(value) {
+        const dialog = this.shadowRoot.getElementById("radial-modal");
+        if (dialog) {
+            dialog.content = html `
+                <div style="display:grid">
+                    <or-map class="or-map" type="VECTOR" style="border: 1px solid #d5d5d5; height: 400px; min-width: 300px; margin-bottom: 20px;">
+                        <or-map-marker active color="#FF0000" icon="information" lat="${value.lat}" lng="${value.lng}" radius="${value.radius}"></or-map-marker>
+                    </or-map>
+                
+                    <div class="layout horizontal">
+                        <input hidden class="location-lng"  required placeholder=" " type="text" .value="${value && value.lng ? value.lng : null}" />
+                        <input hidden class="location-lat" required placeholder=" " type="text" .value="${value && value.lat ? value.lat : null}" />
+                    </div>
+
+                    <label>${i18next.t("radiusMin")}</label>
+                    <input @change="${(e) => this.setValuePredicateProperty("radius", parseInt(e.target.value))}" style="max-width: calc(50% - 30px);" required placeholder=" " min="100" type="number" .value="${value && value.radius ? value.radius : 100}" />
+                </div>`;
+        }
+    }
+    render() {
+        if (!this.attributePredicate)
+            return html ``;
+        if (!this.query)
+            return html ``;
+        const valuePredicate = this.attributePredicate.value;
+        if (!this.assetDescriptor || !valuePredicate) {
+            return html ``;
+        }
+        const attributeName = this.getAttributeName(this.attributePredicate);
+        const assetType = getAssetTypeFromQuery(this.query);
+        // @ts-ignore
+        const value = valuePredicate ? valuePredicate : undefined;
+        const radiusPickerModalActions = [
+            {
+                actionName: "cancel",
+                content: html `<or-mwc-input class="button" .type="${InputType.BUTTON}" label="cancel"></or-mwc-input>`,
+                action: () => {
+                    // Nothing to do here
+                }
+            },
+            {
+                actionName: "ok",
+                default: true,
+                content: html `<or-mwc-input class="button" .type="${InputType.BUTTON}" label="ok"></or-mwc-input>`,
+                action: () => {
+                }
+            }
+        ];
+        const radialPickerModalOpen = () => {
+            const dialog = this.shadowRoot.getElementById("radial-modal");
+            if (dialog) {
+                dialog.dismissAction = null;
+                dialog.open();
+                this.renderDialogHTML(value);
+            }
+        };
+        this.renderDialogHTML(value);
+        return html `
+            <or-mwc-input .type="${InputType.BUTTON}" label="area" @or-mwc-input-changed="${radialPickerModalOpen}"></or-mwc-input>
+            <or-mwc-dialog id="radial-modal" heading="area" .actions="${radiusPickerModalActions}"></or-mwc-dialog>
+        `;
+    }
+};
+__decorate([
+    property({ type: Object })
+], OrRuleRadialModal.prototype, "assetDescriptor", void 0);
+__decorate([
+    property({ type: Object })
+], OrRuleRadialModal.prototype, "attributePredicate", void 0);
+__decorate([
+    property({ type: Object })
+], OrRuleRadialModal.prototype, "query", void 0);
+OrRuleRadialModal = __decorate([
+    customElement("or-rule-radial-modal")
+], OrRuleRadialModal);
+export { OrRuleRadialModal };
+//# sourceMappingURL=or-rule-radial-modal.js.map

package/lib/json-viewer/modals/or-rule-webhook-modal.d.ts

@@ -8,5 +8,5 @@ export declare class OrRuleWebhookModal extends LitElement {
     firstUpdated(changedProperties: PropertyValues): void;
     renderDialogHTML(action: RuleActionWebhook): void;
     closeForm(event: OrInputChangedEvent): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
 }

package/lib/json-viewer/modals/or-rule-webhook-modal.js

@@ -1,8 +1,78 @@
-var __decorate=this&&this.__decorate||function(e,t,o,r){var n,l=arguments.length,i=l<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,o,r);else for(var s=e.length-1;s>=0;s--)(n=e[s])&&(i=(l<3?n(i):l>3?n(t,o,i):n(t,o))||i);return l>3&&i&&Object.defineProperty(t,o,i),i};import{InputType}from"@openremote/or-mwc-components/or-mwc-input";import{i18next}from"@openremote/or-translate";import{html,LitElement}from"lit";import{customElement,property}from"lit/decorators.js";let OrRuleWebhookModal=class extends LitElement{constructor(){super(),this.title=i18next.t("message")}firstUpdated(e){e.has("action")&&this.renderDialogHTML(this.action)}renderDialogHTML(e){const t=this.shadowRoot.getElementById("webhook-modal");if(!this.shadowRoot)return;const o=this.shadowRoot.querySelector(".webhook-form-slot");if(t&&o){let e=document.createElement("div");o.assignedNodes({flatten:!0}).forEach((t=>{t instanceof HTMLElement&&e.appendChild(t)})),t.content=html`${e}`,t.dismissAction=null,this.requestUpdate()}}closeForm(e){this.shadowRoot.host.close()}render(){if(!this.action)return html`${i18next.t("errorOccurred")}`;const e=[{actionName:"",content:html`
-                    <or-mwc-input .type="${InputType.BUTTON}" label="ok"
-                                  @or-mwc-input-changed="${this.closeForm}"></or-mwc-input>`}];return html`
-            <or-mwc-input type="${InputType.BUTTON}" label="message"
-                          @or-mwc-input-changed="${()=>{const e=this.shadowRoot.getElementById("webhook-modal");e&&e.open()}}"></or-mwc-input>
-            <or-mwc-dialog id="webhook-modal" heading="${this.title}" .actions="${e}"></or-mwc-dialog>
-            <slot class="webhook-form-slot"></slot>
-        `}};__decorate([property({type:Object})],OrRuleWebhookModal.prototype,"action",void 0),__decorate([property({type:String})],OrRuleWebhookModal.prototype,"title",void 0),OrRuleWebhookModal=__decorate([customElement("or-rule-webhook-modal")],OrRuleWebhookModal);export{OrRuleWebhookModal};
+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;
+};
+import { InputType } from "@openremote/or-mwc-components/or-mwc-input";
+import { i18next } from "@openremote/or-translate";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+let OrRuleWebhookModal = class OrRuleWebhookModal extends LitElement {
+    constructor() {
+        super();
+        this.title = i18next.t('message');
+    }
+    /* ----------------------- */
+    firstUpdated(changedProperties) {
+        if (changedProperties.has("action")) {
+            this.renderDialogHTML(this.action);
+        }
+    }
+    renderDialogHTML(action) {
+        const dialog = this.shadowRoot.getElementById("webhook-modal");
+        if (!this.shadowRoot)
+            return;
+        const slot = this.shadowRoot.querySelector('.webhook-form-slot');
+        if (dialog && slot) {
+            let container = document.createElement("div");
+            slot.assignedNodes({ flatten: true }).forEach((child) => {
+                if (child instanceof HTMLElement) {
+                    container.appendChild(child);
+                }
+            });
+            dialog.content = html `${container}`;
+            dialog.dismissAction = null;
+            this.requestUpdate();
+        }
+    }
+    closeForm(event) {
+        const dialog = this.shadowRoot.host;
+        dialog.close();
+    }
+    render() {
+        if (!this.action) {
+            return html `${i18next.t('errorOccurred')}`;
+        }
+        const webhookModalActions = [
+            {
+                actionName: "", content: html `
+                    <or-mwc-input .type="${InputType.BUTTON}" label="ok"
+                                  @or-mwc-input-changed="${this.closeForm}"></or-mwc-input>`
+            }
+        ];
+        const webhookModalOpen = () => {
+            const dialog = this.shadowRoot.getElementById("webhook-modal");
+            if (dialog) {
+                dialog.open();
+            }
+        };
+        return html `
+            <or-mwc-input type="${InputType.BUTTON}" label="message"
+                          @or-mwc-input-changed="${webhookModalOpen}"></or-mwc-input>
+            <or-mwc-dialog id="webhook-modal" heading="${this.title}" .actions="${webhookModalActions}"></or-mwc-dialog>
+            <slot class="webhook-form-slot"></slot>
+        `;
+    }
+};
+__decorate([
+    property({ type: Object })
+], OrRuleWebhookModal.prototype, "action", void 0);
+__decorate([
+    property({ type: String })
+], OrRuleWebhookModal.prototype, "title", void 0);
+OrRuleWebhookModal = __decorate([
+    customElement("or-rule-webhook-modal")
+], OrRuleWebhookModal);
+export { OrRuleWebhookModal };
+//# sourceMappingURL=or-rule-webhook-modal.js.map

package/lib/json-viewer/or-rule-action-alarm.js

@@ -1,5 +1,97 @@
-var __decorate=this&&this.__decorate||function(t,e,r,o){var a,l=arguments.length,i=l<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,r):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(t,e,r,o);else for(var n=t.length-1;n>=0;n--)(a=t[n])&&(i=(l<3?a(i):l>3?a(e,r,i):a(e,r))||i);return l>3&&i&&Object.defineProperty(e,r,i),i},__awaiter=this&&this.__awaiter||function(t,e,r,o){return new(r||(r=Promise))((function(a,l){function i(t){try{c(o.next(t))}catch(t){l(t)}}function n(t){try{c(o.throw(t))}catch(t){l(t)}}function c(t){var e;t.done?a(t.value):(e=t.value,e instanceof r?e:new r((function(t){t(e)}))).then(i,n)}c((o=o.apply(t,e||[])).next())}))};import{html,LitElement}from"lit";import{customElement,property}from"lit/decorators.js";import"./modals/or-rule-alarm-modal";import"./forms/or-rule-form-alarm";import manager from"@openremote/core";let OrRuleActionAlarm=class extends LitElement{constructor(){super(...arguments),this._loadedUsers=[]}connectedCallback(){const t=Object.create(null,{connectedCallback:{get:()=>super.connectedCallback}});return __awaiter(this,void 0,void 0,(function*(){yield this.loadUsers(),t.connectedCallback.call(this)}))}loadUsers(){return __awaiter(this,void 0,void 0,(function*(){const t=yield manager.rest.api.UserResource.query({realmPredicate:{name:manager.displayRealm}});200===t.status&&(this._loadedUsers=t.data.filter((t=>t.enabled&&!t.serviceAccount)))}))}render(){if(!this.action.alarm||!this.action.alarm.title)return html``;let t="";return this.action.alarm&&(t=html`
-                        <or-rule-alarm-modal title="alarm." .action="${this.action}">
-                            <or-rule-form-alarm .users="${this._loadedUsers}" .action="${this.action}"></or-rule-form-alarm>
-                        </or-rule-alarm-modal>
-                    `),html`${t}`}};__decorate([property({type:Object,attribute:!1})],OrRuleActionAlarm.prototype,"rule",void 0),__decorate([property({type:Object,attribute:!1})],OrRuleActionAlarm.prototype,"action",void 0),__decorate([property({type:String,attribute:!1})],OrRuleActionAlarm.prototype,"actionType",void 0),__decorate([property({type:Object})],OrRuleActionAlarm.prototype,"config",void 0),OrRuleActionAlarm=__decorate([customElement("or-rule-action-alarm")],OrRuleActionAlarm);export{OrRuleActionAlarm};
+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());
+    });
+};
+/*
+ * Copyright 2024, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import "./modals/or-rule-alarm-modal";
+import "./forms/or-rule-form-alarm";
+import manager from "@openremote/core";
+let OrRuleActionAlarm = class OrRuleActionAlarm extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._loadedUsers = [];
+    }
+    connectedCallback() {
+        const _super = Object.create(null, {
+            connectedCallback: { get: () => super.connectedCallback }
+        });
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.loadUsers();
+            _super.connectedCallback.call(this);
+        });
+    }
+    loadUsers() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const usersResponse = yield manager.rest.api.UserResource.query({
+                realmPredicate: { name: manager.displayRealm },
+            });
+            if (usersResponse.status !== 200) {
+                return;
+            }
+            this._loadedUsers = usersResponse.data.filter((user) => user.enabled && !user.serviceAccount);
+        });
+    }
+    render() {
+        if (!this.action.alarm || !this.action.alarm.title) {
+            return html ``;
+        }
+        const alarm = this.action.alarm;
+        let modalTemplate = ``;
+        if (alarm) {
+            modalTemplate = html `
+                        <or-rule-alarm-modal title="alarm." .action="${this.action}">
+                            <or-rule-form-alarm .users="${this._loadedUsers}" .action="${this.action}"></or-rule-form-alarm>
+                        </or-rule-alarm-modal>
+                    `;
+        }
+        return html `${modalTemplate}`;
+    }
+};
+__decorate([
+    property({ type: Object, attribute: false })
+], OrRuleActionAlarm.prototype, "rule", void 0);
+__decorate([
+    property({ type: Object, attribute: false })
+], OrRuleActionAlarm.prototype, "action", void 0);
+__decorate([
+    property({ type: String, attribute: false })
+], OrRuleActionAlarm.prototype, "actionType", void 0);
+__decorate([
+    property({ type: Object })
+], OrRuleActionAlarm.prototype, "config", void 0);
+OrRuleActionAlarm = __decorate([
+    customElement("or-rule-action-alarm")
+], OrRuleActionAlarm);
+export { OrRuleActionAlarm };
+//# sourceMappingURL=or-rule-action-alarm.js.map

package/lib/json-viewer/or-rule-action-attribute.d.ts

@@ -6,7 +6,7 @@ declare const OrRuleActionAttribute_base: (new (...args: any[]) => {
     _i18nextJustInitialized: boolean;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    shouldUpdate(changedProps: import("lit").PropertyValueMap<any> | Map<PropertyKey, unknown>): any;
+    shouldUpdate(changedProps: PropertyValues): any;
     initCallback: (options: import("i18next").InitOptions) => void;
     langChangedCallback: () => void;
     readonly isConnected: boolean;