@dangl/angular-ava
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

Dangl.AngularAva

Node version

@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 DanglIT GmbH is one way of creating such data structures.

Usage

Import the Module

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

<ava-tree [project]="projectData" (selectClick)="selected($event, 0)">
</ava-tree>

projectData must be of type ProjectDto.

Input Parameters

/**
 * 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.
 * {
 *   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

/**
* 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[]>();

Package Sidebar

Install

npm i @dangl/angular-ava

Weekly Downloads

4

Version

1.0.0

License

none

Unpacked Size

868 kB

Total Files

66

Last publish

Collaborators

  • georgdangl