@lion/ui 0.2.2 → 0.3.1

package/docs/components/combobox/use-cases.md

@@ -433,4 +433,4 @@ export const complexObjectChoiceValue = () => html` <complex-object-combobox
 ## Listbox compatibility
 
 All configurations that can be applied to `lion-listbox`, can be applied to `lion-combobox` as well.
-See the [listbox documentation](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/components/listbox/overview.md) for more information.
+See the [listbox documentation](https://github.com/ing-bank/lion/blob/a19e02c443e21d4e6c62bb08bbe6db64f7446010/docs/components/listbox/overview.md) for more information.

package/docs/components/dialog/overview.md

@@ -54,6 +54,6 @@ import '@lion/ui/define/lion-dialog.js';
 ## Changing the configuration
 
 You can use the `.config` property on the dialog to change the configuration.
-The documentation of the full config object can be found in the `overlays` folder or here in [Overlay System - Configuration](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/fundamentals/systems/overlays/configuration.md).
+The documentation of the full config object can be found in the `overlays` folder or here in [Overlay System - Configuration](https://github.com/ing-bank/lion/blob/a19e02c443e21d4e6c62bb08bbe6db64f7446010/docs/fundamentals/systems/overlays/configuration.md).
 
 The `config` property uses a setter to merge the passed configuration with the current, so you only **overwrite what you pass** when updating `config`.

package/docs/components/fieldset/overview.md

@@ -20,9 +20,9 @@ export const main = () => html`
 
 We have three specific fieldset implementations:
 
-- [form](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/components/form/overview.md)
-- [checkbox-group](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/components/checkbox-group/overview.md)
-- [radio-group](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/components/radio-group/overview.md)
+- [form](https://github.com/ing-bank/lion/blob/a19e02c443e21d4e6c62bb08bbe6db64f7446010/docs/components/form/overview.md)
+- [checkbox-group](https://github.com/ing-bank/lion/blob/a19e02c443e21d4e6c62bb08bbe6db64f7446010/docs/components/checkbox-group/overview.md)
+- [radio-group](https://github.com/ing-bank/lion/blob/a19e02c443e21d4e6c62bb08bbe6db64f7446010/docs/components/radio-group/overview.md)
 
 A native fieldset element should always have a legend-element for a11y purposes.
 However, our fieldset element is not native and should not have a legend-element.
@@ -31,8 +31,8 @@ Our fieldset instead has a label attribute or you can add a label with a div- or
 ## Features
 
 - Easy retrieval of form data based on field names
-- Advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/fundamentals/systems/form/interaction-states.md)
-- Can have [validate](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/fundamentals/systems/form/validate.md) on fieldset level and shows the validation feedback below the fieldset
+- Advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/a19e02c443e21d4e6c62bb08bbe6db64f7446010/docs/fundamentals/systems/form/interaction-states.md)
+- Can have [validate](https://github.com/ing-bank/lion/blob/a19e02c443e21d4e6c62bb08bbe6db64f7446010/docs/fundamentals/systems/form/validate.md) on fieldset level and shows the validation feedback below the fieldset
 - Can disable input fields on fieldset level
 - Accessible out of the box
 

package/docs/components/form/overview.md

@@ -8,7 +8,7 @@ import '@lion/ui/define/lion-form.js';
 ```
 
 A web component that enhances the functionality of the native `form` component.
-It is designed to interact with (instances of) the [form controls](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/fundamentals/systems/form/overview.md).
+It is designed to interact with (instances of) the [form controls](https://github.com/ing-bank/lion/blob/a19e02c443e21d4e6c62bb08bbe6db64f7446010/docs/fundamentals/systems/form/overview.md).
 
 ```js preview-story
 export const main = () => html`
@@ -26,11 +26,11 @@ export const main = () => html`
 - Data synchronization with models
 - Easy retrieval of form data based on field names
 - Advanced validation possibilities
-- Advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/fundamentals/systems/form/interaction-states.md)
+- Advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/a19e02c443e21d4e6c62bb08bbe6db64f7446010/docs/fundamentals/systems/form/interaction-states.md)
 - Registration mechanism for form controls
 - Accessible out of the box
 
