@dangl/web-components-ava 1.1.2-beta0165 → 1.2.0-beta0170

package/README.md

@@ -1,6 +1,8 @@
 # Web Components AVA
 
-Shared web components to be used in WEB apps.
+Web components to be used with the [Dangl IT](https://www.dangl-it.com) products for AVA and Invoicing - GAEB, ÖNorm, XRechnung and more!
+
+This package contains standalone components that can be used in any web environment. For Angular specific components, visit [@dangl/angular-ava](https://www.npmjs.com/package/@dangl/angular-ava).
 
 ## Installation
 
@@ -12,37 +14,155 @@ npm install --save-dev @dangl/web-components-ava
 
 ## Usage
 
-To use these components, import components to your html file via script.
-
-```javascript
-  <script
-      type="module"
-      src="dist/web-component-ava/tree.js"
-    ></script>
-    <script
-      type="module"
-      src="dist/web-component-ava/invoice.js"
-    ></script>
+To use these components, import the JavaScript components into your html file:
+
+```html
+<!-- The AVA Tree component -->
+<script type="module" src="dist/web-component-ava/tree.js"></script>
+<!-- The Invoice component -->
+<script type="module" src="dist/web-component-ava/invoice.js"></script>
 ```
 
-### For using Tree component
+### AVA Tree Component
 
-```javascript
-   <ava-tree id="ava-tree"></ava-tree>
+```html
+<ava-tree id="ava-tree"></ava-tree>
+<script>
   const tree = document.getElementById('ava-tree');
-  const serviceSpecifications = {...}
-  tree.project = serviceSpecifications;
+  const project = {...}
+  tree.project = project;
+  // The config is optional
+  tree.config = {...};
+</script>
+```
+
+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%.
+   */
+  indent?: string;
+
+  /**
+   * Optional, you can supply a color to be used as the background color for the selected line. Defaults to the primary
+   * color from the Material theme, which is #00acc1.
+   */
+  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.
+   */
+  allowDblClick?: boolean;
+
+  /**
+   * If this is set to true, then the tree will be in selection mode, and the user can select elements by clicking on them. The selected elements will be emitted in the selectedElementsChanged event.
+   */
+  isSelectionMode?: boolean;
 
+  /**
+   * You can optionally supply a list of elements that should be selected initially. This is only used if isSelectionMode is true.
+   */
+  initiallySelectedElements?: SelectedElement[];
+
+  /**
+   * You can supply a map of strings to be used for the text in the tree. This allows you to translate the text in the tree to other languages. There are also 'DEFAULT_TEXT_WORDS' and 'germanTextsAva' supplied with the package. You may optionally just submit the string values 'en' or 'de' to use the default text words for English or German.
+   */
+  textWords?: ITextWords | "en" | "de";
+
+  /**
+   * Defaults to true. If this is enabled, then navigating in the tree with the keyboard only works if the mouse is over the tree area. This limitation is useful if you have multiple trees or other components that might be using keyboard input.
+   */
+  mouseAwareKeyboardControl?: boolean;
+
+  /**
+   * With this parameter, you can configure which keys will be listenend to to switch the tree elements, and also to disable the functionality of the keys
+   */
+  customKeyboardOperationConfig?: IKeyboardOperationConfig | null;
+
+  /**
+   * You can supply custom filters that are processed when the filter input is changed. Default filters are used that check for short text and item number matches, and you can either add custom filters or replace the default ones.
+   */
+  listFilterFunc?: FilterFunction[];
+
+  /**
+   * Optional. For table views, this allows you to add custom columns to the table.
+   * addTableColumns: Array of objects
+   * {
+   *   name: string,                                     // name of column
+   *   title: string,                                    // showed title of column
+   *   align?: string,                                   // optional alight: left(default) / center / right
+   *   numberFormat?: string                             // optional format of number value, example: '1.2-2'
+   * }
+   */
+  addTableColumns?: TableColumnType[];
+
+  /**
+   * This allows you to supply a list of functions that can be used to change the appearance of elements.
+   * They objects contain a predicate function that is evaluated, along with an option to configure the appearance of the element.
+   *   functionView: Array of objects
+   *   {
+   *     name: string,                                   // name of view part: you can add/remove it when needed
+   *     func: (element: any, result?: any) => boolean,  // this filter function calculates conditions to change the view
+   *     view: {
+   *       iconName?: string,                            // changed name of icon
+   *       iconColor?: string,                           // changed color of icon
+   *       textBold?: string,                            // changed weight of text
+   *       textColor?: string                            // changed color of text
+   *     }
+   *   }
+   */
+  functionView?: IFunctionViewLine[];
+}
 ```
 
-### For using Invoice component
+### Invoice Component
 
-```javascript
-   <ava-invoice-display></ava-invoice-display>
-  const INVOICE = {...}
-  window['IvoiceGlobalVariable'] = INVOICE;
+```html
+<ava-invoice-display id="invoiceTree"></ava-invoice-display>
+<script>
+  const INVOICE = {...};
+  window['InvoiceGlobalVariable'] = INVOICE;
+  // The config is optional
+  const invoiceView = document.getElementById('invoiceTree');
+  invoiceView.config = {...};
+</script>
 ```
 
+For the config, you can use this model:
+
+```typescript
+export interface IConfigurationInvoice {
+  //** If specified, the invoice viewer will use the given textWords for the text in the UI. */
+  textWords?: ITextWordInvoice | null;
+
+  //** If specified, the invoice viewer will use non-interactive display features, . */
+  pdfViewEnabled?: boolean;
+
+  //** If specified, the invoice viewer will use the given language for the text in the UI. */
+  language?: "en" | "de";
+}
+```
 
 ### Demo
 

package/package.json

@@ -1,4 +1,4 @@
 {
   "name": "@dangl/web-components-ava",
-  "version": "1.1.2-beta0165"
+  "version": "1.2.0-beta0170"
 }