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

package/lib/or-rule-viewer.js

@@ -1,93 +1,373 @@
-var __decorate=this&&this.__decorate||function(e,t,r,i){var l,s=arguments.length,a=s<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,r,i);else for(var o=e.length-1;o>=0;o--)(l=e[o])&&(a=(s<3?l(a):s>3?l(t,r,a):l(t,r))||a);return s>3&&a&&Object.defineProperty(t,r,a),a},__awaiter=this&&this.__awaiter||function(e,t,r,i){return new(r||(r=Promise))((function(l,s){function a(e){try{n(i.next(e))}catch(e){s(e)}}function o(e){try{n(i.throw(e))}catch(e){s(e)}}function n(e){var t;e.done?l(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(a,o)}n((i=i.apply(e,t||[])).next())}))};import{css,html,LitElement}from"lit";import{customElement,property,query}from"lit/decorators.js";import{OrRulesRequestSaveEvent,OrRulesRuleChangedEvent,OrRulesRuleUnsupportedEvent,OrRulesSaveEvent,RuleViewInfoMap}from"./index";import manager,{Util}from"@openremote/core";import"./json-viewer/or-rule-json-viewer";import"./or-rule-text-viewer";import"./or-rule-validity";import"./flow-viewer/components/flow-editor";import"@openremote/or-mwc-components/or-mwc-input";import{translate}from"@openremote/or-translate";import{InputType}from"@openremote/or-mwc-components/or-mwc-input";import i18next from"i18next";import{showErrorDialog}from"@openremote/or-mwc-components/or-mwc-dialog";import{project}from"./flow-viewer/components/flow-editor";export const style=css`
-
-    :host {
-        display: block;
-        height: 100%;
-        width: 100%;
-        overflow-y: auto;
+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 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 { css, html, LitElement } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { OrRulesRequestSaveEvent, OrRulesRuleChangedEvent, OrRulesRuleUnsupportedEvent, OrRulesSaveEvent, RuleViewInfoMap } from "./index";
+import manager, { Util } from "@openremote/core";
+import "./json-viewer/or-rule-json-viewer";
+import "./or-rule-text-viewer";
+import "./or-rule-validity";
+import "./flow-viewer/components/flow-editor";
+import "@openremote/or-mwc-components/or-mwc-input";
+import { translate } from "@openremote/or-translate";
+import { InputType } from "@openremote/or-mwc-components/or-mwc-input";
+import i18next from "i18next";
+import { showErrorDialog } from "@openremote/or-mwc-components/or-mwc-dialog";
+import { project } from "./flow-viewer/components/flow-editor";
+// language=CSS
+export const style = css `
+
+    :host {
+        display: block;
+        height: 100%;
+        width: 100%;
+        overflow-y: auto;
+    }
+
+    or-rule-validity {
+        margin-left: 10px;
+        margin-right: 20px;
+    }
+
+    .wrapper {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        height: 100%;
+    }
+
+    #main-wrapper.saving {
+        opacity: 0.5;
+        pointer-events: none;
+    }
+    
+    #rule-name {
+        max-width: 400px;
+        flex: 1 1 0;
+        display: flex;
+    }
+    
+    #rule-header {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        box-sizing: border-box;
+        min-height: var(--internal-or-rules-header-height);
+        height: var(--internal-or-rules-header-height);
+        z-index: 7;
+        padding: 15px 20px;
+        --or-icon-fill: var(--internal-or-rules-panel-color);
+    }
+    
+    #rule-header-controls {
+        margin-left: auto;
+        display: flex;
+        align-items: center;
+    }
+    
+    #rule-id {
+        margin-left: 10px;
+        font-size: small;
+    }
+    
+    #active-wrapper {
+        display: flex;
+        align-items: center;
+    }
+    
+    #rule-view {
+        flex-grow: 1;
+        background-color: var(--internal-or-rules-background-color);
+    }
+    
+    .iconfill-gray {
+        margin-left: 10px;
+        --or-icon-fill: var(--internal-or-rules-list-icon-color-ok);
+    }
+
+    .iconfill-red {
+        margin-left: 10px;
+        --or-icon-fill: var(--internal-or-rules-list-icon-color-error);
+    }
+`;
+let OrRuleViewer = class OrRuleViewer extends translate(i18next)(LitElement) {
+    static get styles() {
+        return [
+            style
+        ];
     }
-
-    or-rule-validity {
-        margin-left: 10px;
-        margin-right: 20px;
+    constructor() {
+        super();
+        this.readonly = false;
+        this.disabled = false;
+        this.modified = false;
+        this._ruleValid = false;
+        this._supported = true;
+        this._focusName = false;
+        this.addEventListener(OrRulesRuleChangedEvent.NAME, this._onRuleChanged);
+        this.addEventListener(OrRulesRuleUnsupportedEvent.NAME, this._onRuleUnsupported);
     }
-
-    .wrapper {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        height: 100%;
+    get valid() {
+        return this.ruleset && this.view && this._ruleValid && this.ruleset.name && this.ruleset.name.length >= 1 && this.ruleset.name.length < 255;
     }
-
-    #main-wrapper.saving {
-        opacity: 0.5;
-        pointer-events: none;
+    shouldUpdate(_changedProperties) {
+        if (_changedProperties.has("ruleset")) {
+            this._supported = true;
+            this.modified = false;
+            this._ruleValid = false;
+            if (this.ruleset) {
+                this._focusName = true;
+                this.modified = !this.ruleset.id;
+            }
+        }
+        return super.shouldUpdate(_changedProperties);
     }
-    
-    #rule-name {
-        max-width: 400px;
-        flex: 1 1 0;
-        display: flex;
+    render() {
+        if (!this.ruleset) {
+            return html `<div class="wrapper" style="justify-content: center"><or-translate value="noRuleSelected"></or-translate></div>`;
+        }
+        let viewer = RuleViewInfoMap[this.ruleset.lang].viewTemplateProvider(this.ruleset, this.config, this.readonly);
+        let statusIcon = "help";
+        let statusClass = "iconfill-gray";
+        let statusText = "NOSTATUS";
+        if (this.ruleset.status)
+            statusText = this.ruleset.status;
+        switch (this.ruleset.status) {
+            case "DEPLOYED":
+                statusIcon = "play";
+                statusClass = "iconfill-gray";
+                break;
+            case "READY":
+                statusIcon = "check";
+                statusClass = "iconfill-gray";
+                break;
+            case "COMPILATION_ERROR":
+            case "LOOP_ERROR":
+            case "VALIDITY_PERIOD_ERROR":
+            case "EXECUTION_ERROR":
+                statusIcon = "alert-octagon";
+                statusClass = "iconfill-red";
+                statusText = this.ruleset.error;
+                break;
+            case "DISABLED":
+                statusIcon = "minus-circle";
+                statusClass = "iconfill-gray";
+                break;
+            case "PAUSED":
+                statusIcon = "calendar-arrow-right";
+                statusClass = "iconfill-gray";
+                break;
+            case "EXPIRED":
+                statusIcon = "calendar-remove";
+                statusClass = "iconfill-gray";
+                break;
+            case "REMOVED":
+                statusIcon = "close";
+                statusClass = "iconfill-gray";
+                break;
+            default:
+                statusIcon = "stop";
+                statusClass = "iconfill-gray";
+                statusText = "NOSTATUS";
+        }
+        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("ruleName")}" ?focused="${this._focusName}" .value="${this.ruleset ? this.ruleset.name : null}" ?disabled="${this._isReadonly()}" required minlength="1" maxlength="255" @or-mwc-input-changed="${(e) => this._changeName(e.detail.value)}"></or-mwc-input>
+                    <or-icon class="${statusClass}" title="${i18next.t("rulesetStatus." + statusText)}" icon="${statusIcon}"></or-icon>
+                    <span id="rule-id">${this.ruleset.id ? "ID: " + this.ruleset.id : ""}</span>
+                    <div id="rule-header-controls">
+                        <span id="active-wrapper">
+                            <or-translate value="enabled"></or-translate>
+                            <or-mwc-input .type="${InputType.CHECKBOX}" .value="${this.ruleset && this.ruleset.enabled}" ?disabled="${!this.ruleset.id}" @or-mwc-input-changed="${this._toggleEnabled}"></or-mwc-input>
+                        </span>
+                        <or-rule-validity id="rule-header-validity" .ruleset="${this.ruleset}"></or-rule-validity>
+                        <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>
+
+                ${viewer}
+            </div>
+        `;
     }
