Web Components AVA

Web components to be used with the Dangl IT 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.

Installation

Install as a dev dependency via npm:

npm install --save-dev @dangl/web-components-ava

Usage

To use these components, import the JavaScript components into your html file:

<!-- 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>

AVA Tree Component

<ava-tree id="ava-tree"></ava-tree>
<script>
  const tree = document.getElementById('ava-tree');
  const project = {...}
  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>

For the config, you can use this model:

export interface IConfigurationTree {
  /**
   * 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;

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

You can also supply the following input parameters

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

<ava-invoice-display id="your-unique-id"></ava-invoice-display>
<script>
  const invoiceData = {...}
  const invoice = document.getElementById('your-unique-id');
  // You can also directly set a JSONified invoice object as your attribute value in the html markup
  invoice.setAttribute('invoice', JSON.stringify(invoiceData));
  invoice.setAttribute(
    'config',
    JSON.stringify({
      language: 'de',
    }),
  );
</script>

For the config, you can use this model:

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?: LanguageType; // type LanguageType = 'en' | 'de';

  //** This controls how many digits are displayed for quantities. It defaults to '1.3-3', meaning it will always show three decimal palces. */
  quantityDecimalPlaces?: string;

  //** If specified, the invoice color settings will be used for the invoice viewer.*/
  colorSettings?: IColorSettings | null;

  //** If specified, the alignment options will be used for the invoice viewer.*/
  alignmentOptions?: IAlignmentOptions;
}

Demo

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.