@dangl/web-components-ava 1.3.0-beta0046 → 1.3.0-beta0064

package/README.md

@@ -30,9 +30,11 @@ To use these components, import the JavaScript components into your html file:
 <script>
   const tree = document.getElementById('ava-tree');
   const project = {...}
-  tree.project = project;
-  // The config is optional
-  tree.config = {...};
+  tree.setAttribute('project', JSON.stringify(project));
+  tree.setAttribute('config', JSON.stringify({ selectedColor: 'violet' }));
+  tree.setAttribute('expansionstate', JSON.stringify({ 'ba636130-ae48-4e2c-8f30-c6a7f026ff5c': true }));
+  tree.setAttribute('selectednodeid', '29db577d-d4a9-4c28-9877-ff544767e5f4');
+  tree.setAttribute('modeview', 'Tree');
 </script>
 ```
 
@@ -40,18 +42,6 @@ For the config, you can use this model:
 
 ```typescript
 export interface IConfigurationTree {
-  /**
-   * Optionally, you can supply a map of expansion states for the tree. The keys should be the
-   * id properties of the elements in the tree, and the values should be true if the element is
-   * expanded, and false if it is collapsed.
-   */
-  expansionState?: { [id: string]: boolean };
-
-  /**
-   * Optionally, you can supply the id of the node that should be selected in the tree initially.
-   * */
-  selectedNodeId?: string;
-
   /**
    * Optional, defaults to 20px. If this is set, then the tree will be indented by the given value each level.
    * This can be any valid CSS value for the padding-left property, such as 20px, 1em, or 5%.
@@ -64,12 +54,6 @@ export interface IConfigurationTree {
    */
   selectedColor?: string;
 
-  /**
-   * You can specify which view type to use for the tree. The default is ModeViewType.Tree, but you can also use
-   * ModeViewType.List or ModeViewType.Table.
-   */
-  modeView?: ModeViewType;
-
   /**
    * Optional, defaults to true. If this is disabled, then the double click event for elements is not raised, and clicking on an elemt sends an immediate result since the component has not to wait and check if a double click event is fired.
    */
@@ -136,6 +120,30 @@ export interface IConfigurationTree {
 }
 ```
 
+You can also supply the following input parameters
+
+```typescript
+  /**
+   * Optionally, you can supply a map of expansion states for the tree. The keys should be the
+   * id properties of the elements in the tree, and the values should be true if the element is
+   * expanded, and false if it is collapsed.
+   */
+  readonly expansionstate = input<IExpansionState | null, IExpansionState>(null, {
+    transform: this.transformFn<IExpansionState>
+  });
+
+  /**
+   * Optionally, you can supply the id of the node that should be selected in the tree initially.
+   */
+  readonly selectednodeid = input<string | null>(null);
+
+   /**
+   * You can specify which view type to use for the tree. The default is ModeViewType.Tree, but you can also use
+   * ModeViewType.List or ModeViewType.Table.
+   */
+  readonly modeview = input<ModeViewType>(ModeViewType.Tree);
+```
+
 ### Invoice Component
 
 ```html