@openremote/or-asset-tree 1.24.0 → 1.24.1

package/custom-elements-jsx.d.ts

@@ -1,6 +1,20 @@
-
-import type { style, OrAssetTreeRequestSelectionEvent, OrAssetTreeSelectionEvent, OrAssetTreeChangeParentEvent, OrAssetTreeToggleExpandEvent, OrAssetTreeRequestAddEvent, OrAssetTreeAddEvent, OrAssetTreeRequestDeleteEvent, OrAssetTreeAssetEvent, OrAssetTreeFilter, OrAssetTree } from "./lib/index.d.ts";
-import type { OrAddChangedEvent, OrAddAssetDialog } from "./lib/or-add-asset-dialog.d.ts";
+import type {
+  style,
+  OrAssetTreeRequestSelectionEvent,
+  OrAssetTreeSelectionEvent,
+  OrAssetTreeChangeParentEvent,
+  OrAssetTreeToggleExpandEvent,
+  OrAssetTreeRequestAddEvent,
+  OrAssetTreeAddEvent,
+  OrAssetTreeRequestDeleteEvent,
+  OrAssetTreeAssetEvent,
+  OrAssetTreeFilter,
+  OrAssetTree,
+} from "./lib/index.d.ts";
+import type {
+  OrAddChangedEvent,
+  OrAddAssetDialog,
+} from "./lib/or-add-asset-dialog.d.ts";
 
 /**
  * This type can be used to create scoped tags for your components.
@@ -28,7 +42,6 @@ export type ScopedElements<
 };
 
 type BaseProps<T extends HTMLElement> = {
-
   /** Content added between the opening and closing tags of the element */
   children?: any;
   /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
