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

package/lib/flow-viewer/components/node-panel.js

@@ -1,104 +1,60 @@
-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 { LitElement, html, css } from "lit";
-import { customElement, property, query } from "lit/decorators.js";
-import { i18next, translate } from "@openremote/or-translate";
-let NodePanel = class NodePanel extends translate(i18next)(LitElement) {
-    constructor() {
-        super(...arguments);
-        this.nodes = [];
-    }
-    static get styles() {
-        return css `
-        .list{
-            overflow-x: hidden;
-            overflow-y: auto;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            height: 100%;
-            background: #F9F9F9;
-        }
-        .category{
-            display: flex;
-            width: 80%;
-            flex-direction: column;
-            align-items: center;
-            text-align: center;
-            padding: 15px 15px 0 15px;
-        }
-        .category span{
-            margin:0;
-            color: rgb(125,125,125);
-            padding: 0 0 15px 0 ;
-        }
-        .small-node-grid{
-            display: grid;
-            grid-template-columns: repeat(5, 1fr);
-            grid-template-rows: repeat(2, 1fr);
-            grid-gap: 6px;
-            justify-items: stretch;
-            align-items: stretch;
-            margin-bottom: 15px;
-            width: var(--nodepanel-width);
-        }
-        .input-node{ background-color: var(--input-color); }
-        .processor-node{ background-color: var(--processor-color); }
-        .output-node{ background-color: var(--output-color); }
-        .input-node:hover{ background-color: var(--input-color-h); }
-        .processor-node:hover{ background-color: var(--processor-color-h); }
-        .output-node:hover{ background-color: var(--output-color-h); }`;
-    }
-    firstUpdated() {
-        if (this.drawer)
-            this.drawer.open = true;
-    }
-    render() {
-        return html `
-        <!-- <or-mwc-drawer rightsided dismissible transparent> -->
-            ${this.listTemplate}
-        <!-- </or-mwc-drawer> -->
-        `;
-    }
-    nodeTemplate(node) {
-        return html `<node-menu-item class="node-item" .node="${node}" .workspace="${this.application.editorWorkspace}"></node-menu-item>`;
-    }
-    get listTemplate() {
-        return html `
-        <div class="list">
-            <div class="category"> <span>${i18next.t("input", "Input")}</span> 
-                ${this.nodes.filter((n) => n.type === "INPUT" /* NodeType.INPUT */).map((n) => this.nodeTemplate(n))}
-            </div>
-
-            <div class="category"><span>${i18next.t("processors", "Processors")}</span> 
-                <div class="small-node-grid">
-                    ${this.nodes.filter((n) => n.type === "PROCESSOR" /* NodeType.PROCESSOR */ && n.displayCharacter).sort((a, b) => a.priority - b.priority).map((n) => this.nodeTemplate(n))}
-                </div>
-                ${this.nodes.filter((n) => n.type === "PROCESSOR" /* NodeType.PROCESSOR */ && !n.displayCharacter).map((n) => this.nodeTemplate(n))}
-            </div>
-
-            <div class="category"> <span>${i18next.t("output", "Output")}</span> 
-                ${this.nodes.filter((n) => n.type === "OUTPUT" /* NodeType.OUTPUT */).map((n) => this.nodeTemplate(n))}
-            </div>
-        </div>
-        `;
-    }
-};
-__decorate([
-    property({ type: Array })
-], NodePanel.prototype, "nodes", void 0);
-__decorate([
-    query("or-mwc-drawer")
-], NodePanel.prototype, "drawer", void 0);
-__decorate([
-    property({ attribute: false })
-], NodePanel.prototype, "application", void 0);
-NodePanel = __decorate([
-    customElement("node-panel")
-], NodePanel);
-export { NodePanel };
-//# sourceMappingURL=node-panel.js.map
+var __decorate=this&&this.__decorate||function(e,t,r,o){var a,i=arguments.length,d=i<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,r):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)d=Reflect.decorate(e,t,r,o);else for(var n=e.length-1;n>=0;n--)(a=e[n])&&(d=(i<3?a(d):i>3?a(t,r,d):a(t,r))||d);return i>3&&d&&Object.defineProperty(t,r,d),d};import{LitElement as e,html as t,css as r}from"lit";import{customElement as o,property as a,query as i}from"lit/decorators.js";import{i18next as d,translate as n}from"@openremote/or-translate";let NodePanel=class extends n(d)(e){constructor(){super(...arguments),this.nodes=[]}static get styles(){return r`
+        .list{
+            overflow-x: hidden;
+            overflow-y: auto;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            height: 100%;
+            background: #F9F9F9;
+        }
+        .category{
+            display: flex;
+            width: 80%;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+            padding: 15px 15px 0 15px;
+        }
+        .category span{
+            margin:0;
+            color: rgb(125,125,125);
+            padding: 0 0 15px 0 ;
+        }
+        .small-node-grid{
+            display: grid;
+            grid-template-columns: repeat(5, 1fr);
+            grid-template-rows: repeat(2, 1fr);
+            grid-gap: 6px;
+            justify-items: stretch;
+            align-items: stretch;
+            margin-bottom: 15px;
+            width: var(--nodepanel-width);
+        }
+        .input-node{ background-color: var(--input-color); }
+        .processor-node{ background-color: var(--processor-color); }
+        .output-node{ background-color: var(--output-color); }
+        .input-node:hover{ background-color: var(--input-color-h); }
+        .processor-node:hover{ background-color: var(--processor-color-h); }
+        .output-node:hover{ background-color: var(--output-color-h); }`}firstUpdated(){this.drawer&&(this.drawer.open=!0)}render(){return t`
+        <!-- <or-mwc-drawer rightsided dismissible transparent> -->
+            ${this.listTemplate}
+        <!-- </or-mwc-drawer> -->
+        `}nodeTemplate(e){return t`<node-menu-item class="node-item" .node="${e}" .workspace="${this.application.editorWorkspace}"></node-menu-item>`}get listTemplate(){return t`
+        <div class="list">
+            <div class="category"> <span>${d.t("input","Input")}</span> 
+                ${this.nodes.filter(e=>"INPUT"===e.type).map(e=>this.nodeTemplate(e))}
+            </div>
+
+            <div class="category"><span>${d.t("processors","Processors")}</span> 
+                <div class="small-node-grid">
+                    ${this.nodes.filter(e=>"PROCESSOR"===e.type&&e.displayCharacter).sort((e,t)=>e.priority-t.priority).map(e=>this.nodeTemplate(e))}
+                </div>
+                ${this.nodes.filter(e=>"PROCESSOR"===e.type&&!e.displayCharacter).map(e=>this.nodeTemplate(e))}
+            </div>
+
+            <div class="category"> <span>${d.t("output","Output")}</span> 
+                ${this.nodes.filter(e=>"OUTPUT"===e.type).map(e=>this.nodeTemplate(e))}
+            </div>
+        </div>
+        `}};__decorate([a({type:Array})],NodePanel.prototype,"nodes",void 0),__decorate([i("or-mwc-drawer")],NodePanel.prototype,"drawer",void 0),__decorate([a({attribute:!1})],NodePanel.prototype,"application",void 0),NodePanel=__decorate([o("node-panel")],NodePanel);export{NodePanel};

