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

package/lib/json-viewer/or-rule-when.js

@@ -1,136 +1,353 @@
-var OrRuleWhen_1,ResetOption,__decorate=this&&this.__decorate||function(e,t,o,n){var r,i=arguments.length,s=i<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,o):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,n);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(s=(i<3?r(s):i>3?r(t,o,s):r(t,o))||s);return i>3&&s&&Object.defineProperty(t,o,s),s};import{css,html,LitElement}from"lit";import{customElement,property}from"lit/decorators.js";import{OrRulesRuleUnsupportedEvent}from"../index";import{buttonStyle}from"../style";import"./or-rule-condition";import i18next from"i18next";import{InputType}from"@openremote/or-mwc-components/or-mwc-input";import{OrRulesJsonRuleChangedEvent}from"./or-rule-json-viewer";import{getWhenTypesMenu,updateRuleConditionType}from"./or-rule-condition";import{getContentWithMenuTemplate}from"@openremote/or-mwc-components/or-mwc-menu";import{translate}from"@openremote/or-translate";!function(e){e.NO_LONGER_MATCHES="noLongerMatches",e.VALUE_CHANGES="valueChanges"}(ResetOption||(ResetOption={}));const style=css`
-    
-    :host {
-        display: block;
+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 OrRuleWhen_1;
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { OrRulesRuleUnsupportedEvent } from "../index";
+import { buttonStyle } from "../style";
+import "./or-rule-condition";
+import i18next from "i18next";
+import { InputType } from "@openremote/or-mwc-components/or-mwc-input";
+import { OrRulesJsonRuleChangedEvent } from "./or-rule-json-viewer";
+import { getWhenTypesMenu, updateRuleConditionType } from "./or-rule-condition";
+import { getContentWithMenuTemplate } from "@openremote/or-mwc-components/or-mwc-menu";
+import { translate } from "@openremote/or-translate";
+var ResetOption;
+(function (ResetOption) {
+    ResetOption["NO_LONGER_MATCHES"] = "noLongerMatches";
+    ResetOption["VALUE_CHANGES"] = "valueChanges";
+})(ResetOption || (ResetOption = {}));
+// language=CSS
+const style = css `
+    
+    :host {
+        display: block;
+    }
+    
+    ${buttonStyle}
+    
+    .rule-group-items {
+        display: flex;
+        flex-direction: column;
+    }
+    
+    .rule-group .rule-group-items > div {
+        margin: 10px 0;
+    }
+    
+    .rule-condition {
+        display: flex;
+        padding-right: 5px;
+    }
+     
+    .rule-condition > * {
+        flex-grow: 0;
+    }
+    
+    .rule-condition > or-rule-condition {
+        flex-grow: 1;
+    }
+    
+    or-rule-condition {
+        margin-bottom: 10px;
+    }
+
+    .rule-group-item > or-icon {
+        padding-left: 17px;
+    }
+    
+    or-icon.small {
+        --or-icon-width: 14px;
+        --or-icon-height: 14px;
+    }
+    
+    or-panel {
+        margin: 10px 10px 20px 10px;
+        position: relative;
+    }
+    
+    or-panel > .remove-button {
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: 24px;
+        height: 24px;
+        transform: translate(50%, -50%);
+    }
+
+    .rule-condition:hover .button-clear {
+        visibility: visible;
+    }
+
+    or-panel:hover .remove-button.button-clear {
+        visibility: visible;
+    }
+    
+    .add-button-wrapper {
+        display: flex;
+        align-items: center;
+        white-space: nowrap;
+    }
+    
+    .add-button-wrapper > * {
+        margin-right: 6px;
+    }
+    
+    .add-button-wrapper or-mwc-menu {
+        text-transform: capitalize;
+    }
+
+    strong {
+        margin: var(--internal-or-panel-heading-margin);
+        font-size: var(--internal-or-panel-heading-font-size);
+    }
+`;
+let OrRuleWhen = OrRuleWhen_1 = class OrRuleWhen extends translate(i18next)(LitElement) {
+    static get styles() {
+        return style;
     }
-    
-    ${buttonStyle}
-    
-    .rule-group-items {
-        display: flex;
-        flex-direction: column;
+    ruleGroupTemplate(group, parentGroup) {
+        if (!group) {
+            return html ``;
+        }
+        const isTopLevel = !parentGroup;
+        const showAddCondition = !this.readonly && (!this.config || !this.config.controls || this.config.controls.hideWhenAddCondition !== true);
+        const showRemoveCondition = !this.readonly;
+        const showRemoveGroup = !this.readonly;
+        let wrapper;
+        if (isTopLevel) {
+            wrapper = (content, item, parent, isGroup, isFirst) => {
+                return html `
+                    <or-panel .heading="${i18next.t(isFirst ? "when" : "orWhen")}...">
+                        ${showRemoveGroup ? html `
+                            <button class="button-clear remove-button" @click="${() => this.removeItem(item, parent, isGroup)}">
+                                <or-icon icon="close-circle"></or-icon>  
+                            </button>
+                        ` : ``}
+                        ${content}
+                    </or-panel>`;
+            };
+        }
+        else {
+            wrapper = (content, item, parent, isGroup, isFirst) => {
+                return html `
+                    ${!isFirst ? html `
+                        <or-icon class="small" icon="ampersand"></or-icon>
+                    ` : ``}
+                    ${content}
+                `;
+                return content;
+            };
+        }
+        let groupsTemplate = ``;
+        let itemsTemplate = ``;
+        let addTemplate = ``;
+        let isFirst = true;
+        if (group.groups && group.groups.length > 0) {
+            groupsTemplate = html `
+                ${group.groups.map((childGroup, index) => {
+                const content = html `
+                        <div class="rule-group-item">
+                            ${this.ruleGroupTemplate(childGroup, group)}
+                        </div>
+                    `;
+                return wrapper(content, childGroup, group, true, index == 0);
+            })}
+            `;
+            isFirst = false;
+        }
+        if (group.items && group.items.length > 0) {
+            itemsTemplate = html `
+                ${group.items.map((condition, index) => {
+                const content = html `
+                        <div class="rule-group-item">
+                            <div class="rule-condition">
+                                <or-rule-condition .config="${this.config}" .assetInfos="${this.assetInfos}" .ruleCondition="${condition}" .readonly="${this.readonly}" .assetProvider="${this.assetProvider}"></or-rule-condition>
+                                ${showRemoveGroup ? html `
+                                    <button class="button-clear ${showRemoveCondition ? "" : "hidden"}" @click="${() => this.removeItem(condition, group, false)}"><or-icon icon="close-circle"></or-icon></input>
+                                ` : ``}
+                            </div>
+                        </div>
+                    `;
+                return wrapper(content, condition, group, true, isFirst && index === 0);
+            })}
+            `;
+            isFirst = false;
+        }
+        if (!isTopLevel && showAddCondition) {
+            addTemplate = html `
+                <span class="add-button-wrapper">
+                    ${getContentWithMenuTemplate(html `<or-mwc-input class="plus-button" type="${InputType.BUTTON}" icon="plus"
+                                           .label="${i18next.t("rulesEditorAddCondition")}"></or-mwc-input>`, getWhenTypesMenu(this.config, this.assetInfos), undefined, (value) => this.addCondition(group, value))}
+                </span>
+            `;
+        }
+        return html `
+            ${groupsTemplate}
+            ${itemsTemplate}
+            ${addTemplate}
+        `;
     }
-    
-    .rule-group .rule-group-items > div {
-        margin: 10px 0;
+    dateTimePredicateTemplate() {
+        return html `<span>DATE TIME PREDICATE NOT IMPLEMENTED</span>`;
     }
-    
-    .rule-condition {
-        display: flex;
-        padding-right: 5px;
+    shouldUpdate(_changedProperties) {
+        if (_changedProperties.has("rule")) {
+            if (this.rule) {
+                if (!this.rule.when) {
+                    this.rule.when = {
+                        operator: "OR" /* LogicGroupOperator.OR */
+                    };
+                }
+                else {
+                    // Check this is a rule compatible with this editor
+                    if (!OrRuleWhen_1._isRuleWhenCompatible(this.rule.when)) {
+                        this.rule = undefined;
+                        this.dispatchEvent(new OrRulesRuleUnsupportedEvent());
+                    }
+                }
+            }
+        }
+        return super.shouldUpdate(_changedProperties);
     }
-     
-    .rule-condition > * {
-        flex-grow: 0;
+    render() {
+        if (!this.rule || !this.rule.when) {
+            return html ``;
+        }
+        const showAddGroup = !this.readonly && (!this.config || !this.config.controls || this.config.controls.hideWhenAddGroup !== true);
+        return html `
+            <div>
+                ${this.ruleGroupTemplate(this.rule.when)}
+            </div>
+            
+            ${!showAddGroup ? `` : html `
+                <or-panel>
+                    <strong>${i18next.t(!this.rule.when.groups || this.rule.when.groups.length === 0 ? "when" : "orWhen")}...</strong>
+                    <span class="add-button-wrapper">
+                        ${getContentWithMenuTemplate(html `<or-mwc-input class="plus-button" type="${InputType.BUTTON}" icon="plus"></or-mwc-input>`, getWhenTypesMenu(this.config, this.assetInfos), undefined, (value) => this.addGroup(this.rule.when, value))}
+                    </span>
+                </or-panel>
+            `}
+        `;
     }
-    
-    .rule-condition > or-rule-condition {
-        flex-grow: 1;
+    /**
+     * Currently only support a top level OR group and then N child AND groups with no more descendants
+     */
+    static _isRuleWhenCompatible(when) {
+        if (when.operator !== "OR" /* LogicGroupOperator.OR */) {
+            console.warn("Incompatible rule: when operator not set to 'OR'");
+            return false;
+        }
+        if (when.items && when.items.length > 0) {
+            console.warn("Incompatible rule: when items not supported");
+            return false;
+        }
+        if (when.groups && when.groups.find((g) => !this._isWhenGroupCompatible(g))) {
+            console.warn("Incompatible rule: when groups incompatible");
+            return false;
+        }
+        return true;
     }
-    
-    or-rule-condition {
-        margin-bottom: 10px;
+    static _isWhenGroupCompatible(group) {
+        if (group.operator === "OR" /* LogicGroupOperator.OR */) {
+            console.warn("Incompatible rule: when group operator not set to 'AND'");
+            return false;
+        }
+        if (group.groups && group.groups.length > 0) {
+            console.warn("Incompatible rule: when group nested groups not supported");
+            return false;
+        }
+        return true;
     }
-
-    .rule-group-item > or-icon {
-        padding-left: 17px;
+    addGroup(parent, type) {
+        if (!this.rule || !this.rule.when || parent !== this.rule.when) {
+            return;
+        }
+        let newGroup = {
+            operator: "AND" /* LogicGroupOperator.AND */
+        };
+        if (this.config && this.config.json && this.config.json.whenGroup) {
+            newGroup = JSON.parse(JSON.stringify(this.config.json.whenGroup));
+        }
+        if (newGroup.operator !== "AND" /* LogicGroupOperator.AND */) {
+            console.warn("JSON rules editor doesn't support top level logic group with type OR");
+            this.dispatchEvent(new OrRulesRuleUnsupportedEvent());
+            return;
+        }
+        if (newGroup.groups && newGroup.groups.length > 0) {
+            console.warn("JSON rules editor doesn't support multiple top level logic groups");
+            this.dispatchEvent(new OrRulesRuleUnsupportedEvent());
+            return;
+        }
+        newGroup.groups = undefined;
+        // Add an item if none exist
+        if (!newGroup.items || newGroup.items.length === 0) {
+            this.addCondition(newGroup, type, true);
+        }
+        if (!parent.groups) {
+            parent.groups = [];
+        }
+        parent.groups.push(newGroup);
+        this.dispatchEvent(new OrRulesJsonRuleChangedEvent());
+        this.requestUpdate();
     }
-    
-    or-icon.small {
-        --or-icon-width: 14px;
-        --or-icon-height: 14px;
+    removeItem(item, parent, isGroup) {
+        let removed = false;
+        if (parent) {
+            if (isGroup) {
+                const index = parent.groups.indexOf(item);
+                parent.groups.splice(index, 1);
+                removed = index >= 0;
+            }
+            else {
+                const index = parent.items.indexOf(item);
+                parent.items.splice(index, 1);
+                removed = index >= 0;
+            }
+            if (removed) {
+                this.dispatchEvent(new OrRulesJsonRuleChangedEvent());
+                this.requestUpdate();
+            }
+        }
     }
-    
-    or-panel {
-        margin: 10px 10px 20px 10px;
-        position: relative;
+    addCondition(parent, type, silent) {
+        if (!parent) {
+            return;
+        }
+        if (!parent.items) {
+            parent.items = [];
+        }
+        let newCondition = {};
+        if (this.config && this.config.json && this.config.json.whenCondition) {
+            newCondition = JSON.parse(JSON.stringify(this.config.json.whenCondition));
+        }
+        else {
+            updateRuleConditionType(newCondition, type || "ThingAsset" /* WellknownAssets.THINGASSET */, this.config);
+        }
+        parent.items.push(newCondition);
+        if (!silent) {
+            this.dispatchEvent(new OrRulesJsonRuleChangedEvent());
+            this.requestUpdate();
+        }
     }
-    
-    or-panel > .remove-button {
-        position: absolute;
-        right: 0;
-        top: 0;
-        width: 24px;
-        height: 24px;
-        transform: translate(50%, -50%);
-    }
-
-    .rule-condition:hover .button-clear {
-        visibility: visible;
-    }
-
-    or-panel:hover .remove-button.button-clear {
-        visibility: visible;
-    }
-    
-    .add-button-wrapper {
-        display: flex;
-        align-items: center;
-        white-space: nowrap;
-    }
-    
-    .add-button-wrapper > * {
-        margin-right: 6px;
-    }
-    
-    .add-button-wrapper or-mwc-menu {
-        text-transform: capitalize;
-    }
-
-    strong {
-        margin: var(--internal-or-panel-heading-margin);
-        font-size: var(--internal-or-panel-heading-font-size);
-    }
-`;let OrRuleWhen=OrRuleWhen_1=class extends(translate(i18next)(LitElement)){static get styles(){return style}ruleGroupTemplate(e,t){if(!e)return html``;const o=!t,n=!(this.readonly||this.config&&this.config.controls&&!0===this.config.controls.hideWhenAddCondition),r=!this.readonly,i=!this.readonly;let s;s=o?(e,t,o,n,r)=>html`
-                    <or-panel .heading="${i18next.t(r?"when":"orWhen")}...">
-                        ${i?html`
-                            <button class="button-clear remove-button" @click="${()=>this.removeItem(t,o,n)}">
-                                <or-icon icon="close-circle"></or-icon>  
-                            </button>
-                        `:""}
-                        ${e}
-                    </or-panel>`:(e,t,o,n,r)=>html`
-                    ${r?"":html`
-                        <or-icon class="small" icon="ampersand"></or-icon>
-                    `}
-                    ${e}
-                `;let l="",p="",u="",a=!0;return e.groups&&e.groups.length>0&&(l=html`
-                ${e.groups.map(((t,o)=>{const n=html`
-                        <div class="rule-group-item">
-                            ${this.ruleGroupTemplate(t,e)}
-                        </div>
-                    `;return s(n,t,e,!0,0==o)}))}
-            `,a=!1),e.items&&e.items.length>0&&(p=html`
-                ${e.items.map(((t,o)=>{const n=html`
-                        <div class="rule-group-item">
-                            <div class="rule-condition">
-                                <or-rule-condition .config="${this.config}" .assetInfos="${this.assetInfos}" .ruleCondition="${t}" .readonly="${this.readonly}" .assetProvider="${this.assetProvider}"></or-rule-condition>
-                                ${i?html`
-                                    <button class="button-clear ${r?"":"hidden"}" @click="${()=>this.removeItem(t,e,!1)}"><or-icon icon="close-circle"></or-icon></input>
-                                `:""}
-                            </div>
-                        </div>
-                    `;return s(n,t,e,!0,a&&0===o)}))}
-            `,a=!1),!o&&n&&(u=html`
-                <span class="add-button-wrapper">
-                    ${getContentWithMenuTemplate(html`<or-mwc-input class="plus-button" type="${InputType.BUTTON}" icon="plus"
-                                           .label="${i18next.t("rulesEditorAddCondition")}"></or-mwc-input>`,getWhenTypesMenu(this.config,this.assetInfos),void 0,(t=>this.addCondition(e,t)))}
-                </span>
-            `),html`
-            ${l}
-            ${p}
-            ${u}
-        `}dateTimePredicateTemplate(){return html`<span>DATE TIME PREDICATE NOT IMPLEMENTED</span>`}shouldUpdate(e){return e.has("rule")&&this.rule&&(this.rule.when?OrRuleWhen_1._isRuleWhenCompatible(this.rule.when)||(this.rule=void 0,this.dispatchEvent(new OrRulesRuleUnsupportedEvent)):this.rule.when={operator:"OR"}),super.shouldUpdate(e)}render(){if(!this.rule||!this.rule.when)return html``;const e=!(this.readonly||this.config&&this.config.controls&&!0===this.config.controls.hideWhenAddGroup);return html`
-            <div>
-                ${this.ruleGroupTemplate(this.rule.when)}
-            </div>
-            
-            ${e?html`
-                <or-panel>
-                    <strong>${i18next.t(this.rule.when.groups&&0!==this.rule.when.groups.length?"orWhen":"when")}...</strong>
-                    <span class="add-button-wrapper">
-                        ${getContentWithMenuTemplate(html`<or-mwc-input class="plus-button" type="${InputType.BUTTON}" icon="plus"></or-mwc-input>`,getWhenTypesMenu(this.config,this.assetInfos),void 0,(e=>this.addGroup(this.rule.when,e)))}
-                    </span>
-                </or-panel>
-            `:""}
-        `}static _isRuleWhenCompatible(e){return"OR"!==e.operator?(console.warn("Incompatible rule: when operator not set to 'OR'"),!1):e.items&&e.items.length>0?(console.warn("Incompatible rule: when items not supported"),!1):!e.groups||!e.groups.find((e=>!this._isWhenGroupCompatible(e)))||(console.warn("Incompatible rule: when groups incompatible"),!1)}static _isWhenGroupCompatible(e){return"OR"===e.operator?(console.warn("Incompatible rule: when group operator not set to 'AND'"),!1):!(e.groups&&e.groups.length>0&&(console.warn("Incompatible rule: when group nested groups not supported"),1))}addGroup(e,t){if(!this.rule||!this.rule.when||e!==this.rule.when)return;let o={operator:"AND"};return this.config&&this.config.json&&this.config.json.whenGroup&&(o=JSON.parse(JSON.stringify(this.config.json.whenGroup))),"AND"!==o.operator?(console.warn("JSON rules editor doesn't support top level logic group with type OR"),void this.dispatchEvent(new OrRulesRuleUnsupportedEvent)):o.groups&&o.groups.length>0?(console.warn("JSON rules editor doesn't support multiple top level logic groups"),void this.dispatchEvent(new OrRulesRuleUnsupportedEvent)):(o.groups=void 0,o.items&&0!==o.items.length||this.addCondition(o,t,!0),e.groups||(e.groups=[]),e.groups.push(o),this.dispatchEvent(new OrRulesJsonRuleChangedEvent),void this.requestUpdate())}removeItem(e,t,o){let n=!1;if(t){if(o){const o=t.groups.indexOf(e);t.groups.splice(o,1),n=o>=0}else{const o=t.items.indexOf(e);t.items.splice(o,1),n=o>=0}n&&(this.dispatchEvent(new OrRulesJsonRuleChangedEvent),this.requestUpdate())}}addCondition(e,t,o){if(!e)return;e.items||(e.items=[]);let n={};this.config&&this.config.json&&this.config.json.whenCondition?n=JSON.parse(JSON.stringify(this.config.json.whenCondition)):updateRuleConditionType(n,t||"ThingAsset",this.config),e.items.push(n),o||(this.dispatchEvent(new OrRulesJsonRuleChangedEvent),this.requestUpdate())}};__decorate([property({type:Object})],OrRuleWhen.prototype,"rule",void 0),__decorate([property({type:Boolean})],OrRuleWhen.prototype,"readonly",void 0),__decorate([property({type:Object})],OrRuleWhen.prototype,"assetProvider",void 0),__decorate([property({type:Object,attribute:!1})],OrRuleWhen.prototype,"assetInfos",void 0),OrRuleWhen=OrRuleWhen_1=__decorate([customElement("or-rule-when")],OrRuleWhen);
+};
+__decorate([
+    property({ type: Object })
+], OrRuleWhen.prototype, "rule", void 0);
+__decorate([
+    property({ type: Boolean })
+], OrRuleWhen.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Object })
+], OrRuleWhen.prototype, "assetProvider", void 0);
+__decorate([
+    property({ type: Object, attribute: false })
+], OrRuleWhen.prototype, "assetInfos", void 0);
+OrRuleWhen = OrRuleWhen_1 = __decorate([
+    customElement("or-rule-when")
+], OrRuleWhen);
+//# sourceMappingURL=or-rule-when.js.map