-    
-    #rule-header {
-        display: flex;
-        align-items: center;
-        width: 100%;
-        box-sizing: border-box;
-        min-height: var(--internal-or-rules-header-height);
-        height: var(--internal-or-rules-header-height);
-        z-index: 7;
-        padding: 15px 20px;
-        --or-icon-fill: var(--internal-or-rules-panel-color);
+    updated(_changedProperties) {
+        if (_changedProperties.has("ruleset") || _changedProperties.has("modified")) {
+            if (this.ruleset && this.view) {
+                this._ruleValid = this.view.validate();
+            }
+        }
     }
-    
-    #rule-header-controls {
-        margin-left: auto;
-        display: flex;
-        align-items: center;
+    _isReadonly() {
+        return this.readonly || !manager.hasRole("write:rules" /* ClientRole.WRITE_RULES */);
     }
-    
-    #rule-id {
-        margin-left: 10px;
-        font-size: small;
+    _cannotSave() {
+        return this._isReadonly() || !this.ruleset || !this.modified || !this.valid;
     }
-    
-    #active-wrapper {
-        display: flex;
-        align-items: center;
+    _changeName(name) {
+        if (this.ruleset && this.ruleset.name !== name) {
+            this.ruleset.name = name;
+            this.modified = true;
+            this.requestUpdate();
+        }
     }