@@ -51,6 +64,8 @@ type BaseProps<T extends HTMLElement> = {
   key?: string | number;
   /** Specifies the language of the element. */
   lang?: string;
+  /** Defines the element's semantic role for accessibility APIs. */
+  role?: string;
   /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
   part?: string;
   /** Use the ref attribute with a variable to assign a DOM element to the variable once the element is rendered. */
@@ -71,211 +86,366 @@ type BaseProps<T extends HTMLElement> = {
   popovertarget?: "top" | "bottom" | "left" | "right" | "auto";
   /** Specifies the action to be performed on a popover element being controlled by a control element. */
   popovertargetaction?: "show" | "hide" | "toggle";
-
-} ;
-
-type BaseEvents = {
-
-
 };
 
-
+type BaseEvents = {};
 
 export type OrAssetTreeProps = {
   /** Allows arbitrary assets to be displayed using a tree */
-  "assets"?: OrAssetTree['assets'];
+  assets?: OrAssetTree["assets"];
   /**  */
-  "rootAssets"?: OrAssetTree['rootAssets'];
+  rootAssets?: OrAssetTree["rootAssets"];
   /**  */
-  "rootAssetIds"?: OrAssetTree['rootAssetIds'];
+  rootAssetIds?: OrAssetTree["rootAssetIds"];
   /**  */
-  "dataProvider"?: OrAssetTree['dataProvider'];
+  dataProvider?: OrAssetTree["dataProvider"];
   /**  */
-  "readonly"?: OrAssetTree['readonly'];
+  readonly?: OrAssetTree["readonly"];
   /**  */
-  "disabled"?: OrAssetTree['disabled'];
+  disabled?: OrAssetTree["disabled"];
   /**  */
-  "disableSubscribe"?: OrAssetTree['disableSubscribe'];
+  disableSubscribe?: OrAssetTree["disableSubscribe"];
   /**  */
-  "selectedIds"?: OrAssetTree['selectedIds'];
+  selectedIds?: OrAssetTree["selectedIds"];
   /**  */
-  "showDeselectBtn"?: OrAssetTree['showDeselectBtn'];
+  showDeselectBtn?: OrAssetTree["showDeselectBtn"];
   /**  */
-  "showSortBtn"?: OrAssetTree['showSortBtn'];
+  showSortBtn?: OrAssetTree["showSortBtn"];
   /**  */
-  "showFilter"?: OrAssetTree['showFilter'];
+  showFilter?: OrAssetTree["showFilter"];
   /**  */
-  "showFilterIcon"?: OrAssetTree['showFilterIcon'];
+  showFilterIcon?: OrAssetTree["showFilterIcon"];
   /**  */
-  "sortBy"?: OrAssetTree['sortBy'];
+  sortBy?: OrAssetTree["sortBy"];
   /**  */
-  "expandAllNodes"?: OrAssetTree['expandAllNodes'];
+  expandAllNodes?: OrAssetTree["expandAllNodes"];
   /**  */
-  "checkboxes"?: OrAssetTree['checkboxes'];
+  checkboxes?: OrAssetTree["checkboxes"];
   /**  */
-  "queryLimit"?: OrAssetTree['queryLimit'];
+  queryLimit?: OrAssetTree["queryLimit"];
   /**  */
-  "paginationThreshold"?: OrAssetTree['paginationThreshold'];
+  paginationThreshold?: OrAssetTree["paginationThreshold"];
   /**  */
-  "selectedNodes"?: OrAssetTree['selectedNodes'];
+  selectedNodes?: OrAssetTree["selectedNodes"];
 
   /**  */
-  "onundefined"?: (e: CustomEvent<OrAssetTreeSelectionEvent>) => void;
+  onassetEvent?: (e: OrAssetTreeAssetEvent) => void;
+};
+
+export type OrAssetTreeSolidJsProps = {
+  /** Allows arbitrary assets to be displayed using a tree */
+  "prop:assets"?: OrAssetTree["assets"];
   /**  */
-  "onassetEvent"?: (e: CustomEvent<OrAssetTreeAssetEvent>) => void;
-}
+  "prop:rootAssets"?: OrAssetTree["rootAssets"];
+  /**  */
+  "prop:rootAssetIds"?: OrAssetTree["rootAssetIds"];
+  /**  */
+  "prop:dataProvider"?: OrAssetTree["dataProvider"];
+  /**  */
+  "prop:readonly"?: OrAssetTree["readonly"];
+  /**  */
+  "prop:disabled"?: OrAssetTree["disabled"];
+  /**  */
+  "prop:disableSubscribe"?: OrAssetTree["disableSubscribe"];
+  /**  */
+  "prop:selectedIds"?: OrAssetTree["selectedIds"];
+  /**  */
+  "prop:showDeselectBtn"?: OrAssetTree["showDeselectBtn"];
+  /**  */
+  "prop:showSortBtn"?: OrAssetTree["showSortBtn"];
+  /**  */
+  "prop:showFilter"?: OrAssetTree["showFilter"];
+  /**  */
+  "prop:showFilterIcon"?: OrAssetTree["showFilterIcon"];
+  /**  */
+  "prop:sortBy"?: OrAssetTree["sortBy"];
+  /**  */
+  "prop:expandAllNodes"?: OrAssetTree["expandAllNodes"];
+  /**  */
+  "prop:checkboxes"?: OrAssetTree["checkboxes"];
+  /**  */
+  "prop:queryLimit"?: OrAssetTree["queryLimit"];
+  /**  */
+  "prop:paginationThreshold"?: OrAssetTree["paginationThreshold"];
+  /**  */
+  "prop:selectedNodes"?: OrAssetTree["selectedNodes"];
+  /**  */
+  "on:assetEvent"?: (e: OrAssetTreeAssetEvent) => void;
 
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
 
 export type OrAddAssetDialogProps = {
   /**  */
-  "typeFilter"?: OrAddAssetDialog['typeFilter'];
+  typeFilter?: OrAddAssetDialog["typeFilter"];
   /**  */
-  "config"?: OrAddAssetDialog['config'];
+  config?: OrAddAssetDialog["config"];
   /**  */
-  "agentTypes"?: OrAddAssetDialog['agentTypes'];
+  agentTypes?: OrAddAssetDialog["agentTypes"];
   /**  */
-  "assetTypes"?: OrAddAssetDialog['assetTypes'];
+  assetTypes?: OrAddAssetDialog["assetTypes"];
   /**  */
-  "parent"?: OrAddAssetDialog['parent'];
+  parent?: OrAddAssetDialog["parent"];
   /**  */
-  "selectedType"?: OrAddAssetDialog['selectedType'];
+  selectedType?: OrAddAssetDialog["selectedType"];
   /**  */
-  "selectedAttributes"?: OrAddAssetDialog['selectedAttributes'];
+  selectedAttributes?: OrAddAssetDialog["selectedAttributes"];
   /**  */
-  "selectedChildAssetType"?: OrAddAssetDialog['selectedChildAssetType'];
+  selectedChildAssetType?: OrAddAssetDialog["selectedChildAssetType"];
   /**  */
-  "name"?: OrAddAssetDialog['name'];
+  name?: OrAddAssetDialog["name"];
+};
 
+export type OrAddAssetDialogSolidJsProps = {
   /**  */
-  "onundefined"?: (e: CustomEvent<OrAddChangedEvent>) => void;
-}
+  "prop:typeFilter"?: OrAddAssetDialog["typeFilter"];
+  /**  */
+  "prop:config"?: OrAddAssetDialog["config"];
+  /**  */
+  "prop:agentTypes"?: OrAddAssetDialog["agentTypes"];
+  /**  */
+  "prop:assetTypes"?: OrAddAssetDialog["assetTypes"];
+  /**  */
+  "prop:parent"?: OrAddAssetDialog["parent"];
+  /**  */
+  "prop:selectedType"?: OrAddAssetDialog["selectedType"];
+  /**  */
+  "prop:selectedAttributes"?: OrAddAssetDialog["selectedAttributes"];
+  /**  */
+  "prop:selectedChildAssetType"?: OrAddAssetDialog["selectedChildAssetType"];
+  /**  */
+  "prop:name"?: OrAddAssetDialog["name"];
 
-  export type CustomElements = {
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
 
+export type CustomElements = {
+  /**
+   *
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `assets`: Allows arbitrary assets to be displayed using a tree
+   * - `rootAssets`: undefined
+   * - `rootAssetIds`: undefined
+   * - `dataProvider`: undefined
+   * - `readonly`: undefined
+   * - `disabled`: undefined
+   * - `disableSubscribe`: undefined
+   * - `selectedIds`: undefined
+   * - `showDeselectBtn`: undefined
+   * - `showSortBtn`: undefined
+   * - `showFilter`: undefined
+   * - `showFilterIcon`: undefined
+   * - `sortBy`: undefined
+   * - `expandAllNodes`: undefined
+   * - `checkboxes`: undefined
+   * - `queryLimit`: undefined
+   * - `paginationThreshold`: undefined
+   * - `selectedNodes`: undefined (property only)
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `undefined`: undefined
+   * - `assetEvent`: undefined
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `refresh() => void`: undefined
+   * - `isAncestorSelected(node: UiAssetTreeNode) => void`: undefined
+   * - `applyFilter(filter?: OrAssetTreeFilter | string, reflect = false) => void`: A setter function for updating the list of nodes (assets) shown in the UI.
+   * - `_addEventSubscriptions() => Promise<void>`: undefined
+   * - `onEventsConnect() => void`: undefined
+   * - `onEventsDisconnect() => void`: undefined
+   * - `getNodes() => UiAssetTreeNode[]`: undefined
+   * - `_onEvent(event: SharedEvent) => void`: undefined
+   * - `_onDragStart(ev: any) => void`: undefined
+   * - `_onDragEnd(ev: any) => void`: undefined
+   * - `_onDragOver(ev: any) => void`: undefined
+   * - `_onDragEnter(ev: any) => void`: undefined
+   * - `_onDragLeave(ev: any) => void`: undefined
+   */
+  "or-asset-tree": Partial<
+    OrAssetTreeProps & BaseProps<OrAssetTree> & BaseEvents
+  >;
 
   /**
-     * 
- * 
- * ## Attributes & Properties
- * 
- * Component attributes and properties that can be applied to the element or by using JavaScript.
- * 
- * - `assets`: Allows arbitrary assets to be displayed using a tree 
- * - `rootAssets`: undefined 
- * - `rootAssetIds`: undefined 
- * - `dataProvider`: undefined 
- * - `readonly`: undefined 
- * - `disabled`: undefined 
- * - `disableSubscribe`: undefined 
- * - `selectedIds`: undefined 
- * - `showDeselectBtn`: undefined 
- * - `showSortBtn`: undefined 
- * - `showFilter`: undefined 
- * - `showFilterIcon`: undefined 
- * - `sortBy`: undefined 
- * - `expandAllNodes`: undefined 
- * - `checkboxes`: undefined 
- * - `queryLimit`: undefined 
- * - `paginationThreshold`: undefined 
- * - `selectedNodes`: undefined (property only)
- * 
- * ## Events
- * 
- * Events that will be emitted by the component.
- * 
- * - `undefined`: undefined
- * - `assetEvent`: undefined
- * 
- * ## Methods
- * 
- * Methods that can be called to access component functionality.
- * 
- * - `refresh() => void`: undefined
- * - `isAncestorSelected(node: UiAssetTreeNode) => void`: undefined
- * - `applyFilter(filter?: OrAssetTreeFilter | string, reflect = false) => void`: A setter function for updating the list of nodes (assets) shown in the UI.
- * - `_addEventSubscriptions() => Promise<void>`: undefined
- * - `onEventsConnect() => void`: undefined
- * - `onEventsDisconnect() => void`: undefined
- * - `getNodes() => UiAssetTreeNode[]`: undefined
- * - `_onEvent(event: SharedEvent) => void`: undefined
- * - `_onDragStart(ev: any) => void`: undefined
- * - `_onDragEnd(ev: any) => void`: undefined
- * - `_onDragOver(ev: any) => void`: undefined
- * - `_onDragEnter(ev: any) => void`: undefined
- * - `_onDragLeave(ev: any) => void`: undefined
-  */
-    "or-asset-tree": Partial<OrAssetTreeProps & BaseProps<OrAssetTree> & BaseEvents>;
+   *
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `typeFilter`: undefined
+   * - `config`: undefined (property only)
+   * - `agentTypes`: undefined (property only)
+   * - `assetTypes`: undefined (property only)
+   * - `parent`: undefined (property only)
+   * - `selectedType`: undefined (property only)
+   * - `selectedAttributes`: undefined (property only)
+   * - `selectedChildAssetType`: undefined (property only)
+   * - `name`: undefined (property only)
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `undefined`: undefined
+   */
+  "or-add-asset-dialog": Partial<
+    OrAddAssetDialogProps & BaseProps<OrAddAssetDialog> & BaseEvents
+  >;
+};
 
+export type CustomElementsSolidJs = {
+  /**
+   *
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `assets`: Allows arbitrary assets to be displayed using a tree
+   * - `rootAssets`: undefined
+   * - `rootAssetIds`: undefined
+   * - `dataProvider`: undefined
+   * - `readonly`: undefined
+   * - `disabled`: undefined
+   * - `disableSubscribe`: undefined
+   * - `selectedIds`: undefined
+   * - `showDeselectBtn`: undefined
+   * - `showSortBtn`: undefined
+   * - `showFilter`: undefined
+   * - `showFilterIcon`: undefined
+   * - `sortBy`: undefined
+   * - `expandAllNodes`: undefined
+   * - `checkboxes`: undefined
+   * - `queryLimit`: undefined
+   * - `paginationThreshold`: undefined
+   * - `selectedNodes`: undefined (property only)
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `undefined`: undefined
+   * - `assetEvent`: undefined
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `refresh() => void`: undefined
+   * - `isAncestorSelected(node: UiAssetTreeNode) => void`: undefined
+   * - `applyFilter(filter?: OrAssetTreeFilter | string, reflect = false) => void`: A setter function for updating the list of nodes (assets) shown in the UI.
+   * - `_addEventSubscriptions() => Promise<void>`: undefined
+   * - `onEventsConnect() => void`: undefined
+   * - `onEventsDisconnect() => void`: undefined
+   * - `getNodes() => UiAssetTreeNode[]`: undefined
+   * - `_onEvent(event: SharedEvent) => void`: undefined
+   * - `_onDragStart(ev: any) => void`: undefined
+   * - `_onDragEnd(ev: any) => void`: undefined
+   * - `_onDragOver(ev: any) => void`: undefined
+   * - `_onDragEnter(ev: any) => void`: undefined
+   * - `_onDragLeave(ev: any) => void`: undefined
+   */
+  "or-asset-tree": Partial<
+    OrAssetTreeProps &
+      OrAssetTreeSolidJsProps &
+      BaseProps<OrAssetTree> &
+      BaseEvents
+  >;
 
   /**
-     * 
- * 
- * ## Attributes & Properties
- * 
- * Component attributes and properties that can be applied to the element or by using JavaScript.
- * 
- * - `typeFilter`: undefined 
- * - `config`: undefined (property only)
- * - `agentTypes`: undefined (property only)
- * - `assetTypes`: undefined (property only)
- * - `parent`: undefined (property only)
- * - `selectedType`: undefined (property only)
- * - `selectedAttributes`: undefined (property only)
- * - `selectedChildAssetType`: undefined (property only)
- * - `name`: undefined (property only)
- * 
- * ## Events
- * 
- * Events that will be emitted by the component.
- * 
- * - `undefined`: undefined
-  */
-    "or-add-asset-dialog": Partial<OrAddAssetDialogProps & BaseProps<OrAddAssetDialog> & BaseEvents>;
-  }
+   *
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `typeFilter`: undefined
+   * - `config`: undefined (property only)
+   * - `agentTypes`: undefined (property only)
+   * - `assetTypes`: undefined (property only)
+   * - `parent`: undefined (property only)
+   * - `selectedType`: undefined (property only)
+   * - `selectedAttributes`: undefined (property only)
+   * - `selectedChildAssetType`: undefined (property only)
+   * - `name`: undefined (property only)
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `undefined`: undefined
+   */
+  "or-add-asset-dialog": Partial<
+    OrAddAssetDialogProps &
+      OrAddAssetDialogSolidJsProps &
+      BaseProps<OrAddAssetDialog> &
+      BaseEvents
+  >;
+};
 
-export type CustomCssProperties = {
+export type CustomCssProperties = {};
 
+declare module "react" {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
 }
 
-
-declare module 'react' {
+declare module "preact" {
   namespace JSX {
     interface IntrinsicElements extends CustomElements {}
   }
   export interface CSSProperties extends CustomCssProperties {}
 }
 
-declare module 'preact' {
+declare module "@builder.io/qwik" {
   namespace JSX {
     interface IntrinsicElements extends CustomElements {}
   }
   export interface CSSProperties extends CustomCssProperties {}
 }
 
-declare module '@builder.io/qwik' {
+declare module "@stencil/core" {
   namespace JSX {
     interface IntrinsicElements extends CustomElements {}
   }
   export interface CSSProperties extends CustomCssProperties {}
 }
 
-declare module '@stencil/core' {
+declare module "hono/jsx" {
   namespace JSX {
     interface IntrinsicElements extends CustomElements {}
   }
   export interface CSSProperties extends CustomCssProperties {}
 }
 
-declare module 'hono/jsx' {
+declare module "react-native" {
   namespace JSX {
     interface IntrinsicElements extends CustomElements {}
   }
   export interface CSSProperties extends CustomCssProperties {}
 }
 
-declare module 'react-native' {
+declare module "solid-js" {
   namespace JSX {
-    interface IntrinsicElements extends CustomElements {}
+    interface IntrinsicElements extends CustomElementsSolidJs {}
   }
   export interface CSSProperties extends CustomCssProperties {}
 }

package/dist/umd/index.bundle.js

@@ -256,9 +256,9 @@
                 <or-translate id="type-description" .value="${s.Util.getAssetTypeLabel(t)}"></or-translate>
             </div>
             <div id="name-wrapper">
-                <or-mwc-input id="name-input" .type="${a.NZ.TEXT}" min="1" max="1023" required .label="${d.i18next.t("name")}" .value="${this.name}" @or-mwc-input-changed="${t=>this.onNameChanged(t.detail.value)}"></or-mwc-input>
+                <or-mwc-input id="name-input" .type="${a.NZ.TEXT}" min="1" max="1023" required label="${d.i18next.t("name")}" .value="${this.name}" @or-mwc-input-changed="${t=>this.onNameChanged(t.detail.value)}"></or-mwc-input>
                 <div id="parent-wrapper">
-                    <or-mwc-input id="parent" .type="${a.NZ.TEXT}" readonly .label="${d.i18next.t("parent")}" .value="${e}" @click="${()=>this._onToggleParentAssetSelector()}"></or-mwc-input>
+                    <or-mwc-input id="parent" .type="${a.NZ.TEXT}" readonly label="${d.i18next.t("parent")}" .value="${e}" @click="${()=>this._onToggleParentAssetSelector()}"></or-mwc-input>
                     <or-mwc-input id="remove-parent" ?disabled="${!this.parent}" type="${a.NZ.BUTTON}" icon="close" @or-mwc-input-changed="${()=>this._onDeselectClicked()}"></or-mwc-input>
                     <or-mwc-input id="toggle-parent-selector" icon="${this.showParentAssetSelector?"pencil-off":"pencil"}" type="${a.NZ.BUTTON}" @or-mwc-input-changed="${()=>this._onToggleParentAssetSelector()}"></or-mwc-input>
                 </div>
@@ -266,10 +266,10 @@
             
             ${!c?(0,i.qy)``:(0,i.qy)`
                     <div>
-                        <div class="heading">${d.i18next.t("attribute_plural")}</div>
+                        <div class="heading"><or-translate value="attribute_plural"></or-translate></div>
                         <div style="display: grid">
-                            ${c.sort(s.Util.sortByString(t=>t.name)).map(t=>(0,i.qy)`
-                                    <or-mwc-input .type="${a.NZ.CHECKBOX}" .label="${s.Util.getAttributeLabel(void 0,t,void 0,!0)}"
+                            ${c.sort(s.Util.sortByString(t=>t.name)).map(e=>(0,i.qy)`
+                                    <or-mwc-input .type="${a.NZ.CHECKBOX}" .label="${s.Util.getAttributeLabel(void 0,e,t.name,!0)}"
                                                   .disabled="${!0}" .value="${!0}"></or-mwc-input>
                             `)}
                         </div>
@@ -277,12 +277,12 @@
 
             ${!m?(0,i.qy)``:(0,i.qy)`
                     <div>
-                        <div class="heading">${d.i18next.t("optional_attributes")}</div>
+                        <div class="heading"><or-translate value="optional_attributes"></or-translate></div>
                         <div style="display: grid">
-                            ${m.sort(s.Util.sortByString(t=>t.name)).map(t=>(0,i.qy)`
-                                    <or-mwc-input .type="${a.NZ.CHECKBOX}" .label="${s.Util.getAttributeLabel(void 0,t,void 0,!0)}"
-                                                  .value="${this.selectedAttributes.find(e=>e===t)}"
-                                                  @or-mwc-input-changed="${e=>e.detail.value?this.selectedAttributes.push(t):this.selectedAttributes.splice(this.selectedAttributes.findIndex(e=>e===t),1)}"></or-mwc-input>
+                            ${m.sort(s.Util.sortByString(t=>t.name)).map(e=>(0,i.qy)`
+                                    <or-mwc-input .type="${a.NZ.CHECKBOX}" .label="${s.Util.getAttributeLabel(void 0,e,t.name,!0)}"
+                                                  .value="${this.selectedAttributes.find(t=>t===e)}"
+                                                  @or-mwc-input-changed="${t=>t.detail.value?this.selectedAttributes.push(e):this.selectedAttributes.splice(this.selectedAttributes.findIndex(t=>t===e),1)}"></or-mwc-input>
                             `)}
                         </div>
                     </div>