package/lib/or-rule-group-viewer.d.ts

@@ -4,7 +4,7 @@ declare const OrRuleGroupViewer_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;
@@ -19,7 +19,7 @@ export declare class OrRuleGroupViewer extends OrRuleGroupViewer_base {
     protected _groupNameInput?: OrMwcInput;
     static get styles(): import("lit").CSSResult[];
     willUpdate(changedProps: PropertyValues): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     protected _onGroupNameInput(ev: InputEvent): void;
     protected _changeName(name: string): void;
     protected _cannotSave(): boolean;

package/lib/or-rule-group-viewer.js

@@ -1,12 +1,106 @@
-var __decorate=this&&this.__decorate||function(e,t,r,o){var i,n=arguments.length,a=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,r):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,r,o);else for(var p=e.length-1;p>=0;p--)(i=e[p])&&(a=(n<3?i(a):n>3?i(t,r,a):i(t,r))||a);return n>3&&a&&Object.defineProperty(t,r,a),a};import{i18next,translate}from"@openremote/or-translate";import{html,LitElement}from"lit";import{customElement,property,query,state}from"lit/decorators.js";import{style}from"./or-rule-viewer";import{InputType}from"@openremote/or-mwc-components/or-mwc-input";import{OrRulesGroupNameChangeEvent}from"./index";import{showSnackbar}from"@openremote/or-mwc-components/or-mwc-snackbar";let OrRuleGroupViewer=class extends(translate(i18next)(LitElement)){constructor(){super(...arguments),this.readonly=!1}static get styles(){return[style]}willUpdate(e){var t;return e.has("group")&&(null===(t=this._groupNameInput)||void 0===t||t.focus()),super.willUpdate(e)}render(){return html`
-            <div id="main-wrapper" class="wrapper">
-                <div id="rule-header">
-                    <or-mwc-input id="rule-name" outlined .type="${InputType.TEXT}" .label="${i18next.t("ruleGroupName")}" focused
-                                  .value="${this.group}" ?disabled="${this.readonly}" required minlength="1" maxlength="255" @input="${this._onGroupNameInput}"
-                    ></or-mwc-input>
-                    <div id="rule-header-controls">
-                        <or-mwc-input .type="${InputType.BUTTON}" id="save-btn" label="save" raised ?disabled="${this._cannotSave()}" @or-mwc-input-changed="${this._onSaveClicked}"></or-mwc-input>
-                    </div>
-                </div>
-            </div>
-        `}_onGroupNameInput(e){var t;const r=null===(t=this._groupNameInput)||void 0===t?void 0:t.nativeValue;r&&this._changeName(r),this.requestUpdate()}_changeName(e){e.length>=3&&e.length<=255&&(this.group=e)}_cannotSave(){var e,t,r;return this.readonly||!(null===(e=this._groupNameInput)||void 0===e?void 0:e.nativeValue)||!(null===(t=this._groupNameInput)||void 0===t?void 0:t.valid)||((null===(r=this._groupNameInput)||void 0===r?void 0:r.nativeValue)||"")===this._lastSaved}_onSaveClicked(){this.group&&!this._cannotSave()&&(this.dispatchEvent(new OrRulesGroupNameChangeEvent(this.group))?this._lastSaved=this.group:showSnackbar(void 0,"ruleGroupExistsError"))}};__decorate([property({type:String})],OrRuleGroupViewer.prototype,"group",void 0),__decorate([property({type:Boolean})],OrRuleGroupViewer.prototype,"readonly",void 0),__decorate([state()],OrRuleGroupViewer.prototype,"_lastSaved",void 0),__decorate([query("#rule-name")],OrRuleGroupViewer.prototype,"_groupNameInput",void 0),OrRuleGroupViewer=__decorate([customElement("or-rule-group-viewer")],OrRuleGroupViewer);export{OrRuleGroupViewer};
+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;
+};
+/*
+ * Copyright 2025, 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 { i18next, translate } from "@openremote/or-translate";
+import { html, LitElement } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { style } from "./or-rule-viewer";
+import { InputType } from "@openremote/or-mwc-components/or-mwc-input";
+import { OrRulesGroupNameChangeEvent } from "./index";
+import { showSnackbar } from "@openremote/or-mwc-components/or-mwc-snackbar";
+let OrRuleGroupViewer = class OrRuleGroupViewer extends translate(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.readonly = false;
+    }
+    static get styles() {
+        return [style];
+    }
+    willUpdate(changedProps) {
+        var _a;
+        if (changedProps.has("group")) {
+            (_a = this._groupNameInput) === null || _a === void 0 ? void 0 : _a.focus(); // regain focus on the input (if lost)
+        }
+        return super.willUpdate(changedProps);
+    }
+    render() {
+        return html `
+            <div id="main-wrapper" class="wrapper">
+                <div id="rule-header">
+                    <or-mwc-input id="rule-name" outlined .type="${InputType.TEXT}" .label="${i18next.t("ruleGroupName")}" focused
+                                  .value="${this.group}" ?disabled="${this.readonly}" required minlength="1" maxlength="255" @input="${this._onGroupNameInput}"
+                    ></or-mwc-input>
+                    <div id="rule-header-controls">
+                        <or-mwc-input .type="${InputType.BUTTON}" id="save-btn" label="save" raised ?disabled="${this._cannotSave()}" @or-mwc-input-changed="${this._onSaveClicked}"></or-mwc-input>
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+    _onGroupNameInput(ev) {
+        var _a;
+        const value = (_a = this._groupNameInput) === null || _a === void 0 ? void 0 : _a.nativeValue;
+        if (value)
+            this._changeName(value);
+        this.requestUpdate();
+    }
+    _changeName(name) {
+        if (name.length >= 3 && name.length <= 255) {
+            this.group = name;
+        }
+    }
+    _cannotSave() {
+        var _a, _b, _c;
+        return this.readonly || !((_a = this._groupNameInput) === null || _a === void 0 ? void 0 : _a.nativeValue) || !((_b = this._groupNameInput) === null || _b === void 0 ? void 0 : _b.valid) || (((_c = this._groupNameInput) === null || _c === void 0 ? void 0 : _c.nativeValue) || "") === this._lastSaved;
+    }
+    _onSaveClicked() {
+        if (this.group && !this._cannotSave()) {
+            const success = this.dispatchEvent(new OrRulesGroupNameChangeEvent(this.group));
+            if (success) {
+                this._lastSaved = this.group;
+            }
+            else {
+                showSnackbar(undefined, 'ruleGroupExistsError');
+            }
+        }
+    }
+};
+__decorate([
+    property({ type: String })
+], OrRuleGroupViewer.prototype, "group", void 0);
+__decorate([
+    property({ type: Boolean })
+], OrRuleGroupViewer.prototype, "readonly", void 0);
+__decorate([
+    state()
+], OrRuleGroupViewer.prototype, "_lastSaved", void 0);
+__decorate([
+    query("#rule-name")
+], OrRuleGroupViewer.prototype, "_groupNameInput", void 0);
+OrRuleGroupViewer = __decorate([
+    customElement("or-rule-group-viewer")
+], OrRuleGroupViewer);
+export { OrRuleGroupViewer };
+//# sourceMappingURL=or-rule-group-viewer.js.map

package/lib/or-rule-text-viewer.d.ts

@@ -1,11 +1,9 @@
-/// <reference types="ace-builds/ace-modules" />
 import { RulesConfig, RuleView } from "./index";
 import { LitElement, TemplateResult } from "lit";
 import { RulesetUnion } from "@openremote/model";
 import "ace-builds/src-noconflict/mode-javascript";
 import "ace-builds/src-noconflict/mode-json";
 import "ace-builds/src-noconflict/mode-groovy";
-import "ace-builds/webpack-resolver";
 import "@openremote/or-components/or-ace-editor";
 import { OrAceEditor, OrAceEditorChangedEvent } from "@openremote/or-components/or-ace-editor";
 import { Ref } from "lit/directives/ref.js";