-    
-    #rule-view {
-        flex-grow: 1;
-        background-color: var(--internal-or-rules-background-color);
+    _onRuleChanged(e) {
+        this.modified = true;
+        this._ruleValid = e.detail;
     }
-    
-    .iconfill-gray {
-        margin-left: 10px;
-        --or-icon-fill: var(--internal-or-rules-list-icon-color-ok);
+    _onSaveClicked() {
+        if (!this.ruleset || !this.view) {
+            return;
+        }
+        project.emit("fitview");
+        if (this.config && this.config.rulesetSaveHandler && !this.config.rulesetSaveHandler(this.ruleset)) {
+            return;
+        }
+        Util.dispatchCancellableEvent(this, new OrRulesRequestSaveEvent(this.ruleset))
+            .then((detail) => {
+            if (detail.allow) {
+                this._doSave();
+            }
+        });
     }
-
-    .iconfill-red {
-        margin-left: 10px;
-        --or-icon-fill: var(--internal-or-rules-list-icon-color-error);
+    _doSave() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const ruleset = this.ruleset;
+            if (!ruleset || !this.view) {
+                return;
+            }
+            let fail = false;
+            const isNew = !ruleset.id;
+            this.saveBtnElem.disabled = true;
+            this.wrapperElem.classList.add("saving");
+            this.view.beforeSave();
+            let response;
+            try {
+                switch (ruleset.type) {
+                    case "asset":
+                        if (isNew) {
+                            response = yield manager.rest.api.RulesResource.createAssetRuleset(ruleset);
+                        }
+                        else {
+                            response = yield manager.rest.api.RulesResource.updateAssetRuleset(ruleset.id, ruleset);
+                        }
+                        break;
+                    case "realm":
+                        if (isNew) {
+                            response = yield manager.rest.api.RulesResource.createRealmRuleset(ruleset);
+                        }
+                        else {
+                            response = yield manager.rest.api.RulesResource.updateRealmRuleset(ruleset.id, ruleset);
+                        }
+                        break;
+                    case "global":
+                        if (isNew) {
+                            response = yield manager.rest.api.RulesResource.createGlobalRuleset(ruleset);
+                        }
+                        else {
+                            response = yield manager.rest.api.RulesResource.updateGlobalRuleset(ruleset.id, ruleset);
+                        }
+                        break;
+                }
+                if (response.status !== (isNew ? 200 : 204)) {
+                    fail = true;
+                    showErrorDialog("Create ruleset returned unexpected status: " + response.status);
+                    return;
+                }
+                else if (response.data) {
+                    ruleset.id = response.data;
+                }
+            }
+            catch (e) {
+                fail = true;
+                console.error("Failed to save ruleset", e);
+            }
+            this.wrapperElem.classList.remove("saving");
+            this.saveBtnElem.disabled = false;
+            if (fail) {
+                showErrorDialog(i18next.t("saveRulesetFailed"));
+            }
+            this.dispatchEvent(new OrRulesSaveEvent({
+                ruleset: ruleset,
+                isNew: isNew,
+                success: !fail
+            }));
+        });
     }
