npm package: @finlexlabs/file-manager
Description: Library Name: finlex-file-manager Package Name: @finlexlabs/file-manager Repo Name: fx-ng-components
Latest version: 0.0.32

# FinlexFileManager (@finlexlabs/file-manager)

Library Name: finlex-file-manager
Package Name: @finlexlabs/file-manager
Repo Name: fx-ng-components

--------------------------------
Steps to Build & Publish Library
--------------------------------

## Package Renaming

Go to `src/finlex-file-manager/package.json`
Rename package name from `finlex-file-manager` to `@finlexlabs/file-manager`


## Build

 `npm run build:file-manager`

It will build finlex-file-manager using ng-packagr.
The build artifacts will be stored in the `dist/` directory.


## Publishing

After building your library with `npm run build:file-manager`, go to the dist folder `cd dist/finlex-file-manager` and run `npm publish`.

--
# Finlex File Manager

## Input bindings for <finlex-form-control> component
1. fileManagerBaseUrl (type: string, required: true) -> File Manager endpoint with GET, POST and PUT, DELETE methods.
2. componentType: (type: string, required: true) -> The entity name and path
3. componentId: (type: string, required: true) -> The entity id
4. componentIds: (type: Array<string>, required: false) -> List of entity ids
5. editMode: (type: boolean, required: false) -> Show the file uploader when edit mode is true.
6. useOldRoutes: (type: boolean, required: false) -> 
   *  true: use routes of file-manager inside contract-manager
   *  false/default: use new routes under s3-integration-service
7. additionalReferences (type: Array<AdditionalReference>, required: false) -> To pass aditional references for the same file.
8. displayConfig (type: FileManagerDisplayConfig, required: false) -> To change the default look and feel behavior of the files list.
9. defaultFileCategory (type: string, required: false) -> To save file category name with the file and file reference.
9. showLatestFileOnly (type: boolean, required: false) -> To show only the latest file (1 only).

## Display config
The display config has the following properties which can be used to hide specific elements:
* informationBar -> The information bar including the cagtegory filter and total file sizes.
* category -> The category name next in the files list.
* viewButton -> The view button in the files list.
* downloadButton -> The download button in the files list.
* deleteButton -> The delete button in the files list.
* fileSize -> The individual file size below the file name in the files list.

Additionally following properties can also be passed to change the look and feel
* disableHoverMode -> The overall hover mode gets disabled which includes the show and hide of view, download, and delete button.
* fileIcon -> The file icon before the file name in the files list. A mat icon name is required here.
* themeColor -> The color in hex format.
* filesListPosition -> 4 possibilities to show the files list: TOP, BOTTOM, LEFT, RIGHT. Default is Right.

An example of display config.
```
  fileManagerDisplayConfig: FileManagerDisplayConfig = {
    hide: {
      informationBar: true,
      fileSize: true,
      category: true,
      deleteButton: true,
    },
    disableHoverMode: true,
    fileIcon: 'picture_as_pdf',
    themeColor: '#FF0000',
  }
```