package/lib/flow-viewer/components/notification-dialog.js

@@ -1,55 +1,23 @@
-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 { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { i18next, translate } from "@openremote/or-translate";
-let NotificationDialog = class NotificationDialog extends translate(i18next)(LitElement) {
-    constructor() {
-        super(...arguments);
-        this.buttonText = i18next.t("ok");
-        this.message = " ";
-    }
-    static get styles() {
-        return css `
-        .message{
-            width: 100%;
-            padding: 15px 5px 25px 5px;
-            text-align: center;
-            max-width: 50vw;
-            overflow: auto;
-            user-select: text;
-        }
-        .container{
-            display: flex;
-            flex-direction: row;
-            justify-content: space-between;
-            justify-content: space-evenly;
-            justify-content: space-around;
-        }`;
-    }
-    render() {
-        return html `
-        <div class="message">${this.message}</div>
-        <div class="container">
-            <or-mwc-input type="button" unElevated label="${this.buttonText}"
-                @click="${() => { this.dispatchEvent(new CustomEvent("closed")); }}">
-            </or-mwc-input>
-        </div>
-        `;
-    }
-};
-__decorate([
-    property({ type: String })
-], NotificationDialog.prototype, "buttonText", void 0);
-__decorate([
-    property({ type: String })
-], NotificationDialog.prototype, "message", void 0);
-NotificationDialog = __decorate([
-    customElement("notification-dialog")
-], NotificationDialog);
-export { NotificationDialog };
-//# sourceMappingURL=notification-dialog.js.map
+var __decorate=this&&this.__decorate||function(t,e,o,i){var n,r=arguments.length,a=r<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,o,i);else for(var c=t.length-1;c>=0;c--)(n=t[c])&&(a=(r<3?n(a):r>3?n(e,o,a):n(e,o))||a);return r>3&&a&&Object.defineProperty(e,o,a),a};import{LitElement as t,html as e,css as o}from"lit";import{customElement as i,property as n}from"lit/decorators.js";import{i18next as r,translate as a}from"@openremote/or-translate";let NotificationDialog=class extends a(r)(t){constructor(){super(...arguments),this.buttonText=r.t("ok"),this.message=" "}static get styles(){return o`
+        .message{
+            width: 100%;
+            padding: 15px 5px 25px 5px;
+            text-align: center;
+            max-width: 50vw;
+            overflow: auto;
+            user-select: text;
+        }
+        .container{
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            justify-content: space-evenly;
+            justify-content: space-around;
+        }`}render(){return e`
+        <div class="message">${this.message}</div>
+        <div class="container">
+            <or-mwc-input type="button" unElevated label="${this.buttonText}"
+                @click="${()=>{this.dispatchEvent(new CustomEvent("closed"))}}">
+            </or-mwc-input>
+        </div>
+        `}};__decorate([n({type:String})],NotificationDialog.prototype,"buttonText",void 0),__decorate([n({type:String})],NotificationDialog.prototype,"message",void 0),NotificationDialog=__decorate([i("notification-dialog")],NotificationDialog);export{NotificationDialog};