-`;let OrRuleViewer=class extends(translate(i18next)(LitElement)){static get styles(){return[style]}constructor(){super(),this.readonly=!1,this.disabled=!1,this.modified=!1,this._ruleValid=!1,this._supported=!0,this._focusName=!1,this.addEventListener(OrRulesRuleChangedEvent.NAME,this._onRuleChanged),this.addEventListener(OrRulesRuleUnsupportedEvent.NAME,this._onRuleUnsupported)}get valid(){return this.ruleset&&this.view&&this._ruleValid&&this.ruleset.name&&this.ruleset.name.length>=1&&this.ruleset.name.length<255}shouldUpdate(e){return e.has("ruleset")&&(this._supported=!0,this.modified=!1,this._ruleValid=!1,this.ruleset&&(this._focusName=!0,this.modified=!this.ruleset.id)),super.shouldUpdate(e)}render(){if(!this.ruleset)return html`<div class="wrapper" style="justify-content: center"><or-translate value="noRuleSelected"></or-translate></div>`;let e=RuleViewInfoMap[this.ruleset.lang].viewTemplateProvider(this.ruleset,this.config,this.readonly),t="help",r="iconfill-gray",i="NOSTATUS";switch(this.ruleset.status&&(i=this.ruleset.status),this.ruleset.status){case"DEPLOYED":t="play",r="iconfill-gray";break;case"READY":t="check",r="iconfill-gray";break;case"COMPILATION_ERROR":case"LOOP_ERROR":case"VALIDITY_PERIOD_ERROR":case"EXECUTION_ERROR":t="alert-octagon",r="iconfill-red",i=this.ruleset.error;break;case"DISABLED":t="minus-circle",r="iconfill-gray";break;case"PAUSED":t="calendar-arrow-right",r="iconfill-gray";break;case"EXPIRED":t="calendar-remove",r="iconfill-gray";break;case"REMOVED":t="close",r="iconfill-gray";break;default:t="stop",r="iconfill-gray",i="NOSTATUS"}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("ruleName")}" ?focused="${this._focusName}" .value="${this.ruleset?this.ruleset.name:null}" ?disabled="${this._isReadonly()}" required minlength="1" maxlength="255" @or-mwc-input-changed="${e=>this._changeName(e.detail.value)}"></or-mwc-input>
-                    <or-icon class="${r}" title="${i18next.t("rulesetStatus."+i)}" icon="${t}"></or-icon>
-                    <span id="rule-id">${this.ruleset.id?"ID: "+this.ruleset.id:""}</span>
-                    <div id="rule-header-controls">
-                        <span id="active-wrapper">
-                            <or-translate value="enabled"></or-translate>
-                            <or-mwc-input .type="${InputType.CHECKBOX}" .value="${this.ruleset&&this.ruleset.enabled}" ?disabled="${!this.ruleset.id}" @or-mwc-input-changed="${this._toggleEnabled}"></or-mwc-input>
-                        </span>
-                        <or-rule-validity id="rule-header-validity" .ruleset="${this.ruleset}"></or-rule-validity>
-                        <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>
-
-                ${e}
-            </div>
-        `}updated(e){(e.has("ruleset")||e.has("modified"))&&this.ruleset&&this.view&&(this._ruleValid=this.view.validate())}_isReadonly(){return this.readonly||!manager.hasRole("write:rules")}_cannotSave(){return this._isReadonly()||!this.ruleset||!this.modified||!this.valid}_changeName(e){this.ruleset&&this.ruleset.name!==e&&(this.ruleset.name=e,this.modified=!0,this.requestUpdate())}_onRuleChanged(e){this.modified=!0,this._ruleValid=e.detail}_onSaveClicked(){this.ruleset&&this.view&&(project.emit("fitview"),this.config&&this.config.rulesetSaveHandler&&!this.config.rulesetSaveHandler(this.ruleset)||Util.dispatchCancellableEvent(this,new OrRulesRequestSaveEvent(this.ruleset)).then((e=>{e.allow&&this._doSave()})))}_doSave(){return __awaiter(this,void 0,void 0,(function*(){const e=this.ruleset;if(!e||!this.view)return;let t=!1;const r=!e.id;let i;this.saveBtnElem.disabled=!0,this.wrapperElem.classList.add("saving"),this.view.beforeSave();try{switch(e.type){case"asset":i=r?yield manager.rest.api.RulesResource.createAssetRuleset(e):yield manager.rest.api.RulesResource.updateAssetRuleset(e.id,e);break;case"realm":i=r?yield manager.rest.api.RulesResource.createRealmRuleset(e):yield manager.rest.api.RulesResource.updateRealmRuleset(e.id,e);break;case"global":i=r?yield manager.rest.api.RulesResource.createGlobalRuleset(e):yield manager.rest.api.RulesResource.updateGlobalRuleset(e.id,e)}if(i.status!==(r?200:204))return t=!0,void showErrorDialog("Create ruleset returned unexpected status: "+i.status);i.data&&(e.id=i.data)}catch(e){t=!0,console.error("Failed to save ruleset",e)}this.wrapperElem.classList.remove("saving"),this.saveBtnElem.disabled=!1,t&&showErrorDialog(i18next.t("saveRulesetFailed")),this.dispatchEvent(new OrRulesSaveEvent({ruleset:e,isNew:r,success:!t}))}))}_onRuleUnsupported(){this._supported=!1}_toggleEnabled(){this.ruleset&&(this.ruleset.enabled=!this.ruleset.enabled,this.modified=!0,this.requestUpdate())}};__decorate([property({type:Object})],OrRuleViewer.prototype,"ruleset",void 0),__decorate([property({type:Boolean})],OrRuleViewer.prototype,"readonly",void 0),__decorate([property({type:Boolean})],OrRuleViewer.prototype,"disabled",void 0),__decorate([property({type:Object})],OrRuleViewer.prototype,"config",void 0),__decorate([property({attribute:!1})],OrRuleViewer.prototype,"modified",void 0),__decorate([property({attribute:!1})],OrRuleViewer.prototype,"_ruleValid",void 0),__decorate([property({attribute:!1})],OrRuleViewer.prototype,"_supported",void 0),__decorate([query("#rule-view")],OrRuleViewer.prototype,"view",void 0),__decorate([query("#main-wrapper")],OrRuleViewer.prototype,"wrapperElem",void 0),__decorate([query("#save-btn")],OrRuleViewer.prototype,"saveBtnElem",void 0),OrRuleViewer=__decorate([customElement("or-rule-viewer")],OrRuleViewer);export{OrRuleViewer};
+    _onRuleUnsupported() {
+        this._supported = false;
+    }
+    _toggleEnabled() {
+        if (this.ruleset) {
+            this.ruleset.enabled = !this.ruleset.enabled;
+            this.modified = true;
+            this.requestUpdate();
+        }
+    }
+};
+__decorate([
+    property({ type: Object })
+], OrRuleViewer.prototype, "ruleset", void 0);
+__decorate([
+    property({ type: Boolean })
+], OrRuleViewer.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean })
+], OrRuleViewer.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Object })
+], OrRuleViewer.prototype, "config", void 0);
+__decorate([
+    property({ attribute: false })
+], OrRuleViewer.prototype, "modified", void 0);
+__decorate([
+    property({ attribute: false })
+], OrRuleViewer.prototype, "_ruleValid", void 0);
+__decorate([
+    property({ attribute: false })
+], OrRuleViewer.prototype, "_supported", void 0);
+__decorate([
+    query("#rule-view")
+], OrRuleViewer.prototype, "view", void 0);
+__decorate([
+    query("#main-wrapper")
+], OrRuleViewer.prototype, "wrapperElem", void 0);
+__decorate([
+    query("#save-btn")
+], OrRuleViewer.prototype, "saveBtnElem", void 0);
+OrRuleViewer = __decorate([
+    customElement("or-rule-viewer")
+], OrRuleViewer);
+export { OrRuleViewer };
+//# sourceMappingURL=or-rule-viewer.js.map

