@dangl/web-components-ava 1.1.2-beta0049

package/README.md

@@ -0,0 +1,186 @@
+# Dangl.AngularAva
+
+[![Node version](https://img.shields.io/npm/v/@dangl/angular-ava)](https://www.npmjs.com/package/@dangl/angular-ava)
+
+`@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.
+
+[AVACloud by Dangl**IT** GmbH](https://www.dangl-it.com/products/avacloud-gaeb-saas/) is one way of creating such data structures.
+
+## Usage
+
+### Import the Module
+
+```typescript
+import { AngularAvaModule } from '../../projects/angular-ava/src/lib/angular-ava.module';
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [AngularAvaModule],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule {}
+```
+
+### Use the Component
+
+```html
+<ava-tree [project]="projectData" (selectClick)="selected($event, 0)">
+</ava-tree>
+```
+
+`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;
+
+/**
+ * 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;
+
+/**
+ * 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.