@dangl/web-components-ava 1.1.2-beta0066 → 1.1.2-beta0078

package/README.md

@@ -1,204 +1,50 @@
-# Dangl.AngularAva
+# Web Components AVA
 
-[![Node version](https://img.shields.io/npm/v/@dangl/angular-ava)](https://www.npmjs.com/package/@dangl/angular-ava)
+Shared web components to be used in WEB apps.
 
-`@dangl/angular-ava` is an UI library for Angular applications. It's used to render trees of AVA Projects. _AVA_ in German stands for _Ausschreibung, Vergabe & Abrechnung_ (_Tendering, awarding & billing_), they represent services and elements of construction projects.
+## Installation
 
-[AVACloud by Dangl**IT** GmbH](https://www.dangl-it.com/products/avacloud-gaeb-saas/) is one way of creating such data structures.
+Install as a dev dependency via [npm](https://www.npmjs.com/):
 
-## Usage
-
-### Import the Component 
-
-```typescript
-import { AvaTreeComponent } from '@dangl/angular-ava';
-
-@Component({
-  imports: [AvaTreeComponent],
-})
-export class AppComponent {}
+```bash
+npm install --save-dev @dangl/web-components-ava
 ```
 
-### Use the Component
+## Usage
 
-```html
-<ava-tree [project]="projectData" (selectClick)="selected($event, 0)">
-</ava-tree>
+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>
 ```
 
-`projectData` must be of type `ProjectDto`.
-
-### Input Parameters
-
-```typescript
-/**
- * This is the main data element for the tree structure. You should supply a ProjectDto with
- * exactly one service specification in it.
- */
-@Input() project: ProjectDto | null = null;
-
-/**
- * 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.
- */
-@Input() expansionState: { [id: string]: boolean } = {};
-
-/**
- * Optionally, you can supply the id of the node that should be selected in the tree initially.
- */
-@Input() selectedNodeId: string | null = null;
-
-/**
- * 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%.
- *
- */
-@Input() indent = '20px';
-
-/**
- * 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.
- */
-@Input() selectedColor: 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.
- */
-@Input() modeView: ModeViewType = ModeViewType.Tree;
-
-/** 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.
- */
-@Input() allowDblClick = true;
-
-/**
- * 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.
- */
-@Input() isSelectionMode = false;
+### For using Tree component
 
-/**
- * You can optionally supply a list of elements that should be selected initially. This is only used if
- * isSelectionMode is true.
- */
-@Input() initiallySelectedElements: SelectedElement[] | null = null;
+```javascript
+   <ava-tree id="ava-tree"></ava-tree>
+  const tree = document.getElementById('ava-tree');
+  const serviceSpecifications = {...}
+  tree.project = serviceSpecifications;
 
-/**
- * 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.
- * {
- *   textSearch: string,
- *   textNothing: string,
- *   textNothingFiltered: string,
- *   textAll: string,
- *   tooltipAllOpen: string,
- *   tooltipAllClose: string,
- *   tooltipAllAdd:string,
- *   tooltipAllRemove: string,
- * }
- */
-@Input() set textWords(words: ITextWords | null)
-
-/**
- * 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.
- */
-@Input() mouseAwareKeyboardControl = true;
-
-/**
- * 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 */
-@Input() set customKeyboardOperationConfig(config: IKeyboardOperationConfig) {
-  this.keyboardOperationService.mergeConfigOperation(config);
-}
-
-/**
- * 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.
- */
-@Input() listFilterFunc = DEFAULT_FILTERS;
-
-/**
- * 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'
- * }
- */
-@Input() 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 it need
- *     func: (element: any, result?: any) => boolean,  // this filter function calculate condition to change 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
- *     }
- *   }
- */
-@Input() functionView: IFunctionViewLine[] | null = null;
-```
-
-### Output Parameters
-
-```typescript
-/**
-* This is emitted when an element is selected by clicking on it. The selected element is emitted as the event value.
-*/
-@Output() selectClick = new EventEmitter<IElementDto | null>();
-/**
- * This is emitted when an element is selected by double clicking on it. The selected element is emitted as the event value.
- */
-@Output() selectDblClick = new EventEmitter<IElementDto>();
-/**
- * This is emitted when an element is selected by right clicking on it. The selected element is emitted as the event value.
- */
-@Output() contextMenuEvent = new EventEmitter<ContextMenuDataType>();
-/**
- * This is emitted when the selected elements in the tree are changed. The selected elements are emitted as the event value.
- * Selected elements are elements whose checkboxes are checked, and are different than elements that are in an active selection state.
- * Typcial use cases for this include e.g. selecting multiple elements within a service specification without
- * actually focussing them, e.g. for further processing.
- */
-@Output() selectedElementsChanged = new EventEmitter<SelectedElement[]>();
 ```
 
-## Invoice Module
-
-There is also an `InvoiceDisplayComponent` available that can be used to show invoice objects. It can be configured to use `DEFAULT_TEXT_WORD_INVOICE` or `germanTextsInvoice` or any custom implementation of `ITextWordInvoice` in it's `textWords` input property.
-
-## Usage
+### For using Invoice component
 
-### Import the Component 
-
-```typescript
-import { InvoiceDisplayComponent } from '@dangl/angular-ava';
-
-@Component({
-  imports: [InvoiceDisplayComponent],
-})
-export class AppComponent {}
+```javascript
+   <ava-invoice-display></ava-invoice-display>
+  const INVOICE = {...}
+  window['IvoiceGlobalVariable'] = INVOICE;
 ```
 
-### Use the Component
 
-```html
-<ava-invoice-display [invoice]="INVOICE"></ava-invoice-display>
-```
+### Demo
 
-`INVOICE` must be of type `Invoice`.
+You can run `node example` in the `projects/web-components/example` folder to run a
+demo locally. Make sure that the library was built first with `npm run prepare-web-components-to-publish`.