package/lib/style.js

@@ -1,64 +1,89 @@
-import{DefaultColor5}from"@openremote/core";import{css,unsafeCSS}from"lit";export const invalidStyle=css`
-    *:invalid {
-        border-bottom: 2px solid var(--internal-or-rules-invalid-color);
-    }
-`;export const buttonStyle=css`
-    .button-clear {
-        background: none;
-        color: ${unsafeCSS(DefaultColor5)};
-        --or-icon-fill: ${unsafeCSS(DefaultColor5)};
-        visibility: hidden;
-        display: inline-block;
-        border: none;
-        padding: 0;
-        cursor: pointer;
-    }
-
-    .button-clear:hover {
-        --or-icon-fill: var(--internal-or-rules-button-color);
-    }
-
-    .button-clear:focus {
-        outline: 0;
-    }
-
-    .button-clear.hidden {
-        visibility: hidden;
-    }
-
-    .plus-button {
-        --or-icon-fill: var(--internal-or-rules-button-color);
-    }
-    
-    .add-button {
-        display: inline-block;
-        font-weight: bold;
-        font-size: 15px;
-        line-height: 24px;
-    }
-
-    .add-buttons-container {
-        display: flex;
-        flex-direction: column;
-        margin-top: 10px;
-        margin-bottom: -10px;
-        padding-top: 5px;
-        border-top-width: 1px;
-        border-top-style: solid;
-        border-color: var(--internal-or-rules-line-color);
-    }
-
-    .add-buttons-container.hidden {
-        border: none;
-        margin: 0;
-        padding: 0;
-    }
-    
-    .add-buttons-container > button {
-        display: inline-flex;
-    }
-
-    .add-buttons-container > button > or-icon {
-        margin-right: 5px;
-    }
-`;
+/*
+ * 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 { DefaultColor5 } from "@openremote/core";
+import { css, unsafeCSS } from "lit";
+// language=CSS
+export const invalidStyle = css `
+    *:invalid {
+        border-bottom: 2px solid var(--internal-or-rules-invalid-color);
+    }
+`;
+// language=CSS
+export const buttonStyle = css `
+    .button-clear {
+        background: none;
+        color: ${unsafeCSS(DefaultColor5)};
+        --or-icon-fill: ${unsafeCSS(DefaultColor5)};
+        visibility: hidden;
+        display: inline-block;
+        border: none;
+        padding: 0;
+        cursor: pointer;
+    }
+
+    .button-clear:hover {
+        --or-icon-fill: var(--internal-or-rules-button-color);
+    }
+
+    .button-clear:focus {
+        outline: 0;
+    }
+
+    .button-clear.hidden {
+        visibility: hidden;
+    }
+
+    .plus-button {
+        --or-icon-fill: var(--internal-or-rules-button-color);
+    }
+    
+    .add-button {
+        display: inline-block;
+        font-weight: bold;
+        font-size: 15px;
+        line-height: 24px;
+    }
+
+    .add-buttons-container {
+        display: flex;
+        flex-direction: column;
+        margin-top: 10px;
+        margin-bottom: -10px;
+        padding-top: 5px;
+        border-top-width: 1px;
+        border-top-style: solid;
+        border-color: var(--internal-or-rules-line-color);
+    }
+
+    .add-buttons-container.hidden {
+        border: none;
+        margin: 0;
+        padding: 0;
+    }
+    
+    .add-buttons-container > button {
+        display: inline-flex;
+    }
+
+    .add-buttons-container > button > or-icon {
+        margin-right: 5px;
+    }
+`;
+//# sourceMappingURL=style.js.map