package/lib/flow-viewer/components/popup-modal.js

@@ -1,114 +1,55 @@
-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 { LitElement, css, html } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { modal } from "./flow-editor";
-import { translate, i18next } from "@openremote/or-translate";
-let PopupModal = class PopupModal extends translate(i18next)(LitElement) {
-    constructor() {
-        super();
-        this.closeButton = true;
-        this.isOpen = false;
-    }
-    close() {
-        this.isOpen = false;
-    }
-    open() {
-        this.isOpen = true;
-    }
-    static get styles() {
-        return css `
-        :host{
-            position: absolute;
-            left: 0;
-            right: 0;
-            top: 0;
-            bottom: 0;
-
-            display: flex;
-            justify-content: center;
-            align-items: center;
-
-            background: rgba(0, 0, 0, 0.2);
-            z-index: 10000;
-
-            --topbar-height: 42px;
-            --closebutton-padding: 12px;
-            --modal-padding: 10px;
-        }
-        :host(:not([isopen])){
-            display: none;
-        }
-        .modal{
-            min-width: 300px;
-            min-height: 64px;
-            width: auto;
-            height: auto;
-            display: inline-block;
-            background: white;
-            border-radius: var(--roundness);
-            position: relative;
-            padding: var(--modal-padding);
-        }
-        .close-button{
-            position: absolute;
-            top: 0;
-            right: 0;
-            width: calc(var(--topbar-height) - var(--closebutton-padding) * 2);
-            height: calc(var(--topbar-height) - var(--closebutton-padding) * 2);
-            padding: var(--closebutton-padding);
-            cursor: pointer;
-        }
-        .title{
-            margin: 0;
-            height: calc(var(--topbar-height) - var(--modal-padding));
-            width: 100%;
-            text-transform: uppercase;
-            font-weight: bold;
-        }`;
-    }
-    firstUpdated() {
-        modal.element = this;
-        this.addEventListener("mousedown", this.close);
-        window.addEventListener("keyup", (e) => {
-            if (e.key === "Escape") {
-                this.close();
-            }
-        });
-    }
-    render() {
-        if (!this.isOpen) {
-            this.style.display = "none";
-            return html ``;
+var __decorate=this&&this.__decorate||function(t,o,e,i){var r,n=arguments.length,a=n<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 p=t.length-1;p>=0;p--)(r=t[p])&&(a=(n<3?r(a):n>3?r(o,e,a):r(o,e))||a);return n>3&&a&&Object.defineProperty(o,e,a),a};import{LitElement as t,css as o,html as e}from"lit";import{customElement as i,property as r}from"lit/decorators.js";import{modal as n}from"./flow-editor";import{translate as a,i18next as p}from"@openremote/or-translate";let PopupModal=class extends a(p)(t){constructor(){super(),this.closeButton=!0,this.isOpen=!1}close(){this.isOpen=!1}open(){this.isOpen=!0}static get styles(){return o`
+        :host{
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 0;
+            bottom: 0;
+
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            background: rgba(0, 0, 0, 0.2);
+            z-index: 10000;
+
+            --topbar-height: 42px;
+            --closebutton-padding: 12px;
+            --modal-padding: 10px;
         }
-        this.style.display = "";
-        return html `
-        <div class="modal" @mousedown="${(e) => { e.stopPropagation(); }}">
-            <div class="title">${this.header}</div>
-            ${this.content}
-            ${this.closeButton ? html `<or-icon class="close-button" icon="window-close" @click="${this.close}"></or-icon>` : null}
-        </div>
-        `;
-    }
-};
-__decorate([
-    property({ type: Boolean })
-], PopupModal.prototype, "closeButton", void 0);
-__decorate([
-    property({ type: String })
-], PopupModal.prototype, "header", void 0);
-__decorate([
-    property({ attribute: false })
-], PopupModal.prototype, "content", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], PopupModal.prototype, "isOpen", void 0);
-PopupModal = __decorate([
-    customElement("popup-modal")
-], PopupModal);
-export { PopupModal };
-//# sourceMappingURL=popup-modal.js.map
+        :host(:not([isopen])){
+            display: none;
+        }
+        .modal{
+            min-width: 300px;
+            min-height: 64px;
+            width: auto;
+            height: auto;
+            display: inline-block;
+            background: white;
+            border-radius: var(--roundness);
+            position: relative;
+            padding: var(--modal-padding);
+        }
+        .close-button{
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: calc(var(--topbar-height) - var(--closebutton-padding) * 2);
+            height: calc(var(--topbar-height) - var(--closebutton-padding) * 2);
+            padding: var(--closebutton-padding);
+            cursor: pointer;
+        }
+        .title{
+            margin: 0;
+            height: calc(var(--topbar-height) - var(--modal-padding));
+            width: 100%;
+            text-transform: uppercase;
+            font-weight: bold;
+        }`}firstUpdated(){n.element=this,this.addEventListener("mousedown",this.close),window.addEventListener("keyup",t=>{"Escape"===t.key&&this.close()})}render(){return this.isOpen?(this.style.display="",e`
+        <div class="modal" @mousedown="${t=>{t.stopPropagation()}}">
+            <div class="title">${this.header}</div>
+            ${this.content}
+            ${this.closeButton?e`<or-icon class="close-button" icon="window-close" @click="${this.close}"></or-icon>`:null}
+        </div>
+        `):(this.style.display="none",e``)}};__decorate([r({type:Boolean})],PopupModal.prototype,"closeButton",void 0),__decorate([r({type:String})],PopupModal.prototype,"header",void 0),__decorate([r({attribute:!1})],PopupModal.prototype,"content",void 0),__decorate([r({type:Boolean,reflect:!0})],PopupModal.prototype,"isOpen",void 0),PopupModal=__decorate([i("popup-modal")],PopupModal);export{PopupModal};

package/lib/flow-viewer/components/rule-browser.js

@@ -1,121 +1,32 @@
-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());
-    });
-};
-import { LitElement, css, html } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import rest from "@openremote/rest";
-import { i18next, translate } from "@openremote/or-translate";
-import { Utilities } from "../utils";
-import { Status } from "../models/status";
-import { exporter, project, modal } from "./flow-editor";
-let RuleBrowser = class RuleBrowser extends translate(i18next)(LitElement) {
-    constructor() {
-        super(...arguments);
-        this.status = Status.Idle;
-        this.retrievedRules = [];
-        this.loadRule = (r) => __awaiter(this, void 0, void 0, function* () {
-            this.status = Status.Loading;
-            let response;
-            try {
-                response = yield rest.api.RulesResource.getGlobalRuleset(r.id);
-            }
-            catch (error) {
-                modal.notification("Failure", "Something went wrong loading " + r.name);
-                this.status = Status.Failure;
-                return;
-            }
-            const ruleset = response.data;
-            const collection = exporter.jsonToFlow(ruleset.rules);
-            project.fromNodeCollection(collection);
-            project.setCurrentProject(r.id, r.name, collection.description);
-            this.dispatchEvent(new CustomEvent("ruleloaded"));
-        });
-        this.getButton = (r) => {
-            return html `<div class="list-button" @click="${() => { this.loadRule(r); }}">${Utilities.ellipsis(r.name, 50)} 
-        ${r.error ? html `<or-icon title="${Utilities.humanLike(r.status)}" icon="alert-outline"></or-icon>` : null}
-        ${r.enabled ? null : html `<or-icon title="${i18next.t("disabled")}" icon="sleep"></or-icon>`}
-        </div>`;
-        };
-    }
-    static get styles() {
-        return css `
-        .list-button {
-            cursor: pointer;
-            padding: 8px 0 8px 8px;
-        }
-        .list-button:hover {
-            background: whitesmoke;
-        }
-        .list-button:active {
-            background: none;
-        }
-        or-icon{
-            width: 18px;
-            vertical-align: text-top;
-        }
-        or-icon[icon=loading]{
-            animation: spin 600ms infinite linear;
-        }
-        @keyframes spin{
-            0%{
-                transform: rotateZ(0deg);
-            }
-            100%{
-                transform: rotateZ(360deg);
-            }
-        }`;
-    }
-    firstUpdated() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.status = Status.Loading;
-            try {
-                const response = yield rest.api.RulesResource.getGlobalRulesets();
-                this.retrievedRules = response.data;
-                this.status = Status.Success;
+var __decorate=this&&this.__decorate||function(t,e,o,i){var r,s=arguments.length,n=s<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,o,i);else for(var a=t.length-1;a>=0;a--)(r=t[a])&&(n=(s<3?r(n):s>3?r(e,o,n):r(e,o))||n);return s>3&&n&&Object.defineProperty(e,o,n),n},__awaiter=this&&this.__awaiter||function(t,e,o,i){return new(o||(o=Promise))(function(r,s){function n(t){try{l(i.next(t))}catch(t){s(t)}}function a(t){try{l(i.throw(t))}catch(t){s(t)}}function l(t){var e;t.done?r(t.value):((e=t.value)instanceof o?e:new o(function(t){t(e)})).then(n,a)}l((i=i.apply(t,e||[])).next())})};import{LitElement as t,css as e,html as o}from"lit";import{customElement as i,property as r}from"lit/decorators.js";import s from"@openremote/rest";import{i18next as n,translate as a}from"@openremote/or-translate";import{Utilities as l}from"../utils";import{Status as u}from"../models/status";import{exporter as c,project as d,modal as p}from"./flow-editor";let RuleBrowser=class extends a(n)(t){constructor(){super(...arguments),this.status=u.Idle,this.retrievedRules=[],this.loadRule=t=>__awaiter(this,void 0,void 0,function*(){let e;this.status=u.Loading;try{e=yield s.api.RulesResource.getGlobalRuleset(t.id)}catch(e){p.notification("Failure","Something went wrong loading "+t.name),this.status=u.Failure;return}let o=e.data,i=c.jsonToFlow(o.rules);d.fromNodeCollection(i),d.setCurrentProject(t.id,t.name,i.description),this.dispatchEvent(new CustomEvent("ruleloaded"))}),this.getButton=t=>o`<div class="list-button" @click="${()=>{this.loadRule(t)}}">${l.ellipsis(t.name,50)} 
+        ${t.error?o`<or-icon title="${l.humanLike(t.status)}" icon="alert-outline"></or-icon>`:null}
+        ${t.enabled?null:o`<or-icon title="${n.t("disabled")}" icon="sleep"></or-icon>`}
+        </div>`}static get styles(){return e`
+        .list-button {
+            cursor: pointer;
+            padding: 8px 0 8px 8px;
+        }
+        .list-button:hover {
+            background: whitesmoke;
+        }
+        .list-button:active {
+            background: none;
+        }
+        or-icon{
+            width: 18px;
+            vertical-align: text-top;
+        }
+        or-icon[icon=loading]{
+            animation: spin 600ms infinite linear;
+        }
+        @keyframes spin{
+            0%{
+                transform: rotateZ(0deg);
             }
-            catch (error) {
-                this.status = Status.Failure;
+            100%{
+                transform: rotateZ(360deg);
             }
-        });
-    }
-    render() {
-        let result = html ``;
-        switch (this.status) {
-            case Status.Loading:
-                result = html `<span style="text-align: center;"><or-icon icon="loading"></or-icon></span>`;
-                break;
-            case Status.Success:
-                result = html `${this.retrievedRules.length === 0 ?
-                    html `<span>No rules to display</span>` :
-                    this.retrievedRules.map((r) => this.getButton(r))}`;
-                break;
-            case Status.Failure:
-                result = html `<span>Failed to load rules</span>`;
-                break;
-        }
-        return html `
-        <div style="display: flex; flex-direction: column; width: auto; align-items: stretch;">
-        ${result}
-        </div>`;
-    }
-};
-__decorate([
-    property({ type: Number })
-], RuleBrowser.prototype, "status", void 0);
-RuleBrowser = __decorate([
-    customElement("rule-browser")
-], RuleBrowser);
-export { RuleBrowser };
-//# sourceMappingURL=rule-browser.js.map
+        }`}firstUpdated(){return __awaiter(this,void 0,void 0,function*(){this.status=u.Loading;try{let t=yield s.api.RulesResource.getGlobalRulesets();this.retrievedRules=t.data,this.status=u.Success}catch(t){this.status=u.Failure}})}render(){let t=o``;switch(this.status){case u.Loading:t=o`<span style="text-align: center;"><or-icon icon="loading"></or-icon></span>`;break;case u.Success:t=o`${0===this.retrievedRules.length?o`<span>No rules to display</span>`:this.retrievedRules.map(t=>this.getButton(t))}`;break;case u.Failure:t=o`<span>Failed to load rules</span>`}return o`
+        <div style="display: flex; flex-direction: column; width: auto; align-items: stretch;">
+        ${t}
+        </div>`}};__decorate([r({type:Number})],RuleBrowser.prototype,"status",void 0),RuleBrowser=__decorate([i("rule-browser")],RuleBrowser);export{RuleBrowser};