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

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

@@ -1,353 +1,136 @@
-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;
+var OrRuleWhen_1,ResetOption,__decorate=this&&this.__decorate||function(e,t,o,r){var i,n=arguments.length,s=n<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var l=e.length-1;l>=0;l--)(i=e[l])&&(s=(n<3?i(s):n>3?i(t,o,s):i(t,o))||s);return n>3&&s&&Object.defineProperty(t,o,s),s};import{css as e,html as t,LitElement as o}from"lit";import{customElement as r,property as i}from"lit/decorators.js";import{OrRulesRuleUnsupportedEvent as n}from"../index";import{buttonStyle as s}from"../style";import"./or-rule-condition";import l from"i18next";import{InputType as p}from"@openremote/or-mwc-components/or-mwc-input";import{OrRulesJsonRuleChangedEvent as a}from"./or-rule-json-viewer";import{getWhenTypesMenu as u,updateRuleConditionType as h}from"./or-rule-condition";import{getContentWithMenuTemplate as c}from"@openremote/or-mwc-components/or-mwc-menu";import{translate as d}from"@openremote/or-translate";!function(e){e.NO_LONGER_MATCHES="noLongerMatches",e.VALUE_CHANGES="valueChanges"}(ResetOption||(ResetOption={}));let style=e`
+    
+    :host {
+        display: block;
     }
-    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}
-        `;
+    
+    ${s}
+    
+    .rule-group-items {
+        display: flex;
+        flex-direction: column;
     }
