@openremote/or-components 1.8.0-snapshot.20250725120002 → 1.8.0-snapshot.20250728102340

package/README.md

@@ -1,31 +1,31 @@
-# @openremote/or-components
-[![NPM Version][npm-image]][npm-url]
-[![Linux Build][travis-image]][travis-url]
-[![Test Coverage][coveralls-image]][coveralls-url]
-
-Contains basic UI components
-
-## Install
-```bash
-npm i @openremote/or-components
-yarn add @openremote/or-components
-```
-
-## Usage
-For a full list of properties, methods and options refer to the TypeDoc generated [documentation]().
-
-
-## Supported Browsers
-The last 2 versions of all modern browsers are supported, including Chrome, Safari, Opera, Firefox, Edge. In addition,
-Internet Explorer 11 is also supported.
-
-
-## License
-[GNU AGPL](https://www.gnu.org/licenses/agpl-3.0.en.html)
-
-[npm-image]: https://img.shields.io/npm/v/live-xxx.svg
-[npm-url]: https://npmjs.org/package/@openremote/or-components
-[travis-image]: https://img.shields.io/travis/live-js/live-xxx/master.svg
-[travis-url]: https://travis-ci.org/live-js/live-xxx
-[coveralls-image]: https://img.shields.io/coveralls/live-js/live-xxx/master.svg
-[coveralls-url]: https://coveralls.io/r/live-js/live-xxx?branch=master
+# @openremote/or-components
+[![NPM Version][npm-image]][npm-url]
+[![Linux Build][travis-image]][travis-url]
+[![Test Coverage][coveralls-image]][coveralls-url]
+
+Contains basic UI components
+
+## Install
+```bash
+npm i @openremote/or-components
+yarn add @openremote/or-components
+```
+
+## Usage
+For a full list of properties, methods and options refer to the TypeDoc generated [documentation]().
+
+
+## Supported Browsers
+The last 2 versions of all modern browsers are supported, including Chrome, Safari, Opera, Firefox, Edge. In addition,
+Internet Explorer 11 is also supported.
+
+
+## License
+[GNU AGPL](https://www.gnu.org/licenses/agpl-3.0.en.html)
+
+[npm-image]: https://img.shields.io/npm/v/live-xxx.svg
+[npm-url]: https://npmjs.org/package/@openremote/or-components
+[travis-image]: https://img.shields.io/travis/live-js/live-xxx/master.svg
+[travis-url]: https://travis-ci.org/live-js/live-xxx
+[coveralls-image]: https://img.shields.io/coveralls/live-js/live-xxx/master.svg
+[coveralls-url]: https://coveralls.io/r/live-js/live-xxx?branch=master

package/lib/or-ace-editor.js

@@ -1,168 +1,25 @@
-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 { css, html, LitElement } from "lit";
-import { customElement, property, query } from "lit/decorators.js";
-import ace from "ace-builds";
-import "ace-builds/src-noconflict/mode-javascript";
-import "ace-builds/src-noconflict/mode-json";
-import "ace-builds/src-noconflict/mode-groovy";
-export class OrAceEditorChangedEvent extends CustomEvent {
-    constructor(value, valid) {
-        super(OrAceEditorChangedEvent.NAME, {
-            bubbles: true,
-            composed: true,
-            detail: {
-                value: value,
-                valid: valid
+var __decorate=this&&this.__decorate||function(t,e,i,o){var r,d=arguments.length,s=d<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,i,o);else for(var a=t.length-1;a>=0;a--)(r=t[a])&&(s=(d<3?r(s):d>3?r(e,i,s):r(e,i))||s);return d>3&&s&&Object.defineProperty(e,i,s),s};import{css as t,html as e,LitElement as i}from"lit";import{customElement as o,property as r,query as d}from"lit/decorators.js";import s from"ace-builds";import"ace-builds/src-noconflict/mode-javascript";import"ace-builds/src-noconflict/mode-json";import"ace-builds/src-noconflict/mode-groovy";export class OrAceEditorChangedEvent extends CustomEvent{constructor(t,e){super(OrAceEditorChangedEvent.NAME,{bubbles:!0,composed:!0,detail:{value:t,valid:e}})}}OrAceEditorChangedEvent.NAME="or-ace-editor-changed";export class OrAceEditorEditEvent extends CustomEvent{constructor(){super(OrAceEditorEditEvent.NAME,{bubbles:!0,composed:!0})}}OrAceEditorEditEvent.NAME="or-ace-editor-edit";let OrAceEditor=class extends i{constructor(){super(...arguments),this.mode="ace/mode/json",this._lastValue="",this._editing=!1}static get styles(){return t`
+            :host {
+                display: block;
+                width: 100%;
+                height: 100%;
             }
-        });
-    }
-}
-OrAceEditorChangedEvent.NAME = "or-ace-editor-changed";
-export class OrAceEditorEditEvent extends CustomEvent {
-    constructor() {
-        super(OrAceEditorEditEvent.NAME, {
-            bubbles: true,
-            composed: true
-        });
-    }
-}
-OrAceEditorEditEvent.NAME = "or-ace-editor-edit";
-let OrAceEditor = class OrAceEditor extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.mode = "ace/mode/json";
-        this._lastValue = "";
-        this._editing = false;
-    }
-    // language=CSS
-    static get styles() {
-        return css `
-            :host {
-                display: block;
-                width: 100%;
-                height: 100%;
-            }
-        
-            #ace-editor {
-                position: relative;
-                height: 100%;
-                width: 100%;
-            }
-        
-            @media screen and (max-width: 1400px) {
-                :host > * {
-                    flex-grow: 0;
-                }
-        
-                :host {
-                    flex-direction: column;
-                }
-            }
-        `;
-    }
-    disconnectedCallback() {
-        this.destroyEditor();
-        super.disconnectedCallback();
-    }
-    updated(_changedProperties) {
-        super.updated(_changedProperties);
-        if (_changedProperties.has("mode")) {
-            this.destroyEditor();
-            this.initEditor();
-        }
-        if (_changedProperties.has("value")) {
-            if (this._aceEditor) {
-                this._lastValue = this.value !== undefined ? typeof this.value === "string" ? this.value : JSON.stringify(this.value, null, 2) : "";
-                this._aceEditor.setValue(this._lastValue);
+        
+            #ace-editor {
+                position: relative;
+                height: 100%;
+                width: 100%;
             }
-        }
-    }
-    render() {
-        return html `
-            <div id="ace-editor"></div>
-        `;
-    }
-    destroyEditor() {
-        if (this._aceEditor) {
-            this._aceEditor.destroy();
-            this._aceEditor = undefined;
-        }
-    }
-    initEditor() {
-        if (this._aceElem) {
-            this._aceEditor = ace.edit(this._aceElem, {
-                mode: this.mode,
-                value: this._lastValue,
-                useSoftTabs: true,
-                tabSize: 2,
-                readOnly: this.readonly,
-                showPrintMargin: false
-            });
-            this._aceEditor.renderer.attachToShadowRoot();
-            // Use the changeAnnotation event instead of change event so we have up to date validation info
-            // @ts-ignore
-            this._aceEditor.getSession().on("changeAnnotation", () => this._onEditorChange());
-            this._aceEditor.on("change", () => this._onEditorEdit());
-        }
-    }
-    _onEditorEdit() {
-        if (!this._editing) {
-            this.dispatchEvent(new OrAceEditorEditEvent());
-            this._editing = true;
-        }
-        if (this._changeTimer) {
-            window.clearTimeout(this._changeTimer);
-        }
-        // Set change timer to expire after annotation web worker
-        this._changeTimer = window.setTimeout(() => {
-            this._changeTimer = undefined;
-            if (this._editing) {
-                this._onEditorChange();
+        
+            @media screen and (max-width: 1400px) {
+                :host > * {
+                    flex-grow: 0;
+                }
+        
+                :host {
+                    flex-direction: column;
+                }
             }
-        }, 600);
-    }
-    _onEditorChange() {
-        this._editing = false;
-        const newValue = this.getValue() || "";
-        if (this._lastValue !== newValue) {
-            this._lastValue = newValue;
-            const valid = this.validate();
-            this.dispatchEvent(new OrAceEditorChangedEvent(newValue, valid));
-        }
-    }
-    getValue() {
-        if (!this._aceEditor) {
-            return undefined;
-        }
-        return this._aceEditor.getValue();
-    }
-    validate() {
-        if (!this._aceEditor) {
-            return false;
-        }
-        const annotations = this._aceEditor.getSession().getAnnotations();
-        return !annotations || annotations.length === 0;
-    }
-};
-__decorate([
-    property({ type: Boolean, attribute: false })
-], OrAceEditor.prototype, "readonly", void 0);
-__decorate([
-    property({ attribute: false })
-], OrAceEditor.prototype, "value", void 0);
-__decorate([
-    property({ type: String, attribute: false })
-], OrAceEditor.prototype, "mode", void 0);
-__decorate([
-    query("#ace-editor")
-], OrAceEditor.prototype, "_aceElem", void 0);
-OrAceEditor = __decorate([
-    customElement("or-ace-editor")
-], OrAceEditor);
-export { OrAceEditor };
-//# sourceMappingURL=or-ace-editor.js.map
+        `}disconnectedCallback(){this.destroyEditor(),super.disconnectedCallback()}updated(t){super.updated(t),t.has("mode")&&(this.destroyEditor(),this.initEditor()),t.has("value")&&this._aceEditor&&(this._lastValue=void 0!==this.value?"string"==typeof this.value?this.value:JSON.stringify(this.value,null,2):"",this._aceEditor.setValue(this._lastValue))}render(){return e`
+            <div id="ace-editor"></div>
+        `}destroyEditor(){this._aceEditor&&(this._aceEditor.destroy(),this._aceEditor=void 0)}initEditor(){this._aceElem&&(this._aceEditor=s.edit(this._aceElem,{mode:this.mode,value:this._lastValue,useSoftTabs:!0,tabSize:2,readOnly:this.readonly,showPrintMargin:!1}),this._aceEditor.renderer.attachToShadowRoot(),this._aceEditor.getSession().on("changeAnnotation",()=>this._onEditorChange()),this._aceEditor.on("change",()=>this._onEditorEdit()))}_onEditorEdit(){this._editing||(this.dispatchEvent(new OrAceEditorEditEvent),this._editing=!0),this._changeTimer&&window.clearTimeout(this._changeTimer),this._changeTimer=window.setTimeout(()=>{this._changeTimer=void 0,this._editing&&this._onEditorChange()},600)}_onEditorChange(){this._editing=!1;let t=this.getValue()||"";if(this._lastValue!==t){this._lastValue=t;let e=this.validate();this.dispatchEvent(new OrAceEditorChangedEvent(t,e))}}getValue(){if(this._aceEditor)return this._aceEditor.getValue()}validate(){if(!this._aceEditor)return!1;let t=this._aceEditor.getSession().getAnnotations();return!t||0===t.length}};__decorate([r({type:Boolean,attribute:!1})],OrAceEditor.prototype,"readonly",void 0),__decorate([r({attribute:!1})],OrAceEditor.prototype,"value",void 0),__decorate([r({type:String,attribute:!1})],OrAceEditor.prototype,"mode",void 0),__decorate([d("#ace-editor")],OrAceEditor.prototype,"_aceElem",void 0),OrAceEditor=__decorate([o("or-ace-editor")],OrAceEditor);export{OrAceEditor};

package/lib/or-collapsible-panel.js

@@ -1,165 +1,95 @@
-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 2017, 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, unsafeCSS } from "lit";
-import { customElement, property, query } from "lit/decorators.js";
-import { i18next } from "@openremote/or-translate";
-import { DefaultColor5 } from "@openremote/core";
-import { until } from 'lit/directives/until.js';
-// language=CSS
-const style = css `
-
-    :host {
-        display: block;
-        box-sizing: content-box;
-        margin: 0;
-        overflow: hidden;
-        transition: margin 225ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
-        position: relative;
-        border-color: var(--or-app-color5, ${unsafeCSS(DefaultColor5)});
-        background-color: var(--or-collapisble-panel-background-color);
-        border-radius: 4px;
-        border-width: 1px;
-        border-style: solid;
-    }
-
-    :host([hidden]) {
-        display: none;
-    }
-    
-    #header {
-        display: flex;
-        height: 48px;
-        flex-direction: row;
-        font-family: Roboto,Helvetica Neue,sans-serif;
-        font-size: 15px;
-        font-weight: 400;
-        align-items: center;
-        padding: 0 24px 0 16px;
-        border-radius: inherit;
-    }
-    
-    #header.expandable {
-        cursor: pointer;
-        transition: height 225ms cubic-bezier(0.4, 0, 0.2, 1);
-    }
-    
-    #header.expanded {
-        height: 64px;
-    }
-
-    #header.expanded > #indicator {
-    }
-    
-    #header-content {
-        flex: 1;
-        display: flex;
-        flex-direction: row;
-        overflow: hidden;
-    }
-
-    #header-title, #header-description {
-        display: inline-flex;
-        align-items: center;
-    }
-    
-    #header-description {
-        flex-grow: 2;
-    }
-    
-    #indicator {
-        align-self: center;
-        margin-right: 6px;
-        margin-left: -5px;
-    }
-    
-    #content {
-        height: 0;
-        visibility: hidden;
-    }
-    
-    #content.expanded {
-        height: unset;
-        visibility: visible;
-    }
-
-    or-icon {
-        vertical-align: middle;
-        --or-icon-width: 20px;
-        --or-icon-height: 20px;
-        margin-right: 2px;
-        margin-left: -5px;
-    }
-`;
-let OrCollapsiblePanel = class OrCollapsiblePanel extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.expanded = false;
-        this.expandable = true;
+var __decorate=this&&this.__decorate||function(e,t,i,o){var r,n=arguments.length,a=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(a=(n<3?r(a):n>3?r(t,i,a):r(t,i))||a);return n>3&&a&&Object.defineProperty(t,i,a),a};import{css as e,html as t,LitElement as i,unsafeCSS as o}from"lit";import{customElement as r,property as n,query as a}from"lit/decorators.js";import{i18next as l}from"@openremote/or-translate";import{DefaultColor5 as d}from"@openremote/core";import{until as s}from"lit/directives/until.js";let style=e`
+
+    :host {
+        display: block;
+        box-sizing: content-box;
+        margin: 0;
+        overflow: hidden;
+        transition: margin 225ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
+        position: relative;
+        border-color: var(--or-app-color5, ${o(d)});
+        background-color: var(--or-collapisble-panel-background-color);
+        border-radius: 4px;
+        border-width: 1px;
+        border-style: solid;
     }
-    static get styles() {
-        return [
-            style
-        ];
+
+    :host([hidden]) {
+        display: none;
     }
-    _onHeaderClicked(ev) {
-        if (!this.expandable) {
-            return;
-        }
-        ev.preventDefault();
-        this.expanded = !this.expanded;
+    
+    #header {
+        display: flex;
+        height: 48px;
+        flex-direction: row;
+        font-family: Roboto,Helvetica Neue,sans-serif;
+        font-size: 15px;
+        font-weight: 400;
+        align-items: center;
+        padding: 0 24px 0 16px;
+        border-radius: inherit;
     }
-    render() {
-        return html `
-            <div id="header" class="${this.expandable ? "expandable" : ""} ${this.expandable && this.expanded ? "expanded" : ""}" @click="${(ev) => this._onHeaderClicked(ev)}">
-                ${this.expandable ? html `<or-icon icon="chevron-${this.expanded ? "down" : "right"}"></or-icon>` : ""}
-                <span id="header-content">
-                    <span id="header-title"><slot name="header"></slot></span>
-                    <span id="header-description"><slot name="header-description"></slot></span>
-                </span>
-            </div>
-            <div id="content" class="${this.expandable && this.expanded ? "expanded" : ""}">
-                ${this.lazycontent ? this.expanded && until(this.lazycontent, html `${i18next.t('loading')}`) : html `<slot name="content"></slot>`}
-            </div>
-        `;
+    
+    #header.expandable {
+        cursor: pointer;
+        transition: height 225ms cubic-bezier(0.4, 0, 0.2, 1);
     }
-};
-__decorate([
-    property({ type: (Promise) })
-], OrCollapsiblePanel.prototype, "lazycontent", void 0);
-__decorate([
-    property({ type: Boolean })
-], OrCollapsiblePanel.prototype, "expanded", void 0);
-__decorate([
-    property({ type: Boolean })
-], OrCollapsiblePanel.prototype, "expandable", void 0);
-__decorate([
-    query("#header")
-], OrCollapsiblePanel.prototype, "headerElem", void 0);
-OrCollapsiblePanel = __decorate([
-    customElement("or-collapsible-panel")
-], OrCollapsiblePanel);
-export { OrCollapsiblePanel };
-//# sourceMappingURL=or-collapsible-panel.js.map
+    
+    #header.expanded {
+        height: 64px;
+    }
+
+    #header.expanded > #indicator {
+    }
+    
+    #header-content {
+        flex: 1;
+        display: flex;
+        flex-direction: row;
+        overflow: hidden;
+    }
+
+    #header-title, #header-description {
+        display: inline-flex;
+        align-items: center;
+    }
+    
+    #header-description {
+        flex-grow: 2;
+    }
+    
+    #indicator {
+        align-self: center;
+        margin-right: 6px;
+        margin-left: -5px;
+    }
+    
+    #content {
+        height: 0;
+        visibility: hidden;
+    }
+    
+    #content.expanded {
+        height: unset;
+        visibility: visible;
+    }
+
+    or-icon {
+        vertical-align: middle;
+        --or-icon-width: 20px;
+        --or-icon-height: 20px;
+        margin-right: 2px;
+        margin-left: -5px;
+    }
+`,OrCollapsiblePanel=class extends i{constructor(){super(...arguments),this.expanded=!1,this.expandable=!0}static get styles(){return[style]}_onHeaderClicked(e){this.expandable&&(e.preventDefault(),this.expanded=!this.expanded)}render(){return t`
+            <div id="header" class="${this.expandable?"expandable":""} ${this.expandable&&this.expanded?"expanded":""}" @click="${e=>this._onHeaderClicked(e)}">
+                ${this.expandable?t`<or-icon icon="chevron-${this.expanded?"down":"right"}"></or-icon>`:""}
+                <span id="header-content">
+                    <span id="header-title"><slot name="header"></slot></span>
+                    <span id="header-description"><slot name="header-description"></slot></span>
+                </span>
+            </div>
+            <div id="content" class="${this.expandable&&this.expanded?"expanded":""}">
+                ${this.lazycontent?this.expanded&&s(this.lazycontent,t`${l.t("loading")}`):t`<slot name="content"></slot>`}
+            </div>
+        `}};__decorate([n({type:Promise})],OrCollapsiblePanel.prototype,"lazycontent",void 0),__decorate([n({type:Boolean})],OrCollapsiblePanel.prototype,"expanded",void 0),__decorate([n({type:Boolean})],OrCollapsiblePanel.prototype,"expandable",void 0),__decorate([a("#header")],OrCollapsiblePanel.prototype,"headerElem",void 0),OrCollapsiblePanel=__decorate([r("or-collapsible-panel")],OrCollapsiblePanel);export{OrCollapsiblePanel};