@openremote/or-attribute-picker 1.8.0-snapshot.20250725074716 → 1.8.0-snapshot.20250725120001

package/lib/attribute-picker.js

@@ -1,29 +1,170 @@
-var __decorate=this&&this.__decorate||function(t,e,o,r){var i,n=arguments.length,s=n<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,o,r);else for(var a=t.length-1;a>=0;a--)(i=t[a])&&(s=(n<3?i(s):n>3?i(e,o,s):i(e,o))||s);return n>3&&s&&Object.defineProperty(e,o,s),s},__awaiter=this&&this.__awaiter||function(t,e,o,r){return new(o||(o=Promise))(function(i,n){function s(t){try{l(r.next(t))}catch(t){n(t)}}function a(t){try{l(r.throw(t))}catch(t){n(t)}}function l(t){var e;t.done?i(t.value):((e=t.value)instanceof o?e:new o(function(t){t(e)})).then(s,a)}l((r=r.apply(t,e||[])).next())})};import{html as t,unsafeCSS as e}from"lit";import{property as o,query as r}from"lit/decorators.js";import"@openremote/or-asset-tree";import"@openremote/or-translate";import"@openremote/or-mwc-components/or-mwc-input";import"@openremote/or-mwc-components/or-mwc-list";import{InputType as i}from"@openremote/or-mwc-components/or-mwc-input";import{i18next as n}from"@openremote/or-translate";import{DefaultColor2 as s,DefaultColor4 as a,DefaultColor5 as l,Util as c}from"@openremote/core";import{OrMwcDialog as p}from"@openremote/or-mwc-components/or-mwc-dialog";import{when as u}from"lit/directives/when.js";import{ListType as m}from"@openremote/or-mwc-components/or-mwc-list";export class AttributePickerPickedEvent extends CustomEvent{}export class AttributePicker extends p{constructor(){super(...arguments),this.multiSelect=!1,this.showOnlyDatapointAttrs=!1,this.showOnlyRuleStateAttrs=!1}connectedCallback(){super.connectedCallback(),this.heading=n.t("selectAttributes"),this._setDialogContent(),this._setDialogActions(),this.dismissAction=null,this.styles=this._getStyles()}setShowOnlyDatapointAttrs(t){return this.showOnlyDatapointAttrs=t,this}setShowOnlyRuleStateAttrs(t){return this.showOnlyRuleStateAttrs=t,this}setMultiSelect(t){return this.multiSelect=t,this}setOpen(t){return super.setOpen(t),this}setHeading(t){return super.setHeading(t),this}setContent(t){throw Error("Cannot modify attribute picker content")}setActions(t){throw Error("Cannot modify attribute picker actions")}setDismissAction(t){throw Error("Cannot modify attribute picker dismiss action")}setStyles(t){throw Error("Cannot modify attribute picker styles")}setAvatar(t){throw Error("Cannot modify attribute picker avatar setting")}_updateDialogContent(){this._setDialogContent()}_updateDialogActions(){this._setDialogActions()}_getAttributesTemplate(e,o,r){return __awaiter(this,arguments,void 0,function*(e,o,r,s=!1,a){let l=Math.max((null==e?void 0:e.length)||0,(null==o?void 0:o.length)||0),p=[];for(let t=0;t<l;t++)p.push({text:c.getAttributeLabel(null==e?void 0:e[t],null==o?void 0:o[t],void 0,!0),value:(null==e?void 0:e[t].name)||(null==o?void 0:o[t].name)});return t`
-            ${u(s,()=>t`
-                <or-mwc-list id="attribute-selector" .type="${m.MULTI_CHECKBOX}" .listItems="${p}" .values="${r}"
-                             @or-mwc-list-changed="${t=>null==a?void 0:a(t.detail.map(t=>t.value))}"
-                </or-mwc-list>
-            `,()=>t`
-                <or-mwc-input id="attribute-selector" .type="${i.LIST}" .options="${null==p?void 0:p.map(t=>[t,t.text])}"
-                              style="display:flex;" .label="${n.t("attribute")}"
-                              @or-mwc-input-changed="${t=>null==a?void 0:a([t.detail.value.value])}"
-                ></or-mwc-input>
-            `)}
-        `})}_getStyles(){return`
-            .attributes-header {
-                line-height: 48px;
-                padding: 0 15px;
-                background-color: ${e(s)};
-                font-weight: bold;
-                border-bottom: 1px solid ${e(s)};
+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 { html, unsafeCSS } from "lit";
+import { property, query } from "lit/decorators.js";
+import "@openremote/or-asset-tree";
+import "@openremote/or-translate";
+import "@openremote/or-mwc-components/or-mwc-input";
+import "@openremote/or-mwc-components/or-mwc-list";
+import { InputType } from "@openremote/or-mwc-components/or-mwc-input";
+import { i18next } from "@openremote/or-translate";
+import { DefaultColor2, DefaultColor4, DefaultColor5, Util } from "@openremote/core";
+import { OrMwcDialog } from "@openremote/or-mwc-components/or-mwc-dialog";
+import { when } from "lit/directives/when.js";
+import { ListType } from "@openremote/or-mwc-components/or-mwc-list";
+export class AttributePickerPickedEvent extends CustomEvent {
+}
+/**
+ * @summary Abstract implementation of the Attribute Picker UI. Wraps around OrMwcDialog and provides some utility properties and functions to inherit.
+ *
+ * @attribute {boolean} multiSelect - Whether selecting multiple attributes is allowed or not.
+ * @attribute {boolean} showOnlyDatapointAttrs - Whether only attributes with the 'STORE_DATAPOINT' meta item should be shown.
+ * @attribute {boolean} showOnlyRuleStateAttrs - Whether only attributes with the 'RULE_STATE' meta item should be shown.
+ *
+ * @remarks This class is abstract
+ */
+export class AttributePicker extends OrMwcDialog {
+    constructor() {
+        super(...arguments);
+        this.multiSelect = false;
+        this.showOnlyDatapointAttrs = false;
+        this.showOnlyRuleStateAttrs = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.heading = i18next.t("selectAttributes");
+        this._setDialogContent();
+        this._setDialogActions();
+        this.dismissAction = null;
+        this.styles = this._getStyles();
+    }
+    setShowOnlyDatapointAttrs(showOnlyDatapointAttrs) {
+        this.showOnlyDatapointAttrs = showOnlyDatapointAttrs;
+        return this;
+    }
+    setShowOnlyRuleStateAttrs(showOnlyRuleStateAttrs) {
+        this.showOnlyRuleStateAttrs = showOnlyRuleStateAttrs;
+        return this;
+    }
+    setMultiSelect(multiSelect) {
+        this.multiSelect = multiSelect;
+        return this;
+    }
+    setOpen(isOpen) {
+        super.setOpen(isOpen);
+        return this;
+    }
+    setHeading(heading) {
+        super.setHeading(heading);
+        return this;
+    }
+    setContent(_content) {
+        throw new Error("Cannot modify attribute picker content");
+    }
+    setActions(_actions) {
+        throw new Error("Cannot modify attribute picker actions");
+    }
+    setDismissAction(_action) {
+        throw new Error("Cannot modify attribute picker dismiss action");
+    }
+    setStyles(_styles) {
+        throw new Error("Cannot modify attribute picker styles");
+    }
+    setAvatar(_avatar) {
+        throw new Error("Cannot modify attribute picker avatar setting");
+    }
+    /**
+     * Convenient function to update the dialog content manually,
+     * since updating the UI is handled different for {@link OrMwcDialog}.
+     */
+    _updateDialogContent() {
+        this._setDialogContent();
+    }
+    /**
+     * Convenient function to update the dialog actions manually,
+     * since updating the UI is handled different for {@link OrMwcDialog}.
+     */
+    _updateDialogActions() {
+        this._setDialogActions();
+    }
+    /**
+     * Function that creates the HTML template for selecting attributes.
+     * Currently uses {@link OrMwcList} with or without checkboxes, and uses {@link Util.getAttributeLabel} to formulate the text.
+     *
+     * @remarks TODO: Move this template into a separate component, such as an "or-attribute-list"
+     */
+    _getAttributesTemplate(attributes_1, descriptors_1, selectedNames_1) {
+        return __awaiter(this, arguments, void 0, function* (attributes, descriptors, selectedNames, multi = false, onSelect) {
+            const length = Math.max(((attributes === null || attributes === void 0 ? void 0 : attributes.length) || 0), ((descriptors === null || descriptors === void 0 ? void 0 : descriptors.length) || 0));
+            const listItems = [];
+            for (let i = 0; i < length; i++) {
+                listItems.push({
+                    text: Util.getAttributeLabel(attributes === null || attributes === void 0 ? void 0 : attributes[i], descriptors === null || descriptors === void 0 ? void 0 : descriptors[i], undefined, true),
+                    value: ((attributes === null || attributes === void 0 ? void 0 : attributes[i].name) || (descriptors === null || descriptors === void 0 ? void 0 : descriptors[i].name)),
+                });
             }
-            footer.mdc-dialog__actions {
-                border-top: 1px solid ${e(l)};
-            }
-            #header {
-                background-color: ${e(a)} !important;
-            }
-            #dialog-content {
-                padding: 0;
-            }
-        `}}__decorate([o({type:Boolean})],AttributePicker.prototype,"multiSelect",void 0),__decorate([o({type:Boolean})],AttributePicker.prototype,"showOnlyDatapointAttrs",void 0),__decorate([o({type:Boolean})],AttributePicker.prototype,"showOnlyRuleStateAttrs",void 0),__decorate([r("#add-btn")],AttributePicker.prototype,"addBtn",void 0);
+            return html `
+            ${when(multi, () => html `
+                <or-mwc-list id="attribute-selector" .type="${ListType.MULTI_CHECKBOX}" .listItems="${listItems}" .values="${selectedNames}"
+                             @or-mwc-list-changed="${(ev) => onSelect === null || onSelect === void 0 ? void 0 : onSelect(ev.detail.map(item => item.value))}"
+                </or-mwc-list>
+            `, () => html `
+                <or-mwc-input id="attribute-selector" .type="${InputType.LIST}" .options="${listItems === null || listItems === void 0 ? void 0 : listItems.map(item => ([item, item.text]))}"
+                              style="display:flex;" .label="${i18next.t("attribute")}"
+                              @or-mwc-input-changed="${(ev) => onSelect === null || onSelect === void 0 ? void 0 : onSelect([ev.detail.value.value])}"
+                ></or-mwc-input>
+            `)}
+        `;
+        });
+    }
+    /**
+     * Simple function that creates the CSS styles for this component
+     */
+    _getStyles() {
+        // language=css
+        return `
+            .attributes-header {
+                line-height: 48px;
+                padding: 0 15px;
+                background-color: ${unsafeCSS(DefaultColor2)};
+                font-weight: bold;
+                border-bottom: 1px solid ${unsafeCSS(DefaultColor2)};
+            }
+            footer.mdc-dialog__actions {
+                border-top: 1px solid ${unsafeCSS(DefaultColor5)};
+            }
+            #header {
+                background-color: ${unsafeCSS(DefaultColor4)} !important;
+            }
+            #dialog-content {
+                padding: 0;
+            }
+        `;
+    }
+}
+__decorate([
+    property({ type: Boolean })
+], AttributePicker.prototype, "multiSelect", void 0);
+__decorate([
+    property({ type: Boolean })
+], AttributePicker.prototype, "showOnlyDatapointAttrs", void 0);
+__decorate([
+    property({ type: Boolean })
+], AttributePicker.prototype, "showOnlyRuleStateAttrs", void 0);
+__decorate([
+    query("#add-btn")
+], AttributePicker.prototype, "addBtn", void 0);
+//# sourceMappingURL=attribute-picker.js.map