-    dateTimePredicateTemplate() {
-        return html `<span>DATE TIME PREDICATE NOT IMPLEMENTED</span>`;
+    
+    .rule-group .rule-group-items > div {
+        margin: 10px 0;
     }
-    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 {
+        display: flex;
+        padding-right: 5px;
     }
-    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 > * {
+        flex-grow: 0;
     }
-    /**
-     * 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;
+    
+    .rule-condition > or-rule-condition {
+        flex-grow: 1;
     }
-    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;
+    
+    or-rule-condition {
+        margin-bottom: 10px;
     }
-    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();
+
+    .rule-group-item > or-icon {
+        padding-left: 17px;
     }
-    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-icon.small {
+        --or-icon-width: 14px;
+        --or-icon-height: 14px;
     }
-    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 {
+        margin: 10px 10px 20px 10px;
+        position: relative;
     }
-};
-__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
+    
+    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);
+    }
+`,OrRuleWhen=OrRuleWhen_1=class extends d(l)(o){static get styles(){return style}ruleGroupTemplate(e,o){let r;if(!e)return t``;let i=!o,n=!this.readonly&&(!this.config||!this.config.controls||!0!==this.config.controls.hideWhenAddCondition),s=!this.readonly,a=!this.readonly;r=i?(e,o,r,i,n)=>t`
+                    <or-panel .heading="${l.t(n?"when":"orWhen")}...">
+                        ${a?t`
+                            <button class="button-clear remove-button" @click="${()=>this.removeItem(o,r,i)}">
+                                <or-icon icon="close-circle"></or-icon>  
+                            </button>
+                        `:""}
+                        ${e}
+                    </or-panel>`:(e,o,r,i,n)=>t`
+                    ${!n?t`
+                        <or-icon class="small" icon="ampersand"></or-icon>
+                    `:""}
+                    ${e}
+                `;let h="",d="",m="",g=!0;return e.groups&&e.groups.length>0&&(h=t`
+                ${e.groups.map((o,i)=>r(t`
+                        <div class="rule-group-item">
+                            ${this.ruleGroupTemplate(o,e)}
+                        </div>
+                    `,o,e,!0,0==i))}
+            `,g=!1),e.items&&e.items.length>0&&(d=t`
+                ${e.items.map((o,i)=>r(t`
+                        <div class="rule-group-item">
+                            <div class="rule-condition">
+                                <or-rule-condition .config="${this.config}" .assetInfos="${this.assetInfos}" .ruleCondition="${o}" .readonly="${this.readonly}" .assetProvider="${this.assetProvider}"></or-rule-condition>
+                                ${a?t`
+                                    <button class="button-clear ${s?"":"hidden"}" @click="${()=>this.removeItem(o,e,!1)}"><or-icon icon="close-circle"></or-icon></input>
+                                `:""}
+                            </div>
+                        </div>
+                    `,o,e,!0,g&&0===i))}
+            `,g=!1),!i&&n&&(m=t`
+                <span class="add-button-wrapper">
+                    ${c(t`<or-mwc-input class="plus-button" type="${p.BUTTON}" icon="plus"
+                                           .label="${l.t("rulesEditorAddCondition")}"></or-mwc-input>`,u(this.config,this.assetInfos),void 0,t=>this.addCondition(e,t))}
+                </span>
+            `),t`
+            ${h}
+            ${d}
+            ${m}
+        `}dateTimePredicateTemplate(){return t`<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 n)):this.rule.when={operator:"OR"}),super.shouldUpdate(e)}render(){if(!this.rule||!this.rule.when)return t``;let e=!this.readonly&&(!this.config||!this.config.controls||!0!==this.config.controls.hideWhenAddGroup);return t`
+            <div>
+                ${this.ruleGroupTemplate(this.rule.when)}
+            </div>
+            
+            ${!e?"":t`
+                <or-panel>
+                    <strong>${l.t(!this.rule.when.groups||0===this.rule.when.groups.length?"when":"orWhen")}...</strong>
+                    <span class="add-button-wrapper">
+                        ${c(t`<or-mwc-input class="plus-button" type="${p.BUTTON}" icon="plus"></or-mwc-input>`,u(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"};if(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"),this.dispatchEvent(new n);return}if(o.groups&&o.groups.length>0){console.warn("JSON rules editor doesn't support multiple top level logic groups"),this.dispatchEvent(new n);return}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 a),this.requestUpdate()}removeItem(e,t,o){let r=!1;if(t){if(o){let o=t.groups.indexOf(e);t.groups.splice(o,1),r=o>=0}else{let o=t.items.indexOf(e);t.items.splice(o,1),r=o>=0}r&&(this.dispatchEvent(new a),this.requestUpdate())}}addCondition(e,t,o){if(!e)return;e.items||(e.items=[]);let r={};this.config&&this.config.json&&this.config.json.whenCondition?r=JSON.parse(JSON.stringify(this.config.json.whenCondition)):h(r,t||"ThingAsset",this.config),e.items.push(r),o||(this.dispatchEvent(new a),this.requestUpdate())}};__decorate([i({type:Object})],OrRuleWhen.prototype,"rule",void 0),__decorate([i({type:Boolean})],OrRuleWhen.prototype,"readonly",void 0),__decorate([i({type:Object})],OrRuleWhen.prototype,"assetProvider",void 0),__decorate([i({type:Object,attribute:!1})],OrRuleWhen.prototype,"assetInfos",void 0),OrRuleWhen=OrRuleWhen_1=__decorate([r("or-rule-when")],OrRuleWhen);

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

@@ -1,106 +1,12 @@
-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
+var __decorate=this&&this.__decorate||function(e,r,t,o){var i,a=arguments.length,n=a<3?r:null===o?o=Object.getOwnPropertyDescriptor(r,t):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,r,t,o);else for(var u=e.length-1;u>=0;u--)(i=e[u])&&(n=(a<3?i(n):a>3?i(r,t,n):i(r,t))||n);return a>3&&n&&Object.defineProperty(r,t,n),n};import{i18next as e,translate as r}from"@openremote/or-translate";import{html as t,LitElement as o}from"lit";import{customElement as i,property as a,query as n,state as u}from"lit/decorators.js";import{style as p}from"./or-rule-viewer";import{InputType as l}from"@openremote/or-mwc-components/or-mwc-input";import{OrRulesGroupNameChangeEvent as d}from"./index";import{showSnackbar as s}from"@openremote/or-mwc-components/or-mwc-snackbar";let OrRuleGroupViewer=class extends r(e)(o){constructor(){super(...arguments),this.readonly=!1}static get styles(){return[p]}willUpdate(e){var r;return e.has("group")&&(null==(r=this._groupNameInput)||r.focus()),super.willUpdate(e)}render(){return t`
+            <div id="main-wrapper" class="wrapper">
+                <div id="rule-header">
+                    <or-mwc-input id="rule-name" outlined .type="${l.TEXT}" .label="${e.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="${l.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 r;let t=null==(r=this._groupNameInput)?void 0:r.nativeValue;t&&this._changeName(t),this.requestUpdate()}_changeName(e){e.length>=3&&e.length<=255&&(this.group=e)}_cannotSave(){var e,r,t;return this.readonly||!(null==(e=this._groupNameInput)?void 0:e.nativeValue)||!(null==(r=this._groupNameInput)?void 0:r.valid)||((null==(t=this._groupNameInput)?void 0:t.nativeValue)||"")===this._lastSaved}_onSaveClicked(){this.group&&!this._cannotSave()&&(this.dispatchEvent(new d(this.group))?this._lastSaved=this.group:s(void 0,"ruleGroupExistsError"))}};__decorate([a({type:String})],OrRuleGroupViewer.prototype,"group",void 0),__decorate([a({type:Boolean})],OrRuleGroupViewer.prototype,"readonly",void 0),__decorate([u()],OrRuleGroupViewer.prototype,"_lastSaved",void 0),__decorate([n("#rule-name")],OrRuleGroupViewer.prototype,"_groupNameInput",void 0),OrRuleGroupViewer=__decorate([i("or-rule-group-viewer")],OrRuleGroupViewer);export{OrRuleGroupViewer};