@openremote/or-components 1.8.0-snapshot.20250725070921 → 1.8.0-snapshot.20250725120000

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,25 +1,168 @@
-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%;
+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
             }
-        
-            #ace-editor {
-                position: relative;
-                height: 100%;
-                width: 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);
             }
-        
-            @media screen and (max-width: 1400px) {
-                :host > * {
-                    flex-grow: 0;
-                }
-        
-                :host {
-                    flex-direction: column;
-                }
+        }
+    }
+    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();
             }
-        `}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};
+        }, 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

package/lib/or-collapsible-panel.js

@@ -1,95 +1,165 @@
-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;
+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;
     }
-
-    :host([hidden]) {
-        display: none;
+    static get styles() {
+        return [
+            style
+        ];
     }
-    
-    #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;
+    _onHeaderClicked(ev) {
+        if (!this.expandable) {
+            return;
+        }
+        ev.preventDefault();
+        this.expanded = !this.expanded;
     }
-    
-    #header.expandable {
-        cursor: pointer;
-        transition: height 225ms cubic-bezier(0.4, 0, 0.2, 1);
+    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.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};
+};
+__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

package/lib/or-file-uploader.d.ts

@@ -12,5 +12,5 @@ export declare class OrFileUploader extends LitElement {
     static get styles(): import("lit").CSSResult;
     protected firstUpdated(_changedProperties: PropertyValues): void;
     _onChange(e: any): Promise<void>;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }