@lion/ui 0.2.2 → 0.3.0

package/docs/components/input-file/overview.md

@@ -0,0 +1,32 @@
+# Input File >> Overview ||10
+
+A web component based on the file input field.
+
+```js script
+import { html } from '@mdjs/mdjs-preview';
+import '@lion/ui/define/lion-input-file.js';
+```
+
+```js preview-story
+export const main = () => {
+  return html` <lion-input-file label="Upload" name="upload"></lion-input-file> `;
+};
+```
+
+## Features
+
+- Based on our [input](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/components/input/overview.md)
+- Default labels and validation messages in different languages
+- Options for multi file upload and drop-zone.
+
+## Installation
+
+```bash
+npm i --save @lion/ui
+```
+
+```js
+import { LionInputFile } from '@lion/ui/input-file.js';
+// or
+import '@lion/ui/define/lion-input-file.js';
+```

package/docs/components/input-file/use-cases.md

@@ -0,0 +1,424 @@
+# Input File >> Use Cases ||20
+
+```js script
+import { Required, Validator } from '@lion/ui/form-core.js';
+import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
+import { html } from '@mdjs/mdjs-preview';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { LitElement } from 'lit';
+import '@lion/ui/define/lion-input-file.js';
+loadDefaultFeedbackMessages();
+```
+
+## Features
+
+API calls to upload the selected files can be done in below two ways which is driven by `uploadOnSelect` property
+
+- On `form` submit
+- On file selection
+
+## Parameters
+
+```html
+<lion-input-file
+  multiple
+  label="Attachments"
+  help-text="Signature scan file"
+  max-file-size="1024000"
+  accept="application/PDF"
+  upload-on-select
+>
+</lion-input-file>
+```
+
+### modelValue
+
+Array of [File](https://developer.mozilla.org/en-US/docs/Web/API/File); Contains all the uploaded files
+
+### multiple
+
+Boolean; setting to `true` allows selecting multiple files.
+
+### EnableDragAndDrop
+
+Boolean; setting to `true` allows file upload through drag and drop.
+
+### uploadOnSelect
+
+Boolean;
+
+- Set to `true` when API calls for file upload needs to be done on file selection
+- Set to `false` when API calls for file upload needs to be done on form submit.
+- Default is `false`.
+
+### uploadResponse
+
+An array of the file-specific data to display the feedback of fileUpload
+
+Data structure for uploadResponse array:
+
+```js
+[
+  {
+    name: 'file1.txt', // name of uploaded file
+    status: '', // SUCCESS | FAIL | LOADING
+    errorMessage: '', // custom error message to be displayed
+    id: '', // unique id for future execution reference
+  },
+  {
+    name: 'file2.txt', // name of uploaded file
+    status: '', // SUCCESS | FAIL | LOADING
+    errorMessage: '', // custom error message to be displayed
+    id: '', // unique id for future execution reference
+  },
+];
+```
+
+## Events
+
+### model-value-changed
+
+Fired when modelValue property changes.
+
+### file-list-changed
+
+Fired when files are uploaded. Event `detail` gives list of newly added files in `newFiles` key
+
+```js
+ev.detail.newFiles;
+```
+
+### file-removed
+
+Fired when a file is removed. Event `detail` gives
+
+- File objected for removed file in `ev.detail.removedFile`
+- Status of this file can be used as `ev.detail.status`
+- uploadResponse for this file as set using `uploadResponse` property. Can use used as `ev.detail.uploadResponse`
+
+## Usage
+
+### Basic File upload
+
+When file has to be uploaded as soon as it is selected by the user. Use `file-list-changed` event to get the newly added file, upload it to your server and set the response back to component via `uploadResponse` property.
+
+```js preview-story
+export const basicFileUpload = () => {
+  return html`
+    <lion-input-file
+      label="Label"
+      max-file-size="1024000"
+      accept=".jpg,.svg,.xml,image/svg+xml"
+      @file-list-changed="${ev => {
+        console.log('fileList', ev.detail.newFiles);
+      }}"
+    >
+    </lion-input-file>
+  `;
+};
+```
+
+### Validation
+
+#### Accept
+
+The `accept` attribute value is a string that defines the file types the file input should accept. This string is a comma-separated list of unique file type specifiers.
+
+For more info please consult the [MDN documentation for "accept"](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept).
+
+```js preview-story
+export const acceptValidator = () => {
+  return html`
+    <lion-input-file
+      accept=".jpg,.svg,.xml,image/svg+xml"
+      label="Upload"
+      enable-drop-zone
+      @file-list-changed="${ev => {
+        console.log(ev.detail.newFiles);
+      }}"
+    >
+    </lion-input-file>
+  `;
+};
+```
+
+#### Maximum File Size
+
+The `max-file-size` attribute sets the maximum file size in bytes.
+
+```js preview-story
+export const sizeValidator = () => {
+  return html`
+    <lion-input-file
+      max-file-size="2048"
+      label="Upload"
+      @file-list-changed="${ev => {
+        console.log(ev.detail.newFiles);
+      }}"
+    >
+    </lion-input-file>
+  `;
+};
+```
+
+### Multiple file upload
+
+When file has to be uploaded as soon as it is selected by the user. Use `file-list-changed` event to get the newly added files, upload it to your server and set the response back to component via `uploadResponse` property for each file.
+
+```js preview-story
+export const multipleFileUpload = () => {
+  return html`
+    <lion-input-file
+      label="Upload"
+      name="upload"
+      multiple
+      max-file-size="1024000"
+      @file-removed="${ev => {
+        console.log('removed file details', ev.detail);
+      }}"
+      @file-list-changed="${ev => {
+        console.log('file-list-changed', ev.detail.newFiles);
+      }}"
+      @model-value-changed="${ev => {
+        console.log('model-value-changed', ev);
+      }}"
+    >
+    </lion-input-file>
+  `;
+};
+```
+
+### Pre-filled state
+
+The pre-filled state of the file upload component shows the files that were being assigned by the user initially.
+
+On every reload of page, the file upload component reverts to the initial state and using the `uploadResponse` property, shows the names(not links) of previously assigned files.
+
+**Note:**
+
+- the list of prefilled files will not be available in `modelValue` or `serializedValue`. This is because value cannot be assigned to native `input` with type `file`
+- Only `Required` validation (if set on `lion-file-input`) is triggered for files which are prefilled.
+
+```js preview-story
+export const prefilledState = () => {
+  return html`
+    <lion-input-file
+      label="Upload"
+      name="myFiles"
+      multiple
+      .validators="${[new Required()]}"
+      .uploadResponse="${[
+        {
+          name: 'file1.txt',
+          status: 'SUCCESS',
+          errorMessage: '',
+          id: '132',
+        },
+        {
+          name: 'file2.txt',
+          status: 'SUCCESS',
+          errorMessage: '',
+          id: 'abcd',
+        },
+      ]}"
+    >
+    </lion-input-file>
+  `;
+};
+```
+
+### With form submit
+
+**Note:** When `lion-input-file` is prefilled, the list of prefilled files will not be available in `modelValue` or `serializedValue`. This is because value cannot be assigned to native `input` with type `file`.
+
+```js preview-story
+const myFormReset = ev => {
+  const input = ev.target.querySelector('lion-input-file');
+  input.reset();
+  console.log(input.modelValue);
+};
+
+const myFormSubmit = ev => {
+  ev.preventDefault();
+  const input = ev.target.querySelector('lion-input-file');
+  console.log(input.hasFeedbackFor);
+  console.log(input.serializedValue);
+  return false;
+};
+
+export const withIngForm = () => {
+  class FilenameLengthValidator extends Validator {
+    static get validatorName() {
+      return 'FilenameLengthValidator';
+    }
+
+    static getMessage(data) {
+      return `Filename length should not exceed ${data.params.maxFilenameLength} characters`;
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    checkFilenameLength(val, allowedFileNameLength) {
+      return val <= allowedFileNameLength;
+    }
+
+    execute(modelVal, { maxFilenameLength }) {
+      const invalidFileIndex = modelVal.findIndex(
+        file => !this.checkFilenameLength(file.name.length, maxFilenameLength),
+      );
+      return invalidFileIndex > -1;
+    }
+  }
+
+  return html`
+    <form @submit="${myFormSubmit}" @reset="${myFormReset}">
+      <lion-input-file
+        label="Upload"
+        name="upload"
+        multiple
+        .validators="${[new Required(), new FilenameLengthValidator({ maxFilenameLength: 20 })]}"
+        .uploadResponse="${[
+          {
+            name: 'file1.zip',
+            status: 'SUCCESS',
+            id: '132',
+          },
+          {
+            name: 'file2.zip',
+            status: 'SUCCESS',
+            id: 'abcd',
+          },
+        ]}"
+      >
+      </lion-input-file>
+      <button type="reset">Reset</button>
+      <button>Upload</button>
+    </form>
+  `;
+};
+```
+
+### Without form submit
+
+Set `uploadOnSelect` property to `true`. This option can be used when Server API calls are needed as soon as it is selected by the user.
+
+For this scenario, the list of files is displayed based on the `uploadResponse` property which needs to maintained by the consumers of this component
+
+Below is the flow:
+
+#### When user uploads new file(s)
+
+1. `file-list-changed` event is fired from component with the newly added files
+2. Initiate the request to your backend API and set the status of the relevant files to `LOADING` in `uploadResponse` property
+3. Once the API request in completed, set the status of relevant files to `SUCCESS` or `FAIL` in `uploadResponse` property
+
+#### When user deletes a file
+
+1. `file-removed` event is fired from component with the deleted file
+2. Initiate the delete request to your backend API and set the status of the relevant files as `LOADING` in `uploadResponse` property
+3. Once the API request is completed, delete the file object from `uploadResponse` property
+
+```js preview-story
+export const uploadWithoutFormSubmit = () => {
+  return html`
+    <lion-input-file
+      label="Upload"
+      name="upload"
+      multiple
+      upload-on-select
+      @file-removed="${ev => {
+        ev.target.uploadResponse[
+          ev.target.uploadResponse.findIndex(file => file.name === ev.detail.uploadResponse.name)
+        ].status = 'LOADING';
+        ev.target.uploadResponse = [...ev.target.uploadResponse]; // update uploadResponse after API calls are completed
+        setTimeout(() => {
+          ev.target.uploadResponse[
+            ev.target.uploadResponse.findIndex(file => file.name === ev.detail.uploadResponse.name)
+          ] = {};
+          ev.target.uploadResponse = [...ev.target.uploadResponse]; // update uploadResponse after API calls are completed
+        }, 1000);
+      }}"
+      @file-list-changed="${ev => {
+        if (!ev.detail.newFiles[0]) {
+          return;
+        }
+        ev.target.uploadResponse[
+          ev.target.uploadResponse.findIndex(file => file.name === ev.detail.newFiles[0].name)
+        ].status = 'LOADING';
+        ev.target.uploadResponse = [...ev.target.uploadResponse]; // update uploadResponse after API calls are completed
+
+        if (ev.detail.newFiles[1]) {
+          ev.target.uploadResponse[
+            ev.target.uploadResponse.findIndex(file => file.name === ev.detail.newFiles[1].name)
+          ].status = 'LOADING';
+          ev.target.uploadResponse = [...ev.target.uploadResponse]; // update uploadResponse after API calls are completed
+        }
+        setTimeout(() => {
+          ev.target.uploadResponse[
+            ev.target.uploadResponse.findIndex(file => file.name === ev.detail.newFiles[0].name)
+          ].status = 'SUCCESS';
+          ev.target.uploadResponse = [...ev.target.uploadResponse]; // update uploadResponse after API calls are completed
+        }, 3000);
+
+        setTimeout(() => {
+          if (ev.detail.newFiles[1]) {
+            const file1Status = {
+              name: ev.detail.newFiles[1].name,
+              status: 'FAIL',
+              errorMessage: 'error from server',
+            };
+            ev.target.uploadResponse[
+              ev.target.uploadResponse.findIndex(file => file.name === ev.detail.newFiles[1].name)
+            ] = {
+              name: ev.detail.newFiles[1].name,
+              status: 'FAIL',
+              errorMessage: 'error from server',
+            };
+            ev.target.uploadResponse = [...ev.target.uploadResponse];
+          }
+        }, 3000);
+      }}"
+    >
+    </lion-input-file>
+  `;
+};
+```
+
+### Drag and Drop
+
+Set the `enableDropZone` parameter to `true` to use the drag and drop functionality in the component.
+
+Drag and drop the files to be uploaded to the server.
+
+```js preview-story
+export const dragAndDrop = () => {
+  return html`
+    <lion-input-file
+      label="Upload"
+      name="myFiles"
+      accept=".png"
+      max-file-size="1024000"
+      enable-drop-zone
+      multiple
+      .validators="${[new Required()]}"
+    >
+    </lion-input-file>
+  `;
+};
+```
+
+### Posting file to API using axios
+
+You can retrieve the uploaded files in `file-list-changed` event or from `modelValue` property of this component
+
+To submit files you can refer to the following code snippet:
+
+```js
+const formData = new FormData();
+const inputFile = document.querySelector('lion-input-file').modelValue;
+formData.append('file', inputFile.querySelector('input').files);
+axios.post('upload_file', formData, {
+  headers: {
+    'Content-Type': 'multipart/form-data',
+  },
+});
+```

package/docs/components/input-iban/overview.md

@@ -16,9 +16,9 @@ export const main = () => {
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/components/input/overview.md)
+- Based on our [input](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/components/input/overview.md)
 - Default label in different languages
-- Makes use of IBAN specific [validate](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
+- Makes use of IBAN specific [validate](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
   - IsIBAN (default)
   - IsCountryIBAN
 - Parses IBANs automatically

package/docs/components/input-range/overview.md

@@ -15,11 +15,11 @@ export const main = () => html`
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/components/input/overview.md).
+- Based on our [input](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/components/input/overview.md).
 - Shows `modelValue` and `unit` above the range input.
 - Shows `min` and `max` value after the range input.
 - Can hide the `min` and `max` value via `no-min-max-labels`.
-- Makes use of [formatNumber](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/fundamentals/systems/localize/numbers.md) for formatting and parsing.
+- Makes use of [formatNumber](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/fundamentals/systems/localize/numbers.md) for formatting and parsing.
 
 ## Installation
 

package/docs/components/input-stepper/overview.md

@@ -18,7 +18,7 @@ export const main = () => html`
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/components/input/overview.md).
+- Based on our [input](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/components/input/overview.md).
 - Set `min` and `max` value to define the range.
 - Set `step` value in integer or decimal to increase and decrease the value.
 - Use `ArrowUp` or `ArrowDown` to update the value.

package/docs/components/input-tel/overview.md

@@ -39,7 +39,7 @@ export const main = () => {
 
 ## Features
 
-- Extends our [input](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/components/input/overview.md)
+- Extends our [input](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/components/input/overview.md)
 - Shows a mobile telephone keypad on mobile (by having a native `<input inputmode="tel">` inside)
 - Can be configured with a list of allowed region codes
 - Will be preconfigured with region derived from locale

package/docs/components/input-tel/use-cases.md

@@ -22,7 +22,7 @@ Say we have the following telephone number from Madrid, Spain: `+34919930432`.
 It contains a [country code](https://en.wikipedia.org/wiki/Country_code) (34), an [area code](https://en.wikipedia.org/wiki/Telephone_numbering_plan#Area_code) (91) and a [dial code](https://en.wikipedia.org/wiki/Mobile_dial_code) (+34 91).
 Input Tel interprets phone numbers based on their [region code](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2): a two character long region representation('ES' in the telephone number above).
 
-The table below lists all possible regions worldwide. When [allowed regions](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/components/input-tel/#allowed-regions) are not configured,
+The table below lists all possible regions worldwide. When [allowed regions](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/components/input-tel/#allowed-regions) are not configured,
 all of them will be supported as values of Input Tel.
 
 ```js story
@@ -37,11 +37,11 @@ export const regionCodesTable = () => {
 The active region (accessible via readonly accessor `.activeRegion`) determines how validation and formatting
 should be applied. It is dependent on the following factors:
 
-- [allowed regions](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/components/input-tel/#allowed-regions): a list that determines what is allowed to become .activeRegion. If
-  [.allowedRegions has only one entry](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/components/input-tel/#restrict-to-one-region), .activeRegion will always be this value.
+- [allowed regions](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/components/input-tel/#allowed-regions): a list that determines what is allowed to become .activeRegion. If
+  [.allowedRegions has only one entry](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/components/input-tel/#restrict-to-one-region), .activeRegion will always be this value.
 - the modelValue or viewValue: once it contains sufficient info to derive its region code (and
-  the derived code is inside [allowed regions](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/components/input-tel/#allowed-regions) if configured)
-- active locale (and the derived locale is inside [allowed regions](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/components/input-tel/#allowed-regions) if configured)
+  the derived code is inside [allowed regions](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/components/input-tel/#allowed-regions) if configured)
+- active locale (and the derived locale is inside [allowed regions](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/components/input-tel/#allowed-regions) if configured)
 
 What follows from the list above is that .activeRegion can change dynamically, after a value
 change in the text box by the user (or when locales or allowed regions would be changed by the
@@ -130,7 +130,7 @@ export const heuristic = () => {
 Once it is configured, validation and formatting will be restricted to those
 values that are present in this list.
 
-> Note that for [InputTelDropdown](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/components/input-tel-dropdown/index.md), only allowed regions will
+> Note that for [InputTelDropdown](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/components/input-tel-dropdown/index.md), only allowed regions will
 > be shown in the dropdown list.
 
 ```js preview-story

package/docs/components/input-tel-dropdown/{examples.md → extensions.md}

@@ -1,4 +1,4 @@
-# Input Tel Dropdown >> Examples ||30
+# Input Tel Dropdown >> Extensions ||30
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';

package/docs/components/input-tel-dropdown/overview.md

@@ -19,7 +19,7 @@ export const main = () => {
 
 ## Features
 
-- Extends our [input-tel](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/components/input-tel/overview.md)
+- Extends our [input-tel](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/components/input-tel/overview.md)
 - Shows dropdown list with all possible regions
 - Shows only allowed regions in dropdown list when .allowedRegions is configured
 - Highlights regions on top of dropdown list when .preferredRegions is configured

package/docs/components/radio-group/overview.md

@@ -20,12 +20,12 @@ export const main = () => html`
 `;
 ```
 
-- Make sure that to use a name attribute as it is necessary for our [form](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/components/form/overview.md)'s serialization result.
-- If you have many options for a user to pick from, consider using our [select](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/components/select/overview.md) instead.
+- Make sure that to use a name attribute as it is necessary for our [form](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/components/form/overview.md)'s serialization result.
+- If you have many options for a user to pick from, consider using our [select](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/components/select/overview.md) instead.
 
 ## Features
 
-Since it extends from our [fieldset](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/components/fieldset/overview.md), it has all the features a fieldset has.
+Since it extends from our [fieldset](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/components/fieldset/overview.md), it has all the features a fieldset has.
 
 - Get or set the checked value of the group:
   - modelValue (default) - `checkedValue()`

package/docs/components/select-rich/use-cases.md

@@ -302,7 +302,7 @@ LionSelectRich will give it acces to:
 - LionSelectRich itself, via `.hostElement`
 
 Code of an advanced custom invoker is shown below (this is the code for the
-invoker used in [IntlSelectRich](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/components/select-rich/examples.md)).
+invoker used in [IntlSelectRich](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/components/select-rich/examples.md)).
 The invoker is usually added in the invoker slot of the LionSelectRich subclass.
 However, it would also be possible for an application developer to provide the invoker
 by putting it in light dom:

package/docs/components/tabs/examples.md

@@ -9,7 +9,7 @@ import './src/lea-tab-panel.js';
 
 ## Lea Tabs
 
-Learn how to create the `lea tabs` in our ["introducing lion" blogpost](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/blog/ing-open-sources-lion.md).
+Learn how to create the `lea tabs` in our ["introducing lion" blogpost](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/blog/ing-open-sources-lion.md).
 
 ```js preview-story
 export const main = () => html`

package/docs/fundamentals/index.md

@@ -9,11 +9,11 @@ Here you find more details about what we offer.
 
 Let's see what each section describes.
 
-1. [Systems](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/fundamentals/systems/core/overview.md) <br>
+1. [Systems](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/fundamentals/systems/core/overview.md) <br>
    These are the fundamental systems that power all of our components.
-2. [Tools](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/fundamentals/tools/helpers/overview.md) <br>
+2. [Tools](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/fundamentals/tools/helpers/overview.md) <br>
    Frontend Tools useful for web development but are not visual and therefore are not components.
-3. [Node Tools](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/fundamentals/node-tools/babel-plugin-extend-docs/overview.md) <br>
+3. [Node Tools](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/fundamentals/node-tools/babel-plugin-extend-docs/overview.md) <br>
    Node tools to analyse the code and for extending the documentation.
-4. [Rationales](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/fundamentals/rationales/side-effects.md) <br>
+4. [Rationales](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/fundamentals/rationales/side-effects.md) <br>
    The reasoning behind some of our decisions.

package/docs/fundamentals/node-tools/providence-analytics/LocalConfiguration.md

@@ -45,7 +45,7 @@ export default {
 ### referenceCollections
 
 A list of file system paths. They can be defined relative from the current project root or they can be full paths.
-When a [MatchAnalyzer](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/fundamentals/node-tools/providence-analytics/analyzer.md) like `match-imports` or `match-subclasses` is used, the default reference(s) can be configured here. For instance: ['/path/to/@lion/ui/form.js']
+When a [MatchAnalyzer](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/fundamentals/node-tools/providence-analytics/analyzer.md) like `match-imports` or `match-subclasses` is used, the default reference(s) can be configured here. For instance: ['/path/to/@lion/ui/form.js']
 
 An example:
 

package/docs/fundamentals/node-tools/providence-analytics/QueryResult.md

@@ -108,4 +108,4 @@ QueryOutput structure could be simplified in the future.
 
 The output files stored in the file system always need to be machine independent:
 this means that all machine specific information, like a complete filepath, needs to be removed from a QueryOutput (paths relative from project root are still allowed).
-In that way, the caching mechanism (based on hash comparisons) as described in [Analyzer](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/fundamentals/node-tools/providence-analytics/analyzer.md) is guaranteed to work across different machines.
+In that way, the caching mechanism (based on hash comparisons) as described in [Analyzer](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/fundamentals/node-tools/providence-analytics/analyzer.md) is guaranteed to work across different machines.

package/docs/fundamentals/node-tools/providence-analytics/analyzer.md

@@ -7,7 +7,7 @@ A few examples are:
 - find-exports
 - match-imports
 
-An analyzer will give back a [QueryResult](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/fundamentals/node-tools/providence-analytics/QueryResult.md) that will be written to the file system by Providence.
+An analyzer will give back a [QueryResult](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/fundamentals/node-tools/providence-analytics/QueryResult.md) that will be written to the file system by Providence.
 All analyzers need to extend from the `Analyzer` base class, found in `src/program/analyzers/helpers`.
 
 ## Public api

package/docs/fundamentals/node-tools/providence-analytics/dashboard.md

@@ -1,6 +1,6 @@
 # Node Tools >> Providence Analytics >> Dashboard ||30
 
-An interactive overview of all aggregated [QueryResults](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/fundamentals/node-tools/providence-analytics/QueryResult.md) can be found in the dashboard.
+An interactive overview of all aggregated [QueryResults](https://github.com/ing-bank/lion/blob/951de3e9b282ce8b8797f9aae890f125f96ee5ce/docs/fundamentals/node-tools/providence-analytics/QueryResult.md) can be found in the dashboard.
 The dashboard is a small nodejs server (based on es-dev-server + middleware) and a frontend
 application.