-For more information about fields that are designed for our `form`, please read [form system](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/fundamentals/systems/form/overview.md).
+For more information about fields that are designed for our `form`, please read [form system](https://github.com/ing-bank/lion/blob/a19e02c443e21d4e6c62bb08bbe6db64f7446010/docs/fundamentals/systems/form/overview.md).
 
 ## Installation
 

package/docs/components/icon/use-cases.md

@@ -26,7 +26,7 @@ icons.addIconResolver('lion', (iconset, name) => {
 ## Icon sets
 
 Icons are displayed using icon sets. These are collections of icons, lazily loaded on demand for performance.
-See the [system documentation](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/fundamentals/systems/icon/overview.md) to learn more about icon sets.
+See the [system documentation](https://github.com/ing-bank/lion/blob/a19e02c443e21d4e6c62bb08bbe6db64f7446010/docs/fundamentals/systems/icon/overview.md) to learn more about icon sets.
 
 ```js preview-story
 export const iconSets = () => html`

package/docs/components/input/overview.md

@@ -23,7 +23,7 @@ export const main = () => html`<lion-input label="First Name"></lion-input>`;
   - **before**: does not have an active use case yet, but the option is in place.
   - **after**: can be used to show a currency or percentage.
 - Delegates attributes like `type`, `disabled`, `placeholder` and `readonly` to the native input.
-- Can make use of [validation](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/fundamentals/systems/form/validate.md).
+- Can make use of [validation](https://github.com/ing-bank/lion/blob/a19e02c443e21d4e6c62bb08bbe6db64f7446010/docs/fundamentals/systems/form/validate.md).
 
 ## Installation
 

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

@@ -24,13 +24,13 @@ export const main = () => {
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/components/input/overview.md)
-- Makes use of [formatNumber](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/fundamentals/systems/localize/numbers.md) for formatting and parsing.
+- Based on our [input](https://github.com/ing-bank/lion/blob/a19e02c443e21d4e6c62bb08bbe6db64f7446010/docs/components/input/overview.md)
+- Makes use of [formatNumber](https://github.com/ing-bank/lion/blob/a19e02c443e21d4e6c62bb08bbe6db64f7446010/docs/fundamentals/systems/localize/numbers.md) for formatting and parsing.
 - Option to show currency as a suffix
 - Option to override locale to change the formatting and parsing
 - Option to provide additional format options overrides
 - Default label in different languages
-- Can make use of number specific [validators](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
+- Can make use of number specific [validators](https://github.com/ing-bank/lion/blob/a19e02c443e21d4e6c62bb08bbe6db64f7446010/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
   - IsNumber (default)
   - MinNumber
   - MaxNumber

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

@@ -20,9 +20,9 @@ export const negativeNumber = () => html`
 `;
 ```
 
-## Set currency suffix
+## Set currency label
 
-You can optionally set a currency suffix with the `currency` attribute.
+You can optionally set a currency label with the `currency` attribute, which is visible in the after slot by default.
 
 ```js preview-story
 export const currencySuffix = () => html`
@@ -30,6 +30,8 @@ export const currencySuffix = () => html`
 `;
 ```
 
+> The slot of the currency label can be overwritten by changing the `_currencyDisplayNodeSlot` protected property, it can be prefix, suffix, before and after.
+
 ## Force locale
 
 Locale can be forced for a specific `lion-input-amount`. It will format the amount according to this locale.

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

@@ -16,11 +16,11 @@ export const main = () => html` <lion-input-date label="Date"></lion-input-date>
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/components/input/overview.md)
-- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/fundamentals/systems/localize/dates.md) for formatting and parsing.
+- Based on our [input](https://github.com/ing-bank/lion/blob/a19e02c443e21d4e6c62bb08bbe6db64f7446010/docs/components/input/overview.md)
+- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/a19e02c443e21d4e6c62bb08bbe6db64f7446010/docs/fundamentals/systems/localize/dates.md) for formatting and parsing.
 - Option to override locale to change the formatting and parsing
 - Default label in different languages
-- Can make use of date specific [validators](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
+- Can make use of date specific [validators](https://github.com/ing-bank/lion/blob/a19e02c443e21d4e6c62bb08bbe6db64f7446010/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
   - IsDate (default)
   - MinDate
   - MaxDate

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

@@ -2,7 +2,7 @@
 
 A web component based on the date text input field. Its purpose is to provide a way for users to fill in a date with a datepicker.
 For an input field with a big range, such as `birthday-input`, a datepicker is not the best choice due to the high variance between possible inputs.
-We encourage using our standard [input-date](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/components/input-date/overview.md) for this.
+We encourage using our standard [input-date](https://github.com/ing-bank/lion/blob/a19e02c443e21d4e6c62bb08bbe6db64f7446010/docs/components/input-date/overview.md) for this.
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';
@@ -18,11 +18,11 @@ export const main = () => {
 ## Features
 
 - Input field with a datepicker to help to choose a date
-- Based on our [input-date](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/components/input-date/overview.md)
-- Makes use of our [calendar](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/components/calendar/overview.md) inside the datepicker
-- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/fundamentals/systems/localize/dates.md) for formatting and parsing.
+- Based on our [input-date](https://github.com/ing-bank/lion/blob/a19e02c443e21d4e6c62bb08bbe6db64f7446010/docs/components/input-date/overview.md)
+- Makes use of our [calendar](https://github.com/ing-bank/lion/blob/a19e02c443e21d4e6c62bb08bbe6db64f7446010/docs/components/calendar/overview.md) inside the datepicker
+- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/a19e02c443e21d4e6c62bb08bbe6db64f7446010/docs/fundamentals/systems/localize/dates.md) for formatting and parsing.
 - Option to overwrite locale to change the formatting and parsing
-- Can make use of date specific [validators](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
+- Can make use of date specific [validators](https://github.com/ing-bank/lion/blob/a19e02c443e21d4e6c62bb08bbe6db64f7446010/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
   - IsDate (default)
   - MinDate
   - MaxDate

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

@@ -76,3 +76,14 @@ export const readOnly = () => html`
   </lion-input-datepicker>
 `;
 ```
+
+## Faulty prefilled
+
+Faulty prefilled input will be cleared
+
+```js preview-story
+export const faultyPrefilled = () => html`
+  <lion-input-datepicker label="Faulty prefiiled" .modelValue="${new Date('30/01/2022')}">
+  </lion-input-datepicker>
+`;
+```

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

@@ -15,8 +15,8 @@ export const main = () => {
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/components/input/overview.md)
-- Makes use of email [validators](https://github.com/ing-bank/lion/blob/ede8412cbca3f6dd025797336745330f31706ad3/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
+- Based on our [input](https://github.com/ing-bank/lion/blob/a19e02c443e21d4e6c62bb08bbe6db64f7446010/docs/components/input/overview.md)
+- Makes use of email [validators](https://github.com/ing-bank/lion/blob/a19e02c443e21d4e6c62bb08bbe6db64f7446010/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
   - IsEmail (default)
 
 ## Installation

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

@@ -0,0 +1,3 @@
+# Input File ||20
+
+-> go to Overview

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/a19e02c443e21d4e6c62bb08bbe6db64f7446010/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',
+  },
+});
+```