package/lib/index.js

@@ -1 +1,27 @@
-var __decorate=this&&this.__decorate||function(t,e,r,i){var c,o=arguments.length,a=o<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,r,i);else for(var s=t.length-1;s>=0;s--)(c=t[s])&&(a=(o<3?c(a):o>3?c(e,r,a):c(e,r))||a);return o>3&&a&&Object.defineProperty(e,r,a),a};import{customElement as t}from"lit/decorators.js";import{OrAssetAttributePicker as e,OrAssetAttributePickerPickedEvent as r}from"./asset-attribute-picker";export class OrAttributePickerPickedEvent extends r{}let OrAttributePicker=class extends e{};OrAttributePicker=__decorate([t("or-attribute-picker")],OrAttributePicker);export*from"./asset-attribute-picker";export*from"./assettype-attribute-picker";export{OrAttributePicker};
+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 { customElement } from "lit/decorators.js";
+import { OrAssetAttributePicker, OrAssetAttributePickerPickedEvent } from "./asset-attribute-picker";
+/**
+ * {@link CustomEvent} that triggers once attributes have been selected, and the user closes the dialog.
+ * @deprecated Replaced this class with an abstract {@link OrAssetAttributePickerPickedEvent}, that is inherited by other classes like {@link OrAssetAttributePicker} and {@link OrAssetTypeAttributePicker}.
+ */
+export class OrAttributePickerPickedEvent extends OrAssetAttributePickerPickedEvent {
+}
+/**
+ * Dialog to pick attributes of supplied asset(s).
+ * @deprecated Replaced this class with {@link OrAssetAttributePicker}.
+ */
+let OrAttributePicker = class OrAttributePicker extends OrAssetAttributePicker {
+};
+OrAttributePicker = __decorate([
+    customElement("or-attribute-picker")
+], OrAttributePicker);
+export { OrAttributePicker };
+export * from "./asset-attribute-picker";
+export * from "./assettype-attribute-picker";
+//# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openremote/or-attribute-picker",
-  "version": "1.8.0-snapshot.20250725074716",
+  "version": "1.8.0-snapshot.20250725120001",
   "description": "OpenRemote attribute picker dialog",
   "customElements": "custom-elements.json",
   "main": "dist/umd/index.bundle.js",
@@ -18,14 +18,14 @@
   "author": "OpenRemote",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@openremote/core": "1.8.0-snapshot.20250725074716",
-    "@openremote/or-asset-tree": "1.8.0-snapshot.20250725074716",
-    "@openremote/or-mwc-components": "1.8.0-snapshot.20250725074716",
-    "@openremote/or-translate": "1.8.0-snapshot.20250725074716",
+    "@openremote/core": "1.8.0-snapshot.20250725120001",
+    "@openremote/or-asset-tree": "1.8.0-snapshot.20250725120001",
+    "@openremote/or-mwc-components": "1.8.0-snapshot.20250725120001",
+    "@openremote/or-translate": "1.8.0-snapshot.20250725120001",
     "lit": "^2.0.2"
   },
   "devDependencies": {
-    "@openremote/util": "1.8.0-snapshot.20250725074716"
+    "@openremote/util": "1.8.0-snapshot.20250725120001"
   },
   "publishConfig": {
     "access": "public"